/* About page Three-pillar card section uses the same service-card treatment as home. */
.services--static {
  --service-backdrop-image: url("../assets/images/shared/Shared_Rhino_Viewing.jpg");
  --service-backdrop-position: center 58%;
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    max(104px, 12vh)
    clamp(20px, 4vw, 64px)
    clamp(64px, 8vh, 92px);
  color: var(--warm-ivory);
  background: var(--espresso);
  overflow: hidden;
  isolation: isolate;
}

.services--static::before,
.services--static::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.services--static::before {
  z-index: 0;
  background-image: var(--service-backdrop-image);
  background-position: var(--service-backdrop-position);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transform: scale(1.015);
  transition:
    opacity 240ms ease,
    transform 850ms var(--ease-out);
  will-change: opacity, transform;
}

.services--static::after {
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(20, 14, 9, 0.08) 0%,
      rgba(20, 14, 9, 0.14) 46%,
      rgba(20, 14, 9, 0.3) 100%
    );
}

.services--static.is-changing-background::before {
  opacity: 0.32;
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .services--static::before,
  .services--static.is-changing-background::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.services--static .services-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 1600px);
  display: grid;
  gap: clamp(30px, 4.2vh, 48px);
  margin-inline: auto;
}

.services-heading {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.services-heading p {
  margin: 0 0 8px;
  color: #C48A56;
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.services--static .services-heading h2 {
  color: var(--warm-ivory);
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  line-height: 0.94;
  white-space: nowrap;
}

.services--static .service-grid {
  display: flex;
  width: 100%;
  height: clamp(590px, 68svh, 780px);
  gap: clamp(12px, 1.35vw, 22px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.services--static .service-card,
.services--static .service-card:hover,
.services--static .service-card:focus-within {
  position: relative;
  min-width: 0;
  min-height: 100%;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--warm-ivory);
  border: 1px solid rgba(243, 237, 224, 0.32);
  border-radius: clamp(24px, 2.1vw, 34px);
  background: var(--espresso);
  box-shadow: 0 18px 48px rgba(20, 14, 9, 0.24);
  cursor: pointer;
  filter: brightness(0.7) saturate(0.82);
  isolation: isolate;
  transform: none;
  transition:
    flex-grow 850ms var(--ease-out),
    filter 650ms ease,
    transform 650ms var(--ease-out),
    border-color 450ms ease,
    box-shadow 650ms ease;
  will-change: flex-grow, filter, transform;
}

.services--static .service-card.is-expanded,
.services--static .service-card.is-expanded:hover,
.services--static .service-card.is-expanded:focus-within {
  flex-grow: 4;
  border-color: rgba(243, 237, 224, 0.72);
  box-shadow: 0 32px 82px rgba(20, 14, 9, 0.38);
  filter: brightness(1) saturate(1);
  transform: translateY(-6px);
}

.services--static .service-card:focus-visible {
  outline: 2px solid var(--warm-ivory);
  outline-offset: 5px;
}

.services--static .service-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
}

.services--static .service-image img,
.services--static .service-card:hover .service-image img,
.services--static .service-card:focus-within .service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.03);
  transform: scale(1.09);
  transition: transform 1000ms var(--ease-out);
}

.services--static .service-card.is-expanded .service-image img {
  transform: scale(1);
}

.services--static .service-card:nth-child(3) .service-image img {
  object-position: center 30%;
}

.services--static .service-image::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 14, 9, 0.04) 22%, rgba(20, 14, 9, 0.26) 52%, rgba(20, 14, 9, 0.92) 100%),
    linear-gradient(90deg, rgba(20, 14, 9, 0.16), transparent 58%);
  opacity: 0.86;
  transition: opacity 500ms ease;
}

.services--static .service-card.is-expanded .service-image::after {
  opacity: 1;
}

.services--static .number {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  top: clamp(18px, 2vw, 30px);
  left: clamp(18px, 2vw, 30px);
  width: 48px;
  height: 48px;
  color: var(--warm-ivory);
  border: 1px solid rgba(243, 237, 224, 0.48);
  border-radius: 50%;
  background: rgba(35, 26, 16, 0.42);
  font-size: 1rem;
  backdrop-filter: blur(6px);
}

.services--static .service-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(28px, 3.25vw, 54px);
  color: var(--warm-ivory);
  background: transparent;
  text-align: left;
}

.services--static .service-card:not(.is-expanded) .service-content {
  align-items: center;
  padding: 32px 20px;
}

.services--static .service-card h3 {
  margin: 0;
  color: var(--warm-ivory);
  font-size: clamp(3.4rem, 5.3vw, 6.7rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-shadow: 0 3px 24px rgba(20, 14, 9, 0.32);
  transition:
    font-size 650ms var(--ease-out),
    transform 650ms var(--ease-out);
}

.services--static .service-card:not(.is-expanded) h3 {
  margin: 0 auto;
  font-size: clamp(1.55rem, 1.9vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.services--static .service-details {
  display: flex;
  max-width: 600px;
  flex-direction: column;
  align-items: flex-start;
  visibility: hidden;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 430ms ease,
    transform 650ms var(--ease-out),
    visibility 0s linear 650ms;
}

.services--static .service-card.is-expanded .service-details {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 520ms ease 180ms,
    transform 700ms var(--ease-out) 120ms,
    visibility 0s linear 0s;
}

.services--static .service-subheading {
  margin: 12px 0 22px;
  color: #dda66e;
  font-size: var(--text-lead);
  text-align: left;
}

.services--static .service-description {
  max-width: 56ch;
  margin: 0;
  color: rgba(243, 237, 224, 0.88);
  font-size: var(--text-body);
  line-height: 1.65;
}

.services--static .service-description + .service-description {
  margin-top: 12px;
}

.services--static .service-link {
  align-self: flex-start;
  margin-top: clamp(22px, 3vh, 34px);
  padding: 0 0 8px;
  color: var(--warm-ivory);
  border-bottom: 1px solid rgba(221, 166, 110, 0.78);
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
  transform: none;
}

.services--static .service-link:hover,
.services--static .service-link:focus-visible {
  color: #dda66e;
  border-color: #dda66e;
  transform: translateX(5px);
}

@media (max-width: 940px) {
  .services-stage {
    display: grid;
  }

  .services--static .service-grid {
    width: min(100%, 760px);
    height: clamp(780px, 120svh, 980px);
    flex-direction: column;
    gap: 12px;
    margin-inline: auto;
  }

  .services--static .service-card,
  .services--static .service-card:hover,
  .services--static .service-card:focus-within {
    min-height: 0;
    flex: 1 1 0;
    border-radius: 22px;
    transform: none;
  }

  .services--static .service-card.is-expanded,
  .services--static .service-card.is-expanded:hover,
  .services--static .service-card.is-expanded:focus-within {
    flex-grow: 3.4;
    transform: none;
  }

  .services--static .service-card:not(.is-expanded) .service-content {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px 24px;
  }

  .services--static .service-card:not(.is-expanded) h3 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .services--static .service-card.is-expanded h3 {
    font-size: clamp(3.2rem, 12vw, 5.4rem);
  }

  .services--static .service-content {
    padding: clamp(26px, 7vw, 42px);
  }

  .services--static .service-description {
    font-size: var(--text-body);
    line-height: 1.55;
  }
}

@media (max-width: 700px) {
  .services--static .service-card .number {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
    top: 14px;
    left: 14px;
  }

  .services--static .services-heading h2 {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services--static .service-card,
  .services--static .service-image img,
  .services--static .service-details,
  .services--static .service-card h3 {
    transition: none;
  }
}

/* Legacy about page classes retained below. */
.about-experiences {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    max(104px, 12vh)
    clamp(20px, 4vw, 64px)
    clamp(64px, 8vh, 92px);
  overflow: hidden;
  color: var(--warm-ivory, #f3ede0);
  background:
    linear-gradient(180deg, rgba(35, 26, 16, 0.28), rgba(35, 26, 16, 0.62)),
    url("../assets/images/shared/Shared_Safari_Landscape-optimised.webp") center 52% / cover no-repeat;
}

.about-experiences__stage {
  width: min(100%, 1600px);
  display: grid;
  gap: clamp(30px, 4.2vh, 48px);
  margin-inline: auto;
}

.about-experiences__heading {
  width: 100%;
  text-align: center;
}

.about-experiences__heading p {
  margin: 0 0 8px;
  color: #c48a56;
  font: var(--weight-label) var(--text-label)/1.4 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.about-experiences__heading h2 {
  margin: 0;
  color: var(--warm-ivory, #f3ede0);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  font-weight: 300;
  line-height: 0.94;
  white-space: nowrap;
}

.about-experiences__grid {
  width: 100%;
  height: clamp(590px, 68svh, 780px);
  display: flex;
  gap: clamp(12px, 1.35vw, 22px);
}

.about-experiences__card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  flex: 1 1 0;
  overflow: hidden;
  color: var(--warm-ivory, #f3ede0);
  border: 1px solid rgba(243, 237, 224, 0.32);
  border-radius: clamp(24px, 2.1vw, 34px);
  background: var(--espresso, #231a10);
  box-shadow: 0 18px 48px rgba(20, 14, 9, 0.24);
  cursor: pointer;
  filter: brightness(0.7) saturate(0.82);
  isolation: isolate;
  transition:
    flex-grow 850ms var(--ease-out),
    filter 650ms ease,
    transform 650ms var(--ease-out),
    border-color 450ms ease,
    box-shadow 650ms ease;
}

.about-experiences__card.is-expanded {
  flex-grow: 4;
  border-color: rgba(243, 237, 224, 0.72);
  box-shadow: 0 32px 82px rgba(20, 14, 9, 0.38);
  filter: brightness(1) saturate(1);
  transform: translateY(-6px);
}

.about-experiences__card:focus-visible {
  outline: 2px solid var(--warm-ivory, #f3ede0);
  outline-offset: 5px;
}

.about-experiences__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.about-experiences__image::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.86;
  background:
    linear-gradient(180deg, rgba(20, 14, 9, 0.04) 22%, rgba(20, 14, 9, 0.26) 52%, rgba(20, 14, 9, 0.92) 100%),
    linear-gradient(90deg, rgba(20, 14, 9, 0.16), transparent 58%);
  content: "";
  pointer-events: none;
  transition: opacity 500ms ease;
}

.about-experiences__card.is-expanded .about-experiences__image::after {
  opacity: 1;
}

.about-experiences__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.03);
  transform: scale(1.09);
  transition: transform 1000ms var(--ease-out);
}

.about-experiences__card.is-expanded .about-experiences__image img {
  transform: scale(1);
}

.about-experiences__card:first-child .about-experiences__image img {
  object-position: center 58%;
}

.about-experiences__card:nth-child(3) .about-experiences__image img {
  object-position: center 30%;
}

.about-experiences__number {
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  left: clamp(18px, 2vw, 30px);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--warm-ivory, #f3ede0);
  border: 1px solid rgba(243, 237, 224, 0.48);
  border-radius: 50%;
  background: rgba(35, 26, 16, 0.42);
  font: 400 1rem/1 var(--font-display);
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
}

.about-experiences__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(28px, 3.25vw, 54px);
  color: var(--warm-ivory, #f3ede0);
}

.about-experiences__card:not(.is-expanded) .about-experiences__content {
  align-items: center;
  padding: 32px 20px;
}

.about-experiences__content h3 {
  margin: 0;
  color: var(--warm-ivory, #f3ede0);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5.3vw, 6.7rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-shadow: 0 3px 24px rgba(20, 14, 9, 0.32);
  transition:
    font-size 650ms var(--ease-out),
    transform 650ms var(--ease-out);
}

.about-experiences__card:not(.is-expanded) h3 {
  margin: 0 auto;
  font-size: clamp(1.55rem, 1.9vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.about-experiences__details {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  visibility: hidden;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 430ms ease,
    transform 650ms var(--ease-out),
    visibility 0s linear 650ms;
}

.about-experiences__card.is-expanded .about-experiences__details {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 520ms ease 180ms,
    transform 700ms var(--ease-out) 120ms,
    visibility 0s linear 0s;
}

.about-experiences__subheading {
  margin: 12px 0 22px;
  color: #dda66e;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-style: italic;
  line-height: 1.15;
}

.about-experiences__description {
  max-width: 56ch;
  margin: 0;
  color: rgba(243, 237, 224, 0.88);
  font-size: var(--text-body);
  line-height: 1.65;
}

.about-experiences__description + .about-experiences__description {
  margin-top: 12px;
}

.about-experiences__coming-soon {
  color: #dda66e;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-experiences__link {
  align-self: flex-start;
  margin-top: clamp(22px, 3vh, 34px);
  padding: 0 0 8px;
  color: var(--warm-ivory, #f3ede0);
  border-bottom: 1px solid rgba(221, 166, 110, 0.78);
  font: var(--weight-label) var(--text-label)/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.about-experiences__link:hover,
.about-experiences__link:focus-visible {
  color: #dda66e;
  border-color: #dda66e;
  transform: translateX(5px);
}

.about-built-from-within {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--limestone, #e9e2d6);
  isolation: isolate;
}

.about-built-from-within__portrait {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.94) contrast(1);
}

.about-built-from-within__content {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  max-width: 820px;
  padding:
    max(112px, 14vh)
    clamp(38px, 7vw, 118px)
    clamp(70px, 9vh, 104px);
}

.about-built-from-within__label {
  margin: 0 0 18px;
  color: var(--warm-stone, #a7947e);
  font: var(--weight-label) var(--text-label)/1.4 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-built-from-within__content h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 5.4vw, 6.8rem);
  font-weight: 300;
  line-height: 0.9;
}

.about-built-from-within__rule {
  width: 72px;
  height: 1px;
  margin: 0 0 28px;
  background: var(--bronze, #8c6240);
}

.about-built-from-within__content p:not(.about-built-from-within__label) {
  margin: 0 0 22px;
  color: rgba(35, 26, 16, 0.84);
  font-size: var(--text-body);
  line-height: 1.62;
}

.home-vision {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  color: var(--espresso, #231a10);
  background:
    radial-gradient(circle at 82% 18%, rgba(140, 98, 64, 0.12), transparent 30rem),
    var(--warm-ivory, #f3ede0);
  isolation: isolate;
}

.home-vision__media {
  position: relative;
  /* Match Journeys' final photograph: a 3:4 frame with a 650px desktop floor.
     Centre it beside longer copy rather than stretching the portrait. */
  width: 100%;
  min-height: 650px;
  aspect-ratio: 3 / 4;
  align-self: center;
  overflow: hidden;
}

.home-vision__media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(35, 26, 16, 0.08), transparent 58%),
    linear-gradient(270deg, rgba(243, 237, 224, 0.26), transparent 24%),
    linear-gradient(180deg, transparent 58%, rgba(35, 26, 16, 0.28));
  content: "";
  pointer-events: none;
}

/* The photograph renders at its finished state straight away: the previous
   scale-in waited for the chapter to become the most visible section, which on
   phones and tablets left an empty band where the image should have been. */
.home-vision__image {
  /* Fill the reserved frame without the portrait's intrinsic height stretching
     the entire section. Keep the head and sunset in the shorter crop. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% bottom;
}

.home-vision__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(64px, 7vh, 88px)
    clamp(38px, 7vw, 118px);
}

.home-vision__eyebrow {
  margin: 0 0 var(--space-eyebrow);
  color: var(--bronze, #8c6240);
  font: var(--weight-label) var(--text-label)/var(--leading-label) var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.home-vision h2 {
  max-width: 720px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-1);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.home-vision__rule {
  width: min(170px, 34%);
  height: 1px;
  margin: clamp(28px, 4vh, 42px) 0;
  background: rgba(140, 98, 64, 0.58);
}

.home-vision__body {
  display: grid;
  max-width: 640px;
  gap: 14px;
}

.home-vision__body p {
  margin: 0;
  color: rgba(35, 26, 16, 0.78);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

.home-vision__closing {
  display: grid;
  gap: 5px;
  margin-top: clamp(24px, 4vh, 38px);
  /* The closing line and the button sit centred beneath the copy. */
  text-align: center;
}

.home-vision__closing p {
  color: var(--espresso, #231a10);
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading-sm);
}

.home-vision__closing p + p {
  color: var(--bronze, #8c6240);
  font-style: italic;
}

.home-vision__cta {
  --btn-primary-fill: var(--taupe);
  --btn-primary-ink: var(--espresso);
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: var(--btn-arrow-gap, 16px);
  margin-top: clamp(28px, 4vh, 42px);
  padding: 16px 26px;
  color: var(--btn-primary-ink, #f3ede0);
  border: 1px solid var(--btn-primary-fill, #231a10);
  border-radius: var(--btn-radius, 999px);
  background: var(--btn-primary-fill, #231a10);
  box-shadow: 0 10px 24px rgba(140, 98, 64, 0.24);
  font: var(--weight-label) var(--text-label)/var(--leading-label) var(--font-body);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

/* Fill holds still; the arrow is the hover signal. */
.home-vision__cta:hover,
.home-vision__cta:focus-visible {
  opacity: .9;
  box-shadow: 0 14px 30px rgba(35, 26, 16, 0.3);
  transform: translateY(-3px);
}

/* This button had no arrow rule at all, so the glyph simply sat there. It now
   matches every other CTA: hidden until the pointer arrives, then fades and
   slides in. Touch keeps it, having no hover to reveal it. */
.home-vision__cta span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 200ms ease, opacity 180ms ease,
    max-width 220ms ease, margin-left 220ms ease;
}
/* The flex gap is zeroed as well, or a zero-width arrow still leaves its gap. */
@media (hover: hover) and (pointer: fine) {
  .home-vision__cta { gap: 0; }
  .home-vision__cta span[aria-hidden="true"] {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
  }
  /* Label follows the arrow left, keeping the distance between them fixed. */
  .home-vision__cta:hover span:first-child,
  .home-vision__cta:focus-visible span:first-child {
    transform: translateX(var(--btn-arrow-shift, -4px));
  }
  .home-vision__cta:hover span[aria-hidden="true"],
  .home-vision__cta:focus-visible span[aria-hidden="true"] {
    max-width: 2.5em;
    margin-left: var(--btn-arrow-gap, 16px);
    opacity: 1;
    transform: translateX(4px);
  }
}

.about-institutional {
  min-height: 100svh;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: #ded7cc;
}

.about-institutional__panel {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(60px, 1fr) auto auto;
  padding:
    max(112px, 12vh)
    clamp(32px, 6vw, 112px)
    clamp(38px, 5vh, 62px);
  overflow: hidden;
  color: #f8f5ef;
  border: 0;
  border-radius: 0;
  background: #231a10;
  isolation: isolate;
}

.about-institutional__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-institutional__background-layer {
  position: absolute;
  inset: -2%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 700ms var(--ease-out),
    transform 1100ms var(--ease-out);
  will-change: opacity, transform;
}

.about-institutional__background-layer.is-visible {
  opacity: 1;
  transform: scale(1);
}

.about-institutional__panel::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 16, 13, 0.44);
  content: "";
}

.about-institutional__panel::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  border-radius: 0;
  content: "";
  pointer-events: none;
}

.about-institutional__heading {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.about-institutional__eyebrow {
  margin: 0 0 18px;
  color: rgba(248, 245, 239, 0.84);
  font: var(--weight-label) var(--text-label)/1.4 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-institutional__heading h2 {
  max-width: 760px;
  margin: 0;
  color: #f8f5ef;
  font-family: var(--font-body);
  font-size: clamp(3.2rem, 5.6vw, 6.4rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.about-institutional__heading-accent {
  color: #c48a56;
}

.about-institutional__track {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 1.5vw, 24px);
}

.about-institutional__card {
  min-width: 0;
  height: clamp(250px, 23vw, 310px);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 36px);
  overflow: hidden;
  color: #191714;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: clamp(24px, 2vw, 30px);
  background: rgba(226, 224, 219, 0.34);
  box-shadow: none;
  font: inherit;
  text-align: left;
  opacity: 0.9;
  cursor: pointer;
  transform: scale(0.985);
  transform-origin: center bottom;
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
  backdrop-filter: blur(14px) saturate(0.8);
  transition:
    flex-grow 650ms var(--ease-out),
    height 650ms var(--ease-out),
    color 500ms ease,
    background-color 650ms var(--ease-out),
    border-color 500ms ease,
    opacity 500ms ease,
    transform 650ms var(--ease-out),
    -webkit-backdrop-filter 650ms ease,
    backdrop-filter 650ms ease;
}

.about-institutional__card.is-selected {
  height: clamp(380px, 33vw, 450px);
  flex-grow: 1.4;
  color: #171512;
  border-color: rgba(255, 255, 255, 0.86);
  background: rgba(250, 249, 246, 0.98);
  opacity: 1;
  transform: scale(1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.about-institutional__card:hover {
  opacity: 1;
}

.about-institutional__card:focus-visible {
  outline: 2px solid #171512;
  outline-offset: -7px;
}

.about-institutional__icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
  margin-bottom: auto;
  color: currentColor;
}

.about-institutional__icon::before,
.about-institutional__icon::after,
.about-institutional__icon span::before,
.about-institutional__icon span::after {
  position: absolute;
  display: block;
  border-color: currentColor;
  content: "";
}

.about-institutional__icon--discover::before {
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.about-institutional__icon--discover::after {
  top: 10px;
  left: 13px;
  width: 6px;
  height: 12px;
  border: 1.5px solid currentColor;
  transform: rotate(38deg) skewY(-18deg);
}

.about-institutional__icon--belong::before {
  top: 5px;
  left: 5px;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.about-institutional__icon--belong::after {
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.about-institutional__icon--belong span::before {
  top: 18px;
  left: 2px;
  width: 16px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 12px 12px 0 0;
}

.about-institutional__icon--belong span::after {
  top: 18px;
  right: 2px;
  width: 16px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 12px 12px 0 0;
}

.about-institutional__icon--protect::before {
  top: 5px;
  left: 7px;
  width: 19px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 11px 11px 13px 13px;
  transform: scaleX(0.88);
}

.about-institutional__icon--protect::after {
  top: 11px;
  left: 13px;
  width: 8px;
  height: 5px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.about-institutional__copy {
  display: grid;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 46px);
}

.about-institutional__title {
  display: block;
  max-width: 25ch;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.about-institutional__description {
  display: block;
  max-width: 48ch;
  color: rgba(25, 23, 20, 0.72);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  opacity: 0.82;
  transform: translateY(5px);
  transition:
    opacity 500ms ease,
    transform 650ms var(--ease-out);
}

.about-institutional__card:not(.is-selected) .about-institutional__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.about-institutional__card.is-selected .about-institutional__description {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.about-institutional__details {
  width: 100%;
  max-height: 0;
  display: grid;
  gap: 14px;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition:
    max-height 600ms var(--ease-out),
    margin-top 600ms var(--ease-out),
    opacity 420ms ease,
    transform 600ms var(--ease-out);
}

.about-institutional__card.is-selected .about-institutional__details {
  max-height: 72px;
  margin-top: 22px;
  opacity: 1;
  transform: translateY(0);
}

.about-institutional__divider {
  width: 100%;
  height: 1px;
  background: rgba(25, 23, 20, 0.2);
}

.about-institutional__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(25, 23, 20, 0.62);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-institutional__controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 22px;
}

.about-institutional__cta {
  display: inline-flex;
  align-items: center;
  padding: 0 0 7px;
  color: #f8f5ef;
  border-bottom: 1px solid rgba(248, 245, 239, 0.58);
  font: var(--weight-label) var(--text-label)/1.3 var(--font-body);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.about-institutional__cta:hover,
.about-institutional__cta:focus-visible {
  color: #ffffff;
  border-color: #ffffff;
  transform: translateX(4px);
}

.about-institutional__arrows {
  display: flex;
  gap: 8px;
}

.about-institutional__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  padding: 0;
  place-items: center;
  color: #f8f5ef;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(226, 224, 219, 0.18);
  font: 300 1.15rem/1 var(--font-body);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.about-institutional__arrow:hover,
.about-institutional__arrow:focus-visible {
  color: #171512;
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(250, 249, 246, 0.94);
  transform: translateY(-2px);
}

.about-institutional__arrow:focus-visible {
  outline: 0;
}

.about-institutional__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 940px) {
  .about-experiences {
    min-height: auto;
    padding: 72px clamp(20px, 5vw, 48px);
  }

  .about-experiences__heading h2 {
    white-space: normal;
  }

  .about-experiences__grid {
    width: min(100%, 760px);
    height: clamp(780px, 120svh, 980px);
    flex-direction: column;
    gap: 12px;
    margin-inline: auto;
  }

  .about-experiences__card {
    min-height: 0;
    flex: 1 1 0;
    border-radius: 22px;
    transform: none;
  }

  .about-experiences__card.is-expanded {
    flex-grow: 3.4;
    transform: none;
  }

  .about-experiences__card:not(.is-expanded) .about-experiences__content {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px 24px;
  }

  .about-experiences__card:not(.is-expanded) h3 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .about-experiences__card.is-expanded h3 {
    font-size: clamp(3.2rem, 12vw, 5.4rem);
  }

  .about-experiences__content {
    padding: clamp(26px, 7vw, 42px);
  }

  .about-experiences__description {
    font-size: var(--text-body);
    line-height: 1.55;
  }

  .about-built-from-within {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .about-built-from-within__content {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding: 72px clamp(24px, 7vw, 72px) 82px;
  }

  .about-built-from-within__portrait {
    grid-column: 1;
    grid-row: 2;
    height: 58svh;
    min-height: 420px;
    object-position: center 18%;
  }

  .about-institutional {
    min-height: 100svh;
    padding: 0;
  }

  .about-institutional__panel {
    min-height: max(100svh, 920px);
    grid-template-rows: auto minmax(70px, 1fr) auto auto;
    padding: max(104px, 10vh) clamp(20px, 4vw, 36px) 26px;
    border-radius: 0;
    background-position: 42% 50%;
  }

  .about-institutional__heading h2 {
    max-width: 620px;
    font-size: clamp(3rem, 9vw, 5.2rem);
  }

  .about-institutional__track {
    gap: 14px;
    margin-inline: calc(clamp(20px, 4vw, 36px) * -1);
    padding: 8px 7% 14px;
    overflow-x: auto;
    scroll-padding-inline: 7%;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .about-institutional__track::-webkit-scrollbar {
    display: none;
  }

  .about-institutional__card,
  .about-institutional__card.is-selected {
    width: auto;
    height: 520px;
    flex: 0 0 min(84vw, 420px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: none;
  }
}

/* Keep the same image height and stacking breakpoint as Journeys. */
@media (max-width: 900px) {
  .home-vision {
    grid-template-columns: 1fr;
  }

  /* The photograph is a 2:3 portrait with the giraffe's head in its top 14%
     and the Zuvani lockup in its bottom 5%. The old 62vw band could hold one
     or the other, and it kept the head, so the lockup was cropped away on
     every phone and tablet. A 3:4 frame shows 89% of the height, enough for
     both, and 90% vertical positioning leaves them about equally clear of
     the top and bottom edges (roughly 3.5% of the image each). */
  .home-vision__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .home-vision__image {
    object-position: 56% 90%;
  }

  .home-vision__content {
    padding: 72px clamp(24px, 7vw, 72px) 82px;
  }
}

/* On tablets a full-bleed 3:4 frame would run to 1100px tall, so the
   portrait is inset to the same side gutters as the copy beneath it, which
   keeps its left edge on the text's left edge. Phones keep it full-bleed. */
@media (min-width: 621px) and (max-width: 900px) {
  .home-vision__media {
    width: calc(100% - 2 * clamp(24px, 7vw, 72px));
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .about-built-from-within__content {
    padding-inline: 20px;
  }

  .about-built-from-within__content h2 {
    font-size: clamp(3.8rem, 17vw, 5.8rem);
  }

  .about-institutional {
    padding-inline: 0;
  }

  .about-institutional__panel {
    min-height: max(100svh, 900px);
    padding: 100px 18px 22px;
    border-radius: 0;
  }

  .about-institutional__heading h2 {
    font-size: clamp(2.7rem, 13vw, 4.1rem);
  }

  .about-institutional__track {
    margin-inline: -18px;
  }

  .about-institutional__card,
  .about-institutional__card.is-selected {
    height: 520px;
    flex-basis: min(86vw, 370px);
    padding: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-experiences__card,
  .about-experiences__image img,
  .about-experiences__details,
  .about-experiences__content h3 {
    transition: none;
  }

  .home-vision__image {
    transform: none !important;
    transition: none;
  }

  .about-institutional__card,
  .about-institutional__background-layer,
  .about-institutional__description,
  .about-institutional__details,
  .about-institutional__arrow {
    transition: none;
  }
}