@charset "UTF-8";
/* Session photo layouts use the same rose typography as the rest of the site. */
.design-a.session-version .hero {
  padding:0 0 64px;
  background:var(--white);
}
.design-a.session-version .hero-inner {
  display:block;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0;
}
.design-a.session-version .session-scene {position:relative;isolation:isolate}
.design-a.session-version .hero-photo {
  display:block;
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:8/5;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  overflow:hidden;
  align-self:auto;
  grid-area:auto;
}
.design-a.session-version .hero-photo>img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 42%;
}
.design-a.session-version .hero-photo::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,254,253,.96) 0%,rgba(255,254,253,.92) 22%,rgba(255,254,253,.52) 32%,rgba(255,254,253,0) 40%);
}
.design-a.session-version .hero-heading {
  position:absolute;
  z-index:1;
  top:22%;
  left:4%;
  width:32%;
  margin:0;
  padding:0;
  border:0;
  grid-area:auto;
}
.design-a.session-version .hero .eyebrow {
  margin:0 0 6px;
  padding:0;
  font-size:var(--type-note);
  line-height:1.8;
  letter-spacing:0;
  color:var(--heading);
}
.design-a.session-version .hero-context {
  margin:0 0 6px;
  font-size:var(--type-body);
  line-height:1.8;
  color:var(--heading);
}
.design-a.session-version .hero-heading h1 {
  margin:0;
  font-size:var(--type-title);
  line-height:1.45;
  letter-spacing:0;
  color:var(--heading);
}
.design-a.session-version .hero-heading h1>span {
  padding:0;
  background:none;
  color:var(--accent);
}
.design-a.session-version .session-info {
  position:absolute;
  z-index:1;
  top:56%;
  left:4%;
  width:32%;
  margin:0;
  padding:0;
}
.design-a.session-version .hero-sub {margin:0;font-size:var(--type-body);line-height:1.9}
.design-a.session-version .hero-action {margin:20px 0 0;text-align:left}
.design-a.session-version .hero-action .button {width:100%;max-width:none;min-height:56px}
.design-a.session-version .hero-detail {margin:12px 0 0;font-size:var(--type-note);line-height:1.8}
.design-a.session-version .hero-introduction {
  width:calc(100% - 64px);
  max-width:780px;
  margin:40px auto 0;
  padding:0;
  font-size:var(--type-body);
  line-height:1.9;
}
.design-a.session-version .hero-introduction p+p {margin-top:1em}

@media (max-width:1100px) {
  .design-a.session-version .session-scene {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  .design-a.session-version .hero-photo {grid-area:1/1}
  .design-a.session-version .hero-photo::after {
    background:linear-gradient(180deg,rgba(255,254,253,0) 0%,rgba(255,254,253,0) 42%,rgba(255,254,253,.62) 60%,rgba(255,254,253,.92) 80%,rgba(255,254,253,.98) 100%);
  }
  .design-a.session-version .hero-heading {
    position:relative;
    inset:auto;
    grid-area:1/1;
    align-self:end;
    justify-self:start;
    width:auto;
    max-width:calc(100% - 64px);
    margin:0 32px 28px;
  }
  .design-a.session-version .session-info {
    position:static;
    grid-area:2/1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:32px;
    align-items:center;
    width:100%;
    padding:28px 32px 32px;
    background:var(--surface);
  }
  .design-a.session-version .hero-action {margin:0}
  .design-a.session-version .hero-introduction {margin-top:32px}
}
@media (max-width:760px) {
  .design-a.session-version .hero {padding-bottom:56px}
  .design-a.session-version .hero-photo {aspect-ratio:4/5}
  .design-a.session-version .hero-photo>img {object-position:68% 50%}
  .design-a.session-version .hero-heading {
    max-width:calc(100% - 48px);
    margin:0 24px 24px;
  }
  .design-a.session-version .hero-heading h1 {line-height:1.5}
  .design-a.session-version .session-info {display:block;padding:28px 24px 32px}
  .design-a.session-version .hero-action {margin-top:22px}
  .design-a.session-version .hero-action .button {font-size:16px;gap:12px;padding:16px;min-height:56px}
  .design-a.session-version .hero-introduction {width:calc(100% - 48px)}
}