/* Salt and Sand: deep teal, coral, sunshine and sand. Syne for headings, Manrope for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FFF8EE;
  --surface: #FFFFFF;
  --soft: #FFE8C7;
  --ink: #0B2E2F;
  --muted: #4B6363;
  --line: #F1DDBE;
  --line-strong: #E2C597;
  --brand: #FF5A3C;
  --brand-hover: #E84528;
  --brand-ink: #FFFFFF;
  --brand-text: #C7361C;
  --teal: #0E4D4F;
  --sun: #FFC93C;
  --eyebrow: #0E4D4F;
  --head: "Syne", "Arial Black", sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --radius: 14px;
  --radius-lg: 26px;
  --btn-radius: 999px;
  --wrap: 1220px;
  --gap: 24px;
  --cta-bg: #0E4D4F;
  --sum-bg: #0E4D4F;
  --sum-ink: #FFF8EE;
  --sum-muted: #A9CFCB;
  --badge-bg: #FFC93C;
  --badge-ink: #0B2E2F;
  --menu-bg: #0E4D4F;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
.btn { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; }
.btn-ghost { border-width: 2px; }

.header { background: var(--teal); color: #FFF8EE; }
.header .nav-toggle { border-color: rgba(255,255,255,.3); color: #fff; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 40px; height: 40px; }
.logo span { display: grid; line-height: 1; }
.logo b { font: 800 1.5rem var(--head); color: #FFF8EE; }
.logo small { font-size: .74rem; color: var(--sun); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.nav a { color: #CDE5E2; font-weight: 700; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal); background: var(--sun); }

.hero { position: relative; min-height: clamp(560px, 82vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; overflow: hidden; color: var(--teal); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg svg { width: 100%; height: 100%; }
.hero-copy { position: relative; padding-block: clamp(36px, 7vw, 80px); }
.hero-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--teal); color: var(--sun); font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.3rem, 9vw, 9rem); line-height: .85; margin: 18px 0 16px; letter-spacing: -.05em; color: var(--teal); }
.hero h1 span { color: #FFF8EE; }
.hero-sub { max-width: 34ch; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; color: #3A1D0E; }
.hero .t-actions { margin-top: 26px; }
.hero .btn-primary { background: var(--teal); }
.hero .btn-ghost { border-color: var(--teal); color: var(--teal); }
@media (max-width: 640px) { .hero { min-height: 640px; } .hero-sub { max-width: 28ch; } }
.marquee { overflow: hidden; background: var(--sun); color: var(--teal); border-block: 3px solid var(--teal); }
.marquee div { display: flex; width: max-content; animation: ss-slide 30s linear infinite; }
.marquee span { padding: 14px 24px; font: 800 1.2rem var(--head); text-transform: uppercase; white-space: nowrap; }
.marquee span::after { content: "✺"; margin-left: 48px; color: var(--brand); }
@keyframes ss-slide { to { transform: translateX(-50%); } }

.sec-title em { font-style: normal; color: var(--brand); }
.room-card { border: 3px solid var(--teal); box-shadow: 8px 8px 0 var(--teal); }
.room-art { border-bottom: 3px solid var(--teal); }
.room-body h3 { font-size: 1.6rem; }
.room-rate b { color: var(--teal); }
.chips li { border-color: var(--teal); color: var(--teal); font-weight: 600; }

.promo { background: var(--brand); color: #fff; }
.promo-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 5vw, 64px); align-items: center; }
@media (max-width: 760px) { .promo-grid { grid-template-columns: minmax(0, 1fr); } }
.promo-big { font: 800 clamp(5rem, 16vw, 11rem)/.9 var(--head); color: var(--sun); letter-spacing: -.05em; }
.promo .lede { color: #FFE6DE; }
.promo .btn-primary { background: var(--teal); }

.page-head { background: var(--sun); color: var(--teal); border-bottom: 3px solid var(--teal); margin-bottom: clamp(16px, 3vw, 32px); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 16ch; }
.page-head .lede { color: #3A3A1E; }
.sig-step { border: 3px solid var(--teal); }
.sig-step > h2 .n { background: var(--teal); }
.sig-out { border: 3px solid var(--teal); box-shadow: 8px 8px 0 var(--brand); }
.sig-out .eyebrow { color: var(--sun); }
.sig-out .lines div { border-color: rgba(255,255,255,.2); }
.sig-out .lines .is-disc dd { color: var(--sun); }
.sig-out .form-note { color: var(--sum-muted); }
.sig-total { color: var(--sun); font-size: clamp(2.4rem, 6vw, 3.4rem); }
.seg span { border-width: 2px; }
.exp { border: 3px solid var(--teal); }
.quotes li { border: 3px solid var(--teal); background: var(--soft); }
.quotes blockquote { font-weight: 600; }
.cta-band h2 { color: var(--sun); }
.cta-band .btn-primary { background: var(--sun); color: var(--teal); }
.numbers b { color: var(--brand); }
.footer { background: #0B2E2F; color: #CDE5E2; --footer-line: rgba(255,255,255,.15); }
@media (prefers-reduced-motion: reduce) { .marquee div { animation: none; } }
@media (max-width: 420px) { .header-cta .btn { padding: 10px 14px; font-size: .82rem; } .logo b { font-size: 1.15rem; } }
.sec-title { font-size: clamp(1.6rem, 5.4vw, 2.8rem); overflow-wrap: anywhere; }
.page-head h1 { font-size: clamp(2rem, 6.4vw, 4.2rem); overflow-wrap: anywhere; }
@media (max-width: 420px) { .header-cta { display: none; } }