/* ==========================================================================
   Peak Momentum — Components
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   Q1: Primary = Graphite fill + white text. Teal is the accent, not the fill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--font-heading);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

/* Primary — the single most important action (the ROA) */
.btn--primary {
  background: var(--color-cta);
  color: var(--color-cta-text);
  border-color: var(--color-cta);
}
.btn--primary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }

/* Secondary — graphite outline / ghost */
.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { border-color: var(--color-primary); }

/* Text — link with teal underline on hover */
.btn--text {
  padding-inline: 0; background: transparent; color: var(--color-primary);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
}
.btn--text:hover { border-bottom-color: var(--color-accent); }
.btn--text::after { content: '\00a0\2192'; transition: transform var(--transition); }
.btn--text:hover::after { transform: translateX(3px); }

/* On dark surfaces: invert primary so it stays visible */
.section--dark .btn--primary,
.on-dark .btn--primary {
  background: #fff; color: var(--graphite); border-color: #fff;
}
.section--dark .btn--primary:hover,
.on-dark .btn--primary:hover { background: var(--light-bg); border-color: var(--light-bg); }
.section--dark .btn--secondary,
.on-dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,.4); }
.section--dark .btn--secondary:hover,
.on-dark .btn--secondary:hover { border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  --header-h: 116px;
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: var(--header-h);
  padding-block: var(--space-3);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { height: 84px; width: auto; }  /* Horizontal lockup, ~2x larger; aspect preserved */

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav__links { display: flex; align-items: center; gap: var(--space-6); }
.nav__link {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav__link:hover { color: var(--color-primary); }
.nav__link[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-accent); }

.nav__toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  padding: var(--space-2); color: var(--color-primary);
}
.nav__toggle svg { width: 26px; height: 26px; }

@media (max-width: 60rem) {
  .site-header { --header-h: 80px; }
  .site-header__logo img { height: 52px; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5) var(--space-6);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%); transition: transform 220ms ease;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav__links[data-open="true"] { transform: translateY(0); }
  .nav__links .nav__link { width: 100%; font-size: var(--text-lg); padding-block: var(--space-3); }
  .nav__links .btn { width: 100%; margin-top: var(--space-3); }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--graphite-dark); color: var(--color-text-on-dark); }
.site-footer a { color: var(--color-text-on-dark); }
.site-footer__grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1.4fr 1fr 1fr;
  padding-block: var(--space-12) var(--space-8);
}
@media (max-width: 48rem) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.site-footer__logo img { height: 56px; width: auto; margin-bottom: var(--space-4); }
.site-footer__tag { color: #AEB8BE; max-width: 34ch; font-size: var(--text-sm); }
.footer-col h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
  color: var(--teal); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
.footer-col ul { display: grid; gap: var(--space-3); }
.footer-col a { color: #C6CED3; font-size: var(--text-sm); border-bottom: 1px solid transparent; }
.footer-col a:hover { color: #fff; border-bottom-color: var(--teal); }
.site-footer__bar {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between;
  font-size: var(--text-xs); color: #8B959B;
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: var(--space-16) var(--space-12); position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero::after {
  content: ''; position: absolute; right: -50px; top: -30px;
  width: min(500px, 44%); aspect-ratio: 640 / 420;
  background: url('/assets/img/peak-motif.svg') right top / contain no-repeat;
  opacity: .85; pointer-events: none; z-index: 0;
}
@media (max-width: 60rem) { .hero::after { width: 80%; opacity: .4; } }

/* --- Scoring matrix figure ------------------------------------------------- */
.scorefig { display: grid; gap: var(--space-10); grid-template-columns: 1.05fr 1fr; align-items: center; }
@media (max-width: 60rem) { .scorefig { grid-template-columns: 1fr; gap: var(--space-8); } }
.scorefig__chart { width: 100%; max-width: 520px; height: auto; margin-inline: auto; display: block; }
.scorefig figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); }

/* --- Diagrams (process flow, customer journey) ---------------------------- */
.diagram { margin: 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-5); }
.diagram--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram--scroll svg { min-width: 640px; }
.hero__inner { max-width: 52rem; }
.hero h1 { margin-bottom: var(--space-5); font-size: clamp(2.25rem, 6.2vw, 3.75rem); }
@media (max-width: 40rem) { .hero { padding-block: var(--space-10) var(--space-8); } }
.hero .lead { margin-bottom: var(--space-8); max-width: 46ch; }
.hero .btn-row { margin-bottom: var(--space-6); }
.hero__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.hero__note strong { color: var(--color-text-secondary); font-weight: var(--weight-semibold); }

/* --- Section header ------------------------------------------------------- */
.section-head { max-width: 46rem; margin-bottom: var(--space-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-text-secondary); font-size: var(--text-lg); margin-top: var(--space-4); }
.section--dark .section-head p { color: #C6CED3; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card--link:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card p { color: var(--color-text-secondary); font-size: var(--text-base); }
.card__role {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent-deep); margin-bottom: var(--space-3); display: block;
}
.card__foot { margin-top: var(--space-5); }

/* Grids */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 60rem) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --- Offer card (featured = ROA) ------------------------------------------ */
.offer { display: flex; flex-direction: column; }
.offer--featured { border-color: var(--teal); box-shadow: var(--shadow-md); position: relative; }
.offer--featured::before {
  content: 'Start here'; position: absolute; top: -12px; left: var(--space-6);
  background: var(--teal); color: #fff; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.offer .price { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-primary); }
.offer .price small { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.offer ul.checks { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.offer .card__foot { margin-top: auto; }

/* --- Checklist ------------------------------------------------------------ */
.checks li { position: relative; padding-left: var(--space-6); color: var(--color-text-secondary); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 12px; height: 8px; border-left: 2.5px solid var(--teal-deep); border-bottom: 2.5px solid var(--teal-deep);
  transform: rotate(-45deg); transform-origin: center;
}
.section--dark .checks li { color: #C6CED3; }
.section--dark .checks li::before { border-color: var(--teal); }

/* --- Process path (Assess -> Prioritize -> Pilot) ------------------------- */
.path { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); counter-reset: step; }
@media (max-width: 48rem) { .path { grid-template-columns: 1fr; } }
.path__step { position: relative; padding-top: var(--space-6); }
.path__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--graphite); color: #fff; font-family: var(--font-heading);
  font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--space-4);
}
.path__step h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.path__step p { color: var(--color-text-secondary); }
.path__step:not(:last-child)::after {
  content: ''; position: absolute; top: calc(var(--space-6) + 22px); left: 60px; right: -12px;
  height: 2px; background: var(--color-border-strong);
}
@media (max-width: 48rem) { .path__step::after { display: none; } }

/* --- Method (6-phase, vertical numbered) ---------------------------------- */
.method { display: grid; gap: 0; }
.method__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.method__step:first-child { border-top: 0; }
.method__num {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--teal); color: var(--teal-deep); font-weight: 600; font-family: var(--font-heading);
}
.method__step h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.method__step p { color: var(--color-text-secondary); }

/* --- Callout (teal left accent — brand's document device) ----------------- */
.callout {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--teal);
  padding: var(--space-5) var(--space-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout p { color: var(--color-text-secondary); }
.callout .callout__label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide); color: var(--teal-deep); display: block; margin-bottom: var(--space-2);
}

/* --- Proof block ---------------------------------------------------------- */
.proof { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .proof { grid-template-columns: 1fr; } }
.proof__item { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.proof__item p { font-size: var(--text-lg); color: var(--color-text-primary); }
.proof__item .proof__k { display: block; font-weight: 600; color: var(--teal-deep); margin-top: var(--space-4);
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-normal); }

/* --- Peak motif behind dark sections -------------------------------------- */
.section--dark { position: relative; overflow: hidden; }
.section--dark > .container { position: relative; z-index: 1; }
.section--dark::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: min(640px, 62%); aspect-ratio: 640 / 420;
  background: url('/assets/img/peak-motif.svg') right bottom / contain no-repeat;
  opacity: .9; pointer-events: none; z-index: 0;
}
@media (max-width: 40rem) { .section--dark::after { width: 100%; opacity: .6; } }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: var(--space-4); max-width: 24ch; margin-inline: auto; }
.cta-band p { color: #C6CED3; margin: 0 auto var(--space-8); max-width: 48ch; font-size: var(--text-lg); }

/* --- Contact band / two-col --------------------------------------------- */
.split { display: grid; gap: var(--space-10); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 60rem) { .split { grid-template-columns: 1fr; gap: var(--space-8); } }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: 0; max-width: 52rem; }
.faq details { border-top: 1px solid var(--color-border); padding-block: var(--space-4); }
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg);
  list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--teal-deep); font-size: var(--text-2xl); line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: var(--space-3); color: var(--color-text-secondary); }

/* --- Form ----------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.field label .req { color: var(--teal-deep); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-size: var(--text-base); color: var(--color-text-primary); transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,165,148,.15);
}
.field textarea { min-height: 120px; resize: vertical; }
.form__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.form-success {
  display: none; background: var(--color-surface-alt); border-left: 4px solid var(--teal);
  padding: var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.form-success[data-show="true"] { display: block; }
.form-success h3 { margin-bottom: var(--space-2); }

/* --- Who it's for list ---------------------------------------------------- */
.audience { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .audience { grid-template-columns: 1fr; } }
.audience li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-secondary); }
.audience li .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--teal); margin-top: .55em; flex: none; }

/* --- Who we serve (industry photo cards) ---------------------------------- */
.serve { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-10); }
@media (max-width: 60rem) { .serve { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.serve__media {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--color-border); background: var(--graphite-dark);
}
.serve__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.serve__ph {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-5);
  background: var(--graphite-dark) url('/assets/img/peak-motif.svg') right bottom / 72% no-repeat;
}
.serve__ph .serve__ind { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--teal); }
.serve__ph .serve__scene { color: #C6CED3; font-size: var(--text-sm); margin-top: var(--space-2); max-width: 26ch; line-height: 1.45; }
.serve__ph .serve__tag { margin-top: var(--space-4); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8B959B; border: 1px solid rgba(255,255,255,.18); padding: 3px 9px; border-radius: 999px; }
.serve__cap { margin-top: var(--space-4); }
.serve__cap h3 { font-size: var(--text-lg); margin-bottom: 2px; }
.serve__cap p { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* --- Founder block -------------------------------------------------------- */
.founder { display: grid; gap: var(--space-8); grid-template-columns: 240px 1fr; align-items: start; }
@media (max-width: 48rem) { .founder { grid-template-columns: 1fr; } }
.founder__photo {
  width: 240px; height: auto; border-radius: var(--radius-lg);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
}
@media (max-width: 48rem) { .founder__photo { max-width: 280px; } }
.founder__placeholder {
  width: 240px; height: 300px; border-radius: var(--radius-lg);
  background: var(--graphite); display: flex; align-items: center; justify-content: center;
}
.founder__placeholder img { width: 88px; height: auto; }