/* ===========================================================================
   Cozumel Top Dive Experience — content prototype
   Neutral palette matched to the live site (cozumeltopdiveexperience.com):
   one brand navy #1b3a4c · warm grey band #e8e6e6 · white/off-white surfaces.
   No accent colour — hierarchy is carried by typography and navy-vs-grey.
   Montserrat (uppercase tracked display) + Lato (body), neutral shadows,
   pill CTAs. Class names are unchanged so every page adopts the palette.
   ========================================================================= */

:root{
  /* ---- Brand: one navy, no accent (matches live site) ---- */
  --navy:      #1b3a4c;   /* the single brand colour */
  --navy-dk:   #16303f;   /* hover / pressed */
  --navy-900:  #1b3a4c;   /* dark band — same as brand, as on the live site */
  --navy-950:  #142c3a;   /* footer — a touch deeper, for band separation */

  /* ---- Accent retired: collapsed onto navy/grey. Names kept so HTML keeps working. ---- */
  --accent:       #1b3a4c;  /* was turquoise */
  --accent-strong:#1b3a4c;  /* was deep turquoise */
  --accent-soft:  #f2f2f2;  /* was pale turquoise — now a neutral tint */
  --ocean:        #1b3a4c;  /* was ocean blue */
  --ocean-dk:     #142c3a;

  /* ---- Neutrals (live-site greys) ---- */
  --sand-50:   #f2f2f2;
  --sand-100:  #e8e6e6;   /* THE alternate section band */
  --sand-200:  #d8d8d8;

  /* ---- Legacy names remapped (keeps inline var() working) ---- */
  --green:     #1b3a4c;   /* NOT green — primary/brand navy */
  --green-dk:  #16303f;
  --ink:       #1b3a4c;   /* headings — navy, as on the live site */
  --ink-2:     #282626;   /* body text — warm near-black */
  --bone:      #fcfcfc;   /* page background — off-white */
  --bone-2:    #e8e6e6;   /* alt section band */
  --teal:      #1b3a4c;   /* NOT teal — dark band */
  --gold:      #1b3a4c;   /* NOT gold — stars/note rule, neutralized */
  --muted:     #595959;
  --line:      #c7c7c7;   /* functional hairline (nav, inputs, chips) */
  --line-soft: #e8e6e6;   /* soft card border */
  --eg-bg:     #e8e6e6;
  --eg-fg:     #1b3a4c;
  --link:      #1b3a4c;
  --link-hover:#000000;
  --white:     #ffffff;

  --maxw:      1200px;
  --radius:    5px;
  --display:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body:      "Lato", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* neutral elevation */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 8px 22px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.12);
  --shadow-hover: 0 22px 50px rgba(0,0,0,.16);
  --ring: 0 0 0 2px #fff, 0 0 0 4px #1b3a4c;  /* white halo + navy ring: visible on light AND dark */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  color:var(--ink-2);
  background:var(--bone);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:var(--link); text-decoration:none; transition:color .14s ease; }
a:hover{ color:var(--link-hover); text-decoration:underline; }
::selection{ background:#d8d8d8; color:var(--navy-900); }

h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.15; }
h1{ font-size:clamp(30px,5vw,52px); font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
h2{ font-size:clamp(23px,3.4vw,36px); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
h3{ font-size:clamp(18px,2.2vw,22px); font-weight:700; letter-spacing:.01em; }
h4{ font-size:16px; font-weight:600; }
.eyebrow{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.22em;
  font-size:13px; font-weight:600; color:var(--muted);
}
.lead{ font-size:clamp(16px,2vw,20px); line-height:1.8; color:var(--ink-2); }
.muted{ color:var(--muted); }
.center{ text-align:center; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:clamp(48px,5vw,80px) 0; }
.band{ background:var(--sand-100); }
.band--dark{ background:var(--navy-900); color:#e0e6eb; }
.band--dark h1,.band--dark h2,.band--dark h3{ color:#fff; }
.band--dark .lead,.band--dark .muted{ color:#c7c7c7; }

/* ---------- Buttons (pill, uppercase, tracked) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  height:44px; padding:0 28px; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer; line-height:1; white-space:nowrap;
  transition:transform .14s ease, box-shadow .24s ease, filter .14s ease;
}
.btn:hover{ text-decoration:none; filter:brightness(.93); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
/* used once, on the dark photo hero — inverted so it reads against the scrim */
.btn--accent{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--navy); filter:none; }
.btn--wa{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--onphoto{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.7); }
.btn--lg{ height:54px; padding:0 40px; font-size:15px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }

/* ---------- Example-price badge ---------- */
.badge-eg{
  display:inline-block; background:var(--eg-bg); color:var(--eg-fg);
  font-family:var(--display); font-size:11px; font-weight:600; padding:3px 9px;
  border-radius:var(--radius); letter-spacing:.04em; text-transform:uppercase;
  vertical-align:middle; margin-left:8px;
}
.price{ font-family:var(--display); font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--navy); letter-spacing:.01em; }
.price small{ display:block; margin-top:2px; font-family:var(--body); font-size:14px; color:var(--muted); font-weight:400; letter-spacing:0; line-height:1.4; }

/* ---------- Image placeholder ---------- */
.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px;
  background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 12px,#e8e6e6 12px,#e8e6e6 24px);
  border:1.5px dashed var(--line); border-radius:var(--radius);
  color:var(--muted); padding:22px; min-height:200px;
}
.ph i{ font-size:30px; opacity:.6; }
.ph .ph-cap{ font-size:13px; line-height:1.45; max-width:42ch; }
.ph .ph-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; opacity:.7; }
.ph--tall{ min-height:320px; }
.ph--wide{ min-height:240px; }
/* real photo in a hero/feature slot */
.photo{ width:100%; height:340px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.photo--tall{ height:420px; }
/* tall portrait photo in a split column — vertical frame, cover-filled, centered */
.photo--portrait{ width:auto; height:clamp(440px,56vw,600px); aspect-ratio:4/5; margin-inline:auto; }
/* real photo/video filling a card's top (mirrors .card .ph edge-bleed) */
.card-media{ display:block; width:100%; height:200px; margin-bottom: 10px; object-fit:cover; background:var(--navy); border-radius:var(--radius); }
/* portrait photo in a card: a centered vertical frame (~a third wide), cover-filled */
.card-media--portrait{ width:min(70%,240px); height:330px; margin:0 auto 18px; object-fit:cover; object-position:center; border-radius:var(--radius); }

/* ---------- Grid helpers ---------- */
.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }

/* ---------- Cards ---------- */
.card{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:24px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .24s ease, box-shadow .24s ease;
}
.card h3{ margin-bottom:6px; color:var(--navy-dk); }
.card .ph{ margin:-24px -24px 18px; border-radius:0; border-left:0; border-right:0; border-top:0; min-height:180px; }
/* horizontal person card: image left, text right */
.card--row{ display:flex; gap:clamp(18px,3vw,32px); align-items:center; }
.card--row .card-media{ flex:0 0 auto; width:clamp(190px,26%,260px); min-width:0; height:300px; margin:0; }
.card--row .card-text{ flex:1; min-width:0; }
.card--row .card-text h3{ margin-top:0; }
@media (max-width:640px){
  .card--row{ flex-direction:column; align-items:stretch; }
  .card--row .card-media{ width:100%; flex-basis:auto; height:260px; margin-bottom:16px; }
}

.linkcard{
  display:block; background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:20px 22px; transition:.18s ease; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.linkcard:hover{ border-color:var(--navy); text-decoration:none; transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.linkcard b{ font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-size:15px; color:var(--navy-dk); }
.linkcard .arr{ color:var(--navy); font-weight:700; font-family:var(--display); text-transform:uppercase; font-size:13px; letter-spacing:.06em; }
.linkcard p{ color:var(--muted); font-size:14px; margin-top:4px; }

/* ---------- Tiers ---------- */
.tier{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px; position:relative; box-shadow:var(--shadow-sm);
}
.tier--featured{ border:2px solid var(--navy); box-shadow:var(--shadow-lg); }
.tier .pop{
  position:absolute; top:-13px; left:26px; background:var(--navy); color:#fff;
  font-family:var(--display); font-size:11px; font-weight:700; padding:4px 13px; border-radius:var(--radius);
  letter-spacing:.08em; text-transform:uppercase;
}
.tier h3{ margin:6px 0 2px; color:var(--navy-dk); }
.tier .sub{ color:var(--muted); font-size:14px; margin-bottom:14px; }

/* ---------- Included row ---------- */
.inc{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); }
.inc i{ font-size:22px; color:var(--navy); flex:none; }

/* ---------- Feature cards (icon tile) ---------- */
.feature{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-sm); transition:transform .24s ease, box-shadow .24s ease;
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.feature .ic{
  width:76px; height:76px; border-radius:var(--radius); background:var(--sand-50);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  margin:0 auto 10px auto;
}
.feature .ic img{ height:54px; width:auto; object-fit:contain; }
.feature h3{ font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:18px; color:var(--navy-dk); margin-bottom:8px; }
.feature p{ color:var(--ink-2); font-size:15px; margin:0; }

/* ---------- Chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:7px 15px; font-size:14px; color:var(--ink-2);
}
a.chip:hover{ border-color:var(--navy); color:var(--navy); text-decoration:none; }

/* ---------- Reviews ---------- */
.review{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.review .stars{ color:var(--gold); font-size:14px; letter-spacing:2px; margin-bottom:8px; }
.review p{ font-size:15px; color:var(--ink-2); line-height:1.7; }
.review .who{ font-size:13px; color:var(--muted); margin-top:10px; }

/* ---------- Tick / feature list ---------- */
.ticks{ list-style:none; }
.ticks li{ position:relative; padding-left:28px; margin-bottom:10px; }
.ticks li::before{
  content:"\2713"; font-weight:700; position:absolute; left:0; top:1px;
  color:var(--navy); font-size:16px;
}
.ticks strong{ font-weight:700; color:var(--navy-dk); }

/* ---------- CTA band (navy, with an inverted white CTA) ---------- */
.cta-band{ background:linear-gradient(rgba(27,58,76,.88),rgba(20,44,58,.94)), url("../images/bg/bg1.png") center/cover; color:#fff; border-radius:var(--radius); padding:40px; text-align:center; box-shadow:var(--shadow-lg); }
/* vary the band texture where a modifier is set */
.cta-band--bg2{ background:linear-gradient(rgba(27,58,76,.88),rgba(20,44,58,.94)), url("../images/bg/bg2.png") center/cover; }
.cta-band--bg3{ background:linear-gradient(rgba(27,58,76,.88),rgba(20,44,58,.94)), url("../images/bg/bg3.png") center/cover; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#c7c7c7; margin:8px auto 0; max-width:60ch; }
.cta-band .btn-row{ justify-content:center; }
.cta-band .btn--primary{ background:#fff; color:var(--navy); border-color:#fff; }
.cta-band .btn--primary:hover{ filter:brightness(.95); }

/* ---------- Hero ---------- */
.hero{ padding:46px 0 30px; }
.hero .ph{ min-height:340px; }
.hero .eyebrow{ margin-bottom:10px; }
.hero p.lead{ margin-top:14px; max-width:54ch; }

/* full-bleed underwater hero */
.hero-full{ position:relative; min-height:min(82vh,680px); display:flex; align-items:flex-end; overflow:hidden; }
.hero-full > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-full .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,44,58,.86) 0%, rgba(20,44,58,.32) 48%, rgba(20,44,58,.16) 100%); }
.hero-full .hero-inner{ position:relative; z-index:1; width:100%; padding:clamp(2.5rem,6vw,5.5rem) 0; }
.hero-full .eyebrow{ color:#e0e6eb; }
.hero-full h1{ color:#fff; max-width:14ch; }
.hero-full .lead{ color:rgba(255,255,255,.92); max-width:52ch; }
.hero-tag{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:#e0e6eb; margin-top:8px; }
/* full-bleed hero with a placeholder (no photo) — navy gradient stand-in */
.hero-full .hero-ph-bg{ position:absolute; inset:0; background:linear-gradient(155deg,#142c3a 0%,#1b3a4c 45%,#2c5670 100%); }
.hero-ph-note{ display:inline-flex; align-items:center; gap:7px; margin-bottom:16px; font-family:var(--body); font-size:12px; color:rgba(255,255,255,.8); background:rgba(20,44,58,.32); border:1px dashed rgba(255,255,255,.45); padding:6px 11px; border-radius:var(--radius); }

/* hero background video (cover-cropped YouTube) — sits over the gradient, under the scrim */
.hero-full .hero-ph-bg{ z-index:0; }
.hero-full .hero-video{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; pointer-events:none; }
.hero-full .hero-video iframe{ display:block; width:100%; height:100%; border:0; }
.hero-full .scrim{ z-index:1; }
.hero-full .hero-inner{ z-index:2; }

/* breadcrumb */
.crumbs{ font-size:13px; color:var(--muted); padding-top:22px; }
.crumbs a{ color:var(--muted); }

/* note / assumption flag */
.note{
  background:#f5f5f5; border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:var(--radius); padding:12px 16px; font-size:13.5px; color:#282626; margin:14px 0;
}
.note b{ color:#000; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.brand{ display:flex; align-items:center; flex:none; }
.brand:hover{ text-decoration:none; }
.brand-logo{ height:42px; width:auto; }
.brand small{ display:none; }
.nav-links{ display:flex; align-items:center; gap:16px; }
.nav-links a{ font-family:var(--display); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.nav-links a:hover{ color:var(--navy); text-decoration:none; }
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a::after{ content:" \25be"; color:var(--muted); }
.submenu{
  position:absolute; top:100%; left:-12px; min-width:248px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:8px; display:none;
  box-shadow:var(--shadow-md);
}
.has-sub:hover .submenu{ display:block; }
.submenu a{ display:block; padding:9px 12px; border-radius:var(--radius); font-size:12px; }
.submenu a:hover{ background:var(--sand-100); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; font-size:26px; color:var(--navy); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-950); color:#c7c7c7; padding:56px 0 26px; margin-top:24px; }
.site-footer h4{ color:#fff; font-family:var(--display); font-size:12px; text-transform:uppercase; letter-spacing:.14em; margin-bottom:12px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.site-footer a{ color:#c7c7c7; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; }
.site-footer ul li{ margin-bottom:7px; font-size:14px; }
.footer-brand .brand{ color:#fff; }
.footer-logo-img{ height:48px; width:auto; margin-bottom:6px; }
.footer-brand p{ font-size:13.5px; color:#a8a8a8; margin-top:10px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#a8a8a8; }

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:70;
  background:var(--navy); color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.wa-float:hover{ text-decoration:none; transform:scale(1.05); }

/* ---------- Forms (reserve) ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:700; margin-bottom:6px; color:var(--navy-dk); }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:15px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink-2);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:var(--ring); border-color:var(--navy); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.choice-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.choice{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:16px; cursor:pointer;
  background:#fff; transition:.15s; text-align:left; font-family:var(--body);
}
.choice:hover{ border-color:var(--navy); }
.choice i{ font-size:24px; color:var(--navy); }
.choice b{ display:block; margin-top:8px; font-family:var(--display); text-transform:uppercase; font-size:13px; letter-spacing:.04em; color:var(--navy-dk); }
.choice span{ font-size:13px; color:var(--muted); }
.choice.selected{ border-color:var(--navy); background:var(--accent-soft); box-shadow:0 0 0 1px var(--navy) inset; }
.steps-ind{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.steps-ind .s{ font-family:var(--display); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border-radius:var(--radius); background:var(--sand-100); }
.steps-ind .s.active{ background:var(--navy); color:#fff; }
.steps-ind .s.done{ background:var(--sand-100); color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; }
.form-step{ display:none; }
.form-step.active{ display:block; }
.conditional{ display:none; }
.conditional.show{ display:block; }
.aside-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }

/* ---------- Rate / comparison tables (pricing + dive-and-stay) ---------- */
table.rate{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.rate th,table.rate td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14.5px; vertical-align:top; }
table.rate th{ background:var(--bone-2); font-family:var(--body); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
table.rate td.amt{ font-weight:600; color:var(--ink); white-space:nowrap; }
table.rate tr:last-child td{ border-bottom:0; }
/* only the pricing page's Notes column is droppable on mobile — opt in with .rate--notes.
   The dive-and-stay comparison table's 4th column carries the USD figures and must survive. */
@media (max-width:640px){ table.rate--notes th:nth-child(4),table.rate--notes td:nth-child(4){ display:none; } }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:26px; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 0;
    max-height:0; overflow:hidden; transition:max-height .3s;
  }
  .nav-links.open{ max-height:640px; }
  .nav-links a{ padding:12px 24px; }
  .nav-links .has-sub > a::after{ content:""; }
  .submenu{ position:static; display:block; border:0; box-shadow:none; padding:0 0 0 12px; }
  .submenu a{ padding:8px 24px; font-size:12px; color:var(--muted); }
  .nav-toggle{ display:block; }
}
@media (max-width:560px){
  .g-2,.g-3,.g-4,.choice-cards{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
}