/* ====================================================================
   DUKES — MAKE A COMPLAINT · cpx "record office" island pass
   20 August 2026.

   Page-scoped by body class (.page--complaints). The shared shell —
   logo, header, footer — is untouched, as is every other route.

   WHY A NEW NAMESPACE. The old page rode ~1,300 lines of .cxr- rules
   buried in dukes.css. Rather than fight that layer, every visual
   element here carries a new .cpx- class. The handful of .cxr- hooks
   the page's JavaScript and Playwright spec depend on are KEPT on the
   same elements (form.cxr-form, .cxr-form__submit, .cxr-form__actions,
   .cxr-form__assurance, .cxr-card--note, .cxr-copy__label, the
   #cxr-f-* field ids and every data-cxr-* attribute) so nothing that
   works today stops working. Where a legacy rule would still reach one
   of those elements, this sheet chains BOTH classes
   (.cpx-x.cxr-x) so it wins on specificity outright and never relies
   on load order.

   PALETTE FAMILY — DUKES_DESIGN_AUTHORITY §3. This page owns the
   BASALT pairing: a records-office graphite anchor with parchment,
   steel and oat reading fields. No other page pairs these.
   Colour jobs, stated per token below:
     basalt   = decisive bands (hero, independent review, close)
     oxblood  = actions and kickers ONLY
     brass    = the seal and identity accents on dark surfaces
     parchment / steel / oat = the three reading chapters

   BAND RHYTHM (never two adjacent fields in one family; dark chapters
   are truth statements and bookend the page):
     basalt hero  →  parchment record  →  steel procedure
       →  basalt independent review  →  oat questions  →  basalt close

   DEVICES THIS PAGE OWNS (novelty mandate, §2):
     1. The Promise Clock  — three brass ring dials counting the
        3 / 10 / 56 day commitments, in the hero.
     2. The Case Record    — a live ledger beside the form showing
        which of the five record lines are captured, with a meter.
        Nothing else on the site mirrors a form back to the visitor.
     3. The Escalation Seal — the brass redress seal on the dark band,
        stamped with the membership number and cropped by the edge.

   COMPLIANCE. Every scope line, date, membership number, redress
   detail and disclaimer is carried over WORD FOR WORD from the
   previous page. Nothing factual was rewritten.
   ==================================================================== */

.page--complaints {
  /* ---- ink ------------------------------------------------------- */
  --cpx-ink: #1b2026;
  --cpx-ink-soft: #4d555d;

  /* ---- basalt: the dark anchor. Decisive bands only. -------------- */
  --cpx-basalt: #232b33;
  --cpx-basalt-soft: #313b45;
  --cpx-basalt-deep: #1a2128;

  /* ---- THE premium white. Plates only, one token site-wide. ------- */
  --cpx-cream: #fbf8f2;

  /* ---- the three reading fields ---------------------------------- */
  --cpx-parchment: #f2ece1; /* the record chapter — warm, human */
  --cpx-steel: #dbe5ea;     /* the procedure chapter — cool, precise */
  --cpx-oat: #ece2ce;       /* the questions chapter — warm, deeper */

  /* ---- oxblood: actions and kickers. Nothing else. ---------------- */
  --cpx-oxblood: #7b2430;
  --cpx-oxblood-dark: #5e1924;
  --cpx-oxblood-lift: #b8586a; /* the same job on dark surfaces only */

  /* ---- brass: the seal + identity accent on dark ------------------ */
  --cpx-brass: #c5a66a;
  --cpx-brass-deep: #8a6423; /* the same accent on LIGHT surfaces */

  /* ---- text tuned for dark surfaces (never a plate background, so
          the one-white-token rule holds) --------------------------- */
  --cpx-on-dark: #f4f1ea;
  --cpx-on-dark-soft: #c3ccd4;

  /* ---- numeral slate: the stage numbers are read by sighted visitors as
          the step count, so they clear 3:1 as large type rather than
          sitting at the 1.7:1 a hairline tint would give ------------- */
  --cpx-numeral: #79838c;

  /* ---- placeholder tint — never white, so awaiting-art slots do not
          add to the cream count ------------------------------------ */
  --cpx-slot-tint: #dde3e2;

  /* ---- rules ------------------------------------------------------ */
  --cpx-rule: rgb(27 32 38 / 16%);
  --cpx-rule-strong: rgb(27 32 38 / 26%);
  --cpx-rule-dark: rgb(244 241 234 / 22%);

  /* ---- geometry: the width ladder. Neighbouring bands never share a
          width (§2, the fill-the-width rule). ---------------------- */
  --cpx-shell-hero: min(96vw, 1780px);
  --cpx-shell-record: min(94vw, 1560px);
  --cpx-shell-next: min(96vw, 1680px);
  --cpx-shell-independent: min(92vw, 1380px);
  --cpx-shell-questions: min(93vw, 1480px);
  --cpx-shell-close: min(96vw, 1660px);

  --cpx-radius-island: 30px;
  --cpx-radius-plate: 22px;
  --cpx-radius-small: 14px;
  --cpx-tap: 48px;
  --cpx-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- the site island ground ------------------------------------ */
  background: linear-gradient(180deg, #dee8ea 0%, #d9e5e5 30%, #d9e5e5 100%);
  color: var(--cpx-ink);
}

.page--complaints ::selection {
  background: var(--cpx-brass);
  color: var(--cpx-basalt);
}

.page--complaints :focus-visible {
  outline: 3px solid #f0bd77;
  outline-offset: 4px;
}

/* dukes.css paints .main; the island ground has to show through. */
.page--complaints .main {
  overflow: clip;
  background: transparent;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.page--complaints .main :is(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* ====================================================================
   LEGACY NEUTRALISATION
   The old .cxr- layer is retired. These few elements keep their class
   because JavaScript or the spec reads it; the styling comes from the
   .cpx- class chained beside it.
   ==================================================================== */

.page--complaints .cpx-form.cxr-form,
.page--complaints .cpx-note.cxr-card--note,
.page--complaints .cpx-actions.cxr-form__actions,
.page--complaints .cpx-assurance.cxr-form__assurance {
  all: unset;
  display: block;
  box-sizing: border-box;
}

.page--complaints .cpx-form.cxr-form :is(input, textarea, button, select) {
  font: inherit;
}

/* The old two-screen document sections are gone from the markup; if any
   stale fragment survives a partial edit it must not paint. */
.page--complaints :is(.cxr-open, .cxr-route, .cxr-redress--legacy, .cxr-onpage-slot) {
  display: none !important;
}

/* ====================================================================
   SHARED PRIMITIVES
   ==================================================================== */

/* --- breadcrumb sits on the ground, not in a bar ------------------- */
.page--complaints .crumbs {
  margin: 0;
  max-width: none;
  padding: 0.9rem 4vw 0.2rem;
  background: transparent;
  border: 0;
}
.page--complaints .crumbs__list {
  width: var(--cpx-shell-hero);
  margin-inline: auto;
  padding: 0;
}
.page--complaints .crumbs__link,
.page--complaints .crumbs__current {
  font-size: 0.875rem;
  color: var(--cpx-ink-soft);
}
@media (hover: hover) {
  .page--complaints .crumbs__link:hover {
    color: var(--cpx-oxblood);
  }
}

/* --- the island: every band is a floating plate on the ground ------ */
.page--complaints .cpx-island {
  position: relative;
  margin: clamp(2.2rem, 3.8vw, 4rem) auto 0;
  border-radius: var(--cpx-radius-island);
  box-shadow: 0 34px 74px -52px rgb(27 32 38 / 46%);
  overflow: hidden;
}
.page--complaints .cpx-island:first-of-type {
  margin-top: clamp(1rem, 1.8vw, 1.6rem);
}

/* --- the container layer. band field → frame → plate (§4.2). ------- */
.page--complaints .cpx-frame {
  padding: clamp(20px, 2.6vw, 38px);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  box-shadow: 0 18px 44px rgb(27 32 38 / 7%);
}

/* --- kicker: one voice, coloured by surface ------------------------ */
.page--complaints .cpx-kicker {
  margin: 0 0 0.85rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-kicker--dark {
  color: var(--cpx-brass);
}

/* --- centred chapter lockup (never a naked heading) ---------------- */
.page--complaints .cpx-head {
  max-width: 62ch;
  margin: 0 auto clamp(1.6rem, 2.6vw, 2.6rem);
  text-align: center;
}
.page--complaints .cpx-head h2 {
  margin: 0 0 0.7rem;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.95rem, 2.9vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--cpx-ink);
}
.page--complaints .cpx-head p {
  margin: 0 auto;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-head--dark h2 {
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-head--dark p {
  color: var(--cpx-on-dark-soft);
}

/* --- buttons: 48px floor, one easing family ----------------------- */
.page--complaints .cpx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--cpx-tap);
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--cpx-oxblood);
  color: var(--cpx-cream);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--cpx-ease), transform 180ms var(--cpx-ease),
    box-shadow 180ms var(--cpx-ease);
}
@media (hover: hover) {
  .page--complaints .cpx-button:hover {
    background: var(--cpx-oxblood-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -18px rgb(94 25 36 / 70%);
  }
}
.page--complaints .cpx-button:active {
  transform: translateY(1px);
}
.page--complaints .cpx-button--light {
  background: var(--cpx-cream);
  color: var(--cpx-basalt);
}
@media (hover: hover) {
  .page--complaints .cpx-button--light:hover {
    background: #fffdf9;
    box-shadow: 0 16px 30px -18px rgb(0 0 0 / 55%);
  }
}

/* --- text link: a pressable chip, never a bare underline ---------- */
.page--complaints .cpx-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--cpx-tap);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 750;
  text-decoration: none;
  color: var(--cpx-oxblood);
  transition: background 160ms var(--cpx-ease), color 160ms var(--cpx-ease);
}
.page--complaints .cpx-textlink::after {
  content: "\2192";
  transition: transform 160ms var(--cpx-ease);
}
@media (hover: hover) {
  .page--complaints .cpx-textlink:hover {
    background: rgb(123 36 48 / 9%);
  }
  .page--complaints .cpx-textlink:hover::after {
    transform: translateX(3px);
  }
}
.page--complaints .cpx-textlink--dark {
  color: var(--cpx-brass);
}
@media (hover: hover) {
  .page--complaints .cpx-textlink--dark:hover {
    background: rgb(197 166 106 / 16%);
  }
}

/* --- fact ledger (§4.7) — replaces bare hairline rows -------------- */
.page--complaints .cpx-ledgerlist {
  margin: 0;
}
.page--complaints .cpx-ledgerlist > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.34fr) 1fr;
  gap: 0.5rem 1.2rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--cpx-rule);
}
.page--complaints .cpx-ledgerlist > div:last-child {
  border-bottom: 0;
}
.page--complaints .cpx-ledgerlist dt {
  margin: 0;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--cpx-ink);
}
.page--complaints .cpx-ledgerlist dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-ledgerlist--dark > div {
  border-bottom-color: var(--cpx-rule-dark);
}
.page--complaints .cpx-ledgerlist--dark dt {
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-ledgerlist--dark dd {
  color: var(--cpx-on-dark-soft);
}
/* Ledger rows are rows, not prose: their links are pressable chips that
   meet the 48px target, per Aarav's standing verdict on bare underline
   links. Inline links inside a SENTENCE stay inline — padding a word out
   to 48px would break the line it sits in. */
.page--complaints .cpx-ledgerlist--dark a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--cpx-tap);
  margin: -0.35rem 0;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--cpx-rule-dark);
  background: rgb(244 241 234 / 6%);
  font-weight: 700;
  text-decoration: none;
  color: var(--cpx-brass);
  transition: background 160ms var(--cpx-ease);
}
@media (hover: hover) {
  .page--complaints .cpx-ledgerlist--dark a:hover {
    background: rgb(197 166 106 / 18%);
  }
}
.page--complaints .cpx-ledgerlist--dark > div {
  align-items: center;
}

/* --- crown placeholder (§4.1) — label chip + ratio tag ------------- */
.page--complaints .cpx-slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--cpx-radius-small);
  border: 1px solid var(--cpx-rule);
  background: var(--cpx-slot-tint);
  aspect-ratio: var(--slot-ar, 3 / 2);
}
.page--complaints .cpx-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/brand/dukes-crown.png") center / 28% no-repeat;
  opacity: 0.14;
}
.page--complaints .cpx-slot__chip {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  max-width: calc(100% - 1.4rem);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: var(--cpx-basalt);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-slot__ratio {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  background: var(--cpx-basalt);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cpx-brass);
}
/* Slots on a dark band get a lifted tint so they read as awaiting art,
   not as a hole in the band. */
.page--complaints .cpx-slot--dark {
  background: var(--cpx-basalt-soft);
  border-color: var(--cpx-rule-dark);
}
.page--complaints .cpx-slot--dark::before {
  opacity: 0.2;
  filter: brightness(7);
}

/* --- the texture layer (§10.3) — depth without another box -------- */
.page--complaints .cpx-textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(27 32 38 / 5%) 0 1px,
    transparent 1px 14px
  );
  mask-image: linear-gradient(to bottom right, #000, transparent 60%);
}
.page--complaints .cpx-textured > * {
  position: relative;
  z-index: 1;
}

/* --- the edge lion watermark, cropped by a corner ------------------ */
.page--complaints .cpx-lion {
  position: absolute;
  width: clamp(9rem, 14vw, 15rem);
  aspect-ratio: 529 / 793;
  background: url("/assets/brand/dukes-lion-watermark-white.png") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.page--complaints .cpx-lion--left {
  left: -3.5rem;
  bottom: -4rem;
}
.page--complaints .cpx-lion--right {
  right: -3.5rem;
  top: -3rem;
  transform: scaleX(-1);
}

/* ====================================================================
   THE FLOATING SECTION PILL (hxnav)
   The homepage device, shared script, recoloured to basalt glass.
   ==================================================================== */

.page--complaints .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 var(--cpx-ease), top 240ms ease;
}
.page--complaints .hxnav.is-in {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.page--complaints .hxnav.is-docked {
  top: 10px;
}
.page--complaints .hxnav__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: rgb(24 30 36 / 66%);
  border: 1px solid rgb(255 255 255 / 16%);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px -20px rgb(10 14 18 / 72%);
}
.page--complaints .hxnav [data-hxnav-link] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(244 241 234 / 74%);
  transition: color 180ms var(--cpx-ease);
}
.page--complaints .hxnav [data-hxnav-link] i {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cpx-brass);
}
.page--complaints .hxnav [data-hxnav-link].is-on {
  color: #fff;
}
.page--complaints .hxnav__curli {
  position: absolute;
  inset: 4px auto 4px 4px;
  z-index: 0;
  pointer-events: none;
}
.page--complaints .hxnav__cursor {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: 999px;
  background: rgb(197 166 106 / 22%);
  border: 1px solid rgb(197 166 106 / 34%);
  opacity: 0;
  transition: transform 340ms var(--cpx-ease), width 340ms var(--cpx-ease),
    opacity 200ms ease;
}

/* ====================================================================
   1 · HERO — basalt. The decision band.
   ==================================================================== */

.page--complaints .cpx-hero {
  width: var(--cpx-shell-hero);
  padding: clamp(2.6rem, 5vw, 4.6rem) clamp(1.4rem, 3.2vw, 3.4rem)
    clamp(2rem, 3.4vw, 3rem);
  background:
    radial-gradient(120% 90% at 82% 0%, rgb(49 59 69 / 85%) 0%, transparent 62%),
    var(--cpx-basalt);
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(1.8rem, 3.4vw, 3.6rem);
  align-items: start;
}
.page--complaints .cpx-hero__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--cpx-on-dark-soft);
}
.page--complaints .cpx-dot {
  color: var(--cpx-brass);
}
.page--complaints .cpx-hero h1 {
  margin: 0 0 1rem;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 4vw, 3.85rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 15ch;
  color: #fff;
}
.page--complaints .cpx-hero__lede {
  margin: 0 0 1.6rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.68;
  color: var(--cpx-on-dark-soft);
}
.page--complaints .cpx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

/* --- DEVICE 1 · THE PROMISE CLOCK --------------------------------- */
.page--complaints .cpx-clock {
  position: relative;
  padding: clamp(1.3rem, 2vw, 1.9rem);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-basalt-soft);
  border: 1px solid var(--cpx-rule-dark);
  box-shadow: 0 26px 60px -40px rgb(0 0 0 / 80%);
}
.page--complaints .cpx-clock__title {
  margin: 0 0 0.25rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpx-brass);
}
.page--complaints .cpx-clock__sub {
  margin: 0 0 1.15rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cpx-on-dark-soft);
}
.page--complaints .cpx-clock__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--complaints .cpx-clock__list > li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 0.95rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--cpx-rule-dark);
}
.page--complaints .cpx-clock__list > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* the brass ring dial — a masked conic sweep, no SVG needed */
.page--complaints .cpx-dial {
  position: relative;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--cpx-brass) calc(var(--pct, 50) * 1%),
    rgb(244 241 234 / 13%) 0
  );
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
}
.page--complaints .cpx-clock__value {
  display: block;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.page--complaints .cpx-clock__unit {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-clock__note {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cpx-on-dark-soft);
}
.page--complaints .cpx-clock__foot {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cpx-rule-dark);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cpx-on-dark-soft);
}

/* --- the hero route strip ----------------------------------------- */
.page--complaints .cpx-hero__routes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
}
.page--complaints .cpx-hero__routes a {
  display: grid;
  gap: 0.2rem;
  min-height: var(--cpx-tap);
  padding: 0.95rem 1.1rem;
  border-radius: var(--cpx-radius-small);
  background: rgb(244 241 234 / 6%);
  border: 1px solid var(--cpx-rule-dark);
  text-decoration: none;
  transition: background 180ms var(--cpx-ease), transform 180ms var(--cpx-ease);
}
.page--complaints .cpx-hero__routes span:first-child {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpx-brass);
}
.page--complaints .cpx-hero__routes strong {
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-arrow {
  color: var(--cpx-on-dark-soft);
}
@media (hover: hover) {
  .page--complaints .cpx-hero__routes a:hover {
    background: rgb(244 241 234 / 12%);
    transform: translateY(-2px);
  }
}

/* ====================================================================
   2 · THE RECORD — parchment. The form.
   ==================================================================== */

.page--complaints .cpx-record {
  width: var(--cpx-shell-record);
  padding: clamp(2.2rem, 4vw, 3.8rem) clamp(1.2rem, 2.8vw, 3rem);
  background: var(--cpx-parchment);
}
.page--complaints .cpx-record__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(1.4rem, 2.4vw, 2.4rem);
  align-items: start;
}
.page--complaints .cpx-record__recipient {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cpx-ink);
}
.page--complaints .cpx-record__recipient .cpx-record__email {
  font-size: inherit;
  font-weight: 800;
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-record__head {
  display: grid;
  justify-items: center;
}

/* --- the five record lines ---------------------------------------- */
.page--complaints .cpx-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--complaints .cpx-field {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  box-shadow: 0 12px 32px rgb(27 32 38 / 6%);
  transition: border-color 180ms var(--cpx-ease), box-shadow 180ms var(--cpx-ease);
}
.page--complaints .cpx-field:focus-within {
  border-color: var(--cpx-oxblood);
  box-shadow: 0 16px 38px rgb(123 36 48 / 13%);
}
.page--complaints .cpx-field--wide {
  grid-column: 1 / -1;
}
.page--complaints .cpx-field__n {
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-field > label {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
  color: var(--cpx-ink);
}
.page--complaints .cpx-field__req {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-form.cxr-form :is(input[type="text"], textarea) {
  width: 100%;
  min-height: var(--cpx-tap);
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--cpx-rule-strong);
  background: #fff;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cpx-ink);
  transition: border-color 160ms var(--cpx-ease), box-shadow 160ms var(--cpx-ease);
}
.page--complaints .cpx-form.cxr-form textarea {
  resize: vertical;
}
.page--complaints .cpx-form.cxr-form :is(input[type="text"], textarea)::placeholder {
  color: #79828a;
}
.page--complaints .cpx-form.cxr-form :is(input[type="text"], textarea):focus-visible {
  border-color: var(--cpx-oxblood);
}
.page--complaints .cpx-form.cxr-form :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--cpx-oxblood);
  box-shadow: 0 0 0 3px rgb(123 36 48 / 14%);
}
.page--complaints .cpx-field__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-field__error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border-left: 3px solid var(--cpx-oxblood);
  background: rgb(123 36 48 / 8%);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cpx-oxblood-dark);
}

/* --- the evidence note (keeps .cxr-card--note for the JS) ---------- */
.page--complaints .cpx-note.cxr-card--note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  margin-top: 0.35rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--cpx-radius-small);
  background: rgb(219 229 234 / 55%);
  border: 1px solid var(--cpx-rule);
}
.page--complaints .cpx-note__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cpx-basalt);
  color: var(--cpx-brass);
}
.page--complaints .cpx-note__mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}
.page--complaints .cpx-note strong {
  display: block;
  font-size: 0.95rem;
  color: var(--cpx-ink);
}
.page--complaints .cpx-note span:last-of-type {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cpx-ink-soft);
}

/* --- the hand-off actions ----------------------------------------- */
.page--complaints .cpx-actions.cxr-form__actions {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-basalt);
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-actions__copy strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.page--complaints .cpx-assurance.cxr-form__assurance {
  margin: 0;
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cpx-on-dark-soft);
}
.page--complaints .cpx-route3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cpxroute;
}
.page--complaints .cpx-route3 li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: rgb(244 241 234 / 9%);
  border: 1px solid var(--cpx-rule-dark);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cpx-on-dark);
  counter-increment: cpxroute;
}
.page--complaints .cpx-route3 li::before {
  content: counter(cpxroute, decimal-leading-zero);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cpx-brass);
}
.page--complaints .cpx-submit.cxr-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  justify-self: start;
  min-height: 56px;
  padding: 0.9rem 1.7rem;
  border: 0;
  border-radius: 10px;
  background: var(--cpx-cream);
  color: var(--cpx-basalt);
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
  transition: background 180ms var(--cpx-ease), transform 180ms var(--cpx-ease),
    box-shadow 180ms var(--cpx-ease);
}
.page--complaints .cpx-submit.cxr-form__submit svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}
@media (hover: hover) {
  .page--complaints .cpx-submit.cxr-form__submit:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -20px rgb(0 0 0 / 75%);
  }
}
.page--complaints .cpx-submit.cxr-form__submit:active {
  transform: translateY(1px);
}

/* --- the help panel ------------------------------------------------ */
.page--complaints .cpx-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem 1rem;
  align-items: start;
  margin-top: 1rem;
  padding: clamp(1rem, 1.7vw, 1.4rem);
  border-radius: var(--cpx-radius-small);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
}
.page--complaints .cpx-help__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(219 229 234 / 90%);
  color: var(--cpx-basalt);
}
.page--complaints .cpx-help__mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
}
.page--complaints .cpx-help strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: var(--cpx-ink);
}
.page--complaints .cpx-help p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-help__links {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* --- DEVICE 2 · THE CASE RECORD ledger ---------------------------- */
.page--complaints .cpx-caserec {
  position: sticky;
  top: calc(var(--hxnav-seam, 65px) + 5.5rem);
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  box-shadow: 0 18px 44px rgb(27 32 38 / 8%);
}
.page--complaints .cpx-caserec__title {
  margin: 0 0 0.15rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-caserec__count {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-caserec__count strong {
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--cpx-ink);
}
.page--complaints .cpx-caserec__meter {
  height: 6px;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgb(27 32 38 / 10%);
  overflow: hidden;
}
.page--complaints .cpx-caserec__meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--cpx-oxblood);
  transition: width 320ms var(--cpx-ease);
}
.page--complaints .cpx-caserec__list {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}
.page--complaints .cpx-caserec__list li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--cpx-rule);
}
.page--complaints .cpx-caserec__list li:last-child {
  border-bottom: 0;
}
.page--complaints .cpx-caserec__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cpx-rule-strong);
  background: transparent;
  transition: background 200ms var(--cpx-ease), border-color 200ms var(--cpx-ease);
}
.page--complaints .cpx-caserec__list li.is-captured .cpx-caserec__dot {
  background: var(--cpx-oxblood);
  border-color: var(--cpx-oxblood);
}
.page--complaints .cpx-caserec__label {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--cpx-ink);
}
.page--complaints .cpx-caserec__state {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-caserec__list li.is-captured .cpx-caserec__state {
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-caserec__note {
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--cpx-rule);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cpx-ink-soft);
}

/* ====================================================================
   3 · WHAT HAPPENS NEXT — steel. The procedure chapter.
   ==================================================================== */

.page--complaints .cpx-next {
  width: var(--cpx-shell-next);
  padding: clamp(2.2rem, 4vw, 3.8rem) clamp(1.2rem, 2.8vw, 3rem);
  background: var(--cpx-steel);
}
.page--complaints .cpx-next__body {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  align-items: start;
}
.page--complaints .cpx-stages {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--complaints .cpx-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.1rem;
  padding: clamp(1.05rem, 1.7vw, 1.45rem);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  box-shadow: 0 12px 32px rgb(27 32 38 / 6%);
}
.page--complaints .cpx-stage__n {
  grid-row: 1 / span 3;
  align-self: start;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cpx-numeral);
}
.page--complaints .cpx-stage__actor {
  justify-self: start;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgb(123 36 48 / 10%);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpx-oxblood);
}
.page--complaints .cpx-stage__actor--dukes {
  background: rgb(35 43 51 / 10%);
  color: var(--cpx-basalt);
}
.page--complaints .cpx-stage h3 {
  margin: 0;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--cpx-ink);
}
.page--complaints .cpx-stage p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-stage__route {
  margin-top: 0.15rem;
  font-size: 0.9rem;
}
.page--complaints .cpx-stage__route a {
  font-weight: 750;
  color: var(--cpx-oxblood);
  text-underline-offset: 3px;
}

/* the aside column: the duty ledger + a crown slot */
.page--complaints .cpx-next__aside {
  display: grid;
  gap: 0.9rem;
}
.page--complaints .cpx-duty {
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--cpx-radius-plate);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  box-shadow: 0 12px 32px rgb(27 32 38 / 6%);
}
.page--complaints .cpx-duty__title {
  margin: 0 0 0.7rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpx-oxblood);
}

/* ====================================================================
   4 · INDEPENDENT REVIEW — basalt. The truth statement + the seal.
   ==================================================================== */

.page--complaints .cpx-independent {
  position: relative;
  width: var(--cpx-shell-independent);
  padding: clamp(2.4rem, 4.2vw, 4rem) clamp(1.3rem, 3vw, 3.2rem);
  background:
    radial-gradient(100% 80% at 12% 0%, rgb(49 59 69 / 78%) 0%, transparent 60%),
    var(--cpx-basalt-deep);
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-independent__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.page--complaints .cpx-independent h2 {
  margin: 0 0 0.8rem;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
}
.page--complaints .cpx-independent__copy p {
  margin: 0 0 1rem;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--cpx-on-dark-soft);
}

/* --- DEVICE 3 · THE ESCALATION SEAL ------------------------------- */
.page--complaints .cpx-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9rem, 13vw, 11.5rem);
  aspect-ratio: 1;
  margin: 0 0 1.4rem;
  border-radius: 50%;
  border: 1px solid rgb(197 166 106 / 45%);
  background: radial-gradient(circle, rgb(197 166 106 / 14%) 0%, transparent 68%);
}
.page--complaints .cpx-seal::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgb(197 166 106 / 34%);
}
.page--complaints .cpx-seal__crown {
  width: 44%;
  aspect-ratio: 252 / 182;
  background: url("/assets/brand/dukes-crown.png") center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(74%) sepia(24%) saturate(704%)
    hue-rotate(1deg) brightness(92%) contrast(88%);
}
.page--complaints .cpx-seal__stamp {
  position: absolute;
  text-transform: uppercase;
  bottom: 14%;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--cpx-brass);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  color: var(--cpx-basalt-deep);
}

.page--complaints .cpx-prs {
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: var(--cpx-radius-plate);
  background: rgb(244 241 234 / 7%);
  border: 1px solid var(--cpx-rule-dark);
}
.page--complaints .cpx-prs h3 {
  margin: 0 0 0.8rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpx-brass);
}
.page--complaints .cpx-prs__note {
  margin: 0.9rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--cpx-rule-dark);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cpx-on-dark-soft);
}

/* --- the certificate plate (real evidence, kept) ------------------- */
.page--complaints .cpx-cert {
  margin: clamp(1.2rem, 2vw, 1.6rem) 0 0;
}
.page--complaints .cpx-cert__link {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem;
  border-radius: var(--cpx-radius-small);
  background: rgb(244 241 234 / 8%);
  border: 1px solid var(--cpx-rule-dark);
  text-decoration: none;
  transition: background 180ms var(--cpx-ease), transform 180ms var(--cpx-ease);
}
@media (hover: hover) {
  .page--complaints .cpx-cert__link:hover {
    background: rgb(244 241 234 / 14%);
    transform: translateY(-2px);
  }
}
.page--complaints .cpx-cert__preview {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cpx-basalt-soft);
}
.page--complaints .cpx-cert__preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1684 / 1190;
  object-fit: cover;
}
.page--complaints .cpx-cert__meta strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-cert__meta small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--cpx-on-dark-soft);
}
.page--complaints .cpx-cert__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--cpx-tap);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--cpx-brass);
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--cpx-basalt-deep);
}
.page--complaints .cpx-cert__action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}

/* ====================================================================
   5 · QUESTIONS — oat.
   ==================================================================== */

.page--complaints .cpx-questions {
  width: var(--cpx-shell-questions);
  padding: clamp(2.2rem, 4vw, 3.8rem) clamp(1.2rem, 2.8vw, 3rem);
  background: var(--cpx-oat);
}
.page--complaints .cpx-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.page--complaints .cpx-faq details {
  border-radius: var(--cpx-radius-small);
  background: var(--cpx-cream);
  border: 1px solid var(--cpx-rule);
  box-shadow: 0 10px 26px rgb(27 32 38 / 5%);
  overflow: hidden;
}
.page--complaints .cpx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--cpx-tap);
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
  color: var(--cpx-ink);
}
.page--complaints .cpx-faq summary::-webkit-details-marker {
  display: none;
}
.page--complaints .cpx-faq__action {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(123 36 48 / 10%);
}
.page--complaints .cpx-faq__action::before,
.page--complaints .cpx-faq__action::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--cpx-oxblood);
  transform: translate(-50%, -50%);
  transition: transform 220ms var(--cpx-ease), opacity 180ms var(--cpx-ease);
}
.page--complaints .cpx-faq__action::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.page--complaints .cpx-faq details[open] .cpx-faq__action::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.page--complaints .cpx-faq details > p {
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  max-width: 56ch;
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--cpx-ink-soft);
}
.page--complaints .cpx-faq details > p a {
  font-weight: 750;
  color: var(--cpx-oxblood);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .page--complaints .cpx-faq summary:hover {
    background: rgb(123 36 48 / 4%);
  }
}
.page--complaints .cpx-questions__source {
  margin: clamp(1.2rem, 2vw, 1.6rem) auto 0;
  max-width: 68ch;
  padding: 0.85rem 1.1rem;
  border-radius: var(--cpx-radius-small);
  border-left: 4px solid var(--cpx-oxblood);
  background: rgb(251 248 242 / 72%);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cpx-ink-soft);
}

/* ====================================================================
   6 · CLOSE — basalt bookend.
   ==================================================================== */

.page--complaints .cpx-close {
  position: relative;
  width: var(--cpx-shell-close);
  padding: clamp(2.4rem, 4.2vw, 4rem) clamp(1.3rem, 3vw, 3.2rem);
  background:
    radial-gradient(110% 85% at 88% 100%, rgb(49 59 69 / 82%) 0%, transparent 62%),
    var(--cpx-basalt);
  color: var(--cpx-on-dark);
}
.page--complaints .cpx-close__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
}
.page--complaints .cpx-close h2 {
  margin: 0 0 0.8rem;
  font-family: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
}
.page--complaints .cpx-close p {
  margin: 0 0 1.3rem;
  max-width: 50ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--cpx-on-dark-soft);
}
/* Three-layer nest (§4.2): band field → grid → this plate. Without it the
   closing band was two layers deep and read as floating copy. */
.page--complaints .cpx-closeplate {
  padding: clamp(1.3rem, 2.2vw, 2rem);
  border-radius: var(--cpx-radius-plate);
  background: rgb(244 241 234 / 7%);
  border: 1px solid var(--cpx-rule-dark);
}

.page--complaints .cpx-close__routes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.page--complaints .cpx-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--cpx-tap);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  background: rgb(244 241 234 / 9%);
  border: 1px solid var(--cpx-rule-dark);
  font-size: 0.9rem;
  font-weight: 750;
  color: var(--cpx-on-dark);
  cursor: pointer;
  transition: background 180ms var(--cpx-ease);
}
@media (hover: hover) {
  .page--complaints .cpx-copy:hover {
    background: rgb(244 241 234 / 16%);
  }
}
.page--complaints .cpx-copy.is-copied {
  background: rgb(197 166 106 / 24%);
  border-color: rgb(197 166 106 / 45%);
}
.page--complaints .cpx-copy__status {
  font-size: 0.875rem;
  color: var(--cpx-brass);
}

/* ====================================================================
   MOTION — one easing family, armed by JS so a script failure can
   never hide content (§1.15).
   ==================================================================== */

/* The armed flag is set on <html>, which is OUTSIDE .page--complaints, so
   the ancestor order here is html-first. Written the other way round the
   rule matches nothing and the reveal is silently inert. */
html[data-reveal-armed] .page--complaints [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
html[data-reveal-armed] .page--complaints [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--cpx-ease), transform 520ms var(--cpx-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .page--complaints * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html[data-reveal-armed] .page--complaints [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */

@media (max-width: 61.99em) {
  .page--complaints .cpx-hero__inner,
  .page--complaints .cpx-record__grid,
  .page--complaints .cpx-next__body,
  .page--complaints .cpx-independent__grid,
  .page--complaints .cpx-close__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--complaints .cpx-hero__routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page--complaints .cpx-caserec {
    position: static;
  }
  .page--complaints .cpx-seal {
    margin-inline: auto;
  }
}

@media (max-width: 47.99em) {
  .page--complaints .cpx-fields,
  .page--complaints .cpx-faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--complaints .cpx-cert__link {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .page--complaints .cpx-help {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--complaints .cpx-help__links {
    grid-column: 1;
  }
  .page--complaints .hxnav {
    display: none;
  }
}

@media (max-width: 47.99em) {
  /* The ledger's two-column form needs ~7rem for the term plus a real
     measure for the definition. Below 48em there isn't room for both, and
     the pressable contact chips were being clipped by the island's own
     overflow — no page scrollbar, but a phone number cut in half. Stack
     the rows instead. */
  .page--complaints .cpx-ledgerlist > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
  .page--complaints .cpx-ledgerlist--dark a {
    margin: 0;
    max-width: 100%;
  }
  .page--complaints .cpx-ledgerlist dd {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 34.99em) {
  .page--complaints .cpx-hero__routes {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--complaints .cpx-clock__list > li {
    grid-template-columns: 48px 1fr;
  }
  .page--complaints .cpx-dial {
    width: 48px;
  }
}

/* ====================================================================
   DETERMINISTIC OVERRIDES
   Two elements keep a legacy .cxr- class for a real runtime contract,
   not for styling:
     .cxr-cert__action — named in the certificate's
       data-cert-passthrough attribute, which is how cert-lightbox.mjs
       lets the whole card open the modal;
     .cxr-form__* / .cxr-card--note — read by complaints-entry.mjs.
   dukes.css carries a (0,4,0) hover rule for the certificate action,
   which would otherwise beat this sheet's (0,2,0) rule on hover. These
   chained selectors win on specificity outright, so the result never
   depends on stylesheet order.
   ==================================================================== */

.page--complaints .cpx-cert__link:hover .cpx-cert__action.cxr-cert__action,
.page--complaints .cpx-cert__action.cxr-cert__action {
  background: var(--cpx-brass);
  border: 0;
  color: var(--cpx-basalt-deep);
  transform: none;
}

/* The floating pill on small screens: it scrolls rather than
   disappearing, and its edges fade instead of clipping a chip in half
   (DUKES_DESIGN_AUTHORITY §4.10). */
@media (max-width: 47.99em) {
  .page--complaints .hxnav {
    display: block;
    width: min(94vw, 34rem);
  }
  .page--complaints .hxnav__list {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 28px,
      #000 calc(100% - 28px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 28px,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }
  .page--complaints .hxnav__list::-webkit-scrollbar {
    display: none;
  }
  .page--complaints .hxnav [data-hxnav-link] {
    scroll-snap-align: center;
  }
  /* the sliding cursor cannot track a scrolling strip reliably, so it
     stands down and the live chip carries its own fill instead */
  .page--complaints .hxnav__curli {
    display: none;
  }
  .page--complaints .hxnav [data-hxnav-link].is-on {
    background: rgb(197 166 106 / 22%);
  }
}