:root {
    --ink:#17211d;
    --muted:#64706b;
    --paper:#f4f3ee;
    --card:#fff;
    --green:#0c664e;
    --green2:#158066;
    --lime:#c7ef75;
    --blue:#dceaf2;
    --line:#d9ddd7;
    --serif:'Prata',serif;
    --sans:'Manrope',sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px
}
a {
    color:inherit;
    text-decoration:none
}
button,textarea {
    font:inherit
}
button {
    cursor:pointer
}
.site-header {
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5vw;
    border-bottom:1px solid rgba(23,33,29,.12);
    position:absolute;
    z-index:10;
    width:100%;
    color:#fff
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:17px;
    font-weight:800;
    letter-spacing:.14em
}
.brand-mark {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid currentColor;
    border-radius:50%;
    font-family:var(--serif);
    font-size:16px
}
.main-nav {
    display:flex;
    gap:34px;
    font-size:13px;
    font-weight:600
}
.main-nav a {
    opacity:.78;
    transition:.2s
}
.main-nav a:hover {
    opacity:1
}
.header-actions {
    display:flex;
    align-items:center;
    gap:19px
}
.icon-btn {
    border:0;
    background:none;
    color:inherit;
    font-size:20px
}
.login-link {
    font-weight:700;
    font-size:13px
}
.menu-toggle {
    display:none;
    border:0;
    background:none;
    color:inherit
}
.hero {
    min-height:960px;
    background:radial-gradient(circle at 77% 24%,rgba(42,147,115,.45),transparent 28%),linear-gradient(135deg,#0e3028,#08241f 65%,#102e27);
    color:#fff;
    padding:154px 5vw 72px;
    position:relative;
    overflow:hidden
}
.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,black,transparent 85%)
}
.hero-glow {
    position:absolute;
    width:480px;
    height:480px;
    border:1px solid rgba(199,239,117,.16);
    border-radius:50%;
    right:8%;
    top:15%;
    box-shadow:0 0 0 100px rgba(199,239,117,.025),0 0 0 200px rgba(199,239,117,.018)
}
.hero-copy {
    position:relative;
    width:56%;
    z-index:1
}
.eyebrow,.kicker {
    text-transform:uppercase;
    letter-spacing:.17em;
    font-size:10px;
    font-weight:800
}
.eyebrow {
    color:#bcd0c8;
    display:flex;
    align-items:center;
    gap:10px
}
.eyebrow span {
    width:24px;
    height:1px;
    background:var(--lime)
}
h1,h2,h3,p {
    margin-top:0
}
.hero h1 {
    font-family:var(--serif);
    font-size:clamp(48px,6.2vw,94px);
    line-height:1.04;
    font-weight:400;
    letter-spacing:-.04em;
    margin:24px 0 27px
}
.hero h1 em {
    color:var(--lime);
    font-style:normal
}
.hero-lead {
    width:80%;
    font-size:17px;
    line-height:1.75;
    color:#b7c6c0
}
.ask-card {
    position:absolute;
    z-index:2;
    right:5vw;
    top:195px;
    width:min(39vw,560px);
    background:#f8faf7;
    color:var(--ink);
    border-radius:18px;
    padding:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
    transform:rotate(.4deg)
}
.ask-top {
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line)
}
.gpt-badge {
    width:39px;
    height:39px;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    display:grid;
    place-items:center;
    font-family:var(--serif)
}
.ask-top div:nth-child(2) {
    display:flex;
    flex-direction:column
}
.ask-top strong {
    font-size:13px
}
.ask-top span {
    font-size:10px;
    color:var(--muted);
    margin-top:3px
}
.ask-top .online-dot {
    margin-left:auto;
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:.1em
}
.online-dot:before {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    background:#4ab98f;
    border-radius:50%;
    margin-right:6px
}
.starter-question {
    padding:25px 6px 20px
}
.starter-question span {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:var(--muted)
}
.starter-question p {
    font-family:var(--serif);
    font-size:20px;
    line-height:1.5;
    margin:10px 0 0
}
.ask-form {
    background:#fff;
    border:1px solid #cbd2cd;
    border-radius:12px;
    padding:14px;
    box-shadow:0 7px 20px rgba(16,49,39,.06)
}
textarea {
    width:100%;
    resize:none;
    border:0;
    outline:0;
    background:transparent;
    min-height:58px;
    color:var(--ink)
}
.ask-controls {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.attach-btn {
    border:0;
    background:none;
    color:var(--muted);
    font-size:12px
}
.send-btn {
    border:0;
    background:var(--green);
    color:#fff;
    border-radius:8px;
    padding:10px 14px;
    font-size:12px;
    font-weight:700
}
.send-btn span {
    margin-left:8px
}
.ask-note {
    text-align:center;
    font-size:9px;
    color:#8a938e;
    margin:12px 0 0
}
.entry-paths {
    position:absolute;
    z-index:2;
    bottom:100px;
    left:5vw;
    right:5vw;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.entry-card {
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    padding:24px;
    display:flex;
    align-items:center;
    gap:18px;
    border-radius:12px;
    transition:.25s
}
.entry-card:hover {
    transform:translateY(-4px);
    background:rgba(255,255,255,.1)
}
.entry-card.accent {
    background:var(--lime);
    color:var(--ink);
    border-color:var(--lime)
}
.entry-icon {
    width:54px;
    height:54px;
    border:1px solid currentColor;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:var(--serif);
    font-size:22px
}
.entry-card>span:nth-child(2) {
    display:flex;
    flex-direction:column
}
.entry-card small {
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:9px;
    opacity:.65
}
.entry-card strong {
    font-family:var(--serif);
    font-size:22px;
    font-weight:400;
    margin:3px 0
}
.entry-card em {
    font-style:normal;
    font-size:11px;
    opacity:.66
}
.entry-card b {
    margin-left:auto;
    font-size:22px
}
.scroll-hint {
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:#b5c6bf
}
.scroll-hint span {
    margin-right:8px
}
.section {
    padding:110px 6vw
}
.section-heading {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:12vw;
    align-items:end;
    margin-bottom:55px
}
.kicker {
    display:block;
    color:var(--green);
    margin-bottom:18px
}
.section-heading h2,.final-cta h2 {
    font-family:var(--serif);
    font-size:clamp(38px,4.7vw,68px);
    line-height:1.13;
    font-weight:400;
    letter-spacing:-.035em;
    margin:0
}
.section-heading>p {
    color:var(--muted);
    line-height:1.8;
    margin:0;
    max-width:420px
}
.principles {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border-top:1px solid var(--line)
}
.principle {
    grid-column:span 2;
    padding:31px 28px 34px 0;
    border-bottom:1px solid var(--line);
    min-height:275px;
    position:relative;
    transition:.25s
}
.principle:not(:nth-child(3)) {
    border-right:1px solid var(--line);
    padding-right:28px
}
.principle:nth-child(2),.principle:nth-child(3),.principle:nth-child(5) {
    padding-left:28px
}
.principle:nth-child(4) {
    grid-column:2/span 2;
    padding-left:28px
}
.principle:nth-child(5) {
    grid-column:4/span 2
}
.principle>span {
    font-size:10px;
    color:var(--green);
    font-weight:800
}
.principle h3 {
    font-family:var(--serif);
    font-size:21px;
    line-height:1.45;
    font-weight:400;
    margin:28px 0 12px
}
.principle p {
    color:var(--muted);
    font-size:12px;
    line-height:1.7
}
.principle a {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:800;
    color:var(--green);
    opacity:0;
    position:absolute;
    bottom:22px;
    transition:.2s
}
.principle:hover {
    background:#e9eee7;
    padding-left:28px
}
.principle:hover a {
    opacity:1
}
.dark-section {
    background:#122a23;
    color:#fff
}
.section-heading.light .kicker {
    color:var(--lime)
}
.section-heading.light>p {
    color:#a9b9b3
}
.question-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7vw
}
.featured-question {
    background:var(--lime);
    color:var(--ink);
    padding:38px;
    min-height:525px;
    position:relative;
    overflow:hidden
}
.question-meta {
    display:flex;
    justify-content:space-between;
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:.12em;
    font-weight:700
}
.giant-mark {
    font-family:var(--serif);
    font-size:320px;
    line-height:.8;
    color:rgba(12,102,78,.1);
    position:absolute;
    right:15px;
    top:68px
}
.featured-question h3 {
    font-family:var(--serif);
    font-size:32px;
    line-height:1.35;
    font-weight:400;
    margin-top:200px;
    position:relative
}
.featured-question p {
    font-size:12px;
    line-height:1.7;
    width:80%;
    position:relative
}
.featured-question a {
    position:absolute;
    bottom:35px;
    left:38px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:800
}
.featured-question a span {
    margin-left:16px
}
.question-list {
    border-top:1px solid rgba(255,255,255,.17)
}
.question-list a {
    min-height:125px;
    padding:24px 4px;
    border-bottom:1px solid rgba(255,255,255,.17);
    display:grid;
    grid-template-columns:1fr auto;
    align-content:center;
    transition:.2s
}
.question-list a:hover {
    padding-left:18px;
    color:var(--lime)
}
.question-list small {
    grid-column:1;
    font-size:9px;
    color:#8ca098;
    text-transform:uppercase;
    letter-spacing:.13em
}
.question-list strong {
    grid-column:1;
    font-family:var(--serif);
    font-size:20px;
    font-weight:400;
    margin-top:10px
}
.question-list span {
    grid-column:2;
    grid-row:1/3;
    align-self:center
}
.direction-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.direction-card {
    min-height:300px;
    background:#e6e8e2;
    padding:30px;
    display:flex;
    justify-content:space-between;
    transition:.25s
}
.direction-card:hover {
    transform:translateY(-5px)
}
.direction-card.large {
    grid-row:span 2;
    min-height:614px;
    background:#dce6d9
}
.direction-card.blue {
    background:var(--blue)
}
.direction-no {
    font-size:10px;
    font-weight:800;
    color:var(--green)
}
.direction-card>div {
    align-self:flex-end;
    width:78%
}
.line-icon {
    font-size:38px;
    color:var(--green)
}
.direction-card h3 {
    font-family:var(--serif);
    font-size:35px;
    font-weight:400;
    margin:18px 0 12px
}
.direction-card p {
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
    max-width:360px
}
.direction-card b {
    display:block;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-top:24px
}
.research-strip {
    background:#c8ed78;
    display:grid;
    grid-template-columns:.7fr 1.5fr auto;
    gap:7vw;
    align-items:center
}
.case-label {
    display:flex;
    flex-direction:column
}
.case-label>span {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.14em;
    margin-bottom:25px
}
.case-label strong {
    font-family:var(--serif);
    font-size:28px;
    font-weight:400
}
.case-label small {
    margin-top:5px
}
.case-main h2 {
    font-family:var(--serif);
    font-weight:400;
    font-size:47px;
    line-height:1.15;
    margin-bottom:25px
}
.case-tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px
}
.case-tags span {
    border:1px solid rgba(23,33,29,.3);
    border-radius:30px;
    padding:7px 11px;
    font-size:9px;
    text-transform:uppercase
}
.round-link {
    width:70px;
    height:70px;
    border:1px solid var(--ink);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:24px
}
.mentor-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px
}
.mentor-card {
    background:#fff;
    padding:35px;
    text-align:center;
    position:relative
}
.avatar {
    width:82px;
    height:82px;
    border-radius:50%;
    background:#dce7e2;
    display:grid;
    place-items:center;
    margin:0 auto 20px;
    font-family:var(--serif);
    font-size:22px;
    color:var(--green)
}
.verified {
    position:absolute;
    top:91px;
    left:calc(50% + 22px);
    background:var(--green);
    color:#fff;
    width:20px;
    height:20px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:10px
}
.mentor-card h3 {
    font-family:var(--serif);
    font-size:22px;
    font-weight:400;
    margin-bottom:6px
}
.mentor-card>p {
    font-size:11px;
    color:var(--green)
}
.mentor-card>div:nth-of-type(2) {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:16px 0;
    margin:22px 0;
    display:flex;
    justify-content:space-around;
    font-size:9px
}
.mentor-card a {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:800
}
.final-cta {
    background:var(--green);
    color:#fff;
    text-align:center
}
.final-cta .kicker {
    color:var(--lime)
}
.final-cta a {
    display:inline-flex;
    align-items:center;
    gap:30px;
    background:var(--lime);
    color:var(--ink);
    padding:17px 20px;
    margin-top:38px;
    font-weight:800;
    font-size:12px
}
.final-cta a span {
    font-size:18px
}
footer {
    background:#0b201a;
    color:#fff;
    padding:70px 6vw 35px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    gap:35px;
    align-items:start
}
.footer-brand {
    font-size:20px
}
footer p {
    color:#879a93;
    font-size:11px;
    line-height:1.8
}
footer>div {
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:11px
}
footer>small {
    color:#71857e;
    font-size:9px
}
body.dark {
    --paper:#101915;
    --ink:#eef4f0;
    --muted:#9badA5;
    --card:#17251f;
    --line:#304039
}
.dark .program,.dark .directions,.dark .mentors {
    background:var(--paper)
}
.dark .principle:hover,.dark .direction-card {
    background:#1a2b24
}
.dark .direction-card.large {
    background:#23372d
}
.dark .direction-card.blue {
    background:#1b3137
}
.dark .mentor-card {
    background:#17251f
}
.dark .ask-card {
    color:#17211d
}
.dark .research-strip {
    color:#17211d
}
@media(max-width:900px) {
    .main-nav {
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:#102e27;
        padding:25px 5vw;
        flex-direction:column
    }
    .main-nav.open {
        display:flex
    }
    .menu-toggle {
        display:block
    }
    .login-link,.theme-toggle {
        display:none
    }
    .hero {
        min-height:auto;
        padding-top:130px
    }
    .hero-copy {
        width:100%;
        text-align:center
    }
    .eyebrow {
        justify-content:center
    }
    .hero-lead {
        margin:0 auto;
        width:90%
    }
    .ask-card {
        position:relative;
        right:auto;
        top:auto;
        width:100%;
        margin-top:50px
    }
    .entry-paths {
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        margin-top:18px
    }
    .scroll-hint {
        display:none
    }
    .section-heading {
        grid-template-columns:1fr;
        gap:24px
    }
    .principles {
        grid-template-columns:1fr 1fr
    }
    .principle,.principle:nth-child(4),.principle:nth-child(5) {
        grid-column:auto;
        padding-left:22px!important
    }
    .principle:nth-child(3) {
        border-right:1px solid var(--line)
    }
    .question-layout {
        gap:20px
    }
    .direction-grid {
        grid-template-columns:1fr
    }
    .direction-card.large {
        min-height:380px;
        grid-row:auto
    }
    .research-strip {
        grid-template-columns:1fr 1.5fr
    }
    .round-link {
        display:none
    }
    .mentor-grid {
        grid-template-columns:1fr 1fr
    }
    .mentor-card:last-child {
        grid-column:1/-1
    }
    footer {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:620px) {
    .site-header {
        height:66px
    }
    .hero {
        padding:112px 20px 50px
    }
    .hero h1 {
        font-size:43px
    }
    .hero-lead {
        font-size:14px;
        width:100%
    }
    .ask-card {
        padding:15px
    }
    .entry-paths {
        grid-template-columns:1fr
    }
    .entry-card {
        padding:18px
    }
    .section {
        padding:78px 20px
    }
    .section-heading {
        margin-bottom:35px
    }
    .section-heading h2,.final-cta h2 {
        font-size:38px
    }
    .principles {
        grid-template-columns:1fr
    }
    .principle {
        border-right:0!important;
        min-height:235px
    }
    .question-layout {
        grid-template-columns:1fr
    }
    .featured-question {
        padding:25px;
        min-height:470px
    }
    .featured-question h3 {
        font-size:27px
    }
    .featured-question a {
        left:25px
    }
    .direction-card {
        padding:22px
    }
    .direction-card>div {
        width:84%
    }
    .research-strip {
        grid-template-columns:1fr;
        gap:35px
    }
    .mentor-grid {
        grid-template-columns:1fr
    }
    .mentor-card:last-child {
        grid-column:auto
    }
    footer {
        grid-template-columns:1fr
    }
    .ask-top .online-dot {
        display:none
    }
}
