/* Scroll-controlled sequences extend the existing hero. */
#top {
  --hero-opacity: 1;
  --hero-lift: 0px;
  --shade-opacity: 1;
  height: 3250svh;
}
#top .hero-copy, #top .hero-scroll {
  opacity: var(--hero-opacity) !important;
  transform: translate3d(0, var(--hero-lift), 0);
  transition: none !important;
}
#top .sequence-hero-shade { opacity: var(--shade-opacity); }
#top.sequence-past-opening .hero-intro-mark,
#top.sequence-past-opening .hero-intro-shade { visibility: hidden; }
header.sequence-navigation {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* A soft fade across the page keeps white links legible over the films. */
header.sequence-navigation::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 125px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgb(35 3 12 / 26%), transparent);
  transition: opacity .35s ease;
}
header.sequence-navigation--over-film::before { opacity: 1; }
/* The header keeps only the navigation at the right edge. */
main > header { justify-content: flex-end; }
main > header > a[aria-label="alfa homes — top"] { display: none; }
header.sequence-navigation > nav {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(1.25rem, 5vw, 5rem);
  transform: translateX(0);
  pointer-events: auto !important;
  transition: right .65s var(--ease-soft), transform .65s var(--ease-soft);
}
header.sequence-navigation--centered > nav {
  right: 50%;
  transform: translateX(50%);
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 3.3vw, 56px);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
header.sequence-navigation--centered > nav > a {
  display: flex;
  align-items: center;
  min-height: 48px;
  flex: none;
  white-space: nowrap;
  color: inherit !important;
  opacity: 1 !important;
  font-size: clamp(11px, .8vw, 13px);
  font-weight: 500;
  letter-spacing: .2em;
  text-shadow: none;
}
header.sequence-navigation--over-film > nav > a { text-shadow: 0 1px 14px rgb(35 3 12 / 38%); }
header.sequence-navigation > nav > a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
header.sequence-navigation--centered > nav > a > span { background: #c8102e !important; bottom: 8px; height: 2px; }
.sequence-developer-logo {
  position: absolute;
  z-index: 4;
  top: clamp(14px, 2.2vw, 25px);
  right: clamp(16px, 3vw, 44px);
  display: grid;
  place-items: center;
  width: clamp(115px, 10.5vw, 154px);
  min-height: 54px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .45s ease, transform .45s ease;
}
.sequence-developer-logo img { display: block; width: 100%; height: auto; max-height: 54px; object-fit: contain; }
header.sequence-navigation--centered > .sequence-developer-logo {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.sequence-developer-logo:focus-visible { outline: 2px solid #c8102e; outline-offset: 3px; }
@media (max-width: 640px) {
  header.sequence-navigation--centered > nav { top: 16px; gap: clamp(14px, 4vw, 24px); }
  header.sequence-navigation--centered > nav > a { min-height: 44px; font-size: 9px; letter-spacing: .1em; }
  main:has(> header.sequence-navigation--centered) .journey-gallery { padding-top: 82px; }
  .sequence-developer-logo { display: none; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .sequence-developer-logo { width: 88px; min-height: 44px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  header.sequence-navigation > nav, header.sequence-navigation::before { transition: none; }
}
.sequence-wash { position: absolute; inset: 0; pointer-events: none; }
.sequence-wash { background: rgb(13 18 12 / 4%); }
#top .eyebrow { font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.journey-anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.sequence-wash { background: rgb(13 18 12 / 4%); }
.hero-shade {
  opacity: var(--shade-opacity);
  background: linear-gradient(180deg, rgb(20 1 5 / 62%), rgb(20 1 5 / 16%) 30%, rgb(20 1 5 / 26%) 62%, rgb(20 1 5 / 86%)), radial-gradient(ellipse at 50% 46%, transparent, rgb(20 1 5 / 42%) 82%);
}
.hero-intro-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: var(--intro-opacity);
  pointer-events: none;
}
.hero-intro-mark img { width: clamp(150px, 16vw, 250px); filter: drop-shadow(0 8px 28px #0a000385); }
.hero-nav, .hero-copy, .hero-scroll {
  opacity: var(--hero-opacity);
  transform: translate3d(0, var(--hero-lift), 0);
  will-change: opacity;
}
.hero-nav {
  position: absolute;
  z-index: 3;
  inset: 26px 4% auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.city-seal { position: relative; display: grid; place-items: center; width: 80px; height: 80px; }
.city-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-seal span { font: 17px Georgia, serif; }
.hero-nav nav { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hero-nav nav a, .eyebrow, .hero-details dt {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.hero-nav nav a { opacity: .85; }
.hero-nav nav a:hover { opacity: 1; }
.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10svh 5% 12svh;
  text-align: center;
  pointer-events: none;
}
#top .sequence-hero-kicker,
#top .sequence-hero-title,
#top .sequence-hero-highlight {
  translate: calc(-1 * var(--hero-group-distance, 0vw)) 0;
  will-change: translate;
}
#top .sequence-hero-brand,
#top .sequence-hero-details {
  translate: var(--hero-group-distance, 0vw) 0;
  will-change: translate;
}
#top .sequence-hero-title > span:nth-child(3),
#top .sequence-hero-brand { display: none; }
.sequence-hero-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 0;
  color: rgb(255 255 255 / 92%);
  font: 400 clamp(14px, 1.35vw, 19px)/1.4 var(--font-display, Georgia, serif);
  letter-spacing: .015em;
  text-shadow: 0 2px 12px rgb(10 0 3 / 55%);
}
.sequence-hero-highlight > span { width: 28px; height: 1px; flex: none; background: rgb(255 255 255 / 72%); }
@media (max-width: 640px) {
  .sequence-hero-highlight { max-width: 310px; font-size: 14px; line-height: 1.35; }
  .sequence-hero-highlight > span { width: 18px; }
}
.hero-location { margin-bottom: 4.5svh; color: rgb(255 255 255 / 65%); }
h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; line-height: .88; text-shadow: 0 2px 40px #0a000350; }
h1 span { display: block; }
.hero-alpha, .hero-city { font-size: clamp(3.2rem, min(12vw, 18.5svh), 10.5rem); letter-spacing: -.02em; }
.hero-international { padding: .3em 0 .8em .42em; font-size: clamp(.72rem, 1.9vw, 1.55rem); letter-spacing: .42em; line-height: 1.4; opacity: .8; }
.hero-tagline { margin-top: 1.1svh; font-size: clamp(1.3rem, min(3.6vw, 5.5svh), 3rem); font-style: italic; line-height: 1.1; opacity: .9; }
.hero-brand { display: flex; align-items: center; gap: 40px; margin-top: 4.5svh; }
.hero-brand img { height: clamp(60px, 10.5svh, 96px); width: auto; }
.hero-brand span { height: 1px; width: 90px; background: #ffffff2e; }
.hero-details { display: grid; grid-template-columns: repeat(3, 1fr); width: min(900px, 90%); gap: 24px; margin-top: 4.5svh; }
.hero-details div::before { content: ""; display: block; width: 40px; height: 1px; margin: 0 auto 10px; background: #ffffff2e; }
.hero-details dt { color: #ffffff8c; }
.hero-details dd { margin-top: 6px; font: clamp(.9rem, 1.2vw, 1.2rem) Georgia, serif; }
.hero-scroll { position: absolute; bottom: 0; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 13px; translate: -50% 0; pointer-events: none; }
.hero-scroll .eyebrow { color: #ffffffa6; white-space: nowrap; }
.hero-scroll-line { width: 1px; height: 38px; background: #ffffff45; }

.sequence-caption {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  color: #4a0512;
  pointer-events: none;
  opacity: var(--caption-visibility, 0);
}
.sequence-caption__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: clamp(440px, 43vw, 680px);
  height: 100%;
  padding: clamp(48px, 5vw, 88px);
  background: #fff;
  box-shadow: -18px 0 55px rgb(11 24 29 / 12%);
  transform: translate3d(var(--caption-slide, 100%), 0, 0);
}
.sequence-caption__primary {
  width: 100%;
}
.sequence-caption__secondary {
  width: 100%;
  margin-top: clamp(18px, 2.5vh, 28px);
}
.sequence-caption__label, .sequence-caption__next {
  display: block;
  font: 600 10px/1.5 var(--font-sans, Arial, sans-serif);
  letter-spacing: .25em;
}
.sequence-caption__label { color: #a54854; }
.sequence-caption__label::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  margin: 0 13px 4px 0;
  background: #a54854;
}
.sequence-caption__title {
  margin: clamp(20px, 3vh, 32px) 0 0;
  font: 400 clamp(3.25rem, 4.7vw, 5.6rem)/.98 var(--font-display, Georgia, serif);
  letter-spacing: -.05em;
}
.sequence-caption__title span { display: block; }
.sequence-caption__description {
  max-width: 390px;
  font: 400 clamp(1rem, 1.15vw, 1.17rem)/1.55 var(--font-sans, Arial, sans-serif);
  color: #6c4c53;
}
.sequence-caption__highlights {
  margin-top: clamp(21px, 3vh, 30px);
  padding-top: 17px;
  border-top: 1px solid #d8d2c9;
}
.sequence-caption__highlights-label {
  display: block;
  color: #a54854;
  font: 600 9px/1.5 var(--font-sans, Arial, sans-serif);
  letter-spacing: .23em;
}
.sequence-caption__highlights ul {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.sequence-caption__highlights li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid #e0dcd5;
}
.sequence-caption__highlight-number {
  padding-top: 2px;
  color: #a54854;
  font: 600 10px/1.3 var(--font-sans, Arial, sans-serif);
  letter-spacing: .05em;
}
.sequence-caption__highlights li div { display: flex; flex-direction: column; gap: 2px; }
.sequence-caption__highlights li strong {
  color: #4a0512;
  font: 600 11px/1.35 var(--font-sans, Arial, sans-serif);
  letter-spacing: .11em;
}
.sequence-caption__highlights li div span {
  color: #765961;
  font: 400 12px/1.4 var(--font-sans, Arial, sans-serif);
}
.sequence-caption__progress {
  display: block;
  width: 80px;
  height: 1px;
  margin: 22px 0 0;
  background: #d6cec5;
}
.sequence-caption__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #a54854;
  transform: scaleX(var(--caption-line, 0));
  transform-origin: left;
}
.sequence-caption__next { margin-top: 16px; color: #7d8584; }

.sequence-sky-bridge {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 8% 10%;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  opacity: var(--bridge-opacity, 0);
  background: linear-gradient(112deg, #314776 0%, #718db6 56%, #b3c0d2 100%);
}
.sequence-sky-bridge::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: url("../images/sequence-elevation-a-v6/000.webp?v=6") center / cover no-repeat;
  filter: blur(12px) saturate(.9);
  opacity: .74;
  transform: scale(1.04);
}
.sequence-sky-bridge--gardens::before {
  background-image: url("../images/sequence-top-view-v7/000.webp?v=7");
}
.sequence-sky-bridge::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 78% at 91% 16%, rgb(239 247 255 / 22%), transparent 76%),
    linear-gradient(90deg, rgb(27 49 89 / 34%), transparent 73%),
    linear-gradient(180deg, transparent 48%, rgb(34 61 102 / 14%));
}
.sequence-sky-bridge__inner {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  opacity: var(--bridge-words, 0);
  transform: translate3d(0, var(--bridge-rise, 28px), 0);
  text-shadow: 0 3px 26px rgb(23 44 81 / 13%);
}
.sequence-sky-bridge__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 10px/1.5 Arial, sans-serif;
  letter-spacing: .34em;
  color: rgb(255 255 255 / 80%);
}
.sequence-sky-bridge__label > span {
  display: block;
  width: 36px;
  height: 1px;
  flex: none;
  background: rgb(255 255 255 / 80%);
}
.sequence-sky-bridge__title {
  margin: 25px 0 25px;
  font: 400 clamp(4rem, 9vw, 10.5rem)/.94 Georgia, serif;
  letter-spacing: -.06em;
}
.sequence-sky-bridge__title em { font-weight: 400; }
.sequence-sky-bridge__description {
  max-width: 500px;
  font: 300 clamp(1rem, 1.35vw, 1.25rem)/1.6 Arial, sans-serif;
  color: rgb(255 255 255 / 89%);
}
.sequence-sky-bridge__rule {
  display: block;
  width: min(240px, 60vw);
  height: 1px;
  margin-top: 34px;
  background: rgb(255 255 255 / 28%);
}
.sequence-sky-bridge__rule span {
  display: block;
  width: 41%;
  height: 100%;
  background: #fff;
}
.sequence-sky-bridge__folio {
  position: absolute;
  z-index: 1;
  right: clamp(32px, 7vw, 112px);
  bottom: clamp(32px, 7vw, 90px);
  text-align: right;
  font: 400 clamp(1.2rem, 1.8vw, 1.8rem)/1.1 Georgia, serif;
  letter-spacing: .06em;
  color: rgb(255 255 255 / 77%);
  opacity: var(--bridge-words, 0);
}
.sequence-sky-bridge__folio span { opacity: .45; }
.sequence-sky-bridge__folio small {
  font: 600 9px/2 Arial, sans-serif;
  letter-spacing: .26em;
}

@media (max-width: 900px) {
  .sequence-caption__inner { width: min(53vw, 560px); padding: 46px; }
}

@media (max-width: 640px) {
  .sequence-caption { align-items: flex-end; }
  .sequence-caption__inner {
    width: 100%;
    height: auto;
    min-height: 50%;
    padding: 38px 8% 44px;
    box-shadow: 0 -16px 48px rgb(11 24 29 / 12%);
    transform: translate3d(0, var(--caption-rise, 24px), 0);
  }
  .sequence-caption__label, .sequence-caption__next { font-size: 10px; letter-spacing: .2em; }
  .sequence-caption__title { margin-top: 17px; font-size: clamp(3rem, 10vw, 4.5rem); }
  .sequence-caption__description { font-size: clamp(1rem, 4vw, 1.2rem); line-height: 1.55; }
  .sequence-caption__highlights { margin-top: 17px; padding-top: 12px; }
  .sequence-caption__highlights li { padding: 6px 0; }
  .sequence-caption__highlights li div span { font-size: 11px; }
  .sequence-caption__progress { margin-top: 17px; }
  .sequence-sky-bridge { padding: 8%; }
  .sequence-sky-bridge__title { font-size: clamp(3.7rem, 15vw, 6rem); }
  .sequence-sky-bridge__description { max-width: 290px; }
  .sequence-sky-bridge__folio { right: 8%; bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  #top .hero-copy, #top .hero-scroll { transform: none; }
  #top .sequence-hero-kicker,
  #top .sequence-hero-title,
  #top .sequence-hero-brand,
  #top .sequence-hero-details { translate: none; scale: none; filter: none; }
  #top .sequence-hero-title > span:nth-child(2) { letter-spacing: .42em !important; }
  .sequence-caption__inner { transform: none; }
  .sequence-sky-bridge__inner { transform: none; }
}