:root {
    --green: #355326;
    --deep-blue: #123f56;
    --mint: #dfeadd;
    --light: #f5f7f3;
    --ink: #1f2a24;
    --muted: #5f6d64;
    --white: #ffffff;
    --border: #d7ded6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: var(--light);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 7%;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.brand {
    color: var(--deep-blue);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 18px;
}

.nav-links a {
    color: var(--green);
    font-weight: 700;
    text-decoration: none;
}

.nav-links a:hover,
footer a:hover {
    text-decoration: underline;
}

.projects-menu {
    position: relative;
}

.projects-menu summary {
    color: var(--green);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.projects-menu summary::-webkit-details-marker {
    display: none;
}

.projects-menu summary::after {
    content: " ▼";
    font-size: 0.65em;
}

.projects-menu[open] summary::after {
    content: " ▲";
}

.projects-menu-panel {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: max-content;
    max-width: min(92vw, 430px);
    padding: 8px 14px;
    border: 0;
    border-bottom: 3px solid var(--green);
    border-radius: 0;
    background: var(--white);
    box-shadow: 0 18px 34px rgba(18, 63, 86, 0.14);
}

.projects-menu-panel section {
    padding: 15px;
}

.projects-menu-panel h2 {
    margin: 0 0 9px;
    color: var(--deep-blue);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.projects-menu-panel a {
    display: block;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ink);
    font-size: clamp(0.9rem, 1.35vw, 1.15rem);
    font-weight: 500;
    line-height: 1.35;
}

.projects-menu-panel a:hover,
.projects-menu-panel a:focus-visible {
    background: transparent;
    border-bottom-color: var(--ink);
    color: var(--ink);
    text-decoration: none;
}

.hero,
.page-header,
.split-section,
.feature-grid,
.card-grid,
.contact-section {
    padding: 48px 7%;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
    align-items: center;
    gap: 36px;
    background: var(--mint);
}

.hero img,
.split-section img,
.contact-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.about-photo {
    border: 6px solid var(--green);
}

.eyebrow {
    color: var(--deep-blue);
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 8px;
    text-transform: uppercase;
}

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

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin: 0 0 18px;
}

h2 {
    font-size: 1.6rem;
    margin-top: 0;
}

p {
    margin-top: 0;
}

.hero p,
.page-header p,
.split-section p {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 720px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.button,
button {
    display: inline-block;
    padding: 13px 24px;
    border: 2px solid var(--green);
    border-radius: 999px;
    background: var(--green);
    color: var(--white);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.button.secondary {
    background: transparent;
    color: var(--green);
}

.home-page .resume-button {
    display: inline-flex;
    min-height: 62px;
    padding: 14px 30px 14px 34px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}

.home-page .resume-button-arrow {
    font-size: 1.45em;
    font-weight: 400;
    line-height: 0;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.resume-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 310px;
    min-height: 92px;
    padding: 20px 38px;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: var(--white);
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.resume-download:hover,
.resume-download:focus-visible {
    background: var(--deep-blue);
    color: var(--white);
    transform: translateY(-2px);
}

.resume-download:focus-visible {
    outline: 3px solid var(--deep-blue);
    outline-offset: 3px;
}

.about-chat-link {
    color: var(--green);
    font-weight: 700;
}

.resume-page {
    min-height: 100vh;
    background: #f2f5ef;
}

.resume-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 4%;
    background: var(--green);
}

.resume-nav a {
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
}

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

.resume-home-link {
    font-size: 1.1rem;
}

.resume-main {
    padding: 18px 4% 40px;
}

.resume-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 4px 0 20px;
    border-bottom: 2px solid var(--green);
}

.resume-kicker,
.resume-updated {
    margin: 0;
    color: var(--green);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.resume-header h1 {
    margin: 8px 0 4px;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
}

.resume-updated {
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: none;
}

.resume-pdf-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 52px;
    padding: 12px 20px;
    border: 2px solid var(--green);
    border-radius: 999px;
    background: var(--green);
    color: var(--white);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.resume-pdf-download:hover,
.resume-pdf-download:focus-visible {
    border-color: var(--deep-blue);
    background: var(--deep-blue);
    transform: translateY(-2px);
}

.resume-viewer-section {
    height: min(76vh, 980px);
    min-height: 620px;
    margin-top: 20px;
    overflow: hidden;
    border: 2px solid var(--deep-blue);
    border-radius: 10px;
    background: #353735;
    box-shadow: 0 18px 50px rgba(18, 63, 86, 0.16);
}

.resume-viewer {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.resume-viewer-fallback {
    display: grid;
    place-content: center;
    min-height: 620px;
    padding: 32px;
    color: var(--white);
    text-align: center;
}

.resume-viewer-fallback a {
    color: #dfeadd;
    font-weight: 700;
}

.page-header {
    background: var(--mint);
    text-align: center;
}

.project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 56px;
    align-items: center;
    padding: 84px 7%;
    background: var(--mint);
    text-align: left;
}

.project-year {
    color: var(--deep-blue);
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-hero h1 {
    margin: 36px 0 28px;
    color: var(--deep-blue);
    font-family: Arial, sans-serif;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: 1.05;
}

.project-hero h1 span {
    color: var(--green);
    font-style: normal;
}

.project-hero-main > p:last-child {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(1rem, 1.65vw, 1.25rem);
    line-height: 1.55;
}

.project-hero-details {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 26px;
    border-left: 1px solid var(--border);
    align-self: end;
    margin-bottom: 8px;
}

.project-hero-details div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
}

.project-hero-details dt {
    color: var(--muted);
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
}

.project-hero-details dd {
    margin: 0;
    color: var(--deep-blue);
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
}

.page-header p {
    margin-left: auto;
    margin-right: auto;
}

.split-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 34px;
    align-items: center;
    background: var(--white);
}

.beyond-section {
    background: #f4edff;
}

.quote {
    margin: 32px auto 0;
    max-width: 760px;
    color: var(--deep-blue);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 700;
    text-align: center;
}

.article-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px auto 0;
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

.article-link span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid currentColor;
    border-radius: 50%;
    line-height: 1;
}

.contact-cta {
    padding: 48px 7% 72px;
    background: var(--deep-blue);
    color: var(--white);
}

.contact-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    margin-bottom: 80px;
}

.contact-label span {
    color: var(--mint);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-label::after {
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, 0.24);
}

.contact-cta-content {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.contact-cta h2 {
    display: block;
    margin: 0 0 34px;
    padding: 28px 46px;
    background: var(--mint);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    box-shadow: 14px 14px 0 var(--green), 24px 24px 32px rgba(0, 0, 0, 0.28);
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1;
    transform: translate(-7px, -7px);
}

.contact-cta p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--mint);
    font-size: clamp(1.2rem, 3vw, 2rem);
    line-height: 1.55;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 64px;
}

.contact-actions a,
.contact-actions span {
    display: inline-block;
    min-width: 200px;
    padding: 18px 28px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.contact-actions a {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.contact-mini-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}

.contact-mini-links a {
    color: var(--mint);
    font-weight: 700;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.feature-grid,
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hobbies-section {
    background: #d7ecf5;
}

.hobbies-section article {
    border-width: 3px;
    border-color: var(--deep-blue);
}

.hobbies-section article:nth-child(1) {
    background: #ffe7a8;
}

.hobbies-section article:nth-child(2) {
    background: #eadcff;
}

.hobbies-section article:nth-child(3) {
    background: #f8e8e3;
}

.hobbies-section img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 18px;
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding: 48px 7%;
}

.case-study-list {
    display: grid;
    gap: 42px;
    padding: 48px 7%;
    background: #fbf6e6;
}

/* Project pathway pages */
.pathways-hero {
    padding: clamp(70px, 9vw, 130px) 7%;
    background:
        linear-gradient(90deg, rgba(18, 63, 86, 0.72) 0%, rgba(18, 63, 86, 0.55) 58%, rgba(18, 63, 86, 0.32) 100%),
        url("Photo/Project.jpg") center / cover no-repeat;
    color: var(--white);
}

.pathways-hero > p:first-child,
.degree-page-hero > p:first-of-type {
    margin: 0 0 18px;
    color: var(--mint);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pathways-hero h1,
.degree-page-hero h1 {
    max-width: 1050px;
    margin: 0 0 28px;
    color: var(--white);
    font-family: Georgia, serif;
    font-size: clamp(3.5rem, 7vw, 7.5rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.pathways-hero > p:last-child,
.degree-page-hero > p:last-child {
    max-width: 750px;
    margin: 0;
    color: #dce5e8;
    font-size: 1.1rem;
    line-height: 1.7;
}

.pathways-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: clamp(60px, 8vw, 110px) 7%;
    background: #fbf6e6;
}

.all-projects {
    padding: clamp(60px, 8vw, 110px) 7%;
    background: #fbf6e6;
}

.all-projects-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: clamp(35px, 5vw, 70px);
}

.all-project-cards {
    gap: clamp(38px, 6vw, 76px);
    padding-block: clamp(60px, 8vw, 110px);
}

.all-project-cards .all-projects-heading {
    margin-bottom: 0;
}

.all-project-cards .case-card {
    grid-template-columns: minmax(320px, 44%) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 70px);
    align-items: center;
    padding: clamp(28px, 3vw, 48px);
}

.all-project-cards .case-card-content h2 {
    color: var(--deep-blue);
    font-size: clamp(2rem, 3.4vw, 4rem);
    line-height: 1.05;
}

.all-project-cards .case-card-content > p:not(.case-meta) {
    max-width: 760px;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.65;
}

.case-tags span {
    display: inline-flex;
    min-height: 34px;
    padding: 7px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(53, 83, 38, 0.34);
    border-radius: 999px;
    background: var(--white);
    color: var(--deep-blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.case-tags span::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    content: "";
}

.case-tags span:nth-child(even) {
    border-color: rgba(18, 63, 86, 0.32);
    background: #eef4f6;
}

.case-tags span:nth-child(even)::before {
    background: var(--deep-blue);
}

.face2face-list-card {
    --face-card-blue: #1b5870;
    --face-card-gold: #eeac28;
    --face-card-terracotta: #bd4f35;
    overflow: hidden;
    padding: 0 !important;
}

.bookclub-list-card {
    --bookclub-blue: #1b5870;
    --bookclub-gold: #eeac28;
    --bookclub-terracotta: #bd4f35;
    overflow: hidden;
    padding: 0 !important;
}

.bookclub-card-visual {
    position: relative;
    align-self: stretch;
    min-height: 560px;
    overflow: hidden;
}

.bookclub-list-card .bookclub-card-visual img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
}

.bookclub-card-visual > span {
    position: absolute;
    top: 28px;
    left: 28px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: var(--bookclub-gold);
    color: var(--deep-blue);
    font-size: 1.2rem;
    font-weight: 900;
}

.bookclub-list-card .case-card-content {
    padding: clamp(34px, 5vw, 76px);
}

.bookclub-list-card .case-meta {
    color: var(--bookclub-terracotta);
}

.bookclub-list-card .view-case,
.bookclub-list-card:hover .view-case,
.bookclub-list-card:focus-within .view-case {
    background: var(--bookclub-blue);
}

.face2face-card-visual {
    position: relative;
    display: grid;
    align-self: stretch;
    min-height: 560px;
    overflow: hidden;
    place-items: center;
    background: var(--face-card-blue);
    color: #fff;
}

.face2face-card-visual > span {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: var(--face-card-gold);
    color: var(--deep-blue);
    font-size: 1.2rem;
    font-weight: 900;
}

.face2face-card-visual strong {
    position: relative;
    z-index: 1;
    font-family: Georgia, serif;
    font-size: clamp(4rem, 7vw, 7.5rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.68;
    text-align: center;
}

.face2face-card-visual i {
    position: absolute;
    width: min(44%, 330px);
    aspect-ratio: 1;
    border: 3px solid var(--face-card-gold);
    border-radius: 50%;
}

.face2face-card-visual i:first-of-type {
    transform: translateX(-28%);
}

.face2face-card-visual i:last-of-type {
    transform: translateX(28%);
}

.face2face-list-card .case-card-content {
    padding: clamp(34px, 5vw, 76px);
}

.face2face-list-card .case-meta {
    color: var(--face-card-terracotta);
}

.face2face-list-card .view-case,
.face2face-list-card:hover .view-case,
.face2face-list-card:focus-within .view-case {
    background: var(--face-card-blue);
}

@media (max-width: 760px) {
    .all-project-cards .case-card {
        grid-template-columns: 1fr;
    }

    .face2face-card-visual {
        min-height: 430px;
    }

    .bookclub-card-visual {
        min-height: 430px;
    }
}

.all-projects-heading p {
    margin: 0;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.all-projects-heading h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-weight: 400;
}

.all-projects-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid #cfc5ae;
    list-style: none;
    counter-reset: projects;
}

.all-projects-list li {
    counter-increment: projects;
    border-bottom: 1px solid #cfc5ae;
}

.all-projects-list a {
    display: grid;
    grid-template-columns: 2.25rem minmax(180px, 0.55fr) minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 46px);
    align-items: center;
    padding: clamp(24px, 3.5vw, 46px) 0;
    color: var(--deep-blue);
    text-decoration: none;
}

.all-projects-list a::before {
    color: var(--green);
    content: counter(projects, decimal-leading-zero);
    font-size: 0.82rem;
    font-weight: 900;
}

.all-projects-list span {
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.all-projects-list strong {
    font-family: Georgia, serif;
    font-size: clamp(1.55rem, 3vw, 3.15rem);
    font-weight: 400;
    line-height: 1.05;
}

.all-projects-list i {
    font-size: 1.8rem;
    font-style: normal;
    transition: transform 0.2s ease;
}

.all-projects-list a:hover strong,
.all-projects-list a:focus-visible strong {
    color: var(--green);
}

.all-projects-list a:hover i,
.all-projects-list a:focus-visible i {
    transform: translateX(7px);
}

@media (max-width: 700px) {
    .all-projects-heading {
        display: block;
    }

    .all-projects-heading h2 {
        margin-top: 8px;
    }

    .all-projects-list a {
        grid-template-columns: 2rem minmax(0, 1fr) auto;
    }

    .all-projects-list span {
        grid-column: 2 / -1;
        grid-row: 1;
    }

    .all-projects-list a::before {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .all-projects-list strong {
        grid-column: 2;
    }
}

.pathway-card {
    overflow: hidden;
    border: 1px solid #e3dac5;
    border-radius: 20px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pathway-card:hover,
.pathway-card:focus-visible {
    box-shadow: 0 20px 45px rgba(18, 63, 86, 0.17);
    transform: translateY(-5px);
}

.pathway-card-image {
    position: relative;
    height: 290px;
}

.pathway-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pathway-card-image > span {
    position: absolute;
    top: 18px;
    left: 18px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 900;
}

.pathway-card > div:last-child {
    padding: 30px;
}

.pathway-card p,
.pathway-project-card > div > p:first-child {
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pathway-card h2 {
    min-height: 2.25em;
    margin: 8px 0 24px;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.05;
}

.pathway-card > div:last-child > span {
    color: var(--green);
    font-weight: 900;
}

.degree-page-hero {
    padding: clamp(60px, 8vw, 110px) 7%;
    background: var(--green);
    color: #fff;
}

.bsi-page-hero {
    position: relative;
    isolation: isolate;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(90deg, rgba(13, 52, 70, 0.94) 0%, rgba(13, 52, 70, 0.7) 56%, rgba(13, 52, 70, 0.24) 100%),
        url("Photo/umsi_leinweber.jpg") center / cover no-repeat;
}

.degree-page-hero > a {
    display: inline-block;
    margin-bottom: 46px;
    color: var(--mint);
    font-weight: 800;
    text-decoration: none;
}

.internship-page-hero {
    background: var(--deep-blue);
}

.degree-project-list {
    padding-top: 64px;
}

.pathway-project-grid {
    display: grid;
    gap: 32px;
    padding: clamp(60px, 8vw, 110px) 7%;
    background: #fbf6e6;
}

.pathway-project-card {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(18, 63, 86, 0.1);
}

.pathway-project-card img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
}

.pathway-project-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 6vw, 76px);
}

.pathway-project-card h2 {
    margin: 8px 0 20px;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.pathway-project-card > div > p:not(:first-child) {
    color: var(--muted);
    line-height: 1.7;
}

.pathway-project-card a {
    align-self: flex-start;
    margin-top: 18px;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.msi-coming-soon-page {
    min-height: 100vh;
}

.msi-coming-soon {
    position: relative;
    display: grid;
    min-height: calc(100vh - 72px);
    place-items: center start;
    overflow: hidden;
}

.msi-coming-soon > img,
.msi-coming-soon-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.msi-coming-soon > img {
    object-fit: cover;
}

.msi-coming-soon-overlay {
    background: linear-gradient(90deg, rgba(8, 40, 68, 0.94), rgba(8, 40, 68, 0.62) 58%, rgba(8, 40, 68, 0.18));
}

.msi-coming-soon-content {
    position: relative;
    z-index: 1;
    max-width: 950px;
    padding: 70px 7%;
    color: #fff;
}

.msi-coming-soon-content > a {
    color: #ffcb05;
    font-weight: 900;
    text-decoration: none;
}

.msi-coming-soon-content > p:first-of-type {
    margin: 54px 0 15px;
    color: #ffcb05;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.msi-coming-soon-content h1 {
    margin: 0 0 28px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(3.5rem, 7vw, 7.5rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.msi-coming-soon-content strong {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 999px;
    background: #ffcb05;
    color: #00274c;
    text-transform: uppercase;
}

.msi-coming-soon-content > p:last-child {
    max-width: 720px;
    margin-top: 26px;
    color: #e8eef3;
    font-size: 1.08rem;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .pathways-grid,
    .pathway-project-card {
        grid-template-columns: 1fr;
    }

    .pathway-card h2 {
        min-height: 0;
    }

    .pathway-card-image {
        height: 230px;
    }

    .pathway-project-card img {
        min-height: 270px;
        max-height: 340px;
    }
}

.learning-journey {
    padding: clamp(70px, 8vw, 110px) 7%;
    background: #f5f1e5;
}

.learning-journey-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px 7vw;
    margin-bottom: 54px;
}

.learning-journey-heading .eyebrow {
    grid-column: 1 / -1;
}

.learning-journey-heading h2 {
    margin: 0;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.learning-journey-heading > p:last-child {
    align-self: end;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
}

.journey-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--green);
}

.journey-timeline article {
    position: relative;
    min-width: 0;
    padding: 34px 24px 24px;
    border-right: 1px solid #c9c2ae;
}

.journey-timeline article:last-child {
    border-right: 0;
}

.journey-timeline article > span {
    position: absolute;
    top: -18px;
    left: 24px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 900;
}

.journey-timeline article > p:first-of-type {
    margin-bottom: 10px;
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.journey-timeline h3 {
    min-height: 2.4em;
    margin: 0 0 14px;
    color: var(--deep-blue);
    font-size: 1.3rem;
}

.journey-timeline article > p:last-of-type {
    color: var(--muted);
    font-size: 0.92rem;
}

.journey-timeline article > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.journey-timeline article > div a {
    padding: 6px 9px;
    border: 1px solid var(--green);
    border-radius: 999px;
    color: var(--green);
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}

.journey-timeline article > div a:hover,
.journey-timeline article > div a:focus-visible {
    background: var(--green);
    color: var(--white);
}

@media (max-width: 1000px) {
    .journey-timeline {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .journey-timeline article {
        border-right: 0;
    }
}

.case-card {
    display: grid;
    grid-template-columns: minmax(340px, 44%) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    padding: 32px;
    background: #fffdf5;
    border: 1px solid #efe6cf;
    border-radius: 18px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.case-card:hover {
    border-color: var(--green);
    box-shadow: 0 18px 38px rgba(18, 63, 86, 0.18);
    transform: translateY(-4px);
}

.case-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(31, 42, 36, 0.24);
}

.case-card img.poster-image {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fffdf5;
}

.skillbridge-card-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 290px;
    padding: 30px;
    border-radius: 14px;
    background: #173a35;
    box-shadow: 0 6px 16px rgba(31, 42, 36, 0.24);
    color: #f4f0df;
}
.skillbridge-card-visual > span { align-self: flex-start; padding: 7px 9px; border-radius: 8px; background: #d7f06d; color: #173a35; font-weight: 900; }
.skillbridge-card-visual strong { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.02; letter-spacing: -0.04em; }
.skillbridge-card-visual small { color: #b8cac5; text-transform: uppercase; letter-spacing: .12em; }
.case-card img.skillbridge-card-image {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #fff;
}

.skillbridge-case { overflow: hidden; background: #f7f4e9; color: #173a35; }
.skillbridge-case > .back-link { margin: 28px 7%; color: #173a35; }
.sb-hero { padding: clamp(50px, 8vw, 110px) 7% 70px; background: #173a35; color: #f7f4e9; }
.sb-hero-copy { max-width: 860px; }
.sb-kicker,.sb-label { margin: 0 0 14px; color: #618a7f; font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.sb-hero .sb-kicker { color: #d7f06d; }
.sb-hero h1 { margin: 0; color: #f7f4e9; font-size: clamp(4rem, 12vw, 9rem); letter-spacing: -.075em; line-height: .82; }
.sb-hero h1 span { color: #d7f06d; }
.sb-headline { max-width: 760px; margin: 32px 0 12px; font-size: clamp(1.4rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.14; }
.sb-hero-copy > p:last-of-type { max-width: 740px; color: #b8cac5; font-size: 1.05rem; }
.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sb-tags span,.sb-future span { padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sb-phone-stage { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: clamp(12px, 2vw, 26px); max-width: 1120px; margin: 70px auto 54px; align-items: end; }
.sb-deck-visual { max-width: 1300px; margin: 64px auto 48px; }
.sb-deck-visual img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 48px rgba(0,0,0,.28); }
.sb-deck-visual figcaption { margin-top: 12px; color: #8daba3; font-size: .72rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.sb-phone { min-height: 410px; padding: 25px 14px 18px; overflow: hidden; border: 7px solid #0c211e; border-radius: 30px; background: #faf9f3; box-shadow: 0 20px 34px rgba(0,0,0,.3); color: #173a35; font-size: .76rem; }
.sb-phone:nth-child(even) { transform: translateY(28px); }
.sb-speaker { width: 52px; height: 5px; margin: -13px auto 19px; border-radius: 10px; background: #173a35; }
.sb-welcome { display: flex; min-height: 345px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sb-logo { display: grid; width: 46px; height: 46px; margin-bottom: 8px; place-items: center; border-radius: 13px; background: #d7f06d; font-weight: 900; }
.sb-phone h3 { margin: 12px 0 7px; color: #173a35; font-size: 1.15rem; }
.sb-phone p { color: #61706c; font-size: .7rem; line-height: 1.4; }
.sb-ui-button { display: block; margin-top: 12px; padding: 9px 16px; border-radius: 99px; background: #173a35; color: white; font-weight: 800; text-align: center; }
.sb-appbar { display: flex; justify-content: space-between; font-size: 1rem; }
.sb-search { margin: 18px 0; padding: 10px; border-radius: 8px; background: #e9ede5; color: #78827e; }
.sb-phone small { display: block; margin: 14px 0 8px; color: #73807c; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.sb-listing { display: flex; gap: 8px; margin: 9px 0; padding: 9px; border: 1px solid #e1e5dc; border-radius: 9px; }
.sb-listing i { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #d7f06d; font-style: normal; font-weight: 900; }
.sb-listing b,.sb-listing span { display: block; line-height: 1.25; }
.sb-listing span { margin-top: 3px; color: #77817e; font-size: .58rem; }
.sb-detail-cover { display: grid; height: 105px; place-items: center; border-radius: 12px; background: #d7f06d; }
.sb-detail-cover span { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: #173a35; color: white; font-weight: 900; }
.sb-mini-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-mini-tags span { padding: 4px 7px; border-radius: 99px; background: #e4eade; font-size: .55rem; font-weight: 700; }
.sb-avatar { display: grid; width: 72px; height: 72px; margin: 25px auto 12px; place-items: center; border-radius: 50%; background: #d7f06d; font-size: 1.2rem; font-weight: 900; }
.sb-phone-four { text-align: center; }
.sb-progress { height: 9px; margin: 8px 0; border-radius: 99px; background: #dfe5dc; overflow: hidden; text-align: left; }
.sb-progress span { display: block; width: 72%; height: 100%; background: #d7f06d; }
.sb-percent { font-size: .66rem; }
.sb-facts { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: clamp(16px, 2.2vw, 38px); margin: 0; padding-top: 30px; border-top: 1px solid #45645d; }
.sb-facts dt { margin-bottom: 7px; color: #8dacA4; font-size: .68rem; text-transform: uppercase; }
.sb-facts dd { margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.4; }
.sb-section { padding: clamp(64px, 9vw, 120px) 7%; }
.sb-section h2 { max-width: 850px; margin-bottom: 28px; color: #173a35; font-size: clamp(2.1rem, 5vw, 4.8rem); letter-spacing: -.05em; line-height: .98; }
.sb-section p { color: #52645f; }
.sb-intro-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: start; }
.sb-intro-grid article > p { max-width: 730px; font-size: 1.08rem; }
.sb-question { padding: 32px; border-top: 5px solid #d7f06d; background: #173a35; }
.sb-question .sb-label { color: #d7f06d; }
.sb-question blockquote { margin: 0; color: white; font-size: clamp(1.2rem,2vw,1.8rem); line-height: 1.35; }
.sb-purpose-grid,.sb-goal-grid,.sb-scope-grid,.sb-risk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.sb-purpose-grid article,.sb-goal-grid article,.sb-scope-grid article,.sb-risk-grid article { padding: 26px; border: 1px solid #cad4cc; border-radius: 14px; background: #fffdf6; }
.sb-purpose-grid article > span,.sb-goal-grid article > span { color: #6f958b; font-size: 2rem; font-weight: 900; }
.sb-section h3 { color: #173a35; }
.sb-tint { background: #e7eee5; }
.sb-audience-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.sb-audience-grid article { min-height: 185px; padding: 24px; background: #fffdf6; border-radius: 14px; }
.sb-audience-grid .primary { grid-column: span 2; background: #d7f06d; }
.sb-audience-grid small { color: #6b7f79; text-transform: uppercase; letter-spacing: .08em; }
.sb-solution { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 25px; background: #d7f06d; }
.sb-solution article { padding: 30px; border-radius: 14px; background: #fffdf6; }
.sb-section ul { padding-left: 20px; }
.sb-contribution { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; }
.sb-process-section { background: #f0eddf; }
.sb-process { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 40px; margin: 40px 0 0; padding: 0; list-style: none; }
.sb-process li { display: grid; grid-template-columns: 54px 1fr; gap: 15px; padding: 24px 0; border-top: 1px solid #c8d0c7; }
.sb-process li > span { color: #679086; font-weight: 900; }
.sb-process h3,.sb-process p { margin: 0 0 5px; }
.sb-scope-grid { margin-bottom: 80px; }
.sb-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.sb-flow { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.sb-flow span { padding: 12px; border-radius: 8px; background: #173a35; color: white; font-weight: 700; }
.sb-flow i { color: #79968e; font-style: normal; }
.sb-dark { background: #173a35; color: white; }
.sb-dark .sb-label { color: #d7f06d; }
.sb-dark h2,.sb-dark h3 { color: white; }
.sb-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 50px 0; }
.sb-metrics article { padding: 30px; border: 1px solid #52716a; border-radius: 14px; }
.sb-metrics strong,.sb-metrics span { display: block; }
.sb-metrics strong { color: #d7f06d; font-size: clamp(3rem,7vw,6rem); line-height: 1; }
.sb-metrics span { color: #c8d6d2; }
.sb-stakeholder-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.sb-stakeholder-grid p { color: #b9cbc6; }
.sb-value-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.sb-value-grid article { padding: 32px; border-radius: 14px; background: #fffdf6; border: 1px solid #cad4cc; }
.sb-deliverables { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.sb-deliverables span { padding: 18px; border-radius: 8px; background: #e7eee5; font-weight: 700; }
.sb-response { margin: 28px 0 0; font-weight: 700; }
.sb-skills { display: grid; grid-template-columns: 1.1fr .7fr .7fr; gap: 40px; background: #d7f06d; }
.sb-skills h2 { font-size: clamp(2rem,4vw,4rem); }
.sb-reflection { text-align: center; background: #f0eddf; }
.sb-reflection blockquote { max-width: 960px; margin: 0 auto 25px; color: #173a35; font-size: clamp(2rem,5vw,4.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.sb-reflection > p:last-child { max-width: 780px; margin: auto; }
.sb-future { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
    .sb-phone-stage { grid-template-columns: repeat(2, minmax(180px, 1fr)); max-width: 570px; }
    .sb-phone:nth-child(even) { transform: none; }
    .sb-facts { grid-template-columns: repeat(2,1fr); }
    .sb-intro-grid,.sb-contribution,.sb-approach { grid-template-columns: 1fr; }
    .sb-audience-grid { grid-template-columns: repeat(2,1fr); }
    .sb-solution { grid-template-columns: 1fr 1fr; }
    .sb-solution > div { grid-column: 1/-1; }
    .sb-skills { grid-template-columns: 1fr 1fr; }
    .sb-skills > div:first-child { grid-column: 1/-1; }
}

@media (max-width: 620px) {
    .sb-phone-stage,.sb-purpose-grid,.sb-goal-grid,.sb-scope-grid,.sb-risk-grid,.sb-metrics,.sb-stakeholder-grid,.sb-value-grid,.sb-process,.sb-deliverables,.sb-skills { grid-template-columns: 1fr; }
    .sb-phone-stage { max-width: 270px; }
    .sb-facts,.sb-audience-grid,.sb-solution { grid-template-columns: 1fr; }
    .sb-audience-grid .primary { grid-column: auto; }
    .sb-solution > div,.sb-skills > div:first-child { grid-column: auto; }
}

/* Global Coffee Health Dataset */
.coffee-case { overflow: hidden; background: #f7f2e9; color: #33261d; }
.coffee-case > .back-link { margin: 28px 7%; color: #7b4024; }
.coffee-hero { padding: clamp(58px,8vw,120px) 7% 52px; background: #39251b; color: #fff8ec; }
.coffee-kicker,.coffee-label { margin: 0 0 15px; color: #b66b3e; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.coffee-hero .coffee-kicker { color: #e9ad7b; }
.coffee-hero-copy { display: grid; grid-template-columns: 1.35fr .65fr; gap: 7vw; align-items: end; }
.coffee-hero h1 { margin: 0; max-width: 940px; color: #fff8ec; font-family: Georgia,serif; font-size: clamp(3.2rem,7vw,7rem); font-weight: 400; letter-spacing: -.055em; line-height: .94; }
.coffee-hero h1 em { color: #e9ad7b; }
.coffee-hero-copy > p { max-width: 540px; margin: 0; color: #d9c8bb; font-size: 1.05rem; }
.coffee-hero-visual { display: grid; grid-template-columns: 1.5fr .5fr; gap: 18px; margin: 62px 0 50px; }
.coffee-hero-visual > img { width: 100%; height: 100%; min-height: 310px; object-fit: contain; border-radius: 14px; background: white; }
.coffee-hero-visual aside { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,4vw,46px); border-radius: 14px; background: #d88955; color: #271911; }
.coffee-hero-visual aside small { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.coffee-hero-visual aside strong { margin: 20px 0; font-family: Georgia,serif; font-size: clamp(1.7rem,3vw,3.1rem); line-height: 1.04; }
.coffee-hero-visual aside p { margin: 0; color: #4d2b1e; }
.coffee-facts { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 22px; margin: 0; padding-top: 28px; border-top: 1px solid #6d5041; }
.coffee-facts dt { margin-bottom: 7px; color: #bd9d89; font-size: .68rem; text-transform: uppercase; }
.coffee-facts dd { margin: 0; color: #fff8ec; font-size: .8rem; font-weight: 800; line-height: 1.4; }
.coffee-section { padding: clamp(64px,9vw,120px) 7%; }
.coffee-section h2,.coffee-result h2 { margin: 0 0 30px; color: #39251b; font-family: Georgia,serif; font-size: clamp(2.2rem,5vw,5rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.coffee-section h3 { color: #512f20; }
.coffee-section p { color: #68564b; }
.coffee-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; }
.coffee-overview > div:last-child { padding-top: 28px; font-size: 1.08rem; }
.coffee-problem { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: #e8d8c8; }
.coffee-problem article { padding: 32px; border-radius: 14px; background: #fffaf2; }
.coffee-problem article:last-child { grid-column: 2; }
.coffee-question { grid-row: span 2; background: #39251b !important; }
.coffee-question .coffee-label { color: #e9ad7b; }
.coffee-question blockquote { margin: 60px 0 0; color: #fff8ec; font-family: Georgia,serif; font-size: clamp(1.8rem,3.4vw,3.4rem); line-height: 1.12; }
.coffee-dataset { text-align: center; background: #fffaf2; }
.coffee-dataset h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.coffee-data-flow { display: flex; align-items: center; justify-content: center; gap: clamp(15px,4vw,55px); margin: 55px 0; }
.coffee-data-flow div { display: grid; }
.coffee-data-flow strong { color: #7b4024; font-size: clamp(2.8rem,6vw,6rem); line-height: 1; }
.coffee-data-flow span { color: #705a4b; font-weight: 700; }
.coffee-data-flow i { color: #d88955; font-size: 2rem; font-style: normal; }
.coffee-data-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 28px; }
.coffee-data-tags span { padding: 9px 14px; border-radius: 99px; background: #e8d8c8; color: #573829; font-weight: 700; }
.coffee-dataset > p:last-child { max-width: 780px; margin: auto; }
.coffee-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.coffee-card-grid article { min-height: 210px; padding: 27px; border: 1px solid #d8c7b7; border-radius: 14px; background: #fffaf2; }
.coffee-card-grid article > span { color: #c17448; font-size: 1.8rem; font-weight: 900; }
.coffee-process-section { background: #e8d8c8; }
.coffee-process { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 45px; padding: 0; list-style: none; }
.coffee-process li { display: grid; grid-template-columns: 50px 1fr; gap: 15px; padding: 24px 0; border-top: 1px solid #c2a994; }
.coffee-process li > span { color: #a65e37; font-weight: 900; }
.coffee-process h3,.coffee-process p { margin: 0 0 5px; }
.coffee-tools { padding: 48px 7%; background: #39251b; }
.coffee-tools .coffee-label { color: #e9ad7b; }
.coffee-tools > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.coffee-tools span { padding: 18px; border: 1px solid #6d5041; border-radius: 10px; color: #fff8ec; }
.coffee-tools b { margin-left: 8px; }
.coffee-visuals figure { display: grid; grid-template-columns: 1.5fr .5fr; gap: 35px; align-items: center; margin: 25px 0; padding: 25px; border: 1px solid #d8c7b7; border-radius: 14px; background: #fffaf2; }
.coffee-visuals figure > img,.coffee-figure-pair img { width: 100%; border-radius: 8px; background: white; }
.coffee-figure-pair { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.coffee-visuals figcaption span { color: #a65e37; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.coffee-visuals figcaption p { margin-top: 16px; }
.coffee-findings { background: #39251b; color: white; }
.coffee-findings .coffee-label { color: #e9ad7b; }
.coffee-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.coffee-metrics article { padding: 28px; border: 1px solid #6d5041; border-radius: 13px; }
.coffee-metrics strong,.coffee-metrics span { display: block; }
.coffee-metrics strong { color: #e9ad7b; font-family: Georgia,serif; font-size: clamp(2.3rem,5vw,5rem); font-weight: 400; line-height: 1; }
.coffee-metrics span { margin-top: 12px; color: #e0d0c4; }
.coffee-findings > p:last-child { max-width: 720px; margin: 38px 0 0; color: #d9c8bb; font-size: 1.08rem; }
.coffee-challenges { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.coffee-challenges article { padding: 25px; border-top: 4px solid #d88955; background: #fffaf2; }
.coffee-note { max-width: 780px; margin-top: 38px; }
.coffee-result { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: clamp(70px,10vw,140px) 7%; background: #d88955; }
.coffee-result p { color: #422518; font-size: 1.15rem; }
.coffee-skills { display: grid; grid-template-columns: 1fr .7fr .7fr; gap: 45px; }
.coffee-skills h2 { font-size: clamp(2.3rem,4vw,4rem); }
.coffee-reflection { text-align: center; background: #e8d8c8; }
.coffee-reflection blockquote { max-width: 950px; margin: 0 auto 28px; color: #39251b; font-family: Georgia,serif; font-size: clamp(2rem,5vw,4.6rem); line-height: 1.05; }
.coffee-reflection > p { max-width: 780px; margin: 0 auto 40px; }
.coffee-github { display: inline-flex; align-items: center; gap: 16px; padding: 18px 26px; border-radius: 999px; background: #39251b; color: #fff8ec; font-weight: 800; text-decoration: none; }
.coffee-github-icon { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border-radius: 50%; background: #fff; }
.coffee-github-icon svg { display: block; width: 32px; height: 32px; fill: #211820; }

/* Campus Connect case study */
.campus-case { --campus-blue: #2f68b1; --campus-yellow: #f6d96b; --campus-ink: #17304c; --campus-paper: #f8fbff; --campus-sky: #eaf3fc; --campus-cream: #fff9e7; background: var(--campus-paper); color: var(--campus-ink); }
.campus-case .back-link { display: inline-block; margin: 28px 6% 0; color: var(--campus-ink); }
.campus-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: 4vw; align-items: center; padding: clamp(56px,8vw,110px) 6% 50px; }
.campus-hero-copy h1 { margin: 12px 0 24px; font-size: clamp(4.5rem,10vw,9.5rem); line-height: .78; letter-spacing: -.08em; }
.campus-hero-copy h1 em { color: var(--campus-blue); font-family: Georgia,serif; font-weight: 400; }
.campus-hero-copy > p:not(.campus-eyebrow) { max-width: 650px; font-size: clamp(1.1rem,1.7vw,1.45rem); line-height: 1.55; }
.campus-eyebrow,.campus-label { color: var(--campus-blue); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.campus-tags,.campus-skill-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.campus-tags span,.campus-skill-list span { padding: 9px 13px; border: 1px solid var(--campus-ink); border-radius: 99px; font-size: .82rem; font-weight: 800; }
.campus-hero-art { margin: 0; padding: 18px; transform: rotate(1deg); background: #fff; border: 1px solid #dbe6f2; box-shadow: 18px 18px 0 var(--campus-sky); }
.campus-hero-art img { display: block; width: 100%; }
.campus-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 45px 0 0; border-top: 1px solid var(--campus-ink); border-bottom: 1px solid var(--campus-ink); }
.campus-facts div { min-width: 0; padding: 20px 18px; border-right: 1px solid var(--campus-ink); }
.campus-facts div:last-child { border-right: 0; }
.campus-facts dt { margin-bottom: 7px; color: var(--campus-blue); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.campus-facts dd { margin: 0; overflow-wrap: break-word; font-weight: 750; }
.campus-section { padding: clamp(72px,9vw,130px) 7%; }
.campus-section h2 { margin: 12px 0 24px; font-size: clamp(2.5rem,5vw,5.8rem); line-height: .95; letter-spacing: -.05em; }
.campus-section h3 { font-size: 1.2rem; }
.campus-section p,.campus-section li { line-height: 1.65; }
.campus-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; background: #fff; }
.campus-overview > div:last-child { max-width: 650px; font-size: 1.15rem; }
.campus-problem { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.campus-problem article { padding: clamp(70px,8vw,120px) 8%; }
.campus-problem > article:first-child { background: var(--campus-sky); color: var(--campus-ink); }
.campus-problem > article:first-child .campus-label { color: var(--campus-blue); }
.campus-solution { background: var(--campus-cream); }
.campus-solution ul,.campus-persona ul { padding-left: 1.2rem; }
.campus-role > div:first-child { max-width: 750px; }
.campus-role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.campus-role-grid article { min-height: 250px; padding: 28px; border: 1px solid var(--campus-ink); background: #fff; }
.campus-role-grid article > span,.campus-feature-card > span { color: var(--campus-blue); font-size: 2.5rem; font-weight: 900; }
.campus-gallery-section { overflow: hidden; background: var(--campus-sky); color: var(--campus-ink); }
.campus-gallery-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.campus-gallery-heading > p { max-width: 260px; }
.campus-gallery { display: flex; gap: 18px; margin-top: 48px; padding-bottom: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
.campus-gallery > * { flex: 0 0 min(78vw,600px); scroll-snap-align: start; }
.campus-gallery-wide { margin: 0; padding: 22px; border: 1px solid #dbe6f2; background: #fff; color: var(--campus-ink); }
.campus-gallery-all { flex-basis: min(72vw,680px); }
.campus-gallery-wide img { display: block; width: 100%; image-rendering: auto; }
.campus-gallery-wide figcaption { padding-top: 14px; font-weight: 800; }
.campus-gallery-phone { display: grid; grid-template-columns: minmax(210px,.85fr) 1fr; gap: 32px; align-items: center; margin: 0; padding: 30px; border: 1px solid #dbe6f2; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(23,48,76,.08); }
.campus-gallery-phone img { display: block; width: 100%; max-height: 610px; object-fit: contain; }
.campus-gallery-phone figcaption { display: grid; gap: 12px; }
.campus-gallery-phone figcaption span { color: var(--campus-blue); font-size: 2.8rem; font-weight: 900; }
.campus-gallery-phone figcaption strong { font-size: clamp(1.5rem,3vw,2.8rem); line-height: 1; }
.campus-gallery-phone figcaption small { font-size: 1rem; line-height: 1.6; }
.campus-feature-card { display: flex; min-height: 430px; flex-direction: column; justify-content: end; padding: 40px; border: 1px solid #eadca7; background: var(--campus-cream); color: var(--campus-ink); }
.campus-feature-card:nth-of-type(even) { border-color: #cbddec; background: #f4f9fe; color: var(--campus-ink); }
.campus-feature-card:nth-of-type(even) > span { color: var(--campus-blue); }
.campus-persona { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; background: #fff; }
.campus-persona-number { margin: 30px 0 -12px; color: var(--campus-yellow); font-size: clamp(5rem,12vw,10rem); font-weight: 950; line-height: .7 !important; }
.campus-persona-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: center; }
.campus-persona-columns article { min-height: 280px; padding: 30px; background: var(--campus-paper); }
.campus-competition { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw 8vw; background: var(--campus-cream); }
.campus-strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.campus-strengths span { display: grid; min-height: 115px; place-items: center; padding: 20px; border: 2px solid var(--campus-ink); text-align: center; font-weight: 900; }
.campus-competition > p { grid-column: 2; margin: 0; }
.campus-ethics { background: #fff; color: var(--campus-ink); }
.campus-ethics .campus-label { color: var(--campus-blue); }
.campus-ethics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 45px; background: transparent; }
.campus-ethics-grid article { padding: 30px; border: 1px solid #dbe6f2; background: var(--campus-sky); }
.campus-reflection { text-align: center; }
.campus-reflection blockquote { max-width: 950px; margin: 24px auto 32px; color: var(--campus-blue); font-family: Georgia,serif; font-size: clamp(2.8rem,6vw,6.5rem); line-height: .95; }
.campus-reflection > p { max-width: 760px; margin: 0 auto; font-size: 1.1rem; }
.campus-reflection .campus-skill-list { justify-content: center; margin-top: 38px; }
.campus-next { margin-top: 0; }
.campus-connect-card > img { padding: 18px; object-fit: contain; background: #eef6fd; }
@media (max-width: 800px) {
    .campus-hero,.campus-overview,.campus-problem,.campus-persona,.campus-competition { grid-template-columns: 1fr; }
    .campus-hero-art { max-width: 620px; }
    .campus-facts { grid-template-columns: 1fr 1fr; }
    .campus-facts div:nth-child(2) { border-right: 0; }
    .campus-role-grid,.campus-persona-columns { grid-template-columns: 1fr; }
    .campus-competition > p { grid-column: auto; }
}
@media (max-width: 520px) {
    .campus-hero-copy h1 { font-size: clamp(4rem,22vw,6rem); }
    .campus-facts,.campus-ethics-grid,.campus-strengths { grid-template-columns: 1fr; }
    .campus-facts div { border-right: 0; border-bottom: 1px solid var(--campus-ink); }
    .campus-gallery-heading { display: block; }
    .campus-gallery > * { flex-basis: 88vw; }
    .campus-gallery-phone { grid-template-columns: 1fr; }
    .campus-gallery-phone img { max-height: 430px; }
}

.next-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(170px, 20vw, 250px);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    width: 100%;
    margin-top: clamp(28px, 4vw, 52px);
    padding: 16px 3%;
    background: #ffffff;
    border-top: 3px solid #505050;
    border-bottom: 2px solid #e1b51f;
    color: #464646;
    text-decoration: none;
    transition: background-color .2s ease;
}
.next-project-copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.next-project small { margin-bottom: 12px; font-size: clamp(.72rem, 1vw, .9rem); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.next-project strong { font-size: clamp(1.25rem, 2.25vw, 2rem); line-height: 1.05; }
.next-project img { display: block; width: 100%; height: 150px; object-fit: cover; border: 3px solid #565656; border-radius: 14px; }
.next-project:hover,.next-project:focus-visible { background: #eef3ec; color: var(--green); }
.museum-case .next-project,.movie-case .next-project { width: calc(100% + 14vw); margin-left: -7vw; margin-bottom: -48px; }
.skillbridge-case .next-project,.coffee-case .next-project { margin-top: 0; }

@media (max-width: 900px) {
    .coffee-hero-copy,.coffee-hero-visual,.coffee-overview,.coffee-result { grid-template-columns: 1fr; }
    .coffee-hero-copy > p { margin-top: 28px; }
    .coffee-facts { grid-template-columns: repeat(2,1fr); }
    .coffee-card-grid { grid-template-columns: repeat(2,1fr); }
    .coffee-tools > div,.coffee-metrics,.coffee-challenges { grid-template-columns: repeat(2,1fr); }
    .coffee-visuals figure { grid-template-columns: 1fr; }
    .coffee-skills { grid-template-columns: 1fr 1fr; }
    .coffee-skills > div { grid-column: 1/-1; }
}
@media (max-width: 620px) {
    .coffee-problem,.coffee-card-grid,.coffee-process,.coffee-tools > div,.coffee-metrics,.coffee-challenges,.coffee-skills { grid-template-columns: 1fr; }
    .coffee-problem article:last-child,.coffee-skills > div { grid-column: auto; }
    .coffee-question { grid-row: auto; }
    .coffee-facts { grid-template-columns: repeat(2,1fr); }
    .coffee-data-flow { align-items: stretch; flex-direction: column; }
    .coffee-data-flow i { transform: rotate(90deg); }
    .coffee-figure-pair { grid-template-columns: 1fr; }
    .next-project { grid-template-columns: 1fr; }
    .next-project-copy { align-items: flex-start; text-align: left; }
    .next-project small { margin-bottom: 12px; }
}

.case-card-content h2 {
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    margin-bottom: 12px;
}

.case-card-content p {
    color: var(--muted);
    font-size: 0.95rem;
}

.case-meta {
    color: var(--green);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.case-tags button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(53, 83, 38, 0.34);
    border-radius: 999px;
    background: var(--white);
    color: var(--deep-blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.case-tags button::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
}

.case-tags button:nth-child(even) {
    border-color: rgba(18, 63, 86, 0.32);
    background: #eef4f6;
}

.case-tags button:nth-child(even)::before {
    background: var(--deep-blue);
}

.case-tags button:hover,
.case-tags button:focus-visible,
.case-tags button[aria-pressed="true"] {
    border-color: var(--green);
    background: var(--green);
    color: var(--white);
    transform: translateY(-1px);
}

.case-tags button:hover::before,
.case-tags button:focus-visible::before,
.case-tags button[aria-pressed="true"]::before {
    background: var(--white);
}

.project-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border-left: 5px solid var(--green);
    background: var(--mint);
}

.project-filter-bar p {
    margin: 0;
    color: var(--deep-blue);
    font-weight: 800;
}

.project-filter-bar button {
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--deep-blue);
    color: var(--white);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
}

.case-card[hidden] {
    display: none;
}

.bookclub-card > img {
    padding: 10px;
    object-fit: contain;
    background: #f1f1ef;
}

/* Study Abroad at Barcelona */
.barcelona-page {
    --barcelona-blue: #164f69;
    --barcelona-gold: #e2a72b;
    --barcelona-terracotta: #b94f36;
    --barcelona-paper: #fffaf0;
    background: var(--barcelona-paper);
}

.barcelona-hero {
    position: relative;
    display: grid;
    min-height: min(82vh, 820px);
    place-items: end start;
    overflow: hidden;
}

.barcelona-hero > img,
.barcelona-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.barcelona-hero > img {
    object-fit: cover;
    object-position: center;
}

.barcelona-hero-overlay {
    background: linear-gradient(90deg, rgba(8, 34, 47, 0.9) 0%, rgba(8, 34, 47, 0.58) 48%, rgba(8, 34, 47, 0.12) 100%);
}

.barcelona-back-link {
    position: absolute;
    top: clamp(28px, 5vw, 70px);
    left: 7%;
    z-index: 2;
    color: var(--barcelona-gold);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 900;
    text-decoration: none;
}

.barcelona-back-link:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.barcelona-hero-content {
    position: relative;
    z-index: 1;
    max-width: 850px;
    padding: clamp(70px, 9vw, 130px) 7%;
    color: #fff;
}

.barcelona-hero-content > p:first-child,
.barcelona-label {
    margin: 0 0 16px;
    color: var(--barcelona-gold);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.barcelona-hero h1 {
    margin: 0 0 24px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(4rem, 9vw, 8.5rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.86;
}

.barcelona-intro {
    max-width: 650px;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.barcelona-hero-content a {
    display: inline-flex;
    margin-top: 20px;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--barcelona-gold);
    color: #102d3a;
    font-weight: 900;
    text-decoration: none;
}

.barcelona-overview {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    gap: 8vw;
    padding: clamp(70px, 9vw, 120px) 7%;
    background: #fff;
}

.barcelona-overview h2,
.barcelona-section-heading h2 {
    margin: 0 0 24px;
    color: var(--barcelona-blue);
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
}

.barcelona-overview > div > p {
    max-width: 760px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.barcelona-projects {
    display: grid;
    gap: 34px;
    padding: clamp(70px, 9vw, 120px) 7%;
}

.barcelona-section-heading {
    max-width: 900px;
    margin-bottom: 24px;
}

.barcelona-project-card {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(0, 0.9fr);
    overflow: hidden;
    border: 1px solid #e1d8c5;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(20, 50, 62, 0.1);
}

.barcelona-project-image {
    position: relative;
    align-self: stretch;
    width: 100%;
    min-height: 430px;
    aspect-ratio: auto;
    padding: 0;
    background: #ececea;
}

.barcelona-project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.barcelona-project-image > span,
.barcelona-face-visual > span {
    position: absolute;
    top: 22px;
    left: 22px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: var(--barcelona-gold);
    color: #153342;
    font-weight: 900;
}

.barcelona-project-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5vw, 70px);
}

.barcelona-project-copy > p:first-child {
    color: var(--barcelona-terracotta);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.barcelona-project-copy h3 {
    margin: 4px 0 20px;
    color: var(--barcelona-blue);
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 400;
}

.barcelona-project-copy > p:not(:first-child) {
    line-height: 1.7;
}

.barcelona-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 20px 0 28px;
}

.barcelona-tags span {
    padding: 7px 9px;
    border: 1px solid #b9cbd3;
    border-radius: 999px;
    color: var(--barcelona-blue);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    text-transform: uppercase;
}

.barcelona-project-copy > a {
    align-self: flex-start;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--barcelona-blue);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.barcelona-face-visual {
    position: relative;
    display: grid;
    min-height: 430px;
    place-items: center;
    overflow: hidden;
    background: var(--barcelona-blue);
    color: #fff;
}

.barcelona-face-visual strong {
    position: relative;
    z-index: 1;
    font-family: Georgia, serif;
    font-size: clamp(4rem, 9vw, 8rem);
    font-weight: 400;
    line-height: 0.65;
    text-align: center;
}

.barcelona-face-visual i {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 3px solid var(--barcelona-gold);
    border-radius: 50%;
}

.barcelona-face-visual i:first-of-type {
    transform: translateX(-90px);
}

.barcelona-face-visual i:last-of-type {
    transform: translateX(90px);
}

.barcelona-coming-soon {
    color: var(--barcelona-terracotta);
    font-weight: 900;
}

@media (max-width: 800px) {
    .barcelona-overview,
    .barcelona-project-card {
        grid-template-columns: 1fr;
    }

    .barcelona-project-image,
    .barcelona-face-visual {
        min-height: 320px;
    }

    .barcelona-tags {
        flex-wrap: wrap;
    }
}

/* BookClub case study */
.bookclub-case {
    --book-green: #355d28;
    --book-lime: #e5f0c8;
    --book-cream: #fbf8ed;
    --book-ink: #172018;
    background: var(--book-cream);
    color: var(--book-ink);
}

.bookclub-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
    gap: 5vw;
    align-items: center;
    padding: clamp(54px, 8vw, 110px) 6% 0;
    overflow: hidden;
    background: var(--book-ink);
    color: #f9f7ef;
}

.bookclub-back {
    display: inline-block;
    margin-bottom: 44px;
    color: var(--book-lime);
    font-weight: 800;
    text-decoration: none;
}

.bookclub-label {
    margin: 0 0 12px;
    color: var(--book-green);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bookclub-hero .bookclub-label {
    color: #a8ca8b;
}

.bookclub-hero h1 {
    margin: 0 0 26px;
    color: #f9f7ef;
    font-family: Georgia, serif;
    font-size: clamp(4rem, 9vw, 8.5rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.82;
}

.bookclub-hero h1 span {
    color: #a8ca8b;
}

.bookclub-intro {
    max-width: 650px;
    color: #d8dbd1;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.bookclub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.bookclub-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 20px;
    border: 2px solid var(--book-green);
    border-radius: 999px;
    background: var(--book-green);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.bookclub-actions .secondary {
    border-color: #a8ca8b;
    background: transparent;
    color: #dcebcf;
}

.bookclub-hero-visual {
    margin: 0;
    padding: 14px;
    border-radius: 22px 22px 0 0;
    background: #eee;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    transform: translateY(18px) rotate(1deg);
}

.bookclub-hero-visual img,
.bookclub-prototype img {
    display: block;
    width: 100%;
}

.bookclub-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 56px -6.4vw 0;
    padding: 0 6vw;
    background: var(--book-green);
}

.bookclub-facts div {
    padding: 24px 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.bookclub-facts div:last-child {
    border-right: 0;
}

.bookclub-facts dt {
    margin-bottom: 7px;
    color: #cde2b9;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bookclub-facts dd {
    margin: 0;
    color: #fff;
    font-weight: 800;
}

.bookclub-section {
    padding: clamp(68px, 8vw, 120px) 7%;
}

.bookclub-section h2,
.bookclub-pov h2 {
    margin: 0 0 28px;
    color: var(--book-ink);
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 5.4rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.bookclub-section p,
.bookclub-section li {
    line-height: 1.7;
}

.bookclub-overview,
.bookclub-solution,
.bookclub-feedback,
.bookclub-outcome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
}

.bookclub-overview > div:last-child,
.bookclub-solution > div:first-child,
.bookclub-feedback > div,
.bookclub-outcome > div {
    font-size: 1.08rem;
}

.bookclub-challenge {
    background: var(--book-lime);
}

.bookclub-challenge blockquote {
    max-width: 1100px;
    margin: 42px 0 0;
    color: var(--book-green);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 4.4rem);
    line-height: 1.1;
}

.bookclub-research {
    background: #fff;
}

.bookclub-research-heading,
.bookclub-prototype-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 8vw;
    align-items: end;
}

.bookclub-question-grid,
.bookclub-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 50px;
}

.bookclub-question-grid article,
.bookclub-insight-grid article {
    min-height: 190px;
    padding: 26px;
    border: 1px solid #cbd8c2;
    background: var(--book-cream);
}

.bookclub-question-grid span,
.bookclub-insight-grid strong {
    color: var(--book-green);
    font-size: 1.8rem;
    font-weight: 900;
}

.bookclub-question-grid p {
    margin: 34px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.bookclub-insights {
    background: #eef3e7;
}

.bookclub-insight-grid article:last-child {
    grid-column: span 2;
}

.bookclub-insight-grid h3 {
    margin: 34px 0 10px;
    color: var(--book-ink);
}

.bookclub-pov {
    padding: clamp(70px, 9vw, 130px) 7%;
    background: var(--book-green);
    color: #fff;
    text-align: center;
}

.bookclub-pov .bookclub-label,
.bookclub-pov h2 {
    color: #fff;
}

.bookclub-pov > strong {
    display: block;
    color: var(--book-lime);
    font-family: Georgia, serif;
    font-size: clamp(6rem, 18vw, 15rem);
    font-weight: 400;
    line-height: 0.9;
}

.bookclub-pov p:last-child {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.bookclub-solution ul {
    display: grid;
    gap: 10px;
    align-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bookclub-solution li {
    padding: 16px 20px;
    border-left: 5px solid var(--book-green);
    background: #fff;
    font-weight: 800;
}

.bookclub-role {
    background: #fff;
}

.bookclub-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 38px 0 28px;
}

.bookclub-role-list span {
    padding: 10px 15px;
    border: 1px solid var(--book-green);
    border-radius: 999px;
    color: var(--book-green);
    font-size: 0.82rem;
    font-weight: 800;
}

.bookclub-note {
    max-width: 760px;
}

.bookclub-process ol {
    display: grid;
    gap: 0;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #b8c6ae;
}

.bookclub-process li {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid #b8c6ae;
}

.bookclub-process li > span {
    color: var(--book-green);
    font-size: 2rem;
    font-weight: 900;
}

.bookclub-process h3 {
    margin: 0 0 8px;
    color: var(--book-green);
    font-size: 1.5rem;
}

.bookclub-process p {
    margin: 0;
}

.bookclub-interactive {
    background: var(--book-ink);
    color: #f7f5ed;
}

.bookclub-interactive .bookclub-label {
    color: #a8ca8b;
}

.bookclub-interactive h2 {
    color: #fff;
}

.bookclub-figma-frame {
    position: relative;
    width: 100%;
    height: min(82vh, 900px);
    min-height: 620px;
    margin-top: 48px;
    overflow: hidden;
    border: 2px solid #a8ca8b;
    border-radius: 20px;
    background: #0d120e;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.bookclub-figma-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.bookclub-figma-fallback {
    margin: 18px 0 0;
    color: #cfd8c9;
    text-align: center;
}

.bookclub-figma-fallback a {
    color: #cde9b5;
    font-weight: 800;
}

.bookclub-prototype {
    background: #ececeb;
}

.bookclub-screen-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    margin-top: 50px;
}

.bookclub-screen-gallery figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 12px;
    border: 1px solid #d5dbd1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(23, 32, 24, 0.11);
}

.bookclub-screen-gallery img {
    width: 100%;
    aspect-ratio: 9 / 20;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
}

.bookclub-screen-gallery figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 4px 2px;
    color: var(--book-green);
    font-weight: 800;
}

.bookclub-screen-gallery figcaption span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--book-lime);
    font-size: 0.72rem;
}

.bookclub-feedback {
    background: var(--book-lime);
}

.bookclub-feedback > div:last-child {
    padding: 30px;
    background: #fff;
}

.bookclub-feedback h3 {
    color: var(--book-green);
}

.bookclub-outcome > div {
    padding: 32px;
    border-top: 5px solid var(--book-green);
    background: #fff;
}

.bookclub-outcome h2 {
    font-size: clamp(2rem, 3.5vw, 3.6rem);
}

.bookclub-next-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 34px;
    align-items: center;
    min-height: 230px;
    padding: 0 3% 0 7%;
    border-bottom: 4px solid var(--book-green);
    background: #fff;
    color: var(--book-ink);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.bookclub-next-project:hover,
.bookclub-next-project:focus-visible {
    background: #f1f6eb;
}

.bookclub-next-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.bookclub-next-copy small {
    margin-bottom: 12px;
    color: var(--book-green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.bookclub-next-copy strong {
    color: var(--book-ink);
    font-size: clamp(1.6rem, 3vw, 3.3rem);
    line-height: 1.05;
}

.bookclub-next-project img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 22px 22px 0 0;
}

@media (max-width: 900px) {
    .bookclub-hero,
    .bookclub-overview,
    .bookclub-solution,
    .bookclub-feedback,
    .bookclub-outcome,
    .bookclub-research-heading,
    .bookclub-prototype-heading {
        grid-template-columns: 1fr;
    }

    .bookclub-hero-visual {
        transform: none;
    }

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

    .bookclub-facts div:nth-child(2) {
        border-right: 0;
    }

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

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

    .bookclub-insight-grid article:last-child {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .projects-menu,
    .projects-menu summary {
        width: 100%;
    }

    .projects-menu-panel {
        position: static;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 12px;
        box-shadow: none;
    }

    .learning-journey-heading,
    .journey-timeline {
        grid-template-columns: 1fr;
    }

    .journey-timeline {
        gap: 42px;
    }

    .journey-timeline article {
        border-right: 0;
    }

    .journey-timeline h3 {
        min-height: 0;
    }

    .bookclub-hero {
        grid-template-columns: 1fr;
    }

    .bookclub-facts,
    .bookclub-question-grid,
    .bookclub-insight-grid,
    .bookclub-screen-gallery {
        grid-template-columns: 1fr;
    }

    .bookclub-facts div {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }

    .bookclub-process li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
    }

    .bookclub-figma-frame {
        height: 72vh;
        min-height: 520px;
        border-radius: 12px;
    }

    .bookclub-next-project {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 42px 7% 0;
    }

    .bookclub-next-copy {
        align-items: flex-start;
        text-align: left;
    }

    .bookclub-next-project img {
        height: 180px;
    }
}

.case-card-content .view-case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px 28px;
    background: var(--green);
    border-radius: 999px;
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.case-card:hover .view-case,
.case-card:focus-visible .view-case {
    background: var(--deep-blue);
    transform: translateY(-2px);
}

.case-detail {
    padding: 48px 7%;
    background: var(--white);
}

.case-detail:has(.project-brief) {
    padding-left: 0;
    padding-right: 0;
}

.case-detail:has(.project-brief) .back-link,
.case-detail:has(.project-brief) .case-hero-img,
.case-detail:has(.project-brief) .case-steps {
    margin-left: 7%;
    margin-right: 7%;
}

.back-link {
    color: var(--green);
    display: inline-block;
    font-weight: 700;
    margin-bottom: 28px;
    text-decoration: none;
}

.case-hero-img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 34px;
}

.poster-hero {
    max-height: none;
    object-fit: contain;
    background: #fffdf5;
}

.museum-case {
    background: var(--light);
}

.museum-poster-preview {
    display: block;
    width: 100vw;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0 0 34px calc(50% - 50vw);
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.museum-hero,
.portfolio-section,
.portfolio-split,
.dashboard-gallery {
    margin-bottom: 42px;
}

.museum-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr);
    gap: clamp(48px, 8vw, 140px);
    align-items: end;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(64px, 9vw, 140px) 7%;
    background: #e6eee3;
}

.dashboard-gallery img,
.mini-gallery img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(31, 42, 36, 0.16);
}

.museum-hero .case-meta {
    margin-bottom: 16px;
    color: var(--deep-blue);
    font-size: clamp(0.85rem, 1vw, 1rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.museum-hero h1 {
    max-width: 900px;
    margin: 0;
    color: var(--green);
    font-size: clamp(2.5rem, 4.5vw, 5.25rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.museum-hero h1 span {
    display: block;
    color: var(--deep-blue);
}

.museum-hero-copy > p:last-child {
    max-width: 780px;
    margin: clamp(28px, 4vw, 52px) 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.55;
}

.museum-hero dl {
    display: grid;
    gap: 20px;
    margin: 0 0 8px;
    padding-left: clamp(24px, 3vw, 52px);
    border-left: 1px solid rgba(31, 42, 36, 0.15);
}

.museum-hero dl div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 22px;
}

.museum-hero dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: lowercase;
}

.museum-hero dd {
    margin: 0;
    color: var(--deep-blue);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.portfolio-section,
.portfolio-split article,
.dashboard-gallery article {
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.portfolio-section > p:last-child {
    max-width: 980px;
    color: var(--muted);
    font-size: 1.12rem;
}

.portfolio-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.check-list,
.two-column-list {
    margin: 0;
    padding-left: 20px;
}

.two-column-list {
    columns: 2;
    column-gap: 42px;
}

.check-list li::marker {
    content: "✓ ";
    color: var(--green);
    font-weight: 700;
}

.process-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.process-flow span {
    padding: 10px 14px;
    background: var(--mint);
    border-radius: 999px;
    color: var(--deep-blue);
    font-weight: 700;
}

.process-flow span:not(:last-child)::after {
    content: "↓";
    margin-left: 14px;
    color: var(--green);
}

.process-timeline {
    display: grid;
    margin-top: 24px;
    border-top: 1px solid var(--border);
}

.process-timeline article {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}

.process-timeline article > span {
    color: var(--deep-blue);
    font-size: 2rem;
    line-height: 1;
}

.process-timeline h3 {
    margin: 0 0 6px;
    color: var(--deep-blue);
    font-size: 1.25rem;
}

.process-timeline p {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.dashboard-gallery {
    display: grid;
    gap: 22px;
}

.dashboard-gallery article {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.dashboard-gallery img {
    object-fit: contain;
    background: var(--white);
}

.dashboard-image-stack {
    display: grid;
    gap: 16px;
}

.mini-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.mini-gallery img {
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: var(--white);
}

.skills-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.skills-table div {
    display: grid;
    gap: 10px;
    padding: 18px;
    background: var(--light);
    border-radius: 8px;
}

.skills-table strong {
    color: var(--deep-blue);
    font-size: 1.1rem;
}

.case-detail h1 {
    max-width: 980px;
}

.case-lede {
    max-width: 920px;
    color: var(--muted);
    font-size: 1.3rem;
}

.project-brief {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 86px;
    align-items: start;
    margin-bottom: 36px;
    padding: 84px 7%;
    background: #f4cf5d;
    border-radius: 0;
}

.project-brief h1 {
    margin-top: 0;
    margin-bottom: 42px;
    color: var(--deep-blue);
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    line-height: 1.15;
}

.project-brief h2 {
    color: var(--deep-blue);
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    margin-top: 0;
}

.project-brief p {
    color: var(--muted);
    font-size: clamp(0.98rem, 1.7vw, 1.22rem);
    line-height: 1.55;
}

.project-brief aside p {
    font-size: clamp(0.9rem, 1.35vw, 1.05rem);
    margin-bottom: 42px;
}

.case-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 36px 0;
}

.case-detail-grid article {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}

.case-steps {
    display: grid;
    gap: 18px;
    margin-top: 36px;
}

.case-steps article {
    background: var(--light);
    border: 1px solid var(--border);
    border-left: 6px solid var(--green);
    border-radius: 8px;
    padding: 24px;
}

.case-steps h2 {
    font-size: 1.25rem;
}

.case-steps ul {
    margin: 0;
    padding-left: 20px;
}

.placeholder-note {
    color: var(--green);
    font-weight: 700;
}

.feature-grid article,
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}

.card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 18px;
}

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

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.project-links a,
.project-links span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid var(--green);
    border-radius: 999px;
    color: var(--green);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.project-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 220px;
    min-height: 68px;
    padding: 16px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: var(--white);
    font-size: 1.15rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.project-links a:hover,
.project-links a:focus-visible {
    background: var(--deep-blue);
    color: var(--white);
    transform: translateY(-2px);
}

.project-links a .github-button-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.project-links a span {
    padding: 0;
    border: 0;
    color: inherit;
    font-size: inherit;
}

.project-links span {
    border-color: var(--border);
    color: var(--muted);
}

.card ul {
    margin: 16px 0 0;
    padding-left: 20px;
}

.tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--deep-blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 34px;
    align-items: start;
    background: var(--white);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
}

.contact-form textarea {
    resize: vertical;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 7%;
    background: var(--green);
    color: var(--white);
    text-align: center;
}

footer img {
    width: 30px;
    height: 30px;
}

footer a {
    color: var(--white);
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-decoration: none;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
    text-decoration: underline;
}

.footer-social-links img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.78;
}

.footer-social-links i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 0;
    font-size: 1.5rem;
    font-style: normal;
    line-height: 1;
    opacity: 0.78;
}

.footer-social-links a:hover img,
.footer-social-links a:focus-visible img,
.footer-social-links a:hover i,
.footer-social-links a:focus-visible i {
    opacity: 1;
}

@media (max-width: 620px) {
    footer {
        flex-wrap: nowrap;
    }

    .footer-social-links {
        width: auto;
        justify-content: flex-end;
        margin: 0 0 0 auto;
    }
}

.site-footer-enhanced {
    justify-content: space-between;
    min-height: 72px;
    text-align: left;
}

.footer-primary,
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social-links {
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.footer-social-links a {
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 620px) {
    .site-footer-enhanced {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .footer-social-links {
        margin-left: 0;
    }
}

.movie-case {
    background: var(--light);
}

.movie-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr);
    gap: clamp(48px, 8vw, 140px);
    align-items: end;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 42px;
    padding: clamp(64px, 9vw, 140px) 7%;
    background: #e6eee3;
}

.movie-hero-copy {
    max-width: 980px;
}

.movie-hero .case-meta {
    margin-bottom: 16px;
    color: var(--deep-blue);
    font-size: clamp(0.85rem, 1vw, 1rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.movie-hero h1 {
    max-width: 900px;
    margin: 0;
    color: var(--green);
    font-size: clamp(2.5rem, 4.5vw, 5.25rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.movie-hero h1 span {
    display: block;
    color: var(--deep-blue);
}

.movie-hero .case-lede {
    max-width: 780px;
    margin: clamp(28px, 4vw, 52px) 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.55;
}

.movie-network-showcase {
    display: grid;
    grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr);
    gap: 34px;
    align-items: start;
    margin-bottom: 42px;
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.movie-network-showcase .showcase-heading {
    position: sticky;
    top: 28px;
}

.movie-network-showcase .showcase-heading > p:last-child {
    color: var(--muted);
}

.movie-hero dl {
    display: grid;
    gap: 20px;
    margin: 0 0 8px;
    padding-left: clamp(24px, 3vw, 52px);
    border-left: 1px solid rgba(31, 42, 36, 0.15);
}

.movie-hero dl div {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 22px;
}

.movie-hero dt {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: lowercase;
}

.movie-hero dd {
    margin: 0;
    color: var(--deep-blue);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.movie-hero-visual {
    display: grid;
    gap: 18px;
}

.movie-hero-visual img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(31, 42, 36, 0.18);
}

.network-mini {
    position: relative;
    min-height: 150px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background:
        linear-gradient(115deg, transparent 49%, rgba(18, 63, 86, 0.18) 50%, transparent 51%),
        linear-gradient(30deg, transparent 49%, rgba(18, 63, 86, 0.18) 50%, transparent 51%),
        var(--mint);
}

.network-mini .node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--deep-blue);
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 700;
}

.network-mini .node-a {
    left: 9%;
    top: 18%;
}

.network-mini .node-b {
    left: 41%;
    top: 36%;
    background: var(--green);
}

.network-mini .node-c {
    right: 10%;
    top: 16%;
}

.network-mini .node-d {
    right: 25%;
    bottom: 12%;
}

.metric-grid,
.feature-card-grid,
.oo-layout {
    display: grid;
    gap: 18px;
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 24px 0;
}

.metric-grid article,
.feature-card-grid article,
.oo-layout article {
    padding: 20px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.metric-grid span {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.metric-grid strong {
    display: block;
    margin-top: 8px;
    color: var(--deep-blue);
    font-size: 2rem;
    line-height: 1;
}

.compact-split {
    margin-top: 18px;
}

.oo-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
}

.flow-diagram {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 28px auto 0;
    color: var(--deep-blue);
    font-weight: 700;
    text-align: center;
}

.flow-diagram span {
    width: 100%;
    padding: 12px 16px;
    background: var(--mint);
    border-radius: 8px;
}

.flow-diagram span:not(:last-child)::after {
    content: "↓";
    display: block;
    margin-top: 10px;
    color: var(--green);
}

.feature-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
}

.ranking-list {
    display: grid;
    gap: 12px;
    margin: 22px 0;
}

.ranking-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--mint);
    border-radius: 8px;
    color: var(--deep-blue);
    font-weight: 700;
}

.ranking-list strong {
    font-size: 1.25rem;
}

@media (max-width: 760px) {
    .site-nav,
    .hero,
    .split-section,
    .contact-section,
    .project-hero {
        grid-template-columns: 1fr;
    }

    .site-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-links {
        justify-content: flex-start;
    }

    .feature-grid,
    .card-grid,
    .project-gallery,
    .case-card,
    .case-detail-grid,
    .museum-hero,
    .movie-hero,
    .movie-network-showcase,
    .portfolio-split,
    .dashboard-gallery article,
    .mini-gallery,
    .skills-table,
    .metric-grid,
    .feature-card-grid,
    .oo-layout {
        grid-template-columns: 1fr;
    }

    .movie-network-showcase .showcase-heading {
        position: static;
    }

    .two-column-list {
        columns: 1;
    }

    .museum-hero dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .museum-hero {
        gap: 42px;
        align-items: start;
        padding: 64px 7%;
    }

    .movie-hero {
        gap: 42px;
        align-items: start;
        padding: 64px 7%;
    }

    .museum-hero dl,
    .movie-hero dl {
        width: 100%;
        padding: 28px 0 0;
        border-top: 1px solid rgba(31, 42, 36, 0.15);
        border-left: 0;
    }

    .movie-hero dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .contact-label {
        margin-bottom: 48px;
    }

    .project-hero-details {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 28px;
    }

    .contact-actions a,
    .contact-actions span {
        width: 100%;
        min-width: 0;
    }

    .resume-download {
        width: 100%;
        min-width: 0;
        padding-inline: 24px;
        font-size: 1.1rem;
    }

    .resume-header {
        align-items: stretch;
        flex-direction: column;
    }

    .resume-pdf-download {
        width: 100%;
        min-width: 0;
    }

    .resume-viewer-section {
        height: 72vh;
        min-height: 480px;
        margin-top: 18px;
    }

    .case-card img {
        height: 240px;
    }
}

@media print {
    .museum-poster-preview {
        width: auto;
        max-width: 90%;
        height: auto;
        max-height: 80vh;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }
}

.lightbox-trigger {
    cursor: zoom-in;
}

.lightbox-trigger:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 4px;
}

.image-lightbox {
    width: min(96vw, 1500px);
    max-width: none;
    height: 94vh;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid #34383b;
    border-radius: 6px;
    background: #101214;
    color: #f5f5f2;
}

.image-lightbox::backdrop {
    background: rgba(5, 7, 8, 0.94);
}

.lightbox-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    position: relative;
    height: 100%;
}

.lightbox-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(16px, 3vw, 44px);
    object-fit: contain;
    background: #101214;
}

.lightbox-caption {
    min-height: 72px;
    margin: 0;
    padding: 22px 76px 22px 28px;
    border-top: 1px solid #34383b;
    background: #191b1d;
    color: #cbc8c1;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    line-height: 1.5;
}

.lightbox-close {
    position: absolute;
    right: 24px;
    bottom: 16px;
    z-index: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #aaa69e;
    border-radius: 4px;
    background: transparent;
    color: #aaa69e;
    font: 700 1.5rem/1 sans-serif;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    border-color: #fff;
    color: #fff;
}

@media (max-width: 760px) {
    .image-lightbox {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .lightbox-caption {
        padding-left: 18px;
    }
}

/* Face2Face case study */
.face2face-case {
    --face-blue: #237fe5;
    --face-blue-dark: #1154aa;
    --face-sky: #eaf6fc;
    --face-ice: #f6fbfd;
    --face-ink: #102627;
    --face-green: #36bf69;
    overflow-x: hidden;
    background: var(--face-ice);
    color: var(--face-ink);
}

.face2face-case .site-nav {
    position: relative;
    z-index: 20;
    border-bottom-color: rgba(16, 38, 39, 0.1);
}

.face2face-case main {
    overflow: hidden;
}

.face-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(40px, 7vw, 110px);
    min-height: 760px;
    padding: clamp(70px, 8vw, 120px) 7% 64px;
    background: var(--face-blue);
    color: #fff;
}

.face-hero::before {
    position: absolute;
    top: 0;
    right: -11vw;
    width: 48vw;
    height: 48vw;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    content: "";
}

.face-hero-copy,
.face-hero-visual {
    position: relative;
    z-index: 1;
}

.face-hero-copy > a {
    display: inline-block;
    margin-bottom: 54px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.face-label {
    margin: 0 0 14px;
    color: var(--face-blue);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.face-hero .face-label {
    color: #cce7ff;
}

.face-hero h1 {
    margin: 0;
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(3.8rem, 7vw, 7.2rem);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.8;
}

.face-hero h1 span {
    color: #9ed4ff;
}

.face-hero h2 {
    max-width: 620px;
    margin: 42px 0 20px;
    color: #fff;
    font-size: clamp(1.45rem, 2.3vw, 2.35rem);
    letter-spacing: -0.035em;
}

.face-hero-copy > p:last-of-type {
    max-width: 620px;
    color: #e9f5ff;
    font-size: 0.98rem;
}

.face-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.face-actions a {
    padding: 13px 20px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: var(--face-blue-dark);
    font-weight: 900;
    text-decoration: none;
}

.face-actions a.secondary {
    background: transparent;
    color: #fff;
}

.face-hero-visual {
    align-self: center;
    min-height: 540px;
}

.face-hero-visual img {
    position: absolute;
    width: min(48%, 310px);
    border: 7px solid #1c1c1c;
    border-radius: 36px;
    box-shadow: 0 28px 70px rgba(4, 40, 82, 0.35);
}

.face-hero-visual img:nth-child(1) {
    top: 10%;
    left: 0;
    transform: rotate(-7deg);
}

.face-hero-visual img:nth-child(2) {
    top: 0;
    left: 28%;
    z-index: 2;
}

.face-hero-visual img:nth-child(3) {
    top: 12%;
    right: 0;
    transform: rotate(7deg);
}

.face-facts {
    position: relative;
    z-index: 2;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    margin: 42px 0 -116px;
    background: #b9ddf2;
    box-shadow: 0 24px 50px rgba(4, 40, 82, 0.2);
}

.face-facts div {
    padding: 22px;
    background: #fff;
}

.face-facts dt {
    margin-bottom: 5px;
    color: var(--face-blue);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.face-facts dd {
    margin: 0;
    color: var(--face-ink);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.45;
}

.face-section,
.face-reflection,
.face-next-project {
    width: min(1180px, 86%);
    margin-inline: auto;
}

.face-section {
    padding: clamp(78px, 10vw, 140px) 0;
}

.face-section h2,
.face-reflection blockquote {
    margin: 0;
    color: var(--face-ink);
    font-size: clamp(2.2rem, 5vw, 5rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.face-overview {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 10vw;
    padding-top: 180px;
}

.face-overview > p {
    align-self: end;
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.7;
}

.face-challenge {
    width: 100%;
    padding-inline: 7%;
    background: var(--face-sky);
}

.face-challenge > h2 {
    max-width: 900px;
}

.face-challenge-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 52px;
}

.face-challenge-grid span {
    display: flex;
    min-height: 150px;
    align-items: flex-end;
    padding: 22px;
    border-top: 4px solid var(--face-blue);
    background: #fff;
    font-weight: 800;
    line-height: 1.35;
}

.face-problem-statement {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 30px;
    margin-top: 76px;
    padding-top: 34px;
    border-top: 1px solid #acd5e8;
}

.face-problem-statement blockquote {
    margin: 0;
    color: var(--face-blue-dark);
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
}

.face-research,
.face-role {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(50px, 9vw, 130px);
}

.face-research > div:first-child > p:last-child,
.face-role > div:first-child > p:last-child {
    margin-top: 28px;
    font-size: 1.05rem;
}

.face-research-topics,
.face-contributions {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px;
}

.face-research-topics span,
.face-contributions span,
.face-skill-list span {
    padding: 11px 15px;
    border: 1px solid #acd5e8;
    border-radius: 999px;
    color: var(--face-blue-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.face-insights {
    width: 100%;
    padding-inline: 7%;
    background: var(--face-blue);
}

.face-insights .face-label,
.face-insights h2 {
    color: #fff;
}

.face-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 56px;
    background: rgba(255,255,255,0.35);
}

.face-insight-grid article {
    min-height: 300px;
    padding: clamp(28px, 4vw, 54px);
    background: var(--face-blue-dark);
    color: #eaf6ff;
}

.face-insight-grid strong {
    color: #8ed0ff;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.face-insight-grid h3 {
    max-width: 480px;
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.face-solution {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(50px, 9vw, 130px);
}

.face-solution > div > p:last-child {
    margin-top: 30px;
    font-size: 1.05rem;
}

.face-flow {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: face-flow;
}

.face-flow li {
    counter-increment: face-flow;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #c5dfeb;
    font-size: 1.05rem;
    font-weight: 800;
}

.face-flow li::before {
    content: counter(face-flow, decimal-leading-zero);
    color: var(--face-blue);
    font-size: 0.75rem;
}

.face-prototype {
    width: 100%;
    padding-inline: 7%;
    background: #101f29;
}

.face-prototype-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 50px;
    align-items: end;
}

.face-prototype .face-label,
.face-prototype h2 {
    color: #fff;
}

.face-prototype-heading > p {
    margin: 0;
    color: #b8d5e3;
}

.face-screen-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 42px);
    margin-top: 70px;
}

.face-screen-grid figure {
    margin: 0;
}

.face-screen-grid figure:nth-child(even) {
    margin-top: 70px;
}

.face-screen-grid img {
    display: block;
    width: 100%;
    border: 6px solid #202020;
    border-radius: 30px;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
}

.face-screen-grid figcaption {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

.face-screen-grid figcaption span {
    color: #79c4ff;
}

.face-features > h2 {
    max-width: 800px;
}

.face-feature-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 58px;
}

.face-feature-grid article {
    grid-column: span 2;
    min-height: 260px;
    padding: 28px;
    border: 1px solid #bcddec;
    border-radius: 18px;
    background: #fff;
}

.face-feature-grid article:nth-child(4),
.face-feature-grid article:nth-child(5) {
    grid-column: span 3;
}

.face-feature-grid h3 {
    margin-top: 55px;
    color: var(--face-blue-dark);
    font-size: 1.35rem;
}

.face-role {
    width: 100%;
    padding-inline: 7%;
    background: var(--face-sky);
}

.face-process > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 58px;
    border-top: 1px solid #a9d0e2;
    border-left: 1px solid #a9d0e2;
}

.face-process article {
    min-height: 245px;
    padding: 28px;
    border-right: 1px solid #a9d0e2;
    border-bottom: 1px solid #a9d0e2;
}

.face-process article span {
    color: var(--face-blue);
    font-size: 0.75rem;
    font-weight: 900;
}

.face-process article h3 {
    margin-top: 54px;
    color: var(--face-ink);
    font-size: 1.5rem;
}

.face-reflection {
    padding: clamp(80px, 11vw, 160px) 0;
    border-top: 1px solid #b9dbe9;
}

.face-reflection blockquote {
    max-width: 1050px;
}

.face-reflection > p:not(.face-label) {
    max-width: 680px;
    margin: 38px 0;
    font-size: 1.1rem;
}

.face-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.face-next-project {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 34px;
    align-items: center;
    margin-bottom: 80px;
    padding: 30px;
    border-radius: 20px;
    background: var(--face-blue);
    color: #fff;
    text-decoration: none;
}

.face-next-project span {
    display: grid;
    gap: 12px;
}

.face-next-project small {
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.face-next-project strong {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
}

.face-next-project img {
    display: block;
    width: 100%;
    height: 150px;
    border-radius: 14px;
    object-fit: cover;
}

@media (max-width: 980px) {
    .face-hero {
        grid-template-columns: 1fr;
    }

    .face-hero-visual {
        min-height: 600px;
    }

    .face-hero-visual img {
        width: 35%;
    }

    .face-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .face-challenge-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .face-screen-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .face-feature-grid article,
    .face-feature-grid article:nth-child(4),
    .face-feature-grid article:nth-child(5) {
        grid-column: span 3;
    }
}

@media (max-width: 700px) {
    .face-hero {
        min-height: auto;
        padding-top: 52px;
    }

    .face-hero-copy > a {
        margin-bottom: 38px;
    }

    .face-hero h1 {
        font-size: clamp(3.4rem, 18vw, 5.25rem);
    }

    .face-hero-visual {
        min-height: 410px;
    }

    .face-hero-visual img {
        width: 48%;
        border-width: 4px;
        border-radius: 24px;
    }

    .face-hero-visual img:nth-child(1) {
        left: -6%;
    }

    .face-hero-visual img:nth-child(2) {
        left: 26%;
    }

    .face-hero-visual img:nth-child(3) {
        right: -7%;
    }

    .face-facts {
        grid-template-columns: 1fr;
        margin-bottom: -90px;
    }

    .face-overview {
        padding-top: 145px;
    }

    .face-overview,
    .face-research,
    .face-solution,
    .face-role,
    .face-prototype-heading {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .face-challenge-grid,
    .face-insight-grid,
    .face-process > div {
        grid-template-columns: 1fr;
    }

    .face-problem-statement {
        grid-template-columns: 1fr;
    }

    .face-screen-grid {
        gap: 38px 16px;
    }

    .face-screen-grid figure:nth-child(even) {
        margin-top: 40px;
    }

    .face-screen-grid img {
        border-width: 3px;
        border-radius: 18px;
    }

    .face-feature-grid {
        grid-template-columns: 1fr;
    }

    .face-feature-grid article,
    .face-feature-grid article:nth-child(4),
    .face-feature-grid article:nth-child(5) {
        grid-column: auto;
        min-height: auto;
    }

    .face-next-project {
        grid-template-columns: 1fr;
    }
}

/* Blog */
.blog-page {
    --blog-navy: #123f56;
    --blog-sky: #d9eef7;
    background: var(--blog-sky);
}

.blog-landing-panel {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 78px);
    background-image:
        linear-gradient(110deg, rgba(18, 63, 86, 0.94) 0%, rgba(39, 98, 75, 0.76) 52%, rgba(99, 137, 57, 0.68) 100%),
        url("Photo/Peace lily.jpg");
    background-position: center;
    background-size: cover;
}

.blog-hero {
    padding: clamp(70px, 8vw, 120px) 7% clamp(44px, 5vw, 72px);
    background: transparent;
    color: #fff;
}

.blog-hero > p:first-child {
    margin: 0 0 20px;
    color: #c8e7ef;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.blog-hero h1 {
    max-width: 1100px;
    margin: 0 0 30px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(3.5rem, 8vw, 8.5rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.88;
}

.blog-hero > p:last-child {
    max-width: 740px;
    margin: 0;
    color: #d9eaf0;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.7;
}

.blog-category-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 24px);
    padding: 0 7% clamp(70px, 8vw, 120px);
    background: transparent;
}

.blog-category-nav a {
    display: flex;
    min-height: 72px;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: var(--blog-navy);
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.blog-category-nav a:first-child {
    background: #fff;
    color: var(--blog-navy);
}

.blog-category-nav a:hover,
.blog-category-nav a:focus-visible {
    background: var(--blog-navy);
    color: #fff;
    transform: translateY(-2px);
}

.blog-category-nav span {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    opacity: 0.75;
}

@media (max-width: 820px) {
    .blog-category-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .blog-category-nav {
        grid-template-columns: 1fr;
    }

    .blog-category-nav a {
        min-height: 58px;
    }
}

.blog-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 36px);
    padding: clamp(48px, 7vw, 96px) 5%;
}

.blog-story-card {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 42px);
    border: 1px solid rgba(18, 63, 86, 0.16);
    border-radius: 22px;
    color: #172826;
    box-shadow: 0 18px 42px rgba(18, 63, 86, 0.08);
}

.blog-story-leadership {
    background: #ffe5a3;
}

.blog-story-career {
    background: #e9dcff;
}

.blog-story-community {
    background: #f8e6e1;
}

.blog-story-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 38px;
    border-radius: 14px;
}

.blog-story-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.blog-story-card:hover .blog-story-image img {
    transform: scale(1.025);
}

.blog-story-image span {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--blog-navy);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.blog-story-label {
    margin: 0 0 12px;
    color: var(--blog-navy);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.blog-story-card h2 {
    margin: 0 0 34px;
    color: var(--blog-navy);
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.blog-story-card > p:not(.blog-story-label) {
    margin: 0 0 22px;
    font-size: clamp(0.98rem, 1.3vw, 1.12rem);
    line-height: 1.75;
}

.blog-story-card > a {
    display: inline-block;
    margin-top: 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--blog-navy);
    color: var(--blog-navy);
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1000px) {
    .blog-story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-story-community {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .blog-hero h1 {
        font-size: clamp(3.2rem, 17vw, 5.2rem);
    }

    .blog-story-grid {
        grid-template-columns: 1fr;
        padding-inline: 18px;
    }

    .blog-story-community {
        grid-column: auto;
    }
}

.blog-feature {
    padding: clamp(70px, 9vw, 130px) 7%;
    background: #f0e5ff;
}

.blog-feature-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr);
    gap: 30px;
    align-items: end;
    padding-bottom: 42px;
    border-bottom: 2px solid var(--blog-navy);
}

.blog-feature-heading > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--blog-navy);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.blog-feature-heading h2 {
    margin: 0;
    color: var(--blog-navy);
    font-family: Georgia, serif;
    font-size: clamp(3.2rem, 7.5vw, 8rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.88;
}

.blog-feature-meta {
    display: grid;
    gap: 10px;
    padding-left: 24px;
    border-left: 1px solid rgba(18, 63, 86, 0.35);
    color: var(--blog-navy);
    font-weight: 800;
    line-height: 1.45;
}

.blog-feature-meta time {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-feature-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(42px, 8vw, 120px);
    padding: clamp(55px, 8vw, 100px) 0;
}

.blog-feature-portrait {
    position: sticky;
    top: 30px;
    align-self: start;
    margin: 0;
}

.blog-feature-portrait img {
    display: block;
    width: 100%;
    max-height: 640px;
    border-radius: 18px;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.88);
}

.blog-feature-portrait figcaption {
    margin-top: 14px;
    color: var(--blog-navy);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.blog-feature-story {
    max-width: 760px;
}

.blog-feature-story > p {
    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-feature-story .blog-feature-intro {
    margin-top: 0;
    color: var(--blog-navy);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.35;
}

.blog-feature-story h3 {
    margin: 58px 0 14px;
    color: var(--blog-navy);
    font-size: 1.5rem;
}

.blog-feature-story blockquote {
    margin: 60px 0;
    padding: 36px 0 36px 34px;
    border-left: 5px solid var(--blog-navy);
    color: var(--blog-navy);
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 3.3vw, 3.25rem);
    line-height: 1.16;
}

.blog-feature-story blockquote cite {
    display: block;
    margin-top: 24px;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blog-related-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: end;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 20px;
    background: var(--blog-navy);
    color: #fff;
}

.blog-related-project .blog-story-label {
    color: #bcdfea;
}

.blog-related-project h3 {
    max-width: 780px;
    margin: 0 0 26px;
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 3rem);
    letter-spacing: -0.035em;
}

.blog-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.blog-feature-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blog-feature-actions {
    display: grid;
    gap: 10px;
    min-width: 185px;
}

.blog-feature-actions a {
    padding: 12px 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.blog-feature-actions a:first-child {
    background: #fff;
    color: var(--blog-navy);
}

@media (max-width: 820px) {
    .blog-feature-heading,
    .blog-feature-layout,
    .blog-related-project {
        grid-template-columns: 1fr;
    }

    .blog-feature-meta {
        padding: 20px 0 0;
        border-top: 1px solid rgba(18, 63, 86, 0.35);
        border-left: 0;
    }

    .blog-feature-portrait {
        position: static;
    }

    .blog-feature-portrait img {
        max-height: 520px;
    }

    .blog-feature-actions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .blog-feature-actions {
        grid-template-columns: 1fr;
    }

    .blog-feature-story blockquote {
        padding-left: 22px;
    }
}

/* Individual blog articles */
.blog-article-page {
    --article-color: #123f56;
    --article-soft: #d9eef7;
    background: #fffdf8;
    color: #172826;
}

.leadership-article {
    --article-color: #71510b;
    --article-soft: #ffe5a3;
}

.learning-article {
    --article-color: #573a88;
    --article-soft: #e9dcff;
}

.community-article {
    --article-color: #754a40;
    --article-soft: #f8e6e1;
}

.featured-article {
    --article-color: #123f56;
    --article-soft: #dce9ff;
}

.blog-article-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
    min-height: 700px;
    padding: clamp(60px, 8vw, 110px) 7%;
    background: var(--article-soft);
}

.blog-article-hero > div > a {
    display: inline-block;
    margin-bottom: 64px;
    color: var(--article-color);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.blog-article-hero > div > p:first-of-type {
    margin: 0 0 14px;
    color: var(--article-color);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.blog-article-hero h1 {
    margin: 0 0 30px;
    color: var(--article-color);
    font-family: Georgia, serif;
    font-size: clamp(3.5rem, 7vw, 7.8rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.88;
}

.blog-article-hero > div > p:last-child {
    max-width: 650px;
    margin: 0;
    color: #273b38;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.65;
}

.blog-article-hero > img {
    display: block;
    width: 100%;
    height: min(68vh, 640px);
    border-radius: 22px;
    box-shadow: 0 24px 55px rgba(35, 46, 42, 0.14);
    object-fit: cover;
}

.featured-article .blog-article-hero > img {
    width: min(100%, 400px);
    height: auto;
    aspect-ratio: 2 / 3;
    justify-self: center;
    object-position: center top;
}

.featured-article .blog-article-hero {
    min-height: 560px;
    padding-block: clamp(42px, 5vw, 72px);
}

.featured-article .blog-article-hero > div > a {
    margin-bottom: 28px;
}

.blog-article-body {
    width: min(900px, 86%);
    margin: 0 auto;
    padding: clamp(75px, 10vw, 140px) 0;
}

.blog-article-lede {
    margin: 0 0 clamp(90px, 12vw, 150px);
    color: var(--article-color);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 4.4rem);
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.blog-article-body section {
    display: grid;
    grid-template-columns: minmax(190px, 0.35fr) minmax(0, 0.65fr);
    gap: 18px 55px;
    margin: 0 0 90px;
    padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--article-color), transparent 60%);
}

.blog-article-body section .blog-story-label {
    grid-row: span 2;
    color: var(--article-color);
}

.blog-article-body section h2 {
    margin: 0;
    color: var(--article-color);
    font-size: clamp(1.8rem, 3vw, 3rem);
    letter-spacing: -0.04em;
}

.blog-article-body section p:not(.blog-story-label) {
    grid-column: 2;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
}

.blog-article-body .learning-certificates {
    display: grid;
}

.learning-certificates-content {
    grid-column: 2;
}

.blog-article-body .learning-certificates-content > h2 {
    margin: 0 0 38px;
}

.learning-certificate-list {
    display: grid;
    gap: 28px;
    margin: 0;
    padding-left: 24px;
}

.learning-certificate-list li {
    padding-left: 10px;
    color: var(--article-color);
}

.learning-certificate-list li::marker {
    font-size: 1.3rem;
}

.learning-certificate-list h3 {
    margin: 0 0 8px;
    color: var(--article-color);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
}

.blog-article-body .learning-certificate-list p {
    margin: 0;
    color: #394a46;
    font-size: 1.05rem;
    line-height: 1.7;
}

@media (max-width: 820px) {
    .learning-certificates-content {
        grid-column: 1;
    }
}

.blog-article-body blockquote {
    margin: 110px 0;
    padding: clamp(30px, 6vw, 64px);
    border-radius: 20px;
    background: var(--article-soft);
    color: var(--article-color);
    font-family: Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 3.7rem);
    line-height: 1.16;
}

.blog-article-body blockquote cite {
    display: block;
    margin-top: 25px;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.featured-article-meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid #9bb4c5;
    color: var(--article-color);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-article-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 70px;
}

.featured-article-links a {
    padding: 13px 20px;
    border: 2px solid var(--article-color);
    border-radius: 999px;
    background: var(--article-color);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.featured-article-links a:last-child {
    background: transparent;
    color: var(--article-color);
}

.blog-article-body .featured-quote-showcase {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(460px, 1.05fr);
    gap: 0;
    align-items: center;
    width: 100vw;
    min-height: min(780px, 82vh);
    margin: 110px 0;
    margin-left: 50%;
    padding: clamp(45px, 6vw, 90px) max(5vw, calc((100vw - 1500px) / 2));
    border: 0;
    border-radius: 0;
    background: #cfe3f5;
    transform: translateX(-50%);
}

.featured-quote-showcase > img {
    display: block;
    width: min(100%, 540px);
    max-height: 650px;
    aspect-ratio: 4 / 5;
    justify-self: center;
    border-radius: clamp(32px, 6vw, 120px);
    object-fit: cover;
    object-position: center 22%;
}

.featured-quote-copy {
    position: relative;
    z-index: 1;
    margin: 0 0 0 clamp(-130px, -7vw, -70px);
}

.blog-article-body .featured-quote-showcase blockquote {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #3c3c3c;
    font-family: Arial, sans-serif;
    font-size: clamp(1.25rem, 2.25vw, 2.45rem);
    font-style: italic;
    font-weight: 900;
    line-height: 1.28;
}

.featured-quote-showcase blockquote > span {
    display: table;
    margin-bottom: 8px;
    padding: 3px 10px 5px;
    background: #fff;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.blog-article-body .featured-quote-showcase .featured-quote-attribution {
    margin: 28px 0 0 clamp(120px, 14vw, 230px);
    color: var(--article-color);
    font-family: Arial, sans-serif;
    font-size: clamp(0.78rem, 1.2vw, 1.05rem);
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .blog-article-body .featured-quote-showcase {
        grid-template-columns: 1fr;
        width: 100vw;
        min-height: 0;
        gap: 34px;
    }

    .featured-quote-showcase > img {
        width: min(100%, 520px);
        justify-self: center;
    }

    .featured-quote-copy {
        margin-left: 0;
    }

    .blog-article-body .featured-quote-showcase .featured-quote-attribution {
        margin-left: 0;
    }
}

.blog-article-next {
    padding: 0 7% 90px;
}

.blog-article-next a {
    display: grid;
    gap: 10px;
    padding: clamp(28px, 5vw, 56px);
    border-radius: 20px;
    background: var(--article-color);
    color: #fff;
    text-decoration: none;
}

.blog-article-next small {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.blog-article-next strong {
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 4rem);
}

@media (max-width: 820px) {
    .blog-article-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .blog-article-hero > div > a {
        margin-bottom: 42px;
    }

    .blog-article-hero > img {
        height: min(70vw, 520px);
    }

    .blog-article-body section {
        grid-template-columns: 1fr;
    }

    .blog-article-body section .blog-story-label,
    .blog-article-body section p:not(.blog-story-label) {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 520px) {
    .featured-article-meta {
        flex-direction: column;
    }
}

/* About: Beyond Technology */
.beyond-section {
    padding: clamp(75px, 9vw, 130px) 7%;
    background: #f4edff;
}

.beyond-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: 22px clamp(45px, 8vw, 120px);
    align-items: end;
    margin-bottom: clamp(50px, 7vw, 90px);
}

.beyond-heading > p:first-child {
    grid-column: 1 / -1;
    margin: 0;
    color: #67479a;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.beyond-heading h2 {
    margin: 0;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(3.7rem, 8vw, 8.5rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.85;
}

.beyond-heading > p:last-child {
    margin: 0;
    color: #3f4540;
    font-size: clamp(1rem, 1.45vw, 1.2rem);
    line-height: 1.7;
}

.beyond-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(210px, 24vw, 390px);
    gap: 14px;
}

.beyond-photo-grid figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 18px;
    background: #d9cfeb;
}

.beyond-photo-grid .beyond-photo-large {
    grid-column: span 2;
    grid-row: span 2;
}

.beyond-photo-grid .beyond-photo-wide {
    grid-column: span 2;
}

.beyond-photo-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.beyond-photo-grid figure:hover img {
    transform: scale(1.025);
}

.beyond-photo-grid figcaption {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--deep-blue);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.beyond-interests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(60px, 8vw, 110px);
    border-top: 1px solid #c6b8dc;
    border-left: 1px solid #c6b8dc;
}

.beyond-interests article {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    min-height: 220px;
    padding: clamp(24px, 4vw, 45px);
    border-right: 1px solid #c6b8dc;
    border-bottom: 1px solid #c6b8dc;
}

.beyond-interests article > span {
    font-size: 2rem;
    line-height: 1;
}

.beyond-interests h3 {
    margin: 0 0 12px;
    color: var(--deep-blue);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.beyond-interests p {
    margin: 0;
    line-height: 1.75;
}

.beyond-quote {
    max-width: 980px;
    margin: clamp(80px, 11vw, 150px) 0 0;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(1.9rem, 3.6vw, 4rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.beyond-quote cite {
    display: block;
    margin-top: 28px;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .beyond-heading {
        grid-template-columns: 1fr;
    }

    .beyond-heading > p:first-child {
        grid-column: 1;
    }

    .beyond-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 300px;
    }

    .beyond-photo-grid .beyond-photo-large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .beyond-interests {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .beyond-photo-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 330px;
    }

    .beyond-photo-grid .beyond-photo-large,
    .beyond-photo-grid .beyond-photo-wide {
        grid-column: auto;
    }

    .beyond-interests article {
        grid-template-columns: 40px 1fr;
    }
}

.beyond-story-list {
    display: grid;
    gap: 24px;
}

.beyond-story-list article {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    min-height: 460px;
    overflow: hidden;
    border: 1px solid #c9bbdc;
    border-radius: 22px;
    background: rgba(255,255,255,0.56);
}

.beyond-story-list article:nth-child(even) img {
    grid-column: 2;
}

.beyond-story-list article:nth-child(even) > div {
    grid-column: 1;
    grid-row: 1;
}

.beyond-story-list img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
}

.beyond-story-list article > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 70px);
}

.beyond-story-list article > div > span {
    margin-bottom: 28px;
    font-size: 2.2rem;
}

.beyond-story-list .beyond-number {
    margin: 0 0 13px;
    color: #67479a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.beyond-story-list h3 {
    margin: 0 0 22px;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 4.2rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
}

.beyond-story-list article > div > p:last-child {
    max-width: 570px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
}

@media (max-width: 760px) {
    .beyond-story-list article {
        grid-template-columns: 1fr;
    }

    .beyond-story-list article:nth-child(even) img,
    .beyond-story-list article:nth-child(even) > div {
        grid-column: 1;
        grid-row: auto;
    }

    .beyond-story-list img {
        height: min(85vw, 480px);
        min-height: 0;
    }
}

/* Homepage portrait hero */
.home-page .hero {
    position: relative;
    grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
    min-height: min(820px, calc(100vh - 73px));
    overflow: hidden;
    gap: clamp(35px, 5vw, 80px);
    padding-top: 24px;
    padding-bottom: clamp(65px, 8vw, 120px);
    background: var(--white);
}

.home-page .hero-text {
    position: relative;
    z-index: 2;
    align-self: start;
    max-width: 820px;
}

.home-page .hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(2.9rem, 4.3vw, 4.8rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.94;
}

.home-page .hero .eyebrow {
    margin-bottom: 56px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.home-page .hero h1 span {
    display: block;
    white-space: nowrap;
}

.home-page .hero > img {
    align-self: end;
    justify-self: end;
    width: min(100%, 560px);
    height: min(650px, calc(100vh - 130px));
    max-height: none;
    border-radius: 0;
    object-fit: contain;
    object-position: right bottom;
    filter: saturate(0.94);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.92) 12%, #000 25%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.92) 12%, #000 25%);
}

@media (max-width: 900px) {
    .home-page .hero {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
    }

    .home-page .hero h1 {
        font-size: clamp(3rem, 6vw, 5rem);
    }
}

@media (max-width: 700px) {
    .home-page .hero {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .home-page .hero > img {
        width: min(100%, 520px);
        height: 560px;
        justify-self: end;
        margin-top: 36px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
    }

    .home-page .hero h1 span {
        white-space: normal;
    }
}

/* About portrait hero */
.about-page > main.split-section {
    position: relative;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    min-height: min(820px, calc(100vh - 73px));
    overflow: hidden;
    align-items: start;
    gap: clamp(36px, 6vw, 90px);
    padding-top: 24px;
    padding-bottom: clamp(65px, 8vw, 120px);
}

.about-page > main.split-section > div {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.about-page > main.split-section .about-photo {
    align-self: start;
    width: 100%;
    height: min(760px, calc(100vh - 110px));
    max-height: none;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(0.94);
    margin-top: 78px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.76) 13%, #000 27%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.76) 13%, #000 27%);
}

@media (max-width: 900px) {
    .about-page > main.split-section {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    }
}

@media (max-width: 700px) {
    .about-page > main.split-section {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .about-page > main.split-section .about-photo {
        width: min(100%, 520px);
        height: 560px;
        justify-self: end;
        margin-top: 36px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
    }
}

/* Homepage: What I Do */
.what-i-do {
    padding: clamp(80px, 10vw, 150px) 5%;
    background: #f7f4e9;
}

.what-i-do-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr);
    gap: 24px clamp(50px, 8vw, 130px);
    align-items: end;
    margin-bottom: clamp(60px, 8vw, 110px);
}

.what-i-do-heading > p:first-child {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.what-i-do-heading h2 {
    margin: 0;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.what-i-do-heading > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.7;
}

.what-i-do-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.what-i-do-grid > article {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
    grid-template-areas:
        "title intro"
        "title skills"
        "title link";
    gap: 0 clamp(35px, 5vw, 80px);
    min-width: 0;
    padding: clamp(25px, 3vw, 42px);
    border: 1px solid #bdc9ba;
    border-radius: 20px;
    background: #f7fcf5;
    box-shadow: 0 18px 38px rgba(18, 63, 86, 0.07);
}

.what-card-title {
    grid-area: title;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-content: start;
    align-items: center;
}

.what-card-title > p {
    margin: 0;
}

.what-card-title h3 {
    grid-column: 1 / -1;
    margin-top: 28px;
}

.what-i-do-grid > article > p {
    grid-area: intro;
}

.what-card-skills {
    grid-area: skills;
}

.what-card-work {
    grid-area: work;
    margin: 0;
    padding-left: clamp(28px, 4vw, 58px);
    border-left: 1px solid #cbd4c9;
}

.what-card-link {
    grid-area: link;
}

.what-i-do-grid > article:nth-child(2) {
    background: #e5f5e0;
}

.what-i-do-grid > article:nth-child(3) {
    border-color: #a8cfa0;
    background: #c7e9c0;
    color: var(--ink);
}

.what-i-do-grid > article:nth-child(3) .what-card-title > span,
.what-i-do-grid > article:nth-child(3) .what-card-title > p,
.what-i-do-grid > article:nth-child(3) .what-card-skills > p,
.what-i-do-grid > article:nth-child(3) .what-card-work > p,
.what-i-do-grid > article:nth-child(3) .what-card-link {
    color: var(--green);
}

.what-i-do-grid > article:nth-child(3) .what-card-title h3,
.what-i-do-grid > article:nth-child(3) .what-card-work a {
    color: var(--deep-blue);
}

.what-i-do-grid > article:nth-child(3) > p,
.what-i-do-grid > article:nth-child(3) .what-card-work span {
    color: #46564c;
}

.what-i-do-grid > article:nth-child(3) .what-card-skills span {
    border-color: #86ad7d;
    color: var(--green);
}

.what-i-do-grid > article:nth-child(3) .what-card-work,
.what-i-do-grid > article:nth-child(3) .what-card-work a,
.what-i-do-grid > article:nth-child(3) .what-card-skills {
    border-color: #a8cfa0;
}

.what-i-do-grid > article:nth-child(3) .what-card-link {
    border-bottom-color: var(--green);
}

.what-card-title > span {
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.what-card-skills > p,
.what-card-work > p {
    margin: 30px 0 10px;
    color: var(--green);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.what-card-title > p {
    margin: 0;
    color: var(--green);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.what-card-title h3 {
    min-height: 0;
    margin: 28px 0 22px;
    color: var(--deep-blue);
    font-size: clamp(1.7rem, 2.6vw, 2.7rem);
    letter-spacing: -0.045em;
    line-height: 1.04;
}

.what-i-do-grid > article > p {
    min-height: 0;
    margin: 0;
    color: #3f4d45;
    line-height: 1.7;
}

.what-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 28px;
}

.what-card-skills > p {
    width: 100%;
}

.what-card-skills span {
    padding: 6px 9px;
    border: 1px solid #9db29a;
    border-radius: 999px;
    color: var(--green);
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.what-card-work {
    display: grid;
    gap: 0;
    margin-bottom: 34px;
}

.what-card-work a {
    display: grid;
    gap: 6px;
    padding: 17px 0;
    border-bottom: 1px solid #d3dad1;
    color: var(--deep-blue);
    text-decoration: none;
}

.what-card-work a:hover strong,
.what-card-work a:focus-visible strong {
    text-decoration: underline;
}

.what-card-work strong {
    font-size: 0.95rem;
    line-height: 1.3;
}

.what-card-work span {
    color: #5e6d64;
    font-size: 0.78rem;
    line-height: 1.55;
}

.what-card-link {
    align-self: flex-start;
    margin-top: 18px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--green);
    color: var(--green);
    font-size: 0.85rem;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 820px) {
    .what-i-do-grid > article {
        display: flex;
        flex-direction: column;
    }

    .what-card-work {
        margin-bottom: 34px;
        padding-left: 0;
        border-left: 0;
    }

    .what-card-skills {
        border-bottom: 1px solid #cbd4c9;
    }
}

@media (max-width: 720px) {
    .what-i-do-heading {
        grid-template-columns: 1fr;
    }

    .what-i-do-heading > p:first-child {
        grid-column: 1;
    }
}

/* About introduction */
.about-intro {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(50px, 9vw, 150px);
    align-items: start;
    padding: clamp(65px, 8vw, 120px) 9%;
    background: #fff;
}

.about-intro-photo {
    position: relative;
    width: min(100%, 500px);
    margin: 0;
    padding: 14px;
    border: 1px solid #c8d3c5;
    border-radius: 22px;
    background: #eef3ec;
    box-shadow: 18px 18px 0 #dfeadd;
    margin-top: 72px;
}

.about-intro-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    object-fit: cover;
    object-position: center 20%;
}

.about-intro-copy {
    max-width: 760px;
}

.about-intro-copy .eyebrow {
    margin: 0 0 18px;
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.17em;
}

.about-intro-copy h1 {
    margin: 0 0 18px;
    color: var(--deep-blue);
    font-family: Georgia, serif;
    font-size: clamp(3.2rem, 5.7vw, 6.2rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.9;
    white-space: nowrap;
}

.about-intro-title {
    margin: 0 0 38px;
    color: var(--green);
    font-size: clamp(0.85rem, 1.35vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-intro-copy > p:not(.eyebrow):not(.about-intro-title) {
    max-width: 700px;
    margin-bottom: 20px;
    color: #536159;
    font-size: 1.02rem;
    line-height: 1.75;
}

.about-intro-copy strong {
    color: var(--deep-blue);
}

.about-resume-link {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 20px;
    border: 2px solid var(--green);
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.about-resume-link:hover,
.about-resume-link:focus-visible {
    background: transparent;
    color: var(--green);
}

@media (max-width: 820px) {
    .about-intro {
        grid-template-columns: 1fr;
        padding-inline: 7%;
    }

    .about-intro-photo {
        width: min(82%, 480px);
        justify-self: center;
        margin-top: 0;
    }

    .about-intro-copy h1 {
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .about-intro-photo {
        width: calc(100% - 18px);
    }
}

/* GenAI LinkedIn Networking Assistant */
.genai-case-page {
    --genai-navy: #123f56;
    --genai-green: #315b27;
    --genai-mint: #e5f5e0;
    --genai-light: #f7fcf5;
    --genai-line: #bfd1c0;
    background: #fffdf8;
    color: #1f302c;
}

.genai-case-page main {
    overflow: hidden;
}

.genai-label {
    margin: 0 0 18px;
    color: var(--genai-green);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.genai-hero {
    padding: clamp(42px, 6vw, 82px) 6% clamp(70px, 8vw, 120px);
    background: var(--genai-light);
}

.genai-back {
    display: inline-block;
    margin-bottom: clamp(45px, 6vw, 85px);
    color: var(--genai-green);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.genai-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    gap: clamp(45px, 7vw, 110px);
    align-items: center;
}

.genai-hero-copy h1 {
    max-width: 950px;
    margin: 0 0 30px;
    color: var(--genai-navy);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 6.8vw, 7.5rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.88;
}

.genai-hero-copy > p:not(.genai-label) {
    max-width: 680px;
    margin: 0;
    color: #41544f;
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.6;
}

.genai-project-meta {
    display: grid;
    gap: 13px;
    margin-top: 42px;
    padding-top: 24px;
    border-top: 1px solid var(--genai-line);
    color: #53645e;
    font-size: 0.84rem;
    line-height: 1.55;
}

.genai-project-meta span {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 14px;
}

.genai-project-meta strong {
    color: var(--genai-navy);
}

.genai-hero-image {
    margin: 0;
}

.genai-hero-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 26px;
    box-shadow: 0 26px 60px rgba(18, 63, 86, 0.16);
    object-fit: cover;
}

.genai-hero-image figcaption {
    margin-top: 16px;
    color: var(--genai-green);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-align: right;
    text-transform: uppercase;
}

.genai-result-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr 1.3fr;
    gap: clamp(14px, 2.5vw, 40px);
    align-items: center;
    margin-top: clamp(65px, 8vw, 115px);
    padding: clamp(28px, 4vw, 48px);
    border-radius: 24px;
    background: var(--genai-navy);
    color: #fff;
}

.genai-result-strip div {
    display: grid;
    gap: 21px;
    text-align: center;
}

.genai-result-strip strong {
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 5vw, 5.5rem);
    font-weight: 400;
    line-height: 0.9;
}

.genai-result-strip span {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.genai-result-strip b {
    color: #b9d7af;
    font-size: 1.8rem;
}

.genai-result-strip .genai-rate {
    padding-left: clamp(20px, 3vw, 45px);
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.genai-section {
    display: grid;
    grid-template-columns: minmax(250px, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(45px, 8vw, 130px);
    padding: clamp(85px, 10vw, 150px) 7%;
    border-top: 1px solid var(--genai-line);
}

.genai-section h2,
.genai-workflow h2,
.genai-testing h2,
.genai-question h2 {
    margin: 0;
    color: var(--genai-navy);
    font-size: clamp(2.4rem, 4.7vw, 5.2rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.genai-section p {
    color: #42534e;
    font-size: 1.04rem;
    line-height: 1.8;
}

.genai-overview > div:last-child > p:first-child {
    margin-top: 0;
}

.genai-flow-line {
    margin-top: 38px;
    padding: 24px;
    border-left: 5px solid var(--genai-green);
    background: var(--genai-mint);
    color: var(--genai-green) !important;
    font-weight: 900;
}

.genai-question {
    padding: clamp(85px, 11vw, 160px) 10%;
    background: var(--genai-green);
}

.genai-question .genai-label,
.genai-question h2 {
    color: #fff;
}

.genai-question h2 {
    max-width: 1400px;
    font-family: Georgia, serif;
    font-weight: 400;
}

.genai-problem > div {
    padding: clamp(28px, 4vw, 48px);
    border-radius: 20px;
    background: var(--genai-light);
}

.genai-problem h2 {
    font-size: clamp(2rem, 3.3vw, 3.7rem);
}

.genai-problem ul,
.genai-future ul {
    margin: 0;
    padding-left: 22px;
    color: #42534e;
    line-height: 2;
}

.genai-discoveries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
}

.genai-discoveries article {
    padding: 28px;
    border-radius: 18px;
    background: var(--genai-mint);
}

.genai-discoveries span,
.genai-principles article > span {
    color: var(--genai-green);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.genai-discoveries h3,
.genai-how-list h3,
.genai-principles h3,
.genai-lessons h3 {
    margin: 20px 0 8px;
    color: var(--genai-navy);
    font-size: 1.35rem;
}

.genai-discoveries p,
.genai-how-list p,
.genai-principles p,
.genai-lessons p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.genai-workflow {
    padding: clamp(85px, 10vw, 150px) 7%;
    background: var(--genai-navy);
    color: #fff;
}

.genai-workflow .genai-label,
.genai-workflow h2 {
    color: #fff;
}

.genai-workflow header {
    max-width: 1050px;
    margin-bottom: 65px;
}

.genai-workflow ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.genai-workflow li {
    min-height: 360px;
    padding: clamp(26px, 2.5vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    background: transparent;
}

.genai-workflow-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin: 0;
    white-space: nowrap;
}

.genai-workflow-title > span {
    color: var(--genai-green);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.genai-workflow strong {
    display: inline;
    font-size: 1.25rem;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
}

.genai-workflow li p {
    margin: 24px 0 0;
    color: #d7e7ea;
    font-size: 1rem;
    line-height: 1.55;
}

.genai-how-list {
    display: grid;
}

.genai-how-list article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid var(--genai-line);
}

.genai-how-list article > span {
    color: var(--genai-green);
    font-weight: 900;
}

.genai-how-list h3 {
    margin-top: 0;
}

.genai-testing {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: clamp(55px, 8vw, 130px);
    padding: clamp(85px, 10vw, 150px) 7%;
    background: var(--genai-mint);
}

.genai-testing p {
    color: #42534e;
    line-height: 1.8;
}

.genai-caution {
    margin-top: 28px;
    padding-left: 20px;
    border-left: 4px solid var(--genai-green);
    font-size: 0.9rem;
}

.genai-metrics-table {
    align-self: center;
    padding: 18px clamp(24px, 4vw, 45px);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 45px rgba(18, 63, 86, 0.1);
}

.genai-metrics-table > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 19px 0;
    border-bottom: 1px solid var(--genai-line);
}

.genai-metrics-table > div:last-child {
    border-bottom: 0;
}

.genai-metrics-table span {
    color: #51625c;
}

.genai-metrics-table strong {
    color: var(--genai-navy);
    font-size: 1.15rem;
    text-align: right;
}

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

.genai-principles header {
    max-width: 900px;
}

.genai-principles > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.genai-principles article {
    padding: 28px;
    border: 1px solid var(--genai-line);
    border-radius: 18px;
    background: var(--genai-light);
}

.genai-lessons > div:last-child {
    display: grid;
    gap: 30px;
}

.genai-lessons article {
    padding-bottom: 25px;
    border-bottom: 1px solid var(--genai-line);
}

.genai-lessons h3 {
    margin-top: 0;
}

.genai-future li {
    margin-bottom: 20px;
    padding-left: 10px;
}

.genai-future li strong {
    display: block;
    color: var(--genai-navy);
    font-size: 1.1rem;
}

.genai-reflection {
    padding: clamp(85px, 11vw, 160px) 10%;
    background-image:
        linear-gradient(rgba(18, 63, 86, 0.64), rgba(18, 63, 86, 0.7)),
        url("Photo/GenAI.jpg");
    background-position: center;
    background-size: cover;
    color: #fff;
}

.genai-reflection .genai-label {
    color: #b9d7af;
}

.genai-reflection blockquote {
    max-width: 1400px;
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 4.5rem);
    line-height: 1.05;
}

.genai-reflection > p:last-child {
    max-width: 780px;
    margin: 45px 0 0 auto;
    color: #d8e6e8;
    font-size: 1.05rem;
    line-height: 1.75;
}

.genai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 50px 7% 90px;
    background: var(--genai-navy);
}

.genai-tags span {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .genai-hero-grid,
    .genai-section,
    .genai-testing {
        grid-template-columns: 1fr;
    }

    .genai-hero-image {
        width: min(100%, 720px);
    }

    .genai-result-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .genai-result-strip b {
        display: none;
    }

    .genai-result-strip .genai-rate {
        grid-column: 1 / -1;
        padding: 25px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
        border-left: 0;
    }

    .genai-workflow ol,
    .genai-principles > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .genai-project-meta span,
    .genai-discoveries,
    .genai-workflow ol,
    .genai-principles > div {
        grid-template-columns: 1fr;
    }

    .genai-result-strip {
        grid-template-columns: 1fr;
    }

    .genai-result-strip .genai-rate {
        grid-column: 1;
    }

    .genai-workflow li {
        min-height: 0;
    }

    .genai-workflow li div {
        margin-top: 0;
    }

    .genai-metrics-table > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .genai-metrics-table strong {
        text-align: left;
    }
}

/* Shared link and control interaction states */
main p a:visited,
main li a:visited {
    color: #684d80;
    text-decoration-color: #684d80;
}

a:visited {
    text-decoration-color: #684d80;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #e0a82e;
    outline-offset: 4px;
}

a:active,
button:active,
summary:active {
    filter: brightness(0.9);
    transform: translateY(2px);
}

.projects-menu[open] > summary {
    color: var(--deep-blue);
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    a:active,
    button:active,
    summary:active {
        transform: none;
    }
}