:root {
  --navy: #0b1722;
  --navy-2: #102331;
  --ink: #17232c;
  --ivory: #f2eee6;
  --paper: #fbfaf7;
  --brass: #b39763;
  --brass-soft: #cab58d;
  --muted: #68727a;
  --line: rgba(23, 35, 44, 0.14);
  --line-dark: rgba(255, 255, 255, 0.14);
  --shell: 1240px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.shell { width: min(calc(100% - 72px), var(--shell)); margin: 0 auto; }
.section-dark { background: var(--navy); color: var(--paper); }
.section-light { background: var(--paper); }
.section-ivory { background: var(--ivory); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  color: #fff;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11, 23, 34, .88);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(255,255,255,.09);
}
.header-inner { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 38px; height: 38px; border: 1px solid rgba(202,181,141,.7); border-radius: 50%;
  display: grid; place-items: center; color: var(--brass-soft); font: 500 20px/1 var(--serif);
}
.brand-copy { display: grid; line-height: 1; gap: 5px; }
.brand-copy strong { letter-spacing: .18em; font-size: 14px; font-weight: 600; }
.brand-copy small { font-size: 8px; letter-spacing: .31em; opacity: .72; }
.primary-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; letter-spacing: .04em; }
.primary-nav a { position: relative; opacity: .82; transition: opacity .2s ease; }
.primary-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--brass-soft); transition:right .25s ease; }
.primary-nav a:hover { opacity: 1; }
.primary-nav a:hover::after { right: 0; }
.nav-toggle { display: none; border: 0; background: none; padding: 10px; }
.nav-toggle span { display: block; width: 26px; height: 1px; background: #fff; margin: 6px 0; }

.hero { min-height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; padding: 150px 0 90px; }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 82% 42%, rgba(179,151,99,.10), transparent 31%); pointer-events:none; }
.network-art { position:absolute; inset:0 0 0 38%; opacity:.5; pointer-events:none; }
.network-art svg { width:100%; height:100%; }
.network-lines path { fill:none; stroke:rgba(202,181,141,.24); stroke-width:1; stroke-dasharray: 2 8; }
.network-nodes circle { fill: var(--brass-soft); opacity:.75; }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 100px; align-items:end; position:relative; z-index:2; }
.eyebrow { margin:0 0 26px; text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:600; color:var(--brass); }
.hero h1, .approach h2, .contact h2 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.045em; }
.hero h1 { font-size:clamp(58px, 7.15vw, 108px); line-height:.92; max-width:920px; }
em { font-style:italic; color:var(--brass-soft); }
.hero-lead { margin:42px 0 0; max-width:720px; font-size:clamp(18px,1.5vw,22px); line-height:1.65; color:rgba(255,255,255,.72); }
.hero-actions { margin-top: 40px; display:flex; gap:30px; align-items:center; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border:1px solid transparent; font-size:13px; letter-spacing:.04em; }
.button-primary { background:var(--brass); color:#111b22; transition:background .2s ease, transform .2s ease; }
.button-primary:hover { background:var(--brass-soft); transform:translateY(-2px); }
.text-link { font-size:13px; color:rgba(255,255,255,.82); }
.text-link span { color:var(--brass-soft); margin-left:8px; }
.hero-note { border-top:1px solid rgba(255,255,255,.18); padding-top:18px; max-width:340px; justify-self:end; }
.note-number, .service-index { display:block; color:var(--brass); font-size:10px; letter-spacing:.16em; margin-bottom:25px; }
.hero-note p { margin:0; color:rgba(255,255,255,.62); line-height:1.75; font-size:14px; }
.hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:15px; color:rgba(255,255,255,.35); font-size:10px; text-transform:uppercase; letter-spacing:.16em; z-index:2; }
.hero-scroll i { width:58px; height:1px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.hero-scroll i::after { content:""; position:absolute; inset:0 auto 0 -30%; width:30%; background:var(--brass); animation:scrollLine 2s infinite ease-in-out; }
@keyframes scrollLine { 50% { left:100%; } 100% { left:100%; } }

.about { padding:150px 0; }
.section-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:120px; }
.section-intro h2, .section-heading-row h2, .beyond-copy h2 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(42px,4.7vw,70px); line-height:1.02; letter-spacing:-.035em; }
.section-copy { padding-top:58px; max-width:660px; }
.section-copy p, .beyond-copy p { color:#56616a; font-size:16px; line-height:1.85; margin:0 0 24px; }
.section-copy .lead, .beyond-copy .lead { color:var(--ink); font-family:var(--serif); font-size:26px; line-height:1.48; }

.services { padding:145px 0; }
.section-heading-row { display:grid; grid-template-columns:1.3fr .7fr; gap:90px; align-items:end; margin-bottom:90px; }
.section-heading-row > p { margin:0 0 7px; color:#68727a; line-height:1.75; max-width:420px; justify-self:end; }
.service-list { border-top:1px solid var(--line); }
.service-item { display:grid; grid-template-columns:80px .75fr 1.25fr; gap:35px; padding:44px 0; border-bottom:1px solid var(--line); align-items:start; }
.service-item h3 { margin:0; font-family:var(--serif); font-size:31px; font-weight:400; }
.service-item p { margin:0; color:#657078; line-height:1.75; max-width:610px; }

.approach { padding:150px 0 115px; }
.approach-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:120px; }
.approach h2 { font-size:clamp(48px,5.7vw,82px); line-height:.98; }
.approach-copy { padding-top:56px; max-width:670px; }
.approach-copy p { color:rgba(255,255,255,.61); line-height:1.84; margin:0 0 24px; }
.approach-copy .lead-dark { font-family:var(--serif); font-size:26px; line-height:1.48; color:rgba(255,255,255,.9); }
.principles { margin-top:100px; border-top:1px solid var(--line-dark); display:grid; grid-template-columns:repeat(4,1fr); }
.principles > div { padding:30px 28px 10px 0; min-height:150px; border-right:1px solid var(--line-dark); }
.principles > div + div { padding-left:28px; }
.principles > div:last-child { border-right:0; }
.principles span { display:block; color:var(--brass); font-size:10px; letter-spacing:.14em; margin-bottom:24px; }
.principles strong { display:block; font-family:var(--serif); font-size:24px; font-weight:400; margin-bottom:8px; }
.principles small { color:rgba(255,255,255,.46); line-height:1.55; font-size:12px; }

.beyond { padding:150px 0; overflow:hidden; }
.beyond-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:120px; align-items:center; }
.beyond-marker { width:min(440px,100%); aspect-ratio:1; position:relative; display:grid; place-items:center; margin-inline:auto; }
.orbit { position:absolute; border:1px solid rgba(179,151,99,.33); border-radius:50%; }
.orbit-a { inset:5%; }
.orbit-b { inset:20%; }
.orbit-a::before, .orbit-b::before { content:""; width:9px; height:9px; background:var(--brass); border-radius:50%; position:absolute; top:15%; right:16%; box-shadow:0 0 0 7px rgba(179,151,99,.08); }
.orbit-b::before { top:auto; right:auto; left:11%; bottom:28%; width:6px; height:6px; }
.orbit-center { width:114px; height:114px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:var(--brass-soft); font:400 30px/1 var(--serif); letter-spacing:.08em; }
.beyond-copy { max-width:690px; }

.statement { padding:135px 0; text-align:center; }
.statement-inner { max-width:920px; }
.statement blockquote { margin:0 auto 36px; font-family:var(--serif); font-size:clamp(38px,4.5vw,64px); line-height:1.12; letter-spacing:-.035em; font-weight:400; }
.statement-inner > p:last-child { margin:0 auto; max-width:760px; color:#68727a; line-height:1.8; }

.contact { padding:145px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:end; }
.contact h2 { font-size:clamp(64px,7vw,102px); line-height:.92; }
.contact-panel { border-top:1px solid rgba(255,255,255,.18); padding-top:28px; }
.contact-panel > p:first-child { color:rgba(255,255,255,.62); line-height:1.8; max-width:560px; margin:0 0 44px; }
.contact-link { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid rgba(255,255,255,.2); padding:0 0 18px; font-family:var(--serif); font-size:clamp(24px,2.3vw,34px); }
.contact-link span { color:var(--brass); }
.contact-placeholder { color:rgba(255,255,255,.28)!important; font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin:18px 0 0!important; }

.site-footer { background:#071019; color:rgba(255,255,255,.58); }
.footer-inner { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:11px; }
.brand-footer { color:#fff; }
.back-top { color:rgba(255,255,255,.62); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.reveal.in-view { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }

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

@media (max-width: 900px) {
  .shell { width:min(calc(100% - 40px), var(--shell)); }
  .header-inner { height:76px; }
  .nav-toggle { display:block; }
  .primary-nav {
    position:absolute; top:76px; left:0; right:0; background:rgba(11,23,34,.98); padding:24px 20px 30px;
    display:grid; gap:20px; transform:translateY(-130%); opacity:0; pointer-events:none; transition:.3s ease;
  }
  .primary-nav.open { transform:none; opacity:1; pointer-events:auto; }
  .hero { min-height:auto; padding:160px 0 100px; }
  .hero-grid, .section-grid, .section-heading-row, .approach-grid, .beyond-grid, .contact-grid { grid-template-columns:1fr; gap:56px; }
  .network-art { inset:0 -35% 0 15%; opacity:.35; }
  .hero-note { justify-self:start; max-width:540px; }
  .hero-scroll { display:none; }
  .about, .services, .approach, .beyond, .statement, .contact { padding:100px 0; }
  .section-copy, .approach-copy { padding-top:0; }
  .section-heading-row > p { justify-self:start; }
  .service-item { grid-template-columns:55px 1fr; }
  .service-item p { grid-column:2; }
  .principles { grid-template-columns:1fr 1fr; }
  .principles > div:nth-child(2) { border-right:0; }
  .beyond-marker { width:min(330px,85vw); }
  .contact-panel { max-width:650px; }
}

@media (max-width: 560px) {
  .shell { width:min(calc(100% - 28px), var(--shell)); }
  .brand-copy strong { font-size:12px; }
  .hero h1 { font-size:52px; }
  .hero-lead { font-size:17px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .section-intro h2, .section-heading-row h2, .beyond-copy h2 { font-size:43px; }
  .service-item { grid-template-columns:1fr; gap:15px; }
  .service-item p { grid-column:1; }
  .service-index { margin-bottom:4px; }
  .principles { grid-template-columns:1fr; }
  .principles > div, .principles > div:nth-child(2) { border-right:0; border-bottom:1px solid var(--line-dark); padding:25px 0; }
  .principles > div:last-child { border-bottom:0; }
  .contact-link { font-size:22px; word-break:break-word; }
  .footer-inner { min-height:150px; flex-direction:column; align-items:flex-start; justify-content:center; }
}

/* Anchor positioning and contact form */
#about, #services, #approach, #contact { scroll-margin-top: 92px; }

.contact-form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 9px; }
.contact-form label > span { color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .04em; }
.contact-form label small { color: rgba(255,255,255,.38); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-left: 6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.035);
  color: #fff;
  font: inherit;
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.contact-form input { min-height: 50px; padding: 0 14px; }
.contact-form textarea { min-height: 150px; padding: 14px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--brass-soft); background: rgba(255,255,255,.055); }
.form-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.form-actions p { margin: 0; color: rgba(255,255,255,.35); font-size: 11px; line-height: 1.5; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-status { margin: 0 0 28px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); font-size: 13px; line-height: 1.55; }
.form-status--success { border-color: rgba(202,181,141,.58); color: var(--brass-soft); }
.form-status--error { border-color: rgba(255,150,150,.45); color: #efb6b6; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}