/* ==========================================================================
   Credence Advisors — site stylesheet
   Brand: Josefin Sans (headings) · Poppins (Gilroy substitute, body)
   Dark Blue #005FAB · Sky Blue #009FE3 · Light Green #7ABF3D · Dark Grey #47575D
   ========================================================================== */

:root {
  --blue-dark:  #005FAB;
  --blue-sky:   #009FE3;
  --green:      #7ABF3D;
  --grey-dark:  #47575D;
  --grey-light: #CFD1D2;
  --yellow:     #F6E80D;

  --ink:        #1B2A33;
  --ink-soft:   #47575D;
  --ink-faint:  #75858E;
  --paper:      #FFFFFF;
  --paper-sunk: #F4F7F9;
  --rule:       #DDE4E9;

  --gradient:   linear-gradient(135deg, #009FE3 0%, #005FAB 100%);

  --display: 'Josefin Sans', 'Jost', system-ui, sans-serif;
  --body:    'Poppins', 'Montserrat', system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.shell { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 700; }
h2 { font-size: clamp(27px, 3.6vw, 42px); }
h3 { font-size: clamp(19px, 2vw, 23px); }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }

a { color: var(--blue-dark); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue-sky); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin: 0 0 18px;
}
.eyebrow.on-blue { color: var(--green); }
.lede { font-size: clamp(17px, 1.7vw, 19.5px); line-height: 1.62; max-width: 62ch; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 16px 26px;
  border: 1.5px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--blue-dark); color: #fff; }
.btn-primary:hover { background: #004E8C; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--blue-dark); color: var(--blue-dark); }
.btn-on-blue { background: #fff; color: var(--blue-dark); }
.btn-on-blue:hover { background: #EAF6FD; }
.btn-ghost-on-blue { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost-on-blue:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.brand img { display: block; height: 50px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--blue-dark); border-bottom-color: var(--green); }
.nav .btn { display: none; }   /* desktop uses .header-cta; this one is for the mobile drawer */

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--blue-dark); margin: 4px 0; }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 22px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav .btn { display: inline-flex; margin-top: 14px; justify-content: center; border-bottom: none; color: #fff; }
  .header-cta { display: none; }
}

/* ---------- hero ---------- */

.hero { padding: clamp(52px, 8vw, 92px) 0 clamp(44px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.hero-note { font-size: 14px; color: var(--ink-faint); margin-top: 20px; max-width: 46ch; }

.hero-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--gradient);
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  overflow: hidden;
}
.hero-figure::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px);
}
.hero-figure figcaption {
  position: relative; z-index: 1;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  border-left: 3px solid var(--green);
  padding-left: 14px;
}
.placeholder-tag {
  position: absolute; top: 18px; left: 18px; z-index: 1;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,0,0,.28); color: #fff; padding: 6px 10px; border-radius: 2px;
}

/* ---------- proof strip ---------- */

.proof { background: var(--paper-sunk); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
}
.proof-item { padding: 30px 24px 28px; border-right: 1px solid var(--rule); }
.proof-item:last-child { border-right: none; }
@media (max-width: 780px) {
  .proof-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .proof-item:last-child { border-bottom: none; }
}
.proof-num {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 9px;
}
.proof-lbl { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); display: block; }

/* ---------- generic section ---------- */

.band { padding: clamp(56px, 8vw, 104px) 0; }
.band-sunk { background: var(--paper-sunk); }
.band-blue { background: var(--gradient); color: rgba(255,255,255,.88); }
.band-blue h2, .band-blue h3 { color: #fff; }
.band-blue strong { color: #fff; }

.band-head { max-width: 66ch; margin-bottom: clamp(34px, 4vw, 52px); }
.band-head h2 { margin-bottom: 18px; }

/* ---------- three doors ---------- */

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }

.door {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--blue-dark);
  border-radius: 3px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}
.door:nth-child(2) { border-top-color: var(--blue-sky); }
.door:nth-child(3) { border-top-color: var(--green); }
.door-who {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 10px;
}
.door h3 { margin-bottom: 14px; }
.door p { font-size: 15px; }
.door ul { list-style: none; margin: 4px 0 22px; padding: 0; font-size: 14.5px; }
.door li { position: relative; padding-left: 22px; margin-bottom: 9px; line-height: 1.5; }
.door li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; background: var(--green); border-radius: 1px;
}
.door .door-cta { margin-top: auto; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.door .door-cta:hover { text-decoration: underline; }

/* ---------- process ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.steps li {
  counter-increment: st;
  background: #fff;
  padding: 22px 26px 22px 78px;
  position: relative;
}
.steps li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 26px; top: 22px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--blue-sky);
  font-variant-numeric: tabular-nums;
}
.steps b { display: block; font-weight: 600; color: var(--ink); font-size: 16.5px; margin-bottom: 3px; }
.steps span { font-size: 14.8px; line-height: 1.6; }

/* ---------- case study ---------- */

.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

.case-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.25); margin: 26px 0 28px; }
.case-figures div { background: transparent; padding: 18px 4px 16px; }
.case-figures .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 34px);
  color: #fff; display: block; line-height: 1; margin-bottom: 7px;
}
.case-figures .l { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.8); display: block; }

.pull {
  border-left: 3px solid var(--green);
  padding-left: 22px;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  font-weight: 300;
  color: #fff;
  font-family: var(--display);
}

/* ---------- founder ---------- */

.founder-grid { display: grid; grid-template-columns: 380px 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; } }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--grey-light);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey-dark);
  font-size: 13px; text-align: center; padding: 20px;
}
.signature { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.signature span { display: block; font-family: var(--body); font-size: 13.5px; font-weight: 300; color: var(--ink-faint); letter-spacing: .02em; }

/* ---------- insights ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 26px 24px;
  display: flex; flex-direction: column;
}
.card .kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 12px; }
.card h3 { font-size: 19px; margin-bottom: 12px; }
.card p { font-size: 14.8px; }
.card a { margin-top: auto; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* ---------- closing CTA ---------- */

.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-list { list-style: none; margin: 0; padding: 0; }
.cta-list li { position: relative; padding-left: 26px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.55; }
.cta-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}

/* ---------- footer ---------- */

.site-footer { background: #16242D; color: rgba(255,255,255,.72); padding: clamp(48px, 6vw, 72px) 0 0; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 44px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer img.footer-logo { height: 46px; width: auto; display: block; margin-bottom: 18px; }
.site-footer h2 {
  font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; line-height: 1.5; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-tagline { color: var(--green); font-family: var(--display); font-size: 16px; font-weight: 600; margin-top: 14px; }

.subscribe { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.subscribe input {
  flex: 1 1 160px; min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  color: #fff;
  font-family: var(--body); font-size: 14px; font-weight: 300;
  padding: 12px 14px;
}
.subscribe input::placeholder { color: rgba(255,255,255,.45); }
.subscribe button {
  background: var(--green); color: #10202A; border: none; border-radius: 3px;
  font-family: var(--body); font-size: 14px; font-weight: 600; padding: 12px 18px; cursor: pointer;
}
.subscribe button:hover { background: #6BAD32; }

.footer-base {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.5);
}

/* ---------- sticky mobile action bar ---------- */

.action-bar { display: none; }
@media (max-width: 720px) {
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fff; border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 18px rgba(22,36,45,.1);
  }
  .action-bar a {
    padding: 13px 6px; text-align: center; text-decoration: none;
    font-size: 12.5px; font-weight: 500; color: var(--ink);
    border-right: 1px solid var(--rule); line-height: 1.3;
  }
  .action-bar a:last-child { border-right: none; background: var(--blue-dark); color: #fff; }
  body { padding-bottom: 54px; }
}

/* ---------- draft marker (remove before launch) ---------- */

.draft-note {
  background: #FFF8DC;
  border-bottom: 1px solid #E8D98A;
  color: #6B5A12;
  font-size: 13px;
  padding: 9px var(--gutter);
  text-align: center;
}

/* ==========================================================================
   Animal system — every mark carries a line, never decoration
   ========================================================================== */

.beast-caption {
  border-left: 3px solid var(--green);
  padding-left: 16px;
  margin-top: 20px;
}
.beast-caption b {
  display: block;
  font-family: var(--display);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin-bottom: 6px;
}
.beast-caption span { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); display: block; }
.band-blue .beast-caption span,
.beast-caption.on-dark span { color: rgba(255,255,255,.86); }

/* square gradient panel holding a cut-out */
.beast-panel {
  background: var(--gradient);
  border-radius: 3px;
  aspect-ratio: 1 / 1;
  padding: 30px 28px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.beast-media {
  flex: 1 1 0; height: 0; min-height: 0; width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.beast-media img {
  max-height: 100%; max-width: 84%; width: auto; height: auto; display: block;
  filter: drop-shadow(0 18px 34px rgba(0,20,40,.34));
}
.beast-panel .cap { width: 100%; text-align: center; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.25); }
.beast-panel .cap b {
  display: block; font-family: var(--display); font-size: 13.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--green); margin-bottom: 6px;
}
.beast-panel .cap span { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.9); display: block; max-width: 32ch; margin: 0 auto; }

/* cut-out that bleeds off an edge */
.bleed { position: relative; overflow: hidden; border-radius: 3px; background: var(--paper-sunk); min-height: 340px; }
.bleed img { position: absolute; display: block; }
.bleed.left  img { left: -6%;  bottom: 0; width: 108%; }
.bleed.right img { right: -6%; bottom: 0; width: 108%; }

/* framed photograph */
.framed { border-radius: 3px; overflow: hidden; background: var(--paper-sunk); }
.framed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.framed.tall { aspect-ratio: 4 / 5; }
.framed.wide { aspect-ratio: 16 / 9; }

/* full-width photographic band with copy over it */
.scene { position: relative; overflow: hidden; }
.scene > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,60,110,.93) 0%, rgba(0,95,171,.86) 42%, rgba(0,95,171,.45) 100%);
}
.scene .shell { position: relative; z-index: 2; }
.scene, .scene h1, .scene h2, .scene h3, .scene h4 { color: #fff; }
.scene p, .scene li { color: rgba(255,255,255,.88); }
.scene .eyebrow { color: var(--green); }
.scene strong { color: #fff; }
@media (max-width: 720px) { .scene::after { background: linear-gradient(180deg, rgba(0,60,110,.94), rgba(0,95,171,.9)); } }

/* pale scene — dark text over a light photograph */
.scene-pale::after {
  background: linear-gradient(100deg, rgba(244,247,249,.96) 0%, rgba(244,247,249,.88) 50%, rgba(244,247,249,.35) 100%);
}
.scene-pale, .scene-pale h1, .scene-pale h2, .scene-pale h3 { color: var(--ink); }
.scene-pale p, .scene-pale li { color: var(--ink-soft); }
.scene-pale .eyebrow { color: var(--blue-dark); }

/* two-column media + copy */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 62px); align-items: center; }
.split.narrow-media { grid-template-columns: .78fr 1fr; }
.split.media-right { direction: ltr; }
@media (max-width: 900px) {
  .split, .split.narrow-media { grid-template-columns: 1fr; }
  .split .media-col { order: -1; }
}


/* --- corrections --- */
h2 + p, h2 + .lede { margin-top: 18px; }

/* pale scene: let the photograph actually show on the open side */
.scene-pale::after {
  background: linear-gradient(100deg,
    rgba(244,247,249,.97) 0%,
    rgba(244,247,249,.93) 34%,
    rgba(244,247,249,.55) 68%,
    rgba(244,247,249,.18) 100%);
}
.scene > img.flip { transform: scaleX(-1); }

/* bleed: centre the cut-out vertically so heads don't get clipped */
.bleed { min-height: 380px; background: var(--gradient); }
.bleed.left  img { left: -8%;  right:auto; top: 46%; bottom:auto; transform: translateY(-50%); width: 112%; }
.bleed.right img { right: -8%; left:auto;  top: 50%; bottom:auto; transform: translateY(-50%); width: 112%; }

.figure-x { font-family: var(--body); font-weight: 400; }

/* ==========================================================================
   Track pages
   ========================================================================== */

.page-hero { padding: clamp(64px, 9vw, 118px) 0 clamp(56px, 7vw, 96px); }
.page-hero h1 { font-size: clamp(32px, 4.8vw, 54px); margin-bottom: 20px; }
.page-hero .lede { max-width: 58ch; }
.page-hero .breadcrumb {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 18px;
}
.page-hero .breadcrumb a { color: rgba(255,255,255,.62); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero .outcome {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 3px;
  margin-top: 34px; max-width: 700px;
}
.page-hero .outcome div { flex: 1 1 170px; padding: 18px 20px; border-right: 1px solid rgba(255,255,255,.28); }
.page-hero .outcome div:last-child { border-right: none; }
.page-hero .outcome b {
  display: block; font-family: var(--display); font-size: 26px; font-weight: 700;
  color: #fff; line-height: 1; margin-bottom: 7px;
}
.page-hero .outcome span { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.82); }

/* fit / not-fit columns */
.fitgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .fitgrid { grid-template-columns: 1fr; } }
.fitcard { border: 1px solid var(--rule); border-radius: 3px; padding: 28px 26px; background: #fff; }
.fitcard.no { background: var(--paper-sunk); }
.fitcard h3 { font-size: 19px; margin-bottom: 16px; }
.fitcard ul { list-style: none; margin: 0; padding: 0; }
.fitcard li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 15px; line-height: 1.55; }
.fitcard li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 13px; height: 13px; border-radius: 2px;
}
.fitcard.yes li::before { background: var(--green); }
.fitcard.no  li::before { background: var(--grey-light); }

/* the blind-spot question sets */
.qsets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .qsets { grid-template-columns: 1fr; } }
.qset { border: 1px solid var(--rule); border-top: 4px solid var(--blue-sky); border-radius: 3px; padding: 26px 24px; background: #fff; }
.qset:nth-child(2) { border-top-color: var(--blue-dark); }
.qset:nth-child(3) { border-top-color: var(--green); }
.qset h3 { font-size: 18px; margin-bottom: 6px; }
.qset .sub { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px; }
.qset ol { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.qset li {
  counter-increment: q; position: relative; padding-left: 30px;
  margin-bottom: 13px; font-size: 14.6px; line-height: 1.5;
}
.qset li::before {
  content: counter(q); position: absolute; left: 0; top: 1px;
  font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--blue-dark);
  border: 1px solid var(--rule); border-radius: 2px; width: 20px; height: 19px;
  display: flex; align-items: center; justify-content: center;
}

/* deliverables */
.delivers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 820px) { .delivers { grid-template-columns: 1fr; } }
.deliver { background: #fff; padding: 26px 26px 24px; }
.deliver h3 { font-size: 17.5px; margin-bottom: 10px; }
.deliver p { font-size: 14.8px; margin: 0; }

/* objections */
.objections { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.objection { border-bottom: 1px solid var(--rule); padding: 24px 26px; background: #fff; }
.objection:last-child { border-bottom: none; }
.objection .q {
  font-family: var(--display); font-size: 18.5px; font-weight: 600; color: var(--ink);
  margin: 0 0 10px;
}
.objection .q::before { content: "“"; color: var(--grey-light); }
.objection .q::after  { content: "”"; color: var(--grey-light); }
.objection .a { font-size: 15px; margin: 0; }

/* fee note */
.fee {
  border-left: 4px solid var(--green); background: var(--paper-sunk);
  padding: 26px 30px; border-radius: 0 3px 3px 0;
}
.fee h3 { font-size: 20px; margin-bottom: 12px; }

/* two-up door row that still collapses on small screens */
.doors.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px) { .doors.two { grid-template-columns: 1fr; } }
.action-bar a { min-width: 0; }

/* --- yield bridge table --- */
.bridge { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.bridge th, .bridge td { padding: 13px 18px; border-bottom: 1px solid var(--rule); text-align: left; }
.bridge thead th {
  font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--paper-sunk);
}
.bridge td.num {
  text-align: right; font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; width: 110px; color: var(--ink);
}
.bridge tr.head td { background: var(--paper-sunk); font-weight: 600; color: var(--ink); }
.bridge tr.total td { background: #EAF4E2; font-weight: 600; color: var(--ink); border-bottom: none; }
.bridge tr.total td.num { color: #4C7C1F; font-size: 19px; }
.bridge td.num.minus { color: #A3441F; }

/* wide content scrolls inside its own box — the page body never scrolls sideways */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  max-width: 100%;
}

/* ==========================================================================
   Insights hub
   ========================================================================== */

.edition {
  display: grid; grid-template-columns: 150px 1fr; gap: 0 28px;
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  padding: 28px 30px; margin-bottom: 18px;
}
@media (max-width: 780px) { .edition { grid-template-columns: 1fr; gap: 0; } }
.edition .meta { border-right: 1px solid var(--rule); padding-right: 24px; }
@media (max-width: 780px) {
  .edition .meta { border-right: none; border-bottom: 1px solid var(--rule); padding: 0 0 16px; margin-bottom: 18px; }
}
.edition .date {
  font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--blue-dark);
  line-height: 1.15; display: block; margin-bottom: 6px;
}
.edition .kind {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); display: block;
}
.edition h3 { font-size: 20px; margin-bottom: 14px; }
.edition ul { list-style: none; margin: 0 0 16px; padding: 0; }
.edition li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 14.8px; line-height: 1.55; }
.edition li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; background: var(--blue-sky); border-radius: 1px;
}
.edition .sources { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; border-top: 1px dashed var(--rule); padding-top: 12px; }

.correction {
  border: 1px solid var(--green); border-left: 5px solid var(--green);
  background: #F4FAEE; border-radius: 0 3px 3px 0; padding: 30px 32px;
}
.correction .tag {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #4C7C1F; background: #E2F0D3;
  padding: 5px 10px; border-radius: 2px; margin-bottom: 16px;
}
.correction h3 { font-size: 22px; margin-bottom: 14px; }
.correction blockquote {
  margin: 18px 0; padding-left: 20px; border-left: 3px solid var(--green);
  font-size: 16px; line-height: 1.6; color: var(--ink);
}

.publist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .publist { grid-template-columns: 1fr; } }

/* ==========================================================================
   About / partners
   ========================================================================== */

.partner { display: grid; grid-template-columns: 330px 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (max-width: 880px) { .partner { grid-template-columns: 1fr; } }
.partner + .partner { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule); }
.partner .name { font-family: var(--display); font-size: clamp(28px,3.4vw,38px); font-weight: 700; color: var(--ink); margin: 0 0 4px; line-height: 1.1; }
.partner .role { font-size: 13px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--green); margin: 0 0 20px; }
.partner .links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.factline { display: grid; grid-template-columns: 84px 1fr; gap: 0 20px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.factline:last-child { border-bottom: none; }
.factline b { font-family: var(--display); font-weight: 700; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.factline span { line-height: 1.55; }

.beliefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 820px) { .beliefs { grid-template-columns: 1fr; } }
.belief { background: #fff; padding: 28px 28px 26px; }
.belief h3 { font-size: 18.5px; margin-bottom: 11px; }
.belief p { font-size: 14.8px; margin: 0; }

.gap-note {
  border: 1px dashed var(--rule-strong); background: var(--paper-sunk);
  border-radius: 3px; padding: 20px 24px; font-size: 14.5px; line-height: 1.6;
  color: var(--ink-soft); margin-top: 24px;
}
.gap-note b { color: var(--ink); }

/* ==========================================================================
   Forms
   ========================================================================== */

.formcard {
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  padding: clamp(26px, 4vw, 40px);
}
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
@media (max-width: 720px) { .formgrid { grid-template-columns: 1fr; } }
.field.wide { grid-column: 1 / -1; }

.field label {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--ink);
  margin-bottom: 7px;
}
.field .hint { display: block; font-weight: 300; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.field .opt { color: var(--ink-faint); font-weight: 300; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field select, .field textarea {
  width: 100%;
  font-family: var(--body); font-size: 15.5px; font-weight: 300; color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-dark); box-shadow: 0 0 0 3px rgba(0,159,227,.18);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #A3441F; box-shadow: 0 0 0 3px rgba(163,68,31,.12);
}
.field-error { font-size: 13px; color: #A3441F; margin: 7px 0 0; }

.checkrow { display: flex; flex-wrap: wrap; gap: 9px; }
.checkrow label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 9px 14px; font-size: 14px; font-weight: 300; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.checkrow label:hover { border-color: var(--blue-dark); }
.checkrow input { accent-color: var(--blue-dark); margin: 0; }
.checkrow input:checked + span { font-weight: 500; color: var(--blue-dark); }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.consent input { margin-top: 3px; accent-color: var(--blue-dark); flex: none; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 6px; }
.form-actions .btn { border: none; }
.form-actions .note { font-size: 13.5px; color: var(--ink-faint); max-width: 42ch; }

button.btn[type="submit"] { font-family: var(--body); }
button.btn[disabled] { opacity: .6; cursor: default; }

.form-state {
  border-radius: 3px; padding: 26px 28px; margin-bottom: 22px;
  border: 1px solid var(--rule); border-left: 4px solid var(--blue-dark); background: var(--paper-sunk);
}
.form-state h3 { font-size: 20px; margin-bottom: 9px; }
.form-state p { font-size: 15px; margin: 0; }
.form-state-success { border-left-color: var(--green); background: #F4FAEE; }
.form-state-error { border-left-color: #A3441F; background: #FBF1EE; }
.form-state-notice { border-left-color: #B0730A; background: #FDF7EA; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px;
  font-size: 13.5px; color: var(--ink-faint);
}
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

/* on a form page the form comes first on small screens — the supporting rail follows */
@media (max-width: 900px) {
  .split.form-first .media-col { order: 0; }
}

/* ==========================================================================
   Client wall
   ========================================================================== */

.logowall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.logowall li {
  list-style: none;
  background: #fff;
  aspect-ratio: 2 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
}
.logowall img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  transition: transform .18s ease;
}
.logowall li:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .logowall img { transition: none; } .logowall li:hover img { transform: none; } }
.logowall.tight { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }

/* --- partners side by side --- */
.partners-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.5vw, 46px); align-items: stretch; }
@media (max-width: 900px) { .partners-row { grid-template-columns: 1fr; gap: 44px; } }
.partner-card { background: #fff; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.partner-card .avatar {
  width: 132px; height: 132px; border-radius: 3px; object-fit: cover;
  display: block; margin-bottom: 20px; background: var(--paper-sunk);
}
.partner-card .nm {
  font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700;
  line-height: 1.1; color: var(--ink); margin: 0 0 6px;
}
.partner-card .rl {
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green); margin: 0 0 20px;
}

/* ==========================================================================
   Peacock fan — drawn, sits above the client wall
   ========================================================================== */

.peacock-band { margin: 0 auto 14px; max-width: 820px; }
.peacock { width: 100%; height: auto; display: block; }
.pf-plume { fill: url(#pfPlume); }
.pf-stem  { fill: none; stroke: url(#pfBarb); stroke-width: 2; opacity: .62; }
.pf-barb  { fill: none; stroke: url(#pfBarb); stroke-width: 1.1; opacity: .34; stroke-linecap: round; }
@media (max-width: 720px) { .peacock-band { max-width: 100%; margin-bottom: 4px; } }

/* ==========================================================================
   VIBRANT PASS — adopted from the July strategy-session landing page
   Same palette, used far more assertively: green as the action colour,
   tinted section washes instead of all-grey, gradient accents.
   Previous stylesheet kept at site.css.pre-vibrant.bak
   ========================================================================== */

:root {
  --green-dk:  #4C8F1E;
  --green-lt:  #6FB537;
  --mint:      #EDF7E2;
  --sky-pale:  #E6F6FD;
  --ink-deep:  #12242E;
  --radius:    6px;
}

/* --- action colour becomes green --- */
.btn-primary {
  background: linear-gradient(150deg, var(--green-lt), var(--green-dk));
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18,36,46,.14), 0 8px 18px -10px rgba(76,143,30,.7);
}
.btn-primary:hover { background: linear-gradient(150deg, #7CC441, #55A024); }
.btn-ghost { border-radius: var(--radius); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--green-dk); color: var(--green-dk); }
.btn-on-blue { border-radius: var(--radius); }
.btn-ghost-on-blue { border-radius: var(--radius); }
.btn { border-radius: var(--radius); }

/* keep a blue action where green would fight the ground */
.btn-blue { background: var(--blue-dark); color: #fff; }
.btn-blue:hover { background: #004E8C; }

/* --- tinted section washes, so the page is not white-grey-white --- */
.band-sky  { background: linear-gradient(180deg, var(--sky-pale), #fff); }
.band-mint { background: linear-gradient(180deg, var(--mint), #fff); }
.band-sunk { background: linear-gradient(180deg, var(--paper-sunk), #fff); }

/* --- gradient accent rule under a headline --- */
.rule-accent {
  width: 78px; height: 4px; border-radius: 3px; border: 0; margin: 0 0 24px;
  background: linear-gradient(100deg, var(--blue-sky), var(--green));
}

/* --- a headline fragment that fades blue into green --- */
.grad {
  background: linear-gradient(100deg, var(--blue-sky) 0%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--blue-sky);
}

/* --- vertical pills --- */
.tagpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.tagpills li {
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-dark); background: var(--sky-pale);
  border: 1px solid #CDE9F8; border-radius: 999px; padding: 7px 13px;
}

/* --- soften the hard 3px corners the rest of the site uses --- */
.door, .card, .formcard, .framed, .beast-panel, .qset, .fitcard, .edition,
.partner-card, .frame, .scroller, .objections, .bleed { border-radius: var(--radius); }
.proof-item, .deliver, .belief { border-radius: 0; }

/* --- the proof strip gets a tinted ground and green numerals --- */
.proof { background: linear-gradient(180deg, var(--mint), #fff); }
.proof-num { background: linear-gradient(120deg, var(--blue-dark), var(--green-dk));
             -webkit-background-clip: text; background-clip: text;
             -webkit-text-fill-color: transparent; }

/* --- dark bands go deeper, which makes the greens pop --- */
.site-footer { background: var(--ink-deep); }

/* ==========================================================================
   BLUE PASS — blue-dominant, green demoted to a precise accent.
   This matches brand.md: "headings and the wordmark in Sky Blue or Dark Blue;
   the tagline and small accents in Light Green."
   Green-forward version kept at site.css.green-pass.bak
   ========================================================================== */

:root {
  --navy:      #0B2740;
  --navy-deep: #071B2E;
  --blue-rich: #0A6FC2;
  --blue-deep: #00447C;
  --sky-wash:  #F1F8FC;
  --sky-tint:  #E6F2FA;
}

/* --- action returns to blue, but a richer one with real depth --- */
.btn-primary {
  background: linear-gradient(150deg, var(--blue-rich) 0%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11,39,64,.18), 0 10px 24px -12px rgba(0,68,124,.85);
}
.btn-primary:hover { background: linear-gradient(150deg, #1180D8, #005694); }
.btn-ghost:hover { border-color: var(--blue-deep); color: var(--blue-deep); }

/* green survives as the accent it is meant to be */
.btn-accent { background: linear-gradient(150deg, var(--green-lt), var(--green-dk)); color: #fff; }
.btn-accent:hover { background: linear-gradient(150deg, #7CC441, #55A024); }

/* --- washes cool toward blue; the mint becomes a faint relief --- */
.band-sky  { background: linear-gradient(180deg, var(--sky-tint), #fff); }
.band-mint { background: linear-gradient(180deg, var(--sky-wash), #fff); }
.band-sunk { background: linear-gradient(180deg, var(--paper-sunk), #fff); }
.proof     { background: linear-gradient(180deg, var(--sky-tint), #fff); }
.proof-num {
  background: linear-gradient(120deg, var(--blue-rich), var(--blue-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- deep navy carries the weight; this is where the class comes from --- */
.site-footer { background: var(--navy-deep); }
.scene::after {
  background: linear-gradient(100deg,
    rgba(7,27,46,.95) 0%, rgba(11,39,64,.90) 40%, rgba(0,68,124,.55) 100%);
}
.band-blue { background: linear-gradient(140deg, var(--blue-rich) 0%, var(--blue-deep) 55%, var(--navy) 100%); }
.beast-panel { background: linear-gradient(150deg, var(--blue-sky) 0%, var(--blue-deep) 78%, var(--navy) 100%); }
.page-hero .outcome b { color: #fff; }

/* --- refinement: tighter display type, deeper elevation, hairline rules --- */
h1 { letter-spacing: -.022em; }
h2 { letter-spacing: -.014em; }
.eyebrow { letter-spacing: .2em; }
.door, .card, .partner-card, .formcard {
  box-shadow: 0 1px 2px rgba(11,39,64,.05), 0 14px 30px -22px rgba(11,39,64,.5);
}
.door:hover, .card:hover {
  box-shadow: 0 1px 2px rgba(11,39,64,.07), 0 22px 44px -26px rgba(11,39,64,.62);
  transition: box-shadow .2s ease;
}
.doors .door:nth-child(3) { border-top-color: var(--green-dk); }

/* green keeps exactly the jobs the brand gives it */
.rule-accent { background: linear-gradient(100deg, var(--blue-sky), var(--green)); }
.footer-tagline { color: var(--green); }
.beast-caption b, .beast-panel .cap b, .card .kicker, .partner-card .rl { color: var(--green-dk); }
.scene .eyebrow, .band-blue .eyebrow, .beast-caption.on-dark b { color: var(--green); }

/* ==========================================================================
   FIX — the blue pass's .scene::after was overriding .scene-pale::after
   (same specificity, declared later), so pale sections got a dark overlay
   under dark ink. Raise specificity so the pale variant always wins.
   ========================================================================== */

.scene.scene-pale::after {
  background: linear-gradient(100deg,
    rgba(241,248,252,.97) 0%,
    rgba(241,248,252,.93) 34%,
    rgba(241,248,252,.58) 68%,
    rgba(241,248,252,.20) 100%);
}
@media (max-width: 720px) {
  .scene.scene-pale::after {
    background: linear-gradient(180deg, rgba(241,248,252,.97), rgba(241,248,252,.9));
  }
}
.scene.scene-pale,
.scene.scene-pale h1, .scene.scene-pale h2,
.scene.scene-pale h3, .scene.scene-pale h4 { color: var(--ink); }
.scene.scene-pale p, .scene.scene-pale li, .scene.scene-pale span { color: var(--ink-soft); }
.scene.scene-pale .eyebrow { color: var(--blue-deep); }
.scene.scene-pale strong, .scene.scene-pale b { color: var(--ink); }
.scene.scene-pale .steps b { color: var(--ink); }
.scene.scene-pale .steps li::before { color: var(--blue-rich); }

/* ==========================================================================
   DUAL PASS — green and blue carried together, each with a defined job.
   Blue  = structure, headings, primary action, dark ground.
   Green = the second action, confirmation, progress, and every "yes" marker.
   ========================================================================== */

/* --- two action colours, two jobs ------------------------------------- */
/* blue asks for the commitment (book, request, submit) */
/* green offers the low-risk step (subscribe, take the test, read more)  */
.btn-accent,
.subscribe button {
  background: linear-gradient(150deg, var(--green-lt), var(--green-dk));
  color: #fff; border: none;
  box-shadow: 0 1px 2px rgba(18,36,46,.16), 0 10px 22px -12px rgba(76,143,30,.8);
}
.btn-accent:hover, .subscribe button:hover { background: linear-gradient(150deg,#7CC441,#55A024); }

/* --- washes: a true alternation, blue then green ---------------------- */
.band-sky  { background: linear-gradient(180deg, var(--sky-tint), #fff); }
.band-mint { background: linear-gradient(180deg, var(--mint), #fff); }
.proof     { background: linear-gradient(180deg, var(--sky-tint) 0%, var(--mint) 100%); }

/* the numerals travel blue -> green, so the two sit in one object */
.proof-num {
  background: linear-gradient(115deg, var(--blue-rich) 0%, var(--blue-sky) 45%, var(--green-dk) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- the three doors read as one blue-to-green family ----------------- */
.doors .door:nth-child(1) { border-top-color: var(--blue-deep); }
.doors .door:nth-child(2) { border-top-color: var(--blue-sky); }
.doors .door:nth-child(3) { border-top-color: var(--green-dk); }
.door-cta { color: var(--green-dk); }
.door-cta:hover { color: var(--blue-deep); }

/* --- green owns every affirmative marker ------------------------------ */
.fitcard.yes li::before,
.cta-list li::before,
.door li::before { background: var(--green-dk); }
.trust-row span::before { background: var(--green-lt); }

/* --- process numerals climb blue -> green as the steps advance -------- */
.steps li:nth-child(1)::before,
.steps li:nth-child(2)::before { color: var(--blue-deep); }
.steps li:nth-child(3)::before,
.steps li:nth-child(4)::before,
.steps li:nth-child(5)::before { color: var(--blue-sky); }
.steps li:nth-child(6)::before,
.steps li:nth-child(7)::before { color: var(--green-dk); }

/* --- section heads carry a small green tick of their own -------------- */
.band-head .eyebrow { position: relative; padding-left: 18px; }
.band-head .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 2px;
  background: linear-gradient(135deg, var(--blue-sky), var(--green));
}
.scene .band-head .eyebrow::before,
.band-blue .band-head .eyebrow::before { background: var(--green); }

/* --- the qset rails alternate the two ---------------------------------- */
.qset:nth-child(1) { border-top-color: var(--blue-deep); }
.qset:nth-child(2) { border-top-color: var(--blue-sky); }
.qset:nth-child(3) { border-top-color: var(--green-dk); }

/* --- the yield bridge total lands in green ----------------------------- */
.bridge tr.total td { background: var(--mint); }
.bridge tr.total td.num { color: var(--green-dk); }

/* --- form focus rings pick up green, so "correct" reads green ---------- */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-dk); box-shadow: 0 0 0 3px rgba(122,191,61,.22);
}

/* --- logo wall: 13 client logos are supplied ON their brand colour (toothsi
   red, HUL orange, Mansarovar navy...). Those images keep their own ground and
   fill the tile edge to edge. Everything else is keyed out onto white. No tile
   colour is ever invented by us. --- */
.logowall li { padding: 14px 16px; overflow: hidden; }
.logowall li.brand-ground { padding: 0; }
.logowall li.brand-ground img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }

/* --- panoramic photographs used as section grounds: hold the subject in frame
   rather than letting `cover` centre-crop the animals out of the picture --- */
.scene > img[src*="elephant-herd"] { object-position: 50% 62%; }
.scene > img[src*="swans-band"]    { object-position: 50% 45%; }
.scene > img[src*="dolphin-band"]  { object-position: 50% 55%; }
.scene > img[src*="eagle-soaring"] { object-position: 50% 40%; }

/* ==========================================================================
   THE MARK'S TRIANGLE — the site's pointing device
   Added 2026-09-08.

   Not invented. Both green shapes in the Credence "C" are the SAME right
   isosceles triangle, measured off assets/logo/credence-logo-mark.png:
   two 53x53px regions at the top-right and bottom-left of the mark,
   hypotenuse slope 1:1, colour exactly #7ABF3D. Flat top, vertical right
   edge, hypotenuse falling from top-left to bottom-right.

   In the logo the two sit on opposite corners and set up a diagonal. That
   diagonal is the movement in the mark, so the triangle is used here in its
   logo orientation everywhere — unrotated — and it always points at
   something. It marks, it aims, it leads. It never decorates.

   Rule: the triangle means yes, forward, this one. A "no" or an excluded
   item keeps the old square, so the shape carries meaning and not just
   branding.
   ========================================================================== */

:root {
  /* The mark, as an SVG mask rather than a clip-path polygon. A polygon can
     only draw sharp corners; the logo's corners are ROUNDED, so a polygon was
     visibly wrong. Corner radius measured by fitting the shape against the
     logo pixels: r = 4.00px on a 57.9px leg = 6.9% of the leg, hence r=7 on
     this 100-unit viewBox. Edges are straight, hypotenuse is a true 45°.
     Used as a mask so background stays a CSS property — solid green, sky
     blue, a gradient or currentColor all still work. */
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M16.9 0 H93 A7 7 0 0 1 100 7 V83.1 A7 7 0 0 1 88.05 88.05 L11.95 11.95 A7 7 0 0 1 16.9 0 Z' fill='white'/%3E%3C/svg%3E");
}

/* --- 1. every affirmative marker is now the mark ------------------------
   Sizes step up ~25% because a triangle carries half the ink of the square
   or dot it replaces, and would otherwise read smaller at the same box. --- */
.door li::before,
.cta-list li::before,
.fitcard.yes li::before,
.edition li::before,
.trust-row span::before,
.eyebrow::before,
.door-cta::after,
.links a::after,
.card > a:last-child::after {
  -webkit-mask-image: var(--tri);
          mask-image: var(--tri);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  clip-path: none;
  border-radius: 0;
}

.door li            { padding-left: 24px; }
.door li::before    { width: 10px; height: 10px; top: 8px; }

.cta-list li        { padding-left: 28px; }
.cta-list li::before{ width: 11px; height: 11px; top: 7px; border-radius: 0; }

.fitcard.yes li::before { width: 14px; height: 14px; top: 6px; }

.edition li         { padding-left: 24px; }
.edition li::before { width: 10px; height: 10px; top: 7px; }

.trust-row span::before { width: 9px; height: 9px; }

.band-head .eyebrow      { padding-left: 20px; }
.band-head .eyebrow::before {
  width: 11px; height: 11px; border-radius: 0;
  top: 50%; transform: translateY(-55%);
}

/* the excluded column deliberately keeps its square — the triangle is a yes */
.fitcard.no li::before { clip-path: none; border-radius: 2px; }

/* --- 2. text calls to action are pointed, and the point moves ----------
   These links used to end in a "→" glyph. All 18 were removed from the HTML
   on 2026-09-08 — the mark is the arrow now, so the two never compete. --- */
.door-cta::after,
.links a::after,
.card > a:last-child::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 9px;
  vertical-align: 1px;
  background: currentColor;
  transition: transform .18s ease;
}
.door-cta:hover::after,
.links a:hover::after,
.card > a:last-child:hover::after { transform: translate(3px, 3px); }

/* --- 3. every eyebrow is pointed at by the mark ------------------------
   Section heads already carried a small rounded square here. The hero
   eyebrow and the in-card ones carried nothing at all. One rule now covers
   every eyebrow on every page, so the triangle opens each section — the
   same shape, at the same size, in the same place, all the way down. --- */
.eyebrow {
  position: relative;
  padding-left: 20px;
}
.eyebrow::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 11px; height: 11px;
  transform: translateY(-58%);
  background: linear-gradient(135deg, var(--blue-sky), var(--green));
}
/* on a dark ground the blue end of the gradient disappears — go solid green */
.scene .eyebrow::before,
.band-blue .eyebrow::before,
.eyebrow.on-blue::before { background: var(--green); }