/* =========================================================
   NASDAN — Think Possible page (v2)
   A deliberately different composition from About/Contact/Start
   Project: full-bleed manifesto hero, an imagined/possible diptych,
   a bare pull-quote, a navy triptych, a typographic transformation
   statement, and a minimal close — no reused hero/mission/CTA-card
   patterns from other pages.
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   HERO — full-bleed manifesto, dot-grid + glow, no card chrome
   ========================================================= */
.think-hero2 {
  position: relative; min-height: 82vh; display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--white); overflow: hidden; padding-block: var(--sp-9);
}
.think-hero2::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,22,63,0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 34%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 34%, #000, transparent 72%);
  pointer-events: none;
}
.think-hero2::after {
  content: ""; position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
  width: 72%; height: 62%; background: radial-gradient(circle, rgba(255,193,7,0.22), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.think-hero2-inner { position: relative; z-index: 1; max-width: 920px; margin-inline: auto; }
.think-hero2-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); justify-content: center; }
.eyebrow-mark { width: 8px; height: 8px; background: var(--nasdan-amber); flex: none; border-radius: 2px; }
.think-hero2-headline {
  font-size: var(--fs-display); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: 0.98; color: var(--ink-900); margin: 0 0 var(--sp-6);
}
.think-hero2-headline em { color: var(--nasdan-amber); font-style: normal; }
.think-hero2-lead { font-size: var(--fs-lead); color: var(--ink-500); max-width: 56ch; margin: 0 auto var(--sp-7); }
.think-hero2-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* =========================================================
   SPLIT — imagined / possible diptych, edge to edge
   ========================================================= */
.think-split { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.split-panel { padding: var(--sp-9) clamp(var(--container-pad), 6vw, 6rem); display: flex; flex-direction: column; justify-content: center; min-height: 460px; position: relative; }
.split-panel-inner { max-width: clamp(360px, 32vw, 620px); }
.split-imagined { background: var(--nasdan-navy); color: var(--white); }
.split-imagined .split-panel-inner { margin-left: auto; text-align: right; }
.split-possible .split-panel-inner { margin-right: auto; }
.split-possible { background: var(--nasdan-amber); color: var(--nasdan-navy); }
.split-label { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-wider); text-transform: uppercase; font-weight: var(--fw-semibold); margin-bottom: var(--sp-5); }
.split-imagined .split-label { color: var(--paper-500); }
.split-possible .split-label { color: rgba(11,22,63,0.55); }
.split-panel h3 { font-size: var(--fs-h2); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin-bottom: var(--sp-4); }
.split-imagined h3 { color: var(--white); }
.split-possible h3 { color: var(--nasdan-navy); }
.split-panel p { font-size: 0.9375rem; margin: 0; line-height: var(--lh-relaxed); }
.split-imagined p { color: var(--paper-300); }
.split-possible p { color: rgba(11,22,63,0.75); }

.split-connector {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.split-connector svg { width: 20px; height: 20px; color: var(--nasdan-navy); }

/* =========================================================
   QUOTE — bare pull-quote, no card, no border
   ========================================================= */
.think-quote { padding-block: var(--section-pad-y-lg); text-align: center; }
.think-quote-mark { font-family: Georgia, "Times New Roman", serif; font-size: 3.5rem; line-height: 1; color: var(--nasdan-amber); margin-bottom: var(--sp-3); }
.think-quote-text {
  font-size: clamp(1.75rem, 1.35rem + 2.2vw, 3.25rem); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--ink-900); max-width: 20ch; margin: 0 auto var(--sp-6);
}
.think-quote-support { font-size: var(--fs-lead); color: var(--ink-500); max-width: 60ch; margin-inline: auto; }

/* =========================================================
   PILLARS — navy triptych, vertical rules, no cards
   ========================================================= */
.think-pillars2 { background: var(--nasdan-navy); padding-block: var(--section-pad-y); }
.think-pillars2 .section-head h2, .think-pillars2 .section-head .text-lead { color: var(--white); }
.think-pillars2 .section-head .text-lead { color: var(--paper-300); }
.pillar-triptych { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--paper-border); }
.pillar-col { padding: var(--sp-8) var(--sp-6) 0; border-left: 1px solid var(--paper-border); }
.pillar-col:first-child { border-left: none; padding-left: 0; }
.pillar-col-num { display: block; font-size: 0.8125rem; color: var(--nasdan-amber); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); margin-bottom: var(--sp-5); font-variant-numeric: tabular-nums; }
.pillar-col h3 { color: var(--white); font-size: 1.25rem; font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.pillar-col p { color: var(--paper-300); font-size: 0.9375rem; margin: 0; }

/* =========================================================
   TRANSFORM — typographic word-swap statement, amber field
   ========================================================= */
.think-transform { background: var(--nasdan-amber); padding-block: var(--section-pad-y-lg); text-align: center; overflow: hidden; }
.transform-word {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 4.25rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  line-height: 1; color: rgba(11,22,63,0.32); text-decoration: line-through; text-decoration-thickness: 3px;
  text-decoration-color: rgba(11,22,63,0.4); margin: 0;
}
.transform-arrow-row { display: flex; align-items: center; justify-content: center; margin-block: var(--sp-2); }
.transform-arrow-row svg { width: 26px; height: 26px; color: var(--nasdan-navy); }
.transform-word--final {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 5rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  line-height: 1; color: var(--nasdan-navy); margin: 0;
}
.think-transform p { font-size: var(--fs-lead); color: rgba(11,22,63,0.78); max-width: 62ch; margin: var(--sp-7) auto 0; }

/* =========================================================
   CLOSE — minimal navy statement, no gradient card
   ========================================================= */
.think-close { background: var(--nasdan-navy); padding-block: var(--section-pad-y-lg); text-align: center; }
.think-close-inner { max-width: 700px; margin-inline: auto; }
.think-close h2 { font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--white); margin: var(--sp-4) 0 var(--sp-5); }
.think-close p { font-size: var(--fs-lead); color: var(--paper-300); max-width: 52ch; margin: 0 auto var(--sp-7); }
.think-close-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .think-hero2-headline { font-size: clamp(2.5rem, 2rem + 2.6vw, 3.5rem); }
}

@media (max-width: 991.98px) {
  .split-panel { min-height: 380px; }
}

@media (max-width: 767.98px) {
  .think-hero2 { min-height: auto; padding-block: var(--sp-8) var(--sp-7); }
  .think-hero2-headline { font-size: clamp(2rem, 1.6rem + 2.6vw, 2.5rem); }
  .think-hero2-actions { flex-direction: column; align-items: stretch; }

  .think-split { grid-template-columns: 1fr; }
  .split-panel { min-height: 300px; padding-block: var(--sp-7); }
  .split-panel-inner, .split-imagined .split-panel-inner, .split-possible .split-panel-inner { max-width: 100%; margin-inline: 0; text-align: left; }
  .split-connector { top: 0; left: 50%; transform: translate(-50%, -50%); }

  .think-quote-text { max-width: 100%; }

  .pillar-triptych { grid-template-columns: 1fr; border-top: none; }
  .pillar-col { border-left: none; border-top: 1px solid var(--paper-border); padding: var(--sp-7) 0 0; }
  .pillar-col:first-child { border-top: none; }

  .think-close-actions { flex-direction: column; align-items: stretch; }
}