/* =====================================================
   Cancun Fun Times — Redesign tokens & base
   Vibrant tropical luxury: ocean teal, caribbean turquoise,
   coral sun, warm cream. Instrument Serif + Inter Tight.
   ===================================================== */

:root{
  /* Palette — swappable via Tweaks. Defaults pulled from the logo:
     Cancun navy · sail bright blue · light "fun times" blue · sun yellow */
  --ink:        #0c2a6b;
  --ink-soft:   #1d3a7c;
  --sea:        #1f7bc5;   /* sail bright blue — primary brand */
  --sea-deep:   #0c2a6b;   /* navy */
  --wave:       #4ba6dd;   /* "fun times" script blue */
  --cta:        #1f7bc5;   /* primary CTA bg (sail blue) */
  --cta-deep:   #0c2a6b;   /* CTA hover (navy) */
  --sun:        #ffcc2e;   /* logo sun yellow — accent only */
  --sun-deep:   #d49a07;
  --sand:       #f7eedb;   /* warm cream bg */
  --sand-soft:  #fbf6ea;
  --shell:      #ffffff;
  --mute:       #6b7c80;
  --line:       rgba(10,42,53,.10);
  --line-strong:rgba(10,42,53,.22);

  /* Type */
  --f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --f-ui:      "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Layout */
  --container: 1240px;
  --gutter: 32px;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--f-ui);
  color: var(--ink);
  background: var(--sand);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ display:block; max-width:100%; }
button{ font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
a{ color: inherit; text-decoration: none; }

/* Type helpers */
.serif{ font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; }
.italic-alt{ font-style: italic; }
.eyebrow{
  font-family: var(--f-ui);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sea);
}
.eyebrow .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--sun); margin-right: 10px; vertical-align: middle;
  transform: translateY(-1px);
}

/* Container */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--cta);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 24px -8px rgba(31,123,197,.55);
}
.btn-primary:hover{ background: var(--cta-deep); transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover{ background: var(--ink); color: var(--sand); border-color: var(--ink); }
.btn-solid-dark{
  background: var(--ink); color: var(--sand);
}
.btn-solid-dark:hover{ background: var(--sea-deep); }
.btn-whatsapp{
  background: #25D366; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(37,211,102,.6);
}
.btn-whatsapp:hover{ background: #1FB855; transform: translateY(-1px); }

/* Pill / chip */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.chip.solid{ background: var(--sand); color: var(--ink); border-color: transparent; }
.chip.ink{ background: var(--ink); color: var(--sand); border-color: transparent; }

/* =============== Top banner =============== */
.topbanner{
  background: var(--ink);
  color: var(--sand);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.topbanner-inner{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding: 10px var(--gutter);
  text-align:center;
  white-space: nowrap;
}
.topbanner b{ color: #ffe6a1; font-weight:600; }
.topbanner .sep{ opacity:.4; }

/* =============== Header =============== */
.header{
  position: sticky; top:0; z-index: 40;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.header-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px var(--gutter);
  min-height: 92px;
}
.header.is-transparent{ background: transparent; color: #fff; }
.header.is-solid{
  background: rgba(247,238,219,.92);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.brand{ display:inline-flex; align-items:center; gap:14px; justify-self: start; width: max-content; transition: background .25s ease, padding .25s ease, box-shadow .25s ease; }
.header.is-transparent .brand{
  padding: 8px 16px 8px 14px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: 14px;
  box-shadow: 0 10px 28px -12px rgba(10,42,53,.35), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.brand-tagline{
  font-family: var(--f-ui);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .65;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
  line-height: 1.3;
  max-width: 110px;
  color: var(--ink);
}
.brand-mark{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sun);
  display:grid; place-items:center;
  font-family: var(--f-display); font-size: 19px; color: var(--ink); font-style:italic;
  box-shadow: 0 4px 14px -4px rgba(255,204,46,.55);
}
.brand-logo{
  height: 52px; width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.header.is-transparent .brand-logo{
  /* full color, sitting on a frosted plate (.brand) so all hues stay legible */
  filter: none;
}
.brand-logo-light{
  height: 64px;
  filter: brightness(0) invert(1) opacity(.92);
}
.brand-name{ line-height: 1; }
.brand-name small{ display:block; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; opacity:.65; margin-top: 4px; }

.nav{ display:flex; gap: 28px; justify-content:center; font-size: 14.5px; }
.nav a{ position: relative; padding: 4px 0; opacity: .85; transition: opacity .2s; }
.nav a:hover{ opacity: 1; }
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--sun); border-radius: 2px;
}

.header-right{ display:flex; align-items:center; gap: 14px; justify-content: flex-end; }
.phone-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  font-size: 13.5px; letter-spacing: 0.02em;
  white-space: nowrap;
}
.header.is-solid .phone-pill{ background: #fff; border-color: var(--line); }

/* =============== HERO =============== */
.hero{
  position: relative;
  margin-top: -92px;   /* tucks behind transparent header */
  padding-top: 92px;
  color: #fff;
  overflow: hidden;
  background: var(--ink);
}
.hero-media{
  position: absolute; inset: 0; z-index: 0;
}
.hero-media img{
  width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,42,53,.5) 0%, rgba(10,42,53,0) 30%, rgba(10,42,53,0) 55%, rgba(10,42,53,.78) 100%),
    linear-gradient(90deg, rgba(10,42,53,.55), rgba(10,42,53,0) 55%);
}
.hero-inner{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  padding: 120px var(--gutter) 56px;
  max-width: var(--container);
  margin: 0 auto;
  min-height: 760px;
}
.hero-copy h1{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(54px, 7.2vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 44px;
  text-wrap: balance;
}
.hero-copy h1 em{
  font-style: italic; color: var(--sun); font-family: var(--f-display);
  display: inline-block; padding-bottom: 0.12em;
}
.hero-copy p.lede{
  font-size: 17px;
  max-width: 480px;
  line-height: 1.55;
  opacity: .92;
  margin: 0 0 28px;
}
.hero-meta{
  display:flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 28px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12.5px; letter-spacing: 0.04em;
}
.hero-badge .stars{ color: #ffd14a; letter-spacing: 1px; }

/* Floating booking widget */
.bookwidget{
  background: rgba(247,238,219,.97);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.4) inset;
  backdrop-filter: blur(10px);
}
.bookwidget h3{
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 4px;
  font-weight: 400;
}
.bookwidget .sub{ font-size: 13px; color: var(--ink-soft); opacity:.75; margin-bottom: 18px; }
.bw-grid{
  display:grid; gap: 10px;
}
.bw-grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.bw-grid-2{ grid-template-columns: 1fr 1fr; }
.bw-grid .full,
.bw-grid .bw-field-wide{ grid-column: 1 / -1; }
.bw-for{
  display: inline-block;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--sea);
  margin-bottom: 6px;
}
.bw-for b{ font-weight: 700; }
.bw-field{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
  transition: border-color .2s;
}
.bw-field:hover{ border-color: var(--sea); }
.bw-field label{
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.bw-field .val{
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  background: transparent; border: 0; outline: 0; padding: 2px 0;
  width: 100%;
  font-family: inherit;
}
.bw-field select.val{ appearance: none; }
.bw-field.placeholder .val{ color: var(--mute); font-weight: 400; }
.bw-cta{
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--cta);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: background .2s, transform .15s;
}
.bw-cta:hover{ background: var(--cta-deep); transform: translateY(-1px); }
.bw-foot{
  margin-top: 14px;
  display:flex; align-items:center; justify-content: space-between;
  font-size: 11.5px; color: var(--mute);
}
.bw-foot .dot{ width:6px; height:6px; border-radius:50%; background: #25D366; display:inline-block; margin-right: 6px; vertical-align: middle; animation: pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(1.4);} }

/* =============== Trust strip =============== */
.trust{
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding: 24px var(--gutter);
}
.trust-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.trust-item{
  display:flex; gap: 14px; align-items: center;
  font-size: 13px; color: var(--ink-soft); line-height: 1.35;
}
.trust-item b{ display:block; color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.005em; }
.trust-icon{
  flex: 0 0 38px; height: 38px; border-radius: 50%;
  background: var(--shell);
  display: grid; place-items: center;
  border: 1px solid var(--line);
}

/* =============== Generic section =============== */
.section{ padding: 112px 0; }
.section-tight{ padding: 80px 0; }
.section-cream{ background: var(--sand); }
.section-shell{ background: var(--shell); }
.section-deep{ background: var(--ink); color: var(--sand); }

.section-head{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
  margin-bottom: 56px;
  align-items: end;
}
.section-head h2{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  text-wrap: balance;
}
.section-head h2 em{
  font-style: italic; color: var(--sea);
  display: inline-block; padding-bottom: 0.1em;
}
.section-deep .section-head h2 em{ color: var(--wave); }
.section-head p{
  font-size: 16px; line-height: 1.55;
  max-width: 460px; opacity: .8; margin: 0;
}

/* =============== Fleet =============== */
.fleet{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.boat-card{
  background: var(--shell);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.boat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -25px rgba(10,42,53,.25);
}
.boat-card .img{
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}
.boat-card .img img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .8s ease;
}
.boat-card:hover .img img{ transform: scale(1.04); }
.boat-card .tag{
  position: absolute; top: 16px; left: 16px;
  background: var(--sand);
  color: var(--ink);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.boat-card .body{ padding: 26px 28px 28px; }
.boat-card h3{ font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1; margin: 0 0 4px; }
.boat-card .specline{
  display:flex; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft);
}
.boat-card .specline span{ display:flex; flex-direction: column; gap: 2px; }
.boat-card .specline b{ color: var(--ink); font-size: 14px; font-weight: 600; }
.boat-card .price-row{
  display:flex; align-items:center; justify-content: space-between; margin-top: 22px;
}
.boat-card .price{ font-family: var(--f-display); font-size: 26px; }
.boat-card .price small{ font-family: var(--f-ui); font-size: 12px; color: var(--mute); margin-left: 4px; }

/* =============== Experiences =============== */
.expgrid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
}
.exp{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 420px;
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  cursor: pointer;
  isolation: isolate;
}
.exp img{
  position: absolute; inset: 0; z-index: -2;
  width:100%; height:100%; object-fit: cover;
  transition: transform .8s ease;
}
.exp::after{
  content:""; position:absolute; inset:0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,42,53,0) 35%, rgba(10,42,53,.85) 100%);
}
.exp:hover img{ transform: scale(1.05); }
.exp h3{
  font-family: var(--f-display); font-weight: 400;
  font-size: 32px; line-height: 1; margin: 0 0 8px;
}
.exp p{ font-size: 13.5px; margin: 0; opacity: .92; max-width: 320px; }
.exp .meta{ display:flex; gap: 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; opacity: .9; }

/* =============== How it works =============== */
.steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 16px;
}
.step{
  background: var(--sand-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
}
.section-deep .step{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.step .num{
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  color: var(--sea);
  font-style: italic;
  margin-bottom: 24px;
}
.section-deep .step .num{ color: var(--wave); }
.step h4{
  font-family: var(--f-display);
  font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0 0 8px;
}
.step p{ font-size: 14px; line-height: 1.55; margin: 0; opacity: .8; }
.step .tag{
  display:inline-block; margin-top: 16px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sun-deep); font-weight: 700;
}
.section-deep .step .tag{ color: var(--sun); }

/* =============== Reviews =============== */
.reviews{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review{
  background: var(--shell);
  border-radius: var(--r-lg);
  padding: 30px;
  border: 1px solid var(--line);
  display:flex; flex-direction: column; gap: 14px;
}
.review .stars{ color: #ffb01a; letter-spacing: 2px; font-size: 14px; }
.review blockquote{
  margin: 0;
  font-family: var(--f-display);
  font-size: 22px; line-height: 1.3;
  font-weight: 400; letter-spacing: -0.01em;
}
.review .who{
  display:flex; align-items:center; gap: 12px; margin-top: auto;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.review .who .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--wave); color: #fff;
  display: grid; place-items: center; font-weight: 600;
}
.review .who small{ display:block; color: var(--mute); font-size: 11.5px; }

/* =============== Gallery =============== */
.gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.gallery div{
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.gallery img{ width:100%; height:100%; object-fit: cover; transition: transform .6s ease; }
.gallery div:hover img{ transform: scale(1.06); }
.gallery .tall{ grid-row: span 2; }
.gallery .wide{ grid-column: span 2; }

/* =============== Final CTA =============== */
.finalcta{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 96px 80px;
  color: #fff;
  isolation: isolate;
}
.finalcta img{
  position: absolute; inset: 0; z-index: -2;
  width:100%; height:100%; object-fit: cover;
}
.finalcta::after{
  content:""; position:absolute; inset:0; z-index: -1;
  background: linear-gradient(120deg, rgba(31,123,197,.88), rgba(12,42,107,.7));
}
.finalcta h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.04; margin: 0 0 18px; max-width: 720px;
  letter-spacing: -0.02em;
}
.finalcta h2 em{
  font-style: italic; color: var(--sun);
  display: inline-block; padding-bottom: 0.1em;
}
.finalcta p{ font-size: 16.5px; max-width: 540px; margin: 0 0 28px; opacity: .92; }
.finalcta-row{ display:flex; gap: 12px; flex-wrap: wrap; }

/* =============== Footer =============== */
.footer{
  background: var(--ink);
  color: var(--sand);
  padding: 80px 0 32px;
}
.footer-grid{
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer h5{
  font-family: var(--f-ui); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--sun); margin: 0 0 18px;
}
.footer a{ display:block; padding: 5px 0; font-size: 14px; opacity: .82; }
.footer a:hover{ opacity: 1; color: #fff; }
.footer .copy{
  padding-top: 24px;
  display:flex; justify-content: space-between; align-items: center;
  font-size: 12px; opacity: .55;
}

/* =============== Sticky WhatsApp =============== */
.whatsapp-fab{
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.6), 0 0 0 8px rgba(37,211,102,.12);
  transition: transform .2s;
}
.whatsapp-fab:hover{ transform: scale(1.06); }
.whatsapp-fab svg{ width: 28px; height: 28px; }

/* =============== Boat detail page =============== */
.bd-hero{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 16px var(--gutter) 0;
  max-width: var(--container);
  margin: 0 auto;
  height: 580px;
}
.bd-hero > div{ border-radius: var(--r-md); overflow: hidden; position: relative; }
.bd-hero > div:first-child{ grid-row: span 2; }
.bd-hero img{ width:100%; height:100%; object-fit: cover; }
.bd-hero .photoshow{
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(255,255,255,.92);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
}

.bd-body{
  display: grid; grid-template-columns: 1fr 380px;
  gap: 64px;
  padding: 48px var(--gutter) 96px;
  max-width: var(--container);
  margin: 0 auto;
}
.bd-title h1{
  font-family: var(--f-display); font-weight: 400;
  font-size: 56px; line-height: 1.06; margin: 0 0 8px; letter-spacing: -0.02em;
}
.bd-title h1 em{
  font-style: italic; color: var(--sea);
  display: inline-block; padding-bottom: 0.1em;
}
.bd-title .meta{ display:flex; gap: 14px; color: var(--ink-soft); font-size: 14px; align-items: center; }
.bd-title .meta .sep{ opacity: .4; }
.bd-title .stars{ color: #ffb01a; letter-spacing: 1.5px; margin-right: 4px; }

.bd-specs{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 28px 0;
  margin: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bd-spec{
  display:flex; align-items:flex-start; gap: 12px;
}
.bd-spec .icon{
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  background: var(--sand); display: grid; place-items: center;
}
.bd-spec b{ display:block; font-size: 15px; font-weight: 600; }
.bd-spec small{ color: var(--mute); font-size: 12.5px; }

.bd-section{ margin-top: 40px; }
.bd-section h3{
  font-family: var(--f-display); font-weight: 400; font-size: 30px;
  margin: 0 0 14px;
}
.bd-section p{ font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 680px; margin: 0; }

.bd-includes{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 18px; }
.bd-includes li{
  list-style: none; display:flex; align-items: center; gap: 12px;
  padding: 10px 0; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line);
}
.bd-includes svg{ flex: 0 0 18px; color: var(--sea); }

.bd-aside{
  position: sticky; top: 100px; align-self: start;
}
.bd-quote{
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: 0 30px 60px -30px rgba(10,42,53,.18);
}
.bd-quote .price{
  font-family: var(--f-display); font-size: 40px; line-height: 1;
}
.bd-quote .price small{ font-family: var(--f-ui); font-size: 13px; color: var(--mute); margin-left: 4px; }
.bd-quote .stars-row{ display:flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }

.bd-quote .bw-grid{ margin-top: 18px; }
.bd-quote .bw-field{ background: var(--sand-soft); border-color: transparent; }
.bd-quote .bw-cta{ margin-top: 16px; }
.bd-quote .note{
  margin-top: 14px; font-size: 12.5px; color: var(--mute); text-align: center;
}

/* ─── Booking flow: optional boat preference (step 0) ─── */
.boat-note{
  font-size: 13px; line-height: 1.55; color: var(--ink-soft);
  background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px;
}
.boat-note b{ color: var(--ink); }
.boat-pref{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 720px){ .boat-pref{ grid-template-columns: 1fr; } }
.boat-pref-card{
  position: relative;
  border: 1px solid var(--line); background: var(--shell);
  border-radius: var(--r-md); padding: 13px 14px 12px;
  text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.boat-pref-card:hover{ border-color: var(--sea); }
.boat-pref-card.selected{
  border-color: var(--sea); background: rgba(0,107,122,.05);
  box-shadow: 0 0 0 1px var(--sea);
}
.boat-pref-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.boat-pref-card b{ font-size: 14.5px; font-weight: 600; }
.boat-pref-card small{ font-size: 12px; color: var(--mute); line-height: 1.45; }
.boat-pref-price{
  font-family: var(--f-display); font-size: 18px; line-height: 1; white-space: nowrap;
}
.boat-pref-price small{
  font-family: var(--f-ui); font-size: 10.5px; color: var(--mute); margin-left: 2px;
}
.boat-pref-tag{
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sea); font-weight: 600;
  background: rgba(0,107,122,.1); padding: 3px 7px; border-radius: 999px;
}
.boat-pref-tick{
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sea); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;
}
.boat-pref-tick svg{ width: 12px; height: 12px; }
.boat-pref-card.selected .boat-pref-tick{ opacity: 1; transform: scale(1); }
.boat-hint{
  margin-top: 10px; padding: 10px 14px;
  background: rgba(255,204,46,.12); border: 1px solid rgba(212,154,7,.25);
  border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.boat-hint svg{ color: var(--sun-deep); }
.sum-boat-tag{
  font-family: var(--f-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); margin-left: 8px;
  background: rgba(0,0,0,.04); padding: 3px 7px; border-radius: 999px;
  vertical-align: 3px;
}

/* ─────────────────────────────────────────────────────────────────
   CUSTOMER CONFIRMATION PAGE
   What a customer sees when they tap the link from a partner-issued
   confirmation text. Mobile-first — most arrivals are from WhatsApp /
   SMS on a phone. Uses the customer-site visual language (serif h1,
   sea-deep CTA) so it feels like Cancun Fun Times, not a back-office.
   ───────────────────────────────────────────────────────────────── */
.cc-page{
  min-height: 100vh;
  background: var(--sand);
  padding: 24px 18px 60px;
  display: flex; align-items: flex-start; justify-content: center;
}
.cc-shell{
  width: 100%; max-width: 580px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 32px 24px;
  box-shadow: 0 20px 40px -20px rgba(10,42,53,.12);
}
.cc-shell-done{ text-align: center; }

.cc-brand{
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.cc-brand img{ height: 32px; width: auto; }
.cc-brand span{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); font-weight: 600;
}

.cc-shell h1{
  font-family: var(--f-display); font-weight: 400;
  font-size: 38px; line-height: 1.08; margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.cc-shell h1 em{
  font-style: italic; color: var(--sea);
  display: inline-block; padding-bottom: 0.04em;
}
.cc-shell p{
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 22px;
}

/* Booking detail card */
.cc-card{
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--shell);
}
.cc-card-img-wrap{
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--ink);
}
.cc-card-img-wrap img{ width: 100%; height: 100%; object-fit: cover; }
.cc-card-img-tag{
  position: absolute; left: 14px; bottom: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cc-card-body{
  margin: 0; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.cc-card-body > div{
  display: flex; gap: 14px; font-size: 14px;
}
.cc-card-body dt{
  color: var(--mute); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  width: 96px; flex-shrink: 0; padding-top: 3px;
}
.cc-card-body dd{ margin: 0; color: var(--ink); font-weight: 500; flex: 1; }
.cc-card-total{
  padding: 16px 20px; border-top: 1px solid var(--line);
  background: #fff;
}
.cc-card-total > div{ display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.cc-card-total span{ font-size: 13px; color: var(--mute); }
.cc-card-total > div:first-child b{
  font-family: var(--f-display); font-weight: 400; font-size: 28px;
  color: var(--ink);
}
.cc-card-deposit b{ font-size: 14px; font-weight: 600; }
.cc-card-deposit-note{
  display: block; font-size: 12px; color: var(--mute);
  margin-top: 6px; line-height: 1.55;
}

/* Consent checkbox */
.cc-consent{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--shell);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: border-color .15s;
}
.cc-consent:hover{ border-color: var(--sea); }
.cc-consent input[type="checkbox"]{
  width: 20px; height: 20px;
  margin: 1px 0 0 0;
  accent-color: var(--sea);
  cursor: pointer;
  flex: 0 0 20px;
}
.cc-consent b{ font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.cc-consent small{ font-size: 12.5px; color: var(--mute); display: block; margin-top: 4px; line-height: 1.55; }
.cc-consent a{ color: var(--sea); text-decoration: underline; }

/* Actions */
.cc-actions{ display: flex; flex-direction: column; gap: 8px; }
.cc-confirm{
  padding: 16px 22px !important;
  font-size: 16px !important;
  justify-content: center;
  width: 100%;
}
.cc-dispute{
  font-size: 13px;
  background: transparent !important;
  border: 0 !important;
  color: var(--mute) !important;
  padding: 10px 12px !important;
}
.cc-dispute:hover{ color: var(--ink) !important; text-decoration: underline; }

/* Loading spinner inside the confirm button */
.cc-loading{ display: inline-flex; align-items: center; gap: 10px; }
.cc-spinner{
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: pv-spin 0.7s linear infinite;
}

/* Footer */
.cc-foot{
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--mute);
  line-height: 1.55;
  text-align: center;
}
.cc-foot a{ color: var(--sea); text-decoration: underline; }

/* Dispute textarea */
.cc-textarea{
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--shell); color: var(--ink);
  margin-bottom: 20px;
  resize: vertical; min-height: 110px;
}
.cc-textarea:focus{ outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(0,107,122,.12); }

/* Done state */
.cc-mark{
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--sea); color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.cc-receipt{
  background: var(--shell); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 22px; text-align: left;
  margin: 22px auto 26px; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-receipt > div{ display: flex; gap: 14px; font-size: 14px; }
.cc-receipt dt{ color: var(--mute); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; width: 120px; padding-top: 3px; }
.cc-receipt dd{ margin: 0; font-weight: 500; flex: 1; }

.cc-after{
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px;
}
.cc-after .btn{ padding: 12px 18px; font-size: 14px; }

@media (max-width: 640px){
  .cc-shell{ padding: 22px 20px 18px; border-radius: 16px; }
  .cc-shell h1{ font-size: 30px; }
  .cc-shell p{ font-size: 14px; }
  .cc-card-body > div{ flex-direction: column; gap: 2px; }
  .cc-card-body dt{ width: auto; }
  .cc-card-total > div:first-child b{ font-size: 24px; }
  .cc-after{ flex-direction: column; }
  .cc-after .btn{ width: 100%; justify-content: center; }
  .cc-receipt > div{ flex-direction: column; gap: 2px; }
  .cc-receipt dt{ width: auto; }
}
.pv-row{
  display: flex; gap: 8px; align-items: stretch;
  position: relative;
}
.pv-row input{
  flex: 1; font: inherit; font-size: 15px; padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pv-row input:focus{ border-color: var(--sea); box-shadow: 0 0 0 3px rgba(0,107,122,.12); outline: none; }
.pv-row input:disabled{
  background: var(--shell); color: var(--ink-soft);
  cursor: default;
}
.pv-edit{
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--sea); background: transparent; border: 0;
  padding: 0 6px; cursor: pointer;
}
.pv-edit:hover{ text-decoration: underline; }
.pv-tick{
  position: absolute; right: 50px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #10b981; color: #fff;
  display: grid; place-items: center;
}
.pv-tick svg{ width: 13px; height: 13px; }

.pv-card{
  margin-top: 10px; padding: 14px 16px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 12px;
}
.pv-card-head{
  display: flex; gap: 12px; align-items: flex-start;
}
.pv-card-head svg{ color: var(--sea); flex: 0 0 18px; margin-top: 2px; }
.pv-card-head b{ font-size: 13.5px; font-weight: 600; display: block; color: var(--ink); }
.pv-card-head small{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; display: block; margin-top: 3px; }

.pv-btn-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pv-btn{
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  transition: opacity .15s, background .15s;
}
.pv-btn:disabled{ opacity: .4; cursor: not-allowed; }
.pv-btn-primary{
  background: #25d366; /* WhatsApp green */
  color: #fff; border-color: #25d366;
}
.pv-btn-primary:hover:not(:disabled){ background: #1ebe5b; }
.pv-btn-primary svg{ width: 16px; height: 16px; }
.pv-btn-ghost{
  background: #fff; color: var(--ink); border-color: var(--line);
}
.pv-btn-ghost:hover:not(:disabled){ border-color: var(--sea); color: var(--sea); }

.pv-link{
  font: inherit; font-size: 13px; color: var(--sea);
  background: transparent; border: 0; cursor: pointer;
  text-align: left; padding: 0;
  align-self: flex-start;
}
.pv-link:hover{ text-decoration: underline; }
.pv-link-inline{ font-size: 12.5px; }

.pv-hint{ font-size: 12.5px; color: var(--mute); }
.pv-hint-warn{ color: #b45309; }

.pv-foot-row{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px;
}

/* Sending state — spinner + message */
.pv-sending{
  flex-direction: row; align-items: center; gap: 14px;
}
.pv-sending b{ font-size: 14px; color: var(--ink); display: block; }
.pv-sending small{ font-size: 12.5px; color: var(--mute); display: block; margin-top: 2px; }
.pv-spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(0,107,122,.2);
  border-top-color: var(--sea);
  animation: pv-spin 0.7s linear infinite;
}
@keyframes pv-spin{ to { transform: rotate(360deg); } }

/* Awaiting code */
.pv-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--sea);
  flex: 0 0 8px; margin-top: 6px;
}
.pv-dot-live{
  background: var(--sun);
  box-shadow: 0 0 0 0 rgba(255,204,46,.7);
  animation: pv-pulse 1.4s infinite;
}
@keyframes pv-pulse{
  70%  { box-shadow: 0 0 0 8px rgba(255,204,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,204,46,0); }
}
.pv-code{
  font: inherit;
  font-family: 'SF Mono', Menlo, ui-monospace, monospace;
  font-size: 24px; font-weight: 500;
  letter-spacing: 0.5em;
  text-align: center; text-indent: 0.5em; /* center the letter-spaced text */
  padding: 14px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: #fff;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.pv-code:focus{ border-color: var(--sea); box-shadow: 0 0 0 3px rgba(0,107,122,.12); }
.pv-code::placeholder{ color: #cbd5e1; letter-spacing: 0.3em; }

/* Verified + skipped banners */
.pv-banner{
  margin-top: 10px; padding: 12px 14px;
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 12px;
}
.pv-banner b{ font-size: 13.5px; font-weight: 600; display: block; }
.pv-banner small{ font-size: 12.5px; color: inherit; opacity: .85; display: block; margin-top: 2px; line-height: 1.5; }
.pv-verified{
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
}
.pv-tick-lg{
  width: 30px; height: 30px; border-radius: 50%;
  background: #10b981; color: #fff;
  display: grid; place-items: center; flex: 0 0 30px;
}
.pv-tick-lg svg{ width: 16px; height: 16px; }
.pv-skipped{
  background: var(--shell); border: 1px solid var(--line); color: var(--ink-soft);
}
.pv-skipped > svg{ color: var(--sea); flex: 0 0 18px; }
.pv-skipped .pv-link-inline{ color: var(--sea); }

@container flow (max-width: 640px) {
  .pv-btn-row { grid-template-columns: 1fr; }
  .pv-foot-row { flex-direction: column; gap: 4px; }
  .pv-code { font-size: 22px; letter-spacing: 0.4em; }
  .bf-optin { padding: 14px; }
}

/* ─── Consent disclosures (OTP send, final review) ───
   Small grey legal copy. Not loud, not hidden — readable, intentional. */
.pv-consent{
  font-size: 11.5px; line-height: 1.55;
  color: var(--mute);
  padding-top: 2px;
}
.pv-consent b{ color: var(--ink-soft); font-weight: 600; }
.pv-consent a{ color: var(--sea); text-decoration: underline; }
.pv-consent a:hover{ color: var(--sea-deep); }

/* Final consent paragraph at the bottom of step 3 Review */
.bf-consent{
  margin-top: 16px; padding: 0 4px;
  font-size: 11.5px; line-height: 1.6;
  color: var(--mute);
}
.bf-consent a{ color: var(--sea); text-decoration: underline; }
.bf-consent a:hover{ color: var(--sea-deep); }

/* Marketing opt-in checkbox (step 3). Default unchecked.
   Visually subdued — it's an optional add, not the path of least resistance. */
.bf-optin{
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--shell);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.bf-optin:hover{ border-color: var(--sea); background: rgba(0,107,122,.03); }
.bf-optin input[type="checkbox"]{
  width: 18px; height: 18px;
  margin: 2px 0 0 0;
  accent-color: var(--sea);
  cursor: pointer;
  flex: 0 0 18px;
}
.bf-optin b{ font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.bf-optin small{ font-size: 12.5px; color: var(--mute); display: block; margin-top: 3px; line-height: 1.5; }

/* ─── Booking flow boat picker (rich cards) — legacy, kept for back-compat ─── */
.bf-boats{
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.bf-boat{
  display: grid; grid-template-columns: 96px 1fr 22px;
  gap: 14px; align-items: center;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 16px 10px 10px;
  text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.bf-boat:hover{ border-color: var(--sea); }
.bf-boat.selected{
  border-color: var(--sea); background: rgba(31,123,197,.05);
  box-shadow: 0 0 0 1px var(--sea);
}
.bf-boat img{
  width: 96px; height: 72px; border-radius: 6px;
  object-fit: cover;
}
.bf-boat-body{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-boat-row{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bf-boat b{ font-size: 14.5px; font-weight: 600; display: block; }
.bf-boat small{ font-size: 12px; color: var(--mute); }
.bf-boat-price{
  font-family: var(--f-display); font-size: 22px; line-height: 1; white-space: nowrap;
}
.bf-boat-price small{
  font-family: var(--f-ui); font-size: 11px; color: var(--mute);
  margin-left: 3px;
}
.bf-boat-note{ font-size: 12.5px; color: var(--ink-soft); }
.bf-boat-tick{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sea); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;
}
.bf-boat-tick svg{ width: 14px; height: 14px; }
.bf-boat.selected .bf-boat-tick{ opacity: 1; transform: scale(1); }

/* Disabled button state */
.flow-foot .btn-primary[disabled]{ pointer-events: none; }
.flow-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,42,53,.55);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 32px;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes slideUp{ from{ opacity: 0; transform: translateY(20px); } to{ opacity: 1; transform: none; } }
.flow{
  background: var(--sand);
  border-radius: var(--r-lg);
  width: min(960px, 100%);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
  animation: slideUp .3s ease;
  container-type: inline-size;
  container-name: flow;
}
.flow-head{
  padding: 18px 26px;
  display:flex; align-items:center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--shell);
}
.flow-head .progress{
  display:flex; gap: 6px; align-items: center;
}
.flow-head .progress span{
  width: 28px; height: 4px; border-radius: 2px; background: var(--line);
  transition: background .25s;
}
.flow-head .progress span.done{ background: var(--sea); }
.flow-head .progress span.active{ background: var(--sun); }
.flow-head .step-label{ font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.flow-close{
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  transition: background .2s;
}
.flow-close:hover{ background: var(--line); }

.flow-body{
  flex: 1; min-height: 0; overflow: auto;
  padding: 40px 60px;
  display: grid; grid-template-columns: 1fr 320px; gap: 48px;
}
.flow-body.single{ grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.flow-body h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: 40px; line-height: 1.08; margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.flow-body h2 em{
  font-style: italic; color: var(--sea);
  display: inline-block; padding-bottom: 0.08em;
}
.flow-body .sub{ color: var(--ink-soft); font-size: 14.5px; margin: 0 0 26px; }

.fld{
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.fld label{
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--mute);
}
.fld input, .fld select, .fld textarea{
  font: inherit; font-size: 15px; padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--ink);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  border-color: var(--sea); box-shadow: 0 0 0 3px rgba(0,107,122,.12);
}
.fld textarea{ min-height: 96px; resize: vertical; }
.fld-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.opt-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; }
.opt{
  border: 1px solid var(--line);
  background: var(--shell);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
}
.opt:hover{ border-color: var(--sea); }
.opt.selected{
  border-color: var(--sea); background: rgba(0,107,122,.05);
  box-shadow: 0 0 0 1px var(--sea);
}
.opt b{ font-size: 14.5px; font-weight: 600; }
.opt small{ font-size: 12px; color: var(--mute); }

.flow-summary{
  background: var(--shell);
  border-radius: var(--r-lg);
  padding: 24px;
  position: sticky; top: 0; align-self: start;
  border: 1px solid var(--line);
}
.flow-summary .sum-img{
  width: 100%; aspect-ratio: 4/3; border-radius: var(--r-md);
  object-fit: cover; margin-bottom: 16px;
}
.flow-summary h4{ font-family: var(--f-display); font-weight: 400; font-size: 22px; margin: 0 0 4px; }
.flow-summary .sum-meta{ font-size: 12.5px; color: var(--mute); margin-bottom: 16px; }
.flow-summary dl{ margin: 0; display: flex; flex-direction: column; gap: 10px; }
.flow-summary dl > div{ display: flex; justify-content: space-between; font-size: 13.5px; }
.flow-summary dt{ color: var(--mute); }
.flow-summary dd{ margin: 0; color: var(--ink); font-weight: 500; }
.flow-summary .total{
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.flow-summary .total b{ font-family: var(--f-display); font-size: 28px; font-weight: 400; }

.flow-foot{
  padding: 18px 26px; border-top: 1px solid var(--line); background: var(--shell);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.flow-back{ color: var(--mute); font-size: 14px; padding: 8px 4px; }
.flow-back:hover{ color: var(--ink); }

/* Confirmation screens */
.confirm-screen{
  text-align: center; padding: 60px 40px;
}
.confirm-screen .mark{
  width: 80px; height: 80px; border-radius: 50%;
  margin: 0 auto 24px;
  background: var(--sea); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 12px rgba(0,107,122,.12);
}
.confirm-screen .mark.pending{
  background: var(--sun); color: var(--ink);
  box-shadow: 0 0 0 12px rgba(255,204,46,.18);
}
.confirm-screen h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: 44px; line-height: 1.08; margin: 0 0 12px; letter-spacing: -0.015em;
}
.confirm-screen h2 em{
  font-style: italic; color: var(--sea);
  display: inline-block; padding-bottom: 0.08em;
}
.confirm-screen p{ font-size: 16px; color: var(--ink-soft); max-width: 440px; margin: 0 auto 22px; line-height: 1.55; }
.confirm-detail{
  background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px;
  max-width: 380px; margin: 24px auto 0;
  text-align: left;
}
.confirm-detail dl{ margin: 0; display:flex; flex-direction: column; gap: 10px; }
.confirm-detail dl > div{ display:flex; justify-content: space-between; font-size: 13.5px; }
.confirm-detail dt{ color: var(--mute); }
.confirm-detail dd{ margin: 0; font-weight: 500; }
.timer-pill{
  display:inline-flex; align-items: center; gap: 8px;
  background: rgba(255,204,46,.22);
  color: var(--ink);
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; margin-top: 14px;
}
.timer-pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--sun-deep); animation: pulse 1.4s infinite; }

/* =============== Private Charter page =============== */
.pc-hero{
  position: relative;
  margin-top: -92px;
  padding-top: 92px;
  min-height: 92vh;
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--ink);
}
.pc-hero-media{ position: absolute; inset: 0; z-index: 0; }
.pc-hero-media img{ width:100%; height:100%; object-fit: cover; }
.pc-hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(110deg, rgba(12,42,107,.78) 0%, rgba(12,42,107,.35) 45%, rgba(12,42,107,0) 70%),
    linear-gradient(0deg, rgba(12,42,107,.55) 0%, rgba(12,42,107,0) 50%);
}
.pc-hero-inner{
  position: relative; z-index: 1;
  max-width: var(--container);
  width: 100%;
  padding: 60px var(--gutter) 60px;
  margin: 0 auto;
}
.pc-h1{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(60px, 8.5vw, 132px);
  line-height: 0.96; letter-spacing: -0.025em;
  margin: 0 0 56px; max-width: 12ch;
  padding-bottom: 0.15em;
}
.pc-h1 em{
  font-style: italic; color: var(--sun);
  display: inline-block; padding-bottom: 0.12em;
}
.pc-lede{
  font-size: 18px; line-height: 1.55; max-width: 480px; opacity: .92;
  margin: 0 0 36px;
}
.pc-anchor a{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-radius: var(--r-pill);
  background: var(--sun); color: var(--ink);
  font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: transform .15s, background .2s;
  box-shadow: 0 10px 28px -8px rgba(255,204,46,.55);
}
.pc-anchor a:hover{ background: #fff; transform: translateY(-1px); }

/* vs Joint comparison */
.pc-vs-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: stretch;
}
.pc-vs-col{
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
}
.pc-vs-col.is-featured{
  background: var(--ink); color: var(--sand);
  border-color: transparent;
  box-shadow: 0 30px 60px -20px rgba(12,42,107,.4);
  transform: translateY(-8px);
}
.pc-vs-tag{
  display: inline-block; align-self: flex-start;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--sand);
  margin-bottom: 24px;
}
.pc-vs-tag.is-featured{ background: var(--sun); color: var(--ink); }
.pc-vs-col h4{
  font-family: var(--f-display); font-weight: 400;
  font-size: 34px; line-height: 1.05; margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.pc-vs-col.is-featured h4 em{ font-style: italic; color: var(--sun); }
.pc-vs-col ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 15px; line-height: 1.4;
}
.pc-vs-col li{
  display: flex; gap: 12px; align-items: flex-start;
}
.pc-vs-col li > span:first-child,
.pc-vs-col li > svg{
  flex: 0 0 18px; margin-top: 2px;
}
.pc-vs-col li > span:last-child{ flex: 1; }
.pc-vs-col:not(.is-featured) li > span{ color: var(--mute); font-weight: 600; }
.pc-vs-col.is-featured li > svg{ color: var(--sun); }
.pc-vs-foot{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  margin-top: 40px;
  padding: 28px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pc-stat{ display:flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--mute); }
.pc-stat b{ color: var(--ink); font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }

/* Builder */
.pc-build-grid{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  align-items: start;
}
.pc-builder{
  background: var(--sand-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 32px;
}
.pc-field-block{ display: flex; flex-direction: column; gap: 12px; }
.pc-field-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.pc-field-val{
  font-family: var(--f-display); font-size: 22px;
  color: var(--sea-deep);
}
.pc-boats{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pc-boat{
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.pc-boat img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.pc-boat-body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.pc-boat-head{ display:flex; align-items:center; justify-content: space-between; gap: 8px; }
.pc-boat h5{ font-family: var(--f-display); font-weight: 400; font-size: 22px; margin: 0; }
.pc-boat small{ font-size: 12px; color: var(--mute); }
.pc-boat-price{ font-family: var(--f-display); font-size: 20px; margin-top: 6px; }
.pc-boat-price small{ font-family: var(--f-ui); font-size: 11.5px; color: var(--mute); margin-left: 4px; }
.pc-boat.selected{ border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); }
.pc-tick{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sea); color: #fff;
  display: grid; place-items: center;
}
.pc-tick svg{ width: 14px; height: 14px; }

.pc-range{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sea) 0%, var(--wave) 100%);
  outline: none;
}
.pc-range::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--shell); border: 2px solid var(--sea);
  box-shadow: 0 4px 10px -4px rgba(12,42,107,.4);
  cursor: pointer;
}
.pc-range::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--shell); border: 2px solid var(--sea);
  cursor: pointer;
}
.pc-ticks{
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--mute); padding: 0 4px;
}
.pc-pills{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pc-pill{
  background: #fff;
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.pc-pill small{ font-size: 11px; color: var(--mute); }
.pc-pill:hover{ border-color: var(--sea); }
.pc-pill.selected{
  background: var(--sea); color: #fff; border-color: var(--sea);
}
.pc-pill.selected small{ color: rgba(255,255,255,.7); }
.pc-pill-extra.selected{ background: var(--ink); border-color: var(--ink); }

/* Price card */
.pc-price{
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: sticky; top: 110px;
  box-shadow: 0 30px 60px -30px rgba(12,42,107,.2);
}
.pc-price-head{
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.pc-price-head img{
  width: 60px; height: 60px; border-radius: var(--r-md); object-fit: cover;
}
.pc-price-head small{
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute); font-weight: 500;
}
.pc-price-head h4{
  font-family: var(--f-display); font-weight: 400;
  font-size: 20px; margin: 2px 0 0;
}
.pc-price-lines{
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px;
}
.pc-price-lines > div{
  display: flex; justify-content: space-between; font-size: 13.5px;
  align-items: baseline;
}
.pc-price-lines dt{ color: var(--mute); }
.pc-price-lines dd{ margin: 0; color: var(--ink); font-weight: 500; }
.pc-price-total{
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.pc-price-total small{
  display: block;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute); font-weight: 500;
  margin-bottom: 4px;
}
.pc-price-total b{
  font-family: var(--f-display); font-size: 36px; font-weight: 400;
  line-height: 1; letter-spacing: -0.015em;
}
.pc-price-perguest{ text-align: right; }
.pc-price-perguest b{ font-size: 24px; color: var(--sea); }
.pc-price-trust{
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink-soft);
}

/* Editorial itinerary */
.pc-itin-list{
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.pc-itin-row{
  display: grid; grid-template-columns: 140px 1fr 380px;
  gap: 32px; align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.pc-itin-time{
  font-family: var(--f-display); font-style: italic;
  font-size: 56px; line-height: 1; color: var(--sea);
  letter-spacing: -0.02em;
}
.pc-itin-body h3{
  font-family: var(--f-display); font-weight: 400;
  font-size: 32px; line-height: 1.05; margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pc-itin-body p{
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0; max-width: 540px;
}
.pc-itin-tag{
  display: inline-block; margin-top: 12px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--sun-deep);
  padding: 5px 10px; background: rgba(255,204,46,.18);
  border-radius: var(--r-pill);
}
.pc-itin-photo{
  border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 4/3;
}
.pc-itin-photo img{ width: 100%; height: 100%; object-fit: cover; }

/* "What it includes" — three-column inclusions grid */
.pc-incl-grid{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
.pc-incl-col{
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.pc-incl-col h4{
  font-family: var(--f-display); font-weight: 400;
  font-size: 26px; line-height: 1.05; margin: 0;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
}
.pc-incl-col ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pc-incl-col li{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.4;
  color: var(--ink-soft);
}
.pc-incl-col li svg{ flex: 0 0 18px; color: var(--sea); margin-top: 2px; }
.pc-incl-foot{
  margin-top: 24px;
  padding: 18px 24px;
  background: rgba(255,204,46,.18);
  border-radius: var(--r-md);
  font-size: 13.5px; color: var(--ink);
  text-align: center;
}
.pc-incl-foot b{ font-weight: 700; }

@media (max-width: 1100px){
  .pc-incl-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 1100px){
  .hero-inner{ grid-template-columns: 1fr; min-height: auto; padding-top: 140px; padding-bottom: 80px; }
  .fleet, .expgrid, .steps, .reviews, .footer-grid, .trust-inner{ grid-template-columns: 1fr 1fr !important; }
  .bd-body, .flow-body{ grid-template-columns: 1fr !important; }
  .section-head{ grid-template-columns: 1fr; gap: 16px; }
}

/* ─────────────────────────────────────────────────────────────────
   PHONE — under 640px.
   Below this width the customer-facing site collapses to one column,
   typography shrinks, decorative bits drop, and grids stack.
   Touch targets stay ≥44px; inputs use 16px font to avoid iOS zoom.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --gutter: 18px; }

  /* ─── Header ─── */
  .header-inner { padding: 12px 18px; grid-template-columns: auto auto !important; gap: 12px; }
  .nav, .phone-pill, .brand-tagline, .brand-name small { display: none !important; }
  .brand-logo { height: 36px !important; }
  .header-right { gap: 8px; }
  .header-right .btn-primary { padding: 9px 14px !important; font-size: 13px !important; }
  .urgency-bar { font-size: 11px; padding: 6px 14px; }
  .urgency-bar > * + * { display: none; } /* keep first item only on mobile */

  /* ─── Hero ─── */
  .hero-inner { padding: 110px 18px 60px; gap: 36px; }
  .hero-copy h1 { font-size: 54px; line-height: 1; }
  .hero-copy p.lede { font-size: 15.5px; line-height: 1.5; }
  .hero-meta { flex-wrap: wrap; gap: 8px 12px; font-size: 12.5px; }
  .hero-meta > span:not(.hero-badge) { display: none; } /* drop separator dots */
  .chip { font-size: 11px; padding: 5px 12px; }

  /* ─── Booking widget (hero + boat detail) ─── */
  .bookwidget { padding: 22px 20px; border-radius: 18px; }
  .bookwidget h3 { font-size: 22px; }
  .bookwidget .sub { font-size: 13px; }
  .bw-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .bw-field-wide, .bw-grid > label[style*="grid-column"] { grid-column: 1 / -1 !important; }
  .bw-field .val { font-size: 16px; padding: 10px 12px; }
  .bw-cta { padding: 14px 18px; font-size: 14px; }

  /* ─── Trust strip ─── */
  .trust { padding: 28px 0; }
  .trust-inner { grid-template-columns: 1fr 1fr !important; gap: 18px 12px; padding: 0 18px; }
  .trust-item { font-size: 12.5px; }
  .trust-item b { font-size: 13px; }
  .trust-item span { font-size: 11px; }
  .trust-icon { width: 36px; height: 36px; }

  /* ─── Section heads & containers ─── */
  .section { padding: 60px 0; }
  .section-tight { padding: 50px 0; }
  .container { padding: 0 18px; }
  .section-head { padding-bottom: 28px; gap: 14px; }
  .section-head h2 { font-size: 36px; line-height: 1.05; }
  .section-head p { font-size: 14.5px; }
  .eyebrow { font-size: 10px; }

  /* ─── Editorial intro / Fleet / Experiences / Reviews ─── */
  .fleet, .expgrid, .reviews { grid-template-columns: 1fr !important; gap: 20px; }
  .boat-card .body { padding: 20px; }
  .boat-card h3 { font-size: 28px; }
  .specline { gap: 14px; font-size: 12.5px; flex-wrap: wrap; }
  .specline b { font-size: 18px; }
  .price-row { flex-wrap: wrap; gap: 10px; }
  .price { font-size: 26px; }
  .exp h3 { font-size: 24px; }
  .exp p { font-size: 14px; }
  .review blockquote { font-size: 15.5px; line-height: 1.55; }

  /* ─── How booking works ─── */
  .steps { grid-template-columns: 1fr !important; gap: 24px; }
  .step h4 { font-size: 19px; }
  .step p { font-size: 14px; }
  .step .num { font-size: 38px; }

  /* ─── Gallery ─── */
  .gallery { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .gallery .tall, .gallery .wide { grid-column: span 2 !important; }
  .gallery .tall { aspect-ratio: 16/10; }

  /* ─── Final CTA ─── */
  .finalcta { padding: 40px 24px; border-radius: 18px; }
  .finalcta h2 { font-size: 38px; }
  .finalcta p { font-size: 15px; }
  .finalcta-row { flex-direction: column; gap: 10px; }
  .finalcta-row .btn { width: 100%; justify-content: center; }

  /* ─── Footer ─── */
  .footer { padding: 56px 0 24px; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .footer h5 { font-size: 13px; }

  /* ─── Boat detail ─── */
  .bd-hero {
    grid-template-columns: 1fr; grid-template-rows: auto;
    height: auto; min-height: 0;
    gap: 4px; padding-top: 80px;
  }
  .bd-hero > div { aspect-ratio: 4/3; }
  /* On phone, show only the lead photo; the rest become an in-page swipe gallery further down. */
  .bd-hero > div:not(:first-child) { display: none; }
  .bd-hero .photoshow {
    position: absolute; right: 18px; bottom: 18px; left: auto;
    font-size: 12px; padding: 9px 14px;
  }
  .bd-body { grid-template-columns: 1fr !important; gap: 36px; padding: 32px 18px 60px; }
  .bd-title h1 { font-size: 44px; line-height: 1; }
  .bd-title .meta { font-size: 12.5px; flex-wrap: wrap; gap: 6px 10px; }
  .bd-title .meta .sep { display: none; }
  .bd-specs { grid-template-columns: 1fr 1fr !important; gap: 12px; padding: 14px; }
  .bd-spec { padding: 12px; }
  .bd-spec .icon { width: 34px; height: 34px; }
  .bd-spec b { font-size: 13.5px; }
  .bd-spec small { font-size: 11.5px; }
  .bd-section h3 { font-size: 26px; }
  .bd-section p { font-size: 15px; line-height: 1.6; }
  .bd-includes { grid-template-columns: 1fr !important; gap: 10px 0; font-size: 14px; }
  /* The aside (price + booking widget) goes inline below the body, no sticky */
  .bd-aside { position: static !important; }
  .bd-quote { padding: 22px 20px; border-radius: 18px; }
  .bd-quote .price { font-size: 34px; }
  /* Open bar / Onboard meals — two columns side-by-side is too narrow */
  .bd-section [style*="grid-template-columns:\"1fr 1fr\""],
  .bd-section [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important; gap: 24px !important;
  }

  /* ─── Booking flow remaining bits (the @container rules cover most;
        these handle the few page-level pieces that aren't gated). ─── */
  /* WhatsApp FAB stays visible but smaller on phone */
  .whatsapp-fab { right: 16px !important; bottom: 16px !important; width: 52px !important; height: 52px !important; }
}

/* ─── Booking flow: mobile container-query rules ───
   These fire whenever the .flow modal itself is narrow (under 640px wide).
   On a real phone the viewport is 390-430px, so the modal sits well under 640
   and these rules take over. Tablet/desktop keep the existing two-column layout. */
@container flow (max-width: 640px) {
  .flow-head { padding: 12px 16px; }
  .flow-head .step-label { display: none; }
  .flow-head .progress span { width: 18px; }
  .flow-head img { height: 32px !important; }

  .flow-body { padding: 22px 18px 28px; grid-template-columns: 1fr; gap: 24px; }
  .flow-body h2 { font-size: 26px; line-height: 1.12; }
  .flow-body h2 em { display: inline; padding-bottom: 0; } /* simpler inline italic on mobile — avoids inline-block baseline quirks */
  .flow-body .sub { font-size: 13.5px; margin-bottom: 18px; }

  .fld { margin-bottom: 14px; }
  .fld-row { grid-template-columns: 1fr; gap: 14px; }
  .fld input, .fld select, .fld textarea { font-size: 16px; padding: 12px 14px; } /* 16px = no iOS zoom */
  .opt-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt { padding: 10px 12px; }

  .boat-pref { grid-template-columns: 1fr; gap: 8px; }
  .boat-note { font-size: 12.5px; padding: 11px 13px; }

  .flow-summary { padding: 18px; }
  .flow-summary .sum-img { aspect-ratio: 16/9; margin-bottom: 12px; }
  .flow-summary h4 { font-size: 19px; }
  .sum-boat-tag { font-size: 9.5px; padding: 2px 6px; }
  /* Hide the sidebar-summary on mobile for steps 0-3 — its content duplicates
     what the user is currently filling, and at full width it dominates the screen.
     Step 5's deposit summary (no --sidebar class) still shows, which is correct
     because it carries the pay-now total. */
  .flow-summary--sidebar { display: none; }

  .flow-foot { padding: 12px 16px; gap: 8px; }
  .flow-foot > div:last-child { gap: 8px; }
  .flow-foot > div:last-child > span { display: none; } /* hide the "no card required" hint */
  .flow-foot .btn-primary { padding: 12px 14px; font-size: 14px; }
  .flow-back { font-size: 13px; }

  .confirm-screen { padding: 16px 4px; }
  .confirm-screen h2 { font-size: 28px; }
}

/* =====================================================
   Booking flow — field inputs & layout
   ===================================================== */
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld label {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--mute);
}
.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  width: 100%; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.fld select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(31,123,197,.12);
}
.fld input:disabled {
  background: var(--sand); color: var(--mute); cursor: not-allowed;
}

/* Opt (occasion / bar / add-on) chips */
.opt {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--shell);
  cursor: pointer; font: inherit; text-align: left;
  transition: border-color .2s, background .2s;
}
.opt:hover { border-color: var(--sea); }
.opt.selected {
  border-color: var(--sea);
  background: rgba(31,123,197,.06);
  box-shadow: 0 0 0 1px var(--sea);
}

/* Flow body two-column layout */
.flow-body {
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  overflow-y: auto;
  flex: 1;
}
.flow-body h2 {
  font-family: var(--f-display);
  font-weight: 400; font-size: 40px;
  line-height: 1.08; margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.flow-body h2 em { font-style: italic; color: var(--sea); }
.flow-body .sub {
  font-size: 14.5px; color: var(--ink-soft);
  margin: 0 0 24px; line-height: 1.55;
}

/* Footer navigation */
.flow-foot {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  background: var(--shell); gap: 16px;
}
.flow-back {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font: inherit; font-size: 14px;
  cursor: pointer; color: var(--ink-soft);
}
.flow-back:hover { border-color: var(--ink); color: var(--ink); }
.flow-back:disabled { opacity: .3; cursor: default; }

/* Boat preference cards */
.boat-note {
  font-size: 13px; color: var(--ink-soft);
  margin: 6px 0 12px; line-height: 1.5;
}
.boat-pref {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.boat-pref-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  background: var(--shell);
  cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s;
}
.boat-pref-card:hover { border-color: var(--sea); }
.boat-pref-card.selected {
  border-color: var(--sea);
  background: rgba(31,123,197,.05);
  box-shadow: 0 0 0 1px var(--sea);
}
.boat-pref-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 4px;
}
.boat-pref-price { font-size: 13px; font-weight: 600; color: var(--sea); }
.boat-pref-price small { font-size: 10px; font-weight: 400; color: var(--mute); margin-left: 1px; }
.boat-pref-tag {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sun); color: var(--ink);
  padding: 2px 7px; border-radius: var(--r-pill); font-weight: 600;
}
.boat-pref-tick {
  position: absolute; top: 10px; right: 10px;
  width: 18px; height: 18px;
  background: var(--sea); color: #fff;
  border-radius: 50%; display: none;
  place-items: center; font-size: 11px;
}
.boat-pref-card.selected .boat-pref-tick { display: grid; }
.boat-hint {
  margin-top: 10px; font-size: 13px;
  color: var(--ink-soft);
  background: rgba(31,123,197,.06);
  border: 1px solid rgba(31,123,197,.18);
  border-radius: var(--r-md);
  padding: 10px 14px;
}

/* Phone verification widget */
.pv-row { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.pv-tick { color: #22c55e; display: grid; place-items: center; }
.pv-card {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--shell);
  display: flex; flex-direction: column; gap: 12px;
}
.pv-card.pv-sending { flex-direction: row; align-items: center; gap: 14px; }
.pv-card-head { display: flex; align-items: flex-start; gap: 12px; }
.pv-card-head > div { display: flex; flex-direction: column; gap: 2px; }
.pv-card-head b { font-size: 14px; }
.pv-card-head small { font-size: 12.5px; color: var(--mute); }
.pv-btn-row { display: flex; gap: 8px; }
.pv-btn {
  padding: 10px 16px; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.pv-btn:disabled { opacity: .4; cursor: default; }
.pv-btn-primary {
  background: var(--sea); color: #fff; border: none;
}
.pv-btn-primary:hover:not(:disabled) { background: var(--cta-deep); }
.pv-btn-ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
}
.pv-btn-ghost:hover:not(:disabled) { border-color: var(--ink); }
.pv-consent { font-size: 11.5px; color: var(--mute); margin: 0; line-height: 1.5; }
.pv-link {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 13px;
  color: var(--sea); cursor: pointer; text-align: left;
}
.pv-link:hover { text-decoration: underline; }
.pv-link-inline { display: inline; }
.pv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sea); }
.pv-dot-live { background: #22c55e; }
.pv-code {
  font-size: 28px; letter-spacing: .25em; text-align: center;
  padding: 14px 16px; border: 2px solid var(--line);
  border-radius: var(--r-md); width: 100%;
  font-family: var(--f-display); box-sizing: border-box;
  transition: border-color .2s;
}
.pv-code:focus { outline: none; border-color: var(--sea); }
.pv-foot-row {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 12.5px; color: var(--mute);
}
.pv-hint { color: var(--mute); font-size: 12.5px; }
.pv-banner {
  margin-top: 10px; padding: 14px 16px;
  border-radius: var(--r-md);
  display: flex; align-items: flex-start; gap: 12px;
}
.pv-banner > div { display: flex; flex-direction: column; gap: 2px; }
.pv-banner b { font-size: 13.5px; }
.pv-banner small { font-size: 12.5px; color: var(--mute); }
.pv-verified { background: #f0fdf4; border: 1px solid #bbf7d0; }
.pv-skipped { background: rgba(31,123,197,.05); border: 1px solid rgba(31,123,197,.18); }
.pv-tick-lg { color: #22c55e; display: grid; place-items: center; }
.pv-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--sea);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Review step */
.bf-optin {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--shell);
}
.bf-optin input[type="checkbox"] {
  margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--sea);
}
.bf-optin > div { display: flex; flex-direction: column; gap: 2px; }
.bf-optin b { font-size: 14px; }
.bf-optin small { font-size: 12.5px; color: var(--mute); }
.bf-consent {
  font-size: 12px; color: var(--mute);
  margin: 12px 0 0; line-height: 1.5;
}
.bf-consent a { color: var(--sea); }

/* Confirming / Done screens */
.mark.pending {
  background: rgba(31,123,197,.10);
  color: var(--sea);
}
.timer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 14px;
  font-size: 13px; color: var(--ink-soft); margin-top: 16px;
}
.confirm-detail {
  text-align: left; max-width: 340px; margin: 0 auto;
}
.confirm-detail dl { margin: 0; display: flex; flex-direction: column; gap: 0; }
.confirm-detail dl > div {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.confirm-detail dt { color: var(--mute); }
.confirm-detail dd { margin: 0; font-weight: 500; }