/* ================================================================
   ABOUT (about.html, a-propos.html) - page-specific only.
   ================================================================ */

/* The title band is a dark plate in BOTH themes. .page-head paints
   --brand-deep, which turns light blue in dark mode and left white
   text on baby blue. A literal, not a token, so it cannot invert. */
.about-head { background: #173B4C; padding-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.about-head h1 { margin-top: 0; }

/* Headings with no side note run the full width */
.section-head h2 { max-width: none; }

/* ---- Who we are: the building carousel across the top, three equal
        cards under it, the office facts two by two. ---- */
.who-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }

.who-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.who-card svg { width: 28px; height: 28px; margin-bottom: 0.375rem; color: var(--brand); }
.who-card h2 { font-size: 1.3125rem; line-height: 1.25; color: var(--ink); }
.who-card p { font-size: 0.9375rem; color: var(--muted); }

.who-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; margin-top: 2.25rem; }

@media (max-width: 860px) {
  .who-cards { grid-template-columns: 1fr; gap: 0.75rem; }
  .who-card { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; padding: 1.25rem; }
  .who-card svg { grid-row: span 2; margin: 0.125rem 0 0; width: 26px; height: 26px; }
}

@media (max-width: 760px) {
  .who-facts { grid-template-columns: 1fr; }
}

/* ---- Carousel: native horizontal snap, so a phone swipes it for free.
        about.js adds the arrows, the counter and a slow autoplay. ---- */
.carousel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #173B4C;
}

.car-fallback { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.car-track {
  display: flex;
  aspect-ratio: 16 / 7;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline-offset: -4px; }

.car-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  color: #FFFFFF;
  text-decoration: none;
}

.car-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86);
}

.car-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,20,26,.82) 0%, rgba(9,20,26,.35) 30%, rgba(9,20,26,0) 55%);
}

.car-cap {
  position: absolute;
  z-index: 1;
  left: 1.375rem;
  right: 6rem;
  bottom: 1.25rem;
}

.car-cap b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }

.car-cap span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

.car-btn {
  position: absolute;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: #215268;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, transform .15s;
}

.car-btn svg { width: 20px; height: 20px; }
.car-prev { left: 0.875rem; }
.car-next { right: 0.875rem; }
.car-btn:active { transform: scale(0.94); }

@media (hover: hover) {
  .car-btn:hover { background: #215268; color: #FFFFFF; }
}

.car-count {
  position: absolute;
  z-index: 1;
  right: 1.375rem;
  bottom: 1.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,.82);
}

.car-count b { color: #FFFFFF; font-weight: 600; }

@media (max-width: 760px) {
  .car-fallback, .car-track { aspect-ratio: 4 / 3; }
  .car-cap b { font-size: 1.1875rem; }
}

/* ---- Our team ---- */
.team { display: grid; gap: 0.875rem; align-content: start; }

.team-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.125rem;
  align-items: start;
  padding: 1.375rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.team-plates { display: flex; min-width: 88px; }

.team-plates .plate {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-wash);
  border: 2px solid var(--surface);
  color: var(--brand);
  font-family: var(--serif);
  font-size: 1.25rem;
}

.team-plates .plate + .plate { margin-left: -16px; }
.team-plates .plate svg { width: 24px; height: 24px; }

.team-card b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: var(--ink); }

.team-role {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-card p { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }

/* The photograph fills the height of the two cards beside it */
.team-split { align-items: stretch; }
.team-split .about-figure { margin: 0; }
.team-split .about-figure img { height: 100%; object-fit: cover; border-radius: 2px; }

@media (max-width: 760px) {
  .team-card { grid-template-columns: 1fr; gap: 0.875rem; padding: 1.25rem; }
  .team-split .about-figure img { height: auto; aspect-ratio: 4 / 3; }
}

/* ---- Reviews. Desktop: the six cards, twice over, rolling slowly
        right to left; a pointer on it stops it. Phone: stacked, each
        card popping in as it scrolls into view. ---- */
.reviews .section-head { margin-bottom: 2rem; }
.reviews-note { font-size: 0.8125rem; }

.reviews-rail {
  overflow: hidden;
  padding-block: 0.5rem 1rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.reviews-track {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  width: max-content;
  animation: reviews-roll 70s linear infinite;
}

.reviews-rail:hover .reviews-track,
.reviews-rail:focus-within .reviews-track { animation-play-state: paused; }

/* The track is two identical sets; moving it by one set and one gap
   lands exactly where it started. */
@keyframes reviews-roll { to { transform: translateX(calc(-50% - 0.625rem)); } }

.review {
  flex: 0 0 22.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.625rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow);
}

.review-who { display: flex; align-items: center; gap: 0.75rem; }

.review-initial {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--serif);
  font-size: 1.125rem;
}

.review-who b { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

.review-who span span {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.review p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 760px) {
  .reviews-rail {
    overflow: visible;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .reviews-track {
    width: auto;
    flex-direction: column;
    gap: 0.875rem;
    padding-inline: max(var(--pad), env(safe-area-inset-left));
    animation: none;
  }

  .review { flex: none; padding: 1.25rem 1.25rem 1.375rem; }
  .review.is-copy { display: none; }

  .will-pop .review {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.25,1.25);
  }

  .will-pop .review.in { opacity: 1; transform: none; }
}

/* No motion wanted: the desktop banner becomes a strip you scroll yourself */
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .reviews-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .reviews-track { padding-inline: var(--pad); }
  .review.is-copy { display: none; }
}

/* ---- See our apartments: two equal cards ---- */
.next-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.next-links a { position: relative; padding: 1.5rem 5rem 1.5rem 1.5rem; -webkit-tap-highlight-color: transparent; }
.next-links b { font-size: 1.3125rem; }

.next-links a::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 1.125rem;
  transition: transform .2s;
}

.next-links a:active { transform: scale(0.99); }

@media (hover: hover) {
  .next-links a:hover::after { transform: translateX(3px); }
}

@media (max-width: 760px) {
  .next-links { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0.75rem; }
}