/* ================================================================
   About — About-only layout on top of home.css
   Palette: Navy #204088 | Cyan #30c0e8 | Champagne #c5a572 | Ivory #fdfcf8
   Keep home.css for nav, hero, emergency, steps, bento, quotes, close.
   ================================================================ */

.im-container {
  width: min(1200px, 92vw);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

#im-ab-story,
#im-ab-sit,
#im-ab-flow,
#im-ab-path,
#im-ab-ops,
.im-ab-faq,
#im-care {
  scroll-margin-top: 96px;
}

/* ---- Compact cinematic interior hero ---- */
.im-ab-hero--page {
  min-height: min(78vh, 760px);
  min-height: min(78dvh, 720px);
  align-items: flex-end;
}

.im-ab-hero--page .im-ab-hero-inner {
  padding-block: clamp(6.75rem, 14vh, 8.75rem) clamp(3.25rem, 8vh, 5.5rem);
  gap: var(--space-md);
}

.im-ab-hero--page .im-ab-hero-inner h1 {
  max-width: 16ch;
  font-size: clamp(2.35rem, 5.4vw, 4.15rem);
}

.im-ab-hero-crumbs {
  color: rgba(255, 255, 255, 0.72);
}

.im-ab-hero-crumbs a {
  color: rgba(255, 255, 255, 0.88);
}

.im-ab-hero-crumbs a:hover,
.im-ab-hero-crumbs a:focus-visible {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.im-ab-hero-crumbs span[aria-hidden="true"] {
  color: var(--gold-light);
}

.im-ab-hero-crumbs span[aria-current="page"] {
  color: var(--gold-light);
}

.im-ab-hero .im-hero-pills li,
.im-ab-hero-pills li {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.im-ab-hero .im-ab-hero-note {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  max-width: 58ch;
}

/* ---- Who-nav (Hick: four labelled doors into the page) ---- */
.im-ab-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  width: min(1200px, 92vw);
  margin: 40px auto 0;
  padding: 18px 24px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.im-ab-who > p {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.im-ab-who-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.im-ab-who-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--ivory);
  border: 1.5px solid var(--line);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.im-ab-who-links a:hover,
.im-ab-who-links a:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-1px);
}

.im-ab-who-links a:last-child {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-dark);
}

.im-ab-who-links a:last-child:hover,
.im-ab-who-links a:last-child:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--navy-dark);
}

/* ---- Ribbon (navy + champagne; keep text readable) ---- */
body.im-public-about .im-ribbon {
  margin-top: 28px;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}

body.im-public-about .im-ribbon-track p {
  color: var(--gold-light);
}

/* ---- Story logo mark ---- */
.im-ab-story-mark {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 6px 16px rgba(32, 64, 136, 0.22));
}

.im-ab-story-badge {
  color: var(--ink-light);
}

.im-ab-story-badge strong {
  color: var(--navy);
}

.im-ab-sit-sub {
  color: var(--ink-light);
  font-size: 1.05rem;
}

.im-ab-sit-sub a {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
}

.im-ab-sit-sub a:hover,
.im-ab-sit-sub a:focus-visible {
  color: var(--navy-dark);
}

.im-ab-step-meta {
  margin: 12px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-dark);
}

/* ---- Four equal doors (do not inherit home photo-card 3:4) ---- */
body.im-public-about .im-ab-path--doors {
  padding-block: var(--space-3xl);
}

body.im-public-about .im-ab-path--doors .im-ab-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  margin: var(--space-xl) 0 var(--space-lg);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card {
  aspect-ratio: auto;
  min-height: 0;
  align-items: stretch;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  padding: 28px 24px;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card:hover {
  transform: translateY(-6px);
}

body.im-public-about .im-ab-path--doors .im-ab-path-copy {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

body.im-public-about .im-ab-path--doors .im-ab-path-copy h3,
body.im-public-about .im-ab-path--doors .im-ab-path-card h3 {
  color: var(--navy);
  font-size: 1.2rem;
  margin: 0;
}

body.im-public-about .im-ab-path--doors .im-ab-path-copy p,
body.im-public-about .im-ab-path--doors .im-ab-path-card p {
  color: var(--ink-light);
  max-width: none;
  margin: 0;
  flex: 1;
}

body.im-public-about .im-ab-path--doors .im-ab-path-badge {
  color: var(--navy);
  background: rgba(197, 165, 114, 0.18);
  border-color: rgba(197, 165, 114, 0.4);
  width: fit-content;
}

body.im-public-about .im-ab-path--doors .im-ab-path-badge--alt {
  color: var(--navy);
  background: rgba(48, 192, 232, 0.16);
  border-color: rgba(48, 192, 232, 0.35);
}

body.im-public-about .im-ab-path--doors .im-ab-path-cta {
  color: var(--navy);
  margin-top: auto;
}

body.im-public-about .im-ab-path--doors .im-ab-path-cta--alt {
  color: var(--navy);
}

body.im-public-about .im-ab-path--doors .im-path-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 12px;
  color: var(--navy);
}

body.im-public-about .im-ab-path--doors .im-path-mark svg {
  width: 32px;
  height: 32px;
}

body.im-public-about .im-ab-path--doors .im-ab-path-card--care .im-path-mark {
  background: var(--gold);
  color: var(--navy);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card--provide .im-path-mark {
  background: var(--sky);
  color: var(--white);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card--staff .im-path-mark {
  background: var(--navy);
  color: var(--white);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card--support .im-path-mark {
  background: rgba(197, 165, 114, 0.22);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(197, 165, 114, 0.45);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card--care {
  background: linear-gradient(165deg, #fff 0%, #f7f3ea 100%);
}

body.im-public-about .im-ab-path--doors .im-ab-path-card--support {
  border: 1.5px solid rgba(197, 165, 114, 0.55);
}

/* ---- FAQ ---- */
.im-ab-faq {
  width: min(780px, calc(100% - 48px));
  margin: var(--space-3xl) auto 0;
  padding: 0 0 var(--space-3xl);
}

.im-ab-faq .im-accordion__item.is-open > .im-accordion__panel {
  max-height: 28rem;
  opacity: 1;
}

.im-ab-faq .im-accordion__panel-inner p {
  margin: 0;
}

.im-ab-faq .im-accordion__panel-inner a {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
}

/* Quotes + close kickers on navy */
.im-ab-quotes-head .im-kicker,
.im-close .im-kicker {
  color: var(--gold-light);
}

.im-ab-quote figcaption span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
}

.im-ab-ops-state {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 4px;
}

.im-ab-ops-card p {
  margin: 0;
  color: var(--ink-light);
  font-size: 0.92rem;
}

.im-ab-ops-time {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-dark);
}

body.im-public-about .im-ab-ops-copy .im-btn {
  margin-top: 4px;
}

@media (max-width: 991px) {
  .im-ab-who {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .im-ab-who-links {
    justify-content: center;
  }

  .im-ab-story-mark {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }
}

@media (max-width: 768px) {
  .im-ab-hero--page {
    min-height: auto;
    align-items: center;
  }

  body.im-public-about .im-ab-path--doors .im-ab-path-grid {
    grid-template-columns: 1fr;
  }

  .im-ab-who-links a {
    flex: 1 1 calc(50% - 8px);
    min-height: 48px;
  }

  .im-ab-hero-actions .im-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .im-ab-who-links a {
    flex: 1 1 100%;
  }
}

/* 112/108 dials sit on crimson — never paint them crimson-on-crimson */
body.im-public-about .im-emerg .im-emerg-dial,
body.im-public-about .im-emerg .im-emerg-dial--crimson {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

body.im-public-about .im-emerg .im-emerg-dial--crimson:hover,
body.im-public-about .im-emerg .im-emerg-dial--crimson:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.75);
}

/* Night mode must not invent a second theme — keep ivory / navy / champagne */
@media (prefers-color-scheme: dark) {
  body.im-public-about {
    --ivory: #fdfcf8;
    --ivory-warm: #faf8f3;
    --ivory-dark: #f0ebe0;
    --champagne: #f5f0e6;
    --paper: #fffdf8;
    --ink: #1a1a2e;
    --ink-light: #4a4a5a;
    --ink-muted: #8a8a9a;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(27, 45, 90, 0.08);
    --shadow-md: 0 4px 16px rgba(27, 45, 90, 0.10);
    --shadow-lg: 0 12px 40px rgba(27, 45, 90, 0.14);
    --shadow-xl: 0 24px 64px rgba(27, 45, 90, 0.18);
    background: var(--ivory);
    color: var(--ink);
  }

  body.im-public-about .im-nav.is-scrolled,
  body.im-public-about .im-nav.im-nav--solid {
    background: rgba(253, 252, 248, 0.94);
  }

  body.im-public-about .im-nav.is-scrolled .im-nav-logo img,
  body.im-public-about .im-nav.im-nav--solid .im-nav-logo img {
    filter: none;
  }

  body.im-public-about .im-nav.is-scrolled .im-nav-links a,
  body.im-public-about .im-nav.im-nav--solid .im-nav-links a,
  body.im-public-about .im-nav.is-scrolled .im-nav-link,
  body.im-public-about .im-nav.im-nav--solid .im-nav-link {
    color: var(--navy);
  }

  body.im-public-about .im-nav.is-scrolled .im-nav-toggle span,
  body.im-public-about .im-nav.im-nav--solid .im-nav-toggle span {
    background: var(--navy);
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-ab-who-links a:hover,
  body.im-public-about .im-ab-path--doors .im-ab-path-card:hover {
    transform: none;
  }
}