/* ==========================================
   THE SASSIVERSE RESEARCH STATION
   The Practice of Becoming
========================================== */

:root {

    /* Backgrounds */
    --wonder-cream: #FFF8F3;
    --wildflower-white: #FFFFFF;
    --morning-mist: #F5F3EE;

    /* Nature */
    --moss-green: #5F7D5A;
    --meadow-green: #7FA67A;
    --forest-green: #3F5B46;

    /* Wonder */
    --wonder-gold: #F6C85F;
    --sunlight: #FFE59A;

    /* Warmth */
    --sunset-coral: #F28B82;
    --campfire-ember: #C9574F;
    --wildflower-pink: #F7B6C2;

    /* Sky */
    --twilight-blue: #5B7394;
    --midnight-sky: #32465A;

    /* Text */
    --forest-text: #2F2A28;
    --soft-text: #6E625D;

    /* Borders */
    --soft-border: #E9DDD3;

    /* Shadows */
    --shadow: rgba(55, 42, 35, 0.08);
    --shadow-strong: rgba(55, 42, 35, 0.14);

}


/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--wonder-cream);
    color: var(--forest-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.75;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================
   ACCESSIBLE FOCUS
========================================= */

a:focus-visible,
button:focus-visible {
    outline: 4px solid rgba(246, 200, 95, 0.7);
    outline-offset: 4px;
}


/* =========================================
   SITE HEADER
========================================= */

.site-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem clamp(1.25rem, 4vw, 4rem);
    background: var(--forest-green);
    color: var(--wildflower-white);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}

.site-logo {
    flex: 0 0 auto;
    color: var(--wildflower-white);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.site-logo:hover,
.site-logo:focus-visible {
    color: var(--sunlight);
}

.site-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0;
}

.site-navigation a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    color: var(--wildflower-white);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.site-navigation a + a::before {
    content: "";
    position: absolute;
    top: 25%;
    left: 0;
    width: 1px;
    height: 50%;
    background:
        rgba(255, 255, 255, 0.42);
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
    color: var(--wildflower-white);
    background:
        rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    transform: translateY(-1px);
}


/* =========================================
   BREADCRUMBS
========================================= */

.breadcrumbs {
    width: min(100% - 2rem, 1200px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 auto;
    padding: 1rem 0;
    color: var(--soft-text);
    font-size: 0.95rem;
}

.breadcrumbs a {
    color: var(--forest-green);
    font-weight: 700;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    text-decoration: underline;
}


/* =========================================
   SHARED TYPOGRAPHY
========================================= */

h1,
h2,
h3 {
    color: var(--forest-green);
    line-height: 1.15;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1 {
    margin: 0;
    font-size:
        clamp(3rem, 8vw, 6.4rem);
    letter-spacing: -0.045em;
}

h2 {
    margin: 0;
    font-size:
        clamp(2rem, 5vw, 3.6rem);
    letter-spacing: -0.025em;
}

h3 {
    margin: 0;
    font-size:
        clamp(1.25rem, 2.5vw, 1.65rem);
}

p {
    margin-top: 0;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: var(--twilight-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.centered {
    text-align: center;
}


/* =========================================
   RESEARCH HERO
========================================= */

.research-hero {
    position: relative;
    min-height: 720px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding:
        clamp(5rem, 10vw, 8rem)
        1.25rem;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            #DBE4E4 0%,
            #E8EEE7 40%,
            var(--wonder-cream) 100%
        );
}

.research-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.32;
    background-image:
        repeating-radial-gradient(
            ellipse at 10% 110%,
            transparent 0 26px,
            rgba(63, 91, 70, 0.13) 27px 29px
        );
    background-size:
        220px 120px;
}

.research-hero-landscape {
    position: absolute;
    inset: auto 0 0;
    z-index: -2;
    width: 100%;
    height: 48%;
    pointer-events: none;
}

.landscape-mountain {
    position: absolute;
    bottom: -1px;
    display: block;
    clip-path:
        polygon(
            0 100%,
            27% 32%,
            42% 59%,
            61% 18%,
            100% 100%
        );
}

.mountain-one {
    left: -10%;
    width: 72%;
    height: 88%;
    background: var(--moss-green);
    opacity: 0.42;
}

.mountain-two {
    right: -10%;
    width: 74%;
    height: 72%;
    background: var(--forest-green);
    opacity: 0.5;
    transform: scaleX(-1);
}

.landscape-sun {
    position: absolute;
    top: 7%;
    right: 13%;
    width: clamp(90px, 12vw, 150px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sunlight);
    box-shadow:
        0 0 0 22px rgba(255, 229, 154, 0.26);
}

.research-hero-content {
    width: min(100%, 850px);
    margin: 0 auto;
    padding:
        clamp(2rem, 5vw, 3.5rem);
    border:
        1px solid rgba(255, 255, 255, 0.72);
    border-radius: 32px;
    background:
        rgba(255, 248, 243, 0.86);
    box-shadow:
        0 28px 70px
        rgba(50, 70, 90, 0.16);
    text-align: center;
    backdrop-filter: blur(12px);
}

.research-icon {
    margin: 0 0 0.25rem;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
}

.research-hero-content .hero-intro {
    margin:
        1rem auto 1.5rem;
    color: var(--twilight-blue);
    font-size:
        clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 750;
}

.research-hero-content > p:not(
    .eyebrow,
    .research-icon,
    .hero-intro
) {
    max-width: 700px;
    margin:
        0 auto 0.85rem;
    font-size:
        clamp(1rem, 1.6vw, 1.13rem);
}

.hero-button-row,
.button-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}


/* =========================================
   BUTTONS
========================================= */

.trail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0.85rem 1.45rem;
    border:
        2px solid var(--forest-green);
    border-radius: 999px;
    background: var(--forest-green);
    color: var(--wildflower-white);
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    box-shadow:
        0 9px 20px
        rgba(63, 91, 70, 0.16);
    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.trail-button:hover,
.trail-button:focus-visible {
    background: var(--moss-green);
    border-color: var(--moss-green);
    color: var(--wildflower-white);
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px
        rgba(63, 91, 70, 0.22);
}

.trail-button.secondary {
    background:
        rgba(255, 255, 255, 0.72);
    color: var(--forest-green);
}

.trail-button.secondary:hover,
.trail-button.secondary:focus-visible {
    background: var(--forest-green);
    color: var(--wildflower-white);
}


/* =========================================
   SHARED RESEARCH SECTIONS
========================================= */

.research-section {
    width: 100%;
    padding:
        clamp(4rem, 8vw, 7rem)
        1.25rem;
}

.research-section-soft {
    background:
        linear-gradient(
            180deg,
            var(--morning-mist),
            #EDEAE3
        );
}

.research-section-featured {
    background:
        linear-gradient(
            135deg,
            var(--midnight-sky),
            var(--twilight-blue)
        );
}

.research-copy,
.section-heading {
    width: min(100%, 840px);
    margin-right: auto;
    margin-left: auto;
}

.research-copy > p,
.section-heading > p:not(.eyebrow) {
    max-width: 740px;
    margin:
        1rem auto 0;
}

.research-copy h2,
.section-heading h2 {
    margin-bottom: 1.5rem;
}


/* =========================================
   RESEARCH QUOTE
========================================= */

.research-quote {
    position: relative;
    width: min(100%, 730px);
    margin: 2.5rem auto 0;
    padding:
        1.7rem 1.8rem
        1.7rem 2.1rem;
    border: 0;
    border-left:
        6px solid var(--wonder-gold);
    border-radius:
        0 20px 20px 0;
    background:
        linear-gradient(
            135deg,
            #FFF8DC,
            var(--wildflower-white)
        );
    color: var(--forest-text);
    box-shadow:
        0 14px 34px var(--shadow);
    font-size:
        clamp(1.12rem, 2.4vw, 1.4rem);
    font-style: italic;
    font-weight: 750;
    text-align: left;
}

.research-quote::before {
    content: "“";
    position: absolute;
    top: -0.35rem;
    left: 0.6rem;
    color:
        rgba(201, 87, 79, 0.16);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 5rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.research-quote p {
    position: relative;
    z-index: 1;
    margin: 0;
}


/* =========================================
   FEATURED CURIOSITY LAB
========================================= */

.featured-lab {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding:
        clamp(2rem, 5vw, 4rem);
    border:
        1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    background:
        rgba(255, 255, 255, 0.08);
    box-shadow:
        0 28px 70px
        rgba(20, 31, 43, 0.22);
    color: var(--wildflower-white);
    backdrop-filter: blur(8px);
}

.featured-lab h2,
.featured-lab h3,
.featured-lab .eyebrow {
    color: var(--wildflower-white);
}

.featured-lab-heading {
    width: min(100%, 820px);
    margin: 0 auto 3rem;
    text-align: center;
}

.featured-icon {
    margin: 0 0 0.5rem;
    font-size:
        clamp(3.2rem, 7vw, 5rem);
    line-height: 1;
}

.featured-tagline {
    margin:
        1rem auto 0;
    color: var(--sunlight);
    font-size:
        clamp(1.2rem, 2.6vw, 1.55rem);
    font-weight: 750;
}

.featured-lab-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);
    gap:
        clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.featured-lab-copy p {
    margin-bottom: 1.15rem;
    color:
        rgba(255, 255, 255, 0.92);
}

.featured-lab-copy .trail-button {
    margin-top: 1rem;
    background: var(--wonder-gold);
    border-color: var(--wonder-gold);
    color: var(--forest-text);
}

.featured-lab-copy .trail-button:hover,
.featured-lab-copy .trail-button:focus-visible {
    background: var(--sunlight);
    border-color: var(--sunlight);
    color: var(--forest-text);
}

.lab-worktable {
    padding: 1.7rem;
    border:
        1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background:
        rgba(255, 248, 243, 0.1);
}

.worktable-label {
    margin: 0 0 1rem;
    color: var(--sunlight);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.worktable-list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.worktable-list li {
    display: grid;
    grid-template-columns:
        2rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
    padding: 0.85rem;
    border-radius: 14px;
    background:
        rgba(255, 255, 255, 0.09);
}

.worktable-note {
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top:
        1px solid rgba(255, 255, 255, 0.22);
    color:
        rgba(255, 255, 255, 0.82);
    font-size: 0.96rem;
    font-style: italic;
}


/* =========================================
   STATION MAP
========================================= */

#station-map {
    scroll-margin-top: 1.5rem;
}

.station-grid {
    width: min(100%, 1200px);
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    margin: 3rem auto 0;
}

.station-card {
    position: relative;
    min-width: 0;
    min-height: 410px;
    display: flex;
    flex-direction: column;
    padding: 1.7rem;
    overflow: hidden;
    border:
        1px solid var(--soft-border);
    border-radius: 22px;
    background:
        rgba(255, 255, 255, 0.9);
    box-shadow:
        0 14px 34px var(--shadow);
}

.station-card::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -75px;
    width: 170px;
    aspect-ratio: 1;
    border:
        22px solid
        rgba(127, 166, 122, 0.08);
    border-radius: 50%;
}

.station-card-open {
    border-color:
        rgba(95, 125, 90, 0.38);
    background:
        linear-gradient(
            160deg,
            var(--wildflower-white),
            #F1F7EF
        );
}

.station-card-status {
    align-self: flex-start;
    margin-bottom: 1.1rem;
    padding:
        0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--morning-mist);
    color: var(--soft-text);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.station-card-open .station-card-status {
    background:
        rgba(127, 166, 122, 0.2);
    color: var(--forest-green);
}

.station-icon {
    margin: 0 0 0.7rem;
    font-size: 2.8rem;
    line-height: 1;
}

.station-card h3 {
    margin-bottom: 0.85rem;
}

.station-card p {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

.station-card .trail-button {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-top: auto;
}

.station-note {
    margin-top: auto;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background:
        rgba(246, 200, 95, 0.15);
    color: var(--soft-text);
    font-size: 0.94rem;
    font-style: italic;
}


/* =========================================
   RESEARCH METHOD
========================================= */

.research-method {
    width: min(100%, 920px);
    display: grid;
    gap: 1rem;
    margin: 3rem auto 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.method-step {
    display: grid;
    grid-template-columns:
        4rem minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    padding:
        1.4rem 1.5rem;
    border:
        1px solid rgba(63, 91, 70, 0.12);
    border-radius: 18px;
    background:
        rgba(255, 255, 255, 0.82);
    box-shadow:
        0 10px 24px var(--shadow);
}

.method-number {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--wonder-gold);
    color: var(--forest-text);
    font-size: 1.2rem;
    font-weight: 900;
    box-shadow:
        0 7px 18px
        rgba(246, 200, 95, 0.24);
}

.method-step h3 {
    margin-bottom: 0.45rem;
}

.method-step p {
    margin: 0;
}


/* =========================================
   SUPPORT STATION
========================================= */

.support-station {
    width: min(100%, 1080px);
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.9fr);
    gap:
        clamp(2rem, 5vw, 4rem);
    align-items: center;
    margin: 0 auto;
    padding:
        clamp(2rem, 5vw, 3.5rem);
    border:
        1px solid
        rgba(246, 200, 95, 0.38);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            #FFF8D9,
            var(--wonder-cream)
        );
    box-shadow:
        0 20px 46px var(--shadow);
}

.support-station-copy h2 {
    margin-bottom: 1.2rem;
}

.support-station-copy p {
    margin-bottom: 1rem;
}

.support-options {
    display: grid;
    gap: 1rem;
}

.support-option {
    display: grid;
    grid-template-columns:
        3.4rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    border:
        1px solid
        rgba(63, 91, 70, 0.14);
    border-radius: 18px;
    background:
        rgba(255, 255, 255, 0.84);
    box-shadow:
        0 8px 22px var(--shadow);
    transition:
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.support-option:hover,
.support-option:focus-visible {
    border-color: var(--moss-green);
    transform: translateY(-3px);
    box-shadow:
        0 15px 30px var(--shadow-strong);
}

.support-icon {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: 50%;
    background:
        rgba(246, 200, 95, 0.26);
    font-size: 1.8rem;
}

.support-option strong,
.support-option small {
    display: block;
}

.support-option strong {
    margin-bottom: 0.25rem;
    color: var(--forest-green);
    font-size: 1.04rem;
}

.support-option small {
    color: var(--soft-text);
    line-height: 1.5;
}


/* =========================================
   PRINCIPLES
========================================= */

.research-principles-section {
    background: var(--forest-green);
    color: var(--wildflower-white);
}

.research-principles-section h2,
.research-principles-section h3,
.research-principles-section .eyebrow {
    color: var(--wildflower-white);
}

.principles-grid {
    width: min(100%, 1120px);
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 3rem auto 0;
}

.principle-card {
    min-width: 0;
    min-height: 280px;
    padding: 1.5rem;
    border:
        1px solid
        rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background:
        rgba(255, 255, 255, 0.08);
    box-shadow:
        0 12px 26px
        rgba(32, 45, 37, 0.18);
}

.principle-card > span {
    display: block;
    margin-bottom: 1rem;
    font-size: 2.3rem;
    line-height: 1;
}

.principle-card h3 {
    margin-bottom: 0.75rem;
}

.principle-card p {
    margin: 0;
    color:
        rgba(255, 255, 255, 0.86);
}


/* =========================================
   CLOSING
========================================= */

.research-closing {
    position: relative;
    overflow: hidden;
    padding:
        clamp(5rem, 10vw, 8rem)
        1.25rem;
    background:
        linear-gradient(
            180deg,
            var(--wonder-cream),
            var(--morning-mist)
        );
    text-align: center;
}

.research-closing::before,
.research-closing::after {
    content: "";
    position: absolute;
    width: 260px;
    aspect-ratio: 1;
    border:
        38px solid
        rgba(127, 166, 122, 0.08);
    border-radius: 50%;
}

.research-closing::before {
    top: -140px;
    left: -110px;
}

.research-closing::after {
    right: -120px;
    bottom: -150px;
}

.research-closing-content {
    position: relative;
    z-index: 1;
    width: min(100%, 800px);
    margin: 0 auto;
}

.research-closing-content h2 {
    margin-bottom: 1.5rem;
}

.research-closing-content > p {
    margin:
        0 auto 0.8rem;
}

.closing-highlight {
    max-width: 650px;
    margin-top: 1.8rem !important;
    color: var(--twilight-blue);
    font-size:
        clamp(1.2rem, 2.7vw, 1.55rem);
    font-weight: 800;
}

.research-signoff {
    margin-top: 2.2rem !important;
    color: var(--moss-green);
    font-style: italic;
    font-weight: 750;
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
    padding: 3.5rem 1.25rem;
    background: var(--midnight-sky);
    color: var(--wildflower-white);
    text-align: center;
}

.site-footer p {
    margin: 0.35rem 0;
}

.footer-note {
    color:
        rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 980px) {

    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .site-navigation {
        width: 100%;
        justify-content: flex-start;
        gap: 0.45rem;
    }

    .site-navigation a {
        border:
            1px solid
            rgba(255, 255, 255, 0.26);
        border-radius: 999px;
    }

    .site-navigation a + a::before {
        display: none;
    }

    .featured-lab-grid,
    .support-station {
        grid-template-columns: 1fr;
    }

    .station-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .principles-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   PHONE
========================================= */

@media (max-width: 680px) {

    .site-header {
        padding: 1rem;
    }

    .site-navigation {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .site-navigation a {
        width: 100%;
        padding:
            0.72rem 0.55rem;
        border-radius: 14px;
        text-align: center;
        white-space: normal;
    }

    .breadcrumbs {
        width:
            min(100% - 1.5rem, 1200px);
        padding: 0.8rem 0;
        font-size: 0.88rem;
    }

    .research-hero {
        min-height: auto;
        padding:
            3.5rem 1rem 5rem;
    }

    .research-hero-content {
        padding: 1.6rem 1.1rem;
        border-radius: 22px;
    }

    .landscape-sun {
        top: 14%;
        right: 4%;
    }

    .hero-button-row,
    .button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-button-row .trail-button,
    .button-row .trail-button {
        width: 100%;
    }

    .research-section {
        padding:
            3.5rem 1rem;
    }

    .featured-lab {
        padding: 1.5rem;
        border-radius: 22px;
    }

    .featured-lab-heading {
        margin-bottom: 2rem;
    }

    .station-grid,
    .principles-grid {
        grid-template-columns: 1fr;
    }

    .station-card {
        min-height: 0;
    }

    .method-step {
        grid-template-columns:
            3rem minmax(0, 1fr);
        gap: 0.85rem;
        padding: 1.1rem;
    }

    .method-number {
        width: 2.8rem;
        height: 2.8rem;
    }

    .support-station {
        padding: 1.4rem;
        border-radius: 22px;
    }

    .support-option {
        grid-template-columns:
            3rem minmax(0, 1fr);
        padding: 1rem;
    }

    .support-icon {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.5rem;
    }

    .principle-card {
        min-height: 0;
    }

    .research-quote {
        padding:
            1.35rem 1.15rem
            1.35rem 1.45rem;
        border-left-width: 5px;
        border-radius:
            0 16px 16px 0;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 420px) {

    .site-navigation {
        grid-template-columns: 1fr;
    }

    .research-hero-content {
        padding:
            1.4rem 0.95rem;
    }

    .worktable-list li {
        grid-template-columns:
            1.7rem minmax(0, 1fr);
    }

}