/* ==========================================================================
   MODEL DETAIL REDESIGN  (src/styles/models-detail.css)
   --------------------------------------------------------------------------
   Additive `.md-*` BEM layer for the 11 shared-template model detail pages
   (classic144 … ultra170). Loaded LAST — after models.css, models-bg.css,
   models-compare.css — so equal-specificity ties resolve in this file's favour
   and the legacy detail rules go inert as the old markup is replaced.

   It consumes existing systems only:
     - theme-dark.css  -> all colour / surface / border / radius / blur tokens
     - cta.css         -> .tv-cta / .tv-cta--red / .tv-cta--ghost buttons
     - nav.css         -> --nav-h (fixed navbar height)
   No new fonts, no new images, no new colour tokens. Font stays "Work Sans".

   The preserved Gallery band (.s-options.dark-bg.s-options--gallery), Compare
   band (.s-options.dark-bg) and lightbox modal (media-modal) are NOT targeted
   here — their opaque dark surfaces paint over the flow background untouched.

   Because the sitewide `*{}` reset forces color:var(--c3)/font-weight:300 and
   `h2,h3{font-size:1.2rem;text-transform:uppercase}`, every heading below
   restates its own font-size / weight / colour / tracking.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Local rhythm tokens (layout only — no colour/surface tokens live here).
   -------------------------------------------------------------------------- */
:root {
    --md-maxw: 86rem;                       /* centred content max width       */
    --md-pad-x: clamp(1rem, 3vw, 2rem);     /* page gutter                     */
    --md-section-y: clamp(3.5rem, 7vw, 6rem);
    --md-gap: clamp(1rem, 1.6vw, 1.6rem);
    --md-subnav-h: 3.4rem;                  /* sticky sub-nav height (desktop) */

    /* The one glass-card recipe — reference these wherever a glass surface is
       needed (glance tiles, spec cards, option cards, end-cap) so the four
       surfaces cannot drift apart. border-radius stays per-surface (tiles/
       cards use 16px, the end-cap uses 1.15rem). Interactive-card hover lift
       adds translateY(-6px) + brighter border/shadow. */
    --md-glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .028) 46%, rgba(255, 255, 255, .015) 100%);
    --md-glass-border: 1px solid var(--theme-border-soft);
    --md-glass-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   Page flow background — one continuous near-black column.
   Keyed on the preserved body class so no wrapper class is removed and only
   these 11 pages are affected. display:flow-root establishes a BFC so section
   margins don't collapse through the background (it is NOT a clipping context,
   so the sticky sub-nav — a sibling before <main> — keeps its blur).
   -------------------------------------------------------------------------- */
.b-model .main {
    display: flow-root;
    background-color: #020203;
    background-image:
        radial-gradient(125% 32% at 50% 0%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #101013 0%, #0a0a0c 34%, #060607 68%, #020203 100%);
    background-repeat: no-repeat;
}

/* Anchor targets land below both fixed bars (navbar + sticky sub-nav). */
#interior,
#exterior,
#options {
    scroll-margin-top: calc(var(--nav-h, 3.3rem) + var(--md-subnav-h) + 1rem);
}

/* ==========================================================================
   2.1  HERO  —  header.header.models-bg.md-hero
   ========================================================================== */
.header.md-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    min-height: min(88vh, 50rem);
    padding: 0;
    background: #0b0b0d;
    grid-template-columns: none;                /* neutralise legacy grid      */
    grid-template-rows: none;
}

/* Photographic layer — keeps its bi-<slug> background-image; we only re-frame
   it. (0,2,0) out-ranks the (0,1,0) per-model .bi-* background-size longhand. */
.md-hero .md-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0b0b0d;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Dark scrim for legible text; bottom fades to the flow's top colour #101013
   so hero -> sub-nav -> at-a-glance is a single seamless column. */
.md-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(7, 7, 8, .30) 0%, rgba(7, 7, 8, .60) 60%, #101013 100%),
        radial-gradient(120% 60% at 50% 0, rgba(0, 0, 0, .35), transparent 70%);
}

.md-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--md-maxw);
    margin: 0 auto;
    padding:
        calc(var(--nav-h, 3.3rem) + clamp(2.5rem, 6vh, 4rem))
        var(--md-pad-x)
        clamp(2.25rem, 5vh, 3.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Shared wordmark height + per-family logo aspect (SVG intrinsic width÷height
   from assets/images/<family>-logo.svg). The logo is height-normalised, so its
   rendered width = aspect x height — the rotator wordmarks below reuse that same
   product so they end up exactly as wide as the family logo above them. */
.md-hero { --md-wordmark-h: clamp(1.6rem, 4vw, 2.6rem); }
.md-hero--classic { --md-wm-aspect: 9.88; }   /* 348.662 / 35.287 */
.md-hero--kronos  { --md-wm-aspect: 5.70; }   /* 395.731 / 69.478 */
.md-hero--metis   { --md-wm-aspect: 3.15; }   /*  57.233 / 18.143 */
.md-hero--ultra   { --md-wm-aspect: 6.18; }   /* 200.968 / 32.526 */

/* Decorative family wordmark (the accessible name lives in the <h1>). */
.md-hero .md-hero__wordmark {
    display: block;
    width: auto;
    height: var(--md-wordmark-h);
    margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
    max-width: 100%;
    grid-row: auto;
}

.md-hero__eyebrow {
    margin: 0 0 .9rem;
    font-size: clamp(.72rem, 1vw, .82rem);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-text-eyebrow);
    line-height: 1.3;
}

.md-hero .md-hero__title {
    margin: 0;
    font-size: clamp(2.4rem, 5.6vw, 4.75rem);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--theme-text-strong);
    text-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

/* Red accent bar — used ONLY under the hero H1. */
.md-hero__title::after {
    content: "";
    display: block;
    width: clamp(5rem, 9vw, 8rem);
    height: .22rem;
    margin: clamp(1.1rem, 2.2vw, 1.5rem) auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--theme-accent) 0%, var(--theme-accent-deep) 58%, transparent 100%);
    box-shadow: 0 10px 24px var(--theme-accent-box-24);
}

/* Rotating three-step line — one visible at a time, stacked in a single grid
   cell so the tallest reserves the height and nothing jumps. */
.md-hero__rotator {
    display: grid;
    margin: clamp(1.25rem, 2.6vw, 1.75rem) 0 0;
    padding: 0;
    list-style: none;
    min-height: 1.6em;
    justify-items: center;
}

.md-hero__rotator li {
    grid-area: 1 / 1;
    margin: 0;
    font-size: clamp(.85rem, 1.3vw, 1rem);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--theme-text-soft);
}

.md-hero__rotator li:not(:first-child) {
    opacity: 0;
}

/* White wordmark art swapped in for the three-step text (same cross-fade
   cycle). SVGs are 460x52; sized to the same width as the family logo above
   (aspect x wordmark height) so the two wordmarks stack in one aligned column.
   Height follows from width, so all three phrases share one height and the
   stacked grid cell never jumps between them. */
.md-hero__rotator img {
    display: block;
    width: calc(var(--md-wm-aspect, 6) * var(--md-wordmark-h));
    max-width: 100%;
    height: auto;
}

/* Once models.js has measured the <h1> model-name width (--md-title-w), both
   header images take that exact width, so the logo, the title text, and the
   rotator wordmarks line up as one column. These win the same-specificity tie
   with the base rules above by coming later. The logo becomes width-driven
   (height follows its aspect), so families with a squarer logo (metis) render
   a taller wordmark. */
.md-hero--measured .md-hero__wordmark {
    width: var(--md-title-w);
    height: auto;
}

.md-hero--measured .md-hero__rotator img {
    width: var(--md-title-w);
}

.md-hero__price {
    margin: clamp(1.25rem, 2.6vw, 1.75rem) 0 0;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.4;
    color: var(--theme-text-muted);
}

.md-hero__price b {
    font-weight: 650;
    font-size: 1.25em;
    letter-spacing: -.02em;
    color: var(--theme-text-strong);
}

.md-hero__note {
    color: var(--theme-text-soft);
    font-size: .9em;
    white-space: nowrap;
}

.md-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2.1rem);
}

/* ==========================================================================
   2.2  STICKY MODEL BAR  —  #navMenu.sub-nav.md-subnav
   ========================================================================== */
.sub-nav.md-subnav {
    position: sticky;
    top: var(--nav-h, 3.3rem);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--md-subnav-h);
    padding: .4rem var(--md-pad-x);
    grid-template-columns: none;                /* neutralise legacy grid      */
    background: var(--theme-surface-glass);
    backdrop-filter: var(--theme-blur-lg);
    -webkit-backdrop-filter: var(--theme-blur-lg);
    border-bottom: 1px solid var(--theme-border-soft);
    letter-spacing: normal;
}

.md-subnav__id {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    min-width: 0;
}

.md-subnav .md-subnav__name {
    align-self: center;
    padding: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--theme-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-subnav .md-subnav__year {
    align-self: center;
    padding: 0;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--theme-text-soft);
}

.md-subnav .md-subnav__price {
    align-self: center;
    padding: 0;
    font-size: .82rem;
    letter-spacing: .02em;
    color: var(--theme-text-muted);
}

.md-subnav .md-subnav__price b {
    font-weight: 650;
    color: var(--theme-text-strong);
}

.md-subnav .md-subnav__links {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    max-width: none;
    list-style: none;
}

.md-subnav .md-subnav__link {
    display: inline-block;
    padding: .4rem .9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--theme-text-muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.1;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.md-subnav .md-subnav__link:hover,
.md-subnav .md-subnav__link:focus-visible {
    border-color: var(--theme-border);
    color: var(--theme-text-strong);
}

.md-subnav .md-subnav__link.is-active {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft-border);
    color: var(--theme-text-strong);
    box-shadow: inset 0 -2px 0 var(--theme-accent);
}

.md-subnav .md-subnav__link:focus-visible {
    outline: 2px solid var(--theme-accent-soft-border);
    outline-offset: 2px;
}

/* Compact shared pill CTA (shrunk from the default .tv-cta metrics). */
.md-subnav .md-subnav__cta {
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: .4rem 1rem;
    font-size: .85rem;
}

/* ==========================================================================
   2.3  AT-A-GLANCE STRIP  —  section.features.dark-bg.md-glance
   ========================================================================== */
.features.md-glance {
    background: transparent;
    padding: var(--md-section-y) var(--md-pad-x);
}

.md-glance .md-glance__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--md-gap);
    max-width: var(--md-maxw);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.md-glance__list .md-glance__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: clamp(1.25rem, 2.6vw, 1.9rem) 1rem;
    text-align: center;
    line-height: 1.4;
    background: var(--md-glass-bg);
    border: var(--md-glass-border);
    border-radius: 16px;
    box-shadow: var(--md-glass-shadow);
}

.md-glance__item .md-glance__icon {
    display: inline-grid;
    place-items: center;
    width: auto;
    height: auto;
    font-size: 1.7rem;
    color: var(--theme-accent);
    background: none;
    border-radius: 0;
    opacity: .95;
    grid-row: auto;
}

/* murphy-bed.svg image icon variant (Metis / ultra170).
   Selector scoped to .md-glance__item (specificity 0,2,1) so its 1.9rem sizing
   beats .md-glance__item .md-glance__icon (0,2,0) which sets width/height:auto
   for the <i> glyphs — otherwise the 465x465 svg renders full-size. */
.md-glance__item img.md-glance__icon {
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
    background: none;
    /* baked svg is dark — invert to the accent-neutral light on dark glass */
    filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4000%) hue-rotate(357deg) brightness(85%) contrast(110%);
}

.md-glance__item .md-glance__label {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--theme-text-strong);
}

/* --------------------------------------------------------------------------
   HEADER "AT A GLANCE" BAR
   The md-glance strip relocated into the hero footer (above the sub-nav),
   restyled to read exactly like the family pages' .models-header__stats bar:
   a frosted panel with a fading top hairline, a centered pill row, and cell
   dividers that fade on hover. Every value below mirrors
   .models-header__stats / __stat in models-bg.css. Scoped to .md-hero so it
   only affects the relocated in-flow bar; the icons + labels keep their
   existing .md-glance__icon / __label styling ("just like it is currently").
   -------------------------------------------------------------------------- */
.md-hero .md-glance {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: clamp(1.1rem, 2vw, 1.6rem) clamp(0.9rem, 2vw, 1.5rem);
    background: var(--nav-surface-bg);
    box-shadow: var(--nav-surface-shadow);
    -webkit-backdrop-filter: var(--nav-surface-blur);
    backdrop-filter: var(--nav-surface-blur);
}

/* Fading top hairline — same recipe as .models-header__stats::before. */
.md-hero .md-glance::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 70%,
        transparent 100%
    );
    pointer-events: none;
}

/* List becomes the centered pill row (overrides the 4-col grid). */
.md-hero .md-glance__list {
    display: flex;
    align-items: stretch;
    width: min(100%, 90rem);
    margin: 0 auto;
    gap: 0;
    grid-template-columns: none;
}

/* Each item is a stat pill: transparent at rest (drop the glance card's glass
   bg / shadow / radius), lights up on hover, flanking dividers fade. */
.md-hero .md-glance__item {
    position: relative;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem clamp(0.65rem, 1.25vw, 1.05rem);
    background: transparent;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 100vmax;
    transition:
        border-color 0.22s ease,
        background-color 0.22s ease;
}

.md-hero .md-glance__item + .md-glance__item::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 55%;
    background: var(--theme-surface-white-08);
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.md-hero .md-glance__item:hover {
    border-color: rgba(255, 255, 255, 0.07);
    background-color: rgba(255, 255, 255, 0.03);
}

.md-hero .md-glance__item:hover::before,
.md-hero .md-glance__item:hover + .md-glance__item::before {
    opacity: 0;
}

/* Narrow screens: wrap to a 2-up grid (the family bar drops to 3-up); drop
   the divider that would land at the start of the second row. */
@media (max-width: 700px) {
    .md-hero .md-glance__list {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .md-hero .md-glance__item {
        flex: 0 0 50%;
    }
    .md-hero .md-glance__item:nth-child(2n + 1)::before {
        display: none;
    }
}

/* ==========================================================================
   2.4 / 2.5 / 2.6  SECTION SHELL (Interior / Exterior / Options)
   ========================================================================== */
.s-interior.md-section--interior,
.s-interior.md-section--exterior,
.s-interior.md-section--options {
    background: transparent;
    padding: var(--md-section-y) 0;
}

.md-section__wrap {
    max-width: var(--md-maxw);
    margin: 0 auto;
    padding: 0 var(--md-pad-x);
}

.md-section__head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.md-section__eyebrow {
    margin: 0 0 .75rem;
    font-size: clamp(.72rem, 1vw, .82rem);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-text-soft);
    line-height: 1.3;
}

/* Rod-divider section heading — defined standalone (no dependency on the
   .models-intro__heading class). Must out-rank .s-interior h2 (0,1,1) and the
   global h2,h3 rule, hence the (0,2,0) descendant selector. */
.md-section .md-section__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    max-width: none;
    font: 600 clamp(1.15rem, 1.9vw, 1.6rem)/1 "Work Sans", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--theme-text-strong);
}

.md-section .md-section__title::before,
.md-section .md-section__title::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    max-width: clamp(2rem, 10vw, 7rem);
}

.md-section .md-section__title::before {
    background: linear-gradient(90deg, transparent, var(--theme-border-strong));
}

.md-section .md-section__title::after {
    background: linear-gradient(90deg, var(--theme-border-strong), transparent);
}

/* Split head (Options) — eyebrow/title left, CTA pair right on desktop. */
.md-section__head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: left;
}

.md-section__head--split .md-section__eyebrow {
    text-align: left;
}

.md-section__head--split .md-section__title {
    justify-content: flex-start;
}

.md-section__head--split .md-section__title::before {
    display: none;
}

.md-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.md-section__lead {
    max-width: 60rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.65;
    color: var(--theme-text-muted);
    text-align: center;
}

.md-section__head--split + .md-section__lead {
    margin-left: 0;
    text-align: left;
}

.md-section__lead strong {
    color: var(--theme-text-strong);
    font-weight: 600;
}

/* ---- Infographic figures ------------------------------------------------ */
.md-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.md-figures--single {
    grid-template-columns: 1fr;
    max-width: 46rem;
    margin-inline: auto;
}

.md-figure {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 2rem);
    /* mid-charcoal fill — the PNG callouts are baked for this backdrop; never
       place them on white / pure black / near-black or they lose contrast. */
    background: var(--theme-surface-white-04);
    border: 1px solid var(--theme-border-soft);
    border-radius: var(--theme-radius-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px rgba(0, 0, 0, .45);
}

.md-figure__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.md-figure__cap {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--theme-border-soft);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--theme-text-soft);
    text-align: center;
}

/* ---- Includes spec cards ------------------------------------------------ */
.md-specs {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.md-specs .md-specs__title {
    margin: 0 0 clamp(1.25rem, 2.4vw, 1.75rem);
    max-width: none;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--theme-text-strong);
    text-align: center;
}

.md-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: var(--md-gap);
}

/* Each renderer category <div> becomes a glass spec card. (0,1,1) matches the
   legacy `.base div` at equal specificity; this file loads later so it wins. */
.md-spec-grid > div {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: var(--md-glass-bg);
    border: var(--md-glass-border);
    border-radius: 16px;
    box-shadow: var(--md-glass-shadow);
}

.md-spec-grid h5 {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--theme-border-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--theme-text-strong);
}

.md-spec-grid ul {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    list-style: none;
}

.md-spec-grid ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    grid-template-columns: none;
    padding: .55rem .1rem;
    border-bottom: 1px solid var(--theme-border-soft);
}

.md-spec-grid ul li:last-child {
    border-bottom: 0;
}

.md-spec-grid .info-trigger {
    flex: 1;
    color: var(--theme-text-muted);
    font-size: .95rem;
    line-height: 1.35;
    cursor: pointer;
    transition: color .2s ease;
}

.md-spec-grid .info-trigger:hover {
    color: var(--theme-text-strong);
}

/* "?" affordance — tidy circular icon at the row end (shared with options). */
.md-spec-grid .info-icon,
.md-options-grid .info-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-white-06);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.md-spec-grid .info-icon:hover,
.md-options-grid .info-icon:hover {
    border-color: var(--theme-accent-soft-border);
    background: var(--theme-accent-soft);
    transform: none;
}

.md-spec-grid .info-icon img,
.md-options-grid .info-icon img {
    width: .7rem;
    height: .7rem;
    margin: 0;
    opacity: .7;
    transition: opacity .2s ease;
}

.md-spec-grid .info-icon:hover img,
.md-options-grid .info-icon:hover img {
    opacity: 1;
}

/* Belt-and-braces: hide the legacy "click here" badge if a page still emits it
   (the renderer no longer does). */
.md-spec-grid .click-this {
    display: none;
}

/* ---- Collage (5 collage pages only) ------------------------------------- */
.md-collage {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.md-collage .collage-w {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--md-gap);
    max-width: none;
    margin: 0;
    padding-bottom: 0;
}

.md-collage .span2 {
    grid-column: auto;
    grid-row: auto;
}

.md-collage .collage-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--theme-radius-md);
    border: 1px solid var(--theme-border-soft);
    cursor: pointer;
}

.md-collage .collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* Always-legible bottom-gradient caption. */
.md-collage .overlay-text {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    height: auto;
    width: 100%;
    visibility: visible;
    opacity: 1;
    padding: 1.4rem .8rem .7rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .82));
    color: #fff;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .01em;
    text-align: left;
}

/* ==========================================================================
   2.6  OPTIONS GRID  —  .base.options.md-options-grid
   ========================================================================== */
.md-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--md-gap);
}

/* Each .options-cat becomes a glass option card with a hover lift. */
.md-options-grid .options-cat {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--md-glass-bg);
    border: var(--md-glass-border);
    border-radius: 16px;
    box-shadow: var(--md-glass-shadow);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease;
}

/* Rounded media header — keeps the .cat-* background-image from models.css. */
.md-options-grid .options-cat-image {
    grid-column: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    background-color: #111;
    background-size: cover;
    background-position: center;
    border-radius: 0;
}

.md-options-grid .options-list {
    justify-self: stretch;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    background: transparent;
}

.md-options-grid .options-list h5 {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--theme-border-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--theme-text-strong);
}

.md-options-grid .options-list ul {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.md-options-grid ul li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem .1rem;
    border-bottom: 1px solid var(--theme-border-soft);
}

.md-options-grid ul li:last-child {
    border-bottom: 0;
}

.md-options-grid .info-icon {
    grid-column: 1 / 2;
    width: 1.35rem;
    height: 1.35rem;
}

.md-options-grid .info-trigger {
    grid-column: 2 / 3;
    display: block;
    color: var(--theme-text-muted);
    font-size: .95rem;
    line-height: 1.35;
    cursor: pointer;
    transition: color .2s ease;
}

.md-options-grid .info-trigger:hover {
    color: var(--theme-text-strong);
}

.md-options-grid ul li > span {
    grid-column: 3 / 4;
    justify-self: end;
    color: var(--theme-text-strong);
    font-weight: 650;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   2.7  CONTACT END-CAP  —  section.s-contact-block.gray-bg.md-endcap
   ========================================================================== */
.s-contact-block.md-endcap {
    background: transparent;
    padding: var(--md-section-y) var(--md-pad-x) clamp(3rem, 6vw, 4.5rem);
}

.md-endcap__inner {
    width: min(100%, 46rem);
    margin-inline: auto;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
    background: var(--md-glass-bg);
    border: var(--md-glass-border);
    border-radius: 1.15rem;
    box-shadow: var(--md-glass-shadow);
}

.md-endcap__title {
    margin: 0 0 1rem;
    max-width: none;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 300;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--theme-text-strong);
}

.md-endcap__text {
    margin: 0 auto 1.75rem;
    max-width: 40rem;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: .01em;
    color: var(--theme-text-muted);
}

.md-endcap__inner .md-endcap__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: none;
    grid-template-columns: none;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
    .md-figures {
        grid-template-columns: 1fr;
    }

    .md-collage .collage-w {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .md-figures {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .header.md-hero {
        min-height: min(80svh, 40rem);
    }

    /* Sub-nav becomes a single horizontal scroll strip with the CTA pinned. */
    .sub-nav.md-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: .6rem;
        scrollbar-width: none;
    }

    .sub-nav.md-subnav::-webkit-scrollbar {
        display: none;
    }

    .md-subnav__id {
        flex: 0 0 auto;
    }

    .md-subnav .md-subnav__year,
    .md-subnav .md-subnav__price {
        display: none;
    }

    .md-subnav .md-subnav__links {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .md-glance .md-glance__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .md-section__head--split {
        flex-direction: column;
        align-items: flex-start;
    }

    .md-collage .collage-w {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) {
    .md-spec-grid {
        grid-template-columns: 1fr;
    }

    .md-options-grid {
        grid-template-columns: 1fr;
    }

    .md-glance .md-glance__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .md-hero__actions .tv-cta {
        width: 100%;
    }

    .md-endcap__inner .md-endcap__actions .tv-cta {
        width: 100%;
    }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /* Hero rotator cross-fade — ~9s loop, each phrase visible ~1/3. */
    .md-hero__rotator li {
        opacity: 0;
        animation: md-hero-rotate 9s infinite both;
    }

    .md-hero__rotator li:nth-child(1) { animation-delay: 0s; }
    .md-hero__rotator li:nth-child(2) { animation-delay: 3s; }
    .md-hero__rotator li:nth-child(3) { animation-delay: 6s; }

    /* Hero content cascades in on load: each element races in from off-screen
       right and brakes hard into frame (same easing as a car stopping),
       staggered top-to-bottom so the wordmark leads and the CTAs land last.
       The header clips overflow (overflow:hidden), so the off-screen start
       adds no horizontal scrollbar, and transform-only motion means nothing
       below reflows or jumps. The rotator's container rides in as a unit while
       its phrases keep cross-fading inside it (the li animation above). */
    .md-hero__wordmark,
    .md-hero__eyebrow,
    .md-hero__title,
    .md-hero__rotator,
    .md-hero__price,
    .md-hero__actions {
        animation: md-hero-race 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Per-element launch offset (--md-race-x) + a wide delay step. The wordmark
       leads with a full-width launch; the trailing content enters on a gentler
       offset so it reads as a supporting cascade, not six equal slides. */
    .md-hero__wordmark { --md-race-x: min(70vw, 46rem); animation-delay: 0s;    }
    .md-hero__eyebrow  { --md-race-x: min(30vw, 14rem); animation-delay: 0.18s; }
    .md-hero__title    { --md-race-x: min(30vw, 14rem); animation-delay: 0.36s; }
    .md-hero__rotator  { --md-race-x: min(30vw, 14rem); animation-delay: 0.54s; }
    .md-hero__price    { --md-race-x: min(30vw, 14rem); animation-delay: 0.72s; }
    .md-hero__actions  { --md-race-x: min(30vw, 14rem); animation-delay: 0.9s;  }

    /* Interactive-card hover lifts. */
    .md-options-grid .options-cat:hover {
        transform: translateY(-6px);
        border-color: var(--theme-border-strong);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 28px 56px rgba(0, 0, 0, .6);
    }

    .md-collage .collage-item:hover img {
        transform: scale(1.04);
    }
}

@keyframes md-hero-rotate {
    0%   { opacity: 0; transform: translateY(6px); }
    4%   { opacity: 1; transform: translateY(0); }
    30%  { opacity: 1; transform: translateY(0); }
    34%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* Hero "race in" — element starts off-screen right (offset --md-race-x, set
   per element; capped via min() so it launches from near the viewport edge on
   any width) and glides to rest. Shared by every hero element; the stagger
   comes from per-element animation-delays. */
@keyframes md-hero-race {
    0%   { opacity: 0; transform: translateX(var(--md-race-x, min(70vw, 46rem))); }
    25%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0); }
}