.attractions-page { overflow: hidden; }
.attractions-page .label { font-size: var(--font-size-label); }
.attractions-hero { position: relative; min-height: clamp(26.25rem, 48vw, 38.75rem); display: grid; align-items: end; color: var(--color-pearl-white); isolation: isolate; }
.attractions-hero__image, .attractions-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.attractions-hero__image { object-fit: cover; object-position: center center; z-index: -2; }
.attractions-hero__shade { background: linear-gradient(90deg, rgb(16 47 67 / 55%) 0%, rgb(16 47 67 / 35%) 48%, rgb(16 47 67 / 18%) 100%); z-index: -1; }
.attractions-hero__layout { display: grid; grid-template-columns: minmax(30rem, 58fr) minmax(18.75rem, 34fr); justify-content: space-between; gap: 8%; align-items: end; padding-block: var(--space-8); }
.attractions-hero__layout > * { min-width: 0; width: 100%; }
.attractions-hero__copy { max-width: 45rem; }
.attractions-hero__copy h1 { color: var(--color-pearl-white); margin-top: var(--space-3); font-size: clamp(2.625rem, 3.2vw + 1rem, 4.5rem); }
.attractions-hero__lead { max-width: 38.75rem; margin-bottom: 0; font-size: var(--font-size-lead); line-height: 1.45; }
.attractions-hero__label { color: var(--color-warm-sand); }
.attractions-hero__facts { border-top: 2px solid var(--color-restrained-brass); background: rgb(16 47 67 / 88%); padding: var(--space-5); }
.attractions-hero__facts-label { margin: 0; color: var(--color-warm-sand); font-size: var(--font-size-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.attractions-hero__fact-list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.attractions-hero__fact-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); }
.attractions-hero__fact-list span { color: var(--color-warm-sand); font-size: var(--font-size-caption); font-weight: 700; }
.attractions-hero__fact-list p { margin: 0; font-size: .875rem; line-height: 1.5; }
.attractions-map__intro { max-width: 43.75rem; }
.attractions-map__intro h2, .attractions-wellbeing__intro h2 { margin-top: var(--space-3); }
.attractions-filter { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6); }
.attractions-filter__button, .attractions-view-switch button { min-height: 2.75rem; border: 1px solid var(--color-line-aqua); border-radius: var(--radius-control); background: transparent; padding: .625rem .75rem; color: var(--color-harbour-blue); font-size: var(--font-size-label); font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.attractions-filter__button.is-active, .attractions-view-switch button.is-active { border-color: var(--color-harbour-blue); background: var(--color-harbour-blue); color: var(--color-pearl-white); }
.attractions-map__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.attractions-map__grid > * { min-width: 0; width: 100%; }
.attractions-map__card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border-top: 2px solid var(--color-harbour-blue); border-bottom: 1px solid var(--color-line-aqua); padding: var(--space-4) 0; }
.attractions-map__card h3, .attractions-map__card p { margin: 0; }
.attractions-map__card h3 { font-size: 1.8rem; }
.attractions-map__card a { margin-top: auto; min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-2); font-size: .875rem; font-weight: 700; }
.attractions-water__layout { display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 56fr); gap: 3%; align-items: start; }
.attractions-water__layout > * { min-width: 0; width: 100%; }
.attractions-water__copy { max-width: 31.25rem; }
.attractions-water__copy h2 { margin-top: var(--space-3); }
.attractions-water__lead { max-width: 29.375rem; font-size: var(--font-size-lead); line-height: 1.45; }
.attractions-water__checklist { border-top: 1px solid var(--color-harbour-blue); padding-top: var(--space-4); }
.attractions-water__checklist h3 { font-size: 1.75rem; }
.attractions-water__checklist ul { margin-bottom: 0; }
.attractions-water__figure { margin: 0; }
.attractions-water__figure img { width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.attractions-water__figure figcaption { max-width: 32.5rem; }
.attractions-water__note { margin-top: var(--space-4); border-left: 2px solid var(--color-restrained-brass); background: var(--color-warm-sand); padding: var(--space-3) var(--space-4); color: var(--color-deep-marine); font-size: var(--font-size-small); line-height: 1.5; }
.attractions-wellbeing__intro { max-width: 45rem; }
.attractions-wellbeing__bays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--space-6); border-top: 1px solid var(--color-line-aqua); border-bottom: 1px solid var(--color-line-aqua); }
.attractions-wellbeing__bays > * { min-width: 0; width: 100%; }
.attractions-wellbeing__bay { padding: var(--space-5); }
.attractions-wellbeing__bay + .attractions-wellbeing__bay { border-left: 1px solid var(--color-line-aqua); }
.attractions-wellbeing__bay > span { color: var(--color-restrained-brass); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.attractions-wellbeing__bay h3 { margin-top: var(--space-3); font-size: 1.75rem; }
.attractions-wellbeing__bay p { margin-bottom: 0; }
.attractions-promenade__intro { max-width: 42.5rem; }
.attractions-promenade__intro h2 { margin-top: var(--space-3); }
.attractions-promenade__modules { display: grid; grid-template-columns: minmax(0, 56fr) minmax(18.75rem, 38fr); gap: 6%; margin-top: var(--space-6); align-items: stretch; }
.attractions-promenade__modules > * { min-width: 0; width: 100%; }
.attractions-promenade__quote { border-top: 1px solid var(--color-harbour-blue); padding-top: var(--space-5); }
.attractions-promenade__quote blockquote { background: var(--color-warm-sand); margin: 0 0 var(--space-4); padding: var(--space-5); font-size: clamp(1.625rem, 2vw, 2.25rem); }
.attractions-promenade__quote blockquote p { margin: 0; }
.attractions-promenade__quote > p { max-width: 35rem; margin-bottom: 0; }
.attractions-promenade__service { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); background: var(--color-mist-aqua); border: 1px solid var(--color-line-aqua); padding: var(--space-5); }
.attractions-promenade__service h3, .attractions-promenade__service p { margin: 0; }
.attractions-promenade__service h3 { font-size: 1.75rem; }
.attractions-zones__intro { max-width: 47.5rem; margin-inline: auto; text-align: center; }
.attractions-zones__intro h2 { margin-top: var(--space-3); }
.attractions-zones__intro p { text-align: left; }
.attractions-zones__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.attractions-zones__grid > * { min-width: 0; width: 100%; }
.attractions-zones__card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--color-line-aqua); padding-top: var(--space-4); }
.attractions-zones__card h3, .attractions-zones__card p { margin: 0; }
.attractions-zones__card h3 { font-size: 1.7rem; }
.attractions-zones__question { color: var(--color-harbour-blue); font-size: .875rem; font-weight: 700; }
.attractions-zones__card a { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); margin-top: auto; font-size: .875rem; font-weight: 700; }
.attractions-rhythm__layout { display: grid; grid-template-columns: minmax(0, 50fr) minmax(23.75rem, 44fr); gap: 6%; align-items: start; }
.attractions-rhythm__layout > * { min-width: 0; width: 100%; }
.attractions-rhythm__figure { margin: 0; }
.attractions-rhythm__figure img { width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.attractions-rhythm__figure figcaption { max-width: 33.75rem; }
.attractions-rhythm__copy { max-width: 32.5rem; }
.attractions-rhythm__copy h2 { margin-top: var(--space-3); }
.attractions-rhythm__lead { font-size: var(--font-size-lead); line-height: 1.45; }
.attractions-rhythm__steps { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.attractions-rhythm__steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
.attractions-rhythm__steps span { color: var(--color-restrained-brass); font-size: var(--font-size-caption); font-weight: 700; }
.attractions-rhythm__steps p { margin: 0; }
.attractions-comparison__intro { max-width: 43.75rem; }
.attractions-comparison__intro h2 { margin-top: var(--space-3); }
.attractions-view-switch { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); }
.attractions-comparison__table-wrap { width: 100%; min-width: 0; }
.attractions-comparison__scroll-note { display: none; }
.attractions-comparison__table-wrap th:nth-child(1), .attractions-comparison__table-wrap td:nth-child(1) { width: 18%; }
.attractions-comparison__table-wrap th:nth-child(2), .attractions-comparison__table-wrap td:nth-child(2) { width: 36%; }
.attractions-comparison__table-wrap th:nth-child(3), .attractions-comparison__table-wrap td:nth-child(3) { width: 46%; }
.attractions-comparison__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.attractions-comparison__cards > * { min-width: 0; width: 100%; }
.attractions-comparison__cards article { border: 1px solid var(--color-line-aqua); background: var(--color-pearl-white); padding: var(--space-4); }
.attractions-comparison__cards h3 { font-size: 1.75rem; }
.attractions-comparison__notice { max-width: 53.75rem; margin-top: var(--space-5); }
.attractions-faq__intro { max-width: 45rem; }
.attractions-faq__intro h2 { margin-top: var(--space-3); }
.attractions-faq__items { display: flex; max-width: 61.25rem; min-width: 0; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.attractions-faq__item { border-top: 1px solid var(--color-line-aqua); border-bottom: 1px solid var(--color-line-aqua); }
.attractions-faq__item h3 { margin: 0; font-family: var(--font-sans); font-size: 1rem; }
.attractions-faq__item button { display: flex; width: 100%; min-height: 3.5rem; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; background: transparent; padding: var(--space-3) 0; color: var(--color-deep-marine); font-weight: 700; line-height: 1.4; text-align: left; }
.attractions-faq__item button span:last-child { flex: 0 0 auto; color: var(--color-harbour-blue); font-size: 1.5rem; font-weight: 400; }
.attractions-faq__item button[aria-expanded="true"] span:last-child { transform: rotate(45deg); }
.attractions-faq__item div { max-width: 51.25rem; padding-bottom: var(--space-4); }
.attractions-faq__item div p { margin: 0; }
.attractions-next { border-top: 1px solid var(--color-line-aqua); }
.attractions-next__intro { max-width: 42.5rem; margin-inline: auto; text-align: center; }
.attractions-next__intro p { text-align: left; }
.attractions-next__rule { display: block; width: 2.5rem; height: 2px; margin: 0 auto var(--space-4); background: var(--color-restrained-brass); }
.attractions-next__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--space-6); border-top: 1px solid var(--color-line-aqua); border-bottom: 1px solid var(--color-line-aqua); }
.attractions-next__links > * { min-width: 0; width: 100%; }
.attractions-next__links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: var(--space-3); min-height: 14rem; padding: var(--space-5); color: var(--color-ink); text-decoration: none; }
.attractions-next__links a + a { border-left: 1px solid var(--color-line-aqua); }
.attractions-next__links .label { grid-column: 1 / -1; }
.attractions-next__links strong { color: var(--color-deep-marine); font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; }
.attractions-next__links span:not(.label) { grid-column: 1 / -1; font-size: .875rem; line-height: 1.5; }
.attractions-next__links b { grid-column: 2; grid-row: 2; color: var(--color-harbour-blue); font-size: 1.5rem; transition: transform var(--transition-fast); }
.attractions-next__links a:hover b { transform: translateX(2px); }
@media (max-width: 70rem) { .attractions-map__grid, .attractions-zones__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .attractions-hero__layout { grid-template-columns: minmax(0, 3fr) minmax(18.75rem, 2fr); gap: var(--space-5); } .attractions-next__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .attractions-next__links a:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-line-aqua); } }
@media (max-width: 65.625rem) { .attractions-wellbeing__bays { grid-template-columns: repeat(2, minmax(0, 1fr)); } .attractions-wellbeing__bay:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-line-aqua); } }
@media (max-width: 66.1875rem) { .attractions-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .attractions-hero__copy { max-width: 45rem; } .attractions-hero__facts { max-width: 38rem; } }
@media (max-width: 57.5rem) { .attractions-water__layout, .attractions-rhythm__layout, .attractions-promenade__modules { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .attractions-water__copy, .attractions-rhythm__copy { max-width: none; } .attractions-water__figure { grid-row: 2; } .attractions-rhythm__figure { grid-row: 2; } .attractions-comparison__scroll-note { display: block; margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--font-size-caption); } }
@media (max-width: 48.75rem) { .attractions-wellbeing__bays { grid-template-columns: minmax(0, 1fr); } .attractions-wellbeing__bay + .attractions-wellbeing__bay, .attractions-wellbeing__bay:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-line-aqua); } }
@media (max-width: 40rem) { .attractions-hero { min-height: 20.625rem; align-items: stretch; } .attractions-hero__image { object-position: 55% center; } .attractions-hero__shade { background: linear-gradient(90deg, rgb(16 47 67 / 55%) 0%, rgb(16 47 67 / 48%) 78%, rgb(16 47 67 / 20%) 100%); } .attractions-hero__layout { display: flex; flex-direction: column; justify-content: end; gap: var(--space-4); padding-block: var(--space-5); } .attractions-hero__copy h1 { font-size: 2.625rem; } .attractions-hero__facts { padding: var(--space-4); } .attractions-map__grid, .attractions-zones__grid, .attractions-comparison__cards, .attractions-next__links { grid-template-columns: minmax(0, 1fr); } .attractions-map__card { min-height: 0; } .attractions-zones__intro { text-align: center; } .attractions-next__links a + a, .attractions-next__links a:nth-child(3) { grid-column: auto; border-left: 0; border-top: 1px solid var(--color-line-aqua); } .attractions-next__links a { min-height: 4.5rem; } .attractions-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); } .attractions-filter__button { flex: 0 0 auto; } .attractions-view-switch button { flex: 1 1 0; } .attractions-faq__item button { min-height: 3.5rem; } }