/* ============================================================
   Bridgeworks Partners — C-Suite sections (extends styles.css)
   ============================================================ */

.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Guard against transient horizontal scroll from reveal-animation transforms */
main { overflow-x: clip; }

/* Hide the header CTA earlier so the longer nav + button never overflow on
   mid-size screens (the hero and section CTAs still cover conversion). */
@media (max-width: 1180px) {
  .header__cta-btn { display: none; }
}

/* Switch to the mobile hamburger nav earlier (the 6-item nav needs room) */
@media (max-width: 860px) {
  .nav { display: none; }
  .nav.nav--open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    padding: var(--space-6) clamp(1.25rem, 4vw, 3rem);
    box-shadow: var(--shadow-md);
  }
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--color-text);
  }
}

/* Keep all headlines on a single horizontal line when there's room.
   font-size scales with viewport so long titles still fit one line on
   wide screens; below 880px they wrap normally at a comfortable size. */
.section__title,
.closing__title {
  white-space: nowrap;
}
.section__title {
  font-size: clamp(1.05rem, 0.1rem + 2.55vw, 2.75rem);
}
.closing__title {
  white-space: nowrap;
  font-size: clamp(1.05rem, 0.1rem + 2.5vw, 2.75rem);
  max-width: none;
  margin-inline: auto;
}

/* Let headings span the full content width so single-line titles aren't
   clipped by the section head's reading-width constraint. The lede keeps
   the narrower measure for readability. */
.section__head { max-width: none; }
.section__head .section__lede { max-width: 760px; }

@media (max-width: 600px) {
  .section__title,
  .closing__title {
    white-space: normal;
    font-size: var(--text-2xl);
  }
  .section__head { max-width: 760px; }
}

.card__kicker {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold-hover);
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .card__kicker { color: var(--color-gold); }

.section__footnote,
.framework__footnote {
  text-align: center;
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.framework__footnote { color: var(--color-on-navy-muted); }

/* ===================== Executive Thesis ===================== */
.thesis__grid {
  display: block;
}
.thesis__lede {
  margin-top: var(--space-6);
  max-width: 880px;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.thesis__lede strong { color: var(--color-text); font-weight: 600; }
.thesis__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
}
.thesis__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .thesis__list li { color: var(--color-on-navy); }
.thesis__dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  flex-shrink: 0;
}

/* ===================== Cost of Friction cards ===================== */
.cost-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  height: 100%;
  transition: transform var(--transition-interactive), background var(--transition-interactive);
}
.cost-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); }
.cost-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold-soft);
  margin-bottom: var(--space-4);
}
.cost-card__body { color: var(--color-on-navy-muted); font-size: var(--text-sm); }

/* ===================== The Bridgeworks Span (value prop) ===================== */
.span {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: var(--space-4);
}
.span__end {
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  text-align: center;
  box-shadow: var(--shadow-md);
}
.span__end h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.span__end p { font-size: var(--text-sm); margin-inline: auto; }
.span__end--start {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.span__end--start h3 { color: var(--color-text); }
.span__end--start p { color: var(--color-text-muted); }
.span__end--finish { background: var(--color-navy-deep); color: #fff; }
[data-theme="dark"] .span__end--finish { background: var(--color-primary); color: var(--color-text-inverse); }
.span__end--finish h3 { color: #fff; }
[data-theme="dark"] .span__end--finish h3 { color: var(--color-text-inverse); }
.span__end--finish p { color: var(--color-on-navy-muted); }
[data-theme="dark"] .span__end--finish p { color: var(--color-text-inverse); opacity: 0.82; }
.span__bridge { position: relative; padding-top: var(--space-8); text-align: center; }
.span__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.span__arc { width: 100%; height: 56px; }
.span__rail {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: -10px;
  border-top: 2px solid var(--color-gold);
  padding-top: var(--space-5);
}
.span__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.span__node {
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  margin-top: -1.55rem;
  box-shadow: 0 0 0 4px var(--color-bg);
}

/* ===================== Engagement sprint ===================== */
.sprint-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  margin-bottom: var(--space-5);
  position: relative;
}
.sprint-rail::before {
  content: "";
  position: absolute;
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--color-gold);
  opacity: 0.5;
}
.sprint-node {
  width: 14px; height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  justify-self: center;
  position: relative;
}
.sprint-card__week {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold-hover);
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .sprint-card__week { color: var(--color-gold); }
.build-label { margin-top: clamp(var(--space-12), 5vw, var(--space-16)); margin-bottom: var(--space-5); }
.build-grid { gap: var(--space-4); }
.build-pill {
  background: var(--color-navy-deep);
  color: #fff;
  text-align: center;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform var(--transition-interactive), background var(--transition-interactive);
}
[data-theme="dark"] .build-pill { background: var(--color-surface-offset); border: 1px solid var(--color-border); }
.build-pill:hover { transform: translateY(-3px); background: var(--color-primary); }

/* ===================== Deliverables ===================== */
.deliverables {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  align-items: stretch;
}
.deliverable {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
}
.deliverable:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); border-color: rgba(201,150,47,0.5); }
.deliverable--hero {
  background: var(--color-gold-soft);
  border-color: var(--color-gold);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.deliverable--hero:hover { background: var(--color-gold-soft); transform: translateY(-4px); }
.deliverable__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b4e12;
  margin-bottom: var(--space-2);
}
.deliverable__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-navy-deep);
  margin-bottom: var(--space-4);
}
.deliverable--hero .deliverable__body { color: #3a2e12; }
.deliverable__sub {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold-soft);
  margin-bottom: var(--space-3);
}
.deliverable__body { color: var(--color-on-navy-muted); font-size: var(--text-sm); }
.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ===================== Principles ===================== */
.principles { display: flex; flex-direction: column; gap: var(--space-4); }
.principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-6);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-5), 2vw, var(--space-6)) clamp(var(--space-6), 3vw, var(--space-8));
  transition: transform var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.principle:hover {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--color-gold) 55%, var(--color-border));
  box-shadow: var(--shadow-sm);
}
.principle__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-4);
}
[data-theme="dark"] .principle__title { color: var(--color-on-navy); }
.principle__desc { color: var(--color-text-muted); font-size: var(--text-base); }

/* ===================== Contact: book-call + form status ===================== */
.contact__book {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact__book-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.contact__book .btn { width: 100%; justify-content: center; }

.form-status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  min-height: 1.2em;
}
.form-status--success { color: var(--color-success, #437a22); font-weight: 600; }
[data-theme="dark"] .form-status--success { color: #6daa45; }
.form-status--error { color: var(--color-notification, #a13544); font-weight: 600; }
[data-theme="dark"] .form-status--error { color: #dd6974; }

/* ===================== Responsive ===================== */
@media (max-width: 980px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .thesis__list { grid-template-columns: repeat(2, 1fr); }
  .deliverables { grid-template-columns: 1fr; }
  .deliverable-grid { grid-template-columns: repeat(2, 1fr); }
  .span { grid-template-columns: 1fr; gap: var(--space-6); }
  .span__bridge { padding-top: var(--space-4); }
  .principle { grid-template-columns: 1fr; gap: var(--space-3); }
  .sprint-rail { display: none; }
}

@media (max-width: 720px) {
  .grid--5 { grid-template-columns: 1fr; }
  .deliverable-grid { grid-template-columns: 1fr; }
  .thesis__list { grid-template-columns: 1fr; }
}