/* ======================================================================
   DUKES - CLIENT PROTECTION - "cpw" correction round, 20 August 2026.

   Aarav: the arrows are broken, and "I don't like the hovering over
   animation and the lines being used, do a different approach."

   1. THE ARROWS. Every arrow on this page was a text character forced
      into Georgia. Georgia has no U+2197, so the browser substituted it
      and the company button rendered a broken underscore-and-chevron
      instead of an arrow. They are now drawn marks: an SVG mask filled
      with currentColor, so they inherit the link colour and can never
      fall back to another font.

   2. THE HOVER. The complaints stages are not links, but they still
      carried a card hover from the original design, so pointing at one
      drew a bordered rectangle with a shadow around it. Non-interactive
      things now get no hover at all. The source rows ARE links, so they
      keep a response, but the expanding circle wipe is replaced by a
      quiet accent bar that grows from the left edge.

   3. THE LINES. The rail through the numerals and the vertical column
      dividers are gone. Separation is carried by TONE AND SPACE instead:
      the three stages are three plates in a descending warmth, and the
      source records are separate plates with a gap. No rules anywhere in
      this region, which is also how the cover band already works.
   ==================================================================== */

/* ------------------------------------------------------- 1. arrows -- */

.page--client-protection .cpl-register__act .cpl-link::after,
.page--client-protection .cpl-stepper-band__act .cpl-action::after,
.page--client-protection .cpl-source-card__action::after,
.page--client-protection .cpb-cue::after {
  --cpw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  content: "";
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--cpw-arrow) center / contain no-repeat;
  mask: var(--cpw-arrow) center / contain no-repeat;
  font-family: inherit;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* the north-east mark means "this leaves the site", so it stays distinct */
.page--client-protection .cpl-register__act .cpl-link::after,
.page--client-protection .cpl-source-card[target="_blank"] .cpl-source-card__action::after {
  --cpw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
}

/* client-protection.css sets the character on the external variant with a
   more specific selector, which put a literal arrow INSIDE the drawn one.
   Matching its specificity clears the character and leaves the mark. */
.page--client-protection .cpl-sources .cpl-source-card[target="_blank"] .cpl-source-card__action::after {
  content: "";
}

/* the markup also carries a span arrow on the stepper action, which would
   be a second arrow on the same control */
.page--client-protection .cpl-action__arrow { display: none; }

/* -------------------------------------------------------- 2. hover -- */

.page--client-protection .cpl-journey__stage,
.page--client-protection .cpl-journey__stage:hover,
.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n),
.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n):hover {
  transform: none;
  box-shadow: none;
  transition: none;
}

/* ------------------------------------ 3. the stages: plates, no rail -- */

.page--client-protection .cpl-stepper-band .cpl-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.page--client-protection .cpl-stepper-band .cpl-journey::before { content: none; }

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) {
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 0;
  border-radius: 18px;
}

/* descending warmth carries the sequence where the rail used to */
.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(1) { background: var(--cpv-parchment); }
.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(2) { background: var(--cpv-sand-lift); }
.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(3) { background: var(--cpv-clay); }

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) .cpl-journey__badge {
  padding: 0;
  background: transparent;
}

/* --------------------------- 3b. source records: plates, no rules ---- */

.page--client-protection .cpl-sources .cpl-sources__grid {
  display: grid;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.page--client-protection .cpl-sources .cpl-source-card {
  padding: clamp(1.2rem, 2.2vw, 1.7rem) clamp(1.3rem, 2.4vw, 1.9rem);
  border: 0;
  border-radius: 16px;
  background: var(--cpv-sand-lift);
  transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* the quiet response: an accent bar grows from the left edge */
.page--client-protection .cpl-sources .cpl-source-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  right: auto;
  z-index: 0;
  width: 3px;
  height: auto;
  border-radius: 0 3px 3px 0;
  background: var(--cpv-ochre-lift);
  clip-path: none;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .page--client-protection .cpl-sources .cpl-source-card:hover::before { transform: scaleY(1); }
  .page--client-protection .cpl-sources .cpl-source-card:hover { background: var(--cpv-parchment); }
  .page--client-protection .cpl-sources .cpl-source-card:hover .cpl-source-card__action::after {
    transform: translateX(3px);
  }
}

/* ------------------------------- 3c. the honest note loses its rule --- */

.page--client-protection .cpl-meaning__note {
  padding: 0.9rem 1.15rem;
  border: 0;
  border-radius: 12px;
  background: rgb(248 243 234 / 8%);
}

@media (prefers-reduced-motion: reduce) {
  .page--client-protection .cpl-sources .cpl-source-card::before { transition: none; }
  .page--client-protection .cpl-register__act .cpl-link::after,
  .page--client-protection .cpl-stepper-band__act .cpl-action::after,
  .page--client-protection .cpl-source-card__action::after { transition: none; }
}

@media (max-width: 56em) {
  .page--client-protection .cpl-stepper-band .cpl-journey {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------- 4. the cover pair aligns --
   The staggered offset was my idea, not a requirement, and with real
   photographs in both slots it just reads as two plates that failed to
   line up. Measured: both plates are identical (613x662, slots 407x610);
   the only difference was a 54px margin-top on the second. Gone, and the
   pair now stretches to a matched height so the bottoms stay level even
   if one column's copy runs longer. */

.page--client-protection .cpl-meaning .cpl-meaning__grid {
  align-items: stretch;
}

.page--client-protection .cpl-meaning .cpl-meaning__grid .cpl-mcard:last-child {
  margin-top: 0;
}

/* ------------------------------ 5. the seam under the hero ------------
   Measured: the hero had padding-bottom 0, so the card's bottom edge at
   653px was exactly where the next band began - no separation at all.
   Worse, the hero's ground (#f3efe7) and that band (#ecdfc9) were two
   near-identical warm beiges butting together, which reads as an accident
   rather than a decision.

   The hero now sits in its own full-width ground with real room beneath
   it, and the records band changes to the site's mineral. Cool against
   warm, so the change of chapter is unmistakable, and it ties this page
   to the ground every other 2026 page floats on. */

.page--client-protection .cpl-hero {
  background: #f3efe7;
  padding-bottom: clamp(2.6rem, 5vw, 4.5rem);
}

.page--client-protection .cpl-section {
  background: #d9e5e5;
}

/* the warm sand frame inside the records band clashed with the cool
   ground, and it was the last surviving third level of boxing on the
   page. The two certificate plates now sit on the band directly. */
.page--client-protection .cpl-section .cpg-frame {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ------------------------------------ 6. the last white surfaces ------
   Audited every opaque background in main and the reception band. Five
   were still white or near-white:
     .cpb-contact-row  x3   the three route rows in the contact card
     .cpl-company__mark     the plate behind the Dukes logo
     .cpl-thumb__img  x2    a white fill sitting behind the certificate
                            scans while they load
   All tinted. The two left alone are the certificate scans themselves,
   which are photographs of white paper, and .cpl-thumb__badge, which
   belongs to the shared certificate lightbox used on seven pages. */

.page--client-protection .cpb-contact-card .cpb-contact-row {
  background: var(--cpv-parchment);
}

.page--client-protection .cpb-contact-card .cpb-contact-row + .cpb-contact-row {
  margin-top: 0.4rem;
}

.page--client-protection .cpl-company__mark {
  background: var(--cpv-parchment);
}

.page--client-protection .cpl-thumb__img,
.page--client-protection .cpl-cert__doc img {
  background: var(--cpv-parchment);
}

/* ======================================================================
 * 26 Aug 2026 phone pass (Aarav's live-site sweep): at phone widths the
 * source-record cards kept a desktop two-column grid, squeezing the
 * title and description into a ~100px strip beside a floating action.
 * One column on phones: title, description, then the action - each on
 * its own full-width line. Appended to the LAST-loaded page sheet so
 * every earlier layer's grid loses.
 * ==================================================================== */
@media (max-width: 47.99em) {
  .page--client-protection .cpl-sources .cpl-source-card,
  .page--client-protection .cpl-source-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }
  .page--client-protection .cpl-source-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    max-width: none;
  }
  .page--client-protection .cpl-source-card__body > * {
    width: 100%;
    max-width: none;
  }
}