/* Keep the original copy; let a compact photographic ribbon carry the scenery. */
#about.statement {
  grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 28px 44px;
  padding-block: 72px;
}
#about .statement-copy > .body-copy:not(.zh) { grid-column: 1; grid-row: 2; font-size: 16px; line-height: 1.75; }
#about .floating-illustration { grid-column: 1; grid-row: 3; width: 145px; margin: 0 0 0 16px; align-self: center; }
#about .journey-cards { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 0; margin: 0; width: 100%; }
#about .journey-card { min-height: 0; min-width: 0; padding: 20px 24px; border-radius: 20px; box-shadow: none; }
#about .journey-card > span { float: right; font-size: 12px; opacity: .65; margin-left: 12px; }
#about .journey-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
#about .journey-card p { font-size: 14px; line-height: 1.6; }
.about-photo-gallery { grid-column: 2; grid-row: 2 / 4; min-width: 0; align-self: start; }
.about-photos-in-view .lead-fab { opacity: 0; visibility: hidden; pointer-events: none; }
.about-photo-track {
  display: flex; gap: 16px; width: 100%; overflow-x: auto; overflow-y: hidden;
  padding: 8px 4px 16px; scroll-padding-inline: 4px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.about-photo-track:focus-visible { outline: 2px solid #78977f; outline-offset: 4px; border-radius: 16px; }
.about-photo-track::-webkit-scrollbar { display: none; }
.about-photo-track figure {
  flex: 0 0 clamp(180px,20vw,250px); min-width: 0; aspect-ratio: 3 / 4;
  align-self: flex-start; overflow: hidden; border-radius: 44px 20px 20px 20px;
  background: #e4eadf; scroll-snap-align: start;
  box-shadow: 0 10px 20px -15px rgba(22,60,50,.3);
}
.about-photo-track figure:nth-child(even) { margin-top: 18px; border-radius: 20px 20px 44px 20px; }
.about-photo-track figure.about-photo-landscape { flex-basis: clamp(360px,40vw,500px); aspect-ratio: 3 / 2; }
.about-photo-track img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.about-photo-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.about-photo-controls { display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; }
.about-photo-controls[hidden] { display: none; }
.about-photo-count { min-width: 76px; font-size: 10px; letter-spacing: 1px; color: #71836e; font-variant-numeric: tabular-nums; }
.about-photo-progress { flex: 1; height: 2px; margin-right: 12px; border-radius: 2px; overflow: hidden; background: #dfe5d9; }
.about-photo-progress > span { display: block; width: var(--photo-visible,33%); height: 100%; background: #819b78; transform: translateX(var(--photo-position,0%)); }
.about-photo-controls button { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 10px; border: 1px solid #ccd8c5; border-radius: 50%; background: transparent; color: #456b59; transition: background .2s, opacity .2s; }
.about-photo-controls button:disabled { opacity: .3; cursor: default; }
.about-photo-controls button:not(:disabled):hover { background: #e5ecdf; }
.about-photo-controls button:focus-visible { outline: 2px solid #64836c; outline-offset: 3px; }
.about-photo-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .about-photo-track figure:hover img { transform: scale(1.035); } }
@media (min-width: 681px) and (max-width: 980px) {
  #about.statement { grid-template-columns: minmax(210px,.7fr) minmax(0,1.3fr); gap: 24px; }
  #about .journey-card { padding: 18px; }
  #about .journey-card h3 { font-size: 18px; }
}
@media (max-width: 680px) {
  #about.statement { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; padding: 24px 16px; gap: 18px; }
  #about h2 { grid-column: 1; grid-row: 1; }
  #about .statement-copy > .body-copy:not(.zh) { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 1.6; }
  #about .floating-illustration { display: none; }
  .about-photo-gallery { grid-column: 1; grid-row: 3; }
  .about-photo-track { gap: 12px; padding: 4px 2px 10px; scroll-padding-inline: 2px; }
  .about-photo-track figure { flex-basis: 69%; max-width: 240px; aspect-ratio: 4 / 5; border-radius: 34px 16px 16px 16px; }
  .about-photo-track figure:nth-child(even) { margin-top: 10px; border-radius: 16px 16px 34px 16px; }
  .about-photo-track figure.about-photo-landscape { flex-basis: 94%; max-width: none; aspect-ratio: 3 / 2; }
  .about-photo-controls { padding: 7px 2px 0; gap: 8px; }
  .about-photo-controls button { width: 44px; height: 44px; flex-basis: 44px; }
  #about .journey-cards { display: flex; grid-column: 1; grid-row: 4; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-padding-inline: 2px; }
  #about .journey-card { flex: 0 0 88%; padding: 18px; border-radius: 18px; }
  #about .journey-card h3 { font-size: 19px; }
  #about .journey-card p { font-size: 13px; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) { .about-photo-track img,.about-photo-controls button { transition: none; } }

/* Translucent acrylic: soft colour beneath the glass, polished edges above it. */
#about .journey-cards {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 12% 85%,rgba(85,143,116,.34),transparent 42%),
    radial-gradient(ellipse at 53% 14%,rgba(156,190,180,.24),transparent 36%),
    radial-gradient(ellipse at 94% 88%,rgba(201,175,111,.29),transparent 40%);
  border-radius: 26px;
}
#about .journey-card,
#about .journey-card.featured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #173f34;
  background: linear-gradient(125deg,rgba(255,255,255,.76),rgba(255,255,255,.30) 50%,rgba(240,247,239,.43));
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 24px;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px rgba(255,255,255,.65), inset 1px 0 0 rgba(255,255,255,.75), 0 8px 22px -12px rgba(37,73,58,.28), 0 0 0 1px rgba(92,123,100,.12);
  transition: translate .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
#about .journey-card.featured {
  background: linear-gradient(125deg,rgba(237,251,240,.73),rgba(181,213,192,.32) 55%,rgba(215,236,219,.5));
}
#about .journey-card:nth-child(3) {
  background: linear-gradient(125deg,rgba(255,253,244,.78),rgba(255,249,229,.28) 55%,rgba(244,232,204,.42));
}
#about .journey-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(117deg,transparent 35%,rgba(255,255,255,.40) 35.5%,rgba(255,255,255,.12) 50%,transparent 50.5%);
}
#about .journey-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.45);
  border-bottom-color: rgba(255,255,255,.18);
  border-radius: 19px;
  pointer-events: none;
}
#about .journey-card h3 { color: #173f34; }
#about .journey-card p,
#about .journey-card.featured p { color: #405e53; }
#about .journey-card > span { color: #526e5f; opacity: 1; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  #about .journey-card:hover {
    translate: 0 -4px;
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px rgba(255,255,255,.8), 0 16px 30px -16px rgba(37,73,58,.35), 0 0 0 1px rgba(92,123,100,.15);
  }
}
@media (max-width:680px) {
  #about .journey-cards { padding: 5px 3px 14px; scroll-padding-inline: 3px; }
  #about .journey-card, #about .journey-card.featured { border-radius: 21px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #about .journey-card::after { border-radius: 16px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #about .journey-card, #about .journey-card.featured { background-color: #edf3e9; }
}
@media (prefers-reduced-motion:reduce) { #about .journey-card { transition: none; } }