:root {
  --paper: #f3f0e8;
  --paper-deep: #e7e1d4;
  --ink: #171a1d;
  --muted: #656863;
  --graphite: #343a3e;
  --line: rgba(23, 26, 29, 0.18);
  --load: #d8772f;
  --reaction: #2e765c;
  --compression: #315f89;
  --tension: #a74938;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
a { color: inherit; }
.site-header, main, footer { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }
.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 750; letter-spacing: -.02em; text-decoration: none; }
.wordmark small { color: var(--muted); font: inherit; font-weight: 500; }
.wordmark-mark { width: 17px; height: 28px; border: 2px solid var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
nav { display: flex; gap: 30px; }
nav a { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
nav a:hover, nav a:focus-visible { color: var(--ink); }

.hero { min-height: 690px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); border-bottom: 1px solid var(--line); }
.hero-copy { align-self: center; padding: 90px 8vw 90px 0; }
.eyebrow { margin: 0 0 22px; color: var(--load); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; max-width: 760px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.4rem, 6.2vw, 7.2rem); font-weight: 400; letter-spacing: -.065em; line-height: .88; }
h1 em { color: var(--load); font-weight: 400; }
.hero-intro { max-width: 590px; margin: 38px 0 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.26rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.primary-action { padding: 15px 20px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 750; letter-spacing: .04em; text-decoration: none; }
.text-action { color: var(--muted); font-size: .8rem; font-weight: 700; text-underline-offset: 5px; }

.hero-structure { position: relative; min-height: 620px; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(circle at 55% 42%, rgba(255,255,255,.72), transparent 50%), linear-gradient(90deg, transparent 49.8%, rgba(23,26,29,.05) 50%, transparent 50.2%); }
.tower-graphic { position: absolute; inset: 10% 18% 8%; }
.leg, .brace { position: absolute; display: block; height: 3px; background: var(--graphite); transform-origin: 0 50%; }
.leg-a { width: 88%; left: 17%; top: 2%; transform: rotate(101deg); }
.leg-b { width: 88%; left: 83%; top: 2%; transform: rotate(79deg); }
.brace { left: 22%; width: 66%; background: rgba(52,58,62,.72); }
.brace-a { top: 24%; transform: rotate(42deg); }
.brace-b { top: 25%; left: 78%; transform: rotate(138deg); }
.brace-c { top: 53%; transform: rotate(31deg); }
.brace-d { top: 54%; left: 78%; transform: rotate(149deg); }
.load-mark { position: absolute; right: 2%; width: 28%; height: 2px; background: var(--load); }
.load-mark::after { content: ""; position: absolute; left: 0; top: -4px; border: 5px solid transparent; border-right-color: var(--load); transform: translateX(-8px); }
.load-1 { top: 20%; }.load-2 { top: 40%; width: 23%; }.load-3 { top: 63%; width: 18%; }
.axis { position: absolute; left: 34px; bottom: 38px; color: var(--muted); font-size: .65rem; }
.axis::before { content: ""; position: absolute; background: var(--line); }
.axis-z { height: 72px; border-left: 1px solid var(--ink); }
.axis-z span { position: absolute; top: -18px; left: -4px; }
.axis-x { width: 72px; border-bottom: 1px solid var(--ink); }
.axis-x span { position: absolute; right: -12px; bottom: -5px; }
.graphic-caption { position: absolute; right: 34px; bottom: 30px; display: grid; gap: 4px; text-align: right; }
.graphic-caption span { color: var(--muted); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.graphic-caption strong { font-family: Georgia, serif; font-size: 1rem; font-weight: 400; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.principles article { min-height: 170px; padding: 34px; border-right: 1px solid var(--line); }
.principles article:last-child { border-right: 0; }
.principles span { color: var(--load); font-size: .65rem; font-weight: 800; }
.principles strong { display: block; margin: 20px 0 10px; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.principles p { max-width: 300px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }

.case-section { padding: 110px 0 120px; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 440px); gap: 50px; align-items: end; margin-bottom: 44px; }
h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.2rem, 4vw, 4.2rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.section-heading > p { margin: 0; color: var(--muted); line-height: 1.6; }
.case-card { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr); min-height: 520px; border: 1px solid var(--line); background: rgba(255,255,255,.22); text-decoration: none; transition: transform .25s ease, background .25s ease; }
.case-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.48); }
.case-card-visual { position: relative; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(145deg, #d9d5ca, #f7f4ed); }
.case-card-visual span { position: absolute; left: 50%; top: 8%; width: 4px; height: 84%; background: var(--graphite); transform: perspective(400px) rotateX(-8deg) skew(-11deg); box-shadow: -108px 110px 0 -1px var(--graphite), 108px 110px 0 -1px var(--graphite); }
.case-card-visual::after { content: ""; position: absolute; inset: 22% 25% 12%; opacity: .56; background: repeating-linear-gradient(28deg, transparent 0 40px, var(--graphite) 41px 43px, transparent 44px 80px), repeating-linear-gradient(-28deg, transparent 0 40px, var(--graphite) 41px 43px, transparent 44px 80px); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); }
.case-card-copy { padding: clamp(36px, 6vw, 86px); }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case-meta span { padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.case-card h3 { margin: 34px 0 20px; font-family: Georgia, serif; font-size: clamp(2rem, 3.4vw, 3.8rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.case-card-copy > p { max-width: 640px; color: var(--muted); line-height: 1.65; }
.case-card dl { margin: 36px 0; border-top: 1px solid var(--line); }
.case-card dl div { display: grid; grid-template-columns: 105px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
.case-card dt { color: var(--muted); }.case-card dd { margin: 0; font-weight: 650; }
.open-label { color: var(--load); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.next-case { margin-top: 24px; padding: 30px 34px; border: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr 2fr 1.2fr; gap: 28px; align-items: center; }
.next-case span, .next-case small { color: var(--muted); font-size: .72rem; }.next-case strong { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 400; }.next-case p { margin: 0; }

footer { min-height: 180px; padding: 46px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 40px; }
footer div { display: grid; gap: 8px; } footer span, footer p { color: var(--muted); font-size: .75rem; } footer p { max-width: 440px; margin: 0; line-height: 1.55; }

@media (max-width: 900px) {
  .site-header, main, footer { width: min(100% - 34px, 1440px); }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-right: 0; }
  .hero-structure { min-height: 500px; border-left: 0; border-top: 1px solid var(--line); }
  .principles { grid-template-columns: 1fr; }.principles article { border-right: 0; border-bottom: 1px solid var(--line); }
  .section-heading, .case-card { grid-template-columns: 1fr; }
  .case-card-visual { min-height: 400px; border-right: 0; border-bottom: 1px solid var(--line); }
  .next-case { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-header { height: 70px; } nav { gap: 14px; } nav a { font-size: .62rem; }
  .hero-copy { padding: 70px 0; } .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-structure { min-height: 430px; }.tower-graphic { inset-inline: 8%; }
  .section-heading { grid-template-columns: 1fr; }.case-section { padding-block: 76px; }
  .case-card-visual { min-height: 320px; }.case-card-copy { padding: 30px 24px; }
  .next-case { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}