/* ======================================================================
   DUKES - CLIENT PROTECTION - "cpv" colour, art and motion pass.
   20 August 2026.

   Aarav: "add some images, add some colours, don't use white, introduce
   new colours and layouts and new animations as well, new ideas, new
   image placeholders."

   NO WHITE. The quiet pass leaned on one cream (#fdfbf7) for every plate.
   Every plate on this page is now a tint, and each band's plate is a
   different one, so the surfaces carry colour instead of the bands doing
   all the work alone.

   NEW TO THIS PAGE
     forest    #1c4a3d   the complaints band, replacing stone
     clay      #e4d0c2   the source records band, replacing paper
     sage      #dde8e0   the plate on the navy band
     parchment #f3e8d4   the plate on forest, and the certificate plates
     ochre     #8f5c22   a second accent beside the existing maroon

   NEW LAYOUTS
     the two cover statements are separate plates, offset vertically
     the complaints stages hang off a rail that draws itself in
     the source records fill from the edge the pointer crossed

   NEW ART SLOTS (Aarav supplies all three)
     CP-COVER-FUNDS    3:2
     CP-COVER-REVIEW   3:2
     CP-CONTACT-DOOR   32:9
   ==================================================================== */

.page--client-protection {
  --cpv-forest: #1c4a3d;
  --cpv-forest-lift: #24594a;
  --cpv-clay: #e4d0c2;
  --cpv-sage: #dde8e0;
  --cpv-parchment: #f3e8d4;
  --cpv-parchment-warm: #f6ecd9;
  --cpv-sand-lift: #efe2c8;
  --cpv-ochre: #8f5c22;
  --cpv-ochre-lift: #c08a44;
  --cpv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================================================================== */
/* NO WHITE - every plate becomes a tint                                */
/* ==================================================================== */

.page--client-protection .cpl-card,
.page--client-protection .cpb-contact-card,
.page--client-protection .cpl-company__details {
  background: var(--cpv-parchment-warm);
}

/* the certificate itself is a document and keeps its own paper, so the
   plate around it is tinted rather than the scan */
.page--client-protection .cpl-thumb,
.page--client-protection .cpl-card__doc { background: transparent; }

/* ==================================================================== */
/* NEW BAND COLOURS                                                     */
/* ==================================================================== */

.page--client-protection .cpl-stepper-band { background: var(--cpv-forest); }
.page--client-protection .cpl-sources { background: var(--cpv-clay); }

/* the complaints band went dark, so its lockup goes light with it */
.page--client-protection .cpl-stepper-band__title { color: #f4efe6; }
.page--client-protection .cpl-stepper-band__intro { color: #cfe0d6; }

/* ==================================================================== */
/* ART SLOTS - the crown placeholder (Design Authority 4.1)             */
/* ==================================================================== */

.page--client-protection .cpv-slot {
  position: relative;
  display: block;
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
  aspect-ratio: var(--slot-ar, 3 / 2);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(158deg, rgb(81 53 56 / 10%) 0%, rgb(81 53 56 / 20%) 100%),
    var(--cpv-sand-lift);
  transition: transform 320ms var(--cpv-ease), box-shadow 320ms var(--cpv-ease);
}

.page--client-protection .cpv-slot__crown {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(84px, 30%, 150px);
  height: auto;
  opacity: 0.16;
}

.page--client-protection .cpv-slot__chip {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  max-width: calc(100% - 5.2rem);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--cpg-maroon);
  color: #f8f3ea;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.page--client-protection .cpv-slot__ratio {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgb(34 31 38 / 10%);
  color: #55505c;
  font-size: 0.8125rem;
  font-weight: 800;
}

.page--client-protection .cpv-slot--dark {
  background:
    linear-gradient(158deg, rgb(248 243 234 / 7%) 0%, rgb(248 243 234 / 13%) 100%),
    #3d2528;
}

.page--client-protection .cpv-slot--dark .cpv-slot__crown {
  opacity: 0.24;
  filter: brightness(2.3);
}

.page--client-protection .cpv-slot--dark .cpv-slot__chip {
  background: var(--cpv-parchment);
  color: #3d2528;
}

.page--client-protection .cpv-slot--dark .cpv-slot__ratio {
  background: rgb(248 243 234 / 14%);
  color: #ede2d5;
}

.page--client-protection .cpv-slot--strip {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  border-radius: 18px;
}

@media (hover: hover) {
  .page--client-protection .cpv-slot:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -26px rgb(28 26 30 / 70%);
  }
}

/* ==================================================================== */
/* COVER - two separate tinted plates, offset vertically                */
/* ==================================================================== */

.page--client-protection .cpl-meaning__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  padding: 0;
  border-radius: 0;
  background: transparent;
  align-items: start;
}

.page--client-protection .cpl-meaning__grid .cpl-mcard {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: 18px;
  background: var(--cpv-sage);
  border: 0;
}

.page--client-protection .cpl-meaning__grid .cpl-mcard:first-child {
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
}

/* the offset: the second plate drops, so the pair has a rhythm instead of
   sitting as two identical rectangles side by side */
.page--client-protection .cpl-meaning__grid .cpl-mcard:last-child {
  padding-right: clamp(1.1rem, 2vw, 1.6rem);
  border-left: 0;
  background: var(--cpv-parchment);
}

@media (min-width: 56em) {
  .page--client-protection .cpl-meaning__grid .cpl-mcard:last-child {
    margin-top: clamp(2rem, 4vw, 3.4rem);
  }
}

.page--client-protection .cpl-mcard__label { color: var(--cpv-ochre); }

.page--client-protection .cpl-meaning__grid .cpl-mcard:last-child .cpl-mcard__label {
  color: var(--cpg-maroon);
}

/* ==================================================================== */
/* COMPANY - a texture layer behind the plate, for depth without a box  */
/* ==================================================================== */

.page--client-protection .cpl-company {
  position: relative;
  overflow: hidden;
}

.page--client-protection .cpl-company::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(81 53 56 / 6%) 0 1px,
    transparent 1px 15px
  );
  mask-image: linear-gradient(to bottom right, #000, transparent 62%);
}

.page--client-protection .cpl-company > * { position: relative; z-index: 1; }

/* ==================================================================== */
/* COMPLAINTS - parchment plate on forest, stages hung off a rail       */
/* ==================================================================== */

.page--client-protection .cpl-journey {
  position: relative;
  background: var(--cpv-parchment);
  border-radius: 18px;
}

/* the rail: a line through the numerals that draws itself in on reveal */
@media (min-width: 56em) {
  .page--client-protection .cpl-journey::before {
    content: "";
    position: absolute;
    left: var(--cpq-plate-pad, 3rem);
    right: var(--cpq-plate-pad, 3rem);
    top: calc(var(--cpq-plate-pad, 3rem) + 0.62em);
    height: 2px;
    background: linear-gradient(90deg, var(--cpv-ochre-lift), rgb(192 138 68 / 25%));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--cpv-ease) 200ms;
  }

  .page--client-protection .cpl-stepper-band.is-in .cpl-journey::before {
    transform: scaleX(1);
  }
}

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) .cpl-journey__badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-right: 0.55rem;
  background: var(--cpv-parchment);
  color: var(--cpv-ochre);
}

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

.page--client-protection .cpg-frame .cpl-journey__stage:nth-child(n) .cpl-journey__route {
  color: var(--cpg-maroon);
}

.page--client-protection .cpl-stepper-band .cpl-action {
  background: var(--cpv-parchment);
  border-color: transparent;
}

@media (hover: hover) {
  .page--client-protection .cpl-stepper-band .cpl-action:hover {
    background: var(--cpv-ochre-lift);
    border-color: var(--cpv-ochre-lift);
    color: #22201c;
  }
}

/* ==================================================================== */
/* SOURCE RECORDS - sand plate on clay, rows fill from the pointer edge */
/* ==================================================================== */

.page--client-protection .cpl-sources__grid { background: var(--cpv-sand-lift); }

.page--client-protection .cpl-source-card {
  position: relative;
  isolation: isolate;
  padding-inline: clamp(0.8rem, 1.6vw, 1.2rem);
  border-radius: 12px;
}

.page--client-protection .cpl-source-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--cpv-parchment);
  clip-path: circle(0% at var(--wx, 50%) var(--wy, 50%));
  transition: clip-path 460ms var(--cpv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .page--client-protection .cpl-source-card:hover::before {
    clip-path: circle(140% at var(--wx, 50%) var(--wy, 50%));
  }
}

.page--client-protection .cpl-source-card__action { color: var(--cpv-ochre); }

/* ==================================================================== */
/* MOTION - reveal on entry                                             */
/* Armed by the module, so if the script never runs nothing is hidden.  */
/* ==================================================================== */

html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-meaning__head,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-mcard,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-meaning__note,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-company__brand,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-company__details,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-stepper-band__head,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-journey__stage,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-stepper-band__act,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-sources__head,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpl-source-card,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpb-contact__copy,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpb-contact__stack,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal] .cpv-slot--strip {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms var(--cpv-ease) calc(var(--i, 0) * 90ms),
    transform 620ms var(--cpv-ease) calc(var(--i, 0) * 90ms);
}

html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-meaning__head,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-mcard,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-meaning__note,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-company__brand,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-company__details,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-stepper-band__head,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-journey__stage,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-stepper-band__act,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-sources__head,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpl-source-card,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpb-contact__copy,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpb-contact__stack,
html[data-cpv-armed] .page--client-protection [data-cpv-reveal].is-in .cpv-slot--strip {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-cpv-armed] .page--client-protection [data-cpv-reveal] * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .page--client-protection .cpl-journey::before { transform: scaleX(1); transition: none; }
  .page--client-protection .cpl-source-card::before { transition: none; }
  .page--client-protection .cpv-slot { transition: none; }
}

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

@media (max-width: 56em) {
  .page--client-protection .cpl-meaning__grid { grid-template-columns: minmax(0, 1fr); }
  .page--client-protection .cpl-meaning__grid .cpl-mcard,
  .page--client-protection .cpl-meaning__grid .cpl-mcard:first-child {
    padding: clamp(1.1rem, 3vw, 1.6rem);
    border-top: 0;
  }
  .page--client-protection .cpv-slot--strip { --slot-ar: 3 / 2; }
}

/* The closing strip is the last child of the contact band's two-column
   grid, so without this it would take one column and read as a panel
   rather than as a band-width image. */
.page--client-protection .cpb-contact__inner .cpv-slot--strip {
  grid-column: 1 / -1;
}

/* Two labels landed just under the 4.5 minimum against the new tints:
   ochre on sage measured 4.49, and the routes label on the warm parchment
   plate measured 4.26. Both go one step darker. */
.page--client-protection { --cpv-ochre: #7d4f1c; }

.page--client-protection .cpb-contact-card__label { color: #7a4d3c; }