:root {
  --navy: #06294a;
  --navy-deep: #031d35;
  --green: #15933d;
  --green-bright: #32ad52;
  --cream: #f5f3ec;
  --white: #fff;
  --ink: #102c43;
  --muted: #64717b;
  --line: rgba(6, 41, 74, 0.14);
  --page: min(1240px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fbfcfa; font-family: Inter, Avenir, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: fixed; z-index: 50; top: 0; left: 50%; width: var(--page); height: 94px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; transition: height .3s ease, background .3s ease, box-shadow .3s ease, width .3s ease, padding .3s ease; }
.site-header.scrolled { top: 10px; width: min(1180px, calc(100vw - 32px)); height: 70px; padding: 0 22px; border: 1px solid rgba(6,41,74,.08); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 12px 40px rgba(6,41,74,.09); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); }
.brand-mark { width: 49px; height: 49px; }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.5; }
.brand-mark .brand-green { stroke: var(--green); }
.brand-name { display: flex; align-items: baseline; gap: 6px; letter-spacing: -.035em; }
.brand-name strong { font-size: 28px; line-height: 1; }
.brand-name small { font-size: 18px; font-weight: 750; color: var(--green); }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 700; }
.site-nav a { transition: color .2s ease; }
.site-nav a:hover { color: var(--green); }
.site-nav .nav-cta { padding: 12px 19px; border: 1px solid var(--navy); border-radius: 999px; }
.site-nav .nav-cta:hover { color: #fff; background: var(--navy); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 50%; background: var(--navy); }
.menu-toggle span:not(.sr-only) { display: block; width: 100%; height: 2px; margin: 4px 0; background: #fff; transition: transform .2s ease, opacity .2s ease; }

.hero { position: relative; width: var(--page); min-height: 780px; margin: 0 auto; padding-top: 94px; display: grid; grid-template-columns: 51% 49%; align-items: center; overflow: hidden; }
.hero-copy { z-index: 2; padding: 64px 0 78px; }
.eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 12px; color: var(--green); font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 38px; height: 2px; background: currentColor; }
.hero h1, .section h2 { margin: 0; color: var(--navy); font-size: clamp(60px, 6.45vw, 100px); line-height: .93; letter-spacing: -.065em; }
.hero h1 em, .join h2 em { color: var(--green); font-style: normal; }
.hero-lead { max-width: 610px; margin: 34px 0 0; padding-left: 22px; border-left: 3px solid var(--green); color: #344957; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 28px; }
.button { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 999px; font-size: 15px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--navy); box-shadow: 0 13px 30px rgba(6,41,74,.19); }
.button-primary:hover { background: var(--green); }
.text-link { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 14px; font-weight: 800; }
.text-link span { margin-left: 7px; color: var(--green); }
.hero-visual { position: relative; height: 650px; }
.photo-frame { position: absolute; inset: 0 0 0 4%; overflow: hidden; border-radius: 50% 42% 44% 56% / 55% 46% 54% 45%; box-shadow: 0 34px 80px rgba(6,41,74,.18); background: #dbeaf0; }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,41,74,.03), transparent 55%, rgba(6,41,74,.18)); }
.photo-frame img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 48%; transform: scale(1.03); }
.photo-credit { position: absolute; z-index: 3; right: 22px; bottom: 18px; margin: 0; padding: 7px 10px; border-radius: 9px; color: rgba(255,255,255,.78); background: rgba(3,29,53,.72); backdrop-filter: blur(8px); font-size: 9px; line-height: 1.35; }
.photo-credit a { color: white; }.photo-credit a:hover { text-decoration: underline; }
.hero-stamp { position: absolute; z-index: 2; left: -17px; bottom: 56px; width: 154px; height: 154px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 9px solid #fff; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 20px 45px rgba(6,41,74,.2); transform: rotate(-7deg); text-align: center; font-size: 14px; font-weight: 850; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
.hero-stamp svg { width: 35px; height: 35px; fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(21,147,61,.18); border-radius: 50%; }
.orbit-one { width: 720px; height: 720px; top: -30px; left: -20px; }
.orbit-two { width: 790px; height: 790px; top: -66px; left: -55px; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; width: 28px; height: 44px; border: 1px solid var(--line); border-radius: 20px; }
.scroll-cue span { position: absolute; top: 9px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--green); animation: scroll 1.8s infinite; }
@keyframes scroll { 0% { transform: translate(-50%,0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translate(-50%,16px); opacity: 0; } 100% { opacity: 0; } }

.section { padding: 120px max(32px, calc((100vw - 1240px) / 2)); }
.section-kicker { margin-bottom: 48px; display: flex; align-items: center; gap: 12px; color: var(--green); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker::after { content: ""; width: 52px; height: 1px; background: currentColor; }
.section-kicker.light { color: #5fe77e; }
.intro { background: var(--cream); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.intro h2, .people h2 { font-size: clamp(49px, 5.1vw, 74px); line-height: 1.02; }
.intro h2 span, .people h2 span { color: var(--green); }
.intro-copy { padding-top: 6px; }
.intro-copy p { max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.intro-copy .large-copy { margin-top: 0; color: var(--ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.5; }
.values { margin-top: 84px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(6,41,74,.16); }
.values article { position: relative; padding: 38px 42px 8px 0; border-right: 1px solid rgba(6,41,74,.12); }
.values article:not(:first-child) { padding-left: 42px; }
.values article:last-child { border-right: 0; }
.values article > span { position: absolute; top: 42px; right: 28px; color: rgba(6,41,74,.28); font-size: 12px; font-weight: 800; }
.values h3 { margin: 0 0 10px; color: var(--navy); font-size: 23px; }
.values p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.priorities { color: white; background: var(--navy); }
.priority-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
.priority-heading h2 { color: white; font-size: clamp(50px, 5.8vw, 82px); }
.priority-heading h2 span { color: #63e881; }
.priority-heading > p { max-width: 440px; margin: 0 0 8px; color: #b8c7d3; font-size: 17px; line-height: 1.7; }
.priority-list { margin-top: 80px; border-top: 1px solid rgba(255,255,255,.2); }
.priority-card { min-height: 126px; margin: 0 -18px; padding: 0 18px; display: grid; grid-template-columns: 62px 74px 1fr .9fr; align-items: center; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 12px; transition: background .25s ease; }
.priority-card:hover { background: rgba(99,232,129,.075); }
.priority-card h3 { transition: color .25s ease; }
.priority-card:hover h3 { color: #63e881; }
.priority-number { color: #63e881; font-size: 13px; font-weight: 800; }
.priority-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(99,232,129,.6); border-radius: 50%; color: #63e881; font-size: 25px; }
.priority-card h3 { max-width: 490px; margin: 0; color: #fff; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.18; }
.priority-card p { max-width: 430px; margin: 0; color: #9fb2c1; font-size: 14px; line-height: 1.6; }

.people { overflow: hidden; background: #fff; }
.people-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.people-grid > div:first-child > p { max-width: 500px; margin: 32px 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.coming-soon { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.coming-soon::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(21,147,61,.12); }
.people-placeholder { position: relative; height: 480px; }
.profile-card { position: absolute; width: 230px; height: 320px; overflow: hidden; border-radius: 120px 120px 28px 28px; background: #e9eee8; box-shadow: 0 24px 55px rgba(6,41,74,.1); }
.profile-card span { position: absolute; top: 70px; left: 50%; width: 76px; height: 76px; transform: translateX(-50%); border-radius: 50%; background: #bdcbbf; }
.profile-card i { position: absolute; bottom: -40px; left: 50%; width: 165px; height: 200px; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: #cbd6cc; }
.profile-card-one { left: 0; top: 80px; transform: rotate(-7deg); }
.profile-card-two { z-index: 2; left: 28%; top: 16px; background: #dce9e0; }
.profile-card-three { right: 1%; top: 90px; transform: rotate(7deg); background: #e6ecef; }
.profile-card-two span { background: #9db7a2; }.profile-card-two i { background: #b0c8b5; }
.profile-card-three span { background: #c0cbd1; }.profile-card-three i { background: #ced7dc; }
.people-placeholder > p { position: absolute; z-index: 4; right: 2%; bottom: 3px; width: 126px; height: 126px; margin: 0; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); transform: rotate(6deg); text-align: center; font-size: 17px; font-weight: 850; line-height: 1.2; text-transform: uppercase; }

.join { position: relative; min-height: 660px; display: grid; place-items: center; overflow: hidden; color: white; background: var(--green); }
.join-inner { position: relative; z-index: 2; max-width: 840px; text-align: center; }
.join .eyebrow { justify-content: center; color: white; opacity: .85; }
.join h2 { color: white; font-size: clamp(58px, 7.2vw, 104px); }
.join h2 em { color: var(--navy); }
.join-inner > p:not(.eyebrow) { max-width: 650px; margin: 32px auto; font-size: 18px; line-height: 1.7; }
.button-light { color: var(--navy); background: white; box-shadow: 0 13px 30px rgba(6,41,74,.16); }
.button-light:hover { color: white; background: var(--navy); }
.join-rings span { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%,-50%); }
.join-rings span:nth-child(1) { width: 520px; height: 520px; }.join-rings span:nth-child(2) { width: 760px; height: 760px; }.join-rings span:nth-child(3) { width: 1020px; height: 1020px; }

footer { padding: 70px max(32px, calc((100vw - 1240px) / 2)) 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; color: #d2dde5; background: var(--navy-deep); }
.footer-brand { align-self: start; color: white; }.footer-brand .brand-name small { color: #54d873; }
.footer-note { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; text-align: right; }.footer-note strong { color: white; font-size: 18px; }.footer-note span { color: #8ea4b4; font-size: 14px; }
.footer-meta { grid-column: 1 / -1; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.13); color: #7991a2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.reveal { opacity: 1; transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { transform: none; }
.values article:nth-child(2) { transition-delay: .08s; }.values article:nth-child(3) { transition-delay: .16s; }

@media (max-width: 920px) {
  :root { --page: min(100% - 40px, 760px); }
  .site-header { height: 78px; }
  .site-header.scrolled { width: calc(100vw - 24px); }
  .menu-toggle { display: block; z-index: 2; }
  .site-nav { position: fixed; top: 0; right: -110%; width: min(340px, 88vw); height: 100vh; padding: 110px 32px 40px; flex-direction: column; align-items: stretch; gap: 8px; color: white; background: var(--navy); box-shadow: -20px 0 60px rgba(0,0,0,.2); transition: right .3s ease; }
  .site-nav.open { right: 0; }.site-nav a { padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 20px; }.site-nav .nav-cta { margin-top: 12px; border-color: white; text-align: center; }
  .menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.menu-toggle.active span:nth-child(2) { opacity: 0; }.menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .hero { min-height: auto; padding: 125px 0 80px; grid-template-columns: 1fr; }
  .hero-copy { padding: 0; }.hero h1 { font-size: clamp(55px, 12vw, 82px); }.hero-lead { max-width: 650px; }
  .hero-visual { height: 520px; margin-top: 52px; }.photo-frame { left: 5%; right: 5%; }.hero-stamp { left: 0; }
  .scroll-cue { display: none; }
  .section { padding: 90px max(20px, calc((100vw - 760px) / 2)); }
  .intro-grid, .priority-heading, .people-grid { grid-template-columns: 1fr; gap: 44px; }
  .values { margin-top: 60px; }
  .priority-heading > p { max-width: 620px; }
  .priority-card { grid-template-columns: 48px 58px 1fr; margin: 0; padding: 24px 14px; }.priority-card p { grid-column: 3; }
  .people-placeholder { height: 450px; max-width: 700px; width: 100%; }
}

@media (max-width: 620px) {
  :root { --page: calc(100vw - 32px); }
  .brand-mark { width: 40px; height: 40px; }.brand-name { flex-direction: column; align-items: flex-start; gap: 1px; }.brand-name strong { font-size: 21px; }.brand-name small { font-size: 13px; }
  .hero { padding-top: 108px; }.hero h1 { font-size: clamp(47px, 14vw, 66px); }.hero-lead { margin-top: 26px; font-size: 16px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hero-visual { height: 405px; margin-top: 40px; }.photo-frame { inset: 0; border-radius: 44% 56% 47% 53% / 48% 45% 55% 52%; }.photo-frame img { object-position: 50% 48%; transform: scale(1.03); }.photo-credit { right: 9px; bottom: 10px; max-width: 205px; font-size: 8px; }.hero-stamp { width: 112px; height: 112px; bottom: 8px; border-width: 6px; font-size: 11px; }.hero-stamp svg { width: 26px; height: 26px; }
  .section { padding-top: 72px; padding-bottom: 72px; }.section-kicker { margin-bottom: 34px; }.intro h2, .people h2 { font-size: 45px; }
  .values { grid-template-columns: 1fr; }.values article, .values article:not(:first-child) { padding: 26px 32px 26px 0; border-right: 0; border-bottom: 1px solid rgba(6,41,74,.12); }.values article > span { top: 30px; right: 6px; }
  .priority-heading h2 { font-size: 47px; }.priority-list { margin-top: 54px; }.priority-card { min-height: 0; grid-template-columns: 40px 1fr; gap: 13px 14px; padding-left: 8px; padding-right: 8px; }.priority-icon { width: 40px; height: 40px; font-size: 19px; }.priority-card h3 { font-size: 20px; }.priority-card p { grid-column: 2; }
  .people-grid { gap: 40px; }.people-placeholder { height: 330px; }.profile-card { width: 45%; height: 240px; }.profile-card span { top: 48px; width: 58px; height: 58px; }.profile-card i { width: 120px; height: 150px; }.profile-card-one { left: 0; top: 65px; }.profile-card-two { left: 27%; top: 15px; }.profile-card-three { right: 0; top: 72px; }.people-placeholder > p { width: 94px; height: 94px; right: 0; font-size: 13px; }
  .join { min-height: 570px; }.join h2 { font-size: 52px; }.join-inner > p:not(.eyebrow) { font-size: 16px; }
  footer { grid-template-columns: 1fr; padding-top: 54px; gap: 35px; }.footer-note { align-items: flex-start; text-align: left; }.footer-meta { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
