/* ZiFPIM About ecosystem — gateway page v1
   Scoped to .page--about so the homepage, News, Admin and other internal pages remain untouched. */

.page--about {
  --about-rule: rgba(38, 37, 37, .16);
  --about-soft: rgba(38, 37, 37, .58);
  overflow: clip;
}

.page--about .page-hero--about {
  position: relative;
  padding-bottom: clamp(62px, 6vw, 92px);
}

.page--about .page-hero--about::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--page);
  height: 1px;
  background: var(--about-rule);
  transform: translateX(-50%);
}

.page--about .page-hero__grid {
  align-items: end;
}

.page--about .page-title {
  max-width: 980px;
}

.page--about .page-hero__side {
  display: grid;
  gap: 28px;
  align-self: stretch;
  align-content: end;
  padding-top: 0;
  border-top: 0;
}

.page--about .page-hero__side::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 2px;
  background: var(--gold);
}

.page--about .page-hero__side p {
  max-width: 470px;
  margin: 0;
  color: var(--charcoal);
  font-size: clamp(1.04rem, 1.25vw, 1.22rem);
  line-height: 1.66;
}

.page--about .page-index {
  justify-self: start;
  padding-top: 13px;
  border-top: 1px solid var(--about-rule);
  color: var(--about-soft);
}

/* Editorial contents rather than a card directory. */
.page--about .about-directory {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(70px, 7.5vw, 118px) 0 clamp(92px, 9vw, 142px);
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(0, 1.66fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: start;
}

.page--about .about-directory__head {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 18px;
}

.page--about .about-directory__eyebrow {
  position: relative;
  padding-left: 24px;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.page--about .about-directory__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
}

.page--about .about-directory__head p {
  max-width: 190px;
  margin: 0;
  color: var(--about-soft);
  font-size: .88rem;
  line-height: 1.6;
}

.page--about .route-list {
  width: auto;
  margin: 0;
  border-top: 1px solid var(--about-rule);
}

.page--about .route-row {
  position: relative;
  min-height: clamp(104px, 8vw, 132px);
  grid-template-columns: minmax(230px, .95fr) minmax(180px, .65fr) 42px !important;
  gap: clamp(20px, 3.5vw, 56px);
  padding: 0;
  border-bottom: 1px solid var(--about-rule);
  background: transparent;
  transition: color .22s ease, padding-left .32s var(--ease);
}

.page--about .route-row::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .38s var(--ease);
}

.page--about .route-row strong {
  font-size: clamp(1.65rem, 2.55vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 650;
  transition: color .22s ease;
}

.page--about .route-row em {
  max-width: 330px;
  color: var(--about-soft);
  font-size: .94rem;
  line-height: 1.45;
  font-style: normal;
}

.page--about .route-row b {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--about-rule);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 500;
  transition: transform .25s var(--ease), border-color .25s ease, color .25s ease;
}

.page--about .route-row:hover {
  padding-left: 12px;
  background: transparent;
}

.page--about .route-row:hover::before {
  width: 100%;
}

.page--about .route-row:hover strong,
.page--about .route-row:hover b {
  color: var(--blue);
}

.page--about .route-row:hover b {
  transform: translate(3px, -3px);
  border-color: rgba(53, 88, 167, .4);
}

/* Keep the established tagline ending, but make it feel like an editorial close. */
.page--about .statement-band {
  position: relative;
  align-items: end;
  min-height: clamp(270px, 31vw, 470px);
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(72px, 8vw, 120px);
}

.page--about .statement-band::before {
  content: "ZiFPIM";
  position: absolute;
  top: 34px;
  left: max(4vw, calc((100vw - 1440px)/2));
  color: rgba(38, 37, 37, .58);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page--about .statement-band > span,
.page--about .statement-band > strong {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .page--about .about-directory {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .page--about .about-directory__head {
    position: static;
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .page--about .about-directory__head p {
    max-width: 260px;
    text-align: right;
  }

  .page--about .route-row {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 24px;
  }

  .page--about .route-row em {
    grid-column: 1;
    margin-top: -28px;
    padding-bottom: 24px;
  }

  .page--about .route-row b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 700px) {
  .page--about .page-hero__side {
    gap: 20px;
  }

  .page--about .page-index {
    padding-top: 10px;
  }

  .page--about .about-directory {
    padding-top: 64px;
    padding-bottom: 84px;
    gap: 28px;
  }

  .page--about .about-directory__head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page--about .about-directory__head p {
    max-width: none;
    text-align: left;
  }

  .page--about .route-row {
    min-height: 116px;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 16px;
  }

  .page--about .route-row strong {
    font-size: clamp(1.55rem, 7.4vw, 2.2rem);
  }

  .page--about .route-row em {
    margin-top: -18px;
    padding-right: 10px;
    padding-bottom: 20px;
    font-size: .88rem;
  }

  .page--about .route-row b {
    width: 34px;
    height: 34px;
  }

  .page--about .route-row:hover {
    padding-left: 0;
  }

  .page--about .statement-band {
    min-height: 330px;
    gap: 12px;
  }
}

/* v2 — About gateway hero reliability
   The shared clip-path heading reveal can fail to paint on some older Chromium builds.
   Keep the About gateway headline dependable and immediately readable without
   changing the reveal system used elsewhere on the website. */
.page--about .page-hero--about .page-title.reveal {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

/* v3 — ZiFPIM signature pathway
   A quiet identity layer for the About gateway: one pathway, one cropped
   brand fragment, and a warmer chapter transition into Explore ZiFPIM. */
.page--about .page-hero--about {
  isolation: isolate;
  overflow: hidden;
}

.page--about .page-hero--about::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: clamp(-150px, -8vw, -70px);
  bottom: clamp(-115px, -6vw, -60px);
  width: clamp(360px, 40vw, 620px);
  height: clamp(330px, 38vw, 560px);
  background-image: url("/assets/logo/ZiFPIM_Icon.svg");
  background-repeat: no-repeat;
  background-size: clamp(470px, 48vw, 730px) auto;
  background-position: left top;
  opacity: .024;
  transform: rotate(-4deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.page--about .page-hero--about .page-hero__eyebrow,
.page--about .page-hero--about .page-hero__grid {
  position: relative;
  z-index: 3;
}

.page--about .about-signature {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.page--about .about-signature__line,
.page--about .about-signature__node {
  position: absolute;
  display: block;
}

.page--about .about-signature__line--one {
  left: 0;
  top: 39%;
  width: 24%;
  height: 1px;
  background: rgba(226,168,20,.26);
}

.page--about .about-signature__line--two {
  left: 24%;
  top: 39%;
  width: 1px;
  height: 40%;
  background: rgba(226,168,20,.22);
}

.page--about .about-signature__line--three {
  left: 24%;
  top: 79%;
  width: 53%;
  height: 1px;
  background: rgba(53,88,167,.15);
}

.page--about .about-signature__line--four {
  left: 77%;
  top: 79%;
  width: 1px;
  height: 10%;
  background: rgba(53,88,167,.18);
}

.page--about .about-signature__node {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.page--about .about-signature__node--turn {
  left: 24%;
  top: 79%;
  background: var(--blue);
  opacity: .42;
  box-shadow: none;
}

.page--about .about-signature__node--end {
  left: 77%;
  top: 89%;
  width: 9px;
  height: 9px;
  background: var(--gold);
  opacity: .62;
  box-shadow: none;
}

.page--about .about-directory {
  position: relative;
  isolation: isolate;
}

.page--about .about-directory::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper-warm);
  border-top: 1px solid rgba(38, 37, 37, .08);
}

.page--about .about-directory::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 77%;
  width: 1px;
  height: 42px;
  background: var(--gold);
  opacity: .30;
}

.page--about .about-directory > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 980px) {
  .page--about .page-hero--about::before {
    right: -190px;
    bottom: -150px;
    opacity: .020;
  }

  .page--about .about-signature__line--one {
    width: 18%;
  }

  .page--about .about-signature__line--two,
  .page--about .about-signature__node--turn {
    left: 18%;
  }

  .page--about .about-signature__line--three {
    left: 18%;
    width: 60%;
  }

  .page--about .about-signature__line--four,
  .page--about .about-signature__node--end {
    left: 78%;
  }

  .page--about .about-directory::after {
    left: 78%;
  }
}

@media (max-width: 700px) {
  .page--about .page-hero--about::before {
    right: -220px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    background-size: 510px auto;
    opacity: .018;
  }

  .page--about .about-signature__line--one {
    top: 36%;
    width: 12%;
  }

  .page--about .about-signature__line--two {
    left: 12%;
    top: 36%;
    height: 50%;
  }

  .page--about .about-signature__line--three {
    left: 12%;
    top: 86%;
    width: 48%;
  }

  .page--about .about-signature__line--four {
    left: 60%;
    top: 86%;
    height: 6%;
  }

  .page--about .about-signature__node--turn {
    left: 12%;
    top: 86%;
  }

  .page--about .about-signature__node--end {
    left: 60%;
    top: 92%;
  }

  .page--about .about-directory::after {
    left: 60%;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--about .about-signature,
  .page--about .page-hero--about::before {
    animation: none !important;
  }
}

/* v5 — pathway motion
   The signature now loops as a slow recurring signal. Each cycle draws the
   route, rests fully visible, then clears before beginning again. */
.page--about .about-signature__line {
  will-change: transform, opacity;
}

.page--about .about-signature__line--one,
.page--about .about-signature__line--three {
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.page--about .about-signature__line--two,
.page--about .about-signature__line--four {
  transform: scaleY(0);
  transform-origin: center top;
  opacity: 0;
}

.page--about .about-signature__node {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  will-change: transform, opacity;
}

.page--about.is-about-motion-ready .about-signature__line--one {
  animation: aboutLoopLineOne 8.6s cubic-bezier(.65, 0, .35, 1) 180ms infinite;
}

.page--about.is-about-motion-ready .about-signature__line--two {
  animation: aboutLoopLineTwo 8.6s cubic-bezier(.65, 0, .35, 1) 180ms infinite;
}

.page--about.is-about-motion-ready .about-signature__node--turn {
  animation: aboutLoopNodeTurn 8.6s cubic-bezier(.2, .8, .2, 1) 180ms infinite;
}

.page--about.is-about-motion-ready .about-signature__line--three {
  animation: aboutLoopLineThree 8.6s cubic-bezier(.65, 0, .35, 1) 180ms infinite;
}

.page--about.is-about-motion-ready .about-signature__line--four {
  animation: aboutLoopLineFour 8.6s cubic-bezier(.65, 0, .35, 1) 180ms infinite;
}

.page--about.is-about-motion-ready .about-signature__node--end {
  animation: aboutLoopNodeEnd 8.6s cubic-bezier(.2, .8, .2, 1) 180ms infinite;
}

.page--about .page-hero--about::before {
  transform: translate3d(0, var(--about-mark-y, 0px), 0) rotate(-4deg);
  transition: transform 80ms linear;
  will-change: transform;
}

.page--about .about-directory::after {
  transform: scaleY(0);
  transform-origin: center top;
  opacity: 0;
  will-change: transform, opacity;
}

.page--about .about-directory.is-pathway-visible::after {
  animation: aboutDirectoryLoop 8.6s cubic-bezier(.65, 0, .35, 1) 260ms infinite;
}

/* The draw occupies roughly the first third of the cycle. The completed
   pathway then rests long enough to be read before quietly clearing. */
@keyframes aboutLoopLineOne {
  0%, 3% { transform: scaleX(0); opacity: 0; }
  5% { opacity: 1; }
  14%, 70% { transform: scaleX(1); opacity: 1; }
  78%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes aboutLoopLineTwo {
  0%, 13% { transform: scaleY(0); opacity: 0; }
  14% { opacity: 1; }
  22%, 70% { transform: scaleY(1); opacity: 1; }
  78%, 100% { transform: scaleY(1); opacity: 0; }
}

@keyframes aboutLoopNodeTurn {
  0%, 21% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  24% { opacity: .56; transform: translate(-50%, -50%) scale(1.14); }
  27%, 70% { opacity: .42; transform: translate(-50%, -50%) scale(1); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
}

@keyframes aboutLoopLineThree {
  0%, 24% { transform: scaleX(0); opacity: 0; }
  25% { opacity: 1; }
  40%, 70% { transform: scaleX(1); opacity: 1; }
  78%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes aboutLoopLineFour {
  0%, 39% { transform: scaleY(0); opacity: 0; }
  40% { opacity: 1; }
  47%, 70% { transform: scaleY(1); opacity: 1; }
  78%, 100% { transform: scaleY(1); opacity: 0; }
}

@keyframes aboutLoopNodeEnd {
  0%, 46% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  49% { opacity: .74; transform: translate(-50%, -50%) scale(1.16); }
  52%, 70% { opacity: .62; transform: translate(-50%, -50%) scale(1); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
}

@keyframes aboutDirectoryLoop {
  0%, 48% { transform: scaleY(0); opacity: 0; }
  50% { opacity: 1; }
  58%, 70% { transform: scaleY(1); opacity: .30; }
  78%, 100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page--about .about-signature__line--one,
  .page--about .about-signature__line--three {
    transform: scaleX(1);
    opacity: 1;
    animation: none !important;
  }

  .page--about .about-signature__line--two,
  .page--about .about-signature__line--four,
  .page--about .about-directory::after {
    transform: scaleY(1);
    opacity: .72;
    animation: none !important;
  }

  .page--about .about-signature__node {
    opacity: .52;
    transform: translate(-50%, -50%) scale(1);
    animation: none !important;
  }

  .page--about .page-hero--about::before {
    transform: rotate(-4deg);
    transition: none;
  }
}



/* v10 — return to the original signature pathway.
   Original thin geometry, quieter opacity, slow loop retained. */


/* v11 — full-opacity pathway with the turn positioned in the editorial gap.
   The signature remains simple and looping; on desktop the turn is calculated
   from the real space between the headline and intro column so it never cuts
   through either text block. */
.page--about .about-signature {
  z-index: 4;
}

.page--about .about-signature__line--one,
.page--about .about-signature__line--two {
  background: var(--gold);
}

.page--about .about-signature__line--three,
.page--about .about-signature__line--four {
  background: var(--blue);
}

.page--about .about-signature__node--turn {
  background: var(--blue);
  box-shadow: none;
}

.page--about .about-signature__node--end {
  background: var(--gold);
  box-shadow: none;
}

@media (min-width: 981px) {
  .page--about .about-signature__line--one {
    width: var(--about-gap-turn-x, 64%);
  }

  .page--about .about-signature__line--two,
  .page--about .about-signature__node--turn {
    left: var(--about-gap-turn-x, 64%);
  }

  .page--about .about-signature__line--three {
    left: var(--about-gap-turn-x, 64%);
    width: var(--about-gap-run-three, 13%);
  }
}

@keyframes aboutLoopNodeTurn {
  0%, 21% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  27%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
}

@keyframes aboutLoopNodeEnd {
  0%, 46% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  49% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  52%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
}

@keyframes aboutDirectoryLoop {
  0%, 48% { transform: scaleY(0); opacity: 0; }
  50% { opacity: 1; }
  58%, 70% { transform: scaleY(1); opacity: 1; }
  78%, 100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page--about .about-signature__line--one,
  .page--about .about-signature__line--two,
  .page--about .about-signature__line--three,
  .page--about .about-signature__line--four,
  .page--about .about-directory::after,
  .page--about .about-signature__node {
    opacity: 1 !important;
  }
}


/* v12 — turn the pathway below the ABOUT label.
   Keep the simple looping signature, but let the second corner happen just
   beneath the page index so the route breathes more cleanly in the editorial
   gap. */
@media (min-width: 981px) {
  .page--about .about-signature__line--two {
    height: var(--about-gap-drop, 40%);
  }

  .page--about .about-signature__line--three,
  .page--about .about-signature__line--four,
  .page--about .about-signature__node--turn {
    top: var(--about-gap-cross-y, 79%);
  }

  .page--about .about-signature__node--end {
    top: var(--about-gap-end-y, 89%);
  }
}


/* ZiFPIM — About landing: mobile introduction-to-directory rhythm.
   Keeps the opening content, route links and desktop pathway intact.
   Specificity intentionally exceeds the global mobile spacing override. */
@media (max-width: 900px) {
  body.internal main.page--about .page-hero--about {
    padding-bottom: 24px !important;
  }

  body.internal main.page--about .about-directory {
    padding-top: 18px !important;
  }
}

/* ZiFPIM — About gateway: remove the unused mobile directory heading's
   reserved grid row. It left a large empty band before the first route,
   even after reducing section padding. Keep desktop directory untouched. */
@media (max-width: 700px) {
  body.internal main.page--about .page-hero--about {
    padding-bottom: 16px !important;
  }

  body.internal main.page--about .about-directory {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding-top: 0 !important;
  }

  body.internal main.page--about .about-directory__head {
    display: none !important;
  }
}