:root {
    --canvas: #f8fbff;
    --surface: #fff;
    --ink: #101827;
    --muted: #596579;
    --line: rgba(32, 57, 91, .13);
    --blue-50: #eff7ff;
    --blue-100: #dceeff;
    --blue: #1674e8;
    --blue-dark: #0755ba;
    --lavender: #e9e8ff;
    --radius: 24px;
    --shadow: 0 18px 55px rgba(39, 76, 119, .10);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

.container {
    width: min(100% - 40px, 1240px);
    margin-inline: auto
}

.section {
    position: relative;
    padding: 100px 0
}

.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
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    color: #fff;
    background: var(--ink);
    padding: 10px 15px;
    border-radius: 10px;
    transform: translateY(-180%)
}

.skip-link:focus {
    transform: translateY(0)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: 14px;
    pointer-events: none
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 13px 10px 16px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 10px 30px rgba(46, 85, 130, .08);
    backdrop-filter: blur(18px);
    pointer-events: auto
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    letter-spacing: -.04em
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 14px
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    color: #445166;
    font-size: 14px;
    font-weight: 600
}

.nav-links>a:not(.button) {
    transition: color .2s
}

.nav-links>a:hover,
.nav-links>a:focus-visible {
    color: var(--blue)
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    padding: 8px
}

.menu-toggle span:not(.sr-only) {
    display: block;
    width: 21px;
    height: 1.5px;
    margin: 4px;
    background: var(--ink)
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    transition: transform .25s, box-shadow .25s, background .25s
}

.button:hover {
    transform: translateY(-2px)
}

.button-primary {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 10px 22px rgba(16, 24, 39, .18)
}

.button-primary:hover {
    background: #253049;
    box-shadow: 0 14px 26px rgba(16, 24, 39, .22)
}

.button-ghost {
    border: 1px solid var(--line);
    background: #fff
}

.button-small {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700
}

.text-link span {
    transition: transform .2s
}

.text-link:hover span {
    transform: translateX(3px)
}

.eyebrow {
    margin: 0 0 16px;
    color: #526782;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.hero {
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 82px;
    background: radial-gradient(circle at 78% 38%, rgba(196, 229, 255, .72), transparent 23%), radial-gradient(circle at 14% 100%, rgba(221, 230, 255, .58), transparent 24%)
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
    align-items: center;
    gap: 60px
}

.hero-copy {
    position: relative;
    z-index: 2
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #2dbb75;
    box-shadow: 0 0 0 4px rgba(45, 187, 117, .13)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    letter-spacing: -.06em;
    line-height: 1.02
}

h1 {
    max-width: 720px;
    margin-bottom: 28px;
    font-size: clamp(3.3rem, 6.4vw, 6.5rem);
    font-weight: 650
}

h1 em,
h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: -.07em
}

h1 em {
    color: #5186bf
}

.hero-intro {
    max-width: 550px;
    color: var(--muted);
    font-size: 18px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 34px
}

.hero-orbit {
    position: relative;
    height: 510px;
    isolation: isolate;
    transition: transform .2s ease-out
}

.orbit-ring {
    position: absolute;
    inset: 50% auto auto 50%;
    border: 1px solid rgba(70, 132, 191, .18);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-20deg)
}

.ring-one {
    width: 450px;
    height: 270px
}

.ring-two {
    width: 370px;
    height: 450px;
    transform: translate(-50%, -50%) rotate(58deg)
}

.glass-card {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .72);
    background: linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .34));
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    border-radius: 22px
}

.glass-card p {
    margin: 8px 0 1px;
    color: #596a80;
    font-size: 12px
}

.glass-card strong {
    font-size: 15px;
    letter-spacing: -.03em
}

.signal-card {
    top: 48px;
    left: 2%;
    width: 158px;
    padding: 17px
}

.outcome-card {
    right: 2%;
    bottom: 68px;
    width: 160px;
    padding: 17px
}

.card-icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 10px;
    background: var(--blue-100);
    color: var(--blue);
    font-size: 16px
}

.icon-arrow {
    background: #e9e8ff;
    color: #766ad7
}

.system-card {
    top: 128px;
    right: 17%;
    width: 242px;
    height: 240px;
    padding: 24px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .86), rgba(216, 237, 255, .42))
}

.mini-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    color: #537391;
    text-transform: uppercase
}

.system-lines {
    display: grid;
    gap: 10px;
    margin-top: 29px
}

.system-lines i {
    display: block;
    height: 9px;
    border-radius: 10px;
    background: linear-gradient(90deg, #73a9df 35%, rgba(115, 169, 223, .17) 35%)
}

.system-lines i:nth-child(2) {
    background: linear-gradient(90deg, #739fca 60%, rgba(115, 169, 223, .17) 60%)
}

.system-lines i:nth-child(3) {
    background: linear-gradient(90deg, #739fca 47%, rgba(115, 169, 223, .17) 47%)
}

.system-pills {
    display: flex;
    gap: 8px;
    margin-top: 32px
}

.system-pills span {
    width: 47px;
    height: 47px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e9f7ff, #bedbf5)
}

.system-pills span:nth-child(2) {
    background: linear-gradient(135deg, #e5e4ff, #ccc9fb)
}

.system-pills span:nth-child(3) {
    background: linear-gradient(135deg, #def6ed, #bce4d2)
}

.center-orb {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #78b8f1, #beddfa 60%, #d5d4ff);
    box-shadow: inset -12px -12px 24px rgba(255, 255, 255, .48), 0 20px 45px rgba(69, 124, 174, .25);
    transform: translate(-50%, -50%)
}

.center-orb span {
    text-align: center;
    color: #23537e;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .09em;
    text-transform: uppercase
}

.float-a {
    animation: float 6s ease-in-out infinite
}

.float-b {
    animation: float 7s -2s ease-in-out infinite
}

.float-c {
    animation: float 5s -1s ease-in-out infinite
}

@keyframes float {
    50% {
        transform: translateY(-10px)
    }
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.proof-strip div {
    padding: 22px 20px;
    border-right: 1px solid var(--line)
}

.proof-strip div:first-child {
    padding-left: 0
}

.proof-strip div:last-child {
    border: 0
}

.proof-strip strong,
.proof-strip span {
    display: block
}

.proof-strip strong {
    font-size: 15px;
    letter-spacing: -.03em
}

.proof-strip span {
    color: var(--muted);
    font-size: 12px
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(50px, 10vw, 160px);
    align-items: center
}

.about-preview {
    padding-top: 150px
}

.visual-note {
    position: relative;
    min-height: 360px;
    padding: clamp(30px, 5vw, 58px);
    border-radius: 32px;
    background: linear-gradient(135deg, #dff1ff, #f8fbff 57%, #e7e5ff);
    box-shadow: var(--shadow);
    overflow: hidden
}

.visual-note:after {
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(78, 139, 195, .22);
    border-radius: 50%;
    content: ""
}

.note-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #5aa5e8;
    box-shadow: 22px 25px 0 6px rgba(119, 179, 229, .45), 67px 47px 0 0 rgba(203, 210, 255, .85)
}

.visual-note p {
    position: relative;
    z-index: 1;
    margin: 70px 0 28px;
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    letter-spacing: -.05em;
    line-height: 1.16
}

.note-signature {
    font-family: Georgia, serif;
    font-style: italic;
    color: #4c6c8d
}

.section-copy h2,
.section-heading h2,
.process-top h2,
.contact-inner h2 {
    margin-bottom: 22px;
    font-size: clamp(2.25rem, 4.1vw, 4.4rem);
    font-weight: 650
}

.section-copy>p:not(.eyebrow) {
    max-width: 510px;
    color: var(--muted);
    font-size: 17px
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 48px
}

.section-heading h2 {
    margin: 0
}

.projects-section {
    background: linear-gradient(180deg, transparent, #f0f7ff 48%, transparent)
}

.project-list {
    display: grid;
    gap: 30px
}

.project-card {
    min-width: 0
}

.featured-project {
    display: grid;
    grid-template-columns: 1.17fr .83fr;
    gap: 46px;
    align-items: center;
    padding: 24px;
    border: 1px solid rgba(88, 135, 182, .13);
    border-radius: 32px;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 15px 45px rgba(68, 108, 151, .06)
}

.project-media {
    position: relative;
    display: block;
    min-height: 330px;
    border-radius: 21px;
    overflow: hidden
}

.media-atlas {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #243952, #537da8 62%, #abd9f5)
}

.media-atlas:before {
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 50%;
    content: ""
}

.media-ui {
    position: relative;
    width: 72%;
    height: 70%;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 17px;
    background: rgba(237, 248, 255, .88);
    box-shadow: 0 20px 35px rgba(12, 33, 55, .23);
    transform: rotate(-5deg);
    transition: transform .4s
}

.project-media:hover .media-ui {
    transform: rotate(-2deg) scale(1.03)
}

.ui-kicker {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .13em;
    color: #47708f
}

.ui-chart {
    display: flex;
    align-items: end;
    gap: 9px;
    height: 100px;
    margin-top: 20px
}

.ui-chart i {
    display: block;
    flex: 1;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(#93cdf4, #4b8fc8)
}

.ui-chart i:nth-child(1) {
    height: 27%
}

.ui-chart i:nth-child(2) {
    height: 52%
}

.ui-chart i:nth-child(3) {
    height: 38%
}

.ui-chart i:nth-child(4) {
    height: 74%
}

.ui-chart i:nth-child(5) {
    height: 62%
}

.ui-chart i:nth-child(6) {
    height: 94%
}

.ui-balance {
    display: flex;
    gap: 11px;
    margin-top: 22px
}

.ui-balance span {
    display: block;
    height: 12px;
    border-radius: 9px;
    background: #c7e4f8
}

.ui-balance span:first-child {
    width: 67%
}

.ui-balance span:last-child {
    flex: 1;
    background: #e0defa
}

.media-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px)
}

.orb-blue {
    right: -40px;
    bottom: -55px;
    width: 170px;
    height: 170px;
    background: #98d1f6;
    box-shadow: -30px -16px 0 rgba(177, 201, 253, .68)
}

.project-info h3 {
    margin-bottom: 14px;
    font-size: clamp(1.75rem, 2.7vw, 2.7rem);
    font-weight: 630
}

.project-info h3 a:hover,
.article-card h3 a:hover {
    color: var(--blue)
}

.project-info>p:not(.eyebrow) {
    max-width: 380px;
    color: var(--muted)
}

.project-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 31px;
    color: #627287;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase
}

.round-link {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    font-family: var(--font);
    font-size: 17px;
    transition: transform .2s, background .2s
}

.round-link:hover {
    background: var(--blue);
    transform: rotate(45deg)
}

.project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.project-grid .project-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background: rgba(255, 255, 255, .55)
}

.project-grid .project-info {
    padding: 22px 8px 8px
}

.project-grid .project-info h3 {
    font-size: clamp(1.5rem, 2.2vw, 2.1rem)
}

.media-pulse {
    display: grid;
    place-items: center;
    min-height: 360px;
    background: linear-gradient(135deg, #e7e4ff, #c9e2ff)
}

.phone {
    width: 155px;
    height: 285px;
    padding: 20px 17px;
    border: 6px solid #fff;
    border-radius: 29px;
    background: linear-gradient(155deg, #1d315a, #597eb6);
    box-shadow: 0 20px 35px rgba(47, 67, 122, .23);
    transform: rotate(8deg);
    transition: transform .4s
}

.project-media:hover .phone {
    transform: rotate(3deg) translateY(-5px)
}

.phone-top {
    width: 42px;
    height: 5px;
    margin: 0 auto 34px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .55)
}

.pulse-number {
    color: #fff;
    font-size: 38px;
    font-weight: 650;
    letter-spacing: -.07em
}

.pulse-number span {
    font-size: 18px;
    color: #a6d9ff
}

.pulse-wave {
    height: 50px;
    margin: 20px 0;
    background: linear-gradient(135deg, transparent 45%, #abdcff 46% 54%, transparent 55%) 0 14px/20px 20px repeat-x
}

.pulse-label {
    color: #d9edff;
    font-size: 10px
}

.media-frame {
    display: grid;
    place-items: center;
    min-height: 360px;
    background: #f4f2ec
}

.frame-grid {
    display: grid;
    grid-template-columns: repeat(2, 74px);
    gap: 8px;
    transform: rotate(-8deg);
    transition: transform .4s
}

.project-media:hover .frame-grid {
    transform: rotate(-3deg) scale(1.04)
}

.frame-grid span {
    height: 74px;
    border-radius: 16px;
    background: #161c2c
}

.frame-grid span:nth-child(2) {
    background: #70b5ed
}

.frame-grid span:nth-child(3) {
    background: #d8d3fc
}

.frame-grid span:nth-child(4) {
    background: #c6eadb
}

.frame-label {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: #6f6f68;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .09em
}

.process-section {
    padding-bottom: 120px
}

.process-top {
    max-width: 820px
}

.process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 52px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line)
}

.process-list li {
    padding: 22px 25px 0;
    border-right: 1px solid var(--line)
}

.process-list li:first-child {
    padding-left: 0
}

.process-list li:last-child {
    border: 0
}

.process-list span {
    color: #6b91b8;
    font-family: var(--mono);
    font-size: 11px
}

.process-list h3 {
    margin: 30px 0 10px;
    font-size: 21px
}

.process-list p {
    color: var(--muted);
    font-size: 14px
}

.skills-section {
    background: #eff7ff
}

.skill-groups {
    border-top: 1px solid var(--line)
}

.skill-groups>div {
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 18px;
    padding: 21px 0;
    border-bottom: 1px solid var(--line)
}

.skill-groups span {
    grid-row: span 2;
    color: #5785b4;
    font-family: var(--mono);
    font-size: 11px
}

.skill-groups h3 {
    margin: 0 0 5px;
    font-size: 19px
}

.skill-groups p {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.article-card {
    position: relative;
    min-height: 250px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .64);
    transition: transform .25s, box-shadow .25s
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.article-card p {
    color: #66819e;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.article-card p span {
    padding: 0 5px
}

.article-card h3 {
    max-width: 280px;
    margin-top: 35px;
    font-size: 25px;
    font-weight: 620
}

.article-arrow {
    position: absolute;
    right: 24px;
    bottom: 21px;
    color: var(--blue);
    font-size: 20px
}

.collaboration-section {
    padding-top: 70px
}

.collaboration-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    padding: clamp(30px, 5vw, 70px);
    border-radius: 32px;
    background: linear-gradient(125deg, #151e2e, #263e5f 57%, #3e739e);
    color: white;
    overflow: hidden
}

.collaboration-card h2 {
    margin-bottom: 16px;
    font-size: clamp(2rem, 3.7vw, 3.8rem);
    line-height: 1.04
}

.collaboration-card p:not(.eyebrow) {
    max-width: 430px;
    color: #c9d9e8
}

.collaboration-card .eyebrow {
    color: #9ac8f0
}

.collab-options {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.collab-options a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: 17px;
    font-weight: 600
}

.collab-options b {
    font-size: 20px;
    font-weight: 400;
    transition: transform .2s
}

.collab-options a:hover b {
    transform: rotate(45deg)
}

.contact-section {
    overflow: hidden;
    padding: 145px 0;
    text-align: center
}

.contact-glow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 700px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 224, 255, .9), rgba(229, 225, 255, .48) 38%, transparent 70%);
    transform: translateX(-50%);
    filter: blur(12px)
}

.contact-inner {
    position: relative
}

.contact-inner h2 {
    font-size: clamp(3rem, 6vw, 6.2rem)
}

.contact-inner>p:not(.eyebrow) {
    max-width: 470px;
    margin: 0 auto 27px;
    color: var(--muted);
    font-size: 17px
}

.contact-social {
    display: flex;
    justify-content: center;
    gap: 21px;
    margin-top: 28px;
    color: #607188;
    font-size: 13px;
    font-weight: 600
}

.contact-social a:hover {
    color: var(--blue)
}

.footer {
    padding: 24px 0;
    border-top: 1px solid var(--line)
}

.footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.footer p,
.back-top {
    margin: 0;
    color: #708096;
    font-size: 12px
}

.back-top {
    font-weight: 700
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

@media(max-width:760px) {
    .container {
        width: min(100% - 32px, 1240px)
    }

    .site-header {
        padding-top: 9px
    }

    .nav {
        padding: 9px 11px 9px 14px
    }

    .menu-toggle {
        display: block
    }

    .nav-links {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(255, 255, 255, .96);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px)
    }

    .nav-links.is-open {
        display: flex;
        flex-direction: column
    }

    .nav-links>a:not(.button) {
        padding: 12px
    }

    .nav-links .button {
        margin-top: 5px
    }

    .hero {
        min-height: auto;
        padding: 112px 0 60px
    }

    .hero-grid,
    .split-layout,
    .featured-project,
    .collaboration-card {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .hero-intro {
        font-size: 16px
    }

    .hero-actions {
        gap: 16px
    }

    .hero-orbit {
        height: 365px;
        max-width: 430px;
        margin-inline: auto;
        width: 100%;
        transform: none !important
    }

    .ring-one {
        width: 330px;
        height: 200px
    }

    .ring-two {
        width: 280px;
        height: 335px
    }

    .signal-card {
        top: 24px
    }

    .outcome-card {
        bottom: 24px
    }

    .system-card {
        top: 83px;
        right: 12%;
        width: 205px;
        height: 205px;
        padding: 19px
    }

    .system-lines {
        margin-top: 20px
    }

    .system-pills {
        margin-top: 22px
    }

    .system-pills span {
        width: 38px;
        height: 38px
    }

    .center-orb {
        width: 115px;
        height: 115px
    }

    .proof-strip {
        grid-template-columns: 1fr 1fr
    }

    .proof-strip div {
        padding: 17px;
        border-bottom: 1px solid var(--line)
    }

    .proof-strip div:nth-child(2) {
        border-right: 0
    }

    .proof-strip div:nth-child(3),
    .proof-strip div:nth-child(4) {
        border-bottom: 0
    }

    .proof-strip div:nth-child(3) {
        padding-left: 0
    }

    .section {
        padding: 76px 0
    }

    .about-preview {
        padding-top: 100px
    }

    .visual-note {
        min-height: 290px
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        margin-bottom: 32px
    }

    .featured-project {
        gap: 26px;
        padding: 13px
    }

    .project-media {
        min-height: 280px
    }

    .project-info {
        padding: 8px 11px 12px
    }

    .project-grid,
    .article-grid {
        grid-template-columns: 1fr
    }

    .process-list {
        grid-template-columns: 1fr 1fr
    }

    .process-list li {
        padding: 18px 12px;
        border-bottom: 1px solid var(--line)
    }

    .process-list li:nth-child(2) {
        border-right: 0
    }

    .process-list li:nth-child(3) {
        padding-left: 0;
        border-bottom: 0
    }

    .process-list li:nth-child(4) {
        border-bottom: 0
    }

    .process-list h3 {
        margin-top: 20px
    }

    .skills-section .split-layout {
        gap: 30px
    }

    .collaboration-card {
        gap: 25px
    }

    .contact-section {
        padding: 110px 0
    }

    .footer .container {
        flex-wrap: wrap
    }

    .footer p {
        order: 3;
        flex-basis: 100%
    }
}

@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
    }
}

/* Project index */
.listing-hero {
    padding: 150px 0 64px;
    background: radial-gradient(circle at 80% 20%, rgba(205, 229, 255, .72), transparent 29%)
}

.listing-hero h1 {
    max-width: 930px;
    margin-bottom: 23px;
    font-size: clamp(3rem, 6.6vw, 6.8rem)
}

.listing-hero>div>p:last-child {
    max-width: 630px;
    color: var(--muted);
    font-size: 17px
}

.projects-browser {
    padding-top: 28px
}

.browser-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line)
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.filter-button {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #637287;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: .2s
}

.filter-button span {
    margin-left: 3px;
    color: #8ba1b9;
    font-family: var(--mono);
    font-size: 10px
}

.filter-button:hover {
    background: #eef6ff;
    color: var(--ink)
}

.filter-button.is-selected {
    border-color: #bdd8f3;
    background: #e2f1ff;
    color: #205f9e
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 195px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #7591ad
}

.search-field:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(22, 116, 232, .13)
}

.search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px
}

.results-count {
    margin: 18px 0 28px;
    color: #7789a0;
    font-family: var(--mono);
    font-size: 11px
}

.project-browser-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px
}

.browser-project {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, .6);
    transition: transform .25s, box-shadow .25s
}

.browser-project:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.browser-project[hidden] {
    display: none
}

.browser-project-wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 36px;
    align-items: center
}

.browser-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden
}

.art-atlas {
    background: linear-gradient(130deg, #213a59, #5a92c2 61%, #b0e2ff)
}

.art-atlas:before {
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    content: ""
}

.art-window {
    position: relative;
    width: 70%;
    height: 65%;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 15px;
    background: rgba(244, 251, 255, .87);
    box-shadow: 0 20px 30px rgba(12, 37, 63, .22);
    transform: rotate(-5deg);
    transition: transform .4s
}

.browser-art:hover .art-window {
    transform: rotate(-1deg) scale(1.03)
}

.art-window>span {
    color: #477392;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em
}

.art-stat {
    position: relative;
    margin-top: 24px
}

.art-stat b {
    display: block;
    color: #1b4f7f;
    font-size: 45px;
    letter-spacing: -.07em
}

.art-stat small {
    color: #61809d;
    font-size: 10px
}

.art-stat i {
    position: absolute;
    top: 20px;
    right: 0;
    width: 42%;
    height: 20px;
    border-top: 2px solid #5b9ed3;
    border-radius: 50%;
    transform: rotate(-13deg)
}

.art-columns {
    display: flex;
    align-items: end;
    gap: 7px;
    height: 55px;
    margin-top: 10px
}

.art-columns i {
    display: block;
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: #96c9ed
}

.art-columns i:nth-child(1) {
    height: 35%
}

.art-columns i:nth-child(2) {
    height: 74%
}

.art-columns i:nth-child(3) {
    height: 48%
}

.art-columns i:nth-child(4) {
    height: 91%
}

.art-columns i:nth-child(5) {
    height: 65%
}

.browser-project-copy {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 25px 10px 8px
}

.browser-project-wide .browser-project-copy {
    padding: 16px 15px
}

.browser-project-copy h2 {
    margin-bottom: 14px;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    font-weight: 640
}

.browser-project-copy h2 a:hover {
    color: var(--blue)
}

.browser-project-copy>div>p:not(.eyebrow) {
    max-width: 430px;
    color: var(--muted);
    font-size: 15px
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 23px
}

.project-tags span {
    padding: 5px 8px;
    border-radius: 7px;
    background: #edf5fc;
    color: #5c7693;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .02em
}

.browser-project-copy>.round-link {
    position: absolute;
    right: 9px;
    bottom: 7px
}

.art-pulse {
    background: linear-gradient(135deg, #e1e0ff, #b8dcfa)
}

.pulse-device {
    width: 155px;
    height: 278px;
    padding: 19px 15px;
    border: 6px solid #fff;
    border-radius: 29px;
    background: linear-gradient(155deg, #243860, #5681ba);
    box-shadow: 0 20px 35px rgba(34, 57, 106, .22);
    color: #fff;
    transform: rotate(7deg);
    transition: transform .4s
}

.browser-art:hover .pulse-device {
    transform: rotate(2deg) translateY(-4px)
}

.pulse-device-bar {
    width: 43px;
    height: 5px;
    margin: 0 auto 30px;
    border-radius: 4px;
    background: #bdd2ef
}

.pulse-device small {
    color: #c8e1fb;
    font-size: 9px
}

.pulse-device b {
    display: block;
    margin-top: 10px;
    font-size: 39px;
    letter-spacing: -.07em
}

.pulse-device b span {
    color: #9edbff;
    font-size: 18px
}

.pulse-mini-chart {
    height: 48px;
    margin-top: 19px;
    background: linear-gradient(137deg, transparent 44%, #a5dafa 45% 51%, transparent 52%) 0 15px/21px 21px repeat-x
}

.pulse-device em {
    color: #d5eaff;
    font-size: 9px;
    font-style: normal
}

.art-frame {
    background: #f2f0e9
}

.art-frame-squares {
    display: grid;
    grid-template-columns: repeat(3, 58px);
    gap: 8px;
    transform: rotate(-8deg);
    transition: transform .4s
}

.browser-art:hover .art-frame-squares {
    transform: rotate(-3deg) scale(1.04)
}

.art-frame-squares i {
    height: 58px;
    border-radius: 13px;
    background: #1e2434
}

.art-frame-squares i:nth-child(2),
.art-frame-squares i:nth-child(6) {
    background: #77b9ed
}

.art-frame-squares i:nth-child(3),
.art-frame-squares i:nth-child(7) {
    background: #d7d2fb
}

.art-frame-squares i:nth-child(5) {
    background: #c7eadb
}

.art-frame>span,
.art-northstar>span,
.art-bloom>span,
.art-ground>span {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #71716b;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .09em
}

.art-northstar {
    background: radial-gradient(circle at 72% 28%, #d4eeff, transparent 25%), linear-gradient(135deg, #111d35, #275075)
}

.northstar-path {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(174, 220, 255, .26);
    border-radius: 50%
}

.northstar-path i {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    border: 3px solid #83cbfa;
    border-radius: 50%;
    background: #223d60
}

.northstar-path i:nth-child(1) {
    top: 22px;
    left: 30px
}

.northstar-path i:nth-child(2) {
    top: 115px;
    left: 20px
}

.northstar-path i:nth-child(3) {
    right: 27px;
    bottom: 31px
}

.northstar-path i:nth-child(4) {
    top: 45px;
    right: 15px
}

.northstar-path b {
    position: absolute;
    top: 83px;
    left: 87px;
    color: #b9e7ff;
    font-size: 28px
}

.art-northstar>span {
    color: #c8e9ff
}

.art-bloom {
    background: linear-gradient(135deg, #fcf5ea, #e1f2e8)
}

.bloom-petals {
    position: relative;
    width: 150px;
    height: 150px
}

.bloom-petals i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 105px;
    border-radius: 55px 55px 15px 55px;
    background: linear-gradient(135deg, #a0d8bb, #f6d5bc);
    transform-origin: 0 0
}

.bloom-petals i:nth-child(1) {
    transform: rotate(0deg)
}

.bloom-petals i:nth-child(2) {
    transform: rotate(72deg)
}

.bloom-petals i:nth-child(3) {
    transform: rotate(144deg)
}

.bloom-petals i:nth-child(4) {
    transform: rotate(216deg)
}

.bloom-petals i:nth-child(5) {
    transform: rotate(288deg)
}

.art-ground {
    background: linear-gradient(135deg, #edf4ef, #d4e5d3)
}

.ground-circles {
    position: relative;
    width: 180px;
    height: 130px
}

.ground-circles i {
    position: absolute;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    border: 1px solid #5e9f82;
    background: rgba(197, 233, 211, .5)
}

.ground-circles i:nth-child(1) {
    left: 0;
    top: 20px
}

.ground-circles i:nth-child(2) {
    left: 38px;
    top: 0;
    background: rgba(245, 229, 187, .55)
}

.ground-circles i:nth-child(3) {
    right: 0;
    top: 20px;
    background: rgba(169, 210, 242, .48)
}

.art-ground>span {
    color: #4d8068;
    line-height: 1.3
}

.empty-results {
    padding: 80px 20px;
    text-align: center
}

.empty-results span {
    color: #6ea9d8;
    font-size: 35px
}

.empty-results h2 {
    margin: 9px 0;
    font-size: 27px
}

.empty-results p {
    color: var(--muted);
    font-size: 14px
}

.empty-results button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--blue)
}

.project-cta {
    padding: 130px 0;
    background: linear-gradient(180deg, transparent, #eaf5ff)
}

.project-cta>div {
    max-width: 780px;
    text-align: center
}

.project-cta h2 {
    margin: 0 auto 28px;
    font-size: clamp(2.5rem, 5vw, 5rem);
    letter-spacing: -.06em;
    line-height: 1.03
}

@media(max-width:760px) {
    .listing-hero {
        padding: 118px 0 46px
    }

    .browser-tools {
        align-items: stretch;
        flex-direction: column
    }

    .search-field {
        min-width: 0
    }

    .project-browser-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .browser-project-wide {
        grid-column: auto;
        display: flex
    }

    .browser-art {
        min-height: 270px
    }

    .browser-project-copy,
    .browser-project-wide .browser-project-copy {
        padding: 21px 8px 8px
    }

    .art-window {
        width: 75%;
        height: 67%
    }

    .browser-project-copy h2 {
        font-size: 30px
    }

    .project-cta {
        padding: 95px 0
    }
}

/* Case study */
.case-hero {
    padding: 128px 0 50px;
    background: radial-gradient(circle at 75% 70%, rgba(194, 226, 250, .8), transparent 27%)
}

.back-link {
    display: inline-flex;
    margin-bottom: 64px;
    color: #5e7590;
    font-size: 13px;
    font-weight: 700
}

.back-link:hover {
    color: var(--blue)
}

.case-title {
    max-width: 920px
}

.case-title h1 {
    font-size: clamp(3.4rem, 7vw, 7rem)
}

.case-title>p:last-child {
    max-width: 640px;
    color: var(--muted);
    font-size: 18px
}

.case-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 55px 0 35px;
    padding-top: 22px;
    border-top: 1px solid var(--line)
}

.case-meta dt {
    margin-bottom: 5px;
    color: #6d86a0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase
}

.case-meta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 650
}

.case-hero-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 570px;
    border-radius: 34px;
    background: linear-gradient(135deg, #203653, #568ab7 58%, #b7e2fb);
    overflow: hidden
}

.case-hero-art:before {
    position: absolute;
    width: 780px;
    height: 780px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    content: ""
}

.atlas-screen {
    position: relative;
    z-index: 1;
    width: min(78%, 850px);
    min-height: 385px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 19px;
    background: #f9fcff;
    box-shadow: 0 30px 55px rgba(13, 31, 53, .25);
    transform: rotate(-2.5deg)
}

.atlas-appbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid #e6eff6;
    color: #5d7690;
    font-family: var(--mono);
    font-size: 10px
}

.atlas-appbar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #79b6e8
}

.atlas-appbar b {
    margin-left: auto;
    letter-spacing: 2px
}

.atlas-layout {
    display: grid;
    grid-template-columns: 58px 1fr;
    min-height: 342px
}

.atlas-layout aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    padding-top: 22px;
    border-right: 1px solid #e5edf5
}

.atlas-layout aside i {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: #d5e7f5
}

.atlas-layout aside i:first-child {
    background: #71afe0
}

.atlas-content {
    padding: 28px 35px
}

.atlas-content>p {
    margin-bottom: 24px;
    color: #234c75;
    font-size: 16px;
    font-weight: 650
}

.atlas-content>p span {
    color: #65a7df
}

.atlas-overview {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 25px;
    padding: 20px;
    border-radius: 13px;
    background: #eaf5fd
}

.atlas-overview small {
    display: block;
    color: #64829e;
    font-size: 10px
}

.atlas-overview strong {
    display: block;
    margin: 4px 0;
    color: #275a88;
    font-size: 48px;
    letter-spacing: -.07em
}

.atlas-overview strong em {
    font-size: 20px;
    font-style: normal
}

.atlas-overview span {
    color: #4d9a7a;
    font-size: 10px
}

.atlas-curve {
    position: relative;
    overflow: hidden
}

.atlas-curve:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 74%;
    border-top: 3px solid #63a5d4;
    border-radius: 50% 55% 0 0;
    content: "";
    transform: rotate(-8deg)
}

.atlas-curve i {
    position: absolute;
    right: 20px;
    bottom: 37%;
    width: 13px;
    height: 13px;
    border: 3px solid #63a5d4;
    border-radius: 50%;
    background: #eaf5fd
}

.atlas-table {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr;
    gap: 13px;
    margin-top: 25px
}

.atlas-table span {
    height: 16px;
    border-radius: 6px;
    background: #e3edf5
}

.atlas-table span:nth-child(3n+2) {
    background: #d2eafa
}

.hero-art-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px)
}

.orb-one {
    top: 54px;
    right: 8%;
    width: 105px;
    height: 105px;
    background: rgba(175, 220, 250, .85)
}

.orb-two {
    bottom: -55px;
    left: 7%;
    width: 200px;
    height: 200px;
    background: rgba(200, 196, 255, .62)
}

.case-reading-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 720px);
    justify-content: center;
    gap: clamp(40px, 9vw, 140px)
}

.case-aside {
    position: sticky;
    top: 100px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px
}

.case-aside p,
.case-aside a {
    font-size: 12px
}

.case-aside p {
    margin: 0 0 6px;
    color: #577b9d;
    font-family: var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase
}

.case-aside a {
    color: #728399
}

.case-aside a:hover {
    color: var(--blue)
}

.case-lede h2,
.case-section h2 {
    font-size: clamp(2.15rem, 4vw, 4.2rem);
    font-weight: 640
}

.case-lede>p:not(.eyebrow) {
    max-width: 640px;
    color: var(--muted);
    font-size: 18px
}

.case-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 55px
}

.case-stats div {
    padding: 18px 0;
    border-top: 1px solid var(--line)
}

.case-stats strong,
.case-stats span {
    display: block
}

.case-stats strong {
    font-size: 31px;
    letter-spacing: -.06em
}

.case-stats span {
    color: var(--muted);
    font-size: 12px
}

.case-section {
    padding: 110px 0
}

.case-section-label {
    padding-top: 12px
}

.case-section-label span {
    color: #6395c4;
    font-family: var(--mono);
    font-size: 11px
}

.case-section-label p {
    margin-top: 8px;
    color: #607993;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.case-body h2 {
    margin-bottom: 26px
}

.body-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    color: var(--muted);
    font-size: 16px
}

.case-quote {
    margin: 65px 0 0;
    padding: 36px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.case-quote blockquote {
    max-width: 620px;
    margin: 0;
    color: #274563;
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-style: italic;
    letter-spacing: -.04em;
    line-height: 1.2
}

.case-quote figcaption,
.research-board figcaption {
    margin-top: 20px;
    color: #75869a;
    font-size: 12px
}

.case-tint {
    background: linear-gradient(105deg, #f2f8ff, #faffff)
}

.case-intro-copy {
    max-width: 600px;
    color: var(--muted);
    font-size: 17px
}

.insight-list {
    margin-top: 44px;
    border-top: 1px solid var(--line)
}

.insight-list article {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 15px;
    padding: 21px 0;
    border-bottom: 1px solid var(--line)
}

.insight-list span {
    grid-row: span 2;
    color: #5f92bf;
    font-family: var(--mono);
    font-size: 11px
}

.insight-list h3 {
    margin: 0 0 7px;
    font-size: 21px
}

.insight-list p {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.research-board {
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 13px;
    min-height: 310px;
    margin: 60px 0 0;
    padding-top: 65px;
    border-radius: 25px;
    background: #f0e7d6;
    overflow: hidden
}

.research-note {
    position: relative;
    z-index: 1;
    width: 132px;
    padding: 18px 14px;
    box-shadow: 0 8px 18px rgba(108, 80, 44, .12);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25
}

.note-yellow {
    background: #ffe68c;
    transform: rotate(-5deg)
}

.note-blue {
    margin-top: 42px;
    background: #bce0fa;
    transform: rotate(4deg)
}

.note-pink {
    background: #f3c6d6;
    transform: rotate(-2deg)
}

.research-line {
    position: absolute;
    top: 118px;
    width: 52%;
    border-top: 1px dashed #b79977;
    transform: rotate(8deg)
}

.research-board figcaption {
    position: absolute;
    bottom: 20px;
    left: 25px
}

.full-bleed-product {
    margin-top: 65px
}

.product-window {
    position: relative;
    min-height: 550px;
    overflow: hidden;
    border: 1px solid #d7e5f0;
    border-radius: 29px;
    background: #fbfdff;
    box-shadow: var(--shadow)
}

.product-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #e5edf3
}

.product-topbar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8ddea
}

.product-topbar b {
    margin-left: 14px;
    color: #59728c;
    font-family: var(--mono);
    font-size: 10px
}

.product-sidebar {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 72px;
    padding: 25px;
    border-right: 1px solid #e5edf3
}

.product-sidebar i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #dbe9f4
}

.product-sidebar i:first-child {
    background: #73afe0
}

.product-main {
    padding: 60px 8% 50px 130px
}

.product-main>p {
    color: #63829e;
    font-family: var(--mono);
    font-size: 10px
}

.product-main h3 {
    font-size: clamp(1.7rem, 3vw, 3rem)
}

.priority-cards {
    display: grid;
    gap: 12px;
    margin-top: 35px
}

.priority-cards article {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 20px;
    border: 1px solid #dce9f2;
    border-radius: 14px;
    background: #fff
}

.priority-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    background: #dff0fd;
    color: #4385ba
}

.priority-icon.lilac {
    background: #e7e5fb;
    color: #7169c0
}

.priority-cards small,
.priority-cards strong,
.priority-cards p {
    display: block
}

.priority-cards small {
    color: #68859e;
    font-size: 10px
}

.priority-cards strong {
    font-size: 15px
}

.priority-cards p {
    margin: 1px 0 0;
    color: #6f8293;
    font-size: 11px
}

.priority-cards b {
    color: #397bb1;
    font-size: 11px
}

.process-decisions {
    display: grid;
    gap: 22px
}

.process-decisions article {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 15px;
    align-items: end;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .64)
}

.process-decisions span {
    color: #5b86ad;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase
}

.process-decisions h3 {
    margin: 15px 0 8px;
    font-size: 22px
}

.process-decisions p {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.decision-art {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 130px;
    overflow: hidden;
    border-radius: 14px
}

.art-priority {
    background: #ddecf8
}

.art-priority i {
    position: absolute;
    left: 23px;
    width: 130px;
    height: 21px;
    border-radius: 7px;
    background: #fff
}

.art-priority i:nth-child(1) {
    top: 24px;
    width: 95px;
    background: #72afe0
}

.art-priority i:nth-child(2) {
    top: 57px
}

.art-priority i:nth-child(3) {
    top: 90px;
    width: 110px
}

.art-evidence {
    padding: 21px;
    background: #eeecff
}

.art-evidence i {
    display: block;
    width: 90%;
    height: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: #c9c5f2
}

.art-evidence i:nth-child(2) {
    width: 65%;
    background: #fff
}

.art-evidence i:nth-child(3) {
    width: 75%;
    background: #d7d5f6
}

.art-evidence i:nth-child(4) {
    width: 44%;
    background: #fff
}

.art-handoff {
    display: grid;
    place-items: center;
    background: #e2f3e9
}

.art-handoff:before {
    width: 82px;
    border-top: 2px dashed #73af8d;
    content: ""
}

.art-handoff i {
    position: absolute;
    width: 35px;
    height: 35px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #72b590
}

.art-handoff i:first-child {
    left: 30px
}

.art-handoff i:last-child {
    right: 30px;
    background: #91cce9
}

.outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 45px
}

.outcome-grid div {
    padding: 25px 17px;
    border-radius: 17px;
    background: #e9f5ff
}

.outcome-grid strong,
.outcome-grid span {
    display: block
}

.outcome-grid strong {
    color: #276395;
    font-size: clamp(2rem, 3.5vw, 3.3rem);
    letter-spacing: -.07em
}

.outcome-grid span {
    margin-top: 7px;
    color: #5f7f9c;
    font-size: 12px;
    line-height: 1.35
}

.outcome-note {
    max-width: 620px;
    margin: 30px 0 0;
    color: var(--muted);
    font-size: 13px
}

.reflection p {
    max-width: 620px;
    color: var(--muted);
    font-size: 17px
}

.next-project {
    padding: 105px 0;
    background: #152337;
    color: #fff
}

.next-project a {
    display: block
}

.next-project .eyebrow {
    color: #8ec9f7
}

.next-project strong {
    display: block;
    font-size: clamp(3.5rem, 8vw, 8rem);
    letter-spacing: -.08em;
    line-height: .9
}

.next-project strong i {
    color: #8fcaf6;
    font-size: .55em;
    font-style: normal
}

.next-project p {
    margin: 16px 0 0;
    color: #b4cce0;
    font-size: 18px
}

.next-project a:hover strong i {
    display: inline-block;
    transform: rotate(45deg)
}

@media(max-width:760px) {
    .case-hero {
        padding: 110px 0 35px
    }

    .back-link {
        margin-bottom: 45px
    }

    .case-meta {
        grid-template-columns: 1fr 1fr;
        gap: 20px 15px
    }

    .case-hero-art {
        min-height: 360px;
        border-radius: 23px
    }

    .atlas-screen {
        width: 90%;
        min-height: 235px
    }

    .atlas-layout {
        grid-template-columns: 34px 1fr;
        min-height: 193px
    }

    .atlas-layout aside {
        gap: 10px;
        padding-top: 14px
    }

    .atlas-layout aside i {
        width: 13px;
        height: 13px
    }

    .atlas-content {
        padding: 17px
    }

    .atlas-content>p {
        margin-bottom: 11px;
        font-size: 11px
    }

    .atlas-overview {
        gap: 10px;
        padding: 11px
    }

    .atlas-overview strong {
        font-size: 30px
    }

    .atlas-overview strong em {
        font-size: 13px
    }

    .atlas-table {
        margin-top: 13px
    }

    .case-reading-grid {
        display: block
    }

    .case-aside {
        display: none
    }

    .case-section {
        padding: 80px 0
    }

    .case-section-label {
        display: flex;
        gap: 9px;
        padding: 0
    }

    .case-section-label p {
        margin: 0
    }

    .case-lede>p:not(.eyebrow) {
        font-size: 16px
    }

    .case-stats,
    .outcome-grid {
        grid-template-columns: 1fr
    }

    .case-stats {
        gap: 0;
        margin-top: 35px
    }

    .case-stats div {
        display: grid;
        grid-template-columns: 70px 1fr;
        align-items: center
    }

    .body-columns {
        grid-template-columns: 1fr;
        gap: 0;
        font-size: 15px
    }

    .case-quote {
        margin-top: 44px;
        padding: 25px 0
    }

    .research-board {
        min-height: 290px;
        padding-top: 50px;
        gap: 5px
    }

    .research-note {
        width: 98px;
        padding: 14px 10px;
        font-size: 11px
    }

    .product-window {
        min-height: 440px
    }

    .product-sidebar {
        display: none
    }

    .product-main {
        padding: 38px 18px
    }

    .priority-cards article {
        grid-template-columns: 32px 1fr;
        padding: 14px
    }

    .priority-cards article>b {
        display: none
    }

    .process-decisions article {
        grid-template-columns: 1fr
    }

    .decision-art {
        grid-column: 1;
        grid-row: auto;
        height: 110px
    }

    .full-bleed-product {
        margin-top: 40px
    }

    .next-project {
        padding: 80px 0
    }
}

/* Writing index & articles */
.blog-listing-hero {
    background: radial-gradient(circle at 76% 24%, rgba(228, 217, 255, .65), transparent 28%), radial-gradient(circle at 18% 80%, rgba(211, 239, 255, .7), transparent 30%)
}

.blog-browser {
    padding-top: 25px
}

.featured-article {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(30px, 6vw, 90px);
    align-items: center;
    margin: 30px 0 45px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 29px;
    background: rgba(255, 255, 255, .58)
}

.featured-article-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 365px;
    border-radius: 18px;
    background: linear-gradient(135deg, #daeaff, #c8c7fa);
    overflow: hidden
}

.featured-article-art>span {
    position: relative;
    z-index: 1;
    color: #355d89;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .19em
}

.clarity-lines {
    position: absolute;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(69, 117, 163, .25);
    border-radius: 50%;
    transform: rotate(-20deg)
}

.clarity-lines i {
    position: absolute;
    top: 50%;
    left: -40px;
    width: 220px;
    border-top: 2px solid rgba(69, 117, 163, .55);
    transform-origin: 220px 0
}

.clarity-lines i:nth-child(1) {
    transform: rotate(-35deg)
}

.clarity-lines i:nth-child(2) {
    transform: rotate(-17deg)
}

.clarity-lines i:nth-child(3) {
    transform: rotate(0)
}

.clarity-lines i:nth-child(4) {
    transform: rotate(17deg)
}

.clarity-lines i:nth-child(5) {
    transform: rotate(35deg)
}

.featured-article-art b {
    position: absolute;
    z-index: 1;
    color: #4987bd;
    font-size: 31px
}

.featured-article-copy {
    padding-right: 25px
}

.featured-article-copy h2 {
    max-width: 510px;
    margin-bottom: 18px;
    font-size: clamp(2rem, 4vw, 4.1rem);
    font-weight: 640
}

.featured-article-copy>p:not(.eyebrow) {
    max-width: 450px;
    color: var(--muted);
    font-size: 16px
}

.article-browser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.writing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: rgba(255, 255, 255, .62);
    transition: transform .25s, box-shadow .25s
}

.writing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.writing-card[hidden],
.featured-article[hidden] {
    display: none
}

.writing-card>p {
    color: #66819e;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.writing-card>p span {
    padding: 0 4px
}

.writing-card h2 {
    max-width: 310px;
    margin: 20px 0 15px;
    font-size: 25px;
    font-weight: 630
}

.writing-card h2 a:hover {
    color: var(--blue)
}

.writing-card>p:nth-of-type(2) {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 14px
}

.writing-card>a:last-child {
    position: absolute;
    right: 23px;
    bottom: 20px;
    color: var(--blue);
    font-size: 20px
}

.reading-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    height: 3px;
    background: transparent
}

.reading-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--blue)
}

.article {
    padding-top: 115px
}

.article-header {
    max-width: 900px
}

.article-header .back-link {
    margin-bottom: 58px
}

.article-header h1 {
    max-width: 850px;
    margin-bottom: 24px;
    font-size: clamp(3.3rem, 7.1vw, 7.2rem)
}

.article-dek {
    max-width: 650px;
    color: var(--muted);
    font-size: 19px
}

.article-author {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    color: #61758d;
    font-size: 13px;
    font-weight: 650
}

.author-mark {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #dceeff;
    color: #3376ae;
    font-family: Georgia, serif
}

.article-cover {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 490px;
    margin-top: 55px;
    border-radius: 34px;
    background: linear-gradient(135deg, #dcedff, #d5d2fc);
    overflow: hidden
}

.article-cover>span {
    position: relative;
    z-index: 2;
    color: #355c87;
    font-family: var(--mono);
    font-size: clamp(1rem, 2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.35;
    text-align: center
}

.article-cover b {
    position: absolute;
    z-index: 2;
    color: #4b88bc;
    font-size: 36px
}

.article-cover .clarity-lines {
    width: 600px;
    height: 600px
}

.article-layout {
    display: grid;
    grid-template-columns: 175px minmax(0, 680px);
    justify-content: center;
    gap: clamp(40px, 9vw, 140px);
    padding-top: 100px
}

.article-toc {
    position: sticky;
    top: 100px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.article-toc p {
    margin: 0 0 7px;
    color: #5a7c9c;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase
}

.article-toc a {
    color: #73859a;
    font-size: 12px
}

.article-toc a:hover {
    color: var(--blue)
}

.article-content {
    font-size: 17px;
    line-height: 1.78
}

.article-content p {
    margin-bottom: 24px
}

.article-content h2 {
    margin: 60px 0 20px;
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 640
}

.article-content em {
    font-family: Georgia, serif
}

.article-lead {
    color: #415b74;
    font-size: 22px;
    line-height: 1.55
}

.article-pullquote {
    margin: 45px 0;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: #31516f;
    font-family: Georgia, serif;
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    font-style: italic;
    letter-spacing: -.04em;
    line-height: 1.25
}

.article-figure {
    margin: 45px 0;
    padding: 30px;
    border-radius: 21px;
    background: #eef7ff
}

.figure-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 110px;
    color: #477ba8;
    font-family: var(--mono);
    font-size: 11px
}

.figure-map i {
    width: 70px;
    border-top: 1px dashed #6a9ec7
}

.article-figure figcaption {
    margin-top: 16px;
    color: #6d8298;
    font-size: 12px;
    line-height: 1.45
}

.article-list {
    margin: 25px 0;
    padding-left: 22px
}

.article-list li {
    padding: 4px 0
}

.article-end {
    margin-top: 115px;
    padding: 100px 0;
    background: #eff7ff
}

.article-end h2 {
    margin: 0 0 30px;
    font-size: clamp(2.2rem, 4vw, 4rem)
}

.related-articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.related-articles a {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

.related-articles span,
.related-articles strong {
    display: block
}

.related-articles span {
    color: #66809b;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase
}

.related-articles strong {
    max-width: 330px;
    margin-top: 15px;
    font-size: 20px;
    letter-spacing: -.04em;
    line-height: 1.13
}

.related-articles i {
    color: var(--blue);
    font-style: normal
}

@media(max-width:760px) {
    .featured-article {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 13px
    }

    .featured-article-art {
        min-height: 270px
    }

    .featured-article-copy {
        padding: 9px
    }

    .article-browser-grid {
        grid-template-columns: 1fr
    }

    .article {
        padding-top: 105px
    }

    .article-header .back-link {
        margin-bottom: 45px
    }

    .article-dek {
        font-size: 17px
    }

    .article-cover {
        min-height: 340px;
        margin-top: 38px;
        border-radius: 23px
    }

    .article-cover .clarity-lines {
        width: 410px;
        height: 410px
    }

    .article-layout {
        display: block;
        padding-top: 68px
    }

    .article-toc {
        display: none
    }

    .article-content {
        font-size: 16px
    }

    .article-lead {
        font-size: 19px
    }

    .article-end {
        margin-top: 75px;
        padding: 75px 0
    }

    .related-articles {
        grid-template-columns: 1fr
    }

    .figure-map {
        gap: 6px;
        font-size: 9px
    }

    .figure-map i {
        width: 32px
    }
}

/* About & contact */
.about-hero {
    padding: 150px 0 95px;
    background: radial-gradient(circle at 73% 34%, rgba(215, 235, 255, .77), transparent 26%)
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    gap: clamp(45px, 9vw, 130px)
}

.about-hero h1 {
    max-width: 720px;
    font-size: clamp(3.2rem, 6.4vw, 6.7rem)
}

.about-hero p:not(.eyebrow) {
    max-width: 540px;
    color: var(--muted);
    font-size: 18px
}

.about-portrait {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 460px;
    border-radius: 32px;
    background: linear-gradient(140deg, #e3f2ff, #dcd9fa);
    overflow: hidden
}

.about-portrait:before {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(75, 125, 170, .2);
    border-radius: 50%;
    content: ""
}

.portrait-silhouette {
    position: relative;
    width: 185px;
    height: 270px;
    border-radius: 100px 100px 25px 25px;
    background: linear-gradient(145deg, #5b92c2, #24476e);
    box-shadow: 0 20px 35px rgba(37, 72, 108, .2)
}

.portrait-silhouette i {
    position: absolute;
    top: 35px;
    left: 50%;
    width: 100px;
    height: 110px;
    border-radius: 48% 48% 45% 45%;
    background: #f0c4a9;
    transform: translateX(-50%)
}

.portrait-silhouette b {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 111px;
    height: 74px;
    border-radius: 50% 50% 41% 41%;
    background: #273b52;
    transform: translateX(-50%)
}

.about-portrait>span {
    position: absolute;
    bottom: 25px;
    left: 28px;
    color: #46729a;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    line-height: 1.45
}

.about-portrait>em {
    position: absolute;
    top: 28px;
    right: 28px;
    color: #5c91c0;
    font-size: 23px
}

.narrow-copy {
    max-width: 800px
}

.narrow-copy h2 {
    font-size: clamp(2.4rem, 4.7vw, 4.9rem);
    font-weight: 640
}

.narrow-copy>p:not(.eyebrow) {
    max-width: 650px;
    color: var(--muted);
    font-size: 18px
}

.experience-section {
    background: #f0f7ff
}

.section-side-note {
    max-width: 280px;
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.experience-list {
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line)
}

.experience-list li {
    display: grid;
    grid-template-columns: 150px 1fr 160px;
    gap: 30px;
    padding: 27px 0;
    border-bottom: 1px solid var(--line)
}

.experience-list>li>span,
.experience-list strong {
    color: #63809d;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase
}

.experience-list h3 {
    margin: 0 0 7px;
    font-size: 23px
}

.experience-list p {
    max-width: 550px;
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.experience-list strong {
    text-align: right;
    font-weight: 500
}

.principles-intro {
    max-width: 710px
}

.principles-intro h2 {
    font-size: clamp(2.3rem, 4.5vw, 4.6rem);
    font-weight: 640
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px
}

.principle-grid article {
    padding: 26px 0;
    border-top: 1px solid var(--line)
}

.principle-grid span {
    color: #6194c2;
    font-family: var(--mono);
    font-size: 11px
}

.principle-grid h3 {
    margin: 32px 0 12px;
    font-size: 24px
}

.principle-grid p {
    max-width: 320px;
    color: var(--muted);
    font-size: 14px
}

.capability-section {
    background: linear-gradient(105deg, #eff8ff, #fbfdff)
}

.capability-list {
    border-top: 1px solid var(--line)
}

.capability-list div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line)
}

.capability-list span {
    color: #345e88;
    font-size: 15px;
    font-weight: 700
}

.capability-list p {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.about-contact {
    padding: 125px 0;
    background: #17263a;
    color: #fff;
    text-align: center
}

.about-contact .eyebrow {
    color: #9acff8
}

.about-contact h2 {
    max-width: 720px;
    margin: 0 auto 28px;
    font-size: clamp(2.7rem, 5.5vw, 5.8rem);
    letter-spacing: -.06em;
    line-height: 1.03
}

.contact-page-hero {
    padding: 150px 0 75px;
    background: radial-gradient(circle at 72% 30%, rgba(218, 234, 255, .9), transparent 29%)
}

.contact-page-hero h1 {
    font-size: clamp(3.4rem, 7vw, 7rem)
}

.contact-page-hero p:not(.eyebrow) {
    max-width: 570px;
    color: var(--muted);
    font-size: 18px
}

.contact-page-content {
    padding-top: 30px
}

.contact-page-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: clamp(45px, 10vw, 160px);
    align-items: start
}

.contact-email {
    display: inline-block;
    margin: 10px 0 48px;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 650;
    letter-spacing: -.06em;
    line-height: 1.05
}

.contact-email i {
    color: var(--blue);
    font-size: .6em;
    font-style: normal
}

.contact-detail {
    margin: 27px 0
}

.contact-detail span {
    display: block;
    margin-bottom: 6px;
    color: #6790b5;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.contact-detail p {
    max-width: 300px;
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.contact-detail a {
    color: #3f6f9c;
    font-weight: 650
}

.resume-link {
    display: inline-flex;
    gap: 9px;
    margin-top: 12px;
    padding-bottom: 3px;
    border-bottom: 1px solid #7598b7;
    color: #315f8b;
    font-size: 13px;
    font-weight: 700
}

.contact-form-wrap {
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid var(--line);
    border-radius: 27px;
    background: rgba(255, 255, 255, .7);
    box-shadow: var(--shadow)
}

.contact-form {
    display: grid;
    gap: 21px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.form-field {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0
}

.form-field label,
.form-field legend {
    color: #405974;
    font-size: 13px;
    font-weight: 700
}

.form-field label span {
    color: #8295a9;
    font-weight: 500
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    border: 1px solid #cddbe7;
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    outline: 0;
    transition: border-color .2s, box-shadow .2s
}

.form-field input,
.form-field select {
    height: 46px;
    padding: 0 13px
}

.form-field textarea {
    resize: vertical;
    padding: 12px 13px
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(22, 116, 232, .13)
}

.select-wrap {
    position: relative
}

.select-wrap:after {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #4f6d88;
    content: "⌄";
    pointer-events: none;
    transform: translateY(-50%)
}

.form-field select {
    appearance: none
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #64788d;
    font-size: 12px
}

.consent input {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--blue)
}

.form-status {
    min-height: 20px;
    margin: 0;
    color: #33765c;
    font-size: 13px;
    font-weight: 650
}

.form-status.is-error {
    color: #bd3a4b
}

.contact-note {
    padding: 34px 0;
    background: #eaf5ff
}

.contact-note .container {
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
    color: #587590;
    font-size: 13px
}

.contact-note span {
    color: #5797ce
}

.contact-note p {
    margin: 0
}

@media(max-width:760px) {
    .about-hero {
        padding: 118px 0 70px
    }

    .about-hero-grid,
    .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .about-portrait {
        min-height: 360px
    }

    .personal-statement {
        padding-top: 80px
    }

    .experience-list li {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .experience-list strong {
        text-align: left
    }

    .principle-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 30px
    }

    .principle-grid article {
        padding: 22px 0
    }

    .principle-grid h3 {
        margin: 17px 0 8px
    }

    .capability-list div {
        grid-template-columns: 1fr;
        gap: 5px
    }

    .about-contact {
        padding: 90px 0
    }

    .contact-page-hero {
        padding: 118px 0 50px
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .contact-note .container {
        align-items: flex-start
    }

    .contact-note p {
        max-width: 280px
    }
}

/* 404 */
.not-found-page {
    min-height: 100vh;
    background: radial-gradient(circle at 70% 30%, rgba(209, 231, 255, .9), transparent 25%), var(--canvas)
}

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 35px;
    text-align: center
}

.not-found-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: 210px;
    height: 210px;
    margin-bottom: 34px
}

.not-found-orbit i {
    position: absolute;
    border: 1px solid rgba(74, 137, 196, .35);
    border-radius: 50%
}

.not-found-orbit i:first-child {
    width: 210px;
    height: 110px;
    transform: rotate(-25deg)
}

.not-found-orbit i:nth-child(2) {
    width: 110px;
    height: 210px;
    transform: rotate(58deg)
}

.not-found-orbit b {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #77b6ec, #d3eaff);
    box-shadow: inset -10px -10px 20px rgba(255, 255, 255, .48), 0 16px 30px rgba(63, 117, 166, .2);
    color: #285a87;
    font-size: 29px;
    letter-spacing: -.07em
}

.not-found h1 {
    max-width: 650px;
    margin: 8px 0 18px;
    font-size: clamp(3rem, 6vw, 6.3rem)
}

.not-found>p:not(.eyebrow) {
    max-width: 340px;
    color: var(--muted)
}

.not-found>div:last-child {
    display: flex;
    gap: 18px;
    margin-top: 30px;
    color: #567590;
    font-size: 13px;
    font-weight: 650
}

.not-found>div:last-child a:hover {
    color: var(--blue)
}

.article-cover-image {
    display: block;
    max-height: 580px;
    margin-top: 55px;
    border-radius: 30px;
    object-fit: cover;
    width: 100%
}