/* The two proposals share one layout and the same visual hierarchy. */
.experiences-page .page-hero {
  min-height: 530px;
  padding-block: 150px 64px;
}
.experiences-page .page-hero > img { object-position: center 45%; }
.experiences-page .page-hero h1 { font-size: clamp(3.25rem, 6vw, 6.4rem); max-width: 1000px; }
.experiences-page .page-hero p:last-child { max-width: 670px; margin-bottom: 0; }
.experiences-page .experiences-section { max-width: 1560px; margin-inline: auto; padding: 64px 7vw 80px; }
.experiences-page .experiences-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px 6vw;
  margin-bottom: 32px;
}
.experiences-page .experiences-heading .eyebrow { margin-bottom: 14px; }
.experiences-page .experiences-heading h2 { font-size: clamp(2.6rem, 4.2vw, 4.5rem); }
.experiences-page .experiences-heading > p:last-child { max-width: 570px; margin: 0; }
.experiences-page .experience-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin-bottom: 40px;
  border-block: 1px solid #17332935;
}
.experiences-page .experience-index a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding-block: 12px;
  font-size: .85rem;
  line-height: 1.45;
  text-decoration: none;
}
.experiences-page .experience-index span { color: #706344; font-size: .72rem; }
.experiences-page .experience-index a:hover { text-decoration: underline; text-underline-offset: 5px; }
.experiences-page .experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 28px;
  border: 0;
}
.experiences-page .experience-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid #1733292e;
  background: #f8f6f0;
  scroll-margin-top: 115px;
}
.experiences-page .experience-card .photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
  background: #d9dccf;
}
.experiences-page .experience-card .photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experiences-page .experience-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: clamp(24px, 3vw, 40px);
}
.experiences-page .experience-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.experiences-page .experience-card-meta .eyebrow { margin: 0; font-size: .68rem; letter-spacing: .16em; }
.experiences-page .experience-card-meta .experience-number { margin: 0; color: #706344; font-size: .72rem; }
.experiences-page .experience-card h3 { min-height: 2.1em; margin: 0 0 20px; font-size: clamp(2.1rem, 3.4vw, 3.7rem); line-height: 1.05; font-weight: 400; }
.experiences-page .experience-card-body > p { max-width: none; margin: 0 0 16px; }
.experiences-page .experience-card-bottom { margin-top: auto; padding-top: 16px; }
.experiences-page .experience-detail { border-top: 1px solid #17332926; padding-top: 18px; margin: 0 0 22px; font-size: .78rem; color: #59634f; }
.experiences-page .experience-card .button { width: 100%; min-height: 48px; padding: 14px 18px; font-size: .9rem; }
.experiences-page .experiences-note { max-width: 850px; margin: 28px 0 0; font-size: .9rem; color: #59634f; }

@media (min-width: 701px) and (max-width: 1100px) {
  .experiences-page .experiences-section { padding-inline: 5vw; }
  .experiences-page .experience-index { gap: 0 14px; }
  .experiences-page .experience-index a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; font-size: .8rem; }
  .experiences-page .experience-grid { gap: 22px; }
  .experiences-page .experience-card-body { padding: 26px; }
}

@media (max-width: 700px) {
  .experiences-page .page-hero { min-height: 0; padding: 140px 5vw 52px; }
  .experiences-page .page-hero h1 { font-size: clamp(2.75rem, 9vw, 4rem); }
  .experiences-page .page-hero p:last-child { font-size: 1rem; }
  .experiences-page .experiences-section { padding: 44px 5vw 56px; }
  .experiences-page .experiences-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
  .experiences-page .experiences-heading h2 { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .experiences-page .experience-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-bottom: 28px; }
  .experiences-page .experience-index a { min-height: 52px; font-size: .82rem; }
  .experiences-page .experience-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 24px; }
  .experiences-page .experience-card-body { padding: 26px 24px; }
  .experiences-page .experience-card h3 { font-size: clamp(2.15rem, 8vw, 3rem); }
  .experiences-page .experience-card-meta { margin-bottom: 18px; }
}