/* ======================================================================
   DUKES - CLIENT PROTECTION - "cpq" quiet pass, 20 August 2026.
   Everything from "What this protection means for you" downwards.

   Aarav: "we are redesigning the whole page from down below... get rid of
   every image there, and we are designing it to a more professional look,
   but nothing that looks AI, and never putting too much information
   together."

   WHAT WAS MAKING IT BUSY. The region nested four levels of boxing:
   band -> container -> frame -> card -> icon lozenge. Every unit had its
   own fill, its own border and its own radius, so nothing had any air and
   every block competed with its neighbour.

   THE FIX. ONE plate per band. Inside it the content is divided by
   hairlines and by space, the way a set document is, not by more boxes.
   The icon-in-a-rounded-square treatment is gone entirely: it is the
   single most template-looking device on a page, and this page has real
   evidence to show instead.

   The full-bleed bands from the cpg pass stay, so nothing floats. This
   layer only removes chrome and adds air.
   ==================================================================== */

.page--client-protection {
  --cpq-gap: clamp(2rem, 4vw, 3.6rem);
  --cpq-plate-pad: clamp(1.6rem, 3.2vw, 3rem);
  --cpq-rule: rgb(34 31 38 / 12%);
  --cpq-rule-dark: rgb(253 251 247 / 18%);
}

/* Bands from here down get noticeably more air than the records band. */
.page--client-protection .cpl-meaning,
.page--client-protection .cpl-company,
.page--client-protection .cpl-stepper-band,
.page--client-protection .cpl-sources,
.page--client-protection .cpb-contact {
  padding-block: clamp(3.4rem, 6.5vw, 6rem);
}

/* The cpg frame was the third level of boxing. From here down the inner
   plate carries the surface, so the frame stands down to a plain wrapper. */
.page--client-protection .cpl-meaning .cpg-frame,
.page--client-protection .cpl-stepper-band .cpg-frame,
.page--client-protection .cpl-sources .cpg-frame {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* One heading treatment for the whole region: nothing shouty, and the
   intro sits on a short measure so it never runs the full band width. */
.page--client-protection .cpl-meaning__title,
.page--client-protection .cpl-stepper-band__title,
.page--client-protection .cpl-sources__title,
.page--client-protection .cpb-contact__title {
  max-width: 18ch;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.12;
}

.page--client-protection .cpl-stepper-band__intro,
.page--client-protection .cpl-sources__intro {
  max-width: 46ch;
  margin-bottom: var(--cpq-gap);
}

.page--client-protection .cpl-meaning__head { margin-bottom: var(--cpq-gap); }
.page--client-protection .cpl-sources__head { max-width: none; }

/* ==================================================================== */
/* WHAT THIS PROTECTION MEANS - one cream plate, two statements, one     */
/* hairline between them. No cards, no icons.                            */
/* ==================================================================== */

.page--client-protection .cpl-meaning__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: var(--cpq-plate-pad);
  border-radius: 18px;
  background: var(--cpg-cream);
}

.page--client-protection .cpl-meaning__grid .cpl-mcard {
  display: block;
  padding: 0 clamp(1.4rem, 2.6vw, 2.6rem);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.page--client-protection .cpl-meaning__grid .cpl-mcard:first-child { padding-left: 0; }

.page--client-protection .cpl-meaning__grid .cpl-mcard:last-child {
  padding-right: 0;
  border-left: 1px solid var(--cpq-rule);
}

.page--client-protection .cpl-mcard__label {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.page--client-protection .cpl-mcard__lead {
  margin: 0 0 0.85rem;
  max-width: 16ch;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.12;
}

.page--client-protection .cpl-mcard__copy {
  margin: 0;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.7;
}

.page--client-protection .cpl-meaning__note {
  margin-top: var(--cpq-gap);
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--cpg-tan);
  border-radius: 0;
  background: transparent;
  font-size: 0.875rem;
}

/* ==================================================================== */
/* THE COMPANY - the split plate keeps its shape, both halves get air    */
/* ==================================================================== */

.page--client-protection .cpl-company__brand,
.page--client-protection .cpl-company__details {
  padding: var(--cpq-plate-pad);
}

.page--client-protection .cpl-company__title { max-width: 12ch; }

.page--client-protection .cpl-company__statement {
  max-width: 40ch;
  line-height: 1.7;
}

.page--client-protection .cpl-company__values { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

.page--client-protection .cpl-company__values li { padding-block: 0.85rem; }

.page--client-protection .cpl-company__details-title { margin-bottom: 1.4rem; }

/* the ledger gets row height instead of being packed */
.page--client-protection .cpl-register > div { padding-block: 0.95rem; }

/* ==================================================================== */
/* IF SOMETHING GOES WRONG - one cream plate, three stages, two rules    */
/* ==================================================================== */

.page--client-protection .cpl-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: var(--cpq-plate-pad);
  border-radius: 18px;
  background: var(--cpg-cream);
}

/* the rail belonged to the card treatment; the rules do that job now */
.page--client-protection .cpl-journey::before { content: none; }

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) {
  padding: 0 clamp(1.4rem, 2.6vw, 2.6rem);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--cpq-rule);
  border-radius: 0;
}

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(1) {
  padding-left: 0;
  border-left: 0;
}

.page--client-protection .cpl-journey__track {
  display: block;
  margin-bottom: 1.1rem;
}

/* A serif numeral reads as a stage in a sequence. A filled circle reads
   as a template badge, which is the look Aarav is calling AI. */
.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) .cpl-journey__badge {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 0.55rem;
  border-radius: 0;
  background: transparent;
  color: var(--cpg-maroon);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
}

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) .cpl-journey__route {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.page--client-protection .cpl-journey__title {
  margin: 0 0 0.7rem;
  max-width: 18ch;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.16;
}

.page--client-protection .cpl-journey__copy {
  max-width: 40ch;
  line-height: 1.7;
}

.page--client-protection .cpl-stepper-band__act { margin-top: var(--cpq-gap); }

/* ==================================================================== */
/* THE SOURCE RECORDS - one cream plate, three ruled rows                */
/* Three cards side by side put a title, a description and an action     */
/* into every column at once. As rows each record gets one line.         */
/* ==================================================================== */

.page--client-protection .cpl-sources__grid {
  display: block;
  padding: clamp(0.6rem, 1.6vw, 1.4rem) var(--cpq-plate-pad);
  border-radius: 18px;
  background: var(--cpg-cream);
}

.page--client-protection .cpl-source-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cpq-rule);
  border-radius: 0;
}

.page--client-protection .cpl-sources__grid .cpl-source-card:first-of-type {
  border-top: 0;
}

.page--client-protection .cpl-source-card__body {
  display: grid;
  gap: 0.3rem;
}

.page--client-protection .cpl-source-card__body strong {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}

.page--client-protection .cpl-source-card__body > span {
  max-width: 58ch;
}

.page--client-protection .cpl-source-card__action {
  min-height: 44px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

@media (hover: hover) {
  .page--client-protection .cpl-source-card:hover {
    transform: none;
    border-color: var(--cpq-rule);
  }
  .page--client-protection .cpl-source-card:hover .cpl-source-card__body strong {
    color: var(--cpg-maroon);
  }
}

/* ==================================================================== */
/* ASK DUKES + THE ASSISTANT BAND                                        */
/* ==================================================================== */

.page--client-protection .cpb-contact__text { max-width: 42ch; line-height: 1.7; }

.page--client-protection .cpb-contact-card { padding: clamp(1rem, 2vw, 1.5rem); }

.page--client-protection .reception__notice { max-width: 46ch; line-height: 1.7; }

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

@media (max-width: 56em) {
  .page--client-protection .cpl-meaning__grid,
  .page--client-protection .cpl-journey {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--client-protection .cpl-meaning__grid .cpl-mcard,
  .page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) {
    padding: clamp(1.4rem, 3vw, 2rem) 0;
    border-left: 0;
    border-top: 1px solid var(--cpq-rule);
  }
  .page--client-protection .cpl-meaning__grid .cpl-mcard:first-child,
  .page--client-protection .cpg-frame .cpl-journey__stage:nth-child(1) {
    padding-top: 0;
    border-top: 0;
  }
  .page--client-protection .cpl-source-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
}

/* ==================================================================== */
/* SOURCE ROW REPAIRS                                                   */
/* Two things were wrong once the cards became rows:                    */
/*  1. the cpg layer left min-height:100% on the card, which against a  */
/*     block parent inflated every row to ~270px of dead space;          */
/*  2. the action link is a CHILD of the body, not a sibling, so the     */
/*     row-level two-column grid had nothing to put in column two and    */
/*     the link stacked under the description as a bordered box.         */
/* The body itself becomes the grid, and the link becomes a text link.  */
/* ==================================================================== */

.page--client-protection .cpl-sources__grid .cpl-source-card {
  display: block;
  min-height: 0;
}

.page--client-protection .cpl-source-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0.3rem;
}

.page--client-protection .cpl-source-card__body strong { grid-column: 1; grid-row: 1; }

.page--client-protection .cpl-source-card__body > span:not(.cpl-source-card__action) {
  grid-column: 1;
  grid-row: 2;
}

.page--client-protection .cpl-source-card__action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* the cover statements were capped tighter than the plate they sit in,
   leaving the right third of the plate empty */
.page--client-protection .cpl-mcard__lead { max-width: 22ch; }
.page--client-protection .cpl-mcard__copy { max-width: 52ch; }