/* ==========================================================================
   CogniPrism card system  —  v2.1
   Third companion file. Load after icons and surfaces.

   Changed from v1: colour roles corrected throughout. Four contrast failures
   fixed. Geometry, spacing, radius, shadow, and chamfer are unchanged.

   Changed from v2 (11/2026): card titles moved from 19px semibold Cerulean
   to 22px bold Baltic. At 19px over 17px body text, size barely separated
   them, and Cerulean is lighter in value than the Slate body copy, so titles
   read weaker than the paragraphs under them. Baltic clears body-text
   contrast (7.37 Ivory). Page blocks that set their own titles (How We Work
   Section 4) are more specific and keep their own sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE COLOUR MAP, and why each job takes the colour it does.

     Headings, large text        Cerulean   4.10 Ivory / 3.43 Champagne
                                            Clears 3:1. Fails at body size.
     Card titles                 Baltic     7.37 / 6.17
                                            Titles sit directly over body copy,
                                            so they need more weight than size
                                            alone gives them.
     Links and small text        Baltic     7.37 / 6.17
                                            Cerulean cannot do this job.
     Body copy                   Slate      12.85 / 10.75
     Eyebrows and accent rules   Robin Egg Deep #257074   5.52 / 4.62
                                            Base Robin Egg is 1.87 on Ivory
                                            and fails as text or as a graphic.
     On accent sections          Robin Egg base  6.46 on Navy

   The one that catches people: Cerulean is the documented headings colour and
   cannot be a link colour. Large text needs 3:1, body text needs 4.5:1, and
   Cerulean sits between them at 4.10.
   -------------------------------------------------------------------------- */

:root {
  --cp-radius: 2px;
  --cp-card-pad: 24px;
  --cp-card-pad-simple: 20px;
  --cp-shadow: 0 8px 24px -6px rgba(7, 53, 91, .24);
  --cp-chamfer: 22px;
}

/* --------------------------------------------------------------------------
   1. The spine
   -------------------------------------------------------------------------- */

.cp-card {
  display: flex;
  flex-direction: column;
  height: 100%;                        /* equal heights across a row */
  padding: var(--cp-card-pad);
  background-color: var(--cp-ivory);
  background-repeat: repeat;
  border-radius: var(--cp-radius);
}

.cp-card--simple { padding: var(--cp-card-pad-simple); }
.cp-card--simple .cp-card__title { font-size: 19px; }

/* --------------------------------------------------------------------------
   2. Distinction
   Three approved pairings, one texture per viewport:
     A  section plaster   card plain   no top rule
     B  section plain     card facet   top rule
     C  section grain     card plain   top rule
   -------------------------------------------------------------------------- */

.cp-card--facet {
  background-image: url('../surfaces/patterns/cp-pattern-facet.svg');
  background-size: 40px 40px;
}

.cp-card--rule   { border-top: 4px solid var(--cp-cerulean); }
.cp-card--shadow { box-shadow: var(--cp-shadow); }

/* Offset, not symmetrical. A symmetrical glow reads as a material-design card;
   an offset shadow reads as an object with light above it. */

/* --------------------------------------------------------------------------
   3. Chamfer
   Bottom right, 45 degrees, one moment per page. clip-path replaces the
   element's shape, so it kills box-shadow and border-radius: the shadow moves
   to a wrapper and the other three corners render square.
   -------------------------------------------------------------------------- */

.cp-chamfer-wrap { filter: drop-shadow(0 8px 16px rgba(7, 53, 91, .22)); }

.cp-chamfer {
  border-radius: 0;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cp-chamfer)),
    calc(100% - var(--cp-chamfer)) 100%,
    0 100%
  );
}

/* --------------------------------------------------------------------------
   4. Card contents
   -------------------------------------------------------------------------- */

/* Robin Egg Deep, not base. Base measures 1.87:1 on Ivory: at 11px that is a
   text contrast failure, not a stylistic choice. */
.cp-card__eyebrow {
  font-family: 'Alegreya Sans SC', serif;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--cp-robin-mid);
  margin: 0 0 3px;
}

/* Baltic, bold, 22px (v2.1). See the header note for why Cerulean 19px
   semibold was retired here. */
.cp-card__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 10px;
  color: var(--cp-baltic);
}

.cp-card__quote {
  font-size: 17.5px;
  font-style: italic;
  color: var(--cp-slate);
  margin: 0 0 12px;
  padding-left: 13px;
  border-left: 2px solid var(--cp-robin-mid);
}

.cp-card__body  { font-size: 17px;   color: var(--cp-slate); margin: 0 0 12px; }
.cp-card__leave { font-size: 17px;   color: var(--cp-slate); margin: 0 0 16px; }

.cp-card__leave strong {
  display: block;
  font-family: 'Alegreya Sans SC', serif;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--cp-baltic);
  margin-bottom: 3px;
}

/* Baltic, not Cerulean. This is a 14.5px link: Cerulean is 4.10:1 and body
   text needs 4.5:1. Cerulean cannot carry links at any body size. */
.cp-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cp-baltic);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: color .15s ease;
}
.cp-card__cta:hover { color: var(--cp-slate); }
.cp-card__cta .cp-icon { transition: transform .2s ease; }
.cp-card__cta:hover .cp-icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. On accent sections
   Base Robin Egg works here and nowhere on light canvases.
   -------------------------------------------------------------------------- */

.cp-accent-navy   .cp-card__eyebrow,
.cp-accent-baltic .cp-card__eyebrow { color: var(--cp-robin); }
.cp-accent-navy   .cp-card__cta,
.cp-accent-baltic .cp-card__cta     { color: var(--cp-robin); }
.cp-accent-navy   .cp-card__cta:hover,
.cp-accent-baltic .cp-card__cta:hover { color: var(--cp-ivory); }

/* --------------------------------------------------------------------------
   6. Grids
   -------------------------------------------------------------------------- */

.cp-cards      { display: grid; gap: 20px; align-items: stretch; }
.cp-cards--2   { grid-template-columns: repeat(2, 1fr); }
.cp-cards--3   { grid-template-columns: repeat(3, 1fr); }
.cp-cards--4   { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-cards--7   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cp-cards--stepped { grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.cp-cards--stepped > :nth-child(1) { margin-top: 72px; }
.cp-cards--stepped > :nth-child(2) { margin-top: 48px; }
.cp-cards--stepped > :nth-child(3) { margin-top: 24px; }

/* Four across needs roughly 330px per card. Below about 280px the quote is the
   first thing to break, and the fix is shortening the quote. */

/* --------------------------------------------------------------------------
   7. Price strip
   After the cards, never before. A lead-in anchors the reader on the lowest
   figure before they know what any tier contains.
   -------------------------------------------------------------------------- */

.cp-pricestrip {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--cp-ivory);
  border-left: 3px solid var(--cp-robin-mid);
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
  border-radius: var(--cp-radius);
}
.cp-pricestrip p { margin: 0; }
.cp-pricestrip__label {
  font-family: 'Alegreya Sans SC', serif;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--cp-baltic);
}
.cp-pricestrip__value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--cp-slate);
}

/* --------------------------------------------------------------------------
   8. Callouts
   Deliberately not cards. The primary has no fill, so it reads as an aside
   rather than a fifth option.

   The Navy callout does NOT count against a page's accent budget. A page whose
   accent is Cerulean can still carry one.
   -------------------------------------------------------------------------- */

.cp-callout { position: relative; border-radius: var(--cp-radius); }
.cp-callout p { max-width: none; color: var(--cp-slate); font-size: 17px; margin: 0 0 12px; }

.cp-callout--bracket {
  padding: 20px 24px 20px 28px;
  border-left: 2px solid var(--cp-cerulean);
  border-radius: 0;
}
.cp-callout--bracket::before,
.cp-callout--bracket::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  background: var(--cp-cerulean);
  z-index: 1;
}
.cp-callout--bracket::before { top: 0; width: 170px; }
.cp-callout--bracket::after  { bottom: 0; width: 57px; }

/* z-index 2 is load-bearing. ::after generates as the last child, so without
   it the bottom arm paints over its own node while the top node sits above
   ::before. Same coordinates, opposite stacking. */
.cp-callout__node {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cp-robin-mid);
  z-index: 2;
}
.cp-callout__node--top    { left: 164.5px; top: -4.5px; }
.cp-callout__node--bottom { left: 51.5px; bottom: -4.5px; }

/* Every corner rule must match or beat the base selector's specificity, or the
   `border` shorthand below wins and all four render as closed squares. */
.cp-callout--corners { padding: 28px 30px; }
.cp-callout--corners span.cp-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cp-cerulean);
}
.cp-callout--corners span.cp-corner--tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.cp-callout--corners span.cp-corner--tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.cp-callout--corners span.cp-corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.cp-callout--corners span.cp-corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.cp-callout--navy {
  background: var(--cp-navy);
  color: #C6DCE9;
  padding: 30px 32px;
}
.cp-callout--navy h3 { color: var(--cp-robin); }
.cp-callout--navy p  { color: #C6DCE9; }
.cp-callout--navy .cp-card__cta { color: var(--cp-robin); }
.cp-callout--navy .cp-card__cta:hover { color: var(--cp-ivory); }
.cp-callout--navy.cp-chamfer { --cp-chamfer: 28px; }

/* --------------------------------------------------------------------------
   9. Selector, for the 7S model page
   -------------------------------------------------------------------------- */

.cp-selector {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 26px;
  align-items: start;
}

.cp-selector__tabs { display: flex; flex-direction: column; gap: 8px; }

.cp-selector__tab {
  display: flex;
  align-items: center;
  gap: 13px;
  background: none;
  border: 0;
  padding: 7px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  border-radius: var(--cp-radius);
  transition: background .16s ease;
}
.cp-selector__tab:hover { background: rgba(66, 129, 164, .07); }
.cp-selector__tab:focus-visible { outline: 2px solid var(--cp-robin-mid); outline-offset: 2px; }

.cp-selector__chip {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 26px;
  background: var(--cp-champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-cerulean);
  transition: background .16s ease, color .16s ease;
}
.cp-selector__tab[aria-selected="true"] .cp-selector__chip {
  background: var(--cp-navy);
  color: var(--cp-ivory);
}

/* Slate, not Cerulean. 16px semibold is not large text, so it needs 4.5:1
   and Cerulean is 4.10. */
.cp-selector__label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--cp-slate);
}
.cp-selector__tab[aria-selected="true"] .cp-selector__label { color: var(--cp-cerulean); }

.cp-selector__panel {
  display: none;
  padding: 30px;
  background-color: var(--cp-ivory);
  background-image: url('../surfaces/patterns/cp-pattern-facet.svg');
  background-size: 40px 40px;
  box-shadow: var(--cp-shadow);
  border-top: 4px solid var(--cp-cerulean);
  border-radius: var(--cp-radius);
}
.cp-selector__panel.is-on { display: block; animation: cp-fade .3s ease; }

@keyframes cp-fade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.cp-selector__mark { color: var(--cp-cerulean); display: block; margin-bottom: 12px; }

.cp-selector__hint {
  font-family: 'Alegreya Sans SC', serif;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--cp-baltic);
  margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cp-cards--4, .cp-cards--stepped { grid-template-columns: repeat(2, 1fr); }
  .cp-cards--stepped > * { margin-top: 0; }
}

@media (max-width: 960px) {
  .cp-selector { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .cp-cards--2, .cp-cards--3, .cp-cards--4, .cp-cards--stepped {
    grid-template-columns: 1fr;
  }
  .cp-callout--bracket::before { width: 120px; }
  .cp-callout__node--top { left: 114.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-selector__panel.is-on { animation: none; }
  .cp-card__cta .cp-icon { transition: none; }
}