/* Figma 10294:2297: a 7931 × 1080 horizontal editorial sequence. */
.about.about-story {
  --about-height: 100svh;
  --about-unit: calc(var(--about-height) / 1080);
  --about-space: calc(160 * var(--about-unit));
  --about-edge: var(--about-space);
  display: block;
  min-height: 0;
  padding: 0;
  background: #fff;
  color: #000;
}
.about-story-stage { height: var(--about-height); }
.about-story-viewport {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #aaa transparent;
}
.about-story-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  width: max-content;
  height: 100%;
  padding: 0;
}
.about-story-track > * { flex: none; }
.about-story-panel {
  height: 100%;
  background: var(--about-panel-color);
  color: #000;
}
.about-story-panel-opening {
  --about-panel-color: #753323;
  display: flex;
  align-items: flex-start;
  width: calc(915 * var(--about-unit) + var(--about-edge) + var(--about-space));
  padding-inline: var(--about-edge) var(--about-space);
  padding-block: var(--about-space);
  color: #fff;
}
.about-story-opening {
  width: calc(915 * var(--about-unit));
  font-size: calc(64 * var(--about-unit));
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
}
.about-story-photo {
  position: relative;
  align-self: stretch;
  width: calc(836 * var(--about-unit));
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.about-story-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.about-story-photo-wide { width: calc(1920 * var(--about-unit)); }
.about-story-photo-residences { width: calc(946 * var(--about-unit)); }
.about-story-photo-residences img { left: -54.42%; width: 204.56%; }
.about-story-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(495 * var(--about-unit) + 2 * var(--about-space));
  height: 100%;
  padding: var(--about-space);
}
.about-story-tagline {
  --about-panel-color: #b9bdaf;
  width: calc(1044 * var(--about-unit) + 2 * var(--about-space));
}
.about-story-tagline h3 {
  width: 100%;
  font-size: calc(104 * var(--about-unit));
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
}
.about-story-body {
  --about-panel-color: #f4f3dc;
  justify-content: flex-end;
  gap: calc(40 * var(--about-unit));
}
.about-story-future {
  --about-panel-color: #f4f4ea;
  width: calc(495 * var(--about-unit) + var(--about-space) + var(--about-edge));
  padding-inline-end: var(--about-edge);
  justify-content: space-between;
}
.about-story-column p {
  width: 100%;
  font-size: max(16px, calc(20 * var(--about-unit)));
  font-weight: 300;
  line-height: 1.4;
}
.about-story-subheading {
  width: 100%;
  font-size: max(24px, calc(40 * var(--about-unit)));
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
}
.about-story-message { display: grid; gap: calc(32 * var(--about-unit)); width: 100%; }
.about-story-body .about-story-support { max-width: calc(458 * var(--about-unit)); }
.about-story-message p { max-width: calc(440 * var(--about-unit)); }
.about-story .about-story-more {
  padding: calc(20 * var(--about-unit)) calc(24 * var(--about-unit)) calc(16 * var(--about-unit));
  font-size: max(14px, calc(20 * var(--about-unit)));
  line-height: 1;
  white-space: nowrap;
}
.about-story--scroll .about-story-stage { overflow: hidden; }
.about-story--scroll .about-story-viewport { overflow: visible; }
.about-story--active .about-story-track { will-change: transform; }
html[dir='rtl'] .about-story-opening,
html[dir='rtl'] .about-story-tagline h3,
html[dir='rtl'] .about-story-subheading { line-height: 1.3; }
html[dir='rtl'] .about-story-column p { line-height: 1.6; }
@media (max-width: 899px), (max-height: 599px) {
  .about.about-story {
    --about-height: max(560px, min(76svh, 760px));
    --about-space: 40px;
    --about-edge: 24px;
  }
  .about-story-viewport { scroll-snap-type: x proximity; }
  .about-story-track > * { scroll-snap-align: center; }
  .about-story-panel-opening { width: calc(min(84vw, 640px) + var(--about-edge) + var(--about-space)); }
  .about-story-opening { width: min(84vw, 640px); font-size: clamp(32px, 5vw, 48px); }
  .about-story-photo { width: min(84vw, 590px); }
  .about-story-photo-wide { width: min(120vw, 1080px); }
  .about-story-column { width: calc(min(84vw, 495px) + 2 * var(--about-space)); padding-block: 32px; }
  .about-story-tagline { width: calc(min(88vw, 700px) + 2 * var(--about-space)); }
  .about-story-future { width: calc(min(84vw, 495px) + var(--about-space) + var(--about-edge)); }
  .about-story-tagline h3 { font-size: clamp(44px, 8vw, 72px); }
  .about-story-column p { font-size: clamp(18px, 2.5vw, 22px); }
  .about-story-subheading { font-size: 28px; }
  .about-story-body { gap: 24px; }
  .about-story-message { gap: 24px; }
  .about-story-body .about-story-support,
  .about-story-message p { max-width: 100%; }
  .about-story .about-story-more { padding: 18px 20px 14px; font-size: 16px; }
}
@media (max-width: 599px) {
  .about.about-story { --about-space: 32px; }
  .about-story-opening { font-size: 32px; }
  .about-story-tagline h3 { font-size: clamp(36px, 9vw, 48px); }
}