/* =========================================================
   HOW WE BUILD — page-specific styles
   ========================================================= */

.eyebrow-mark { width: 8px; height: 8px; background: var(--nasdan-amber); flex: none; border-radius: 2px; }

/* =========================================================
   1. HERO
   ========================================================= */
/* Hero background matches the Contact page's treatment exactly: same
   navy gradient, same soft dot pattern (not a line/grid texture), same
   amber glow stripe top-right -- see .contact-hero / .contact-hero::before
   / .contact-hero-stripe in contact.css. */
.hwb-hero {
  position: relative; overflow: hidden; padding-block: var(--sp-9) var(--section-pad-y-lg);
  background: linear-gradient(150deg, var(--nasdan-navy) 0%, var(--nasdan-navy-700) 100%);
}
.hwb-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  pointer-events: none;
}
.hwb-hero-stripe {
  position: absolute; top: -10%; right: -8%; width: 46%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(255,193,7,0.28) 0%, rgba(255,193,7,0) 70%);
  filter: blur(6px);
}
.hwb-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.92fr; gap: var(--sp-8); align-items: center; }
.hwb-hero-inner { text-align: left; }
.hwb-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.hwb-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-4); max-width: 15ch;
}
.hwb-hero-lead { font-size: var(--fs-body); max-width: 50ch; margin-bottom: var(--sp-6); color: var(--paper-300); }
.hwb-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hwb-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.hwb-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* --- delivery tracker card --- */
.hwb-hero-visual { position: relative; z-index: 1; }
.hwb-tracker { max-width: 400px; margin-inline: auto; }
.hwb-tracker-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hwb-tracker-row:last-child { border-bottom: none; }
.hwb-tracker-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: var(--fw-semibold); margin-top: 2px;
}
.hwb-tracker-row--done .hwb-tracker-num { background: rgba(255,193,7,0.16); color: var(--nasdan-amber); border: 1px solid rgba(255,193,7,0.32); }
.hwb-tracker-row--active .hwb-tracker-num { background: var(--nasdan-amber); color: var(--nasdan-navy); position: relative; }
.hwb-tracker-row--active .hwb-tracker-num::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255,193,7,0.5);
  animation: hwbTrackerPulse 2s var(--ease-out) infinite;
}
@keyframes hwbTrackerPulse {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
.hwb-tracker-row--upcoming .hwb-tracker-num { background: rgba(255,255,255,0.06); color: var(--paper-500); border: 1px solid rgba(255,255,255,0.14); }
.hwb-tracker-row div strong { display: block; color: var(--white); font-size: 0.875rem; font-weight: var(--fw-medium); }
.hwb-tracker-row div span { font-size: 0.75rem; color: var(--paper-500); }
.hwb-tracker-row--active div span { color: var(--nasdan-amber); }
.hwb-tracker-row--upcoming div strong { color: var(--paper-500); }

/* =========================================================
   3. FIVE PHASES — editorial alternating rows
   ========================================================= */
.hwb-phases { padding-block: var(--section-pad-y-lg); }
.hwb-phase-list { border-top: 1px solid var(--ink-200); margin-top: var(--sp-7); }
.hwb-phase-row { display: flex; gap: var(--sp-8); padding-block: var(--sp-8); border-bottom: 1px solid var(--ink-200); align-items: flex-start; }
.hwb-phase-row:nth-child(even) { flex-direction: row-reverse; }
.hwb-phase-figure { flex: 0 0 220px; display: flex; align-items: flex-start; }
.hwb-phase-number {
  font-size: 6.5rem; font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink-200); font-variant-numeric: tabular-nums;
}
.hwb-phase-row:nth-child(even) .hwb-phase-number { -webkit-text-stroke: 1.5px rgba(255,193,7,0.55); }
.hwb-phase-body { flex: 1; max-width: 640px; }
.hwb-phase-tag { display: block; font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--nasdan-amber); margin-bottom: var(--sp-3); }
.hwb-phase-body h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--ink-900); letter-spacing: var(--ls-snug); margin-bottom: var(--sp-3); }
.hwb-phase-body p { color: var(--ink-500); font-size: 0.9688rem; line-height: var(--lh-relaxed); margin-bottom: var(--sp-5); }
.hwb-phase-deliverable {
  display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-4);
  border-left: 2px solid var(--nasdan-amber); font-size: 0.875rem; color: var(--ink-700);
}
.hwb-phase-deliverable strong { font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400); }

/* --- shared inline CTA --- */
.hwb-inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  margin: var(--sp-8) 0 var(--sp-2); padding: var(--sp-5) var(--sp-6);
  border: 1px solid rgba(11,22,63,0.14); border-radius: var(--radius-lg); background: var(--nasdan-amber);
}
.hwb-inline-cta p { margin: 0; color: var(--nasdan-navy); font-size: 0.9375rem; max-width: 52ch; }
.hwb-inline-cta .btn-link-nasdan { color: var(--nasdan-navy); border-color: rgba(11,22,63,0.3); }
.hwb-inline-cta .btn-link-nasdan:hover { border-color: var(--nasdan-navy); }

/* =========================================================
   4. ENGAGEMENT MODELS — navy, horizontal scroll cards
   ========================================================= */
.hwb-engage { position: relative; overflow: hidden; padding-block: var(--section-pad-y-lg); background: var(--nasdan-navy); }
.hwb-engage-texture {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 80% 20%, rgba(0,0,0,0.8) 0%, transparent 60%);
  mask-image: radial-gradient(circle at 80% 20%, rgba(0,0,0,0.8) 0%, transparent 60%);
}
.hwb-engage .container-nasdan { position: relative; z-index: 1; }
.hwb-engage-scroll {
  display: flex; gap: var(--sp-5); margin-top: var(--sp-8);
  overflow-x: auto; padding-bottom: var(--sp-5); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.hwb-engage-scroll::-webkit-scrollbar { height: 6px; }
.hwb-engage-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 99px; }
.hwb-engage-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 99px; }
.hwb-engage-card {
  flex: 0 0 270px; scroll-snap-align: start;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hwb-engage-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,193,7,0.35); }
.hwb-engage-index { display: block; font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--nasdan-amber); margin-bottom: var(--sp-4); }
.hwb-engage-card h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--white); margin-bottom: var(--sp-3); }
.hwb-engage-card p { font-size: 0.875rem; color: var(--paper-300); margin-bottom: var(--sp-5); line-height: var(--lh-relaxed); }
.hwb-engage-best { font-size: 0.8125rem; color: var(--paper-500); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.1); }
.hwb-engage-best strong { color: var(--nasdan-amber); font-weight: var(--fw-medium); }

/* =========================================================
   5. PHILOSOPHY — solid amber spectacle
   ========================================================= */
.hwb-philosophy { padding-block: var(--section-pad-y-lg); background: var(--nasdan-amber); }
.hwb-philosophy-inner { max-width: 780px; }
.hwb-philosophy-eyebrow { color: var(--nasdan-navy); }
.hwb-philosophy-eyebrow .eyebrow-mark { background: var(--nasdan-navy); }
.hwb-philosophy blockquote {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); font-weight: var(--fw-light); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); color: var(--nasdan-navy); margin: 0 0 var(--sp-5);
}
.hwb-philosophy-support { font-size: 1rem; color: rgba(11,22,63,0.72); max-width: 62ch; margin-bottom: var(--sp-7); line-height: var(--lh-relaxed); }
.hwb-philosophy-foot { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.hwb-philosophy-attribution { font-size: 0.875rem; font-weight: var(--fw-semibold); color: var(--nasdan-navy); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.hwb-philosophy-link { color: var(--nasdan-navy); border-color: rgba(11,22,63,0.3); }
.hwb-philosophy-link:hover { border-color: var(--nasdan-navy); }

/* =========================================================
   6. FAQ
   ========================================================= */
.hwb-faq { padding-block: var(--section-pad-y-lg); }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-9); align-items: start; }
.faq-head p a { color: var(--nasdan-navy); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--ink-200); }
.faq-item:first-child { border-top: 1px solid var(--ink-200); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; background: none; border: none; cursor: pointer; text-align: left; font-size: 1rem; font-weight: var(--fw-medium); color: var(--ink-900); }
.faq-icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink-700); transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out); }
.faq-icon::before { width: 12px; height: 1.6px; }
.faq-icon::after { width: 1.6px; height: 12px; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.faq-item.is-open .faq-question { color: var(--nasdan-navy); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-answer p { padding-bottom: var(--sp-5); margin: 0; color: var(--ink-500); line-height: var(--lh-relaxed); max-width: 60ch; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .hwb-hero-grid { grid-template-columns: 1fr; }
  .hwb-hero-visual { max-width: 420px; margin-inline: auto; }
  .hwb-phase-figure { flex: 0 0 140px; }
  .hwb-phase-number { font-size: 4.5rem; }
  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 767.98px) {
  .hwb-hero { padding-block: var(--sp-8) var(--sp-6); }
  .hwb-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .hwb-hero-actions { flex-direction: column; align-items: stretch; }

  .hwb-phase-row, .hwb-phase-row:nth-child(even) { flex-direction: column; gap: var(--sp-4); }
  .hwb-phase-figure { flex: none; }
  .hwb-phase-number { font-size: 3.5rem; }
  .hwb-inline-cta { flex-direction: column; align-items: flex-start; margin-top: var(--sp-6); }

  .hwb-engage-card { flex-basis: 240px; }

  .hwb-philosophy-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}