/* Salt & Cypress — Open Water
   Scene: the last house on the bay side, looking out.
   Structural rule: the photograph is the CANVAS, not a banner. Full-bleed image
   sections and quiet white sections alternate all the way down, so the water is
   the connective tissue between the practical bits. Headlines sit straight on
   the photograph with no card, no panel, no gradient scrim behind them.
   Every shadow is tinted with the sea blue — a neutral grey shadow would break
   the atmosphere. */

:root{
  --sea:#0E6E9E;
  --deep:#08324B;
  --sky:#5FA8CF;
  --sun:#F2B441;        /* the one warm accent */
  --paper:#FFFFFF;
  --ink:#20303A;
  --ink-70:rgba(32,48,58,.72);
  --ink-45:rgba(32,48,58,.48);
  --fog:#E4EAEE;

  --display:'Instrument Serif',Georgia,serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --page:1180px;
  --pad:clamp(20px,5vw,64px);

  --lift:0 10px 30px rgba(8,50,75,.16), 0 2px 6px rgba(8,50,75,.10);
}

*,*::before,*::after{ box-sizing:border-box; }

body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.6;
  -webkit-font-smoothing:antialiased; }
h1,h2{ font-family:var(--display); font-weight:400; margin:0; line-height:1.04; letter-spacing:-.02em; }
h3{ font-family:var(--body); font-weight:700; margin:0; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img{ display:block; max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }

.wrap{ max-width:var(--page); margin:0 auto; }
.label{ font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sea); margin:0 0 14px; }

/* pill for every action — a square button breaks the softness */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--deep); color:#fff; border:1px solid var(--deep);
  border-radius:9999px; padding:13px 28px;
  font-family:var(--body); font-weight:600; font-size:15px;
  transition:transform .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.62); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); }
.btn-wide{ display:block; width:100%; }

/* ================= FULL-BLEED IMAGE SECTIONS ================= */
.canvas{ position:relative; isolation:isolate; color:#fff; }
.canvas .bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
}
.canvas--hero{ min-height:min(92vh,820px); display:flex; flex-direction:column; }
.canvas--mid{ padding:clamp(70px,12vw,150px) var(--pad); }

/* nav rides on the photograph */
.nav{
  max-width:var(--page); width:100%; margin:0 auto;
  padding:22px var(--pad); display:flex; align-items:center; gap:22px;
}
.brand{ font-family:var(--display); font-size:23px; letter-spacing:-.01em; text-decoration:none; }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-weight:500; font-size:15px; text-decoration:none; color:rgba(255,255,255,.86); }
.links a:hover{ color:#fff; }
@media (max-width:820px){ .links{ display:none; } .nav .btn-ghost{ margin-left:auto; } }

.hero-body{
  max-width:var(--page); width:100%; margin:0 auto;
  padding:clamp(30px,6vw,70px) var(--pad) clamp(48px,8vw,96px);
  margin-top:auto;
}
.kicker{ font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin:0 0 20px; color:var(--sun); }
.hero-body h1{ font-size:clamp(44px,7.6vw,104px); margin-bottom:24px; }
.hero-body .lede{ font-size:clamp(17px,1.5vw,20px); max-width:44ch; margin:0 0 30px; color:rgba(255,255,255,.92); }
.hero-btns{ display:flex; flex-wrap:wrap; gap:11px; }

/* headline sitting straight on the water — no panel behind it */
.mid-body{ max-width:var(--page); margin:0 auto; text-align:center; }
.mid-body h2{ font-size:clamp(28px,4.2vw,58px); margin-bottom:20px; }
.mid-body p{ margin:0 auto; max-width:52ch; font-size:clamp(16px,1.3vw,18px); color:rgba(255,255,255,.9); }

/* ================= PAPER SECTIONS ================= */
.paper{ padding:clamp(54px,7vw,104px) var(--pad); }
.paper h2{ font-size:clamp(30px,4.2vw,54px); margin-bottom:20px; }
.paper > .wrap > .sub{ color:var(--ink-70); margin:0 0 clamp(28px,3.6vw,44px); max-width:56ch; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split p{ color:var(--ink-70); max-width:50ch; }
.split figure{ margin:0; }
.split figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; box-shadow:var(--lift); }
.split figcaption{ margin-top:12px; font-size:14px; color:var(--ink-45); }

.ticks{ list-style:none; padding:0; margin:24px 0 0; }
.ticks li{ position:relative; padding:10px 0 10px 28px; border-top:1px solid var(--fog); color:var(--ink-70); font-size:15.5px; }
.ticks li::before{
  content:''; position:absolute; left:2px; top:17px;
  width:10px; height:5px; border-left:2px solid var(--sea); border-bottom:2px solid var(--sea);
  transform:rotate(-45deg);
}

/* ---- rates */
.rates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:clamp(36px,5vw,64px); }
.rate{ background:var(--paper); border:1px solid var(--fog); border-radius:12px; padding:26px 24px 28px; }
.rate--on{ border-color:var(--sea); box-shadow:var(--lift); }
.season{ margin:0 0 14px; font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sea); }
.fig{ font-family:var(--display); font-size:44px; margin:0 0 12px; line-height:1; }
.fig span{ font-family:var(--body); font-size:15px; color:var(--ink-45); }
.rate p:last-child{ margin:0; color:var(--ink-70); font-size:15px; }

/* ---- booking form */
.book{ max-width:640px; }
.book label{ display:block; margin-bottom:15px; }
.book span{ display:block; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); margin-bottom:8px; }
.book input,.book textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--fog); border-radius:8px; padding:13px 15px;
}
.book textarea{ resize:vertical; }
.book input:focus,.book textarea:focus{ border-color:var(--sea); outline:none; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .row{ grid-template-columns:1fr; } }
.sent{ margin:14px 0 0; font-size:15px; font-weight:600; color:var(--sea); text-align:center; }

/* ---- footer */
.foot{ background:var(--deep); color:rgba(255,255,255,.76); padding:clamp(40px,5vw,68px) var(--pad); font-size:15px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-family:var(--display); font-size:28px; color:#fff; }
.fine{ margin-top:20px; font-size:12.5px; line-height:1.75; color:rgba(255,255,255,.5); max-width:74ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
  background:var(--sun); color:var(--deep);
  padding:11px 20px; border-radius:9999px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
  box-shadow:var(--lift);
}
.demo-tag span{ opacity:.72; text-transform:uppercase; font-size:9.5px; letter-spacing:.13em; }
.demo-tag strong{ font-weight:700; font-size:12px; }
.demo-tag:hover{ background:#fff; }