/* ==========================================================================
   AV — HOME MOBILE / TABLET EXPERIENCE  ·  v2.0.0
   --------------------------------------------------------------------------
   Purpose-built touch composition for the homepage (body.home-arena).
   Scope law: every rule is (a) inside a max-width:1080px touch tier or
   (b) an inert base hook, AND scoped to body.home-arena — desktop ≥1081px
   and every other page are structurally unreachable from this file.

   Film, not columns: the touch homepage reads as one continuous vertical
   film — chapter openers (num · rule · tag), hairline spines, masked
   reveals, a pinned case-study reel that settles each plate perfectly
   centred and complete, and a closing footer chapter.
   Motion vocabulary: transform + opacity + clip-path only, sticky depth,
   IO reveals. No loops, no blur abuse, no 3D.
   ========================================================================== */

/* ---------- inert base hooks (desktop sees through them) ---------------- */
.work-film { display: contents; }              /* wrapper: invisible on desktop */
.work-stage { display: contents; }               /* wrapper: invisible on desktop */
.work-hud { display: none; }                     /* touch-only instrument, hidden on desktop */

/* ==========================================================================
   MOBILE TIER  ≤700px  —  phones only.
   Tablet (701px+), laptop, desktop and large screens keep the ORIGINAL
   website design: no rule in this file reaches them except the inert
   base hooks above (display:contents wrappers, hidden touch HUD).
   ========================================================================== */
@media (max-width: 700px) {

  /* ---------------------------------------------------------------- chrome
     No navbar. One typographic instrument, top-right: a tracked word in a
     masked window over two staggered hairlines. The word swaps Menu↔Close
     through the mask; the hairlines cross-stagger. Nothing else floats.   */
  body.home-arena .site-nav {
    inset: calc(12px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) auto auto;
    z-index: 230;   /* below the menu film: the open dialog owns the instrument */
    --nav-ink: #EFF0EA;
  }
  /* the instrument floats over light AND dark chapters — home-mobile.js reads
     the chapter tier under it and flips the ink; no chip, no glass */
  body.home-arena .site-nav[data-tier="light"] { --nav-ink: #0C1330; }
  body.home-arena .site-nav.nav-hidden { pointer-events: none; }
  body.home-arena .site-nav__inner {
    width: auto; margin: 0; padding: 0;
    display: flex; justify-content: flex-end;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Keep the existing typographic instrument, but let the direction state
     supplied by elevate.ts move it clear of the viewport on a real downward
     scroll. The inherited transform transition gives the return journey the
     same smoothness; the menu controller always removes nav-hidden first. */
  body.home-arena .site-nav.is-scrolled .site-nav__inner,
  body.home-arena .site-nav.nav-hidden .site-nav__inner {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.home-arena .site-nav.nav-hidden .site-nav__inner {
    transform: translate3d(0, calc(-100% - 20px), 0);
  }
  body.home-arena .site-nav__inner > .brand,
  body.home-arena .site-nav__inner > .btn--small,
  body.home-arena .site-nav__inner > .nav-links { display: none; }

  body.home-arena .nav-toggle {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    width: 64px; height: 56px; padding: 6px 2px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow: hidden;                                   /* the mask window */
    transition: transform 0.35s var(--ease);
  }
  body.home-arena .nav-toggle:active { transform: translate3d(0, 1px, 0); }
  body.home-arena .nav-toggle:focus-visible { outline: 1px solid var(--azure); outline-offset: 4px; }
  /* adaptive ink: the instrument floats over light AND dark chapters —
     difference-blend keeps it legible on both without a chip behind it */

  /* the word — tracked caps crossing through the mask */
  body.home-arena .nav-toggle::before,
  body.home-arena .nav-toggle::after {
    position: absolute; right: 2px; top: 11px; margin: 0;
    font-family: var(--font); font-style: normal; font-weight: 600;
    font-size: 10px; line-height: 1; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--nav-ink, #EFF0EA); pointer-events: none;
    transition: transform 0.44s var(--ease), opacity 0.26s var(--ease), color 0.4s var(--ease);
  }
  body.home-arena .nav-toggle::before { content: "Menu"; }
  body.home-arena .nav-toggle::after { content: "Close"; opacity: 0; transform: translate3d(0, 15px, 0); }
  body.home-arena .nav-toggle[aria-expanded="true"]::before { opacity: 0; transform: translate3d(0, -15px, 0); }
  body.home-arena .nav-toggle[aria-expanded="true"]::after { opacity: 1; transform: none; }
  /* the mark — two staggered hairlines that cross-stagger on state */
  body.home-arena .nav-toggle__line {
    position: absolute; right: 2px; height: 1px; margin: 0; background: var(--nav-ink, #EFF0EA);
    transform-origin: 100% 50%;
    transition: width 0.44s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
  }
  body.home-arena .nav-toggle__line:nth-child(1) { top: 33px; width: 26px; }
  body.home-arena .nav-toggle__line:nth-child(2) { top: 39px; width: 15px; }
  body.home-arena .nav-toggle__line:nth-child(3) { display: none; }
  body.home-arena .nav-toggle:active .nav-toggle__line { transform: scaleX(0.62); }
  body.home-arena .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { width: 15px; }
  body.home-arena .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { width: 26px; }

  /* ------------------------------------------------------- the menu film
     Full-screen dialog: staggered editorial rows, actions anchored low.
     Focus trap / Esc / return-focus stay in main.js. The dialog's own close
     sits exactly over the nav instrument, so Menu→Close reads as one
     control morphing across layers.                                       */
  body.home-arena .mobile-menu {
    position: fixed; inset: 0; z-index: 240;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pad-x) calc(34px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(120% 60% at 88% -6%, rgba(110, 168, 255, 0.14), transparent 60%),
      radial-gradient(90% 50% at 8% 108%, rgba(110, 168, 255, 0.07), transparent 62%),
      rgba(4, 7, 16, 0.996);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
    overscroll-behavior: contain;
  }
  body.home-arena .mobile-menu.is-open { opacity: 1; pointer-events: auto; }
  body.home-arena .mobile-menu[hidden] { display: none; }
  /* the close half of the instrument — same geometry, same mask */
  body.home-arena .mobile-menu__bar {
    display: flex; justify-content: flex-end; align-items: flex-start;
    min-height: 56px; padding: 0; margin: 0 calc(var(--pad-x) * -1 + 14px) 0 0;
  }
  body.home-arena .mobile-menu__close {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    width: 64px; height: 56px; padding: 6px 2px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    overflow: hidden; color: var(--chrome-text);
    transition: transform 0.35s var(--ease);
  }
  body.home-arena .mobile-menu__close:active { transform: translate3d(0, 1px, 0); }
  body.home-arena .mobile-menu__close:hover { transform: none; }   /* base spins the old round button 90° */
  body.home-arena .mobile-menu__close:focus-visible { outline: 1px solid var(--azure); outline-offset: 4px; }
  body.home-arena .mobile-menu__close svg,
  body.home-arena .mobile-menu__close > span:not(.nav-toggle__line) { display: none; }
  body.home-arena .mobile-menu__close::before {
    content: "Close";
    position: absolute; right: 2px; top: 11px; margin: 0;
    font-family: var(--font); font-style: normal; font-weight: 600;
    font-size: 10px; line-height: 1; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--chrome-text);
    opacity: 0; transform: translate3d(0, 15px, 0);
    transition: transform 0.5s var(--ease) 0.14s, opacity 0.3s var(--ease) 0.14s;
  }
  body.home-arena .mobile-menu.is-open .mobile-menu__close::before { opacity: 1; transform: none; }
  body.home-arena .mobile-menu__close::after {
    content: ""; position: absolute; right: 2px; top: 33px; width: 26px; height: 1px;
    background: var(--azure); transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform 0.5s var(--ease) 0.2s;
  }
  body.home-arena .mobile-menu.is-open .mobile-menu__close::after { transform: scaleX(1); }
  /* the bar caption stays for screen readers, yields the stage visually */
  body.home-arena .mobile-menu__title {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
    font-size: 10.5px; letter-spacing: 0.32em;
  }
  body.home-arena .mobile-menu nav { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  body.home-arena .mobile-menu__list { border-top: 1px solid rgba(148, 170, 230, 0.14); }
  body.home-arena .mobile-menu__list li { overflow: hidden; }
  body.home-arena .mobile-menu__list li a {
    display: flex; align-items: baseline; gap: clamp(14px, 4vw, 22px);
    padding: clamp(13px, 2.5vh, 20px) 2px;
    font-size: clamp(1.85rem, 7.6vw, 3.05rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05;
    border-bottom: 1px solid rgba(148, 170, 230, 0.14);
    opacity: 0; transform: translate3d(0, 30px, 0);
    transition: color 0.3s var(--ease), opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: 0s, calc(0.12s + var(--mi, 0) * 0.07s), calc(0.12s + var(--mi, 0) * 0.07s);
  }
  body.home-arena .mobile-menu.is-open .mobile-menu__list li a { opacity: 1; transform: none; }
  body.home-arena .mobile-menu__list li a:active { color: var(--azure-hi); }
  body.home-arena .mobile-menu__actions {
    margin-top: clamp(22px, 4vh, 40px); display: grid; gap: 14px; justify-items: stretch;
    opacity: 0; transform: translate3d(0, 18px, 0);
    transition: opacity 0.6s var(--ease-out) 0.44s, transform 0.6s var(--ease-out) 0.44s;
  }
  body.home-arena .mobile-menu.is-open .mobile-menu__actions { opacity: 1; transform: none; }
  body.home-arena .mobile-menu__mail { justify-content: center; font-size: 13px; letter-spacing: 0.1em; }

  /* ------------------------------------------------- chapter opener system
     One recurring cadence gives the film its continuity:
     serif numeral · hairline rule · tracked tag.                            */
  body.home-arena .chapter { padding: clamp(76px, 11vh, 132px) 0; }
  body.home-arena .chapter__meta { gap: 14px; margin-bottom: clamp(20px, 3.2vh, 30px); }
  body.home-arena .chapter__num { display: inline; font-size: 1.55em; }
  body.home-arena .chapter__rule { width: clamp(26px, 7vw, 52px); }
  body.home-arena .chapter__head { margin-bottom: clamp(40px, 6.5vh, 72px); }
  body.home-arena .chapter__head--split { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  body.home-arena .chapter__title { font-size: clamp(2.1rem, 7.4vw, 3.55rem); max-width: 100%; }
  body.home-arena .chapter__title--wide { max-width: 20ch; }
  body.home-arena .chapter__lede { font-size: clamp(1.02rem, 3.9vw, 1.32rem); max-width: 40ch; }

  /* ------------------------------------------------------------------ HERO
     Re-composed for touch: name as two offset slabs, portrait as a full-width
     framed plate, then voice, actions and disciplines in one cadence.      */
  body.home-arena .hp6-stage { padding: calc(84px + env(safe-area-inset-top, 0px)) var(--pad-x) clamp(56px, 8vh, 84px); justify-content: flex-start; }
  body.home-arena .hp6-title { min-height: 0; }
  body.home-arena .hp6-name { font-size: clamp(3.05rem, 14.6vw, 7.2rem); line-height: 0.92; letter-spacing: -0.048em; }
  body.home-arena .hp6-name__line--two { padding-left: clamp(20px, 8.5vw, 120px); }
  body.home-arena .hp6-frame {
    position: relative; top: auto; right: auto; transform: none;
    width: min(100%, 560px); margin: clamp(18px, 3.4vh, 34px) 0 0;
    padding: clamp(10px, 2.4vw, 16px) clamp(10px, 2.4vw, 16px) clamp(8px, 1.8vw, 10px);
  }
  body.home-arena .hp6-frame__well { aspect-ratio: 4 / 4.4; }
  body.home-arena .hp6 .hp6-frame, body.home-arena html.js .hp6 .hp6-frame { transform: none; }
  body.home-arena .hp6-frame__meta { padding-top: 8px; font-size: 9px; letter-spacing: 0.16em; }
  body.home-arena .hp6-grid { display: block; margin-top: clamp(26px, 4.6vh, 44px); }
  body.home-arena .hp6 .hp-hero__tagline { font-size: clamp(1.62rem, 6.6vw, 3rem); line-height: 1.12; }
  body.home-arena .hp6-lede { margin-top: clamp(12px, 2vh, 18px); font-size: clamp(0.98rem, 3.8vw, 1.22rem); max-width: 46ch; }
  body.home-arena .hp6-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(18px, 3vh, 26px); }
  body.home-arena .hp6-actions .btn { justify-content: center; padding: 16px 24px; }
  body.home-arena .hp6-roles { display: grid; grid-template-columns: 1fr; margin-top: clamp(22px, 3.6vh, 32px); }
  body.home-arena .hp6-roles li { padding: 12px 2px 12px 24px; }
  body.home-arena .hp6-roles li:nth-child(2) { border-right: 0; }
  body.home-arena .hp6-roles li:nth-child(2)::after { display: block; }
  body.home-arena .hp6 .hp-hero__avail { margin-top: clamp(18px, 3vh, 28px); }
  body.home-arena .hp6 .hp-hero__cue { display: none; }
  body.home-arena .hp6-field span { opacity: 0.09; }
  body.home-arena .hp6-field span:nth-child(n+5) { display: none; }
  body.home-arena .hp-hero__marquee { padding: 13px 0; }

  /* ----------------------------------------------------------------- TRUST
     The original chapter, restored: split head (title | lede) and the white
     logo-tile wall exactly as the site designs them. The touch layer only
     adds tap feedback — no invented concept.                              */
  body.home-arena .logo-tile:active { transform: scale(0.985); border-color: var(--ca); }
  body.home-arena .logo-tile:active img { filter: saturate(1); opacity: 1; }

  /* ---------------------------------------------------------- CAPABILITIES
     A physical deck: six sticky plates stacking with visible edges; covered
     plates compress + dim via --squash (set by home-mobile.js). No visible
     numbering — the plates carry only title and voice.                    */
  body.home-arena .cap-list { gap: clamp(14px, 2.2vh, 20px); }
  body.home-arena .cap {
    position: sticky; top: calc(74px + var(--i) * clamp(8px, 1.4vh, 14px) + env(safe-area-inset-top, 0px));
    display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start;
    min-height: clamp(180px, 26vh, 260px);
    padding: clamp(22px, 4vh, 34px) clamp(20px, 4.6vw, 40px);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(110, 168, 255, 0.05), transparent 45%), #0D1730;
    transform: scale(calc(1 - var(--squash, 0) * 0.045));
    transform-origin: 50% 0%;
    filter: brightness(calc(1 - var(--squash, 0) * 0.34));
    transition: filter 0.4s linear;
    will-change: transform;
  }
  body.home-arena .cap__index { display: none; }   /* the deck, not a numbered list */
  body.home-arena .cap h3 { font-size: clamp(1.42rem, 5.6vw, 2.2rem); max-width: 100%; }
  body.home-arena .cap p { font-size: clamp(0.94rem, 3.5vw, 1.06rem); max-width: 52ch; }
  body.home-arena .cap--feature { background: linear-gradient(165deg, rgba(110, 168, 255, 0.16), transparent 55%), #12224C; }

  /* ------------------------------------------------------- FEATURED WORK
     The reel: the intro scrolls away, then a pinned stage pans horizontally
     through three gallery plates. home-mobile.js quantises the pan so every
     plate SETTLES perfectly centred — the complete artwork (contain-fitted
     on its matte inside a hairline frame, never cropped) plus plaque and
     dossier as one composition, always fully inside the viewport.
     Inactive plates recede (scale + opacity); the HUD narrates position.
     Without JS / reduced motion / squat landscape: stacked plates.         */
  body.home-arena { --work-slide: min(88vw, 660px); }
  body.home-arena .work-stage { display: contents; }
  body.home-arena.hm-pin .work { height: var(--work-runway, 360vh); padding: 0; }
  body.home-arena.hm-pin .work > .container { max-width: none; width: 100%; min-height: 100%; }
  body.home-arena.hm-pin .work .chapter__head { margin-bottom: 0; padding: clamp(76px, 11vh, 132px) var(--pad-x) clamp(16px, 3vh, 30px); }
  body.home-arena.hm-pin .work-stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; flex-direction: column;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 0 calc(10px + env(safe-area-inset-bottom, 0px));
    /* `hidden` made the pinned stage an internal scroll container on touch
       browsers. Clip the wide film without owning vertical touch scrolling,
       so an upward gesture always chains straight back to the document. */
    overflow: clip;
  }
  body.home-arena .work-film {
    display: flex; align-items: stretch; order: 2;
    flex: 1; min-height: 0;
    gap: clamp(18px, 5vw, 52px);
    padding-inline: 0;
    will-change: transform;
  }
  /* real spacer items (not padding — flexbox drops end padding from
     scrollWidth): they make the first & last plates rest exactly centred */
  body.home-arena .work-film::before,
  body.home-arena .work-film::after {
    content: ""; flex: 0 0 max(var(--pad-x), calc((100% - var(--work-slide)) / 2));
  }
  body.home-arena .case {
    counter-increment: workcase;
    flex: 0 0 var(--work-slide);
    margin: 0; position: relative;
    display: flex; flex-direction: column; justify-content: center; min-height: 0;
    opacity: 0.35; transform: scale(0.93);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  body.home-arena .case.is-active { opacity: 1; transform: none; }
  /* plate header — serif numeral with a drawn hairline */
  body.home-arena .case::before {
    content: "0" counter(workcase);
    flex: 0 0 auto;
    font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 4.6vw, 2rem);
    line-height: 1; color: var(--ca);
    padding-bottom: 9px; margin-bottom: clamp(8px, 1.4vh, 14px);
    background: linear-gradient(var(--cl), var(--cl)) no-repeat right center / calc(100% - 3.4em) 1px;
  }
  /* the frame — complete artwork on its matte, plaque beneath */
  body.home-arena .case__panel {
    position: relative; overflow: hidden; flex: 0 0 auto;
    aspect-ratio: auto; height: auto;
    display: flex; flex-direction: column;
    border-radius: clamp(14px, 2.6vw, 20px);
    border: 1px solid var(--cl); background: #05070D;
    box-shadow: 0 28px 56px -44px rgba(5, 8, 18, 0.55);
    transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
  }
  body.home-arena .case.is-active .case__panel { border-color: rgba(46, 90, 172, 0.45); box-shadow: 0 34px 64px -40px rgba(5, 8, 18, 0.62); }
  /* parallax lives on <picture>: main.js owns the <img> inline transform */
  body.home-arena .case__panel picture {
    position: relative; inset: auto; flex: 0 0 auto;
    height: auto; aspect-ratio: 1672 / 941;
    width: auto; align-self: stretch;   /* stretch = panel width MINUS the matte margins — never overflows the frame */
    margin: clamp(8px, 1.8vw, 14px) clamp(8px, 1.8vw, 14px) 0;
    transform: translate3d(var(--work-px, 0px), 0, 0);
  }
  body.home-arena .case__panel img { object-fit: contain; object-position: center; }
  /* the plaque — identity set under the artwork inside the frame */
  body.home-arena .case__card {
    position: static; flex: 0 0 auto; width: auto; max-width: none;
    margin: 0; padding: clamp(10px, 2vh, 16px) clamp(12px, 2.6vw, 20px) clamp(12px, 2.2vh, 18px);
    background: none; border: 0; border-radius: 0; box-shadow: none;
    border-top: 1px solid rgba(148, 170, 230, 0.14);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: #EFF0EA;
    opacity: 1; transform: none;   /* the plate carries its own motion */
  }
  body.home-arena .case__card__in { padding: 0; }
  body.home-arena .case__cat { color: var(--azure-hi); font-size: 10px; letter-spacing: 0.24em; margin-bottom: 4px; }
  body.home-arena .case__client { color: #FFFFFF; font-size: clamp(1.32rem, 5vw, 2.2rem); line-height: 1.06; letter-spacing: -0.028em; margin-bottom: 2px; white-space: normal; text-wrap: balance; }
  body.home-arena .case__title { color: rgba(239, 240, 234, 0.76); font-size: clamp(0.86rem, 3.1vw, 1.02rem); max-width: 44ch; margin-bottom: 6px; white-space: normal; }
  body.home-arena .case__card__foot { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 0; }
  body.home-arena .case__work { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239, 240, 234, 0.55); white-space: normal; }
  body.home-arena .case__card-cta { color: var(--azure-hi); font-size: 14px; min-height: 44px; }
  body.home-arena .case__card-cta:active { color: #FFFFFF; }
  /* dossier on the chapter surface */
  body.home-arena .case__meta {
    margin-top: clamp(10px, 1.8vh, 16px); padding-top: clamp(8px, 1.3vh, 12px);
    border-top: 1px solid var(--cl);
    display: grid; grid-template-columns: 1fr 1fr; gap: 7px clamp(14px, 3vw, 26px);
  }
  body.home-arena .case__meta dt { font-size: 9.5px; letter-spacing: 0.2em; padding-bottom: 3px; margin-bottom: 3px; }
  body.home-arena .case__meta dd { font-size: clamp(0.76rem, 2.85vw, 0.9rem); line-height: 1.45; }
  /* HUD — the reel's instrument panel */
  body.home-arena.hm-pin .work-hud {
    display: flex; align-items: center; gap: 14px; order: 3;
    margin: clamp(10px, 1.8vh, 18px) calc(var(--pad-x) + 54px) 0 var(--pad-x);
  }
  body.home-arena .work-hud__num { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--ca); line-height: 1; min-width: 2ch; }
  body.home-arena .work-hud__bar { flex: 1; height: 1px; background: var(--cl); overflow: hidden; }
  body.home-arena .work-hud__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ca), var(--cah)); transform: scaleX(0.001); transform-origin: 0 50%; }
  body.home-arena .work-hud__tot { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--cm); }
  /* fallback: no pin (JS off / reduced motion / squat landscape) */
  body.home-arena:not(.hm-pin) .work-film { display: grid; gap: clamp(48px, 8vh, 84px); padding: 0 var(--pad-x); }
  body.home-arena:not(.hm-pin) .work-film::before,
  body.home-arena:not(.hm-pin) .work-film::after { display: none; }
  body.home-arena:not(.hm-pin) .case { flex: none; opacity: 1; transform: none; }

  /* ------------------------------------------------------- POINT OF VIEW
     The voice stays; the listing loses its numbering and the essay title
     becomes the anchor of each row — tag and read-time drop beneath it.   */
  body.home-arena .thinking__quote p { font-size: clamp(1.85rem, 7.2vw, 3.4rem); max-width: 100%; }
  body.home-arena .thinking__lede p { font-size: clamp(0.98rem, 3.7vw, 1.2rem); }
  body.home-arena .essays { margin-top: clamp(36px, 6vh, 64px); }
  body.home-arena .essays li { border-top: 1px solid var(--cl); }
  body.home-arena .essays li:last-child { border-bottom: 1px solid var(--cl); }
  body.home-arena .essay { display: flex; align-items: center; gap: 14px; padding: clamp(18px, 3vh, 26px) 2px; }
  body.home-arena .essay__num { display: none; }   /* titles carry the list */
  body.home-arena .essay__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
  body.home-arena .essay__title {
    font-size: clamp(1.22rem, 5.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.022em;
    line-height: 1.14; color: var(--chrome-text);
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  body.home-arena .essay__tag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--chrome-muted); }
  body.home-arena .essay .btn__arrow { flex: 0 0 auto; color: var(--ca); transition: transform 0.35s var(--ease), color 0.3s var(--ease); }
  body.home-arena .essay:active .essay__title { color: var(--azure-hi); }
  body.home-arena .essay:active .btn__arrow { transform: translate3d(6px, 0, 0); color: var(--azure-hi); }
  body.home-arena .thinking__media { margin-top: clamp(44px, 7vh, 80px); border-radius: 16px; }
  body.home-arena .thinking__media img { aspect-ratio: 4 / 3; }
  body.home-arena .thinking__media figcaption { left: 16px; bottom: 14px; font-size: 11px; }

  /* ---------------------------------------------------------------- JOURNEY
     A spine, not a table: one continuous hairline draws itself as the nine
     eras pass; nodes ignite; the counter narrates. (home-mobile.js drives
     --spine + .is-lit.)                                                     */
  body.home-arena .journey { height: auto; }
  body.home-arena .journey__pin { position: static; min-height: 0; padding: clamp(76px, 11vh, 132px) 0 0; overflow: visible; }
  body.home-arena .journey__head { display: block; margin-bottom: clamp(30px, 5vh, 52px); }
  body.home-arena .journey__hint { display: none; }
  body.home-arena .journey__viewport { display: block; }
  body.home-arena .journey__track {
    position: relative; flex-direction: column; gap: 0; width: 100%;
    padding: 0 var(--pad-x); transform: none;
  }
  body.home-arena .journey__track::before,
  body.home-arena .journey__track::after {
    content: ""; position: absolute; left: calc(var(--pad-x) + 4px); top: 8px; bottom: 8px; width: 1px;
  }
  body.home-arena .journey__track::before { background: var(--cl); }
  body.home-arena .journey__track::after {
    background: linear-gradient(180deg, var(--ca), var(--cah));
    transform: scaleY(var(--spine, 0)); transform-origin: 50% 0;
  }
  body.home-arena .era {
    width: 100%; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: clamp(18px, 3.8vh, 34px) 0 clamp(18px, 3.8vh, 34px) clamp(26px, 6vw, 44px);
    border: 0;
  }
  body.home-arena .era:nth-child(even) { transform: none; padding-left: clamp(40px, 11vw, 96px); }
  body.home-arena .era::before { left: 0; top: clamp(24px, 4.8vh, 42px); width: 9px; height: 9px; background: var(--cb); border: 1.5px solid var(--cls); box-shadow: none; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
  body.home-arena .era:nth-child(even)::before { left: 0; }
  body.home-arena .era.is-lit::before { background: var(--ca); border-color: var(--ca); box-shadow: 0 0 0 4px var(--chip-tint); }
  body.home-arena .era__index { display: none; }   /* the evolution, not a numbered timeline */
  body.home-arena .era__name { transition: color 0.7s var(--ease), opacity 0.7s var(--ease); color: var(--cm); opacity: 0.62; }
  body.home-arena .era.is-lit .era__name { color: #0C1330; opacity: 1; }
  body.home-arena .era__note { transition: opacity 0.7s var(--ease); opacity: 0.55; }
  body.home-arena .era.is-lit .era__note { opacity: 1; }
  body.home-arena .era__name { font-size: clamp(1.75rem, 7.4vw, 3.1rem); letter-spacing: -0.032em; }
  body.home-arena .era__note { max-width: 26ch; text-align: left; font-size: 11px; }
  body.home-arena .era--future .era__name { font-size: clamp(1.9rem, 8vw, 3.4rem); }
  body.home-arena .journey__barwrap { display: flex; margin-top: clamp(10px, 2vh, 18px); }
  body.home-arena .journey__bar { display: block; }
  body.home-arena .journey__counter { display: none; }
  body.home-arena .coda { padding: clamp(40px, 7vh, 72px) 0 clamp(64px, 10vh, 110px); }
  body.home-arena .journey__coda { font-size: clamp(1.6rem, 6.6vw, 3rem); }

  /* ---------------------------------------------------------------- METHOD
     Same identity, touch cadence: plate first, then voice, chips, proofs.  */
  body.home-arena .ai__grid { gap: clamp(30px, 5vh, 54px); }
  body.home-arena .ai__media { border-radius: 16px; }
  body.home-arena .ai__media img { aspect-ratio: 4 / 3; }
  body.home-arena .ai__media figcaption { left: 16px; bottom: 14px; font-size: 11px; }
  body.home-arena .chip-list { gap: 8px; }
  body.home-arena .chip-list li { padding: 10px 16px; font-size: 12.5px; }
  body.home-arena .ai__projects { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(20px, 3.4vh, 30px); }
  body.home-arena .ai__motto { margin-top: clamp(22px, 3.6vh, 32px); font-size: clamp(1.15rem, 4.8vw, 1.7rem); }

  /* ------------------------------------------------------------------- NOW
     Ledger rows, unnumbered; the open-to panel as a ruled aside.           */
  body.home-arena .focus__grid { gap: clamp(34px, 6vh, 60px); }
  body.home-arena .focus__list li { gap: 16px; padding: clamp(16px, 2.8vh, 26px) 2px; font-size: clamp(1.2rem, 5.2vw, 1.8rem); }
  body.home-arena .focus__num { display: none; }
  body.home-arena .focus__list li { padding-left: 0; }
  body.home-arena .focus__open { border-left: 1px solid var(--cl); padding-left: clamp(18px, 4.6vw, 34px); }
  body.home-arena .open__list { gap: 10px; }
  body.home-arena .open__list li { padding: 12px 20px; font-size: 14px; }
  body.home-arena .focus__note { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 4vw, 1.35rem); color: var(--cm); max-width: 30ch; }

  /* --------------------------------------------------------------- CONTACT
     One column, generous air; the calendar becomes a thumb-reach sheet.    */
  body.home-arena .contact__grid { gap: clamp(34px, 6vh, 56px); }
  body.home-arena .contact__title { font-size: clamp(2.2rem, 8.6vw, 4rem); max-width: 100%; }
  body.home-arena .contact__micro { margin-top: clamp(28px, 4.6vh, 44px); }
  body.home-arena .contact__micro li { padding: 14px 2px; }
  body.home-arena .book { border-radius: 20px; padding: clamp(20px, 4.4vw, 34px); }
  body.home-arena .cf-row { grid-template-columns: 1fr; }
  body.home-arena .date-pop {
    position: fixed; inset: 0; z-index: 280;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding: 18px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 8, 16, 0.62);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translate3d(0, 4%, 0); opacity: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* .book keeps a residual transform on desktop (entrance) which would trap
     position:fixed descendants — clear it on touch so the sheet hits the viewport */
  body.home-arena .book { transform: none !important; }
  body.home-arena .date-pop.is-open > *:first-child { margin-top: auto; }
  body.home-arena .date-pop.is-open { transform: none; opacity: 1; }
  body.home-arena .date-pop .datepick { max-width: 540px; margin: 0 auto; }
  body.home-arena .date-pop__hint { text-align: center; color: #B9C4DE; }
  body.home-arena .tslots__row { gap: 8px; }
  body.home-arena .book__summary { margin: 16px 0 12px; }

  /* ---------------------------------------------------------------- FOOTER
     The final chapter, not a stacked footer. One asymmetric editorial
     column: a quiet chapter cue, the site's own tagline set as a massive
     masked statement, START A CONVERSATION as the closing primary action,
     then the signature ledger, then a ruled navigation index (menu ·
     resources · legal · social), then the colophon split across a hairline.
     home-mobile.js ignites each scene (.is-in) as it enters.               */
  body.home-arena .footer { padding: clamp(84px, 14vh, 150px) 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
  body.home-arena .footer--arena .footer__inner {
    display: grid; grid-template-columns: 1fr auto; gap: 0;
    justify-items: stretch; text-align: left; align-items: start;
  }
  body.home-arena .footer--arena .footer__inner > * { grid-column: 1 / -1; }
  body.home-arena .footer--arena .footer__brand { display: contents; }
  body.home-arena .footer--arena .footer__bottom { display: contents; }
  /* the menu column dissolves: its CTA link becomes the closing action,
     its remaining links join the index ledger */
  body.home-arena .footer__col:nth-child(2) { display: contents; }
  body.home-arena .footer__col:nth-child(2) .footer__links { display: contents; }
  body.home-arena .footer__col:nth-child(2) .footer__links li { display: contents; }
  body.home-arena .footer__col:nth-child(2) .footer__label { order: 6; }
  /* scene 0 — the chapter cue */
  body.home-arena .footer--arena .footer__inner::before {
    content: "Final chapter";
    order: 0; grid-column: 1 / -1;
    display: flex; align-items: center; gap: 14px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--chrome-muted);
    opacity: 0; transform: translate3d(0, 12px, 0);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  body.home-arena .footer--arena .footer__inner::before::after {
    content: ""; width: clamp(26px, 7vw, 52px); height: 1px; background: var(--chrome-muted);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease) 0.15s;
  }
  body.home-arena .footer--arena .footer__inner.is-in::before { opacity: 1; transform: none; }
  body.home-arena .footer--arena .footer__inner.is-in::before::after { transform: scaleX(1); }
  /* scene 1 — the massive closing statement (the site's own tagline) */
  body.home-arena .footer--arena .footer__line {
    order: 1; grid-column: 1 / -1;
    margin: clamp(30px, 5.4vh, 52px) 0 0; max-width: none;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(2.5rem, 11.2vw, 5.4rem); line-height: 1.04; letter-spacing: -0.02em;
    color: var(--chrome-text); text-wrap: balance;
    clip-path: inset(0 0 102% 0);
    transition: clip-path 1.05s var(--ease-out) 0.08s;
  }
  /* ignited by the footer container (a clip-path'd element reports a zero
     intersection rect, so it can never trigger its own observer) */
  body.home-arena .footer--arena .footer__inner.is-in .footer__line,
  body.home-arena .footer--arena .footer__line.is-in { clip-path: inset(-12% -8% -18% -8%); }
  /* scene 2 — the closing primary action */
  body.home-arena .footer__links a[href="/contact/"] {
    order: 2; grid-column: 1 / -1;
    display: inline-flex; align-items: center; gap: clamp(12px, 3vw, 20px);
    width: fit-content; max-width: 100%;
    margin-top: clamp(34px, 6vh, 60px); min-height: 56px;
    font-family: var(--font); font-style: normal; font-weight: 650;
    font-size: clamp(0.98rem, 3.9vw, 1.42rem); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--chrome-text);
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
    opacity: 0; transform: translate3d(0, 16px, 0);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out),
                background-size 0.5s var(--ease), color 0.3s var(--ease);
  }
  body.home-arena .footer__links a[href="/contact/"].is-in { opacity: 1; transform: none; background-size: 100% 1px; }
  body.home-arena .footer__links a[href="/contact/"]::after {
    content: "→"; position: static; inset: auto; width: auto; height: auto; background: none;
    border-radius: 0; transform: none; font-family: var(--font); font-style: normal; font-weight: 400;
    font-size: 1.25em; line-height: 1; color: var(--azure);
    transition: transform 0.4s var(--ease);
  }
  body.home-arena .footer__links a[href="/contact/"]:active { color: var(--azure-hi); }
  body.home-arena .footer__links a[href="/contact/"]:active::after { transform: translate3d(10px, 0, 0); }
  /* scene 3 — the signature ledger */
  body.home-arena .footer--arena .footer__brandtop {
    order: 3; grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: flex-start; gap: 14px;
    margin-top: clamp(56px, 10vh, 104px); padding-top: clamp(30px, 5.4vh, 52px);
    border-top: 1px solid rgba(148, 170, 230, 0.16);
    opacity: 0; transform: translate3d(0, 14px, 0);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  body.home-arena .footer--arena .footer__brandtop.is-in { opacity: 1; transform: none; }
  body.home-arena .footer--arena .brand__logo--foot { width: 34px; height: 34px; }
  body.home-arena .footer--arena .footer__name {
    display: block; font-size: clamp(1.05rem, 4.4vw, 1.6rem); font-weight: 650;
    letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2;
    color: var(--chrome-text);
  }
  body.home-arena .footer--arena .footer__contact {
    order: 4; grid-column: 1 / -1;
    margin: clamp(18px, 3vh, 28px) 0 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; max-width: 520px;
  }
  body.home-arena .footer--arena .footer__contact a {
    display: flex; align-items: center; min-height: 52px;
    font-size: clamp(1rem, 4.1vw, 1.3rem); color: var(--chrome-text);
    border-top: 1px solid rgba(148, 170, 230, 0.12);
    transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
  }
  body.home-arena .footer--arena .footer__contact a:last-child { border-bottom: 1px solid rgba(148, 170, 230, 0.12); }
  body.home-arena .footer--arena .footer__contact a:active { color: var(--azure-hi); padding-left: 8px; }
  body.home-arena .footer--arena .footer__avail {
    order: 5; grid-column: 1 / -1;
    margin-top: clamp(16px, 2.6vh, 24px);
    font-size: 12px; letter-spacing: 0.08em; color: var(--chrome-muted);
  }
  /* scene 4 — the navigation index: ruled ledger, group by group */
  body.home-arena .footer--arena .footer__col { align-items: stretch; }
  body.home-arena .footer--arena .footer__label {
    grid-column: 1 / -1;
    margin: clamp(40px, 7.2vh, 72px) 0 0; padding-top: 14px;
    border-top: 1px solid rgba(148, 170, 230, 0.16);
    font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--chrome-muted); text-align: left;
  }
  body.home-arena .footer--arena .footer__links { gap: 0; }
  body.home-arena .footer__col:nth-child(2) .footer__links a:not([href="/contact/"]) {
    order: 7; grid-column: 1 / -1;
    display: flex; align-items: center; min-height: 50px;
    font-size: clamp(0.98rem, 4vw, 1.18rem); color: var(--chrome-muted);
    border-bottom: 1px solid rgba(148, 170, 230, 0.1);
    transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
  }
  body.home-arena .footer__col:nth-child(2) .footer__links a:not([href="/contact/"]):active { color: var(--azure-hi); padding-left: 8px; }
  body.home-arena .footer__col:nth-child(3) { order: 8; grid-column: 1 / -1; }
  body.home-arena .footer__col:nth-child(4) { order: 9; grid-column: 1 / -1; }
  body.home-arena .footer__col:nth-child(3) .footer__links,
  body.home-arena .footer__col:nth-child(4) .footer__links { display: block; width: 100%; }
  body.home-arena .footer__col:nth-child(3) .footer__links a,
  body.home-arena .footer__col:nth-child(4) .footer__links a {
    display: flex; align-items: center; min-height: 50px;
    font-size: clamp(0.98rem, 4vw, 1.18rem); color: var(--chrome-muted);
    border-bottom: 1px solid rgba(148, 170, 230, 0.1);
    transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
  }
  body.home-arena .footer__col:nth-child(3) .footer__links a:active,
  body.home-arena .footer__col:nth-child(4) .footer__links a:active { color: var(--azure-hi); padding-left: 8px; }
  /* social — the index's last register, chips in a row */
  body.home-arena .footer__col:nth-child(5) { order: 10; grid-column: 1 / -1; }
  body.home-arena .footer--arena .footer__social { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  body.home-arena .footer--arena .footer__social li { width: auto; }
  body.home-arena .footer--arena .footer__social a {
    display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
    padding: 10px 16px 10px 13px; border-radius: 999px;
    border: 1px solid rgba(148, 170, 230, 0.2); font-size: 13px; color: var(--chrome-muted);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  body.home-arena .footer--arena .footer__social a:active { border-color: var(--azure); color: var(--azure-hi); transform: translate3d(0, -1px, 0); }
  body.home-arena .footer--arena .footer__social svg { width: 15px; height: 15px; color: var(--azure); }
  /* scene 5 — the colophon, split across the last hairline */
  body.home-arena .footer--arena .footer__copy {
    order: 11; grid-column: 1 / 2;
    margin: clamp(44px, 8vh, 78px) 0 0; padding-top: 18px;
    border-top: 1px solid rgba(148, 170, 230, 0.14);
    font-size: 11.5px; line-height: 1.7; color: var(--chrome-muted);
    max-width: 46ch;
  }
  body.home-arena .footer--arena .footer__note {
    order: 11; grid-column: 2 / 3; align-self: end;
    margin: 0; padding-top: 18px;
    font-size: 11px; line-height: 1.7; color: var(--chrome-muted);
    text-align: right; max-width: 30ch;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 58px);
  }

  /* The mobile footer finishes with contact details and the navigation ledger;
     keep its desktop-only statement and duplicate contact CTA out of this tier. */
  body.home-arena .footer--arena .footer__line,
  body.home-arena .footer--arena .footer__links a[href="/contact/"] {
    display: none !important;
  }

  /* The former statement and action reserved a large opening gap. Preserve a
     considered transition into the remaining signature ledger instead. */
  body.home-arena .footer--arena .footer__brandtop {
    order: 1;
    margin-top: clamp(30px, 5.4vh, 52px);
    padding-top: 0;
    border-top: 0;
  }
}

/* ==========================================================================
   PHONE  ≤700px  — the primary instrument
   ========================================================================== */
@media (max-width: 700px) {
  body.home-arena .hp6-stage { padding-top: calc(78px + env(safe-area-inset-top, 0px)); }
  body.home-arena .hp6-name { font-size: clamp(2.6rem, 14.2vw, 4.7rem); }
  body.home-arena .hp6-name__line--two { padding-left: clamp(18px, 7.6vw, 96px); }
  body.home-arena .hp6-frame__well { aspect-ratio: 4 / 4.6; }
  body.home-arena .chapter__title { font-size: clamp(1.95rem, 8.6vw, 2.9rem); }
  body.home-arena .cap { min-height: 0; top: calc(68px + var(--i) * 9px + env(safe-area-inset-top, 0px)); }
  body.home-arena .case__meta { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  body.home-arena .thinking__media img { aspect-ratio: 4 / 3.4; }
  body.home-arena .ai__media img { aspect-ratio: 4 / 3.4; }
  body.home-arena .book { border-radius: 18px; }
  body.home-arena .footer--arena .footer__social a { padding: 9px 14px 9px 12px; font-size: 12.5px; }
  body.home-arena .footer--arena .footer__note { grid-column: 1 / -1; text-align: left; max-width: 46ch; }
}

/* ==========================================================================
   SMALL PHONE  ≤480px / ≤360px  — readability first, never crammed
   ========================================================================== */
@media (max-width: 480px) {
  body.home-arena { --work-slide: 90vw; }
  body.home-arena .hp6-actions .btn { padding: 15px 20px; font-size: 14.5px; }
  body.home-arena .case__client { font-size: clamp(1.32rem, 6.4vw, 1.8rem); }
  body.home-arena .case__meta { grid-template-columns: 1fr; gap: 7px; }
  body.home-arena .case__meta > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; }
  body.home-arena .case__meta dt { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  body.home-arena .tslots__row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  body.home-arena .tslot { font-size: 13.5px; }
}
@media (max-width: 360px) {
  body.home-arena { --work-slide: 92vw; }
  body.home-arena .hp6-name { font-size: clamp(2.35rem, 14.6vw, 3.4rem); }
  body.home-arena .hp6-name__line--two { padding-left: 16px; }
  body.home-arena .cap { padding: 20px 16px; }
  body.home-arena .mobile-menu__list li a { font-size: clamp(1.55rem, 8.4vw, 2.1rem); }
}

/* ==========================================================================
   SQUAT VIEWPORTS  — pinned reel yields to plain stacking when the
   viewport can't hold a frame (landscape phones).
   ========================================================================== */
@media (max-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  body.home-arena.hm-pin .work { height: auto; }
  body.home-arena.hm-pin .work-stage { position: static; height: auto; overflow: visible; padding: clamp(40px, 6vh, 64px) 0; }
  body.home-arena .work-film { display: grid; gap: 56px; }
  body.home-arena .case { flex: none; opacity: 1; transform: none; }
  body.home-arena .work-hud { display: none; }
}

/* ==========================================================================
   REDUCED MOTION  — the film becomes a sequence of stills; nothing is lost
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.home-arena .cap { transform: none; filter: none; }
  body.home-arena .case { opacity: 1; transform: none; transition: none; }
  body.home-arena .case__panel picture,
  body.home-arena .case__panel img { transform: none; transition: none; }
  body.home-arena .mobile-menu__list li a,
  body.home-arena .mobile-menu__actions { opacity: 1; transform: none; transition: none; }
  body.home-arena .journey__track::after { transform: scaleY(1); }
  body.home-arena .era::before { transition: none; }
  body.home-arena .footer--arena .footer__inner::before,
  body.home-arena .footer--arena .footer__brandtop { opacity: 1; transform: none; clip-path: none; transition: none; }
  body.home-arena .footer--arena .footer__inner::before::after { transform: scaleX(1); transition: none; }
}