/* ═══════════════════════════════════════════════════════════════
   first-impressions.css — MireonSpero™ First Impressions Page
   All .fi- namespaced. No collision with global.css or home.css.
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   HERO OVERLAY — CANONICAL RULE FOR ALL SUB-PAGE HERO SECTIONS
   ───────────────────────────────────────────────────────────────
   APPROVED: Option A — Top-down extended reach. April 2026.

   This is the standard white studio fog overlay for all MireonSpero™
   sub-page hero sections. home.html uses a different overlay model
   (side-directional warm wash) and must not be changed.

   HOW TO REUSE ON OTHER PAGES:
   1. In the native CSS of the new page, add the hero overlay rule
      below, renaming the class to match that page's namespace prefix.
   2. In the HTML of that page, apply the renamed class to the overlay
      div inside the hero background container.
   3. Do not change the gradient stop values unless the hero image
      has unusually dark or bright tones that require adjustment.
      Adjustment range for top stop: 0.72 – 0.82.
      Adjustment range for midpoint stop (55%): 0.50 – 0.65.
      Keep the bottom stop at or below 0.10 to preserve image breath.

   CANONICAL GRADIENT VALUES:
   0%   → rgba(255, 255, 255, 0.78)
   30%  → rgba(255, 255, 255, 0.70)
   55%  → rgba(255, 255, 255, 0.58)
   78%  → rgba(255, 255, 255, 0.28)
   100% → rgba(255, 255, 255, 0.08)
═══════════════════════════════════════════════════════════════ */


/* ── SHARED UTILITIES ────────────────────────────────────── */

.fi-link-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ms-teal);
  text-decoration: none;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.15s;
}
.fi-link-text::after { content: '→'; }
.fi-link-text:hover { opacity: 0.72; }


/* ── HERO ────────────────────────────────────────────────── */

.fi-hero {
  position: relative;
  min-height: 620px;
  background: #e8e4dc;
  overflow: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.fi-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fi-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  filter: brightness(1.14) saturate(1.06);
}

.fi-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.70) 30%,
    rgba(255, 255, 255, 0.58) 55%,
    rgba(255, 255, 255, 0.28) 78%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

.fi-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 7rem 2rem;
  display: flex;
  justify-content: center;
}

.fi-hero-text {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.fi-hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ms-navy);
  font-weight: 600;
}

.fi-hero-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ms-navy);
  margin: 0;
}

.fi-hero-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--ms-navy);
}

.fi-hero-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--ms-navy);
  line-height: 1.78;
  margin: 0;
}

.fi-hero-cta {
  display: inline-block;
  width: fit-content;
  padding: 0.85rem 2rem;
  background: var(--ms-gold);
  color: var(--ms-navy);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}
.fi-hero-cta:hover { background: var(--ms-teal); color: #fff; }


/* ── ORIENTATION STRIP ───────────────────────────────────── */

.fi-orientation {
  background: var(--ms-cream);
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.fi-orientation-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
}

.fi-orientation-label {
  padding: 3.5rem 2rem;
  border-right: 1px solid var(--ms-rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.fi-orientation-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(29, 53, 87, 0.08);
  line-height: 1;
}

.fi-orientation-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-gray);
  font-weight: 400;
}

.fi-orientation-content {
  padding: 3.5rem 3rem 3.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
}

.fi-orientation-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 400;
  color: var(--ms-navy);
  line-height: 1.25;
  margin: 0;
}

.fi-orientation-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: #4a5568;
  max-width: 580px;
  line-height: 1.78;
  margin: 0;
}

.fi-orientation-divider {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  opacity: 0.75;
}


/* ── PHASE GRID ──────────────────────────────────────────── */

.fi-phases-wrap {
  padding: 5rem 2rem;
  max-width: 100%;
  margin: 0;
  background: #fff;
}

.fi-phases-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fi-phases-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ms-rule);
}

.fi-phases-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 400;
  color: var(--ms-navy);
  line-height: 1.2;
  margin: 0;
}

.fi-phases-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ms-gray);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 1.5rem;
}

.fi-phases-instruction {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: #4a5568;
  margin: 0 0 2.5rem 0;
  font-style: italic;
}

.fi-phases-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--ms-rule);
}

.fi-phase-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.18s ease;
  overflow: hidden;
}
.fi-phase-card:hover { background: var(--ms-cream); }

.fi-phase-img-wrap {
  width: 100%;
  height: 148px;
  overflow: hidden;
  background: rgba(29, 53, 87, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ms-rule);
}

.fi-phase-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 8px;
  transition: transform 0.25s ease;
}

.fi-phase-card:hover .fi-phase-img-wrap img {
  transform: scale(1.03);
}

.fi-phase-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 53, 87, 0.05);
}

.fi-phase-img-fallback span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: rgba(29, 53, 87, 0.22);
}

.fi-phase-body {
  padding: 1.25rem 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.fi-phase-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ms-teal);
  font-weight: 500;
}

.fi-phase-age {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.70rem;
  color: rgba(29, 53, 87, 0.38);
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.fi-phase-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.0rem;
  font-weight: 500;
  color: var(--ms-navy);
  line-height: 1.25;
  margin-bottom: 0.35rem;
  min-height: 2.5em;
}

.fi-phase-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: #4a5568;
  line-height: 1.65;
  flex: 1;
  margin: 0 0 0.75rem 0;
}

.fi-phase-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ms-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  margin-top: auto;
  transition: opacity 0.15s;
}
.fi-phase-link::after { content: '→'; }
.fi-phase-card:hover .fi-phase-link { opacity: 0.72; }


/* ── CONTINUUM REFLECTION ────────────────────────────────── */

.fi-continuum {
  background: var(--ms-cream);
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.fi-continuum-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
}

.fi-continuum-label {
  padding: 3.5rem 2rem;
  border-right: 1px solid var(--ms-rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.fi-continuum-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(29, 53, 87, 0.08);
  line-height: 1;
}

.fi-continuum-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-gray);
  font-weight: 400;
}

.fi-continuum-content {
  padding: 3.5rem 3rem 3.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
}

.fi-continuum-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 400;
  color: var(--ms-navy);
  line-height: 1.25;
  margin: 0;
}

.fi-continuum-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: #4a5568;
  max-width: 580px;
  line-height: 1.78;
  margin: 0;
}


/* ── COMING SOON ─────────────────────────────────────────── */

.fi-coming-soon {
  background: #fff;
  padding: 5rem 2rem;
  max-width: 100%;
  margin: 0;
}

.fi-coming-soon-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fi-coming-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ms-rule);
}

.fi-coming-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 400;
  color: var(--ms-navy);
  line-height: 1.2;
  margin: 0;
}

.fi-coming-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ms-gray);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 1.5rem;
}

.fi-coming-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.fi-coming-card {
  border: 1px solid var(--ms-rule);
  border-radius: 2px;
  background: var(--ms-cream);
  overflow: hidden;
}

.fi-coming-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: rgba(29, 53, 87, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ms-rule);
}

.fi-coming-img-wrap img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 85%;
  object-fit: contain;
  display: block;
  opacity: 0.75;
  filter: saturate(0.55);
}

.fi-coming-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.fi-coming-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(29, 53, 87, 0.12);
  line-height: 1;
  min-width: 26px;
  padding-top: 3px;
}

.fi-coming-text { flex: 1; }

.fi-coming-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ms-navy);
  margin-bottom: 0.4rem;
}

.fi-coming-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: #4a5568;
  line-height: 1.65;
  margin: 0;
}

.fi-coming-pill {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 0.2rem 0.65rem;
  background: rgba(29, 53, 87, 0.06);
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ms-gray);
}


/* ── REFLECTIVE CLOSE ────────────────────────────────────── */

.fi-close {
  background: var(--ms-cream);
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.fi-close-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
}

.fi-close-label {
  padding: 3.5rem 2rem;
  border-right: 1px solid var(--ms-rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.fi-close-label-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(29, 53, 87, 0.08);
  line-height: 1;
}

.fi-close-label-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-gray);
  font-weight: 400;
}

.fi-close-content {
  padding: 3.5rem 3rem 3.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
}

.fi-close-rule {
  width: 32px;
  height: 2px;
  background: var(--ms-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.fi-close-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 400;
  color: var(--ms-navy);
  line-height: 1.25;
  margin: 0;
}

.fi-close-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: #4a5568;
  max-width: 560px;
  line-height: 1.78;
  margin: 0;
}

.fi-close-cta {
  display: inline-block;
  width: fit-content;
  padding: 0.85rem 2rem;
  background: var(--ms-gold);
  color: var(--ms-navy);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
  margin-top: 0.5rem;
}
.fi-close-cta:hover { background: var(--ms-teal); color: #fff; }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 768px breakpoint
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .fi-hero { min-height: unset; }
  .fi-hero-content { padding: 4rem 1.5rem; }
  .fi-hero-text { max-width: 100%; gap: 1.25rem; }
  .fi-hero-heading { font-size: clamp(1.8rem, 6vw, 2.2rem); }
  .fi-hero-body { font-size: 0.93rem; }

  /* Orientation strip */
  .fi-orientation-inner { grid-template-columns: 1fr; }
  .fi-orientation-label {
    border-right: none;
    border-bottom: 1px solid var(--ms-rule);
    padding: 2rem 1.5rem 1.25rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .fi-orientation-content { padding: 2rem 1.5rem; }

  /* Phase grid: 2-col on mobile */
  .fi-phases-wrap { padding: 3.5rem 1.5rem; }
  .fi-phases-header {
    flex-direction: column;
    gap: 0.4rem;
  }
  .fi-phases-meta { margin-left: 0; }
  .fi-phases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fi-phase-img-wrap { height: 120px; }

  /* Continuum strip */
  .fi-continuum-inner { grid-template-columns: 1fr; }
  .fi-continuum-label {
    border-right: none;
    border-bottom: 1px solid var(--ms-rule);
    padding: 2rem 1.5rem 1.25rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .fi-continuum-content { padding: 2rem 1.5rem; }

  /* Coming soon */
  .fi-coming-soon { padding: 3.5rem 1.5rem; }
  .fi-coming-header {
    flex-direction: column;
    gap: 0.4rem;
  }
  .fi-coming-meta { margin-left: 0; }
  .fi-coming-grid { grid-template-columns: 1fr; }
  .fi-coming-img-wrap { height: 160px; }

  /* Reflective close */
  .fi-close-inner { grid-template-columns: 1fr; }
  .fi-close-label {
    border-right: none;
    border-bottom: 1px solid var(--ms-rule);
    padding: 2rem 1.5rem 1.25rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .fi-close-content { padding: 2rem 1.5rem; }

}