/* ==========================================================================
   Elevate 360 — Elevate Care Connect (10/8)
   Head (photo under the navy grade, same height as the other interior
   heads) → three pillars → the doorway (a panel in ECC's colours on paper).
   Reads from tokens.css. ECC's own colours are scoped to this page only;
   they quote another brand and are not for use anywhere else.
   ========================================================================== */

.page-ecc {
  --ecc-teal:  #163838;   /* ECC header / dark band */
  --ecc-slate: #2F4F4F;
  --ecc-sage:  #85A6A6;   /* ECC button colour */
  --ecc-mist:  #ACB3B3;
}

/* --- Page head (copy of .ph in cases.css / contact.css) ------------------ */

.ph { display: grid; background: var(--navy); color: var(--text-inverse); }
.ph__inner { display: grid; align-content: center; padding-block: var(--space-3xl) var(--section-y); }
.ph--photo { position: relative; overflow: hidden; }
.ph__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.ph__media picture, .ph__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.ph__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 41, 66, 0.35) 0%, rgba(15, 41, 66, 0) 35%, rgba(15, 41, 66, 0.55) 100%),
    linear-gradient(90deg, rgba(15, 41, 66, 0.94) 0%, rgba(15, 41, 66, 0.78) 42%, rgba(15, 41, 66, 0.28) 75%, rgba(15, 41, 66, 0.10) 100%);
}
.ph--photo .ph__inner { position: relative; z-index: 1; }
.ph__title {
  margin: var(--space-sm) 0 0;
  max-width: 14ch;
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--on-navy);
}
.ph__title em { font-style: italic; }
.ph__lede {
  margin: var(--space-lg) 0 0;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-inverse-muted);
}
@media (max-width: 767px) {
  .ph--photo { min-height: 460px; }
  .ph__media img { object-position: 80% 50%; }
  .ph__media::after { background: linear-gradient(180deg, rgba(15, 41, 66, 0.55) 0%, rgba(15, 41, 66, 0.82) 100%); }
}
@media (min-width: 1024px) {
  .ph { min-height: calc(464px + 8.65vw); }
  .ph__inner { padding-block: var(--space-4xl) var(--space-5xl); }
}

/* --- Pillars --------------------------------------------------------------- */

.pillars { padding-block: var(--section-y); background: var(--paper-warm); }
.pillars__list { display: grid; gap: var(--space-xl); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.pillar { position: relative; display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.pillar::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--gold); transform-origin: left center; transition: width var(--dur-slow) var(--ease-emph), background var(--dur-base) var(--ease-out); }
.pillar__n { font-size: var(--step--1); font-weight: var(--weight-medium); letter-spacing: 0.08em; color: var(--gold); transition: color var(--dur-base) var(--ease-out); }
.pillar__title { margin: 0; max-width: 16ch; font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.pillar__body { margin: 0; max-width: 34ch; font-size: var(--step-0); color: var(--text-muted); }
/* the hint: under the pointer the gold becomes ECC's teal and the mark runs the width */
.pillar:hover::before { width: 100%; background: var(--ecc-sage); }
.pillar:hover .pillar__n { color: var(--ecc-slate); }
.pillars__note { margin: var(--space-2xl) 0 0; max-width: 60ch; font-size: var(--step--1); color: var(--text-meta); }
.pillars__note a { color: var(--navy); font-weight: var(--weight-medium); text-decoration: none; border-bottom: 1px solid var(--gold); }
.pillars__note a:hover { color: var(--gold); }
@media (min-width: 768px) {
  .pillars__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}

/* --- The doorway ---------------------------------------------------------- */
/* The section stays on paper so the page returns to its own colour before
   the navy footer; the teal lives in a panel, the "door" itself. */

.door { padding-block: var(--section-y); background: var(--paper); }
.door__panel {
  position: relative;
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  border-radius: 10px;
  background: var(--ecc-teal);
  color: #F2F4F3;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(22, 56, 56, 0.55);
}
.door__panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 60%, rgba(133, 166, 166, 0.22) 0%, rgba(22, 56, 56, 0) 55%);
  pointer-events: none;
}
/* The panel arrives like a door opening: a paper wash slides off to the right. */
.door__panel::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  transform-origin: right center;
  pointer-events: none;
}
.js .door__panel::after { transform: scaleX(1); transition: transform 1100ms var(--ease-emph) 80ms; }
.js .door.is-open .door__panel::after { transform: scaleX(0); }
.door__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.door__text, .door .window { position: relative; z-index: 1; }
.door .eyebrow { color: var(--ecc-mist); }
.door__title { margin: 0 0 var(--space-md); max-width: 16ch; font-size: var(--step-4); font-weight: var(--weight-regular); line-height: 1.04; letter-spacing: -0.022em; color: #F2F4F3; }
.door__title em { font-style: italic; }
.door__body { margin: 0 0 var(--space-xl); max-width: 36ch; color: var(--ecc-mist); }
.door__actions { display: grid; gap: var(--space-sm); justify-items: start; }
/* The button in ECC's own colour. */
.door__btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--ecc-sage); border-color: var(--ecc-sage); color: var(--ecc-teal); white-space: normal; }
.door__btn svg { width: 18px; transition: transform var(--dur-base) var(--ease-emph); }
.door__btn:hover { background: #F2F4F3; border-color: #F2F4F3; color: var(--ecc-teal); }
.door__btn:hover svg { transform: translate(3px, -3px); }
.door__alt { margin: 0; font-size: var(--step--1); color: var(--ecc-mist); }
.door__alt a { color: #F2F4F3; text-decoration: none; border-bottom: 1px solid var(--ecc-sage); }

/* The window: a framed preview of the ECC homepage; it lifts and squares up on hover. */
.window {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0E2626;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 244, 243, 0.08);
  text-decoration: none;
  color: inherit;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform var(--dur-slow) var(--ease-emph), box-shadow var(--dur-slow) var(--ease-out);
}
.window:hover { transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-6px); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(242, 244, 243, 0.14); }
.window__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #0E2626; }
.window__bar > span:not(.window__url) { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 244, 243, 0.22); }
.window__url { margin-left: auto; margin-right: auto; font-size: 11px; letter-spacing: 0.04em; color: rgba(242, 244, 243, 0.55); }
.window__shot { display: block; width: 100%; height: auto; }
.window__cta {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.95rem; border-radius: 999px;
  background: rgba(14, 38, 38, 0.86); color: #F2F4F3;
  font-size: var(--step--1); font-weight: var(--weight-medium); letter-spacing: 0.02em;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-emph);
}
.window__cta svg { width: 14px; }
.window:hover .window__cta { opacity: 1; transform: translate(-50%, 0); }
/* The reveal on this element also lifts it from further down. */
.js .window[data-reveal] { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(28px); }
.js .window[data-reveal].is-in { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition-delay: 700ms; }
.js .window[data-reveal].is-in:hover { transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-6px); transition-delay: 0ms; }

@media (min-width: 1024px) {
  .door__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4xl); }
}
@media (prefers-reduced-motion: reduce) {
  .js .door__panel::after { display: none; }
  .window, .window:hover, .js .window[data-reveal], .js .window[data-reveal].is-in { transform: none; transition: none; }
  .pillar::before, .door__btn svg { transition: none; }
}