.project-section-nav {
  position: sticky;
  top: var(--project-header-height, var(--header-height, 76px));
  z-index: 15;
  padding: 1rem 5vw;
  color: #0c436a;
  background: #e1e5e2;
}
.project-section-nav.is-header-hidden {
  position: fixed;
  inset: 0 0 auto;
}
.project-section-nav__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.project-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.project-section-nav a[aria-current="location"] {
  color: white;
  background: #0c436a;
}
.project-section-nav a { padding-inline: 0.75rem; }
.project-section-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.project-section-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.project-section-nav__mobile { display: none; }
.marina-detail :is(#overview, #location, #plans, #living, #conditions, #documents, #consultation) {
  scroll-margin-top: calc(var(--project-header-height, 76px) + var(--project-nav-height, 76px));
}
@media (max-width: 48rem) {
  .project-section-nav__links { display: none; }
  .project-section-nav__mobile { display: block; }
  .project-section-nav__mobile summary { cursor: pointer; min-height: 44px; padding-block: 0.6rem; font-size: 16px; font-weight: 500; }
  .project-section-nav__mobile > div { display: grid; padding-block: 0.5rem; }
}
.marina-hero {
  height: min(900px, 100svh);
  min-height: 680px;
  position: relative;
  color: white;
  background: #526c75;
}
.marina-hero picture,
.marina-hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marina-hero__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}
.marina-hero__content {
  position: absolute;
  left: 5vw;
  bottom: 9%;
  max-width: 760px;
}
.marina-hero h1 {
  font-size: clamp(3.5rem, 7vw, 7rem);
  max-width: 12ch;
}
.marina-hero__content > p:not(.kicker) {
  font-size: 1.15rem;
  margin: 1.5rem 0 2rem;
}
.marina-hero__caption {
  position: absolute;
  right: 3vw;
  bottom: 2rem;
  font-size: 0.8125rem;
}
.marina-section {
  padding: 8rem 5vw;
  max-width: 1600px;
  margin: auto;
}
.overview,
.handover,
.conditions,
.documents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}
.overview > div > p:not(.kicker),
.conditions p,
.handover p {
  margin-bottom: 1.5rem;
}
.facts {
  margin-top: 2.5rem;
}
.location {
  display: grid;
  grid-template-columns: 60% 40%;
  background: #e1ded4;
  min-height: 680px;
}
.location__image {
  position: relative;
  min-height: 550px;
  background: #aab9bb;
}
.location__copy {
  padding: 6vw;
  align-self: center;
}
.location__copy p:not(.kicker) {
  margin: 1.5rem 0;
}
.section-head {
  max-width: 750px;
  margin-bottom: 3rem;
}
.section-head p:not(.kicker) {
  margin-top: 1.5rem;
}
.plan-viewer {
  background: #e4e2da;
  padding: 2rem;
}
.plan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.plan-controls button {
  font: inherit;
  color: #0c436a;
  background: transparent;
  border: 1px solid #0c436a; /* taste-skill-ignore: selection controls need boundaries */
  padding: 0.7rem 1rem;
  cursor: pointer;
}
.plan-controls button[aria-pressed="true"] {
  background: #0c436a;
  color: white;
}
.plan-stage {
  background: #fff;
  padding: 2rem;
}
.plan-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.plan-heading h3 {
  font-size: 1.5rem;
}
.plan-heading div {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.plan-heading a {
  color: inherit;
}
.plan-stage img {
  display: block;
  max-height: 850px;
  width: 100%;
  object-fit: contain;
  margin-top: 1.5rem;
}
.plan-note {
  font-size: 0.85rem;
  margin-top: 1rem !important;
}
.living {
  background: #e1ded4;
  max-width: none;
}
.living-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 2rem;
  align-items: start;
}
.living-grid figure {
  margin: 0;
}
.living-grid figure:nth-child(2) {
  margin-top: 6rem;
}
.living-grid img {
  width: 100%;
  aspect-ratio: 1.4;
  object-fit: cover;
  background: #c7d0ce;
}
.living-grid figcaption,
.interior p {
  font-size: 0.85rem;
  margin-top: 0.7rem;
}
.film {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5vw;
  align-items: center;
  margin-top: 8rem;
}
.film h3 {
  font-size: clamp(2rem, 3.5vw, 4rem);
  margin-bottom: 1rem;
}
.film video {
  width: 100%;
  color: #f2f3ed;
  aspect-ratio: 1350/1080;
  background: #173f53;
  object-fit: contain;
}
.interior {
  margin-top: 7rem;
  max-width: none;
}
.interior img {
  width: 100%;
  background: #c7d0ce;
}
.handover table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.handover th,
.handover td {
  text-align: left;
  padding: 1rem;
  border-bottom: 1px solid #0c436a55;
  vertical-align: top;
}
.handover th {
  font-size: 0.85rem;
}
.living .handover {
  margin-top: clamp(4rem, 7vw, 7rem);
  align-items: start;
}
.handover__intro h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}
.handover__items { border-top: 1px solid #0c436a55; }
.handover__items details { border-bottom: 1px solid #0c436a55; }
.handover__items summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.handover__items summary::-webkit-details-marker { display: none; }
.handover__items summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.handover__items details[open] summary::after { content: "−"; }
.handover__items details p { margin: 0 0 1.25rem; }
.handover__items summary:focus-visible { outline: 3px solid #b76c44; outline-offset: 3px; }
.conditions {
  background: #e1ded4;
  max-width: none;
}
.conditions .document-links {
  margin-top: 2rem;
}
.document-links a {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: inherit;
  text-decoration: none;
  padding: 1.25rem;
  border: 0;
  background: #e4e2da;
  margin-bottom: 0.5rem;
}
.document-links a:hover {
  text-decoration: underline;
}
.marina-contact {
  background: #0c436a;
  color: #f2f0e8;
  padding: 8rem 5vw;
}
.marina-contact h2 {
  max-width: 15ch;
}
.marina-contact p:not(.kicker) {
  margin: 1.5rem 0;
  max-width: 45rem;
}
.marina-contact a:not(.marina-button) {
  color: inherit;
}
.marina-contact .marina-button {
  margin: 0.5rem 0 1rem;
}
@media (max-width: 768px) {
  .marina-hero {
    min-height: 650px;
    height: 90svh;
  }
  .marina-hero h1 {
    font-size: clamp(3rem, 10vw, 5rem);
    max-width: 13ch;
  }
  .marina-hero__content {
    left: 5vw;
    right: 5vw;
    bottom: 10%;
  }
  .marina-section {
    padding: 5rem 5vw;
  }
  .overview,
  .handover,
  .conditions,
  .documents,
  .location,
  .film {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .location__image {
    min-height: 0;
    aspect-ratio: 1.15;
  }
  .location__copy {
    padding: 3rem 5vw 4rem;
  }
  .plan-viewer {
    padding: 1rem;
  }
  .plan-stage {
    padding: 1rem;
  }
  .plan-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .living-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .living-grid figure:nth-child(2) {
    margin: 0;
  }
  .film {
    margin-top: 5rem;
  }
  .interior {
    margin-top: 4rem;
  }
  .marina-contact {
    padding: 5rem 5vw 6rem;
  }
}
.eligibility {
  padding-left: 1.25rem;
  margin: 0 0 1.5rem;
}
.eligibility li {
  margin: 0.65rem 0;
}
.facts div {
  border: 0;
  padding: 0.65rem 0;
}
.interior h3 {
  font-size: clamp(2rem, 3.5vw, 4rem);
}
.interior > p {
  font-size: 1rem;
  margin: 1rem 0 2rem;
}
.interior-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.interior-grid figure {
  margin: 0;
}
.interior-grid img {
  aspect-ratio: 1.2;
  object-fit: cover;
}
.interior-grid figcaption {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .interior-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.location__image {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #eeece5;
}
.location__image img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: contain;
}
.location__image span {
  left: 1.5rem;
  bottom: 1.5rem;
}
.marina-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
}
.video-frame {
  position: relative;
}
.video-frame video {
  display: block;
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.3rem;
  border: 0;
  background: #f3f0e8;
  color: #0c436a;
  font: inherit;
  cursor: pointer;
}
.video-play[hidden] {
  display: none;
}
.video-play:hover {
  background: white;
}
/* Keep the centered overlay under the pointer throughout a press. */
.marina-page .video-play:active {
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  .marina-contact {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .marina-detail .marina-hero__caption {
    right: 20px;
  }
}
/* The detail opens full-bleed behind the original fixed header. */
.marina-detail .site-header:not(.is-scrolled):not(.is-menu-open) {
  background: transparent;
  color: white;
  border-color: transparent;
}
.marina-detail .site-header:not(.is-scrolled):not(.is-menu-open) .brand__mark {
  filter: brightness(0) invert(1);
}
.marina-detail .site-header:not(.is-scrolled):not(.is-menu-open) .menu-trigger {
  color: white;
}
.marina-detail .marina-hero {
  height: 100svh;
  min-height: 680px;
  max-height: none;
}
.marina-detail .marina-hero__content {
  left: 5vw;
  bottom: 7%;
  max-width: 950px;
}
.marina-detail .marina-hero h1 {
  font-size: clamp(4.5rem, 8vw, 9rem);
  max-width: 12ch;
}
.tower-explorer {
  padding: 8rem 5vw;
  background: #eeece5;
}
.tower-explorer__intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 5vw;
  margin-bottom: 3.5rem;
}
.tower-explorer__intro p {
  max-width: 38ch;
  justify-self: end;
}
.tower-explorer__building {
  display: grid;
  grid-template-columns: minmax(260px, 29%) minmax(0, 1fr);
  background: #f5f8fa;
}
.tower-explorer__selector {
  padding: clamp(1.5rem, 3.5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tower-explorer__selector h3 {
  font-size: clamp(2.5rem, 3.5vw, 4rem);
  line-height: 1.1;
}
.tower-explorer__selector p {
  margin: 1.25rem 0 2rem;
}
.tower-explorer__selector .tower-explorer__label {
  margin: 0 0 0.75rem;
}
.tower-explorer__selector .plan-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.tower-explorer__selector .plan-controls button {
  min-height: 48px;
  padding: 0.65rem 0.25rem;
  border-color: #cbd9e2;
  font-variant-numeric: tabular-nums;
}
.tower-explorer__selector .tower-explorer__note {
  margin: auto 0 0;
  padding-top: 2rem;
  font-size: 0.875rem;
}
.tower-explorer__stage {
  min-width: 0;
  background: #d1d9d8;
}
.tower-explorer__image {
  position: relative;
  margin: 0;
  height: clamp(620px, 58vw, 820px);
  min-height: 620px;
  overflow: hidden;
}
.tower-explorer__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.tower-explorer__image figcaption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  padding: 0.7rem 1rem;
  background: #0c436a;
  color: white;
  font-size: 0.875rem;
}
.tower-explorer__plan {
  background: white;
  min-height: 820px;
  overflow-anchor: none;
}
.tower-explorer__plan[hidden],
.tower-explorer__building[hidden],
.tower-explorer__plan [hidden] { display: none; }
.floor-toolbar {
  display: flex;
  min-height: 66px;
  border-top: 3px solid #0c436a;
  border-bottom: 1px solid #cbd9e2;
}
.back-building, .floor-toolbar__numbers button, .plan-modes button {
  font: inherit;
  color: #0c436a;
  background: white;
  cursor: pointer;
  border: 0;
}
.back-building { padding: 1rem 2rem; white-space: nowrap; }
.floor-toolbar__numbers { display: flex; flex: 1; }
.floor-toolbar__numbers button {
  min-width: 70px;
  padding: 1rem 1.25rem;
  border-left: 1px solid #cbd9e2;
}
.floor-toolbar__numbers button[aria-pressed="true"],
.plan-modes button[aria-pressed="true"] { background: #0c436a; color: white; }
.floor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 350px; }
.floor-workspace__map { min-width: 0; }
.floor-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem;
  min-height: 120px;
  border-bottom: 1px solid #cbd9e2;
}
.floor-map-heading p, .floor-detail > p:first-child { font-size: 0.875rem; margin: 0 0 0.5rem; }
.floor-map-heading h3 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; }
.floor-map-heading a { color: inherit; white-space: nowrap; }
.floor-map-canvas { background: #fdfbf6; padding: 1.5rem 2rem; }
.floor-map-canvas img {
  display: block;
  width: 100%;
  height: 620px;
  object-fit: contain;
}
.floor-detail { padding: 2rem; border-left: 1px solid #cbd9e2; min-width: 0; }
.floor-detail h4 { font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: 1.05; margin: 1rem 0 1.5rem; overflow-wrap: anywhere; }
.plan-modes { display: grid; grid-template-columns: 1fr 1fr; }
.plan-modes button { padding: 1rem 0.5rem; font-size: 0.8rem; border: 1px solid #cbd9e2; }
.floor-detail [data-plan-panel], .floor-detail [data-interior-panel] { background: #fdfbf6; padding: 1rem; }
.floor-detail img { display: block; width: 100%; height: 260px; object-fit: contain; }
.floor-detail [data-interior-panel] img { object-fit: cover; }
.floor-detail__facts { margin: 1.5rem 0; }
.floor-detail__facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #cbd9e2; }
.floor-detail__facts dt { font-size: 0.8rem; }
.floor-detail__facts dd { margin: 0; text-align: right; font-size: 0.9rem; font-weight: 500; }
.floor-detail__download { display: block; background: #0c436a; color: white; padding: 1.25rem 0.75rem; text-align: center; text-decoration: none; }
.floor-detail__note { font-size: 0.8rem; line-height: 1.6; margin-top: 1rem; }
.tower-explorer button:focus-visible, .tower-explorer a:focus-visible { outline: 3px solid #0c436a; outline-offset: 3px; }
@media (max-width: 1000px) {
  .floor-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .floor-detail { padding: 1.25rem; }
  .floor-map-canvas { padding: 1rem; }
  .floor-map-canvas img { height: 580px; }
}
@media (max-width: 768px) {
  .floor-toolbar { flex-wrap: wrap; }
  .back-building { width: 100%; text-align: left; }
  .floor-toolbar__numbers { overflow-x: auto; }
  .floor-toolbar__numbers button { flex: 1; min-width: 56px; padding: 1rem 0.5rem; }
  .floor-workspace { grid-template-columns: 1fr; }
  .floor-map-heading { padding: 1.25rem; min-height: 100px; }
  .floor-map-canvas img { height: auto; max-height: 650px; }
  .floor-detail { border-left: 0; border-top: 1px solid #cbd9e2; }
  .floor-detail h4 { font-size: 2.5rem; }
}
@media (max-width: 768px) {
  .marina-detail .marina-hero {
    height: 100svh;
    min-height: 650px;
  }
  .marina-detail .marina-hero h1 {
    font-size: clamp(3.2rem, 11vw, 6rem);
  }
  .tower-explorer {
    padding: 5rem 20px;
  }
  .tower-explorer__intro,
  .tower-explorer__building {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .tower-explorer__intro { gap: 1.5rem; }
  .tower-explorer__intro p { justify-self: start; }
  .tower-explorer__selector .plan-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0;
  }
  .tower-explorer__selector .tower-explorer__note { padding-top: 1rem; }
  .tower-explorer__plan { min-height: 0; }

  .tower-explorer__selector {
    padding: 2rem 1.25rem;
  }
  .tower-explorer__image {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
  .tower-explorer__plan .plan-heading {
    gap: 1rem;
  }
}
.overview .countdown {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  color: inherit;
  font-weight: 400;
}
.countdown__digits {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.countdown__digits strong {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__digits span {
  font-size: 1rem;
}
.countdown__date {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
}
.countdown__helper {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}
.countdown__fallback {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}
.countdown > .text-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: inherit;
  text-underline-offset: 0.25em;
}
.tower-explorer__building,
.tower-explorer__plan {
  scroll-margin-top: calc(var(--project-header-height, 76px) + var(--project-nav-height, 76px));
}
.marina-map {
  background: #d9e3df;
  color: #0c436a;
}
.marina-map__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: end;
  padding: 7rem 5vw 3rem;
}
.marina-map__intro h2 {
  max-width: 16ch;
}
.marina-map__intro p {
  margin: 0;
}
.marina-map__graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 1200/760;
  overflow: hidden;
}
.marina-map__graphic img {
  width: 100%;
  height: 100%;
  display: block;
}
.marina-map__pins {
  position: absolute;
  inset: 0;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: 2px solid #0c436a;
  border-radius: 50%;
  background: #eeece5;
  color: #0c436a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.map-pin[aria-pressed="true"] {
  background: #0c436a;
  color: white;
}
.map-pin--sis {
  left: 40.3%;
  top: 49.7%;
}
.map-pin--park {
  left: 59%;
  top: 62.4%;
}
.map-pin--lotte {
  left: 36.9%;
  top: 59.3%;
}
.map-pin--market {
  left: 57.25%;
  top: 55.92%;
}
.marina-map__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.map-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  padding: 2rem 2vw;
  border: 0;
  background: #eeece5;
  color: #0c436a;
  font: inherit;
  cursor: pointer;
}
.map-card strong {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1;
}
.map-card[aria-pressed="true"] {
  background: #0c436a;
  color: white;
}
.marina-map noscript {
  display: block;
  padding: 0 5vw 2rem;
}
@media (max-width: 768px) {
  .marina-map__intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 5rem 20px 2rem;
  }
  .marina-map__graphic {
    aspect-ratio: 1200/760;
  }
  .map-pin {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
  .marina-map__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-card {
    padding: 1.25rem 20px;
  }

}
.marina-map__graphic {
  aspect-ratio: auto;
}
.marina-map__graphic img {
  height: auto;
}
.marina-map__pins {
  inset: 0;
}

.marina-page .map-pin:active {
  transform: translate(-50%, -48%);
}
.marina-map__caption {
  padding: 1rem 5vw;
  margin: 0;
  font-size: 0.875rem;
}
.marina-map__caption a {
  color: inherit;
  text-underline-offset: 0.2em;
}
@media (max-width: 768px) {
  .marina-map__caption {
    padding: 1rem 20px;
  }
}
.marina-map__graphic {
  aspect-ratio: 16/9;
}
.marina-map__canvas {
  position: absolute;
  width: 100%;
  top: -26%;
  left: 0;
  aspect-ratio: 1;
}
.marina-map__canvas img {
  width: 100%;
  height: auto;
}
.map-project {
  position: absolute;
  left: 23.4%;
  top: 36.2%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  z-index: 2;
}
.map-project__signal {
  position: relative;
  width: 16px;
  height: 16px;
  border: 3px solid white;
  border-radius: 50%;
  background: #0c436a;
}
.map-project__signal::before,
.map-project__signal::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid #0c436a;
  border-radius: 50%;
  animation: project-signal 2.8s ease-out infinite;
}
.map-project__signal::after { animation-delay: 1.4s; }
@keyframes project-signal {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}
.map-project__label {
  position: absolute;
  left: calc(100% + 14px);
  padding: 0.45rem 0.7rem;
  background: #0c436a;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.map-pin { display: grid; place-items: center; overflow: visible; }
.map-pin svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-pin__label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 210px;
  padding: 0.45rem 0.65rem;
  color: #0c436a;
  background: #eeece5;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 500;
}
.map-pin__label small { display: block; margin-top: 3px; font-size: 13px; }
.map-pin--lotte .map-pin__label { left: auto; right: calc(100% + 8px); }
.map-pin[aria-pressed="true"] .map-pin__label { color: white; background: #0c436a; }
.map-pin:hover, .map-pin:focus-visible { z-index: 3; }
.map-pin:focus-visible { outline: 3px solid #0c436a; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .map-project__signal::before, .map-project__signal::after { animation: none; }
  .map-project__signal::after { display: none; }
}
@media (max-width: 768px) {
  .map-pin svg { width: 21px; height: 21px; }
  .map-pin__label { max-width: 116px; padding: 0.35rem 0.4rem; font-size: 13px; }
  .map-pin--lotte .map-pin__label { max-width: 102px; }
  .map-project__label { font-size: 13px; }
}
@media (max-width: 768px) {
  .marina-map__graphic {
    aspect-ratio: 1;
  }
  .marina-map__canvas {
    top: 0;
  }
}
.marina-map__intro a {
  color: inherit;
  text-underline-offset: 0.2em;
}

/* The original drawing is rotated clockwise; hit regions use the same coordinates. */
.floor-map-figure { position: relative; width: 100%; aspect-ratio: 1470 / 1005; }
.floor-map-figure #plan-image { width: 100%; height: 100%; max-height: none; }
.unit-regions { position: absolute; inset: 0; }
.unit-regions button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(12,67,106,0.45);
  background: rgba(255,255,255,0.22);
  color: #0c436a;
  font: inherit;
  font-size: clamp(7px, 0.65vw, 12px);
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.unit-regions button:hover { background: rgba(12,67,106,0.22); }
.unit-regions button[aria-pressed="true"] { background: rgba(12,67,106,0.8); color: white; border-color: #0c436a; }
.unit-map-note { font-size: 0.8rem; margin: 1rem 0 0; line-height: 1.5; }
.floor-detail h4 { font-size: clamp(1.8rem, 2.8vw, 3rem); overflow-wrap: normal; }
.unit-picker { display: block; font-size: 0.8rem; margin-bottom: 0.5rem; }
#unit-picker { width: 100%; min-height: 44px; padding: 0.5rem; margin-bottom: 1.25rem; font: inherit; color: #0c436a; background: white; border: 1px solid #cbd9e2; border-radius: 0; }
.unit-preview { display: block; width: 100%; height: 260px; }
@media (max-width: 768px) {
  .floor-map-canvas { padding: 0.5rem; }
  .unit-regions button { font-size: 6px; }
}
.floor-detail__consult {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; border: 0; background: #0c436a; color: white; padding: 1.25rem;
  font: inherit; cursor: pointer;
}
.floor-detail [data-interior-panel] img { height: 280px; object-fit: contain; }
.unit-3d-empty { min-height: 250px; display: grid; place-items: center; text-align: center; font-size: 0.9rem; padding: 1rem; }
.unit-3d-caption { display: block; margin-top: 0.75rem; font-size: 0.75rem; }
.unit-load-error { font-size: 0.8rem; margin-top: 1rem; }
.project-consultation { background: #f6f3ed; color: #0c436a; align-items: start; gap: 6vw; }
.project-consultation h2 { max-width: none; font-size: clamp(2.5rem, 4.7vw, 5.3rem); line-height: 1.08; }
.project-consultation .project-consultation__copy > p { max-width: 38ch; margin-top: 2rem; }
.unit-enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; min-width: 0; padding: 2rem; background: #fff; }
.enquiry-selection, .enquiry-wide { grid-column: 1 / -1; }
.enquiry-selection { padding-bottom: 1.5rem; border-bottom: 1px solid #cbd9e2; }
.enquiry-selection label, .enquiry-field label { display: block; font-size: 0.875rem; margin-bottom: 0.75rem; }
.enquiry-selection strong { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 1rem; line-height: 1.5; }
.enquiry-field { min-width: 0; }
.unit-enquiry-form input:not([type=hidden]), .unit-enquiry-form select {
  width: 100%; min-height: 52px; min-width: 0; padding: 0.75rem 0; border: 0; border-bottom: 1px solid #9eafb9;
  border-radius: 0; background: transparent; color: #0c436a; font: inherit; font-size: 1rem;
}
.unit-enquiry-form :is(input,select,button):focus-visible { outline: 2px solid #0c436a; outline-offset: 3px; }
.unit-enquiry-form [aria-invalid=true] { border-color: #a43434; }
.enquiry-error { display: block; font-size: 0.8rem; color: #a43434; margin-top: 0.5rem; }
.enquiry-footer { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.project-consultation .enquiry-footer p { margin: 0; font-size: 0.8rem; max-width: 24ch; }
.enquiry-footer button { display: flex; justify-content: space-between; gap: 2rem; align-items: center; border: 0; padding: 1.1rem; color: white; background: #0c436a; font: inherit; cursor: pointer; white-space: nowrap; }
.project-consultation .enquiry-status { margin: 0; font-size: 0.875rem; padding: 1rem; background: #e2eaf0; }
.unit-enquiry-form [hidden] { display: none; }
@media (max-width: 1100px) {
  .unit-enquiry-form { padding: 1.5rem; }
  .enquiry-footer { align-items: stretch; flex-direction: column; }
}
@media (max-width: 768px) {
  .project-consultation { gap: 2rem; }
  .unit-enquiry-form { grid-template-columns: 1fr; padding: 1.25rem; }
  .project-consultation .enquiry-footer p { max-width: none; }
}

.conditions-check {
  margin-top: 2rem;
  border: 0;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}
.conditions .eligibility { margin: 0 0 2rem; padding: 0; }

.overview .countdown[hidden] { display: none; }
.project-consultation .enquiry-footer button,
.conditions .document-links a,
.video-play,
.tower-explorer__selector .plan-controls button { font-weight: 500; }

/* Project facts follow the overview reference; the same grid collapses on mobile. */
.marina-section.overview { display: block; }
.overview-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }
.overview-intro__copy { max-width: 48ch; padding-top: 0.5rem; }
.overview-intro__copy p + p { margin-top: 1.25rem; }
.overview-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 3.5rem 0 0; background: #fff; padding: 1.5rem; }
.overview-table > div { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 160px; padding: 1.5rem; border-right: 1px solid #cbd9e2; }
.overview-table > div:nth-child(4n) { border-right: 0; }
.overview-table > div:nth-child(n+5) { border-top: 1px solid #cbd9e2; }
.overview-table dt { font-size: 0.875rem; }
.overview-table dd { font-size: 1rem; font-weight: 500; margin: 0; line-height: 1.5; }
@media (max-width: 1000px) {
  .overview-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-table > div:nth-child(2n) { border-right: 0; }
  .overview-table > div:nth-child(n+3) { border-top: 1px solid #cbd9e2; }
}
@media (max-width: 768px) {
  .overview-intro { grid-template-columns: 1fr; gap: 2rem; }
  .overview-table { padding: 0.5rem; margin-top: 2rem; }
  .overview-table > div { min-height: 145px; gap: 1.25rem; padding: 1rem; }
  .overview-table dd { font-size: 0.9rem; }
}

/* Full-viewport mobile hero with a portrait illustration. */
@media (max-width: 768px) {
  .marina-detail .marina-hero { height: 100svh; min-height: 0; }
  .marina-detail .marina-hero picture img { object-position: center center; }
  .marina-detail .marina-hero__content { left: 16px; right: 16px; bottom: 56px; }
  .marina-detail .marina-hero h1 { font-size: clamp(2.75rem, 10vw, 4rem); }
  .marina-detail .marina-hero__content > p:not(.kicker) { font-size: 1rem; margin: 1rem 0 1.25rem; }
  .marina-detail .marina-hero__caption { right: 16px; bottom: 16px; }
  .marina-detail .marina-hero .marina-button { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 1rem; background: transparent; border: 1px solid white; color: white; }
  .project-section-nav { padding: 0 16px; }
  .marina-section, .tower-explorer { padding-left: 16px; padding-right: 16px; }
  .marina-map__intro { padding-left: 16px; padding-right: 16px; }
  .marina-detail :is(.marina-section, .tower-explorer, .marina-map__intro, .project-consultation) h2 { font-size: 2rem; line-height: 1.12; }
  .tower-explorer__selector { padding: 1.5rem 1rem; }
  .tower-explorer__selector .plan-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tower-explorer__selector .plan-controls button, .floor-toolbar__numbers button { white-space: nowrap; min-height: 44px; }
  .floor-toolbar__numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 0 0 100%; width: 100%; overflow: visible; }
  .floor-toolbar__numbers button { min-width: 0; padding: .75rem .1rem; font-size: .8rem; }
  .floor-map-canvas { overflow-x: auto; overscroll-behavior-inline: contain; }
  .floor-map-figure { min-width: 700px; }
  .unit-regions button { font-size: 10px; }
  .map-pin { width: 44px; height: 44px; }
  .map-pin__label { display: none; }
  .map-project__label { font-size: 12px; }
  .unit-enquiry-form { background: white; padding: 1.5rem 1.25rem; }
  .unit-enquiry-form input:not([type=hidden]), .unit-enquiry-form select { border: 0; border-bottom: 1px solid #9eafb9; padding: .75rem 0; font-size: 16px; }
  #unit-picker { font-size: 16px; }
}