@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --navy:#061522;
  --navy2:#0c2535;
  --gold:#c7a059;
  --gold2:#e1c17d;
  --cream:#f3eee3;
  --paper:#f8f6f1;
  --ink:#152732;
  --muted:#657278;
  --line:#d6d1c7;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 "DM Sans",Arial,sans-serif}
a{text-decoration:none;color:inherit}
.wrap{width:min(calc(100% - 56px),var(--max));margin:auto}

.site-header{
  position:sticky;top:0;z-index:30;
  height:82px;
  background:var(--navy);
  border-bottom:1px solid rgba(199,160,89,.18);
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:12px;color:#f5f1e9}
.brand-mark{width:55px;height:38px;object-fit:contain}
.brand-text{font:600 13px "Space Grotesk",Arial,sans-serif;letter-spacing:.14em;line-height:1.05}
.brand-text small{
  display:block;margin-top:3px;color:#bba98a;
  font:500 8px "DM Sans",Arial,sans-serif;letter-spacing:.24em
}

.main-nav{
  display:flex;align-items:center;gap:28px;
  color:#d8e0e4;font-size:12px;font-weight:600;letter-spacing:.08em
}
.main-nav a:not(.nav-cta):hover{color:var(--gold2)}
.nav-cta{
  border:1px solid rgba(199,160,89,.55);
  padding:10px 14px;
  color:#f1efe8
}
.nav-cta span{color:var(--gold)}

.hero{
  position:relative;overflow:hidden;min-height:690px;padding:112px 0 0;color:#fff;
  background:
    radial-gradient(circle at 74% 36%, rgba(199,160,89,.08), transparent 24%),
    linear-gradient(135deg,#05121e 0%, #0a2130 60%, #0d2737 100%);
}
.starfield{
  position:absolute;inset:0;opacity:.34;
  background-image:radial-gradient(circle, rgba(225,193,125,.8) 1px, transparent 1.4px);
  background-size:130px 110px;background-position:20px 18px;
}
.grid-overlay{
  position:absolute;inset:0;opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:160px 160px;
}
.hero-graphic{
  position:absolute;right:0;top:65px;width:min(58vw,780px);height:540px;z-index:1;opacity:.95
}
.hero-graphic svg{width:100%;height:100%}
.hero-logo-main,.hero-logo-secondary{vector-effect:non-scaling-stroke}
.hero-link{fill:none;stroke:rgba(199,160,89,.28);stroke-width:1}
.hero-node{fill:#f0cf89}

.hero-content{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center
}
.hero-copy{max-width:670px}
.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 20px;
  font:700 9px "Space Grotesk",Arial,sans-serif;letter-spacing:.24em;color:#9d7938
}
.eyebrow i{display:block;width:22px;height:1px;background:var(--gold)}
.eyebrow.light{color:#c59f5a}

.hero h1,.intro h2,.section-head h2,.experience-head h2,.approach h2,.story h2,.about h2,.contact h2{
  margin:0;
  font:400 clamp(38px,5vw,76px)/1.03 "Libre Baskerville",Georgia,serif;
  letter-spacing:-.04em
}
.hero h1 em,.intro h2 em,.section-head h2 em,.experience-head h2 em,.approach h2 em,.about h2 em,.contact h2 em{
  font-style:italic;color:#d3ae67
}
.hero p{
  margin:28px 0 0;max-width:610px;font-size:18px;color:#d5dde1
}
.hero-actions{display:flex;gap:18px;align-items:center;margin-top:34px}
.button-primary{
  display:inline-flex;align-items:center;gap:10px;padding:16px 22px;
  border:1px solid rgba(199,160,89,.75);color:#f5f1e8;
  font:700 11px "Space Grotesk",Arial,sans-serif;letter-spacing:.16em
}
.button-primary span{color:var(--gold2)}
.button-secondary{
  display:inline-flex;align-items:center;gap:10px;color:#d4dde0;
  font:700 11px "Space Grotesk",Arial,sans-serif;letter-spacing:.16em
}
.button-secondary span{color:var(--gold2)}

.hero-aside{
  justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  color:#cfd6d9;font:600 11px "Space Grotesk",Arial,sans-serif;letter-spacing:.18em
}
.hero-aside i{width:40px;height:2px;background:var(--gold);margin-top:10px}

.hero-strip{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:center;
  padding:20px 0 24px;margin-top:72px;border-top:1px solid rgba(199,160,89,.26)
}
.hero-strip span,.hero-strip b{
  font:600 10px "Space Grotesk",Arial,sans-serif;letter-spacing:.18em
}
.hero-strip span{color:#d7dee1}
.hero-strip b{color:#bfa06f;text-align:right}

.intro{background:var(--cream);padding:105px 0}
.intro-grid{display:grid;grid-template-columns:.45fr 1.55fr;gap:80px}
.intro p{margin:25px 0 0;max-width:790px;color:#5c676b;font-size:18px}

.capabilities{padding:105px 0}
.section-head{
  display:grid;grid-template-columns:1.1fr .9fr;gap:100px;align-items:end;margin-bottom:50px
}
.section-head p{margin:0;max-width:390px;color:var(--muted)}
.cap-list{border-top:1px solid var(--line)}
.cap-list article{
  display:grid;grid-template-columns:65px 1fr 45px;gap:20px;
  padding:29px 0;border-bottom:1px solid var(--line)
}
.cap-list article>span{color:#9d7938;font:600 11px "Space Grotesk",Arial,sans-serif}
.cap-list h3{margin:0 0 6px;font:600 24px "Space Grotesk",Arial,sans-serif}
.cap-list p{margin:0;color:var(--muted)}
.cap-list b{color:#9d7938;font-size:16px;text-align:right}

.experience{background:var(--navy);color:#fff;padding:108px 0}
.experience-head{
  display:grid;grid-template-columns:1.3fr .7fr;gap:90px;align-items:end;margin-bottom:50px
}
.experience-head p{margin:0;max-width:340px;color:#9daad0}
.case-top{
  display:flex;justify-content:space-between;margin-bottom:28px;
  color:#71838b;font:600 8px "Space Grotesk",Arial,sans-serif;letter-spacing:.16em
}
.case-top span:first-child{color:var(--gold);font-size:11px}
.featured{padding:30px 0 58px;border-top:1px solid #29414d}
.feature-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:start}
.gold-label{
  color:#bc9b5c;font:700 9px "Space Grotesk",Arial,sans-serif;
  letter-spacing:.18em;margin-bottom:12px
}
.featured h3,.two-cases h3,.confidential h3{
  margin:0 0 6px;font:400 47px/1.04 "Libre Baskerville",Georgia,serif;letter-spacing:-.03em
}
.featured h4,.two-cases h4{
  margin:0 0 16px;color:#d8e0e4;font:500 22px "Space Grotesk",Arial,sans-serif
}
.featured p,.two-cases p,.confidential p{margin:0;color:#b7c4c8}
.workflow{
  padding:26px 26px 28px;border:1px solid rgba(199,160,89,.22);background:rgba(255,255,255,.02)
}
.workflow-label{
  margin-bottom:18px;color:#9faeb2;font:600 9px "Space Grotesk",Arial,sans-serif;letter-spacing:.18em
}
.flow{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:20px}
.flow span{
  border:1px solid rgba(199,160,89,.28);padding:8px 10px;color:#eff2f3;
  font:600 10px "Space Grotesk",Arial,sans-serif;letter-spacing:.08em
}
.flow b{color:var(--gold);font-size:16px}
.notes{display:grid;gap:14px}
.notes div{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:start}
.notes b{color:#f2f5f6;font:600 16px "Space Grotesk",Arial,sans-serif}
.notes small{color:#b7c4c8;font-size:13px;line-height:1.6}
.two-cases{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}
.two-cases article{padding:26px 0 32px;border-top:1px solid #29414d}
.two-cases h3{font-size:35px}
.two-cases h4{font-size:18px}
.confidential{
  display:grid;grid-template-columns:50px .8fr 1.2fr;gap:25px;align-items:start;
  margin-top:16px;padding:28px 0 0;border-top:1px solid #29414d
}
.confidential>span{color:var(--gold);font:600 11px "Space Grotesk",Arial,sans-serif}

.approach{padding:105px 0}
.approach h2{margin-bottom:52px}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.timeline>div{padding:23px 20px 8px 0;margin-right:20px;border-right:1px solid var(--line)}
.timeline>div:last-child{margin-right:0;border-right:none}
.timeline span{color:#9d7938;font:600 11px "Space Grotesk",Arial,sans-serif}
.timeline h3{margin:28px 0 6px;font:600 19px "Space Grotesk",Arial,sans-serif}
.timeline p{margin:0;color:var(--muted);font-size:12px}

.story{background:var(--cream);padding:105px 0}
.story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.story p{color:#5c686b;font-size:17px}
.story p.large{margin-top:0;font-size:20px;color:#4f5b60}

.about{padding:105px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}
.about p{color:#5c686b;font-size:17px}
.about .large{font-size:20px}
.credential{
  display:flex;flex-direction:column;gap:4px;margin-top:30px;
  padding-left:18px;border-left:2px solid var(--gold)
}
.credential span{color:#8d6d32;font:700 9px "Space Grotesk",Arial,sans-serif;letter-spacing:.15em}
.credential b{font-size:13px}
.credential small{color:#8d6d32;font-weight:700}

.contact{background:#dfe5e1;padding:100px 0}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:100px;align-items:end}
.contact p{max-width:650px;color:#5b676a}
.contact-box{
  display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid #a5afac;
  font-size:13px;font-weight:700
}
.contact-box>span{margin-bottom:5px;color:#68736f;font:700 8px "Space Grotesk",Arial,sans-serif;letter-spacing:.18em}
.contact-box a:hover{color:#947233}
.contact-box b{color:#987536}

footer{
  background:var(--navy);color:#8e9ba0;padding:24px 0;font-size:9px;letter-spacing:.05em
}
footer .wrap{display:flex;justify-content:space-between}

@media (max-width:850px){
  .main-nav a:not(.nav-cta){display:none}
  .hero{padding-top:75px}
  .hero-content,.intro-grid,.section-head,.experience-head,.feature-grid,.story-grid,.about-grid,.contact-grid{
    grid-template-columns:1fr;gap:40px
  }
  .hero-graphic{
    width:95vw;height:360px;top:180px;right:-120px;opacity:.45
  }
  .hero-strip{grid-template-columns:1fr 1fr;margin-top:60px}
  .hero-strip b{text-align:left}
  .hero-aside{margin-top:5px}
  .two-cases,.timeline{grid-template-columns:1fr}
  .timeline>div{
    margin-right:0;border-right:none;border-bottom:1px solid var(--line);padding-bottom:24px
  }
  .timeline>div:last-child{border-bottom:none}
  .confidential{grid-template-columns:1fr}
}

@media (max-width:520px){
  .wrap{width:min(calc(100% - 32px),var(--max))}
  .brand-text{font-size:11px}
  .brand-mark{width:44px}
  .hero h1{font-size:43px}
  .hero p{font-size:16px}
  .hero-strip{grid-template-columns:1fr}
  .hero-strip b{text-align:left}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .intro h2,.section-head h2,.experience-head h2,.approach h2,.story h2,.about h2,.contact h2{font-size:36px}
  .featured h3{font-size:37px}
}