/* ============================================================
   MORETECH -- HERO
   First-party markup + CSS (see partials/hero.php's own header for the
   full rationale) -- not derived from Fable5's forge hero or from the
   shared platform hero-css-v2.css engine. Every recurring visual value
   is a real --mt-* token (00-tokens.css); the only local custom
   properties here (--hero-overlay-start/-end) are per-render computed
   values derived from overlay_opacity, the same real convention the
   platform's own universal hero.php already uses -- not brand values.
   Three compositions, one shared root (.mt-hero) and one shared actions/
   container/heading/button convention -- see hero.php's own docstring
   for why that consistency is deliberate.

   COLOR ARCHITECTURE (Live UAT correction round): .mt-hero is the ONE
   source of foreground color for every composition (color: ... set once
   per composition below, on .mt-hero / .mt-hero--editorial). Every text
   element (title/subtitle/description/micro/proof-item) declares
   `color: currentColor` EXPLICITLY -- not left to plain inheritance --
   for a real, verified reason: the shared platform's own
   web/assets/css/01-foundation.css sets `h1, h2, h3, h4, h5, h6 { color:
   var(--mt-text-heading) }` (a sane default for a light page), a bare
   element selector that matches this Hero's own <h1> directly and wins
   over pure inheritance regardless of source order (a real, confirmed
   bug: the default Hero's own headline rendered near-invisible on a dark
   composition before this fix, verified by real screenshot). An explicit
   `currentColor` on the class-scoped title element beats that bare
   element selector by specificity, and keeps the whole text stack
   correctly following whatever .mt-hero's own `color` is -- including a
   real Studio `self` color style edit, which this document's own
   HEADING_ROUTED_PROPS mechanism already re-targets onto the real
   heading selector. Hierarchy among text elements is expressed with
   `opacity` only (never a second, competing color value) -- this is what
   lets a Studio/AI self.color edit reach every text element correctly,
   on every composition, with no per-composition special-casing.
============================================================ */

.mt-hero {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    font-family: var(--mt-font-sans);
    color: var(--mt-text-inverse);
}

/* A fine accent line across the very top edge -- a small, considered
   brand mark rather than decoration, echoed nowhere else on the page.
   Ally Hero Redesign (2026-09-19): recolored from --mt-accent (orange)
   to --ally-blue-400 -- this sits directly beneath the now-white Ally
   Header, so it also reads as a deliberate blue seam between the two
   components, echoing the Header's own blue underline/active-marker
   language rather than introducing an unrelated accent color. */
.mt-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ally-blue-400);
    z-index: 2;
}

.mt-hero__container {
    position: relative;
    z-index: 1;
    padding-top: var(--mt-space-24);
    padding-bottom: var(--mt-space-24);
    /* Responsive/Overflow round (2026-09-19): establishes a real sizing
       context for the fluid type below. .mt-hero__title's clamp() now
       reads container width (cqi), not viewport width (vw) -- the actual
       bug behind "split's narrower column gets the same font-size media's
       full-width column would at the same viewport." Harmless where the
       container already approximates the viewport (media/editorial). */
    container-type: inline-size;
}

.mt-hero__micro {
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--mt-space-4);
    padding: var(--mt-space-1) var(--mt-space-3);
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: currentColor;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    opacity: 0.8;
}

.mt-hero__title {
    margin: 0 0 var(--mt-space-5);
    color: currentColor;
    /* V2 Phase 2.0 (Template Craftsmanship Pass): ceiling raised from
       --mt-text-4xl to the new --mt-text-5xl display tier, and the
       preferred/slope recalibrated so the title keeps scaling up to a
       real desktop content width (~1440px) instead of plateauing at
       ~800px, as the old `1.5rem + 2.6vw` slope did. Root cause was
       real, not assumed: a real project's Hero style edit already
       referenced var(--mt-text-4xl) — the literal old ceiling — and
       still read as weak (V2 Design Quality Plan, ALLY finding #1).
       Hero-fix round: ceiling raised again to the new --mt-text-6xl
       (~72px) display tier and the slope steepened so the default H1
       actually reaches that tier on a real desktop — the prior clamp
       already sat at its own --mt-text-5xl ceiling by ~1440px, leaving
       an AI/human "make the headline dominant" edit with no headroom
       (ally_saturday premium-hero proposal). Mobile floor unchanged.

       Responsive/Overflow round (2026-09-19): basis changed from vw to
       cqi (container query inline-size unit -- 1cqi = 1% of
       .mt-hero__container's own width, see container-type above), same
       numeric coefficient. vw measured the viewport regardless of which
       composition was active, so split's ~52%-wide column got the exact
       same font-size a full-width media/editorial column would at the
       same viewport -- the real cause of split's text feeling oversized
       for its own column. cqi makes font-size a function of the actual
       available column; media/editorial are effectively unchanged since
       their container already approximates the old vw reference. */
    font-size: clamp(2.25rem, 1.6rem + 2.9cqi, var(--mt-text-6xl));
    font-weight: var(--mt-weight-black);
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    max-width: 22ch;
    /* CSS hardening (2026-09-19): max-width alone doesn't force a break --
       a single long, space-less string has no natural break point and
       would overflow this box instead of wrapping. Standard defensive
       property; no effect on normal text. */
    overflow-wrap: break-word;
}

.mt-hero--purpose-homepage .mt-hero__title,
.mt-hero--purpose-internal .mt-hero__title { max-width: 20ch; }

.mt-hero__subtitle {
    margin: 0 0 var(--mt-space-4);
    color: currentColor;
    font-size: var(--mt-text-lg);
    font-weight: var(--mt-weight-medium);
    line-height: var(--mt-leading-snug);
    max-width: 46ch;
    opacity: 0.92;
    overflow-wrap: break-word;
}

.mt-hero__description {
    margin: 0 0 var(--mt-space-6);
    color: currentColor;
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-normal);
    line-height: var(--mt-leading-relaxed);
    max-width: 52ch;
    opacity: 0.82;
    overflow-wrap: break-word;
}

/* Real bug fix (whole-page design review round): .mt-hero__title/
   __subtitle/__description are block-level elements with their own
   max-width (22ch/46ch/52ch) but no margin — Bootstrap's text-center/
   text-end utility classes (applied to whichever real ancestor holds this
   content: .mt-hero__container for media/split, .mt-hero__editorial-content
   for editorial) only set text-align, which aligns the TEXT INSIDE each
   already-narrow box, not the box itself within the wider container.
   Confirmed via real computed styles on a real render: these three
   elements' own left offset stayed an identical 133px regardless of
   whether text_align was left, center, or right, while .mt-hero__proof/
   .mt-hero__actions (real flex rows with justify-content already applied)
   and .mt-hero__micro (inline-flex, which DOES follow ancestor text-align
   the way inline-level boxes do) all correctly repositioned. Unlike the
   CTA boxed-alignment fix, there was no existing margin technique here to
   recalibrate — these three elements had no alignment-aware margin at
   all, so this adds one, scoped to exactly the two real ancestors that
   ever carry the alignment class. text-start needs no rule: margin:0 on
   both sides (the existing default, from .mt-hero__title/__subtitle/
   __description's own shorthand `margin` above) already produces the
   correct flush-left position. */
.mt-hero__container.text-center .mt-hero__title,
.mt-hero__container.text-center .mt-hero__subtitle,
.mt-hero__container.text-center .mt-hero__description,
.mt-hero__container.text-center .mt-hero__micro,
.mt-hero__editorial-content.text-center .mt-hero__title,
.mt-hero__editorial-content.text-center .mt-hero__subtitle,
.mt-hero__editorial-content.text-center .mt-hero__description,
.mt-hero__editorial-content.text-center .mt-hero__micro {
    margin-left: auto;
    margin-right: auto;
}

.mt-hero__container.text-end .mt-hero__title,
.mt-hero__container.text-end .mt-hero__subtitle,
.mt-hero__container.text-end .mt-hero__description,
.mt-hero__container.text-end .mt-hero__micro,
.mt-hero__editorial-content.text-end .mt-hero__title,
.mt-hero__editorial-content.text-end .mt-hero__subtitle,
.mt-hero__editorial-content.text-end .mt-hero__description,
.mt-hero__editorial-content.text-end .mt-hero__micro {
    margin-left: auto;
    margin-right: 0;
}

.mt-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-3) var(--mt-space-6);
    margin: 0 0 var(--mt-space-6);
}

.mt-hero__proof-item {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-2) var(--mt-space-4);
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    color: currentColor;
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    opacity: 0.85;
    overflow-wrap: break-word;
    transition: background-color var(--mt-duration-fast) var(--mt-ease-default),
                border-color var(--mt-duration-fast) var(--mt-ease-default);
}

.mt-hero__proof-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.mt-hero__proof-item::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--mt-radius-full);
    /* Ally Hero Redesign (2026-09-19): --mt-accent (orange) -> --ally-blue-400. */
    background: var(--ally-blue-400);
    flex-shrink: 0;
}

/* ── Supporting Items — proof/stat cards (Phase 3: Template Hero Visual
   Differentiation). Distinct from .mt-hero__proof (highlights[] pill
   badges, above) — a richer unit that can carry an image/icon + a
   value + a label + a caption. Same glass-pill surface language as
   .mt-hero__proof-item, one size class up. */
.mt-hero__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-3);
    margin: 0 0 var(--mt-space-6);
}

.mt-hero__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mt-space-1);
    min-width: 132px;
    max-width: 200px;
    padding: var(--mt-space-3) var(--mt-space-4);
    border-radius: var(--mt-radius-md);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    color: currentColor;
}

.mt-hero__item-img {
    width: 34px;
    height: 34px;
    border-radius: var(--mt-radius-sm);
    object-fit: cover;
}

.mt-hero__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.14);
    /* Ally Hero Redesign (2026-09-19): --mt-accent (orange) -> --ally-blue-300,
       reusing the exact precedent already set for Footer's own icon-on-dark
       (--mt-footer-icon: var(--ally-blue-300)). */
    color: var(--ally-blue-300);
    font-size: 1rem;
}

.mt-hero__item-value {
    font-size: var(--mt-text-xl);
    font-weight: var(--mt-weight-black);
    line-height: 1.1;
    color: currentColor;
    overflow-wrap: break-word;
}

.mt-hero__item-label {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    color: currentColor;
    opacity: 0.88;
    overflow-wrap: break-word;
}

.mt-hero__item-caption {
    font-size: var(--mt-text-xs);
    line-height: 1.4;
    color: currentColor;
    opacity: 0.68;
    overflow-wrap: break-word;
}

/* Editorial reuses the light-ground proof tint for the same reason its
   .mt-hero__proof-item does (dark-ground surface above is invisible on
   the near-white editorial background). */
.mt-hero--editorial .mt-hero__item {
    background: rgba(var(--mt-brand-primary-rgb), 0.06);
    border-color: rgba(var(--mt-brand-primary-rgb), 0.16);
    backdrop-filter: none;
}
.mt-hero--editorial .mt-hero__item-icon {
    background: rgba(var(--mt-brand-primary-rgb), 0.12);
}

@media (max-width: 575px) {
    .mt-hero__item { min-width: 124px; max-width: 46%; padding: var(--mt-space-2) var(--mt-space-3); }
    .mt-hero__items { gap: var(--mt-space-2); }
}

.mt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-4);
}

.mt-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt-space-3) var(--mt-space-8);
    /* Pill shape -- matches every other module's own CTA button
       (about/services/wcu/cta all already use --mt-radius-full). */
    border-radius: var(--mt-radius-full);
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--mt-duration-normal) var(--mt-ease-default),
                background-color var(--mt-duration-normal) var(--mt-ease-default),
                box-shadow var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-hero__btn:hover { transform: translateY(-2px); }

/* CTA hierarchy: primary is the commanding, filled, elevated action;
   secondary stays visibly present but subordinate (outline, no glow) --
   a real default hierarchy Studio's shared 'button' target can still
   restyle for both at once, and the new 'button-primary'/
   'button-secondary' targets can now override independently. */
/* Ally Hero Redesign (2026-09-19): the primary CTA is now the inverse of
   its own background rather than a fixed accent color -- white-on-navy
   here because Hero's own surface is dark, mirroring the exact pairing
   the Ally Header used for its own CTA before Header Direction 1 flipped
   the Header itself to a light surface. Same system, applied to whichever
   component is actually dark. --ally-grey-200 (its own "near-white, CTA
   hover" token) is the hover state, not a darker shade of the fill. */
.mt-hero__btn--primary {
    background-color: var(--ally-white);
    color: var(--ally-navy-700);
    box-shadow: var(--mt-shadow-xl);
}

.mt-hero__btn--primary:hover { background-color: var(--ally-grey-200); color: var(--ally-navy-700); }

.mt-hero__btn--secondary {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: currentColor;
    color: inherit;
    opacity: 0.9;
    backdrop-filter: blur(10px);
}

.mt-hero__btn--secondary:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.14); }


/* ============================================================
   COMPOSITION: MEDIA -- full-bleed background, layered atmospheric
   overlay, centered/aligned content on top. Even with no real image set,
   the default background is a real, layered dark gradient (curated
   --mt-gradient-dark) plus a soft accent glow -- never a single flat
   color -- so the composition reads as designed before any real photo
   or AI edit is added.
============================================================ */
.mt-hero--media {
    min-height: clamp(520px, 74vh, 780px);
    /* Ally Hero Redesign (2026-09-19): the generic --mt-surface-dark /
       --mt-gradient-dark pair replaced with the same --ally-navy-800 /
       --ally-navy-900 family the Footer already ends the page on -- one
       coordinated dark tone across the template, not two unrelated
       "dark" values. */
    background-color: var(--ally-navy-900);
    background-image: linear-gradient(180deg, var(--ally-navy-800) 0%, var(--ally-navy-900) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
}

.mt-hero--media .mt-hero__overlay {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    /* Layered atmosphere: a soft warm glow (real accent token, low
       opacity, off-center for a real focal point) UNDER the same dark
       wash the overlay_opacity content field already controls -- the
       glow is a fixed, restrained design constant; the dark wash stays
       the one real per-render control. */
    background-image:
        radial-gradient(ellipse 60% 55% at 20% 15%, rgba(var(--mt-brand-primary-rgb), 0.35) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%),
        linear-gradient(180deg, var(--hero-overlay-start, rgba(11,18,32,0.5)) 0%, var(--hero-overlay-end, rgba(11,18,32,0.6)) 100%);
}

.mt-hero--purpose-internal.mt-hero--media { min-height: clamp(360px, 46vh, 520px); }

/* Supporting visual on the full-bleed composition — a floating framed
   card anchored bottom-right, overlapping the background rather than
   stacked underneath the text (Phase 3: Template Hero Visual
   Differentiation). Desktop-only placement; collapses into the normal
   document flow on narrower screens so it never overlaps the text. */
.mt-hero--has-visual .mt-hero__container { padding-bottom: var(--mt-space-32); }

.mt-hero__visual {
    position: absolute;
    right: var(--mt-space-10);
    bottom: var(--mt-space-10);
    z-index: 2;
    width: min(300px, 32vw);
    border-radius: var(--mt-radius-xl);
    overflow: hidden;
    box-shadow: var(--mt-shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.mt-hero__visual-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .mt-hero--has-visual .mt-hero__container { padding-bottom: var(--mt-space-24); }
    .mt-hero__visual {
        position: static;
        width: 220px;
        margin-top: var(--mt-space-6);
    }
}


/* ============================================================
   COMPOSITION: SPLIT -- text panel (layered brand gradient, not flat) +
   a real, distinct media column that reads as an intentional panel even
   with no real image set (layered gradient + soft glow + inner ring),
   never an empty rectangle.
============================================================ */
.mt-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: clamp(480px, 66vh, 720px);
}

.mt-hero__split-content { position: relative; display: flex; }

.mt-hero--split .mt-hero__overlay {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    /* Ally Hero Redesign (2026-09-19): --mt-brand-primary/-hover replaced
       with the explicit --ally-navy-700/-600 pair (the same "700 base,
       600 lighten-on-hover" convention already used for the Header's own
       CTA: --mt-header-cta-bg / --mt-header-cta-bg-hover) -- same rendered
       color, now an explicit, named member of the Ally navy family rather
       than a generic brand alias. */
    background-image:
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(var(--mt-brand-primary-rgb), 0.4) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%),
        linear-gradient(160deg, var(--ally-navy-700) 0%, var(--ally-navy-600) 100%);
    color: var(--mt-text-inverse);
}

.mt-hero__split-media {
    position: relative;
    overflow: hidden;
    /* Establishes a real stacking context (position:relative alone does
       not) so ::before's negative z-index below stays contained to this
       one panel -- it must paint behind the panel's own static <img>,
       never behind anything in the wider Hero. */
    z-index: 0;
    /* Ally Hero Redesign (2026-09-19): a navy fallback (was the generic
       light --mt-surface-sunken) so the media column reads as part of the
       same dark composition even before/without a real image painting
       over it, instead of a mismatched light-grey box. A 1px inner light
       seam marks the boundary between the two columns -- the same
       restrained hairline-separator language the Header/Footer already
       use, not a decorative border. */
    background: var(--ally-navy-900);
    /* Hero visual polish round (2026-09-30): a real, wide product-
       portfolio photo (4 labelled panels spread near edge-to-edge) does
       not exist at this column's own aspect ratio -- object-fit:cover
       (this panel's prior default) crops it hard enough to lose an
       entire product off one edge, confirmed by direct screenshot
       comparison. Switched to object-fit:contain below (see .mt-hero__
       media), which needs a real background behind the now-visible
       letterbox bars rather than a flat color -- this soft, centered
       glow reuses the exact radial-highlight language the no-image
       placeholder below already establishes, so an image that doesn't
       fill the panel still reads as an intentional, integrated
       composition instead of "photo floating on an empty box." */
    background-image: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 62%);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08), inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

/* A soft fade from the text panel's own navy into the image, so the
   column boundary reads as a deliberate blend rather than a hard photo
   edge -- restrained (one gradient, no color shift), scoped to split
   only. Painted above the <img> (later in source order, same stacking
   context) without needing z-index. */
.mt-hero--split .mt-hero__split-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ally-navy-900) 0%, rgba(10, 17, 33, 0) 12%);
    pointer-events: none;
}

.mt-hero--split.mt-hero--split-media-start .mt-hero__split-media::after {
    background: linear-gradient(270deg, var(--ally-navy-900) 0%, rgba(10, 17, 33, 0) 12%);
}

/* Image-panel composition round (2026-09-30): object-fit:contain (above)
   correctly stops cropping the product image, but leaves real letterbox
   bars whose flat navy + faint glow read as "photo floating in a black
   box" once the image is this large/detailed. Fills exactly that empty
   space with the SAME image the foreground already shows -- never a
   second, hardcoded asset; --split-media-bg is set inline by hero.php
   from the one real background_image/visual_image value, so this always
   matches whatever the admin has configured, including after a future
   image change -- scaled to cover, heavily blurred and darkened into a
   quiet atmosphere, then the sharp `contain` foreground sits on top of
   it. Negative z-index (see .mt-hero__split-media's own z-index:0 above)
   keeps this strictly behind the static <img>; inset/scale overscan
   plus the parent's overflow:hidden keep the blur's own soft edge from
   ever showing a gap. Restrained on purpose: one filter step, no color
   shift, no second glow layer competing with the radial one already on
   the panel itself. */
.mt-hero--split .mt-hero__split-media::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background-image: var(--split-media-bg);
    background-size: cover;
    background-position: center;
    filter: blur(34px) saturate(1.05);
    opacity: 0.38;
    transform: scale(1.1);
}

.mt-hero__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Split only (see .mt-hero__split-media's own note above): contain over
   cover for this composition's real photo -- tested both directly
   against the live product-portfolio image; cover crops a whole product
   off the edge at this column's aspect ratio, contain shows the
   complete asset with no distortion and no lost content, at the cost of
   letterbox bars the glow background above already accounts for. Media/
   editorial keep cover unchanged -- untested here, out of this round's
   scope, and their own images were never reported as an issue. */
.mt-hero--split .mt-hero__media {
    object-fit: contain;
}

.mt-hero__media--placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    /* Ally Hero Redesign (2026-09-19): --mt-accent (orange) -> --ally-blue-500,
       so even the no-image fallback stays inside the navy/blue system. */
    background-image:
        radial-gradient(ellipse 70% 60% at 25% 20%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, var(--ally-navy-700) 0%, #2C4270 55%, var(--ally-blue-500) 145%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}


/* Supporting visual overlapping the split media column (Phase 3) — only
   rendered when BOTH background_image and visual_image are set (see
   partials/hero.php); a genuine layered composition rather than a
   second full-size image competing with the first. */
.mt-hero__visual--overlap {
    position: absolute;
    left: var(--mt-space-8);
    bottom: var(--mt-space-8);
    z-index: 1;
    width: min(220px, 40%);
    border-radius: var(--mt-radius-lg);
    overflow: hidden;
    box-shadow: var(--mt-shadow-xl);
    border: 3px solid var(--mt-surface-page);
}
.mt-hero__visual--overlap .mt-hero__visual-img { max-height: 200px; }

@media (max-width: 991px) {
    .mt-hero--split { grid-template-columns: 1fr; min-height: 0; }
    .mt-hero__split-media { min-height: 320px; }
    .mt-hero__visual--overlap { width: 150px; left: var(--mt-space-5); bottom: var(--mt-space-5); }
}

/* ------------------------------------------------------------
   media_position (whole-page design review round): which side the
   media column occupies within the SAME 'split' composition -- a
   design decision independent of composition itself. Default ('end')
   needs no rule at all: it IS the markup's own natural DOM order
   (.mt-hero__split-content first, .mt-hero__split-media second),
   already rendering text-left/media-right with zero CSS help. This
   rule only fires for the deliberate 'start' choice -- reorders the
   media column to the first grid track via `order` (source order/DOM
   order stay untouched, so no accessibility/reading-order regression)
   and swaps which track gets the wider 1.1fr share so the CONTENT
   column keeps its original relative width regardless of which visual
   side it ends up on, rather than the wider track always landing on
   whichever element happens to render first.
   ------------------------------------------------------------ */
/* min-width-scoped so this can never outrank the max-width:991px collapse
   rule just above -- both would otherwise match below 991px with equal
   selector specificity (0,2,0), and source order alone is fragile to
   depend on across two separate rule blocks. Real 2-column track sizing
   only matters at the width .mt-hero--split is actually 2 columns at. */
@media (min-width: 992px) {
    .mt-hero--split.mt-hero--split-media-start {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.mt-hero--split.mt-hero--split-media-start .mt-hero__split-media {
    order: -1;
}

/* Below 991px the base rule already collapses .mt-hero--split to a
   single grid-template-columns:1fr column (stacked); `order: -1` above
   still applies at every width with no extra rule needed, so 'start'
   correctly puts media first (visually on top) in that stacked reading
   order too -- the same convention .mt-about--stacked's own visual
   already uses for its own single-column collapse. */

/* ------------------------------------------------------------
   Ally Hero -- Split, Weighted (2026-09-19). A deliberate content
   hierarchy for the split composition's text column: headline -> message
   -> primary action -> supporting proof. Every element _moretechHeroContent()
   (partials/hero.php) already emits is a direct child of .mt-hero__container
   -- this re-orders those SAME nodes visually via flex `order`, scoped
   entirely under .mt-hero--split. Media and editorial keep their existing
   block layout and source-equals-visual order untouched; hero.php itself
   is not modified.

   Tradeoff, stated plainly: `order` changes visual order only, not DOM
   order -- a screen reader's linear reading still encounters the CTA
   after the highlight pills/description/items, not right after the
   subtitle as sighted users now see it. This does not create a focus-
   order problem (the two CTA links are the only focusable elements in
   this block, and keyboard focus still lands on them correctly relative
   to each other), and the DOM-order reading is still a coherent, logical
   narrative (headline, message, detail, proof, then action) -- but it is
   a real, minor mismatch, not a false one, and is called out again in the
   implementation report rather than left undocumented. */
.mt-hero--split .mt-hero__container {
    display: flex;
    flex-direction: column;
    /* Split's own content column carries more stacked blocks than
       media/editorial ever did at once; the shared container's default
       --mt-space-24 top/bottom padding is trimmed back for this
       composition only -- .mt-hero__overlay already vertically centers
       the column, so the extra padding was mostly redundant height, not
       needed breathing room. */
    padding-top: var(--mt-space-16);
    padding-bottom: var(--mt-space-16);
}

.mt-hero--split .mt-hero__container > .mt-hero__micro       { order: 1; }
.mt-hero--split .mt-hero__container > .mt-hero__title       { order: 2; }
.mt-hero--split .mt-hero__container > .mt-hero__subtitle    { order: 3; }
.mt-hero--split .mt-hero__container > .mt-hero__actions     { order: 4; margin-bottom: var(--mt-space-5); }
.mt-hero--split .mt-hero__container > .mt-hero__proof       { order: 5; margin-bottom: var(--mt-space-4); }
.mt-hero--split .mt-hero__container > .mt-hero__description { order: 6; }
.mt-hero--split .mt-hero__container > .mt-hero__items       { order: 7; margin: 0; }

/* Visual polish round (2026-09-30): .mt-hero__micro is a flex ITEM of
   .mt-hero--split .mt-hero__container (display:flex; flex-direction:
   column, set above) — flex's own default align-items:stretch silently
   stretches any child with no definite width to the FULL column width
   on the cross axis, regardless of the child's own display:inline-flex.
   Title/subtitle/description never showed this because their own
   max-width (in ch units, see base rules) already gives them a definite
   size; the short micro label had none, so it alone stretched edge-to-
   edge — confirmed the real cause of the label rendering as an
   oversized pill rather than a compact tag. width:fit-content restores
   its real, content-sized width; the existing text-center/text-end
   margin-auto rules (below) now correctly reposition it like the other
   three text elements, since inline-flex's own text-align handling
   already worked correctly (per this file's own COLOR ARCHITECTURE note
   above) and only needed a real width to act on. */
.mt-hero--split .mt-hero__container > .mt-hero__micro {
    width: fit-content;
    max-width: 100%;
}

/* Description is optional elaboration once the subtitle has already
   carried the message and the CTA has already followed it -- smaller,
   quieter, narrower than its own cross-composition default. Field stays
   fully populated and rendered; only its visual weight changes. */
.mt-hero--split .mt-hero__description {
    font-size: var(--mt-text-sm);
    max-width: 44ch;
    opacity: 0.72;
}

/* Item cards (proof stats) become the quietest, trailing element in this
   composition -- set off by a hairline rule and scaled down -- rather
   than a second full-weight showcase. This Hero sits directly above a
   dedicated Trust Bar module; Trust Bar is where proof gets its real
   spotlight, so Hero's own stat cards read as a light echo, not a
   competing display. */
.mt-hero--split .mt-hero__items {
    padding-top: var(--mt-space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    gap: var(--mt-space-2);
}

.mt-hero--split .mt-hero__item {
    min-width: 108px;
    max-width: 160px;
    padding: var(--mt-space-2) var(--mt-space-3);
}

.mt-hero--split .mt-hero__item-value { font-size: var(--mt-text-lg); }

.mt-hero--split .mt-hero__item-img,
.mt-hero--split .mt-hero__item-icon { width: 28px; height: 28px; }


/* ============================================================
   COMPOSITION: EDITORIAL -- light, spacious, asymmetric content
   column; no full-bleed media; a restrained, deliberate atmosphere (a
   soft off-center glow + a fine accent rule) instead of either a flat
   empty page or a competing hardcoded text color -- see the file header
   for why color itself is no longer special-cased here at all.
============================================================ */
.mt-hero--editorial {
    position: relative;
    background-color: var(--mt-surface-page);
    /* Restrained atmosphere: a single, soft, off-center radial wash in
       the brand accent -- low enough opacity to read as considered
       lighting, not decoration. This is the composition's one deliberate
       depth cue; it does not scale with any content field, by design
       (quiet/minimal directions should stay exactly this quiet). */
    background-image: radial-gradient(ellipse 55% 60% at 85% 0%, rgba(var(--mt-brand-primary-rgb), 0.06) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%);
    color: var(--mt-text-heading);
    padding-top: var(--mt-space-16);
    padding-bottom: var(--mt-space-16);
}

.mt-hero--editorial .mt-hero__container {
    padding-top: var(--mt-space-16);
    padding-bottom: var(--mt-space-16);
}

.mt-hero--editorial .mt-hero__title { font-weight: var(--mt-weight-medium); }

/* A fine accent rule above the eyebrow -- the one graphic accent this
   restrained composition allows itself, a considered editorial cue
   (a "kicker" rule), not a color override. */
.mt-hero--editorial .mt-hero__micro {
    display: block;
    position: relative;
    padding: var(--mt-space-4) 0 0;
    background: none;
    border: none;
}
.mt-hero--editorial .mt-hero__micro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    /* Ally Hero Redesign (2026-09-19): --mt-accent (orange) -> --ally-blue-400. */
    background: var(--ally-blue-400);
}

/* Proof pills need a light-ground tint here -- the dark-ground white-based
   surface above would be invisible against this composition's near-white
   background. Reuses the same brand rgb companion variable the media/split
   glow layers already rely on, not a new token. */
.mt-hero--editorial .mt-hero__proof-item {
    background: rgba(var(--mt-brand-primary-rgb), 0.06);
    border-color: rgba(var(--mt-brand-primary-rgb), 0.16);
}
.mt-hero--editorial .mt-hero__proof-item:hover {
    background: rgba(var(--mt-brand-primary-rgb), 0.1);
    border-color: rgba(var(--mt-brand-primary-rgb), 0.24);
}

.mt-hero--editorial .mt-hero__btn--secondary {
    background-color: transparent;
    backdrop-filter: none;
    border-color: var(--mt-border-strong);
    color: var(--mt-text-heading);
}
.mt-hero--editorial .mt-hero__btn--secondary:hover { background-color: var(--mt-surface-sunken); }

.mt-hero__editorial-row {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--mt-space-16);
}

/* Asymmetric offset: the content column is not centered -- it starts at
   the real content edge and the row's own extra column (present or not)
   is what creates the off-center feel, matching the composition's own
   design intent even with no visual set. */
.mt-hero__editorial-content { grid-column: 1 / span 1; position: relative; z-index: 1; }

.mt-hero__editorial-visual {
    grid-column: 2 / span 1;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--mt-radius-xl);
    overflow: hidden;
    box-shadow: var(--mt-shadow-xl);
    transform: translateY(calc(-1 * var(--mt-space-8)));
}

.mt-hero__editorial-visual .mt-hero__media { border-radius: var(--mt-radius-xl); }

/* No visual set -- the content column alone, offset by whitespace only
   (grid-template-columns above already reserves the asymmetric ratio;
   without a second grid item, the content simply sits in its own
   narrower column rather than stretching full-width -- deliberate, not
   a layout bug). */

@media (max-width: 991px) {
    .mt-hero__editorial-row { grid-template-columns: 1fr; gap: var(--mt-space-10); }
    .mt-hero__editorial-visual { grid-column: 1; transform: none; aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
    .mt-hero--media,
    .mt-hero--split { min-height: 0; }
    .mt-hero__container,
    .mt-hero--editorial .mt-hero__container { padding-top: var(--mt-space-16); padding-bottom: var(--mt-space-16); }
    .mt-hero__title { max-width: none; }
}

@media (max-width: 575px) {
    .mt-hero__actions { flex-direction: column; align-items: stretch; }
    .mt-hero__btn { width: 100%; }
}


/* ============================================================
   PLUSFAB -- UNIVERSAL (INNER-PAGE) HERO (2026-10-01, final review).
   Inner pages render the SHARED platform hero (.hero-industrial, styled
   by /web/assets/css/hero-css-v2.css) -- the homepage uses this
   template's own .mt-hero. The shared styling still carried the old
   SaaS language (pill micro label, blurred glass pill chips, pill
   buttons with brand-coloured shadows and a hover lift, a radial brand
   glow). Scoped to this template only; the shared file is untouched.
============================================================ */
body.tpl-plusfab_industrial .hero-industrial::after { display: none; }

body.tpl-plusfab_industrial .hero-industrial .hero-micro {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.16em;
    color: #C5CBD0;
}
body.tpl-plusfab_industrial .hero-industrial .hero-micro::before,
body.tpl-plusfab_industrial .hero-industrial .text-center > .hero-micro::after {
    content: "";
    flex-shrink: 0;
    width: var(--mt-kicker-rule, 28px);
    height: 2px;
    background: var(--mt-accent);
}

body.tpl-plusfab_industrial .hero-industrial .hero-title {
    font-family: var(--mt-font-heading);
    font-weight: var(--mt-weight-bold);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* Proof chips: square steel-bordered tags, no blur, copper dash. */
body.tpl-plusfab_industrial .hero-industrial .hero-proof span {
    padding: 7px 14px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid rgba(197, 203, 208, 0.30);
    backdrop-filter: none;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E1E4E7;
}
body.tpl-plusfab_industrial .hero-industrial .hero-proof span:hover {
    background: transparent;
    border-color: rgba(197, 203, 208, 0.5);
}
body.tpl-plusfab_industrial .hero-industrial .hero-proof span::before {
    width: 8px;
    height: 2px;
    border-radius: 0;
    background: var(--mt-accent);
}

/* Buttons: same family as the homepage Hero (6px, flat, no lift). */
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn {
    padding: 0.95rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--mt-radius-sm, 6px);
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn:hover,
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn:active { transform: none; }
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn:focus-visible { outline-color: var(--mt-accent); }
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn-primary,
body.tpl-plusfab_industrial .hero--purpose-internal .mt-hero-btn-primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ally-navy-700);
    box-shadow: none;
}
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn-primary:hover {
    background: #E1E4E7;
    border-color: #E1E4E7;
    color: var(--ally-navy-900);
    box-shadow: none;
}
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn-secondary {
    background: transparent;
    border-color: rgba(197, 203, 208, 0.55);
    color: #FFFFFF;
    backdrop-filter: none;
}
body.tpl-plusfab_industrial .hero-industrial .mt-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #FFFFFF;
    box-shadow: none;
}


/* ============================================================
   PLUSFAB INDUSTRIAL HERO (2026-10-01) -- split composition.
   A presentation-only layer appended after the inherited rules (it wins
   by source order); no markup, field or contract change. Scoped to
   .mt-hero--split -- media/editorial keep their inherited styling.
   Direction: deep graphite text panel, left-aligned editorial type
   (Archivo), a copper label marker as the ONE accent, a plain
   "scope" row separated by steel hairlines (no pills), square-ish
   buttons, and a full-bleed photo (cover) behind a fine vertical
   steel divider. Colours come from the PlusFab palette
   (00-tokens.css + moretech-header-footer.css §1a).
============================================================ */
.mt-hero--split {
    background-color: var(--ally-navy-900);
}

/* Desktop two-column tracks -- inside min-width so the inherited
   max-width:991px single-column collapse keeps working. */
@media (min-width: 992px) {
    .mt-hero--split {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
        min-height: clamp(540px, 74vh, 760px);
    }
    .mt-hero--split.mt-hero--split-media-start {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    }
}

/* The inherited full-width accent line under the header is dropped --
   copper is reserved for the label marker. */
.mt-hero--split::before { display: none; }

.mt-hero--split .mt-hero__overlay {
    background-image: none;
    background-color: var(--ally-navy-900);
}

/* Text column: aligned to the header's container edge on desktop
   (Bootstrap .container widths 960/1140/1320 + its 12px gutter), not
   centered inside the half-width column. */
@media (min-width: 992px) {
    .mt-hero--split { --pf-hero-gutter: calc((100vw - 960px) / 2 + 12px); }
    .mt-hero--split .mt-hero__container {
        max-width: none;
        margin: 0;
        padding-left: max(var(--mt-space-6), var(--pf-hero-gutter));
        padding-right: clamp(var(--mt-space-8), 5vw, var(--mt-space-20));
        padding-top: clamp(var(--mt-space-16), 10vh, 112px);
        padding-bottom: clamp(var(--mt-space-16), 10vh, 112px);
    }
}
@media (min-width: 1200px) {
    .mt-hero--split { --pf-hero-gutter: calc((100vw - 1140px) / 2 + 12px); }
}
@media (min-width: 1400px) {
    .mt-hero--split { --pf-hero-gutter: calc((100vw - 1320px) / 2 + 12px); }
}

/* Reading order: label -> headline -> subtitle -> supporting description
   -> scope -> actions. (The inherited split order placed the
   description LAST, directly under the buttons with no spacing --
   revision 2026-10-01 after the client content was entered.) */
.mt-hero--split .mt-hero__container > .mt-hero__description { order: 4; }
.mt-hero--split .mt-hero__container > .mt-hero__proof       { order: 5; }
.mt-hero--split .mt-hero__container > .mt-hero__actions     { order: 6; margin-bottom: 0; }
.mt-hero--split .mt-hero__container > .mt-hero__items       { order: 7; }

/* Label: plain uppercase text + copper marker rule (no pill). */
.mt-hero--split .mt-hero__micro {
    gap: var(--mt-space-3);
    margin: 0 0 var(--mt-space-6);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--mt-font-sans);
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.16em;
    line-height: 1.5;
    opacity: 0.78;
}
.mt-hero--split .mt-hero__micro::before {
    content: "";
    flex-shrink: 0;
    width: var(--mt-kicker-rule, 28px);
    height: 2px;
    background: var(--mt-accent);
}

/* Headline: Archivo, engineered and tight. Sized from the text column's
   own width (cqi), per the inherited container-query convention. */
.mt-hero--split .mt-hero__title {
    margin: 0 0 var(--mt-space-6);
    max-width: none;
    font-family: var(--mt-font-heading);
    font-size: clamp(2.1rem, 0.8rem + 6.6cqi, 3.5rem);
    font-weight: var(--mt-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.mt-hero--split .mt-hero__subtitle {
    margin: 0 0 var(--mt-space-8);
    max-width: 46ch;
    font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
    font-weight: var(--mt-weight-normal);
    line-height: 1.6;
    opacity: 0.82;
}
/* When a supporting description follows, the subtitle hands over to it
   with a tighter gap (they read as one message block). */
.mt-hero--split .mt-hero__subtitle:has(+ .mt-hero__description) {
    margin-bottom: var(--mt-space-4);
}

/* Supporting description: a quieter second paragraph directly under the
   subtitle -- smaller, lighter, same measure -- then the scope row.
   (Overrides the inherited split rule that shrank it to --mt-text-sm
   and pinned it under the buttons.) */
.mt-hero--split .mt-hero__description {
    margin: 0 0 var(--mt-space-8);
    max-width: 50ch;
    font-size: 0.95rem;
    font-weight: var(--mt-weight-normal);
    line-height: 1.7;
    opacity: 0.66;
}

/* Centred / right-aligned text (text_align is an admin field): the
   scope row is fit-content, so it needs the same auto margins as the
   text blocks to line up with the centred buttons; the label gets a
   copper rule on BOTH sides when centred (CTA / inner-hero pattern). */
.mt-hero--split .mt-hero__container.text-center > .mt-hero__proof { margin-left: auto; margin-right: auto; }
.mt-hero--split .mt-hero__container.text-end > .mt-hero__proof    { margin-left: auto; margin-right: 0; }
.mt-hero--split .mt-hero__container.text-center > .mt-hero__micro::after {
    content: "";
    flex-shrink: 0;
    width: var(--mt-kicker-rule, 28px);
    height: 2px;
    background: var(--mt-accent);
}

/* Scope row: plain words between steel hairlines -- a specification
   line, not technology chips. */
.mt-hero--split .mt-hero__proof {
    gap: var(--mt-space-2) 0;
    margin: 0 0 var(--mt-space-8);
    padding: var(--mt-space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    width: fit-content;
    max-width: 100%;
}
.mt-hero--split .mt-hero__proof-item {
    padding: 0 var(--mt-space-5);
    border: 0;
    border-left: 1px solid rgba(197, 203, 208, 0.28);
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    font-size: 0.78rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 0.9;
}
.mt-hero--split .mt-hero__proof-item:first-child { padding-left: 0; border-left: 0; }
.mt-hero--split .mt-hero__proof-item:hover { background: none; }
.mt-hero--split .mt-hero__proof-item::before { display: none; }

/* Buttons: square-ish (6px), flat, no lift/glow. */
.mt-hero--split .mt-hero__actions { gap: var(--mt-space-3); }
.mt-hero--split .mt-hero__btn {
    padding: 0.95rem 1.6rem;
    border-width: 1px;
    border-radius: var(--mt-radius-sm);
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mt-hero--split .mt-hero__btn:hover { transform: none; }
.mt-hero--split .mt-hero__btn:focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 3px;
}
.mt-hero--split .mt-hero__btn--primary {
    background-color: var(--ally-white);
    border-color: var(--ally-white);
    color: var(--ally-navy-700);
    box-shadow: none;
}
.mt-hero--split .mt-hero__btn--primary:hover {
    background-color: var(--ally-grey-200);
    border-color: var(--ally-grey-200);
    color: var(--ally-navy-900);
}
.mt-hero--split .mt-hero__btn--secondary {
    background-color: transparent;
    border-color: rgba(197, 203, 208, 0.55);
    color: var(--ally-white);
    opacity: 1;
    backdrop-filter: none;
}
.mt-hero--split .mt-hero__btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--ally-white);
}

/* Media column: full-bleed photo (cover -- a real photograph should
   fill the panel; the inherited `contain` + blurred backdrop was for a
   wide software screenshot), a fine steel divider on the seam, and a
   short graphite fade so the photo meets the panel cleanly. */
.mt-hero--split .mt-hero__split-media {
    background-color: var(--ally-navy-800);
    background-image: none;
    box-shadow: none;
    border-left: 1px solid rgba(197, 203, 208, 0.22);
}
.mt-hero--split.mt-hero--split-media-start .mt-hero__split-media {
    border-left: 0;
    border-right: 1px solid rgba(197, 203, 208, 0.22);
}
.mt-hero--split .mt-hero__split-media::before { display: none; }
.mt-hero--split .mt-hero__split-media::after {
    background: linear-gradient(90deg, rgba(19, 22, 25, 0.55) 0%, rgba(19, 22, 25, 0) 18%);
}
.mt-hero--split.mt-hero--split-media-start .mt-hero__split-media::after {
    background: linear-gradient(270deg, rgba(19, 22, 25, 0.55) 0%, rgba(19, 22, 25, 0) 18%);
}
.mt-hero--split .mt-hero__media { object-fit: cover; }

/* No image yet: a quiet brushed-steel panel (fine vertical grain + one
   soft sheen) -- reads as material, not as an empty box, until the real
   PlusFab photograph is supplied. Pure CSS, no invented imagery. */
.mt-hero--split .mt-hero__media--placeholder {
    background-color: var(--ally-navy-800);
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0) 64%),
        linear-gradient(135deg, var(--ally-navy-600) 0%, var(--ally-navy-800) 55%, var(--ally-navy-900) 100%);
    box-shadow: none;
}

/* Stacked (tablet/mobile): text first, photo below, divider becomes a
   top rule. With no photo the empty material panel is hidden so mobile
   visitors are not scrolled past a blank block. */
@media (max-width: 991px) {
    .mt-hero--split .mt-hero__container {
        padding-top: var(--mt-space-16);
        padding-bottom: var(--mt-space-16);
    }
    .mt-hero--split .mt-hero__split-media,
    .mt-hero--split.mt-hero--split-media-start .mt-hero__split-media {
        min-height: 300px;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid rgba(197, 203, 208, 0.22);
    }
    .mt-hero--split .mt-hero__split-media::after { display: none; }
    .mt-hero--split .mt-hero__split-media:has(.mt-hero__media--placeholder) { display: none; }
}

@media (max-width: 575px) {
    .mt-hero--split .mt-hero__container {
        padding-top: var(--mt-space-12);
        padding-bottom: var(--mt-space-12);
    }
    /* Phone: a wrapped two-line centred label keeps short rules. */
    .mt-hero--split .mt-hero__micro::before,
    .mt-hero--split .mt-hero__container.text-center > .mt-hero__micro::after { width: 16px; }
    .mt-hero--split .mt-hero__micro { letter-spacing: 0.12em; }

    /* Phone: the four scope words sit on a clean 2x2 grid instead of
       wrapping mid-row (a wrapped row would start with a stray divider). */
    .mt-hero--split .mt-hero__proof {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: var(--mt-space-2) var(--mt-space-8);
    }
    .mt-hero--split .mt-hero__proof-item,
    .mt-hero--split .mt-hero__proof-item:first-child {
        padding: 0;
        border-left: 0;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }
    .mt-hero--split .mt-hero__split-media { min-height: 240px; }
}