:root {
  --ocean: #07ada9;
  --ocean-dark: #087d7a;
  --ink: #17343d;
  --sand: #f5f2e9;
  --mist: #edf7f6;
  --body: #6e7a7e;
}

html { scroll-behavior: smooth; }

body {
  color: var(--body);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  background: #fff;
}

h1, h2, h3, h4, .navbar-brand {
  color: var(--ink);
  font-family: "Barlow", sans-serif;
  font-weight: 700;
}

h2 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: .98; }

.skip-link { position: fixed; z-index: 1100; background: #fff; padding: .75rem 1rem; }

.navbar {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(23,52,61,.08);
  backdrop-filter: blur(12px);
}

.navbar-brand { display: flex; align-items: center; gap: .7rem; font-size: 1.35rem; }
.brand-mark { display: grid; width: 2.25rem; aspect-ratio: 1; place-items: center; color: #fff; background: var(--ocean); border-radius: 50%; font-size: .8rem; letter-spacing: .05em; }
.brand-dot { color: var(--ocean); }
.nav-link { color: var(--ink); font-size: .9rem; font-weight: 600; }

.btn { border-radius: 100px; font-weight: 600; padding: .8rem 1.5rem; }
.btn-primary { --bs-btn-bg: var(--ocean); --bs-btn-border-color: var(--ocean); --bs-btn-hover-bg: var(--ocean-dark); --bs-btn-hover-border-color: var(--ocean-dark); }

.hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(2, 45, 61, .82) 0%, rgba(4, 80, 88, .25) 58%, rgba(0,0,0,.08) 100%),
    url("https://images.unsplash.com/photo-1590523741831-ab7e8b8f9c7f?auto=format&fit=crop&w=2000&q=85") center/cover no-repeat;
}

.hero::after { content: ""; position: absolute; inset: auto -8vw -16vw auto; width: 38vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.hero-content { z-index: 2; }
.hero h1 { color: #fff; font-size: clamp(4.2rem, 10vw, 8.5rem); line-height: .78; letter-spacing: -.045em; }
.hero-copy { color: rgba(255,255,255,.9); max-width: 38rem; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.eyebrow, .section-kicker { color: var(--ocean); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.hero .eyebrow { color: #a5f1ed; }
.hero-tag { position: absolute; right: 2rem; bottom: 2rem; z-index: 3; gap: 1rem; color: rgba(255,255,255,.7); font-size: .7rem; letter-spacing: .12em; writing-mode: vertical-rl; }

.welcome-section { background: #fff; }
.welcome-section .lead { color: var(--ink); font-size: 1.2rem; font-weight: 500; }

.discover-section { background: var(--mist); }
.section-note { color: #799093; }
.experience-card { min-height: 390px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 1.75rem; color: #fff; border-radius: 3px; isolation: isolate; transition: transform .3s ease; }
.experience-card:hover { transform: translateY(-6px); }
.experience-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; transition: transform .6s ease; }
.experience-card:hover::before { transform: scale(1.04); }
.experience-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,38,48,.9), rgba(6,38,48,.08) 70%); }
.experience-card--sail::before { background-image: url("https://images.unsplash.com/photo-1544550285-f813152fb2fd?auto=format&fit=crop&w=1000&q=80"); }
.experience-card--reef::before { background-image: url("https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=1000&q=80"); }
.experience-card--relax::before { background-image: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1000&q=80"); }
.card-number { align-self: flex-end; font-family: "Barlow", sans-serif; font-size: .85rem; letter-spacing: .12em; }
.card-content h3 { color: #fff; font-size: 2rem; }
.card-content p { margin-bottom: 0; color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.6; }

.cta-section { background: var(--sand); }
.cta-panel { padding: clamp(2rem, 6vw, 5rem); background: var(--ocean-dark); }
.cta-panel .btn-light { color: var(--ocean-dark); }

.domain-enquiry-section { background: var(--mist); }
.domain-enquiry-form { padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; border: 1px solid rgba(23,52,61,.1); border-radius: 8px; box-shadow: 0 18px 45px rgba(22,61,69,.07); }
.domain-enquiry-form .form-label { color: var(--ink); font-size: .85rem; font-weight: 700; }
.domain-enquiry-form .form-control { padding: .8rem 1rem; border-color: rgba(23,52,61,.18); }
.domain-enquiry-form .form-control:focus { border-color: var(--ocean); box-shadow: 0 0 0 .25rem rgba(7,173,169,.16); }

footer { color: #879194; background: var(--sand); border-top: 1px solid rgba(23,52,61,.08); }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 11rem 0 5rem;
  background:
    radial-gradient(circle at top right, rgba(7,173,169,.16), transparent 34%),
    linear-gradient(180deg, #f5fbfa 0%, #fff 100%);
}

.page-hero::after {
  content: "";
  position: absolute;
  top: 2rem;
  right: -6rem;
  width: min(28rem, 45vw);
  aspect-ratio: 1;
  border: 1px solid rgba(7,173,169,.18);
  border-radius: 50%;
}

.page-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.page-hero .hero-copy {
  color: var(--ink);
}

.page-hero-copy p:last-child {
  margin-bottom: 0;
}

.content-section {
  padding: 5rem 0;
}

.content-section--mist {
  background: var(--mist);
}

.content-card {
  height: 100%;
  padding: 2rem;
  background: #fff;
  border: 1px solid rgba(23,52,61,.08);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(22,61,69,.07);
}

.content-card h3,
.content-card h4 {
  margin-bottom: 1rem;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.stat-chip {
  padding: 1.1rem 1.2rem;
  background: rgba(7,173,169,.08);
  border: 1px solid rgba(7,173,169,.14);
  border-radius: 999px;
  color: var(--ink);
  font-family: "Barlow", sans-serif;
  font-size: .95rem;
  text-align: center;
}

.quote-panel {
  padding: 2rem;
  color: #fff;
  background: linear-gradient(135deg, #0d4b53 0%, #087d7a 100%);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(13,75,83,.2);
}

.quote-panel p {
  margin: 0;
  font-size: 1.15rem;
}

.detail-list {
  display: grid;
  gap: 1rem;
}

.detail-item {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(23,52,61,.08);
}

.detail-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-label {
  margin-bottom: .2rem;
  color: #6f8589;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.detail-value {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: .8rem 1rem;
  color: var(--ink);
  text-decoration: none;
  background: rgba(7,173,169,.08);
  border: 1px solid rgba(7,173,169,.16);
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}

.social-link:hover,
.social-link:focus-visible {
  background: rgba(7,173,169,.16);
  transform: translateY(-2px);
}

.enquiry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.enquiry-tag {
  padding: .55rem .85rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(23,52,61,.12);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}

.info-callout {
  padding: 1.2rem 1.4rem;
  color: var(--ink);
  background: rgba(7,173,169,.08);
  border-left: 4px solid var(--ocean);
}

@media (max-width: 767.98px) {
  .hero { min-height: 650px; background-position: 62% center; }
  .hero h1 { line-height: .85; }
  .experience-card { min-height: 320px; }
  .navbar-collapse { padding: 1rem 0; }
  .page-hero { padding-top: 9rem; }
  .stat-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}