/* ============================================================
   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;
    }
}


/* ============================================================================
   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: chips, dots, arrows, borders, focus glow, accent-as-text on dark (ARECH --orange). UNCHANGED — do NOT repoint. */
  --tdm-color-accent-hover: #FF7A2F;
  --tdm-color-accent-active:#C4510E;
  --tdm-color-on-accent:    #FFFFFF;   /* text ON a button fill (white label) */

  /* --- Primary-button FILL (AA-safe, band-independent) ---------------------
     White (#FFFFFF) on brand orange #E8651A is only 3.33:1 — FAIL for the 15px
     button label (AA needs 4.5:1). The button fill is its OWN accent, separate
     from --tdm-color-accent: ONLY the solid/primary button BACKGROUND points
     here, so chips/dots/arrows/borders/accent-text keep brand orange #E8651A.
     The pair is band-independent (label-vs-fill is internal to the button), so
     one stable fill works on both light and dark bands.
     AA (white #FFFFFF, WCAG2): rest #B0470B = 5.60:1 · hover = 6.80:1 ·
     active = 8.25:1 — all PASS 4.5:1 AA for the 15px label. */
  --tdm-color-btn-fill:        #B0470B;
  --tdm-color-btn-fill-hover:  color-mix(in srgb, var(--tdm-color-btn-fill) 88%, #000);  /* ≈ #9B3E0A, white 6.80:1 PASS */
  --tdm-color-btn-fill-active: color-mix(in srgb, var(--tdm-color-btn-fill) 76%, #000);  /* ≈ #863609, white 8.25:1 PASS */
  /* 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. */
  /* 'window' bg_width (S129) emits --tdmx-block-w:100vw to break the block out
     to the viewport; default 'auto' = byte-identical (block-level fills parent). */
  width: var(--tdmx-block-w, auto);
  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 --tdm-color-accent-text-light
     (#B0470B = 5.09: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;
  /* 'window' bg_width (S129) emits --tdmx-inner-pad:0 to drop the gutter so the
     content spans the viewport edge-to-edge; default = the responsive gutter. */
  padding-inline: var(--tdmx-inner-pad, 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;
  /* S129: custom properties inherit, so a child block inside a 'window'
     (edge-to-edge) parent would otherwise inherit the 100vw breakout vars and
     blow itself out to the viewport. Reset the two harmful breakout vars to
     their defaults on every nested block (byte-identical for non-window trees).
     A nested block that is ITSELF set to 'window' re-emits these on its own
     higher-specificity .tdm-i-<bID> rule, which is printed after this sheet. */
  --tdmx-block-w: auto;
  --tdmx-block-mi: 0;
}
.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);
}
/* Primary button FILL points at the AA-safe button-fill token (white label on
   #B0470B = 5.60:1), NOT --tdmx-accent — so chips/dots/borders keep brand orange.
   The fill is band-independent (label-vs-fill is internal). */
.tdm-btn--primary { background: var(--tdm-color-btn-fill); color: var(--tdm-color-on-accent); }
.tdm-btn--primary:hover { background: var(--tdm-color-btn-fill-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; }
}


/* ARECH Subpage Hero — Editorial (".eh") view.css
   Port of /prototypes/about-hub-v2 `.eh` header. Namespaced `arech-eh`.
   Container law: single uniform --container (1140 -> 1200), NOT --container-wide. */

.arech-eh {
    position: relative;
    background: var(--tdmx-bg, var(--dark));
    min-height: 30vh;
    padding-block: var(--tdmx-pad-top, var(--space-7)) var(--tdmx-pad-bottom, var(--space-7));
    padding-inline: 16px;
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 480px)  { .arech-eh { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px)  { .arech-eh { padding-left: 32px; padding-right: 32px; min-height: 36vh; } }
@media (min-width: 1024px) { .arech-eh { padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-7)); padding-inline: 40px; min-height: 40vh; } }

/* --- News/Blog LIST heroes (list_hero template) — EQUAL top/bottom gap ---
   The block's declared default is space-7/space-7, but the generic >=1024 rule
   above uses space-9 on TOP, which made the list heroes asymmetric (96 top /
   48 bottom). Scope a symmetric pair (smaller gap = space-7 / 48px) to the
   .page-listhero wrapper so ONLY /news + /blog change; About (about_detail) keeps
   its own rhythm. justify-content:center makes the column vertically centred too,
   so a short header (no CTAs) sits symmetrically inside the min-height band. */
.page-listhero .arech-eh__inner { justify-content: center; }
@media (min-width: 1024px) {
    .page-listhero .arech-eh {
        padding-block: var(--tdmx-pad-top, var(--space-7)) var(--tdmx-pad-bottom, var(--space-7));
    }
}

/* --- Ambient LED-matrix background (decorative) --- */
.arech-eh__led-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 30%;
    transform: perspective(800px) rotateY(-8deg);
    transform-origin: right center;
    opacity: 0;
    transition: opacity var(--motion-reveal) var(--ease-standard);
    z-index: -3;
    pointer-events: none;
    -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;
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    gap: 2px;
    padding: 8px;
}
.arech-eh__led-bg.is-visible { opacity: 0.14; }
@media (min-width: 768px)  { .arech-eh__led-bg { width: 45%; } .arech-eh__led-bg.is-visible { opacity: 0.16; } }
@media (min-width: 1024px) { .arech-eh__led-bg { width: 55%; } .arech-eh__led-bg.is-visible { opacity: 0.20; } }

.arech-eh__led-dot {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--orange);
    opacity: var(--base, 0.1);
}
@keyframes arechEhLedFlicker { 0%, 100% { opacity: var(--base, 0.1); } 50% { opacity: var(--peak, 0.7); } }

.arech-eh__led-grid {
    position: absolute;
    inset: -56px 0 0 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--orange) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--orange) 7%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
}
.arech-eh__warmglow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 60% 40%, color-mix(in srgb, var(--orange) 12%, transparent) 0%, transparent 60%);
}
.arech-eh__bottom-fade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, transparent 40%, var(--dark) 100%);
}
.arech-eh::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: color-mix(in srgb, #fff 4%, transparent); z-index: 1;
}

/* --- Content --- */
.arech-eh__inner {
    position: relative;
    z-index: 2;
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
    text-align: var(--tdmx-align, left);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: inherit;
}
.arech-eh__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--off-white); /* orange fails AA at 11px; keep the orange tick (::before) for the brand accent */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 var(--space-4);
}
.arech-eh__eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--tdmx-accent, var(--orange)); }

.arech-eh__h1 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--tdmx-heading, var(--off-white));
    max-width: 22ch;
    margin: 0;
}
.arech-eh__accent { color: var(--tdmx-accent, var(--orange)); }

.arech-eh__lead {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
    color: var(--tdmx-text, var(--light));
    max-width: 60ch;
    margin: var(--space-5) 0 0;
}
.arech-eh__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* --- Entrance (CSS-only, safe: content is visible by default) --- */
@media (prefers-reduced-motion: no-preference) {
    .arech-eh__eyebrow { animation: arechEhFadeUp var(--motion-reveal) var(--ease-decelerate) var(--stagger-1) both; }
    .arech-eh__h1      { animation: arechEhFadeUp var(--motion-reveal) var(--ease-decelerate) var(--stagger-2) both; }
    .arech-eh__lead    { animation: arechEhFadeUp var(--motion-reveal) var(--ease-decelerate) var(--stagger-3) both; }
    .arech-eh__ctas    { animation: arechEhFadeUp var(--motion-reveal) var(--ease-decelerate) var(--stagger-4) both; }
    .arech-eh--led .arech-eh__led-grid.is-drift { animation: arechEhGridMove var(--motion-ambient-fast) var(--ease-linear) infinite; }
    .arech-eh__led-dot { animation: arechEhLedFlicker var(--d, 4s) ease-in-out var(--delay, 0s) infinite; }
}
@keyframes arechEhFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes arechEhGridMove { from { transform: translateY(0); } to { transform: translateY(56px); } }

@media (prefers-reduced-motion: reduce) {
    .arech-eh__eyebrow, .arech-eh__h1, .arech-eh__lead, .arech-eh__ctas {
        opacity: 1; transform: none; animation: none;
    }
    .arech-eh__led-dot, .arech-eh__led-grid { animation: none; }
}


/* ============================================================
   ARECH Sticky Section Tabs — block-47 view.css
   Port of /prototypes/subpage-header-explore-2026-05-20/header-2-product-led.html
   lines ~307-348 (`.tabs` / `.tabs-inner` / `.tab`).
   BEM-renamed to `.arech-sst__*` for namespace isolation.
   All values reference design-system-v1.md tokens (no magic numbers).
   ============================================================ */

.arech-sst {
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    /* TDM Design layer: each property consumes a per-instance --tdmx-* var
       (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
       to the block's original hardcoded value — so default = byte-identical.
       This bar IS the band (sticky + backdrop-filter), so we recolour the bar
       DIRECTLY rather than painting a full-bleed pseudo-element band behind it
       (a band behind a backdrop-filtered element breaks the blur). Default keeps
       the glassy bar; an operator-picked Design bg colour/gradient replaces it. */
    background: var(--tdmx-bg, rgba(13, 13, 15, 0.92));
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    /* Band padding — default 0px so height stays driven by the tabs' own
       padding + 44px min-height (unchanged). Operator pad_top/pad_bottom only. */
    padding-block: var(--tdmx-pad-top, 0px) var(--tdmx-pad-bottom, 0px);
    /* Keep the bg-image/overlay pseudo z-index local. Sticky already
       establishes a positioning context, so the pseudos' inset:0 resolves
       against this element. */
    isolation: isolate;
}

/* TDM universal background image + overlay (mirrors tdm_blocks base.css /
   arech_feature_cards, scoped to .arech-sst). Active only when the vars are set;
   otherwise none/transparent → invisible → zero visual change at default.
   These sit BEHIND content; the bar's own --tdmx-bg remains the backdrop-filter
   blur source, so default glass + an optional operator image co-exist. */
.arech-sst::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-sst::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}

.arech-sst__inner {
    /* S72 — INTENTIONAL exception to the multi-element canon (padding-on-band):
       this inner is the horizontal SCROLL container (overflow-x:auto below),
       so the gutter must stay on the inner — otherwise the first/last tab
       loses its breathing room when scrolled to the ends. The calc() box
       (content + both gutters) keeps the content edge at (vp − --container)/2,
       identical to every other section. Do NOT move this gutter to the band. */
    max-width: calc(var(--container) + 2 * var(--container-px));
    margin-inline: auto;
    padding-inline: var(--container-px);
    display: flex;
    /* TDM align: --tdmx-align resolves to the keyword left|center|right, which
       modern justify-content (CSS Box Alignment) accepts. Default flex-start
       (== left) → unchanged. Only matters when tabs fit; on overflow they scroll. */
    justify-content: var(--tdmx-align, flex-start);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.arech-sst__inner::-webkit-scrollbar { display: none; }

/* ---------- Common tab geometry (shared by underline + pill variants) ---------- */
.arech-sst__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;  /* WCAG 2.2 touch target floor */
    padding: 14px 18px;
    font-family: var(--font-mono);    /* G1-fix B2: was 'DM Mono', monospace — tokenised so theme font swaps stay consistent */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tdmx-text, var(--muted-accessible));
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard);
}

.arech-sst__tab:hover,
.arech-sst__tab:focus-visible {
    color: var(--tdmx-accent, var(--orange));
}

.arech-sst__tab:focus-visible {
    outline: 2px solid var(--tdmx-accent, var(--orange));
    outline-offset: -2px;
}

/* ---------- V1 — Underline-on-active (canonical, default) ---------- */
.arech-sst--underline .arech-sst__tab {
    border-bottom: 2px solid transparent;
}

.arech-sst--underline .arech-sst__tab.is-active {
    color: var(--tdmx-accent, var(--orange));
    border-bottom-color: var(--tdmx-accent, var(--orange));
}

/* ---------- V2 — Pill-on-active (alternative) ---------- */
.arech-sst--pill .arech-sst__inner {
    gap: var(--space-2);              /* G1-tokenise: was 6px — closest token (8px) */
    padding-block: var(--space-2);    /* G1-tokenise: was 8px */
}

.arech-sst--pill .arech-sst__tab {
    /* G1-fix B1: was min-height 36px / padding 8px 16px — below WCAG 2.2 AA 44×44 touch-target floor */
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
}

.arech-sst--pill .arech-sst__tab.is-active {
    color: var(--off-white);
    background-color: var(--tdmx-accent, var(--orange));
    border-color: var(--tdmx-accent, var(--orange));
}

.arech-sst--pill .arech-sst__tab.is-active:hover,
.arech-sst--pill .arech-sst__tab.is-active:focus-visible {
    color: var(--off-white);
}

/* ---------- Reduced-motion: hard gate per CLAUDE.md WCAG 2.2 AA floor ---------- */
@media (prefers-reduced-motion: reduce) {
    .arech-sst__tab {
        transition: none;
    }
}

/* ---------- Concrete edit-mode shim — un-sticky tabs so editor toolbar stays usable ---------- */
.ccm-edit-mode .arech-sst {
    position: relative;
    top: auto;
    z-index: auto;
}

/* ---------- Print: strip chrome ---------- */
@media print {
    .arech-sst { display: none; }
}


/* ======================================================================
   TDM Media + Text — image + text split band (portable port of arech_media_text).
   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).

   The .tdm-block wrapper (base.css) already drives outer padding/margin,
   max-width, alignment, background + overlay, the heading colour + heading font.
   This file adds the two-column grid (image left/right + width share), the
   no-image full-width collapse, the text-column styling, and a self-contained
   solid/outline/ghost button look (so the CTA never depends on tdm_button).

   Namespaced .tdm-mt__* classes only — NOT the package-global .reveal class.
   Breakpoints are min-width ONLY (responsive_manual_en_0.1.md): stack → two
   columns at LG 768.
   ====================================================================== */

/* =====================================================================
   BAND TONE — light/dark (canonical, per tdm-band-tone-model-v1).
   view.php emits $design->bandAttr() on the wrapper (view.php:105), so these
   rules are LIVE (not inert). Heading + body INK flip FREE via the GLOBAL hook
   base.css:83-99 (--tdmx-heading / --tdmx-text) — NOT re-declared here. This
   block only re-tones what the global hook can't reach: the OWN band fill, the
   media placeholder / video surfaces, and accent-as-TEXT (eyebrow, body links,
   callout number, list markers, outline-button label) via a LOCAL link var.

   PLAIN attribute selectors only — NEVER :where() (0,0,0 loses to the base
   .tdm-mt class 0,1,0 and surfaces stay dark on a light band — the P4 bug).
   .tdm-mt[data-band="…"] = (0,1,1): beats the base class, still loses to the
   per-instance emitter .tdm-block.tdm-i-<bID> (0,2,0) so operator bg wins.
   With d_band=auto the wrapper carries NO [data-band] → none of these match →
   the dark-first default render is byte-identical.
   ===================================================================== */
.tdm-mt {
  /* media placeholder / image-frame surface (§2b row 4) */
  --mt-media-bg:   var(--tdm-color-surface-2, #141416);
  --mt-media-bg-2: var(--tdm-color-surface-3, #1C1C20);                /* video media surface (raised) */
  /* accent-as-TEXT — dark default = brand orange (AA ~5.74:1 on dark). */
  --mt-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

/* LIGHT band — own light fill (--tdmx-bg lever, base.css:56 paints it) + light
   media surfaces + AA-safe accent-as-text. Heading/body ink flip globally. */
.tdm-mt[data-band="light"] {
  --tdmx-bg:       color-mix(in srgb, #000 2%, #FFFFFF);               /* own near-paper band fill */
  --mt-media-bg:   color-mix(in srgb, #000 6%, #FFFFFF);              /* media placeholder on cream (§2b row 4) */
  --mt-media-bg-2: color-mix(in srgb, #000 8%, #FFFFFF);              /* video surface on cream */
  --mt-link-color: var(--tdm-color-accent-text-light, #B0470B);       /* AA-safe accent-as-TEXT on cream (~5.1:1) */
  /* heading/body ink + --tdmx-accent-text flipped globally (base.css:83-91) */
}

/* FORCED DARK band — pins own dark fill + dark surfaces so a block dropped on a
   dark image/gradient (auto-luminance can't read a hex) is guaranteed legible.
   Heading/body ink pinned by base.css:95-99. Plain attribute selector. */
.tdm-mt[data-band="dark"] {
  --tdmx-bg:       var(--tdm-color-surface, #0D0D0F);                  /* own dark fill */
  --mt-media-bg:   var(--tdm-color-surface-2, #141416);
  --mt-media-bg-2: var(--tdm-color-surface-3, #1C1C20);
  --mt-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

/* ---------- grid ---------- */
.tdm-mt__inner {
  display: grid;
  grid-template-columns: 1fr;          /* mobile-first: single stacked column */
  gap: var(--tdmx-gap, var(--tdm-space-6, 32px));
  align-items: center;
}

/* mobile_order = image-first: flip the visual stack order on phones via CSS
   `order` only — the DOM order (text first) is unchanged so reading order +
   the no-CSS fallback stay correct. Resets at LG where media_position governs. */
.tdm-mt--mobile-image-first .tdm-mt__media { order: -1; }
.tdm-mt--mobile-image-first .tdm-mt__text  { order: 0; }

@media (min-width: 768px) {
  /* default two-column split = 50 / 50 (media_width = half). */
  .tdm-mt__inner { grid-template-columns: 1fr 1fr; }

  /* reset any mobile order flip — desktop side is driven by media_position. */
  .tdm-mt--mobile-image-first .tdm-mt__media,
  .tdm-mt--mobile-image-first .tdm-mt__text { order: 0; }

  /* media_width share (text column listed FIRST in the DOM). */
  .tdm-mt--w-half       .tdm-mt__inner { grid-template-columns: 1fr 1fr; }
  .tdm-mt--w-two-fifths .tdm-mt__inner { grid-template-columns: 3fr 2fr; }
  .tdm-mt--w-third      .tdm-mt__inner { grid-template-columns: 2fr 1fr; }

  /* media_position = left → image (2nd in DOM) renders in the first column,
     and the width share mirrors so the wide side follows the visual side. */
  .tdm-mt--media-left .tdm-mt__text  { order: 2; }
  .tdm-mt--media-left .tdm-mt__media { order: 1; }
  .tdm-mt--media-left.tdm-mt--w-two-fifths .tdm-mt__inner { grid-template-columns: 2fr 3fr; }
  .tdm-mt--media-left.tdm-mt--w-third      .tdm-mt__inner { grid-template-columns: 1fr 2fr; }

  /* vertical_align: column cross-axis alignment (default center = the base
     rule above; only top|bottom emit a class, so unchanged rows are identical). */
  .tdm-mt--valign-top    .tdm-mt__inner { align-items: start; }
  .tdm-mt--valign-bottom .tdm-mt__inner { align-items: end; }

  /* no-image → one full-width text column (overrides the generic 768 rule). */
  .tdm-mt--no-media .tdm-mt__inner { grid-template-columns: 1fr; }
  .tdm-mt--no-media .tdm-mt__heading { max-width: 28ch; }
  .tdm-mt--no-media .tdm-mt__body    { max-width: 72ch; }
}

/* media_sticky: the media column holds while the (taller) text column scrolls.
   Desktop only (XL 1024+) — phones/tablets never sticky. align-self:start lets
   it stick; when the text column is shorter the media simply scrolls normally. */
@media (min-width: 1024px) {
  .tdm-mt--sticky-media .tdm-mt__media {
    position: sticky;
    top: var(--tdm-sticky-top, 88px);
    align-self: start;
  }
}

/* ---------- text column ---------- */
.tdm-mt__text {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-4, 16px);
  min-width: 0;
}
.tdm-mt__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;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* accent-as-TEXT: routes through the LOCAL --mt-link-color band var (§2a-link),
     NOT the global --tdmx-accent-text hook, which does not reliably reach
     descendants once the block declares its own [data-band] vars below. */
  color: var(--mt-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));
}
.tdm-mt__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). Stated
     explicitly here so the block reads correctly even without that base rule. */
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-weight: var(--tdm-weight-headline, 600);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  max-width: 24ch;
  text-wrap: balance;
}
.tdm-mt__body {
  font-family: var(--tdmx-font-body, var(--tdm-font-body, system-ui, sans-serif));
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  line-height: 1.65;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  max-width: 60ch;
}
.tdm-mt__body p { margin: 0 0 var(--tdm-space-4, 16px); }
.tdm-mt__body p:last-child { margin-bottom: 0; }
/* body links — accent-as-TEXT: BOTH rest + hover route through the LOCAL link var
   so neither state drops to the dark-band orange (#E8651A 3.19:1) on a light band. */
.tdm-mt__body a { color: var(--mt-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A))); }
.tdm-mt__body a:hover { color: var(--mt-link-color, var(--tdm-color-accent-hover, #FF7A2F)); text-decoration: underline; }

/* ---------- AUTO light-band ink remap — REMOVED (S106 reconciliation, spec §1e / §5b) ----------
   The 6-selector scoped remap that used to live here is now redundant: heading,
   body, callout-label, list and ghost-button all read --tdmx-heading / --tdmx-text,
   which the global base.css .tdm-block[data-band="light"] hook flips in one place,
   so all five ink elements re-tone for the cream band automatically. Body links
   stay accent (the global hook never touches --tdmx-accent). Deleting this block
   removes the duplicate without reintroducing the S106 contrast bug. */

/* ---------- numbered callout chip (parity with arech_media_text) ----------
   A small inline badge near the heading: accent number + small uppercase label.
   Consumes the shared Design accent token so it tracks d_accent_color; the text
   colour uses --tdmx-text so it stays legible on both light + dark bands. */
.tdm-mt__callout {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
}
.tdm-mt__callout-num {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  /* accent-as-TEXT (big number glyph) — local link var (§2a-link). */
  color: var(--mt-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));
}
.tdm-mt__callout-label {
  font-size: var(--tdm-text-eyebrow, 11px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- optional body list ---------- */
.tdm-mt__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-3, 12px);
  font-family: var(--tdmx-font-body, var(--tdm-font-body, system-ui, sans-serif));
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  line-height: 1.55;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  max-width: 60ch;
}
.tdm-mt__list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* check — accent SVG marker (default). */
.tdm-mt__list--check .tdm-mt__list-marker {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
  /* check-mark glyph = accent-as-TEXT → local link var (§2a-link). */
  color: var(--mt-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));
}
/* disc — native bullets restored on the <ul>. */
.tdm-mt__list--disc {
  list-style: disc;
  padding-left: 1.25em;
  gap: var(--tdm-space-2, 8px);
}
.tdm-mt__list--disc .tdm-mt__list-item { display: list-item; }
/* number — native ordered markers on the <ol>. */
.tdm-mt__list--number {
  list-style: decimal;
  padding-left: 1.4em;
  gap: var(--tdm-space-2, 8px);
}
.tdm-mt__list--number .tdm-mt__list-item { display: list-item; }
/* none — plain, no marker. */
.tdm-mt__list--none { list-style: none; }
.tdm-mt__list--disc::marker,
.tdm-mt__list--number .tdm-mt__list-item::marker {
  /* native list markers = accent-as-TEXT → local link var (§2a-link). */
  color: var(--mt-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));
}
.tdm-mt__list-text { min-width: 0; }

/* ---------- media column ---------- */
.tdm-mt__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  /* media placeholder/frame surface — re-tones on a light band via --mt-media-bg
     (§2b row 4: raised card / image frame / media placeholder). */
  background-color: var(--mt-media-bg, var(--tdm-color-surface-2, #141416));
}
.tdm-mt__media :where(picture, img) {
  display: block;
  width: 100%;
  height: auto;
}
.tdm-mt__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ---------- video media (click-to-load, privacy-friendly) ---------- */
.tdm-mt__media--video { background-color: var(--mt-media-bg-2, var(--tdm-color-surface-3, #1C1C20)); }
.tdm-mt__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
}
.tdm-mt__video-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--tdm-motion-normal, 240ms) var(--tdm-ease-standard, ease);
}
.tdm-mt__video-trigger:focus-visible {
  outline: 3px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: -3px;
}
.tdm-mt__video-poster,
.tdm-mt__video-poster picture,
.tdm-mt__video-poster img,
.tdm-mt__video-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tdm-mt__video-poster--blank { background: var(--mt-media-bg, var(--tdm-color-surface-2, #141416)); }
.tdm-mt__video-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #000 18%, transparent),
    color-mix(in srgb, #000 42%, transparent)
  );
  z-index: 1;
}
.tdm-mt__video-play {
  position: relative;
  z-index: 2;
  color: #fff;
  filter: drop-shadow(0 4px 16px color-mix(in srgb, #000 40%, transparent));
  transition: transform var(--tdm-motion-normal, 240ms) var(--tdm-ease-standard, ease),
              color var(--tdm-motion-normal, 240ms) var(--tdm-ease-standard, ease);
}
.tdm-mt__video-trigger:hover .tdm-mt__video-play,
.tdm-mt__video-trigger:focus-visible .tdm-mt__video-play {
  transform: scale(1.08);
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-mt__video-frame.is-playing .tdm-mt__video-trigger {
  opacity: 0;
  pointer-events: none;
}
.tdm-mt__video-player { position: absolute; inset: 0; z-index: 1; }
.tdm-mt__video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
video.tdm-mt__video-media { object-fit: cover; background-color: #000; }
/* keep the player paused / non-interactive inside the Concrete editor */
.ccm-edit-mode .tdm-mt__video-media { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .tdm-mt__video-trigger,
  .tdm-mt__video-play { transition: none; }
  .tdm-mt__video-trigger:hover .tdm-mt__video-play,
  .tdm-mt__video-trigger:focus-visible .tdm-mt__video-play { transform: none; }
}

/* ----------------------------------------------------------------------
   Self-contained CTA button (solid / outline / ghost) — mirrors tdm_cta so the
   band never depends on a tdm_button being on the page. Same tokens, same
   variants, 44px+ touch floor, reduced-motion safe.
   ---------------------------------------------------------------------- */
.tdm-mt__cta-wrap {
  margin: var(--tdm-space-2, 8px) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tdm-space-3, 12px);
}

.tdm-mt__btn {
  --tdm-mt-btn-accent: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));               /* outline border + focus ring — brand orange FILL, never flips */
  --tdm-mt-btn-accent-text: var(--mt-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));     /* TEXT: outline label — local link var → --orange-link on a light band (§2a-link) */
  --tdm-mt-btn-fill: var(--tdm-color-btn-fill, #B0470B);                                   /* SOLID fill — AA-safe (white label 5.60:1), band-independent */
  --tdm-mt-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-mt__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-mt-btn-accent) 55%, transparent);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .tdm-mt__btn,
  .tdm-mt__btn:hover,
  .tdm-mt__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;
  }
}

/* images never overflow their box (responsive manual) */
.tdm-mt 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));
}

/* iter-2 A5: accent-as-TEXT on a light band → AA-safe #B0470B (model §2a-link / §4).
   Plain attribute selector (0,1,1): beats base .tdm-title (0,1,0), still loses to
   the per-instance emitter .tdm-i-<bID> (0,2,0). NEVER :where(). Covers both the
   eyebrow (L33) and the accent title segment (L65) — #E8651A is 3.02:1 on cream. */
.tdm-title[data-band="light"] .tdm-title__eyebrow,
.tdm-title[data-band="light"] .tdm-title__seg--accent {
  color: var(--tdm-color-accent-text-light, #B0470B);
}

/* ---------- 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. GUARDRAIL: #6B6B75 on dark #0D0D0F = 3.63:1 —
   this PASSES WCAG 2.2 AA only for LARGE text (≥3:1). .tdm-title__seg always
   renders as a large display heading, so this is compliant here. Do NOT reuse
   --muted on body/small text on a dark surface (it fails 4.5:1). Per
   design-system-v1 Rule 2 (large-text exception). */
.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 */
  /* Accent-as-TEXT band var (model §2a-link). The global --tdmx-accent-text hook
     does NOT reliably reach descendants once the block declares its own [data-band]
     surface vars (it did NOT, here — the qa S125 link-on-light bug, #E8651A ~3.0:1).
     Re-tone accent-text LOCALLY: dark/auto = orange (~5.74:1), light = #B0470B
     (~5.1:1). Every accent-text glyph (eyebrow, number, links, title-hover, footer
     link, outline/soft badge label) routes through this for BOTH rest + hover. */
  --fc-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  --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);
  /* accent-as-TEXT on light → AA-safe #B0470B (model §2a-link / §4). Plain
     attribute selector (0,1,1): beats base .tdm-fc (0,1,0), still loses to the
     per-instance emitter (0,2,0). NEVER :where(). */
  --fc-link-color: var(--tdm-color-accent-text-light, #B0470B);
}

/* Forced-dark band — pins accent-text to orange so a block dropped on a dark
   image/gradient (auto-luminance can't read it) keeps the AA orange link. */
.tdm-fc[data-band="dark"] {
  --fc-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

.tdm-fc__inner {
  text-align: var(--tdmx-align, left);
  /* Container parity: fall back to --tdm-container (base.css:37 default), never
     `none`, so an unset --tdmx-max-width can't let the inner escape full-bleed. */
  max-width: var(--tdmx-max-width, var(--tdm-container));
  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-link-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-link-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-link-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;
}
/* AA primary fill (S126): #B0470B = 5.60:1 white-on-fill (vs --orange #E8651A 2.93:1). */
.tdm-fc[data-badge="solid"] .tdm-fc__badge { background: var(--tdm-color-btn-fill, #B0470B); color: var(--fc-on-accent); }
.tdm-fc[data-badge="outline"] .tdm-fc__badge { background: transparent; color: var(--fc-link-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-link-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-link-color, var(--fc-accent-text)); }
.tdm-fc__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fc-ink-2);
}
/* iter-2 A5: inline body-copy links had no rule ⇒ fell through to #E8651A
   (3.02:1 on cream = fail). Route through --fc-link-color which is already
   remapped to #B0470B (AA 5.09:1) on the light band (L72) and stays orange on dark. */
.tdm-fc__body a {
  color: var(--fc-link-color, var(--fc-accent-text));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tdm-fc__body a:hover { color: var(--fc-link-color); }

/* ---------- 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-link-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-link-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-link-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-link-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 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 */
}

/* 1 column = a single full-width track at EVERY width. No media query promotes
   data-cols="1" to a multi-track template, so the mobile-first 1fr default above
   already holds — this rule pins it explicitly (defence against any future
   stack/ratio cascade) and documents the intent: one full-bleed drop zone. The
   ratio + stack_at controls are moot here (the controller normalises ratio to
   "even"; data-stack never matches a 1-col template), so nothing breaks. */
.tdm-columns__grid[data-cols="1"] { grid-template-columns: 1fr; }

/* ----------------------------------------------------------------------
   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;
}

/* ── Optional ambient background video (full-window cover) ──────────────────
   The video sits at the BOTTOM of the block's stacking ladder (z-index:0),
   the coloured mask above it, and the column grid above both. .tdm-block has
   `position:relative; isolation:isolate` (base.css), so this whole 0/1 ladder
   is confined to the block and never leaks onto sibling blocks. The wrapper is
   non-interactive (pointer-events:none) so clicks pass through to the content.
   ────────────────────────────────────────────────────────────────────────── */
.tdm-columns__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;        /* clips the over-scanned iframe to the block box */
  pointer-events: none;    /* decorative — never intercepts content clicks */
  /* Establish container-query units (cqw/cqh) for the cover math below. The
     wrapper is sized by inset:0 against the block (a definite size independent
     of the absolutely-positioned iframe inside it), so size containment is
     safe here. */
  container-type: size;
}

/* The frame HOST fills the wrapper; the YouTube IFrame API injects its <iframe>
   inside it (.tdm-columns__bgvideo-iframe), or the no-JS poster <img> sits here.
   The optional CSS filter (blur/brightness/contrast/saturate) is set per-instance
   inline on this host so it applies to the injected iframe + poster together. */
.tdm-columns__bgvideo-frame {
  position: absolute;
  inset: 0;
  /* filter applied via inline style per instance */
}

/* An <iframe> is NOT a replaced element, so object-fit:cover does NOT apply,
   and the block is an ARBITRARY aspect ratio (not the viewport), so the
   100vw/177.78vh trick does not apply either. Use container-query units: size
   the 16:9 video to the LARGER of (cover width, cover height) so whichever axis
   is the constraint over-scans and is clipped by the wrapper's overflow:hidden
   — the container-relative equivalent of the classic viewport cover. 16/9 =
   1.77778, 9/16 = 0.5625. Anchor via the --tx / --ty translate vars (per
   data-px / data-py); splitting the transform into two independent vars stops
   the X and Y axes clobbering each other's translate.
   The * 1.18 factor over-scales BEYOND cover so the YouTube title/user band
   (top) and logo (bottom) are always cropped by the wrapper's overflow:hidden —
   even when the block is itself ~16:9 (where plain cover would have zero
   overscan and leave the chrome visible). No embed param removes that chrome.
   pointer-events:none on the injected iframe kills hover chrome + interaction. */
.tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo-iframe iframe,
.tdm-columns__bgvideo-poster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(max(100cqw, 100cqh * 16 / 9) * 1.18);
  height: calc(max(100cqh, 100cqw * 9 / 16) * 1.18);
  border: 0;
  --tx: -50%;
  --ty: -50%;
  transform: translate(var(--tx), var(--ty));
  pointer-events: none;
}
/* The API injects the iframe as a child of .tdm-columns__bgvideo-iframe; make
   that inner iframe fill its (already cover-sized) wrapper. */
.tdm-columns__bgvideo-iframe iframe {
  top: 0; left: 0;
  width: 100%; height: 100%;
  --tx: 0; --ty: 0;
}
.tdm-columns__bgvideo-poster { object-fit: cover; }
/* Once the player is live, drop the poster (the iframe covers it). */
.tdm-columns__bgvideo.is-playing .tdm-columns__bgvideo-poster { opacity: 0; }

/* Horizontal anchor — pin an edge so the OPPOSITE overscan is clipped. */
.tdm-columns__bgvideo[data-px="left"]   .tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo[data-px="left"]   .tdm-columns__bgvideo-poster { left: 0;  right: auto; --tx: 0; }
.tdm-columns__bgvideo[data-px="center"] .tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo[data-px="center"] .tdm-columns__bgvideo-poster { left: 50%; right: auto; --tx: -50%; }
.tdm-columns__bgvideo[data-px="right"]  .tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo[data-px="right"]  .tdm-columns__bgvideo-poster { left: auto; right: 0; --tx: 0; }

/* Vertical anchor — pin an edge so the OPPOSITE overscan is clipped. */
.tdm-columns__bgvideo[data-py="top"]    .tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo[data-py="top"]    .tdm-columns__bgvideo-poster { top: 0;  bottom: auto; --ty: 0; }
.tdm-columns__bgvideo[data-py="center"] .tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo[data-py="center"] .tdm-columns__bgvideo-poster { top: 50%; bottom: auto; --ty: -50%; }
.tdm-columns__bgvideo[data-py="bottom"] .tdm-columns__bgvideo-iframe,
.tdm-columns__bgvideo[data-py="bottom"] .tdm-columns__bgvideo-poster { top: auto; bottom: 0; --ty: 0; }

/* Overlay — above the video, below the content. Its background (solid color-mix
   OR a 2-stop linear-gradient) + optional mix-blend-mode come from the
   per-instance inline style emitted by view.php. */
.tdm-columns__bgvideo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Mobile fallback (below the stack breakpoint) ───────────────────────────
   On mobile the YouTube player is NEVER created (view.js guards on viewport);
   the server-rendered fallback paints the block background instead, and the
   video frame + overlay are hidden so the cover-crop math never runs on a phone.
   Two cascades (md=680 / lg=768) so data-stack picks the breakpoint, mirroring
   the grid's own stack media queries. The fallback is shown by DEFAULT (mobile-
   first) and hidden at/above the breakpoint. */
.tdm-columns__bgvideo-mobile {
  position: absolute;
  inset: 0;
  z-index: 1;            /* same band as the overlay; over the (hidden) frame */
  pointer-events: none;
}
/* Default (mobile, below the breakpoint): hide the video frame + overlay, show
   the fallback. The frame/overlay are promoted to block only at/above the stack
   breakpoint, so on a phone the cover-crop math + iframe never render. */
.tdm-columns__bgvideo[data-stack] .tdm-columns__bgvideo-frame,
.tdm-columns__bgvideo[data-stack] .tdm-columns__bgvideo-overlay { display: none; }

@media (min-width: 680px) {
  .tdm-columns__bgvideo[data-stack="md"] .tdm-columns__bgvideo-frame,
  .tdm-columns__bgvideo[data-stack="md"] .tdm-columns__bgvideo-overlay { display: block; }
  .tdm-columns__bgvideo[data-stack="md"] .tdm-columns__bgvideo-mobile { display: none; }
}
@media (min-width: 768px) {
  .tdm-columns__bgvideo[data-stack="lg"] .tdm-columns__bgvideo-frame,
  .tdm-columns__bgvideo[data-stack="lg"] .tdm-columns__bgvideo-overlay { display: block; }
  .tdm-columns__bgvideo[data-stack="lg"] .tdm-columns__bgvideo-mobile { display: none; }
}

/* Reduced-motion: no autoplay video. view.js never builds the player (so
   `is-playing` is never added and the poster stays visible); this CSS branch
   makes the intent explicit + defensive — keep the poster shown and never
   reveal the (un-built) iframe even at desktop widths. */
@media (prefers-reduced-motion: reduce) {
  .tdm-columns__bgvideo .tdm-columns__bgvideo-poster { opacity: 1; }
  .tdm-columns__bgvideo .tdm-columns__bgvideo-iframe { display: none; }
}

/* Lift the column grid above the video + mask so dropped content is never
   overlapped (base.css gives .tdm-block__inner no z-index). */
.tdm-columns > .tdm-block__inner {
  position: relative;
  z-index: 1;
}

/* Belt-and-braces: never render the bg video in edit mode (the controller
   already suppresses the markup; this guards any cached edit-mode render),
   so the full-cover iframe never sits over the SubArea drop zones. */
.ccm-edit-mode .tdm-columns__bgvideo { display: none; }


/* ======================================================================
   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);

  /* Local element vars — single place to re-tone for a band (tdm-band-tone-
     model-v1 §2). Defaults track the DARK-first theme. The band switch alone
     re-tones every inner surface that consumes these vars. */
  --quote-card-bg:    var(--tdm-color-surface-2, #141416);                          /* card-style panel surface */
  --quote-photo-bg:   var(--tdm-color-surface-3, #1C1C20);                          /* author-photo placeholder frame */
  --quote-hairline:   var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 14%, transparent)); /* card / minimal divider */
  --quote-shadow:     var(--tdm-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));         /* card-style shadow */
  --quote-role:       var(--tdm-color-ink-2, #B0B0BA);                              /* author role / muted ink */
  /* Accent-as-TEXT (marks glyph, emphasis text) — local link var, NOT the global
     --tdmx-accent-text hook (§2a-link: the hook doesn't reliably reach descendants
     once the block declares its own band vars). */
  --quote-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));   /* dark default = orange, ~5.74:1 */
}

/* LIGHT band — own light surface fill + dark ink + re-toned inner surfaces +
   AA-safe accent-as-text. Plain attribute selector (0,1,1): beats the base class
   (0,1,0), still loses to the per-instance emitter (0,2,0). NEVER :where(). The
   quote text reads --tdmx-*-color (the dead -color suffix the base hook can't
   reach), so re-tone heading/body ink LOCALLY here. */
.tdm-quote[data-band="light"] {
  --tdmx-bg:            color-mix(in srgb, #000 2%, #FFFFFF);                        /* own light band fill (not a direct background) */
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
  --quote-card-bg:      color-mix(in srgb, #000 4%, #FFFFFF);                        /* light card panel */
  --quote-photo-bg:     color-mix(in srgb, #000 6%, #FFFFFF);                        /* light photo placeholder frame */
  --quote-hairline:     color-mix(in srgb, var(--tdm-color-surface, #0D0D0F) 12%, transparent);
  --quote-shadow:       0 8px 24px color-mix(in srgb, var(--tdm-color-surface, #0D0D0F) 8%, transparent); /* soft scrim on cream */
  --quote-role:         color-mix(in srgb, var(--tdm-color-surface, #0D0D0F) 58%, transparent); /* muted ink on cream — AA */
  --quote-link-color:   var(--tdm-color-accent-text-light, #B0470B);                /* AA-safe orange text on cream */
}

/* FORCED DARK band — pins the dark surface/ink explicitly so a quote dropped on
   a dark image/gradient is guaranteed legible. Plain attribute selector (0,1,1). */
.tdm-quote[data-band="dark"] {
  --tdmx-bg:            var(--tdm-color-surface, #0D0D0F);                           /* own dark band fill */
  --quote-card-bg:      var(--tdm-color-surface-2, #141416);
  --quote-photo-bg:     var(--tdm-color-surface-3, #1C1C20);
  --quote-hairline:     var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 14%, transparent));
  --quote-shadow:       var(--tdm-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
  --quote-role:         var(--tdm-color-ink-2, #B0B0BA);
  --quote-link-color:   var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  /* heading/body ink flip FREE via base.css:95-99 --tdmx-heading/--tdmx-text? No —
     this block routes ink through --tdmx-*-color, so the base hook can't reach it.
     Dark is already the default (--tdmx-heading-color falls back to --tdm-color-ink
     via the element rules), so no local ink re-declaration is needed here. */
}

/* ---------- 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(--quote-photo-bg, 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(--quote-role, 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(--quote-card-bg, 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(--quote-hairline, var(--tdm-hairline, rgba(255, 255, 255, 0.08)));
  box-shadow: var(--quote-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(--quote-link-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(--quote-hairline, var(--tdm-hairline, rgba(255, 255, 255, 0.08)));
  border-bottom: 1px solid var(--quote-hairline, 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(--quote-link-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 Stats — count-up statistics band (Elementor-grade).
   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). Block-level typography/sizing overrides
   are scoped custom props (--tdm-st-*) emitted only when the operator changes
   them.

   Namespaced .tdm-stats__* (NOT .reveal — that is the package-global scroll-
   reveal class whose base state is opacity:0; reusing it would hide content).
   The count-up engine is this block's own view.js; CSS lays out the grid, types
   the figures, and renders the six layouts + media + divider. Block-instance
   scope (--tdmx-* + --tdm-st-* + reveal) is on the outer .tdm-i-<bID>.

   Colour model — the chip / image / card surfaces follow the package's dark-
   first surface tokens (matching tdm_icon's chip default --tdm-color-surface-3),
   so a Brand Kit reskins them and they sit correctly on the dark-first band the
   site uses by default. They are exposed as --tdm-st-* custom props on the block
   root so a light Design background (set via the Design bg group) can be paired
   with a `data-band="light"` opt-in remap below if the operator ever needs it —
   the default needs no signal and stays AA-legible on the dark band. Text
   colours come from the Design layer (--tdmx-heading-color / --tdmx-accent),
   which the operator drives per band.
   ====================================================================== */

.tdm-stats {
  /* 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);

  /* Chip / surface neutrals — dark-first package tokens (same source as
     tdm_icon's chip). Kept on the block root so per-stat rules inherit them. */
  --tdm-st-chip-bg: var(--tdm-color-surface-3, #1C1C20);
  --tdm-st-image-bg: var(--tdm-color-surface-2, #141418);
  --tdm-st-frame-bg: var(--tdm-color-surface, #121216);
  --tdm-st-frame-border: rgba(255, 255, 255, 0.12);
}

/* Optional light-band remap (opt-in via data-band="light" on the section) for a
   stats band placed on a LIGHT Design background — keeps chips/cards legible. */
.tdm-stats[data-band="light"] {
  /* Family-B ink remap (spec §1e): heading/intro read --tdmx-*-color (the dead
     -color suffix the base hook can't reach), so re-tone them to the dark-on-
     light ink, mirroring the global band target. */
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
  --tdm-st-chip-bg: var(--tdm-color-surface-3, #ECECEF);
  --tdm-st-image-bg: var(--tdm-color-surface-2, #F2F2F4);
  --tdm-st-frame-bg: #FFFFFF;
  --tdm-st-frame-border: rgba(0, 0, 0, 0.10);
}

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

/* ---------- header ---------- */
/* Default align is center (see DEFAULT_OVERRIDES) → centre the header's own
   max-width box. When the operator sets align:left the box hugs the left edge. */
.tdm-stats__header {
  max-width: 64ch;
  margin-inline: auto;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-block[style*="--tdmx-align: left"] .tdm-stats__header,
.tdm-block[style*="--tdmx-align:left"] .tdm-stats__header { margin-inline: 0; }

.tdm-stats__eyebrow {
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: var(--tdm-text-eyebrow, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-stats__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-stats__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- grid + responsive column caps ----------
   min-width only (responsive manual). Mobile cap < MD 680, tablet cap MD..LG,
   desktop cap XL 1024+. Each tier scoped by the resolved cap class so the grid
   never exceeds the populated stat count. */
.tdm-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tdmx-gap, var(--tdm-space-6, 32px));
}

/* Mobile (< 680): default 1; operator can request 2. */
.tdm-stats--mob-2 .tdm-stats__grid { grid-template-columns: repeat(2, 1fr); }

/* Tablet (>= 680): default 2; operator can request 1 or 3. */
@media (min-width: 680px) {
  .tdm-stats--tab-1 .tdm-stats__grid { grid-template-columns: 1fr; }
  .tdm-stats--tab-2 .tdm-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .tdm-stats--tab-3 .tdm-stats__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop (>= 1024): the chosen desktop cap, but never more at this tier than 3
   (the 4-up only opens at 2XL to match the old ladder). */
@media (min-width: 1024px) {
  .tdm-stats--cols-2 .tdm-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .tdm-stats--cols-3 .tdm-stats__grid { grid-template-columns: repeat(3, 1fr); }
  .tdm-stats--cols-4 .tdm-stats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .tdm-stats--cols-4 .tdm-stats__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- stat (base) ---------- */
.tdm-stats__stat {
  /* The stat is flat by default (Stacked); layout modifiers add frame/rows.
     Background + surface come from the band-level Design bg group + theme. */
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-2, 8px);
  padding: var(--tdm-space-5, 24px) var(--tdm-space-4, 16px);
  text-align: center;
}

/* The text block (number, divider, label, note). A column wrapper so layouts
   can group it beside / below the media. For Stacked it is a transparent
   pass-through whose own gap reproduces today's inter-line rhythm. */
.tdm-stats__body {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-2, 8px);
  /* Inherit the stat's cross-axis alignment so a centred stat stays centred. */
  align-items: inherit;
}
.tdm-stats__stat:not(.tdm-stats__stat--has-media) > .tdm-stats__body { width: 100%; }

/* Per-element alignment (Group E): inherit follows the band; explicit values
   override the number / label independently. Implemented on the data-attrs set
   on the section so all stats share the band-level choice. */
.tdm-stats[data-value-align="left"]   .tdm-stats__num { justify-content: flex-start; text-align: left; }
.tdm-stats[data-value-align="center"] .tdm-stats__num { justify-content: center; text-align: center; }
.tdm-stats[data-value-align="right"]  .tdm-stats__num { justify-content: flex-end; text-align: right; }
.tdm-stats[data-label-align="left"]   .tdm-stats__label { text-align: left; }
.tdm-stats[data-label-align="center"] .tdm-stats__label { text-align: center; }
.tdm-stats[data-label-align="right"]  .tdm-stats__label { text-align: right; }

.tdm-stats__num {
  margin: 0;
  font-family: var(--tdm-font-display, var(--tdm-font-headline, sans-serif));
  font-weight: 700;
  font-size: var(--tdm-st-num-size, clamp(2.25rem, 1.6rem + 3vw, 3.75rem));
  line-height: 1;
  letter-spacing: -0.02em;
  /* The big figure is the block's accent surface. */
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.tdm-stats__prefix,
.tdm-stats__suffix {
  font-size: var(--tdm-st-affix-size, 0.5em);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-stats__num-target {
  font-variant-numeric: tabular-nums;
}

/* EEAT citation link — wraps the NUMBER when a per-stat source URL is set.
   Inherits the figure's colour/weight so the stat looks unchanged; the link
   only reveals itself on hover (underline) and on keyboard focus (ring). */
.tdm-stats__cite {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  border-radius: var(--tdm-radius-sm, 4px);
  transition: text-decoration-color 0.15s ease;
}
.tdm-stats__cite:hover,
.tdm-stats__cite:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.06em;
}
.tdm-stats__cite:focus-visible {
  outline: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tdm-stats__cite { transition: none; }
}

.tdm-stats__label {
  margin: 0;
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: var(--tdm-st-label-size, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tdmx-heading-color, var(--tdm-color-ink, #F5F4F0));
}
.tdm-stats__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tdmx-text-color, var(--tdm-color-ink-2, #B0B0BA));
}

/* ---------- media (icon / image) ---------- */
.tdm-stats__media {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Icon glyph — sized by the per-block --tdm-st-icon-size, coloured by
   --tdm-st-icon-color (empty → accent token). */
.tdm-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tdm-st-icon-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));
}
.tdm-stats__icon svg {
  width: var(--tdm-st-icon-size, 40px);
  height: var(--tdm-st-icon-size, 40px);
  display: block;
}

/* Icon chip (background shape behind the glyph) — ported from tdm_icon. */
.tdm-stats__icon--chip-circle,
.tdm-stats__icon--chip-square,
.tdm-stats__icon--chip-rounded {
  padding: 0.55em;
  background: var(--tdm-st-chip-bg);
}
.tdm-stats__icon--chip-circle  { border-radius: 50%; }
.tdm-stats__icon--chip-square  { border-radius: 0; }
.tdm-stats__icon--chip-rounded { border-radius: var(--tdm-radius-md, 6px); }

/* Image — fixed square render box (no CLS), object-fit cover. */
.tdm-stats__image {
  display: inline-flex;
  width: var(--tdm-st-image-size, 64px);
  height: var(--tdm-st-image-size, 64px);
  overflow: hidden;
  background: var(--tdm-st-image-bg);
}
.tdm-stats__image--chip-circle  { border-radius: 50%; }
.tdm-stats__image--chip-square  { border-radius: 0; }
.tdm-stats__image--chip-rounded { border-radius: var(--tdm-radius-md, 6px); }
.tdm-stats__image .tdm-stats__pic,
.tdm-stats__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive-manual image guard. */
.tdm-stats img { max-width: 100%; height: auto; display: block; }

/* ---------- divider (between number and label) ---------- */
.tdm-stats__divider {
  display: block;
  width: 32px;
  height: 0;
  margin: var(--tdm-space-2, 8px) auto;
  align-self: center;
}
.tdm-stats--divstyle-line .tdm-stats__divider {
  border-top: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}
.tdm-stats--divstyle-dash .tdm-stats__divider {
  border-top: 2px dashed var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}
.tdm-stats--divstyle-dot .tdm-stats__divider {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}
/* On left/right-aligned numbers, hug the divider to that edge. */
.tdm-stats[data-value-align="left"]  .tdm-stats__divider { margin-inline: 0 auto; }
.tdm-stats[data-value-align="right"] .tdm-stats__divider { margin-inline: auto 0; }

/* =====================================================================
   LAYOUT VARIANTS (CSS-driven via .tdm-stats--<layout> on the section)
   Stacked = base rules above (byte-identical to today). The five others
   are pure CSS rearrangements of the same markup.
   ===================================================================== */

/* --- Icon-top: media centred above the number (vertical, base order is fine) */
.tdm-stats--icon-top .tdm-stats__stat { align-items: center; }
.tdm-stats--icon-top .tdm-stats__media { margin-bottom: var(--tdm-space-2, 8px); }

/* --- Icon-left: media to the LEFT, body (number+label) to its right -------- */
.tdm-stats--icon-left .tdm-stats__stat {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: var(--tdm-space-4, 16px);
}
.tdm-stats--icon-left .tdm-stats__media { flex: 0 0 auto; }
.tdm-stats--icon-left .tdm-stats__body {
  flex: 1 1 auto;
  align-items: flex-start;
  text-align: left;
}
.tdm-stats--icon-left .tdm-stats__num { justify-content: flex-start; }
.tdm-stats--icon-left .tdm-stats__divider { margin-inline: 0 auto; }
.tdm-stats--icon-left .tdm-stats__label,
.tdm-stats--icon-left .tdm-stats__note { text-align: left; }

/* --- Boxed: each stat framed as a card (surface + hairline + radius) ------- */
.tdm-stats--boxed .tdm-stats__stat {
  background: var(--tdm-st-frame-bg);
  border: 1px solid var(--tdm-st-frame-border);
  border-radius: var(--tdm-radius-lg, 12px);
  padding: var(--tdm-space-6, 32px) var(--tdm-space-5, 24px);
  align-items: center;
}

/* --- Divided: when layout=divided but the divider toggle is OFF, synthesize a
   default rule under the number so the layout still reads as intended. When the
   toggle is ON the explicit .tdm-stats__divider element handles it. ---------- */
.tdm-stats--divided:not(.tdm-stats--divided-on) .tdm-stats__num {
  padding-bottom: var(--tdm-space-2, 8px);
  border-bottom: 2px solid var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}

/* --- Inline-row: number and label on ONE line ----------------------------- */
.tdm-stats--inline-row .tdm-stats__stat {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--tdm-space-3, 12px);
  text-align: left;
}
.tdm-stats--inline-row .tdm-stats__media { flex: 0 0 auto; align-self: center; }
.tdm-stats--inline-row .tdm-stats__body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tdm-space-3, 12px);
}
.tdm-stats--inline-row .tdm-stats__num { font-size: var(--tdm-st-num-size, clamp(1.75rem, 1.3rem + 2vw, 2.5rem)); }
.tdm-stats--inline-row .tdm-stats__label { letter-spacing: 0.06em; }
.tdm-stats--inline-row .tdm-stats__note { flex-basis: 100%; }
.tdm-stats--inline-row .tdm-stats__divider { display: none; }

/* ---------------------------------------------------------------------
   Reduced motion — the count-up engine already shows final figures
   instantly under prefers-reduced-motion (view.js). Nothing else here
   animates; hover lifts (if any inherited) are gated below for safety.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tdm-stats__stat { transition: none; }
}


.tdm-ah__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline));
  font-size: var(--tdm-text-h2);
  font-weight: var(--tdm-weight-headline);
  line-height: var(--tdm-leading-tight);
  letter-spacing: var(--tdmx-letter-spacing, normal);
  text-transform: var(--tdmx-text-transform, none);
  margin: 0;
}
.tdm-ah__rotator {
  display: inline-block;
  position: relative;
  color: var(--tdmx-accent-text, var(--tdm-color-accent));
}
/* iter-2 A5: rotator accent-as-TEXT on light band → AA #B0470B. Plain attribute
   selector (0,1,1); #E8651A is 3.02:1 on cream. NEVER :where(). */
.tdm-ah[data-band="light"] .tdm-ah__rotator {
  color: var(--tdm-color-accent-text-light, #B0470B);
}
.tdm-ah__word { display: inline-block; }

.tdm-ah__rotator[data-anim="fade"] .tdm-ah__word {
  transition: opacity var(--tdm-dur-base) var(--tdm-ease-standard);
}
.tdm-ah__rotator[data-anim="slide"] .tdm-ah__word {
  transition: transform var(--tdm-dur-base) var(--tdm-ease-emphatic),
              opacity var(--tdm-dur-base) var(--tdm-ease-emphatic);
}
.tdm-ah__rotator.is-swapping[data-anim="fade"] .tdm-ah__word { opacity: 0; }
.tdm-ah__rotator.is-swapping[data-anim="slide"] .tdm-ah__word {
  transform: translateY(-0.4em); opacity: 0;
}
.tdm-ah__rotator[data-anim="typewriter"] .tdm-ah__word::after {
  content: ""; display: inline-block; width: 1px; height: 1em;
  background: currentColor; margin-left: 2px; vertical-align: text-bottom;
  animation: tdm-ah-caret 1s step-end infinite;
}
@keyframes tdm-ah-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tdm-ah__word { transition: none !important; }
  .tdm-ah__rotator[data-anim="typewriter"] .tdm-ah__word::after { animation: 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; }


/* ============================================================
   ARECH Subpage Carousel block — view.css
   Horizontal card carousel of internal sub-pages. Reuses the news-carousel
   visual language (arech-nc__arrow / __dots / __dot / __live / __controls /
   __track ship globally) and adds the card aesthetic + per-instance flex-basis.
   Namespaced `arech-spcar`. Container law: single uniform --container.
   ============================================================ */

.arech-spcar {
    /* TDM Design layer: each property consumes a per-instance --tdmx-* var
       (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
       to the block's original hardcoded value — so default = byte-identical.
       Only band + header + block-scoped card colours are threaded; the carousel
       mechanics (viewport/track/slide flex-basis, overflow, .is-enhanced,
       container-type, border-top) and the global .arech-nc__* chrome are left
       untouched (the latter ship in / are shared with the news carousel). */
    padding-block: var(--tdmx-pad-top, var(--space-8)) var(--tdmx-pad-bottom, var(--space-8));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
    background-color: var(--tdmx-bg, var(--paper-2));
    color: var(--ink-2);
    border-top: 1px solid var(--hairline);
    container-type: inline-size;
    /* Required so the bg-image/overlay pseudo-elements can sit behind content. */
    position: relative;
    isolation: isolate;
}
/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-spcar). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. z-index -2/-1 + isolation keep
   them behind the carousel content. */
.arech-spcar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-spcar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}
@media (min-width: 768px) {
    .arech-spcar {
        padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    }
}

.arech-spcar__inner {
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
}

/* ---- Header ---- */
.arech-spcar__head {
    margin-bottom: var(--space-6);
    max-width: 64ch;
    /* Default left-aligned (no text-align was declared); a Design align overrides
       (fallback = left → identical). Scoped to the header only — the track/cards
       are deliberately NOT aligned. */
    text-align: var(--tdmx-align, left);
}
.arech-spcar__h2 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tdmx-heading, var(--ink-1));
    margin: 0 0 var(--space-3);
}
.arech-spcar__intro {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    color: var(--tdmx-text, var(--ink-3));
    margin: 0;
}

/* ---- Viewport / track ----
   No-JS default = visible, horizontally scrollable row so every card is
   reachable without JavaScript (no invisible-content trap). The JS adds
   `.is-enhanced` on init, which flips the viewport to carousel mode
   (clipped overflow + JS-driven track transform). */
.arech-spcar__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-top: var(--space-4);
}
.arech-spcar.is-enhanced .arech-spcar__viewport {
    overflow-x: hidden;
}
.arech-spcar__track {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
    transform: none;
}
.arech-spcar.is-enhanced .arech-spcar__track {
    transition: transform var(--motion-slow) var(--ease-decelerate);
    will-change: transform;
}
/* No-JS: arrows/dots can't work without script, so hide the controls and let
   the scrollable row be the only affordance. They reappear once enhanced. */
.arech-spcar:not(.is-enhanced) .arech-spcar__controls {
    display: none;
}
.arech-spcar__slide {
    flex: 0 0 100%;
    min-width: 0;
}

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

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

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

/* ---- Card ---- */
.arech-spcar__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-spcar__card:hover,
.arech-spcar__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-spcar__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.arech-spcar__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--paper-3);
    /* ONE global radius for every card image (Elementor model). Empty operator
       default → no inline --spcar-img-radius → fallback 0 (sharp) = byte-identical.
       Rounds only the image frame, never the card or band. */
    border-radius: var(--spcar-img-radius, 0);
}
.arech-spcar__media :where(picture, img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.arech-spcar__media img {
    transition: transform var(--motion-slow) var(--ease-standard);
}
.arech-spcar__card:hover .arech-spcar__media img { transform: scale(1.04); }

.arech-spcar__media-placeholder {
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            var(--paper-3),
            var(--paper-3) 12px,
            var(--paper-4) 12px,
            var(--paper-4) 24px
        );
}

.arech-spcar__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.arech-spcar__num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tdmx-accent, var(--orange-text));
    margin: 0;
}
.arech-spcar__title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    margin: 0;
    color: var(--tdmx-heading, var(--ink-1));
}
.arech-spcar__lead {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--tdmx-text, var(--ink-3));
    margin: 0;
}
.arech-spcar__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;
    /* Card CTA base colour threaded; hover state stays on the systematic orange
       token (no hover var in the contract), matching arech_animated_stat_row. */
    color: var(--tdmx-accent, var(--orange-text));
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--motion-fast) var(--ease-standard);
}
.arech-spcar__card:hover .arech-spcar__cta,
.arech-spcar__card:focus-visible .arech-spcar__cta {
    gap: var(--space-3);
    color: var(--orange);
}

/* ---- Controls spacing ---- */
.arech-spcar__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* ---- Self-contained carousel chrome (BLOCKER 2) ----
   The arrow/dot/live-region chrome is duplicated from arech_news_carousel and
   SCOPED under `.arech-spcar` so it renders correctly on pages that have a
   subpage carousel but NO news carousel (Concrete only loads a block's view.css
   when that block is present). All values use theme tokens. Per S73 carousel
   arrows keep the circular pill treatment (exception to the flat-radius rule). */
.arech-spcar .arech-nc__arrow {
    background-color: var(--paper-0);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-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-spcar .arech-nc__arrow:hover,
.arech-spcar .arech-nc__arrow:focus-visible {
    background-color: var(--orange);
    color: var(--white);
    border-color: var(--orange);
}
.arech-spcar .arech-nc__arrow:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
/* Disabled keeps the 44x44 hit area; only visual affordance dims. */
.arech-spcar .arech-nc__arrow[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--paper-0);
    color: var(--ink-1);
    border-color: var(--hairline-strong);
}

.arech-spcar .arech-nc__dots {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
/* Visual pip stays 8px; ::before extender pushes touch-target to 44x44. */
.arech-spcar .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-spcar .arech-nc__dot::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
}
.arech-spcar .arech-nc__dot:hover { background-color: color-mix(in oklch, var(--ink-1) 40%, transparent); }
.arech-spcar .arech-nc__dot.is-active {
    background-color: var(--orange);
    transform: scale(1.25);
}
.arech-spcar .arech-nc__dot:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* Live region (visually hidden) — without this the announce text renders
   on-page when no news carousel is present to ship the clip rule. */
.arech-spcar .arech-nc__live {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Reveal on container enter ----
   Content is VISIBLE by default (opacity:1). The hidden start state is gated
   behind BOTH `.is-enhanced` (JS ran) AND prefers-reduced-motion:no-preference,
   so JS-off and reduced-motion users always see the content instantly. */
.arech-spcar__viewport,
.arech-spcar__controls {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: no-preference) {
    .arech-spcar.is-enhanced .arech-spcar__viewport,
    .arech-spcar.is-enhanced .arech-spcar__controls {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-standard);
    }
    .arech-spcar.is-enhanced.is-in .arech-spcar__viewport { transition-delay: var(--stagger-1); opacity: 1; transform: translateY(0); }
    .arech-spcar.is-enhanced.is-in .arech-spcar__controls { transition-delay: var(--stagger-2); opacity: 1; transform: translateY(0); }
}

/* ---- Reduced motion ----
   The reveal hidden-state is already gated behind no-preference above, so it
   never applies here. This block kills the remaining transitions (track slide,
   card hover lift, image zoom, cta nudge) and keeps content visible/instant. */
@media (prefers-reduced-motion: reduce) {
    .arech-spcar.is-enhanced .arech-spcar__track { transition: none; }
    .arech-spcar__media img { transition: none; }
    .arech-spcar__card { transition: none; }
    .arech-spcar__card:hover { transform: none; }
    .arech-spcar__card:hover .arech-spcar__media img { transform: none; }
    .arech-spcar__cta { transition: none; }
    .arech-spcar__viewport,
    .arech-spcar__controls {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Concrete edit-mode shim (always visible + reachable while editing) ---- */
.ccm-edit-mode .arech-spcar__viewport,
.ccm-edit-mode .arech-spcar__controls {
    opacity: 1 !important;
    transform: none !important;
}
.ccm-edit-mode .arech-spcar__track { transform: none !important; }
.ccm-edit-mode .arech-spcar__viewport { overflow: visible; }


/* ======================================================================
   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);

  /* ----- BAND-TONE local element vars (tdm-band-tone-model-v1 §2/§2b) -----
     Single place to re-tone for a band. Defaults track the DARK-first theme +
     the operator's accent override. The OUTER band fill is set via --tdmx-bg
     on the [data-band] rules (own-surface lever, §2-own-surface) — NOT a direct
     background here (that would suppress the operator's per-instance Design bg). */
  --acc-item-bg:    var(--tdm-color-surface-2, #141416);                                   /* accordion item surface */
  --acc-hairline:   color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 10%, transparent);    /* item border */
  --acc-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));             /* accent-as-TEXT (eyebrow/q-hover/q-open) */
}

/* 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. + OWN light
   surface (--tdmx-bg, §2-own-surface) + re-tone the item surface/hairline (§2b)
   + AA-safe accent-as-text link colour (§2a-link). PLAIN attribute selector
   (0,1,1) — NEVER :where() (0,0,0 loses to the base .tdm-accordion class).
   Emitted only with data-band="light" → byte-identical otherwise. */
.tdm-accordion[data-band="light"] {
  --tdmx-bg:            color-mix(in srgb, #000 2%, #FFFFFF);                               /* own near-paper band fill */
  --tdmx-heading-color: var(--tdm-color-surface);
  --tdmx-text-color:    color-mix(in srgb, var(--tdm-color-surface) 78%, transparent);
  --acc-item-bg:        color-mix(in srgb, #000 4%, #FFFFFF);                               /* light item surface (§2b #2) */
  --acc-hairline:       color-mix(in srgb, var(--tdm-color-surface, #0D0D0F) 12%, transparent); /* §2b #11 */
  --acc-link-color:     var(--tdm-color-accent-text-light, #B0470B);                        /* AA-safe orange-on-cream (§2a-link) */
}

/* FORCED DARK band — own dark surface so a block dropped on a dark image/gradient
   (where auto-luminance can't read a hex) is guaranteed legible. Ink/accent-text
   pinned by base.css. Plain attribute selector (0,1,1) — same reason as light. */
.tdm-accordion[data-band="dark"] {
  --tdmx-bg:        var(--tdm-color-surface, #0D0D0F);                                       /* own dark band fill */
  --acc-item-bg:    var(--tdm-color-surface-2, #141416);
  --acc-hairline:   color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 10%, transparent);
  --acc-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

.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;
  /* accent-as-TEXT — local link var re-tones to AA-safe orange on a light band (§2a-link) */
  color: var(--acc-link-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, var(--acc-hairline));
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  background: var(--acc-item-bg);
  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 {
  /* question-text turns accent = accent-as-TEXT → re-tone via local link var (§2a-link) */
  color: var(--acc-link-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 {
  /* open-state question text in accent = accent-as-TEXT → local link var (§2a-link) */
  color: var(--acc-link-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;
}
/* iter-2 A5: chevron accent on light band → AA #B0470B. It reads --tdmx-accent-text
   directly (not --acc-link-color), so it needs its own plain-attribute light remap
   (0,1,1) to guarantee the flip even when local band vars shadow the base.css hook. */
.tdm-accordion[data-band="light"] .tdm-acc__chev {
  color: var(--tdm-color-accent-text-light, #B0470B);
}
.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; }
}


/* ======================================================================
   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.
   ====================================================================== */

/* =====================================================================
   BAND TONE — light / dark (tdm-band-tone-model-v1, §2-own-surface + §2a-link).
   OWN-SURFACE: the band paints its OWN outer fill via --tdmx-bg (the base.css
   .tdm-block { background:var(--tdmx-bg) } lever) so the banner reads on ANY
   parent. NEVER a direct background: on the wrapper (that would suppress the
   operator's per-instance Design bg via the 0,2,0 .tdm-i-<bID> emitter).
   PLAIN attribute selectors (0,1,1) — NEVER :where() (0,0,0 would lose to the
   base .tdm-cta class 0,1,0 => the P4 dark-on-light bug). `auto` (no
   [data-band]) keeps --tdmx-bg transparent => byte-identical dark-first render.

   LOCAL INK re-tone (the S125 bug fix): this block's heading/subtext route
   through the base h2 rule (color:var(--tdmx-heading)) + --tdmx-text, but once
   the per-instance emitter (.tdm-i-<bID>, 0,2,0) sets --tdmx-heading/--tdmx-text
   the GLOBAL [data-band] hook (0,1,1) is out-won and the title renders ~1:1
   (INVISIBLE) on a light band. So — like tdm_callout — we re-tone heading + body
   + accent-as-TEXT LOCALLY on .tdm-cta[data-band="light"] (0,1,1, declared in
   this view.css after base) so the flip cannot be out-ordered. Surfaces use the
   documented #000-on-#FFF recipe (no --tdm-color-paper-* token exists).

   NOT re-toned (correct on BOTH bands): the SOLID button fill
   (--tdm-color-btn-fill + white label, band-independent AA), the orange FILL
   accent (icon-chip bg, outline border, focus ring, ribbon), and the ribbon
   white-on-orange pair.
   ===================================================================== */

/* Local accent-as-TEXT colour — single lever for eyebrow / heading accent span /
   inline links / row-link hover. Dark default = brand orange (#E8651A, AA on
   dark); light = AA-safe --orange-link (#B0470B). Both REST + hover route here. */
.tdm-cta {
  --cta-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}
.tdm-cta[data-band="light"] {
  --tdmx-bg:        color-mix(in srgb, #000 2%, #FFFFFF);                      /* own near-paper band fill */
  --tdmx-heading:   var(--tdm-color-surface, #0D0D0F);                         /* dark ink on cream (~19:1) */
  --tdmx-text:      color-mix(in srgb, var(--tdm-color-surface, #0D0D0F) 78%, transparent); /* body ~9.5:1 */
  --cta-link-color: var(--tdm-color-accent-text-light, #B0470B);              /* AA-safe accent text on cream (~5.6:1) */
}
.tdm-cta[data-band="dark"] {
  --tdmx-bg:        var(--tdm-color-surface, #0D0D0F);                         /* own dark band fill */
  --tdmx-heading:   var(--tdm-color-ink, #F5F4F0);                            /* light ink (dark-first default) */
  --tdmx-text:      var(--tdm-color-ink-2, #B0B0BA);
  --cta-link-color: var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A));
}

.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, re-toned per band via the local link var
     (AA-safe #B0470B on light, #E8651A on dark) — §2a-link. */
  color: var(--cta-link-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 — accent-as-text, re-toned per band via
   the local link var so it stays AA on a light band (§2a-link). */
.tdm-cta__accent {
  color: var(--cta-link-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);
  /* tint bg keeps the orange FILL accent (never flips); glyph is accent-as-text
     so it re-tones per band to stay AA on cream (§2a-link). */
  background: color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 14%, transparent);
  color: var(--cta-link-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(--cta-link-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(--cta-link-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));               /* outline border + focus ring — brand orange FILL, never flips */
  --tdm-cta-btn-accent-text: var(--cta-link-color, var(--tdmx-accent-text, var(--tdm-color-accent, #E8651A)));  /* TEXT: outline label — flips to --orange-link on a light band via the local link var (§2a-link) */
  --tdm-cta-btn-fill: var(--tdm-color-btn-fill, #B0470B);                                   /* SOLID fill — AA-safe (white label 5.60:1), band-independent */
  --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-fill);
  border-color: var(--tdm-cta-btn-fill);
  color: var(--tdm-cta-btn-on-accent);
}
.tdm-cta__btn--solid:hover {
  background: color-mix(in srgb, var(--tdm-cta-btn-fill) 88%, #000);
  border-color: color-mix(in srgb, var(--tdm-cta-btn-fill) 88%, #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 AI Assistant — page-context chat widget.
   Tokens from the package tokens.css (--tdm-*). Design-controlled props
   consume var(--tdmx-*, var(--tdm-*, fallback)) (emit-only-on-change).
   Namespaced .tdm-ai* classes only. 44px touch floor. prefers-reduced-motion
   safe (composite-only transform/opacity). Inner surfaces re-tone on
   [data-band="light"] (builder Lesson 6 — plain attribute selector, never
   :where(); accent routed through a LOCAL --tdm-ai-accent var).
   ====================================================================== */

.tdm-ai__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tdmx-gap, var(--tdm-space-4, 16px));
}

/* Local accent var so the orange stays legible on both bands. The operator's
   launcher colour (--tdm-ai-primary, set inline when non-empty) wins; otherwise
   it falls back to the band-aware accent. */
.tdm-ai {
  --tdm-ai-accent: var(--tdm-ai-primary, var(--tdmx-accent, var(--tdm-color-btn-fill, #B0470B)));
  /* Launcher size tokens (s/m/l) — 44px floor for touch targets. */
  --tdm-ai-launcher-size: 56px;
}
.tdm-ai__launcher--s { --tdm-ai-launcher-size: 44px; }
.tdm-ai__launcher--m { --tdm-ai-launcher-size: 56px; }
.tdm-ai__launcher--l { --tdm-ai-launcher-size: 64px; }

/* ---------- launcher (shared) ---------- */
.tdm-ai__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tdm-space-2, 8px);
  min-height: 44px;
  border: 1px solid var(--tdm-ai-accent);
  background: var(--tdm-ai-accent);
  color: #FFFFFF;
  font-family: var(--tdmx-font-heading, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-body, 16px);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--tdm-motion-fast, 160ms) ease, transform var(--tdm-motion-fast, 160ms) ease, box-shadow var(--tdm-motion-fast, 160ms) ease;
}
.tdm-ai__launcher:hover {
  background: color-mix(in srgb, var(--tdm-ai-accent) 86%, #000);
}
.tdm-ai__launcher:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 55%, transparent);
}
.tdm-ai__launcher-icon {
  flex: none;
}
.tdm-ai__launcher-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---------- launcher shapes ---------- */
/* circle + rounded = a square button (icon only, label visually hidden). pill =
   a wide button that shows the label text. */
.tdm-ai__launcher--circle,
.tdm-ai__launcher--rounded {
  width: var(--tdm-ai-launcher-size);
  height: var(--tdm-ai-launcher-size);
  padding: 0;
}
.tdm-ai__launcher--circle { border-radius: 50%; }
.tdm-ai__launcher--rounded { border-radius: var(--tdm-radius, 14px); }
.tdm-ai__launcher--pill {
  height: var(--tdm-ai-launcher-size);
  padding: 0 var(--tdm-space-5, 24px);
  border-radius: var(--tdm-radius-pill, 999px);
}
/* Label: hidden on circle/rounded (icon-only), shown on pill. Always present in
   the DOM + on aria-label for screen readers. */
.tdm-ai__launcher-label {
  display: none;
}
.tdm-ai__launcher--pill .tdm-ai__launcher-label {
  display: inline;
}
.tdm-ai__launcher--circle .tdm-ai__launcher-label,
.tdm-ai__launcher--rounded .tdm-ai__launcher-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- launcher icon modes ---------- */
.tdm-ai__launcher-img {
  display: block;
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.tdm-ai__launcher-img--avatar-photo,
.tdm-ai__launcher-img--logo {
  width: calc(var(--tdm-ai-launcher-size) - 12px);
  height: calc(var(--tdm-ai-launcher-size) - 12px);
  border-radius: 50%;
  object-fit: cover;
}
/* animated-image: the animated raster sits on top; the static poster is the
   fallback (shown before load + under reduced-motion, via CSS below). */
.tdm-ai__launcher-animated {
  position: relative;
  display: inline-flex;
  width: calc(var(--tdm-ai-launcher-size) - 12px);
  height: calc(var(--tdm-ai-launcher-size) - 12px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  overflow: hidden;
}
.tdm-ai__launcher-anim-img,
.tdm-ai__launcher-anim-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Poster is a fallback layer under the animated image; hidden when the animated
   source paints. Reduced-motion swaps them (animated hidden, poster shown). */
.tdm-ai__launcher-anim-poster { opacity: 0; }

/* animated-svg: the BUNDLED zero-JS SMIL icon. The transparent cyan/teal art is
   placed on a neutral dark chip (#1C1C20) so it reads on any launcher colour.
   The chip fills the launcher inner box and clips the SVG to the shape; the SVG
   scales by its viewBox to fit the chip without overflow on circle/rounded/pill.
   Reduced-motion is handled in view.js (pauseAnimations on the first frame). */
.tdm-ai__launcher-svgwrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tdm-ai-launcher-size) - 12px);
  height: calc(var(--tdm-ai-launcher-size) - 12px);
  background: #1C1C20;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
/* On the pill shape the launcher is wide and shows a label; keep the chip a
   fixed square-ish glyph so it doesn't stretch with the button. */
.tdm-ai__launcher--rounded .tdm-ai__launcher-svgwrap {
  border-radius: calc(var(--tdm-radius, 14px) - 4px);
}
.tdm-ai__launcher-svg {
  display: block;
  width: 86%;
  height: 86%;
  object-fit: contain;
}

/* ---------- floating launcher (position fixed, LEFT-only) ---------- */
.tdm-ai--floating .tdm-ai__inner {
  /* The inner wrapper holds no layout role when floating — the launcher + panel
     are fixed. Keep it from adding section height. */
  display: contents;
}
.tdm-ai--floating .tdm-ai__launcher {
  position: fixed;
  z-index: 1000;
  left: var(--tdm-ai-offset-x, 24px);
}
.tdm-ai--floating[data-position="bottom-left"] .tdm-ai__launcher {
  bottom: max(var(--tdm-ai-offset-y, 24px), env(safe-area-inset-bottom));
}
.tdm-ai--floating[data-position="middle-left"] .tdm-ai__launcher {
  top: 50%;
  transform: translateY(-50%);
}
.tdm-ai--floating .tdm-ai__panel {
  position: fixed;
  z-index: 1001;
  left: var(--tdm-ai-offset-x, 24px);
  width: min(380px, calc(100vw - 32px));
}
.tdm-ai--floating[data-position="bottom-left"] .tdm-ai__panel {
  bottom: calc(max(var(--tdm-ai-offset-y, 24px), env(safe-area-inset-bottom)) + var(--tdm-ai-launcher-size) + var(--tdm-space-4, 16px));
}
.tdm-ai--floating[data-position="middle-left"] .tdm-ai__panel {
  top: 50%;
  transform: translateY(-50%);
  max-height: calc(100vh - 48px);
}
/* On phones the floating panel goes near-full-width for readability. */
@media (min-width: 320px) {
  .tdm-ai--floating .tdm-ai__panel {
    max-width: calc(100vw - 24px);
  }
}

/* ---------- panel ---------- */
.tdm-ai__panel {
  width: 100%;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 14%, transparent);
  border-radius: var(--tdmx-radius, var(--tdm-radius-lg, 16px));
  background: var(--tdm-color-surface-2, #141416);
  overflow: hidden;
}
.tdm-ai__panel[hidden] {
  display: none;
}

.tdm-ai__head {
  display: flex;
  align-items: center;
  gap: var(--tdm-space-3, 12px);
  padding: var(--tdm-space-4, 16px) var(--tdm-space-5, 24px);
  border-bottom: 1px solid color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 12%, transparent);
}
.tdm-ai__head-avatar {
  flex: none;
  display: inline-flex;
}
.tdm-ai__head-avatar img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.tdm-ai__head-id {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tdm-ai__head-name {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, system-ui, sans-serif));
  font-size: var(--tdm-text-h4, clamp(16px, 2vw, 18px));
  font-weight: var(--tdm-weight-headline, 600);
  line-height: 1.2;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
}
.tdm-ai__head-subtitle {
  margin-top: 2px;
  font-family: var(--tdm-font-mono, "DM Mono", ui-monospace, monospace);
  font-size: var(--tdm-text-small, 12px);
  line-height: 1.3;
  color: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA)) 85%, transparent);
}
/* Title bar (header_title) — the accent strip under the header. */
.tdm-ai__titlebar {
  padding: var(--tdm-space-2, 8px) var(--tdm-space-5, 24px);
  border-bottom: 2px solid var(--tdm-ai-accent);
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-small, 13px);
  font-weight: 600;
  color: var(--tdmx-text, var(--tdm-color-ink, #F5F4F0));
}
.tdm-ai__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: none;
  background: transparent;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  border-radius: var(--tdm-radius-sm, 8px);
  cursor: pointer;
  transition: background var(--tdm-motion-fast, 160ms) ease;
}
.tdm-ai__close:hover {
  background: color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 8%, transparent);
}
.tdm-ai__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 55%, transparent);
}

/* ---------- message log ---------- */
.tdm-ai__log {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-3, 12px);
  padding: var(--tdm-space-5, 24px);
  max-height: 24rem;
  overflow-y: auto;
}
.tdm-ai__msg {
  display: flex;
  max-width: 100%;
}
.tdm-ai__msg--user {
  justify-content: flex-end;
}
.tdm-ai__msg--assistant {
  justify-content: flex-start;
}
.tdm-ai__bubble {
  max-width: 90%;
  padding: var(--tdm-space-3, 12px) var(--tdm-space-4, 16px);
  border-radius: var(--tdm-radius, 12px);
  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.55;
  color: var(--tdmx-text, var(--tdm-color-ink, #F5F4F0));
  background: color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 7%, transparent);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.tdm-ai__msg--user .tdm-ai__bubble {
  background: color-mix(in srgb, var(--tdm-ai-accent) 18%, transparent);
}

/* Typing indicator (cosmetic; reduced-motion disables the animation). */
.tdm-ai__typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.tdm-ai__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  opacity: 0.5;
  animation: tdm-ai-blink 1.2s infinite ease-in-out;
}
.tdm-ai__typing span:nth-child(2) { animation-delay: 0.2s; }
.tdm-ai__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tdm-ai-blink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* ---------- consent gate ---------- */
.tdm-ai__consent {
  margin: 0;
  padding: 0 var(--tdm-space-5, 24px);
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-small, 13px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA)) 80%, transparent);
}
.tdm-ai__consent[hidden] {
  display: none;
}
.tdm-ai__consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--tdm-space-2, 8px);
  /* The whole row is a tap target; the box meets the 44px floor on its own. */
  min-height: 44px;
  padding: var(--tdm-space-1, 4px) 0;
  cursor: pointer;
}
.tdm-ai__consent-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  /* Generous hit area around the 20px control so the row clears 44px. */
  padding: 12px;
  margin: -12px;
  accent-color: var(--tdm-ai-accent);
  cursor: pointer;
}
.tdm-ai__consent-box:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 55%, transparent);
  border-radius: var(--tdm-radius-sm, 8px);
}
.tdm-ai__consent-text {
  flex: 1 1 auto;
}
.tdm-ai__consent-link {
  color: var(--tdm-ai-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tdm-ai__consent-link:hover {
  text-decoration: none;
}
.tdm-ai__consent-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 55%, transparent);
  border-radius: var(--tdm-radius-sm, 8px);
}
/* Required-but-empty state when a send is attempted without consent. */
.tdm-ai__consent--required .tdm-ai__consent-text {
  color: var(--tdm-ai-accent);
  font-weight: 600;
}
.tdm-ai__consent--required .tdm-ai__consent-box {
  outline: 2px solid var(--tdm-ai-accent);
  outline-offset: 2px;
  border-radius: var(--tdm-radius-sm, 8px);
}

/* ---------- input form ---------- */
.tdm-ai__form {
  display: flex;
  align-items: flex-end;
  gap: var(--tdm-space-2, 8px);
  padding: var(--tdm-space-4, 16px) var(--tdm-space-5, 24px) var(--tdm-space-5, 24px);
}
.tdm-ai__input {
  flex: 1 1 auto;
  min-height: 44px;
  padding: var(--tdm-space-3, 12px) var(--tdm-space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 16%, transparent);
  border-radius: var(--tdm-radius, 12px);
  background: var(--tdm-color-surface, #0E0E10);
  color: var(--tdmx-text, var(--tdm-color-ink, #F5F4F0));
  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.45;
  resize: none;
}
.tdm-ai__input::placeholder {
  color: color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 45%, transparent);
}
.tdm-ai__input:focus-visible {
  outline: none;
  border-color: var(--tdm-ai-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 35%, transparent);
}
.tdm-ai__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--tdm-ai-accent);
  border-radius: var(--tdm-radius, 12px);
  background: var(--tdm-ai-accent);
  color: #FFFFFF;
  cursor: pointer;
  transition: background var(--tdm-motion-fast, 160ms) ease;
}
.tdm-ai__send:hover {
  background: color-mix(in srgb, var(--tdm-ai-accent) 86%, #000);
}
.tdm-ai__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tdm-ai__send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 55%, transparent);
}

/* ---------- turnstile slot ---------- */
.tdm-ai__turnstile {
  padding: 0 var(--tdm-space-5, 24px) var(--tdm-space-4, 16px);
}
.tdm-ai__turnstile[hidden] {
  display: none;
}
.tdm-ai__note {
  margin: 0;
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-small, 13px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA)) 80%, transparent);
}

/* ---------- offline fallback ---------- */
.tdm-ai__offline {
  display: flex;
  flex-direction: column;
  gap: var(--tdm-space-4, 16px);
  padding: var(--tdm-space-5, 24px);
}
.tdm-ai__contact,
.tdm-ai__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  padding: var(--tdm-space-2, 8px) var(--tdm-space-5, 24px);
  border-radius: var(--tdmx-radius, var(--tdm-radius-pill, 999px));
  background: var(--tdm-ai-accent);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
}
.tdm-ai__contact:hover,
.tdm-ai__cta:hover {
  background: color-mix(in srgb, var(--tdm-ai-accent) 86%, #000);
}

/* ---------- a11y helper ---------- */
.tdm-ai__visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ======================================================================
   Attention nudge — tooltip bubble + pulse ring + unread dot.
   Composite-only (opacity / transform). Reduced-motion handled below.
   ====================================================================== */
.tdm-ai__nudge[hidden] { display: none; }

/* tooltip bubble — appears next to the launcher. */
.tdm-ai__nudge--tooltip {
  position: relative;
  max-width: 230px;
  margin-bottom: var(--tdm-space-2, 8px);
  padding: var(--tdm-space-3, 12px) var(--tdm-space-6, 32px) var(--tdm-space-3, 12px) var(--tdm-space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 14%, transparent);
  border-radius: var(--tdm-radius, 14px);
  background: var(--tdm-color-surface-2, #141416);
  color: var(--tdmx-text, var(--tdm-color-ink, #F5F4F0));
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-small, 14px);
  line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--tdm-motion-normal, 250ms) ease, transform var(--tdm-motion-normal, 250ms) ease;
}
.tdm-ai__nudge--tooltip.is-shown {
  opacity: 1;
  transform: translateY(0);
}
/* In floating mode the tooltip is fixed just above the launcher (left side). */
.tdm-ai--floating .tdm-ai__nudge--tooltip {
  position: fixed;
  z-index: 1000;
  left: var(--tdm-ai-offset-x, 24px);
  max-width: min(230px, calc(100vw - 40px));
}
.tdm-ai--floating[data-position="bottom-left"] .tdm-ai__nudge--tooltip {
  bottom: calc(max(var(--tdm-ai-offset-y, 24px), env(safe-area-inset-bottom)) + var(--tdm-ai-launcher-size) + var(--tdm-space-3, 12px));
}
.tdm-ai--floating[data-position="middle-left"] .tdm-ai__nudge--tooltip {
  top: calc(50% - var(--tdm-ai-launcher-size));
}
.tdm-ai__nudge-text { display: block; }
.tdm-ai__nudge-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--tdm-radius-sm, 8px);
}
.tdm-ai__nudge-close:hover {
  background: color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 8%, transparent);
}
.tdm-ai__nudge-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-ai-accent) 55%, transparent);
}

/* pulse ring — a finite, gentle ring around the launcher while nudging. */
.tdm-ai--nudge-pulse .tdm-ai__launcher {
  position: relative;
}
.tdm-ai--nudge-pulse .tdm-ai__launcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--tdm-ai-accent);
  opacity: 0.7;
  animation: tdm-ai-pulse 1.6s ease-out 3;
  pointer-events: none;
}
@keyframes tdm-ai-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* unread dot — a small badge on the launcher. */
.tdm-ai--nudge-dot .tdm-ai__launcher::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tdm-ai-accent);
  border: 2px solid var(--tdm-color-surface, #0E0E10);
  pointer-events: none;
}

/* ======================================================================
   Band-tone — LIGHT band re-tones the opaque inner surfaces (Lesson 6).
   Plain attribute selector (specificity 0,1,1), never :where(). Dark band is
   the default (no attr) and needs no override. The accent flows through
   --tdm-ai-accent so the orange stays legible on both bands.
   ====================================================================== */
.tdm-block[data-band="light"].tdm-ai .tdm-ai__panel {
  background: color-mix(in srgb, #000 2%, #FFFFFF);
  border-color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 14%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__head {
  border-bottom-color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 12%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__head-name,
.tdm-block[data-band="light"].tdm-ai .tdm-ai__titlebar {
  color: var(--tdmx-heading, var(--tdm-color-surface, #0E0E10));
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__head-subtitle {
  color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 65%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__nudge--tooltip {
  background: color-mix(in srgb, #000 2%, #FFFFFF);
  color: var(--tdm-color-surface, #0E0E10);
  border-color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 14%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__bubble {
  color: var(--tdmx-text, var(--tdm-color-surface, #0E0E10));
  background: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 6%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__msg--user .tdm-ai__bubble {
  background: color-mix(in srgb, var(--tdm-ai-accent) 16%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__close {
  color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 70%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__input {
  background: color-mix(in srgb, #000 4%, #FFFFFF);
  color: var(--tdm-color-surface, #0E0E10);
  border-color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 18%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__input::placeholder {
  color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 45%, transparent);
}
.tdm-block[data-band="light"].tdm-ai .tdm-ai__consent,
.tdm-block[data-band="light"].tdm-ai .tdm-ai__note {
  color: color-mix(in srgb, var(--tdm-color-surface, #0E0E10) 65%, transparent);
}
/* Accent (orange) stays legible on the light band — keep it as the link colour. */
.tdm-block[data-band="light"].tdm-ai .tdm-ai__consent-link,
.tdm-block[data-band="light"].tdm-ai .tdm-ai__consent--required .tdm-ai__consent-text {
  color: var(--tdm-ai-accent);
}

/* ======================================================================
   prefers-reduced-motion — disable all non-essential animation (HARD gate).
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tdm-ai__launcher,
  .tdm-ai__close,
  .tdm-ai__send {
    transition: none;
  }
  .tdm-ai__typing span {
    animation: none;
    opacity: 0.6;
  }
  /* Nudge: no motion. Pulse ring is killed; the tooltip still appears (it is not
     motion-essential) but without the slide-in transform. */
  .tdm-ai--nudge-pulse .tdm-ai__launcher::after {
    animation: none;
    opacity: 0;
  }
  .tdm-ai__nudge--tooltip {
    transition: none;
    transform: none;
  }
  .tdm-ai__nudge--tooltip.is-shown {
    transform: none;
  }
  /* Animated launcher icon: show the STATIC poster, hide the animated source
     (zero motion). When no poster is set, the animated frame is left in place
     but its decode-as-animation is the browser's call — we hide it only when a
     poster exists, so the icon never disappears. */
  .tdm-ai__launcher-animated:has(.tdm-ai__launcher-anim-poster) .tdm-ai__launcher-anim-img {
    display: none;
  }
  .tdm-ai__launcher-animated .tdm-ai__launcher-anim-poster {
    opacity: 1;
  }
  /* Bundled animated-svg icon: SMIL animation does NOT respond to CSS, so the
     freeze (pauseAnimations + setCurrentTime(0) on the first frame) is performed
     in view.js. Nothing to disable here beyond suppressing any wrap transition. */
  .tdm-ai__launcher-svgwrap,
  .tdm-ai__launcher-svg {
    transition: 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;
  /* #B0470B = 5.09:1 on white (canonical AA orange-link). The old #B84A0C was
     only 4.28:1, below the 4.5:1 floor for this small icon glyph. */
  --tdm-btt-icon: #B0470B;
  --tdm-btt-ring: #B0470B;
}

/* ---------------------------------------------------------------------------
   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; }
}