*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#101414;color:#f3efe7;font-family:'DM Sans',sans-serif}
.site-bar {
  position:sticky;
  top:0;
  z-index:20;
  min-height:122px;
  padding:0 clamp(22px,5vw,88px);
  background:#101414;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(238,229,208,.15);
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img {
  display:block;
  height:clamp(76px,7.6vw,108px);
  width:auto;
  max-width:none;
  object-fit:contain;
  background:none;
  padding:0;
  filter:invert(1) contrast(1.22) brightness(.74) sepia(1) saturate(1.15) hue-rotate(-6deg) brightness(.96);
  mix-blend-mode:screen;
}
.bar-action {
  color:#e9d5af;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  white-space:nowrap;
}
.bar-action span{padding-left:10px;font-size:16px;vertical-align:-1px}
.hero {
  position:relative;
  min-height:calc(100svh - 122px);
  display:flex;
  align-items:center;
  background:#171a19 url('assets/hero.jpg') center center/cover no-repeat;
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,13,13,.94) 0%,rgba(8,13,13,.8) 30%,rgba(8,13,13,.27) 65%,transparent 90%);
}
.hero-content{position:relative;z-index:1;padding:80px clamp(22px,8vw,142px);max-width:1060px}
.eyebrow{margin:0 0 28px;font-size:11px;letter-spacing:.32em;font-weight:700;color:#dec298}
.hero h1 {
  font:400 clamp(62px,7vw,112px)/.99 'Italiana',serif;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
.rule{width:74px;height:1px;background:#d8bb8e;margin:38px 0 24px}
.hero-line {
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
  max-width:590px;
  margin:0 0 34px;
  color:#e4ded4;
}
.button {
  display:inline-flex;
  align-items:center;
  gap:25px;
  width:max-content;
  background:#d6b989;
  color:#141716;
  padding:18px 24px;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.1em;
  font-weight:700;
  border:0;
  cursor:pointer;
  font-family:inherit;
  transition:background .2s,transform .2s;
}
.button:hover{background:#f1d7ad;transform:translateY(-2px)}
.button:disabled{opacity:.6;cursor:default;transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid #e9d5af;
  outline-offset:3px;
}
.work {
  scroll-margin-top:122px;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#ded4c3;
  color:#171918;
}
.work-photo{position:relative}
.work-photo img {
  position:sticky;
  top:122px;
  width:100%;
  height:calc(100svh - 122px);
  min-height:550px;
  object-fit:cover;
  display:block;
}
.work-copy{padding:clamp(48px,6vw,100px) clamp(30px,6vw,110px)}
.work-copy h2 {
  font:400 clamp(39px,4vw,66px)/1.09 'Italiana',serif;
  letter-spacing:-.025em;
  margin:0 0 28px;
}
.work-copy h3{font:400 clamp(32px,3vw,48px)/1.15 'Italiana',serif;margin:65px 0 20px;color:#624c33}
.work-copy p{font-size:16px;line-height:1.8;margin:0 0 18px}
.work-divider{height:1px;background:#a99475;margin:55px 0}
.work-copy dl{margin:0}
.work-copy dt{font-weight:700;font-size:14px;letter-spacing:.04em;margin:24px 0 5px}
.work-copy dd{margin:0;font-size:15px;line-height:1.7}
.close {
  scroll-margin-top:122px;
  background:#101414;
  padding:clamp(70px,8vw,120px) clamp(22px,8vw,142px) 75px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}
.close-name{font:400 clamp(32px,4vw,60px)/1 'Italiana',serif;margin:0 0 38px}
.close h2{font:400 clamp(42px,5vw,75px)/1.08 'Italiana',serif;margin:0 0 22px}
.close p:not(.close-name){font-size:17px;line-height:1.6;color:#ded8cf;max-width:580px}
.close .footer-line {
  margin-top:75px;
  color:#d6b989!important;
  font-size:13px!important;
  letter-spacing:.09em;
}
.close .button{flex-shrink:0}

/* Showcase — six types of work */
.showcase {
  scroll-margin-top:122px;
  background:#101414;
  border-top:1px solid rgba(238,229,208,.14);
  padding:clamp(70px,8vw,120px) clamp(22px,8vw,142px);
}
.showcase-head{max-width:900px;margin:0 0 clamp(40px,5vw,64px)}
.showcase-head h2 {
  font:400 clamp(38px,4.4vw,68px)/1.08 'Italiana',serif;
  letter-spacing:-.025em;
  margin:0;
}
.show-hint{margin:22px 0 0;font-size:13.5px;line-height:1.6;letter-spacing:.03em;color:#b9b2a6}
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px)}
.show-card{display:flex;flex-direction:column}
.show-frame {
  position:relative;
  aspect-ratio:16/9;
  background:#171c1b;
  border:1px solid rgba(233,213,175,.18);
  overflow:hidden;
}
.show-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.show-empty {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#171c1b,#101414);
}
.show-empty p {
  margin:0;
  font-size:10.5px;
  letter-spacing:.24em;
  font-weight:700;
  color:#7d776c;
  text-transform:uppercase;
}
.show-title{font:400 clamp(22px,2vw,30px)/1.2 'Italiana',serif;margin:20px 0 0;color:#f3efe7}

/* Pillars — three bordered boxes */
.pillars {
  scroll-margin-top:122px;
  background:#101414;
  border-top:1px solid rgba(238,229,208,.14);
  padding:clamp(70px,8vw,120px) clamp(22px,8vw,142px);
}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px)}
.pillar {
  border:1px solid rgba(233,213,175,.3);
  background:rgba(233,213,175,.035);
  padding:clamp(28px,3vw,46px);
}
.pillar h3{font:400 clamp(26px,2.4vw,36px)/1.15 'Italiana',serif;margin:0 0 22px;color:#e9d5af}
.pillar ul{margin:0;padding:0;list-style:none}
.pillar li {
  font-size:15.5px;
  line-height:1.7;
  color:#ded8cf;
  padding:13px 0;
  border-top:1px solid rgba(238,229,208,.13);
}
.pillar li:first-child{border-top:0;padding-top:0}

/* Burdenless — make it burdenless */
.burdenless {
  scroll-margin-top:122px;
  background:#101414;
  border-top:1px solid rgba(238,229,208,.14);
  padding:clamp(70px,8vw,120px) clamp(22px,8vw,142px) 0;
}
.burden-head{max-width:900px;margin:0 0 clamp(36px,4vw,56px)}
.burden-head h2 {
  font:400 clamp(38px,4.4vw,68px)/1.08 'Italiana',serif;
  letter-spacing:-.025em;
  margin:0;
}
.burden-lede{margin:22px 0 0;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:#e4ded4}
.burden-body {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,4vw,64px);
  align-items:center;
  margin:0 0 clamp(46px,5vw,72px);
}
.burden-photo img {
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
  display:block;
  border:1px solid rgba(233,213,175,.18);
}
.burden-copy p{font-size:16px;line-height:1.8;margin:0 0 18px;color:#ded8cf}
.burden-strong{font-weight:700;color:#e9d5af!important}
.burden-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,48px);
  border-top:1px solid rgba(238,229,208,.14);
  padding-top:clamp(36px,4vw,56px);
}
.burden-block h3 {
  font:400 clamp(26px,2.4vw,36px)/1.15 'Italiana',serif;
  margin:0 0 18px;
  color:#e9d5af;
}
.burden-block p{font-size:15.5px;line-height:1.8;margin:0 0 16px;color:#ded8cf}
.burden-block ul{margin:0 0 18px;padding-left:20px}
.burden-block li{font-size:15.5px;line-height:1.75;margin:0 0 8px;color:#ded8cf}
.burden-close {
  margin-top:clamp(46px,5vw,72px);
  border-top:1px solid rgba(238,229,208,.14);
  padding-top:clamp(36px,4vw,56px);
  max-width:900px;
}
.burden-close h3{font:400 clamp(30px,3vw,46px)/1.12 'Italiana',serif;margin:0 0 18px}
.burden-close p{font-size:16px;line-height:1.8;margin:0;color:#ded8cf}

/* Talk form */
body.talk-open{overflow:hidden}
.talk-modal {
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,4vw,48px);
  opacity:0;
  transition:opacity .22s ease;
}
.talk-modal[hidden]{display:none}
.talk-modal.is-open{opacity:1}
.talk-backdrop{position:absolute;inset:0;background:rgba(5,9,9,.82);backdrop-filter:blur(3px)}
.talk-card {
  position:relative;
  width:min(720px,100%);
  max-height:calc(100svh - 40px);
  overflow-y:auto;
  background:#141918;
  border:1px solid rgba(233,213,175,.22);
  border-top:3px solid #d6b989;
  padding:clamp(28px,4vw,52px);
  transform:translateY(14px);
  transition:transform .24s ease;
}
.talk-modal.is-open .talk-card{transform:translateY(0)}
.talk-close {
  position:absolute;
  top:12px;
  right:16px;
  background:none;
  border:0;
  color:#e9d5af;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  padding:6px 8px;
  font-family:inherit;
}
.talk-close:hover{color:#fff}
.talk-card h2 {
  font:400 clamp(30px,3.4vw,44px)/1.1 'Italiana',serif;
  margin:0 0 14px;
  letter-spacing:-.02em;
}
.talk-sub{margin:0 0 32px;color:#d5cfc6;font-size:15px;line-height:1.6}
.talk-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:flex;flex-direction:column}
.field-wide{grid-column:1/-1}
.field label {
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700;
  color:#dec298;
  margin-bottom:9px;
  text-transform:uppercase;
}
.field input,.field textarea {
  background:#0e1211;
  border:1px solid rgba(233,213,175,.24);
  color:#f3efe7;
  font-family:inherit;
  font-size:15px;
  padding:14px 15px;
  width:100%;
  resize:vertical;
  transition:border-color .18s,background .18s;
}
.field input:focus,.field textarea:focus{border-color:#d6b989;background:#111615;outline:none}
.field input.has-error,.field textarea.has-error{border-color:#e08175;background:#1a1413}
.field-error{margin:8px 0 0;font-size:12.5px;color:#f0a096;letter-spacing:.01em}
.talk-status{margin:16px 0 0;font-size:13.5px;color:#e9d5af;letter-spacing:.02em;min-height:18px}
.talk-status.is-error{color:#f0a096}
@media(max-width:1000px) {
  .showcase-grid{grid-template-columns:repeat(2,1fr)}
  .pillars-grid{grid-template-columns:1fr}
  .burden-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px) {
  .close{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px) {
  .work{grid-template-columns:1fr}
  .work-photo img{position:static;height:370px;min-height:0}
  .work-copy{padding:54px 24px 85px}
  .close{padding:70px 24px}
  .talk-form{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
  .showcase{scroll-margin-top:96px}
  .pillars-grid{grid-template-columns:1fr}
  .pillars{scroll-margin-top:96px}
  .burden-body{grid-template-columns:1fr}
  .burden-grid{grid-template-columns:1fr}
  .burdenless{scroll-margin-top:96px}
}
@media(max-width:600px) {
  .site-bar{min-height:104px}
  .brand img{height:72px}
  .bar-action{font-size:9px;letter-spacing:.13em}
  .hero{min-height:calc(100svh - 104px);background-position:62% center}
  .hero::before {
    background:linear-gradient(90deg,rgba(8,13,13,.91),rgba(8,13,13,.66) 65%,rgba(8,13,13,.3));
  }
  .hero-content{padding:62px 24px}
  .hero h1{font-size:clamp(55px,12vw,80px)}
  .eyebrow{font-size:9px}
  .work,.close{scroll-margin-top:96px}
}