/* ---------- About section (#about on the homepage; all rules scoped to .about-*) ---------- */

.about-page {
  --bleed: 72px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Port -> land -> air: each photo's edge dissolves over 2 x --blend into its
     neighbour's (the layers overlap by that much), so the three read as one scene. */
  --blend: clamp(48px, 6vw, 120px);
  --drop: 90px; /* photos run down under the wave clip instead of stopping above it */
  --solid: linear-gradient(#000, #000);
  --fade-l: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.1) calc(var(--blend) * 0.5), rgba(0, 0, 0, 0.5) var(--blend), rgba(0, 0, 0, 0.9) calc(var(--blend) * 1.5), #000 calc(var(--blend) * 2));
  --fade-r: linear-gradient(to left, transparent 0, rgba(0, 0, 0, 0.1) calc(var(--blend) * 0.5), rgba(0, 0, 0, 0.5) var(--blend), rgba(0, 0, 0, 0.9) calc(var(--blend) * 1.5), #000 calc(var(--blend) * 2));
  --fade-t: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 48px, #000 110px);
  position: relative;
}

/* Immersive stage: one continuous sky, curved bottom edge from the homepage. */
.about-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(700px, calc(100svh - 68px));
  padding: 146px 0 72px;
  background: #6fa8ec;
  clip-path: url(#heroCurveClip);
  /* clip (not hidden): the bleeding cards must never be scrollable into view. */
  overflow: hidden;
  overflow: clip;
}
.about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
}

.about-head {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 6px 20px 0;
  color: var(--color-navy);
}
.about-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.75vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.55);
  position: relative;
}
/* Small editorial accent under the tagline. Absolutely placed so it adds no height
   and the photo composition below stays exactly where it was. */
.about-tagline::after {
  content: "";
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 62px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--color-gold);
  opacity: 0.85;
}

/* Three panels. The row is wider than the viewport so the outer cards bleed
   off both edges; the stage clips it, so nothing can scroll sideways. */
.about-cards {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  gap: 0;
  min-height: 420px;
  margin: 32px calc(var(--bleed) * -1) 0;
}

/* --on is the single state switch: 0 = day / resting, 1 = hover / active.
   Colours, image crossfade, copy swap and arrow all read from it. */
.about-card {
  --on: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0;
  isolation: isolate;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: rgb(
    calc(11 + 244 * var(--on)),
    calc(31 + 224 * var(--on)),
    calc(51 + 204 * var(--on))
  );
  text-shadow: 0 0 14px rgba(255, 255, 255, calc(0.7 * (1 - var(--on)))), 0 0 3px rgba(255, 255, 255, calc(0.45 * (1 - var(--on))));
  transition:
    flex-grow 0.75s var(--ease),
    opacity 0.75s var(--ease),
    color 0.7s var(--ease),
    text-shadow 0.7s var(--ease);
}

/* Photography: day photo melts into the sky at its top; hover photo crossfades over it. */
.about-card__media {
  position: absolute;
  inset: 0 calc(var(--blend) * -1) calc(var(--drop) * -1);
  z-index: -1;
  /* Hit-testing stays on the card boxes, so hover/tap zones don't move with the overlap. */
  pointer-events: none;
  -webkit-mask-image: var(--m-l, var(--fade-l)), var(--m-r, var(--fade-r)), var(--fade-t);
  mask-image: var(--m-l, var(--fade-l)), var(--m-r, var(--fade-r)), var(--fade-t);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.about-card:first-child .about-card__media { --m-l: var(--solid); }
.about-card:last-child .about-card__media { --m-r: var(--solid); }
.about-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.about-card__img--day {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 12%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 12%, #000 34%);
}
.about-card__img--hover {
  opacity: var(--on);
  transition: opacity 0.85s var(--ease);
}
.about-card:nth-child(1) .about-card__img { object-position: 42% 50%; }
.about-card:nth-child(2) .about-card__img { object-position: 46% 50%; }
.about-card:nth-child(3) .about-card__img { object-position: 68% 50%; }

/* Contrast support only — light in the day state, deeper navy on hover. */
.about-card__tone { position: absolute; inset: 0; pointer-events: none; }
.about-card__tone--day {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.4) 34%, rgba(255, 255, 255, 0.18) 52%, rgba(255, 255, 255, 0) 70%);
  opacity: calc(1 - var(--on));
  transition: opacity 0.7s var(--ease);
}
.about-card__tone--hover {
  background:
    linear-gradient(to bottom, rgba(6, 18, 40, 0.62) 0%, rgba(6, 18, 40, 0.24) 42%, rgba(6, 18, 40, 0.06) 62%, rgba(6, 18, 40, 0.5) 100%);
  opacity: var(--on);
  transition: opacity 0.85s var(--ease);
}

.about-card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 40px 34px;
}
.about-card:first-child .about-card__body { padding-left: calc(var(--bleed) + 40px); }
.about-card:last-child .about-card__body { padding-right: calc(var(--bleed) + 40px); }

/* Fixed copy width so text never reflows while cards resize. */
.about-card__copy { width: min(380px, 100%); }

.about-card__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}
.about-card__num::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--color-gold);
}

/* Editorial serif title (Playfair Display, already used by the site). */
.about-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 2.55vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 14px 0 16px;
}

/* Short line (resting) and long paragraph (active) share one cell and swap:
   the short line leaves first, the paragraph rises in a beat after the card
   starts to expand and darken. Delays only apply on the way in. */
.about-card__more { display: grid; }
.about-card__short,
.about-card__text { grid-area: 1 / 1; }
.about-card__short {
  max-width: 16em;
  text-wrap: balance;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  opacity: calc(1 - var(--on));
  transform: translateY(calc(var(--on) * -6px));
  transition:
    opacity 0.3s ease calc((1 - var(--on)) * 0.35s),
    transform 0.5s var(--ease) calc((1 - var(--on)) * 0.35s);
}
.about-card__text {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  opacity: var(--on);
  transform: translateY(calc((1 - var(--on)) * 14px));
  pointer-events: none;
  transition:
    opacity 0.7s ease calc(var(--on) * 0.3s),
    transform 0.8s var(--ease) calc(var(--on) * 0.3s);
}

/* The card's control has no visible button: the whole card is what you click or tap. The button stays, spread
   invisibly over the card, so the keyboard and screen readers keep it (focus previews the card, as hover does). */
.about-card__arrow {
  position: absolute;
  inset: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  border-radius: 0;
  background: none;
}
.about-card__arrow:focus-visible { outline: 1px solid var(--color-gold); outline-offset: -10px; }
.about-card__arrow svg { display: none; }

/* Two separate ideas:
   - SELECTED: persistent, one at a time, set by about.js (.is-active on the card,
     .has-active on the row). It stays put when the pointer leaves or moves over
     another card.
   - PREVIEW: transient mouse hover / keyboard focus, only while nothing is selected. */
.about-card.is-active { --on: 1; z-index: 1; }
.about-cards.has-active .about-card { flex-grow: 0.9; }
.about-cards .about-card.is-active { flex-grow: 1.22; }
.about-cards.has-active .about-card:not(.is-active) { opacity: 0.7; }

@media (hover: hover) {
  .about-cards:not(.has-active):hover .about-card { flex-grow: 0.9; }
  .about-cards:not(.has-active) .about-card:not(.is-dismissed):hover { --on: 1; z-index: 1; flex-grow: 1.22; }
  .about-cards:not(.has-active):has(.about-card:not(.is-dismissed):hover) .about-card:not(:hover) { opacity: 0.7; }
}
.about-cards:not(.has-active):has(.about-card__arrow:focus-visible) .about-card { flex-grow: 0.9; }
.about-cards:not(.has-active) .about-card:has(.about-card__arrow:focus-visible) { --on: 1; z-index: 1; flex-grow: 1.22; }
.about-cards:not(.has-active):has(.about-card__arrow:focus-visible) .about-card:not(:has(.about-card__arrow:focus-visible)) { opacity: 0.7; }

/* Bottom: open space beneath the wave and its gold (css/styles.css, .wave-accent); no pointer onwards. */
.about-foot {
  position: relative;
  display: flex;
  justify-content: center;
  height: 68px;
  background: transparent; /* the page's palest blue, and the curve's air (below), show through */
}
/* The pale-blue air of the Our Services wave beneath About's curve, as beneath the hero's (css/styles.css, .hero):
   two copies of the stage's box, clipped by the same curve and set a little lower behind it, over the palest blue.
   They share the stage's grid cell, so they are exactly its size wherever the page scrolls; a relative offset (no
   effect on layout) sets them lower. The stage and its curve are untouched. */
.about-page {
  --mist: clamp(120px, 21vh, 210px);
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content; /* each row exactly its content, as in the block flow (the stage clips its overflow) */
  align-content: start;
  isolation: isolate;
  background: #f7fbff;
}
.about-stage { grid-area: 1 / 1; }
.about-page > .wave-accent { grid-area: 1 / 1; }
.about-page > .wave-contours { grid-area: 2 / 1 / 3 / 2; } /* the white beneath the stage, the foot's row (css/styles.css) */
.about-foot { grid-area: 2 / 1; }
.about-page::before,
.about-page::after {
  content: "";
  grid-area: 1 / 1;
  position: relative;
  clip-path: url(#heroCurveClip);
  pointer-events: none;
}
.about-page::before {
  z-index: -2;
  top: calc(var(--mist) * 0.121);
  background: #eaf5ff;
}
.about-page::after {
  z-index: -1;
  top: calc(var(--mist) * 0.066);
  background: linear-gradient(90deg, #b9d9f4 0, #cfe6fa 50%, #dceeff 100%);
  opacity: 0.85;
}
@media (max-width: 859px) {
  .about-page { --mist: clamp(80px, 12vh, 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-card,
  .about-card__img--hover,
  .about-card__tone,
  .about-card__short,
  .about-card__text { transition-duration: 0.01ms; transition-delay: 0s; }
}

/* ---------- Tablet / mobile: stacked, tap to select ---------- */
@media (max-width: 1100px) {
  .about-page { --bleed: 22px; }
  .about-stage { min-height: 0; padding: 150px 0 84px; }
  .about-tagline { font-size: min(1.15rem, 4.9vw); }
  .about-cards {
    flex: none;
    flex-direction: column;
    gap: 0;
    height: max(690px, 82svh);
    min-height: 0;
    margin-top: 26px;
  }
  .about-page { --blend: 26px; }
  .about-card { min-height: 120px; }
  .about-card__media {
    inset: calc(var(--blend) * -1) 0;
    --m-l: var(--solid);
    --m-r: var(--solid);
    --fade-t: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.1) calc(var(--blend) * 0.5), rgba(0, 0, 0, 0.5) var(--blend), rgba(0, 0, 0, 0.9) calc(var(--blend) * 1.5), #000 calc(var(--blend) * 2));
    --fade-b: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.1) calc(var(--blend) * 0.5), rgba(0, 0, 0, 0.5) var(--blend), rgba(0, 0, 0, 0.9) calc(var(--blend) * 1.5), #000 calc(var(--blend) * 2));
    -webkit-mask-image: var(--m-l), var(--m-r), var(--fade-t), var(--m-b, var(--fade-b));
    mask-image: var(--m-l), var(--m-r), var(--fade-t), var(--m-b, var(--fade-b));
  }
  .about-card:last-child .about-card__media {
    bottom: calc(var(--drop) * -1);
    --m-b: var(--solid);
  }
  /* Stacked cards: full photo (no sky fade) with a soft wash behind the copy. */
  .about-card__img--day { -webkit-mask-image: none; mask-image: none; }
  .about-card__tone--day {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0) 100%);
  }
  .about-card__body,
  .about-card:first-child .about-card__body,
  .about-card:last-child .about-card__body {
    padding: 22px calc(var(--bleed) + 20px) 20px calc(var(--bleed) + 24px);
  }
  .about-card__copy { width: min(440px, 100%); }
  .about-card__title { font-size: clamp(1.5rem, 5.4vw, 2rem); margin: 8px 0 8px; }
  .about-card__short { font-size: 0.92rem; max-width: 13em; }
  .about-card__text { font-size: 0.9rem; line-height: 1.6; }
  /* All three rest equally; a tapped card opens and its neighbours settle back. */
  .about-cards .about-card { flex-grow: 1; }
  .about-cards .about-card.is-active { flex-grow: 2.3; }

  .about-foot { height: 84px; }
}

@media (max-width: 560px) {
  .about-stage { padding-top: 116px; padding-bottom: 80px; }
}

/* ---------- Phones: each card as tall as it needs ----------
   The stacked column above is one fixed height (max(690px, 82svh)) that the cards share, so a tapped card can grow
   by taking from the others. On a phone that fixed height is most of a second screen for three short headings. Here
   each card rests at the height of its own words, with room for its photograph, and a tapped card grows to the
   height of its paragraph (--open, measured by js/about.js), pushing what follows down rather than squeezing it. */
@media (max-width: 759px) {
  .about-cards { height: auto; }
  .about-cards .about-card,
  .about-cards .about-card.is-active {
    flex: none;
    min-height: clamp(156px, 21svh, 190px);
  }
  .about-cards .about-card.is-active { min-height: max(clamp(156px, 21svh, 190px), var(--open, 300px)); }
  .about-card {
    transition:
      min-height 0.75s var(--ease),
      opacity 0.75s var(--ease),
      color 0.7s var(--ease),
      text-shadow 0.7s var(--ease);
  }
}