/* ============================================================
   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: CTA bg, chips, borders, glow (ARECH --orange) */
  --tdm-color-accent-hover: #FF7A2F;
  --tdm-color-accent-active:#C4510E;
  --tdm-color-on-accent:    #FFFFFF;   /* text ON an accent fill (orange-fill + white = valid AA pair) */
  /* Accent used AS TEXT (links, eyebrow accents, accent spans). On a DARK band
     this equals --tdm-color-accent (#E8651A reads AA on dark, 5.74:1). The
     base.css [data-band="light"] hook remaps the per-instance --tdmx-accent-text
     to --tdm-color-accent-text-light on a cream band, where #E8651A fails AA
     (2.8–3.0:1). FILL usages keep --tdm-color-accent and never flip. */
  --tdm-color-accent-text:       var(--tdm-color-accent);   /* dark-band: orange */
  --tdm-color-accent-text-light: #B0470B;   /* light-band link/text accent (ARECH --orange-link): 5.65:1 on paper-0, 5.09:1 on paper-1, 4.65:1 on paper-2 = AA body PASS on all creams (colorist-verified, strict WCAG) */

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ======================================================================
   TDM Image — standalone image with 14 swappable shape masks + caption.
   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-image__* 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, frame radius/border/shadow. This file adds
   the figure layout, the 14 mask shapes (each a self-contained, swappable
   rule), the aspect-ratio locks, the optional corner radius, and the caption.
   ====================================================================== */

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

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

/* When the block is centred (Design `align: center`), centre the figure box. */
.tdm-block[style*="--tdmx-align: center"] .tdm-image__figure,
.tdm-block[style*="--tdmx-align:center"] .tdm-image__figure {
  align-items: center;
}
.tdm-block[style*="--tdmx-align: right"] .tdm-image__figure,
.tdm-block[style*="--tdmx-align:right"] .tdm-image__figure {
  align-items: flex-end;
}

.tdm-image__link {
  display: inline-block;
  text-decoration: none;
  max-width: 100%;
}

/* ---------- Frame ---------- */
/* The frame is the masked/clipped box. It carries the corner radius (when no
   mask) and is the element the clip-path / mask-image applies to. */
.tdm-image__frame {
  display: block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  /* img_radius (content field) sets --tdm-image-radius inline; otherwise the
     Design `radius` var, otherwise no rounding. Masks override visual shape. */
  border-radius: var(--tdm-image-radius, var(--tdmx-radius, 0));
}

/* The image fills the frame. Locked-ratio frames make the image cover. */
.tdm-image__pic,
.tdm-image__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.tdm-image__pic { line-height: 0; }

/* ---------- Aspect-ratio locks ---------- */
/* When a ratio is set the frame owns the box; the image covers it fully. */
.tdm-image--ratio-1x1  { aspect-ratio: 1 / 1; }
.tdm-image--ratio-4x3  { aspect-ratio: 4 / 3; }
.tdm-image--ratio-3x4  { aspect-ratio: 3 / 4; }
.tdm-image--ratio-16x9 { aspect-ratio: 16 / 9; }
.tdm-image--ratio-3x2  { aspect-ratio: 3 / 2; }
.tdm-image--ratio-16x7 { aspect-ratio: 16 / 7; }
.tdm-image--ratio-21x9 { aspect-ratio: 21 / 9; }
.tdm-image--ratio-3x1  { aspect-ratio: 3 / 1; }

.tdm-image--ratio-1x1 .tdm-image__img,
.tdm-image--ratio-4x3 .tdm-image__img,
.tdm-image--ratio-3x4 .tdm-image__img,
.tdm-image--ratio-16x9 .tdm-image__img,
.tdm-image--ratio-3x2 .tdm-image__img,
.tdm-image--ratio-16x7 .tdm-image__img,
.tdm-image--ratio-21x9 .tdm-image__img,
.tdm-image--ratio-3x1 .tdm-image__img,
.tdm-image--ratio-1x1 .tdm-image__pic,
.tdm-image--ratio-4x3 .tdm-image__pic,
.tdm-image--ratio-3x4 .tdm-image__pic,
.tdm-image--ratio-16x9 .tdm-image__pic,
.tdm-image--ratio-3x2 .tdm-image__pic,
.tdm-image--ratio-16x7 .tdm-image__pic,
.tdm-image--ratio-21x9 .tdm-image__pic,
.tdm-image--ratio-3x1 .tdm-image__pic {
  width: 100%;
  height: 100%;
  /* object_fit content control: default `cover` (the var fallback) crops to
     fill; `contain` letterboxes. The view emits --tdm-image-fit only for
     `contain`, so untouched blocks keep the original `cover` byte-for-byte. */
  object-fit: var(--tdm-image-fit, cover);
}

/* ---------- Flip ---------- */
/* Mirrors directional masks (arrow / chevron / parallelogram, etc.). */
.tdm-image--flip { transform: scaleX(-1); }

/* ======================================================================
   14 SWAPPABLE MASK SHAPES.
   Each is one self-contained `.tdm-image--mask-<key>` rule — replace any one's
   clip-path polygon / mask-image path to swap that shape without touching the
   others. Geometric shapes use clip-path; organic shapes (blob, flower) use an
   inline-SVG mask-image data URI with the -webkit- prefix for Safari.
   A masked frame drops its border-radius (the shape defines the silhouette).
   ====================================================================== */

[class*="tdm-image--mask-"]:not(.tdm-image--mask-none) {
  border-radius: 0;
}

/* 1 — circle */
.tdm-image--mask-circle {
  clip-path: circle(50% at 50% 50%);
}

/* 2 — rounded (large token-based corners) */
.tdm-image--mask-rounded {
  border-radius: var(--tdm-radius-lg, 24px);
}

/* 3 — squircle (superellipse approximation) */
.tdm-image--mask-squircle {
  border-radius: 30% / 30%;
}

/* 4 — hexagon (flat-top) */
.tdm-image--mask-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* 5 — octagon */
.tdm-image--mask-octagon {
  clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
}

/* 6 — triangle (point up) */
.tdm-image--mask-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* 7 — diamond (rhombus) */
.tdm-image--mask-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 8 — pentagon (point up) */
.tdm-image--mask-pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* 9 — star (5-point) */
.tdm-image--mask-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 10 — arrow (right-pointing) */
.tdm-image--mask-arrow {
  clip-path: polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%);
}

/* 11 — chevron (right-pointing) */
.tdm-image--mask-chevron {
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);
}

/* 12 — parallelogram (slanted) */
.tdm-image--mask-parallelogram {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

/* 13 — blob (organic, SVG mask-image data URI) */
.tdm-image--mask-blob {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="black" d="M52.7,-58.6C66.5,-46.7,75.3,-29.1,77.4,-10.9C79.6,7.3,75.1,26.1,64.4,40.3C53.7,54.5,36.8,64.1,18.3,69.6C-0.2,75.1,-20.3,76.5,-37.1,69.4C-53.9,62.3,-67.4,46.7,-72.9,29.1C-78.4,11.5,-75.9,-8.1,-68.1,-24.9C-60.3,-41.7,-47.2,-55.7,-32.1,-67C-17,-78.3,0.1,-86.9,15.7,-83.3C31.3,-79.7,45.3,-63.9,52.7,-58.6Z" transform="translate(100 100)"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="black" d="M52.7,-58.6C66.5,-46.7,75.3,-29.1,77.4,-10.9C79.6,7.3,75.1,26.1,64.4,40.3C53.7,54.5,36.8,64.1,18.3,69.6C-0.2,75.1,-20.3,76.5,-37.1,69.4C-53.9,62.3,-67.4,46.7,-72.9,29.1C-78.4,11.5,-75.9,-8.1,-68.1,-24.9C-60.3,-41.7,-47.2,-55.7,-32.1,-67C-17,-78.3,0.1,-86.9,15.7,-83.3C31.3,-79.7,45.3,-63.9,52.7,-58.6Z" transform="translate(100 100)"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* 14 — flower (organic rounded petals, SVG mask-image data URI) */
.tdm-image--mask-flower {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="black" d="M100 20c14 0 25 11 25 25 0-14 11-25 25-25s25 11 25 25-11 25-25 25c14 0 25 11 25 25s-11 25-25 25c14 0 25 11 25 25s-11 25-25 25-25-11-25-25c0 14-11 25-25 25s-25-11-25-25c0 14-11 25-25 25s-25-11-25-25 11-25 25-25c-14 0-25-11-25-25s11-25 25-25c-14 0-25-11-25-25s11-25 25-25 25 11 25 25c0-14 11-25 25-25z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="black" d="M100 20c14 0 25 11 25 25 0-14 11-25 25-25s25 11 25 25-11 25-25 25c14 0 25 11 25 25s-11 25-25 25c14 0 25 11 25 25s-11 25-25 25-25-11-25-25c0 14-11 25-25 25s-25-11-25-25c0 14-11 25-25 25s-25-11-25-25 11-25 25-25c-14 0-25-11-25-25s11-25 25-25c-14 0-25-11-25-25s11-25 25-25 25 11 25 25c0-14 11-25 25-25z"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ---------- Caption ---------- */
.tdm-image__caption {
  margin: 0;
  font-family: var(--tdmx-font-body, var(--tdm-font-body, "DM Sans", system-ui, sans-serif));
  font-size: var(--tdm-text-caption, 13px);
  line-height: 1.5;
  /* Set explicitly to dodge the global heading/inherit colour trap. */
  color: var(--tdmx-text, var(--tdm-color-ink-3, #6B6B75));
}

/* ---------- Placeholder (no picked image / no engine) ---------- */
.tdm-image__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: var(--tdm-space-6, 32px);
  border: 1px dashed var(--tdm-color-ink-3, #6B6B75);
  border-radius: var(--tdm-radius-md, 12px);
  background: var(--tdm-color-surface-2, #141416);
}
.tdm-image__placeholder-label {
  margin: 0;
  font-family: var(--tdm-font-mono, "General Sans", system-ui, sans-serif);
  font-size: 13px;
  color: var(--tdm-color-ink-3, #6B6B75);
  text-align: center;
}

/* ======================================================================
   Hover effect (content-side `hover_fx`; the tdm_image Design profile has no
   hover axis). A class is only added for a non-default value, so blocks left at
   `none` are byte-identical. Gated on (hover:hover) so touch devices never get
   a stuck-scaled image, and hard-disabled under prefers-reduced-motion.
   - zoom   : scale the IMAGE inside the overflow:hidden frame (1.08).
   - grow   : scale the whole frame (1.04).
   - shrink : scale the whole frame (0.96).
   ====================================================================== */
@media (hover: hover) {
  .tdm-image--fx-zoom .tdm-image__img,
  .tdm-image--fx-zoom .tdm-image__pic {
    transition: transform var(--tdm-motion-base, 0.32s) var(--tdm-ease-standard, ease);
    will-change: transform;
  }
  .tdm-image__lb-trigger:hover .tdm-image--fx-zoom .tdm-image__img,
  .tdm-image__lb-trigger:focus-visible .tdm-image--fx-zoom .tdm-image__img,
  .tdm-image__lb-trigger:hover .tdm-image--fx-zoom .tdm-image__pic,
  .tdm-image__lb-trigger:focus-visible .tdm-image--fx-zoom .tdm-image__pic,
  .tdm-image__link:hover .tdm-image--fx-zoom .tdm-image__img,
  .tdm-image__link:focus-visible .tdm-image--fx-zoom .tdm-image__img,
  .tdm-image__link:hover .tdm-image--fx-zoom .tdm-image__pic,
  .tdm-image__link:focus-visible .tdm-image--fx-zoom .tdm-image__pic,
  .tdm-image__figure:hover > .tdm-image--fx-zoom .tdm-image__img,
  .tdm-image__figure:hover > .tdm-image--fx-zoom .tdm-image__pic {
    transform: scale(1.08);
  }

  .tdm-image--fx-grow,
  .tdm-image--fx-shrink {
    transition: transform var(--tdm-motion-base, 0.32s) var(--tdm-ease-standard, ease);
    will-change: transform;
  }
  .tdm-image__lb-trigger:hover .tdm-image--fx-grow,
  .tdm-image__lb-trigger:focus-visible .tdm-image--fx-grow,
  .tdm-image__link:hover .tdm-image--fx-grow,
  .tdm-image__link:focus-visible .tdm-image--fx-grow,
  .tdm-image__figure:hover > .tdm-image--fx-grow {
    transform: scale(1.04);
  }
  .tdm-image__lb-trigger:hover .tdm-image--fx-shrink,
  .tdm-image__lb-trigger:focus-visible .tdm-image--fx-shrink,
  .tdm-image__link:hover .tdm-image--fx-shrink,
  .tdm-image__link:focus-visible .tdm-image--fx-shrink,
  .tdm-image__figure:hover > .tdm-image--fx-shrink {
    transform: scale(0.96);
  }
}

/* ======================================================================
   Lightbox TRIGGER — the figure box becomes a real <button> when lightbox is
   on. Reset the native button chrome so the framed image reads identically to
   the non-lightbox figure, plus a visible focus ring (a11y).
   ====================================================================== */
.tdm-image__lb-trigger {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
          appearance: none;
}
.tdm-image__lb-trigger:focus-visible {
  outline: 3px solid var(--tdm-color-accent, #E8651A);
  outline-offset: 3px;
}

/* ======================================================================
   SELF-CONTAINED LIGHTBOX — copied from tdm_gallery/view.css so the look is
   identical, but shipped here so tdm_image works on pages WITHOUT a gallery
   (the gallery CSS only loads when a gallery renders). These rules only matter
   when a `.tdm-image__lightbox` dialog is present (lightbox = 1). Single image
   → no prev/next, so the nav-arrow rules are intentionally omitted.
   ====================================================================== */
.tdm-image__lightbox.tdm-gal__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
}
.tdm-image__lightbox.tdm-gal__lightbox[hidden] { display: none; }

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

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

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

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

/* lightbox image never overflows its box (responsive manual) */
.tdm-image__lightbox img { max-width: 100%; height: auto; display: block; }

/* ---------- reduced motion: hard gate (mirrors tdm_gallery) ---------- */
@media (prefers-reduced-motion: reduce) {
  .tdm-image__img,
  .tdm-image__pic,
  .tdm-image--fx-grow,
  .tdm-image--fx-shrink,
  .tdm-image__lightbox .tdm-gal__lb-close { transition: none; }
  .tdm-image__lb-trigger:hover .tdm-image__img,
  .tdm-image__lb-trigger:hover .tdm-image__pic,
  .tdm-image__link:hover .tdm-image__img,
  .tdm-image__link:hover .tdm-image__pic,
  .tdm-image__figure:hover [class*="tdm-image--fx-"] { transform: none; }
}

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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