:root {
  --ink: #17313a;
  --muted: #5d7178;
  --foam: #f3f7f5;
  --sand: #f4eadc;
  --sea: #096b78;
  --deep: #083c47;
  --white: #fff;
  --radius: 1.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--foam);
  font: 400 1rem/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .75rem 1rem; background: var(--white); }
.skip-link:focus { top: 1rem; }

.site-header {
  min-height: 5.25rem;
  padding: .8rem clamp(1.25rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--white);
}
.brand { text-decoration: none; line-height: 1.05; letter-spacing: -.02em; }
.brand span { display: block; font: 700 clamp(1.1rem, 2vw, 1.45rem)/1.05 Georgia, serif; }
.brand small { color: var(--sea); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; }
nav { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2rem); }
nav a { text-decoration: none; font-size: .92rem; font-weight: 650; }
.nav-cta { padding: .62rem 1rem; border: 1px solid #b9c9c9; border-radius: 999px; }

.hero { position: relative; min-height: min(78vh, 51rem); display: grid; align-items: end; overflow: hidden; color: var(--white); }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url('/assets/images/hero-ocean.jpg') center/cover no-repeat; filter: brightness(1.12) saturate(1.04); transform: scale(1.01); }
.hero-shade { background: linear-gradient(90deg, rgba(5,34,40,.58) 0%, rgba(5,34,40,.3) 45%, rgba(5,34,40,.04) 76%), linear-gradient(0deg, rgba(5,34,40,.48), transparent 48%); }
.hero-content { position: relative; width: min(47rem, calc(100% - 2.5rem)); margin: 0 clamp(1.25rem, 7vw, 7rem) clamp(3rem, 9vw, 7.5rem); }
.hero-content .eyebrow,
.hero-content h1,
.hero-content > p:not(.eyebrow) { text-shadow: 0 2px 18px rgba(2,22,27,.82), 0 1px 3px rgba(2,22,27,.95); }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 800; }
.eyebrow.dark { color: var(--sea); }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.03; letter-spacing: -.035em; }
h1 { max-width: 13ch; font-size: clamp(3rem, 8vw, 6.8rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.hero-content > p:not(.eyebrow) { max-width: 42rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.button { display: inline-block; margin-top: .75rem; padding: .9rem 1.2rem; border-radius: 999px; background: var(--sand); color: var(--deep); text-decoration: none; font-weight: 800; }

.quick-facts { width: min(72rem, calc(100% - 2.5rem)); margin: -1.6rem auto 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: 0 16px 45px rgba(23,49,58,.12); }
.quick-facts div { padding: 1.35rem 1rem; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #e6eeee; }
.quick-facts div:last-child { border: 0; }
.quick-facts strong { font: 500 2rem/1 Georgia, serif; color: var(--sea); }
.quick-facts span { margin-top: .35rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

.section { width: min(76rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 8vw, 7rem); }
.copy { font-size: 1.08rem; }
.copy p:first-child { margin-top: 0; }
.note { margin-top: 2rem; padding: 1.2rem 1.4rem; border-left: 4px solid var(--sea); background: var(--white); }
.gallery-section { padding-top: 1rem; }
.section-heading { max-width: 52rem; margin-bottom: 2.25rem; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border-radius: var(--radius); overflow: hidden; background: #dce7e5; }
.gallery figure { margin: 0; min-height: 23rem; overflow: hidden; }
.gallery-wide { grid-column: 1 / -1; }
.gallery img { width: 100%; height: 100%; min-height: 23rem; object-fit: cover; }
.gallery-wide img { aspect-ratio: 16/7.2; }
.archive-note { color: var(--muted); font-size: .88rem; max-width: 55rem; }

.enquiry { width: 100%; padding-inline: max(1.25rem, calc((100vw - 76rem) / 2)); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 8vw, 7rem); background: var(--deep); color: var(--white); }
.enquiry-copy p:not(.eyebrow) { max-width: 34rem; color: #c9d7d9; }
.phone { display: inline-block; margin-top: 1rem; font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 Georgia, serif; color: #f3d6ac; text-underline-offset: .2em; }
.form-preview { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.guard { margin: 0 0 1.5rem; padding: .85rem 1rem; border-radius: .75rem; background: #fff3d9; color: #674b19; }
.fields { display: grid; gap: .9rem; opacity: .75; }
.fields label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
input, textarea { width: 100%; padding: .7rem; border: 1px solid #c8d5d5; border-radius: .45rem; background: #f5f7f7; }
button { padding: .8rem 1rem; border: 0; border-radius: 999px; background: #cbd5d5; color: #667; font-weight: 800; }
footer { padding: 2rem max(1.25rem, calc((100vw - 76rem) / 2)); display: flex; justify-content: space-between; gap: 1rem; background: #052e36; color: #dce8e9; }

@media (max-width: 760px) {
  .site-header { align-items: flex-start; }
  nav a:not(.nav-cta) { display: none; }
  .hero { min-height: 42rem; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,34,40,.68), rgba(5,34,40,.04) 75%); }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .quick-facts div:nth-child(2) { border-right: 0; }
  .quick-facts div:nth-child(-n+2) { border-bottom: 1px solid #e6eeee; }
  .intro, .enquiry { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-wide { grid-column: auto; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }