:root {
  --ink: #1b1d1b;
  --paper: #ece9e1;
  --paper-2: #f5f2ea;
  --cement: #b6b3aa;
  --oxide: #a94d32;
  --line: rgba(27,29,27,.22);
  --line-dark: rgba(236,233,225,.2);
  --max: 1500px;
  --gutter: clamp(20px, 4vw, 68px);
  --display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Arial, sans-serif;
  --text: "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 999;
  transform: translateY(-150%); background: var(--paper-2); color: var(--ink);
  padding: 10px 14px; border: 1px solid var(--ink);
}
.skip-link:focus { transform: translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  min-height: 88px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(236,233,225,.94);
  backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid currentColor; font-family: var(--serif); font-style: italic; font-size: 21px;
}
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.brand-copy strong { font-family: var(--display); font-size: 18px; letter-spacing: .09em; }
.brand-copy small { margin-top: 5px; font-size: 9px; letter-spacing: .28em; }
.main-nav { display: flex; align-items: center; gap: clamp(22px,3vw,48px); }
.main-nav a { text-decoration:none; font-size: 12px; text-transform:uppercase; letter-spacing:.13em; }
.main-nav a:hover, .main-nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.nav-toggle { display:none; border:0; background:none; padding:10px; }
.nav-toggle span:not(.sr-only) { display:block; width:24px; height:1px; background:var(--ink); margin:6px 0; }

.hero {
  position: relative; min-height: calc(100vh - 88px); overflow:hidden;
  display:grid; grid-template-columns: 1.08fr .92fr; max-width: var(--max); margin: 0 auto;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.hero-grid { position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 10% 100%, 100% 12.5%;
}
.hero-copy { position:relative; z-index:1; padding: clamp(80px,10vw,160px) var(--gutter) 70px; align-self:end; }
.eyebrow,.kicker { margin:0 0 28px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; }
.hero h1 { margin:0; font-family:var(--display); font-size:clamp(52px,7vw,112px); line-height:.88; letter-spacing:-.055em; font-weight:700; text-transform:uppercase; }
.hero h1 em { display:block; margin-top:.14em; font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:-.04em; }
.hero-intro { max-width: 580px; margin: 42px 0 32px; font-size:clamp(16px,1.3vw,20px); line-height:1.55; }
.text-link { display:inline-flex; gap:14px; align-items:center; padding-bottom:6px; border-bottom:1px solid currentColor; text-decoration:none; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.text-link span { font-size:17px; transition:transform .2s ease; }
.text-link:hover span { transform:translate(4px,4px); }

.hero-object { position:relative; min-height:560px; background:var(--ink); overflow:hidden; }
.beam,.slab { position:absolute; }
.beam { background:var(--oxide); transform-origin:center; }
.beam-a { width:78%; height:11%; right:-6%; top:20%; transform:rotate(-18deg); }
.beam-b { width:82%; height:7%; left:-24%; bottom:25%; transform:rotate(36deg); background:var(--paper); }
.slab-a { width:45%; height:56%; left:17%; top:24%; border:1px solid rgba(236,233,225,.6); background:linear-gradient(135deg, rgba(236,233,225,.08), rgba(236,233,225,.015)); }
.slab-b { width:24%; height:72%; right:9%; top:14%; border:1px solid rgba(236,233,225,.22); background:rgba(236,233,225,.035); }
.measure { position:absolute; right:24px; bottom:22px; color:var(--paper); font: 10px/1 var(--text); letter-spacing:.18em; }

.statement { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns: 90px 1.15fr .85fr; gap:var(--gutter); padding:110px var(--gutter); border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-index { margin:0; font-family:var(--serif); font-style:italic; font-size:14px; }
.section-index.light,.kicker.light { color:rgba(236,233,225,.62); }
.statement h2,.section-heading h2,.projects h2,.contact h2,.method h2 { margin:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(40px,5.5vw,84px); line-height:.92; letter-spacing:-.045em; }
.statement-copy { margin:44px 0 0; font-size:clamp(17px,1.25vw,21px); line-height:1.6; max-width:560px; }

.services { max-width:var(--max); margin:0 auto; padding:90px var(--gutter) 120px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:90px 1fr; gap:var(--gutter); align-items:end; margin-bottom:70px; }
.service-row { display:grid; grid-template-columns:90px minmax(240px,.8fr) 1fr; gap:var(--gutter); align-items:start; padding:34px 0; border-top:1px solid var(--ink); }
.service-row:last-child { border-bottom:1px solid var(--ink); }
.service-no { font-family:var(--serif); font-style:italic; }
.service-row h3 { margin:0; font:700 clamp(28px,3vw,52px)/.95 var(--display); text-transform:uppercase; letter-spacing:-.035em; }
.service-row p { margin:0; max-width:620px; line-height:1.6; font-size:15px; }

.method { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns: .9fr 1.1fr; background:var(--ink); color:var(--paper); }
.method-panel { padding:90px var(--gutter); border-right:1px solid var(--line-dark); }
.method-panel h2 { margin-top:56px; max-width:650px; }
.method-steps { list-style:none; padding:0; margin:0; }
.method-steps li { display:grid; grid-template-columns:75px 1fr; gap:24px; padding:38px var(--gutter); border-bottom:1px solid var(--line-dark); }
.method-steps li:last-child { border-bottom:0; }
.method-steps span { font-family:var(--serif); font-style:italic; color:rgba(236,233,225,.55); }
.method-steps strong { display:block; font:700 26px/1 var(--display); text-transform:uppercase; letter-spacing:-.025em; }
.method-steps p { margin:10px 0 0; color:rgba(236,233,225,.72); line-height:1.5; }

.projects { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.projects-copy { padding:100px var(--gutter); }
.projects-copy h2 { margin:52px 0 30px; }
.projects-copy > p:last-child { max-width:540px; line-height:1.6; }
.project-composition { min-height:700px; position:relative; overflow:hidden; background:#d6d1c7; }
.material { position:absolute; display:flex; align-items:flex-end; padding:18px; font-size:9px; letter-spacing:.22em; color:var(--paper); }
.material-1 { width:58%; height:68%; left:7%; top:12%; background:linear-gradient(145deg,#8e8c85,#595b56); }
.material-2 { width:44%; height:42%; right:4%; bottom:8%; background:repeating-linear-gradient(90deg,#8f6544 0,#8f6544 12px,#7a5438 13px,#7a5438 18px); }
.material-3 { width:17%; height:80%; right:11%; top:3%; background:linear-gradient(90deg,#3f4340,#242724,#5c605c); mix-blend-mode:multiply; }

.contact { max-width:var(--max); margin:0 auto; background:var(--oxide); color:var(--paper); display:grid; grid-template-columns:90px 1.2fr .8fr; gap:var(--gutter); padding:100px var(--gutter); }
.contact-empty { min-height:560px; }
.contact-main h2 { margin-top:26px; max-width:850px; }
.contact-note { max-width:600px; color:rgba(245,242,234,.75); line-height:1.6; margin-top:28px; }
.contact-meta { align-self:end; }
.contact-meta > div { padding:22px 0; border-top:1px solid rgba(245,242,234,.38); }
.contact-meta > div:last-child { border-bottom:1px solid rgba(245,242,234,.38); }
.contact-meta span { display:block; font-size:9px; letter-spacing:.2em; margin-bottom:8px; color:rgba(245,242,234,.65); }
.contact-meta strong { font-size:16px; font-weight:500; }

.site-footer { max-width:var(--max); margin:0 auto; min-height:160px; padding:38px var(--gutter); display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:40px; background:var(--paper-2); border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.site-footer p,.site-footer>a { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.site-footer>a { text-decoration:none; }

:focus-visible { outline:2px solid var(--oxide); outline-offset:4px; }

@media (max-width: 900px) {
  .site-header { min-height:72px; }
  .main-nav { position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--paper-2); border-bottom:1px solid var(--ink); transform:translateY(-140%); transition:transform .25s ease; }
  .main-nav.is-open { transform:translateY(0); }
  .main-nav a { width:100%; padding:20px var(--gutter); border-top:1px solid var(--line); font-size:13px; }
  .nav-toggle { display:block; }
  .hero { min-height:auto; grid-template-columns:1fr; }
  .hero-copy { padding-top:88px; min-height:620px; display:flex; flex-direction:column; justify-content:flex-end; }
  .hero-object { min-height:460px; }
  .statement { grid-template-columns:50px 1fr; }
  .statement-copy { grid-column:2; margin-top:0; }
  .section-heading { grid-template-columns:50px 1fr; }
  .service-row { grid-template-columns:50px 1fr; }
  .service-row p { grid-column:2; }
  .method,.projects { grid-template-columns:1fr; }
  .method-panel { border-right:0; border-bottom:1px solid var(--line-dark); }
  .project-composition { min-height:520px; }
  .contact { grid-template-columns:50px 1fr; }
  .contact-empty { min-height:420px; }
  .contact-meta { grid-column:2; }
  .site-footer { grid-template-columns:1fr; gap:18px; }
}

@media (max-width: 560px) {
  .brand-copy strong { font-size:15px; }
  .brand-mark { width:34px; height:34px; }
  .hero h1 { font-size:clamp(47px,15vw,74px); }
  .statement,.services,.projects-copy,.method-panel,.contact { padding-left:20px; padding-right:20px; }
  .contact-empty { min-height:320px; }
  .statement,.section-heading,.contact { grid-template-columns:34px 1fr; gap:18px; }
  .service-row { grid-template-columns:34px 1fr; gap:18px; }
  .method-steps li { grid-template-columns:42px 1fr; padding-left:20px; padding-right:20px; }
  .contact-meta { grid-column:1 / -1; }
}

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