@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");

:root { --ink: #eef4f8; --muted: #9bafc0; --faint: #587087; --ground: #071725; --deep: #04101b; --accent: #ad3c03; --accent-light: #dc5a12; --paper: #f3f1ec; --dark: #071725; --blue: #075aa7; --cyan: #08b9eb; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--ground); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; }
.shell { width: min(100% - 4rem, 75rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 5.8rem; position: relative; z-index: 2; }
.brand-wordmark { display: block; width: 8.8rem; padding: .42rem .55rem; background: var(--paper); line-height: 0; text-decoration: none; }
.brand-wordmark img { display: block; width: 100%; height: auto; }
nav { display: flex; gap: 1.65rem; margin-left: auto; margin-right: 2.5rem; }
nav a, .site-footer { color: var(--muted); font-size: .82rem; text-decoration: none; }
nav a:hover, .site-footer a:hover { color: var(--accent-light); }
.button { display: inline-flex; align-items: center; gap: .85rem; padding: 1rem 1.2rem; border: 1px solid var(--accent); color: #fff; background: var(--accent); font-size: .86rem; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: var(--accent-light); }
.button-small { padding: .68rem .9rem; font-size: .75rem; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; min-height: min(48rem, calc(100vh - 5.8rem)); align-items: center; padding: 5.5rem 0 4rem; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.35rem; color: var(--accent-light); font-family: "DM Mono", monospace; font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: .45rem; height: .45rem; background: var(--accent); border-radius: 50%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.065em; font-weight: 500; }
h1 { max-width: 9ch; margin-bottom: 1.7rem; font-size: clamp(4rem, 8.8vw, 7.5rem); line-height: .88; }
h1 em, h2 em, .statement em { font-family: Newsreader, Georgia, serif; font-weight: 400; }
.lede { max-width: 34rem; color: var(--muted); font-size: 1.16rem; line-height: 1.6; }
.actions { display: flex; align-items: center; gap: 1.65rem; margin-top: 2.25rem; }
.text-link { color: var(--ink); font-size: .88rem; font-weight: 500; text-underline-offset: .35em; }
.text-link:hover { color: var(--accent-light); }
.hero-art { position: relative; display: grid; place-items: center; height: 29rem; overflow: hidden; border: 1px solid rgb(8 185 235 / 24%); background: linear-gradient(145deg, #f7f5ef, #dceaf2 72%); }
.hero-art::before { content: ""; position: absolute; width: 20rem; height: 20rem; top: -9rem; right: -7rem; border: 4rem solid rgb(8 185 235 / 12%); border-radius: 50%; }
.hero-art::after { content: ""; position: absolute; width: 10rem; height: .55rem; right: -2rem; bottom: 5.5rem; background: var(--accent); transform: rotate(-35deg); }
.hero-art img { position: relative; z-index: 1; width: min(78%, 25rem); height: auto; filter: drop-shadow(0 1.25rem 1.8rem rgb(0 45 105 / 18%)); }
.hero-index { position: absolute; top: 1.4rem; right: 1.5rem; color: #526d82; font-family: "DM Mono", monospace; font-size: .63rem; letter-spacing: .08em; }
.artifact-kicker, .card-label, .number { color: var(--muted); font-family: "DM Mono", monospace; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.art-caption { position: absolute; z-index: 2; bottom: 1.5rem; left: 1.6rem; margin: 0; color: #22455f; font-family: Newsreader, Georgia, serif; font-size: 1.2rem; line-height: 1.08; }
.statement { padding: 7rem 0; background: var(--accent); color: #fff8f1; }.statement p { max-width: 19ch; margin: 0; font-size: clamp(2.55rem, 5vw, 4.65rem); line-height: .98; letter-spacing: -.065em; }.statement em { font-size: 1.12em; }
.section { padding: 8rem 0; }.section-tint { background: #0a2d50; }.section-heading { max-width: 55rem; margin-bottom: 4rem; }.section-heading h2, .factory h2, .contact h2 { margin: 0; font-size: clamp(2.8rem, 5.5vw, 5rem); line-height: .92; }.section-heading.split { display: flex; justify-content: space-between; gap: 4rem; max-width: none; }.section-heading.split > p { max-width: 19rem; margin: 1.2rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(223 232 241 / 20%); }.approach-grid article { min-height: 19rem; padding: 1.5rem 2rem 0 0; }.approach-grid article + article { padding-left: 2rem; border-left: 1px solid rgb(223 232 241 / 20%); }.number { margin-bottom: 3.7rem; }.approach-grid h3, .service-card h3 { margin-bottom: 1rem; font-size: 1.27rem; font-weight: 500; letter-spacing: -.035em; }.approach-grid article > p:last-child, .service-card > p:not(.card-label) { color: var(--muted); font-size: .92rem; line-height: 1.65; }
.engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.service-card { position: relative; min-height: 20rem; padding: 1.65rem; background: #0d3a66; }.service-card h3 { max-width: 11ch; margin-top: 3.8rem; font-size: 1.55rem; }.service-card.featured { background: var(--accent); color: #fff; }.service-card.featured .card-label, .service-card.featured > p:not(.card-label) { color: #ffe0ce; }.card-mark { position: absolute; right: 1.6rem; top: 1.3rem; font-size: 1.6rem; }
.factory { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 8rem 0; }.factory-copy { max-width: 30rem; align-self: end; }.factory-copy p { color: var(--muted); font-size: 1.15rem; line-height: 1.65; }.factory-copy .text-link { display: inline-block; margin-top: 1rem; }
.faq-list { border-top: 1px solid rgb(223 232 241 / 23%); }.faq-list details { border-bottom: 1px solid rgb(223 232 241 / 23%); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.45rem 0; cursor: pointer; list-style: none; font-size: 1.08rem; font-weight: 500; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--accent); font-size: 1.45rem; font-weight: 400; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { max-width: 44rem; padding-bottom: 1.5rem; color: var(--muted); line-height: 1.65; }
.contact { padding: 7.5rem 0; background: linear-gradient(135deg, #f7f5ef, #dcecf5); color: var(--dark); }.contact .eyebrow { color: var(--accent); }.contact .eyebrow span { background: var(--accent); }.contact h2 { margin-bottom: 2.25rem; }.button-light { border-color: #064d91; background: #064d91; color: #fff; }.button-light:hover { background: #0873c2; }
.site-footer { display: grid; grid-template-columns: 1fr 2fr 1fr auto; align-items: center; gap: 2rem; padding: 2rem 0; }.footer-brand { width: 7.5rem; }.site-footer p { margin: 0; }.site-footer a:not(.brand-wordmark) { color: var(--ink); text-underline-offset: .25em; }
@media (max-width: 760px) { .shell { width: min(100% - 2.4rem, 75rem); } .site-header { min-height: 4.8rem; } nav { display: none; }.site-header .button { display: none; }.hero { grid-template-columns: 1fr; min-height: auto; padding: 4rem 0; }.hero-art { height: 23rem; }.statement { padding: 4.5rem 0; }.section { padding: 5rem 0; }.section-heading.split, .factory { grid-template-columns: 1fr; display: grid; gap: 1.5rem; }.section-heading.split > p { margin: 0; }.approach-grid, .engagement-grid { grid-template-columns: 1fr; }.approach-grid article, .approach-grid article + article { min-height: auto; padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid rgb(223 232 241 / 20%); }.number { margin-bottom: 2rem; }.service-card { min-height: 16rem; }.service-card h3 { margin-top: 2.6rem; }.factory { padding: 5rem 0; }.site-footer { grid-template-columns: 1fr; gap: .75rem; }.footer-brand { margin-bottom: .5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button { transition: none; } }