/* ETC-ANIM-LAYER-START
   Isolated animation layer. Appended only — nothing above this point is edited.

   Rules honoured:
   - Animates opacity, transform and clip-path only.
   - Never touches width, height, padding, margin, gap, position, grid/flex,
     font-size, line-height or border.
   - Every animated element resolves to opacity:1 / transform:none /
     clip-path:none, i.e. exactly the original resting appearance.
   - All hiding is gated behind html[data-etc-anim], which only JS sets. With
     JavaScript off or broken, nothing is ever hidden.
   - Elements are tagged at runtime by the script; no markup was modified.
*/

/* ---------- gate: only active once the script has run ---------- */
html[data-etc-anim] [data-motion] {
  transition-property: opacity, transform, clip-path;
  transition-duration: 720ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* entrance start states */
html[data-etc-anim] [data-motion="rise"]   { opacity: 0; transform: translateY(34px); }
html[data-etc-anim] [data-motion="fade"]   { opacity: 0; }
html[data-etc-anim] [data-motion="scale"]  { opacity: 0; transform: scale(0.94); }
html[data-etc-anim] [data-motion="lift"]   { opacity: 0; transform: translateY(48px) scale(0.96); transition-duration: 820ms; }
html[data-etc-anim] [data-motion="slideL"] { opacity: 0; transform: translateX(-40px); }
html[data-etc-anim] [data-motion="slideR"] { opacity: 0; transform: translateX(40px); }
html[data-etc-anim] [data-motion="maskL"]  { clip-path: inset(0 100% 0 0); transition-duration: 840ms; }
html[data-etc-anim] [data-motion="maskR"]  { clip-path: inset(0 0 0 100%); transition-duration: 840ms; }
html[data-etc-anim] [data-motion="maskUp"] { clip-path: inset(100% 0 0 0); transition-duration: 900ms; }

/* resolved state — identical to the untouched design */
html[data-etc-anim] [data-motion][data-motion-in] {
  opacity: 1;
  transform: none;
  clip-path: none;
}

/* staggered children; per-child delay is set inline by the script */
html[data-etc-anim] [data-motion-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-etc-anim] [data-motion-stagger][data-motion-in] > * {
  opacity: 1;
  transform: none;
}


/* ---------- delays, expressed in CSS so no inline style is ever written ---------- */
html[data-etc-anim] [data-motion][data-motion-d="0"] { transition-delay: 0ms; }
html[data-etc-anim] [data-motion][data-motion-d="1"] { transition-delay: 80ms; }
html[data-etc-anim] [data-motion][data-motion-d="2"] { transition-delay: 160ms; }
html[data-etc-anim] [data-motion][data-motion-d="3"] { transition-delay: 240ms; }
html[data-etc-anim] [data-motion][data-motion-d="4"] { transition-delay: 320ms; }
html[data-etc-anim] [data-motion][data-motion-d="5"] { transition-delay: 400ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="0"] { animation-delay: 120ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="1"] { animation-delay: 250ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="2"] { animation-delay: 380ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="3"] { animation-delay: 510ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="4"] { animation-delay: 640ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="5"] { animation-delay: 770ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="6"] { animation-delay: 900ms; }
html[data-etc-anim] [data-motion-heroitem][data-motion-d="7"] { animation-delay: 1030ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(1) { transition-delay: 0ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(2) { transition-delay: 70ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(3) { transition-delay: 140ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(4) { transition-delay: 210ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(5) { transition-delay: 280ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(6) { transition-delay: 350ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(7) { transition-delay: 420ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(8) { transition-delay: 490ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(9) { transition-delay: 560ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(10) { transition-delay: 630ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(11) { transition-delay: 700ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="a"][data-motion-in] > *:nth-child(12) { transition-delay: 770ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(1) { transition-delay: 0ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(2) { transition-delay: 90ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(3) { transition-delay: 180ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(4) { transition-delay: 270ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(5) { transition-delay: 360ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(6) { transition-delay: 450ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(7) { transition-delay: 540ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(8) { transition-delay: 630ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(9) { transition-delay: 720ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(10) { transition-delay: 810ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(11) { transition-delay: 900ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="b"][data-motion-in] > *:nth-child(12) { transition-delay: 990ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(1) { transition-delay: 0ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(2) { transition-delay: 110ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(3) { transition-delay: 220ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(4) { transition-delay: 330ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(5) { transition-delay: 440ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(6) { transition-delay: 550ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(7) { transition-delay: 660ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(8) { transition-delay: 770ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(9) { transition-delay: 880ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(10) { transition-delay: 990ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(11) { transition-delay: 1100ms; }
html[data-etc-anim] [data-motion-stagger][data-motion-step="c"][data-motion-in] > *:nth-child(12) { transition-delay: 1210ms; }

/* ---------- hero ---------- */
html[data-etc-anim] [data-motion-hero] {
  animation: etcAnimHero 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes etcAnimHero { from { transform: scale(1.06); } to { transform: scale(1); } }

html[data-etc-anim] [data-motion-heroitem] {
  animation: etcAnimUp 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes etcAnimUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- one-shot transitions applied on change ---------- */
[data-motion-xfade] { animation: etcAnimXfade 560ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes etcAnimXfade { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }

[data-motion-qv] { animation: etcAnimQv 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes etcAnimQv { from { opacity: 0; transform: scale(0.965); } to { opacity: 1; transform: none; } }

[data-motion-qvcol="media"] { animation: etcAnimQvL 520ms 110ms cubic-bezier(0.22,1,0.36,1) both; }
[data-motion-qvcol="info"]  { animation: etcAnimQvR 520ms 180ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes etcAnimQvL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes etcAnimQvR { from { opacity: 0; transform: translateX(18px);  } to { opacity: 1; transform: none; } }

/* ---------- interaction ---------- */
[data-motion-card] { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-motion-shot] { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-motion-arrow] { display: inline-block; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (hover: hover) {
  [data-motion-card]:hover { transform: translateY(-6px); }
  [data-motion-card]:hover [data-motion-shot] { transform: scale(1.05); }
  a:hover  > [data-motion-arrow],
  button:hover > [data-motion-arrow] { transform: translateX(5px); }
}
[data-motion-card]:active { transform: translateY(-2px); }


/* ---------- route transition ---------- */
/* A short mask/fade on the page body between internal routes. Opacity and
   transform only; the resting state is untouched. */
/* v30: `backwards`, never `both`. A forwards fill keeps the animation
   permanently applying, and an element with an applying opacity/transform
   animation creates a stacking context — which trapped the quick-view
   overlay's z-index inside <main>, underneath the sticky header. */
[data-motion-route] { animation: etcAnimRoute 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
/* v30 ROOT CAUSE FIX. This animation previously animated `transform` on
   <main>. pulse() sets data-motion-route and never removes it, and
   animation-fill-mode:both makes the forwards fill permanent, so <main> kept
   `transform: matrix(1,0,0,1,0,0)` for the rest of the session. A transformed
   ancestor becomes the containing block for every position:fixed descendant,
   which is why the quick-view overlay stopped resolving against the viewport
   and the panel landed at a document-relative offset. Opacity only. */
@keyframes etcAnimRoute {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- quality controls: hover / focus emphasis ---------- */
/* Emphasis is expressed with opacity only, so no row moves or resizes. */
[data-qrow] { transition: opacity 220ms ease; }
[data-qgroup-dim] [data-qrow]:not([data-qrow-active]) { opacity: 0.42; }
[data-qrow]:focus-visible { outline: 2px solid #D08A2C; outline-offset: 2px; }

/* The linked mosaic tile lifts forward while its control is active. */
[data-qshot] { transition: opacity 300ms ease, transform 300ms cubic-bezier(0.22,1,0.36,1); }
[data-qshot-dim] { opacity: 0.35; }
[data-qshot-active] { opacity: 1; transform: scale(1.03); z-index: 1; }

/* ---------- chronology: entries activate as they are reached ---------- */
[data-chrono] { transition: opacity 320ms ease; }
html[data-etc-anim] [data-chrono]:not([data-chrono-on]) { opacity: 0.45; }
html[data-etc-anim] [data-chrono][data-chrono-on] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-motion-route] { animation: none !important; }
  [data-qrow], [data-qshot], [data-chrono] { transition: none !important; }
  html[data-etc-anim] [data-chrono]:not([data-chrono-on]) { opacity: 1 !important; }
  [data-qgroup-dim] [data-qrow]:not([data-qrow-active]) { opacity: 1 !important; }
  [data-qshot-dim] { opacity: 1 !important; }
  [data-qshot-active] { transform: none !important; }
}


/* ---------- leadership entrance ---------- */
/* Quote revealed through a text mask; label and experience line wipe in
   horizontally; name/role/biography stagger. Opacity, transform and
   clip-path only — resting layout is untouched. */
html[data-etc-anim] [data-lead-line] {
  display: inline-block;
  clip-path: inset(0 0 110% 0);
  transform: translateY(14px);
  transition: clip-path 900ms cubic-bezier(0.22,1,0.36,1),
              transform 900ms cubic-bezier(0.22,1,0.36,1);
}
html[data-etc-anim] [data-lead-quote][data-motion-in] [data-lead-line] {
  clip-path: inset(0 0 0 0);
  transform: none;
}

html[data-etc-anim] [data-lead-label],
html[data-etc-anim] [data-lead-exp] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 640ms cubic-bezier(0.22,1,0.36,1);
}
html[data-etc-anim] [data-lead-label][data-motion-in],
html[data-etc-anim] [data-lead-exp][data-motion-in] { clip-path: inset(0 0 0 0); }
html[data-etc-anim] [data-lead-exp] { transition-delay: 220ms; }

html[data-etc-anim] [data-lead-bio] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 660ms cubic-bezier(0.22,1,0.36,1),
              transform 660ms cubic-bezier(0.22,1,0.36,1);
}
html[data-etc-anim] [data-lead-bio][data-motion-in] > * { opacity: 1; transform: none; }
html[data-etc-anim] [data-lead-bio][data-motion-in] > *:nth-child(1) { transition-delay: 0ms; }
html[data-etc-anim] [data-lead-bio][data-motion-in] > *:nth-child(2) { transition-delay: 90ms; }
html[data-etc-anim] [data-lead-bio][data-motion-in] > *:nth-child(3) { transition-delay: 180ms; }
html[data-etc-anim] [data-lead-bio][data-motion-in] > *:nth-child(4) { transition-delay: 270ms; }
html[data-etc-anim] [data-lead-bio][data-motion-in] > *:nth-child(5) { transition-delay: 360ms; }

/* Background texture settles once; it never loops or floats. */
html[data-etc-anim] [data-lead-tex] {
  transform: scale(1.05);
  transition: transform 1400ms cubic-bezier(0.22,1,0.36,1);
}
html[data-etc-anim] [data-lead-tex][data-motion-in] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-etc-anim] [data-lead-line],
  html[data-etc-anim] [data-lead-label],
  html[data-etc-anim] [data-lead-exp],
  html[data-etc-anim] [data-lead-bio] > *,
  html[data-etc-anim] [data-lead-tex] {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
}

/* ---------- reduced motion: nothing animates, nothing is hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-etc-anim] [data-motion],
  html[data-etc-anim] [data-motion-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html[data-etc-anim] [data-motion-hero],
  html[data-etc-anim] [data-motion-heroitem],
  [data-motion-xfade], [data-motion-qv], [data-motion-qvcol] {
    animation: none !important;
  }
  [data-motion-card], [data-motion-shot], [data-motion-arrow] { transition: none !important; }
}
/* ETC-ANIM-LAYER-END */

/* ETC — nav & capability motion layer (v33).
   Appended. Never edits the source document.

   Every hidden or shifted start state is gated behind html[data-etc-nav],
   which only JavaScript sets. With JS disabled, or under reduced motion,
   none of these rules apply and the page renders exactly as it does today:
   all content visible, all navigation usable. */

/* ============================================================ 1. CAPABILITIES */

/* Sticky left column. Not motion — it stays on under reduced motion too. */
[data-cap-left] {
  position: sticky;
  top: calc(58px + 26px);          /* clears the compressed header */
  align-self: start;
}
[data-cap-list] { position: relative; }

/* Vertical progress line down the capability list. transform only. */
html[data-etc-nav] [data-cap-list]::before {
  content: '';
  position: absolute;              /* out of flow: never becomes a grid track */
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, #D08A2C 0%, #6E7A52 100%);
  transform: scaleY(var(--cap-p, 0));
  transform-origin: top center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.85;
  pointer-events: none;
}

html[data-etc-nav] [data-cap-row] {
  opacity: 0.42;
  transform: translateX(-6px);
  transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 460ms ease;
}
html[data-etc-nav] [data-cap-row][data-cap-seen] {
  opacity: 0.55;
  transform: none;
}
html[data-etc-nav] [data-cap-row][data-cap-active] {
  opacity: 1;
  transform: none;
  background-color: #12150F;
}

/* The row number and its rule take the existing accents. */
html[data-etc-nav] [data-cap-row] [data-cap-n] {
  color: #6E7A52;
  transition: color 420ms ease;
}
html[data-etc-nav] [data-cap-row][data-cap-active] [data-cap-n] { color: #D08A2C; }

html[data-etc-nav] [data-cap-row]::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: #D08A2C;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-etc-nav] [data-cap-row] { position: relative; }
html[data-etc-nav] [data-cap-row][data-cap-active]::after { transform: scaleY(1); }

/* The sticky headline drifts a few pixels with progress. Contained. */
html[data-etc-nav] [data-cap-head] {
  transform: translateY(calc(var(--cap-p, 0) * 10px));
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile: no sticky, no dimming — each row simply reveals and stays. */
@media (max-width: 900px) {
  [data-cap-left] { position: static; top: auto; }
  html[data-etc-nav] [data-cap-head] { transform: none; }
  html[data-etc-nav] [data-cap-row] { opacity: 0; transform: translateY(14px); }
  html[data-etc-nav] [data-cap-row][data-cap-seen],
  html[data-etc-nav] [data-cap-row][data-cap-active] {
    opacity: 1; transform: none; background-color: transparent;
  }
  html[data-etc-nav] [data-cap-row][data-cap-active]::after { transform: scaleY(0); }
  html[data-etc-nav] [data-cap-list]::before { display: none; }
}

/* ================================================================ 2. HEADER */

html[data-etc-nav][data-hdr-compact] [data-etc-header] {
  box-shadow: 0 1px 0 rgba(208, 138, 44, 0.22),
              0 12px 28px rgba(6, 7, 6, 0.44);
}
[data-etc-header] { will-change: auto; }

/* ========================================================== 3. NAV LINKS */

html[data-etc-nav] [data-nav-item] {
  position: relative;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              color 250ms ease;
}
html[data-etc-nav] [data-nav-item]:hover,
html[data-etc-nav] [data-nav-item]:focus-visible {
  transform: translateY(-2px);
}

/* Underline wipes in from the left. */
html[data-etc-nav] [data-nav-item]::after {
  content: '';
  position: absolute;
  left: 9px; right: 9px; bottom: 0;
  height: 1px;
  background: #D08A2C;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html[data-etc-nav] [data-nav-item]:hover::after,
html[data-etc-nav] [data-nav-item]:focus-visible::after { transform: scaleX(1); }

/* The active marker is one element that glides between items. The per-item
   border-bottom the document already draws is suppressed only while the
   glider is present, so the active route stays marked if JS fails. */
html[data-etc-nav] [data-etc-nav-list] { position: relative; }
html[data-etc-nav] [data-etc-nav-list] [data-nav-item][aria-current="page"] {
  border-bottom-color: transparent !important;
}
html[data-etc-nav] [data-nav-glider] {
  position: absolute;
  left: 0; bottom: 0;
  width: 100px; height: 1px;
  background: #D08A2C;
  transform-origin: left center;
  transform: translateX(var(--gx, 0px)) scaleX(var(--gs, 0));
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
  opacity: var(--go, 0);
  pointer-events: none;
}

/* ======================================================== 4. MEGA MENU */

html[data-etc-nav] [data-mega-panel] {
  animation: none !important;                 /* replaces the source's etcMega */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-etc-nav] [data-mega-panel][data-mega-in] { clip-path: inset(0 0 0 0); }

html[data-etc-nav] [data-mega-col] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-etc-nav] [data-mega-panel][data-mega-in] [data-mega-col] {
  opacity: 1; transform: none;
}
html[data-etc-nav] [data-mega-panel][data-mega-in] [data-mega-col]:nth-child(1) { transition-delay: 60ms; }
html[data-etc-nav] [data-mega-panel][data-mega-in] [data-mega-col]:nth-child(2) { transition-delay: 120ms; }
html[data-etc-nav] [data-mega-panel][data-mega-in] [data-mega-col]:nth-child(3) { transition-delay: 180ms; }

html[data-etc-nav] [data-mega-link] {
  position: relative;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}
html[data-etc-nav] [data-mega-link]:hover,
html[data-etc-nav] [data-mega-link]:focus-visible { transform: translateX(7px); }

/* Directional line beside the hovered / focused link. */
html[data-etc-nav] [data-mega-link]::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  width: 8px; height: 1px;
  background: #D08A2C;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-etc-nav] [data-mega-link]:hover::before,
html[data-etc-nav] [data-mega-link]:focus-visible::before {
  transform: translateY(-50%) scaleX(1);
}

/* ====================================================== 5. MOBILE PANEL */

/* Locking the background removes the scrollbar, which reflows the page and
   shifts the restored position. Reserving the same width as padding keeps the
   layout identical while the menu is open. */
html[data-nav-locked] { overflow: hidden; padding-right: var(--sbw, 0px); }

html[data-etc-nav] [data-mobile-link] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link] {
  opacity: 1; transform: none;
}
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(1) { transition-delay: 40ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(2) { transition-delay: 80ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(3) { transition-delay: 120ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(4) { transition-delay: 160ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(5) { transition-delay: 200ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(6) { transition-delay: 240ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(7) { transition-delay: 280ms; }
html[data-etc-nav] [data-mobile-panel][data-mobile-in] [data-mobile-link]:nth-child(n+8) { transition-delay: 320ms; }

/* ==================================================== REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html[data-etc-nav] [data-cap-row],
  html[data-etc-nav] [data-cap-head],
  html[data-etc-nav] [data-mega-col],
  html[data-etc-nav] [data-mobile-link],
  html[data-etc-nav] [data-nav-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html[data-etc-nav] [data-mega-panel] {
    clip-path: none !important;
    transition: none !important;
  }
  html[data-etc-nav] [data-cap-list]::before,
  html[data-etc-nav] [data-nav-glider] { transition: none !important; }
}