:root {
  --ink: #1f2927;
  --ink-soft: #42504c;
  --paper: #f4f0e8;
  --paper-deep: #e8e0d3;
  --line: rgba(31, 41, 39, 0.18);
  --moss: #73856b;
  --clay: #bd1e2d;
  --gold: #c99a2e;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; transform: translateY(-200%); background: var(--ink); color: var(--paper); padding: .7rem 1rem; }
.skip-link:focus { transform: translateY(0); }
.site-header, .site-footer { width: min(1400px, calc(100% - 3rem)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { min-height: 94px; border-bottom: 1px solid var(--line); }
.brand-logo { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo img { display: block; width: 39px; height: 39px; object-fit: contain; }
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.75rem); font-size: .78rem; font-weight: 650; letter-spacing: .02em; }
nav a { text-decoration: none; }
.nav-contact { border-bottom: 1px solid var(--ink); padding-bottom: .18rem; }

.section-shell { width: min(1400px, calc(100% - 3rem)); margin: 0 auto; }
.hero { display: grid; min-height: calc(100vh - 94px); grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(2rem, 6vw, 7rem); padding: 5rem 0 6rem; }
.eyebrow, .section-kicker, .card-index, .hero-art-label, .hero-art-foot { font: 650 .68rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .55rem; color: var(--ink-soft); margin: 0 0 1.8rem; }
.eyebrow-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--moss); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; line-height: .95; }
h1 { max-width: 730px; margin-bottom: 2rem; font-size: clamp(4.1rem, 8.1vw, 8.35rem); }
h1 em, h2 em { color: var(--clay); font-weight: 400; }
.hero-intro { max-width: 540px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.hero-intro strong { color: var(--ink); }
.employer { display: inline-flex; align-items: center; gap: .3em; color: var(--ink); font-weight: 700; white-space: nowrap; }
.employer img { width: 1.05em; height: 1.05em; object-fit: contain; }
.text-link { display: inline-block; margin-top: 1.5rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: .22rem; }
.text-link span { color: var(--clay); padding-left: .35rem; }

.hero-art { position: relative; overflow: hidden; min-height: 480px; background: var(--ink); color: var(--paper); align-self: stretch; }
.hero-art:before { content: ""; position: absolute; inset: 1.2rem; border: 1px solid rgba(244,240,232,.2); pointer-events: none; }
.hero-art svg { position: absolute; inset: 2.8rem 0 1.2rem 0; width: 100%; height: calc(100% - 4rem); }
.hero-art path { stroke: #d8e5d2; stroke-width: 1.2; opacity: .72; }
.hero-art .path-fine { stroke: var(--gold); stroke-width: .65; stroke-dasharray: 3 7; opacity: .65; }
.hero-art circle { fill: var(--ink); stroke: #d8e5d2; stroke-width: 2; }
.hero-art circle.highlight { fill: var(--gold); stroke: var(--paper); }
.hero-art-label { position: absolute; top: 2rem; left: 2rem; z-index: 2; }
.hero-art-label span { color: #a4b2a0; font-weight: 500; }
.hero-art-foot { position: absolute; right: 2rem; bottom: 2rem; color: #a4b2a0; writing-mode: vertical-rl; }
.coordinate { position: absolute; z-index: 2; margin: 0; color: #d8e5d2; font: 500 .65rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.coordinate-one { top: 38%; left: 7%; }.coordinate-two { right: 11%; bottom: 18%; text-align: right; }

.architecture, .beyond, .contact { padding: clamp(5.5rem, 10vw, 10rem) 0; border-top: 1px solid var(--line); }
.section-kicker { display: flex; gap: 1rem; color: var(--ink-soft); }
.section-kicker span:first-child { color: var(--clay); }
.architecture-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 9vw, 10rem); align-items: end; margin: clamp(3rem, 6vw, 6rem) 0; }
h2 { margin-bottom: 0; font-size: clamp(3.5rem, 6vw, 6.5rem); }
.architecture-copy { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; }
.architecture-copy p:last-child { margin-bottom: 0; }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.principles li { min-height: 250px; padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.principles li + li { padding-left: 1.5rem; }.principles li:last-child { border-right: 0; }
.principle-number { color: var(--clay); font: 650 .7rem var(--mono); }
.principles h3 { margin: auto 0 .8rem; font: 400 clamp(1.5rem, 2vw, 2.1rem)/1.05 var(--serif); letter-spacing: -.03em; }
.principles p { margin: 0; max-width: 270px; color: var(--ink-soft); font-size: .9rem; }

.beyond { background: var(--ink); color: var(--paper); width: 100%; padding-left: max(1.5rem, calc((100% - 1400px) / 2)); padding-right: max(1.5rem, calc((100% - 1400px) / 2)); }
.beyond .section-kicker { color: #bec5b6; }.beyond .section-kicker span:first-child { color: #d6ae52; }
.beyond-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 9vw, 10rem); align-items: end; margin: clamp(3rem, 6vw, 6rem) 0; }
.beyond h2 { color: var(--paper); }.beyond h2 em { color: #d7e2cf; }.beyond-heading > p { max-width: 420px; margin: 0; color: #c5cbbf; font-size: 1.1rem; line-height: 1.7; }
.life-grid { display: grid; grid-template-columns: 1.12fr repeat(4, .88fr); gap: 1px; background: rgba(244,240,232,.2); border: 1px solid rgba(244,240,232,.2); }
.life-card { position: relative; min-height: 315px; overflow: hidden; background: var(--ink); padding: 1.4rem; display: flex; flex-direction: column; }
.card-index { color: #a9b6a3; }.life-card-copy { position: relative; z-index: 1; margin-top: auto; }.life-card h3 { margin: 0 0 .5rem; font: 400 clamp(2rem, 3vw, 3.1rem)/1 var(--serif); letter-spacing: -.04em; }.life-card p { max-width: 320px; margin: 0; color: #c5cbbf; font-size: .93rem; }
.endurance-card { background: #788a70; }.endurance-rings { position: absolute; inset: 3.5rem -4rem auto auto; width: 245px; height: 245px; }.endurance-rings span { position: absolute; border: 1px solid rgba(244,240,232,.58); border-radius: 50%; }.endurance-rings span:nth-child(1) { inset: 0; }.endurance-rings span:nth-child(2) { inset: 23%; }.endurance-rings span:nth-child(3) { inset: 46%; background: var(--gold); border: 0; }.endurance-card .card-detail { color: #edf1e9; }
.gaming-card { background: #31433e; }.pixel-field { position: absolute; top: 4.3rem; right: 1.4rem; display: grid; grid-template-columns: repeat(4, 26px); gap: 7px; transform: rotate(-12deg); }.pixel-field span { width: 26px; height: 26px; background: #d9e3d1; }.pixel-field span:nth-child(2), .pixel-field span:nth-child(5), .pixel-field span:nth-child(7) { background: var(--clay); }.pixel-field span:nth-child(3), .pixel-field span:nth-child(6) { opacity: .25; }.gaming-card .card-detail { color: #d9e3d1; }
.arsenal-card { background: #a91929; }.arsenal-card .card-index { color: #f0c96f; }.arsenal-card .life-card-copy p { color: #f5d9d4; }.arsenal-cannon { position: absolute; top: 4.35rem; right: -1.8rem; width: 13rem; height: auto; }
.family-card { background: #8f2730; }.family-card .card-index { color: #e8bd73; }.family-card .life-card-copy p { color: #f6d8d2; }
.card-detail { position: absolute; top: 3.8rem; left: 1.4rem; margin: 0; white-space: nowrap; font: 650 .68rem/1.3 var(--mono); letter-spacing: .08em; }.arsenal-card .card-detail { color: #f6d98f; }.family-card .card-detail { color: #f5deb0; }
.listening-card { background: #2d4a50; }.listening-card .card-index, .listening-card .card-detail { color: #c9d7ce; }.listening-card .life-card-copy p { color: #d2ddda; }.sound-waves { position: absolute; top: 4.7rem; right: 1rem; display: flex; align-items: center; gap: .35rem; height: 6rem; }.sound-waves span { width: .5rem; height: 2.1rem; border-radius: 1rem; background: var(--gold); }.sound-waves span:nth-child(2) { height: 4.2rem; }.sound-waves span:nth-child(3) { height: 6rem; background: #d8e3d9; }.sound-waves span:nth-child(4) { height: 3.4rem; }.sound-waves span:nth-child(5) { height: 1.5rem; }
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 9vw, 10rem); align-items: end; }.contact h2 { margin-top: clamp(3rem, 6vw, 6rem); }.contact-actions { padding-bottom: .5rem; }.email-link { display: inline-block; margin-bottom: 1.2rem; font: 400 clamp(1.9rem, 3.3vw, 3.8rem)/1 var(--serif); letter-spacing: -.04em; text-decoration: none; border-bottom: 1px solid var(--ink); }.email-link span { color: var(--clay); font-family: var(--sans); font-size: .7em; }.contact-actions > p { max-width: 400px; color: var(--ink-soft); }.social-links { display: flex; gap: 1.3rem; margin: 2rem 0 0; padding: 0; list-style: none; }.social-links a { font-size: .8rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: .2rem; }.social-links span { color: var(--clay); }
.site-footer { min-height: 95px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .72rem; }.site-footer p { margin: 0; }.site-footer > a:last-child { color: var(--ink); text-decoration: none; }.site-footer > a:last-child span { color: var(--clay); }

@media (max-width: 760px) {
  .site-header, .site-footer, .section-shell { width: min(100% - 2rem, 1400px); }
  .site-header { min-height: 74px; } nav { gap: 1rem; font-size: .68rem; } nav a:not(.nav-contact) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 4rem 0 3rem; gap: 3rem; }.hero-art { min-height: 385px; }.hero-art-label { top: 1.5rem; left: 1.5rem; }.hero-art-foot { right: 1.5rem; bottom: 1.5rem; }
  .architecture-grid, .beyond-heading, .contact { grid-template-columns: 1fr; gap: 2rem; }.architecture-grid, .beyond-heading { margin: 2.8rem 0; }
  .principles { grid-template-columns: 1fr; }.principles li, .principles li + li { min-height: auto; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--line); }.principles li:last-child { border-bottom: 0; }.principles h3 { margin: .7rem 0; }
  .beyond { padding-left: 1rem; padding-right: 1rem; }.life-grid { grid-template-columns: 1fr; }.life-card { min-height: 265px; }
  .site-footer { min-height: 115px; flex-wrap: wrap; gap: .6rem; padding: 1.2rem 0; }.site-footer p { width: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }