:root{
  --ink:#111111;
  --paper:#f5f4ef;
  --paper-2:#eeede7;
  --muted:#60605c;
  --line:#c9c8c2;
  --accent:#e53922;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}
a{color:inherit}
.frame{max-width:var(--max);margin:0 auto;padding-left:32px;padding-right:32px}
.site-header{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--ink);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:700;
}
.brand,.site-header a{text-decoration:none}
.site-header nav{display:flex;gap:28px}
.site-header nav a:hover,.brand:hover{color:var(--accent)}
.eyebrow,.section-label,.project-kicker{
  margin:0;
  font-size:10px;
  letter-spacing:.22em;
  font-weight:700;
  text-transform:uppercase;
}
.eyebrow,.project-kicker{color:var(--accent)}
.hero{
  min-height:700px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:78px;
  padding-bottom:64px;
  border-bottom:1px solid var(--ink);
}
.hero h1{
  max-width:1100px;
  margin:26px 0 56px;
  font-family:"Inter Tight","Arial Narrow",Arial,sans-serif;
  font-size:clamp(64px,9.4vw,132px);
  line-height:.86;
  letter-spacing:-.035em;
  font-weight:700;
}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  align-items:start;
}
.hero-intro{
  grid-column:3/span 7;
  max-width:820px;
  margin:0;
  font-size:21px;
  line-height:1.48;
  letter-spacing:-.018em;
}
.hero-actions{
  grid-column:10/span 3;
  border-top:4px solid var(--ink);
  padding-top:13px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.hero-actions a{text-decoration:none;border-bottom:1px solid var(--line);padding:7px 0}
.hero-actions a:hover{color:var(--accent);border-color:var(--accent)}
.work,.approach,.capabilities,.contact{padding-top:82px;padding-bottom:92px;border-bottom:1px solid var(--ink)}
.section-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  margin-bottom:62px;
}
.section-head .section-label{grid-column:1/span 2;align-self:start;white-space:nowrap}
.section-head h2{
  grid-column:3/span 8;
  margin:0;
  font-family:"Inter Tight","Arial Narrow",Arial,sans-serif;
  font-size:clamp(44px,6.2vw,86px);
  line-height:.93;
  letter-spacing:-.03em;
}
.project-list{border-top:1px solid var(--ink)}
.project{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  padding:36px 0 42px;
  border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.project:hover{background:rgba(0,0,0,.018)}
.project-no{grid-column:1/span 1;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.project-main{grid-column:3/span 7}
.project-main h3{
  margin:12px 0 15px;
  font-family:"Inter Tight","Arial Narrow",Arial,sans-serif;
  font-size:clamp(36px,5vw,68px);
  line-height:.9;
  letter-spacing:-.03em;
}
.project-main p:last-child{max-width:760px;margin:0;font-size:17px;line-height:1.55;color:#30302e}
.project-side{
  grid-column:10/span 3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  min-height:125px;
  border-left:1px solid var(--ink);
  padding-left:18px;
}
.project-side span{font-size:10px;line-height:1.55;letter-spacing:.12em;font-weight:700;color:var(--muted)}
.project-side a{margin-top:26px;font-size:11px;letter-spacing:.08em;font-weight:700;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.project-side a:hover{color:var(--accent);border-color:var(--accent)}
.featured .project-side{border-left-color:var(--accent)}
.approach{background:var(--ink);color:#fff;max-width:none;padding-left:max(32px,calc((100vw - var(--max))/2 + 32px));padding-right:max(32px,calc((100vw - var(--max))/2 + 32px))}
.approach .section-head{max-width:1216px;margin-left:auto;margin-right:auto}
.approach .section-label{color:#ff5941}
.approach-head h2{color:#fff}
.principles{max-width:1216px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #585854;border-left:1px solid #585854}
.principles article{padding:30px 28px 34px;border-right:1px solid #585854;border-bottom:1px solid #585854;min-height:300px}
.principles span,.cap-grid span{display:block;color:#ff5941;font-size:10px;letter-spacing:.16em;font-weight:700}
.principles h3{margin:46px 0 16px;font-family:"Inter Tight",Arial,sans-serif;font-size:27px;letter-spacing:-.03em}
.principles p{margin:0;color:#d8d8d3;line-height:1.62}
.compact-head h2{grid-column:3/span 9;font-size:clamp(42px,5.6vw,74px)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.cap-grid article{min-height:215px;padding:24px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.cap-grid h3{font-family:"Inter Tight",Arial,sans-serif;font-size:23px;line-height:1.08;letter-spacing:-.025em;margin:38px 0 12px}
.cap-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.contact{padding-top:96px;padding-bottom:100px}
.contact .section-label{color:var(--accent)}
.contact h2{
  max-width:1060px;
  margin:26px 0 54px;
  font-family:"Inter Tight","Arial Narrow",Arial,sans-serif;
  font-size:clamp(58px,8.5vw,118px);
  line-height:.86;
  letter-spacing:-.035em;
}
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.contact-grid>p{grid-column:3/span 7;max-width:780px;margin:0;font-size:20px;line-height:1.5;letter-spacing:-.015em}
.contact-links{grid-column:10/span 3;border-top:4px solid var(--ink);padding-top:13px;display:flex;flex-direction:column}
.contact-links a{text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.06em;padding:9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.contact-links a:hover{color:var(--accent);border-color:var(--accent)}
.footer{min-height:120px;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.14em}
@media(max-width:850px){
  .frame{padding-left:20px;padding-right:20px}
  .site-header{min-height:70px}
  .site-header nav{gap:14px}
  .site-header nav a:nth-child(2){display:none}
  .hero{min-height:620px;padding-top:60px}
  .hero h1{font-size:clamp(58px,16vw,92px);margin-bottom:42px}
  .hero-grid,.section-head,.project,.contact-grid{display:block}
  .hero-intro{font-size:18px}
  .hero-actions{margin-top:34px}
  .section-head h2{margin-top:24px}
  .project-no{margin-bottom:18px}
  .project-main h3{font-size:clamp(39px,12vw,64px)}
  .project-side{margin-top:28px;min-height:0;border-left:0;border-top:1px solid var(--ink);padding:14px 0 0}
  .principles,.cap-grid{grid-template-columns:1fr}
  .approach{padding-left:20px;padding-right:20px}
  .principles article{min-height:auto}
  .contact-grid>p{font-size:18px}
  .contact-links{margin-top:34px}
  .footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
}
@media(max-width:520px){
  .site-header nav a:first-child{display:none}
  .hero h1{font-size:clamp(52px,15.5vw,78px)}
  .work,.approach,.capabilities,.contact{padding-top:64px;padding-bottom:70px}
  .project{padding:28px 0 34px}
}