/* Centred content wrapper */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }
/* Default section vertical rhythm */
section { position: relative; padding: 120px 0; }
@media (max-width: 720px) { section { padding: 72px 0; } }
/* Section eyebrow — small label above heading */
.section-eyebrow {
font-size: var(--fs-small);
font-weight: 700;
letter-spacing: var(--tracking-claim);
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 10px;
}
.section-eyebrow::before { content: ""; width: 28px; height: 4px; display: inline-block; flex-shrink: 0;
background: url("data:image/svg+xml,") no-repeat center / 100% 100%; }
.bg-water .section-eyebrow::before,
.error-404 .section-eyebrow::before,
.legal-hero .section-eyebrow::before {
background-image: url("data:image/svg+xml,");
}
.bg-coral .section-eyebrow::before {
background-image: url("data:image/svg+xml,");
}
/* Section title */
.section-title {
font-size: clamp(36px, 5vw, 64px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.015em;
margin: 0 0 24px;
text-wrap: balance;
max-width: 16ch;
}
/* Hide manual
tags — max-width + text-wrap: balance handles wrapping automatically. */
.section-title br { display: none; }
/* in any heading = orange accent, non-italic. Homepage hero overrides via .hero-title em. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }
/* On coral background the accent is invisible — use navy instead. */
.bg-coral h1 em, .bg-coral h2 em, .bg-coral h3 em { color: var(--wab-dark-water); }
/* Section lede paragraph */
.section-lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--fg3); max-width: 56ch; text-wrap: pretty; }
/* Section background colour modifiers */
.bg-snow { background: var(--wab-pastel-snow); color: var(--fg1); }
.bg-water { background: var(--wab-dark-water); color: var(--fg-on-dark); }
.bg-coral { background: var(--wab-fiery-coral); color: var(--fg-on-dark); }
.bg-night { background: var(--wab-rich-black); color: var(--fg-on-dark); }
/* Heading and lede overrides on dark backgrounds */
.bg-water .section-title, .bg-water h1, .bg-water h2, .bg-water h3 { color: var(--fg-on-dark); }
.bg-water .section-lede { color: rgba(255,255,255,.78); }
.bg-water .section-eyebrow { color: var(--wab-light-blue); }
.bg-coral .section-title, .bg-coral h1, .bg-coral h2 { color: var(--fg-on-dark); }
.bg-coral .section-lede { color: rgba(255,255,255,.9); }
.bg-coral .section-eyebrow { color: var(--wab-pastel-snow); }
/* Wave divider — SVG shape at section bottom; flipped versions between sections */
.section-wave {
position: absolute; left: 0; right: 0; bottom: -28px;
width: 100%; height: 40px;
pointer-events: none; display: block;
z-index: 5;
transform: scaleY(-1);
}
.hero > .section-wave, .booking-hero > .section-wave { bottom: 0; transform: none; }
.booking-hero > .section-wave path { fill: var(--wab-pastel-snow); }
/* Default: no "on the water" gallery, so the hero flows straight into the
(snow-coloured) features section, same as any other section boundary. */
.hero > .section-wave path { fill: var(--wab-pastel-snow); }
.section-wave path { transition: fill .3s; }
.bg-snow .section-wave path { fill: var(--wab-pastel-snow); }
.bg-water .section-wave path { fill: var(--wab-dark-water); }
.bg-coral .section-wave path { fill: var(--wab-fiery-coral); }
.bg-night .section-wave path { fill: var(--wab-rich-black); }
.site-header .section-wave { display: none; }
/* With a gallery: the hero photo's own organic mask (see .hero-image in
home.css) handles the transition into it on desktop, so this wave would
just duplicate/clash with it there — hidden until the mask switches off
below 1080px. Coloured dark-water to match the gallery section instead. */
.hero > .section-wave.wave-to-water { display: none; }
.hero > .section-wave.wave-to-water path { fill: var(--wab-dark-water); }
@media (max-width: 1080px) { .hero > .section-wave.wave-to-water { display: block; } }
@media (max-width: 720px) { .section-wave { height: 32px; bottom: -22px; } }
/* Scroll-reveal — CSS animation (not transition) so component hover transitions don't interfere.
JS adds .is-in → revealIn plays → JS swaps to .is-revealed so hover works normally. */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in { animation: revealIn .75s cubic-bezier(.22,1,.36,1) both; }
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-delay="1"].is-in { animation-delay: .08s; }
.reveal[data-delay="2"].is-in { animation-delay: .16s; }
.reveal[data-delay="3"].is-in { animation-delay: .24s; }
.reveal[data-delay="4"].is-in { animation-delay: .32s; }
.reveal[data-delay="5"].is-in { animation-delay: .40s; }
.reveal[data-delay="6"].is-in { animation-delay: .48s; }
.reveal[data-delay="7"].is-in { animation-delay: .56s; }
.reveal[data-delay="8"].is-in { animation-delay: .64s; }
@keyframes revealIn {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
/* Hero / page-hero: higher specificity keeps heroIn even after .is-in is added by JS */
.hero .reveal, .page-hero .reveal, .booking-hero .reveal {
opacity: 0; transform: translateY(20px);
animation: heroIn .6s cubic-bezier(.22,1,.36,1) .05s forwards;
transition: none;
}
.hero .reveal.is-in, .page-hero .reveal.is-in, .booking-hero .reveal.is-in { animation: heroIn .6s cubic-bezier(.22,1,.36,1) forwards; }
.hero .reveal.is-revealed, .page-hero .reveal.is-revealed, .booking-hero .reveal.is-revealed { animation: none; opacity: 1; transform: none; }
.hero .reveal[data-delay="1"], .page-hero .reveal[data-delay="1"], .booking-hero .reveal[data-delay="1"] { animation-delay: .12s; }
.hero .reveal[data-delay="2"], .page-hero .reveal[data-delay="2"], .booking-hero .reveal[data-delay="2"] { animation-delay: .2s; }
.hero .reveal[data-delay="3"], .page-hero .reveal[data-delay="3"], .booking-hero .reveal[data-delay="3"] { animation-delay: .28s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
/* Utility: narrow centred intro block */
.intro-narrow { max-width: 720px; }