/* ══════════════════════════════════════════════════════════════
   Yacht Week — Lead-gen landing pages · shared brand system
   Canonical 2026 design tokens (Anton / Antonio / Inter, navy + teal)
   Mobile-first. Square corners always.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --navy:        #122F51;
  --navy-deep:   #161A47;
  --navy-ink:    #01273C;
  --teal:        #00DCBB;
  --teal-soft:   #64D9BD;
  --teal-ink:    #00967F;
  --teal-wash:   #E0F3E9;
  --teal-mist:   #EAFCF9;
  --cream:       #FFFBEB;
  --cream-rule:  #FFFBBF;
  --highlight:   #FDF150;
  --red:         #DC474B;
  --white:       #FFFFFF;

  /* Destination accents */
  --croatia:  #4AABF7;
  --greece:   #E8A820;
  --sardinia: #F08040;

  /* Ink scale */
  --ink-700: #36507A;
  --ink-500: #697E9C;
  --ink-300: #BCC8D7;
  --ink-200: #E4E8F0;
  --ink-100: #EEF2F7;

  /* Type */
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --sub:     'Antonio', 'Arial Narrow', sans-serif;
  --body:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Spacing (8pt) */
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --maxw: 560px;            /* mobile-first single column */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-text: 0 0 18px rgba(0,0,0,0.35);
  --scrim-bottom: linear-gradient(rgba(7,41,36,0) 0%, rgba(18,47,81,0.55) 45%, rgba(1,39,60,0.92) 100%);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body); font-weight:200;
  background:var(--navy); color:var(--navy);
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ── Display type ── */
.display,h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:-0.01em; line-height:1.02; text-transform:uppercase; }
h1{ font-size:clamp(40px, 11vw, 60px); }
h2{ font-size:clamp(32px, 8.5vw, 46px); }
h3{ font-size:clamp(24px, 6vw, 32px); }
.eyebrow{
  font-family:var(--sub); font-weight:700; text-transform:uppercase;
  letter-spacing:0.16em; font-size:13px;
}
.sub{ font-family:var(--sub); font-weight:500; letter-spacing:-0.01em; }
p{ font-family:var(--body); font-weight:200; font-size:16px; }
strong{ font-weight:600; }

/* ── Layout ── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5); }
section{ position:relative; }

/* ── Topbar ── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--navy); border-bottom:2px solid var(--teal);
}
.topbar-in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px var(--s-5);
}
.topbar img{ height:20px; width:auto; }
.topbar .tb-cta{
  font-family:var(--sub); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:0.06em;
  color:var(--teal); text-decoration:none;
}

/* ── Photo hero ── */
.hero{
  position:relative; min-height:88vh; min-height:88dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--s-5) var(--s-8); overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:''; position:absolute; inset:0; background:var(--scrim-bottom); }
.hero-in{ position:relative; z-index:2; color:var(--white); }
.hero .eyebrow{ color:var(--teal); margin-bottom:var(--s-4); text-shadow:var(--shadow-text); }
.hero h1{ color:var(--white); text-shadow:var(--shadow-text); margin-bottom:var(--s-4); }
.hero h1 .t{ color:var(--teal); }
.hero-dek{
  font-family:var(--sub); font-weight:500; font-size:19px; line-height:1.35;
  color:rgba(255,255,255,0.92); max-width:30ch; text-shadow:var(--shadow-text);
  margin-bottom:var(--s-6);
}
.scrollcue{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sub); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.8);
}
.scrollcue::after{ content:'↓'; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }

/* ── Sections ── */
.band{ padding:var(--s-9) 0; }
.band-cream{ background:var(--cream); color:var(--navy); }
.band-white{ background:var(--white); color:var(--navy); }
.band-navy{ background:var(--navy); color:var(--white); }
.band .eyebrow{ color:var(--teal-ink); display:block; margin-bottom:var(--s-3); }
.band-navy .eyebrow{ color:var(--teal); }
.band h2{ margin-bottom:var(--s-5); }
.lead{ font-size:18px; line-height:1.55; color:var(--ink-700); }
.band-navy .lead{ color:rgba(255,255,255,0.82); }

/* ── Value list (what's inside) ── */
.vlist{ list-style:none; margin:var(--s-6) 0 0; }
.vlist li{
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding:var(--s-5) 0; border-top:1px solid var(--ink-200);
}
.band-navy .vlist li{ border-top-color:rgba(255,255,255,0.14); }
.vlist li:last-child{ border-bottom:1px solid var(--ink-200); }
.band-navy .vlist li:last-child{ border-bottom-color:rgba(255,255,255,0.14); }
.vlist .vi{
  flex:0 0 28px; height:28px; display:grid; place-items:center;
  background:var(--teal); color:var(--navy); font-size:15px; font-weight:700;
  font-family:var(--sub);
}
.vlist .vt{ font-family:var(--sub); font-weight:700; font-size:17px; letter-spacing:-0.01em; margin-bottom:2px; }
.vlist .vd{ font-size:15px; line-height:1.5; color:var(--ink-500); }
.band-navy .vlist .vd{ color:rgba(255,255,255,0.72); }

/* ── Cost rows (pricing page) ── */
.costs{ margin-top:var(--s-6); }
.cost-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4);
  padding:var(--s-5) 0; border-top:1px solid rgba(255,255,255,0.14);
}
.cost-row:last-child{ border-bottom:1px solid rgba(255,255,255,0.14); }
.cost-row .cl{ font-family:var(--sub); font-weight:500; font-size:17px; }
.cost-row .cl small{ display:block; font-family:var(--body); font-weight:200; font-size:13px; color:rgba(255,255,255,0.6); letter-spacing:0; text-transform:none; }
.cost-row .cv{ font-family:var(--display); font-size:22px; color:var(--teal); white-space:nowrap; }
.cost-note{ margin-top:var(--s-5); font-size:13px; color:rgba(255,255,255,0.55); }

/* ── Step cards (booking page) ── */
.steps{ margin-top:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4); }
.step{
  display:flex; gap:var(--s-5); padding:var(--s-5);
  background:var(--white); border:1px solid var(--ink-200);
}
.band-cream .step{ background:var(--white); }
.step .sn{
  flex:0 0 38px; height:38px; display:grid; place-items:center;
  background:var(--navy); color:var(--teal); font-family:var(--display); font-size:20px;
}
.step .st{ font-family:var(--sub); font-weight:700; font-size:17px; margin-bottom:3px; }
.step .sd{ font-size:14px; line-height:1.5; color:var(--ink-500); }

/* ── Photo break ── */
.photobreak{ height:46vh; min-height:300px; overflow:hidden; position:relative; }
.photobreak img{ width:100%; height:100%; object-fit:cover; }

/* ── Trust strip ── */
.trust{
  background:var(--navy-ink); color:rgba(255,255,255,0.78);
  text-align:center; padding:var(--s-5) var(--s-5);
  font-size:13px; letter-spacing:0.01em;
}
.trust b{ color:var(--white); font-weight:600; }

/* ── Email capture ── */
.capture{ background:var(--navy); color:var(--white); padding:var(--s-9) 0; }
.capture .eyebrow{ color:var(--teal); display:block; margin-bottom:var(--s-3); }
.capture h2{ margin-bottom:var(--s-4); }
.capture p.lead{ color:rgba(255,255,255,0.82); margin-bottom:var(--s-6); }
.form{ display:flex; flex-direction:column; gap:var(--s-3); }
.form .field label{
  display:block; font-family:var(--sub); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.6); margin-bottom:6px;
}
.form input{
  width:100%; font-family:var(--body); font-size:16px; font-weight:300;
  padding:15px 16px; border:2px solid rgba(255,255,255,0.18); border-radius:0;
  background:rgba(255,255,255,0.04); color:var(--white);
  transition:border-color var(--ease) .2s;
}
.form input::placeholder{ color:rgba(255,255,255,0.4); }
.form input:focus{ outline:none; border-color:var(--teal); }
.btn{
  width:100%; cursor:pointer; border-radius:0;
  font-family:var(--sub); font-weight:700; font-size:18px; letter-spacing:0.01em;
  padding:17px 24px; margin-top:var(--s-3);
  background:var(--teal); color:var(--navy); border:2px solid var(--teal);
  transition:transform var(--ease) .15s, background var(--ease) .2s;
}
.btn:hover{ background:var(--teal-soft); }
.btn:active{ transform:scale(0.99); }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }
.form-fine{ margin-top:var(--s-4); font-size:12px; color:rgba(255,255,255,0.5); text-align:center; }

/* ── Inline thank-you (guide pages) ── */
.ty{ display:none; text-align:center; }
.ty.show{ display:block; animation:fade .5s var(--ease); }
.ty .ty-boat{ font-size:54px; display:inline-block; animation:bob 2.5s ease-in-out infinite; margin-bottom:var(--s-4); }
.ty h2{ margin-bottom:var(--s-4); }
.ty h2 span{ color:var(--teal); }
.ty p{ color:rgba(255,255,255,0.82); max-width:34ch; margin:0 auto; }
.capture.done .form-shell{ display:none; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }

/* ── Footer ── */
.foot{ background:var(--navy-ink); color:rgba(255,255,255,0.55); text-align:center; padding:var(--s-8) var(--s-5) var(--s-7); }
.foot img{ height:22px; margin:0 auto var(--s-5); opacity:0.9; }
.foot .tag{ font-family:var(--sub); font-weight:500; font-size:14px; color:rgba(255,255,255,0.7); margin-bottom:var(--s-4); }
.foot small{ font-size:12px; display:block; line-height:1.7; }

/* ── Desktop: keep it centered & calm ── */
@media (min-width:680px){
  :root{ --maxw:600px; }
  .hero{ min-height:90vh; }
  .hero h1{ font-size:66px; }
}

/* ══ Reviews ══ */
.reviews{ margin-top:var(--s-6); display:flex; flex-direction:column; gap:14px; }
.review{ background:var(--white); border:1px solid var(--ink-200); border-left:3px solid var(--teal); padding:20px 22px; margin:0; }
.review p{ font-size:16px; line-height:1.55; color:var(--navy); margin-bottom:10px; font-weight:300; }
.review cite{ font-family:var(--sub); font-weight:700; font-style:normal; font-size:13px; color:var(--ink-500); letter-spacing:0.01em; }
.review cite b{ color:var(--teal-ink); }

/* ══ Video embed (16:9, swap-ready) ══ */
.video-embed{ margin-top:var(--s-6); position:relative; aspect-ratio:16/9; background:var(--navy); overflow:hidden; border:1px solid var(--ink-200); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-poster{ position:absolute; inset:0; }
.video-poster img{ width:100%; height:100%; object-fit:cover; opacity:0.78; }
.video-poster::after{ content:'▶'; position:absolute; inset:0; display:grid; place-items:center; font-size:42px; color:var(--white); text-shadow:0 2px 16px rgba(0,0,0,0.55); }
.video-poster .vlbl{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; background:linear-gradient(rgba(1,39,60,0) 0%, rgba(1,39,60,0.85) 100%); color:var(--white); font-family:var(--sub); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:0.06em; }

/* ══ Sticky CTA (mobile bottom bar) ══ */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:block; text-align:center; text-decoration:none; font-family:var(--sub); font-weight:700; font-size:17px; padding:16px 20px calc(15px + env(safe-area-inset-bottom)); background:var(--teal); color:var(--navy); border-top:2px solid var(--navy); transform:translateY(110%); transition:transform .3s var(--ease); }
.sticky-cta.show{ transform:translateY(0); }