.about-page {
  background:#f6f8fc;
}

.about-hero {
  position:relative;
  overflow:hidden;
  text-align:center;
  background:radial-gradient(ellipse at 72% 45%,#f0eefa80,transparent 60%),linear-gradient(180deg,#fcfdff 0%,#f0f4fc 70%,#f6f8fc 100%);
  padding-top:76px;
}

.about-hero-copy {
  position:relative;
  z-index:1;
  padding-inline:24px;
}

.about-eyebrow {
  margin:0 0 24px;
  font-size:12px;
  font-weight:400;
  letter-spacing:2px;
  color:#71829d;
}

.about-hero h1 {
  font-size:clamp(42px,4.8vw,72px);
  font-weight:300;
  line-height:1.4;
  letter-spacing:-1.8px;
  margin:0 0 26px;
}

.about-hero h1 span {
  color:#3d6bd0;
}

.about-lead {
  font-size:18px;
  font-weight:300;
  color:var(--muted);
  line-height:1.9;
  margin:0;
}

.city-panorama {
  width:min(1800px,100%);
  margin:48px auto 0;
  padding:0 18px 32px;
}

.city-panorama img {
  display:block;
  width:100%;
  height:auto;
}

.city-panorama figcaption {
  font-size:12px;
  letter-spacing:3px;
  color:#7a8ca5;
  margin-top:-18px;
}

.city-panorama figcaption span {
  margin-left:16px;
  letter-spacing:2px;
  font-size:10px;
}

.about-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  padding-block:110px 100px;
  border-bottom:1px solid #dce3ed;
}

.about-eyebrow span {
  display:inline-block;
  margin-left:12px;
  font-size:10px;
  letter-spacing:1.5px;
}

.about-page main h2 {
  font-weight:300;
  font-size:clamp(30px,3vw,42px);
  line-height:1.65;
}

.about-prose {
  padding-top:30px;
  font-size:17px;
  font-weight:300;
  line-height:2.1;
  color:var(--muted);
}

.about-prose p {
  margin:0 0 18px;
}

.about-prose p:first-child {
  color:var(--ink);
  font-size:21px;
}

.about-values {
  padding-block:90px;
}

.value-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:54px;
  margin-top:50px;
}

.value-grid article {
  padding-top:22px;
  border-top:1px solid #ccd7e8;
}

.value-index {
  font-size:12px;
  color:#7a92b5;
  letter-spacing:2px;
}

.value-grid h3 {
  font-weight:300;
  font-size:24px;
  margin:20px 0 12px;
}

.value-grid p {
  font-size:15px;
  line-height:1.9;
  font-weight:300;
  color:var(--muted);
  margin:0;
}

.about-invitation {
  text-align:center;
  padding:66px 24px 90px;
}

.about-invitation .button {
  margin-top:32px;
}

.about-page .home-footer {
  margin-top:0;
}

@media(min-width:1600px) {
.about-hero {
  padding-top:96px;
}

.city-panorama {
  margin-top:64px;
}
}

@media(max-width:850px) {
.about-hero {
  padding-top:62px;
}

.city-panorama {
  width:120%;
  margin-left:-10%;
  margin-top:58px;
}

.about-intro {
  gap:40px;
  padding-block:76px;
}

.value-grid {
  gap:28px;
}

.value-grid h3 {
  font-size:21px;
}

.about-prose {
  font-size:16px;
}

.about-values {
  padding-block:70px;
}
}

@media(max-width:650px) {
.about-hero {
  padding-top:48px;
}

.about-hero h1 {
  font-size:39px;
  letter-spacing:-1px;
}

.about-lead {
  font-size:16px;
}

.city-panorama {
  width:115%;
  margin-left:-7.5%;
  margin-top:55px;
  padding-bottom:24px;
}

.city-panorama figcaption {
  font-size:10px;
  margin-top:5px;
}

.city-panorama figcaption span {
  font-size:9px;
  margin-left:8px;
}

.about-intro {
  grid-template-columns:1fr;
  gap:18px;
  padding-block:64px;
}

.about-prose {
  padding-top:0;
}

.about-eyebrow {
  font-size:11px;
}

.about-page main h2 {
  font-size:30px;
}

.value-grid {
  grid-template-columns:1fr;
  gap:32px;
  margin-top:32px;
}

.value-grid h3 {
  margin-top:12px;
  font-size:23px;
}

.about-values {
  padding-block:60px;
}

.about-invitation {
  padding-block:36px 70px;
}
}

.city-track {
  display:grid;
  touch-action:pan-y;
}

.city-slide {
  grid-area:1/1;
  margin:0;
  min-width:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(32px);
  transition:opacity .55s ease,transform .65s ease,visibility .65s;
  pointer-events:none;
}

.city-slide.is-active {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  pointer-events:auto;
}

.location-controls {
  padding:0 24px 38px;
}

.location-controls>p {
  margin:0 0 15px;
  color:#7a8ca5;
  font-size:12px;
  font-weight:300;
}

.location-controls>p span {
  font-size:10px;
  letter-spacing:1.4px;
  margin-left:12px;
}

.location-tabs {
  display:inline-flex;
  gap:5px;
  padding:5px;
  background:#e9eef7a6;
  border:1px solid #dbe3ef;
  border-radius:999px;
}

.location-tabs button {
  appearance:none;
  border:0;
  border-radius:999px;
  background:transparent;
  padding:11px 24px;
  font:inherit;
  font-size:14px;
  font-weight:300;
  color:var(--muted);
  cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s;
}

.location-tabs button[aria-selected="true"] {
  color:var(--ui-accent);
  background:#fff;
  box-shadow:0 2px 8px #52698a0b;
}

.location-tabs button:hover {
  color:var(--ui-accent);
}

.location-tabs button:focus-visible {
  outline:2px solid var(--ui-accent);
  outline-offset:3px;
}

@media(max-width:650px) {
.location-controls {
  padding-bottom:28px;
}

.location-tabs button {
  padding:10px 18px;
  font-size:13px;
}

.city-panorama figcaption span {
  display:block;
  margin:6px 0 0;
}

.city-panorama figcaption {
  letter-spacing:2px;
}
}

@media(prefers-reduced-motion:reduce) {
.city-slide {
  transition:none;
  transform:none;
}
}

.location-controls {
  padding:30px 24px 0;
}

.location-slider .city-panorama {
  margin-top:12px;
}

@media(max-width:650px) {
.location-controls {
  padding:26px 24px 0;
}

.location-slider .city-panorama {
  margin-top:24px;
}
}

.about-hero {
  height:auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding-top:36px;
}

.about-hero-copy {
  flex-shrink:0;
}

.about-hero-copy .about-eyebrow {
  margin-bottom:16px;
}

.about-hero h1 {
  font-size:clamp(40px,4.3vw,64px);
  line-height:1.3;
  margin-bottom:18px;
}

.location-slider {
  display:flex;
  flex-direction:column;
  min-height:0;
}

.location-controls {
  flex-shrink:0;
  padding:22px 24px 0;
}

.location-tabs {
  display:inline-grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:min(100%,420px);
}

.location-tabs button {
  width:100%;
  padding-inline:12px;
}

.location-slider .city-panorama {
  flex:1;
  min-height:0;
  width:min(1800px,100%);
  margin:0 auto;
  padding:0 18px 24px;
}

.city-slide {
  display:flex;
  flex-direction:column;
  min-height:0;
}

.city-panorama img {
  flex:none;
  min-height:0;
  max-height:calc(100svh - 510px);
  object-fit:contain;
  object-position:center bottom;
}

.city-panorama figcaption {
  flex-shrink:0;
  margin-top:0;
  line-height:1.7;
}

@media(max-width:650px) {
.about-hero {
  height:auto;
  min-height:0;
  max-height:none;
  padding-top:32px;
}

.about-hero h1 {
  font-size:36px;
}

.location-controls {
  padding-top:20px;
}

.location-tabs {
  width:min(100%,340px);
}

.location-slider .city-panorama {
  flex:none;
  min-height:0;
  width:115%;
  margin:14px 0 0 -7.5%;
  padding-bottom:28px;
}

.city-panorama img {
  flex:none;
  min-height:auto;
  max-height:none;
}

.city-panorama figcaption {
  margin-top:5px;
}
}