/* ==========================================================================
   CogniPrism heroes  —  v2.1
   Fifth companion file. Load after icons, surfaces, cards, and emphasis.

   Changed from v1: headline colour, CTA colour, Navy variants removed,
   dissolve and gradient heroes added, About and Contact added, the
   Organizational Stress Test entry removed (that page does not exist).

   Changed from v2: text-wrap balance switched off below 820px (section 11).
   ========================================================================== */

:root {
  --cp-hero-min: clamp(440px, 62vh, 660px);
  --cp-hero-img: 340px;
}

/* --------------------------------------------------------------------------
   1. Line breaking. Site-wide, not hero-only.
   Both degrade cleanly: a browser that does not know the value ignores the
   declaration and wraps normally.
   -------------------------------------------------------------------------- */

h1, h2, h3, .cp-hero__title { text-wrap: balance; }
p, li, .cp-hero__sub        { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   2. Shell
   No eyebrow, no lead-in label. Every hero opens on the headline, which means
   the prism section marker starts at the first section below the hero.
   -------------------------------------------------------------------------- */

.cp-hero {
  min-height: var(--cp-hero-min);
  display: flex;
  align-items: center;
  padding: 72px 0 64px;
}

/* Cerulean, not Navy. Cerulean is the documented structural lead and carries
   headings. It measures 3.43:1 on Champagne and 4.10:1 on Ivory, which clears
   the 3:1 large-text threshold at hero sizes. It does NOT clear it on Pale Oak
   Light (2.75:1), so a hero on Pale Oak takes Baltic instead. */
.cp-hero__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.026em;
  max-width: 16ch;
  margin: 0;
  color: var(--cp-cerulean);
}

.cp-hero__title--statement { font-size: clamp(32px, 5.2vw, 66px); max-width: 15ch; }
.cp-oak .cp-hero__title    { color: var(--cp-baltic); }

.cp-hero__sub {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--cp-slate);
  max-width: 52ch;
  margin: 22px 0 0;
  line-height: 1.48;
}

/* Accent word inside a headline. Magenta Deep on light at 4.51:1. */
.cp-hero__accent { color: var(--cp-magenta-deep); }

/* --------------------------------------------------------------------------
   3. CTA
   Cerulean fill with Ivory text measures 4.10:1, which clears the 3:1
   large-text threshold ONLY at 19px bold or larger.

   *** THE FONT SIZE IS LOAD-BEARING. Drop it to 16px and the button fails. ***

   align-self is also load-bearing: a flex column stretches its children, so
   without it the button spans the whole copy column at every width, not just
   on mobile. Removing it looks like a breakpoint bug and is not one.
   -------------------------------------------------------------------------- */

.cp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }

.cp-hero__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  padding: 15px 26px;
  min-height: 48px;              /* tap target floor */
  background: var(--cp-cerulean);
  color: var(--cp-ivory);
  font-weight: 700;
  font-size: 19px;               /* do not reduce; see above */
  text-decoration: none;
  border-radius: var(--cp-radius);
  transition: background .16s ease;
}
.cp-hero__cta:hover { background: var(--cp-baltic); }
.cp-hero__cta .cp-icon { transition: transform .2s ease; }
.cp-hero__cta:hover .cp-icon { transform: translateX(3px); }

/* On an accent section the button inverts. Robin Egg on Navy, Navy text. */
.cp-navy .cp-hero__cta { background: var(--cp-robin); color: var(--cp-navy); }
.cp-navy .cp-hero__cta:hover { background: var(--cp-ivory); }

/* --------------------------------------------------------------------------
   4. Image hero
   -------------------------------------------------------------------------- */

.cp-hero--image > .wrap {
  display: grid;
  grid-template-columns: 1fr var(--cp-hero-img);
  gap: 52px;
  align-items: center;
}

/* Image on the left. Used by About (ridge) and the Quiz (wave). */
.cp-hero--flip > .wrap { grid-template-columns: var(--cp-hero-img) 1fr; }

/* About runs a landscape frame, so its column is wider than the default. */
.cp-hero--wide { --cp-hero-img: 400px; }

/* --------------------------------------------------------------------------
   5. Gradient hero  —  Homepage
   Champagne into Ivory, under continuous grain. The section below picks up at
   Ivory grain, so the boundary disappears.

   The grain tile restarts at each section boundary. With random noise that is
   invisible, because any row meeting any other row is statistically identical.
   It would be very visible with a geometric pattern, so this seamless-blend
   move works with grain and plaster and NEVER with facet or the lattice.
   -------------------------------------------------------------------------- */

.cp-hero--gradient {
  background-color: var(--cp-ivory);
  background-image:
    url('../surfaces/textures/cp-texture-grain.webp'),
    linear-gradient(180deg, var(--cp-champagne), var(--cp-ivory));
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
}

/* --------------------------------------------------------------------------
   6. Dissolve hero  —  How We Work
   Title sits in the grain, body sits in the clean Ivory below it.

   Two layers moving together. The grain fades slightly AHEAD of the colour,
   which is what stops it looking like the texture leaked into the clean zone.
   The mask is on the pseudo-element, not the section: masking the section
   would fade the text along with it.
   -------------------------------------------------------------------------- */

.cp-hero--dissolve {
  position: relative;
  background: linear-gradient(180deg,
    var(--cp-champagne) 0%, var(--cp-champagne) 42%, var(--cp-ivory) 88%);
}

.cp-hero--dissolve::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../surfaces/textures/cp-texture-grain.webp');
  background-size: 160px 160px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 76%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 76%);
}

.cp-hero--dissolve > * { position: relative; z-index: 1; }

/* Tied to container height so the two blocks hold their own zones as the hero
   grows and shrinks. */
.cp-hero--dissolve .cp-hero__copy { gap: clamp(48px, 9vh, 92px); }
.cp-hero__body { font-size: clamp(16px, 1.5vw, 18px); color: var(--cp-slate); max-width: 56ch; margin: 0; }

/* --------------------------------------------------------------------------
   7. Scrim hero  —  Contact, For Individuals
   Two background layers, not an opacity property: opacity on the element
   would fade the text along with the image.

   Worst case is the darkest possible photograph. Under an 82% Ivory scrim
   that leaves rgb(206,205,204):

     Navy text      7.92:1   passes body copy
     Baltic text    4.85:1   passes body copy
     Cerulean text  2.70:1   FAILS even large text

   *** Scrim heroes take a BALTIC headline, not Cerulean. *** This is the one
   place the Cerulean-carries-headings rule cannot hold, and Baltic holds
   regardless of which photograph gets chosen.

   Slate would give more headroom at 8.44, and is the wrong choice. Slate is
   the text neutral: a Slate headline reads as body copy made large, which
   differentiates by size alone. Baltic is a brand blue in the same family as
   Cerulean, so the headline still reads as a heading. Once past the 3:1
   threshold, extra contrast buys nothing and costs colour identity.

   *** Subheadlines on a scrim take SLATE, not Baltic. *** A 20px regular
   subheadline is not large text, so it needs 4.5:1. Baltic measures 3.88
   against the Champagne scrim worst case and fails. Slate measures 6.75.
   Headline and subheadline take different colours here, on purpose.
   -------------------------------------------------------------------------- */

.cp-hero--scrim {
  background-image:
    linear-gradient(rgba(251, 250, 249, .82), rgba(251, 250, 249, .82)),
    var(--cp-hero-photo);
  background-size: auto, cover;
  background-position: center, center;
}

.cp-hero--scrim .cp-hero__title,
.cp-hero--scrim-champagne .cp-hero__title { color: var(--cp-baltic); }

.cp-hero--scrim .cp-hero__sub,
.cp-hero--scrim .cp-hero__body,
.cp-hero--scrim-champagne .cp-hero__sub,
.cp-hero--scrim-champagne .cp-hero__body { color: var(--cp-slate); }

/* Champagne scrim, for B2C. Same rule on the headline. */
.cp-hero--scrim-champagne {
  background-image:
    linear-gradient(rgba(240, 229, 211, .80), rgba(240, 229, 211, .80)),
    var(--cp-hero-photo);
  background-size: auto, cover;
  background-position: center, center;
}

/* background-size: cover crops from the centre, so a subject near an edge
   disappears at narrow widths. If the photograph has a focal point, override
   background-position on the second layer. */

/* --------------------------------------------------------------------------
   8. Logo strip
   Runs the SAME surface as the hero above it. Same canvas with a different
   texture reads as a rendering fault, and two different textures adjacent
   reads wrong even when the canvas changes.
   -------------------------------------------------------------------------- */

.cp-logostrip { padding: 26px 0 30px; }
.cp-logostrip__row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.cp-logostrip__label {
  font-family: 'Alegreya Sans SC', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--cp-baltic);
  width: 100%;
  margin: 0 0 4px;
}

/* --------------------------------------------------------------------------
   9. After-fold block  —  Homepage
   Hook and CTA sit above the fold. The italic lead and body are the first
   thing met on scroll. Runs Ivory grain, continuous with the hero's landing.
   -------------------------------------------------------------------------- */

.cp-afterfold { padding: 24px 0 56px; }
.cp-afterfold__lead {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.38;
  letter-spacing: -.012em;
  max-width: 34ch;
  margin: 0;
  color: var(--cp-slate);
}
.cp-afterfold__body { font-size: 17px; color: var(--cp-slate); max-width: 52ch; margin: 26px 0 0; }

/* --------------------------------------------------------------------------
   10. Cycling word  —  Speaking & Training
   CSS only. Words: strain, retention, engagement, performance, burnout.
   Two negative, two positive, one neutral. "performance" is the longest at
   eleven characters and sets the locked slot width.
   -------------------------------------------------------------------------- */

.cp-cycle { display: inline-grid; vertical-align: baseline; color: var(--cp-magenta-deep); }

.cp-cycle > span {
  grid-area: 1 / 1;
  opacity: 0;
  white-space: nowrap;
  animation: cp-cycle 12s infinite;
}

@keyframes cp-cycle {
  0%,  1%  { opacity: 0; transform: translateY(.16em); }
  3%,  17% { opacity: 1; transform: none; }
  20%, 100%{ opacity: 0; transform: translateY(-.16em); }
}

.cp-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cp-cycle > span { animation: none; opacity: 0; }
     .cp-cycle > .cp-sr + span,
   .cp-cycle > span:first-child:not(.cp-sr) { opacity: 1; }
}

/* --------------------------------------------------------------------------
   11. Breakpoints
   Two, not one. 820px is where the copy column drops under 380px and headlines
   start breaking badly. The full-width CTA and the cycling word on its own
   line are phone treatments: on a tablet the button stays a button.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  /* Balance off below 820. Balance evens line lengths, which on a narrow
     screen holds a heading inside a narrower box than the prose beneath it
     and reads as a formatting error. Long headings should fill their lines
     here and reach the same right edge as the body copy.
     Note: the valid values are wrap, nowrap, balance, pretty and stable.
     text-wrap: normal is discarded silently. */
  h1, h2, h3, .cp-hero__title { text-wrap: wrap; }

  .cp-hero { min-height: auto; padding: 48px 0 44px; }
  .cp-hero--image > .wrap,
  .cp-hero--flip > .wrap { grid-template-columns: 1fr; gap: 30px; }
  .cp-hero__title,
  .cp-hero__title--statement { font-size: clamp(29px, 6.4vw, 42px); max-width: none; }
  .cp-hero__copy { order: 1; }
  .cp-hero__media { order: 2; max-width: 300px; margin: 0 auto; }
  .cp-hero--wide .cp-hero__media { max-width: 100%; }
  .cp-hero--dissolve .cp-hero__copy { gap: 34px; }
}

@media (max-width: 560px) {
  .cp-hero__cta { width: 100%; justify-content: center; align-self: stretch; }
  .cp-cycle { display: grid; justify-items: start; margin-top: .06em; }
  .cp-hero__media { max-width: 250px; }
  .cp-logostrip__row { gap: 20px; }
}