* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

:root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #222222;
    --color-muted: #666666;

    --color-dark: #102a2d;
    --color-dark-soft: #17393d;

    --color-accent: #2f6f73;
    --color-accent-soft: #eef6f6;
    --color-accent-border: #bfd8da;

    --color-gold: #c9a86a;

    --portfolio-accent: var(--color-accent);
    --portfolio-accent-soft: var(--color-accent-soft);
    --portfolio-accent-border: var(--color-accent-border);

    --site-max: 1440px;
    --site-gutter: clamp(24px, 4vw, 72px);

    /* Ariel docked desktop panel width */
    --assistant-dock-width: clamp(400px, 28vw, 470px);
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

.hero {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 760px);
    align-items: center;
    gap: clamp(44px, 6vw, 92px);
    min-height: 46vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 52px var(--site-gutter);
    background:
        linear-gradient(
            90deg,
            rgba(16, 42, 45, 0.64) 0%,
            rgba(16, 42, 45, 0.40) 46%,
            rgba(16, 42, 45, 0.42) 100%
        ),
        url("images/hero/hero-background3.jpg");
    background-size: cover;
    background-position: center;
    color: white;
}


.hero-image {
    justify-self: start;
    transform: translateX(50px);
}

.hero-text {
    max-width: 780px;
}

.hero-image img {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 50%;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    font-size: 0.9rem;
}

.hero-text h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.hero-text h2 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 20px;
}

.intro {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 12px 18px;
    border: 1px solid white;
    background: white;
    color: var(--color-dark);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.hero-links a:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark);
}

.hero-links .hero-link-assistant {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(16, 42, 45, 0.34);
    color: white;
    backdrop-filter: blur(7px);
}

.hero-links .hero-link-assistant:hover,
.hero-links .hero-link-assistant:focus-visible {
    border-color: var(--color-gold);
    background: rgba(201, 168, 106, 0.18);
    color: var(--color-gold);
}

.section {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 48px var(--site-gutter);
}

.section-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    font-size: 0.9rem;
}

.section-title {
    max-width: 800px;
    margin-bottom: 40px;
}


/* Research image cards */

.research-section {
    padding-top: 56px;
}

.research-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 34px;
}

.research-feature-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 18px;
    background: white;
    box-shadow: 0 18px 38px rgba(16, 42, 45, 0.08);
}

.research-card-image {
    width: 100%;
    height: 310px;
    display: block;
    object-fit: cover;
}

.research-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}

.research-card-body h3 {
    min-height: 4.05em;
    margin: 0 0 16px;
    font-size: 1.18rem;
    line-height: 1.35;
}

.research-card-body p {
    margin-top: 0;
}

.research-card-body > p:not(.status):not(.research-tags) {
    min-height: 138px;
    color: var(--color-muted);
    line-height: 1.55;
}

.research-tags {
    min-height: 42px;
    margin-top: 18px;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.research-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 18px;
}

.research-card-button {
    align-self: flex-start;
    margin-top: 0;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--portfolio-accent);
    color: white;
    text-decoration: none;
    font-weight: 550;
    font-size: 0.82rem;
}

.research-tags + .research-card-button {
    margin-top: auto;
}

.research-card-button:hover {
    background: var(--color-dark);
}


.research-card-button-secondary {
    background: white;
    color: var(--portfolio-accent);
    border: 1px solid var(--portfolio-accent-border);
}

.research-card-button-secondary:hover {
    background: var(--portfolio-accent-soft);
    color: var(--portfolio-accent);
}

.research-card-button-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 1000px) {
    .research-showcase-grid {
        grid-template-columns: 1fr;
    }

    .research-card-image {
        height: 240px;
    }
}

.status {
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
}

.submitted {
    color: #1f7a1f;
}

.ongoing {
    color: #b26a00;
}

.domain {
    font-size: 0.9rem;
    color: #666;
}

/* Featured Projects carousel */

.project-carousel {
    --project-card-width: 500px;
    --project-card-height: 292px;
    --project-card-gap: 24px;

    position: relative;
    margin-top: 28px;
}

.section-projects .project-grid {
    display: flex;
    align-items: center;
    gap: var(--project-card-gap);
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 36px 30px;
    margin: 0 -36px;
}

.section-projects .project-grid > .project-card {
    flex: 0 0 var(--project-card-width);
    width: var(--project-card-width);
    scroll-snap-align: start;
}

.section-projects .project-card {
    width: 100%;
    height: var(--project-card-height);
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
    transform-origin: left center;
}

.section-projects .project-type {
    margin: 0 0 14px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.section-projects .project-card h3 {
    margin: 0 0 12px;
    font-size: 1.12rem;
    line-height: 1.28;
}

.section-projects .project-card p {
    font-size: 0.94rem;
    line-height: 1.45;
}

.section-projects .project-card > p:not(.project-type):not(.domain) {
    min-height: 4.5em;
    margin: 0 0 12px;
    display: -webkit-box;
    overflow: hidden;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex-shrink: 0;
}

.section-projects .project-card .domain {
    margin-top: auto;
    margin-bottom: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.section-projects .project-grid > .project-card.is-active {
    transform: scale(1.045);
    border-color: var(--portfolio-accent-border);
    box-shadow: 0 18px 38px rgba(16, 42, 45, 0.16);
    z-index: 2;
}

.carousel-button {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 1px solid var(--portfolio-accent-border);
    border-radius: 50%;
    background: white;
    color: var(--portfolio-accent);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.carousel-button:hover {
    background: var(--portfolio-accent);
    color: white;
}

.carousel-button-left {
    left: -80px;
}

.carousel-button-right {
    right: -80px;
}

@media (max-width: 900px) {
    .project-carousel {
        --project-card-width: 82vw;
        --project-card-height: 260px;
    }

    .carousel-button-left {
        left: 8px;
    }

    .carousel-button-right {
        right: 8px;
    }
}


/* Featured Projects image card treatment */

.section-projects .project-card-visual {
    position: relative;
    isolation: isolate;
    color: white;
    background:
        linear-gradient(
            90deg,
            var(--card-overlay-left, rgba(8, 28, 31, 0.62)) 0%,
            var(--card-overlay-mid, rgba(8, 28, 31, 0.38)) 46%,
            var(--card-overlay-right, rgba(8, 28, 31, 0.14)) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.08)
        ),
        var(--project-card-image);
    background-size: cover;
    background-position: var(--project-card-position, center);
}

.section-projects .project-card-visual .project-type,
.section-projects .project-card-visual h3,
.section-projects .project-card-visual p {
    color: inherit;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.section-projects .project-card-visual .domain {
    color: rgba(255, 255, 255, 0.82);
}

.section-projects .project-grid > .project-card-visual.is-active {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 46px rgba(16, 42, 45, 0.30);
}

/* Project card action buttons */

.section-projects .project-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
}

.section-projects .project-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    color: white;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.section-projects .project-action:hover {
    background: white;
    color: var(--portfolio-accent);
}

.section-projects .project-action-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   CONTACT SECTION
   Final homepage call-to-action with social icon links.

   Tunable controls:
   - --contact-icon-size controls icon circle size
   - --contact-icon-gap controls spacing between social icons
   - --contact-glow controls subtle background glow
   ========================================================= */

.contact-section {
    --contact-icon-size: 62px;
    --contact-icon-gap: 16px;
    --contact-glow: rgba(201, 168, 106, 0.12);

    max-width: none;
    width: 100%;
    margin: 0;
    padding: 82px var(--site-gutter) 92px;
    border-top: none;
    background:
        radial-gradient(circle at 16% 22%, rgba(47, 111, 115, 0.24), transparent 28%),
        radial-gradient(circle at 84% 18%, var(--contact-glow), transparent 30%),
        linear-gradient(135deg, #0d292c 0%, #102a2d 52%, #0b2225 100%);
    color: white;
}

.contact-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.65fr);
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
}

.contact-copy {
    text-align: left;
}

.contact-section .section-label {
    margin-bottom: 12px;
    color: var(--color-gold);
}

.contact-section .section-title {
    margin: 0 0 18px;
    color: white;
    font-size: clamp(2.2rem, 4vw, 3.35rem);
    line-height: 1.08;
}

.contact-section p {
    max-width: 740px;
    margin: 0;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

.contact-social-area {
    justify-self: end;
    text-align: center;
}

.contact-social-kicker {
    margin: 0 0 18px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--color-gold);
    font-size: 0.76rem;
    font-weight: 900;
}

.contact-social-links {
    display: flex;
    justify-content: center;
    gap: var(--contact-icon-gap);
}

.contact-social-link {
    width: var(--contact-icon-size);
    height: var(--contact-icon-size);
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    text-decoration: none;
    font-size: 1.45rem;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.contact-social-link:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 168, 106, 0.72);
    background: rgba(201, 168, 106, 0.16);
    color: var(--color-gold);
}

.contact-social-email {
    border-color: rgba(201, 168, 106, 0.56);
    background: rgba(201, 168, 106, 0.13);
}

.contact-social-note {
    max-width: 280px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .contact-section {
        --contact-icon-size: 56px;
        --contact-icon-gap: 14px;

        padding: 58px 24px 96px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .contact-copy,
    .contact-social-area {
        justify-self: center;
        text-align: center;
    }

    .contact-section p {
        max-width: 100%;
        margin: 0 auto;
    }

    .contact-social-note {
        max-width: 260px;
    }
}


.assistant-widget {
    position: fixed;
    right: 36px;
    bottom: 70px;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

.assistant-toggle {
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: #222;
    cursor: pointer;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.assistant-toggle:hover {
    transform: translateY(-2px);
}

.assistant-avatar-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.22));
}

.assistant-panel {
    position: absolute;
    right: 0;
    bottom: 82px;
    width: 390px;
    max-width: calc(100vw - 40px);
    max-height: 72vh;
    display: none;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 18px;
    background: #fafafa;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.assistant-open .assistant-panel {
    display: flex;
}

.assistant-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 18% 18%, rgba(201, 168, 106, 0.18), transparent 34%),
        linear-gradient(135deg, #102a2d 0%, #17393d 100%);
    color: white;
}

.assistant-panel-label {
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 800;
}

.assistant-panel-header h3 {
    margin: 0;
    color: white;
    font-size: 1.05rem;
}

.assistant-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.assistant-new-chat,
.assistant-mode-toggle,
.assistant-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    line-height: 1;
    cursor: pointer;
}

.assistant-close {
    font-size: 1.35rem;
}

.assistant-new-chat:hover,
.assistant-mode-toggle:hover,
.assistant-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.assistant-new-chat:focus-visible,
.assistant-mode-toggle:focus-visible,
.assistant-close:focus-visible {
    outline: 3px solid rgba(201, 168, 106, 0.38);
    outline-offset: 2px;
}

.assistant-mode-icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.assistant-mode-icon-collapse {
    display: none;
}

.assistant-widget.assistant-docked .assistant-mode-icon-expand {
    display: none;
}

.assistant-widget.assistant-docked .assistant-mode-icon-collapse {
    display: block;
}

.assistant-panel-description {
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.10), transparent 32%),
        linear-gradient(135deg, #eef6f6 0%, #e7f1f1 100%);
    color: var(--color-dark);
    line-height: 1.5;
    font-size: 0.82rem;
}

.assistant-messages {
    min-height: 220px;
    max-height: 330px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.assistant-message {
    max-width: 88%;
    line-height: 1.5;
    font-size: 0.92rem;
}

.assistant-message-user {
    align-self: flex-end;
    padding: 11px 13px;
    border-radius: 12px;
    background: #222;
    color: white;
}

.assistant-message-bot {
    align-self: flex-start;
    max-width: 90%;
    padding: 2px 0;
    border-radius: 0;
    background: transparent;
    color: #222;
}

.assistant-message-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: fit-content;
    padding: 0;
    background: transparent;
    color: #555;
}

.assistant-message-typing::after {
    content: "";
    width: 28px;
    height: 8px;
    display: inline-block;
    background:
        radial-gradient(circle, #666 2px, transparent 3px) 0 50% / 9px 8px repeat-x;
    animation: assistantTypingDots 900ms infinite steps(3);
}

@keyframes assistantTypingDots {
    from {
        clip-path: inset(0 22px 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.assistant-message-bot a {
    color: #005ea8;
    font-weight: 600;
}

.assistant-feedback {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(16, 42, 45, 0.12);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
}

.assistant-feedback-prompt {
    flex: 0 0 100%;
    color: #4b5e62;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.assistant-feedback-button {
    width: 36px;
    height: 34px;
    min-width: 36px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(47, 111, 115, 0.20);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--color-dark);
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1;
    box-shadow: none;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease,
        opacity 150ms ease;
}

.assistant-feedback-button:hover:not(:disabled) {
    background: var(--portfolio-accent-soft);
    border-color: var(--portfolio-accent-border);
    transform: translateY(-1px);
}

.assistant-feedback-button:disabled {
    cursor: default;
    opacity: 0.55;
}

.assistant-feedback-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.assistant-feedback-button.is-selected {
    border-color: var(--portfolio-accent);
    background: var(--portfolio-accent);
    color: white;
}

.assistant-feedback-button.is-selected:disabled {
    opacity: 1;
}

.assistant-feedback-button:focus-visible {
    outline: 3px solid rgba(47, 111, 115, 0.24);
    outline-offset: 2px;
}

.assistant-feedback-status {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 2px auto 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(47, 111, 115, 0.08);
    color: var(--portfolio-accent);
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}

.assistant-feedback-status:empty {
    display: none;
}

.assistant-form {
    display: flex;
    gap: 8px;
    padding: 16px 18px 12px;
    border-top: 1px solid rgba(16, 42, 45, 0.10);
    background:
        radial-gradient(circle at 92% 10%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #eef6f6 0%, #e7f1f1 100%);
}

.assistant-form input {
    flex: 1;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(47, 111, 115, 0.28);
    border-radius: 12px;
    background: white;
    color: var(--color-dark);
    font-size: 0.95rem;
    outline: none;
}

.assistant-form input:focus {
    border-color: var(--portfolio-accent);
    box-shadow: 0 0 0 3px rgba(47, 111, 115, 0.12);
}

.assistant-form button {
    padding: 12px 16px;
    border: 1px solid var(--portfolio-accent);
    border-radius: 12px;
    background: var(--portfolio-accent);
    color: white;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}

.assistant-form button:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
}

.assistant-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.assistant-status {
    min-height: 18px;
    margin: 0;
    padding: 0 18px 14px;
    background: #eef6f6;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.assistant-callout {
    position: absolute;
    right: 65px;
    bottom: 8px;
    width: 220px;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: white;
    color: #222;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    animation: assistantCalloutFloat 3s ease-in-out infinite;
}

.assistant-callout::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 18px;
    width: 14px;
    height: 14px;
    background: white;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    transform: rotate(-45deg);
}

.assistant-callout-small {
    display: block;
    margin-bottom: 3px;
    color: #666;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

.assistant-callout-main {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
}

.assistant-callout:hover {
    transform: translateY(-2px);
}

.assistant-open .assistant-callout {
    display: none;
}

@keyframes assistantCalloutFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}


/* =========================================================
   SHARED DETAIL PAGE FOUNDATIONS
   Reusable content, card, table, figure, and pipeline primitives.
   Individual research and project pages apply scoped refinements later.
   ========================================================= */

.detail-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
}

.detail-section {
    max-width: 900px;
    padding: 32px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-section h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

.detail-section p {
    max-width: 850px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.results-list {
    max-width: 850px;
    line-height: 2;
}

.results-list li {
    margin-bottom: 10px;
}


/* Shared metric cards */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 850px;
    margin: 25px 0;
}

.metric-card {
    padding: 22px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fafafa;
}

.metric-value {
    display: block;
    margin-bottom: 8px;
    font-size: 2rem;
    font-weight: 700;
}

.metric-label {
    display: block;
    color: #666;
    line-height: 1.5;
}


/* Shared result tables */

.results-table-wrapper {
    max-width: 900px;
    margin: 35px 0;
}

.results-table-wrapper h3 {
    margin-bottom: 16px;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.results-table th,
.results-table td {
    padding: 14px;
    border: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: top;
}

.results-table th {
    background: #f7f7f7;
    font-weight: 700;
}

.results-table td {
    line-height: 1.5;
}


/* Shared artifact, approach, and contribution cards */

.artifact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin-top: 25px;
}

.artifact-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: white;
}

.artifact-card h3 {
    margin-bottom: 12px;
}

.artifact-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.artifact-status {
    display: inline-block;
    margin-top: auto;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
}

.evidence-note {
    max-width: 850px;
    margin: 30px 0;
    padding: 22px;
    border-left: 4px solid #222;
    background: #fafafa;
}

.evidence-note h3 {
    margin-bottom: 12px;
}

.evidence-note p {
    margin: 0;
}

.approach-grid,
.contribution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 900px;
    margin-top: 25px;
}

.approach-card,
.contribution-card {
    padding: 22px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fff;
}

.approach-card h3,
.contribution-card h3 {
    margin-bottom: 12px;
}

.approach-card p,
.contribution-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.approach-card:last-child {
    grid-column: 1 / -1;
}


/* Shared pipeline */

.pipeline-visual {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 900px;
    margin: 28px 0 32px;
}

.pipeline-step {
    flex: 1;
    padding: 18px;
    border: 1px solid var(--portfolio-accent-border);
    border-top: 4px solid var(--portfolio-accent);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--portfolio-accent-soft), #ffffff);
}

.pipeline-step strong {
    display: block;
    margin-bottom: 8px;
}

.pipeline-step small {
    color: #666;
    line-height: 1.4;
}

.pipeline-number {
    display: block;
    margin-bottom: 10px;
    color: var(--portfolio-accent);
    font-size: 0.8rem;
    font-weight: 700;
}

.pipeline-arrow {
    display: flex;
    align-items: center;
    color: var(--portfolio-accent);
    font-weight: 700;
}


/* Shared research figure */

.research-visual {
    max-width: 900px;
    margin: 32px 0;
    padding: 16px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fff;
}

.research-visual img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.research-visual figcaption {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eeeeee;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left;
    word-spacing: normal;
}

.research-visual figcaption strong {
    color: #222;
}


/* Shared small-screen foundations */

@media (max-width: 768px) {
    body {
        max-width: none;
        padding: 0;
        overflow-x: hidden;
    }

    .hero {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 32px;
        min-height: auto;
        padding: 44px 24px;
        background-position: center;
    }

    .hero-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-image img {
        width: 180px;
        height: 180px;
        max-width: 70%;
    }

    .hero-text {
        width: 100%;
    }

    .eyebrow {
        font-size: 0.8rem;
        line-height: 1.6;
    }

    .hero-text h1 {
        font-size: 2.35rem;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .hero-text h2 {
        font-size: 1.8rem;
        line-height: 1.25;
    }

    .intro {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.65;
    }

    .hero-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-width: 280px;
    }

    .hero-links a {
        width: 100%;
        min-width: 0;
    }

    .section {
        padding: 42px 24px;
    }

    .section-title {
        margin-bottom: 28px;
        font-size: 1.55rem;
        line-height: 1.3;
    }

    .project-grid,
    .metrics-grid,
    .approach-grid,
    .contribution-grid,
    .artifact-grid {
        grid-template-columns: 1fr;
    }

    .project-card,
    .metric-card,
    .approach-card,
    .contribution-card,
    .artifact-card {
        width: 100%;
    }

    .project-card h3 {
        overflow-wrap: break-word;
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .detail-page {
        width: 100%;
        max-width: 100%;
        padding: 28px 24px;
    }

    .detail-section {
        padding: 28px 0;
    }

    .detail-section h2 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .detail-section p,
    .results-list {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .approach-card:last-child {
        grid-column: auto;
    }

    .pipeline-visual {
        flex-direction: column;
    }

    .pipeline-arrow {
        justify-content: center;
        padding: 4px 0;
        transform: rotate(90deg);
    }

    .results-table-wrapper {
        overflow-x: auto;
    }

    .results-table {
        min-width: 680px;
    }

    .assistant-widget {
        right: 4px;
        bottom: 22px;
    }

    .assistant-callout {
        display: none;
    }

    .assistant-panel {
        right: 10px;
        bottom: 68px;
        width: calc(100vw - 32px);
    }

    .assistant-avatar-image {
        width: 48px;
        height: 48px;
    }
}

.hero .eyebrow {
    color: #f3d58a;
    opacity: 1;
    font-weight: 500;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   RESEARCH DETAIL PAGE TEMPLATE
   Used for research case-study pages such as Poisson-CI and NB-CI.

   Tunable controls:
   - --research-hero-image controls the page-specific hero image
   - --research-hero-min-height controls hero depth
   - --research-hero-overlay-left controls dark overlay strength
   - --research-hero-overlay-right controls image visibility
   ========================================================= */

.research-detail-body {
    background: #ffffff;
}

.research-hero {
    --research-hero-min-height: 620px;
    --research-hero-overlay-left: rgba(8, 28, 31, 0.88);
    --research-hero-overlay-mid: rgba(8, 28, 31, 0.58);
    --research-hero-overlay-right: rgba(8, 28, 31, 0.18);

    position: relative;
    width: 100vw;
    min-height: var(--research-hero-min-height);
    margin-left: calc(50% - 50vw);
    padding: 88px var(--site-gutter) 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(
            90deg,
            var(--research-hero-overlay-left) 0%,
            var(--research-hero-overlay-mid) 47%,
            var(--research-hero-overlay-right) 100%
        );
    background-size: cover;
    background-position: center right;
}


.research-hero-poisson {
    background:
        linear-gradient(
            90deg,
            rgba(8, 28, 31, 0.90) 0%,
            rgba(8, 28, 31, 0.60) 45%,
            rgba(8, 28, 31, 0.22) 100%
        ),
        url("images/research/cards/poisson-research-card.jpg");
    background-size: cover;
    background-position: center;
}

.research-hero-nbci {
    background:
        linear-gradient(
            90deg,
            rgba(9, 23, 42, 0.91) 0%,
            rgba(9, 23, 42, 0.64) 45%,
            rgba(9, 23, 42, 0.24) 100%
        ),
        url("images/research/cards/nb-ci-research-card.jpg");
    background-size: cover;
    background-position: center;
}

.nbci-research-page .research-hero {
    min-height: 640px;
    padding-top: 72px;
    padding-bottom: 68px;
}

.nbci-research-page .research-hero h1 {
    max-width: 760px;
    font-size: 3.1rem;
    line-height: 0.98;
}

.nbci-research-page .research-hero-subtitle {
    max-width: 700px;
}


.research-hero-back {
    position: absolute;
    top: 28px;
    left: var(--site-gutter);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.84);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}

.research-hero-back:hover {
    color: var(--color-gold);
}

.research-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.58fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.research-hero-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.research-hero .section-label {
    margin: 0;
    color: var(--color-gold);
    font-weight: 800;
}

.research-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 7px 12px;
    border: 1px solid rgba(201, 168, 106, 0.42);
    border-radius: 999px;
    background: rgba(201, 168, 106, 0.14);
    color: #f3d58a;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.research-hero h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: white;
    font-size: 3.5rem;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.research-hero-subtitle {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.research-hero-tags {
    max-width: 760px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
}

.research-hero-panel {
    display: flex;
    align-items: center;
}

.research-hero-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.research-hero-metric {
    min-height: 112px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 168, 106, 0.12), transparent 38%),
        rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.research-hero-metric-value {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: clamp(1.55rem, 2.2vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.research-hero-metric-label {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.4;
}

.research-detail-page.detail-page {
    max-width: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Research detail body layout:
   Desktop uses a sticky section nav.
   Mobile turns the nav into compact scrollable links. */

.research-detail-shell {
    /* Matches the homepage expanded layout alignment system */
    --research-shell-max-width: 1660px;
    --research-sidebar-width: 170px;
    --research-content-gap: 64px;
    --research-sidebar-offset-x: -34px;
    --research-padding-top: 56px;
    --research-padding-x: clamp(28px, 4vw, 72px);

    max-width: var(--research-shell-max-width);
    margin: 0 auto;
    padding: var(--research-padding-top) var(--research-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--research-sidebar-width) minmax(0, 1fr);
    gap: var(--research-content-gap);
}

.research-detail-sidebar {
    min-width: 0;
}

.research-section-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    transform: translateX(var(--research-sidebar-offset-x));
}

.research-section-nav a {
    display: block;
    padding: 13px 0 12px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.18);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 550;
    line-height: 1.35;
}

.research-section-nav a:hover,
.research-section-nav a:focus-visible {
    color: var(--portfolio-accent);
    border-bottom-color: var(--portfolio-accent);
    padding-left: 8px;
}

.research-detail-content {
    min-width: 0;
}

.research-detail-content .detail-section {
    max-width: none;
    scroll-margin-top: 32px;
    padding: 0 0 34px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
}

.research-detail-content .detail-section:last-child {
    margin-bottom: 0;
}

.research-detail-content .detail-section h2 {
    position: relative;
    margin-bottom: 20px;
    color: var(--color-dark);
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.research-detail-content .detail-section h2::before {
    content: "";
    width: 48px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--portfolio-accent));
}

.research-detail-content .detail-section p,
.research-detail-content .results-list {
    max-width: 820px;
}

.research-detail-content .detail-section p {
    color: #263234;
}

.research-detail-content .results-list {
    padding-left: 1.15rem;
}

.research-detail-content .results-list li {
    padding-left: 0.25rem;
}

/* Wider research-page evidence blocks.
   Paragraphs stay readable, while figures, tables, pipelines,
   and cards can use the broader homepage-style content area. */
.research-detail-content .research-visual,
.research-detail-content .results-table-wrapper,
.research-detail-content .pipeline-visual,
.research-detail-content .approach-grid,
.research-detail-content .contribution-grid,
.research-detail-content .artifact-grid,
.research-detail-content .evidence-note {
    max-width: min(1120px, 100%);
}

/* Research detail component polish:
   Scoped to research detail pages so global cards and homepage sections are not affected. */

.research-detail-content .research-visual {
    margin: 34px 0 36px;
    padding: 18px;
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 18px;
    background:
        linear-gradient(135deg, #ffffff 0%, #ffffff 68%, rgba(238, 246, 246, 0.58) 100%);
    box-shadow: 0 18px 38px rgba(16, 42, 45, 0.075);
}

.research-detail-content .research-visual img {
    border-radius: 12px;
}

.research-detail-content .research-visual figcaption {
    margin-top: 14px;
    padding: 14px 2px 0;
    border-top: 1px solid rgba(16, 42, 45, 0.10);
    color: var(--color-muted);
    font-size: 0.88rem;
}

.research-detail-content .results-table-wrapper {
    margin: 36px 0;
}

.research-detail-content .results-table-wrapper h3 {
    margin-bottom: 16px;
    color: var(--color-dark);
    font-size: 1.2rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.research-detail-content .results-table {
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 16px;
    background: white;
    box-shadow: 0 14px 30px rgba(16, 42, 45, 0.055);
}

.research-detail-content .results-table th,
.research-detail-content .results-table td {
    border: none;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
    padding: 16px;
}

.research-detail-content .results-table th {
    background:
        linear-gradient(135deg, var(--portfolio-accent-soft), #ffffff);
    color: var(--color-dark);
    font-size: 0.82rem;
}

.research-detail-content .results-table tbody tr:last-child td {
    border-bottom: none;
}

.research-detail-content .results-table td {
    color: #263234;
}

.research-detail-content .evidence-note {
    margin: 34px 0;
    padding: 24px 26px;
    border-left: 5px solid var(--portfolio-accent);
    border-radius: 0 18px 18px 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--portfolio-accent-soft) 100%);
    box-shadow: 0 16px 34px rgba(16, 42, 45, 0.065);
}

.research-detail-content .evidence-note h3 {
    margin-bottom: 10px;
    color: var(--color-dark);
    font-size: 1.1rem;
}

.research-detail-content .pipeline-visual {
    gap: 12px;
    margin: 32px 0 34px;
}

.research-detail-content .pipeline-step {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    padding: 18px;
    border: 1px solid rgba(47, 111, 115, 0.22);
    border-top: 4px solid var(--portfolio-accent);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 10%, rgba(201, 168, 106, 0.11), transparent 34%),
        linear-gradient(180deg, var(--portfolio-accent-soft), #ffffff);
    box-shadow: 0 14px 28px rgba(16, 42, 45, 0.055);
}

.research-detail-content .pipeline-number {
    color: var(--portfolio-accent);
    letter-spacing: 0.08em;
}

.research-detail-content .pipeline-step strong {
    color: var(--color-dark);
    line-height: 1.25;
}

.research-detail-content .pipeline-step small {
    color: var(--color-muted);
}

.research-detail-content .pipeline-arrow {
    align-self: center;
    color: var(--portfolio-accent);
    opacity: 0.74;
}

.research-detail-content .approach-card,
.research-detail-content .contribution-card,
.research-detail-content .artifact-card {
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 10%, rgba(238, 246, 246, 0.72), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 64%, rgba(238, 246, 246, 0.42) 100%);
    box-shadow: 0 14px 30px rgba(16, 42, 45, 0.055);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.research-detail-content .approach-card:hover,
.research-detail-content .contribution-card:hover,
.research-detail-content .artifact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 115, 0.24);
    box-shadow: 0 20px 42px rgba(16, 42, 45, 0.09);
}

.research-detail-content .approach-card h3,
.research-detail-content .contribution-card h3,
.research-detail-content .artifact-card h3 {
    color: var(--color-dark);
    line-height: 1.28;
}

.research-detail-content .artifact-status {
    color: var(--portfolio-accent);
    font-weight: 800;
}

@media (max-width: 900px) {
    .research-hero {
        min-height: auto;
        padding: 82px 24px 52px;
    }

    .research-hero-back {
        left: 24px;
    }

    .research-hero-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .research-detail-shell {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 100%;
        padding: 38px 24px 68px;
    }

    .research-section-nav {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .research-section-nav::-webkit-scrollbar {
        display: none;
    }

    .research-section-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        color: var(--color-muted);
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .research-section-nav a:hover,
    .research-section-nav a:focus-visible {
        padding-left: 13px;
        color: var(--portfolio-accent);
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }

    .research-detail-content .detail-section {
        scroll-margin-top: 18px;
        padding-bottom: 30px;
        margin-bottom: 32px;
    }

    .research-detail-content .research-visual,
    .research-detail-content .evidence-note {
        border-radius: 16px;
    }

    .research-detail-content .pipeline-step {
        min-height: auto;
    }

    .research-detail-content .results-table-wrapper {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .research-detail-content .results-table {
        min-width: 680px;
    }
}

@media (max-width: 560px) {
    .research-hero {
        --research-hero-min-height: auto;

        padding: 72px 24px 34px;
        align-items: flex-start;
        background-position: center;
    }

    .research-hero-back {
        top: 24px;
        font-size: 0.9rem;
    }

    .research-hero-topline {
        gap: 10px;
        margin-bottom: 16px;
    }

    .research-status-pill {
        min-height: 28px;
        padding: 7px 11px;
        font-size: 0.7rem;
    }

    .research-hero h1 {
        margin-bottom: 18px;
        font-size: 2rem;
        line-height: 1.02;
        letter-spacing: -0.055em;
    }

    .research-hero-subtitle {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .research-hero-tags {
        margin-top: 20px;
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .research-hero-inner {
        gap: 26px;
    }

    .research-hero-panel {
        width: 100%;
    }

    .research-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .research-hero-metric {
        min-height: 96px;
        padding: 16px;
        border-radius: 16px;
    }

    .research-hero-metric-value {
        font-size: 1.65rem;
    }

    .research-hero-metric-label {
        font-size: 0.76rem;
    }

    .poisson-research-page .assistant-widget {
        right: 6px;
        bottom: 14px;
    }

    .poisson-research-page .assistant-avatar-image {
        width: 42px;
        height: 42px;
    }
}


/* NB-CI responsive refinements */

@media (max-width: 900px) {
    .nbci-research-page .research-hero {
        min-height: auto;
        padding-top: 64px;
        padding-bottom: 38px;
    }

    .nbci-research-page .research-hero-inner {
        gap: 28px;
    }

    .nbci-research-page .research-hero h1 {
        max-width: 100%;
        font-size: clamp(2.15rem, 9vw, 3.2rem);
        line-height: 1.02;
    }

    .nbci-research-page .research-hero-subtitle {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.55;
    }

    .nbci-research-page .research-hero-tags {
        font-size: 0.82rem;
    }
}

@media (max-width: 560px) {
    .nbci-research-page .research-hero {
        padding-top: 58px;
        padding-bottom: 32px;
    }

    .nbci-research-page .research-hero h1 {
        font-size: 2rem;
        line-height: 1.02;
    }

    .nbci-research-page .research-hero-metric {
        min-height: 88px;
    }

    .nbci-research-page .research-hero-metric-value {
        font-size: 1.75rem;
    }

    .nbci-research-page .research-hero-metric-label {
        font-size: 0.72rem;
    }
}


/* =========================================================
   SHARED PROJECT DETAIL FOUNDATION
   Structural rules shared by Reciprocal Resource Matching
   and Project Ariel. Page-specific colors, images, metrics,
   and content treatments remain in their own sections.
   ========================================================= */

.resource-page,
.ariel-page {
    max-width: none;
    padding: 0;
    background: #ffffff;
}

/* Shared hero controls */

.resource-page-hero::after,
.ariel-page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

.resource-hero-back,
.ariel-hero-back {
    position: absolute;
    top: 28px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}

.resource-hero-back:hover,
.ariel-hero-back:hover {
    color: var(--color-gold);
}

.resource-hero-source,
.ariel-hero-source {
    position: absolute;
    bottom: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 168, 106, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.resource-hero-source:hover,
.ariel-hero-source:hover {
    border-color: rgba(201, 168, 106, 0.78);
    background: rgba(201, 168, 106, 0.16);
    color: var(--color-gold);
    transform: translateY(-2px);
}

.resource-hero-source-disabled,
.ariel-hero-source-disabled {
    opacity: 0.78;
    cursor: not-allowed;
    pointer-events: none;
}

/* Shared body shell and section navigation */

.resource-page-sidebar,
.ariel-page-sidebar {
    min-width: 0;
    padding-top: 4px;
}

.resource-section-nav,
.ariel-body-layout .ariel-section-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.resource-section-nav a,
.ariel-body-layout .ariel-section-nav a {
    display: block;
    padding: 13px 0 12px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.18);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.resource-section-nav a:hover,
.resource-section-nav a:focus-visible,
.ariel-body-layout .ariel-section-nav a:hover,
.ariel-body-layout .ariel-section-nav a:focus-visible {
    transform: translateX(8px);
}

.resource-body-content,
.ariel-body-content {
    min-width: 0;
}

.resource-body-content .detail-section,
.ariel-body-content .detail-section {
    max-width: none;
    padding: 0 0 38px;
    margin-bottom: 42px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
    scroll-margin-top: 32px;
}

.resource-body-content .detail-section:first-child,
.ariel-body-content .detail-section:first-child {
    padding-top: 0;
}

.resource-body-content .detail-section:last-child,
.ariel-body-content .detail-section:last-child {
    margin-bottom: 0;
}

.resource-body-content .detail-section h2,
.ariel-body-content .detail-section h2 {
    position: relative;
    margin-bottom: 18px;
    color: var(--color-dark);
    font-size: clamp(1.8rem, 2.3vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.resource-body-content .detail-section p,
.ariel-body-content .detail-section p {
    max-width: 850px;
    color: #263234;
    font-size: 1.02rem;
    line-height: 1.75;
}

/* Shared project cards */

.resource-body-content .approach-card,
.resource-body-content .contribution-card,
.resource-body-content .artifact-card,
.resource-body-content .metric-card,
.resource-problem-card,
.ariel-body-content .approach-card,
.ariel-body-content .contribution-card,
.ariel-body-content .artifact-card,
.ariel-body-content .metric-card,
.ariel-body-content .research-visual {
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 10%, rgba(238, 246, 246, 0.72), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(238, 246, 246, 0.44) 100%);
    box-shadow: 0 16px 34px rgba(16, 42, 45, 0.065);
}

.resource-body-content .approach-card,
.resource-body-content .contribution-card,
.resource-body-content .artifact-card,
.resource-body-content .metric-card,
.resource-problem-card,
.ariel-body-content .approach-card,
.ariel-body-content .contribution-card,
.ariel-body-content .artifact-card,
.ariel-body-content .metric-card {
    padding: 24px;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.resource-body-content .approach-card:hover,
.resource-body-content .contribution-card:hover,
.resource-body-content .artifact-card:hover,
.resource-body-content .metric-card:hover,
.resource-problem-card:hover,
.ariel-body-content .approach-card:hover,
.ariel-body-content .contribution-card:hover,
.ariel-body-content .artifact-card:hover,
.ariel-body-content .metric-card:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 115, 0.24);
    box-shadow: 0 22px 46px rgba(16, 42, 45, 0.10);
}

.resource-body-content .approach-card h3,
.resource-body-content .contribution-card h3,
.resource-body-content .artifact-card h3,
.resource-problem-card h3,
.ariel-body-content .approach-card h3,
.ariel-body-content .contribution-card h3,
.ariel-body-content .artifact-card h3 {
    color: var(--color-dark);
    line-height: 1.3;
}

.resource-body-content .evidence-note,
.ariel-body-content .evidence-note {
    max-width: 920px;
    margin: 30px 0 0;
    padding: 24px 26px;
    border-radius: 0 18px 18px 0;
    box-shadow: 0 16px 34px rgba(16, 42, 45, 0.065);
}

.resource-body-content .evidence-note h3,
.ariel-body-content .evidence-note h3 {
    color: var(--color-dark);
}

/* =========================================================
   RECIPROCAL RESOURCE MATCHING PROJECT PAGE
   Systems / algorithm design case-study page.

   Tunable controls:
   - --resource-page-max controls the main content width
   - --resource-sidebar-width controls side navigation width
   - --resource-accent controls the project accent color
   ========================================================= */

.resource-page {
    --resource-page-max: 1660px;
    --resource-sidebar-width: 170px;
    --resource-content-gap: 64px;
    --resource-sidebar-offset-x: -34px;
    --resource-padding-x: clamp(28px, 4vw, 72px);
    --resource-accent: var(--portfolio-accent);
    --resource-soft: rgba(238, 246, 246, 0.72);
}

/* Hero */

.resource-page-hero {
    --resource-hero-bg: url("images/projects/resource-matching/resource-matching-hero.jpg");
    --resource-hero-position: center;

    position: relative;
    width: 100vw;
    min-height: 520px;
    margin-left: calc(50% - 50vw);
    padding: 82px var(--resource-padding-x) 82px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(
            90deg,
            rgba(7, 31, 36, 0.94) 0%,
            rgba(16, 42, 45, 0.78) 48%,
            rgba(9, 28, 48, 0.46) 100%
        ),
        radial-gradient(circle at 18% 24%, rgba(201, 168, 106, 0.20), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(47, 111, 115, 0.24), transparent 34%),
        var(--resource-hero-bg);
    background-size: cover;
    background-position: var(--resource-hero-position);
}


.resource-hero-back {
    left: var(--resource-padding-x);
}


.resource-hero-source {
    right: var(--resource-padding-x);
}


.resource-page-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: block;
}

.resource-page-hero-copy {
    max-width: 880px;
}

.resource-page-hero-copy .section-label {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-weight: 850;
}

.resource-page-hero-copy h1 {
    max-width: 820px;
    margin: 0 0 18px;
    color: white;
    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.resource-page-hero-copy h2 {
    max-width: 820px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.22rem, 1.85vw, 1.72rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.resource-page-hero-copy p {
    max-width: 790px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.7;
}

.resource-page-hero-copy .detail-tags {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    font-weight: 750;
}


/* Body layout */

.resource-body-layout {
    max-width: var(--resource-page-max);
    margin: 0 auto;
    padding: 56px var(--resource-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--resource-sidebar-width) minmax(0, 1fr);
    gap: var(--resource-content-gap);
}


.resource-section-nav {
    transform: translateX(var(--resource-sidebar-offset-x));
}


.resource-section-nav a:hover,
.resource-section-nav a:focus-visible {
    color: var(--resource-accent);
    border-bottom-color: var(--resource-accent);
}


.resource-body-content .detail-section h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--resource-accent));
}


.resource-body-content .evidence-note {
    border-left: 5px solid var(--resource-accent);
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--resource-soft) 100%);
}


.resource-inline-figure {
    margin: 0;
}

.resource-inline-figure img {
    width: 100%;
    display: block;
}

.resource-inline-figure figcaption {
    display: none;
}


/* Why Simple Matching Fails section.
   Keeps the capacity image on the page background while preventing
   the Capacity pressure card from stretching to match the image height. */

.resource-challenge-grid {
    max-width: 870px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: 22px;
    align-items: center;
}

.resource-challenge-grid .approach-card {
    border-color: transparent;
    background:
        radial-gradient(circle at 88% 10%, rgba(47, 111, 115, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(231, 242, 243, 0.28) 0%,
            rgba(217, 235, 236, 0.22) 56%,
            rgba(199, 224, 226, 0.94) 100%
        );
    box-shadow: 0 18px 36px rgba(7, 31, 36, 0.075);
}

.resource-challenge-grid .approach-card h3 {
    color: #0d3f44;
}

.resource-challenge-grid .approach-card p {
    color: #243f42;
}

.resource-capacity-card {
    align-self: center;
    min-height: auto;
}

.resource-capacity-figure {
    align-self: center;
    justify-self: center;
    width: min(100%, 330px);
}

.resource-reciprocity-card {
    grid-column: 1 / -1;
}


.resource-problem-figure {
    max-width: 870px;
    margin: 30px 0 32px;
}

.resource-problem-figure img {
    width: 100%;
    display: block;
}

.resource-problem-figure figcaption {
    max-width: 880px;
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 0.80rem;
    line-height: 1.6;
}


.resource-problem-grid {
    max-width: 1040px;
    margin: 30px 0 32px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.resource-card-number {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--resource-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.resource-framework-grid {
    max-width: 1000px;
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.resource-framework-grid .metric-card {
    min-height: 100%;
}

.resource-framework-grid .metric-value {
    color: var(--color-dark);
    font-size: 1.3rem;
    line-height: 1.2;
}

.resource-framework-grid .metric-label {
    color: var(--color-muted);
}

.resource-table-wrapper {
    max-width: 1000px;
}

.resource-body-content .results-table {
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 16px;
    background: white;
    box-shadow: 0 14px 30px rgba(16, 42, 45, 0.055);
}

.resource-body-content .results-table th,
.resource-body-content .results-table td {
    border: none;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
    padding: 16px;
}

.resource-body-content .results-table th {
    background:
        linear-gradient(135deg, var(--portfolio-accent-soft), #ffffff);
    color: var(--color-dark);
    font-size: 0.82rem;
}

.resource-body-content .results-table tbody tr:last-child td {
    border-bottom: none;
}

/* Pipeline */

.resource-pipeline-figure {
    max-width: 1000px;
    margin: 34px 0 18px;
}

.resource-pipeline-figure a {
    display: block;
    cursor: zoom-in;
}

.resource-pipeline-figure img {
    width: 100%;
    display: block;
}

.resource-pipeline-figure figcaption {
    max-width: 900px;
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}


/* Applied case study background section.
   Tunable controls:
   - --case-study-bg controls the section background image
   - --case-study-bg-position controls image alignment
   - --case-study-overlay controls how soft/light the image appears
   - --case-study-padding controls section breathing room
*/

.resource-body-content .resource-case-section {
    --case-study-bg: url("images/projects/resource-matching/background-case-study1.jpg");

    /* Image tuning */
    --case-study-bg-position: 42% center;
    --case-study-bg-size: cover;

    /* Text readability tuning */
    --case-study-overlay-left: rgba(255, 255, 255, 0.27);
    --case-study-overlay-mid: rgba(255, 255, 255, 0.32);
    --case-study-overlay-right: rgba(255, 255, 255, 0.32);

    /* Edge fade tuning */
    --case-study-edge-fade: #ffffff;
    --case-study-padding: clamp(34px, 4vw, 54px);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--case-study-padding);
    border-bottom: none;
    border-radius: 0;
    background:
        linear-gradient(
            40deg,
            var(--case-study-edge-fade) 0%,
            rgba(255, 255, 255, 0.96) 8%,
            var(--case-study-overlay-left) 22%,
            var(--case-study-overlay-mid) 55%,
            var(--case-study-overlay-right) 78%,
            rgba(255, 255, 255, 0.94) 92%,
            var(--case-study-edge-fade) 100%
        ),
        linear-gradient(
            90deg,
            var(--case-study-edge-fade) 0%,
            rgba(255, 255, 255, 0.84) 2%,
            rgba(255, 255, 255, 0.58) 28%,
            rgba(255, 255, 255, 0.84) 88%,
            var(--case-study-edge-fade) 100%
        ),
        var(--case-study-bg);
    background-size: var(--case-study-bg-size);
    background-position: var(--case-study-bg-position);
    box-shadow: none;
}

.resource-body-content .resource-case-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(47, 111, 115, 0.10), transparent 32%),
        radial-gradient(circle at 88% 24%, rgba(201, 168, 106, 0.10), transparent 34%);
    pointer-events: none;
}

.resource-body-content .resource-case-section > * {
    position: relative;
    z-index: 1;
}

.resource-body-content .resource-case-section > p {
    max-width: 780px;
    color: #102a2d;
    font-weight: 500;
    line-height: 1.72;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82),
        0 0 16px rgba(255, 255, 255, 0.78);
}


/* Case study block */

.resource-case-study {
    max-width: 1040px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.65fr);
    gap: 22px;
    align-items: stretch;
}

.resource-case-copy,
.resource-case-network {
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 34px rgba(16, 42, 45, 0.075);
    backdrop-filter: blur(4px);
}

.resource-case-copy {
    padding: 26px;
}

.resource-case-copy h3 {
    color: var(--color-dark);
}

.resource-case-network {
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.resource-case-network span {
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 12px;
    border: 1px solid rgba(47, 111, 115, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(238, 246, 246, 0.88), #ffffff);
    color: var(--resource-accent);
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
}

/* Results */

.resource-metrics-grid {
    max-width: 1060px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.resource-metric-count {
    font-variant-numeric: tabular-nums;
}

.resource-metric-count.is-counting {
    color: #0f4f55;
}

.resource-metric-count.has-counted {
    color: var(--color-dark);
}


/* Results metric cards.
   Matches the darker teal treatment used in the Why Simple Matching Fails cards. */

.resource-metrics-grid .metric-card {
    min-height: 150px;
    border-color: rgba(15, 79, 85, 0.18);
    background:
        radial-gradient(circle at 88% 10%, rgba(47, 111, 115, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(231, 242, 243, 0.28) 0%,
            rgba(217, 235, 236, 0.22) 56%,
            rgba(199, 224, 226, 0.94) 100%
        );
    box-shadow: 0 18px 36px rgba(7, 31, 36, 0.075);
}

.resource-metrics-grid .metric-value {
    color: #0d3f44;
    font-size: 2.05rem;
    letter-spacing: -0.04em;
}

.resource-metrics-grid .metric-label {
    color: #243f42;
}

/* Results evidence note.
   Matches the Results metric card teal treatment without changing
   evidence notes in other sections. */

.resource-body-content #results .evidence-note {
    border-left-color: #0f4f55;
    background:
        radial-gradient(circle at 88% 10%, rgba(47, 111, 115, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(231, 242, 243, 0.28) 0%,
            rgba(217, 235, 236, 0.22) 56%,
            rgba(199, 224, 226, 0.94) 100%
        );
    box-shadow: 0 18px 36px rgba(7, 31, 36, 0.075);
}

.resource-body-content #results .evidence-note h3 {
    color: #0d3f44;
}

.resource-body-content #results .evidence-note p {
    color: #243f42;
}

/* Applications */

.resource-application-grid {
    max-width: 1040px;
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.resource-application-grid article {
    min-height: 92px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid rgba(47, 111, 115, 0.20);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 168, 106, 0.10), transparent 34%),
        linear-gradient(135deg, var(--resource-soft), #ffffff);
    color: var(--resource-accent);
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 10px 22px rgba(16, 42, 45, 0.045);
}

/* Artifacts */

.resource-body-content .artifact-status,
.resource-artifact-link {
    color: var(--resource-accent);
    font-weight: 850;
}

.resource-artifact-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    text-decoration: none;
}

.resource-artifact-link:hover {
    color: var(--color-dark);
}

.resource-artifact-link-disabled {
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   PROJECT ARIEL CASE STUDY PAGE
   Applied AI / RAG engineering project detail page.

   Tunable controls:
   - --ariel-page-max controls the main content width
   - --ariel-sidebar-width controls side navigation width
   - --ariel-accent controls the project accent color
   ========================================================= */

.ariel-page {
    --ariel-page-max: 1660px;
    --ariel-sidebar-width: 170px;
    --ariel-content-gap: 64px;
    --ariel-sidebar-offset-x: -34px;
    --ariel-padding-x: clamp(28px, 4vw, 72px);
    --ariel-accent: var(--portfolio-accent);
    --ariel-soft: rgba(238, 246, 246, 0.72);
}

/* Hero */

.ariel-page-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 520px;
    padding: 82px var(--ariel-padding-x) 76px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 18% 28%, rgba(201, 168, 106, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(47, 111, 115, 0.22), transparent 34%),
        linear-gradient(
            90deg,
            rgba(7, 25, 31, 0.96) 0%,
            rgba(10, 36, 50, 0.86) 48%,
            rgba(9, 28, 48, 0.78) 100%
        ),
        url("images/projects/ariel/ariel-hero-bg.jpg");
    background-size: cover;
    background-position: center;
}


.ariel-hero-back {
    left: var(--ariel-padding-x);
}


.ariel-hero-source {
    right: var(--ariel-padding-x);
}


.ariel-page-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1400px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(38px, 5vw, 70px);
    align-items: center;
}

.ariel-page-hero-image {
    position: relative;
    display: grid;
    place-items: center;
}

.ariel-page-hero-image::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(47, 111, 115, 0.34), transparent 62%);
    filter: blur(2px);
}

.ariel-page-hero-image img {
    position: relative;
    width: 230px;
    height: 230px;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.36),
        0 0 0 12px rgba(255, 255, 255, 0.045);
}

.ariel-page-hero-copy .section-label {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-weight: 850;
}

.ariel-page-hero-copy h1 {
    max-width: 820px;
    margin: 0 0 18px;
    color: white;
    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ariel-page-hero-copy h2 {
    max-width: 820px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.ariel-page-hero-copy p {
    max-width: 790px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.7;
}

.ariel-page-hero-copy .detail-tags {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    font-weight: 750;
}

/* Body layout */

.ariel-body-layout {
    max-width: var(--ariel-page-max);
    margin: 0 auto;
    padding: 56px var(--ariel-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--ariel-sidebar-width) minmax(0, 1fr);
    gap: var(--ariel-content-gap);
}


.ariel-body-layout .ariel-section-nav {
    transform: translateX(var(--ariel-sidebar-offset-x));
}


.ariel-body-layout .ariel-section-nav a:hover,
.ariel-body-layout .ariel-section-nav a:focus-visible {
    color: var(--ariel-accent);
    border-bottom-color: var(--ariel-accent);
}


.ariel-body-content .detail-section h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--ariel-accent));
}


/* Page-specific evidence note */

.ariel-body-content .evidence-note {
    border-left: 5px solid var(--ariel-accent);
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--ariel-soft) 100%);
}


/* Problem visuals */

.ariel-problem-visuals {
    max-width: 1040px;
    margin: 30px 0 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ariel-problem-visual {
    max-width: none;
    margin: 0;
    padding: 14px;
}

.ariel-problem-visual img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

.ariel-problem-visual figcaption {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Architecture */

.ariel-architecture-grid {
    max-width: 1000px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: stretch;
}

.ariel-architecture-image {
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.ariel-architecture-image img {
    width: 100%;
    flex: 1;
    min-height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

.ariel-architecture-image figcaption {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(16, 42, 45, 0.10);
    line-height: 1.65;
}

.ariel-architecture-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ariel-architecture-cards .metric-card {
    min-height: 100%;
}

.ariel-architecture-cards .metric-value {
    color: var(--color-dark);
    font-size: 1.3rem;
    line-height: 1.2;
}

.ariel-architecture-cards .metric-label {
    color: var(--color-muted);
}

/* Pipeline */

.ariel-body-content .pipeline-visual {
    max-width: 1000px;
    gap: 12px;
    margin: 32px 0 34px;
}

.ariel-body-content .pipeline-step {
    min-height: 150px;
    padding: 20px;
    border: 1px solid rgba(47, 111, 115, 0.22);
    border-top: 4px solid var(--ariel-accent);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 10%, rgba(201, 168, 106, 0.11), transparent 34%),
        linear-gradient(180deg, var(--ariel-soft), #ffffff);
    box-shadow: 0 14px 28px rgba(16, 42, 45, 0.055);
}

.ariel-body-content .pipeline-number {
    color: var(--ariel-accent);
    letter-spacing: 0.08em;
}

.ariel-body-content .pipeline-step strong {
    color: var(--color-dark);
}

.ariel-rag-pipeline-figure {
    max-width: 1100px;
    margin: 32px 0 34px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ariel-rag-pipeline-figure a {
    display: block;
    cursor: zoom-in;
}

.ariel-rag-pipeline-figure img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


/* Knowledge base */

.ariel-kb-grid {
    max-width: 900px;
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.ariel-kb-grid article {
    padding: 18px;
    border: 1px solid rgba(47, 111, 115, 0.20);
    border-radius: 14px;
    background:
        linear-gradient(135deg, var(--ariel-soft), #ffffff);
    color: var(--ariel-accent);
    font-weight: 850;
    text-align: center;
    box-shadow: 0 10px 22px rgba(16, 42, 45, 0.045);
}

/* Frontend images */

.ariel-image-grid {
    position: relative;
    isolation: isolate;
    max-width: 1180px;
    margin-top: 30px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, 0.40fr) minmax(320px, 0.465fr);
    gap: 18px;
    align-items: start;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92) 5%,
            rgba(255, 255, 255, 0.78) 40%,
            rgba(255, 255, 255, 0.76) 100%
        ),
        url("images/projects/ariel/code-background2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.ariel-image-grid .research-visual {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: none;
    margin: 0;
    overflow: hidden;
    padding: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
}

.ariel-image-grid .research-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: initial;
    object-position: initial;
    border-radius: 12px;
    background: transparent;
}

.ariel-frontend-showcase .ariel-featured-screenshot {
    grid-row: span 4;
}

.ariel-frontend-showcase .ariel-featured-screenshot img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    object-fit: initial;
    object-position: initial;
    background: transparent;
}

.ariel-image-grid .research-visual figcaption {
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

/* Evaluation */

.ariel-metrics-grid {
    max-width: 1000px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ariel-metrics-grid .metric-card {
    min-height: 150px;
}

.ariel-metrics-grid .metric-value {
    color: var(--color-dark);
    font-size: 2.2rem;
    letter-spacing: -0.04em;
}

.ariel-metrics-grid .metric-label {
    color: var(--color-muted);
}


/* Status and roadmap */

.ariel-roadmap-grid {
    max-width: 1000px;
}

.ariel-roadmap-grid .approach-card {
    position: relative;
    overflow: hidden;
}

.ariel-roadmap-grid .approach-card::before {
    content: "";
    width: 46px;
    height: 4px;
    display: block;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--ariel-accent));
}


/* Artifacts */

.ariel-body-content .artifact-status {
    color: var(--ariel-accent);
    font-weight: 850;
}

/* =========================================================
   SHARED PROJECT DETAIL RESPONSIVE RULES
   Reciprocal Resource Matching and Project Ariel
   Broad breakpoints come first; narrow mobile overrides follow.
   ========================================================= */

@media (max-width: 1000px) {
    /* Shared responsive shell */

    .resource-page-hero,
    .ariel-page-hero {
        min-height: auto;
        padding: 76px 24px 58px;
    }

    .resource-body-layout,
    .ariel-body-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px 24px 70px;
    }

    .resource-section-nav,
    .ariel-body-layout .ariel-section-nav {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .resource-section-nav::-webkit-scrollbar,
    .ariel-body-layout .ariel-section-nav::-webkit-scrollbar {
        display: none;
    }

    .resource-section-nav a,
    .ariel-body-layout .ariel-section-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        color: var(--color-muted);
        font-size: 0.82rem;
    }

    .resource-section-nav a:hover,
    .resource-section-nav a:focus-visible,
    .ariel-body-layout .ariel-section-nav a:hover,
    .ariel-body-layout .ariel-section-nav a:focus-visible {
        transform: none;
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }

    /* Reciprocal Resource Matching */

    .resource-page-hero-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .resource-section-nav a:hover,
    .resource-section-nav a:focus-visible {
        color: var(--resource-accent);
    }

    .resource-problem-grid,
    .resource-framework-grid,
    .resource-case-study,
    .resource-metrics-grid,
    .resource-application-grid,
    .resource-challenge-grid {
        grid-template-columns: 1fr;
    }

    .resource-body-content .results-table-wrapper {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .resource-body-content .results-table {
        min-width: 680px;
    }

    .resource-capacity-figure {
        width: min(100%, 420px);
        justify-self: center;
    }

    /* Project Ariel */

    .ariel-page-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ariel-page-hero-image {
        justify-content: flex-start;
    }

    .ariel-page-hero-image::before {
        width: 210px;
        height: 210px;
    }

    .ariel-page-hero-image img {
        width: 170px;
        height: 170px;
    }

    .ariel-body-layout .ariel-section-nav a:hover,
    .ariel-body-layout .ariel-section-nav a:focus-visible {
        color: var(--ariel-accent);
    }

    .ariel-architecture-grid,
    .ariel-problem-visuals,
    .ariel-image-grid,
    .ariel-metrics-grid,
    .ariel-architecture-cards {
        grid-template-columns: 1fr;
    }

    .ariel-body-content .pipeline-visual {
        flex-direction: column;
    }

    .ariel-body-content .pipeline-arrow {
        justify-content: center;
        padding: 4px 0;
        transform: rotate(90deg);
    }

    .ariel-rag-pipeline-figure {
        max-width: 100%;
        margin: 26px 0 30px;
    }
}

@media (max-width: 560px) {
    /* Shared mobile shell */

    .resource-hero-back,
    .ariel-hero-back {
        top: 22px;
        left: 22px;
        font-size: 0.88rem;
    }

    .resource-hero-source,
    .ariel-hero-source {
        right: 22px;
        bottom: 22px;
        min-height: 38px;
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .resource-page-hero-copy h2,
    .ariel-page-hero-copy h2 {
        font-size: 1.12rem;
        line-height: 1.45;
    }

    .resource-page-hero-copy p,
    .ariel-page-hero-copy p {
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .resource-page-hero-copy .detail-tags,
    .ariel-page-hero-copy .detail-tags {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .resource-body-layout,
    .ariel-body-layout {
        padding: 32px 22px 72px;
    }

    .resource-body-content .detail-section,
    .ariel-body-content .detail-section {
        padding-bottom: 30px;
        margin-bottom: 32px;
    }

    .resource-body-content .detail-section h2,
    .ariel-body-content .detail-section h2 {
        font-size: 1.75rem;
    }

    .resource-body-content .approach-card,
    .resource-body-content .contribution-card,
    .resource-body-content .artifact-card,
    .resource-body-content .metric-card,
    .resource-problem-card,
    .ariel-body-content .approach-card,
    .ariel-body-content .contribution-card,
    .ariel-body-content .artifact-card,
    .ariel-body-content .metric-card {
        padding: 20px;
    }

    /* Reciprocal Resource Matching */

    .resource-page-hero {
        padding: 68px 22px 48px;
    }

    .resource-page-hero-copy h1 {
        font-size: clamp(2.25rem, 12vw, 3rem);
        line-height: 1.02;
    }

    .resource-case-network {
        grid-template-columns: 1fr;
    }

    /* Project Ariel */

    .ariel-page-hero {
        padding: 68px 22px 46px;
        background-position: center;
    }

    .ariel-page-hero-image {
        justify-content: center;
    }

    .ariel-page-hero-image img {
        width: 142px;
        height: 142px;
    }

    .ariel-page-hero-copy h1 {
        font-size: 2rem;
        line-height: 1.02;
    }

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

    .ariel-frontend-showcase .ariel-featured-screenshot {
        grid-row: auto;
    }

    .ariel-frontend-showcase .ariel-featured-screenshot img,
    .ariel-image-grid .research-visual img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: initial;
        background: transparent;
    }

    .ariel-rag-pipeline-figure {
        margin: 22px 0 28px;
    }
}

/* =========================================================
   HOMEPAGE EXPANDED LAYOUT
   Controls the main homepage structure after the hero.
   Sections affected: Research, Projects, Skills, Certifications,
   Presentations, Achievements.
   ========================================================= */

.homepage-layout {
    /* Main homepage width control */
    --homepage-max-width: 1660px;

    /* Sidebar width and space between sidebar and content */
    --homepage-sidebar-width: 170px;
    --homepage-content-gap: 64px;

    /* Moves the side navigation left without shifting the main content */
    --homepage-sidebar-offset-x: -34px;

    /* Outer page spacing */
    --homepage-padding-top: 56px;
    --homepage-padding-x: clamp(28px, 4vw, 72px);

    max-width: var(--homepage-max-width);
    margin: 0 auto;
    padding: var(--homepage-padding-top) var(--homepage-padding-x) 0;
    display: grid;
    grid-template-columns: var(--homepage-sidebar-width) minmax(0, 1fr);
    gap: var(--homepage-content-gap);
}

.homepage-sidebar {
    min-width: 0;
}

.homepage-sections {
    min-width: 0;
}

.homepage-layout .section {
    max-width: none;
    padding: 0 0 82px;
}

.homepage-layout .section:last-child {
    padding-bottom: 72px;
}

.homepage-layout .section-title {
    max-width: 920px;
}


/* =========================================================
   HOMEPAGE SIDE NAVIGATION
   Sticky section navigation on desktop.
   Horizontal scroll navigation on smaller screens.
   ========================================================= */

.homepage-layout .homepage-side-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    padding-top: 4px;
    transform: translateX(var(--homepage-sidebar-offset-x));
}

.homepage-layout .homepage-side-nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(16, 42, 45, 0.20);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 550;
    line-height: 1.35;
    letter-spacing: -0.01em;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.homepage-layout .homepage-side-nav a:hover,
.homepage-layout .homepage-side-nav a.is-current {
    color: var(--portfolio-accent);
    border-bottom-color: var(--portfolio-accent);
}

@media (min-width: 1001px) {
    .homepage-layout .homepage-side-nav a:hover,
    .homepage-layout .homepage-side-nav a:focus-visible {
        transform: translateX(8px);
    }
}


/* Carousel arrow placement */
.homepage-layout .carousel-button {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.96);
}

.homepage-layout .carousel-button-left {
    left: -54px;
}

.homepage-layout .carousel-button-right {
    right: -54px;
}


/* =========================================================
   CERTIFICATIONS SECTION
   Credential cards with verification links.

   Tunable controls:
   - --credential-card-radius controls card roundness
   - --credential-card-shadow controls card depth
   - --credential-accent controls each card's accent color
   - --credential-soft controls each card's subtle background wash
   ========================================================= */

.certifications-section {
    padding-top: 4px;
}

.credential-card {
    --credential-card-radius: 20px;
    --credential-card-shadow: 0 18px 38px rgba(16, 42, 45, 0.075);
    --credential-accent: var(--portfolio-accent);
    --credential-soft: rgba(238, 246, 246, 0.72);

    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 30px 28px;
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: var(--credential-card-radius);
    background:
        radial-gradient(circle at 92% 12%, var(--credential-soft), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 58%, rgba(238, 246, 246, 0.42) 100%);
    box-shadow: var(--credential-card-shadow);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.credential-card:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 111, 115, 0.26);
    box-shadow: 0 24px 48px rgba(16, 42, 45, 0.12);
}

/* Small verification mark in the card corner.
   This avoids using external logo images while still implying credential verification. */
.credential-card::after {
    content: "✓";
    position: absolute;
    top: 24px;
    right: 24px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(47, 111, 115, 0.08);
    color: var(--credential-accent);
    font-size: 0.92rem;
    font-weight: 900;
    opacity: 0.82;
}

/* Gold rule above each card, now connected to the individual credential accent. */
.credential-card::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--credential-accent));
}

.credential-card-cloud {
    --credential-accent: #2f6f73;
    --credential-soft: rgba(238, 246, 246, 0.84);
}

.credential-card-analytics {
    --credential-accent: #3f7fbf;
    --credential-soft: rgba(64, 127, 200, 0.12);
}

.credential-card-mlops {
    --credential-accent: #9a6a18;
    --credential-soft: rgba(201, 168, 106, 0.16);
}

.credential-provider {
    margin: 0 42px 10px 0;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--portfolio-accent);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.35;
}

.credential-track {
    align-self: flex-start;
    margin: 0 0 16px;
    padding: 7px 11px;
    border: 1px solid rgba(47, 111, 115, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--credential-accent);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.credential-card h3 {
    margin: 0 0 14px;
    max-width: 92%;
    font-size: 1.16rem;
    line-height: 1.35;
    color: var(--color-dark);
}

.credential-card > p:not(.credential-provider):not(.credential-track) {
    margin: 0 0 22px;
    color: var(--color-muted);
    line-height: 1.65;
}

.credential-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 10px;
    border: 1px solid rgba(47, 111, 115, 0.16);
    border-radius: 999px;
    background: var(--portfolio-accent);
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 550;
    line-height: 1;
}

.credential-button:hover {
    background: var(--color-dark);
    color: white;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .credential-card::after {
        top: 22px;
        right: 22px;
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .credential-provider {
        margin-right: 38px;
    }

    .credential-card h3 {
        max-width: 100%;
    }
}


/* =========================================================
   PRESENTATIONS SECTION
   Visual cards for research talks, posters, slides, features,
   and event-photo artifacts.

   Tunable controls:
   - --presentation-radius controls card roundness
   - --presentation-image-height controls desktop poster height
   - --presentation-accent controls each card's accent color
   - --presentation-soft controls subtle background wash
   ========================================================= */

.presentations-section {
    padding-top: 4px;
}

.presentation-card {
    --presentation-radius: 20px;
    --presentation-image-height: 410px;
    --presentation-accent: var(--portfolio-accent);
    --presentation-soft: rgba(238, 246, 246, 0.72);

    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(16, 42, 45, 0.13);
    border-radius: var(--presentation-radius);
    background:
        radial-gradient(circle at 88% 8%, var(--presentation-soft), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 64%, rgba(238, 246, 246, 0.40) 100%);
    box-shadow: 0 18px 38px rgba(16, 42, 45, 0.08);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.presentation-card:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 111, 115, 0.24);
    box-shadow: 0 24px 50px rgba(16, 42, 45, 0.12);
}

.presentation-card-cataloging {
    --presentation-accent: #2f6f73;
    --presentation-soft: rgba(47, 111, 115, 0.11);
}

.presentation-card-poisson {
    --presentation-accent: #c9a86a;
    --presentation-soft: rgba(201, 168, 106, 0.15);
}

.presentation-cover {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: var(--presentation-image-height);
    padding: 14px;
    background:
        linear-gradient(135deg, rgba(238, 246, 246, 0.46), rgba(255, 255, 255, 0.88));
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
}

/* Blurred poster background:
   Keeps the real poster fully visible while filling the extra side space. */
.presentation-cover::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
        var(--presentation-cover-bg);
    background-size: cover;
    background-position: center;
    filter: blur(5px) saturate(1.05);
    transform: scale(1.04);
    opacity: 0.58;
}

.presentation-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.18), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.52));
    pointer-events: none;
}

.presentation-image {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 100%;
    height: var(--presentation-image-height);
    display: block;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(16, 42, 45, 0.14);
}

.presentation-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px;
}

.presentation-card-topline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.presentation-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 7px 11px;
    border: 1px solid rgba(47, 111, 115, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--presentation-accent);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
}

.presentation-meta {
    flex: 1 1 260px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--portfolio-accent);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.45;
}

.presentation-card h3 {
    margin: 0 0 14px;
    font-size: 1.18rem;
    line-height: 1.35;
    color: var(--color-dark);
}

.presentation-card p:not(.presentation-meta):not(.presentation-detail) {
    color: var(--color-muted);
    line-height: 1.65;
}

.presentation-detail {
    margin: 0 0 22px;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.presentation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.presentation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 550;
    line-height: 1;
}

.presentation-button-primary {
    border: 1px solid rgba(47, 111, 115, 0.16);
    background: var(--portfolio-accent);
    color: white;
}

.presentation-button-primary:hover {
    background: var(--color-dark);
    color: white;
}

.presentation-button-secondary {
    border: 1px solid var(--portfolio-accent-border);
    background: white;
    color: var(--portfolio-accent);
}

.presentation-button-secondary:hover {
    background: var(--portfolio-accent-soft);
    color: var(--portfolio-accent);
}

.presentation-button-link {
    border: 1px solid transparent;
    background: transparent;
    color: var(--presentation-accent);
}

.presentation-button-link:hover {
    background: rgba(238, 246, 246, 0.72);
    color: var(--portfolio-accent);
}

@media (max-width: 1000px) {
    .presentation-card {
        --presentation-image-height: 330px;
    }

    .presentation-cover {
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .presentation-card {
        --presentation-image-height: 270px;
    }

    .presentation-cover {
        padding: 8px;
    }

    .presentation-card-body {
        padding: 22px;
    }

    .presentation-card-topline {
        gap: 8px;
    }

    .presentation-actions {
        gap: 8px;
    }

    .presentation-button {
        min-height: 38px;
        padding: 10px 14px;
        font-size: 0.86rem;
    }
}

/* =========================================================
   ACHIEVEMENTS SECTION
   Recognition cards for awards, fellowships, and academic honors.

   Tunable controls:
   - --recognition-radius controls card roundness
   - --recognition-accent controls marker, tags, and link color
   - --recognition-soft controls the background wash
   ========================================================= */

.achievements-section {
    padding-top: 4px;
}

.recognition-card {
    --recognition-radius: 20px;
    --recognition-accent: var(--portfolio-accent);
    --recognition-soft: rgba(238, 246, 246, 0.72);

    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 30px 28px;
    border: 1px solid rgba(16, 42, 45, 0.13);
    border-radius: var(--recognition-radius);
    background:
        radial-gradient(circle at 88% 10%, var(--recognition-soft), transparent 36%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(238, 246, 246, 0.45) 100%);
    box-shadow: 0 18px 38px rgba(16, 42, 45, 0.075);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.recognition-card:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 111, 115, 0.24);
    box-shadow: 0 24px 50px rgba(16, 42, 45, 0.12);
}

.recognition-card-award {
    --recognition-accent: #9a6a18;
    --recognition-soft: rgba(201, 168, 106, 0.18);
}

.recognition-card-fellowship {
    --recognition-accent: #2f6f73;
    --recognition-soft: rgba(47, 111, 115, 0.13);
}

.recognition-card-academic {
    --recognition-accent: #3f7fbf;
    --recognition-soft: rgba(64, 127, 200, 0.12);
}

.recognition-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.recognition-marker {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(16, 42, 45, 0.10);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--recognition-soft));
    color: var(--recognition-accent);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: 0 10px 22px rgba(16, 42, 45, 0.08);
}

.recognition-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--portfolio-accent);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.4;
}

.recognition-card h3 {
    margin: 0 0 12px;
    font-size: 1.16rem;
    line-height: 1.35;
    color: var(--color-dark);
}

.achievement-subtitle {
    margin: 0 0 18px;
    color: #555;
    font-weight: 800;
    line-height: 1.55;
}

.recognition-card p:not(.recognition-kicker):not(.achievement-subtitle) {
    margin: 0 0 22px;
    color: var(--color-muted);
    line-height: 1.65;
}

.recognition-proof-points {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    margin-top: auto;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.recognition-proof-points span {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-size: inherit;
    font-weight: 550;
    line-height: inherit;
}

.recognition-proof-points span:not(:last-child)::after {
    content: "•";
    margin: 0 0.42rem;
    color: var(--color-muted);
}

.recognition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.recognition-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 15px;
    border: 1px solid var(--portfolio-accent-border);
    border-radius: 999px;
    background: white;
    color: var(--portfolio-accent);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 550;
    line-height: 1;
}

.recognition-button:hover {
    background: var(--portfolio-accent-soft);
    color: var(--portfolio-accent);
}

@media (max-width: 768px) {
    .recognition-card {
        padding: 22px;
    }

    .recognition-card-top {
        align-items: flex-start;
    }

    .recognition-marker {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 14px;
    }
}

/* =========================================================
   K-MEANS SKILLS SECTION
   Main customizable controls are grouped here.
   This section uses four visual clusters around four centroids.
   ========================================================= */

.homepage-layout .skills-cluster-section {
    /* Skills section now sits directly on the page background.
       The inner map remains the visual container for the K-means concept. */
    --skills-section-margin-bottom: 72px;

    position: relative;
    margin-bottom: var(--skills-section-margin-bottom);
    padding: 0;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Outer section grid removed.
   The Skills section now uses the normal homepage background. */
.homepage-layout .skills-cluster-section::before {
    content: none;
}

.skills-cluster-header {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin-bottom: 30px;
}

.homepage-layout .skills-cluster-section .section-label {
    color: var(--portfolio-accent);
}

.homepage-layout .skills-cluster-section .section-title {
    margin-bottom: 16px;
    color: var(--color-dark);
}

.skills-cluster-intro {
    max-width: 790px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.7;
}


/* =========================================================
   K-MEANS MAP FRAME
   This is the inner plotting area that contains legend,
   centroids, and skill balls.
   ========================================================= */

.skills-cluster-map {
    /* The Skills visual now integrates directly into the white page.
       No chart frame, no border, no panel background. */
    --skills-map-height: 520px;
    --skills-map-image-opacity: 0.18;

    position: relative;
    z-index: 2;
    isolation: isolate;
    min-height: var(--skills-map-height);
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Optional custom background image layer.
   To use, add inline style to the map div:
   style="--skills-map-image: url('images/skills/your-image.jpg'); --skills-map-image-opacity: 0.35;"
*/
.skills-cluster-map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-image: var(--skills-map-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--skills-map-image-opacity);
    filter: saturate(0.92) brightness(1.04);
    pointer-events: none;
}

/* Grid and wash layer over the optional background image */
.skills-cluster-map::after {
    content: none;
}


/* =========================================================
   K-MEANS LEGEND
   Category labels in the top-left of the plot area.
   ========================================================= */

.cluster-legend {
    position: relative;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 980px;
    margin: 0 0 24px;
}

.cluster-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--color-dark);
    font-size: 0.82rem;
    font-weight: 750;
}

.legend-heading {
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 0.68rem;
    font-weight: 800;
}

.legend-centroid-note {
    color: var(--color-muted);
}

.legend-dot {
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 50%;
}

.programming-dot {
    background: #19aebc;
}

.ml-dot {
    background: #d89b28;
}

.ai-dot {
    background: #407fc8;
}

.bi-dot {
    background: #708186;
}

.centroid-dot {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    background: rgba(16, 42, 45, 0.78);
    color: rgba(255, 255, 255, 0.94);
    font-size: 1rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}


/* =========================================================
   K-MEANS CENTROIDS
   Controls the black X markers.
   Update left/top to move a centroid.
   ========================================================= */

.cluster-centroid {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
}

.centroid-marker {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: rgba(16, 42, 45, 0.78);
    color: rgba(255, 255, 255, 0.94);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

.centroid-label {
    display: none;
}

/* Diagonal centroid arrangement */
.centroid-programming {
    left: 20%;
    top: 30%;
}

.centroid-ml {
    left: 43%;
    top: 44%;
}

.centroid-ai {
    left: 64%;
    top: 58%;
}

.centroid-bi {
    left: 85%;
    top: 72%;
}


/* =========================================================
   SKILL BALL BASE STYLE
   Controls the glossy ball effect shared by all skills.
   ========================================================= */

.cluster-skill {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    -webkit-text-stroke: 0.22px rgba(8, 22, 24, 0.55);
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.32) 12%, transparent 24%),
        radial-gradient(circle at 68% 76%, rgba(255, 255, 255, 0.20) 0%, transparent 28%),
        radial-gradient(circle at 50% 46%, var(--skill-core) 0%, var(--skill-core) 36%, var(--skill-edge) 70%, var(--skill-deep) 100%);
    box-shadow:
        inset 6px 8px 18px rgba(255, 255, 255, 0.24),
        inset -12px -15px 22px rgba(0, 0, 0, 0.20),
        0 14px 28px rgba(16, 42, 45, 0.17),
        0 0 20px var(--skill-glow);
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.62),
        0 0 5px rgba(0, 0, 0, 0.34);
    animation:
        clusterHoverSmall var(--float-speed, 8s) ease-in-out infinite,
        skillBreath 6s ease-in-out infinite;
}

.cluster-skill::before {
    content: "";
    position: absolute;
    top: 14%;
    left: 17%;
    width: 27%;
    height: 19%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.24) 58%, transparent 74%);
    filter: blur(0.5px);
    transform: rotate(-14deg);
    z-index: 1;
}


/* =========================================================
   SKILL BALL SIZES
   Adjust these to scale all balls of a given size.
   ========================================================= */

.skill-lg {
    width: 96px;
    height: 96px;
    font-size: 0.80rem;
}

.skill-md {
    width: 76px;
    height: 76px;
    font-size: 0.69rem;
}

.skill-sm {
    width: 54px;
    height: 54px;
    font-size: 0.63rem;
}


/* =========================================================
   SKILL CATEGORY COLORS
   Four category colors.
   Adjust core, edge, deep, and glow to tune each group.
   ========================================================= */

.programming-skill {
    --skill-core: rgba(31, 190, 202, 0.94);
    --skill-edge: rgba(16, 126, 136, 0.90);
    --skill-deep: rgba(5, 57, 64, 0.94);
    --skill-glow: rgba(31, 190, 202, 0.28);
}

.ml-skill {
    --skill-core: rgba(238, 177, 40, 0.95);
    --skill-edge: rgba(190, 121, 18, 0.90);
    --skill-deep: rgba(87, 51, 8, 0.94);
    --skill-glow: rgba(238, 177, 40, 0.30);
}

.ai-skill {
    --skill-core: rgba(67, 143, 235, 0.95);
    --skill-edge: rgba(31, 87, 164, 0.90);
    --skill-deep: rgba(9, 39, 87, 0.94);
    --skill-glow: rgba(67, 143, 235, 0.30);
}

.bi-skill {
    --skill-core: rgba(142, 160, 166, 0.95);
    --skill-edge: rgba(83, 103, 109, 0.90);
    --skill-deep: rgba(30, 43, 47, 0.94);
    --skill-glow: rgba(142, 160, 166, 0.26);
}


/* =========================================================
   PROGRAMMING & DATA CLUSTER POSITIONS
   Move each skill with left/top percentages.
   ========================================================= */

.skill-python {
    left: 5%;
    top: 15%;
    --float-speed: 8.2s;
}

.skill-sql {
    left: 15%;
    top: 10%;
    --float-speed: 9.1s;
    animation-delay: -1.1s;
}

.skill-r {
    left: 10%;
    top: 32%;
    --float-speed: 8.7s;
    animation-delay: -2.2s;
}

.skill-html {
    left: 14%;
    top: 39%;
    --float-speed: 8.4s;
    animation-delay: -2.8s;
}

.skill-css {
    left: 20%;
    top: 44%;
    --float-speed: 9.2s;
    animation-delay: -1.7s;
}

.skill-cleaning {
    left: 23%;
    top: 28%;
    --float-speed: 8.8s;
    animation-delay: -3.2s;
}

.skill-eda {
    left: 26%;
    top: 15%;
    --float-speed: 7.9s;
    animation-delay: -2.4s;
}


/* =========================================================
   MACHINE LEARNING CLUSTER POSITIONS
   Move each skill with left/top percentages.
   ========================================================= */

.skill-ml {
    left: 32%;
    top: 37%;
    --float-speed: 8.8s;
    animation-delay: -1.2s;
}

.skill-feature {
    left: 46%;
    top: 25%;
    --float-speed: 9.4s;
    animation-delay: -2.5s;
}

.skill-timeseries {
    left: 37%;
    top: 57%;
    --float-speed: 8.3s;
    animation-delay: -3s;
}

.skill-anomaly {
    left: 46%;
    top: 45%;
    --float-speed: 8.7s;
    animation-delay: -1.8s;
}

.skill-eval {
    left: 36%;
    top: 20%;
    --float-speed: 9s;
    animation-delay: -3.3s;
}


/* =========================================================
   AI ENGINEERING CLUSTER POSITIONS
   Move each skill with left/top percentages.
   ========================================================= */

.skill-rag {
    left: 60%;
    top: 29%;
    --float-speed: 8.4s;
    animation-delay: -2.2s;
}

.skill-mlops {
    left: 66%;
    top: 60%;
    --float-speed: 9.2s;
    animation-delay: -1.4s;
}

.skill-cloud {
    left: 70%;
    top: 44%;
    --float-speed: 8.6s;
    animation-delay: -2.9s;
}

.skill-research {
    left: 58%;
    top: 64%;
    --float-speed: 9.5s;
    animation-delay: -3.8s;
}

.skill-git {
    left: 56%;
    top: 49%;
    --float-speed: 7.9s;
    animation-delay: -2.1s;
}


/* =========================================================
   BI & STATISTICS CLUSTER POSITIONS
   Move each skill with left/top percentages.
   ========================================================= */

.skill-powerbi {
    left: 82%;
    top: 47%;
    --float-speed: 9.1s;
    animation-delay: -1.6s;
}

.skill-tableau {
    left: 89%;
    top: 62%;
    --float-speed: 8.6s;
    animation-delay: -3.1s;
}

.skill-stats {
    left: 75%;
    top: 72%;
    --float-speed: 8.9s;
    animation-delay: -2.3s;
}

.skill-dashboard {
    left: 85%;
    top: 77%;
    --float-speed: 9.3s;
    animation-delay: -2.7s;
}

.skill-business {
    left: 76%;
    top: 56%;
    --float-speed: 8.1s;
    animation-delay: -3.7s;
}


/* =========================================================
   SKILL BALL MOTION
   CSS provides a fallback animation.
   JavaScript upgrades the movement when skills-cluster.js loads.

   Main JS controls are inside skills-cluster.js:
   - driftRadius
   - driftVariation
   - speedBase
   - mouseInfluenceRadius
   - mousePushStrength
   ========================================================= */

/* Fallback motion if JavaScript does not load */
.programming-skill,
.ai-skill {
    animation-name: clusterHoverSmall, skillBreath;
}

.ml-skill,
.bi-skill {
    animation-name: clusterHoverSmallReverse, skillBreath;
}

@keyframes clusterHoverSmall {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    35% {
        transform: translate3d(5px, -6px, 0) scale(1.015);
    }

    70% {
        transform: translate3d(-5px, 5px, 0) scale(0.995);
    }
}

@keyframes clusterHoverSmallReverse {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    35% {
        transform: translate3d(-5px, 6px, 0) scale(1.015);
    }

    70% {
        transform: translate3d(5px, -5px, 0) scale(0.995);
    }
}

@keyframes skillBreath {
    0%,
    100% {
        filter: saturate(1) brightness(1);
    }

    50% {
        filter: saturate(1.12) brightness(1.07);
    }
}

/* JavaScript-enabled motion.
   JS updates these CSS variables:
   --skill-js-x
   --skill-js-y
   --skill-js-scale
*/
.skills-js-enabled .cluster-skill {
    animation: skillBreath 6s ease-in-out infinite;
    transform:
        translate3d(
            var(--skill-js-x, 0px),
            var(--skill-js-y, 0px),
            0
        )
        scale(var(--skill-js-scale, 1));
    will-change: transform, filter;
}

.cluster-skill:hover,
.cluster-skill:focus-visible {
    z-index: 20;
    animation-play-state: paused;
    filter: saturate(1.18) brightness(1.08);
    cursor: help;
}

.cluster-skill:focus-visible {
    outline: 3px solid rgba(47, 111, 115, 0.34);
    outline-offset: 5px;
}

/* Skill micro-tooltips:
   Uses each skill's data-skill-note value.
   Each note should sell practical usage, not merely repeat the skill label. */
.cluster-skill::after {
    content: attr(data-skill-note);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 30;
    width: max-content;
    max-width: 260px;
    padding: 9px 12px;
    border: 1px solid rgba(16, 42, 45, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--color-dark);
    font-size: 0.76rem;
    font-weight: 150;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    text-shadow: none;
    box-shadow: 0 14px 28px rgba(16, 42, 45, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition:
        opacity 140ms ease,
        visibility 140ms ease,
        transform 140ms ease;
    pointer-events: none;
}

.cluster-skill:hover::after,
.cluster-skill:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .cluster-skill,
    .skills-js-enabled .cluster-skill {
        animation: none;
        transform: none;
    }
}

.skills-mobile-visual {
    display: none;
}

/* =========================================================
   HOMEPAGE RESPONSIVE BEHAVIOR
   Covers homepage layout, project carousel, presentations,
   and Skills section mobile behavior.
   ========================================================= */

@media (max-width: 1000px) {
    .homepage-layout {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 42px 24px 0;
    }

    .homepage-layout .homepage-side-nav {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 6px;
        transform: none;
    }

    .homepage-layout .homepage-side-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        line-height: 1.2;
    }

    .homepage-layout .section {
        padding-bottom: 62px;
    }

    /* Mobile carousel tuning:
       Cards stay swipeable, but arrows move below the card so they do not cover text. */
    .project-carousel {
        --project-card-width: min(84vw, 360px);
        --project-card-height: 318px;
        --project-card-gap: 14px;

        padding-bottom: 58px;
    }

    .section-projects .project-grid {
        overflow-x: auto;
        align-items: stretch;
        padding: 18px 24px 28px;
        margin: 0 -24px;
        scroll-padding-left: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .section-projects .project-grid::-webkit-scrollbar {
        display: none;
    }

    .section-projects .project-grid > .project-card.is-active {
        transform: none;
    }

    .homepage-layout .carousel-button {
        top: auto;
        bottom: 0;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .homepage-layout .carousel-button-left {
        left: calc(50% - 52px);
    }

    .homepage-layout .carousel-button-right {
        right: calc(50% - 52px);
    }


    /* Mobile Skills layout:
       Keeps the K-means idea on desktop, but turns mobile into a compact clustered chip map. */
   .homepage-layout .skills-cluster-section {
        margin-bottom: 58px;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .skills-cluster-intro {
        margin-bottom: 22px;
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .homepage-layout .skills-cluster-section .cluster-legend,
    .homepage-layout .skills-cluster-section .skills-cluster-map {
        display: none;
    }

    .skills-mobile-visual {
        display: block;
        max-width: 520px;
        margin: 24px auto 0;
    }

    .skills-mobile-visual a {
        display: block;
        cursor: zoom-in;
    }

    .skills-mobile-visual img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 18px;
    }
}

@media (max-width: 768px) {
    .homepage-layout {
        padding: 36px 24px 0;
    }

    .credential-card,
    .recognition-card {
        padding: 22px;
    }
}


/* =========================================================
   SHARED ENERGY + SMART CITY PROJECT FOUNDATION
   Structural rules shared by the two analytics case-study pages.
   Page-specific colors, hero images, metrics, visual sizing,
   and responsive behavior remain in their own sections below.
   ========================================================= */

/* Hero structure and controls */

.energy-page-hero::after,
.smart-city-page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

.energy-hero-back:hover,
.smart-city-hero-back:hover {
    color: var(--color-gold);
}

.energy-hero-source:hover,
.smart-city-hero-source:hover {
    border-color: rgba(201, 168, 106, 0.78);
    background: rgba(201, 168, 106, 0.16);
    color: var(--color-gold);
    transform: translateY(-2px);
}

.energy-page-hero-inner,
.smart-city-page-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.58fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}

.energy-page-hero-copy .section-label,
.smart-city-page-hero-copy .section-label {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-weight: 850;
}

.energy-page-hero-copy p,
.smart-city-page-hero-copy p {
    max-width: 790px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.7;
}

.energy-page-hero-copy .detail-tags,
.smart-city-page-hero-copy .detail-tags {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    font-weight: 750;
}

.energy-hero-metrics,
.smart-city-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.energy-hero-metric,
.smart-city-hero-metric {
    min-height: 122px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 168, 106, 0.14), transparent 38%),
        rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.energy-hero-metric-label,
.smart-city-hero-metric-label {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Body layout, navigation, and section rhythm */

.energy-page-sidebar,
.smart-city-page-sidebar {
    min-width: 0;
    padding-top: 4px;
}

.energy-section-nav a,
.smart-city-section-nav a {
    display: block;
    padding: 13px 0 12px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.18);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.energy-body-content,
.smart-city-body-content {
    min-width: 0;
}

.energy-body-content .detail-section,
.smart-city-body-content .detail-section {
    max-width: none;
    padding: 0 0 38px;
    margin-bottom: 42px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
    scroll-margin-top: 32px;
}

.energy-body-content .detail-section:first-child,
.smart-city-body-content .detail-section:first-child {
    padding-top: 0;
}

.energy-body-content .detail-section:last-child,
.smart-city-body-content .detail-section:last-child {
    margin-bottom: 0;
}

.energy-body-content .detail-section h2,
.smart-city-body-content .detail-section h2 {
    position: relative;
    margin-bottom: 18px;
    color: var(--color-dark);
    font-size: clamp(1.8rem, 2.3vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

/* Expandable visual links */

.energy-certificate-card a,
.energy-workflow-figure a,
.energy-visual-card a,
.energy-wide-visual a,
.smart-city-visual-card a {
    display: block;
    cursor: zoom-in;
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   COMMERCIAL BUILDING ENERGY FORECASTING PROJECT PAGE
   Clean replacement CSS block.

   Page file:
   - projects/energy-forecasting.html

   Scope:
   - All rules are scoped to .energy-page or energy-specific classes.
   - This avoids affecting Ariel, Resource Matching, research pages, or homepage cards.

   HOW TO CUSTOMIZE:
   - The tuning panel below controls the page.
   - For chart size, change the width or height variables in Section 1 only.
   ========================================================= */


/* =========================================================
   1. PAGE TUNING PANEL
   Edit these variables first.
   ========================================================= */

.energy-page {
    /* Layout */
    --energy-page-max: 1660px;
    --energy-sidebar-width: 170px;
    --energy-content-gap: 64px;
    --energy-sidebar-offset-x: -34px;
    --energy-padding-x: clamp(28px, 4vw, 72px);

    /* Colors */
    --energy-accent: #2f6f73;
    --energy-accent-dark: #0d3f44;
    --energy-text: #263234;
    --energy-muted: #5f6f72;
    --energy-soft: rgba(238, 246, 246, 0.72);
    --energy-border: rgba(16, 42, 45, 0.12);

    /* Shadows */
    --energy-card-shadow: 0 16px 34px rgba(16, 42, 45, 0.065);
    --energy-card-shadow-hover: 0 22px 46px rgba(16, 42, 45, 0.10);

    /* Hero */
    --energy-hero-image: url("images/projects/cards/data-olympiad-bg.jpg");
    --energy-hero-position: center;
    --energy-hero-min-height: 560px;
    --energy-hero-overlay-left: rgba(7, 31, 36, 0.94);
    --energy-hero-overlay-mid: rgba(16, 42, 45, 0.78);
    --energy-hero-overlay-right: rgba(9, 28, 48, 0.44);

    /* General cards */
    --energy-card-radius: 18px;
    --energy-card-padding: 24px;
    --energy-card-bg:
        radial-gradient(circle at 90% 10%, rgba(238, 246, 246, 0.72), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(238, 246, 246, 0.44) 100%);

    /* Highlight metric cards */
    --energy-highlight-bg:
        radial-gradient(circle at 88% 10%, rgba(47, 111, 115, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(231, 242, 243, 0.28) 0%,
            rgba(217, 235, 236, 0.22) 56%,
            rgba(199, 224, 226, 0.94) 100%
        );

    /* Certificate controls.
       Reduce --energy-certificate-max-height if the certificate feels too tall. */
    --energy-certificate-max-height: 390px;
    --energy-certificate-padding: 10px;

    /* Analytical workflow image controls */
    --energy-workflow-max-width: 1100px;
    --energy-workflow-image-width: 100%;
    --energy-workflow-image-max-height: none;
    --energy-workflow-image-radius: 16px;
    --energy-workflow-caption-width: 920px;
    --energy-workflow-caption-align: center;
    --energy-workflow-top-margin: 30px;

    /* Paired chart card controls.
       These apply to charts that remain inside visual cards. */
    --energy-visual-max: 1120px;
    --energy-visual-gap: 22px;
    --energy-visual-card-height: 300px;
    --energy-visual-card-padding: 8px;

    /* Individual paired chart heights */
    --energy-building-type-height: 620px;
    --energy-hourly-height: 620px;
    --energy-shap-height: 300px;
    --energy-weather-height: 300px;

    /* Direct-on-page chart controls.
       These charts are NOT inside visible cards.
       Reduce width to make the chart visually shorter while preserving aspect ratio. */
    --energy-seasonal-width: 860px;
    --energy-xgboost-width: 700px;

    /* Direct chart caption controls */
    --energy-direct-caption-width: 900px;
    --energy-direct-caption-align: center;

    /* Forecasting model metric cards */
    --energy-model-metric-min-height: 112px;
    --energy-model-metric-padding: 18px 22px;
    --energy-model-metric-value-size: 1.5rem;

    max-width: none;
    padding: 0;
    background: #ffffff;
}


/* =========================================================
   2. HERO SECTION
   ========================================================= */

.energy-page-hero {
    position: relative;
    width: 100vw;
    min-height: var(--energy-hero-min-height);
    margin-left: calc(50% - 50vw);
    padding: 82px var(--energy-padding-x) 28px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(
            90deg,
            var(--energy-hero-overlay-left) 0%,
            var(--energy-hero-overlay-mid) 48%,
            var(--energy-hero-overlay-right) 100%
        ),
        radial-gradient(circle at 17% 24%, rgba(201, 168, 106, 0.20), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(47, 111, 115, 0.24), transparent 34%),
        var(--energy-hero-image);
    background-size: cover;
    background-position: var(--energy-hero-position);
}


.energy-hero-back {
    position: absolute;
    top: 28px;
    left: var(--energy-padding-x);
    z-index: 2;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}


.energy-hero-source {
    position: absolute;
    right: var(--energy-padding-x);
    bottom: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 168, 106, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}


.energy-page-hero-copy h1 {
    max-width: 660px;
    margin: 0 0 18px;
    color: white;
    font-size: clamp(1.2rem, 2.4vw, 2.5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.energy-page-hero-copy h2 {
    max-width: 840px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.25rem, 1vw, 1.78rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
}


/* Hero metric cards */


.energy-hero-metric-value {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: clamp(1.65rem, 2.5vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}


.energy-money-count {
    font-variant-numeric: tabular-nums;
}

.energy-money-count.is-counting {
    color: #f3d58a;
}

.energy-money-count.has-counted {
    color: white;
}

/* =========================================================
   3. BODY LAYOUT AND SIDE NAV
   ========================================================= */

.energy-body-layout {
    max-width: var(--energy-page-max);
    margin: 0 auto;
    padding: 56px var(--energy-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--energy-sidebar-width) minmax(0, 1fr);
    gap: var(--energy-content-gap);
}


.energy-section-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateX(var(--energy-sidebar-offset-x));
}


.energy-section-nav a:hover,
.energy-section-nav a:focus-visible {
    color: var(--energy-accent);
    border-bottom-color: var(--energy-accent);
    transform: translateX(8px);
}


.energy-body-content .detail-section h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--energy-accent));
}

.energy-body-content .detail-section p {
    max-width: 850px;
    color: var(--energy-text);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   4. SHARED CARD SYSTEM
   ========================================================= */

.energy-body-content .metric-card,
.energy-body-content .approach-card,
.energy-body-content .contribution-card,
.energy-body-content .artifact-card,
.energy-visual-card,
.energy-wide-visual,
.energy-certificate-card,
.energy-certificate-copy {
    border: 1px solid var(--energy-border);
    border-radius: var(--energy-card-radius);
    background: var(--energy-card-bg);
    box-shadow: var(--energy-card-shadow);
}

.energy-body-content .metric-card,
.energy-body-content .approach-card,
.energy-body-content .contribution-card,
.energy-body-content .artifact-card {
    padding: var(--energy-card-padding);
}

.energy-body-content .metric-card:hover,
.energy-body-content .approach-card:hover,
.energy-body-content .contribution-card:hover,
.energy-body-content .artifact-card:hover,
.energy-visual-card:hover,
.energy-wide-visual:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 115, 0.24);
    box-shadow: var(--energy-card-shadow-hover);
}

.energy-body-content .approach-card h3,
.energy-body-content .contribution-card h3,
.energy-body-content .artifact-card h3 {
    color: var(--color-dark);
    line-height: 1.3;
}


/* =========================================================
   5. OVERVIEW, PROBLEM, IMPACT, AND MODEL METRICS
   ========================================================= */

.energy-summary-grid,
.energy-impact-grid {
    max-width: 1060px;
    margin: 30px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.energy-summary-grid .metric-value,
.energy-impact-grid .metric-value,
.energy-model-metrics .metric-value {
    color: var(--energy-accent-dark);
}

.energy-summary-grid .metric-label,
.energy-impact-grid .metric-label,
.energy-model-metrics .metric-label {
    color: #243f42;
}

.energy-problem-grid {
    max-width: 1060px;
}

.energy-problem-grid .approach-card:last-child {
    grid-column: auto;
}

.energy-impact-grid .metric-card {
    border-color: rgba(15, 79, 85, 0.18);
    background: var(--energy-highlight-bg);
}

.energy-recommendation-grid {
    max-width: 1060px;
}

.energy-recommendation-grid .approach-card:last-child {
    grid-column: auto;
}

.energy-model-metrics {
    max-width: 1060px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.energy-model-metrics .metric-card {
    min-height: var(--energy-model-metric-min-height);
    padding: var(--energy-model-metric-padding);
}

.energy-model-metrics .metric-value {
    margin-bottom: 6px;
    font-size: var(--energy-model-metric-value-size);
    line-height: 1;
}

.energy-model-metrics .metric-label {
    line-height: 1.45;
}


/* =========================================================
   6. CERTIFICATE SECTION
   ========================================================= */

.energy-certificate-showcase {
    max-width: 1120px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.65fr);
    gap: 22px;
    align-items: stretch;
}

/* Certificate image holder.
   The certificate now sits directly on the page background.
   No card border, no card background, no shadow. */

.energy-certificate-card {
    margin: 0;
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Certificate image size.
   Change --energy-certificate-max-height near the top of .energy-page
   if you want it shorter or taller. */

.energy-certificate-card img {
    width: auto;
    max-width: 100%;
    max-height: var(--energy-certificate-max-height);
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
    background: transparent;
}


.energy-certificate-copy {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.energy-proof-label {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--energy-accent);
    font-size: 0.76rem;
    font-weight: 900;
}

.energy-certificate-copy h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-size: 1.45rem;
    line-height: 1.25;
}

.energy-proof-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.energy-proof-points span {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid rgba(47, 111, 115, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--energy-accent);
    font-size: 0.78rem;
    font-weight: 850;
}


/* =========================================================
   7. ANALYTICAL WORKFLOW IMAGE
   Direct-on-page workflow visual.

   The workflow image sits directly on the page background:
   - no card border
   - no card background
   - no shadow
   - no caption

   Tuning:
   - --energy-workflow-max-width controls the figure width
   - --energy-workflow-image-radius controls image corner softness
   - --energy-workflow-top-margin controls spacing above the image
   ========================================================= */

.energy-workflow-figure {
    max-width: var(--energy-workflow-max-width);
    margin: var(--energy-workflow-top-margin) 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.energy-workflow-figure img {
    width: var(--energy-workflow-image-width);
    max-width: 100%;
    height: auto;
    max-height: var(--energy-workflow-image-max-height);
    display: block;
    margin: 0 auto;
    border: none;
    border-radius: var(--energy-workflow-image-radius);
    background: transparent;
    box-shadow: none;
}

.energy-workflow-figure figcaption {
    display: none;
}


/* =========================================================
   8. GENERAL VISUAL CARD SYSTEM
   Used for paired charts that should stay inside cards:
   - building-type-energy-usage.png
   - hourly-energy-usage.png
   - shap-feature-importance.png
   - weather-feature-contribution.png
   ========================================================= */

.energy-visual-grid {
    max-width: var(--energy-visual-max);
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--energy-visual-gap);
}

.energy-visual-card,
.energy-wide-visual {
    margin: 0;
    overflow: hidden;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.energy-visual-card img {
    width: 100%;
    height: var(--energy-visual-card-height);
    display: block;
    padding: var(--energy-visual-card-padding);
    object-fit: contain;
    object-position: center;
    background: white;
}

.energy-visual-card figcaption,
.energy-wide-visual figcaption {
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(16, 42, 45, 0.10);
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1;
}


/* Individual paired chart controls */

.energy-visual-card img[src$="building-type-energy-usage.png"] {
    height: var(--energy-building-type-height);
}

.energy-visual-card img[src$="hourly-energy-usage.png"] {
    height: var(--energy-hourly-height);
}

.energy-visual-card img[src$="shap-feature-importance.png"] {
    height: var(--energy-shap-height);
}

.energy-visual-card img[src$="weather-feature-contribution.png"] {
    height: var(--energy-weather-height);
}


/* =========================================================
   9. DIRECT-ON-PAGE WIDE CHARTS
   These charts are intentionally removed from card frames:
   - seasonal-energy-trends.png
   - xgboost-actual-vs-predicted.png

   To resize them:
   - Change --energy-seasonal-width
   - Change --energy-xgboost-width
   ========================================================= */

.energy-wide-visual:has(img[src$="seasonal-energy-trends.png"]),
.energy-wide-visual:has(img[src$="xgboost-actual-vs-predicted.png"]) {
    max-width: var(--energy-visual-max);
    margin-top: 26px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.energy-wide-visual:has(img[src$="seasonal-energy-trends.png"]):hover,
.energy-wide-visual:has(img[src$="xgboost-actual-vs-predicted.png"]):hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.energy-wide-visual img[src$="seasonal-energy-trends.png"] {
    width: min(100%, var(--energy-seasonal-width));
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.energy-wide-visual img[src$="xgboost-actual-vs-predicted.png"] {
    width: min(100%, var(--energy-xgboost-width));
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.energy-wide-visual:has(img[src$="seasonal-energy-trends.png"]) figcaption,
.energy-wide-visual:has(img[src$="xgboost-actual-vs-predicted.png"]) figcaption {
    max-width: var(--energy-direct-caption-width);
    margin: 0 auto;
    padding: 12px 0 0;
    border-top: none;
    background: transparent;
    text-align: var(--energy-direct-caption-align);
}


/* =========================================================
   10. EVIDENCE NOTE, ROLE, AND ARTIFACTS
   ========================================================= */

.energy-body-content .evidence-note {
    max-width: 920px;
    margin: 30px 0 0;
    padding: 24px 26px;
    border-left: 5px solid var(--energy-accent);
    border-radius: 0 18px 18px 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--energy-soft) 100%);
    box-shadow: var(--energy-card-shadow);
}

.energy-body-content .evidence-note h3 {
    color: var(--color-dark);
}

.energy-role-grid {
    max-width: 1060px;
}

.energy-artifact-grid {
    max-width: 1060px;
}

.energy-artifact-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    color: var(--energy-accent);
    text-decoration: none;
    font-weight: 850;
}

.energy-artifact-link:hover {
    color: var(--color-dark);
}


/* =========================================================
   11. RESPONSIVE BEHAVIOR
   ========================================================= */

@media (max-width: 1000px) {
    .energy-page {
        --energy-hero-min-height: auto;

        --energy-certificate-max-height: 360px;
        --energy-seasonal-width: 760px;
        --energy-xgboost-width: 700px;

        --energy-building-type-height: 300px;
        --energy-hourly-height: 280px;
        --energy-shap-height: 260px;
        --energy-weather-height: 260px;
    }

    .energy-page-hero {
        min-height: var(--energy-hero-min-height);
        padding: 76px 24px 58px;
    }

    .energy-page-hero-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .energy-hero-metrics,
    .energy-summary-grid,
    .energy-impact-grid,
    .energy-model-metrics,
    .energy-certificate-showcase,
    .energy-visual-grid {
        grid-template-columns: 1fr;
    }

    .energy-body-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px 24px 70px;
    }

    .energy-section-nav {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .energy-section-nav::-webkit-scrollbar {
        display: none;
    }

    .energy-section-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        color: var(--color-muted);
        font-size: 0.82rem;
    }

    .energy-section-nav a:hover,
    .energy-section-nav a:focus-visible {
        transform: none;
        color: var(--energy-accent);
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }
}

@media (max-width: 560px) {
    .energy-page {
        --energy-certificate-max-height: 300px;
        --energy-seasonal-width: 100%;
        --energy-xgboost-width: 100%;

        --energy-building-type-height: 250px;
        --energy-hourly-height: 240px;
        --energy-shap-height: 230px;
        --energy-weather-height: 230px;

        --energy-visual-card-padding: 6px;
        --energy-workflow-image-radius: 12px;
        --energy-workflow-caption-width: 100%;
    }

    .energy-page-hero {
        padding: 68px 22px 48px;
    }

    .energy-hero-back {
        top: 22px;
        left: 22px;
        font-size: 0.88rem;
    }

    .energy-hero-source {
        right: 22px;
        bottom: 22px;
        min-height: 38px;
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .energy-page-hero-copy h1 {
        font-size: clamp(2.1rem, 12vw, 3rem);
        line-height: 1.02;
    }

    .energy-page-hero-copy h2 {
        font-size: 1.12rem;
        line-height: 1.45;
    }

    .energy-page-hero-copy p {
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .energy-page-hero-copy .detail-tags {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .energy-body-layout {
        padding: 32px 22px 72px;
    }

    .energy-body-content .detail-section {
        padding-bottom: 30px;
        margin-bottom: 32px;
    }

    .energy-body-content .detail-section h2 {
        font-size: 1.75rem;
    }

    .energy-body-content .metric-card,
    .energy-body-content .approach-card,
    .energy-body-content .contribution-card,
    .energy-body-content .artifact-card,
    .energy-certificate-copy {
        padding: 20px;
    }

    .energy-visual-card figcaption,
    .energy-wide-visual figcaption {
        padding: 14px 16px 16px;
    }


}

/* =========================================================
   SMART CITY ANOMALY DETECTION PROJECT PAGE
   Compact unsupervised ML case-study page.

   Page file:
   - projects/smart-city.html

   Scope:
   - All rules are scoped to .smart-city-page or smart-city-specific classes.
   - This avoids affecting Ariel, Resource Matching, Energy Forecasting,
     research pages, or homepage cards.

   Tunable controls:
   - --smart-city-hero-image controls the hero background
   - --smart-city-page-max controls the content width
   - --smart-city-visual-height controls chart card image height
   ========================================================= */

.smart-city-page {
    --smart-city-page-max: 1660px;
    --smart-city-sidebar-width: 170px;
    --smart-city-content-gap: 64px;
    --smart-city-sidebar-offset-x: -34px;
    --smart-city-padding-x: clamp(28px, 4vw, 72px);

    --smart-city-accent: #2f6f73;
    --smart-city-accent-dark: #0d3f44;
    --smart-city-text: #263234;
    --smart-city-muted: #5f6f72;
    --smart-city-soft: rgba(238, 246, 246, 0.72);
    --smart-city-border: rgba(16, 42, 45, 0.12);

    --smart-city-card-radius: 18px;
    --smart-city-card-shadow: 0 16px 34px rgba(16, 42, 45, 0.065);
    --smart-city-card-shadow-hover: 0 22px 46px rgba(16, 42, 45, 0.10);

    --smart-city-hero-image: url("images/projects/cards/smart-city-anomaly-bg1.jpg");
    --smart-city-hero-position: center;
    --smart-city-hero-min-height: 540px;

    --smart-city-card-bg:
        radial-gradient(circle at 90% 10%, rgba(238, 246, 246, 0.72), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(238, 246, 246, 0.44) 100%);

    --smart-city-highlight-bg:
        radial-gradient(circle at 88% 10%, rgba(47, 111, 115, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(231, 242, 243, 0.28) 0%,
            rgba(217, 235, 236, 0.22) 56%,
            rgba(199, 224, 226, 0.94) 100%
        );

    --smart-city-visual-max: 1120px;
    --smart-city-visual-gap: 22px;
    --smart-city-visual-height: 330px;

    background: #ffffff;
}

/* Hero */

.smart-city-detail-page.detail-page {
    max-width: none;
    margin: 0;
    padding: 0;
}

.smart-city-page-hero {
    position: relative;
    width: 100vw;
    min-height: var(--smart-city-hero-min-height);
    margin-left: calc(50% - 50vw);
    padding: 82px var(--smart-city-padding-x) 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(
            90deg,
            rgba(7, 25, 31, 0.94) 0%,
            rgba(10, 36, 50, 0.78) 48%,
            rgba(9, 28, 48, 0.42) 100%
        ),
        radial-gradient(circle at 17% 24%, rgba(201, 168, 106, 0.20), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(47, 111, 115, 0.24), transparent 34%),
        var(--smart-city-hero-image);
    background-size: cover;
    background-position: var(--smart-city-hero-position);
}


.smart-city-hero-back {
    position: absolute;
    top: 28px;
    left: var(--smart-city-padding-x);
    z-index: 2;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}


.smart-city-hero-source {
    position: absolute;
    right: var(--smart-city-padding-x);
    bottom: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 168, 106, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}


.smart-city-page-hero-copy h1 {
    max-width: 720px;
    margin: 0 0 18px;
    color: white;
    font-size: clamp(1.45rem, 3vw, 3.3rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.smart-city-page-hero-copy h2 {
    max-width: 920px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: -0.025em;
}


.smart-city-hero-metric-value {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: clamp(1.45rem, 2.3vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}


/* Body layout */

.smart-city-body-layout {
    max-width: var(--smart-city-page-max);
    margin: 0 auto;
    padding: 56px var(--smart-city-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--smart-city-sidebar-width) minmax(0, 1fr);
    gap: var(--smart-city-content-gap);
}


.smart-city-section-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateX(var(--smart-city-sidebar-offset-x));
}


.smart-city-section-nav a:hover,
.smart-city-section-nav a:focus-visible {
    color: var(--smart-city-accent);
    border-bottom-color: var(--smart-city-accent);
    transform: translateX(8px);
}


.smart-city-body-content .detail-section h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--smart-city-accent));
}

.smart-city-body-content .detail-section p {
    max-width: 850px;
    color: var(--smart-city-text);
    font-size: 1.02rem;
    line-height: 1.75;
}

.smart-city-body-content .metric-card,
.smart-city-body-content .approach-card,
.smart-city-body-content .contribution-card,
.smart-city-body-content .artifact-card,
.smart-city-visual-card {
    border: 1px solid var(--smart-city-border);
    border-radius: var(--smart-city-card-radius);
    background: var(--smart-city-card-bg);
    box-shadow: var(--smart-city-card-shadow);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.smart-city-body-content .metric-card,
.smart-city-body-content .approach-card,
.smart-city-body-content .contribution-card,
.smart-city-body-content .artifact-card {
    padding: 24px;
}

.smart-city-body-content .metric-card:hover,
.smart-city-body-content .approach-card:hover,
.smart-city-body-content .contribution-card:hover,
.smart-city-body-content .artifact-card:hover,
.smart-city-visual-card:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 115, 0.24);
    box-shadow: var(--smart-city-card-shadow-hover);
}

.smart-city-body-content .metric-value {
    color: var(--smart-city-accent-dark);
}

.smart-city-body-content .metric-label {
    color: #243f42;
}

.smart-city-summary-grid {
    max-width: 1060px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-city-summary-grid .metric-card {
    background: var(--smart-city-highlight-bg);
}

.smart-city-workflow-grid,
.smart-city-role-grid {
    max-width: 1060px;
}

.smart-city-workflow-grid .approach-card:last-child,
.smart-city-role-grid .contribution-card:last-child {
    grid-column: auto;
}

.smart-city-card-number {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--smart-city-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.smart-city-pipeline {
    max-width: 1060px;
}

.smart-city-body-content .pipeline-step {
    min-height: 132px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 10%, rgba(201, 168, 106, 0.11), transparent 34%),
        linear-gradient(180deg, var(--smart-city-soft), #ffffff);
    box-shadow: 0 14px 28px rgba(16, 42, 45, 0.055);
}

/* Visuals */

.smart-city-visual-grid {
    max-width: var(--smart-city-visual-max);
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--smart-city-visual-gap);
}

.smart-city-visual-card {
    margin: 0;
    overflow: hidden;
}


.smart-city-visual-card img {
    width: 100%;
    height: var(--smart-city-visual-height);
    display: block;
    padding: 8px;
    object-fit: contain;
    object-position: center;
    background: white;
}

.smart-city-visual-card figcaption {
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(16, 42, 45, 0.10);
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.smart-city-visual-card figcaption strong {
    color: var(--color-dark);
}

.smart-city-body-content .evidence-note {
    max-width: 920px;
    margin: 30px 0 0;
    padding: 24px 26px;
    border-left: 5px solid var(--smart-city-accent);
    border-radius: 0 18px 18px 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--smart-city-soft) 100%);
    box-shadow: var(--smart-city-card-shadow);
}

.smart-city-body-content .evidence-note h3 {
    color: var(--color-dark);
}

.smart-city-artifact-grid {
    max-width: 1060px;
}

.smart-city-artifact-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    color: var(--smart-city-accent);
    text-decoration: none;
    font-weight: 850;
}

.smart-city-artifact-link:hover {
    color: var(--color-dark);
}

/* Responsive */

@media (max-width: 1000px) {
    .smart-city-page {
        --smart-city-hero-min-height: auto;
        --smart-city-visual-height: 280px;
    }

    .smart-city-page-hero {
        min-height: var(--smart-city-hero-min-height);
        padding: 76px 24px 58px;
    }

    .smart-city-page-hero-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .smart-city-hero-metrics,
    .smart-city-summary-grid,
    .smart-city-visual-grid {
        grid-template-columns: 1fr;
    }

    .smart-city-body-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px 24px 70px;
    }

    .smart-city-section-nav {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .smart-city-section-nav::-webkit-scrollbar {
        display: none;
    }

    .smart-city-section-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        color: var(--color-muted);
        font-size: 0.82rem;
    }

    .smart-city-section-nav a:hover,
    .smart-city-section-nav a:focus-visible {
        transform: none;
        color: var(--smart-city-accent);
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }
}

@media (max-width: 560px) {
    .smart-city-page {
        --smart-city-visual-height: 230px;
    }

    .smart-city-page-hero {
        padding: 92px 22px 36px;
        align-items: flex-start;
    }

    .smart-city-hero-back {
        top: 20px;
        left: 22px;
        font-size: 0.88rem;
    }

    /* Mobile fix:
       Move the source button away from the metric cards.
       This prevents it from overlapping the last hero metric. */
    .smart-city-hero-source {
        top: 52px;
        right: auto;
        bottom: auto;
        left: 22px;
        min-height: 34px;
        padding: 9px 13px;
        font-size: 0.76rem;
    }

    .smart-city-page-hero-inner {
        gap: 24px;
    }

    .smart-city-page-hero-copy h1 {
        max-width: 340px;
        font-size: clamp(2.25rem, 10.5vw, 3rem);
        line-height: 1.02;
    }

    .smart-city-page-hero-copy h2 {
        font-size: 1.06rem;
        line-height: 1.4;
    }

    .smart-city-page-hero-copy p {
        font-size: 0.94rem;
        line-height: 1.62;
    }

    .smart-city-page-hero-copy .detail-tags {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    /* Mobile hero metric compression:
       2 columns reduces hero height and keeps the highlights readable. */
    .smart-city-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .smart-city-hero-metric {
        min-height: 92px;
        padding: 14px;
        border-radius: 16px;
    }

    .smart-city-hero-metric-value {
        margin-bottom: 6px;
        font-size: 1.35rem;
        line-height: 1.05;
    }

    .smart-city-hero-metric-label {
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .smart-city-body-layout {
        padding: 32px 22px 72px;
    }

    .smart-city-body-content .detail-section {
        padding-bottom: 30px;
        margin-bottom: 32px;
    }

    .smart-city-body-content .detail-section h2 {
        font-size: 1.75rem;
    }

    .smart-city-body-content .metric-card,
    .smart-city-body-content .approach-card,
    .smart-city-body-content .contribution-card,
    .smart-city-body-content .artifact-card {
        padding: 20px;
    }

    .smart-city-visual-card img {
        padding: 6px;
    }

    .smart-city-visual-card figcaption {
        padding: 14px 16px 16px;
    }
}


/* =========================================================
   CLASSIFICATION PROJECT PAGE FOUNDATION
   Shared structure for:
   - Breast Cancer Classification
   - Customer Purchase Prediction

   Page-specific colors, images, charts, and specialist layouts
   remain in their dedicated sections below.
   ========================================================= */

/* Page design tokens */

.breast-cancer-page {
    --breast-cancer-page-max: 1660px;
    --breast-cancer-sidebar-width: 170px;
    --breast-cancer-content-gap: 64px;
    --breast-cancer-sidebar-offset-x: -34px;
    --breast-cancer-padding-x: clamp(28px, 4vw, 72px);

    --breast-cancer-accent: #8a4b63;
    --breast-cancer-accent-dark: #572a3c;
    --breast-cancer-text: #2f2d32;
    --breast-cancer-muted: #6f6570;
    --breast-cancer-soft: rgba(251, 240, 245, 0.72);
    --breast-cancer-border: rgba(87, 42, 60, 0.13);

    --breast-cancer-card-radius: 18px;
    --breast-cancer-card-shadow: 0 16px 34px rgba(87, 42, 60, 0.065);
    --breast-cancer-card-shadow-hover: 0 22px 46px rgba(87, 42, 60, 0.10);

    --breast-cancer-hero-image: url("images/projects/cards/breast-cancer-ml-bg.jpg");
    --breast-cancer-hero-position: center;
    --breast-cancer-hero-min-height: 540px;

    --breast-cancer-card-bg:
        radial-gradient(circle at 90% 10%, rgba(251, 240, 245, 0.74), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(251, 240, 245, 0.46) 100%);

    --breast-cancer-highlight-bg:
        radial-gradient(circle at 88% 10%, rgba(138, 75, 99, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(251, 240, 245, 0.34) 0%,
            rgba(248, 231, 239, 0.28) 56%,
            rgba(243, 216, 229, 0.92) 100%
        );

    --breast-cancer-visual-max: 1120px;
    --breast-cancer-visual-gap: 22px;
    --breast-cancer-visual-height: 330px;

    /* Shared classification-page aliases */
    --classification-page-max: var(--breast-cancer-page-max);
    --classification-sidebar-width: var(--breast-cancer-sidebar-width);
    --classification-content-gap: var(--breast-cancer-content-gap);
    --classification-sidebar-offset-x: var(--breast-cancer-sidebar-offset-x);
    --classification-padding-x: var(--breast-cancer-padding-x);
    --classification-accent: var(--breast-cancer-accent);
    --classification-accent-dark: var(--breast-cancer-accent-dark);
    --classification-text: var(--breast-cancer-text);
    --classification-soft: var(--breast-cancer-soft);
    --classification-border: var(--breast-cancer-border);
    --classification-card-radius: var(--breast-cancer-card-radius);
    --classification-card-shadow: var(--breast-cancer-card-shadow);
    --classification-card-shadow-hover: var(--breast-cancer-card-shadow-hover);
    --classification-card-bg: var(--breast-cancer-card-bg);
    --classification-highlight-bg: var(--breast-cancer-highlight-bg);
    --classification-hero-position: var(--breast-cancer-hero-position);
    --classification-hero-min-height: var(--breast-cancer-hero-min-height);
    --classification-visual-max: var(--breast-cancer-visual-max);
    --classification-visual-gap: var(--breast-cancer-visual-gap);
    --classification-visual-height: var(--breast-cancer-visual-height);

    --classification-nav-border: rgba(87, 42, 60, 0.18);
    --classification-section-border: rgba(87, 42, 60, 0.10);
    --classification-hover-border: rgba(138, 75, 99, 0.24);
    --classification-metric-label: #4c3340;
    --classification-pipeline-shadow: 0 14px 28px rgba(87, 42, 60, 0.055);
    --classification-table-head-border: rgba(87, 42, 60, 0.12);
    --classification-table-row-border: rgba(87, 42, 60, 0.08);
    --classification-caption-border: rgba(87, 42, 60, 0.10);

    background: #ffffff;
}

.customer-purchase-page {
    --customer-purchase-page-max: 1660px;
    --customer-purchase-sidebar-width: 170px;
    --customer-purchase-content-gap: 64px;
    --customer-purchase-sidebar-offset-x: -34px;
    --customer-purchase-padding-x: clamp(28px, 4vw, 72px);

    --customer-purchase-accent: #9a6532;
    --customer-purchase-accent-dark: #5a3519;
    --customer-purchase-text: #302b24;
    --customer-purchase-muted: #6e6459;
    --customer-purchase-soft: rgba(255, 243, 229, 0.74);
    --customer-purchase-border: rgba(90, 53, 25, 0.13);

    --customer-purchase-card-radius: 18px;
    --customer-purchase-card-shadow: 0 16px 34px rgba(90, 53, 25, 0.065);
    --customer-purchase-card-shadow-hover: 0 22px 46px rgba(90, 53, 25, 0.10);

    --customer-purchase-hero-image: url("images/projects/cards/customer-purchase-bg.jpg");
    --customer-purchase-hero-position: center;
    --customer-purchase-hero-min-height: 540px;

    --customer-purchase-card-bg:
        radial-gradient(circle at 90% 10%, rgba(255, 243, 229, 0.74), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(255, 243, 229, 0.44) 100%);

    --customer-purchase-highlight-bg:
        radial-gradient(circle at 88% 10%, rgba(154, 101, 50, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(255, 243, 229, 0.36) 0%,
            rgba(249, 229, 204, 0.28) 56%,
            rgba(242, 210, 171, 0.92) 100%
        );

    --customer-purchase-visual-max: 1120px;
    --customer-purchase-visual-gap: 22px;
    --customer-purchase-visual-height: 330px;

    /* Shared classification-page aliases */
    --classification-page-max: var(--customer-purchase-page-max);
    --classification-sidebar-width: var(--customer-purchase-sidebar-width);
    --classification-content-gap: var(--customer-purchase-content-gap);
    --classification-sidebar-offset-x: var(--customer-purchase-sidebar-offset-x);
    --classification-padding-x: var(--customer-purchase-padding-x);
    --classification-accent: var(--customer-purchase-accent);
    --classification-accent-dark: var(--customer-purchase-accent-dark);
    --classification-text: var(--customer-purchase-text);
    --classification-soft: var(--customer-purchase-soft);
    --classification-border: var(--customer-purchase-border);
    --classification-card-radius: var(--customer-purchase-card-radius);
    --classification-card-shadow: var(--customer-purchase-card-shadow);
    --classification-card-shadow-hover: var(--customer-purchase-card-shadow-hover);
    --classification-card-bg: var(--customer-purchase-card-bg);
    --classification-highlight-bg: var(--customer-purchase-highlight-bg);
    --classification-hero-position: var(--customer-purchase-hero-position);
    --classification-hero-min-height: var(--customer-purchase-hero-min-height);
    --classification-visual-max: var(--customer-purchase-visual-max);
    --classification-visual-gap: var(--customer-purchase-visual-gap);
    --classification-visual-height: var(--customer-purchase-visual-height);

    --classification-nav-border: rgba(90, 53, 25, 0.18);
    --classification-section-border: rgba(90, 53, 25, 0.10);
    --classification-hover-border: rgba(154, 101, 50, 0.24);
    --classification-metric-label: #513a27;
    --classification-pipeline-shadow: 0 14px 28px rgba(90, 53, 25, 0.055);
    --classification-table-head-border: rgba(90, 53, 25, 0.12);
    --classification-table-row-border: rgba(90, 53, 25, 0.08);
    --classification-caption-border: rgba(90, 53, 25, 0.10);

    background: #ffffff;
}

/* Full-width page and hero foundations */

:is(
    .breast-cancer-detail-page,
    .customer-purchase-detail-page
).detail-page {
    max-width: none;
    margin: 0;
    padding: 0;
}

:is(
    .breast-cancer-page-hero,
    .customer-purchase-page-hero
) {
    position: relative;
    width: 100vw;
    min-height: var(--classification-hero-min-height);
    margin-left: calc(50% - 50vw);
    padding: 82px var(--classification-padding-x) 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

:is(
    .breast-cancer-page-hero,
    .customer-purchase-page-hero
)::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

:is(
    .breast-cancer-hero-back,
    .customer-purchase-hero-back
) {
    position: absolute;
    top: 28px;
    left: var(--classification-padding-x);
    z-index: 2;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}

:is(
    .breast-cancer-hero-back,
    .customer-purchase-hero-back
):hover {
    color: var(--color-gold);
}

:is(
    .breast-cancer-hero-source,
    .customer-purchase-hero-source
) {
    position: absolute;
    right: var(--classification-padding-x);
    bottom: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 168, 106, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

:is(
    .breast-cancer-hero-source,
    .customer-purchase-hero-source
):hover {
    border-color: rgba(201, 168, 106, 0.78);
    background: rgba(201, 168, 106, 0.16);
    color: var(--color-gold);
    transform: translateY(-2px);
}

:is(
    .breast-cancer-page-hero-inner,
    .customer-purchase-page-hero-inner
) {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.58fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}

:is(
    .breast-cancer-page-hero-copy,
    .customer-purchase-page-hero-copy
) .section-label {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-weight: 850;
}

:is(
    .breast-cancer-page-hero-copy,
    .customer-purchase-page-hero-copy
) h1 {
    max-width: 820px;
    margin: 0 0 18px;
    color: white;
    font-size: clamp(1.45rem, 2vw, 2.3rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

:is(
    .breast-cancer-page-hero-copy,
    .customer-purchase-page-hero-copy
) h2 {
    max-width: 850px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.25rem, 1.9vw, 1.78rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

:is(
    .breast-cancer-page-hero-copy,
    .customer-purchase-page-hero-copy
) p {
    max-width: 790px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.7;
}

:is(
    .breast-cancer-page-hero-copy,
    .customer-purchase-page-hero-copy
) .detail-tags {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    font-weight: 750;
}

:is(
    .breast-cancer-hero-metrics,
    .customer-purchase-hero-metrics
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

:is(
    .breast-cancer-hero-metric,
    .customer-purchase-hero-metric
) {
    min-height: 122px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 168, 106, 0.14), transparent 38%),
        rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

:is(
    .breast-cancer-hero-metric-value,
    .customer-purchase-hero-metric-value
) {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: clamp(1.45rem, 2.3vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

:is(
    .breast-cancer-hero-metric-label,
    .customer-purchase-hero-metric-label
) {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Body layout and side navigation */

:is(
    .breast-cancer-body-layout,
    .customer-purchase-body-layout
) {
    max-width: var(--classification-page-max);
    margin: 0 auto;
    padding: 56px var(--classification-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--classification-sidebar-width) minmax(0, 1fr);
    gap: var(--classification-content-gap);
}

:is(
    .breast-cancer-page-sidebar,
    .customer-purchase-page-sidebar
) {
    min-width: 0;
    padding-top: 4px;
}

:is(
    .breast-cancer-section-nav,
    .customer-purchase-section-nav
) {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateX(var(--classification-sidebar-offset-x));
}

:is(
    .breast-cancer-section-nav,
    .customer-purchase-section-nav
) a {
    display: block;
    padding: 13px 0 12px;
    border-bottom: 1px solid var(--classification-nav-border);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

:is(
    .breast-cancer-section-nav,
    .customer-purchase-section-nav
) a:hover,
:is(
    .breast-cancer-section-nav,
    .customer-purchase-section-nav
) a:focus-visible {
    color: var(--classification-accent);
    border-bottom-color: var(--classification-accent);
    transform: translateX(8px);
}

/* Main content sections */

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) {
    min-width: 0;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .detail-section {
    max-width: none;
    padding: 0 0 38px;
    margin-bottom: 42px;
    border-bottom: 1px solid var(--classification-section-border);
    scroll-margin-top: 32px;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .detail-section:first-child {
    padding-top: 0;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .detail-section:last-child {
    margin-bottom: 0;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .detail-section h2 {
    position: relative;
    margin-bottom: 18px;
    color: var(--color-dark);
    font-size: clamp(1.8rem, 2.3vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .detail-section h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--classification-accent));
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .detail-section p {
    max-width: 850px;
    color: var(--classification-text);
    font-size: 1.02rem;
    line-height: 1.75;
}

/* Cards, summary grids, and pipelines */

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) :is(
    .metric-card,
    .approach-card,
    .contribution-card,
    .artifact-card
),
:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card
) {
    border: 1px solid var(--classification-border);
    border-radius: var(--classification-card-radius);
    background: var(--classification-card-bg);
    box-shadow: var(--classification-card-shadow);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) :is(
    .metric-card,
    .approach-card,
    .contribution-card,
    .artifact-card
) {
    padding: 24px;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) :is(
    .metric-card,
    .approach-card,
    .contribution-card,
    .artifact-card
):hover,
:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card
):hover {
    transform: translateY(-3px);
    border-color: var(--classification-hover-border);
    box-shadow: var(--classification-card-shadow-hover);
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .metric-value {
    color: var(--classification-accent-dark);
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .metric-label {
    color: var(--classification-metric-label);
}

:is(
    .breast-cancer-summary-grid,
    .customer-purchase-summary-grid
) {
    max-width: 1060px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(
    .breast-cancer-summary-grid,
    .customer-purchase-summary-grid
) .metric-card {
    background: var(--classification-highlight-bg);
}

:is(
    .breast-cancer-model-grid,
    .breast-cancer-role-grid,
    .customer-purchase-role-grid
) {
    max-width: 1060px;
}

:is(
    .breast-cancer-model-grid .approach-card:last-child,
    .breast-cancer-role-grid .contribution-card:last-child,
    .customer-purchase-role-grid .contribution-card:last-child
) {
    grid-column: auto;
}

.breast-cancer-card-number {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--classification-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.breast-cancer-pipeline {
    max-width: 1060px;
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .pipeline-step {
    min-height: 132px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 10%, rgba(201, 168, 106, 0.11), transparent 34%),
        linear-gradient(180deg, var(--classification-soft), #ffffff);
    box-shadow: var(--classification-pipeline-shadow);
}

/* Performance tables */

.performance-table-wrap {
    max-width: 1120px;
    margin: 30px 0 34px;
    overflow-x: auto;
    border: 1px solid var(--classification-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--classification-card-shadow);
}

:is(
    .breast-cancer-performance-table,
    .customer-purchase-performance-table
) {
    margin: 0;
    color: var(--classification-text);
}

:is(
    .breast-cancer-performance-table,
    .customer-purchase-performance-table
) thead th {
    padding: 18px 20px;
    border-bottom: 1px solid var(--classification-table-head-border);
    background: var(--classification-soft);
    color: var(--color-dark);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

:is(
    .breast-cancer-performance-table,
    .customer-purchase-performance-table
) tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--classification-table-row-border);
    vertical-align: top;
    font-size: 0.94rem;
    line-height: 1.5;
}

:is(
    .breast-cancer-performance-table,
    .customer-purchase-performance-table
) tbody tr:last-child td {
    border-bottom: 0;
}

:is(
    .breast-cancer-performance-table,
    .customer-purchase-performance-table
) tbody td:first-child {
    color: var(--color-dark);
    font-weight: 800;
}

.breast-cancer-performance-table {
    min-width: 780px;
}

.customer-purchase-performance-table {
    min-width: 820px;
}

/* Shared visual-card system */

:is(
    .breast-cancer-visual-grid,
    .customer-purchase-visual-grid
) {
    max-width: var(--classification-visual-max);
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--classification-visual-gap);
}

:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card
) {
    margin: 0;
    overflow: hidden;
}

:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card,
    .customer-purchase-workflow-figure
) a {
    display: block;
    cursor: zoom-in;
    color: inherit;
    text-decoration: none;
}

:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card
) img {
    width: 100%;
    height: var(--classification-visual-height);
    display: block;
    padding: 8px;
    object-fit: contain;
    object-position: center;
    background: white;
}

:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card
) figcaption {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--classification-caption-border);
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

:is(
    .breast-cancer-visual-card,
    .customer-purchase-visual-card
) figcaption strong {
    color: var(--color-dark);
}

/* Evidence notes and artifacts */

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .evidence-note {
    max-width: 920px;
    margin: 30px 0 0;
    padding: 24px 26px;
    border-left: 5px solid var(--classification-accent);
    border-radius: 0 18px 18px 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--classification-soft) 100%);
    box-shadow: var(--classification-card-shadow);
}

:is(
    .breast-cancer-body-content,
    .customer-purchase-body-content
) .evidence-note h3 {
    color: var(--color-dark);
}

:is(
    .breast-cancer-artifact-grid,
    .customer-purchase-artifact-grid
) {
    max-width: 1060px;
}

:is(
    .breast-cancer-artifact-link,
    .customer-purchase-artifact-link
) {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    color: var(--classification-accent);
    text-decoration: none;
    font-weight: 850;
}

:is(
    .breast-cancer-artifact-link,
    .customer-purchase-artifact-link
):hover {
    color: var(--color-dark);
}


/* =========================================================
   BREAST CANCER CLASSIFICATION
   Healthcare ML classification and model-evaluation details.
   ========================================================= */

.breast-cancer-page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(33, 18, 28, 0.95) 0%,
            rgba(70, 38, 58, 0.80) 48%,
            rgba(79, 55, 75, 0.42) 100%
        ),
        radial-gradient(circle at 17% 24%, rgba(201, 168, 106, 0.22), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(138, 75, 99, 0.28), transparent 34%),
        var(--breast-cancer-hero-image);
    background-size: cover;
    background-position: var(--breast-cancer-hero-position);
}

/* Generalization visuals */

.breast-cancer-generalization-top {
    max-width: var(--breast-cancer-visual-max);
    margin-top: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: var(--breast-cancer-visual-gap);
    align-items: stretch;
}

.breast-cancer-generalization-note {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.breast-cancer-learning-card {
    max-width: var(--breast-cancer-visual-max);
    margin: 24px 0 0;
}

.breast-cancer-learning-card img {
    height: 420px;
    padding: 6px;
    object-fit: contain;
}


/* =========================================================
   CUSTOMER PURCHASE PREDICTION
   Conversion analytics and purchase-propensity details.
   ========================================================= */

.customer-purchase-page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(35, 24, 14, 0.95) 0%,
            rgba(72, 46, 24, 0.82) 48%,
            rgba(100, 70, 38, 0.42) 100%
        ),
        radial-gradient(circle at 17% 24%, rgba(201, 168, 106, 0.24), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(154, 101, 50, 0.28), transparent 34%),
        var(--customer-purchase-hero-image);
    background-size: cover;
    background-position: var(--customer-purchase-hero-position);
}

/* Modeling workflow and wide visuals */

.customer-purchase-workflow-figure {
    max-width: 1160px;
    margin: 30px 0 0;
}

.customer-purchase-workflow-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.customer-purchase-wide-visual {
    max-width: var(--customer-purchase-visual-max);
    margin: 24px 0 0;
}

.customer-purchase-wide-visual img {
    height: 430px;
    padding: 8px;
}

.customer-purchase-performance-grid {
    align-items: stretch;
}

.customer-purchase-performance-note {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================================
   CLASSIFICATION PROJECT RESPONSIVE BEHAVIOR
   ========================================================= */

@media (max-width: 1000px) {
    .breast-cancer-page,
    .customer-purchase-page {
        --classification-hero-min-height: auto;
        --classification-visual-height: 280px;
    }

    :is(
        .breast-cancer-page-hero,
        .customer-purchase-page-hero
    ) {
        min-height: var(--classification-hero-min-height);
        padding: 76px 24px 58px;
    }

    :is(
        .breast-cancer-page-hero-inner,
        .customer-purchase-page-hero-inner
    ) {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    :is(
        .breast-cancer-hero-metrics,
        .customer-purchase-hero-metrics,
        .breast-cancer-summary-grid,
        .customer-purchase-summary-grid,
        .breast-cancer-visual-grid,
        .customer-purchase-visual-grid
    ) {
        grid-template-columns: 1fr;
    }

    :is(
        .breast-cancer-body-layout,
        .customer-purchase-body-layout
    ) {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px 24px 70px;
    }

    :is(
        .breast-cancer-section-nav,
        .customer-purchase-section-nav
    ) {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    :is(
        .breast-cancer-section-nav,
        .customer-purchase-section-nav
    )::-webkit-scrollbar {
        display: none;
    }

    :is(
        .breast-cancer-section-nav,
        .customer-purchase-section-nav
    ) a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid var(--classification-nav-border);
        border-radius: 999px;
        background: white;
        color: var(--color-muted);
        font-size: 0.82rem;
    }

    :is(
        .breast-cancer-section-nav,
        .customer-purchase-section-nav
    ) a:hover,
    :is(
        .breast-cancer-section-nav,
        .customer-purchase-section-nav
    ) a:focus-visible {
        transform: none;
        color: var(--classification-accent);
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }

    .breast-cancer-generalization-top {
        grid-template-columns: 1fr;
    }

    .breast-cancer-learning-card img {
        height: 420px;
    }

    .customer-purchase-wide-visual img {
        height: 360px;
    }
}

@media (max-width: 560px) {
    .breast-cancer-page,
    .customer-purchase-page {
        --classification-visual-height: 230px;
    }

    :is(
        .breast-cancer-page-hero,
        .customer-purchase-page-hero
    ) {
        padding: 92px 22px 36px;
        align-items: flex-start;
    }

    :is(
        .breast-cancer-hero-back,
        .customer-purchase-hero-back
    ) {
        top: 20px;
        left: 22px;
        font-size: 0.88rem;
    }

    :is(
        .breast-cancer-hero-source,
        .customer-purchase-hero-source
    ) {
        top: 52px;
        right: auto;
        bottom: auto;
        left: 22px;
        min-height: 34px;
        padding: 9px 13px;
        font-size: 0.76rem;
    }

    :is(
        .breast-cancer-page-hero-inner,
        .customer-purchase-page-hero-inner
    ) {
        gap: 24px;
    }

    .breast-cancer-page-hero-copy h1 {
        max-width: 340px;
        font-size: clamp(2.18rem, 10.5vw, 3rem);
        line-height: 1.02;
    }

    .customer-purchase-page-hero-copy h1 {
        max-width: 340px;
        font-size: clamp(2.12rem, 10.5vw, 3rem);
        line-height: 1.02;
    }

    :is(
        .breast-cancer-page-hero-copy,
        .customer-purchase-page-hero-copy
    ) h2 {
        font-size: 1.06rem;
        line-height: 1.4;
    }

    :is(
        .breast-cancer-page-hero-copy,
        .customer-purchase-page-hero-copy
    ) p {
        font-size: 0.94rem;
        line-height: 1.62;
    }

    :is(
        .breast-cancer-page-hero-copy,
        .customer-purchase-page-hero-copy
    ) .detail-tags {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    :is(
        .breast-cancer-hero-metrics,
        .customer-purchase-hero-metrics
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    :is(
        .breast-cancer-hero-metric,
        .customer-purchase-hero-metric
    ) {
        min-height: 92px;
        padding: 14px;
        border-radius: 16px;
    }

    .breast-cancer-hero-metric-value {
        margin-bottom: 6px;
        font-size: 1.24rem;
        line-height: 1.05;
    }

    .customer-purchase-hero-metric-value {
        margin-bottom: 6px;
        font-size: 1.2rem;
        line-height: 1.05;
    }

    :is(
        .breast-cancer-hero-metric-label,
        .customer-purchase-hero-metric-label
    ) {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    :is(
        .breast-cancer-body-layout,
        .customer-purchase-body-layout
    ) {
        padding: 32px 22px 72px;
    }

    :is(
        .breast-cancer-body-content,
        .customer-purchase-body-content
    ) .detail-section {
        padding-bottom: 30px;
        margin-bottom: 32px;
    }

    :is(
        .breast-cancer-body-content,
        .customer-purchase-body-content
    ) .detail-section h2 {
        font-size: 1.75rem;
    }

    :is(
        .breast-cancer-body-content,
        .customer-purchase-body-content
    ) :is(
        .metric-card,
        .approach-card,
        .contribution-card,
        .artifact-card
    ) {
        padding: 20px;
    }

    :is(
        .breast-cancer-visual-card,
        .customer-purchase-visual-card
    ) img {
        padding: 6px;
    }

    :is(
        .breast-cancer-visual-card,
        .customer-purchase-visual-card
    ) figcaption {
        padding: 14px 16px 16px;
    }

    .breast-cancer-learning-card img {
        height: 300px;
    }

    .customer-purchase-wide-visual img {
        height: 270px;
    }
}


/* =========================================================
   ANALYTICS PROJECT PAGE FOUNDATION
   Shared structure for:
   - House Price Prediction
   - Visual Analytics and Business Intelligence

   Page-specific colors, hero imagery, charts, tables, and gallery
   treatments remain in their dedicated sections below.
   ========================================================= */

/* Page design tokens */

.house-price-page {
    --house-price-page-max: 1660px;
    --house-price-sidebar-width: 170px;
    --house-price-content-gap: 64px;
    --house-price-sidebar-offset-x: -34px;
    --house-price-padding-x: clamp(28px, 4vw, 72px);

    --house-price-accent: #3f6f8f;
    --house-price-accent-dark: #1f465f;
    --house-price-text: #24313a;
    --house-price-muted: #5f6d76;
    --house-price-soft: rgba(232, 241, 248, 0.74);
    --house-price-border: rgba(31, 70, 95, 0.14);

    --house-price-card-radius: 18px;
    --house-price-card-shadow: 0 16px 34px rgba(31, 70, 95, 0.065);
    --house-price-card-shadow-hover: 0 22px 46px rgba(31, 70, 95, 0.10);

    --house-price-hero-image: url("images/projects/cards/house-price-ml-bg1.jpg");
    --house-price-hero-position: center;
    --house-price-hero-min-height: 540px;

    --house-price-card-bg:
        radial-gradient(circle at 90% 10%, rgba(232, 241, 248, 0.74), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(232, 241, 248, 0.44) 100%);

    --house-price-highlight-bg:
        radial-gradient(circle at 88% 10%, rgba(63, 111, 143, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(232, 241, 248, 0.36) 0%,
            rgba(216, 232, 243, 0.28) 56%,
            rgba(197, 220, 236, 0.92) 100%
        );

    --house-price-visual-max: 1120px;
    --house-price-visual-gap: 22px;
    --house-price-visual-height: 330px;

    /* Shared analytics-project aliases */
    --analytics-project-page-max: var(--house-price-page-max);
    --analytics-project-sidebar-width: var(--house-price-sidebar-width);
    --analytics-project-content-gap: var(--house-price-content-gap);
    --analytics-project-sidebar-offset-x: var(--house-price-sidebar-offset-x);
    --analytics-project-padding-x: var(--house-price-padding-x);
    --analytics-project-accent: var(--house-price-accent);
    --analytics-project-accent-dark: var(--house-price-accent-dark);
    --analytics-project-text: var(--house-price-text);
    --analytics-project-soft: var(--house-price-soft);
    --analytics-project-border: var(--house-price-border);
    --analytics-project-card-radius: var(--house-price-card-radius);
    --analytics-project-card-shadow: var(--house-price-card-shadow);
    --analytics-project-card-shadow-hover: var(--house-price-card-shadow-hover);
    --analytics-project-card-bg: var(--house-price-card-bg);
    --analytics-project-highlight-bg: var(--house-price-highlight-bg);
    --analytics-project-hero-min-height: var(--house-price-hero-min-height);
    --analytics-project-visual-height: var(--house-price-visual-height);

    --analytics-project-nav-border: rgba(31, 70, 95, 0.18);
    --analytics-project-section-border: rgba(31, 70, 95, 0.10);
    --analytics-project-hover-border: rgba(63, 111, 143, 0.24);
    --analytics-project-metric-label: #314556;

    background: #ffffff;
}

.tableau-page {
    --tableau-page-max: 1660px;
    --tableau-sidebar-width: 170px;
    --tableau-content-gap: 64px;
    --tableau-sidebar-offset-x: -34px;
    --tableau-padding-x: clamp(28px, 4vw, 72px);

    --tableau-accent: #4f7fa8;
    --tableau-accent-dark: #234c6f;
    --tableau-text: #24313a;
    --tableau-muted: #5f6d76;
    --tableau-soft: rgba(232, 241, 248, 0.74);
    --tableau-border: rgba(35, 76, 111, 0.14);

    --tableau-card-radius: 18px;
    --tableau-card-shadow: 0 16px 34px rgba(35, 76, 111, 0.065);
    --tableau-card-shadow-hover: 0 22px 46px rgba(35, 76, 111, 0.11);

    --tableau-hero-image: url("images/projects/cards/visualization-bg.png");
    --tableau-hero-position: center;
    --tableau-hero-min-height: 540px;

    --tableau-card-bg:
        radial-gradient(circle at 90% 10%, rgba(232, 241, 248, 0.74), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(232, 241, 248, 0.44) 100%);

    --tableau-highlight-bg:
        radial-gradient(circle at 88% 10%, rgba(79, 127, 168, 0.16), transparent 34%),
        linear-gradient(
            125deg,
            rgba(232, 241, 248, 0.36) 0%,
            rgba(216, 232, 243, 0.28) 56%,
            rgba(197, 220, 236, 0.92) 100%
        );

    /* Shared analytics-project aliases */
    --analytics-project-page-max: var(--tableau-page-max);
    --analytics-project-sidebar-width: var(--tableau-sidebar-width);
    --analytics-project-content-gap: var(--tableau-content-gap);
    --analytics-project-sidebar-offset-x: var(--tableau-sidebar-offset-x);
    --analytics-project-padding-x: var(--tableau-padding-x);
    --analytics-project-accent: var(--tableau-accent);
    --analytics-project-accent-dark: var(--tableau-accent-dark);
    --analytics-project-text: var(--tableau-text);
    --analytics-project-soft: var(--tableau-soft);
    --analytics-project-border: var(--tableau-border);
    --analytics-project-card-radius: var(--tableau-card-radius);
    --analytics-project-card-shadow: var(--tableau-card-shadow);
    --analytics-project-card-shadow-hover: var(--tableau-card-shadow-hover);
    --analytics-project-card-bg: var(--tableau-card-bg);
    --analytics-project-highlight-bg: var(--tableau-highlight-bg);
    --analytics-project-hero-min-height: var(--tableau-hero-min-height);

    --analytics-project-nav-border: rgba(35, 76, 111, 0.18);
    --analytics-project-section-border: rgba(35, 76, 111, 0.10);
    --analytics-project-hover-border: rgba(79, 127, 168, 0.24);
    --analytics-project-metric-label: #314556;

    background: #ffffff;
}

/* Full-width page and hero foundations */

:is(
    .house-price-detail-page,
    .tableau-detail-page
).detail-page {
    max-width: none;
    margin: 0;
    padding: 0;
}

:is(
    .house-price-page-hero,
    .tableau-page-hero
) {
    position: relative;
    width: 100vw;
    min-height: var(--analytics-project-hero-min-height);
    margin-left: calc(50% - 50vw);
    padding: 82px var(--analytics-project-padding-x) 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
}

:is(
    .house-price-page-hero,
    .tableau-page-hero
)::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

:is(
    .house-price-hero-back,
    .tableau-hero-back
) {
    position: absolute;
    top: 28px;
    left: var(--analytics-project-padding-x);
    z-index: 2;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}

:is(
    .house-price-hero-back,
    .tableau-hero-back
):hover {
    color: var(--color-gold);
}

:is(
    .house-price-hero-source,
    .tableau-hero-source
) {
    position: absolute;
    right: var(--analytics-project-padding-x);
    bottom: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 168, 106, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

:is(
    .house-price-hero-source,
    .tableau-hero-source
):hover {
    border-color: rgba(201, 168, 106, 0.78);
    background: rgba(201, 168, 106, 0.16);
    color: var(--color-gold);
    transform: translateY(-2px);
}

:is(
    .house-price-page-hero-inner,
    .tableau-page-hero-inner
) {
    position: relative;
    z-index: 2;
    width: min(1220px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.58fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}

:is(
    .house-price-page-hero-copy,
    .tableau-page-hero-copy
) .section-label {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-weight: 850;
}

:is(
    .house-price-page-hero-copy,
    .tableau-page-hero-copy
) h1 {
    max-width: 850px;
    margin: 0 0 18px;
    color: white;
    font-size: clamp(1.45rem, 2vw, 2.3rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

:is(
    .house-price-page-hero-copy,
    .tableau-page-hero-copy
) h2 {
    max-width: 850px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.25rem, 1.9vw, 1.78rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

:is(
    .house-price-page-hero-copy,
    .tableau-page-hero-copy
) p {
    max-width: 790px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.7;
}

:is(
    .house-price-page-hero-copy,
    .tableau-page-hero-copy
) .detail-tags {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    font-weight: 750;
}

:is(
    .house-price-hero-metrics,
    .tableau-hero-metrics
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

:is(
    .house-price-hero-metric,
    .tableau-hero-metric
) {
    min-height: 122px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 168, 106, 0.14), transparent 38%),
        rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

:is(
    .house-price-hero-metric-value,
    .tableau-hero-metric-value
) {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: clamp(1.45rem, 2.3vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

:is(
    .house-price-hero-metric-label,
    .tableau-hero-metric-label
) {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Shared body shell and section navigation */

:is(
    .house-price-body-layout,
    .tableau-body-layout
) {
    max-width: var(--analytics-project-page-max);
    margin: 0 auto;
    padding: 56px var(--analytics-project-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--analytics-project-sidebar-width) minmax(0, 1fr);
    gap: var(--analytics-project-content-gap);
}

:is(
    .house-price-section-nav,
    .tableau-section-nav
) {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateX(var(--analytics-project-sidebar-offset-x));
}

:is(
    .house-price-section-nav,
    .tableau-section-nav
) a {
    display: block;
    padding: 13px 0 12px;
    border-bottom: 1px solid var(--analytics-project-nav-border);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

:is(
    .house-price-section-nav,
    .tableau-section-nav
) a:hover,
:is(
    .house-price-section-nav,
    .tableau-section-nav
) a:focus-visible {
    color: var(--analytics-project-accent);
    border-bottom-color: var(--analytics-project-accent);
    transform: translateX(8px);
}

:is(
    .house-price-body-content,
    .tableau-body-content
) {
    min-width: 0;
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .detail-section {
    max-width: none;
    padding: 0 0 38px;
    margin-bottom: 42px;
    border-bottom: 1px solid var(--analytics-project-section-border);
    scroll-margin-top: 32px;
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .detail-section:first-child {
    padding-top: 0;
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .detail-section:last-child {
    margin-bottom: 0;
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .detail-section h2 {
    position: relative;
    margin-bottom: 18px;
    color: var(--color-dark);
    font-size: clamp(1.8rem, 2.3vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .detail-section h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--analytics-project-accent));
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .detail-section p {
    max-width: 850px;
    color: var(--analytics-project-text);
    font-size: 1.02rem;
    line-height: 1.75;
}

/* Shared card system */

:is(
    .house-price-body-content .metric-card,
    .house-price-body-content .approach-card,
    .house-price-body-content .contribution-card,
    .house-price-body-content .artifact-card,
    .house-price-visual-card,
    .tableau-body-content .metric-card,
    .tableau-body-content .approach-card,
    .tableau-body-content .contribution-card,
    .tableau-body-content .artifact-card,
    .tableau-dashboard-row
) {
    border: 1px solid var(--analytics-project-border);
    border-radius: var(--analytics-project-card-radius);
    background: var(--analytics-project-card-bg);
    box-shadow: var(--analytics-project-card-shadow);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

:is(
    .house-price-body-content,
    .tableau-body-content
) :is(
    .metric-card,
    .approach-card,
    .contribution-card,
    .artifact-card
) {
    padding: 24px;
}

:is(
    .house-price-body-content .metric-card,
    .house-price-body-content .approach-card,
    .house-price-body-content .contribution-card,
    .house-price-body-content .artifact-card,
    .house-price-visual-card,
    .tableau-body-content .metric-card,
    .tableau-body-content .approach-card,
    .tableau-body-content .contribution-card,
    .tableau-body-content .artifact-card,
    .tableau-dashboard-row
):hover {
    transform: translateY(-3px);
    border-color: var(--analytics-project-hover-border);
    box-shadow: var(--analytics-project-card-shadow-hover);
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .metric-value {
    color: var(--analytics-project-accent-dark);
}

:is(
    .house-price-body-content,
    .tableau-body-content
) .metric-label {
    color: var(--analytics-project-metric-label);
}

:is(
    .house-price-summary-grid,
    .tableau-summary-grid
) .metric-card {
    background: var(--analytics-project-highlight-bg);
}

/* Shared expandable-image utility */

.project-image-link {
    display: block;
    cursor: zoom-in;
}

.project-image-link img {
    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.project-image-link:hover img,
.project-image-link:focus-visible img {
    transform: scale(1.01);
    filter: brightness(1.02);
}

/* Shared artifact links */

:is(
    .house-price-artifact-link,
    .tableau-artifact-link
) {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    color: var(--analytics-project-accent);
    text-decoration: none;
    font-weight: 850;
}

:is(
    .house-price-artifact-link,
    .tableau-artifact-link
):hover {
    color: var(--color-dark);
}


/* =========================================================
   HOUSE PRICE PREDICTION PROJECT PAGE
   Neural network regression, benchmarking, and diagnostics.
   ========================================================= */

/* Hero background */

.house-price-page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(13, 26, 38, 0.95) 0%,
            rgba(28, 55, 78, 0.82) 48%,
            rgba(54, 86, 108, 0.42) 100%
        ),
        radial-gradient(circle at 17% 24%, rgba(201, 168, 106, 0.22), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(63, 111, 143, 0.30), transparent 34%),
        var(--house-price-hero-image);
    background-size: cover;
    background-position: var(--house-price-hero-position);
}

/* Page-specific body and summary layouts */

.house-price-page-sidebar {
    min-width: 0;
    padding-top: 4px;
}

.house-price-summary-grid {
    max-width: 1000px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.house-price-summary-grid .metric-value {
    font-size: clamp(1.35rem, 1.55vw, 1.85rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
}

.house-price-summary-grid .metric-label {
    font-size: 0.95rem;
    line-height: 1.55;
}

.house-price-model-grid,
.house-price-role-grid {
    max-width: 1060px;
}

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

.house-price-model-grid .approach-card {
    min-height: 210px;
}

.house-price-model-grid .approach-card:last-child,
.house-price-role-grid .contribution-card:last-child {
    grid-column: auto;
}

.house-price-card-number {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--house-price-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

/* Performance table */

.house-price-table-wrap {
    max-width: 1120px;
    margin: 30px 0 34px;
    overflow-x: auto;
    border: 1px solid var(--house-price-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--house-price-card-shadow);
}

.house-price-performance-table {
    margin: 0;
    min-width: 760px;
    color: var(--house-price-text);
}

.house-price-performance-table thead th {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(31, 70, 95, 0.12);
    background: var(--house-price-soft);
    color: var(--color-dark);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.house-price-performance-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(31, 70, 95, 0.08);
    vertical-align: top;
    font-size: 0.94rem;
    line-height: 1.5;
}

.house-price-performance-table tbody tr:last-child td {
    border-bottom: 0;
}

.house-price-performance-table tbody td:first-child {
    color: var(--color-dark);
    font-weight: 800;
}

/* Diagnostic visuals */

.house-price-visual-card {
    max-width: var(--house-price-visual-max);
    margin: 30px 0 0;
    overflow: hidden;
}

.house-price-visual-card img {
    width: 100%;
    height: var(--analytics-project-visual-height);
    display: block;
    padding: 8px;
    object-fit: contain;
    object-position: center;
    background: white;
}

.house-price-visual-card figcaption {
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(31, 70, 95, 0.10);
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.house-price-visual-card figcaption strong {
    color: var(--color-dark);
}

.house-price-wide-visual img {
    height: 430px;
}

.house-price-dashboard-visual img {
    height: auto;
    padding: 0;
}

.house-price-body-content .evidence-note {
    max-width: 920px;
    margin: 30px 0 0;
    padding: 24px 26px;
    border-left: 5px solid var(--house-price-accent);
    border-radius: 0 18px 18px 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(201, 168, 106, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--house-price-soft) 100%);
    box-shadow: var(--house-price-card-shadow);
}

.house-price-body-content .evidence-note h3 {
    color: var(--color-dark);
}

.house-price-artifact-grid {
    max-width: 1060px;
}


/* =========================================================
   VISUAL ANALYTICS AND BUSINESS INTELLIGENCE PAGE
   Tableau dashboards, BI storytelling, and visual analytics.
   ========================================================= */

/* Hero background */

.tableau-page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(11, 25, 39, 0.95) 0%,
            rgba(26, 56, 84, 0.82) 48%,
            rgba(52, 90, 120, 0.42) 100%
        ),
        radial-gradient(circle at 17% 24%, rgba(201, 168, 106, 0.22), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(79, 127, 168, 0.30), transparent 34%),
        var(--tableau-hero-image);
    background-size: cover;
    background-position: var(--tableau-hero-position);
}

/* Summary metrics */

.tableau-summary-grid {
    max-width: 1060px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Dashboard gallery */

.tableau-dashboard-showcase {
    max-width: 1050px;
    margin-top: 30px;
    display: grid;
    gap: 28px;
}

.tableau-dashboard-row {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.48fr);
    min-height: 350px;
    overflow: hidden;
}

.tableau-dashboard-row-map {
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.58fr);
    min-height: 350px;
}

.tableau-dashboard-row-map .tableau-dashboard-preview {
    min-height: 350px;
}

.tableau-dashboard-row-map .tableau-dashboard-panel {
    padding: 18px 20px;
}

.tableau-dashboard-row-map .tableau-dashboard-panel p {
    font-size: 0.93rem;
    line-height: 1.62;
}

.tableau-dashboard-row-map .tableau-insight-list {
    margin: 8px 0 20px;
}

.tableau-dashboard-row-reverse {
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1.75fr);
}

.tableau-dashboard-row-reverse .tableau-dashboard-preview {
    order: 2;
}

.tableau-dashboard-row-reverse .tableau-dashboard-panel {
    order: 1;
}

.tableau-dashboard-preview {
    display: block;
    min-height: 300px;
    overflow: hidden;
    background: white;
    cursor: zoom-in;
}

.tableau-dashboard-preview img {
    width: 100%;
    height: 100%;
    min-height: 120px;
    display: block;
    object-fit: contain;
    object-position: center;
    background: white;
    transition:
        transform 220ms ease,
        filter 220ms ease;
}

.tableau-dashboard-preview:hover img,
.tableau-dashboard-preview:focus-visible img {
    transform: scale(1.015);
    filter: brightness(1.03);
}

.tableau-dashboard-panel {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tableau-dashboard-type {
    margin: 0 0 10px;
    color: var(--tableau-accent);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tableau-dashboard-panel h3 {
    margin-bottom: 12px;
    color: var(--color-dark);
    font-size: clamp(1.0rem, 1.0vw, 1.0rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.tableau-dashboard-panel p {
    color: var(--tableau-text);
    font-size: 0.93rem;
    line-height: 1.58;
}

.tableau-insight-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 22px;
}

.tableau-insight-list span {
    padding: 7px 9px;
    border: 1px solid rgba(35, 76, 111, 0.14);
    border-radius: 999px;
    background: rgba(232, 241, 248, 0.68);
    color: var(--tableau-accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

.tableau-dashboard-action {
    margin-top: auto;
    align-self: flex-start;
    color: var(--tableau-accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 850;
}

.tableau-dashboard-action:hover {
    color: var(--color-dark);
}

.tableau-process-figure {
    max-width: 1080px;
    margin: 30px 0 0;
}

.tableau-process-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Role and artifacts */

.tableau-role-grid,
.tableau-artifact-grid {
    max-width: 1060px;
}

.tableau-role-grid .contribution-card:last-child {
    grid-column: auto;
}


/* =========================================================
   ANALYTICS PROJECT RESPONSIVE BEHAVIOR
   ========================================================= */

@media (max-width: 1000px) {
    .house-price-page,
    .tableau-page {
        --analytics-project-hero-min-height: auto;
    }

    .house-price-page {
        --analytics-project-visual-height: 280px;
    }

    :is(
        .house-price-page-hero,
        .tableau-page-hero
    ) {
        min-height: var(--analytics-project-hero-min-height);
        padding: 76px 24px 58px;
    }

    :is(
        .house-price-page-hero-inner,
        .tableau-page-hero-inner
    ) {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    :is(
        .house-price-hero-metrics,
        .tableau-hero-metrics,
        .house-price-summary-grid,
        .tableau-summary-grid
    ) {
        grid-template-columns: 1fr;
    }

    :is(
        .house-price-body-layout,
        .tableau-body-layout
    ) {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px 24px 70px;
    }

    :is(
        .house-price-section-nav,
        .tableau-section-nav
    ) {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    :is(
        .house-price-section-nav,
        .tableau-section-nav
    )::-webkit-scrollbar {
        display: none;
    }

    :is(
        .house-price-section-nav,
        .tableau-section-nav
    ) a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid var(--analytics-project-nav-border);
        border-radius: 999px;
        background: white;
        color: var(--color-muted);
        font-size: 0.82rem;
    }

    :is(
        .house-price-section-nav,
        .tableau-section-nav
    ) a:hover,
    :is(
        .house-price-section-nav,
        .tableau-section-nav
    ) a:focus-visible {
        transform: none;
        color: var(--analytics-project-accent);
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }

    .house-price-wide-visual img {
        height: 360px;
    }

    .house-price-dashboard-visual img {
        height: auto;
    }

    .house-price-model-grid {
        grid-template-columns: 1fr;
    }

    .tableau-dashboard-row,
    .tableau-dashboard-row-reverse {
        grid-template-columns: 1fr;
    }

    .tableau-dashboard-row-reverse .tableau-dashboard-preview,
    .tableau-dashboard-row-reverse .tableau-dashboard-panel {
        order: initial;
    }

    .tableau-dashboard-preview,
    .tableau-dashboard-preview img {
        min-height: 300px;
    }

    .tableau-dashboard-panel {
        padding: 24px;
    }
}

@media (max-width: 560px) {
    .house-price-page {
        --analytics-project-visual-height: 230px;
    }

    :is(
        .house-price-page-hero,
        .tableau-page-hero
    ) {
        padding: 92px 22px 36px;
        align-items: flex-start;
    }

    :is(
        .house-price-hero-back,
        .tableau-hero-back
    ) {
        top: 20px;
        left: 22px;
        font-size: 0.88rem;
    }

    :is(
        .house-price-hero-source,
        .tableau-hero-source
    ) {
        top: 52px;
        right: auto;
        bottom: auto;
        left: 22px;
        min-height: 34px;
        padding: 9px 13px;
        font-size: 0.76rem;
    }

    :is(
        .house-price-page-hero-inner,
        .tableau-page-hero-inner
    ) {
        gap: 24px;
    }

    .house-price-page-hero-copy h1 {
        max-width: 340px;
        font-size: clamp(2.08rem, 10.5vw, 3rem);
        line-height: 1.02;
    }

    .tableau-page-hero-copy h1 {
        max-width: 340px;
        font-size: clamp(2.1rem, 10.5vw, 3rem);
        line-height: 1.02;
    }

    :is(
        .house-price-page-hero-copy,
        .tableau-page-hero-copy
    ) h2 {
        font-size: 1.06rem;
        line-height: 1.4;
    }

    :is(
        .house-price-page-hero-copy,
        .tableau-page-hero-copy
    ) p {
        font-size: 0.94rem;
        line-height: 1.62;
    }

    :is(
        .house-price-page-hero-copy,
        .tableau-page-hero-copy
    ) .detail-tags {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    :is(
        .house-price-hero-metrics,
        .tableau-hero-metrics
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    :is(
        .house-price-hero-metric,
        .tableau-hero-metric
    ) {
        min-height: 92px;
        padding: 14px;
        border-radius: 16px;
    }

    :is(
        .house-price-hero-metric-value,
        .tableau-hero-metric-value
    ) {
        margin-bottom: 6px;
        font-size: 1.2rem;
        line-height: 1.05;
    }

    :is(
        .house-price-hero-metric-label,
        .tableau-hero-metric-label
    ) {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    :is(
        .house-price-body-layout,
        .tableau-body-layout
    ) {
        padding: 32px 22px 72px;
    }

    :is(
        .house-price-body-content,
        .tableau-body-content
    ) .detail-section {
        padding-bottom: 30px;
        margin-bottom: 32px;
    }

    :is(
        .house-price-body-content,
        .tableau-body-content
    ) .detail-section h2 {
        font-size: 1.75rem;
    }

    :is(
        .house-price-body-content,
        .tableau-body-content
    ) :is(
        .metric-card,
        .approach-card,
        .contribution-card,
        .artifact-card
    ) {
        padding: 20px;
    }

    .house-price-visual-card img {
        padding: 6px;
    }

    .house-price-wide-visual img {
        height: 270px;
    }

    .house-price-dashboard-visual img {
        height: auto;
        padding: 0;
    }

    .house-price-visual-card figcaption {
        padding: 14px 16px 16px;
    }

    .tableau-dashboard-preview,
    .tableau-dashboard-preview img {
        min-height: 230px;
    }

    .tableau-dashboard-panel {
        padding: 20px;
    }

    .tableau-dashboard-panel h3 {
        font-size: 1.55rem;
    }

    .tableau-dashboard-panel p {
        font-size: 0.94rem;
        line-height: 1.6;
    }

    .tableau-insight-list span {
        font-size: 0.72rem;
    }
}


/* =========================================================
   ABOUT PAGE
   Standalone professional narrative page.

   Page file:
   - about.html

   Main tuning controls:
   - --about-page-max controls the body width
   - --about-sidebar-width controls the sticky navigation width
   - --about-content-gap controls space between navigation and content
   ========================================================= */

.about-page-body {
    background: #ffffff;
}

/* Hero */

.about-hero {
    --about-hero-min-height: 300px;

    position: relative;
    width: 100vw;
    min-height: var(--about-hero-min-height);
    margin-left: calc(50% - 50vw);
    padding: 65px var(--site-gutter) 52px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 18% 24%, rgba(201, 168, 106, 0.18), transparent 30%),
        linear-gradient(
            90deg,
            rgba(8, 28, 31, 0.90) 0%,
            rgba(8, 28, 31, 0.64) 48%,
            rgba(8, 28, 31, 0.30) 100%
        ),
        url("images/hero/hero-background3.jpg");
    background-size: cover;
    background-position: center;
}

.about-hero-back {
    position: absolute;
    top: 28px;
    left: var(--site-gutter);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
}

.about-hero-back:hover {
    color: var(--color-gold);
}

.about-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
    gap: clamp(42px, 6vw, 86px);
    align-items: center;
}

.about-hero-image {
    position: relative;
    margin: 0;
    display: grid;
    place-items: center;
}

.about-hero-image::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 111, 115, 0.34), transparent 64%);
}

.about-hero-image img {
    position: relative;
    width: 286px;
    height: 286px;
    display: block;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.34),
        0 0 0 12px rgba(255, 255, 255, 0.04);
}

.about-hero-copy .section-label {
    margin-bottom: 14px;
    color: var(--color-gold);
    font-weight: 850;
}

.about-hero-copy h1 {
    max-width: 900px;
    margin: 0 0 24px;
    color: white;
    font-size: clamp(2.25rem, 3.7vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.about-hero-lead,
.about-hero-summary {
    max-width: 840px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.72;
}

.about-hero-lead {
    font-size: 1.08rem;
    font-weight: 650;
}

.about-hero-summary {
    margin-top: 14px;
    font-size: 0.99rem;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.about-hero-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

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

.about-hero-button-primary {
    border: 1px solid white;
    background: white;
    color: var(--color-dark);
}

.about-hero-button-primary:hover {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-dark);
}

.about-hero-button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    backdrop-filter: blur(6px);
}

.about-hero-button-secondary:hover {
    border-color: rgba(201, 168, 106, 0.72);
    background: rgba(201, 168, 106, 0.14);
    color: var(--color-gold);
}

/* Page shell */

.about-page-shell {
    --about-page-max: 1660px;
    --about-sidebar-width: 170px;
    --about-content-gap: 64px;
    --about-sidebar-offset-x: -34px;
    --about-padding-x: clamp(28px, 4vw, 72px);

    max-width: var(--about-page-max);
    margin: 0 auto;
    padding: 56px var(--about-padding-x) 82px;
    display: grid;
    grid-template-columns: var(--about-sidebar-width) minmax(0, 1fr);
    gap: var(--about-content-gap);
}

.about-page-sidebar {
    min-width: 0;
}

.about-section-nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateX(var(--about-sidebar-offset-x));
}

.about-section-nav a {
    display: block;
    padding: 13px 0 12px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.18);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.35;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.about-section-nav a:hover,
.about-section-nav a:focus-visible {
    color: var(--portfolio-accent);
    border-bottom-color: var(--portfolio-accent);
    transform: translateX(8px);
}

.about-page-content {
    min-width: 0;
}

.about-section {
    max-width: none;
    padding: 0 0 40px;
    margin-bottom: 44px;
    border-bottom: 1px solid rgba(16, 42, 45, 0.10);
    scroll-margin-top: 34px;
}

.about-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.about-section > .section-label {
    margin-bottom: 10px;
    color: var(--portfolio-accent);
    font-weight: 850;
}

.about-section > h2 {
    position: relative;
    max-width: 980px;
    margin: 0 0 20px;
    color: var(--color-dark);
    font-size: clamp(1.8rem, 2.5vw, 2.65rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.about-section > h2::before {
    content: "";
    width: 52px;
    height: 4px;
    display: block;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--portfolio-accent));
}

.about-section > p {
    max-width: 900px;
    color: #263234;
    font-size: 1.02rem;
    line-height: 1.75;
}

.about-section-intro {
    font-weight: 700;
}

/* Overview cards */

.about-profile-grid {
    max-width: 1080px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.about-profile-card,
.about-education-card,
.about-focus-card,
.about-experience-card {
    border: 1px solid rgba(16, 42, 45, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 10%, rgba(238, 246, 246, 0.72), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(238, 246, 246, 0.44) 100%);
    box-shadow: 0 16px 34px rgba(16, 42, 45, 0.065);
}

.about-profile-card {
    min-height: 220px;
    padding: 24px;
}

.about-card-number {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--portfolio-accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.about-profile-card h3,
.about-education-card h3,
.about-focus-card h3,
.about-experience-card h3 {
    color: var(--color-dark);
    line-height: 1.3;
}

.about-profile-card p,
.about-education-card p,
.about-focus-card p,
.about-experience-card p {
    color: var(--color-muted);
    line-height: 1.65;
}

/* Career journey */

.about-journey {
    position: relative;
    max-width: 980px;
    margin-top: 32px;
    display: grid;
    gap: 16px;
}

.about-journey::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 25px;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--color-gold),
        var(--portfolio-accent),
        rgba(47, 111, 115, 0.18)
    );
}

.about-journey-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
    padding: 20px 22px 20px 0;
}

.about-journey-marker {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(47, 111, 115, 0.20);
    border-radius: 50%;
    background: white;
    color: var(--portfolio-accent);
    font-size: 0.76rem;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(16, 42, 45, 0.10);
}

.about-journey-step h3 {
    margin: 2px 0 8px;
    color: var(--color-dark);
    font-size: 1.18rem;
}

.about-journey-step p {
    max-width: 820px;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.68;
}

/* Experience timeline */

.about-experience-timeline {
    max-width: 1120px;
    margin-top: 32px;
    display: grid;
    gap: 22px;
}

.about-experience-item {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.about-experience-meta {
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.about-experience-date {
    color: var(--portfolio-accent);
    font-size: 0.85rem;
    font-weight: 900;
}

.about-experience-location {
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.about-experience-card {
    position: relative;
    padding: 26px;
}

.about-experience-card::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -31px;
    width: 14px;
    height: 14px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--portfolio-accent);
    box-shadow: 0 0 0 1px rgba(47, 111, 115, 0.20);
}

.about-experience-item:not(:last-child) .about-experience-card::after {
    content: "";
    position: absolute;
    top: 42px;
    bottom: -38px;
    left: -25px;
    width: 1px;
    background: rgba(47, 111, 115, 0.24);
}

.about-experience-organization {
    margin: 0 0 7px;
    color: var(--portfolio-accent) !important;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-experience-card h3 {
    margin: 0 0 14px;
    font-size: 1.25rem;
}

.about-experience-card > p:not(.about-experience-organization) {
    margin-bottom: 18px;
}

.about-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--portfolio-accent);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 850;
}

.about-inline-link:hover {
    color: var(--color-dark);
}

/* Education */

.about-education-grid {
    max-width: 1080px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.about-education-card {
    min-height: 100%;
    padding: 28px;
}

.about-education-card-featured {
    border-color: rgba(201, 168, 106, 0.32);
    background:
        radial-gradient(circle at 90% 10%, rgba(201, 168, 106, 0.16), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 62%, rgba(238, 246, 246, 0.44) 100%);
}

.about-education-level {
    margin: 0 0 12px;
    color: var(--portfolio-accent) !important;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.about-education-card h3 {
    margin: 0 0 12px;
    font-size: 1.28rem;
}

.about-education-school {
    margin: 0;
    color: var(--color-dark) !important;
    font-weight: 800;
}

.about-education-date {
    margin: 5px 0 18px;
    color: var(--color-muted) !important;
    font-size: 0.88rem;
}

/* Focus areas */

.about-focus-grid {
    max-width: 1120px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about-focus-card {
    min-height: 210px;
    padding: 24px;
}

.about-focus-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 9px);
}

.about-focus-card > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--portfolio-accent-soft);
    color: var(--portfolio-accent);
    font-size: 1.15rem;
}

.about-focus-card h3 {
    margin: 0 0 12px;
    font-size: 1.12rem;
}

/* Current direction */

.about-role-grid {
    max-width: 980px;
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.about-role-card {
    min-height: 92px;
    display: grid;
    place-items: center;
    padding: 20px;
    border: 1px solid rgba(47, 111, 115, 0.20);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 10%, rgba(201, 168, 106, 0.10), transparent 34%),
        linear-gradient(135deg, var(--portfolio-accent-soft), #ffffff);
    color: var(--portfolio-accent);
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 12px 28px rgba(16, 42, 45, 0.055);
}

.about-direction-copy {
    margin-top: 24px;
}

/* Contact */

.about-contact-section {
    padding-bottom: 0;
}

.about-contact-panel {
    max-width: 1120px;
    padding: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.6fr);
    gap: 42px;
    align-items: center;
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 22%, rgba(47, 111, 115, 0.24), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(201, 168, 106, 0.12), transparent 30%),
        linear-gradient(135deg, #0d292c 0%, #102a2d 52%, #0b2225 100%);
    color: white;
    box-shadow: 0 24px 54px rgba(16, 42, 45, 0.18);
}

.about-contact-copy .section-label {
    margin-bottom: 10px;
    color: var(--color-gold);
    font-weight: 850;
}

.about-contact-copy h2 {
    margin: 0 0 16px;
    color: white;
    font-size: clamp(2rem, 3.4vw, 3rem);
}

.about-contact-copy p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.72;
}

.about-contact-links {
    display: grid;
    gap: 12px;
}

.about-contact-links a {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    text-decoration: none;
    font-weight: 800;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.about-contact-links a:hover {
    transform: translateX(4px);
    border-color: rgba(201, 168, 106, 0.64);
    background: rgba(201, 168, 106, 0.14);
    color: var(--color-gold);
}

/* Desktop alignment with the homepage hero */

@media (min-width: 1001px) {
    .about-hero {
        --about-hero-min-height: 46vh;

        padding: 52px var(--site-gutter);
    }

    .about-hero-inner {
        width: 100%;
        max-width: none;
        margin: 0;
        grid-template-columns:
            minmax(240px, 360px)
            minmax(0, 760px);
        gap: clamp(44px, 6vw, 92px);
        align-items: center;
    }

    .about-hero-image {
        justify-self: start;
        transform: translateX(50px);
    }

    .about-hero-image::before {
        width: 340px;
        height: 340px;
    }

    .about-hero-image img {
        width: 320px;
        height: 320px;
    }

    .about-hero-copy {
        max-width: 780px;
    }

    .about-hero-copy h1 {
        max-width: 780px;

        /* Preserve the approved restrained desktop scale. */
        font-size: 2.6rem;
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .about-hero-lead,
    .about-hero-summary {
        max-width: 760px;
    }

    .about-hero-lead {
        font-size: 1.05rem;
    }
}

/* Responsive */

@media (max-width: 1000px) {
    .about-hero {
        min-height: auto;
        padding: 82px 24px 56px;
    }

    .about-hero-back {
        left: 24px;
    }

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-hero-image {
        justify-content: flex-start;
    }

    .about-hero-image::before {
        width: 230px;
        height: 230px;
    }

    .about-hero-image img {
        width: 190px;
        height: 190px;
    }

    .about-page-shell {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 38px 24px 70px;
    }

    .about-section-nav {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .about-section-nav::-webkit-scrollbar {
        display: none;
    }

    .about-section-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        font-size: 0.82rem;
    }

    .about-section-nav a:hover,
    .about-section-nav a:focus-visible {
        transform: none;
        border-color: var(--portfolio-accent-border);
        background: var(--portfolio-accent-soft);
    }

    .about-profile-grid,
    .about-role-grid {
        grid-template-columns: 1fr;
    }

    .about-experience-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-experience-meta {
        padding-top: 0;
    }

    .about-experience-card::before,
    .about-experience-card::after {
        display: none;
    }

    .about-contact-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .about-hero {
        min-height: auto;
        padding: 56px 20px 30px;
        align-items: flex-start;
    }

    .about-hero-back {
        top: 18px;
        left: 20px;
        font-size: 0.78rem;
    }

    .about-hero-inner {
        gap: 18px;
    }

    .about-hero-image {
        justify-content: center;
    }

    .about-hero-image::before {
        width: 160px;
        height: 160px;
    }

    .about-hero-image img {
        width: 132px;
        height: 132px;
        border-width: 3px;
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.30),
            0 0 0 7px rgba(255, 255, 255, 0.04);
    }

    .about-hero-copy .section-label {
        margin-bottom: 8px;
        font-size: 0.72rem;
    }

    .about-hero-copy h1 {
        margin-bottom: 14px;
        font-size: clamp(1.75rem, 8.4vw, 2.25rem);
        line-height: 1.04;
        letter-spacing: -0.04em;
    }

    .about-hero-lead {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .about-hero-summary {
        margin-top: 10px;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .about-hero-actions {
        width: 100%;
        max-width: 310px;
        margin-top: 18px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .about-hero-button {
        min-height: 38px;
        padding: 10px 12px;
        font-size: 0.76rem;
    }

    .about-hero-actions .about-hero-button-primary {
        grid-column: 1 / -1;
    }

    .about-education-grid,
    .about-focus-grid {
        grid-template-columns: 1fr;
    }

    .about-focus-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .about-contact-panel {
        padding: 28px 22px;
        border-radius: 20px;
    }
}

@media (max-width: 560px) {
    .about-page-shell {
        padding: 32px 22px 72px;
    }

    .about-section {
        padding-bottom: 32px;
        margin-bottom: 34px;
    }

    .about-section > h2 {
        font-size: 1.75rem;
    }

    .about-profile-card,
    .about-education-card,
    .about-focus-card,
    .about-experience-card {
        padding: 20px;
    }

    .about-journey-step {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 16px;
    }

    .about-journey-marker {
        width: 46px;
        height: 46px;
    }

    .about-journey::before {
        left: 22px;
    }
}


/* =========================================================
   ARIEL DOCKED PANEL
   Large right-side panel opened from the homepage Ask Ariel button.

   Main tuning control:
   - --assistant-dock-width controls desktop panel width
   ========================================================= */

/* Full-height Ariel panel */

.assistant-widget.assistant-docked {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--assistant-dock-width);
    height: 100vh;
    height: 100dvh;
}

.assistant-widget.assistant-docked .assistant-toggle,
.assistant-widget.assistant-docked .assistant-callout {
    display: none;
}

.assistant-widget.assistant-docked .assistant-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--assistant-dock-width);
    max-width: none;
    max-height: none;
    display: flex;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    box-shadow: -18px 0 46px rgba(0, 0, 0, 0.18);
}

.assistant-widget.assistant-docked .assistant-panel-header {
    flex: 0 0 auto;
    padding: 22px 22px 17px;
}

.assistant-widget.assistant-docked .assistant-panel-description {
    flex: 0 0 auto;
    padding: 16px 22px;
    font-size: 0.88rem;
}

.assistant-widget.assistant-docked .assistant-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 20px 22px;
}

.assistant-widget.assistant-docked .assistant-message {
    font-size: 0.96rem;
}

.assistant-widget.assistant-docked .assistant-form {
    flex: 0 0 auto;
    padding: 17px 22px 13px;
}

.assistant-widget.assistant-docked .assistant-status {
    flex: 0 0 auto;
    min-height: 14px;
    padding: 0 22px 13px;
}

/* Desktop split view.
   The portfolio uses the remaining viewport width while Ariel stays fixed
   on the right. */

@media (min-width: 1280px) {
    body.assistant-dock-open {
        width: calc(100% - var(--assistant-dock-width));
        min-height: 100vh;
        overflow-x: hidden;
        transition: width 220ms ease;
    }

    /* Full-width page heroes normally use 100vw. In docked mode they
       use the remaining portfolio width instead of extending beneath Ariel. */
    body.assistant-dock-open .hero,
    body.assistant-dock-open .research-hero,
    body.assistant-dock-open .resource-page-hero,
    body.assistant-dock-open .ariel-page-hero,
    body.assistant-dock-open .energy-page-hero,
    body.assistant-dock-open .smart-city-page-hero,
    body.assistant-dock-open .breast-cancer-page-hero,
    body.assistant-dock-open .customer-purchase-page-hero,
    body.assistant-dock-open .house-price-page-hero,
    body.assistant-dock-open .tableau-page-hero,
    body.assistant-dock-open .about-hero {
        width: 100%;
        margin-left: 0;
    }

    /* Homepage hero tuning for the narrower content area. */
    body.assistant-dock-open .hero {
        grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 56px);
    }

    body.assistant-dock-open .hero-image {
        transform: none;
    }

    body.assistant-dock-open .hero-image img {
        width: min(260px, 100%);
        height: auto;
        aspect-ratio: 1;
    }

    body.assistant-dock-open .hero-text h1 {
        font-size: clamp(2.5rem, 3vw, 3.2rem);
    }

    body.assistant-dock-open .hero-text h2 {
        font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    }

    /* Remove the fixed left sidebar while the dock is open.
       The same navigation remains available as horizontal pills. */
    body.assistant-dock-open .homepage-layout {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 42px clamp(24px, 3vw, 48px) 0;
    }

    body.assistant-dock-open .homepage-layout .homepage-side-nav {
        position: static;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 6px;
        transform: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body.assistant-dock-open .homepage-layout .homepage-side-nav::-webkit-scrollbar {
        display: none;
    }

    body.assistant-dock-open .homepage-layout .homepage-side-nav a {
        flex: 0 0 auto;
        padding: 9px 13px;
        border: 1px solid rgba(16, 42, 45, 0.18);
        border-radius: 999px;
        background: white;
        line-height: 1.2;
        transform: none;
    }

    body.assistant-dock-open .research-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    body.assistant-dock-open .research-feature-card {
        min-height: 0;
        align-self: start;
    }

    body.assistant-dock-open .research-card-image {
        height: 240px;
    }

    body.assistant-dock-open .research-card-body {
        padding: 22px 22px 24px;
    }

    body.assistant-dock-open .research-card-body h3 {
        min-height: 0;
        margin-bottom: 12px;
    }

    body.assistant-dock-open
    .research-card-body
    > p:not(.status):not(.research-tags) {
        min-height: 0;
        margin-bottom: 0;
    }

    body.assistant-dock-open .research-tags {
        min-height: 0;
        margin-top: 14px;
    }

    body.assistant-dock-open .research-card-actions {
        padding-top: 14px;
    }
}

/* Smaller desktops, tablets, and phones use a full-screen Ariel view.
   This avoids squeezing complex portfolio layouts into an unusable column. */

@media (max-width: 1279px) {
    body.assistant-dock-open {
        width: 100%;
        overflow: hidden;
    }

    .assistant-widget.assistant-docked {
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .assistant-widget.assistant-docked .assistant-panel {
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border: none;
        border-radius: 0;
    }

    .assistant-widget.assistant-docked .assistant-messages {
        padding: 18px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.assistant-dock-open {
        transition: none;
    }
}