:root {
  --ink: #07101f;
  --paper: #edf1f4;
  --blue: #214f98;
  --electric: #8db5ff;
  --line: rgba(7, 16, 31, .16);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.grain { position: fixed; inset: 0; z-index: 9; opacity: .045; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

.topbar { height: 84px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 0 0 auto; z-index: 5; color: white; }
.brand { display: inline-flex; gap: .7rem; align-items: center; font-size: .78rem; letter-spacing: .18em; font-weight: 800; }
.brand-mark { color: var(--electric); font-size: 1.2rem; letter-spacing: -.18em; font-weight: 500; }
.topbar nav { display: flex; gap: 2rem; font-size: .72rem; letter-spacing: .08em; }
.topbar nav a, .top-cta { transition: opacity .2s; }
.topbar nav a:hover, .top-cta:hover { opacity: .62; }
.top-actions { display: flex; align-items: center; gap: 1.35rem; }
.language-switch { display: inline-flex; align-items: center; gap: .28rem; color: rgba(255,255,255,.48); font: 500 .67rem var(--mono); letter-spacing: .08em; }
.language-button { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; padding: .35rem .1rem; font: inherit; letter-spacing: inherit; transition: color .2s; }
.language-button:hover, .language-button.is-active { color: white; }
.top-cta { font-size: .72rem; letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: .35rem; }
.top-cta span { color: var(--electric); margin-left: .35rem; }

.hero { min-height: 780px; height: min(100vh, 930px); background: var(--ink); color: white; display: grid; grid-template-columns: 57% 43%; overflow: hidden; position: relative; }
.hero-copy { align-self: center; padding: 12rem 4.5vw 5rem; position: relative; z-index: 2; }
.eyebrow, .section-kicker { text-transform: uppercase; font: 500 .67rem/1.4 var(--mono); letter-spacing: .13em; }
.eyebrow { color: rgba(255,255,255,.72); margin: 0 0 2.25rem; display: flex; gap: .75rem; align-items: center; }
.eyebrow span { height: 1px; width: 2.4rem; background: var(--electric); display: inline-block; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.7rem, 7.4vw, 8rem); letter-spacing: -.075em; line-height: .92; font-weight: 600; margin-bottom: 2.3rem; }
em { font-family: var(--serif); font-weight: 500; letter-spacing: -.06em; }
.hero-text { max-width: 28rem; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.7rem; }
.button { display: inline-flex; gap: 1.6rem; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.button-primary { background: white; color: var(--ink); padding: 1rem 1.25rem; transition: transform .2s, background .2s; }
.button-primary:hover { transform: translateY(-3px); background: var(--electric); }
.button-text { color: white; }
.button-text span, .button-outline span { color: var(--electric); }
.hero-art { min-height: 100%; overflow: hidden; position: relative; }
.hero-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink), transparent 24%, rgba(7,16,31,.06)); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; animation: reveal 1.4s cubic-bezier(.16,1,.3,1) both; }
.hero-caption { position: absolute; z-index: 1; bottom: 2.5rem; left: 2rem; right: 2rem; display: flex; justify-content: space-between; font: .58rem var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.8); }
.hero-orbit { position: absolute; z-index: 1; right: 38%; bottom: -13vw; font: 36vw/1 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(141,181,255,.24); }
@keyframes reveal { from { transform: scale(1.08); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.manifesto, .capabilities, .for-whom, .statement, .contact { padding: 9rem 4.5vw; }
.section-kicker { margin-bottom: 2.7rem; color: var(--blue); }
.manifesto-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 10vw; align-items: end; }
h2 { font-size: clamp(2.7rem, 5vw, 5.9rem); line-height: .98; letter-spacing: -.067em; font-weight: 600; margin-bottom: 0; }
.manifesto-copy { font-size: 1rem; line-height: 1.75; color: #435064; padding-bottom: .35rem; }
.manifesto-copy p + p { margin-top: 1.25rem; }

.capabilities { background: #dce6ec; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; }
.section-note { font: .66rem var(--mono); letter-spacing: .07em; color: #566a82; }
.capabilities > h2 { max-width: 850px; margin-bottom: 4.5rem; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.capability-card { min-height: 500px; padding: 1.7rem 2rem 2rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--ink); color: white; isolation: isolate; transition: color .3s; }
.capability-card:last-child { border-right: 0; }
.capability-card:after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,16,31,.12) 0%, rgba(7,16,31,.16) 30%, rgba(7,16,31,.94) 100%); }
.card-number { position: relative; z-index: 2; font: .67rem var(--mono); color: var(--electric); }
.capability-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: block; object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.82); transition: transform .65s cubic-bezier(.16,1,.3,1), filter .4s; z-index: 0; }
.capability-card:hover .capability-image { transform: scale(1.045); filter: saturate(1) contrast(1.08) brightness(.92); }
.capability-card h3 { position: relative; z-index: 2; margin: auto 0 1rem; font-size: clamp(1.55rem, 2.6vw, 3rem); line-height: .98; letter-spacing: -.065em; }
.capability-card p { position: relative; z-index: 2; color: rgba(255,255,255,.72); line-height: 1.65; font-size: .88rem; margin: 0; max-width: 19rem; }

.for-whom { background: var(--ink); color: white; display: grid; grid-template-columns: .72fr 1.28fr; gap: 9vw; }
.for-whom .section-kicker { color: var(--electric); }
.for-whom-list { border-top: 1px solid rgba(255,255,255,.21); }
.for-whom-list div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.21); font-size: clamp(1rem, 1.8vw, 1.5rem); letter-spacing: -.035em; }
.for-whom-list i { color: var(--electric); font-style: normal; }

.method-panel { background: #bccde0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; padding: 8rem 4.5vw; }
.method-intro h2 { max-width: 32rem; }
.method-steps { border-top: 1px solid rgba(7,16,31,.24); }
.method-steps article { display: grid; grid-template-columns: 3rem 1fr 1.25fr; gap: 1.4rem; padding: 1.7rem 0; border-bottom: 1px solid rgba(7,16,31,.24); align-items: start; }
.method-steps span { font: .66rem var(--mono); color: var(--blue); }
.method-steps h3 { font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1; letter-spacing: -.055em; margin: 0; }
.method-steps p { color: #35455d; font-size: .88rem; line-height: 1.65; margin: 0; }

.statement { background: var(--paper); }
.statement-text { max-width: 1100px; font-size: clamp(2.2rem, 4.6vw, 5.2rem); letter-spacing: -.067em; line-height: 1.04; font-weight: 600; margin: 0; }
.statement-text span { color: var(--blue); font-family: var(--serif); font-style: italic; font-weight: 500; }

.contact { background: #24549d; color: white; position: relative; overflow: hidden; }
.contact:before { content: "V"; position: absolute; right: -1.5vw; top: -8vw; color: transparent; font: 47vw/1 var(--serif); -webkit-text-stroke: 1px rgba(197,219,255,.16); pointer-events: none; }
.contact .section-kicker { color: #cbdfff; }
.contact .section-kicker, .contact-grid, .contact-foot { position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 9vw; padding-top: 2.8rem; border-top: 1px solid rgba(255,255,255,.36); }
.contact-intro { display: flex; flex-direction: column; align-items: flex-start; min-height: 32rem; }
.contact-intro h2 { max-width: 42rem; }
.contact-lead { max-width: 28rem; margin: auto 0 2rem; color: rgba(231,240,255,.9); font-size: 1.05rem; line-height: 1.7; }
.contact-cta { display: inline-flex; align-items: center; gap: 2.6rem; padding: 1rem 1.25rem; background: white; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .06em; transition: transform .2s, background .2s; }
.contact-cta:hover { transform: translateY(-3px); background: #bfd7ff; }
.contact-panel { background: rgba(4,19,49,.31); border: 1px solid rgba(255,255,255,.36); padding: 1.5rem 1.65rem 1.65rem; backdrop-filter: blur(5px); }
.contact-label { color: #bbd4ff; font: .61rem var(--mono); letter-spacing: .13em; margin: 0 0 1.25rem; }
.contact-route { display: grid; grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.22); transition: color .2s, padding-left .2s; }
.contact-route:hover { color: #b9d5ff; padding-left: .35rem; }
.route-number { color: #abc9f8; font: .62rem var(--mono); }
.contact-route b { display: block; font-size: 1rem; letter-spacing: -.035em; }
.contact-route small { display: block; margin-top: .24rem; color: rgba(219,231,251,.69); font-size: .72rem; line-height: 1.35; }
.contact-route i { color: #b9d5ff; font-style: normal; }
.contact-direct { margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.36); }
.email { display: inline-flex; gap: 2.4rem; align-items: center; color: white; font-size: clamp(1.2rem, 2.2vw, 2rem); letter-spacing: -.05em; border-bottom: 1px solid rgba(255,255,255,.65); padding-bottom: .45rem; }
.email span { color: #b6d3ff; }
.phone-directory { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.35rem; margin-top: 1.45rem; }
.phone-group:first-child { grid-column: 1 / -1; }
.phone-label { display: block; margin-bottom: .45rem; color: rgba(185,213,255,.72); font: .56rem var(--mono); letter-spacing: .11em; }
.phone { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.9); font: .72rem var(--mono); letter-spacing: .05em; border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: .7rem; transition: color .2s; }
.phone:hover { color: #b6d3ff; }
.phone span { color: #b6d3ff; }
.contact-foot { display: grid; grid-template-columns: 1fr auto; gap: 4rem; padding-top: 2rem; margin-top: 4.5rem; border-top: 1px solid rgba(255,255,255,.36); }
.contact-foot > p:first-child { max-width: 29rem; margin: 0; color: rgba(219,231,251,.77); font-size: .78rem; line-height: 1.6; }
.company-address { margin: 0; color: rgba(219,231,251,.72); font: .68rem/1.7 var(--mono); letter-spacing: .04em; }

footer { background: var(--ink); color: white; padding: 2.3rem 4.5vw; display: grid; grid-template-columns: 1fr auto auto; gap: 3rem; align-items: center; }
footer p { margin: 0; color: rgba(255,255,255,.53); font: .61rem var(--mono); letter-spacing: .05em; }

@media (max-width: 800px) {
  .topbar { height: 70px; padding: 0 1.25rem; }
  .topbar nav, .top-cta { display: none; }
  .top-actions { gap: 0; }
  .hero { min-height: 770px; height: auto; display: flex; flex-direction: column; }
  .hero-copy { padding: 9.5rem 1.25rem 3rem; }
  h1 { font-size: clamp(3.6rem, 16vw, 5.6rem); }
  .hero-art { height: 440px; }
  .hero-art:after { background: linear-gradient(0deg, var(--ink), transparent 42%); }
  .hero-caption { bottom: 1.4rem; left: 1.25rem; right: 1.25rem; }
  .hero-orbit { right: -4vw; bottom: 26vw; font-size: 56vw; }
  .manifesto, .capabilities, .for-whom, .statement, .contact { padding: 5.5rem 1.25rem; }
  .manifesto-grid, .for-whom, .contact-grid, .contact-foot { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-head { display: block; }
  .section-note { margin-top: -1.6rem; }
  .capabilities > h2 { margin-bottom: 3.2rem; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--line); padding: 1.4rem 1.25rem 1.7rem; }
  .capability-card:last-child { border-bottom: 0; }
  .method-panel { grid-template-columns: 1fr; gap: 3.2rem; padding: 5.5rem 1.25rem; }
  .method-steps article { grid-template-columns: 2.2rem 1fr; gap: 1rem; }
  .method-steps p { grid-column: 2; }
  .contact:before { right: -17vw; top: 10rem; font-size: 85vw; }
  .contact-grid { padding-top: 2rem; }
  .contact-intro { min-height: auto; }
  .contact-lead { margin: 2.2rem 0 1.8rem; }
  .contact-panel { padding: 1.35rem 1.1rem; }
  .phone-directory { grid-template-columns: 1fr; gap: 1rem; }
  .phone-group:first-child { grid-column: auto; }
  .contact-foot { margin-top: 3.3rem; }
  footer { padding: 2rem 1.25rem; grid-template-columns: 1fr; gap: 1.25rem; }
}