/* Metro Builders — Escalators & Travellators. Illustrative concepts until verified project imagery.
   Approved storyboard: docs/escalator-storyboard. */

/* ---------- 1. Opening: a crane-up over crisscross escalators ---------- */
.es-open { position: relative; height: 210vh; background: #e8e4dd; }
.es-open__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.es-open__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover;
  transform: translateY(calc((1 - var(--k, 0)) * (100svh - 100%))); will-change: transform; }
.es-open__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 15, .5), rgba(20, 18, 15, 0) 55%); }
.es-open__copy { position: absolute; left: 0; right: 0; bottom: max(56px, 9vh); color: var(--on-image); }
.es-open__copy .label { color: rgba(244, 241, 235, .8); }
.es-open__copy h1 { font-size: clamp(2.8rem, 7vw, 7rem); letter-spacing: -.055em; line-height: .94; margin-top: 14px; max-width: 10ch; }
.es-open__copy p { margin-top: 18px; max-width: 42ch; color: rgba(244, 241, 235, .86); }
.pg-esc .concept-tag { right: max(16px, 2vw); bottom: 16px; }

/* ---------- 2. Trusted Across Sectors: one escalator, two worlds ---------- */
.es-sec { position: relative; height: 260vh; background: #121212; }
.es-sec__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.es-sec__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.es-sec__img--pub { clip-path: inset(0 0 0 calc(var(--s, 0) * 100%)); }
.es-sec__seam { position: absolute; top: 0; bottom: 0; left: calc(var(--s, 0) * 100%); width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 250, 238, .95) 20%, rgba(255, 250, 238, .95) 80%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 24px 6px rgba(255, 244, 222, .5); opacity: calc(1 - var(--done, 0)); }
.es-sec__tag { position: absolute; top: calc(var(--nav-h) + 18px); padding: 8px 12px; background: rgba(14, 14, 14, .38); backdrop-filter: blur(6px); color: #fff;
  font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.es-sec__tag--com { left: max(16px, 3vw); opacity: calc(.4 + var(--s, 0) * .6); }
.es-sec__tag--pub { right: max(16px, 3vw); opacity: calc(1 - var(--s, 0) * .6); }
.es-sec__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 0 max(40px, 6vh); color: #fff;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .72)); opacity: var(--done, 0); transform: translateY(calc((1 - var(--done, 0)) * 30px)); }
.es-sec__copy h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); letter-spacing: -.05em; }
.es-sec__copy p { margin-top: 16px; max-width: 58ch; color: rgba(255, 255, 255, .86); }
.es-sec__cred { margin-top: 20px; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.es-sec__cred span + span::before { content: "·"; margin: 0 .8em; }
.es-sec.rm { height: auto; }
.es-sec.rm .es-sec__stage { position: relative; height: auto; display: grid; grid-template-columns: 1fr 1fr; }
.es-sec.rm .es-sec__img { position: relative; height: 70vh; clip-path: none; }
.es-sec.rm .es-sec__seam { display: none; }
.es-sec.rm .es-sec__copy { position: relative; grid-column: 1 / -1; opacity: 1; transform: none; background: #121212; padding-top: 48px; }

/* ---------- 3. Precision in every detail ---------- */
.es-det { background: var(--ivory); padding: clamp(80px, 11vw, 150px) 0; }
.es-det h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); letter-spacing: -.05em; margin-top: 12px; max-width: 14ch; }
.es-det p.m { color: var(--muted); margin-top: 16px; max-width: 46ch; }
.es-det__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); margin-top: clamp(40px, 6vw, 80px); }
.es-det figure { margin: 0; }
.es-det figure:nth-child(2) { margin-top: clamp(30px, 6vw, 90px); }
.es-det figure:nth-child(3) { margin-top: clamp(60px, 12vw, 180px); }
.es-det figure div { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #ddd6ca; }
.es-det figure img { width: 100%; height: 100%; object-fit: cover; }
.es-det figure .concept-tag { left: 10px; bottom: 8px; right: auto; }
.es-det figcaption { margin-top: 12px; font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--titanium); }

/* ---------- 4. Built for every environment: travellators ---------- */
.es-env { position: relative; min-height: 110vh; min-height: 110svh; overflow: hidden; color: #fff; display: grid; }
.es-env img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.02 + var(--p, 0) * .1)); transform-origin: 50% 55%; }
.es-env__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 13, 12, .78) 0%, rgba(14, 13, 12, .45) 42%, rgba(14, 13, 12, 0) 70%), linear-gradient(180deg, rgba(12, 12, 12, .35), rgba(12, 12, 12, 0) 40%); }
.es-env__copy { position: relative; align-self: start; padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 100px)); }
.es-env h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); letter-spacing: -.05em; max-width: 13ch; }
.es-env p { margin-top: 16px; max-width: 48ch; color: rgba(255, 255, 255, .88); }
.es-env p + p { margin-top: 10px; font-size: .92rem; color: rgba(255, 255, 255, .74); }

/* ---------- 5. Closing ---------- */
.es-close { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #fff; display: grid; background: #1a1916; }
.es-close img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.1 - var(--p, 0) * .08)); }
.es-close__shade { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 30%, rgba(12, 12, 12, .62), rgba(12, 12, 12, .18) 70%), linear-gradient(180deg, rgba(12, 12, 12, .4), rgba(12, 12, 12, 0) 60%); }
.es-close__inner { position: relative; align-self: start; padding-block: calc(var(--nav-h) + clamp(48px, 10vh, 110px)) 80px; display: grid; gap: 22px; justify-items: center; text-align: center; }
.es-close h2 { font-size: clamp(2.4rem, 5.6vw, 5.8rem); letter-spacing: -.055em; line-height: .96; }
.es-close p { max-width: 44ch; color: rgba(255, 255, 255, .86); }

@media (max-width: 760px) {
  .es-open { height: 190vh; }
  .es-sec { height: 220vh; }
  .es-det__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); scrollbar-width: none; }
  .es-det__row::-webkit-scrollbar { display: none; }
  .es-det figure { flex: 0 0 78%; scroll-snap-align: center; margin-top: 0 !important; }
  .es-sec.rm .es-sec__stage { grid-template-columns: 1fr; }
  .es-sec__tag { font-size: .54rem; letter-spacing: .16em; max-width: 42vw; white-space: normal; line-height: 1.4; }
  .es-sec__tag--com { left: 12px; } .es-sec__tag--pub { right: 12px; text-align: right; }
  .es-env__shade { background: linear-gradient(180deg, rgba(14, 13, 12, .78) 0%, rgba(14, 13, 12, .5) 55%, rgba(14, 13, 12, .1) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .es-open__img { transform: none; top: auto; bottom: 0; }
  .es-env img, .es-close img { transform: none; }
}