/* Caribbean Vacations — house style. Hand-rolled, no frameworks.
   Standards: President's Readability Standard (dark-on-light / bright-on-dark,
   nothing pale), Spacing Standard (bars: equal space above/below lettering). */
:root{
  --navy:#0a2a4a;        /* headings on light */
  --ink:#22332b;         /* body text on light */
  --teal:#0a5c56;        /* place labels / links on light */
  --deep:#07332e;        /* dark panels */
  --deep2:#0b453e;
  --gold:#c9973f;        /* bars */
  --goldink:#1d1503;     /* lettering on gold (button lock pair) */
  --paper:#f7f5ef;       /* page background */
  --card:#ffffff;
  --line:#d8d2c2;
  --cream:#eaf4ef;       /* bright text on deep green */
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--teal)}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:0 0 .5em}
h1{font-size:2rem}
h2{font-size:1.5rem}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* ---------- header ---------- */
.site-head{background:var(--deep);color:var(--cream)}
.site-head .wrap{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream)}
.brandmark img{width:44px;height:44px;border-radius:50%}
.brand-name{font-size:1.35rem;font-weight:800;letter-spacing:.2px;color:#fff;line-height:1.1}
.brand-tag{font-size:.85rem;color:var(--cream)}
.main-nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.main-nav a{color:var(--cream);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.main-nav a:hover,.main-nav a:focus{background:var(--deep2);color:#fff}

/* ---------- gold bars (spacing standard: 18px above & below lettering) ---------- */
.bar{background:var(--gold);color:var(--goldink);font-weight:800;text-align:center;
  padding:18px 16px;font-size:1.05rem;letter-spacing:.3px;border-radius:10px}
.bar a{color:var(--goldink)}
.rule{border:0;border-top:3px solid var(--gold);margin:26px 0}

/* ---------- hero / search ---------- */
.hero{background:var(--deep);color:var(--cream);padding:34px 0 40px}
.hero h1{color:#fff;font-size:2.1rem;margin-bottom:.3em}
.hero .promise{font-size:1.12rem;max-width:42em}
.searchbar{background:#fff;border-radius:var(--radius);padding:16px;display:grid;gap:12px;
  grid-template-columns:1fr;box-shadow:0 4px 18px rgba(0,0,0,.25)}
@media(min-width:760px){.searchbar{grid-template-columns:2fr 1fr 1fr 1fr auto;align-items:end}}
.field label{display:block;font-weight:700;color:var(--navy);font-size:.9rem;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;font-size:1rem;
  border:2px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--gold);border-color:var(--gold)}
.btn{display:inline-block;background:var(--gold);color:var(--goldink);font-weight:800;border:0;
  padding:13px 22px;border-radius:10px;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover,.btn:focus{filter:brightness(1.07)}
.btn.secondary{background:var(--deep);color:var(--cream)}
.btn.block{width:100%}
.honest-note{font-size:.92rem;color:var(--cream);margin-top:12px}
.honest-note.dark{color:var(--ink)}

/* ---------- mission strip ---------- */
.mission{background:#fff;border-bottom:3px solid var(--gold);padding:22px 0}
.mission p{margin:0;font-size:1.05rem;max-width:56em}
.mission strong{color:var(--navy)}

/* ---------- property grid ---------- */
.grid{display:grid;gap:20px;grid-template-columns:1fr;margin:22px 0 8px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(10,42,74,.08)}
.card .photo{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .ph{aspect-ratio:16/10;background:var(--deep);color:var(--cream);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:18px}
.card .ph img{width:64px;height:64px;border-radius:50%}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.place{color:var(--teal);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.6px}
.card h3{margin:0}
.card .line{margin:0;flex:1}
.price-slot{border-top:1px solid var(--line);padding-top:10px;font-size:.95rem}
.price-slot .confirm{font-weight:700;color:var(--navy)}
.card .btn{margin-top:10px}
.result-line{font-weight:700;color:var(--navy);margin-top:18px}

/* ---------- property page ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:1fr;margin:18px 0}
@media(min-width:760px){.gallery{grid-template-columns:1fr 1fr}}
.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gallery figcaption{padding:10px 14px;font-size:.92rem}
.cols{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:860px){.cols{grid-template-columns:2fr 1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.panel h3{border-bottom:3px solid var(--gold);padding-bottom:8px}
.panel ul{margin:0;padding-left:20px}
.panel li{margin-bottom:8px}
.bookbox{background:var(--deep);color:var(--cream);border-radius:var(--radius);padding:22px}
.bookbox h3{color:#fff;border-bottom:3px solid var(--gold);padding-bottom:8px}
.bookbox .btn{margin-top:8px}
.confirm-line{background:#fdf6e0;border:1px solid var(--gold);border-radius:9px;padding:10px 14px;font-size:.95rem}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;max-width:720px}
.form-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.checkline{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.checkline input{width:22px;height:22px;margin-top:2px}
.thanks{background:var(--deep);color:var(--cream);border-radius:var(--radius);padding:24px;max-width:720px}
.thanks h2{color:#fff}
.thanks .summary{background:#fff;color:var(--ink);border-radius:9px;padding:14px 16px;white-space:pre-wrap;font-size:.98rem}
[hidden]{display:none !important}

/* ---------- family lane / owners ---------- */
.lane{background:var(--deep);color:var(--cream);border-radius:var(--radius);padding:26px;margin:26px 0}
.lane h2{color:#fff}
.steps{display:grid;gap:16px;grid-template-columns:1fr;margin:18px 0}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr 1fr}}
.step{background:#fff;border:1px solid var(--line);border-top:6px solid var(--gold);border-radius:var(--radius);padding:18px}
.step .n{font-size:1.6rem;font-weight:800;color:var(--teal)}
table.compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
table.compare th,table.compare td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.compare th{background:var(--deep);color:var(--cream)}

/* ---------- the thank-you moment (Desk D) ----------
   Full-screen ocean, deep-sea overlay, white logo, gratitude first,
   then the receipt card. Pure CSS motion; reduced-motion respected.
   Readability: every word sits on the overlay or the white card —
   never raw on the bright water (President's Readability Standard). */
.thanks-ocean{position:fixed;inset:0;z-index:60;overflow-y:auto;color:#fff;
  background:#06283d url("../assets/ocean-thanks.jpg") center/cover no-repeat}
.thanks-ocean .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,32,54,.84) 0%,rgba(6,32,54,.68) 42%,rgba(4,24,42,.90) 100%)}
.thanks-ocean .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 34% at 72% 16%,rgba(255,214,130,.34),rgba(255,214,130,0) 70%);
  animation:cv-glow 11s ease-in-out infinite alternate}
@keyframes cv-glow{from{transform:translateX(-4%) translateY(0);opacity:.75}
  to{transform:translateX(5%) translateY(3%);opacity:1}}
.thanks-in{position:relative;max-width:680px;margin:0 auto;padding:40px 18px 120px;text-align:center}
.thanks-logo{width:104px;height:104px;margin:6px auto 4px}
.thanks-brand{font-weight:800;letter-spacing:2.5px;font-size:1.02rem}
.thanks-tag{color:#ffd98a;font-size:.95rem;letter-spacing:.4px;margin-top:2px}
.thanks-ocean h2{color:#fff;font-size:2.05rem;margin:.55em 0 .3em}
.thanks-ocean .lede{font-size:1.1rem;max-width:34em;margin:0 auto 1.1em;color:#f2f7f3}
.rise{opacity:0;animation:cv-rise .9s ease forwards}
@keyframes cv-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.receipt{background:#fff;color:var(--ink);border-radius:var(--radius);text-align:left;
  padding:22px;box-shadow:0 14px 44px rgba(0,0,0,.45)}
.receipt .r-head{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--gold);padding-bottom:12px}
.receipt .r-head img{width:46px;height:46px}
.receipt .r-title{font-weight:800;color:var(--navy);font-size:1.08rem;line-height:1.25}
.receipt .r-state{display:inline-block;background:var(--deep);color:var(--cream);font-weight:700;
  font-size:.8rem;letter-spacing:.4px;padding:4px 10px;border-radius:999px;margin-top:4px}
.receipt .r-state.paid{background:#0a5c56;color:#fff}
.receipt dl{margin:14px 0 0}
.receipt .r-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.receipt .r-row dt{font-weight:700;color:var(--navy)}
.receipt .r-row dd{margin:0;text-align:right}
.receipt .r-total{display:flex;justify-content:space-between;gap:16px;padding:12px 0 2px;
  font-size:1.12rem;font-weight:800;color:var(--navy)}
.receipt .r-next{margin-top:14px;background:#fdf6e0;border:1px solid var(--gold);border-radius:9px;padding:12px 14px;font-size:.97rem}
.thanks-ocean .mail-row{margin-top:20px}
.thanks-ocean .btn.ghost{background:transparent;color:#fff;border:2px solid #ffd98a}
.thanks-ocean .fine{color:#e8f1ec;font-size:.92rem;max-width:36em;margin:14px auto 0}
.thanks-wave{position:absolute;left:0;right:0;bottom:0;height:74px;overflow:hidden;pointer-events:none}
.thanks-wave svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.thanks-wave .w1{animation:cv-wave 16s linear infinite;opacity:.5}
.thanks-wave .w2{animation:cv-wave 9s linear infinite reverse;opacity:.85}
@keyframes cv-wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .thanks-ocean .glow,.thanks-wave .w1,.thanks-wave .w2{animation:none}
  .rise{opacity:1;animation:none}
}

/* ---------- footer ---------- */
.site-foot{background:var(--deep);color:var(--cream);margin-top:40px;padding:28px 0}
.site-foot a{color:#ffd98a}
.site-foot .cols2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.site-foot .cols2{grid-template-columns:1fr 1fr}}
.small{font-size:.9rem}
section.block{padding:28px 0 4px}