/* ---------- McKenna Logic Design System ---------- */

:root {
    --black: #050607;
    --graphite: #0b0f14;
    --panel: #10151c;
    --panel-light: #151c24;

    --white: #f5f7fa;
    --silver: #aeb7c2;
    --muted: #76808c;

    --cyan: #00d4ff;
    --blue: #008cff;

    --border: #202a35;

    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;
    --space-3xl: 128px;
}

/* ---------- Base ---------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    min-height: 100vh;
}

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

/* ---------- Navigation ---------- */

.navbar {
    background: rgba(5, 6, 7, 0.95) !important;
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.navbar-brand:hover {
    color: var(--cyan);
}

.navbar-brand img {
    width: 180px;
    height: auto;
    display: block;
}

.nav-link {
    color: var(--silver) !important;
    margin-left: 18px;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--cyan) !important;
}

/* ---------- Main Layout ---------- */

main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}
.page-title {
    max-width: 1100px;
    margin: 0;

    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.page-title span {
    color: var(--cyan);
    display: block;
}

/* ---------- Footer ---------- */

.site-footer {
    border-top: 1px solid var(--border);
    margin-top: var(--space-3xl);
    padding: var(--space-lg) 0;

    color: var(--muted);
}

.footer-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.footer-brand,
.footer-meta {
    margin: 0;
}

.footer-meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------- M ---------- */

 .hero .eyebrow,
.hero h1,
.hero-description,
.hero-actions {
    position: relative;
    z-index: 1;
}

.hero {
    position: relative;
    overflow: visible;
    min-height: 720px;
}

.hero-mark {
    position: absolute;
    width: clamp(680px, 62vw, 980px);

    right: -25%;
    top: 30%;

    z-index: 0;

    transform:
        translateY(-50%)
        perspective(1500px)
        rotateY(-9deg)
        rotateX(3deg);

    transform-origin: center center;
    opacity: 1;
    pointer-events: none;
    overflow: visible;
}

.hero-mark img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.72;
}

.hero-accent {
    position: absolute;

    width: 2px;
    height: 84%;

    left: 46.5%;
    top: 13%;

    background: rgba(0, 212, 255, 0.9);

    transform: rotate(43deg);
    transform-origin: center;

    pointer-events: none;
    overflow: visible;
}

/* wide atmospheric glow */
.hero-accent::before {
    content: "";
    position: absolute;

    width: 16px;
    height: 42%;

    top: 6%;
    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(
        to bottom,
        rgba(0, 212, 255, 0.30) 0%,
        rgba(0, 212, 255, 0.42) 18%,
        rgba(0, 212, 255, 0.24) 52%,
        rgba(0, 212, 255, 0.08) 78%,
        rgba(0, 212, 255, 0) 100%
    );

    filter: blur(9px);
    border-radius: 999px;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--silver);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.hero h1 {
    max-width: 1100px;
    margin: 0;
}

.hero h1 span {
    color: var(--cyan);
    display: block;
}

.hero-description {
    max-width: 65ch;
    margin-top: var(--space-md);
    color: var(--silver);
    font-size: 1.05rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.btn-primary-custom,
.btn-secondary-custom {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 6px;
    font-weight: 700;
    transition: 0.2s ease;
}

.btn-primary-custom {
    background: var(--cyan);
    color: var(--black);
}

.btn-primary-custom:hover {
    background: var(--white);
    color: var(--black);
    transform: translateY(-2px);
}

.btn-secondary-custom {
    border: 1px solid var(--border);
    color: var(--white);
    background: var(--panel);
}

.btn-secondary-custom:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    transform: translateY(-2px);
}

/* ---------- Lab List ---------- */

.lab-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lab-number {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.lab-info h3 {
    margin: 0 0 6px;
    font-size: 1.8rem;
    color: var(--white);
}

.lab-list {
    width: 100%;
    margin-top: var(--space-2xl);
}

.lab-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: var(--space-lg);

    padding: var(--space-xl) 0;

    border-top: 1px solid var(--border);

    color: inherit;
    text-decoration: none;

    transition: border-color 0.3s ease;
}

.lab-row:last-child {
    border-bottom: 1px solid var(--border);
}

.lab-row:hover {
    border-color: rgba(0, 212, 255, 0.35);
}

.card-label {
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.build-card h3 {
    font-size: 1.6rem;
    margin: 10px 0 8px;
    color: var(--white);
}

.card-description {
    color: var(--silver);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Lab ---------- */

.section-label {
    color: cyan;
    font-size: 0,8rem;
    font-weight: bold;
    letter-spacing: 3px;
}

#currently-building {
    margin-top: var(--space-xl);
    padding: var(--space-2xl) 0 var(--space-3xl);
    position: relative;
}

#currently-building::before {
    content: "";
    position: absolute;

    top: 245px;
    right: 3%;

    width: 2px;
    height: 70px;

    background: var(--cyan);

    transform: rotate(43deg);
    opacity: 0.35;
}

.build-card:hover {
    transform: translateY(-4px);
    border-color: var(--cyan);
}

.lab-row .card-status {
    justify-self: end;
    margin: 0;

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.lab-row .status-dot {
    width: 7px;
    height: 7px;
}

.lab-info h3 {
    transition: color 0.25s ease;
}

.lab-row:hover .lab-info h3 {
    color: var(--cyan);
}

.lab-number {
    transition: color 0.25s ease;
}

.lab-row:hover .lab-number {
    color: var(--cyan);
}

/* ---------- Status Dot ---------- */

.card-status {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;

    color: var(--silver);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    display: inline-block;
}

/* ---------- Projects ---------- */

.hero,
.projects-hero,
.about-hero,
.contact-hero {
    padding-top: 220px;
}

.page-kicker {
    color: var(--silver);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.projects-hero h1 {
    max-width: 1100px;
    margin: 0;
}

.projects-hero h1 span {
    color: var(--cyan);
    display: inline;
    white-space: nowrap;
}

.projects-description {
    max-width: 95ch;
    margin-top: var(--space-md);

    color: var(--silver);
    font-size: 1.05rem;
    line-height: 1.7;
}

.hero,
.projects-hero {
    padding-top: 220px;
}

.project-status {
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: var(--space-sm);
}

.project-tech {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.projects-page .card {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
}

.projects-page .card-text {
    color: var(--silver);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.projects-page .card-body {
    padding: var(--space-lg);
}

.projects-page .col-12 .card {
    border-left: 0;
    border-right: 0;
    transition: border-color 0.3s ease;

    margin-top: var(--space-xl);
}

.projects-page .col-12 .card-body {
    position: relative;
    padding: var(--space-xl);

    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(360px, 500px);
    gap: var(--space-lg);
    align-items: center;
}

.projects-page .col-12 .card-title {
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    line-height: 1;
}

.projects-page .col-12 .card-text {
    max-width: 620px;
}

.projects-page .col-12 .card:hover {
    border-color: rgba(0, 212, 255, 0.25);
}

.projects-page .col-12 .card:hover .project-number {
    color: rgba(0, 212, 255, 0.10);
}

.project-meta {
    display: flex;
    gap: var(--space-sm);

    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;

    margin-bottom: var(--space-md);
}

.project-meta span:first-child {
    color: var(--muted);
}

.projects-page .card-title {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-sm);
}

.project-link {
    position: relative;
    display: inline-block;

    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;

    text-decoration: none;
    padding-bottom: 5px;
}

.project-link:hover {
    color: var(--white);
}

.project-link::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: var(--cyan);

    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.project-link:hover::after {
    transform: scaleX(0);
}

.project-visual {
    width: 100%;
    height: 520px;
    margin-top: 0;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 0;
    position: relative;

    z-index: 1;
}

.project-visual img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: top center;
}

.project-visual::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        var(--black) 0%,
        rgba(5, 6, 7, 0.85) 10%,
        transparent 22%
    );

    pointer-events: none;
}

/* ---------- About ---------- */

.about-description {
    max-width: 62ch;
    margin-top: var(--space-lg);

    color: var(--silver);
    font-size: 1.1rem;
    line-height: 1.6;
}

.about-story {
    padding: var(--space-2xl) 0 var(--space-3xl);
    border-top: 1px solid var(--border);
}

.about-story h2 {
    max-width: 800px;
    margin: var(--space-md) 0 0;

    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.about-hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.about-story h2 span {
    color: var(--cyan);
}

/* ---------- Contact ---------- */

.form-response {
    margin-top: var(--space-sm);

    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.contact-workspace {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-2xl);

    padding: var(--space-2xl) 0 var(--space-3xl);
    border-top: 1px solid var(--border);
}

.contact-brand-panel h2 span {
    color: var(--cyan);
}

.contact-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.contact-brand-panel h2 {
    margin: var(--space-md) 0 var(--space-lg);

    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 600;
    line-height: 0.88;
    letter-spacing: -0.05em;

    color: var(--white);
}

.contact-brand-panel h2 span {
    color: var(--cyan);
}

.contact-mantra {
    margin: 0 0 var(--space-xl);

    color: var(--silver);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    letter-spacing: 0.12em;
}

.contact-mark-wrap {
    position: relative;
    width: min(100%, 540px);
}

.contact-mark {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.65;
}

.contact-mark-accent {
    position: absolute;

    width: 2px;
    height: 84%;

    left: 46.5%;
    top: 13%;

    background: var(--cyan);

    transform: rotate(43deg);
    transform-origin: center;

    pointer-events: none;
}

.contact-hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.contact-description {
    max-width: 70ch;
    margin-top: var(--space-md);

    color: var(--silver);
    font-size: 1.05rem;
    line-height: 1.7;
}

.contact-mantra span {
    color: var(--cyan);
}

/* ---------- Form ---------- */

.contact-form-panel {
    border-left: 1px solid var(--border);
    padding-left: var(--space-xl);
}

.contact-form-panel .section-label {
    margin-bottom: var(--space-lg);
}

.form-field {
    margin-bottom: var(--space-md);
}

.form-field label {
    display: block;
    margin-bottom: 10px;

    color: var(--silver);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    background: transparent;
    color: var(--white);

    border: 1px solid var(--border);
    border-radius: 0;

    padding: 16px 18px;

    font-family: var(--font-body);
    font-size: 1rem;

    outline: none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--cyan);
    background: rgba(0, 212, 255, 0.025);
}

.contact-submit {
    position: relative;

    width: 100%;
    margin-top: var(--space-sm);
    padding: 16px 18px;

    background: transparent;
    color: var(--cyan);

    border: 1px solid var(--cyan);
    border-radius: 0;

    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;

    text-align: left;
    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

.contact-submit:hover {
    color: var(--black);
    background: var(--cyan);
}

.form-response {
    margin-top: var(--space-md);
    min-height: 1.2em;

    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

/* ---------- Responsive ---------- */


/* Smaller laptops */
@media (max-width: 1100px) {

    .hero-mark {
        width: 62vw;
        right: -20vw;
        top: 38%;
    }

}


/* Projects page stacks image under text */
@media (max-width: 900px) {

    .projects-page .col-12 .card-body {
        grid-template-columns: 1fr;
    }

    .project-visual {
        height: 420px;
    }

}


/* Tablets */
@media (max-width: 800px) {

    .page-title {
        font-size: 3rem;
        letter-spacing: -0.03em;
    }

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

    .hero-mark {
        width: 72vw;
        right: -24vw;
        top: 40%;
        opacity: 0.45;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        width: 100%;
        text-align: center;
    }

    .lab-row {
        grid-template-columns: 50px 1fr;
        gap: var(--space-md);
    }

    .lab-row .card-status {
        grid-column: 2;
        margin-top: var(--space-sm);
    }

}


/* Phones */
@media (max-width: 600px) {

    .hero-mark {
        display: none;
    }

    .page-title {
        font-size: 2.6rem;
        line-height: 0.98;
    }

    .projects-hero .page-title span {
        white-space: normal;
    }

    .projects-description,
    .hero-description {
        font-size: 1rem;
        line-height: 1.5;
    }

    .project-visual {
        height: 340px;
    }

    .lab-row {
        grid-template-columns: 36px 1fr;
        gap: var(--space-sm);
        padding: var(--space-md) 0;
    }

    .footer-inner {
    flex-direction: column;
    align-items: flex-start;
}

}
/* Shared geometry: reserve the scrollbar space on every page. */
html { overflow-y: scroll; }
body { overflow-x: clip; }
@media (max-width: 991.98px) {
    .navbar-nav .nav-link { margin-left: 0; padding: 12px 0; }
}
@media (max-width: 800px) {
    .projects-hero, .about-hero, .contact-hero { padding-top: 60px; }
    .projects-page .col-12 .card-body { padding: 40px 0; }
    .contact-workspace { grid-template-columns: 1fr; gap: 40px; }
    .contact-form-panel { border-left: 0; padding-left: 0; }
}

/* ---------- Portfolio refinement: keep additions on public pages ---------- */
.public-site { --muted: #929da9; color-scheme: dark; }
.public-site :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 5px;
}
.public-site #main:focus { outline: none; }
.skip-link {
    position: absolute; z-index: 10; top: 8px; left: 20px;
    padding: 12px 18px; color: var(--black); background: var(--cyan);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.public-site .section-label { color: var(--cyan); font-size: .8rem; }
.public-site .navbar-brand { min-height: 44px; display: flex; align-items: center; }
.public-site .navbar-toggler { min-width: 44px; min-height: 44px; }
.public-site .hero { overflow: clip; }
.public-site .projects-description { max-width: 68ch; }
.public-site .project-positioning { max-width: 36ch; font-size: 1.2rem; line-height: 1.5; }
.public-site .projects-page .col-12 .card-body {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    padding: var(--space-xl) 0;
    gap: var(--space-xl);
}
.public-site .project-copy, .public-site .case-copy { min-width: 0; }
.tech-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; padding: 0; margin: 24px 0;
    color: var(--silver); font-family: var(--font-mono); font-size: .75rem;
}
.tech-tags li { padding: 6px 10px; border: 1px solid var(--border); }
.project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.public-site .project-actions .btn-primary-custom { width: auto; }
.public-site .project-link { min-height: 44px; display: inline-flex; align-items: center; }
.project-figure { margin: 0; min-width: 0; }
.public-site .project-visual { height: auto; max-width: 320px; margin-inline: auto; border: 1px solid var(--border); }
.public-site .project-visual::after { display: none; }
.public-site .project-visual img { height: auto; object-fit: contain; }
.project-figure figcaption, .project-note, .builds-note, .form-help {
    color: var(--silver); font-size: .875rem; line-height: 1.6;
}
.project-figure figcaption { max-width: 36ch; margin: 16px auto 0; }
.builds-note { max-width: 65ch; margin: 32px 0 0; }
.story-copy { max-width: 65ch; margin-top: 32px; color: var(--silver); font-size: 1.05rem; line-height: 1.7; }
.public-site .about-story { margin-top: 64px; padding-bottom: 64px; }
.learning-section { padding-top: 40px; border-top: 1px solid var(--border); scroll-margin-top: 24px; }
.public-site :is(.learning-section, .case-section) h2 { font-family: var(--font-display); letter-spacing: -.035em; }
.public-site .form-field select option { background: var(--panel); color: var(--white); }
.public-site .form-field textarea { resize: vertical; }
.public-site .contact-submit:disabled { opacity: .65; cursor: wait; }
.case-hero { padding-top: 140px; padding-bottom: 64px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--silver); margin-bottom: 24px; }
.back-link:hover { color: var(--cyan); }
.case-hero .card-status { margin-top: 32px; flex-wrap: wrap; }
.case-index { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 20px 0; border-block: 1px solid var(--border); }
.case-index a { display: inline-flex; align-items: center; min-height: 44px; color: var(--silver); font-family: var(--font-mono); font-size: .8rem; }
.case-index a:hover { color: var(--cyan); }
.case-section {
    display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: var(--space-xl); border-bottom: 1px solid var(--border);
    padding: var(--space-2xl) 0; scroll-margin-top: 24px;
}
.case-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; max-width: 16ch; }
.case-copy { color: var(--silver); line-height: 1.75; max-width: 70ch; }
.case-copy h3 { color: var(--white); font-family: var(--font-display); font-size: 1.25rem; margin: 28px 0 12px; }
.workflow { list-style: none; margin: 32px 0; padding: 0; border-top: 1px solid var(--border); }
.workflow li { display: grid; grid-template-columns: 28px 145px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.workflow span { color: var(--cyan); font-family: var(--font-mono); font-size: .75rem; }
.workflow strong { color: var(--white); font-weight: 500; }
.workflow p { margin: 0; font-size: .9rem; }
.architecture { border-left: 2px solid var(--cyan); padding-left: 24px; margin: 32px 0; }
.architecture h3 { margin-top: 24px; }
.architecture ol { margin: 0 0 24px; padding-left: 24px; }
.architecture li { padding: 8px 0; }
.architecture p { font-size: .9rem; }
.engineering-note { padding-bottom: 12px; }
.engineering-note + .engineering-note { border-top: 1px solid var(--border); }
.engineering-note:first-child h3 { margin-top: 0; }
.iteration-list { margin: 24px 0 32px; }
.iteration-list > div { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 12px 24px; padding: 24px 0; border-top: 1px solid var(--border); }
.iteration-list dt { color: var(--cyan); font-family: var(--font-mono); font-size: .75rem; padding-top: 4px; }
.iteration-list dd { margin: 0; }
.development-disclaimer { border-left: 2px solid var(--cyan); padding-left: 20px; color: var(--white); }
.public-site .error-page { min-height: 50vh; }
@media (max-width: 991.98px) {
    .public-site .projects-page .col-12 .card-body { grid-template-columns: minmax(0,1fr); gap: 40px; }
    .public-site .project-visual { margin-left: 0; }
    .project-figure figcaption { margin-left: 0; }
}
@media (max-width: 800px) {
    .case-hero { padding-top: 60px; }
    .case-section { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 48px 0; }
    .case-heading h2 { max-width: 26ch; }
    .public-site #currently-building { padding: 48px 0 32px; margin-top: 32px; }
    .public-site .lab-list { margin-top: 40px; }
    .public-site .lab-row .card-status { justify-self: start; }
    .public-site .site-footer { margin-top: 64px; }
    .public-site .contact-workspace { padding-bottom: 32px; }
    .public-site .contact-mark-wrap { display: none; }
    .public-site .contact-mantra { margin-bottom: 0; }
}
@media (max-width: 600px) {
    .public-site .page-title { font-size: clamp(2.35rem, 9vw, 2.6rem); }
    .public-site .project-meta { flex-wrap: wrap; font-size: .7rem; letter-spacing: .1em; }
    .public-site .projects-page .col-12 .card-title { font-size: 2.5rem; }
    .workflow li { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 12px; }
    .workflow p { grid-column: 2; }
    .iteration-list > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
    .iteration-list dd { margin-bottom: 16px; }
    .public-site .case-index { gap: 8px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .public-site *, .public-site *::before, .public-site *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .public-site :is(.btn-primary-custom, .btn-secondary-custom):hover { transform: none; }
}
.public-site .form-field :is(input, select, textarea) { border-color: #596776; }
.public-site .form-field :is(input, select, textarea):focus { border-color: var(--cyan); }
@media (max-width: 800px) {
    .public-site .projects-page .col-12 .card-body { padding-block: 40px; }
    .public-site .projects-page .col-12 .card { margin-top: 40px; }
}

/* ---------- M artwork family: original silhouettes and upper-left light ---------- */
.public-site .hero-mark {
    top: 450px; /* Independent of the height of the Lab entries below. */
    opacity: 1;
}
.public-site .hero-mark > img { opacity: 1; }
.public-site .hero-mark > .hero-accent {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: none; background: none; opacity: 1;
}
.public-site #currently-building::before {
    top: 245px; right: 1.5%; height: 56px; width: 1.5px;
    /* The SVG's rising cut: 115 across, 110 up. */
    transform: rotate(46.273deg); opacity: .65;
    background: linear-gradient(var(--cyan), rgba(0, 212, 255, .2));
    box-shadow: 0 0 6px rgba(0, 212, 255, .12);
}
.public-site .lab-row-featured {
    grid-template-columns: 80px minmax(0, 1fr) 430px auto;
    gap: 32px;
}
.lab-preview { min-width: 0; padding: 12px 0; }
.graphic-frame { position: relative; isolation: isolate; }
.lab-preview .graphic-frame { width: 330px; max-width: 100%; margin-left: auto; }
.graphic-frame::before {
    content: ""; position: absolute; z-index: -1;
    width: 240px; height: 240px; left: -125px; top: 50%;
    transform: translateY(-50%);
    background: url("images/m-project-mark.svg") center / contain no-repeat;
    opacity: .75; pointer-events: none;
}
.graphic-frame::after { content: none; }
.lab-preview .graphic-frame img {
    display: block; width: 100%; height: auto;
    border: 1px solid #33424f;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
.preview-caption {
    max-width: 330px; margin: 16px 0 0 auto; color: var(--silver);
    font-family: var(--font-mono); font-size: .65rem; line-height: 1.6;
}
.public-site .project-visual.graphic-frame {
    overflow: visible; border: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.public-site .project-visual.graphic-frame { margin-left: auto; margin-right: 0; }
.public-site .project-visual.graphic-frame img { border: 1px solid #33424f; }
.public-site .project-visual.graphic-frame::after { content: none; display: none; }
.public-site .project-figure figcaption { max-width: 320px; width: min(100%, 320px); margin: 28px 0 0 auto; }
.public-site .lab-row-featured:is(:hover, :focus-visible) .graphic-frame img { border-color: var(--cyan); }
.public-site .lab-row:focus-visible :is(.lab-info h3, .lab-number) { color: var(--cyan); }
.public-site .lab-row:focus-visible { border-color: var(--cyan); }
.public-site .about-hero { position: relative; isolation: isolate; }
.about-construction {
    position: absolute; width: 300px; height: auto; right: 0; bottom: -8px;
    pointer-events: none;
}
.public-site .contact-brand-panel { position: relative; isolation: isolate; overflow: clip; }
.contact-corner {
    position: absolute; width: 190px; height: auto; right: 0; top: 115px;
    opacity: .55; z-index: -1; pointer-events: none;
}
.public-site .footer-brand { display: flex; align-items: center; gap: 12px; }
.public-site .footer-brand img { flex: none; display: block; }
@media (min-width: 801px) and (max-width: 1100px) {
    .public-site .hero-mark { top: 420px; right: -12vw; width: 70vw; }
    .public-site .lab-row-featured { grid-template-columns: 50px minmax(0, 1fr) 280px; gap: 24px; }
    .public-site .lab-row-featured .lab-preview { grid-column: 3; grid-row: 1 / span 2; }
    .public-site .lab-row-featured .card-status { grid-column: 2; justify-self: start; }
    .about-construction { width: 240px; opacity: .7; }
    .public-site .about-description { max-width: min(54ch, calc(100% - 280px)); }
}
@media (max-width: 800px) {
    .public-site .hero-mark {
        position: relative; display: block; top: auto; right: auto;
        width: 100%; height: 280px; margin-top: 32px;
        transform: none; overflow: hidden;
    }
    .public-site .hero-mark > img,
    .public-site .hero-mark > .hero-accent {
        position: absolute; width: 470px; height: auto;
        left: 50%; top: -72px; right: auto; bottom: auto;
        transform: translateX(-50%);
    }
    .public-site #currently-building { margin-top: 8px; }
    .public-site #currently-building::before { top: 145px; height: 40px; right: 2%; }
    .public-site .lab-row-featured { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
    .public-site .lab-row-featured .lab-preview { grid-column: 2; width: min(100%, 380px); margin: 12px 0 0; }
    .public-site .lab-row-featured .lab-number { align-self: start; padding-top: 4px; }
    .public-site .lab-row-featured .card-status { margin-top: 0; }
    .about-construction { position: static; display: block; width: 200px; margin: 24px 0 0 auto; }
    .public-site .contact-brand-panel { min-height: 310px; }
    .contact-corner { width: 150px; top: 65px; right: 8px; opacity: .5; }
}
@media (max-width: 600px) {
    .public-site .hero-mark { height: 250px; margin-top: 24px; }
    .public-site .hero-mark > img,
    .public-site .hero-mark > .hero-accent { width: 420px; top: -66px; }
    .public-site .contact-brand-panel { min-height: 300px; }
    .about-construction { width: 180px; }
}
/* Keep the original M component in the available desktop space, clear of copy.
   Compact layouts retain the clean, complete product image. */
@media (max-width: 1100px) {
    .public-site .graphic-frame::before { content: none; }
    .public-site .lab-preview .graphic-frame { width: 100%; margin-left: 0; }
    .public-site .preview-caption { max-width: none; margin-left: 0; }
}
@media (max-width: 991.98px) {
    .public-site .project-visual.graphic-frame { margin-left: 0; margin-right: auto; }
    .public-site .project-figure figcaption { margin-left: 0; margin-right: auto; }
}

/* Completed coursework: original certificate, with the existing Lab rhythm. */
.public-site .lab-row-certificate {
    grid-template-columns: 80px minmax(0, 1fr) 300px auto;
    gap: 32px;
}
.public-site .lab-certificate-preview { min-width: 0; }
.public-site .lab-certificate-preview img,
.public-site .certificate-image-link img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--border);
}
.public-site .lab-row-certificate:is(:hover, :focus-visible) img { border-color: var(--cyan); }
.public-site .completed-course {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-xl); align-items: center;
    padding: 40px 0; margin-top: 32px;
    border-block: 1px solid var(--border);
    scroll-margin-top: 32px;
}
.public-site .completed-course h3, .public-site .current-course h3 {
    color: var(--white); font-family: var(--font-display);
    font-size: 2rem; font-weight: 600; letter-spacing: -.03em;
    margin: 0 0 12px;
}
.public-site .course-copy { min-width: 0; }
.public-site .course-name { color: var(--white); font-size: 1.1rem; line-height: 1.5; }
.public-site .course-description { max-width: 42ch; color: var(--silver); line-height: 1.7; }
.public-site .certificate-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.public-site .certificate-actions .project-link { font-size: .85rem; }
.public-site .certificate-figure { min-width: 0; margin: 0; }
.public-site .certificate-image-link { display: block; }
.public-site .certificate-figure figcaption { color: var(--silver); font-size: .8rem; line-height: 1.6; margin-top: 12px; }
.public-site .current-course { margin-top: 40px; }
.public-site .current-course .story-copy { margin-top: 16px; }
@media (min-width: 801px) and (max-width: 1100px) {
    .public-site .lab-row-certificate { grid-template-columns: 50px minmax(0, 1fr) 280px; gap: 24px; }
    .public-site .lab-row-certificate .lab-certificate-preview { grid-column: 3; grid-row: 1 / span 2; }
    .public-site .lab-row-certificate .card-status { grid-column: 2; justify-self: start; }
}
@media (max-width: 800px) {
    .public-site .lab-row-certificate { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
    .public-site .lab-row-certificate .lab-number { align-self: start; padding-top: 4px; }
    .public-site .lab-row-certificate .lab-certificate-preview { grid-column: 2; width: min(100%, 340px); margin-top: 12px; }
    .public-site .lab-row-certificate .card-status { margin-top: 0; }
    .public-site .completed-course { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}