:root {
--ink:#17222d;
--muted:#6d7883;
--paper:#fbfaf7;
--white:#fff;
--dark:#142a2c;
--sage:#dfe9e0;
--lime:#b7d99b;
--rust:#b9694d;
--gold:#c9a66b;
--line:#dfe3df;
--cream:#f0eee7;
--navy:#0a1c20;
--acid:#c7f464
}
* {
box-sizing:border-box
}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font-family:"DM Sans",sans-serif;
line-height:1.6
}
a {
text-decoration:none;
color:inherit
}
.wrap {
width:min(1160px,92%);
margin:auto
}
.header {
height:72px;
background:rgba(10,28,32,.92);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(199,244,100,.25);
position:sticky;
top:0;
z-index:20
}
.nav {
height:100%;
display:flex;
align-items:center;
gap:30px
}
.logo {
display:flex;
align-items:center;
gap:10px;
font-size:15px;
white-space:nowrap;
color:#fff
}
.logo strong {
font-weight:800;
color:var(--acid)
}
.logo-mark {
width:37px;
height:37px;
background:linear-gradient(135deg,var(--acid),#9fce4a);
color:var(--navy);
border-radius:10px 10px 10px 4px;
display:grid;
place-items:center;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
box-shadow:0 6px 18px rgba(199,244,100,.35)
}
.nav nav {
display:flex;
gap:27px;
margin-left:auto
}
.nav nav a {
font-size:13px;
font-weight:500;
color:rgba(255,255,255,.82)
}
.nav nav a:hover,.nav nav .active {
color:var(--acid)
}
.nav-button {
background:var(--acid);
color:var(--navy);
padding:11px 20px;
border-radius:999px;
font-size:13px;
font-weight:700;
box-shadow:0 8px 24px rgba(199,244,100,.28);
transition:.2s
}
.nav-button:hover {
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(199,244,100,.42)
}
.menu-btn {
display:none;
border:0;
background:none;
font-size:22px;
margin-left:auto;
color:#fff
}
.hero {
min-height:700px;
position:relative;
overflow:hidden;
background:linear-gradient(125deg,var(--navy) 0%,#0f4a52 52%,#147a5f 100%)
}
.hero:after {
content:"";
position:absolute;
inset:0;
background:radial-gradient(640px 430px at 82% 16%,rgba(199,244,100,.32),transparent 62%),radial-gradient(560px 560px at 6% 96%,rgba(64,214,175,.26),transparent 66%);
pointer-events:none
}
.hero-lines {
position:absolute;
width:600px;
height:600px;
border:1px solid rgba(255,255,255,.16);
border-radius:50%;
right:-140px;
top:-90px
}
.hero-lines:before,.hero-lines:after {
content:"";
position:absolute;
border:1px solid rgba(255,255,255,.12);
border-radius:50%
}
.hero-lines:before {
inset:70px
}
.hero-lines:after {
inset:140px
}
.hero-layout {
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:80px;
align-items:center;
min-height:700px
}
.eyebrow,.label {
font-size:10px;
text-transform:uppercase;
letter-spacing:.15em;
font-weight:700;
color:#65756b
}
.eyebrow span {
display:inline-block;
width:7px;
height:7px;
background:var(--rust);
border-radius:50%;
margin-right:8px
}
.hero .eyebrow {
color:rgba(255,255,255,.8)
}
.hero .eyebrow span {
background:var(--acid);
box-shadow:0 0 0 5px rgba(199,244,100,.18)
}
.hero h1,.page-head h1,.section h2,.path-hero h1,.content h2 {
font-family:"Fraunces",serif;
line-height:1.03
}
.hero h1 {
font-size:clamp(48px,6vw,78px);
font-weight:700;
margin:20px 0;
color:#fff
}
.hero h1 i,.page-head h1 i,.section h2 i,.path-hero h1 i {
font-style:normal;
color:var(--rust)
}
.hero h1 i {
color:var(--acid)
}
.hero-copy>p {
font-size:17px;
max-width:650px;
color:rgba(255,255,255,.9)
}
.path-form {
margin-top:28px;
background:#fff;
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
padding:8px;
display:grid;
grid-template-columns:1fr 1fr auto;
box-shadow:0 26px 60px rgba(2,20,24,.45)
}
.path-form>div {
padding:9px 13px;
border-right:1px solid var(--line)
}
label {
display:block;
font-size:9px;
text-transform:uppercase;
letter-spacing:.1em;
color:#879188;
font-weight:700
}
.path-form select {
border:0;
background:none;
outline:0;
font:inherit;
font-weight:600;
color:var(--dark);
width:100%;
margin-top:2px
}
.path-form button {
border:0;
background:var(--acid);
color:var(--navy);
border-radius:9px;
padding:0 19px;
font-weight:800;
cursor:pointer;
transition:.2s
}
.path-form button:hover {
background:#d8fa8f
}
.micro-note {
font-size:11px;
color:rgba(255,255,255,.66);
margin-top:13px
}
.hero-visual {
position:relative;
height:500px;
display:grid;
place-items:center
}
.orbit {
position:absolute;
border-radius:50%;
border:1px solid rgba(255,255,255,.18)
}
.orbit-a {
width:430px;
height:430px
}
.orbit-b {
width:520px;
height:520px
}
.profile-card {
width:355px;
background:#fff;
border:1px solid rgba(255,255,255,.75);
border-radius:20px;
padding:23px;
box-shadow:0 30px 80px rgba(2,20,24,.45);
position:relative;
z-index:2
}
.profile-top {
display:flex;
justify-content:space-between;
color:#89948d;
font-size:9px;
letter-spacing:.12em
}
.profile-top b {
color:#4e735f
}
.profile-degree {
display:flex;
gap:12px;
align-items:center;
margin:25px 0
}
.degree-icon {
width:45px;
height:45px;
border-radius:12px;
background:#e8efe6;
display:grid;
place-items:center;
font-family:serif;
font-size:22px;
color:#3f6650
}
.profile-degree small,.route small {
display:block;
font-size:8px;
letter-spacing:.1em;
color:#89948d
}
.profile-degree strong {
font-size:17px
}
.route {
border-top:1px solid var(--line);
padding:15px 0;
display:grid;
grid-template-columns:11px 1fr auto;
gap:12px;
align-items:start
}
.route-dot {
width:9px;
height:9px;
border-radius:50%;
background:var(--rust);
margin-top:5px
}
.route-dot.green {
background:#6f9c79
}
.route-dot.gold {
background:var(--gold)
}
.route strong {
font-size:13px
}
.route p {
font-size:10px;
color:#818b85;
margin:2px 0
}
.route>span {
color:#88938c
}
.floating-note {
position:absolute;
z-index:3;
background:rgba(255,255,255,.9);
backdrop-filter:blur(8px);
padding:13px 16px;
border-radius:10px;
box-shadow:0 15px 35px rgba(2,20,24,.35);
right:0;
bottom:20px;
font-size:10px;
color:#68746d
}
.floating-note b {
font-size:11px;
color:var(--ink)
}
.ticker {
background:var(--acid);
color:var(--navy);
padding:15px 0
}
.ticker-inner {
display:flex;
justify-content:space-between;
font-size:9px;
letter-spacing:.17em;
font-weight:700
}
.section {
padding:95px 0
}
.section-intro {
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:end
}
.section h2 {
font-size:52px;
margin:12px 0
}
.section-intro>p {
color:var(--muted);
font-size:16px;
max-width:500px
}
.problem-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);
margin-top:65px
}
.problem-grid>div {
padding:25px 25px 0 0;
border-right:1px solid var(--line);
margin-right:25px
}
.problem-grid>div:last-child {
border:0
}
.problem-grid span {
font-size:11px;
color:var(--rust);
font-weight:700
}
.problem-grid h3 {
font-family:"Fraunces",serif;
font-size:23px;
margin:25px 0 5px
}
.problem-grid p {
font-size:13px;
color:var(--muted)
}
.dark {
background:var(--dark);
color:#fff
}
.dark-intro .label {
color:#a8bcae
}
.dark-intro p {
color:#bdcbc2
}
.goal-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
margin-top:55px;
gap:1px;
background:rgba(255,255,255,.14)
}
.goal-grid a {
background:var(--dark);
padding:25px;
min-height:230px;
border:1px solid rgba(255,255,255,.07);
transition:.2s
}
.goal-grid a:hover {
background:#1d393b;
transform:translateY(-4px)
}
.goal-grid small {
color:var(--lime);
font-size:10px
}
.goal-grid h3 {
font-family:"Fraunces",serif;
font-size:25px;
margin:50px 0 5px
}
.goal-grid p {
color:#aebdb5;
font-size:12px
}
.goal-grid b {
font-size:11px;
color:#fff
}
.section-head {
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:30px
}
.section-head>a {
font-size:12px;
font-weight:700
}
.path-grid,.research-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px
}
.research-card {
background:#fff;
border:1px solid var(--line);
padding:22px;
border-radius:15px;
transition:.2s
}
.research-card:hover {
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(20,42,44,.07)
}
.card-line,.card-bottom {
display:flex;
justify-content:space-between;
gap:10px
}
.card-line {
font-size:9px;
text-transform:uppercase;
letter-spacing:.1em;
color:#87918b
}
.research-card h3 {
font-family:"Fraunces",serif;
font-size:24px;
line-height:1.15;
margin:22px 0 7px
}
.research-card p {
font-size:12px;
color:var(--muted);
min-height:58px
}
.chips {
display:flex;
flex-wrap:wrap;
gap:6px;
margin:15px 0
}
.chips span {
font-size:9px;
padding:5px 8px;
background:#edf2ed;
border-radius:5px;
color:#52685a
}
.card-bottom {
border-top:1px solid var(--line);
padding-top:13px;
font-size:10px;
color:#8a948e
}
.card-bottom a {
font-weight:700;
color:var(--dark)
}
.cream {
background:var(--cream)
}
.method {
display:grid;
grid-template-columns:1fr 1fr;
gap:100px
}
.method>div>p {
max-width:500px;
color:var(--muted)
}
.method-list {
border-top:1px solid #d7d6cf
}
.method-list>div {
display:grid;
grid-template-columns:40px 1fr;
gap:15px;
padding:20px 0;
border-bottom:1px solid #d7d6cf
}
.method-list b {
color:var(--rust);
font-size:11px
}
.method-list span {
font-weight:700
}
.method-list p {
grid-column:2;
margin:0;
color:#7b817d;
font-size:12px
}
.newsletter {
padding-top:70px
}
.news-box {
background:#e4eee3;
border-radius:18px;
padding:45px;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px
}
.news-box h2 {
font-size:40px
}
.news-box form {
display:flex;
background:#fff;
padding:5px;
border-radius:10px
}
.news-box input {
border:0;
outline:0;
padding:10px;
width:230px;
font:inherit
}
.news-box button {
border:0;
background:var(--dark);
color:#fff;
border-radius:7px;
padding:0 17px;
font-weight:700
}
.footer {
background:#f2f1ec;
padding:55px 0 20px
}
.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px
}
.footer p {
font-size:12px;
color:#7d8780;
max-width:300px
}
.footer h4 {
font-size:10px;
text-transform:uppercase;
letter-spacing:.14em
}
.footer-grid>div>a:not(.logo) {
display:block;
font-size:12px;
color:#737e78;
margin:8px 0
}
.footer-bottom {
border-top:1px solid #d8d8d1;
margin-top:35px;
padding-top:18px;
display:flex;
justify-content:space-between;
font-size:9px;
color:#8b928d;
gap:20px
}
.page-head {
background:var(--cream);
padding:75px 0
}
.page-head h1 {
font-size:64px;
margin:15px 0
}
.page-head p {
color:var(--muted);
font-size:16px;
max-width:650px
}
.explore-area {
padding:40px 0 90px
}
.filters {
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr auto;
gap:9px;
background:#fff;
border:1px solid var(--line);
padding:10px;
border-radius:13px
}
.search {
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border-right:1px solid var(--line)
}
.search input {
border:0;
outline:0;
font:inherit;
width:100%
}
.filters select,.filters button,.results-bar select {
border:1px solid #dce1dc;
background:#fff;
border-radius:8px;
padding:10px;
font:inherit;
color:#55615a
}
.filters button {
cursor:pointer
}
.results-bar {
display:flex;
justify-content:space-between;
margin:22px 0;
font-size:11px;
color:#7c857f
}
.empty {
padding:30px;
border:1px solid var(--line);
background:#fff
}
.content {
padding:70px 0
}
.narrow {
max-width:820px
}
.content article {
padding:30px 0;
border-bottom:1px solid var(--line)
}
.content h2 {
font-size:31px;
margin:12px 0
}
.content p {
color:var(--muted)
}
.path-hero {
background:var(--sage);
padding:75px 0
}
.path-layout {
display:grid;
grid-template-columns:1fr 340px;
gap:70px;
align-items:center
}
.path-hero h1 {
font-size:67px;
margin:17px 0
}
.path-hero p {
font-size:18px;
color:#53645c;
max-width:680px
}
.route-card {
background:#fff;
padding:26px;
border-radius:16px;
box-shadow:0 18px 40px rgba(20,42,44,.09)
}
.route-card small {
font-size:9px;
letter-spacing:.13em;
color:#8a958e
}
.route-card strong {
display:block;
font-family:"Fraunces",serif;
font-size:24px;
margin:22px 0 5px
}
.route-card p {
font-size:12px;
color:var(--muted)
}
.route-card a {
font-size:11px;
font-weight:700
}
.path-body {
padding:70px 0
}
.path-columns {
display:grid;
grid-template-columns:1.3fr .7fr;
gap:90px
}
.path-columns section {
margin-bottom:65px
}
.path-columns h2 {
font-size:36px;
margin:10px 0 25px
}
.skill-list {
border-top:1px solid var(--line)
}
.skill-list div {
display:flex;
gap:20px;
padding:16px 0;
border-bottom:1px solid var(--line);
font-size:13px
}
.skill-list b {
color:var(--rust);
font-size:10px
}
.path-columns ol {
padding-left:20px
}
.path-columns li {
padding:9px 0;
color:var(--muted)
}
.side-box {
background:var(--dark);
color:#fff;
border-radius:16px;
padding:27px;
position:sticky;
top:105px
}
.side-box .label {
color:var(--lime)
}
.side-box h3 {
font-family:"Fraunces",serif;
font-size:27px
}
.side-box p {
font-size:12px;
color:#bdcbc2
}

@media(max-width:900px) {
.nav nav {
display:none
}
.nav nav.open {
display:flex;
position:absolute;
top:72px;
left:0;
right:0;
background:var(--navy);
padding:20px;
flex-direction:column;
border-bottom:1px solid rgba(255,255,255,.08)
}
.menu-btn {
display:block
}
.nav-button {
display:none
}
.hero-layout,.section-intro,.method,.path-layout,.path-columns {
grid-template-columns:1fr
}
.hero-layout {
padding:65px 0
}
.hero-visual {
height:440px
}
.path-grid,.research-grid {
grid-template-columns:1fr 1fr
}
.goal-grid {
grid-template-columns:1fr 1fr
}
.problem-grid {
grid-template-columns:1fr
}
.problem-grid>div {
border-right:0;
border-bottom:1px solid var(--line);
padding-bottom:20px
}
.filters {
grid-template-columns:1fr 1fr
}
.search {
grid-column:1/-1;
border-right:0;
border-bottom:1px solid var(--line);
padding:10px
}
.footer-grid {
grid-template-columns:1fr 1fr
}
.news-box {
flex-direction:column;
align-items:flex-start
}
.path-columns {
gap:20px
}
.side-box {
position:static
}
}

@media(max-width:600px) {
.hero h1,.page-head h1 {
font-size:45px
}
.path-hero h1 {
font-size:45px
}
.path-form {
grid-template-columns:1fr
}
.path-form>div {
border-right:0;
border-bottom:1px solid var(--line)
}
.path-form button {
padding:14px
}
.hero-visual {
height:390px
}
.profile-card {
width:310px
}
.orbit-a {
width:360px;
height:360px
}
.orbit-b {
width:430px;
height:430px
}
.floating-note {
right:0
}
.section {
padding:65px 0
}
.section h2 {
font-size:39px
}
.goal-grid,.path-grid,.research-grid,.footer-grid {
grid-template-columns:1fr
}
.filters {
grid-template-columns:1fr
}
.footer-bottom {
flex-direction:column
}
.news-box form {
width:100%
}
.news-box input {
width:100%
}
.ticker-inner {
overflow:hidden;
white-space:nowrap
}
.section-intro {
gap:20px
}
.hero-layout {
min-height:auto
}
}