:root{
  --ink:#101214;
  --paper:#f6f3eb;
  --paper2:#ece8dd;
  --line:#c6c1b6;
  --muted:#6f6f68;
  --white:#fff;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.site-header{
  position:sticky;top:0;z-index:100;
  height:74px;padding:0 4vw;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(246,243,235,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)
}
.wordmark,.footer-mark{display:flex;align-items:center;gap:.55rem;letter-spacing:.17em;font-size:.82rem;font-weight:500}
.wordmark b,.footer-mark b{font-weight:400;font-size:1.1rem}
nav{display:flex;align-items:center;gap:1.5rem;text-transform:uppercase;font-size:.68rem;letter-spacing:.13em}
nav a{opacity:.7} nav a:hover{opacity:1}
.nav-cta{opacity:1;border:1px solid var(--ink);padding:.7rem .9rem}

.hero{
  min-height:850px;background:var(--ink);color:#fff;
  padding:90px 4vw 55px;position:relative;overflow:hidden
}
.hero-rule{position:absolute;left:4vw;right:4vw;top:35px;height:1px;background:#4b4e50}
.hero-copy{max-width:900px;position:relative;z-index:2}
.eyebrow,.section-label{font-size:.67rem;letter-spacing:.24em;font-weight:700;text-transform:uppercase}
.hero h1{font-size:clamp(3.7rem,7vw,7.5rem);line-height:.9;letter-spacing:-.055em;margin:.65rem 0 1.35rem}
.hero h1 span{color:#9a9d9e}
.lede{max-width:780px;color:#c5c6c3;font-size:1.05rem;line-height:1.65}
.hero-actions,.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.button{display:inline-flex;align-items:center;justify-content:center;padding:.93rem 1.15rem;border:1px solid rgba(255,255,255,.35);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.button.primary{background:#fff;color:var(--ink)}
.button.secondary{color:#fff}
.hero-board{position:relative;width:min(1160px,92vw);height:420px;margin:60px 0 0 auto}
.drawing{position:absolute;background:#fff;padding:8px;box-shadow:0 18px 48px rgba(0,0,0,.35);border:1px solid #6c6c6c;overflow:hidden}
.drawing img{width:100%;height:100%;object-fit:contain;filter:grayscale(1)}
.drawing.main{left:0;bottom:0;width:62%;height:91%}
.drawing.detail-a{right:0;top:0;width:35%;height:45%}
.drawing.detail-b{right:3%;bottom:5%;width:37%;height:47%}
.drawing.detail-c{left:14%;bottom:-4%;width:48%;height:23%}

.capability-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid var(--line)}
.capability-strip div{padding:25px 26px;border-right:1px solid var(--line);min-height:120px}
.capability-strip span{font-family:monospace;font-size:.68rem;color:#8a8881}
.capability-strip strong{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 7px}
.capability-strip em{font-style:normal;color:#777;font-size:.76rem;line-height:1.45}

.section{padding:100px 4vw;max-width:var(--max);margin:auto}
.section-label{margin-bottom:24px;color:#5d5d58}
.statement-grid,.about-grid,.field-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw}
h2{font-size:clamp(2.5rem,5vw,4.9rem);letter-spacing:-.047em;line-height:.98;margin:.1rem 0 1rem}
.statement p,.about p,.field p{font-size:1rem;line-height:1.72;color:#50514c}
.statement-grid>div:last-child{padding-top:7px}

.services{padding-top:30px}
.service-list{border-top:1px solid var(--line)}
.service-list article{display:grid;grid-template-columns:72px minmax(260px,.7fr) 1fr;gap:28px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
.service-list .num{font-family:monospace;color:#777;font-size:.72rem;padding-top:5px}
.service-list h3{margin:0;font-size:1.42rem;font-weight:500}
.service-list p{margin:0;color:#575850;font-size:.91rem;line-height:1.6}

.work{background:var(--ink);color:#fff;padding:100px 4vw}
.work-inner{max-width:var(--max);margin:auto}
.light-label{color:#aaa}
.work-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;margin-bottom:48px}
.work-intro p{color:#aaa;line-height:1.7}
.work-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.work-grid figure{margin:0;background:#f8f8f5;color:var(--ink);padding:12px;display:flex;flex-direction:column;min-height:320px}
.work-grid .hero-work{grid-row:span 2;min-height:660px}
.work-grid img{width:100%;height:100%;object-fit:contain;flex:1}
.work-grid figcaption{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ddd;padding:12px 4px 2px}
.work-grid figcaption b{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.work-grid figcaption span{font-size:.7rem;color:#777;text-align:right}

.field-grid{align-items:start}
.field-card{background:#fff;border:1px solid var(--line);padding:32px}
.field-card>span{font-size:.67rem;letter-spacing:.15em;font-weight:700}
.field-card ul{list-style:none;margin:28px 0;padding:0;border-top:1px solid var(--line)}
.field-card li{padding:13px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.field-card .small{font-size:.76rem;color:#777;line-height:1.55;margin-top:24px}

.process{border-top:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.process-grid>div{padding:30px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:220px}
.process-grid span{font-family:monospace;font-size:.68rem;color:#888}
.process-grid h3{font-size:1.1rem;margin:42px 0 12px}
.process-grid p{font-size:.86rem;line-height:1.55;color:#666}

.about{border-top:1px solid var(--line)}
.software{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-family:monospace;font-size:.76rem;line-height:1.8}
.future{font-size:.8rem!important;color:#777!important;margin-top:12px}

.cta{max-width:none;background:var(--ink);color:#fff;padding:100px max(4vw,calc((100vw - var(--max))/2))}
.cta h2{max-width:1100px}.cta h2 span{color:#888}.cta>p{color:#aaa}
.text-link{display:flex;align-items:center;text-transform:uppercase;font-size:.72rem;letter-spacing:.09em;color:#ccc;font-weight:700}

footer{background:#090a0b;color:#888;padding:34px 4vw;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:950px){
  nav a:not(.nav-cta){display:none}
  .hero{min-height:auto}
  .hero-board{height:560px;width:100%}
  .drawing.main{width:92%;height:48%;top:0;left:0}
  .drawing.detail-a{width:52%;height:30%;top:43%;right:0}
  .drawing.detail-b{width:58%;height:30%;left:0;bottom:0}
  .drawing.detail-c{display:none}
  .capability-strip{grid-template-columns:1fr 1fr}
  .statement-grid,.about-grid,.field-grid,.work-intro{grid-template-columns:1fr;gap:28px}
  .service-list article{grid-template-columns:55px 1fr}
  .service-list p{grid-column:2}
  .process-grid{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:1fr}
  .work-grid .hero-work{min-height:460px;grid-row:auto}
}
@media(max-width:600px){
  .site-header{padding:0 20px}
  .wordmark{font-size:.68rem;letter-spacing:.11em}
  .hero,.section,.work{padding-left:20px;padding-right:20px}
  .hero h1{font-size:3.15rem}
  .capability-strip{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .service-list article{grid-template-columns:1fr;gap:10px}
  .service-list p{grid-column:auto}
  footer{flex-direction:column;align-items:flex-start}
}