/* 09 · About page */
/* About: portrait-led introduction, purpose, values, and practice film. */
.jr-about-page {
  color: #233e50;
}
.jr-about-page .jr-breadcrumb {
  max-width: 1280px;
}
.jr-about-introduction,
.jr-about-purpose,
.jr-about-values,
.jr-about-wellness,
.jr-about-film {
  width: min(1220px, calc(100% - 64px));
  margin-inline: auto;
}
.jr-about-introduction {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  padding: 40px 0 88px;
}
.jr-about-portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #dedcda;
  align-self: stretch;
}
.jr-about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  max-height: 650px;
  object-fit: cover;
  object-position: center top;
}
.jr-about-portrait::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, #1026379e);
  pointer-events: none;
}
.jr-about-portrait figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  color: white;
  font:
    italic 30px/1.2 Georgia,
    serif;
  letter-spacing: -0.03em;
}
.jr-about-portrait figcaption span {
  display: block;
  margin-top: 9px;
  font:
    10px/1.5 Arial,
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jr-about-opening > .jr-label {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #527184;
  margin: 0 0 24px;
}
.jr-about-opening > .jr-label::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: #527184;
}
.jr-inner .jr-about-page h1 {
  font:
    400 clamp(32px, 3.35vw, 51px)/1.17 Georgia,
    "Times New Roman",
    serif !important;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.jr-about-opening blockquote {
  margin: 0;
  padding: 26px 28px;
  background: #f5f8fc;
  border: 1px solid #e0e7ed;
  border-left: 3px solid #487b99;
  border-radius: 4px 20px 20px 4px;
  color: #365a72;
  font:
    italic 21px/1.65 Georgia,
    serif;
}
.jr-about-page h2 {
  font:
    400 clamp(34px, 3.7vw, 52px)/1.12 Georgia,
    serif;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.jr-about-page h2 em {
  font:
    italic 1em Georgia,
    serif;
  color: #487b99;
}
.jr-about-purpose {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 80px);
  padding: 64px 0;
  border-top: 1px solid #dae3e8;
}
.jr-about-purpose > p {
  margin: 0;
  font:
    17px/1.85 Arial,
    sans-serif;
  max-width: 65ch;
  color: #657781;
}
.jr-about-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 0 0 80px;
}
.jr-about-value {
  border-top: 1px solid #cddbe4;
  padding-top: 24px;
}
.jr-about-value > span {
  font:
    11px/1 Arial,
    sans-serif;
  color: #7196ad;
}
.jr-about-value h3 {
  margin: 22px 0 12px;
  font:
    400 25px/1.2 Georgia,
    serif;
  letter-spacing: -0.03em;
}
.jr-about-value p {
  margin: 0;
  font:
    14px/1.75 Arial,
    sans-serif;
  color: #6d7f88;
}
.jr-about-wellness {
  padding: 60px 0 80px;
  border-top: 1px solid #dae3e8;
}
.jr-about-wellness-heading {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 60px;
  margin-bottom: 36px;
}
.jr-about-wellness-heading p {
  margin: 0;
  font:
    16px/1.8 Arial,
    sans-serif;
  color: #6d7f88;
}
.jr-about-gallery {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 18px;
}
.jr-about-gallery img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 18px;
}
.jr-about-film {
  padding: 0 0 80px;
}
.jr-about-film .jr-label {
  margin: 0 0 16px;
}
.jr-about-film .jr-landscape-video {
  margin: 30px 0 0;
  max-width: none;
  border-radius: 20px;
}
@media (max-width: 900px) {
  .jr-about-introduction {
    gap: 32px;
  }
  .jr-about-portrait img {
    min-height: 520px;
  }
  .jr-about-opening blockquote {
    padding: 22px;
    font-size: 19px;
  }
  .jr-about-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .jr-about-gallery img {
    height: 220px;
  }
}
@media (max-width: 640px) {
  .jr-about-introduction,
  .jr-about-purpose,
  .jr-about-values,
  .jr-about-wellness,
  .jr-about-film {
    width: calc(100% - 48px);
  }
  .jr-about-introduction {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 26px 0 52px;
  }
  .jr-about-portrait {
    width: min(100%, 380px);
    justify-self: center;
  }
  .jr-about-portrait img {
    min-height: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 4/5;
  }
  .jr-about-portrait figcaption {
    left: 24px;
    bottom: 24px;
    font-size: 27px;
  }
  .jr-inner .jr-about-page h1 {
    font-size: 34px !important;
  }
  .jr-about-opening blockquote {
    font-size: 19px;
    padding: 22px;
  }
  .jr-about-purpose {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 44px 0;
  }
  .jr-about-purpose > p {
    font-size: 16px;
  }
  .jr-about-values {
    padding-bottom: 48px;
    gap: 28px 22px;
  }
  .jr-about-value h3 {
    font-size: 23px;
  }
  .jr-about-wellness {
    padding: 44px 0 52px;
  }
  .jr-about-wellness-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .jr-about-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .jr-about-gallery img {
    height: 170px;
  }
  .jr-about-gallery img:first-child {
    grid-column: 1/-1;
    height: 240px;
  }
  .jr-about-film {
    padding-bottom: 52px;
  }
}
@media (max-width: 380px) {
  .jr-about-values {
    grid-template-columns: 1fr;
  }
}


/* Shared elements needed by the original About design. */
.page-about { background: #fff; }
.page-about .jr-about-page { padding-top: 110px; }
.jr-about-page .jr-label { font: 400 11px/1.5 Arial,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.jr-about-page .jr-breadcrumb { display: flex; align-items: center; gap: 12px; width: min(1220px,calc(100% - 64px)); margin: 0 auto 12px; font: 12px/1.65 Arial,sans-serif; color: #657781; }
.jr-about-page .jr-landscape-video { width: 100%; background: #172026; overflow: hidden; }
.jr-about-page .jr-landscape-video video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: #172026; }
.page-about .practice-footer { background: #1b3442; }
.page-about .practice-footer-brand > p { font-family: Georgia,serif; letter-spacing: -.035em; }
@media(max-width:760px) { .page-about .jr-about-page { padding-top: 90px; } }
@media(max-width:640px) { .jr-about-page .jr-breadcrumb { width: calc(100% - 48px); } }

/* Fine slate-blue dividers between the four values, without a panel. */
.jr-about-values { gap: 0; }
.jr-about-value { border-top: 0; padding: 8px clamp(18px, 2.2vw, 32px); }
.jr-about-value + .jr-about-value { border-left: 1px solid #64749c50; }
.jr-about-value:first-child { padding-left: 0; }
.jr-about-value:last-child { padding-right: 0; }
@media (min-width: 641px) and (max-width: 900px) {
  .jr-about-values { row-gap: 28px; }
  .jr-about-value:nth-child(3) { border-left: 0; padding-left: 0; }
  .jr-about-value:nth-child(even) { padding-right: 0; }
  .jr-about-value:nth-child(n+3) { border-top: 1px solid #64749c50; padding-top: 28px; }
}
@media (max-width: 640px) {
  .jr-about-values { grid-template-columns: 1fr; gap: 0; }
  .jr-about-value { padding: 26px 0; }
  .jr-about-value + .jr-about-value { border-left: 0; border-top: 1px solid #64749c50; }
  .jr-about-value:first-child { padding-top: 0; }
  .jr-about-value:last-child { padding-bottom: 0; }
}