/* ============================================================
   ARECH Megamenu block — front-end styles.

   Port of the NAV system in
     prototypes/navbar-explore-2026-05-19/nav-4-megamenu-full.html
   re-tokenized to the theme tokens (main.css :root) and corrected to the
   responsive standard (responsive_manual_en_0.1: min-width ONLY, no
   max-width media queries; canonical container box).

   ALL rules are scoped under `.arech-megamenu` so nothing leaks into the
   theme. The bar links sit inline next to the theme logo (the theme <header>
   provides the sticky surface + blur); only the panels / scrim / overlay are
   position:fixed and anchored at top:var(--header-height).
   ============================================================ */

.arech-megamenu {
    /* slots inline inside the theme's <header> flex row */
    display: contents;
}

/* -------- DESKTOP LINKS -------- */
.arech-megamenu .arech-mm__links {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
    /* Restore the prototype invariant (nav above scrim). The trigger cluster
       shares the .site-header stacking context with the scrim/panel; without a
       local z-index the triggers (z-index:auto) fall under the scrim (z-98).
       position:relative + z-index here lift the triggers above the scrim so a
       stationary cursor on a trigger is never covered. Secondary hardening to
       the scrim-top fix above; together they make the flicker structurally
       impossible. Scoped to the block — `.site-header` (theme-owned) untouched. */
    position: relative;
    z-index: 101;
}
/* Desktop nav reveals at MD/LG 768 to match the prototype (proto L60): tablet
   portrait shows the inline nav + 3-col mega; the 5-col step lands at 1024. */
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__links { display: flex; }
}
.arech-megamenu .arech-mm__links ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.arech-megamenu .arech-mm__links > ul > li { position: static; } /* mega spans full width */

.arech-megamenu .arech-mm__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--off-white);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__link:hover,
.arech-megamenu .arech-mm__link:focus-visible { color: var(--orange); }
.arech-megamenu .arech-mm__link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-megamenu .arech-mm__link.is-active { color: var(--orange); }
.arech-megamenu .arech-mm__link.is-active:hover,
.arech-megamenu .arech-mm__link.is-active:focus-visible { color: var(--off-white); }
.arech-megamenu .arech-mm__link[aria-expanded="true"] { color: var(--orange); }
.arech-megamenu .arech-mm__link[aria-expanded="true"]:hover,
.arech-megamenu .arech-mm__link[aria-expanded="true"]:focus-visible { color: var(--off-white); }

.arech-megamenu .arech-mm__chev {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__link[aria-expanded="true"] .arech-mm__chev { transform: rotate(180deg); }

/* -------- CTA + BURGER -------- */
.arech-megamenu .arech-mm__cta-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}
.arech-megamenu .arech-mm__cta {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-btn);
    transition: background var(--motion-normal) var(--ease-standard),
                transform var(--motion-normal) var(--ease-standard),
                box-shadow var(--motion-normal) var(--ease-standard);
}
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__cta { display: inline-flex; }
}
.arech-megamenu .arech-mm__cta:hover,
.arech-megamenu .arech-mm__cta:focus-visible {
    background: var(--orange-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in oklch, var(--orange) 35%, transparent);
}

.arech-megamenu .arech-mm__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__burger:hover,
.arech-megamenu .arech-mm__burger:focus-visible { border-color: var(--orange); }
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__burger { display: none; }
}
.arech-megamenu .arech-mm__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--off-white);
    position: relative;
}
.arech-megamenu .arech-mm__burger span::before,
.arech-megamenu .arech-mm__burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--off-white);
}
.arech-megamenu .arech-mm__burger span::before { top: -6px; }
.arech-megamenu .arech-mm__burger span::after { top: 6px; }
.arech-megamenu .arech-mm__burger[aria-expanded="true"] span { background: transparent; }
.arech-megamenu .arech-mm__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.arech-megamenu .arech-mm__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* -------- MEGA PANELS (full-width, fixed) -------- */
.arech-megamenu .arech-mm__panel {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    background: color-mix(in oklch, var(--dark) 97%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--motion-normal) var(--ease-decelerate),
                transform var(--motion-normal) var(--ease-decelerate);
}
.arech-megamenu .arech-mm__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Canonical container box (S72): gutter on the band, inner caps at --container. */
.arech-megamenu .arech-mm__panel-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-block: var(--space-7) var(--space-8);
    padding-inline: var(--container-px);
}
.arech-megamenu .arech-mm__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-accessible);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: 12px;
}
.arech-megamenu .arech-mm__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--orange);
}
.arech-megamenu .arech-mm__empty {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--light);
}

/* Products grid — mobile-first min-width steps (prototype used max-width:1100px;
   converted: 1col base → 3col at >=768 → 5col at >=1024 per task spec). */
.arech-megamenu .arech-mm__products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .arech-megamenu .arech-mm__products-grid { grid-template-columns: repeat(5, 1fr); }
}

.arech-megamenu .arech-mm__card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--dark-2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-btn);
    text-decoration: none;
    color: inherit;
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__card:hover,
.arech-megamenu .arech-mm__card:focus-visible {
    background: var(--dark-3);
    border-color: var(--orange);
    transform: translateY(-2px);
}
.arech-megamenu .arech-mm__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-megamenu .arech-mm__card-img {
    aspect-ratio: 16 / 10;
    background: var(--dark-4);
    border: 1px dashed color-mix(in oklch, var(--orange) 40%, transparent);
    border-radius: var(--radius-btn);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--muted-accessible);
    text-transform: uppercase;
}
.arech-megamenu .arech-mm__card-img--photo {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.05);
    /* Transparent: product photos are transparent PNG/WebP, so they sit on the
       mega panel's dark background, not inside a filled box. */
    background: transparent;
}
.arech-megamenu .arech-mm__card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.arech-megamenu .arech-mm__card-title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 18px;
    color: var(--off-white);
    margin-bottom: 6px;
}
.arech-megamenu .arech-mm__card-body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--light);
}

/* About grid — same min-width step strategy. */
.arech-megamenu .arech-mm__about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__about-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .arech-megamenu .arech-mm__about-grid { grid-template-columns: repeat(5, 1fr); }
}
.arech-megamenu .arech-mm__about-link {
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
    transition: border-color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__about-link:hover,
.arech-megamenu .arech-mm__about-link:focus-visible {
    border-left-color: var(--orange);
    background: color-mix(in oklch, var(--orange) 4%, transparent);
}
.arech-megamenu .arech-mm__about-link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-megamenu .arech-mm__about-title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 15px;
    color: var(--off-white);
    margin-bottom: 4px;
}
.arech-megamenu .arech-mm__about-desc {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: var(--light);
}

/* -------- SCRIM -------- */
/* ROOT-CAUSE FIX (S74 flicker): the scrim must NEVER cover the nav band.
   Triggers live inside the theme's `.site-header` (a sticky z-index:100 stacking
   context); the scrim + panel are children of that same header, so the scrim's
   local z-index:98 sits ABOVE the triggers (which have z-index:auto). With the
   old `inset:0` the scrim therefore covered the trigger row at y=40, stealing the
   hover off the trigger → mouseleave → close → mouseenter → open → flicker
   (rendered-DOM proof: elementFromPoint(533,40) returned `.arech-mm__scrim`).
   Anchoring the scrim's top at the header height removes the cause: triggers are
   never under the scrim regardless of stacking context, and visually the dim
   correctly begins below the crisp top nav (matches the prototype intent —
   nothing to dim behind a top-anchored nav). Belt-and-braces with the trigger
   z-index lift below (restores the prototype's z-100-nav > z-98-scrim invariant). */
.arech-megamenu .arech-mm__scrim {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-normal) var(--ease-standard);
}
.arech-megamenu .arech-mm__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* -------- MOBILE OVERLAY -------- */
.arech-megamenu .arech-mm__overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: color-mix(in oklch, var(--dark) 98%, transparent);
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    display: flex;
    flex-direction: column;
    padding: var(--container-px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-normal) var(--ease-standard);
    overflow-y: auto;
}
.arech-megamenu .arech-mm__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.arech-megamenu .arech-mm__overlay-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
}
.arech-megamenu .arech-mm__overlay-brand {
    display: block;
    height: 32px;
    width: auto;
}
.arech-megamenu .arech-mm__overlay-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-btn);
    cursor: pointer;
    color: var(--off-white);
    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 1;
}
.arech-megamenu .arech-mm__overlay-close:hover,
.arech-megamenu .arech-mm__overlay-close:focus-visible { border-color: var(--orange); }
.arech-megamenu .arech-mm__overlay-links {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-5) var(--space-2);
}
.arech-megamenu .arech-mm__overlay-link {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--off-white);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arech-megamenu .arech-mm__overlay-link:hover { color: var(--orange); }
.arech-megamenu .arech-mm__overlay-link.is-active { color: var(--orange); }

.arech-megamenu .arech-mm__overlay-acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--off-white);
    text-decoration: none;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    width: 100%;
    min-height: 44px;
    cursor: pointer;
}
.arech-megamenu .arech-mm__overlay-acc[aria-expanded="true"] { color: var(--orange); }
.arech-megamenu .arech-mm__overlay-acc[aria-expanded="true"] .arech-mm__overlay-acc-icon { transform: rotate(45deg); }
.arech-megamenu .arech-mm__overlay-acc-icon {
    display: inline-block;
    transition: transform var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__overlay-acc-body {
    display: none;
    padding: 12px 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arech-megamenu .arech-mm__overlay-acc-body.is-open {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.arech-megamenu .arech-mm__overlay-acc-body a {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--light);
    text-decoration: none;
    padding: 8px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.arech-megamenu .arech-mm__overlay-acc-body a:hover { color: var(--orange); }
.arech-megamenu .arech-mm__overlay-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-btn);
    margin-top: var(--space-5);
}
.arech-megamenu .arech-mm__overlay-cta:hover,
.arech-megamenu .arech-mm__overlay-cta:focus-visible { background: var(--orange-bright); }

/* -------- REDUCED MOTION (mandatory) -------- */
@media (prefers-reduced-motion: reduce) {
    .arech-megamenu .arech-mm__panel,
    .arech-megamenu .arech-mm__scrim,
    .arech-megamenu .arech-mm__overlay,
    .arech-megamenu .arech-mm__chev,
    .arech-megamenu .arech-mm__card,
    .arech-megamenu .arech-mm__about-link,
    .arech-megamenu .arech-mm__cta,
    .arech-megamenu .arech-mm__overlay-acc-icon,
    .arech-megamenu .arech-mm__link {
        transition: none !important;
    }
}


/* ============================================================
   ARECH Hero — Impact block — front-end styles.
   S69 prototype-fidelity pass — non-dot values restored to the
   homepage prototype (prototypes/homepage/index.html L651-848)
   as the source of truth, with Concrete-platform necessities
   preserved (sticky-header offset, edit-mode, container name).
   LED dot matrix kept EXACTLY as the current live block per the
   client's instruction ("rămân exact așa").
   Token references resolve to the theme's :root in main.css.
   ============================================================ */

.arech-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Prototype L655 — content anchored to the bottom of the 100vh hero. */
    justify-content: flex-end;
    /* Prototype L656-657: 80px top / 96px bottom. Top keeps the sticky
       theme-header offset (prototype had no sticky header). */
    padding: calc(var(--space-9) + var(--header-height, 72px)) var(--container-px) var(--space-9);
    overflow: hidden;
    background: var(--dark);
    color: var(--off-white);
    /* S55 D5 — inline-size container so the LED matrix can step-down via
       @container queries rather than viewport media queries. */
    container-type: inline-size;
    container-name: arech-hero;
}
@media (min-width: 1024px) {
    .arech-hero {
        /* Prototype L661 — 160px bottom padding on desktop. */
        padding: calc(var(--space-11) + var(--header-height, 80px)) var(--container-px) var(--space-11);
    }
}

/* ---- Layer 1 — animated orange grid drift ---- */
/* Prototype L730-734 — fainter grid lines on phones so they don't compete
   with the H1; stronger from SM up. Mobile-first / min-width per
   responsive_manual_en_0.1 §1 (no max-width media queries). */
.arech-hero__grid {
    position: absolute;
    inset: -80px 0 0 0;
    background-image:
        linear-gradient(color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: arechGridMove var(--motion-ambient-fast) var(--ease-linear) infinite;
    z-index: 1;
}
@media (min-width: 480px) {
    .arech-hero__grid {
        background-image:
            linear-gradient(color-mix(in oklch, var(--orange) 7%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in oklch, var(--orange) 7%, transparent) 1px, transparent 1px);
    }
}
@keyframes arechGridMove {
    0%   { transform: translateY(0); }
    100% { transform: translateY(80px); }
}

/* ---- Layer 2 — hero scan line (pure CSS, compositor-only) ----
   Client request (2026-06-07): replace the dot-wave + LED dot matrix (too busy
   and DOM/animation-heavy) with ONE clean glowing line that descends top→bottom.
   A full-height layer whose background holds a thin bright band near the top,
   swept down via `transform: translateY` — runs on the compositor (zero main
   thread, no JS, no DOM matrix). The horizontal mask makes the line glow in the
   middle and fade out at the left/right edges. */
.arech-hero__scanline {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    /* thin bright band near the top = the line core + its soft glow falloff */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in oklch, var(--orange) 22%, transparent) 1.4%,
        var(--orange) 2%,
        color-mix(in oklch, var(--orange) 22%, transparent) 2.6%,
        transparent 4%
    );
    /* glow in the centre, fade at the left/right edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28%, black 72%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 28%, black 72%, transparent 100%);
    opacity: 0.5;
    will-change: transform;
    transform: translateY(-4%);
    /* ping-pong: sweep down, then back up, forever — `alternate` reverses each
       cycle; `ease-in-out` slows the turn at the top and bottom. */
    animation: arechScanLine 7s ease-in-out infinite alternate;
}
@keyframes arechScanLine {
    0%   { transform: translateY(-4%); }
    100% { transform: translateY(100%); }
}

/* ---- Layer 3 — LED dot matrix (right-side perspective) ----
   KEPT EXACTLY AS THE CURRENT LIVE BLOCK per client instruction
   "rămân exact așa" — opacity ladder, gap, flicker timing unchanged. */
.arech-hero__led {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    height: 100%;
    display: none;
    grid-template-columns: repeat(28, 1fr);
    gap: 4px;
    opacity: 0.40;
    pointer-events: none;
    transform: perspective(800px) rotateY(-8deg);
    transform-origin: right center;
    padding: var(--space-2);
    z-index: 3;
    -webkit-mask-image:
        linear-gradient(to left, black 50%, transparent 100%),
        linear-gradient(to top, black 60%, transparent 100%);
    mask-image:
        linear-gradient(to left, black 50%, transparent 100%),
        linear-gradient(to top, black 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
@container arech-hero (min-width: 480px) {
    .arech-hero__led { display: grid; width: 30%; opacity: 0.55; }
}
@container arech-hero (min-width: 768px) {
    .arech-hero__led { width: 45%; opacity: 0.70; }
}
@container arech-hero (min-width: 1024px) {
    .arech-hero__led { width: 55%; opacity: 0.85; }
}
@supports not (container-type: inline-size) {
    @media (min-width: 480px) {
        .arech-hero__led { display: grid; width: 30%; opacity: 0.55; }
    }
    @media (min-width: 768px) {
        .arech-hero__led { width: 45%; opacity: 0.70; }
    }
    @media (min-width: 1024px) {
        .arech-hero__led { width: 55%; opacity: 0.85; }
    }
}
.arech-hero__led .arech-led-dot {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--orange);
    opacity: var(--base, 0.2);
    animation: arechLedFlicker var(--d, 3s) var(--ease-standard) var(--delay, 0s) infinite;
}
@keyframes arechLedFlicker {
    0%, 100% { opacity: var(--base, 0.2); }
    50%      { opacity: var(--peak, 0.8); }
}

/* ---- Layer 4 — radial orange glow ---- */
.arech-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% 40%, color-mix(in oklch, var(--orange) 12%, transparent) 0%, transparent 60%);
    pointer-events: none;
    z-index: 4;
}

/* ---- Layer 5 — bottom fade-out into next section ---- */
.arech-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--dark) 100%);
    pointer-events: none;
    z-index: 5;
}

/* ============================================================
   Content layer — prototype L754-758: max-width 720px, left-aligned
   (NOT centered). The hero's padding-inline provides the left gutter.
   ============================================================ */
.arech-hero__content {
    position: relative;
    z-index: 6;
    width: 100%;
    /* S69 — hero content shares the single site container (1200) and centres,
       so the hero starts at the SAME left edge as every other section.
       (Was --container-narrow 720 left-anchored, which broke alignment.) */
    max-width: var(--container);
    margin-inline: auto;
}

/* Eyebrow */
.arech-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--off-white);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-5);
}
.arech-hero__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--off-white);
    flex-shrink: 0;
}

/* H1 — 3-line stacked, filled / accent / outline.
   Prototype L766-806: font/size live on the spans; uppercase; lh 0.92. */
.arech-hero__h1 {
    margin: var(--space-7) 0 0;
}
.arech-hero__line {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(72px, 9vw, 136px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--off-white);
}
.arech-hero__line--2 {
    color: var(--orange);
    white-space: nowrap;
    /* Prototype L790-794 — 4-layer bloom from sharp inner halo to wide ambient. */
    text-shadow:
        0 0 24px color-mix(in oklch, var(--orange) 55%, transparent),
        0 0 56px color-mix(in oklch, var(--orange) 35%, transparent),
        0 0 96px color-mix(in oklch, var(--orange) 18%, transparent),
        0 0 160px color-mix(in oklch, var(--orange) 8%, transparent);
}
.arech-hero__line--3 {
    /* General Sans (var(--font-headline)) for outline-only text per
       arech-font-outline-rule — Geist Black artifacts under text-stroke.
       Mobile-first: thinner stroke on phones, full 1px from SM up
       (responsive_manual_en_0.1 §1 — no max-width media queries). */
    font-family: var(--font-headline);
    font-weight: 700;
    display: inline-block;
    line-height: 1.05;
    padding-bottom: 0.08em;
    letter-spacing: 0.03em;
    -webkit-text-stroke: 0.75px var(--off-white);
    color: transparent;
}
@media (min-width: 480px) {
    .arech-hero__line--3 {
        -webkit-text-stroke-width: 1px;
        letter-spacing: 0.04em;
    }
}

/* Divider — prototype L807-811: 1px tall, space-6 margin. */
.arech-hero__divider {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--orange), transparent);
    margin: var(--space-6) 0;
}

/* Subtitle — prototype L818-826: 18px, italic 300, max-width 520px. */
.arech-hero__sub {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    color: var(--light);
    max-width: 520px;
    margin: 0 0 var(--space-7);
}

/* CTAs — prototype L833-836: space-4 gap. */
.arech-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.arech-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 28px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    transition:
        background var(--motion-normal) var(--ease-standard),
        transform var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard),
        border-color var(--motion-normal) var(--ease-standard),
        color var(--motion-normal) var(--ease-standard);
}
.arech-hero__btn--primary {
    background: var(--orange);
    color: #fff;
}
.arech-hero__btn--primary:hover,
.arech-hero__btn--primary:focus-visible {
    background: var(--orange-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in oklch, var(--orange) 35%, transparent);
    color: #fff;
}
.arech-hero__btn--ghost {
    background: transparent;
    color: var(--light);
    border-color: color-mix(in oklch, var(--off-white) 18%, transparent);
}
.arech-hero__btn--ghost:hover,
.arech-hero__btn--ghost:focus-visible {
    border-color: var(--orange);
    color: var(--orange);
}
.arech-hero__btn:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* Stats row (block-only — not present in prototype hero; kept). */
.arech-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-9);
    padding-top: var(--space-7);
    border-top: 1px solid color-mix(in oklch, var(--orange) 18%, transparent);
    max-width: var(--measure-hero);
}
@media (min-width: 768px) {
    .arech-hero__stats { grid-template-columns: repeat(4, 1fr); }
}
.arech-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.arech-hero__stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: 1;
    color: var(--orange);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.arech-hero__suffix {
    font-size: 0.45em;
    color: var(--orange-dim);
    margin-left: 4px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.arech-hero__stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-accessible);
}

/* ============================================================
   Reveal stagger
   ============================================================ */
.arech-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.arech-reveal--s1 { transition-delay: var(--stagger-1); }
.arech-reveal--s2 { transition-delay: var(--stagger-2); }
.arech-reveal--s3 { transition-delay: var(--stagger-3); }
.arech-reveal--s4 { transition-delay: var(--stagger-4); }
.arech-reveal--s5 { transition-delay: var(--stagger-5); }

/* ============================================================
   Reduced motion — WCAG 2.2 SC 2.3.3
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .arech-hero__led { display: none; }
    .arech-hero__grid { animation: none; }
    .arech-hero__scanline { animation: none; opacity: 0; }
    .arech-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .arech-hero__btn,
    .arech-hero__btn:hover {
        transform: none !important;
        transition: none;
    }
}

/* ============================================================
   Print — strip decorative layers, render plain document
   ============================================================ */
@media print {
    .arech-hero__grid,
    .arech-hero__scanline,
    .arech-hero__led { display: none !important; }
    .arech-hero {
        min-height: auto;
        padding: 32px 24px;
        color: #000;
        background: #fff;
    }
    .arech-hero__line--2 {
        color: #000;
        text-shadow: none;
    }
    .arech-hero__line--3 {
        -webkit-text-stroke: 0;
        color: #000;
    }
}

/* ============================================================
   Concrete edit-mode tweaks: stop the sticky/fullscreen hero
   from hiding the editor toolbar.
   ============================================================ */
.ccm-edit-mode .arech-hero {
    min-height: 60vh;
    padding-top: var(--space-7);
}
.ccm-edit-mode .arech-hero__scanline,
.ccm-edit-mode .arech-hero__led {
    opacity: 0.3;
}


/* ============================================================================
   TDM Blocks — design tokens (--tdm-* namespace)

   The package ships its OWN token set so it works standalone on any Concrete
   site. Blocks NEVER hard-code values — they reference var(--tdm-*). The Brand
   Kit dashboard overrides any of these at :root per site, re-skinning every
   block at once.

   Defaults below are seeded from the ARECH design-system-v1 (dark theme) as
   the first consumer; on a new site, set the Brand Kit and these are replaced.
   On ARECH you may also map a token to the live theme variable, e.g.
   `--tdm-color-accent: var(--orange);` so the library tracks the theme.
   ============================================================================ */

:root {
  /* --- Palette -------------------------------------------------------------
     ink = text on surface; surface = block background; accent = CTA/links. */
  --tdm-color-ink:          #F5F4F0;   /* primary text  (ARECH --off-white) */
  --tdm-color-ink-2:        #B0B0BA;   /* secondary     (ARECH --light)     */
  --tdm-color-ink-3:        #6B6B75;   /* tertiary/meta (ARECH --muted)     */
  --tdm-color-surface:      #0D0D0F;   /* base bg       (ARECH --dark)      */
  --tdm-color-surface-2:    #141416;   /* raised bg                          */
  --tdm-color-surface-3:    #1C1C20;   /* card bg                            */
  --tdm-color-accent:       #E8651A;   /* primary accent FILL: CTA bg, chips, borders, glow (ARECH --orange) */
  --tdm-color-accent-hover: #FF7A2F;
  --tdm-color-accent-active:#C4510E;
  --tdm-color-on-accent:    #FFFFFF;   /* text ON an accent fill (orange-fill + white = valid AA pair) */
  /* Accent used AS TEXT (links, eyebrow accents, accent spans). On a DARK band
     this equals --tdm-color-accent (#E8651A reads AA on dark, 5.74:1). The
     base.css [data-band="light"] hook remaps the per-instance --tdmx-accent-text
     to --tdm-color-accent-text-light on a cream band, where #E8651A fails AA
     (2.8–3.0:1). FILL usages keep --tdm-color-accent and never flip. */
  --tdm-color-accent-text:       var(--tdm-color-accent);   /* dark-band: orange */
  --tdm-color-accent-text-light: #B0470B;   /* light-band link/text accent (ARECH --orange-link): 5.65:1 on paper-0, 5.09:1 on paper-1, 4.65:1 on paper-2 = AA body PASS on all creams (colorist-verified, strict WCAG) */

  /* Hairline via color-mix so it tracks ink on any surface. */
  --tdm-hairline: color-mix(in srgb, var(--tdm-color-ink) 14%, transparent);

  /* --- Fonts (self-hosted by the theme; package only references families) - */
  --tdm-font-display:  "Geist", system-ui, sans-serif;
  --tdm-font-headline: "General Sans", Inter, system-ui, sans-serif;
  --tdm-font-body:     "DM Sans", system-ui, sans-serif;
  /* Label / eyebrow / caption voice. DM Mono retired 2026-06-02 site-wide;
     aligned to General Sans to match the theme's --font-mono (S80). */
  --tdm-font-mono:     "General Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Type scale (fluid clamp; never a fixed px in a media query) -------- */
  --tdm-text-h1:      clamp(48px, 6vw, 88px);
  --tdm-text-h2:      clamp(42px, 5vw, 72px);
  --tdm-text-h3:      clamp(28px, 3vw, 36px);
  --tdm-text-h4:      20px;
  --tdm-text-h5:      16px;
  --tdm-text-body:    16px;
  --tdm-text-body-sm: 14px;
  --tdm-text-eyebrow: 11px;
  --tdm-text-caption: 12px;

  --tdm-weight-display:  700;
  --tdm-weight-headline: 600;
  --tdm-weight-body:     400;

  --tdm-leading-tight: 1.1;
  --tdm-leading-snug:  1.3;
  --tdm-leading-body:  1.65;

  /* --- Spacing scale (4px base — matches ARECH --space-1..11) ------------- */
  --tdm-space-1:  4px;
  --tdm-space-2:  8px;
  --tdm-space-3:  12px;
  --tdm-space-4:  16px;
  --tdm-space-5:  24px;
  --tdm-space-6:  32px;
  --tdm-space-7:  48px;
  --tdm-space-8:  64px;
  --tdm-space-9:  96px;
  --tdm-space-10: 128px;
  --tdm-space-11: 160px;

  /* --- Containers (single uniform container — ARECH responsive manual) ---- */
  --tdm-container:        1200px;  /* caps identically across hero/body/footer */
  --tdm-container-narrow: 720px;
  --tdm-gutter:           16px;    /* steps up at breakpoints in base.css      */

  /* --- Radius (cap 6px on cards per ARECH rule; pill only where allowed) -- */
  --tdm-radius-sm:   4px;
  --tdm-radius-md:   6px;
  --tdm-radius-lg:   12px;
  --tdm-radius-pill: 999px;
  --tdm-radius-btn:  2px;   /* flat action buttons (ARECH FIX-1) */

  /* --- Shadow presets ----------------------------------------------------- */
  --tdm-shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent);
  --tdm-shadow-md: 0 4px 16px color-mix(in srgb, #000 35%, transparent);
  --tdm-shadow-lg: 0 12px 40px color-mix(in srgb, #000 45%, transparent);

  /* --- Motion (composite-only; respect reduced-motion in base.css) -------- */
  --tdm-dur-fast:  150ms;
  --tdm-dur-base:  250ms;
  --tdm-dur-slow:  400ms;
  --tdm-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tdm-ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================================
   TDM Blocks — scoped base layer (.tdm-*)

   Scoped under .tdm-* so nothing leaks into the host theme. Provides:
   - the shared block wrapper that consumes per-instance --tdmx-* variables
     (emitted by CssEmitter into a `.tdm-i-<bID>` rule);
   - the uniform container + responsive gutter (ARECH responsive manual);
   - alignment + background plumbing;
   - the mandatory prefers-reduced-motion branch.

   Per-instance variables (set by CssEmitter, fall back to global --tdm-* tokens):
     --tdmx-pad-top/right/bottom/left, --tdmx-margin-top/bottom, --tdmx-gap,
     --tdmx-text, --tdmx-heading, --tdmx-accent, --tdmx-align, --tdmx-max-width,
     --tdmx-bg, --tdmx-radius, --tdmx-border, --tdmx-shadow, --tdmx-font-heading,
     --tdmx-font-body.
   ============================================================================ */

.tdm-block {
  --tdmx-pad-top:    var(--tdm-space-9);
  --tdmx-pad-right:  0px;
  --tdmx-pad-bottom: var(--tdm-space-9);
  --tdmx-pad-left:   0px;
  --tdmx-margin-top: 0px;
  --tdmx-margin-bottom: 0px;
  --tdmx-gap:        var(--tdm-space-5);
  --tdmx-text:       var(--tdm-color-ink);
  --tdmx-heading:    var(--tdm-color-ink);
  --tdmx-accent:     var(--tdm-color-accent);
  /* Accent split into two roles so a light band can re-tone TEXT without ever
     touching FILLS (S106-class fix). --tdmx-accent = the orange FILL (CTA bg,
     chips, borders, glow) — NEVER flipped. --tdmx-accent-text = accent used as
     TEXT (links, eyebrow accents, accent spans) — defaults to --tdmx-accent so
     it tracks any operator accent override, and is the ONLY accent var the
     [data-band="light"] hook remaps (to --orange-link, AA on cream). */
  --tdmx-accent-text: var(--tdmx-accent);
  --tdmx-align:      left;
  --tdmx-max-width:  var(--tdm-container);
  --tdmx-bg:         transparent;
  --tdmx-radius:     0px;
  --tdmx-border:     0 solid transparent;
  --tdmx-shadow:     none;
  --tdmx-font-heading: var(--tdm-font-headline);
  --tdmx-font-body:    var(--tdm-font-body);

  padding: var(--tdmx-pad-top) var(--tdmx-pad-right) var(--tdmx-pad-bottom) var(--tdmx-pad-left);
  margin-block: var(--tdmx-margin-top) var(--tdmx-margin-bottom);
  /* Band pattern by default, contained mode on demand.
     - 'full' (default, no var emitted): max-width:none + margin-inline:0 =>
       the block fills its parent => FULL-BLEED background (the band).
     - 'contained' (PHP emits --tdmx-block-max:var(--tdm-container) and
       --tdmx-block-mi:auto): the whole block (bg + inner) is capped at 1200
       and centred. The ::before/::after image+overlay are inset:0 of this box,
       so they follow the contained box automatically. */
  max-width: var(--tdmx-block-max, none);
  margin-inline: var(--tdmx-block-mi, 0);
  background: var(--tdmx-bg);
  color: var(--tdmx-text);
  border: var(--tdmx-border);
  border-radius: var(--tdmx-radius);
  box-shadow: var(--tdmx-shadow);
  font-family: var(--tdmx-font-body);
  position: relative;
  isolation: isolate;
}

/* ── Universal band tone (spec §1b / §1e — cascade layer `base`) ────────────
   ONE place that re-tones EVERY .tdm-block for a light or dark band, replacing
   the per-block [data-band] ink hooks. The view emits data-band only when the
   band resolves to LIGHT (auto-detected light solid bg, or d_band=light) or to
   a FORCED dark (d_band=dark on an unknown image/gradient bg). Default
   (dark-first site, no attribute) is byte-identical to today.

   Flips ONLY the two universal ink vars (--tdmx-heading / --tdmx-text) that
   Family-A blocks consume; accent (orange) is intentionally untouched — it
   reads AA on both cream and dark. Ink-on-light is derived from the surface
   token via color-mix (no magic hex):
     heading = full surface ink (#0D0D0F-equivalent, ~16:1 on cream)
     body    = surface 78%      (mirrors the S106-tuned value, ~7:1 on cream)
   No !important; single attribute-selector specificity so an explicit
   per-instance .tdm-i-<bID> colour rule from CssEmitter still wins.
   The 13 Family-B blocks (which read the never-assigned --tdmx-*-color suffix)
   add their own [data-band="light"] remap in their view.css — see spec §1e. */
.tdm-block[data-band="light"] {
  --tdmx-heading: var(--tdm-color-surface);                               /* #0D0D0F ink */
  --tdmx-text:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
  /* Accent-as-TEXT remap (S106-class fix): #E8651A orange fails AA as text on a
     cream band (2.8–3.0:1). Flip ONLY the text accent to --orange-link (#B84A0C,
     ≥4.46:1 on paper-0/1/2 = AA body). FILL accent (--tdmx-accent) is untouched,
     so orange CTA buttons / chips / borders + their white text stay #E8651A. */
  --tdmx-accent-text: var(--tdm-color-accent-text-light);
}
/* Forced dark band (d_band=dark) — restores the dark-first ink explicitly so a
   block placed on a dark image/gradient (where auto-luminance can't read a hex)
   is guaranteed legible-light, even if some ancestor set a light tone. */
.tdm-block[data-band="dark"] {
  --tdmx-heading: var(--tdm-color-ink);                                   /* #F5F4F0 */
  --tdmx-text:    var(--tdm-color-ink-2);                                 /* #B0B0BA */
  --tdmx-accent-text: var(--tdmx-accent);                                 /* orange — AA on dark (5.74:1) */
}

/* Per-handle band-padding fallback for the composite containers (Bug 3c).
   tdm_columns emits design vars change-only, so a container left at its new
   smaller default emits NOTHING and would otherwise fall back to the global
   --tdmx-pad-* (space-9 = 96px). Pin the fallback to the same new default
   (space-6 = 32px) declared in DesignControls::DEFAULT_OVERRIDES so a fresh
   container is a tight band and "default == fallback" stays consistent.
   tdm_section emits all vars (changedOnly=false) so this is a harmless safety
   net for it; an emitted var always wins over this fallback. */
.tdm-columns, .tdm-section {
  --tdmx-pad-top:    var(--tdm-space-6);
  --tdmx-pad-bottom: var(--tdm-space-6);
}

/* Universal background image + overlay via pseudo-elements — driven purely by
   the emitted --tdmx-bg-image / --tdmx-overlay vars, so EVERY block supports a
   background image with overlay without any per-view markup. When the vars are
   unset (no image chosen) they fall back to none/transparent (invisible). */
.tdm-block::after {            /* image layer, behind everything */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--tdmx-bg-image, none);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.tdm-block::before {           /* overlay, above image, below content */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tdmx-overlay, transparent);
  pointer-events: none;
}
/* Legacy explicit layers (section/hero/cta views) — now redundant no-ops. */
.tdm-block__bg, .tdm-block__overlay { display: none; }

/* ── Edit-mode SubArea editability fix (Bug 3b) ────────────────────────────
   On container blocks (tdm_section / tdm_columns) `isolation: isolate` creates
   a stacking context that traps Concrete's in-context edit overlays (move/edit
   grips) of the INNER SubArea blocks beneath the parent block's UI, leaving
   only the parent editable. In edit mode ONLY, drop the isolation on the
   containers and suppress the negative-z background pseudo-elements so the
   inner block handles can stack above. Anonymous (non-edit) output is
   unaffected: front-end pages have no `.ccm-edit-mode` class, so these rules
   never match → render is byte-identical. */
.ccm-edit-mode .tdm-section,
.ccm-edit-mode .tdm-columns,
.ccm-edit-mode .tdm-block__inner .tdm-block { isolation: auto; }   /* S94: un-isolate NESTED children too — S88 reset only the outer containers, so a 2nd isolated child in a column trapped its own edit overlay → only the parent stayed editable */
.ccm-edit-mode .tdm-section::before,
.ccm-edit-mode .tdm-section::after,
.ccm-edit-mode .tdm-columns::before,
.ccm-edit-mode .tdm-columns::after { display: none; }

/* Inner = the container. Single uniform width, responsive gutter. */
.tdm-block__inner {
  width: 100%;
  max-width: var(--tdmx-max-width);
  margin-inline: auto;
  padding-inline: var(--tdm-gutter);
  text-align: var(--tdmx-align);
}

/* ── Nesting anti-compounding (Bug 3c) ─────────────────────────────────────
   Real DOM (verified from tdm_section/view.php & tdm_columns/view.php):
     tdm_section:  .tdm-section > .tdm-block__inner > [SubArea] > .tdm-block
     tdm_columns:  .tdm-columns > .tdm-block__inner > .tdm-columns__grid
                     > .tdm-columns__col > [SubArea] > .tdm-block
   A child .tdm-block inside a container's inner/column carries its own space-9
   band by default → paddings add (padding never collapses) → ~192px double band
   when nested. Zero the nested child's vertical band padding; the outer
   container owns the band. (Inline padding-inline is the gutter, suppressed on
   nested inner wrappers below.) These selectors only match the real nesting
   chains — top-level blocks on a normal page are unaffected → byte-identical. */
/* Bug-3c anti-compounding, fixed (S117): zero the nested child's DEFAULT band
   via the per-instance VARIABLE (not a hard longhand), so an operator's
   explicit per-instance pad — emitted at equal specificity on
   `.tdm-block.tdm-i-<bID>` (CssEmitter) and printed after this sheet — still
   wins on source order. A nested block left at default has no per-instance pad
   var, so this 0 holds → single band, no 192px compounding. */
.tdm-block__inner .tdm-block {
  --tdmx-pad-top: 0px;
  --tdmx-pad-bottom: 0px;
}
.tdm-block__inner .tdm-block__inner {
  padding-inline: 0;
}

.tdm-block h1, .tdm-block h2, .tdm-block h3,
.tdm-block h4, .tdm-block h5, .tdm-block h6 {
  color: var(--tdmx-heading);
  font-family: var(--tdmx-font-heading);
}

.tdm-block img { max-width: 100%; height: auto; display: block; }

/* Responsive gutter — min-width only (ARECH responsive manual). */
@media (min-width: 680px)  { :root { --tdm-gutter: 20px; } }
@media (min-width: 768px)  { :root { --tdm-gutter: 24px; } }
@media (min-width: 1024px) { :root { --tdm-gutter: 32px; --tdm-container: 1140px; } }
@media (min-width: 1440px) { :root { --tdm-gutter: 40px; --tdm-container: 1200px; } }

/* Shared action buttons (flat radius per ARECH; ≥44px touch target). */
.tdm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--tdm-space-6);
  border-radius: var(--tdm-radius-btn); border: 1px solid transparent;
  font-family: var(--tdm-font-headline); font-weight: var(--tdm-weight-headline);
  font-size: var(--tdm-text-body-sm); text-decoration: none; cursor: pointer;
  transition: background var(--tdm-dur-fast) var(--tdm-ease-standard),
              color var(--tdm-dur-fast) var(--tdm-ease-standard),
              border-color var(--tdm-dur-fast) var(--tdm-ease-standard);
}
.tdm-btn--primary { background: var(--tdmx-accent, var(--tdm-color-accent)); color: var(--tdm-color-on-accent); }
.tdm-btn--primary:hover { background: var(--tdm-color-accent-hover); color: var(--tdm-color-on-accent); }
.tdm-btn--ghost { background: transparent; color: var(--tdmx-text, var(--tdm-color-ink));
  border-color: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink)) 35%, transparent); }
.tdm-btn--ghost:hover { border-color: var(--tdmx-accent, var(--tdm-color-accent)); color: var(--tdmx-accent-text, var(--tdm-color-accent)); }
@media (prefers-reduced-motion: reduce) { .tdm-btn { transition: none; } }

/* Hover effects (composite-only). */
.tdm-hover-lift  { transition: transform var(--tdm-dur-base) var(--tdm-ease-standard); }
.tdm-hover-lift:hover  { transform: translateY(-4px); }
.tdm-hover-scale { transition: transform var(--tdm-dur-base) var(--tdm-ease-standard); }
.tdm-hover-scale:hover { transform: scale(1.02); }
.tdm-hover-glow  { transition: box-shadow var(--tdm-dur-base) var(--tdm-ease-standard); }
.tdm-hover-glow:hover  { box-shadow: 0 0 0 1px var(--tdmx-accent), var(--tdm-shadow-md); }

/* Entrance reveal (one per block; JS adds .is-in when in view). */
.tdm-reveal { opacity: 0; transition: opacity var(--tdm-dur-slow) var(--tdm-ease-emphatic),
                                       transform var(--tdm-dur-slow) var(--tdm-ease-emphatic); }
.tdm-reveal.fade-up    { transform: translateY(24px); }
.tdm-reveal.slide-left { transform: translateX(24px); }
.tdm-reveal.is-in      { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tdm-hover-lift, .tdm-hover-scale, .tdm-hover-glow,
  .tdm-reveal { transition: none !important; transform: none !important; }
  .tdm-reveal { opacity: 1 !important; }
}


/* ======================================================================
   TDM Quote — single large pull-quote / featured statement.
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-quote__* only — NEVER reuse the package-global .reveal class
   for a block-internal hook (its base state is opacity:0; reusing it would hide
   content). Block-instance scope (--tdmx-* + reveal) is on the outer .tdm-i-<bID>.

   Semantic markup: <blockquote> wrapper + <cite> for the author. Quote text
   uses the heading colour; the role uses muted ink. Sizes (medium/large/xl) and
   layout (centered/left) are data-attribute driven on the inner blockquote.
   ====================================================================== */

.tdm-quote {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

/* Light-band ink remap (spec §1e) — quote text reads --tdmx-*-color (the dead
   -color suffix the base hook can't reach), so re-tone locally to the dark-on-
   light ink, mirroring the global target. Emitted only with data-band="light"
   → byte-identical otherwise. */
.tdm-quote[data-band="light"] {
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
}

/* ---------- inner blockquote ---------- */
.tdm-quote__inner {
  /* This element ALSO carries .tdm-block__inner (the container: margin-inline
     auto + padding-inline gutter + max-width). Reset only the BLOCK axis so we
     drop the blockquote's default vertical margin WITHOUT clobbering the
     container's horizontal centring + gutter (shorthand margin/padding:0 did,
     which pinned the box to the left edge with no gutter). */
  margin-block: 0;
  border: 0;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  /* Rhythm between mark / quote / attribution — Design `gap` drives it. */
  gap: var(--tdmx-gap, var(--tdm-space-5, 24px));
  /* Block alignment: Design `align` sets --tdmx-align; the own `layout`
     centered/left below refines text-align + self-centring of the box. */
  text-align: var(--tdmx-align, left);
}

/* centered: centre the box (within its max-width) AND the text. */
.tdm-quote__inner[data-layout="centered"] {
  text-align: center;
  align-items: center;
}
/* left: keep text left, items start. */
.tdm-quote__inner[data-layout="left"] {
  text-align: left;
  align-items: flex-start;
}

/* ---------- decorative quotation mark ---------- */
.tdm-quote__mark {
  display: inline-flex;
  line-height: 0;
}
.tdm-quote__mark-svg {
  width: clamp(34px, 4vw, 52px);
  height: auto;
  fill: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  opacity: 0.9;
}

/* ---------- quote text (heading colour, size-driven scale) ---------- */
.tdm-quote__text {
  margin: 0;
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-weight: var(--tdm-weight-headline, 600);
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
}
/* Fluid size per scale — clamp() only, never a fixed px in a media query
   (ARECH responsive manual). */
.tdm-quote__inner[data-size="medium"] .tdm-quote__text {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
}
.tdm-quote__inner[data-size="large"] .tdm-quote__text {
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
}
.tdm-quote__inner[data-size="xl"] .tdm-quote__text {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3rem);
  line-height: 1.22;
}

/* ---------- attribution row ---------- */
.tdm-quote__attribution {
  display: flex;
  align-items: center;
  gap: var(--tdm-space-4, 16px);
  flex-wrap: wrap;
}
.tdm-quote__inner[data-layout="centered"] .tdm-quote__attribution {
  justify-content: center;
}

/* author photo (round) */
.tdm-quote__photo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--tdm-color-surface-3, #1C1C20);
}
.tdm-quote__photo-img,
.tdm-quote__photo picture,
.tdm-quote__photo img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
}

/* name + role */
.tdm-quote__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.tdm-quote__name {
  font-style: normal;
  font-weight: 600;
  color: var(--tdmx-text-color, var(--tdm-color-ink, #F5F4F0));
}
.tdm-quote__role {
  font-size: 0.875rem;
  color: var(--tdm-color-ink-2, #B0B0BA);
}

/* company logo — capped slot so it never blows out the row (anti-CLS) */
.tdm-quote__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  max-height: 40px;
  margin-left: auto;
}
.tdm-quote__inner[data-layout="centered"] .tdm-quote__logo {
  margin-left: 0;
}
.tdm-quote__logo-img,
.tdm-quote__logo picture,
.tdm-quote__logo img {
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* images never overflow their box (responsive manual) */
.tdm-quote img { max-width: 100%; height: auto; display: block; }

/* prefers-reduced-motion: the optional reveal class is the only motion this
   block carries; the package reveal observer already honours reduced-motion.
   The decorative mark has no animation. Nothing further to disable here. */

/* ======================================================================
   Preset visual styles (qstyle) — scoped under .tdm-quote--style-<key>.
   `classic` is the CURRENT look and is intentionally given NO override here:
   an unset/classic quote renders byte-identical to the base rules above.
   Each treatment below composes WITH the size axis (size scales font;
   qstyle changes the surrounding treatment) and uses ONLY package tokens.
   ====================================================================== */

/* ---------- border-left: left accent rule, understated ---------- */
.tdm-quote--style-border-left .tdm-quote__inner {
  text-align: left;
  align-items: flex-start;
  border-inline-start: 4px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  padding-inline-start: var(--tdm-space-5, 24px);
}
/* the big mark would fight the rule — soften + shrink it if shown */
.tdm-quote--style-border-left .tdm-quote__mark-svg {
  width: clamp(24px, 2.4vw, 32px);
  opacity: 0.5;
}

/* ---------- card: surface-2 panel ---------- */
.tdm-quote--style-card .tdm-quote__inner {
  background: var(--tdm-color-surface-2, #16161A);
  padding: var(--tdm-space-7, 48px) var(--tdm-space-6, 32px);
  border-radius: var(--tdm-radius-lg, 16px);
  border: 1px solid var(--tdm-hairline, rgba(255, 255, 255, 0.08));
  box-shadow: var(--tdm-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
}

/* ---------- marks: oversized decorative quotation marks ---------- */
.tdm-quote--style-marks .tdm-quote__inner {
  position: relative;
}
/* hide the inline SVG mark — this style frames with a typographic glyph */
.tdm-quote--style-marks .tdm-quote__mark {
  display: none;
}
.tdm-quote--style-marks .tdm-quote__text {
  position: relative;
  z-index: 1;
}
.tdm-quote--style-marks .tdm-quote__text::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  z-index: -1;
  top: -0.42em;
  inset-inline-start: -0.08em;
  font-family: var(--tdm-font-headline, Georgia, serif);
  font-size: 3.2em;
  line-height: 1;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  opacity: 0.16;
  pointer-events: none;
}
/* centred layout: keep the glyph centred over the text */
.tdm-quote--style-marks .tdm-quote__inner[data-layout="centered"] .tdm-quote__text::before {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* ---------- minimal: small italic, thin hairline rules top + bottom ---------- */
.tdm-quote--style-minimal .tdm-quote__inner {
  border-top: 1px solid var(--tdm-hairline, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--tdm-hairline, rgba(255, 255, 255, 0.08));
  padding-block: var(--tdm-space-5, 24px);
  gap: var(--tdm-space-3, 12px);
}
.tdm-quote--style-minimal .tdm-quote__mark {
  display: none;
}
.tdm-quote--style-minimal .tdm-quote__text {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- emphasis: large accent-tinted quote text, tight, no marks ---------- */
.tdm-quote--style-emphasis .tdm-quote__inner {
  gap: var(--tdm-space-4, 16px);
}
.tdm-quote--style-emphasis .tdm-quote__mark {
  display: none;
}
.tdm-quote--style-emphasis .tdm-quote__text {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
/* a touch larger than the size axis at every step (emphasis = louder) */
.tdm-quote--style-emphasis .tdm-quote__inner[data-size="medium"] .tdm-quote__text {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
}
.tdm-quote--style-emphasis .tdm-quote__inner[data-size="large"] .tdm-quote__text {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
}
.tdm-quote--style-emphasis .tdm-quote__inner[data-size="xl"] .tdm-quote__text {
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
}


/* ======================================================================
   TDM Columns — composable column grid (page-builder layout foundation).
   Each column is a Concrete SubArea (drop zone). Layout is driven entirely by
   data-* attributes on .tdm-columns__grid; the Design layer threads its
   --tdmx-* props on the outer .tdm-i-<bID> (emit-only-on-change → these
   fallbacks hold whenever a control is left at its default).

   Breakpoints are min-width ONLY (responsive_manual_en_0.1.md):
     MD 680 · LG 768 · XL 1024 · 2XL 1440.
   Mobile-first: the grid starts as a single stacked column, then expands to
   the chosen template at the stack breakpoint (data-stack = md | lg).
   ====================================================================== */

.tdm-columns {
  /* outer block surface — Design layer drives these (fallbacks = neutral) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
  border-radius: var(--tdmx-radius, 0);
  box-shadow: var(--tdmx-shadow, none);
}

/* The grid itself. Default (mobile + unstacked fallback) = one column. */
.tdm-columns__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: var(--tdm-cols-valign, start);

  /* gap presets (data-gap) */
  --tdm-cols-gap: var(--tdm-space-6);
  gap: var(--tdm-cols-gap);
}

.tdm-columns__grid[data-gap="tight"]  { --tdm-cols-gap: var(--tdm-space-4); }
.tdm-columns__grid[data-gap="normal"] { --tdm-cols-gap: var(--tdm-space-6); }
.tdm-columns__grid[data-gap="roomy"]  { --tdm-cols-gap: var(--tdm-space-8); }

/* vertical alignment (data-valign) → align-items on the grid */
.tdm-columns__grid[data-valign="top"]     { --tdm-cols-valign: start; }
.tdm-columns__grid[data-valign="center"]  { --tdm-cols-valign: center; }
.tdm-columns__grid[data-valign="bottom"]  { --tdm-cols-valign: end; }
.tdm-columns__grid[data-valign="stretch"] { --tdm-cols-valign: stretch; }

.tdm-columns__col {
  min-width: 0; /* let grid tracks shrink; prevents overflow from wide content */
}

/* ----------------------------------------------------------------------
   STACK BREAKPOINTS — the grid expands from 1 column to its template at the
   chosen stack breakpoint, and never before. Two cascades (md / lg) so the
   data-stack attribute picks which min-width unlocks the multi-column layout.
   ---------------------------------------------------------------------- */

/* === stack_at = md → multi-column from 680px up === */
@media (min-width: 680px) {
  .tdm-columns__grid[data-stack="md"][data-cols="2"] { grid-template-columns: 1fr 1fr; }
  .tdm-columns__grid[data-stack="md"][data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
  .tdm-columns__grid[data-stack="md"][data-cols="4"] { grid-template-columns: 1fr 1fr; }

  /* 2-col asymmetric ratios */
  .tdm-columns__grid[data-stack="md"][data-cols="2"][data-ratio="60-40"] { grid-template-columns: 6fr 4fr; }
  .tdm-columns__grid[data-stack="md"][data-cols="2"][data-ratio="40-60"] { grid-template-columns: 4fr 6fr; }
  .tdm-columns__grid[data-stack="md"][data-cols="2"][data-ratio="70-30"] { grid-template-columns: 7fr 3fr; }
  .tdm-columns__grid[data-stack="md"][data-cols="2"][data-ratio="30-70"] { grid-template-columns: 3fr 7fr; }
  .tdm-columns__grid[data-stack="md"][data-cols="2"][data-ratio="50-50"] { grid-template-columns: 1fr 1fr; }

  /* 3-col wide-center */
  .tdm-columns__grid[data-stack="md"][data-cols="3"][data-ratio="wide-center"] { grid-template-columns: 1fr 2fr 1fr; }
}

/* === stack_at = lg → multi-column from 768px up === */
@media (min-width: 768px) {
  .tdm-columns__grid[data-stack="lg"][data-cols="2"] { grid-template-columns: 1fr 1fr; }
  .tdm-columns__grid[data-stack="lg"][data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
  .tdm-columns__grid[data-stack="lg"][data-cols="4"] { grid-template-columns: 1fr 1fr; }

  /* 2-col asymmetric ratios */
  .tdm-columns__grid[data-stack="lg"][data-cols="2"][data-ratio="60-40"] { grid-template-columns: 6fr 4fr; }
  .tdm-columns__grid[data-stack="lg"][data-cols="2"][data-ratio="40-60"] { grid-template-columns: 4fr 6fr; }
  .tdm-columns__grid[data-stack="lg"][data-cols="2"][data-ratio="70-30"] { grid-template-columns: 7fr 3fr; }
  .tdm-columns__grid[data-stack="lg"][data-cols="2"][data-ratio="30-70"] { grid-template-columns: 3fr 7fr; }
  .tdm-columns__grid[data-stack="lg"][data-cols="2"][data-ratio="50-50"] { grid-template-columns: 1fr 1fr; }

  /* 3-col wide-center */
  .tdm-columns__grid[data-stack="lg"][data-cols="3"][data-ratio="wide-center"] { grid-template-columns: 1fr 2fr 1fr; }
}

/* === 4 columns: go to the full 4-up only from XL (1024px) up, regardless of
   the stack breakpoint — a 2x2 grid reads better on tablets than a cramped
   4-up. (At the stack breakpoint above, 4-col is shown 2-up.) === */
@media (min-width: 1024px) {
  .tdm-columns__grid[data-cols="4"] { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Images dropped into a column behave (defensive — base.css already sets this
   on .tdm-block media, but native blocks may sit here too). */
.tdm-columns__col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Edit-mode editability (S94) ───────────────────────────────────────────
   VERIFIED root cause: the ONLY structural difference between this block and
   the working tdm_section is that each SubArea here sits inside a CSS GRID
   wrapper (.tdm-columns__grid > .tdm-columns__col). Concrete's in-context block
   toolbars + drag/sortable helpers fight `display:grid` + the isolated stacking
   contexts of nested .tdm-block children, so a SECOND block dropped into a
   column cannot surface its own edit menu — clicking it falls back to the
   parent tdm_columns, and Delete then removes the whole columns block. (The
   SubArea API + handle are IDENTICAL to tdm_section, which is why the handle is
   NOT the cause; data is intact, the failure is editor-only.)
   In edit mode ONLY: drop the grid to normal block flow and give each column a
   real hit-box, so every nested block gets its own toolbar (matching how
   tdm_section already behaves). Anonymous front-end pages have no
   `.ccm-edit-mode` class → the published grid layout is byte-identical. */
.ccm-edit-mode .tdm-columns__grid { display: block; }
.ccm-edit-mode .tdm-columns__col {
  min-height: 2.5rem;
  overflow: visible;
  margin-bottom: var(--tdm-space-4, 16px);
}
.ccm-edit-mode .tdm-columns__col:last-child { margin-bottom: 0; }

/* ROOT CAUSE FIX (S95-iter2) — nested blocks were placeable but NOT editable.
   Concrete's edit-mode JS (concrete/js/cms.js Area.scanBlocks) instantiates a
   block's JS controller by a HARDCODED data-block-type-handle switch:
       core_container   -> Concrete.ContainerBlock
       core_area_layout -> Concrete.Layout
       core_stack_display -> Concrete.StackDisplay
       (anything else)  -> Concrete.Block   <-- tdm_columns lands here
   The generic Concrete.Block.init APPENDS a full-coverage overlay
   <div class="ccm-block-cover"> (css/cms.css: position:absolute; height:100%;
   width:100%; top:0; left:0; NO pointer-events rule) as a DIRECT child of the
   block's .ccm-block-edit wrapper and NEVER removes it. The two core classes
   that host nested editable areas (ContainerBlock, Layout) explicitly run
   e.children('.ccm-block-cover').remove() right after init — precisely so the
   overlay does not swallow clicks meant for nested blocks. Concrete exposes NO
   registration hook to make a custom block type use ContainerBlock/Layout, so
   tdm_columns keeps its overlay, which sits on top of every column and
   intercepts the "Edit Block" launch click — the menu binds (it is found as a
   DOM descendant) but the click never reaches the nested block, so the dialog
   never opens.
   FIX: neutralise ONLY the tdm_columns block's OWN overlay (its direct-child
   cover) in edit mode, mirroring what ContainerBlock/Layout do via .remove().
   Scoped to > direct child + the block's own data-block-type-handle so nested
   blocks (tdm_text, tdm_title, ...) keep THEIR own covers and normal behaviour.
   Front end has no .ccm-edit-mode class -> published output byte-identical. */
.ccm-edit-mode .ccm-block-edit[data-block-type-handle="tdm_columns"] > .ccm-block-cover {
  pointer-events: none;
}


/* ======================================================================
   TDM Logo Wall — partner / client / certification logo band (trust / EEAT).
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-lw__* (NOT .reveal — that is the package-global scroll-reveal
   class whose base state is opacity:0; reusing it would hide content).
   Block-instance scope (--tdmx-* + reveal) is on the outer .tdm-i-<bID>.
   ====================================================================== */

.tdm-lw {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-8, 64px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-8, 64px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

/* Light-band ink remap (spec §1e) — heading/intro read --tdmx-*-color (the dead
   -color suffix the base hook can't reach), so re-tone locally to the dark-on-
   light ink, mirroring the global target. Emitted only with data-band="light"
   → byte-identical otherwise. */
.tdm-lw[data-band="light"] {
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
}

.tdm-lw__inner {
  text-align: var(--tdmx-align, center);
}

/* ---------- header ---------- */
.tdm-lw__header {
  max-width: 60ch;
  /* inline-block so the inner's text-align (--tdmx-align) positions the whole
     header block left / center / right — not just the text inside it. */
  display: inline-block;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-lw__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-fs-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-lw__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
  margin: 0;
}
.tdm-lw__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- shared logo cell ---------- */
/* Fixed-height slot reserves vertical space up-front → the logo's decode timing
   never shifts surrounding layout (anti-CLS). The <picture> is display:contents
   globally, so the box sizing lives on the <img>. */
.tdm-lw__cell {
  display: flex;
  align-items: center;
  /* Logos follow the same alignment control as the header text (Design →
     Alignment → --tdmx-align: left | center | right). Default center. */
  justify-content: var(--tdmx-align, center);
  min-height: 56px;
  padding: var(--tdm-space-3, 12px);
  text-decoration: none;
  color: inherit;
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  border: var(--tdmx-border, 0);
  box-shadow: var(--tdmx-shadow, none);
}
a.tdm-lw__cell { transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease; }
a.tdm-lw__cell:hover { transform: translateY(-1px); }

.tdm-lw__logo-img {
  display: block;
  block-size: var(--logo-h, 40px); /* operator size; default 40px — wall reads as one rhythm */
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}

/* grayscale-until-hover (B2B trust-bar idiom) — instance toggle drives it */
.tdm-lw[data-grayscale="1"] .tdm-lw__logo-img {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.tdm-lw[data-grayscale="1"] .tdm-lw__cell:hover .tdm-lw__logo-img {
  filter: grayscale(0);
  opacity: 1;
}

/* text fallbacks (no logo / unresolved image) */
.tdm-lw__placeholder,
.tdm-lw__name {
  font-family: var(--tdm-font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}
.tdm-lw__placeholder {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--tdm-space-4, 16px);
  border: 1px dashed color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 22%, transparent);
  border-radius: var(--tdm-radius-sm, 4px);
}

/* ====================== GRID mode ====================== */
/* Mobile (<680): default 2 columns; --cols-mobile overrides when the operator
   sets a per-breakpoint count (emit-only-on-change keeps the default identical). */
.tdm-lw__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
  gap: var(--tdmx-gap, var(--tdm-space-5, 24px));
  align-items: center;
}
@media (min-width: 680px) {
  /* Tablet: default 3 columns; --cols-tablet overrides when set. */
  .tdm-lw__grid { grid-template-columns: repeat(var(--cols-tablet, 3), 1fr); }
}
@media (min-width: 1024px) {
  /* Desktop: --cols is set inline (3..8) on the section. */
  .tdm-lw__grid { grid-template-columns: repeat(var(--cols, 5), 1fr); }
}

/* ====================== MARQUEE mode ====================== */
.tdm-lw__viewport {
  overflow: hidden;
  width: 100%;
}
.tdm-lw__track {
  display: flex;
  align-items: center;
  gap: var(--tdmx-gap, var(--tdm-space-7, 48px));
  width: max-content;
  /* Split longhand (not the `animation` shorthand): a missing <duration> in the
     shorthand resolves to 0s and the marquee never moves.
     Duration is operator-driven: --marquee-duration is emitted only for a
     non-default speed; the 36s fallback === today's hard-coded value. */
  animation-name: tdmLwScroll;
  animation-duration: var(--marquee-duration, 36s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  white-space: nowrap;
}
/* Right-scrolling variant: the duplicated track starts shifted -50% and moves
   to 0, so the band reads as scrolling rightward (seamless either way). The
   data-attr is emitted only when the operator picks "right" (left = default). */
.tdm-lw[data-marquee-dir="right"] .tdm-lw__track {
  animation-name: tdmLwScrollRight;
}
/* Pause-on-hover is the default; a logo wall with pause OFF carries
   data-pause-hover="0" which suppresses the pause rule. */
.tdm-lw:not([data-pause-hover="0"]) .tdm-lw__viewport:hover .tdm-lw__track {
  animation-play-state: paused;
}
.tdm-lw--marquee .tdm-lw__cell {
  flex: 0 0 auto;
  inline-size: 180px;          /* fixed slot → seamless translateX(-50%) math */
  min-height: 56px;
}
@keyframes tdmLwScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes tdmLwScrollRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ---- Reduced motion: disable the marquee, wrap statically ---- */
@media (prefers-reduced-motion: reduce) {
  .tdm-lw__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  /* WCAG 2.3.3: also suppress the hover filter/opacity + cell lift transitions */
  .tdm-lw[data-grayscale="1"] .tdm-lw__logo-img { transition: none; }
  a.tdm-lw__cell { transition: none; transform: none; }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .tdm-lw__track { animation-play-state: paused; }

/* images never overflow their box (responsive manual) */
.tdm-lw img { max-width: 100%; height: auto; display: block; }


/* ======================================================================
   TDM Title — Section Title / Header.
   Tokens come from the package tokens.css (--tdm-*). Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps the
   fallback (emit-only-on-change). Namespaced .tdm-title__* classes only — do
   NOT reuse the package-global .reveal class for any hook.

   The .tdm-block wrapper (base.css) already drives outer padding/margin,
   max-width, alignment, background, heading colour + heading font. This file
   adds the eyebrow style, the title clamp() sizing per level, the 4 segment
   colour classes, the body type scale, and the eyebrow→title→body rhythm
   (driven by the Design `gap` var).
   ====================================================================== */

.tdm-title__inner {
  display: flex;
  flex-direction: column;
  /* Vertical rhythm between eyebrow / title / body — Design `gap` drives it,
     fallback to a tight rhythm so a default block reads as one tidy header. */
  gap: var(--tdmx-gap, var(--tdm-space-4, 16px));
}

/* ---------- Eyebrow ---------- */
.tdm-title__eyebrow {
  margin: 0;
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: var(--tdm-text-eyebrow, 11px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Eyebrow follows the accent colour by default (Design `accent_color` var). */
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

/* ---------- Title ---------- */
.tdm-title__heading {
  margin: 0;
  /* Heading colour + font come from the .tdm-block heading rule (base.css):
     color:var(--tdmx-heading); font-family:var(--tdmx-font-heading).
     Per-segment colours below override the fill where set. */
  font-weight: var(--tdm-weight-headline, 600);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Fluid size per semantic level — clamp() only, never a fixed px in a media
   query (ARECH responsive manual). */
.tdm-title.tdm-title h1.tdm-title__heading { font-size: var(--tdm-text-h1, clamp(48px, 6vw, 88px)); }
.tdm-title.tdm-title h2.tdm-title__heading { font-size: var(--tdm-text-h2, clamp(42px, 5vw, 72px)); }
.tdm-title.tdm-title h3.tdm-title__heading { font-size: var(--tdm-text-h3, clamp(28px, 3vw, 36px)); }

/* ---------- Segment colour classes ---------- */
.tdm-title__seg {
  /* Each segment is an inline run; the join space sits between spans. */
}
/* ink = the block's heading colour (Design `heading_color`). Inherits, so this
   is mostly a no-op marker, but stated explicitly for clarity + overrideability. */
.tdm-title__seg--ink {
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
}
/* accent = orange (Design `accent_color`). */
.tdm-title__seg--accent {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
/* muted = dim secondary ink. */
.tdm-title__seg--muted {
  color: var(--tdm-color-ink-3, #6B6B75);
}
/* outline = transparent fill + stroked text in the heading colour, like the
   hero's stroked word. Fallback: solid heading colour where text-stroke is
   unsupported. */
.tdm-title__seg--outline {
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0)); /* fallback fill */
}
@supports ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .tdm-title__seg--outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
    text-stroke: 1px var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  }
}

/* ---------- Body ---------- */
.tdm-title__body {
  margin: 0;
  max-width: 68ch;
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-body, 16px);
  line-height: 1.6;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}

/* When the block is centred (Design `align: center`), centre the body's own
   max-width box too so it tracks the header. */
.tdm-block[style*="--tdmx-align: center"] .tdm-title__body,
.tdm-block[style*="--tdmx-align:center"] .tdm-title__body {
  margin-inline: auto;
}


/* ======================================================================
   TDM Feature Cards — Elementor-grade feature/value card grid.

   7 layouts driven by [data-layout]:
     icon-top (default) · icon-left · image-top · image-left · image-bg ·
     numbered · list
   Per-card media: icon chip / responsive <picture> / typeset number / none.
   Named hover effects via .tdm-fc--hover-* : none · lift · grow ·
   border-reveal · media-zoom. Responsive columns per breakpoint from
   [data-cols-m|t|d] (min-width-only ladder, per responsive_manual_en_0.1).

   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change). Fallbacks deliberately mirror the
   profile's neutral defaults (pad space-9, gap space-5, align left) so a fresh
   block renders identically whether or not the Design layer emits.

   BACK-COMPAT: the DEFAULT card (icon-top, surface=bordered, no badge, button
   link, h3 title, 3/2/1 cols) is byte-identical to the v1 block — the base
   rules below reproduce the old icon-top look exactly; every new affordance is
   additive and gated behind a [data-*] hook or a non-default media type.

   Light/dark: the band inherits the theme's dark surface tokens by default
   (this site is dark-first). A `[data-band="dark"]` consumer hook is wired so a
   future light-band remap can override the local --fc-* vars in ONE place
   without touching the rules. AA contrast holds in both: ink on surface(-2),
   accent chip on a 14%-tint, badge text on accent.

   Namespaced .tdm-fc__* (NOT .reveal — that is the package-global scroll-reveal
   class whose base state is opacity:0; reusing it would hide content).
   Block-instance scope (--tdmx-* + reveal) is on the outer .tdm-i-<bID>.
   ====================================================================== */

.tdm-fc {
  /* Local design vars — single place to remap for a light band (data-band). */
  --fc-ink:        var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  --fc-ink-2:      var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  --fc-accent:      var(--tdmx-accent, var(--tdm-color-accent, #E8651A));            /* FILL: chip/badge bg, borders, outline — never flips */
  --fc-accent-text: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));       /* TEXT: eyebrow, number, links, outline/soft badge label — flips to --orange-link on a light band */
  --fc-on-accent:  var(--tdm-color-on-accent, #FFFFFF);
  --fc-surface-2:  var(--tdm-color-surface-2, #141416);
  --fc-hairline:   color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 10%, transparent);

  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

/* Light-band remap — S106 reconciliation (spec §1e / §5b).
   The global base.css .tdm-block[data-band="light"] hook now owns the INK:
   --fc-ink / --fc-ink-2 chain off --tdmx-heading / --tdmx-text, which the global
   flips → those two lines were dropped (redundant). KEEP --fc-surface-2 +
   --fc-hairline: they tone the filled-card SURFACE + hairline, which the global
   ink hook cannot reach — deleting them would reintroduce the S106 card look. */
.tdm-fc[data-band="light"] {
  --fc-surface-2: color-mix(in srgb, #000 4%, #FFFFFF);
  --fc-hairline:  color-mix(in srgb, var(--tdm-color-surface, #0D0D0F) 12%, transparent);
}

.tdm-fc__inner {
  text-align: var(--tdmx-align, left);
  max-width: var(--tdmx-max-width, none);
  margin-inline: auto;
}

/* ---------- header ---------- */
.tdm-fc__header {
  max-width: 60ch;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-fc__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-fs-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-accent-text);
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-fc__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--fc-ink);
  margin: 0;
}
.tdm-fc__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--fc-ink-2);
}

/* ---------- grid + responsive columns ---------- */
.tdm-fc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tdmx-gap, var(--tdm-space-5, 24px));
}
/* Mobile (<680): 1 or 2 columns. */
.tdm-fc[data-cols-m="2"] .tdm-fc__grid { grid-template-columns: repeat(2, 1fr); }
/* Tablet (>=680): 1 / 2 / 3 columns. */
@media (min-width: 680px) {
  .tdm-fc[data-cols-t="1"] .tdm-fc__grid { grid-template-columns: 1fr; }
  .tdm-fc[data-cols-t="2"] .tdm-fc__grid { grid-template-columns: repeat(2, 1fr); }
  .tdm-fc[data-cols-t="3"] .tdm-fc__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Desktop (>=1024): 1 / 2 / 3 / 4 columns. */
@media (min-width: 1024px) {
  .tdm-fc[data-cols-d="1"] .tdm-fc__grid { grid-template-columns: 1fr; }
  .tdm-fc[data-cols-d="2"] .tdm-fc__grid { grid-template-columns: repeat(2, 1fr); }
  .tdm-fc[data-cols-d="3"] .tdm-fc__grid { grid-template-columns: repeat(3, 1fr); }
  .tdm-fc[data-cols-d="4"] .tdm-fc__grid { grid-template-columns: repeat(4, 1fr); }
}

/* The list layout collapses to a single column ladder regardless of cols. */
.tdm-fc[data-layout="list"] .tdm-fc__grid { grid-template-columns: 1fr; gap: 0; }

/* ---------- bento: span-wide card ----------
   A card flagged span_wide spans 2 grid columns. Min-width-only ladder
   (responsive_manual): the base grid below MD is single-column on this site's
   mobile defaults, so a wide card naturally fills the row (span 1 = full width).
   The span:2 is applied only inside the multi-column min-width queries — and only
   when the active grid actually has >=2 columns — so a wide card never tries to
   span past a 1-column grid. The list layout is always single-column → ignore. */
@media (min-width: 680px) {
  .tdm-fc[data-cols-t="2"]:not([data-layout="list"]) .tdm-fc__card--wide,
  .tdm-fc[data-cols-t="3"]:not([data-layout="list"]) .tdm-fc__card--wide {
    grid-column: span 2;
  }
}
@media (min-width: 1024px) {
  .tdm-fc[data-cols-d="2"]:not([data-layout="list"]) .tdm-fc__card--wide,
  .tdm-fc[data-cols-d="3"]:not([data-layout="list"]) .tdm-fc__card--wide,
  .tdm-fc[data-cols-d="4"]:not([data-layout="list"]) .tdm-fc__card--wide {
    grid-column: span 2;
  }
}
/* Mobile (<680) with an explicit 2-col grid: a wide card spans both columns. */
.tdm-fc[data-cols-m="2"]:not([data-layout="list"]) .tdm-fc__card--wide { grid-column: span 2; }

/* ---------- card base ---------- */
.tdm-fc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tdm-space-3, 12px);
  margin: 0;
  text-align: left;
  color: inherit;
  text-decoration: none;
}
.tdm-fc__content {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-3, 12px);
  width: 100%;
  /* grow to fill the card so a CTA with margin-top:auto sticks to the bottom
     (preserves the v1 behaviour where the link sat at the card foot). */
  flex: 1 1 auto;
}

/* Vertical alignment of card content (only meaningful when cards stretch). */
.tdm-fc[data-valign="middle"] .tdm-fc__card { justify-content: center; }
.tdm-fc[data-valign="bottom"] .tdm-fc__card { justify-content: flex-end; }

/* ---------- surface (frame skin) — old card_style, byte-identical defaults ---------- */
.tdm-fc[data-surface="bordered"] .tdm-fc__card {
  padding: var(--tdm-space-6, 32px);
  border: 1px solid var(--fc-hairline);
  border-radius: var(--tdm-radius-md, 6px);
}
.tdm-fc[data-surface="filled"] .tdm-fc__card {
  padding: var(--tdm-space-6, 32px);
  background: var(--fc-surface-2);
  border-radius: var(--tdm-radius-md, 6px);
}
.tdm-fc[data-surface="bare"] .tdm-fc__card {
  padding: 0;
}
/* list layout: surface is always a hairline-separated row regardless of skin. */
.tdm-fc[data-layout="list"] .tdm-fc__card {
  flex-direction: row;
  align-items: center;
  gap: var(--tdm-space-4, 16px);
  padding: var(--tdm-space-4, 16px) 0;
  border: 0;
  border-bottom: 1px solid var(--fc-hairline);
  border-radius: 0;
  background: none;
}
.tdm-fc[data-layout="list"] .tdm-fc__card:first-child { border-top: 1px solid var(--fc-hairline); }

/* ---------- media: chip / image / number ---------- */
.tdm-fc__media-wrap {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

/* icon chip */
.tdm-fc__chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--tdm-radius-md, 6px);
  background: color-mix(in srgb, var(--fc-accent) 14%, transparent);
  color: var(--fc-accent-text);
}
.tdm-fc__chip svg { width: 24px; height: 24px; display: block; }

/* media size cap — affects the chip + number + image frame consistently. */
.tdm-fc[data-media-size="small"] .tdm-fc__chip { width: 40px; height: 40px; }
.tdm-fc[data-media-size="small"] .tdm-fc__chip svg { width: 20px; height: 20px; }
.tdm-fc[data-media-size="large"] .tdm-fc__chip { width: 64px; height: 64px; }
.tdm-fc[data-media-size="large"] .tdm-fc__chip svg { width: 32px; height: 32px; }

/* media shape — chip + image frame corner treatment. */
.tdm-fc[data-media-shape="circle"] .tdm-fc__chip { border-radius: 50%; }
.tdm-fc[data-media-shape="rounded"] .tdm-fc__chip { border-radius: var(--tdm-radius-lg, 12px); }

/* typeset number */
.tdm-fc__num {
  display: block;
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1;
  font-weight: 700;
  color: var(--fc-accent-text);
}
.tdm-fc[data-media-size="small"] .tdm-fc__num { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.tdm-fc[data-media-size="large"] .tdm-fc__num { font-size: clamp(2.75rem, 2.1rem + 2.6vw, 4rem); }

/* per-card image frame */
.tdm-fc__media {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--tdm-radius-md, 6px);
}
.tdm-fc[data-media-shape="circle"] .tdm-fc__media { border-radius: 50%; aspect-ratio: 1 / 1; }
.tdm-fc[data-media-shape="rounded"] .tdm-fc__media { border-radius: var(--tdm-radius-lg, 12px); }
.tdm-fc__media img,
.tdm-fc__media-pic img,
.tdm-fc__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tdm-fc__media--fit-contain img,
.tdm-fc__media--fit-contain .tdm-fc__media-img { object-fit: contain; }

/* ---------- LAYOUT: icon-top (default, byte-identical to v1) ---------- */
/* (base .tdm-fc__card is column + flex-start; nothing extra needed) */

/* ---------- LAYOUT: icon-left ---------- */
.tdm-fc[data-layout="icon-left"] .tdm-fc__card {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--tdm-space-4, 16px);
}

/* media position override (icon-top / icon-left layouts only). */
.tdm-fc[data-media-pos="left"][data-layout="icon-top"] .tdm-fc__card { flex-direction: row; align-items: flex-start; gap: var(--tdm-space-4, 16px); }
.tdm-fc[data-media-pos="right"][data-layout="icon-top"] .tdm-fc__card { flex-direction: row-reverse; align-items: flex-start; gap: var(--tdm-space-4, 16px); }
.tdm-fc[data-media-pos="right"][data-layout="icon-left"] .tdm-fc__card { flex-direction: row-reverse; }

/* ---------- LAYOUT: image-top ---------- */
.tdm-fc[data-layout="image-top"] .tdm-fc__card { gap: var(--tdm-space-4, 16px); }
.tdm-fc[data-layout="image-top"] .tdm-fc__media-wrap { width: 100%; }
.tdm-fc[data-layout="image-top"] .tdm-fc__media { aspect-ratio: 16 / 10; }

/* ---------- LAYOUT: image-left ---------- */
/* Mobile-first (responsive_manual: min-width only). Base (XS, <480) stacks the
   image above the text; from SM (>=480) it becomes the magazine row with the
   image in a ~38% left column. */
.tdm-fc[data-layout="image-left"] .tdm-fc__card {
  flex-direction: column;
  gap: var(--tdm-space-4, 16px);
}
.tdm-fc[data-layout="image-left"] .tdm-fc__media-wrap { flex-basis: auto; max-width: 100%; width: 100%; }
.tdm-fc[data-layout="image-left"] .tdm-fc__media { aspect-ratio: 4 / 3; }
@media (min-width: 480px) {
  .tdm-fc[data-layout="image-left"] .tdm-fc__card { flex-direction: row; align-items: stretch; }
  .tdm-fc[data-layout="image-left"] .tdm-fc__media-wrap { flex: 0 0 38%; max-width: 38%; width: auto; }
  .tdm-fc[data-layout="image-left"] .tdm-fc__media { height: 100%; }
}

/* ---------- LAYOUT: image-bg + overlay ---------- */
.tdm-fc[data-layout="image-bg"] .tdm-fc__card {
  padding: 0;
  border: 0;
  background: var(--fc-surface-2);
  border-radius: var(--tdm-radius-md, 6px);
  overflow: hidden;
  min-height: 280px;
  justify-content: flex-end;
}
.tdm-fc[data-layout="image-bg"] .tdm-fc__media-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tdm-fc[data-layout="image-bg"] .tdm-fc__media { width: 100%; height: 100%; border-radius: 0; }
.tdm-fc[data-layout="image-bg"] .tdm-fc__media img,
.tdm-fc[data-layout="image-bg"] .tdm-fc__media-img { height: 100%; object-fit: cover; }
.tdm-fc[data-layout="image-bg"] .tdm-fc__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,15,0.05) 0%, rgba(13,13,15,0.55) 55%, rgba(13,13,15,0.86) 100%);
}
.tdm-fc[data-layout="image-bg"] .tdm-fc__content {
  position: relative;
  z-index: 2;
  padding: var(--tdm-space-6, 32px);
}
.tdm-fc[data-layout="image-bg"] .tdm-fc__badge { z-index: 2; }
/* on the dark scrim the title/body are always light for contrast. */
.tdm-fc[data-layout="image-bg"] .tdm-fc__title { color: var(--tdm-color-ink, #F5F4F0); }
.tdm-fc[data-layout="image-bg"] .tdm-fc__body { color: color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 82%, transparent); }

/* ---------- LAYOUT: numbered ---------- */
.tdm-fc[data-layout="numbered"] .tdm-fc__card { gap: var(--tdm-space-3, 12px); }

/* ---------- LAYOUT: list ---------- */
.tdm-fc[data-layout="list"] .tdm-fc__media-wrap { flex: 0 0 auto; }
.tdm-fc[data-layout="list"] .tdm-fc__content { gap: var(--tdm-space-1, 4px); }
.tdm-fc[data-layout="list"] .tdm-fc__num { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }

/* ---------- badge ---------- */
.tdm-fc__badge {
  position: absolute;
  top: var(--tdm-space-4, 16px);
  right: var(--tdm-space-4, 16px);
  z-index: 3;
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--tdm-radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.tdm-fc[data-badge="solid"] .tdm-fc__badge { background: var(--fc-accent); color: var(--fc-on-accent); }
.tdm-fc[data-badge="outline"] .tdm-fc__badge { background: transparent; color: var(--fc-accent-text); border: 1px solid var(--fc-accent); }
.tdm-fc[data-badge="soft"] .tdm-fc__badge { background: color-mix(in srgb, var(--fc-accent) 16%, transparent); color: var(--fc-accent-text); }
/* bare/list layouts have no card padding to anchor an absolute badge → inline it. */
.tdm-fc[data-surface="bare"]:not([data-layout="image-bg"]) .tdm-fc__badge,
.tdm-fc[data-layout="list"] .tdm-fc__badge {
  position: static;
  align-self: flex-start;
}

/* ---------- text ---------- */
.tdm-fc__title {
  margin: 0;
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.25;
  color: var(--fc-ink);
}
.tdm-fc__title-link { color: inherit; text-decoration: none; }
.tdm-fc__title-link:hover { color: var(--fc-accent-text); }
.tdm-fc__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fc-ink-2);
}

/* ---------- link / CTA ---------- */
.tdm-fc__link {
  display: inline-flex;
  align-items: center;
  gap: var(--tdm-space-2, 8px);
  margin-top: auto;
  min-height: 44px;        /* 44px touch target (manual §7) */
  font-weight: 600;
  text-decoration: none;
  color: var(--fc-accent-text);
}
.tdm-fc__link:hover { text-decoration: underline; }
.tdm-fc__link--static { cursor: inherit; }
.tdm-fc__link-arrow { width: 18px; height: 18px; transition: transform 0.18s ease; }
.tdm-fc__link:hover .tdm-fc__link-arrow { transform: translateX(3px); }

/* whole-card link: the entire card is the anchor; arrow nudges on card hover. */
a.tdm-fc__card { cursor: pointer; }
a.tdm-fc__card:hover .tdm-fc__link-arrow { transform: translateX(3px); }
a.tdm-fc__card:hover .tdm-fc__title { color: var(--fc-accent-text); }

/* ---------- block-level footer link ("View all →") ---------- */
.tdm-fc__footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tdm-space-2, 8px);
  margin-top: var(--tdm-space-6, 32px);
  min-height: 44px;        /* 44px touch target (manual §7) */
  font-weight: 600;
  text-decoration: none;
  color: var(--fc-accent-text);
}
.tdm-fc__footer-link:hover { text-decoration: underline; }
.tdm-fc__footer-link:hover .tdm-fc__link-arrow { transform: translateX(3px); }

/* ---------- focus states (keyboard) ---------- */
a.tdm-fc__card:focus-visible,
.tdm-fc__title-link:focus-visible,
.tdm-fc__link:focus-visible,
.tdm-fc__footer-link:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 3px;
  border-radius: var(--tdm-radius-sm, 3px);
}

/* ---------- hover effects (block-level named) ---------- */
.tdm-fc--hover-lift .tdm-fc__card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tdm-fc--hover-lift .tdm-fc__card:hover { transform: translateY(-4px); box-shadow: var(--tdm-shadow-md, 0 8px 24px rgba(0,0,0,0.28)); }

.tdm-fc--hover-grow .tdm-fc__card { transition: transform 0.2s ease; }
.tdm-fc--hover-grow .tdm-fc__card:hover { transform: scale(1.02); }

.tdm-fc--hover-border-reveal .tdm-fc__card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tdm-fc--hover-border-reveal .tdm-fc__card:hover {
  border-color: var(--fc-accent-text);
  box-shadow: inset 0 0 0 1px var(--fc-accent);
}

.tdm-fc--hover-media-zoom .tdm-fc__media img,
.tdm-fc--hover-media-zoom .tdm-fc__media-img { transition: transform 0.3s ease; }
.tdm-fc--hover-media-zoom .tdm-fc__card:hover .tdm-fc__media img,
.tdm-fc--hover-media-zoom .tdm-fc__card:hover .tdm-fc__media-img { transform: scale(1.06); }
/* media-zoom on a non-image (icon) card falls back to a subtle lift. */
.tdm-fc--hover-media-zoom .tdm-fc__card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tdm-fc--hover-media-zoom .tdm-fc__card:hover { transform: translateY(-3px); box-shadow: var(--tdm-shadow-md, 0 8px 24px rgba(0,0,0,0.28)); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tdm-fc__link-arrow,
  .tdm-fc__card,
  .tdm-fc__media img,
  .tdm-fc__media-img { transition: none !important; }
  .tdm-fc--hover-lift .tdm-fc__card:hover,
  .tdm-fc--hover-grow .tdm-fc__card:hover,
  .tdm-fc--hover-media-zoom .tdm-fc__card:hover { transform: none; }
  .tdm-fc--hover-media-zoom .tdm-fc__card:hover .tdm-fc__media img,
  .tdm-fc--hover-media-zoom .tdm-fc__card:hover .tdm-fc__media-img { transform: none; }
  .tdm-fc__link:hover .tdm-fc__link-arrow,
  a.tdm-fc__card:hover .tdm-fc__link-arrow,
  .tdm-fc__footer-link:hover .tdm-fc__link-arrow { transform: none; }
}

/* images never overflow their box (responsive manual) */
.tdm-fc img { max-width: 100%; height: auto; display: block; }


/* ======================================================================
   TDM Process Steps — numbered "how it works" / process band.
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-steps__* (NOT .reveal — that is the package-global
   scroll-reveal class whose base state is opacity:0; reusing it would hide
   content). Block-instance scope (--tdmx-* + reveal) is on the outer
   .tdm-i-<bID>. The connector line width is set inline via --tdm-steps-conn-w
   (block-level connector_width control), with a 2px fallback = today.
   ====================================================================== */

.tdm-steps {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

/* Light-band ink remap (spec §1e) — heading/title/intro/body read --tdmx-*-color
   (the dead -color suffix the base hook can't reach), so re-tone locally to the
   dark-on-light ink, mirroring the global target. Emitted only with
   data-band="light" → byte-identical otherwise. */
.tdm-steps[data-band="light"] {
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
  /* Accent-as-TEXT (S108 v1.2): on a cream band the bare marker number, eyebrow,
     icon, and links must use the legible dark-orange link accent (#B0470B, AA on
     all creams) instead of the FILL orange (#E8651A, fails AA on cream). The FILL
     var --tdmx-accent is NOT touched, so chip backgrounds + rails stay orange. */
  --tdmx-accent-text:   var(--tdm-color-accent-text-light);
}

.tdm-steps__inner {
  text-align: var(--tdmx-align, left);
}

/* ---------- header ---------- */
.tdm-steps__header {
  max-width: 60ch;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-steps__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-fs-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-steps__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
  margin: 0;
}
/* heading_scale=large → the classic large editorial H2. Token --tdm-text-h2 =
   clamp(42px,5vw,72px) = the OLD arech_numbered_steps .arech-ns__h2 value exactly
   (line-height 1.1 matches). 'default' needs no rule (the declaration above holds). */
.tdm-steps[data-heading-scale="large"] .tdm-steps__heading {
  font-size: var(--tdm-text-h2, clamp(42px, 5vw, 72px));
  line-height: var(--tdm-leading-tight, 1.1);
}
.tdm-steps__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- list ---------- */
.tdm-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tdmx-gap, var(--tdm-space-6, 32px));
}

/* ---------- step (vertical baseline = mobile-first for ALL layouts) ---------- */
.tdm-steps__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tdm-space-4, 16px);
  align-items: start;
}

/* The connecting rail (vertical): a line running through the number chips.
   Drawn from the marker down to the next step; suppressed on the last step.
   Line texture = connector_style data-attr; width = inline --tdm-steps-conn-w. */
.tdm-steps__step::before {
  content: "";
  position: absolute;
  left: calc(var(--tdm-steps-chip, 44px) / 2);
  top: var(--tdm-steps-chip, 44px);
  bottom: calc(var(--tdmx-gap, var(--tdm-space-6, 32px)) * -1);
  width: 0;
  border-left: var(--tdm-steps-conn-w, 2px) solid
    color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 35%, transparent);
  transform: translateX(calc(var(--tdm-steps-conn-w, 2px) / -2));
  pointer-events: none;
}
.tdm-steps__step:last-child::before { display: none; }

/* connector line texture (vertical = border-left-style; horizontal = border-top) */
.tdm-steps[data-connector="dashed"] .tdm-steps__step::before { border-left-style: dashed; }
.tdm-steps[data-connector="dotted"] .tdm-steps__step::before { border-left-style: dotted; }

/* connector_style=none → no rail (the classic arech_numbered_steps had no
   connector). Covers all three layouts: vertical/horizontal step ::before and the
   alternating centre rail on the marker ::before. Mirrors the :last-child suppression. */
.tdm-steps[data-connector="none"] .tdm-steps__step::before,
.tdm-steps--horizontal[data-connector="none"] .tdm-steps__step::before,
.tdm-steps--alternating[data-connector="none"] .tdm-steps__marker::before {
  display: none;
}

/* ---------- marker (number chip + optional media) ---------- */
.tdm-steps__marker {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tdm-space-2, 8px);
}
.tdm-steps__chip {
  flex: 0 0 auto;
  position: relative;
  width: var(--tdm-steps-chip, 44px);
  height: var(--tdm-steps-chip, 44px);
  border-radius: var(--tdmx-radius, 50%);
  display: grid;
  place-items: center;
  background: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  color: var(--tdm-color-on-accent, #0B0B0C);
  border: var(--tdmx-border, 0);
  box-shadow: var(--tdmx-shadow, none);
  overflow: hidden;
}
.tdm-steps__num {
  font-family: var(--tdm-font-headline, sans-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
}
.tdm-steps__num--custom {
  font-size: clamp(0.6875rem, 0.55rem + 0.4vw, 0.875rem);
  letter-spacing: -0.01em;
  padding: 0 4px;
  text-align: center;
}

/* ---------- marker_shape=bare (classic editorial number, no chip) ----------
   Reproduces arech_numbered_steps/.arech-ns__num: a big BARE accent number
   (01/02), no circle, no fill, no border. The number colour reads the accent-as-
   TEXT var so it flips per band (dark #E8651A 5.74:1 / cream #B0470B AA) — the
   FILL chip backgrounds/rails are unaffected. Default (chip) keeps the rules above. */
.tdm-steps--shape-bare .tdm-steps__chip {
  width: auto;
  height: auto;
  min-width: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  place-items: start;
}
.tdm-steps--shape-bare .tdm-steps__num {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tdmx-accent-text, var(--tdm-color-accent-text, var(--tdm-color-accent, #E8651A)));
}
/* Classic per-step hairline (bare mode ONLY) — reproduces the OLD
   arech_numbered_steps look: a soft rule above every step + a closing rule
   under the last one. currentColor 12% tracks the band ink (dark or cream)
   exactly like OLD, no hardcoded colour. Scoped to --shape-bare so the default
   chip mode stays byte-identical (no hairline). In the standard classic
   migration the field-set ships connector_style=none, so this hairline does not
   combine with the rail; if an operator deliberately picks bare + a connector,
   both show by their explicit choice. */
.tdm-steps--shape-bare .tdm-steps__step {
  padding-top: var(--tdm-space-4, 16px);
  border-top: 1px solid color-mix(in oklch, currentColor 12%, transparent);
}
.tdm-steps--shape-bare .tdm-steps__step:last-child {
  border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent);
}
/* when both a number AND an icon show, the icon sits just below the chip
   (today's look). .tdm-steps__icon is a span wrapper; its <svg> is the glyph. */
.tdm-steps__icon {
  display: inline-flex;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-steps__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* media-only (no number): the icon goes INSIDE the chip, inheriting on-accent ink */
.tdm-steps--marker-icon .tdm-steps__chip .tdm-steps__icon {
  color: var(--tdm-color-on-accent, #0B0B0C);
}

/* per-step image marker: framed in the chip, square/cover */
.tdm-steps__media {
  position: absolute;
  inset: 0;
  display: block;
}
.tdm-steps__media-pic,
.tdm-steps__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- copy ---------- */
.tdm-steps__copy { padding-top: 2px; }
.tdm-steps__title {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.2;
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-steps__title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tdm-steps__title-link:hover { color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)); }
.tdm-steps__title-link:focus-visible {
  outline: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: 2px;
  border-radius: 2px;
}
.tdm-steps__body {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.55;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
  margin: 0;
}

/* ---------- per-step link / CTA ---------- */
.tdm-steps__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--tdm-space-3, 12px);
  min-height: 44px;
  font-family: var(--tdm-font-headline, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  transition: gap 0.15s ease, color 0.15s ease;
}
.tdm-steps__link:hover { gap: 10px; }
.tdm-steps__link:focus-visible {
  outline: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: 2px;
  border-radius: 2px;
}
.tdm-steps__link-arrow { width: 16px; height: 16px; }

/* ======================================================================
   HORIZONTAL layout — at >=768px the steps run in a row with the rail
   becoming a TOP connector between markers. Below 768px it falls back to
   the vertical rail above (identical to .tdm-steps--vertical on mobile).
   ====================================================================== */
@media (min-width: 768px) {
  .tdm-steps--horizontal .tdm-steps__list {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
  }
  .tdm-steps--horizontal .tdm-steps__step {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--tdm-space-4, 16px);
    text-align: center;
  }
  .tdm-steps--horizontal .tdm-steps__marker {
    flex-direction: row;
    justify-content: center;
  }
  /* Top connector: a horizontal line from this marker to the next. */
  .tdm-steps--horizontal .tdm-steps__step::before {
    left: calc(50% + (var(--tdm-steps-chip, 44px) / 2));
    right: calc(-1 * var(--tdmx-gap, var(--tdm-space-6, 32px)) - 50%);
    top: calc(var(--tdm-steps-chip, 44px) / 2);
    bottom: auto;
    width: auto;
    height: 0;
    border-left: 0;
    border-top: var(--tdm-steps-conn-w, 2px) solid
      color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 35%, transparent);
    transform: translateY(calc(var(--tdm-steps-conn-w, 2px) / -2));
  }
  .tdm-steps--horizontal[data-connector="dashed"] .tdm-steps__step::before { border-top-style: dashed; }
  .tdm-steps--horizontal[data-connector="dotted"] .tdm-steps__step::before { border-top-style: dotted; }
  .tdm-steps--horizontal .tdm-steps__step:last-child::before { display: none; }
  .tdm-steps--horizontal .tdm-steps__copy { padding-top: 0; }
}

/* ======================================================================
   ALTERNATING layout — a centre rail with steps zig-zagging left/right at
   >=768px. Below 768px it falls back to the vertical rail (identical to
   .tdm-steps--vertical on mobile). PowerPack Timeline-style.
   ====================================================================== */
@media (min-width: 768px) {
  .tdm-steps--alternating .tdm-steps__list {
    /* a centre marker column flanked by two copy columns */
    grid-template-columns: 1fr var(--tdm-steps-chip, 44px) 1fr;
    column-gap: var(--tdm-space-5, 24px);
  }
  .tdm-steps--alternating .tdm-steps__step {
    display: contents; /* let each step's parts place onto the 3-col rail grid */
  }
  /* the marker always sits in the centre column */
  .tdm-steps--alternating .tdm-steps__marker {
    grid-column: 2;
    flex-direction: column;
  }
  /* odd steps: copy on the LEFT (col 1), right-aligned toward the rail */
  .tdm-steps--alternating .tdm-steps__step:nth-child(odd) .tdm-steps__copy {
    grid-column: 1;
    text-align: right;
  }
  /* even steps: copy on the RIGHT (col 3), left-aligned toward the rail */
  .tdm-steps--alternating .tdm-steps__step:nth-child(even) .tdm-steps__copy {
    grid-column: 3;
    text-align: left;
  }
  /* odd-step CTA stays inline-end so the arrow points toward the rail copy edge */
  .tdm-steps--alternating .tdm-steps__step:nth-child(odd) .tdm-steps__link {
    flex-direction: row-reverse;
  }
  /* Because display:contents removes the step box, its ::before can't position
     against a box — suppress it and draw the centre rail on the marker instead. */
  .tdm-steps--alternating .tdm-steps__step::before { display: none; }
  .tdm-steps--alternating .tdm-steps__marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--tdm-steps-chip, 44px);
    height: calc(var(--tdmx-gap, var(--tdm-space-6, 32px)) + 100%);
    width: 0;
    border-left: var(--tdm-steps-conn-w, 2px) solid
      color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 35%, transparent);
    transform: translateX(calc(var(--tdm-steps-conn-w, 2px) / -2));
    pointer-events: none;
  }
  .tdm-steps--alternating[data-connector="dashed"] .tdm-steps__marker::before { border-left-style: dashed; }
  .tdm-steps--alternating[data-connector="dotted"] .tdm-steps__marker::before { border-left-style: dotted; }
  .tdm-steps--alternating .tdm-steps__step:last-child .tdm-steps__marker::before { display: none; }
}

/* reduced motion: the per-step link gap/colour transitions + title-link colour
   are tiny affordances; disable them when the user asks. The optional reveal is
   gated by the shared observer + prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .tdm-steps__link,
  .tdm-steps__title-link { transition: none; }
}

/* images never overflow their box (responsive manual) */
.tdm-steps img { max-width: 100%; height: auto; display: block; }


/* ======================================================================
   TDM Text — formatted paragraph block.
   Tokens come from the package tokens.css (--tdm-*). Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps the
   fallback (emit-only-on-change). Namespaced .tdm-text__* / .tdm-text classes
   only — do NOT reuse the package-global .reveal class for any hook.

   The .tdm-block wrapper (base.css) already drives outer padding/margin,
   max-width, alignment, background, heading colour + heading font. This file
   styles the rich-text body: real paragraph rhythm (one <p> per Enter), lists,
   inline links + bold/italic, and on-brand sub-headings (h2..h4) inside the
   body. Heading colour is set EXPLICITLY here (token) to defeat the known
   global main.css heading-colour trap that defeats container inheritance.
   ====================================================================== */

.tdm-text__body {
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-body, 16px);
  line-height: 1.6;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- Paragraph rhythm (the whole point of this block) ---------- */
/* Each Enter in the editor emits a real <p>; give a clear inter-paragraph
   gap, driven by the Design `gap` var, and drop the trailing margin so the
   block's own padding controls the bottom edge. */
.tdm-text__body p {
  margin-block: 0 0 var(--tdmx-gap, var(--tdm-space-5, 24px));
}
.tdm-text__body > :last-child {
  margin-bottom: 0;
}

/* ---------- Sub-headings inside the rich text ---------- */
/* Set colour explicitly (token, not "inherit-by-accident") to defeat the
   global main.css h1..h6 colour rule that otherwise overrides container
   inheritance on light/paper themes. */
.tdm-text__body h2,
.tdm-text__body h3,
.tdm-text__body h4 {
  margin: var(--tdm-space-7, 40px) 0 var(--tdm-space-4, 16px);
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, "General Sans", system-ui, sans-serif));
  font-weight: var(--tdm-weight-headline, 600);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  text-wrap: balance;
}
.tdm-text__body h2 { font-size: var(--tdm-text-h3, clamp(28px, 3vw, 36px)); }
.tdm-text__body h3 { font-size: var(--tdm-text-h4, 20px); }
.tdm-text__body h4 { font-size: var(--tdm-text-body, 16px); text-transform: uppercase; letter-spacing: 0.08em; }
/* No top margin on the very first heading so it aligns to the block top edge. */
.tdm-text__body > h2:first-child,
.tdm-text__body > h3:first-child,
.tdm-text__body > h4:first-child {
  margin-top: 0;
}

/* ---------- Lists ---------- */
.tdm-text__body ul,
.tdm-text__body ol {
  margin-block: 0 0 var(--tdmx-gap, var(--tdm-space-5, 24px));
  padding-inline-start: 1.4em;
}
.tdm-text__body li {
  margin-bottom: var(--tdm-space-2, 8px);
}
.tdm-text__body li::marker {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

/* ---------- Inline marks ---------- */
.tdm-text__body a {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color 160ms ease;
}
.tdm-text__body a:hover,
.tdm-text__body a:focus-visible {
  color: var(--tdm-color-accent-hover, #FF7A2F);
}
.tdm-text__body strong,
.tdm-text__body b {
  font-weight: 600;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
}
.tdm-text__body em,
.tdm-text__body i {
  font-style: italic;
}

/* ---------- Block-level quote inside the rich text ---------- */
.tdm-text__body blockquote {
  margin: var(--tdm-space-5, 24px) 0;
  padding-inline-start: var(--tdm-space-4, 16px);
  border-inline-start: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
}


/* ======================================================================
   TDM Comparison — feature comparison matrix (B2B "us vs them" / variants).
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-cmp__* only — NOT .reveal (the package-global scroll-reveal
   class whose base state is opacity:0). The responsive idiom mirrors tdm_table:
   an overflow-x scroll wrapper + a sticky first column on narrow screens.
   ====================================================================== */

.tdm-cmp {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

.tdm-cmp__inner {
  text-align: var(--tdmx-align, left);
}

/* ---------- header ---------- */
.tdm-cmp__header {
  max-width: 64ch;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-cmp__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-text-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-cmp__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  margin: 0;
}
.tdm-cmp__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: var(--tdm-text-body, 1rem);
  line-height: 1.6;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}
/* When centred, keep the header's max-width box centred too. */
.tdm-block[style*="--tdmx-align: center"] .tdm-cmp__header,
.tdm-block[style*="--tdmx-align:center"] .tdm-cmp__header { margin-inline: auto; }

/* ---------- scroll wrapper (responsive: horizontal scroll on phones) ------- */
.tdm-cmp__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* The optional Design radius + hairline border frame the whole matrix. */
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  border: var(--tdmx-border, 1px solid var(--tdm-cmp-hairline, var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 10%, transparent))));
}

/* ---------- table ---------- */
.tdm-cmp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tdm-text-body, 1rem);
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  text-align: left;
  /* Keep columns comfortably wide so the matrix scrolls on phones rather than
     cramping — the sticky first column stays readable. */
  min-width: 36rem;
}
.tdm-cmp--cols-4 .tdm-cmp__table { min-width: 48rem; }

.tdm-cmp__table th,
.tdm-cmp__table td {
  padding: var(--tdm-space-3, 12px) var(--tdm-space-4, 20px);
  vertical-align: middle;
  border-bottom: 1px solid var(--tdm-cmp-hairline, var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 8%, transparent)));
}
.tdm-cmp__table tbody tr:last-child th,
.tdm-cmp__table tbody tr:last-child td { border-bottom: 0; }

/* option columns are centred; the feature column stays left */
.tdm-cmp__colhead,
.tdm-cmp__cell { text-align: center; }

/* ---------- column headers ---------- */
.tdm-cmp__corner { background: transparent; }
.tdm-cmp__colhead {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-weight: var(--tdm-weight-headline, 600);
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  white-space: nowrap;
  vertical-align: bottom;
}
.tdm-cmp__colhead-label { display: block; }
.tdm-cmp__badge {
  display: inline-block;
  margin-top: var(--tdm-space-1, 4px);
  font-family: var(--tdm-font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdm-color-on-accent, #FFFFFF);
  background: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  padding: 2px 8px;
  border-radius: var(--tdm-radius-pill, 999px);
}

/* featured column — accent-tinted band + top accent rule */
.tdm-cmp__colhead--featured,
.tdm-cmp__cell--featured {
  background: color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 7%, transparent);
}
.tdm-cmp__colhead--featured {
  box-shadow: inset 0 3px 0 0 var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}

/* ---------- feature (row) labels — sticky first column ---------- */
.tdm-cmp__rowhead {
  font-weight: 600;
  text-align: left;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
}
.tdm-cmp__corner,
.tdm-cmp__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--tdm-cmp-sticky-bg, var(--tdm-color-surface, #0D0D0F));
}

/* ---------- cell marks ---------- */
.tdm-cmp__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tdm-cmp__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.tdm-cmp__mark--yes { color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)); }
.tdm-cmp__mark--no  { color: var(--tdm-cmp-mark-muted, var(--tdm-color-ink-3, #6B6B75)); }
.tdm-cmp__mark--dash { color: var(--tdm-cmp-mark-muted, var(--tdm-color-ink-3, #6B6B75)); }
.tdm-cmp__text { color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA)); }

/* screen-reader-only label for icon cells */
.tdm-cmp__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* images (if any free-text cell ever carries one) never overflow */
.tdm-cmp img { max-width: 100%; height: auto; display: block; }

/* reduced-motion: the package reveal observer already respects this; no block
   animation runs here regardless. Stated for clarity. */
@media (prefers-reduced-motion: reduce) {
  .tdm-cmp * { scroll-behavior: auto; }
}

/* ---------- light-band remap (S108 band-derive, Option A) -----------------
   When the block lands on a light/cream/orange band, the global hook
   (.tdm-block[data-band="light"], base.css:83) already re-tones the INK vars,
   but it cannot reach this block's own opaque sticky-column fill, its muted
   mark colours, or the ink-derived hairlines — those stay tuned for dark and
   produce the "black column / invisible hairline on cream" defect.
   This override re-derives just those surface/mark/hairline vars off the dark
   --tdm-color-surface token so they survive on cream. No paper token exists
   (only in tokens.css comments) — the proven Family-B color-mix cream is used.
   Applies ONLY under [data-band="light"]; with no such attribute none of these
   rules match, so the dark-band render is byte-identical. */
.tdm-cmp[data-band="light"] {
  /* tdm-cmp is a ROOT class (view.php:22 ['tdm-block','tdm-cmp',…]) — same element
     as data-band — so the compound form is required; a descendant combinator
     (.tdm-block[data-band=light] .tdm-cmp) never matches. Mirrors tdm_feature_cards:59. */
  /* sticky first column: cream card instead of #0D0D0F (mirrors tdm_feature_cards) */
  --tdm-cmp-sticky-bg: color-mix(in srgb, #000 4%, #FFFFFF);
  /* frame + inter-row hairlines: mix off the dark surface so they read on cream */
  --tdm-cmp-hairline: color-mix(in srgb, var(--tdm-color-surface) 12%, transparent);
  /* no/dash marks: muted-but-legible dark off the surface token */
  --tdm-cmp-mark-muted: color-mix(in srgb, var(--tdm-color-surface) 55%, transparent);
}


/* ======================================================================
   TDM Accordion — collapsible Q&A / accordion list.
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-acc__* (NOT .reveal — that is the package-global scroll-reveal
   class whose base state is opacity:0; reusing it would hide content).
   Block-instance scope (--tdmx-* + reveal) is on the outer .tdm-i-<bID>.

   Built on native <details>/<summary>: the panel toggles with zero JS; view.js
   only adds sibling-close for "single" + a reduced-motion-gated smooth height.
   ====================================================================== */

.tdm-accordion {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

/* Light-band ink remap (spec §1e) — heading/question/intro/answer read
   --tdmx-*-color (the dead -color suffix the base hook can't reach), so re-tone
   locally to the dark-on-light ink, mirroring the global target. Emitted only
   with data-band="light" → byte-identical otherwise. */
.tdm-accordion[data-band="light"] {
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
}

.tdm-acc__inner {
  text-align: var(--tdmx-align, left);
}

/* ---------- header ---------- */
.tdm-acc__header {
  max-width: 60ch;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-acc__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-fs-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-acc__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  /* explicit colour — defeats the global dark-first h1..h6 ink trap on light themes */
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
  margin: 0;
}
.tdm-acc__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  line-height: 1.6;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- list ---------- */
.tdm-acc__list {
  display: flex;
  flex-direction: column;
  gap: var(--tdmx-gap, var(--tdm-space-3, 12px));
}

/* ---------- item (native <details>) ---------- */
.tdm-acc__item {
  border: 1px solid var(--tdmx-border, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 10%, transparent));
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  background: var(--tdm-color-surface-2, #141416);
  overflow: hidden;
}
.tdm-acc__item[open] {
  border-color: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}

/* ---------- question (summary) ---------- */
.tdm-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdm-space-4, 16px);
  /* keep above the 44px touch-target minimum (responsive manual) */
  min-height: 44px;
  padding: var(--tdm-space-4, 16px) var(--tdm-space-5, 24px);
  cursor: pointer;
  list-style: none;
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-weight: 600;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  line-height: 1.4;
  /* explicit colour — the question is a heading-class string on a custom block */
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
  text-align: left;
  transition: color 0.18s ease, background-color 0.18s ease;
}
/* hide the native disclosure triangle across engines */
.tdm-acc__q::-webkit-details-marker { display: none; }
.tdm-acc__q::marker { content: ''; }

.tdm-acc__q:hover,
.tdm-acc__q:focus-visible {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-acc__q:focus-visible {
  outline: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: -2px;
}
.tdm-acc__item[open] > .tdm-acc__q {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

.tdm-acc__q-text { min-width: 0; }

/* ---------- chevron ---------- */
.tdm-acc__chev {
  flex: 0 0 auto;
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  transition: transform 0.22s ease;
}
.tdm-acc__chev svg { width: 22px; height: 22px; }
/* Built-in chevron rotates on open. The custom-icon variant does NOT rotate
   (it swaps glyphs instead) — scope the rotate to the default chevron only. */
.tdm-accordion:not(.tdm-acc--customicon) .tdm-acc__item[open] > .tdm-acc__q .tdm-acc__chev {
  transform: rotate(180deg);
}

/* ---------- custom open/close icon (IconPicker glyphs) ---------- */
/* Closed glyph shown by default; open glyph shown on [open]. Both sized like the
   chevron; pure-CSS swap so the zero-JS baseline is preserved. */
.tdm-acc__ico { display: none; width: 22px; height: 22px; }
.tdm-acc__ico svg { width: 22px; height: 22px; }
.tdm-acc--customicon .tdm-acc__item:not([open]) > .tdm-acc__q .tdm-acc__ico--closed { display: inline-flex; }
.tdm-acc--customicon .tdm-acc__item[open] > .tdm-acc__q .tdm-acc__ico--open { display: inline-flex; }

/* ---------- answer panel ---------- */
.tdm-acc__a {
  padding: 0 var(--tdm-space-5, 24px) var(--tdm-space-4, 16px);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.65;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- answer panel WITH side image (S73 FAQ layout) ---------- */
/* Below LG: single column, image stacks AFTER the answer text (source order). */
.tdm-acc__a--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tdm-space-4, 16px);
}
.tdm-acc__a-text { min-width: 0; }
.tdm-acc__a-media { min-width: 0; }
.tdm-acc__img,
.tdm-acc__a-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
}
/* LG+: two-column text | image (~70/30). Image side follows the block control:
   default 'right' keeps source order; 'left' visually swaps via grid order. */
@media (min-width: 768px) {
  .tdm-acc__a--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30%);
    align-items: start;
    gap: var(--tdm-space-5, 24px);
  }
  .tdm-acc--img-left .tdm-acc__a--split .tdm-acc__a-text { order: 2; }
  .tdm-acc--img-left .tdm-acc__a--split .tdm-acc__a-media { order: 1; }
}

/* respect users who prefer no motion — chevron snaps, no rotate easing */
@media (prefers-reduced-motion: reduce) {
  .tdm-acc__chev,
  .tdm-acc__q { transition: none; }
}

/* images never overflow their box (responsive manual) */
.tdm-accordion img { max-width: 100%; height: auto; display: block; }

/* ======================================================================
   Section-level side image (GAP-I) — an aside beside the WHOLE accordion.
   ALL rules here are scoped under .tdm-acc--has-aside, which is emitted ONLY
   when an operator picks a section image. With no image these selectors never
   match → every existing tdm_accordion instance is byte-identical.
   Port of arech_faq_accordion's 70/30 sticky portrait look (the defaults).
   Breakpoints: min-width ONLY (responsive_manual_en_0.1.md). 1024px matches
   the OLD block so a migrated instance renders identically.
   ====================================================================== */

/* Mobile-first: single column. .tdm-acc__main holds header + list; .tdm-acc__aside
   is the image column. The two-column grid only kicks in at LG (1024px). */
.tdm-acc--has-aside .tdm-acc__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tdm-sec-gap, var(--tdm-space-8, 64px));
  align-items: start;
}
.tdm-acc--has-aside .tdm-acc__main { min-width: 0; }

/* Aside hidden below 1024px when "hide on mobile" is on (the OLD behaviour). */
.tdm-acc--aside-hidemob .tdm-acc__aside { display: none; }

/* When the aside DOES stack on mobile (hide-on-mobile off), allow image-first
   ordering via CSS `order` (DOM order = content first, unchanged for SR). */
.tdm-acc--mob-image-first .tdm-acc__aside { order: -1; }
.tdm-acc--mob-image-first .tdm-acc__main  { order: 0; }

/* ---- section image frame + picture ---- */
.tdm-acc__sec-frame { min-width: 0; }
.tdm-acc__sec-img,
.tdm-acc__sec-frame img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 14%, transparent));
  border-radius: var(--tdm-radius-sm, 4px);
}

/* aspect-ratio presets (default portrait = the OLD 3:4 look). auto = natural. */
.tdm-acc--ar-portrait  .tdm-acc__sec-img,
.tdm-acc--ar-portrait  .tdm-acc__sec-frame img { aspect-ratio: 3 / 4; }
.tdm-acc--ar-square    .tdm-acc__sec-img,
.tdm-acc--ar-square    .tdm-acc__sec-frame img { aspect-ratio: 1 / 1; }
.tdm-acc--ar-landscape .tdm-acc__sec-img,
.tdm-acc--ar-landscape .tdm-acc__sec-frame img { aspect-ratio: 4 / 3; }
.tdm-acc--ar-auto      .tdm-acc__sec-img,
.tdm-acc--ar-auto      .tdm-acc__sec-frame img { aspect-ratio: auto; object-fit: contain; }

/* corner radius presets (default sm = the OLD --radius-sm). */
.tdm-acc--arad-none .tdm-acc__sec-img, .tdm-acc--arad-none .tdm-acc__sec-frame img { border-radius: 0; }
.tdm-acc--arad-sm   .tdm-acc__sec-img, .tdm-acc--arad-sm   .tdm-acc__sec-frame img { border-radius: var(--tdm-radius-sm, 4px); }
.tdm-acc--arad-md   .tdm-acc__sec-img, .tdm-acc--arad-md   .tdm-acc__sec-frame img { border-radius: var(--tdm-radius-md, 6px); }
.tdm-acc--arad-lg   .tdm-acc__sec-img, .tdm-acc--arad-lg   .tdm-acc__sec-frame img { border-radius: var(--tdm-radius-lg, 12px); }
.tdm-acc--arad-pill .tdm-acc__sec-img, .tdm-acc--arad-pill .tdm-acc__sec-frame img { border-radius: var(--tdm-radius-pill, 999px); }

/* ---- LG+ : two-column layout (the 70/30 split, image right by default) ---- */
@media (min-width: 1024px) {
  /* width share: content column first in DOM, image column second. */
  .tdm-acc--aw-30         .tdm-acc__inner { grid-template-columns: 7fr 3fr; }
  .tdm-acc--aw-third      .tdm-acc__inner { grid-template-columns: 2fr 1fr; }
  .tdm-acc--aw-two-fifths .tdm-acc__inner { grid-template-columns: 3fr 2fr; }

  /* side: default content-left/image-right (DOM order). 'left' swaps visually via
     `order` (DOM order unchanged for SR) and mirrors the width tracks. */
  .tdm-acc--aside-left .tdm-acc__main  { order: 2; }
  .tdm-acc--aside-left .tdm-acc__aside { order: 1; }
  .tdm-acc--aside-left.tdm-acc--aw-30         .tdm-acc__inner { grid-template-columns: 3fr 7fr; }
  .tdm-acc--aside-left.tdm-acc--aw-third      .tdm-acc__inner { grid-template-columns: 1fr 2fr; }
  .tdm-acc--aside-left.tdm-acc--aw-two-fifths .tdm-acc__inner { grid-template-columns: 2fr 3fr; }

  /* re-show the aside at LG when hidden on mobile (the OLD desktop-only image). */
  .tdm-acc--aside-hidemob .tdm-acc__aside { display: block; }

  /* vertical behaviour: sticky (OLD) follows then pins; top/center align the column. */
  .tdm-acc--av-sticky .tdm-acc__aside {
    position: sticky;
    top: var(--tdm-space-8, 64px);
    align-self: start;
  }
  .tdm-acc--av-top    .tdm-acc__aside { align-self: start; }
  .tdm-acc--av-center .tdm-acc__aside { align-self: center; }
}


/* ============================================================
   ARECH News Carousel block — block-32 view.css
   Horizontal slide carousel with arrows + dots + keyboard + swipe.
   All values reference tokens from themes/arech/css/main.css :root.
   ============================================================ */

.arech-nc {
    padding-block: var(--space-8);
    padding-inline: var(--container-px);
    background-color: var(--paper-1);
    color: var(--ink-1);
    container-type: inline-size;
}
@media (min-width: 768px) { .arech-nc { padding-block: var(--space-9); } }

.arech-nc__inner {
    /* S69 — single container; gutter comes from the outer .arech-nc band. */
    max-width: var(--container);
    margin-inline: auto;
}

/* ---- Header ---- */
.arech-nc__head {
    margin-bottom: var(--space-6);
    max-width: 64ch;
}
.arech-nc__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    margin: 0 0 var(--space-3);
}
.arech-nc__h2 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink-1);
    margin: 0;
}

/* ---- Viewport / track ---- */
.arech-nc__viewport {
    overflow: hidden;
    width: 100%;
    margin-top: var(--space-4);
}
.arech-nc__track {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform var(--motion-slow) var(--ease-decelerate);
    will-change: transform;
}
.arech-nc__slide {
    flex: 0 0 calc((100% - 0 * var(--space-4)) / 1);
    min-width: 0;
}

/* slides-visible — xs default 1 */
.arech-nc[data-arech-nc-slides-xs="1"] .arech-nc__slide { flex-basis: 100%; }
.arech-nc[data-arech-nc-slides-xs="2"] .arech-nc__slide {
    flex-basis: calc((100% - var(--space-4)) / 2);
}

@container (min-width: 768px) {
    .arech-nc[data-arech-nc-slides-md="1"] .arech-nc__slide { flex-basis: 100%; }
    .arech-nc[data-arech-nc-slides-md="2"] .arech-nc__slide {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
    .arech-nc[data-arech-nc-slides-md="3"] .arech-nc__slide {
        flex-basis: calc((100% - 2 * var(--space-4)) / 3);
    }
    .arech-nc[data-arech-nc-slides-md="4"] .arech-nc__slide {
        flex-basis: calc((100% - 3 * var(--space-4)) / 4);
    }
}

@container (min-width: 1024px) {
    .arech-nc[data-arech-nc-slides-lg="1"] .arech-nc__slide { flex-basis: 100%; }
    .arech-nc[data-arech-nc-slides-lg="2"] .arech-nc__slide {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
    .arech-nc[data-arech-nc-slides-lg="3"] .arech-nc__slide {
        flex-basis: calc((100% - 2 * var(--space-4)) / 3);
    }
    .arech-nc[data-arech-nc-slides-lg="4"] .arech-nc__slide {
        flex-basis: calc((100% - 3 * var(--space-4)) / 4);
    }
    .arech-nc[data-arech-nc-slides-lg="5"] .arech-nc__slide {
        flex-basis: calc((100% - 4 * var(--space-4)) / 5);
    }
}

/* ---- Card ---- */
.arech-nc__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--paper-0);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--motion-normal) var(--ease-standard),
        border-color var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard);
}
.arech-nc__card:hover,
.arech-nc__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--ink-1) 8%, transparent);
}
.arech-nc__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.arech-nc__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--paper-3);
}
.arech-nc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow) var(--ease-standard);
}
.arech-nc__card:hover .arech-nc__media img {
    transform: scale(1.04);
}

.arech-nc__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.arech-nc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.arech-nc__cat { color: var(--orange-text); font-weight: 600; }
.arech-nc__date { opacity: 0.8; }

.arech-nc__h4 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
    color: var(--ink-1);
}
.arech-nc__excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
}

/* ---- Controls ---- */
.arech-nc__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.arech-nc__arrow {
    background-color: var(--paper-0);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-1);
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
}
.arech-nc__arrow:hover,
.arech-nc__arrow:focus-visible {
    background-color: var(--orange);
    color: var(--white);
    border-color: var(--orange);
}
.arech-nc__arrow:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-nc__arrow[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.arech-nc__dots {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
/* Visual pip stays 8px; ::before extender pushes touch-target to 44x44
   per WCAG 2.5.5 Target Size (Enhanced). Fix from S52 css-architect gate B1. */
.arech-nc__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklch, var(--ink-1) 18%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}
.arech-nc__dot::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
}
.arech-nc__dot:hover { background-color: color-mix(in oklch, var(--ink-1) 40%, transparent); }
.arech-nc__dot.is-active {
    background-color: var(--orange);
    transform: scale(1.25);
}
.arech-nc__dot:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* ---- Live region (visually hidden) ---- */
.arech-nc__live {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Tail CTA ---- */
.arech-nc__tail {
    margin: var(--space-6) 0 0;
    text-align: center;
}
.arech-nc__tail-link {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--orange-text);
    padding-bottom: 2px;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-nc__tail-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* ---- Reveal fade on container enter ---- */
.arech-nc__viewport,
.arech-nc__controls,
.arech-nc__tail {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-nc.is-in .arech-nc__viewport { transition-delay: var(--stagger-1); opacity: 1; transform: translateY(0); }
.arech-nc.is-in .arech-nc__controls { transition-delay: var(--stagger-2); opacity: 1; transform: translateY(0); }
.arech-nc.is-in .arech-nc__tail { transition-delay: var(--stagger-3); opacity: 1; transform: translateY(0); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-nc__track { transition: none; }
    .arech-nc__media img { transition: none; }
    .arech-nc__card { transition: none; }
    .arech-nc__card:hover { transform: none; }
    .arech-nc__card:hover .arech-nc__media img { transform: none; }
    .arech-nc__viewport,
    .arech-nc__controls,
    .arech-nc__tail {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-nc {
    padding-block: var(--space-5);
}
.ccm-edit-mode .arech-nc__viewport,
.ccm-edit-mode .arech-nc__controls,
.ccm-edit-mode .arech-nc__tail {
    opacity: 1;
    transform: none;
}
.ccm-edit-mode .arech-nc__track { transform: none !important; }
.ccm-edit-mode .arech-nc__viewport { overflow: visible; }

/* ============================================================
   AUTO-NEWS variant (.arech-nc--related) — the "Continue reading"
   / "More from the factory" carousel ported from news-post-v2's
   .related-news section. The base carousel chrome above already
   matches the prototype's .related-card (paper card, 16:9 media,
   hover lift, orange category chip), so this modifier only adds:
   the slightly darker band the prototype uses (.related-news =
   --paper-2), the meta separator dot, and the per-card "Read
   article" CTA row that the prototype cards carry.
   ============================================================ */
.arech-nc--related {
    background-color: var(--paper-2);
    border-top: 1px solid var(--hairline);
}
.arech-nc--related .arech-nc__sep {
    color: var(--orange);
}
/* Per-card CTA row (prototype .related-card-cta). */
.arech-nc--related .arech-nc__cta {
    margin-top: auto;
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--motion-fast) var(--ease-standard);
}
.arech-nc--related .arech-nc__card:hover .arech-nc__cta,
.arech-nc--related .arech-nc__card:focus-visible .arech-nc__cta {
    gap: var(--space-3);
    color: var(--orange);
}
@media (prefers-reduced-motion: reduce) {
    .arech-nc--related .arech-nc__cta { transition: none; }
}

/* ---- Print ---- */
@media print {
    .arech-nc { background: #fff !important; color: #000 !important; }
    .arech-nc__controls { display: none !important; }
    .arech-nc__viewport { overflow: visible !important; }
    .arech-nc__track { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--space-4); transform: none !important; }
}


/* ============================================================
   ARECH Blog Feature block — front-end styles ("From the Blog").

   Faithful port of Variant D of
     prototypes/homepage-news-block/index.html
   re-tokenised to the theme tokens (main.css :root) and corrected to the
   responsive standard (responsive_manual_en_0.1: min-width ONLY, no max-width
   media queries; mobile-first; canonical container box).

   DARK section (sits on the homepage dark background). ALL rules are scoped
   under `.arech-bf` so nothing leaks into the theme. Font families use theme
   tokens (--font-mono / --font-headline / --font-body). The TDM Design layer
   threads through var(--tdmx-*, <fallback>) — a control left at its default
   emits nothing, so these fallbacks hold and the look is byte-identical.
   ============================================================ */

.arech-bf {
    /* dark-section hairline (theme --hairline is ink-on-light; this band is dark) */
    --bf-hairline: rgba(245, 244, 240, 0.10);
    --bf-hairline-strong: rgba(245, 244, 240, 0.16);

    position: relative;
    display: block;
    background: var(--tdmx-bg, transparent);
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
}

/* Optional Design-tab background image + overlay layer (z0, behind content). */
.arech-bf::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--tdmx-overlay, none), var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.arech-bf__inner {
    position: relative;
    z-index: 1;
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
}

/* ---------- Header ---------- */
.arech-bf__head { margin-bottom: var(--space-6); }

.arech-bf__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-text, var(--muted-accessible));
}
.arech-bf__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--tdmx-accent, var(--orange));
}

.arech-bf__h2 {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--tdmx-heading, var(--off-white));
}
.arech-bf__ac { color: var(--tdmx-accent, var(--orange)); }

/* ---------- Grid: feature + side ---------- */
.arech-bf__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: stretch;
}
@media (min-width: 768px) {
    .arech-bf__grid {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-7);
    }
}

/* ---------- Feature card (newest post) ---------- */
.arech-bf__feat {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--dark-2);
    transition: transform 0.18s ease;
}
@media (min-width: 768px) { .arech-bf__feat { min-height: 340px; } }
.arech-bf__feat:hover { transform: translateY(-3px); }
.arech-bf__feat:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.arech-bf__feat-media {
    position: absolute;
    inset: 0;
    display: block;
}
.arech-bf__feat-media img,
.arech-bf__feat-media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.arech-bf__feat:hover .arech-bf__feat-media img { transform: scale(1.04); }

/* Graceful "image pending" placeholder band (fID 0, no external call) */
.arech-bf__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1d1d22, #15151a);
}
.arech-bf__ph-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #3a3a42;
}

.arech-bf__feat-ov {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--space-5);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 45%, transparent);
}
@media (min-width: 768px) { .arech-bf__feat-ov { padding: var(--space-6); } }

.arech-bf__cat {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange));
}
.arech-bf__feat-title {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.15;
    color: var(--off-white);
}

/* ---------- Side list (next posts) ---------- */
.arech-bf__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.arech-bf__side-item {
    display: block;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--bf-hairline);
    text-decoration: none;
    color: inherit;
}
.arech-bf__side-item:first-child { padding-top: 0; }
.arech-bf__side-item:last-child { border-bottom: 0; }
.arech-bf__side-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.arech-bf__when {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tdmx-text, var(--muted-accessible));
}
.arech-bf__sep { color: var(--bf-hairline-strong); }
.arech-bf__side-cat { color: var(--tdmx-accent, var(--orange)); }

.arech-bf__side-title {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    color: var(--tdmx-heading, var(--off-white));
    transition: color 0.15s ease;
}
.arech-bf__side-item:hover .arech-bf__side-title { color: var(--tdmx-accent, var(--orange)); }

/* ---------- Tail link ---------- */
.arech-bf__tail { margin: var(--space-6) 0 0; }
.arech-bf__tail-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--off-white);
    text-decoration: none;
    border-bottom: 1px solid var(--tdmx-accent, var(--orange));
}
.arech-bf__tail-link:hover { color: var(--tdmx-accent, var(--orange)); }
.arech-bf__tail-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.arech-bf__ar { color: var(--tdmx-accent, var(--orange)); transition: transform 0.15s ease; }
.arech-bf__tail-link:hover .arech-bf__ar { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .arech-bf__feat,
    .arech-bf__feat-media img,
    .arech-bf__side-title,
    .arech-bf__ar { transition: none; }
}


/* ======================================================================
   TDM Social Share v2 — wrapper + per-instance overrides.

   The BUTTONS keep the global .arech-news-post__share* styles (theme
   main.css), so an instance left at v2 defaults (no data-shape / data-size /
   data-gap, color-mode=neutral, label "before") is BYTE-IDENTICAL to the v1
   look. EVERY override below is scoped under .tdm-social-share (and its
   data-* attributes), so the global blog/news share rows are never touched.

   The Design layer (DesignBlockTrait) emits --tdmx-* vars onto .tdm-i-<bID>
   only when the operator changes a control (emit-only-on-change); the
   fallbacks here reproduce the v1 box (space-4 block padding, no container
   constraint), so defaults render unchanged.
   Theme tokens (--space-*, --ink-3, --paper-0, --hairline, --orange*) are
   global; safe fallbacks keep the block portable.
   ====================================================================== */

.tdm-social-share {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  /* Design layer: outer box. Fallbacks = the v1 look (16px block padding,
     no margin, no max-width container) so defaults stay byte-identical. */
  padding-top: var(--tdmx-pad-top, var(--space-4, 16px));
  padding-bottom: var(--tdmx-pad-bottom, var(--space-4, 16px));
  padding-left: var(--tdmx-pad-left, 0px);
  padding-right: var(--tdmx-pad-right, 0px);
  margin-top: var(--tdmx-margin-top, 0px);
  margin-bottom: var(--tdmx-margin-bottom, 0px);
  /* Design layer background (solid / gradient) when chosen; transparent otherwise. */
  background: var(--tdmx-bg, transparent);
  /* Establish a stacking context so the bg-image/overlay pseudo-elements (z-index
     -2 / -1) sit behind the buttons without leaking outside this instance. */
  position: relative;
  isolation: isolate;
}

/* Universal background IMAGE + OVERLAY, scoped to this block. The package's
   global mechanism lives on `.tdm-block::after / ::before` (css/base.css), but
   this wrapper deliberately is NOT `.tdm-block` (that would change its box
   model: padding/margin/max-width defaults). So we replicate just the image +
   overlay layers here, driven by the same emitted --tdmx-bg-image / --tdmx-overlay
   vars. Unset (no image chosen) => none / transparent => invisible, so an
   instance left at defaults stays byte-identical. (S102f Cause 2.) */
.tdm-social-share::after {            /* image layer, behind everything */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--tdmx-bg-image, none);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.tdm-social-share::before {           /* overlay, above image, below content */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tdmx-overlay, transparent);
  pointer-events: none;
}

/* Design max-width: constrains the box only when the operator picks one (the
   --tdmx-max-width var is emitted on .tdm-i-<bID>). With no var, the keyword
   `none` means full width = the v1 look. */
.tdm-social-share { max-width: var(--tdmx-max-width, none); }

/* Row alignment (the SHARE ROW + label), driven by data-align. Default left =
   no rule, so v1 left-aligned instances are unchanged. */
.tdm-social-share[data-align="center"] {
  align-items: center;
  text-align: center;
}
.tdm-social-share[data-align="right"] {
  align-items: flex-end;
}

.tdm-social-share__label {
  color: var(--ink-3, #6B6B75);
}

/* Label ABOVE vs BEFORE. Default "before" keeps the v1 column flow (label on
   its own line above the row visually — same as v1). "above" is explicit and
   identical in this column layout; kept as a hook for future inline variants. */
.tdm-social-share[data-label-pos="before"] { flex-direction: column; }
.tdm-social-share[data-label-pos="above"]  { flex-direction: column; }

/* ----- Optional network NAMES (icon + text) ----- */
.tdm-social-share__name { display: none; }
.tdm-social-share--names-on .tdm-social-share__btn {
  width: auto;
  min-width: 44px;
  padding-inline: 12px;
  gap: 8px;
}
.tdm-social-share--names-on .tdm-social-share__name {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* ======================================================================
   SHAPE — only when an explicit data-shape is set (default = global pill).
   ====================================================================== */
.tdm-social-share[data-shape="circle"]  .tdm-social-share__btn { border-radius: 999px; }
.tdm-social-share[data-shape="rounded"] .tdm-social-share__btn { border-radius: var(--radius-md, 8px); }
.tdm-social-share[data-shape="square"]  .tdm-social-share__btn { border-radius: 0; }

/* ======================================================================
   SIZE — only when an explicit data-size is set (default = global 40px).
   Every explicit size meets the 44x44 touch-target floor (responsive manual).
   ====================================================================== */
.tdm-social-share[data-size="sm"] .tdm-social-share__btn { width: 44px; height: 44px; }
.tdm-social-share[data-size="md"] .tdm-social-share__btn { width: 48px; height: 48px; }
.tdm-social-share[data-size="lg"] .tdm-social-share__btn { width: 56px; height: 56px; }
.tdm-social-share[data-size="sm"] .tdm-social-share__btn svg { width: 18px; height: 18px; }
.tdm-social-share[data-size="md"] .tdm-social-share__btn svg { width: 20px; height: 20px; }
.tdm-social-share[data-size="lg"] .tdm-social-share__btn svg { width: 24px; height: 24px; }
/* With names on, size controls the height + icon; width stays auto. */
.tdm-social-share--names-on[data-size="sm"] .tdm-social-share__btn { width: auto; }
.tdm-social-share--names-on[data-size="md"] .tdm-social-share__btn { width: auto; }
.tdm-social-share--names-on[data-size="lg"] .tdm-social-share__btn { width: auto; }

/* ======================================================================
   GAP — only when an explicit data-gap is set (default = global var(--space-2)).
   ====================================================================== */
.tdm-social-share[data-gap="sm"] .tdm-social-share__row { gap: var(--space-1, 4px); }
.tdm-social-share[data-gap="md"] .tdm-social-share__row { gap: var(--space-3, 12px); }
.tdm-social-share[data-gap="lg"] .tdm-social-share__row { gap: var(--space-4, 16px); }

/* ======================================================================
   ICON COLOUR MODE — scoped per instance, never leaks to global rows.
   neutral (default) = no rule → the global .arech-news-post__share-btn look.
   ====================================================================== */

/* BRAND: each platform's official colour, shown ALWAYS or on HOVER. */
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="twitter"]   { color: #000000; border-color: #000000; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="facebook"]  { color: #1877F2; border-color: #1877F2; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="linkedin"]  { color: #0A66C2; border-color: #0A66C2; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="whatsapp"]  { color: #25D366; border-color: #25D366; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="telegram"]  { color: #26A5E4; border-color: #26A5E4; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="reddit"]    { color: #FF4500; border-color: #FF4500; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="xing"]      { color: #006567; border-color: #006567; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="pinterest"] { color: #BD081C; border-color: #BD081C; }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="always"] .tdm-social-share__btn[data-net="email"]     { color: var(--ink-3, #6B6B75); }

.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="twitter"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="twitter"]:focus-visible   { color: #000000; border-color: #000000; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="facebook"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="facebook"]:focus-visible  { color: #1877F2; border-color: #1877F2; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="linkedin"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="linkedin"]:focus-visible  { color: #0A66C2; border-color: #0A66C2; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="whatsapp"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="whatsapp"]:focus-visible  { color: #25D366; border-color: #25D366; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="telegram"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="telegram"]:focus-visible  { color: #26A5E4; border-color: #26A5E4; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="reddit"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="reddit"]:focus-visible    { color: #FF4500; border-color: #FF4500; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="xing"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="xing"]:focus-visible      { color: #006567; border-color: #006567; background: var(--paper-2, #f2f1ed); }
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="pinterest"]:hover,
.tdm-social-share[data-color-mode="brand"][data-color-trigger="hover"] .tdm-social-share__btn[data-net="pinterest"]:focus-visible { color: #BD081C; border-color: #BD081C; background: var(--paper-2, #f2f1ed); }

/* CUSTOM: one colour for all icons; --tdm-ss-c / --tdm-ss-ch set per instance. */
.tdm-social-share[data-color-mode="custom"][data-color-trigger="always"] .tdm-social-share__btn {
  color: var(--tdm-ss-c, var(--ink-2, #3a3a42));
  border-color: var(--tdm-ss-c, var(--hairline, #e3e1da));
}
.tdm-social-share[data-color-mode="custom"][data-color-trigger="hover"] .tdm-social-share__btn:hover,
.tdm-social-share[data-color-mode="custom"][data-color-trigger="hover"] .tdm-social-share__btn:focus-visible {
  color: var(--tdm-ss-ch, var(--tdm-ss-c, var(--orange-dim, #c4510e)));
  border-color: var(--tdm-ss-ch, var(--tdm-ss-c, var(--orange, #E8651A)));
}

/* Respect reduced-motion: the global btn transition already animates transform/
   colour — disable for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .tdm-social-share .tdm-social-share__btn { transition: none; }
}


/* ======================================================================
   TDM CTA — call-to-action banner.
   Tokens come from the package tokens.css (--tdm-*). Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps the
   fallback (emit-only-on-change). Namespaced .tdm-cta__* classes only — do NOT
   reuse the package-global .reveal class for any hook.

   The .tdm-block wrapper (base.css) drives outer padding/margin, alignment,
   background + overlay, heading colour + heading font. This file adds the
   eyebrow style, the heading + subtext type scale, the centre/split layouts,
   and a self-contained button look (solid / outline / ghost) so the CTA matches
   tdm_button without depending on that block being on the page.
   ====================================================================== */

.tdm-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-6, 24px);
}

/* ---------- Header text column ---------- */
.tdm-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-3, 12px);
}

.tdm-cta__eyebrow {
  margin: 0;
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: var(--tdm-text-eyebrow, 11px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Eyebrow follows the accent colour by default (Design `accent_color` var). */
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

.tdm-cta__heading {
  margin: 0;
  /* Heading colour + font come from the .tdm-block heading rule (base.css):
     color:var(--tdmx-heading); font-family:var(--tdmx-font-heading). */
  font-weight: var(--tdm-weight-headline, 600);
  font-size: var(--tdm-text-h2, clamp(28px, 4vw, 48px));
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Inline accent fragment of the heading — consumes the Design accent colour. */
.tdm-cta__accent {
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

/* ---------- Graphic element (icon chip or image, above the header) ---------- */
.tdm-cta__graphic {
  --tdm-cta-graphic-size: 56px;        /* medium default; size modifiers override */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tdm-cta-graphic-size);
  height: var(--tdm-cta-graphic-size);
}
.tdm-cta__graphic--small  { --tdm-cta-graphic-size: 40px; }
.tdm-cta__graphic--medium { --tdm-cta-graphic-size: 56px; }
.tdm-cta__graphic--large  { --tdm-cta-graphic-size: 72px; }

/* Icon chip: accent-tinted rounded square with the Lucide glyph in accent. */
.tdm-cta__graphic--icon {
  border-radius: var(--tdm-radius-md, 8px);
  background: color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 14%, transparent);
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-cta__graphic--icon svg {
  width: 60%;
  height: 60%;
  display: block;
}

/* Image graphic: height-capped, never causing layout shift. */
.tdm-cta__graphic--image {
  width: auto;
  height: auto;
}
.tdm-cta__graphic-img {
  max-width: 100%;
  height: auto;
  max-height: var(--tdm-cta-graphic-size);
  display: block;
}

/* Centre layout: centre the graphic with the text column. */
.tdm-cta--center .tdm-cta__graphic { margin-inline: auto; }

.tdm-cta__subtext {
  margin: 0;
  max-width: 64ch;
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-body, 16px);
  line-height: 1.6;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}

/* When centred (Design `align: center`), keep the subtext box centred too. */
.tdm-block[style*="--tdmx-align: center"] .tdm-cta__subtext,
.tdm-block[style*="--tdmx-align:center"] .tdm-cta__subtext {
  margin-inline: auto;
}

/* ---------- Contact rows (up to 2) ---------- */
.tdm-cta__rows {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-3, 12px);
  margin-top: var(--tdm-space-2, 8px);
}
.tdm-cta__row {
  display: flex;
  align-items: center;
  gap: var(--tdm-space-3, 12px);
}
.tdm-cta__row-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-cta__row-icon svg { width: 20px; height: 20px; display: block; }
.tdm-cta__row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tdm-cta__row-label {
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: var(--tdm-text-eyebrow, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}
.tdm-cta__row-link {
  display: inline-block;
  min-height: 44px;            /* >= 44px touch target */
  line-height: 44px;
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-body, 16px);
  font-weight: 600;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  text-decoration: none;
  word-break: break-word;
  transition: color var(--tdm-dur-fast, 150ms) var(--tdm-ease-standard, ease);
}
.tdm-cta__row-link:hover { color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)); }
.tdm-cta__row-link:focus-visible {
  outline: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: 3px;
  border-radius: 2px;
}
/* Centre layout: centre the rows too. */
.tdm-cta--center .tdm-cta__rows { align-items: center; }
.tdm-cta--center .tdm-cta__row-text { align-items: center; text-align: center; }

/* ---------- Ribbon / badge (corner flag on the band) ---------- */
/* The .tdm-block band is position:relative (it carries the Design overlay), so
   the ribbon anchors to it. Non-interactive, accent-filled, clamped offset so it
   never overflows on narrow widths and never obscures the heading text. */
.tdm-cta__ribbon {
  position: absolute;
  top: clamp(8px, 2vw, 16px);
  z-index: 2;
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--tdm-radius-btn, 2px);
  background: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  color: var(--tdm-color-on-accent, #FFFFFF);
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: var(--tdm-text-eyebrow, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
  max-width: calc(100% - 2 * clamp(8px, 2vw, 16px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdm-cta__ribbon--top-left  { left: clamp(8px, 2vw, 16px); }
.tdm-cta__ribbon--top-right { right: clamp(8px, 2vw, 16px); }
/* Keep the header clear of the ribbon so it is never obscured. */
.tdm-cta--ribboned .tdm-cta__inner { padding-top: var(--tdm-space-6, 24px); }

/* ---------- Actions (button row) ---------- */
.tdm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdm-space-3, 12px);
  align-items: center;
}

/* ---------- Layout: center (stacked, centred) ---------- */
.tdm-cta--center .tdm-cta__text { align-items: center; text-align: center; }
.tdm-cta--center .tdm-cta__actions { justify-content: center; }

/* ---------- Layout: split (text left, buttons right at >=768px) ---------- */
@media (min-width: 768px) {
  .tdm-cta--split .tdm-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--tdm-space-8, 40px);
  }
  .tdm-cta--split .tdm-cta__actions {
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

/* ======================================================================
   Buttons — self-contained replica of the package .tdm-btn look, scoped to
   .tdm-cta so the CTA never depends on a tdm_button being present. Same tokens,
   same variants (solid / outline / ghost), 44px touch floor, reduced-motion safe.
   ====================================================================== */
.tdm-cta__btn {
  --tdm-cta-btn-accent: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));               /* FILL: solid bg + outline border — never flips */
  --tdm-cta-btn-accent-text: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));     /* TEXT: outline/ghost label — flips to --orange-link on a light band */
  --tdm-cta-btn-on-accent: var(--tdm-color-on-accent, #FFFFFF);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;            /* >= 44px touch target */
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--tdm-radius-btn, 2px);
  font-family: var(--tdm-font-body, system-ui, sans-serif);
  font-size: 15px;
  font-weight: var(--tdm-weight-headline, 600);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--tdm-dur-fast, 150ms) var(--tdm-ease-standard, ease),
    border-color var(--tdm-dur-fast, 150ms) var(--tdm-ease-standard, ease),
    color var(--tdm-dur-fast, 150ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-fast, 150ms) var(--tdm-ease-standard, ease),
    box-shadow var(--tdm-dur-fast, 150ms) var(--tdm-ease-standard, ease);
}

.tdm-cta__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-cta-btn-accent) 55%, transparent);
}

/* solid — accent fill + on-accent text. */
.tdm-cta__btn--solid {
  background: var(--tdm-cta-btn-accent);
  border-color: var(--tdm-cta-btn-accent);
  color: var(--tdm-cta-btn-on-accent);
}
.tdm-cta__btn--solid:hover {
  background: color-mix(in srgb, var(--tdm-cta-btn-accent) 86%, #000);
  border-color: color-mix(in srgb, var(--tdm-cta-btn-accent) 86%, #000);
  color: var(--tdm-cta-btn-on-accent);
  transform: translateY(-1px);
  box-shadow: var(--tdm-shadow-sm, 0 1px 2px rgba(0,0,0,0.3));
}
.tdm-cta__btn--solid:active { transform: translateY(0); box-shadow: none; }

/* outline — transparent bg + accent border + accent text. */
.tdm-cta__btn--outline {
  background: transparent;
  border-color: var(--tdm-cta-btn-accent);
  color: var(--tdm-cta-btn-accent-text);
}
.tdm-cta__btn--outline:hover {
  background: color-mix(in srgb, var(--tdm-cta-btn-accent) 12%, transparent);
  border-color: var(--tdm-cta-btn-accent);
  color: var(--tdm-cta-btn-accent-text);
  transform: translateY(-1px);
}
.tdm-cta__btn--outline:active { transform: translateY(0); }

/* ghost — transparent + subtle hover wash, inherits surrounding text colour. */
.tdm-cta__btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tdmx-text, var(--tdm-color-ink, #F5F4F0));
}
.tdm-cta__btn--ghost:hover {
  background: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink, #F5F4F0)) 10%, transparent);
}
.tdm-cta__btn--ghost:active {
  background: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink, #F5F4F0)) 16%, transparent);
}

.tdm-cta__btn-label { display: inline-block; }

/* Per-button icon — scales with the label (em sizing), inherits button colour. */
.tdm-cta__btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tdm-cta__btn-icon svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

/* ---------- Button size (block-level, both buttons) ---------- */
/* medium = the existing 48px / 12-24 padding (default; no class needed but the
   modifier is emitted for explicitness). small still clears the 44px floor. */
.tdm-cta--btn-small .tdm-cta__btn {
  min-height: 44px;
  padding: 9px 18px;
  font-size: 14px;
}
.tdm-cta--btn-medium .tdm-cta__btn {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 15px;
}
.tdm-cta--btn-large .tdm-cta__btn {
  min-height: 56px;
  padding: 16px 32px;
  font-size: 16px;
}

/* Reduced motion: colour change only, no transforms. */
@media (prefers-reduced-motion: reduce) {
  .tdm-cta__btn,
  .tdm-cta__btn:hover,
  .tdm-cta__btn:active {
    transform: none !important;
    transition: background var(--tdm-dur-fast, 150ms) linear,
                border-color var(--tdm-dur-fast, 150ms) linear,
                color var(--tdm-dur-fast, 150ms) linear !important;
  }
}


/* ======================================================================
   TDM Gallery — responsive image grid + accessible lightbox.
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-gal__* (NOT .reveal — that is the package-global scroll-reveal
   class whose base state is opacity:0; reusing it would hide content).
   Block-instance scope (--tdmx-* + reveal) is on the outer .tdm-i-<bID>.
   ====================================================================== */

.tdm-gal {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

/* Light-band ink remap (spec §1e) — heading/intro read --tdmx-*-color (the dead
   -color suffix the base hook can't reach), so re-tone locally to the dark-on-
   light ink, mirroring the global target. Emitted only with data-band="light"
   → byte-identical otherwise. */
.tdm-gal[data-band="light"] {
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
}

.tdm-gal__inner {
  text-align: var(--tdmx-align, left);
}

/* ---------- header ---------- */
.tdm-gal__header {
  max-width: 64ch;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-gal__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-fs-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-gal__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
  margin: 0 0 var(--tdm-space-3, 12px);
}
.tdm-gal__intro {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
  margin: 0;
  max-width: 64ch;
}

/* ---------- grid ---------- */
/* --g-gap / --g-radius are set inline by view.php ONLY when the operator picks
   an explicit img_gap / img_radius. When unset they resolve to the Design-layer
   fallback, so existing rows look unchanged. */
.tdm-gal__grid {
  --g-gap: var(--tdmx-gap, var(--tdm-space-5, 24px));
  --g-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-gap);
}
/* Grid template (default = original tdm_gallery behaviour) responds to data-columns. */
@media (min-width: 680px) {
  .tdm-gal[data-columns="2"] .tdm-gal__grid[data-template="grid"],
  .tdm-gal[data-columns="3"] .tdm-gal__grid[data-template="grid"],
  .tdm-gal[data-columns="4"] .tdm-gal__grid[data-template="grid"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tdm-gal[data-columns="3"] .tdm-gal__grid[data-template="grid"] { grid-template-columns: repeat(3, 1fr); }
  .tdm-gal[data-columns="4"] .tdm-gal__grid[data-template="grid"] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .tdm-gal[data-columns="4"] .tdm-gal__grid[data-template="grid"] { grid-template-columns: repeat(4, 1fr); }
}
/* Back-compat: rows saved before the template column existed have no
   data-template attribute. Treat a missing data-template as 'grid'. */
@media (min-width: 680px) {
  .tdm-gal[data-columns="2"] .tdm-gal__grid:not([data-template]),
  .tdm-gal[data-columns="3"] .tdm-gal__grid:not([data-template]),
  .tdm-gal[data-columns="4"] .tdm-gal__grid:not([data-template]) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tdm-gal[data-columns="3"] .tdm-gal__grid:not([data-template]),
  .tdm-gal[data-columns="4"] .tdm-gal__grid:not([data-template]) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .tdm-gal[data-columns="4"] .tdm-gal__grid:not([data-template]) { grid-template-columns: repeat(4, 1fr); }
}

.tdm-gal__item {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-3, 12px);
  margin: 0;
}

/* ---------- thumbnail ---------- */
.tdm-gal__thumb {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.tdm-gal__thumb--btn {
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.tdm-gal__thumb--btn:focus-visible {
  outline: 3px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: 3px;
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
}

/* The frame is the anti-CLS box: it reserves the aspect-ratio slot before the
   image loads. The Picture engine <picture> is display:contents globally, so
   the box lives on .tdm-gal__frame and the <img> fills it. */
.tdm-gal__frame {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  /* --g-radius resolves to the Design-layer radius unless the operator set an
     explicit per-image radius (img_radius), in which case view.php overrides it. */
  border-radius: var(--g-radius, var(--tdmx-radius, var(--tdm-radius-md, 6px)));
  background-color: var(--tdm-color-surface-3, #1C1C20);
  aspect-ratio: 4 / 3;
}
.tdm-gal[data-aspect="16x9"] .tdm-gal__frame { aspect-ratio: 16 / 9; }
.tdm-gal[data-aspect="4x3"]  .tdm-gal__frame { aspect-ratio: 4 / 3; }
.tdm-gal[data-aspect="1x1"]  .tdm-gal__frame { aspect-ratio: 1 / 1; }
/* auto: drop the fixed ratio so the image keeps its natural proportions */
.tdm-gal[data-aspect="auto"] .tdm-gal__frame { aspect-ratio: auto; }

.tdm-gal__frame .tdm-gal__pic,
.tdm-gal__frame picture {
  display: block;
}
.tdm-gal__frame img,
.tdm-gal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tdm-motion-slow, 0.45s) var(--tdm-ease-standard, ease);
}
/* auto: the image keeps natural height (no cover crop) */
.tdm-gal[data-aspect="auto"] .tdm-gal__frame img {
  height: auto;
}

/* Default subtle zoom on the lightbox button — kept for back-compat, but only
   when no explicit hover_fx is chosen (data-hover="none" or attribute absent),
   so the ported hover effects below own the interaction when selected. */
.tdm-gal__grid[data-hover="none"] .tdm-gal__thumb--btn:hover .tdm-gal__frame img,
.tdm-gal__grid[data-hover="none"] .tdm-gal__thumb--btn:focus-visible .tdm-gal__frame img,
.tdm-gal__grid:not([data-hover]) .tdm-gal__thumb--btn:hover .tdm-gal__frame img,
.tdm-gal__grid:not([data-hover]) .tdm-gal__thumb--btn:focus-visible .tdm-gal__frame img {
  transform: scale(1.04);
}

.tdm-gal__thumb--missing .tdm-gal__frame {
  display: grid;
  place-items: center;
}

/* ---------- caption ---------- */
.tdm-gal__caption {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
  margin: 0;
}

/* ======================================================================
   PORTED PRESENTATION — 4 layout templates + 5 hover effects.
   Ported from arech_image_gallery (S89 Elementor model), namespaced to
   .tdm-gal__*. Layout templates live on .tdm-gal__grid[data-template]; hover
   effects on .tdm-gal__grid[data-hover]. All gap rules consume --g-gap so the
   operator's img_gap (or the Design-layer fallback) drives spacing uniformly.
   ====================================================================== */

/* hover panels / overlay are inert unless their hover_fx is active */
.tdm-gal__hx-panel,
.tdm-gal__hx-overlay { display: none; }

/* ---------- TEMPLATE: JUSTIFIED MOSAIC ---------- */
.tdm-gal__grid[data-template="justified"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap);
  grid-template-columns: none;
}
.tdm-gal__grid[data-template="justified"] .tdm-gal__item {
  flex-grow: 1.4;
  flex-basis: 0;
  min-width: 200px;
  gap: var(--tdm-space-2, 8px);
}
.tdm-gal__grid[data-template="justified"] .tdm-gal__frame { aspect-ratio: auto; height: 200px; }
@media (min-width: 768px) {
  .tdm-gal__grid[data-template="justified"] .tdm-gal__frame { height: 240px; }
}
@media (max-width: 479px) {
  .tdm-gal__grid[data-template="justified"] { display: block; }
  .tdm-gal__grid[data-template="justified"] .tdm-gal__item { margin-bottom: var(--g-gap); }
  .tdm-gal__grid[data-template="justified"] .tdm-gal__frame { height: 220px; }
}

/* ---------- TEMPLATE: SPEC-PLATE GRID ---------- */
.tdm-gal__grid[data-template="spec-plate"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-gap);
}
@media (min-width: 480px) {
  .tdm-gal__grid[data-template="spec-plate"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tdm-gal__grid[data-template="spec-plate"] { grid-template-columns: repeat(3, 1fr); }
}
.tdm-gal__grid[data-template="spec-plate"] .tdm-gal__frame { aspect-ratio: 4 / 3; height: auto; }
.tdm-gal__spec-plate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(13, 13, 15, 0.94), rgba(13, 13, 15, 0));
  padding: var(--tdm-space-7, 48px) var(--tdm-space-4, 16px) var(--tdm-space-4, 16px);
}
.tdm-gal__spec-line {
  font-family: var(--tdm-font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tdm-color-accent, #E8651A);
}
/* spec-plate carries its caption ON the image → hide the static under-tile one */
.tdm-gal__grid[data-template="spec-plate"] .tdm-gal__caption { display: none; }

/* ---------- TEMPLATE: MASONRY WALL (CSS columns) ---------- */
.tdm-gal__grid[data-template="masonry"] {
  display: block;
  columns: 1;
  column-gap: var(--g-gap);
  grid-template-columns: none;
}
@media (min-width: 480px) { .tdm-gal__grid[data-template="masonry"] { columns: 2; } }
@media (min-width: 1024px) { .tdm-gal__grid[data-template="masonry"] { columns: 3; } }
.tdm-gal__grid[data-template="masonry"] .tdm-gal__item {
  break-inside: avoid;
  margin-bottom: var(--g-gap);
  display: inline-block;
  width: 100%;
}
/* masonry keeps the image's natural height (no crop) */
.tdm-gal__grid[data-template="masonry"] .tdm-gal__frame { aspect-ratio: auto; height: auto; }
.tdm-gal__grid[data-template="masonry"] .tdm-gal__frame img,
.tdm-gal__grid[data-template="masonry"] .tdm-gal__img { height: auto; }

/* ---------- TEMPLATE: SPOTLIGHT (grid; hover one bright, dim rest) ---------- */
.tdm-gal__grid[data-template="spotlight"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-gap);
}
@media (min-width: 480px) {
  .tdm-gal__grid[data-template="spotlight"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tdm-gal__grid[data-template="spotlight"] { grid-template-columns: repeat(4, 1fr); }
}
.tdm-gal__grid[data-template="spotlight"] .tdm-gal__frame { aspect-ratio: 1 / 1; height: auto; }
@media (hover: hover) {
  .tdm-gal__grid[data-template="spotlight"]:has(.tdm-gal__item:hover) .tdm-gal__frame { opacity: 0.4; }
  .tdm-gal__grid[data-template="spotlight"]:has(.tdm-gal__item:hover) .tdm-gal__item:hover .tdm-gal__frame {
    opacity: 1;
    transform: scale(1.03);
    z-index: 2;
    box-shadow: 0 0 0 1px var(--tdm-color-accent, #E8651A), 0 20px 50px rgba(0, 0, 0, 0.6);
  }
}

/* ======================================================================
   HOVER EFFECTS (data-hover on the grid) — gated on (hover:hover).
   ====================================================================== */
@media (hover: hover) {
  /* zoom: scale the image inside its overflow:hidden frame */
  .tdm-gal__grid[data-hover="zoom"] .tdm-gal__item:hover .tdm-gal__frame img,
  .tdm-gal__grid[data-hover="zoom"] .tdm-gal__item:hover .tdm-gal__img {
    transform: scale(1.08);
  }

  /* caption slide-up panel */
  .tdm-gal__grid[data-hover="caption"] .tdm-gal__hx-panel {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(13, 13, 15, 0.95), rgba(13, 13, 15, 0));
    padding: var(--tdm-space-6, 32px) var(--tdm-space-4, 16px) var(--tdm-space-4, 16px);
    transform: translateY(100%);
    transition: transform var(--tdm-dur-slow, 0.4s) var(--tdm-ease-standard, ease);
  }
  .tdm-gal__grid[data-hover="caption"] .tdm-gal__hx-title {
    font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
    font-weight: 600;
    font-size: 14px;
    color: #F5F4F0;
  }
  .tdm-gal__grid[data-hover="caption"] .tdm-gal__item:hover .tdm-gal__hx-panel,
  .tdm-gal__grid[data-hover="caption"] .tdm-gal__item:focus-within .tdm-gal__hx-panel {
    transform: translateY(0);
  }
  /* hide the static caption while the slide-up panel is the affordance */
  .tdm-gal__grid[data-hover="caption"] .tdm-gal__caption { display: none; }

  /* overlay + magnifier icon */
  .tdm-gal__grid[data-hover="overlay"] .tdm-gal__hx-overlay {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(13, 13, 15, 0.55);
    opacity: 0;
    transition: opacity var(--tdm-dur-base, 0.25s) var(--tdm-ease-standard, ease);
  }
  .tdm-gal__grid[data-hover="overlay"] .tdm-gal__hx-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1.5px solid #F5F4F0;
    border-radius: 999px;
    color: #F5F4F0;
    font-size: 22px;
    transform: scale(0.85);
    transition: transform var(--tdm-dur-base, 0.25s) var(--tdm-ease-standard, ease);
  }
  .tdm-gal__grid[data-hover="overlay"] .tdm-gal__item:hover .tdm-gal__hx-overlay,
  .tdm-gal__grid[data-hover="overlay"] .tdm-gal__item:focus-within .tdm-gal__hx-overlay {
    opacity: 1;
  }
  .tdm-gal__grid[data-hover="overlay"] .tdm-gal__item:hover .tdm-gal__hx-icon {
    transform: scale(1);
  }

  /* spotlight as a hover FX on ANY template: dim siblings, lift hovered */
  .tdm-gal__grid[data-hover="spotlight"]:has(.tdm-gal__item:hover) .tdm-gal__frame { opacity: 0.4; }
  .tdm-gal__grid[data-hover="spotlight"]:has(.tdm-gal__item:hover) .tdm-gal__item:hover .tdm-gal__frame {
    opacity: 1;
    transform: scale(1.03);
    z-index: 2;
    box-shadow: 0 0 0 1px var(--tdm-color-accent, #E8651A), 0 20px 50px rgba(0, 0, 0, 0.6);
  }
}

/* the frame needs a transition for opacity/transform on the spotlight effects */
.tdm-gal__grid[data-template="spotlight"] .tdm-gal__frame,
.tdm-gal__grid[data-hover="spotlight"] .tdm-gal__frame {
  transition: transform var(--tdm-dur-slow, 0.45s) var(--tdm-ease-standard, ease),
              opacity var(--tdm-dur-slow, 0.45s) var(--tdm-ease-standard, ease),
              box-shadow var(--tdm-dur-slow, 0.45s) var(--tdm-ease-standard, ease);
}

/* reduced motion: kill the ported transitions/transforms too */
@media (prefers-reduced-motion: reduce) {
  .tdm-gal__hx-panel,
  .tdm-gal__hx-overlay,
  .tdm-gal__hx-icon,
  .tdm-gal__grid[data-template="spotlight"] .tdm-gal__frame,
  .tdm-gal__grid[data-hover] .tdm-gal__frame { transition: none !important; }
  .tdm-gal__grid[data-hover] .tdm-gal__item:hover .tdm-gal__frame,
  .tdm-gal__grid[data-hover] .tdm-gal__item:hover .tdm-gal__frame img,
  .tdm-gal__grid[data-hover] .tdm-gal__item:hover .tdm-gal__img { transform: none; }
}

/* ---------- placeholder (no real images yet — TBD_OPERATOR) ---------- */
.tdm-gal__placeholder {
  border: 1px dashed color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 24%, transparent);
  border-radius: var(--tdm-radius-md, 6px);
  padding: var(--tdm-space-8, 64px) var(--tdm-space-5, 24px);
  text-align: center;
}
.tdm-gal__placeholder-label {
  font-family: var(--tdm-font-mono, monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdm-color-ink-2, #B0B0BA);
  margin: 0;
}

/* ---------- lightbox ---------- */
.tdm-gal__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
}
.tdm-gal__lightbox[hidden] { display: none; }

.tdm-gal__lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(2px);
}

.tdm-gal__lb-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  max-width: min(1200px, 96vw);
  max-height: 92vh;
}

.tdm-gal__lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tdm-space-3, 12px);
  min-width: 0;
}
.tdm-gal__lb-img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--tdm-radius-sm, 4px);
  background: #000;
}
.tdm-gal__lb-caption {
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  max-width: 60ch;
  margin: 0;
}
.tdm-gal__lb-caption[hidden] { display: none; }

.tdm-gal__lb-nav,
.tdm-gal__lb-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--tdm-motion-fast, 0.18s) var(--tdm-ease-standard, ease);
}
.tdm-gal__lb-nav:hover,
.tdm-gal__lb-close:hover { background: rgba(255, 255, 255, 0.24); }
.tdm-gal__lb-nav:focus-visible,
.tdm-gal__lb-close:focus-visible {
  outline: 3px solid var(--tdm-color-accent, #E8651A);
  outline-offset: 2px;
}

.tdm-gal__lb-close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  background: rgba(8, 8, 10, 0.7);
}

@media (max-width: 679px) {
  /* On narrow screens the nav arrows overlay the image edges to save width. */
  .tdm-gal__lb-dialog { gap: 0; }
  .tdm-gal__lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .tdm-gal__lb-prev { left: 4px; }
  .tdm-gal__lb-next { right: 4px; }
}

/* images never overflow their box (responsive manual) */
.tdm-gal img { max-width: 100%; height: auto; display: block; }

/* ---------- reduced motion: hard gate ---------- */
@media (prefers-reduced-motion: reduce) {
  .tdm-gal__frame img,
  .tdm-gal__lb-nav,
  .tdm-gal__lb-close { transition: none; }
  .tdm-gal__thumb--btn:hover .tdm-gal__frame img,
  .tdm-gal__thumb--btn:focus-visible .tdm-gal__frame img { transform: none; }
}

/* ---------- Concrete edit-mode shim ---------- */
.ccm-edit-mode .tdm-gal__thumb--btn { pointer-events: none; }


/* ============================================================
   ARECH Footer block — front-end styles.

   Port of the FOOTER in
     prototypes/footer-explore-2026-05-19/footer-A-classic.html
   re-tokenized to the theme tokens (main.css :root) and corrected to the
   responsive standard (responsive_manual_en_0.1):
     • min-width media queries ONLY (no max-width);
     • the prototype's --container-wide:1440 inner becomes the canonical
       container box (--container 1140/1200 + --container-px gutter) so the
       footer caps identically to the navbar + page content;
     • subtle white hairlines use color-mix() (modern CSS, S72 direction);
     • small body text uses --muted-accessible / --light for WCAG AA contrast
       (the prototype's flat --muted #6b6b75 fails 4.5:1 on --dark-2).

   ALL rules are scoped under `.arech-footer` so nothing leaks into the theme.
   ============================================================ */

.arech-footer {
    background: var(--dark-2);
    border-top: 1px solid color-mix(in oklch, var(--white) 4%, transparent);
    padding-block: var(--space-9) var(--space-7);
    color: var(--light);
    font-family: var(--font-body);
}

.arech-footer__inner {
    max-width: calc(var(--container) + 2 * var(--container-px));
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* -------- COLUMN GRID -------- */
.arech-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .arech-footer__cols {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "brand brand brand"
            "products company legal";
        gap: var(--space-5);
    }
    .arech-footer__col--brand    { grid-area: brand; }
    .arech-footer__col--products { grid-area: products; }
    .arech-footer__col--company  { grid-area: company; }
    .arech-footer__col--legal    { grid-area: legal; }
}
@media (min-width: 1024px) {
    .arech-footer__cols {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        grid-template-areas: "brand products company legal";
        gap: var(--space-6);
    }
}

/* Discrete vertical separators sitting in the middle of the column gap. */
@media (min-width: 768px) {
    .arech-footer__col--company,
    .arech-footer__col--legal { position: relative; }
    .arech-footer__col--company::before,
    .arech-footer__col--legal::before {
        content: '';
        position: absolute;
        inset-inline-start: calc(var(--space-5) / -2);
        inset-block: 0;
        inline-size: 1px;
        background: color-mix(in oklch, var(--white) 6%, transparent);
    }
}
@media (min-width: 1024px) {
    .arech-footer__col--products { position: relative; }
    .arech-footer__col--products::before {
        content: '';
        position: absolute;
        inset-inline-start: calc(var(--space-6) / -2);
        inset-block: 0;
        inline-size: 1px;
        background: color-mix(in oklch, var(--white) 6%, transparent);
    }
    .arech-footer__col--company::before,
    .arech-footer__col--legal::before {
        inset-inline-start: calc(var(--space-6) / -2);
    }
}

/* -------- BRAND COLUMN -------- */
.arech-footer__col--brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.arech-footer__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    align-self: flex-start;
}
.arech-footer__logo:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-footer__logo-img {
    height: 44px;
    width: auto;
    display: block;
}
.arech-footer__tagline {
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-accessible);
    max-width: 42ch;
    margin: 0;
}

/* Social media row */
.arech-footer__social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}
.arech-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--muted-accessible);
    text-decoration: none;
    border-radius: var(--radius-xs);
    transition: color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.arech-footer__social a:hover,
.arech-footer__social a:focus-visible {
    color: var(--off-white);
    background: color-mix(in oklch, var(--white) 5%, transparent);
}
.arech-footer__social a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-footer__social svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* -------- LINK COLUMNS -------- */
.arech-footer__head {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: var(--off-white);
    margin: 0 0 var(--space-5);
}
.arech-footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}
.arech-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: var(--light);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-footer__links a:hover,
.arech-footer__links a:focus-visible { color: var(--off-white); }
.arech-footer__links a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-footer__links .arech-footer__all {
    color: var(--orange);
    font-weight: 500;
    margin-top: var(--space-2);
}
.arech-footer__links .arech-footer__all:hover,
.arech-footer__links .arech-footer__all:focus-visible { color: var(--orange-bright); }

/* -------- BASE ROW -------- */
.arech-footer__base {
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid color-mix(in oklch, var(--white) 4%, transparent);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 1024px) {
    .arech-footer__base {
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: var(--space-8);
    }
}
.arech-footer__copyright {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-accessible);
    max-width: 60ch;
    margin: 0;
}
.arech-footer__addresses {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-accessible);
    font-style: normal;
}
@media (min-width: 1024px) {
    .arech-footer__addresses {
        text-align: end;
        align-items: flex-end;
    }
}

/* Images inside the footer never overflow (responsive standard §). */
.arech-footer img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -------- TDM CREDIT (discreet build attribution) -------- */
.arech-footer__credit {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid color-mix(in oklch, var(--white) 4%, transparent);
    display: flex;
    justify-content: flex-end;
}
.arech-footer__credit-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--space-2);
    border-radius: var(--radius-xs);
    text-decoration: none;
}
/* Gray by default, true colours only on hover/focus (discreet credit).
   Two-class selector so `height` beats the global `.arech-footer img`
   rule (which is class+type = higher specificity than a single class). */
.arech-footer__credit .arech-footer__credit-logo {
    height: 58px;
    width: auto;
    display: block;
    filter: grayscale(1);
    opacity: 0.45;
    transition: filter var(--motion-fast) var(--ease-standard),
                opacity var(--motion-fast) var(--ease-standard);
}
.arech-footer__credit-link:hover .arech-footer__credit-logo,
.arech-footer__credit-link:focus-visible .arech-footer__credit-logo {
    filter: grayscale(0);
    opacity: 1;
}
.arech-footer__credit-link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .arech-footer__social a { transition: none; }
    .arech-footer__links a { transition: none; }
    .arech-footer__credit-logo { transition: none; }
}


/* ============================================================================
   TDM Back To Top — view styles. Ported from prototypes/back-to-top/index.html
   (v1.0), re-namespaced .btt-* → .tdm-btt-*, driven by data-* attributes
   (model / theme / shape / size / position) + changed-only scoped custom props
   (--tdm-btt-icon / --tdm-btt-bg / --tdm-btt-size / --tdm-btt-bd-w/-c) that fall
   back to the theme presets below. Modern CSS on purpose: conic-gradient,
   color-mix, :has() not required. Brand tokens come from tdm_blocks/tokens.css.
   ============================================================================ */

/* The reveal sentinel — an invisible 1px marker placed at the threshold; the
   IntersectionObserver in view.js toggles .is-visible on the button. */
.tdm-btt-sentinel {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  /* `top` is set inline from the reveal_threshold setting. */
}

/* ---------------------------------------------------------------------------
   1. Base button — fixed, hidden until revealed. Defaults via custom props so
      the changed-only inline <style> can override per instance.
   --------------------------------------------------------------------------- */
.tdm-btt {
  /* size + hit area (kept >= 44px even at S 40 via min-width/height) */
  --tdm-btt-size: 48px;
  --tdm-btt-hit: 48px;
  --tdm-btt-radius: 50%;
  --tdm-btt-bd-w: 0px;
  --tdm-btt-bd-c: transparent;
  --tdm-btt-inset: var(--tdm-space-5, 24px);
  --tdm-btt-p: 0; /* scroll progress 0..1 for the gauge */

  position: fixed;
  z-index: 8000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tdm-btt-hit);
  min-height: var(--tdm-btt-hit);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--tdm-font-mono, system-ui, sans-serif);

  /* reveal state (hidden + out of tab order until shown) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-base, 250ms) var(--tdm-ease-emphatic, ease),
    visibility 0s linear var(--tdm-dur-base, 250ms);
}

.tdm-btt.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-slow, 400ms) var(--tdm-ease-emphatic, ease);
}

/* size keys (the inline override sets --tdm-btt-size; we also pad the hit area) */
.tdm-btt[data-size="s"] { --tdm-btt-size: 40px; --tdm-btt-hit: 44px; }
.tdm-btt[data-size="m"] { --tdm-btt-size: 48px; --tdm-btt-hit: 48px; }
.tdm-btt[data-size="l"] { --tdm-btt-size: 56px; --tdm-btt-hit: 56px; }

/* ---------------------------------------------------------------------------
   2. Theme presets — seed --tdm-btt-bg / --tdm-btt-icon / --tdm-btt-ring.
      The changed-only inline <style> overrides --tdm-btt-bg / --tdm-btt-icon
      when the operator sets an explicit colour.
   --------------------------------------------------------------------------- */
.tdm-btt[data-theme="dark"] {
  --tdm-btt-bg: var(--tdm-color-accent, #E8651A);
  --tdm-btt-icon: var(--tdm-color-ink, #F5F4F0);
  --tdm-btt-ring: var(--tdm-color-accent, #E8651A);
}
.tdm-btt[data-theme="light"] {
  --tdm-btt-bg: #FFFFFF;
  --tdm-btt-icon: #B84A0C; /* AA-safe orange-link on paper */
  --tdm-btt-ring: #B84A0C;
}

/* ---------------------------------------------------------------------------
   3. Shape → radius (data-shape). Gauge + pillar override internally below.
   --------------------------------------------------------------------------- */
.tdm-btt[data-shape="circle"]  { --tdm-btt-radius: 50%; }
.tdm-btt[data-shape="rounded"] { --tdm-btt-radius: var(--tdm-radius-md, 6px); }
.tdm-btt[data-shape="square"]  { --tdm-btt-radius: 2px; }
.tdm-btt[data-shape="pill"]    { --tdm-btt-radius: calc(var(--tdm-btt-size) / 2); }

/* ---------------------------------------------------------------------------
   4. Position presets — inset clears the mobile address bar.
   --------------------------------------------------------------------------- */
.tdm-btt[data-position="bottom-right"]  { right: var(--tdm-btt-inset); bottom: max(var(--tdm-btt-inset), env(safe-area-inset-bottom)); left: auto; }
.tdm-btt[data-position="bottom-left"]   { left: var(--tdm-btt-inset); bottom: max(var(--tdm-btt-inset), env(safe-area-inset-bottom)); right: auto; }
.tdm-btt[data-position="bottom-center"] { left: 50%; bottom: max(var(--tdm-btt-inset), env(safe-area-inset-bottom)); right: auto; transform: translateX(-50%) translateY(12px); }
.tdm-btt[data-position="bottom-center"].is-visible { transform: translateX(-50%) translateY(0); }

@media (min-width: 768px) {
  .tdm-btt { --tdm-btt-inset: var(--tdm-space-6, 32px); }
}

/* ---------------------------------------------------------------------------
   5. The visible "face" — the coloured chip the user sees.
   --------------------------------------------------------------------------- */
.tdm-btt__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tdm-btt-size);
  height: var(--tdm-btt-size);
  border-radius: var(--tdm-btt-radius);
  background: var(--tdm-btt-bg);
  border: var(--tdm-btt-bd-w) solid var(--tdm-btt-bd-c);
  color: var(--tdm-btt-icon);
  transition:
    background var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    box-shadow var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease);
}
.tdm-btt:hover  .tdm-btt__face { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, #000 35%, transparent); }
.tdm-btt:active .tdm-btt__face { transform: translateY(0); }
.tdm-btt:focus-visible { outline: none; }
.tdm-btt:focus-visible .tdm-btt__face { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-btt-ring) 80%, transparent); }

.tdm-btt__disc { display: inline-flex; align-items: center; justify-content: center; }
.tdm-btt__icon { width: 45%; height: 45%; display: block; line-height: 0; }
.tdm-btt__icon svg { width: 100%; height: 100%; display: block; }

/* stacked label (model 3) — hidden by default */
.tdm-btt__label {
  display: none;
  font-family: var(--tdm-font-mono, system-ui, sans-serif);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--tdm-btt-icon);
  line-height: 1;
}

/* live % readout (gauge) — hidden by default */
.tdm-btt__pct {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--tdm-font-mono, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tdm-btt-icon);
}

/* ---------------------------------------------------------------------------
   MODEL: scroll-gauge (conic progress ring)
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__face { border-radius: 50%; background: transparent; padding: 0; }
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--tdm-btt-ring) calc(var(--tdm-btt-p) * 360deg),
    color-mix(in srgb, var(--tdm-btt-ring) 22%, transparent) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__disc {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--tdm-btt-bg);
}
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__icon { width: 42%; height: 42%; }
.tdm-btt[data-model="scroll-gauge"].show-pct .tdm-btt__icon { opacity: 0; }
.tdm-btt[data-model="scroll-gauge"].show-pct .tdm-btt__pct { display: inline-flex; }

/* The ring/disc are only meaningful for the gauge — hide for other models. */
.tdm-btt:not([data-model="scroll-gauge"]) .tdm-btt__ring { display: none; }

/* ---------------------------------------------------------------------------
   MODEL: edge-pillar (half-pill welded to the edge)
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="edge-pillar"] { bottom: 50%; }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-right"]  { right: 0; left: auto; transform: translateY(40px); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-right"].is-visible { transform: translateY(0); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"]   { left: 0; right: auto; transform: translateY(40px); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"].is-visible  { transform: translateY(0); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"] { left: 0; right: auto; transform: translateY(40px); } /* center N/A → docks left */
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"].is-visible { transform: translateY(0); }
.tdm-btt[data-model="edge-pillar"] .tdm-btt__face {
  width: calc(var(--tdm-btt-size) * 0.74);
  height: calc(var(--tdm-btt-size) * 1.9);
  border-radius: 10px 0 0 10px; /* rounded only on the inboard side */
}
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"] .tdm-btt__face,
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"] .tdm-btt__face { border-radius: 0 10px 10px 0; }
.tdm-btt[data-model="edge-pillar"]:hover .tdm-btt__face { transform: translateX(-3px); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"]:hover .tdm-btt__face,
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"]:hover .tdm-btt__face { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   MODEL: stacked-label
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="stacked-label"] .tdm-btt__face {
  flex-direction: column;
  gap: 1px;
  width: auto;
  min-width: var(--tdm-btt-size);
  height: auto;
  min-height: var(--tdm-btt-size);
  padding: 8px 12px;
}
.tdm-btt[data-model="stacked-label"] .tdm-btt__disc { flex-direction: column; }
.tdm-btt[data-model="stacked-label"] .tdm-btt__icon { width: 18px; height: 18px; }
.tdm-btt[data-model="stacked-label"] .tdm-btt__label { display: block; }

/* ---------------------------------------------------------------------------
   MODEL: notch-riser (rises from below with overshoot)
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="notch-riser"][data-position="bottom-right"],
.tdm-btt[data-model="notch-riser"][data-position="bottom-left"] { transform: translateY(140%); }
.tdm-btt[data-model="notch-riser"][data-position="bottom-center"] { transform: translateX(-50%) translateY(140%); }
.tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-right"],
.tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-left"] {
  transform: translateY(0);
  transition: transform var(--tdm-dur-slow, 400ms) var(--tdm-ease-emphatic, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease);
}
.tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-center"] {
  transform: translateX(-50%) translateY(0);
  transition: transform var(--tdm-dur-slow, 400ms) var(--tdm-ease-emphatic, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease);
}
.tdm-btt[data-model="notch-riser"] .tdm-btt__face { border-radius: min(var(--tdm-btt-radius), 6px); }

/* MODEL: plain-chevron uses the base .tdm-btt__face as-is — nothing special. */

/* ---------------------------------------------------------------------------
   Reduced motion: no overshoot, no float, no transform reveal — fade only.
   Reveal still works; scroll is instant (handled in view.js).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tdm-btt,
  .tdm-btt.is-visible,
  .tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-right"],
  .tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-left"] {
    transform: none !important;
    transition: opacity var(--tdm-dur-base, 250ms) linear, visibility 0s !important;
  }
  .tdm-btt[data-position="bottom-center"],
  .tdm-btt[data-position="bottom-center"].is-visible { transform: translateX(-50%) !important; }
  .tdm-btt:hover .tdm-btt__face,
  .tdm-btt[data-model="edge-pillar"]:hover .tdm-btt__face { transform: none; }
}