:root {
  --ink: #07172d;
  --ink-soft: #1d2b40;
  --green: #839a84;
  --pale: #edf0eb;
  --cream: #f7f7f4;
  --line: rgba(7, 23, 45, .14);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.page-noise { position: fixed; z-index: 5; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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='1'/%3E%3C/svg%3E"); }

.site-header { height: 122px; padding: 0 clamp(28px, 5vw, 82px); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; background: rgba(247, 247, 244, .84); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.brand img { width: 250px; display: block; }
.desktop-nav { display: flex; gap: clamp(24px, 3vw, 49px); margin-left: auto; margin-right: clamp(30px, 5vw, 80px); }
.desktop-nav a, .header-cta, footer { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a:after { content: ""; position: absolute; width: 0; height: 1px; left: 0; bottom: 3px; background: var(--green); transition: width .2s ease; }
.desktop-nav a:hover:after { width: 100%; }
.header-cta { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.header-cta span, .text-link span { color: var(--green); font-size: 16px; margin-left: 4px; }
.menu-button, .mobile-nav { display: none; }

.hero { min-height: 560px; padding: 12px clamp(28px, 5vw, 82px) 60px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(500px, 680px); column-gap: clamp(64px, 8vw, 160px); justify-content: space-between; align-items: start; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .section-label { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #52645b; }
.eyebrow-dot { display: inline-block; height: 8px; width: 8px; background: var(--green); border-radius: 50%; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 25px 0 26px; max-width: 710px; font-size: clamp(51px, 5.5vw, 84px); line-height: 1.02; letter-spacing: -.052em; font-weight: 600; }
h1 em, h2 em, blockquote em { color: var(--green); font-style: normal; font-weight: 500; }
.hero-intro { max-width: 535px; font-size: 20px; line-height: 1.55; letter-spacing: -.015em; color: #3d4a59; }
.button { display: inline-flex; align-items: center; gap: 42px; margin-top: 22px; padding: 18px 21px 18px 24px; font-size: 14px; font-weight: 700; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-dark { color: white; background: var(--ink); }
.button span { color: #b6c7b3; font-size: 19px; line-height: 12px; }

.hero-art { height: 500px; position: relative; justify-self: end; width: min(100%, 680px); overflow: hidden; background: #e9eee8; border: 1px solid rgba(7, 23, 45, .09); }
.data-diagram { width: 100%; height: 100%; display: block; }.diagram-caption { fill: #607462; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 1.25px; }.diagram-connection { fill: none; stroke: #8ba18d; stroke-width: 1.4; }.source-list rect, .decision-panel rect { fill: rgba(250,251,248,.92); stroke: #9caf9e; stroke-width: 1; }.source-list circle { fill: #829a84; }.source-list text, .decision-panel text { fill: #203345; font-family: var(--sans); font-size: 11px; font-weight: 500; }.model-panel rect { fill: #0b1d34; }.model-panel text { fill: #dfe9dd; font-family: var(--sans); font-size: 13px; font-weight: 500; }.model-panel .model-title { fill: #a9bda9; font-size: 10px; font-weight: 600; letter-spacing: 1.15px; }.model-panel path { stroke: rgba(221,235,219,.22); stroke-width: 1; }.model-panel .model-status { fill: #a8c1a5; font-size: 9px; font-weight: 600; letter-spacing: 1.15px; }.decision-panel .chart-axis { stroke: #a7b9a8; stroke-width: 1; }.decision-panel .chart-line { fill: none; stroke: #6f8d75; stroke-width: 2; }.decision-panel .chart-dot { fill: #0b1d34; }.decision-panel .decision-number { fill: #0b1d34; font-size: 22px; font-weight: 500; letter-spacing: -.8px; }.decision-panel .decision-label { fill: #607462; font-size: 8px; font-weight: 600; letter-spacing: .85px; }.diagram-header, .diagram-footer { position: absolute; left: 26px; right: 26px; display: flex; justify-content: space-between; align-items: center; color: #536a58; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .09em; }.diagram-header { top: 23px; }.diagram-header i { display: block; width: 36px; height: 1px; background: #7e967f; }.diagram-footer { bottom: 21px; color: #5d715f; font-size: 9px; }

@media (min-width: 1600px) { .hero { width: min(calc(100% - 96px), 1860px); margin: 0 auto; padding-left: 0; padding-right: 0; } }
.scroll-prompt { position: absolute; bottom: 29px; left: clamp(22px, 5vw, 82px); display: flex; align-items: center; gap: 10px; color: #697477; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }.scroll-prompt span { height: 32px; width: 1px; background: var(--green); }

.section-grid { padding: 125px clamp(22px, 5vw, 82px); display: grid; grid-template-columns: minmax(160px, .42fr) 1fr; column-gap: 8%; }.section-label { color: #65746c; }
.intro { background: #dce3da; }.intro-content { max-width: 795px; }.intro h2, .services h2, .work h2, .approach h2, .contact h2 { margin: -12px 0 25px; font-size: clamp(38px, 4.1vw, 66px); line-height: 1.09; letter-spacing: -.045em; font-weight: 600; }.intro-content > p { max-width: 690px; font-size: 20px; line-height: 1.62; letter-spacing: -.014em; color: #334239; }.text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 600; }

.work { padding: 125px 0 0; background: var(--cream); }.work-heading { padding-top: 0; padding-bottom: 67px; }.work-heading h2 { margin-bottom: 18px; }.work-heading div > p { max-width: 530px; color: #596573; font-size: 17px; line-height: 1.6; }.case-list { border-top: 1px solid var(--line); }.case-study { min-height: 250px; padding: 36px clamp(28px, 5vw, 82px); display: grid; grid-template-columns: minmax(60px, .24fr) minmax(280px, .9fr) minmax(260px, .83fr) minmax(170px, .48fr); gap: 36px; align-items: start; border-bottom: 1px solid var(--line); transition: background .25s ease; }.case-study:hover { background: #eff1ed; }.case-index, .case-sector, .case-tags { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }.case-index { color: var(--green); padding-top: 4px; }.case-sector { margin-bottom: 17px; color: #637369; }.case-main h3 { margin: 0; max-width: 390px; font-size: 29px; line-height: 1.14; letter-spacing: -.035em; font-weight: 600; }.case-project-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; color: #526b57; border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }.case-project-link span { font-size: 15px; }.case-main h3 a:hover { color: #657d68; }.case-description { margin: 31px 0 0; color: #4f5d69; font-size: 17px; line-height: 1.6; }.case-tags { align-self: end; justify-self: start; display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 5px; }.case-tags span { padding: 8px 10px; border: 1px solid rgba(7, 23, 45, .16); color: #506357; }

.services { padding: 125px 0 0; background: #f0f2ee; }.services-heading { padding-top: 0; padding-bottom: 70px; }.services-heading h2 { margin-bottom: 18px; }.services-heading div > p { max-width: 520px; color: #556271; font-size: 19px; line-height: 1.6; }.service-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.service-card { min-height: 390px; padding: 36px clamp(28px, 3vw, 50px) 39px; border-right: 1px solid var(--line); position: relative; transition: background .3s ease; }.service-card:last-child { border: 0; }.service-card:hover { background: #e7ebe5; }.service-number { font-family: var(--mono); font-size: 13px; color: var(--green); }.service-icon { height: 70px; margin: 40px 0 35px; position: relative; width: 85px; }.strategy-icon span { display: block; position: absolute; width: 12px; background: var(--ink); bottom: 5px; }.strategy-icon span:nth-child(1) { height: 20px; left: 3px; }.strategy-icon span:nth-child(2) { height: 41px; left: 29px; }.strategy-icon span:nth-child(3) { height: 63px; left: 55px; background: var(--green); }.data-icon { border: 1px solid var(--green); border-radius: 50%; width: 69px; height: 69px; }.data-icon span { position: absolute; width: 9px; height: 9px; background: var(--ink); border-radius: 50%; }.data-icon span:nth-child(1) { top: 11px; left: 30px; }.data-icon span:nth-child(2) { top: 30px; left: 11px; }.data-icon span:nth-child(3) { top: 30px; right: 11px; }.data-icon span:nth-child(4) { bottom: 11px; left: 30px; background: var(--green); }.delivery-icon span { position: absolute; display: block; border: 1px solid var(--ink); width: 43px; height: 43px; transform: rotate(45deg); }.delivery-icon span:nth-child(1) { left: 0; top: 14px; }.delivery-icon span:nth-child(2) { left: 25px; top: 14px; border-color: var(--green); }.delivery-icon span:nth-child(3) { left: 50px; top: 14px; }.service-card h3 { margin-bottom: 13px; font-size: 25px; line-height: 1.16; letter-spacing: -.036em; font-weight: 600; }.service-card > p:not(.service-number) { max-width: 335px; font-size: 17px; line-height: 1.58; color: #5a6671; }.service-card > a { position: absolute; bottom: 36px; right: clamp(28px, 3vw, 50px); font-size: 25px; color: var(--green); }

.statement { min-height: 590px; padding: 105px clamp(22px, 11vw, 177px); position: relative; overflow: hidden; background: var(--ink); color: #f7f7f4; }.statement .section-label { color: #aebcac; position: relative; z-index: 2; }.statement blockquote { position: relative; z-index: 2; margin: 88px 0 0; font-size: clamp(42px, 5.1vw, 81px); line-height: 1.02; letter-spacing: -.068em; font-weight: 700; }.statement-flare { width: 635px; height: 635px; position: absolute; right: -93px; top: -97px; background: radial-gradient(circle, rgba(132, 159, 134, .74) 0%, rgba(102, 130, 111, .32) 25%, transparent 70%); filter: blur(2px); }.statement:after { content: ""; position: absolute; height: 900px; width: 900px; right: -250px; top: -150px; border: 1px solid rgba(199, 216, 192, .22); border-radius: 50%; box-shadow: 0 0 0 55px rgba(199,216,192,.04), 0 0 0 120px rgba(199,216,192,.035); }

.approach { background: #f7f7f4; }.approach-content { display: grid; grid-template-columns: .9fr 1fr; gap: 10%; }.approach h2 { font-size: clamp(38px, 3.9vw, 62px); }.approach-content > div > p { max-width: 540px; color: #53616d; font-size: 18px; line-height: 1.65; }.principles { list-style: none; padding: 0; margin: 0; }.principles li { position: relative; padding: 0 0 29px 56px; margin-bottom: 29px; border-bottom: 1px solid var(--line); }.principles li:last-child { margin-bottom: 0; }.principles span { position: absolute; left: 0; top: 4px; color: var(--green); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .05em; }.principles strong { font-size: 19px; letter-spacing: -.022em; font-weight: 600; }.principles p { margin: 8px 0 0; color: #68727b; font-size: 16px; line-height: 1.58; }

.contact { background: #b7c5b5; }.contact-inner { width: 100%; min-height: 500px; margin: 0 auto; padding: 90px clamp(28px, 5vw, 82px) 76px; display: flex; flex-direction: column; justify-content: space-between; }.contact-copy { display: grid; grid-template-columns: minmax(160px, .42fr) 1fr; column-gap: 8%; }.contact-copy .section-label { position: static; color: #4b5f51; }.contact-message { max-width: 650px; }.contact h2 { margin: -14px 0 15px; }.contact-message p { max-width: 390px; margin: 28px 0 0; color: #405046; font-size: 19px; line-height: 1.55; }.contact-email { align-self: flex-end; display: inline-flex; align-items: flex-end; justify-content: space-between; width: min(100%, 680px); padding-bottom: 15px; border-bottom: 2px solid var(--ink); font-size: clamp(23px, 4vw, 52px); letter-spacing: -.045em; font-weight: 500; }.contact-email i { font-style: normal; font-size: 32px; color: #5c7462; transition: transform .2s ease; }.contact-email:hover i { transform: translate(4px, -4px); }

footer { min-height: 130px; padding: 30px clamp(28px, 5vw, 82px); color: #bdc6d0; background: var(--ink); display: flex; align-items: center; gap: 30px; }footer img { width: 192px; height: auto; filter: brightness(0) invert(1); }.footer-details { display: flex; flex-direction: column; gap: 6px; margin-left: auto; }.footer-details p { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; }.footer-socials { display: flex; align-items: center; gap: 8px; }.footer-socials a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(230, 237, 230, .32); color: #eef2eb; transition: background .2s ease, color .2s ease; }.footer-socials a:hover { color: var(--ink); background: #eef2eb; }.footer-socials svg { width: 17px; height: 17px; fill: currentColor; } footer > a { font-family: var(--mono); font-size: 12px; } footer > a span { color: #a9bca6; margin-left: 5px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.service-card:nth-child(2) { transition-delay: .08s; }.service-card:nth-child(3) { transition-delay: .16s; }

@media (max-width: 820px) {
  .site-header { height: 100px; }.brand img { width: 205px; }.desktop-nav, .header-cta { display: none; }.menu-button { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 8px 0 8px 14px; }.menu-button span { width: 28px; height: 1px; background: var(--ink); transition: transform .2s ease; }.mobile-nav { display: block; position: absolute; z-index: 9; top: 100px; left: 0; right: 0; padding: 18px 28px 29px; background: var(--cream); border-bottom: 1px solid var(--line); transform: translateY(-120%); opacity: 0; transition: all .25s ease; }.mobile-nav.open { transform: translateY(0); opacity: 1; }.mobile-nav a { display: block; padding: 13px 0; font-size: 18px; font-weight: 700; }.hero { min-height: auto; grid-template-columns: 1fr; padding-top: 88px; gap: 50px; }.hero-art { height: 380px; width: 100%; }.scroll-prompt { display: none; }.section-grid { grid-template-columns: 1fr; padding: 84px 28px; gap: 34px; }.intro h2, .services h2, .approach h2, .contact h2 { margin-top: 0; }.services { padding-top: 84px; }.services-heading { padding-top: 0; padding-bottom: 48px; }.service-list { grid-template-columns: 1fr; }.service-card { min-height: 350px; border-right: 0; border-bottom: 1px solid var(--line); }.service-card:last-child { border-bottom: 0; }.statement { min-height: 460px; padding-top: 75px; padding-bottom: 70px; }.statement blockquote { margin-top: 68px; }.approach-content { grid-template-columns: 1fr; gap: 40px; }.contact { min-height: 430px; padding-top: 84px; }.contact-copy { grid-template-columns: 1fr; gap: 32px; }.contact-email { align-self: stretch; } footer { flex-wrap: wrap; gap: 16px; } footer .footer-details { margin-left: 0; width: 100%; order: 3; } footer .footer-details p { width: auto; } footer > a { margin-left: auto; }
}
@media (max-width: 820px) {
  .contact { min-height: 0; padding: 0; }
  .contact-inner { min-height: 430px; padding: 84px 28px 72px; }
  .contact-copy { grid-template-columns: 1fr; gap: 32px; }
  .contact-message p { margin: 0; }
  .work { padding-top: 78px; }
  .work-heading { padding-top: 0; padding-bottom: 44px; }
  .work h2 { margin-top: 0; }
  .case-study { min-height: 0; grid-template-columns: 44px 1fr; gap: 15px 20px; padding-top: 27px; padding-bottom: 28px; }
  .case-main { grid-column: 2; }
  .case-description { grid-column: 2; margin: 2px 0 0; }
  .case-tags { grid-column: 2; padding-bottom: 0; }
  .case-main h3 { font-size: 26px; }
}
@media (max-width: 450px) { h1 { font-size: 50px; }.hero-art { height: 320px; }.orb-one { right: -50px; }.card-top { right: 20px; }.contact-email { font-size: 23px; }.contact-email i { font-size: 24px; } }