:root {
  --ink: #07131d;
  --ink-soft: #122635;
  --paper: #f4f2ed;
  --white: #ffffff;
  --muted: #65727b;
  --line: rgba(7, 19, 29, .14);
  --blue: #4a7e9f;
  --gold: #d2a45f;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 18px max(28px, calc((100vw - var(--max))/2)); backdrop-filter: blur(16px); background: rgba(7,19,29,.78); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 31px; height: 28px; color: #eef5f8; }
.brand-type { font: 600 20px Manrope, sans-serif; letter-spacing: -.02em; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 13px; color: #c8d1d6; }
.nav a:hover { color: white; }
.nav-cta { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 10px 16px; }
.section-pad { padding: 120px max(28px, calc((100vw - var(--max))/2)); }
.hero { min-height: 100vh; padding-top: 170px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 70px; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.08); }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.eyebrow, .section-label { font-size: 11px; letter-spacing: .22em; font-weight: 700; color: #8da9ba; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 28px; font: 600 clamp(58px, 6.6vw, 104px)/.96 Manrope,sans-serif; letter-spacing: -.055em; }
h1 span, .statement h2 span { color: transparent; background: linear-gradient(90deg,#ecbf7c,#93c8e3 70%); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 700px; color: #aebbc3; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; gap: 14px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 4px; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.primary { background: var(--paper); color: var(--ink); }
.ghost { border: 1px solid rgba(255,255,255,.16); color: #dce5ea; }
.hero-visual { display: flex; justify-content: center; }
.signal-card { width: min(480px,100%); aspect-ratio: 1/1.05; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow: 0 40px 100px rgba(0,0,0,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 50px; }
.hero-mark { width: 68%; filter: drop-shadow(0 18px 35px rgba(29,103,148,.28)); }
.signal-line { width: 56px; height: 1px; background: var(--gold); margin: 36px 0 20px; }
.signal-card p { font-size: 8px; letter-spacing: .25em; color:#9eacb4; text-align:center; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.18; }
.glow-one { width:420px;height:420px;background:#2e8fbb;right:8%;top:18%; }
.glow-two { width:330px;height:330px;background:#ca9144;right:27%;bottom:4%; opacity:.10; }
.light-section { background: var(--paper); color: var(--ink); }
.mission-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 90px; margin-top:70px; }
.mission h2, .section-head h2, .approach h2, .contact h2 { font:600 clamp(42px,5vw,72px)/1.02 Manrope,sans-serif; letter-spacing:-.045em; }
.mission h2 em { font-style:normal; color:var(--blue); }
.large-copy { font-size:22px; line-height:1.55; color:#182b38; }
.muted { color:var(--muted); font-size:16px; line-height:1.8; margin-top:30px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:60px; margin-bottom:64px; }
.section-head h2 { max-width:720px; }
.card-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12); }
.cap-card { min-height:380px; padding:34px 28px; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; transition:.3s ease; }
.cap-card:hover { background:rgba(255,255,255,.035); transform:translateY(-4px); }
.card-num { font-size:11px;color:#7c9bad;letter-spacing:.18em; }
.cap-card h3 { font:600 24px/1.2 Manrope,sans-serif; margin-top:84px; }
.cap-card p { color:#9cacb5; line-height:1.7; font-size:14px; }
.card-tag { margin-top:auto; color:#d5ad72; font-size:10px;letter-spacing:.2em;font-weight:700; }
.approach-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; margin-top:70px; }
.approach-intro p { color:var(--muted); line-height:1.75; max-width:520px; }
.principle { display:grid; grid-template-columns:60px 1fr; gap:22px; padding:25px 0; border-top:1px solid var(--line); }
.principle:last-child { border-bottom:1px solid var(--line); }
.principle > span { color:var(--blue); font-size:12px; font-weight:700; }
.principle h3 { font:600 20px Manrope,sans-serif; margin-bottom:7px; }
.principle p { color:var(--muted); line-height:1.65; margin:0; }
.statement { text-align:center; padding-top:170px;padding-bottom:170px; }
.statement h2 { font:600 clamp(48px,6vw,92px)/1.03 Manrope,sans-serif; letter-spacing:-.05em; margin:28px auto 0; max-width:1100px; }
.contact { padding-top:50px; }
.contact-box { background:linear-gradient(120deg,#ebeee9,#dfe8ec); color:var(--ink); padding:70px; display:flex; align-items:flex-end; justify-content:space-between; gap:50px; }
.contact-box p:not(.eyebrow) { color:#52636c; max-width:650px; line-height:1.7; }
.inverse { background:var(--ink); color:white; white-space:nowrap; }
.site-footer { max-width:var(--max); margin:0 auto; padding:36px 0 48px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:30px; color:#81909a; font-size:11px; letter-spacing:.12em; border-top:1px solid rgba(255,255,255,.08); }
.footer-brand { display:flex;align-items:center;gap:10px;color:white;font:600 15px Manrope,sans-serif;letter-spacing:0; }
.footer-brand .brand-mark { width:24px; }
.site-footer p:nth-child(2) { text-align:center; }
.site-footer p:last-child { text-align:right; }
.reveal { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-visual.reveal { animation-delay:.12s; }
@keyframes rise { from { opacity:0; transform:translateY(18px);} to {opacity:1;transform:none;} }
@media (max-width: 920px) {
  .nav a:not(.nav-cta) { display:none; }
  .hero,.mission-grid,.approach-grid { grid-template-columns:1fr; }
  .hero { padding-top:140px; gap:60px; }
  .hero-visual { justify-content:flex-start; }
  .signal-card { max-width:520px; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .contact-box { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .site-header { padding:16px 20px; }
  .nav-cta { padding:9px 12px; font-size:11px; }
  .section-pad { padding:90px 20px; }
  .hero { padding-top:130px; }
  h1 { font-size:54px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .card-grid { grid-template-columns:1fr; }
  .cap-card { min-height:310px; }
  .mission-grid,.approach-grid { gap:45px; }
  .contact-box { padding:36px 24px; }
  .site-footer { margin:0 20px; grid-template-columns:1fr; text-align:left; }
  .site-footer p:nth-child(2),.site-footer p:last-child { text-align:left; }
}