/* =========================================================
   STRATANTS — NARRATIVE COMPONENTS (v1.3.0)
   Extends stratants.css design tokens (--s-*)
   Used on: front-page, why, framework (How We See),
            sage-advisory (Working Together)
   ========================================================= */

/* Slightly larger base for comfortable reading */
@media (min-width: 992px) {
  body { font-size: 1.06rem; }
}

/* ── RECOGNITION BAND ── */
.recog-band {
  background: var(--s-navy);
  padding: 1.1rem 0;
  display: flex; align-items: center; justify-content: center;
  gap: 2.5rem; flex-wrap: wrap;
}
.recog-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(251,248,243,0.4);
}
.recog-item i { color: var(--s-teal); font-size: 0.78rem; }

/* ── HERO SPLIT ── */
.hero-split {
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: stretch; min-height: 80vh;
  max-width: 1320px; margin: 0 auto; padding: 0 2rem;
  gap: 3rem;
}
.hero-split-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem 0 4rem;
}
.hero-split-img { position: relative; overflow: hidden; border-radius: 16px; margin: 4rem 0; min-height: 440px; max-height: 560px; align-self: stretch; }
.hero-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) brightness(0.96); }
.hero-split-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--s-bg) 0%, transparent 25%);
  border-radius: 16px;
}
.hero-eyebrow-row {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.hero-eyebrow-row i { color: var(--s-orange); font-size: 0.85rem; }
.hero-eyebrow-row span {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-orange);
}
.hero-h1 {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.1rem, 3.4vw, 3.6rem);
  line-height: 1.12; color: var(--s-navy-deep); margin-bottom: 1.6rem;
  letter-spacing: -0.012em;
}
.hero-h1 em { font-style: italic; color: var(--s-orange); }

/* ── NOTICE CARDS ── */
.notice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.notice-card {
  background: #fff; border-radius: 10px; padding: 2rem 1.8rem;
  border-left: 3px solid var(--s-orange);
  box-shadow: 0 4px 24px rgba(6,42,56,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.notice-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(6,42,56,0.1); }
.notice-icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(200,90,10,0.08); color: var(--s-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: 1.3rem;
}
.notice-card h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.28rem; line-height: 1.32; color: var(--s-navy-deep); margin-bottom: 0.7rem;
}
.notice-card p { font-size: 0.95rem; color: var(--s-muted); line-height: 1.75; margin: 0; }

/* ── BENEATH BAND (dark) ── */
.beneath-band { background: var(--s-navy); position: relative; overflow: hidden; padding: 6rem 0; }
.beneath-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.08; }
.beneath-bg::after { content:''; position:absolute; inset:0; background: linear-gradient(to bottom, transparent 40%, var(--s-navy) 100%); }
.beneath-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.beneath-grid .section-heading { color: rgba(251,248,243,0.85); }
.beneath-grid .section-label { color: var(--s-teal); }
.beneath-grid .body-text { color: rgba(251,248,243,0.5); }
.beneath-lines { display: flex; flex-direction: column; gap: 0.9rem; }
.beneath-line {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.4rem; background: rgba(255,255,255,0.04);
  border-radius: 8px; border-left: 2px solid rgba(157,184,198,0.25);
  transition: background 0.3s;
}
.beneath-line:hover { background: rgba(255,255,255,0.07); }
.beneath-line i { color: var(--s-teal); font-size: 0.95rem; margin-top: 0.25rem; flex-shrink: 0; }
.beneath-line p { font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; color: rgba(251,248,243,0.6); line-height: 1.6; margin: 0; }
.beneath-footer { font-size: 0.92rem; color: rgba(251,248,243,0.3); font-style: italic; line-height: 1.8; margin-top: 1.6rem; }

/* ── CHANGE / OUTCOME CARDS ── */
.change-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 3rem; }
.change-card {
  background: #fff; border-radius: 10px; padding: 2rem;
  box-shadow: 0 4px 24px rgba(6,42,56,0.06);
  border-top: 3px solid transparent;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.change-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(6,42,56,0.1); border-top-color: var(--s-orange); }
.change-num { font-family: var(--font-serif); font-size: 2.3rem; font-weight: 300; color: rgba(200,90,10,0.18); line-height: 1; }
.change-card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.28rem; color: var(--s-navy-deep); line-height: 1.3; }
.change-card p { font-size: 0.95rem; color: var(--s-muted); line-height: 1.75; margin: 0; }
.change-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--s-teal); background: rgba(157,184,198,0.12);
  padding: 0.3rem 0.7rem; border-radius: 20px; width: fit-content; margin-top: auto;
}
.change-proof {
  font-size: 0.88rem; color: var(--s-navy-deep); line-height: 1.7;
  font-style: italic; padding-top: 0.7rem; border-top: 1px dashed rgba(6,42,56,0.1);
  font-family: var(--font-serif);
}
.change-proof i { color: var(--s-orange); margin-right: 0.4rem; }

/* ── ADVISOR / AVYA INTRO ── */
.advisor-band { background: var(--s-bg-faint); padding: 6rem 0; }
.advisor-grid { display: grid; grid-template-columns: 220px 1fr; gap: 3.5rem; align-items: center; }
.advisor-portrait { width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(6,42,56,0.15); }
.advisor-portrait img { width: 100%; height: 100%; object-fit: cover; }
.advisor-name { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--s-muted); text-align: center; margin-top: 0.9rem; letter-spacing: 0.04em; }
.advisor-meaning {
  margin-top: 1.4rem; padding: 1.2rem 1.6rem;
  background: rgba(157,184,198,0.1); border-left: 2px solid var(--s-teal);
  border-radius: 0 8px 8px 0;
}
.advisor-meaning p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--s-navy-deep); line-height: 1.7; margin: 0; }
.advisor-meaning strong { font-style: normal; color: var(--s-blue); font-weight: 500; }

/* ── SPLIT IMAGE+TEXT ── */
.split-band { padding: 6rem 0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-img { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(6,42,56,0.12); aspect-ratio: 4/3; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-img::after { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(6,42,56,0.25) 0%, transparent 55%); }
.split-img-cap { position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 1; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.split-points { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.8rem; }
.split-point { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(6,42,56,0.07); }
.split-point:last-child { border-bottom: none; padding-bottom: 0; }
.split-point-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; margin-top: 0.1rem;
  background: rgba(157,184,198,0.14); color: var(--s-blue);
  display: flex; align-items: center; justify-content: center; font-size: 0.88rem;
}
.split-point h4 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.08rem; color: var(--s-navy-deep); margin-bottom: 0.25rem; }
.split-point p { font-size: 0.92rem; color: var(--s-muted); line-height: 1.7; margin: 0; }

/* ── KNOWING QUOTE BAND ── */
.knowing-band { background: var(--s-bg-mid); padding: 5.5rem 0; text-align: center; }
.knowing-quote {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.7rem); line-height: 1.45;
  color: var(--s-navy-deep); max-width: 760px; margin: 0 auto; position: relative; padding: 0 2rem;
}
.knowing-quote::before {
  content: '\201C'; font-family: var(--font-serif); font-size: 5.5rem;
  color: var(--s-orange); opacity: 0.15; position: absolute; top: -1.8rem; left: 0;
}
.knowing-quote em { font-style: normal; color: var(--s-orange); }
.knowing-attr { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-muted); margin-top: 1.4rem; }

/* ── PUSHY / NOT-FOR-EVERYONE ── */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; align-items: start; }
.fit-list { display: flex; flex-direction: column; }
.fit-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(6,42,56,0.07); }
.fit-item:last-child { border-bottom: none; }
.fit-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-top: 0.1rem; }
.fit-icon.no { background: rgba(200,90,10,0.1); color: var(--s-orange); }
.fit-icon.yes { background: rgba(157,184,198,0.14); color: var(--s-blue); }
.fit-item p { font-size: 0.98rem; color: var(--s-muted); line-height: 1.7; margin: 0; }
.fit-item p strong { color: var(--s-navy-deep); font-weight: 500; }

/* ── BELIEF CARDS (Why page) ── */
.belief-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 3rem; }
.belief-card { background: #fff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 24px rgba(6,42,56,0.06); border-top: 3px solid transparent; transition: all 0.3s; }
.belief-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(6,42,56,0.1); border-top-color: var(--s-orange); }
.belief-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(200,90,10,0.08); color: var(--s-orange); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1.1rem; }
.belief-num { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-teal); display: block; margin-bottom: 0.5rem; }
.belief-card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.28rem; color: var(--s-navy-deep); line-height: 1.3; margin-bottom: 0.7rem; }
.belief-card p { font-size: 0.95rem; color: var(--s-muted); line-height: 1.75; margin: 0; }

/* ── TENSION OUTCOME ROWS (How We See) ── */
.outcome-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2.6rem 0; border-bottom: 1px solid rgba(6,42,56,0.07); align-items: start; }
.outcome-row:last-child { border-bottom: none; }
.outcome-q { font-family: var(--font-serif); font-weight: 300; font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.32; color: var(--s-navy-deep); display: flex; gap: 1rem; align-items: flex-start; }
.outcome-q .o-icon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: rgba(200,90,10,0.08); color: var(--s-orange); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-style: normal; margin-top: 0.1rem; }
.outcome-a { font-size: 0.98rem; color: var(--s-muted); line-height: 1.85; }
.outcome-proof { margin-top: 0.9rem; font-size: 0.9rem; color: var(--s-navy-deep); font-style: italic; font-family: var(--font-serif); padding-left: 1rem; border-left: 2px solid rgba(200,90,10,0.25); line-height: 1.6; }

/* ── BEFORE/DURING/AFTER (Working Together) ── */
.bda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.bda-card { background: #fff; border-radius: 10px; padding: 2.2rem 1.8rem; box-shadow: 0 4px 24px rgba(6,42,56,0.06); position: relative; }
.bda-step { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--s-teal); display: block; margin-bottom: 0.8rem; }
.bda-card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--s-navy-deep); margin-bottom: 1rem; }
.bda-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.bda-card li { font-size: 0.92rem; color: var(--s-muted); line-height: 1.65; padding-left: 1.3rem; position: relative; }
.bda-card li::before { content: '\2014'; position: absolute; left: 0; color: var(--s-orange); }

/* ── PAGE HERO (inner pages) ── */
.page-hero-split { background: var(--s-navy); }
.page-hero-split .hero-split { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; max-width: 1320px; margin: 0 auto; padding: 0 2rem; gap: 3rem; }
.page-hero-split .hero-split-text { padding: 8rem 0 4rem; }
.page-hero-split .hero-h1 { color: #fff; }
.page-hero-split .hero-h1 em { color: var(--s-teal); }
.page-hero-split .hero-eyebrow-row span { color: rgba(251,248,243,0.4); }
.page-hero-split .hero-eyebrow-row i { color: var(--s-teal); }
.page-hero-split .body-text { color: rgba(251,248,243,0.5); }
/* ── HERO BULLETS (replaces image on inner pages) ── */
.hero-bullets {
  display: flex; align-items: center;
  padding: 4rem 0;
}
.hero-bullets ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.4rem; width: 100%; }
.hero-bullets li {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.2rem 1.4rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(157,184,198,0.15);
  border-radius: 10px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.hero-bullets li:hover { background: rgba(255,255,255,0.07); border-color: rgba(157,184,198,0.3); transform: translateX(4px); }
.hero-bullets li i {
  color: var(--s-teal); font-size: 1.05rem; margin-top: 0.2rem; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(157,184,198,0.1);
  display: flex; align-items: center; justify-content: center;
}
.hero-bullets li span {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 1.08rem; color: rgba(251,248,243,0.65); line-height: 1.5;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .hero-split, .page-hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-split-img, .page-hero-split .hero-split-img { order: -1; height: 50vw; min-height: 280px; border-radius: 0; }
  .hero-split-img::after, .page-hero-split .hero-split-img::after { background: linear-gradient(to bottom, var(--s-bg) 0%, transparent 35%); }
  .page-hero-split .hero-split-img::after { background: linear-gradient(to bottom, var(--s-navy) 0%, transparent 35%); }
  .hero-split-text, .page-hero-split .hero-split-text { padding: 3.5rem 1.25rem !important; }
  .notice-grid, .change-grid, .belief-grid, .bda-grid { grid-template-columns: 1fr; }
  .beneath-grid, .split-grid, .fit-grid, .outcome-row, .advisor-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .advisor-portrait { width: 180px; margin: 0 auto; }
  .recog-band { gap: 1.2rem; padding: 1rem; }
}


/* ── STRENGTHENED "GO DEEPER" LINKS ── */
.btn-s-ghost {
  border: 1px solid rgba(90,115,128,0.3);
  border-radius: 2px;
  padding: 0.55rem 1.2rem !important;
  transition: all 0.25s !important;
}
.btn-s-ghost:hover {
  border-color: var(--s-orange);
  background: rgba(200,90,10,0.05);
  transform: translateX(2px);
}
/* Light variant for dark backgrounds */
.btn-s-ghost[style*="rgba(251,248,243"] {
  border-color: rgba(251,248,243,0.15) !important;
}
.btn-s-ghost[style*="rgba(251,248,243"]:hover {
  border-color: var(--s-teal) !important;
  background: rgba(157,184,198,0.08);
}


/* ── ADVISOR BAND — TEXT ONLY (portrait hidden for now) ── */
.advisor-band-text-only { padding: 5.5rem 0; }
.advisor-grid-text { max-width: 720px; }
.advisor-grid-text .section-heading { max-width: 640px; }
.advisor-grid-text .body-text { max-width: 640px; }


/* ── IN PRACTICE HERO + CLIENT STORIES SIDE PANEL ── */
.in-practice-hero-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 3.5rem; align-items: center;
}
.client-stories-side {
  display: flex; flex-direction: column; gap: 1rem;
}
.client-story-card {
  display: flex; gap: 1rem; align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(157,184,198,0.15);
  border-radius: 10px; padding: 1.2rem 1.4rem;
  transition: background 0.3s, border-color 0.3s;
}
.client-story-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(157,184,198,0.3); }
.client-story-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: rgba(200,90,10,0.12); color: var(--s-orange);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.client-story-card h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.05rem; line-height: 1.3; color: #fff; margin-bottom: 0.4rem;
}
.client-story-card p { font-size: 0.85rem; color: rgba(251,248,243,0.45); line-height: 1.6; margin: 0; }
.client-story-card .btn-s-ghost {
  font-size: 0.65rem; padding: 0.4rem 0.9rem !important;
  color: rgba(251,248,243,0.5); border-color: rgba(251,248,243,0.15);
  margin-top: 0.6rem !important;
}
.client-story-card .btn-s-ghost:hover { border-color: var(--s-teal); color: var(--s-teal); }

@media (max-width: 991px) {
  .in-practice-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}