/* ==================== /epc/ ISLAND PASS — 20 August 2026 ================== *
 * Page-scoped stylesheet for the EPC guidance page. Loaded after dukes.css,
 * so equal-specificity declarations here win; it deliberately lives outside
 * dukes.css because other sessions own that file.
 *
 * This layer converts the page to the site's island grammar (floating
 * islands on the #d9e5e5 ground, warm-paper cycle plus one dark island) and
 * supersedes both earlier /epc/ blocks inside dukes.css (the 11 Aug obsidian
 * luxe pass and the 13 Aug dossier recolour). Class names are unchanged so
 * tests/epc-premium.spec.mjs keeps addressing the same structure.
 *
 * Colour jobs (Design Authority §3): moss = the dark anchor (hero, the
 * standard chapter, feature plates); oxblood = actions and kickers ONLY;
 * gold = identity accent on dark surfaces; cream = THE premium white, plates
 * only; the three chapter fields walk the certificate's own gradient from
 * green to warm (leaf -> stone -> blush) — the ladder is the page's colour
 * story. The A-G band hues appear only where the scale itself is drawn.
 *
 * UNTOUCHED: the shared shell (header, footer, reception, launcher), the
 * assistant, and every other route.
 * ========================================================================== */

.page--epc {
  /* ink */
  --epi-ink: #1d241f;
  --epi-ink-soft: #4c554e;
  /* emerald — the dark anchor. Hero, standard chapter, feature plates.
     20 Aug round 2: Aarav called the muted set dead, so the anchor reads
     green rather than near-black. */
  --epi-moss: #123f31;
  --epi-moss-soft: #1c5642;
  /* THE premium white — plates only */
  --epi-cream: #fbf8f2;
  /* warm paper — routes + sources islands */
  --epi-paper: #f2ede4;
  /* chapter fields: the ladder walk, green to warm — saturated a step */
  --epi-field-leaf: #d8e8d5;
  --epi-field-stone: #f2e3c8;
  --epi-field-blush: #f6dcd2;
  /* oxblood — actions, kickers. Nothing else. */
  --epi-oxblood: #7b2430;
  --epi-oxblood-dark: #5e1924;
  /* gold — identity accent on dark surfaces only */
  --epi-gold: #c5a66a;
  /* the A-G ladder speaks the certificate's own vivid hues, nowhere else.
     Labels are ink on the cream plate so the bars run full-strength; where
     a letter does sit on a band (the accordion badges), cream goes on
     A/B/F/G and ink on C/D/E — every pairing computed at 4.5:1 or better. */
  --epi-band-a: #007b3e;
  --epi-band-b: #1f7f33;
  --epi-band-c: #8cc23c;
  --epi-band-d: #f2c11e;
  --epi-band-e: #ef8a2c;
  --epi-band-f: #b8431f;
  --epi-band-g: #c02f1d;
  /* rules */
  --epi-rule: rgb(29 36 31 / 16%);
  --epi-rule-dark: rgb(251 248 242 / 20%);
  /* geometry */
  --epi-shell: min(94vw, 1640px);
  --epi-shell-hero: min(96vw, 1780px);
  --epi-radius-island: 30px;
  --epi-radius-plate: 22px;
  --epi-radius-small: 14px;
  --epi-tap: 48px;
  --epi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --epi-shadow-island: 0 30px 70px -50px rgb(13 29 49 / 40%);
  --epi-shadow-plate: 0 18px 44px rgb(15 35 58 / 7%);
  --epcx-seam-fallback: var(--head-h, 65px);
  /* dukes.css sizes the reception inner (and other lx shells) from this
     token; aligned with the island shell so the shared band runs as wide
     as every island */
  --lx-max: min(94vw, 1640px);
  /* the site island ground */
  background: linear-gradient(180deg, #dee9e7 0%, #d9e5e5 30%, #d9e5e5 100%);
  background-color: #d9e5e5;
  color: var(--epi-ink);
}

.page--epc ::selection { background: var(--epi-gold); color: var(--epi-moss); }
.page--epc :is(a, summary):focus-visible { outline: 3px solid #8a6a3c; outline-offset: 3px; }
.page--epc { scrollbar-color: var(--epi-moss) #d9e5e5; }

/* the hero is an island now, so the main needs breathing room again */
.page--epc .main {
  padding-top: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: clip;
}

/* ------------------------------------------------------------------ */
/* Shared devices: kicker, button, text link, lockups, frame, slots    */
/* ------------------------------------------------------------------ */

.page--epc .epi-kicker {
  margin: 0 0 0.65rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--epi-oxblood);
}

.page--epc .epi-kicker--dark { color: var(--epi-gold); }

.page--epc .epi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--epi-tap);
  padding: 0.85rem 1.7rem;
  border: 0;
  border-radius: 10px;
  background: var(--epi-oxblood);
  color: var(--epi-cream);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms var(--epi-ease), background-color 180ms var(--epi-ease);
}

.page--epc .epi-button:active { transform: translateY(1px); }

@media (hover: hover) {
  .page--epc .epi-button:hover {
    background: var(--epi-oxblood-dark);
    transform: translateY(-2px);
  }
}

.page--epc .epi-button--ghost {
  background: rgb(9 13 11 / 30%);
  border: 1.5px solid rgb(227 201 143 / 85%);
  color: var(--epi-cream);
}

@media (hover: hover) {
  .page--epc .epi-button--ghost:hover {
    background: #e3c98f;
    border-color: #e3c98f;
    color: #171a20;
    transform: translateY(-2px);
  }
}

.page--epc .epi-text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--epi-tap);
  font-weight: 700;
  color: var(--epi-ink);
  text-decoration: underline;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
}

.page--epc .epi-text-link--dark { color: var(--epi-cream); }

/* the container layer — Design Authority §4.2 three-layer nest:
   field -> frame -> plates */
.page--epc .epi-frame {
  padding: clamp(1.1rem, 2.2vw, 2rem);
  border-radius: var(--epi-radius-plate);
  background: rgb(251 248 242 / 55%);
  border: 1px solid rgb(251 248 242 / 85%);
  box-shadow: var(--epi-shadow-island);
}

.page--epc .lx-sec--standard .epi-frame {
  background: rgb(251 248 242 / 6%);
  border-color: rgb(251 248 242 / 14%);
}

/* Crown placeholder — Design Authority §4.1. The crown is the real brand
   mark, painted from the genuine asset. */
.page--epc .epi-slot {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: var(--slot-ar, 3 / 2);
  border-radius: var(--epi-radius-plate);
  background:
    linear-gradient(160deg, rgb(29 36 31 / 7%) 0%, rgb(29 36 31 / 15%) 100%),
    var(--epi-cream);
  border: 1px solid var(--epi-rule);
  overflow: hidden;
}

.page--epc .epi-slot__crown {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(90px, 32%, 168px);
  aspect-ratio: 252 / 182;
  background: url("/assets/brand/dukes-crown.png") center / contain no-repeat;
  opacity: 0.14;
}

.page--epc .epi-slot__chip {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  max-width: calc(100% - 5.4rem);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--epi-moss);
  color: var(--epi-cream);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.page--epc .epi-slot__ratio {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgb(29 36 31 / 8%);
  color: var(--epi-ink-soft);
  font-size: 0.875rem;
  font-weight: 800;
}

/* the dark chapter's slot owns its surface — trap §6.6 */
.page--epc .epi-slot--onDark {
  background:
    linear-gradient(160deg, rgb(251 248 242 / 5%) 0%, rgb(251 248 242 / 10%) 100%),
    var(--epi-moss-soft);
  border-color: rgb(251 248 242 / 22%);
}

.page--epc .epi-slot--onDark .epi-slot__crown { opacity: 0.22; }

.page--epc .epi-slot--onDark .epi-slot__chip {
  background: var(--epi-cream);
  color: var(--epi-moss);
}

.page--epc .epi-slot--onDark .epi-slot__ratio {
  background: rgb(251 248 242 / 14%);
  color: rgb(251 248 242 / 85%);
}

.page--epc .epi-slot--wide { margin-bottom: clamp(1.2rem, 2.2vw, 2rem); }

/* ------------------------------------------------------------------ */
/* Islands — every band floats on the ground                           */
/* ------------------------------------------------------------------ */

.page--epc .lx-sec,
.page--epc .lx-close,
.page--epc .lx-sources {
  width: var(--epi-shell);
  margin: clamp(1.4rem, 2.6vw, 2.4rem) auto 0;
  border-radius: var(--epi-radius-island);
  /* a hairline defines each island's edge on the pale ground; it reads as
     nothing on the dark islands */
  border: 1px solid rgb(29 36 31 / 7%);
  box-shadow: var(--epi-shadow-island);
  padding-block: 0;
}

.page--epc .lx-sec {
  padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(1.2rem, 3vw, 3rem);
}

.page--epc .lx-sec__inner,
.page--epc .lx-sources__inner {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  min-width: 0;
}

/* the ladder walk: paper, then leaf -> stone -> dark -> blush */
.page--epc .lx-sec--routes { background: var(--epi-paper); }
.page--epc .lx-sec--certificate { background: var(--epi-field-leaf); }
.page--epc .lx-sec--limits { background: var(--epi-field-stone); }
.page--epc .lx-sec--standard { background: var(--epi-moss); }
.page--epc .lx-sec--next { background: var(--epi-field-blush); }

/* ------------------------------------------------------------------ */
/* Heading lockups                                                     */
/* ------------------------------------------------------------------ */

.page--epc .lx-head {
  display: block;
  max-width: 62ch;
  margin: 0 auto clamp(1.4rem, 2.6vw, 2.4rem);
  text-align: center;
}

.page--epc .lx-head__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.9vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--epi-ink);
}

.page--epc .lx-head__summary {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--epi-ink-soft);
  line-height: 1.65;
  font-size: 1rem;
}

/* split lockups sit left, inside a chapter-head grid */
.page--epc .lx-head--split {
  margin: 0;
  max-width: none;
  text-align: left;
}

.page--epc .lx-head--split .lx-head__summary { margin: 0; max-width: 46ch; }

/* the dark chapter's lockup owns its ink — trap §6.6 */
.page--epc .lx-head--dark .lx-head__title { color: var(--epi-cream); }
.page--epc .lx-head--dark .lx-head__summary { color: rgb(251 248 242 / 80%); }

/* the certificate chapter is a LIGHT leaf field now; the dossier layer in
   dukes.css still paints its lockup cream via a three-class selector, so
   these carry the same weight to take it back */
.page--epc .lx-sec--certificate .lx-head__title { color: var(--epi-ink); }
.page--epc .lx-sec--certificate .lx-head__summary { color: var(--epi-ink-soft); }
.page--epc .lx-sec--standard .lx-head__title { color: var(--epi-cream); }
.page--epc .lx-sec--standard .lx-head__summary { color: rgb(251 248 242 / 80%); }

/* chapter heads: copy against media, flipping on alternate chapters */
.page--epc .epi-chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.4rem);
}

.page--epc .epi-chapter-head--flip > .lx-head--split { order: 2; }

/* ------------------------------------------------------------------ */
/* Hero — moss island, copy beside a framed film window                */
/* ------------------------------------------------------------------ */

.page--epc .lx-hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  overflow: hidden;
  width: var(--epi-shell-hero);
  margin: clamp(0.9rem, 1.8vw, 1.5rem) auto 0;
  padding: clamp(2rem, 4vw, 3.6rem) clamp(1.4rem, 3.6vw, 3.6rem);
  border-radius: 30px 30px 84px 30px;
  background: #101613;
  color: var(--epi-cream);
  box-shadow: var(--epi-shadow-island);
}

.page--epc .lx-hero__inner,
.page--epc .lx-hero__inner:is(*) {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-areas: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: clamp(26rem, 40vw, 36rem);
  justify-items: center;
}

/* 20 Aug round 5 (Aarav): the lockup sits centred over the film, matching
   the site's centred heading grammar */
.page--epc .lx-hero__copy {
  max-width: 52rem;
  text-align: center;
}

.page--epc .lx-hero .crumbs__list { justify-content: center; }

.page--epc .lx-hero__copy { min-width: 0; }

.page--epc .lx-hero .crumbs { max-width: none; margin: 0 0 1.1rem; padding: 0; background: transparent; border: 0; }
.page--epc .lx-hero .crumbs__list { width: auto; margin: 0; }
.page--epc .lx-hero .crumbs__link { color: rgb(251 248 242 / 72%); border-bottom-color: rgb(251 248 242 / 30%); }
.page--epc .lx-hero .crumbs__current { color: var(--epi-cream); }
.page--epc .lx-hero .crumbs__item + .crumbs__item::before { color: rgb(251 248 242 / 50%); }
.page--epc .lx-hero .crumbs__link:focus-visible { outline: 3px solid var(--epi-gold); outline-offset: 3px; }

.page--epc .lx-hero__title {
  margin: 0 auto 1rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--epi-cream);
}

/* round 7 (Aarav, "too simple and white"): a brass rule seats the heading,
   and the second line pours in champagne — display type, so the gradient's
   darkest stop is computed against the 3:1 large-text floor over the
   scrim's worst case */
.page--epc .lx-hero__title::before {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 0 auto 1.1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #cfa968, #ecd9ac, #cfa968);
}

.page--epc .lx-hero__title span {
  display: block;
  color: #ddbf85;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .page--epc .lx-hero__title span {
    background: linear-gradient(115deg, #ecd9ac 12%, #cfa968 55%, #e6cf9d 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.page--epc .lx-hero__lede {
  margin: 0 auto 0.6rem;
  color: rgb(251 248 242 / 92%);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  max-width: 46ch;
}

.page--epc .lx-hero__detail {
  margin: 0 auto;
  color: rgb(251 248 242 / 82%);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 48ch;
}

.page--epc .epi-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.6rem;
}

/* 20 Aug round 3 (Aarav): the film carries the hero. The media is the
   island's backdrop, edge to edge; the copy reads over a measured emerald
   veil on the left. */
.page--epc .lx-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
}

.page--epc .lx-hero__media::before { content: none; }

.page--epc .lx-hero__poster { position: absolute; inset: 0; display: block; }

.page--epc .lx-hero__film,
.page--epc .lx-hero__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--epc .lx-hero__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 360ms ease;
}

.page--epc .lx-hero__film.is-playing { opacity: 1; }
html:not([data-enhanced]) .page--epc .lx-hero__film { opacity: 1; }

.page--epc .lx-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* round 6 (Aarav): the green wash retired. A neutral ink scrim, much
     lighter and centre-weighted, keeps the copy at 4.5:1 while the film
     reads in its own colour */
  background: radial-gradient(105% 90% at 50% 50%, rgba(16, 13, 8, 0.74) 0%, rgba(15, 12, 8, 0.64) 55%, rgba(14, 11, 8, 0.18) 100%);
}



/* ------------------------------------------------------------------ */
/* 01 — Routes: three cream plates on warm paper                       */
/* ------------------------------------------------------------------ */

.page--epc .lx-beams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.page--epc .lx-beam {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: 0;
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
}

/* 20 Aug round 3 ("too much white"): each route card takes a field tinted
   from its own band colour, so the trio reads as three chapters of the
   scale rather than three identical white boxes */
.page--epc .lx-beam:has(.lx-beam__mark--sell) {
  background: #dfeadb;
  border-color: rgb(0 123 62 / 30%);
}

.page--epc .lx-beam:has(.lx-beam__mark--buy) {
  background: #f9e9cd;
  border-color: rgb(239 138 44 / 42%);
}

.page--epc .lx-beam:has(.lx-beam__mark--let) {
  background: #f7dcd3;
  border-color: rgb(192 47 29 / 32%);
}

/* the remainder of the card recipe, shared by all three tints */
.page--epc .lx-beam {
  box-shadow: var(--epi-shadow-plate);
  color: var(--epi-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 180ms var(--epi-ease), box-shadow 180ms var(--epi-ease);
}

.page--epc .lx-beam::before,
.page--epc .lx-beam::after { content: none; }

.page--epc .lx-beam:last-of-type { border-radius: 22px 22px 64px 22px; }

@media (hover: hover) {
  .page--epc .lx-beam:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgb(15 35 58 / 13%);
  }
}

.page--epc .lx-beam:focus-visible { outline: 3px solid #8a6a3c; outline-offset: 3px; }

/* 20 Aug round 2: the borrowed About photographs are gone (Aarav). Each
   route opens on a ladder mark instead — an arrow bar in the band colour
   the route is really about, its length echoing where that band sits on
   the scale. The ladder stays the page's only colour language. */
.page--epc .lx-beam__mark {
  display: block;
  height: 0.7rem;
  margin: clamp(1.3rem, 2.2vw, 1.7rem) clamp(1.1rem, 1.8vw, 1.5rem) 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  transition: width 300ms var(--epi-ease);
}

.page--epc .lx-beam__mark--sell { width: 34%; background: var(--epi-band-a); }
.page--epc .lx-beam__mark--buy { width: 52%; background: var(--epi-band-e); }
.page--epc .lx-beam__mark--let { width: 70%; background: var(--epi-band-g); }

@media (hover: hover) {
  .page--epc .lx-beam:hover .lx-beam__mark--sell { width: 44%; }
  .page--epc .lx-beam:hover .lx-beam__mark--buy { width: 62%; }
  .page--epc .lx-beam:hover .lx-beam__mark--let { width: 80%; }
}

.page--epc .lx-beam__body {
  display: grid;
  gap: 0.5rem;
  padding: 1rem clamp(1.1rem, 1.8vw, 1.5rem) 0.9rem;
}

.page--epc .lx-beam__who {
  margin: 0;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--epi-ink);
}

.page--epc .lx-beam__lead {
  margin: 0;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--epi-ink);
}

.page--epc .lx-beam__detail {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .lx-beam__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: var(--epi-tap);
  margin: 0.9rem clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.5rem);
  padding: 0.6rem 1rem;
  border-radius: var(--epi-radius-small);
  background: var(--epi-oxblood);
  color: var(--epi-cream);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.35;
  transition: background-color 180ms var(--epi-ease);
}

@media (hover: hover) {
  .page--epc .lx-beam:hover .lx-beam__action { background: var(--epi-oxblood-dark); }
}

.page--epc .lx-beam__arrow {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 180ms var(--epi-ease);
}

@media (hover: hover) {
  .page--epc .lx-beam:hover .lx-beam__arrow { transform: translateX(4px); }
}

/* ------------------------------------------------------------------ */
/* 02 — Certificate: accordion ledger + six-check stepper              */
/* ------------------------------------------------------------------ */

/* stretch, not start: the two plates share both edges (one composed pair) */
.page--epc .lx-cert {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.1rem, 2.2vw, 2rem);
  align-items: stretch;
}

.page--epc .lx-scale,
.page--epc .lx-steps {
  padding: clamp(1.2rem, 2.2vw, 2rem);
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
  box-shadow: var(--epi-shadow-plate);
  min-width: 0;
}

/* round 3: the checker holds the pair's depth moment — deep emerald, so the
   chapter is not two more white boxes side by side */
.page--epc .lx-steps {
  background: var(--epi-moss);
  border-color: rgb(251 248 242 / 16%);
}

.page--epc .lx-steps .lx-steps__title { color: var(--epi-cream); }

.page--epc .lx-scale__title,
.page--epc .lx-steps__title {
  margin: 0 0 1rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--epi-ink);
}

.page--epc .lx-acc { display: grid; gap: 0.45rem; }

.page--epc .lx-acc__item {
  border: 1px solid var(--epi-rule);
  border-radius: var(--epi-radius-small);
  background: #fffdf8;
  overflow: hidden;
}

.page--epc .lx-acc__item--min { border-color: rgb(239 138 44 / 60%); }

.page--epc .lx-acc__summary {
  display: grid;
  grid-template-columns: 2.6rem 4.6rem 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--epi-tap);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  list-style: none;
}

.page--epc .lx-acc__summary::-webkit-details-marker { display: none; }

.page--epc .lx-acc__badge {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.05rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-size: 1.05rem;
  color: var(--epi-cream);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  padding-right: 5px;
}

.page--epc .lx-acc__badge--a { background: var(--epi-band-a); }
.page--epc .lx-acc__badge--b { background: var(--epi-band-b); }
.page--epc .lx-acc__badge--c { background: var(--epi-band-c); color: var(--epi-ink); }
.page--epc .lx-acc__badge--d { background: var(--epi-band-d); color: var(--epi-ink); }
.page--epc .lx-acc__badge--e { background: var(--epi-band-e); color: var(--epi-ink); }
.page--epc .lx-acc__badge--f { background: var(--epi-band-f); }
.page--epc .lx-acc__badge--g { background: var(--epi-band-g); }

.page--epc .lx-acc__range {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--epi-ink);
  white-space: nowrap;
}

.page--epc .lx-acc__meaning {
  font-size: 0.92rem;
  color: var(--epi-ink-soft);
  min-width: 0;
}

.page--epc .lx-acc__summary .lx-tag {
  border: 0;
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.page--epc .lx-acc__summary .lx-tag--gold {
  background: var(--epi-moss);
  color: var(--epi-cream);
}

.page--epc .lx-acc__chev {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--epi-ink-soft);
  transition: transform 200ms var(--epi-ease);
}

.page--epc .lx-acc__item[open] .lx-acc__chev { transform: rotate(180deg); }

@media (hover: hover) {
  .page--epc .lx-acc__summary:hover { background: rgb(29 36 31 / 4%); }
}

.page--epc .lx-acc__panel { padding: 0 0.85rem; }

.page--epc .lx-acc__panel-in { padding: 0 0 0.85rem 3.3rem; }

.page--epc .lx-acc__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .lx-scale__note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .lx-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page--epc .lx-step {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgb(251 248 242 / 16%);
  border-radius: var(--epi-radius-small);
  background: rgb(251 248 242 / 7%);
}

.page--epc .lx-step__badge {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--epi-gold);
}

.page--epc .lx-step__body { display: grid; gap: 0.2rem; min-width: 0; }

.page--epc .lx-step__term {
  margin: 0;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--epi-cream);
}

.page--epc .lx-step__detail {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgb(251 248 242 / 80%);
}

/* ------------------------------------------------------------------ */
/* 03 — Limits: kept photograph in the head, four plates in the frame  */
/* ------------------------------------------------------------------ */

.page--epc .epcx-limits__scene { min-width: 0; }

.page--epc .epcx-mount {
  margin: 0;
  border-radius: var(--epi-radius-plate);
  overflow: hidden;
  border: 1px solid var(--epi-rule);
  box-shadow: var(--epi-shadow-plate);
}

.page--epc .epcx-mount .mount__scene { aspect-ratio: var(--mount-ar, 1.5); }

.page--epc .epcx-mount .mount__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mount-position, 50% 50%);
  display: block;
}

.page--epc .epcx-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.page--epc .epcx-limit {
  margin: 0;
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
  box-shadow: var(--epi-shadow-plate);
}

/* round 3: the misread limit leads in oxblood — the page's red moment */
.page--epc .epcx-limit--feature {
  background: var(--epi-oxblood);
  border-color: rgb(251 248 242 / 16%);
  color: var(--epi-cream);
}

.page--epc .epcx-limit__index {
  margin: 0 0 0.5rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--epi-oxblood);
}

.page--epc .epcx-limit--feature .epcx-limit__index { color: var(--epi-gold); }

.page--epc .epcx-limit__term {
  margin: 0.55rem 0 0.35rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  color: inherit;
}

.page--epc .epcx-limit__detail {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--epi-ink-soft);
}

.page--epc .epcx-limit--feature .epcx-limit__detail { color: rgb(251 248 242 / 88%); }

.page--epc .epcx-chip {
  display: inline-flex;
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgb(29 36 31 / 8%);
  color: var(--epi-ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page--epc .epcx-chip--onDark {
  background: rgb(251 248 242 / 14%);
  color: var(--epi-cream);
}

/* ------------------------------------------------------------------ */
/* 04 — Standard: the one dark island                                  */
/* ------------------------------------------------------------------ */

.page--epc .epcx-standard {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.1rem, 2.2vw, 2rem);
  align-items: stretch;
}

/* the anchor column fills the band: the works slot takes the leftover
   height, so the column's foot lands on the ledger's foot with no hole */
.page--epc .epcx-anchor {
  display: grid;
  grid-template-rows: auto minmax(16rem, 1fr) auto;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  min-width: 0;
  height: 100%;
}

.page--epc .epcx-anchor .epi-slot--onDark {
  aspect-ratio: auto;
  height: 100%;
  min-height: 16rem;
}

.page--epc .epcx-monument {
  padding: clamp(1.3rem, 2.2vw, 2rem);
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
  box-shadow: 0 34px 80px -46px rgb(5 12 8 / 80%);
  color: var(--epi-ink);
}

.page--epc .epcx-monument__kicker {
  margin: 0 0 0.9rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--epi-oxblood);
}

.page--epc .epcx-monument__band {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.9rem;
}

.page--epc .epcx-monument__letter {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 3.6rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-size: 2.3rem;
  color: var(--epi-ink);
  background-color: var(--epi-band-e); /* the ladder's own band-E amber, nothing else */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  padding-right: 8px;
}

.page--epc .epcx-monument__scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  flex: 1;
}

.page--epc .epcx-monument__notch {
  height: 8px;
  border-radius: 4px;
  background: rgb(29 36 31 / 14%);
}

.page--epc .epcx-monument__notch--min { background: var(--epi-band-e); }

.page--epc .epcx-monument__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
}

.page--epc .epcx-monument__copy {
  margin: 0 0 0.9rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .epcx-monument__facts { margin: 0; }

.page--epc .epcx-monument__fact {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.42fr) 1fr;
  gap: 0.5rem 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--epi-rule);
}

.page--epc .epcx-monument__fact:last-of-type { border-bottom: 0; padding-bottom: 0; }

.page--epc .epcx-monument__fact dt {
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-size: 0.98rem;
  color: var(--epi-ink);
}

.page--epc .epcx-monument__fact dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--epi-ink-soft);
}

/* the footnote holds the band's ONE plate value, same as monument and rules */
.page--epc .epcx-footnote {
  display: block;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--epi-radius-small);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
}

.page--epc .epcx-footnote__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .epcx-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.7rem, 1.2vw, 1rem);
}

.page--epc .epcx-rule {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
  box-shadow: 0 24px 60px -44px rgb(5 12 8 / 80%);
}

.page--epc .epcx-rule__index {
  margin: 0;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--epi-oxblood);
}

.page--epc .epcx-rule__body { display: grid; gap: 0.35rem; min-width: 0; justify-items: start; }

.page--epc .epcx-rule__term {
  margin: 0;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--epi-ink);
}

.page--epc .epcx-rule__detail {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--epi-ink-soft);
}

/* round 3: the five status chips speak in colour — required/enforced in the
   page's reds, scope in emerald, conditional in band amber */
.page--epc .epcx-rule:nth-child(1) .epcx-chip--rule { background: var(--epi-oxblood); color: var(--epi-cream); }
.page--epc .epcx-rule:nth-child(2) .epcx-chip--rule { background: var(--epi-moss); color: var(--epi-cream); }
.page--epc .epcx-rule:nth-child(3) .epcx-chip--rule { background: var(--epi-band-e); color: var(--epi-ink); }
.page--epc .epcx-rule:nth-child(4) .epcx-chip--rule { background: var(--epi-band-g); color: var(--epi-cream); }

/* ------------------------------------------------------------------ */
/* 05 — Where next: blush island, three tool cards                     */
/* ------------------------------------------------------------------ */

.page--epc .epcx-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.page--epc .epcx-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.5rem;
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
  box-shadow: var(--epi-shadow-plate);
  color: var(--epi-ink);
  text-decoration: none;
  transition: transform 180ms var(--epi-ease), box-shadow 180ms var(--epi-ease);
}

@media (hover: hover) {
  .page--epc .epcx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgb(15 35 58 / 13%);
  }
}

.page--epc .epcx-card:focus-visible { outline: 3px solid #8a6a3c; outline-offset: 3px; }

.page--epc .epcx-card--feature {
  background: var(--epi-moss);
  border-color: rgb(251 248 242 / 14%);
  color: var(--epi-cream);
  border-radius: 22px 22px 64px 22px;
}

/* round 3: the trio runs cream / emerald / oxblood — no repeated white */
.page--epc .epcx-next .epcx-card:last-child {
  background: var(--epi-oxblood);
  border-color: rgb(251 248 242 / 16%);
  color: var(--epi-cream);
}

.page--epc .epcx-next .epcx-card:last-child .epcx-card__kicker { color: #e3c98f; }
.page--epc .epcx-next .epcx-card:last-child .epcx-card__line { color: rgb(251 248 242 / 86%); }
.page--epc .epcx-next .epcx-card:last-child .epcx-card__action { color: #e3c98f; }

.page--epc .epcx-card__kicker {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--epi-oxblood);
}

.page--epc .epcx-card--feature .epcx-card__kicker { color: var(--epi-gold); }

.page--epc .epcx-card__title {
  margin: 0;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  color: inherit;
}

.page--epc .epcx-card__line {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .epcx-card--feature .epcx-card__line { color: rgb(251 248 242 / 82%); }

.page--epc .epcx-card__action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--epi-tap);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--epi-oxblood);
}

.page--epc .epcx-card--feature .epcx-card__action { color: var(--epi-gold); }

.page--epc .epcx-card__arrow {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 180ms var(--epi-ease);
}

@media (hover: hover) {
  .page--epc .epcx-card:hover .epcx-card__arrow { transform: translateX(4px); }
}

/* ------------------------------------------------------------------ */
/* Closing — the kept red-brick photograph carries the island          */
/* ------------------------------------------------------------------ */

.page--epc .lx-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--epi-moss);
}

.page--epc .lx-close__media { position: absolute; inset: 0; z-index: 0; }

.page--epc .lx-close__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--epc .lx-close__veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(18, 63, 49, 0.5) 0%, rgba(18, 63, 49, 0.14) 55%, rgba(18, 63, 49, 0) 100%);
}

.page--epc .lx-close__inner {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(2.2rem, 4.5vw, 4rem) clamp(1.2rem, 3vw, 3rem);
  display: flex;
  justify-content: flex-start;
}

.page--epc .epcx-close-panel {
  max-width: 34rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border-radius: var(--epi-radius-plate);
  background: var(--epi-cream);
  box-shadow: 0 34px 80px -46px rgb(5 12 8 / 80%);
}

.page--epc .lx-close__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.15;
  color: var(--epi-ink);
}

.page--epc .lx-close__lede {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--epi-ink-soft);
}

.page--epc .lx-close__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.page--epc .lx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--epi-tap);
  padding: 0.85rem 1.6rem;
  border-radius: 10px;
  background: var(--epi-oxblood);
  color: var(--epi-cream);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border: 0;
  transition: transform 180ms var(--epi-ease), background-color 180ms var(--epi-ease);
}

@media (hover: hover) {
  .page--epc .lx-cta:hover {
    background: var(--epi-oxblood-dark);
    transform: translateY(-2px);
  }
}

.page--epc .lx-cta__ext { width: 1.05rem; height: 1.05rem; }

/* ------------------------------------------------------------------ */
/* Official guidance — warm paper island, stamp + 2x2 source register  */
/* ------------------------------------------------------------------ */

.page--epc .lx-sources {
  background: var(--epi-paper);
  padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(1.2rem, 3vw, 3rem);
}

/* the dossier layer set a two-column inner (title rail left, rows right);
   the island runs a centred lockup over a full-width register instead */
.page--epc .lx-sources__inner {
  display: block;
  grid-template-columns: none;
}

.page--epc .lx-sources__intro {
  display: grid;
  gap: 0.9rem;
  max-width: 62ch;
  margin: 0 auto clamp(1.4rem, 2.4vw, 2rem);
  text-align: center;
  justify-items: center;
}

.page--epc .lx-sources__title {
  margin: 0;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  letter-spacing: normal;
  text-transform: none;
  color: var(--epi-ink);
}

.page--epc .epcx-stamp {
  display: block;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--epi-radius-small);
  background: rgb(29 36 31 / 6%);
  border: 1px solid var(--epi-rule);
}

.page--epc .lx-sources__reviewed {
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.6;
  text-align: center;
  color: var(--epi-ink-soft);
}

.page--epc .epcx-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.2vw, 1rem);
}

.page--epc .epcx-source { min-width: 0; }

.page--epc .epcx-source__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--epi-tap);
  height: 100%;
  padding: 1rem 1.1rem;
  border-radius: var(--epi-radius-small);
  background: var(--epi-cream);
  border: 1px solid var(--epi-rule);
  box-shadow: var(--epi-shadow-plate);
  color: var(--epi-ink);
  text-decoration: none;
  transition: transform 160ms var(--epi-ease), box-shadow 160ms var(--epi-ease);
}

@media (hover: hover) {
  .page--epc .epcx-source__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 54px rgb(15 35 58 / 13%);
  }
}

.page--epc .epcx-source__badge {
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: var(--epi-moss);
  color: var(--epi-cream);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.page--epc .epcx-source__label {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
  min-width: 0;
}

.page--epc .epcx-source__ext {
  width: 1rem;
  height: 1rem;
  color: var(--epi-oxblood);
}

/* ------------------------------------------------------------------ */
/* Anchors clear the sticky pill                                       */
/* ------------------------------------------------------------------ */

.page--epc [data-epc-section],
.page--epc #epc-check { scroll-margin-top: calc(var(--head-h, 65px) + 74px); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 68.75em) {
  .page--epc .lx-beams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--epc .epcx-next { grid-template-columns: minmax(0, 1fr); }
  .page--epc .epcx-card--feature { border-radius: var(--epi-radius-plate); }
}

@media (max-width: 61.99em) {
  .page--epc .lx-hero__inner,
  .page--epc .lx-hero__inner:is(*) { grid-template-columns: minmax(0, 1fr); }

  .page--epc .lx-hero { border-radius: 26px 26px 64px 26px; }

  .page--epc .epi-chapter-head { grid-template-columns: minmax(0, 1fr); }
  .page--epc .epi-chapter-head--flip > .lx-head--split { order: 0; }

  .page--epc .lx-cert { grid-template-columns: minmax(0, 1fr); }
  .page--epc .lx-beams { grid-template-columns: minmax(0, 1fr); }
  .page--epc .lx-beam:last-of-type { border-radius: var(--epi-radius-plate); }

  .page--epc .epcx-standard { grid-template-columns: minmax(0, 1fr); }
  .page--epc .epcx-limits { grid-template-columns: minmax(0, 1fr); }
  .page--epc .epcx-sources { grid-template-columns: minmax(0, 1fr); }

  .page--epc .epi-slot--wide { --slot-ar: 16 / 9; }
}

@media (max-width: 47.99em) {
  .page--epc .lx-sec,
  .page--epc .lx-sources {
    width: min(96vw, 1640px);
    padding-left: clamp(1rem, 4vw, 1.4rem);
    padding-right: clamp(1rem, 4vw, 1.4rem);
  }

  .page--epc .lx-hero {
    width: min(96vw, 1780px);
    padding-left: clamp(1rem, 4vw, 1.4rem);
    padding-right: clamp(1rem, 4vw, 1.4rem);
  }

  .page--epc .lx-hero__veil {
    background: linear-gradient(180deg, rgba(16, 13, 8, 0.7) 0%, rgba(15, 12, 8, 0.64) 62%, rgba(14, 11, 8, 0.26) 100%);
  }


  .page--epc .lx-acc__summary { grid-template-columns: 2.6rem 1fr auto; grid-auto-rows: auto; }
  .page--epc .lx-acc__range { grid-column: 2; }
  .page--epc .lx-acc__meaning { grid-column: 2; grid-row: 2; }
  .page--epc .lx-acc__summary .lx-tag { grid-column: 3; grid-row: 2; justify-self: end; }
  .page--epc .lx-acc__panel-in { padding-left: 0.2rem; }

  .page--epc .epi-slot__chip { max-width: calc(100% - 1.8rem); }
  .page--epc .epi-slot__ratio { display: none; }

  .page--epc .lx-close__inner { padding: clamp(1.4rem, 5vw, 2.2rem) clamp(1rem, 4vw, 1.4rem); }
  .page--epc .epcx-close-panel { max-width: none; width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Motion discipline                                                   */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .page--epc .epi-button,
  .page--epc .lx-beam,
  .page--epc .lx-beam__mark,
  .page--epc .lx-beam__arrow,
  .page--epc .epcx-card,
  .page--epc .epcx-card__arrow,
  .page--epc .epcx-source__link,
  .page--epc .lx-cta,
  .page--epc .lx-acc__chev {
    transition: none;
  }

  .page--epc .lx-beam:hover,
  .page--epc .epcx-card:hover,
  .page--epc .epcx-source__link:hover,
  .page--epc .epi-button:hover,
  .page--epc .lx-cta:hover { transform: none; }

  .page--epc .lx-beam:hover .lx-beam__mark--sell,
  .page--epc .lx-beam:hover .lx-beam__mark--buy,
  .page--epc .lx-beam:hover .lx-beam__mark--let { width: revert-layer; transition: none; }
}


/* ------------- Shared-instance hardening, this page only ------------------ *
 * A frozen preview pane can freeze the header dropdown mid-fade, which reads
 * as a translucent panel with the hero bleeding through. On this page the
 * panel arrives opaque with no fade; the shared shell keeps its animation
 * everywhere else. */
.page--epc .site-head .navdrop {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  background-color: #e8decc;
}

@media (max-width: 61.99em) {
  .page--epc .reception__inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "routes"
      "contact" !important;
  }
}

@media (max-width: 47.99em) {
  .page--epc .epcx-monument__letter { width: 4rem; height: 3.4rem; font-size: 2.2rem; }
  .page--epc .epcx-rule { grid-template-columns: 1fr; gap: 0.5rem; }
  .page--epc .epcx-rule__index { display: none; }
  .page--epc .epcx-source__link { min-height: 4.25rem; }
}

/* ------------------------- Print ------------------------------------------ */

@media print {
  .page--epc .epcx-limits__scene { display: none !important; }
  .page--epc .lx-hero,
  .page--epc .lx-sec--standard,
  .page--epc .epcx-limit--feature,
  .page--epc .epcx-card--feature {
    background: none !important;
    color: #000 !important;
  }
  .page--epc .epcx-limit,
  .page--epc .epcx-rule,
  .page--epc .epcx-monument,
  .page--epc .epcx-card { box-shadow: none !important; }
}

/* ---------------- EPC-LIMITS-SCENE-50: supplied-asset state ---------------- *
 * The mount renders the photograph bare: no placeholder chrome, no ghost
 * crown, the image filling its frame. */
.page--epc .epcx-mount.mount--asset {
  grid-template-rows: minmax(0, 1fr);
  background: var(--epi-cream);
}
.page--epc .epcx-mount.mount--asset .mount__scene {
  min-height: 0;
  background: none;
  background-color: transparent;
}
.page--epc .epcx-mount.mount--asset .mount__scene::after {
  content: none;
  background: none;
}
.page--epc .epcx-mount.mount--asset .mount__scene > .mount__image { display: block; }


/* ------------- Dukes Assistant: the homepage One Deck, this page's colour -- *
 * 20 Aug round 3 (Aarav): the band runs the homepage assistant component —
 * intro card + five route cards, native exclusive accordion, the same
 * rd-body-in open animation and chevron turn — on a deep-emerald ground
 * instead of the homepage sage. Cream cards, emerald ink, gold numerals,
 * oxblood primary actions. */

/* Round 8 (Aarav): copy the homepage assistant exactly — warm-paper band,
   sand cards, forest ink, pill CTAs with the channel wipe, label-only
   contact tiles. Values read live off / on 20 Aug. */
.page--epc .reception {
  background: #f2ede1;
  border-top: 1px solid rgba(28, 33, 31, 0.14);
  border-bottom: 1px solid rgba(28, 33, 31, 0.14);
}

.page--epc .reception__inner {
  max-width: var(--lx-max);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "intro routes"
    "contact contact";
  column-gap: 24px;
  row-gap: 24px;
  align-items: stretch;
}

.page--epc .reception__intro { grid-area: intro; max-width: none; margin: 0; }
.page--epc .reception__inner > .reception__routes:not(.reception__routes--safe) { grid-area: routes; margin: 0; }
.page--epc .reception__inner > .reception__routes--safe { grid-area: contact; margin: 0; max-width: none; }

/* the shared card recipe: the homepage's sand family */
.page--epc .rd-intro,
.page--epc .rd-route__disclosure {
  background: #f1e7d3;
  border: 1px solid rgba(23, 72, 60, 0.16);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15, 48, 40, 0.05), 0 14px 34px rgba(15, 48, 40, 0.08);
}

.page--epc .rd-route__disclosure { border-color: rgba(23, 26, 32, 0.1); transition: background-color 220ms ease, border-color 220ms ease; }

.page--epc .rd-route__disclosure[open] {
  background: #f6efe0;
  border-color: rgba(23, 26, 32, 0.16);
  box-shadow: 0 18px 44px rgba(15, 48, 40, 0.1);
}

/* the intro card */
.page--epc .rd-intro {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
}

.page--epc .rd-intro__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #17483c;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--epc .rd-intro__rule { display: inline-block; width: 20px; height: 2px; background: var(--epi-gold); flex: 0 0 auto; }

.page--epc .rd-intro .h-section {
  margin: 0.7rem 0 0;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #17483c;
  text-align: left;
  max-width: none;
}

.page--epc .rd-intro__lede {
  margin: 1rem 0 0;
  max-width: 40ch;
  color: rgba(15, 48, 40, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}

.page--epc .rd-intro .epi-slot { margin: 1.5rem 0 0; }

.page--epc .rd-intro__ledger {
  margin: 1.5rem 0 0;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(23, 72, 60, 0.12);
}

.page--epc .rd-intro__ledger > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(23, 72, 60, 0.1);
}

.page--epc .rd-intro__ledger > div:last-child { border-bottom: 0; }
.page--epc .rd-intro__ledger dt { margin: 0; color: #17483c; font-size: 0.92rem; font-weight: 700; }
.page--epc .rd-intro__ledger dd { margin: 0; color: rgba(15, 48, 40, 0.72); font-size: 0.9rem; font-weight: 600; text-align: right; }

.page--epc .reception__assure {
  margin: 1.1rem 0 0;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(23, 72, 60, 0.3);
  border-radius: 999px;
  color: #17483c;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* the route cards */
.page--epc .rd-routes {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.page--epc .rd-route { margin: 0; border: 0; }
.page--epc .reception__route + .reception__route { border-top: 0; }
.page--epc .rd-route__disclosure { overflow: hidden; }

.page--epc .rd-route__summary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 0 28px;
  cursor: pointer;
  list-style: none;
}

.page--epc .rd-route__summary::-webkit-details-marker { display: none; }

.page--epc .rd-route__num {
  flex: 0 0 28px;
  font-family: var(--font-display, Gloock, Georgia, serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: #6f5320;
  transition: color 180ms ease;
}

.page--epc .rd-route__disclosure[open] .rd-route__num { color: #17483c; }

.page--epc .rd-route__label {
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 700;
  color: #17483c;
  text-transform: none;
  letter-spacing: 0;
}

.page--epc .rd-route__disclosure[open] .rd-route__label { font-size: 1.1rem; }

.page--epc .rd-route__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #17483c;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page--epc .rd-route__disclosure[open] .rd-route__chevron { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .page--epc .rd-route__disclosure:not([open]):hover { background: #ecdfc6; border-color: rgba(23, 72, 60, 0.28); }
  .page--epc .rd-route__disclosure:not([open]):hover .rd-route__chevron { transform: translateY(2px); }
}

.page--epc .rd-route__summary:focus-visible {
  outline: 2px solid #17483c;
  outline-offset: -2px;
  border-radius: 22px;
}

/* the open body — the homepage's own entrance */
.page--epc .rd-route__body {
  padding: 4px 28px 28px;
  border-top: 1px solid rgba(23, 72, 60, 0.12);
  margin-top: 2px;
  animation: epi-rd-body-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes epi-rd-body-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.page--epc .rd-route__outcome {
  margin: 18px 0 0;
  color: rgba(15, 48, 40, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}

.page--epc .reception__safety {
  margin: 14px 0 0;
  color: var(--epi-oxblood);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
}

.page--epc .rd-route__kicker {
  margin: 18px 0 10px;
  color: #17483c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--epc .rd-route__checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin: 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fdf8ec;
  border: 1px solid rgba(23, 26, 32, 0.08);
  list-style: none;
}

.page--epc .rd-route__checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #17483c;
  font-size: 0.92rem;
  font-weight: 500;
}

.page--epc .rd-tick { flex: 0 0 auto; width: 14px; height: 14px; color: #8a6a3c; }

.page--epc .rd-route__acts { margin-top: 22px; display: block; }

.page--epc .rd-route__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page--epc .rd-route__cta--primary {
  width: 100%;
  background: var(--epi-oxblood);
  border-color: var(--epi-oxblood);
  color: var(--epi-cream);
}

.page--epc .rd-route__cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

/* the homepage's rev-32 grammar: each outline pill wears a faint brand
   tint at rest, and the brand colour wipes in from the left on hover */
.page--epc .rd-route__cta--outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 48px;
}

.page--epc .rd-route__cta--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rt-brand, #17483c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page--epc .rd-route__cta--outline[href^="tel:"] {
  --rt-brand: #171a20;
  color: #171a20;
  border-color: rgba(23, 26, 32, 0.42);
  background: rgba(23, 26, 32, 0.05);
}

.page--epc .rd-route__cta--outline[href*="wa.me"] {
  --rt-brand: #075e54;
  color: #075e54;
  border-color: rgba(7, 94, 84, 0.44);
  background: rgba(7, 94, 84, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  .page--epc .rd-route__cta--primary:hover { background: #6a1e29; border-color: #6a1e29; transform: translateY(-2px); }
  .page--epc .rd-route__cta--outline:hover { color: #fbf8f2; transform: translateY(-2px); }
  .page--epc .rd-route__cta--outline:hover::before { transform: scaleX(1); }
}

.page--epc .rd-route__cta:focus-visible { outline: 2px solid var(--epi-oxblood); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .page--epc .rd-route__cta--outline::before { transition: none; }
}

/* ------------- the contact tiles: labelled, brand-wipe hover ------------- */

.page--epc .reception .crail { width: 100%; max-width: none; }
.page--epc .reception .crail__intro { display: none; }

.page--epc #dukes-receptionist .crail__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the shared labelled rail wraps each item in its own dark padded box;
   the tile IS the link, so the item resets to a bare cell */
.page--epc #dukes-receptionist .crail__item {
  display: block;
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* the shared rail paints a stray arrow at each tile's left edge; kill it
   the same way the homepage had to */
.page--epc #dukes-receptionist .crail__item::before { content: none !important; display: none !important; }
.page--epc #dukes-receptionist .crail__tip { display: none; }
.page--epc #dukes-receptionist .crail__fill { display: none; }

.page--epc #dukes-receptionist .crail__glyph { display: none; }

.page--epc #dukes-receptionist .crail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 1rem 2.3rem 1rem 1.2rem;
  border: 1px solid rgba(23, 72, 60, 0.14);
  border-radius: 16px;
  background: var(--epi-cream);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: border-color 240ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* the wipe: each channel's own colour, sweeping in from the left */
.page--epc #dukes-receptionist .crail__wipe {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.page--epc #dukes-receptionist .crail__link--phone .crail__wipe { background: #1d1d1b; }
.page--epc #dukes-receptionist .crail__link--whatsapp .crail__wipe { background: #075e54; }
.page--epc #dukes-receptionist .crail__link--email .crail__wipe { background: #16283d; }
.page--epc #dukes-receptionist .crail__link--instagram .crail__wipe { background: linear-gradient(100deg, #7b2a86 0%, #a92f49 60%, #b8412f 100%); }

.page--epc #dukes-receptionist .crail__glyph { position: relative; z-index: 1; flex: 0 0 auto; }

.page--epc #dukes-receptionist .crail__icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgb(197 166 106 / 75%);
  background: transparent;
  color: var(--epi-moss);
  box-sizing: border-box;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 240ms ease, border-color 240ms ease;
}

.page--epc #dukes-receptionist .crail__icon--brand { fill: currentColor; stroke: none; }

.page--epc #dukes-receptionist .rd-c-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.page--epc #dukes-receptionist .rd-c-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f5320;
  transition: color 200ms ease;
}

.page--epc #dukes-receptionist .rd-c-value {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--epi-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}

/* the gold arrow, right side */
.page--epc #dukes-receptionist .crail__link::after {
  content: "";
  position: absolute;
  left: auto;
  right: 1rem;
  top: 50%;
  bottom: auto;
  width: 16px;
  height: 16px;
  z-index: 1;
  transform: translate(-4px, -50%);
  opacity: 0.45;
  background: var(--epi-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--epc #dukes-receptionist .crail__link:hover,
  .page--epc #dukes-receptionist .crail__link:focus-visible {
    border-color: transparent;
    transform: translateY(-2px);
  }
  .page--epc #dukes-receptionist .crail__link:hover .crail__wipe,
  .page--epc #dukes-receptionist .crail__link:focus-visible .crail__wipe { transform: scaleX(1); }
  .page--epc #dukes-receptionist .crail__link:hover .crail__icon,
  .page--epc #dukes-receptionist .crail__link:focus-visible .crail__icon {
    color: var(--epi-cream);
    border-color: rgb(227 201 143 / 85%);
  }
  .page--epc #dukes-receptionist .crail__link:hover .rd-c-label,
  .page--epc #dukes-receptionist .crail__link:focus-visible .rd-c-label { color: #e3c98f; }
  .page--epc #dukes-receptionist .crail__link:hover .rd-c-value,
  .page--epc #dukes-receptionist .crail__link:focus-visible .rd-c-value { color: var(--epi-cream); }
  .page--epc #dukes-receptionist .crail__link:hover::after,
  .page--epc #dukes-receptionist .crail__link:focus-visible::after {
    opacity: 1;
    background: #e3c98f;
    transform: translate(2px, -50%);
  }
}

.page--epc #dukes-receptionist .crail__link:focus-visible { outline: 2px solid var(--epi-gold); outline-offset: 2px; }

@media (max-width: 63.99em) {
  .page--epc #dukes-receptionist .crail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 54.99em) {
  .page--epc .reception__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "routes"
      "contact";
  }
}

@media (max-width: 35.99em) {
  .page--epc #dukes-receptionist .crail__list { grid-template-columns: 1fr; }
  .page--epc .rd-route__checklist { grid-template-columns: 1fr; }
  .page--epc .rd-route__cta-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .page--epc .rd-route__body { animation: none; }
  .page--epc .rd-route__chevron,
  .page--epc .rd-route__num,
  .page--epc .rd-route__cta { transition: none; transform: none; }
  .page--epc #dukes-receptionist .crail__wipe { transition: none; }
  .page--epc #dukes-receptionist .crail__link,
  .page--epc #dukes-receptionist .crail__link::after { transition: none; transform: none; }
  .page--epc #dukes-receptionist .crail__link::after { transform: translateY(-50%); }
}


/* ---------------- The floating section banner (homepage hxnav) ------------ *
 * 20 Aug round 4 (Aarav): the "On this page" pill and drawer retire; the
 * page runs the homepage's sliding-cursor section pill verbatim
 * (home-section-nav.mjs + this block, from home-hero-2026.css rev 10.5).
 * Dark glass, exists only below the hero, cursor glides to the live
 * section, follows the pointer on hover, docks when the masthead hides. */

.page--epc .hxnav {
  position: fixed;
  top: calc(var(--hxnav-seam, 65px) + 10px);
  left: 50%;
  z-index: 900;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), top 240ms ease;
}

.page--epc .hxnav.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.page--epc .hxnav.is-docked { top: 10px; }

.page--epc .hxnav__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  /* a step darker than the homepage's 0.62: this page's islands are
     paler, and the gold numerals need the deeper glass to hold 4.5:1 */
  background: rgba(14, 26, 21, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px -20px rgba(8, 16, 12, 0.7);
}

.page--epc .hxnav [data-hxnav-link] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: rgba(244, 238, 227, 0.88);
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 200ms ease;
}

.page--epc .hxnav [data-hxnav-link] i {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 800;
  color: rgba(227, 201, 143, 0.85);
  transition: color 200ms ease;
}

.page--epc .hxnav [data-hxnav-link].is-on { color: #171a20; }
.page--epc .hxnav [data-hxnav-link].is-on i { color: #7b2430; }
.page--epc .hxnav [data-hxnav-link]:focus-visible { outline: 3px solid #f0bd77; outline-offset: 2px; }

.page--epc .hxnav__curli { margin: 0; padding: 0; list-style: none; }

.page--epc .hxnav__cursor {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: #fbf8f2;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  pointer-events: none;
}

/* phones: numbers only, so the pill stays genuinely small */
@media (max-width: 47.99em) {
  .page--epc .hxnav [data-hxnav-link] { padding: 0.5rem 0.7rem; min-height: 40px; }
  .page--epc .hxnav [data-hxnav-link] span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page--epc .hxnav,
  .page--epc .hxnav__cursor,
  .page--epc .hxnav [data-hxnav-link] { transition: none !important; }
}