/* ============================================================
   MORETECH -- PROJECTS PREVIEW
   First-party markup + CSS (see partials/projects_preview.php's own
   header for the full rationale). Every recurring visual value is a real
   --mt-* token.

   Design Language v2 (MoreTech craftsmanship pass): a LEFT editorial
   header, then a FEATURED-first grid -- the first project is a wide
   panel (media beside body), the rest a media-card grid with a scrim +
   category badge and an image zoom on hover. 'list' becomes a real
   reading index with a large title and a hairline rule per row -- the
   deliberate no-image reading mode. Class hooks (.mt-projects,
   .mt-projects__header/__eyebrow/__title/__subtitle/__grid/__card/
   __thumb/__badge/__body/__tag/__card-title/__card-summary/__link/__cta/
   __cta-btn, and the --list modifier) are UNCHANGED. The real
   :only-child grid-track bug fix is preserved.
   ============================================================ */

.mt-projects {
    padding: var(--mt-section-py) 0;
    background: var(--mt-page-bg);
    font-family: var(--mt-font-sans);
}

.mt-projects__header {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    gap: var(--mt-space-4) var(--mt-space-12);
    margin: 0 0 var(--mt-space-12);
}

.mt-projects__eyebrow {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-accent);
    margin-bottom: var(--mt-space-4);
}

.mt-projects__eyebrow::before {
    content: "";
    width: var(--mt-kicker-rule);
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.mt-projects__title {
    font-size: var(--mt-text-3xl);
    font-weight: var(--mt-weight-black);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    max-width: var(--mt-measure-head);
    margin: 0;
}

.mt-projects__subtitle {
    font-size: var(--mt-text-md);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-relaxed);
    max-width: var(--mt-measure);
    margin: 0;
    padding-bottom: var(--mt-space-1);
}

.mt-projects__card-title {
    font-size: var(--mt-text-lg);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-snug);
    margin: 0 0 var(--mt-space-2);
}

.mt-projects__card-summary {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-normal);
    margin: 0 0 var(--mt-space-4);
    max-width: var(--mt-measure-tight);
}

.mt-projects__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    color: var(--mt-brand-primary);
    text-decoration: none;
    transition: gap var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects__link:hover {
    gap: var(--mt-space-3);
    text-decoration: underline;
}

/* Bottom-anchors the link within the now-flex .mt-projects__body (above)
   for every SECONDARY card -- scoped away from :first-child, whose own
   centered/justify-content:center featured treatment (below) must stay
   untouched. */
.mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__link {
    margin-top: auto;
}

/* Projects Preview design pass (2026-09-30): a bare left-aligned button
   sitting directly under the grid with only top margin read as an
   unrelated element bolted on below the section (real defect, confirmed
   by screenshot), not its natural conclusion. A hairline top rule (the
   same restrained divider language already used elsewhere -- e.g. the
   Hero split composition's own supporting-items row) plus centering
   ties it to the grid above as one closing statement instead of a
   trailing, disconnected control. */
.mt-projects__cta {
    margin-top: var(--mt-space-12);
    padding-top: var(--mt-space-8);
    border-top: 1px solid var(--mt-border-light);
    text-align: center;
}

.mt-projects__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-4) var(--mt-space-8);
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    box-shadow: var(--mt-elevation-raised);
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects__cta-btn:hover {
    background: var(--mt-brand-primary-hover);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Composition: grid -- REAL DESIGN REDESIGN (2026-09-30).
   ------------------------------------------------------------
   Replaces the previous "photo beside a white text box" card entirely.
   Every card is now ONE image-first panel: the real project screenshot
   fills the whole card via CSS Grid stacking (.mt-projects__thumb and
   .mt-projects__body occupy the SAME grid-area, so the body paints over
   the image regardless of DOM order -- no markup change, the existing
   thumb/body/badge/tag/link structure is reused exactly as-is), with a
   dark scrim for legibility and the text floating directly on the
   photo. The featured project gets an asymmetric floating information
   panel (bottom-right, not full width) for a deliberate case-study
   read; secondary projects get a full-width bottom caption band -- one
   coherent "editorial portfolio" language, not several competing
   effects. Scoped away from .mt-projects--list (its own plain reading-
   index stays untouched) and .mt-projects--spotlight (the Studio
   Composition Kit's own flex-based layout, a separate, independent
   system this redesign does not touch).
   ------------------------------------------------------------ */

.mt-projects__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--mt-space-8);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card {
    position: relative;
    display: block;
    overflow: hidden;
    border: none;
    border-radius: var(--mt-radius-xl);
    background: var(--ally-navy-900);
    box-shadow: 0 20px 48px -20px rgba(11, 18, 32, 0.34);
    transition: box-shadow var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 64px -20px rgba(11, 18, 32, 0.42);
}

/* Featured first project spans both columns and stands taller -- the
   primary case-study highlight. Every non-first card shares one fixed
   height regardless of project count (never a card-count-dependent
   switch -- same invariant the previous pass already established). */
.mt-projects__grid > .mt-projects__card:first-child {
    grid-column: 1 / -1;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child {
    height: clamp(420px, 56vw, 600px);
}

/* Height is intrinsic (image + content), not a fixed budget -- a fixed
   height forced the panel's own padding/gaps to compete with its text
   for room and lost (confirmed by screenshot: padding collapsed, the
   CTA sat flush against the edges). The grid's own stretch alignment
   still keeps both secondary cards the same height as each other. */

/* The image (or the no-photo placeholder) fills the entire card -- plain
   absolute positioning (no CSS Grid) is what lets the body float on top
   of it next, independently, regardless of its own content height. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform var(--mt-duration-slow) var(--mt-ease-default);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover .mt-projects__thumb img {
    transform: scale(1.04);
}

/* A deliberate, textured panel when a project has no real photo yet --
   never a flat gradient box. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb {
    background:
        radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1.4px) 0 0 / 18px 18px,
        radial-gradient(ellipse 70% 60% at 85% 15%, rgba(96, 152, 224, 0.28) 0%, rgba(96, 152, 224, 0) 60%),
        linear-gradient(135deg, var(--ally-navy-700) 0%, #2C4270 100%);
}

/* Full-card scrim -- strong enough for white text anywhere on the
   image, deliberately heavier toward the bottom where the caption/
   panel sits. One consistent tint, not a per-photo guess. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32,0.05) 0%, rgba(11,18,32,0.25) 45%, rgba(11,18,32,0.88) 100%);
    pointer-events: none;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__badge {
    position: absolute;
    top: var(--mt-space-4);
    left: var(--mt-space-4);
    z-index: 3;
    padding: var(--mt-space-1) var(--mt-space-3);
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ally-navy-700);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* The body floats ON the image, pinned to the bottom edge -- text lives
   directly on the photo instead of a separate white box beside/under
   it. Absolute positioning (not grid align-self) -- align-self:end
   inside an auto-sized grid row rendered the panel's content clipped/
   cut off in real testing (confirmed by screenshot: title showed, the
   summary and link below it did not); absolute against the card's own
   position:relative is the same reliable technique the featured
   panel's own override already uses successfully. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    color: var(--ally-white);
    padding: var(--mt-space-6);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-title {
    color: var(--ally-white);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-summary {
    color: rgba(255, 255, 255, 0.78);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__link {
    color: var(--ally-white);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__link:hover {
    color: var(--ally-blue-300);
}

/* -- Featured card: an asymmetric FLOATING panel, bottom-right, not
   full width -- the "primary case-study" read the previous pass never
   had. A solid (not glass/blurred) navy panel keeps the language
   restrained rather than layering on another effect. -- */
/* Debugging note (2026-09-30): the grid align-self/justify-self +
   margin combination this rule first tried rendered invisible -- likely
   clipped by the card's own overflow:hidden once margin was added to a
   grid-aligned item. Switched to plain, predictable absolute
   positioning instead, which is the standard technique for a panel
   floating over an image and does not interact with the card's grid
   placement at all. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
    position: absolute;
    right: var(--mt-space-8);
    bottom: var(--mt-space-8);
    left: auto;
    top: auto;
    width: min(420px, calc(100% - var(--mt-space-12) - var(--mt-space-12)));
    padding: var(--mt-space-6);
    background: rgba(9, 15, 28, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--mt-radius-lg);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
}

/* The featured card already carries its category via the floating pill
   badge on the image plus its own "FEATURED PROJECT" kicker below --
   the in-panel .mt-projects__tag (added for secondary cards) would
   duplicate that same category text a second time inside this panel. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__tag {
    display: none;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body::before {
    content: "FEATURED PROJECT";
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    color: var(--ally-blue-300);
    margin-bottom: var(--mt-space-4);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
    font-size: var(--mt-text-2xl);
    margin-bottom: var(--mt-space-3);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-summary {
    font-size: var(--mt-text-md);
    margin-bottom: var(--mt-space-5);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link {
    margin-top: 0;
    padding: var(--mt-space-3) var(--mt-space-6);
    border-radius: var(--mt-radius-full);
    background: var(--ally-white);
    color: var(--ally-navy-700);
    width: fit-content;
    box-shadow: var(--mt-elevation-raised);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link:hover {
    background: var(--ally-grey-200);
    color: var(--ally-navy-700);
}

/* -- Secondary cards: a real two-part surface -- an IMAGE region on top
   and a SOLID navy information panel below it, not text floating over
   the photo's own gradient. The panel is a genuine opaque surface
   (--ally-navy-800, the same token the footer already uses for its own
   "raised panel" chips) so it reads as a distinct container, clearly
   subordinate to the featured treatment but built from the same
   navy/white/blue language. -- */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) {
    display: flex;
    flex-direction: column;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__thumb {
    position: relative;
    flex: 0 0 230px;
    height: 230px;
}

/* No text sits on the photo anymore -- the heavy legibility scrim the
   shared base rule applies is no longer needed here, so the image stays
   clean and true-color, exactly as the mockup's plain "PROJECT IMAGE"
   box shows. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__thumb::after {
    content: none;
}

/* The pill badge floating on the image is replaced by the category
   TAG living inside the panel itself (see .mt-projects__tag below) --
   one category label per card, shown in the panel, not on the photo. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__badge {
    display: none;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    flex: 1 1 auto;
    width: 100%;
    background: var(--ally-navy-800);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__tag {
    color: var(--ally-blue-300);
    margin-bottom: var(--mt-space-3);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__card-title {
    margin-bottom: var(--mt-space-3);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__card-summary {
    font-size: var(--mt-text-sm);
    margin-bottom: var(--mt-space-4);
}

/* A fixed margin, not margin-top:auto -- auto only creates space when
   the flex container has leftover room to distribute, and this panel's
   height is now intrinsic to its own content, so auto collapsed to
   zero and the button sat flush against the text above it (confirmed
   by screenshot). A real margin always holds its gap. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__link {
    margin-top: var(--mt-space-2);
}

/* A lone card in the auto-fit grid stretches full width; cap the track
   to a single, centred column instead (unchanged behaviour, preserved
   from the previous pass). */
.mt-projects__grid:has(.mt-projects__card:only-child) {
    grid-template-columns: min(560px, 100%);
    justify-content: center;
}

/* ------------------------------------------------------------
   Composition: list -- an editorial reading index. No thumbnail
   column (the deliberate no-image mode). v2: a large title, a small
   accent category tag, a hairline rule per row, and a row-wide hover
   shift so the whole entry reads as a link.
   ------------------------------------------------------------ */

.mt-projects--list .mt-projects__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--mt-border-light);
}

.mt-projects--list .mt-projects__card {
    flex-direction: column;
    border: none;
    border-bottom: 1px solid var(--mt-border-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.mt-projects--list .mt-projects__card:hover {
    box-shadow: none;
    transform: none;
}

.mt-projects--list .mt-projects__body {
    padding: var(--mt-space-8) 0;
    transition: padding-left var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects--list .mt-projects__card:hover .mt-projects__body {
    padding-left: var(--mt-space-4);
}

.mt-projects--list .mt-projects__card-title {
    font-size: var(--mt-text-2xl);
}

.mt-projects--list .mt-projects__card-summary {
    max-width: var(--mt-measure);
}

.mt-projects__tag {
    display: inline-block;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-accent);
    margin-bottom: var(--mt-space-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .mt-projects__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--mt-space-4);
        margin-bottom: var(--mt-space-10);
    }
    .mt-projects__title {
        max-width: 26ch;
    }
    .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
        font-size: var(--mt-text-xl);
    }
    .mt-projects--list .mt-projects__card-title {
        font-size: var(--mt-text-xl);
    }
}

@media (max-width: 767px) {
    .mt-projects {
        padding: var(--mt-section-py-sm) 0;
    }
    .mt-projects__title {
        font-size: var(--mt-text-2xl);
    }
    .mt-projects__grid {
        grid-template-columns: 1fr;
        gap: var(--mt-space-5);
    }
    /* Featured card's floating bottom-right panel doesn't fit a narrow
       viewport -- it collapses to the same full-width bottom band the
       secondary cards already use, keeping the one overlay language
       instead of introducing a second, stacked-white-box pattern. */
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        padding: var(--mt-space-6);
    }
    .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
        font-size: var(--mt-text-lg);
    }
    .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-summary {
        font-size: var(--mt-text-sm);
    }
    .mt-projects--list .mt-projects__card-title {
        font-size: var(--mt-text-lg);
    }
    .mt-projects--list .mt-projects__body {
        padding: var(--mt-space-6) 0;
    }
    .mt-projects__cta {
        margin-top: var(--mt-space-8);
    }
    .mt-projects__cta-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   PLUSFAB PROJECTS PREVIEW (2026-10-01) -- presentation layer, appended
   (wins by source order). Same markup, data and compositions (grid with
   featured-first / list / spotlight) -- the existing image-first
   structure is kept and refined, not rebuilt:
   engineered portfolio panels -- 1px steel border, 2px radius, no
   shadow or lift; images true-colour (the navy legibility scrim is gone
   because text now sits on solid white information panels); a copper top
   rule on each information panel; category as a square steel label with
   a copper edge; Archivo graphite titles; flat graphite buttons.
============================================================ */
.mt-projects { background: #FFFFFF; }

/* -- Section header (shared PlusFab label language) -- */
.mt-projects__eyebrow {
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.16em;
    color: #555C63;
}
.mt-projects__eyebrow::before { background: var(--mt-accent); }
.mt-projects__title {
    font-family: var(--mt-font-heading);
    font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
    font-weight: var(--mt-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ally-navy-700);
    text-wrap: balance;
}
.mt-projects__subtitle { font-size: 1.02rem; line-height: 1.65; color: #555C63; }

/* -- Shared card text -- */
.mt-projects__card-title {
    font-family: var(--mt-font-heading);
    font-size: 1.15rem;
    font-weight: var(--mt-weight-bold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.mt-projects__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    font-size: 0.7rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.12em;
    color: #6B737A;
}
.mt-projects__tag::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--mt-accent);
    flex-shrink: 0;
}
.mt-projects__link {
    font-family: var(--mt-font-heading);
    font-size: 0.78rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ally-navy-700);
}
.mt-projects__link:hover { color: var(--mt-accent-hover); text-decoration: none; }

/* -- Grid: engineered panels -- */
.mt-projects__grid { gap: var(--mt-space-6); }

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card {
    border: 1px solid #D5DADE;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: none;
    transition: border-color var(--mt-duration-normal) var(--mt-ease-default);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover {
    transform: none;
    box-shadow: none;
    border-color: #8A939B;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover .mt-projects__thumb img {
    transform: scale(1.02);
}

/* No photo: the brushed-steel panel used by the Hero placeholder. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
        linear-gradient(135deg, var(--ally-navy-600) 0%, var(--ally-navy-800) 60%, var(--ally-navy-900) 100%);
}
/* True-colour images: the navy legibility scrim is not needed -- all
   card text sits on solid white panels. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb::after { content: none; }

/* Category label on the image: a square white plate with a copper edge
   (was a white pill). */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__badge {
    top: var(--mt-space-5);
    left: var(--mt-space-5);
    padding: 6px 10px 6px 12px;
    border-radius: 0;
    background: #FFFFFF;
    border-left: 2px solid var(--mt-accent);
    color: var(--ally-navy-700);
    font-size: 0.68rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.12em;
    backdrop-filter: none;
}

/* -- Featured (first) project: image full-card, a WHITE engineered
   information panel floating bottom-right (was a navy glass panel). -- */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child {
    height: clamp(400px, 44vw, 540px);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
    right: var(--mt-space-6);
    bottom: var(--mt-space-6);
    width: min(440px, calc(100% - var(--mt-space-12)));
    padding: var(--mt-space-8);
    background: #FFFFFF;
    border: 1px solid #D5DADE;
    border-top: 2px solid var(--mt-accent);
    border-radius: 0;
    box-shadow: none;
    color: var(--ally-navy-700);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body::before {
    font-size: 0.7rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.14em;
    color: #6B737A;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
    font-size: 1.6rem;
    color: var(--ally-navy-700);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555C63;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link {
    padding: 0.85rem 1.35rem;
    border-radius: var(--mt-radius-sm, 6px);
    background: var(--ally-navy-700);
    color: #FFFFFF;
    box-shadow: none;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link:hover {
    background: var(--ally-navy-900);
    color: #FFFFFF;
}

/* -- Secondary projects: image on top, WHITE information panel below
   (was a navy panel) with a copper top rule. -- */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__thumb {
    flex-basis: 240px;
    height: 240px;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__body {
    padding: var(--mt-space-6) var(--mt-space-6) var(--mt-space-6);
    background: #FFFFFF;
    border-top: 2px solid var(--mt-accent);
    color: var(--ally-navy-700);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__tag {
    color: #6B737A;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-title { color: var(--ally-navy-700); }
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-summary { color: #555C63; }
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__link { color: var(--ally-navy-700); }
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__link:hover { color: var(--mt-accent-hover); }

/* -- list composition: hairline index in the same language -- */
.mt-projects--list .mt-projects__grid,
.mt-projects--list .mt-projects__card { border-color: #D5DADE; }
.mt-projects--list .mt-projects__card-title { color: var(--ally-navy-700); }

/* -- Section CTA: flat graphite -- */
.mt-projects__cta { border-top-color: #D5DADE; }
.mt-projects__cta-btn {
    padding: 0.95rem 1.6rem;
    border-radius: var(--mt-radius-sm, 6px);
    background: var(--ally-navy-700);
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}
.mt-projects__cta-btn:hover {
    background: var(--ally-navy-900);
    color: #FFFFFF;
    transform: none;
}

/* -- Tablet: a narrower featured panel so the image stays the focus. -- */
@media (min-width: 768px) and (max-width: 1024px) {
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
        width: min(360px, calc(100% - var(--mt-space-10)));
        right: var(--mt-space-5);
        bottom: var(--mt-space-5);
        padding: var(--mt-space-6);
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title { font-size: 1.3rem; }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-summary {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
}

/* -- Mobile: the featured card uses the same image-then-panel stack as
   the others (a white panel floating over a small image would cover it),
   images are shorter, and summaries clamp to three lines so the preview
   cards stay compact (the full text is on the project page). -- */
@media (max-width: 767px) {
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__thumb {
        position: relative;
        flex: 0 0 210px;
        height: 210px;
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
        position: relative;
        width: 100%;
        right: auto;
        bottom: auto;
        padding: var(--mt-space-6);
        border: 0;
        border-top: 2px solid var(--mt-accent);
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title { font-size: 1.25rem; }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__thumb {
        flex-basis: 190px;
        height: 190px;
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-summary {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link {
        width: 100%;
        justify-content: center;
    }
    .mt-projects__grid { gap: var(--mt-space-4); }
}


/* ============================================================
   PLUSFAB PROJECTS PREVIEW v2 (2026-10-01, client revision) --
   "PROJECT SHEET". Appended after v1; same markup, data and
   compositions (grid / list / spotlight). Grid composition only.
   1. Balanced grid (desktop): 6 tracks, featured spans all, secondary
      cards span 2; when the last row would hold 2 secondaries they span
      3 each, a lone last secondary spans the full row -- no empty slot.
   2. Featured card framed with copper corner brackets (the About image /
      CTA drawing-mark language).
   3. Each information panel carries an outlined stencil number (CSS
      counter -- a drawing title-block detail, not content).
   4. Header: steel rule with a copper segment (as Services).
============================================================ */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__header {
    position: relative;
    padding-bottom: var(--mt-space-10);
    border-bottom: 1px solid #D5DADE;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 2px;
    background: var(--mt-accent);
}

/* 1. Balanced grid */
@media (min-width: 1025px) {
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid:not(:has(> .mt-projects__card:only-child)) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) { grid-column: span 2; }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child):nth-last-child(2):nth-child(3n+2),
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child):last-child:nth-child(3n) { grid-column: span 3; }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child):last-child:nth-child(3n+2) { grid-column: 1 / -1; }
    /* half-width secondaries: a slightly taller image keeps the proportion */
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child):nth-last-child(2):nth-child(3n+2) .mt-projects__thumb,
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child):last-child:nth-child(3n) .mt-projects__thumb {
        flex-basis: 300px;
        height: 300px;
    }
}

/* 2. Copper corner brackets on the featured card */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child {
    overflow: visible;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__thumb { overflow: hidden; }
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child::before,
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child::after {
    content: "";
    position: absolute;
    z-index: 4;
    width: 32px;
    height: 32px;
    pointer-events: none;
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--mt-accent);
    border-left: 2px solid var(--mt-accent);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child::after {
    right: -1px;
    bottom: -1px;
    border-bottom: 2px solid var(--mt-accent);
    border-right: 2px solid var(--mt-accent);
}

/* 3. Stencil number in each information panel */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid { counter-reset: pf-prj; }
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card { counter-increment: pf-prj; }
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__body::after {
    content: counter(pf-prj, decimal-leading-zero);
    position: absolute;
    top: var(--mt-space-5);
    right: var(--mt-space-6);
    font-family: var(--mt-font-heading);
    font-size: 1.9rem;
    font-weight: var(--mt-weight-bold);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #9AA2A9;
    pointer-events: none;
    transition: -webkit-text-stroke-color var(--mt-duration-normal) var(--mt-ease-default);
}
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover .mt-projects__body::after {
    -webkit-text-stroke-color: var(--mt-accent);
}
/* keep titles clear of the number */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-title { padding-right: 3.2rem; }

@media (max-width: 767px) {
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__header { padding-bottom: var(--mt-space-6); }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__body::after { font-size: 1.5rem; top: var(--mt-space-4); right: var(--mt-space-5); }
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child::before,
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child::after { width: 22px; height: 22px; }
}