/* Banyumilir Dive Center */
:root {
  --navy: #1f3d6d;
  --navy-deep: #132a52;
  --teal: #1c6b6b;
  --lime: #8cc21a;
  --yellow: #f3f400;
  --ink: #0e1116;
  --muted: #72777d;
  --mist: #f5f5f5;
  --line: #e4e6e9;
  --pill: #dfe1e3;
  --taupe: #4f4747;
  --pay: linear-gradient(90deg, #e9415c, #a40f86);
  --edit: #6b4dff;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --card-w: min(66vw, 340px);
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[data-multi] { white-space: pre-line; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.arr { flex: none; width: 1.9em; height: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.btn--lime { background: var(--lime); color: #fff; padding: .42em 1.05em; font-size: 1.05rem; }
.btn--lime:hover { background: #7db014; }
.btn--yellow { background: var(--yellow); color: var(--ink); padding: .5em 1em; font-weight: 500; border-radius: 10px; }
.btn--yellow:hover { background: #fff; }
.btn--pay { background: var(--pay); color: #fff; font-size: 1.15rem; font-weight: 700; padding: .5em 1.4em; }
.btn--pay:hover { filter: brightness(1.08); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--navy); color: #fff; }
.top__in { display: flex; align-items: center; gap: 12px; height: 58px; max-width: 1160px; margin-inline: auto; padding-inline: 14px; position: relative; }
.brand { display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; position: relative; }
.brand__logo { height: 36px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; font-size: 15.2px; }
.brand__text strong { font-weight: 500; letter-spacing: .01em; }
.menu-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-deep); padding: 8px 14px 14px; }
.nav.is-open { display: block; }
.nav a { display: block; padding: 11px 6px; font-size: 16.8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.nav a:hover { color: var(--yellow); }

/* ---------- hero ---------- */
.hero { position: relative; height: clamp(330px, 84vw, 640px); background: var(--navy-deep); overflow: hidden; }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; color: #fff; opacity: .85; padding: 8px; }
.hero__nav:hover { opacity: 1; }
.hero__nav--prev { left: 8px; }
.hero__nav--next { right: 8px; }
.hero__fade { position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%); pointer-events: none; z-index: 1; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(rgba(10, 30, 60, 0) 45%, rgba(10, 30, 60, .55)); pointer-events: none; z-index: 1; }
.hero__title { position: absolute; inset: auto 0 22px; z-index: 2; color: #fff; }
.hero__title h1 { font-size: clamp(1.45rem, 5.6vw, 3.4rem); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(6, 24, 52, .45); max-width: 16em; }
.hero__title h1 > span { display: block; }
.accent { color: var(--yellow); }

.chips { position: absolute; inset: auto 0 14px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding-inline: var(--gutter); }
.chip { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border-radius: 999px; background: rgba(226, 229, 232, .82); backdrop-filter: blur(6px); color: #7b8086; font-size: .82rem; }
.chip b { display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 5px; border-radius: 999px; background: var(--teal); color: #fff; font-size: .72rem; font-weight: 600; }

/* ---------- sections ---------- */
.sec { padding-block: 34px 26px; }
.sec--mist { background: var(--mist); }
.sec--tight { padding-block: 26px 22px; }
.sec-head { text-align: center; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(1.15rem, 2.4vw, 1.9rem); font-weight: 600; margin-bottom: 12px; }
.sec-head p { color: var(--muted); font-size: clamp(.82rem, 1.4vw, 1.05rem); font-weight: 300; max-width: 62ch; margin-inline: auto; line-height: 1.35; }
.sec-title { font-size: clamp(1.15rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.2; margin-bottom: 16px; padding-inline: calc(var(--gutter) + 26px); }
.wrap > .sec-title { padding-inline: 26px; }
.empty { color: var(--muted); padding: 20px 0; }
.empty--light { color: rgba(255, 255, 255, .8); }

/* ---------- carousels ---------- */
.carousel { position: relative; }
.carousel__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px max(var(--gutter), calc(50% - var(--card-w) / 2)); }
.carousel__track::-webkit-scrollbar, .thumbs__track::-webkit-scrollbar, .social__posts::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: 0 0 var(--card-w); scroll-snap-align: center; }
.carousel__nav { display: none; }
.dots { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.dots i { width: 5px; height: 5px; border-radius: 99px; background: #dadcdf; transition: width .2s; }
.dots i.is-on { width: 12px; }
.carousel.no-scroll .dots { visibility: hidden; }
.carousel--quotes { --card-w: min(72vw, 300px); }

/* dive site / course card */
.site-card { position: relative; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; color: #fff; background: var(--navy-deep); isolation: isolate; }
.site-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.site-card::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(rgba(19, 48, 94, 0), rgba(19, 48, 94, .92) 78%); z-index: -1; }
.site-card__body { position: absolute; inset: auto 0 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-inline: 6.500%; }
.site-card__name h3 { font-size: clamp(1.1rem, 5vw, 1.55rem); font-weight: 600; line-height: 1.05; text-shadow: 0 1px 8px rgba(6, 24, 52, .4); }
.site-card__name h3 > span { display: block; }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: .62rem; margin-top: 5px; font-weight: 400; }
.more:hover, .tab:hover { color: var(--yellow); }
.site-card__price { display: flex; flex-direction: column; text-align: left; line-height: 1.1; flex: none; }
.site-card__price .lbl { font-size: .72rem; font-weight: 300; }
.site-card__price strong { font-size: clamp(.95rem, 4.2vw, 1.3rem); font-weight: 300; white-space: nowrap; }
.site-card--course .site-card__price strong { font-weight: 600; }
.site-card--course .site-card__name h3 { letter-spacing: .01em; }
.tab { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; padding: 5px 14px 6px; font-size: .78rem; font-weight: 400; line-height: 1.2; }

/* package card */
.pkg-list { display: grid; gap: 12px; }
.pkg-head { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; margin: 22px 0 10px; }
.pkg-head--light { color: #fff; font-size: 1.05rem; margin-top: 0; }
.pkg-head--light span:first-child { font-weight: 500; }
.pkg-head--group { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); }
.pkg-list:empty + .pkg-head--group { margin-top: 0; padding-top: 0; border-top: 0; }
.pkg-card { position: relative; height: 104px; border-radius: 12px; overflow: hidden; color: #fff; background: var(--navy-deep); isolation: isolate; }
.pkg-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pkg-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 60, .72), rgba(8, 20, 60, .1) 55%, rgba(8, 20, 60, .45)); z-index: -1; }
.pkg-card__cat { position: absolute; top: 9px; left: 12px; display: flex; align-items: center; gap: 8px; font-size: .68rem; }
.pkg-card__cat i { width: 8px; height: 8px; border-radius: 50%; background: #dcdcdc; }
.pkg-card__times { position: absolute; top: 9px; right: 12px; background: var(--pill); color: var(--teal); font-weight: 600; font-size: .68rem; padding: 2px 10px; border-radius: 999px; }
.pkg-card__name { position: absolute; left: 16px; bottom: 9px; max-width: 55%; }
.pkg-card__name h3, .pkg-card__name h1 { font-size: 1rem; font-weight: 600; line-height: 1.12; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.pkg-card__price { position: absolute; right: 13px; bottom: 34px; font-size: 1rem; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); white-space: nowrap; }
.pkg-card .tab { border-top-left-radius: 12px; padding: 4px 13px 5px 16px; font-size: .88rem; }
.pkg-card--banner { height: 118px; }
.pkg-card--banner .pkg-card__name { bottom: 12px; }
.pkg-card--banner .pkg-card__name h1 { font-size: 1.1rem; }
.tab--price { font-size: 1.05rem; font-weight: 600; padding: 5px 26px 6px; border-top-left-radius: 0; }
.tab--price s { font-weight: 400; font-size: .78em; opacity: .75; margin-right: 8px; }

/* select */
.select { position: relative; }
.select__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; border: 1px solid #d9dbde; border-radius: 10px; color: #6f7479; font-size: 1rem; text-align: left; background: #fff; }
.select__btn svg { color: #9a9ea3; flex: none; }
.select__menu { position: absolute; z-index: 10; inset: calc(100% + 4px) 0 auto; background: #fff; border: 1px solid #d9dbde; border-radius: 10px; padding: 6px; box-shadow: 0 14px 30px rgba(15, 35, 70, .14); }
.select__menu li { padding: 10px 12px; border-radius: 7px; cursor: pointer; }
.select__menu li:hover, .select__menu li:focus-visible { background: var(--mist); }
.select__menu li[aria-selected="true"] { color: var(--teal); font-weight: 600; }

/* testimony */
.quote { border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px 24px; background: #fff; }
.quote__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quote__avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; background: #d9d9d9; flex: none; }
.stars { color: #d8dadd; letter-spacing: 1px; font-size: .9rem; }
.stars b { color: var(--ink); font-weight: 400; }
.quote h3 { font-size: .9rem; font-weight: 400; margin-bottom: 8px; }
.quote p { font-size: .72rem; font-weight: 300; line-height: 1.7; }

/* social */
.social__links { display: flex; flex-wrap: wrap; gap: 8px; }
.social__links li { position: relative; }
.social__links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d9d9d9; color: var(--navy); }
.social__links a:hover { background: var(--navy); color: #fff; }
.social__links .letter { font-weight: 600; font-size: .85rem; }
.social__posts { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 16px calc(var(--gutter) + 26px) 26px; scroll-snap-type: x proximity; }
.post { position: relative; flex: 0 0 min(34vw, 250px); aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); scroll-snap-align: start; }
.post img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- dive site page ---------- */
.info { padding-block: 18px 22px; }
.info__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info__rating { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; }
.share { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #dfe1e3; color: #70757b; font-size: .72rem; }
.share svg { fill: currentColor; }
.share:hover { background: #cfd2d5; }
.info__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; }
.crumb { color: #a3a7ac; font-size: .62rem; font-weight: 300; margin-bottom: 8px; }
.info__name { font-size: clamp(1rem, 2.6vw, 1.9rem); font-weight: 600; }
.btn--book svg { width: 1.25em; height: 1.25em; }
.info__desc { color: var(--muted); font-size: clamp(.68rem, 1.3vw, 1rem); font-weight: 300; text-align: justify; line-height: 1.5; margin-top: 12px; max-width: 78ch; }

.thumbs { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.thumbs__track { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 2px; }
.thumbs__nav { color: #c9ccd0; flex: none; }
.thumbs__nav:hover { color: var(--ink); }
.thumb { position: relative; flex: 0 0 calc((100% - 30px) / 4); aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--mist); cursor: zoom-in; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.sitepk__title { padding-top: 18px; border-top: 1px solid var(--line); margin-top: 4px; }
.sitepk__dark { position: relative; background: #17181a; padding-block: 24px 64px; isolation: isolate; overflow: hidden; }
.sitepk__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.34); z-index: -1; }
.sitepk__in { position: relative; }

/* ---------- package page ---------- */
.pd { padding-block: 22px 12px; }
.back { display: inline-block; font-size: .92rem; margin-bottom: 16px; }
.back:hover { color: var(--teal); }
.card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 22px; }
.pd__grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.pd__map { padding: 14px; position: relative; }
.pd__mapimg { width: 100%; aspect-ratio: 16 / 11; object-fit: contain; border-radius: 8px; margin-bottom: 10px; }
.pd__mapimg--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f3f5f7 0 10px, #eceff2 10px 20px); color: #8b9096; font-size: .72rem; }
.pd__map h2, .pd__desc h2, .pd__inc h2 { font-size: .78rem; font-weight: 500; line-height: 1.2; margin-bottom: 8px; }
.pd__map p, .pd__desc p { font-size: .68rem; font-weight: 300; line-height: 1.5; }
.pd__side { display: grid; gap: 10px; align-content: start; }
.pd__inc { background: #dedfe1; border-radius: 12px; padding: 14px; }
.pd__inc h2 { margin-left: 8px; }
.pd__inc li { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px solid #9ea1a5; font-size: .66rem; font-weight: 300; }
.pd__inc li:last-child { border-bottom: 0; }
.pd__inc li.ed-add { border-bottom: 0; }
.pd__inc i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); }
.pd__member { background: var(--taupe); color: #fff; border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; }
.pd__member p { font-size: .62rem; text-align: right; line-height: 1.2; padding-right: 4px; }
.pd__member button { width: 40px; height: 40px; border-radius: 10px; font-size: .68rem; font-weight: 600; }
.pd__member .yes { background: var(--yellow); color: var(--ink); }
.pd__member .no { background: var(--teal); color: #fff; }
.pd__member button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--taupe), 0 0 0 4px #fff; }
.pd__desc { margin-top: 10px; }
.pd__desc .thumbs { margin-top: 14px; }
.pd__pay { display: flex; justify-content: flex-end; margin-top: 18px; }

/* ---------- footer ---------- */
.foot { position: relative; color: #fff; background: var(--navy-deep); isolation: isolate; overflow: hidden; }
.foot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.foot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(27, 60, 112, .9), rgba(15, 36, 78, .94)); z-index: -1; }
.foot__in { padding-block: 34px 26px; padding-inline: calc(var(--gutter) + 26px); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }
.foot__head { position: relative; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.foot__logo { height: 46px; width: auto; flex: none; }
.foot__head h2, .foot__nav h2, .foot__ptitle { color: var(--yellow); font-weight: 500; }
.foot__head h2 { font-size: clamp(.92rem, 2.2vw, 1.5rem); line-height: 1.2; }
.foot__about p { font-size: clamp(.68rem, 1.3vw, .95rem); font-weight: 300; line-height: 1.25; max-width: 34ch; margin-bottom: 14px; }
.foot__about .btn { font-size: clamp(.68rem, 1.3vw, .95rem); }
.foot__nav h2 { font-size: clamp(.92rem, 2.2vw, 1.5rem); margin-bottom: 6px; }
.foot__nav li { position: relative; }
.foot__nav a { display: inline-block; padding: 2px 0; font-size: clamp(.72rem, 1.4vw, 1rem); font-weight: 300; }
.foot__nav a:hover { color: var(--yellow); }
.foot__ptitle { text-align: center; font-size: .9rem; margin: 44px 0 18px; }
.foot__partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.foot__partners li { position: relative; display: grid; place-items: center; width: 84px; height: 44px; border-radius: 999px; background: #d9d9d9; padding: 8px 12px; }
.foot__partners img { max-height: 100%; width: auto; object-fit: contain; filter: brightness(.45); }
.foot__meta { text-align: center; font-size: .68rem; font-weight: 300; opacity: .85; margin-top: 26px; line-height: 1.3; }
.foot__bottom { text-align: center; color: var(--yellow); font-size: .68rem; line-height: 1.25; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .35); max-width: 520px; }

/* ---------- misc ---------- */
.img-empty { background: #d9d9d9; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 18, 36, .92); display: grid; place-items: center; padding: 56px 16px 16px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.lightbox__close { position: absolute; top: 12px; right: 14px; color: #fff; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; }
.toast { position: fixed; left: 50%; bottom: 84px; translate: -50% 0; z-index: 120; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: .85rem; max-width: calc(100vw - 32px); text-align: center; }

/* ---------- larger screens ---------- */
@media (min-width: 560px) {
  .pkg-card { height: 128px; }
  .pkg-card__name h3 { font-size: 1.2rem; }
  .pkg-card__price { font-size: 1.2rem; bottom: 42px; }
  .pkg-card .tab { font-size: 1rem; padding: 7px 18px 8px 22px; }
  .pkg-card__cat, .pkg-card__times { font-size: .8rem; top: 12px; }
  .pkg-card--banner { height: 190px; }
  .pkg-card--banner .pkg-card__name h1 { font-size: 1.7rem; }
  .tab--price { font-size: 1.3rem; }
  .more { font-size: .75rem; }
  .tab { font-size: .9rem; padding: 7px 16px 8px; }
  .site-card__body { bottom: 48px; }
  .pd__map h2, .pd__desc h2, .pd__inc h2 { font-size: 1.05rem; }
  .pd__map p, .pd__desc p, .pd__inc li { font-size: .92rem; }
  .pd__inc li { padding-block: 8px; }
  .pd__member p { font-size: .85rem; }
  .pd__member button { width: 56px; height: 52px; font-size: .9rem; }
  .pd__grid, .pd__side { gap: 16px; }
  .pd__desc { margin-top: 16px; }
  .quote p { font-size: .82rem; }
  .info__rating, .share, .crumb { font-size: .85rem; }
  .foot__partners li { width: 120px; height: 60px; }
  .foot__meta, .foot__bottom { font-size: .82rem; }
  .thumb { flex-basis: calc((100% - 50px) / 6); }
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --card-w: 350px; }
  .top__in { height: 68px; padding-inline: 40px; }
  .brand__logo { height: 42px; }
  .brand__text { font-size: 16.8px; }
  .menu-btn { display: none; }
  .brand { margin-right: 0; }
  .nav { display: block; position: static; background: none; padding: 0; margin-inline: auto; }
  .nav ul { display: flex; gap: 6px; }
  .nav li { position: relative; }
  .nav a { border: 0; padding: 8px 14px; font-size: 15.2px; }
  .hero { height: min(74vh, 700px); }
  .hero__nav--prev { left: 24px; }
  .hero__nav--next { right: 24px; }
  .hero__nav svg { width: 36px; height: 36px; }
  .hero__title { bottom: 44px; }
  .chips { bottom: 26px; }
  .chip { font-size: 1rem; padding: 7px 8px 7px 18px; }
  .chip b { min-width: 28px; height: 28px; font-size: .85rem; }
  .sec { padding-block: 56px 44px; }
  .sec--tight { padding-block: 40px 30px; }
  .sec-title, .wrap > .sec-title { padding-inline: var(--gutter); }
  .wrap > .sec-title { padding-inline: 0; }
  .carousel__track { padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter))); }
  .carousel__track > * { scroll-snap-align: start; }
  .carousel__nav { display: block; position: absolute; top: calc(50% - 34px); z-index: 3; color: var(--navy); background: #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(15, 35, 70, .2); padding: 6px; }
  .carousel__nav--prev { left: 12px; }
  .carousel__nav--next { right: 12px; }
  .carousel.no-scroll .carousel__nav { display: none; }
  .pkg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .social__posts { padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter))); }
  .foot__in { padding: 64px var(--gutter) 34px; }
  .foot__cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 60px; }
  .foot__logo { height: 70px; }
  .foot__ptitle { font-size: 1.15rem; margin-top: 64px; }
  .pd { padding-block: 34px 20px; }
  .card { padding: 30px; }
  .pd__map { padding: 24px; }
  .pd__inc { padding: 24px; }
  .pd__member { padding: 18px; gap: 10px; }
  .sitepk__dark { padding-block: 40px 80px; }
}
@media (min-width: 1180px) {
  .pkg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide, .hero__slide.is-on, .dots i { transition: none; }
}

/* ================= editor ================= */
.ed-fab { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .9rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.ed-fab:hover { background: var(--edit); }
.ed-fab[hidden], .ed-bar[hidden], .ed-link[hidden], .ed-link label[hidden] { display: none; }
.ed-bar { position: fixed; left: 50%; bottom: 12px; translate: -50% 0; z-index: 90; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 16px); background: var(--ink); color: #fff; padding: 6px; border-radius: 14px; font-size: .85rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); overflow-x: auto; }
.ed-bar__status { padding: 0 10px; color: #b9bec6; white-space: nowrap; font-size: .78rem; }
.ed-bar button, .ed-bar a { padding: 8px 12px; border-radius: 9px; white-space: nowrap; }
.ed-bar a:hover { background: rgba(255, 255, 255, .14); }
.ed-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.ed-bar button:disabled { opacity: .4; cursor: default; }
.ed-bar .ed-bar__done { background: var(--edit); font-weight: 600; }
.ed-bar .ed-bar__done:hover { background: #5a3df0; }

body.editing { padding-bottom: 76px; }
.editing [data-bind] { outline: 1px dashed rgba(107, 77, 255, .6); outline-offset: 2px; border-radius: 3px; cursor: text; min-width: 1.5ch; -webkit-user-select: text; user-select: text; }
.editing [data-bind]:hover { outline-style: solid; }
.editing [data-bind]:focus { outline: 2px solid var(--edit); background: rgba(107, 77, 255, .14); }
.editing [data-bind]:empty { display: inline-block; }
.editing [data-bind]:empty::before { content: attr(data-ph); opacity: .55; font-style: italic; }
.editing :where([data-item]):not(.hero__slide) { position: relative; }
.editing .carousel__track, .editing .thumbs__track, .editing .social__posts { padding-top: 22px; }
.editing .pkg-list { row-gap: 24px; }
.editing .site-card, .editing .pkg-card:not(.pkg-card--banner), .editing .thumb, .editing .post { overflow: visible; }
.editing .site-card__img, .editing .site-card::after { border-radius: 18px; }
.editing .pkg-card:not(.pkg-card--banner) .pkg-card__img, .editing .pkg-card:not(.pkg-card--banner)::after { border-radius: 12px; }
.editing .pkg-card:not(.pkg-card--banner) .tab { border-bottom-right-radius: 12px; }
.editing .site-card .tab { border-bottom-right-radius: 18px; }
.editing .thumb img, .editing .post img { border-radius: 12px; }
.editing .thumb { cursor: default; }
.editing .stars { cursor: pointer; outline: 1px dashed rgba(107, 77, 255, .6); outline-offset: 3px; }

.ed-img { position: absolute; z-index: 6; top: 8px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--edit); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.ed-img:hover { background: #fff; color: var(--edit); }
.brand .ed-img { left: 0; top: 100%; translate: 0 -8px; width: 24px; height: 24px; }
.foot__head .ed-img { left: 0; top: 100%; translate: 0 4px; }
.foot > .ed-img { top: 10px; left: auto; right: 10px; translate: none; }
.sitepk__dark > .ed-img { top: 10px; left: auto; right: 10px; translate: none; }
.quote__top .ed-img { left: 31px; top: 16px; }
.foot__partners .ed-img { top: auto; bottom: -14px; width: 24px; height: 24px; }
.hero__slide .ed-img { top: 14px; width: 36px; height: 36px; }
.pd__map .ed-img { top: 20px; }

.ed-ctl { position: absolute; z-index: 7; top: -16px; right: 6px; display: inline-flex; align-items: center; background: var(--ink); color: #fff; border-radius: 8px; padding: 2px; font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font-style: normal; letter-spacing: 0; text-shadow: none; text-align: left; }
.ed-ctl button { min-width: 24px; height: 24px; padding: 0 5px; border-radius: 6px; color: #fff; font-size: 13px; }
.ed-ctl button:hover:not(:disabled) { background: var(--edit); }
.ed-ctl button:disabled { opacity: .35; cursor: default; }
.ed-ctl em { font-style: normal; padding: 0 8px 0 6px; font-size: 12px; color: #c9cdd4; }
.hero__slide .ed-ctl { top: 14px; right: 14px; }
.chip .ed-ctl, .social__links .ed-ctl, .foot__partners .ed-ctl { top: -30px; right: auto; left: 50%; translate: -50% 0; }
.nav li .ed-ctl { top: auto; bottom: -22px; right: auto; left: 50%; translate: -50% 0; }
.pd__inc li .ed-ctl, .foot__nav li .ed-ctl { top: 50%; translate: 0 -50%; right: 0; }
.foot__nav li .ed-ctl { right: auto; left: 100%; }
@media (hover: hover) {
  .ed-ctl:not(.ed-ctl--section) { opacity: 0; pointer-events: none; }
  [data-item]:hover > .ed-ctl, [data-item]:focus-within > .ed-ctl { opacity: 1; pointer-events: auto; }
}
.editing .sec-wrap { outline: 1px dashed transparent; }
.editing .sec-wrap:hover { outline-color: rgba(107, 77, 255, .5); outline-offset: -1px; }
.ed-ctl--section { top: 6px; left: 6px; right: auto; background: var(--edit); }
.ed-ctl--section em { color: #fff; }
.ed-ctl--section button:hover:not(:disabled) { background: rgba(0, 0, 0, .3); }
.sec-wrap.is-hidden { display: none; }
.editing .sec-wrap.is-hidden { display: block; height: 44px; background: repeating-linear-gradient(135deg, #f1efff 0 10px, #e7e3ff 10px 20px); }

.ed-add { display: grid; place-items: center; flex: none !important; }
.ed-add button { border: 1.5px dashed var(--edit); color: var(--edit); background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 8px 12px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.ed-add button:hover { background: var(--edit); color: #fff; }
.hero__slides > .ed-add { position: absolute; z-index: 6; top: 14px; left: 14px; }
.nav .ed-add button, .chips .ed-add button, .social__links .ed-add button { padding: 5px 9px; }
.pd__inc .ed-add { padding-top: 8px; }

.ed-link { position: absolute; z-index: 95; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; width: min(360px, calc(100vw - 16px)); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 14px 34px rgba(15, 35, 70, .25); font-size: .8rem; }
.ed-link label { display: grid; gap: 3px; flex: 1 1 140px; color: var(--muted); }
.ed-link input { font: inherit; font-size: .9rem; color: var(--ink); border: 1px solid #cfd3d8; border-radius: 8px; padding: 7px 9px; width: 100%; }
.ed-link input:focus { outline: 2px solid var(--edit); border-color: transparent; }
.ed-link__open { flex: none; background: var(--edit); color: #fff; border-radius: 8px; padding: 8px 12px; font-weight: 500; }

/* ================= additions: home hero copy, conservation, contact, reviews, motion ================= */
.btn--ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); padding: .42em 1.05em; font-size: 1.05rem; }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn--line { border: 1px solid #cfd3d8; padding: .55em 1.1em; font-size: .9rem; font-weight: 500; background: #fff; }
.btn--line:hover { border-color: var(--ink); }
.btn--wa { background: #1faa59; color: #fff; padding: .6em 1.2em; }
.btn--wa:hover { background: #17914a; }

.hero--home { height: clamp(500px, 128vw, 720px); }
.hero--home .hero__shade { background: linear-gradient(rgba(10, 30, 60, .1) 20%, rgba(10, 30, 60, .6) 62%, rgba(10, 30, 60, .2)); }
.hero__copy { position: absolute; inset: auto 0 112px; z-index: 2; color: #fff; }
.hero__copy h1 { font-size: clamp(2rem, 8.400vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.025em; text-shadow: 0 2px 18px rgba(6, 24, 52, .45); }
.hero__copy h1 > span { display: block; }
.hero__copy p { font-size: clamp(.95rem, 1.6vw, 1.25rem); font-weight: 400; max-width: 34ch; margin-top: 12px; text-shadow: 0 1px 10px rgba(6, 24, 52, .5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero--home .hero__fade { height: 26%; }
.hero--home .hero__nav { top: 30%; }

.sec-head h2, .sec-title, .cons__body h2, .contact__text h2 { letter-spacing: -.015em; }
.sec-head h2 { font-weight: 700; }
.sec-title { font-weight: 700; }

.cons { background: var(--navy-deep); color: #fff; }
.cons__in { display: grid; gap: 22px; }
.cons__media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.cons__img { width: 100%; height: 100%; object-fit: cover; }
.cons__body h2 { font-size: clamp(1.6rem, 4.4vw, 2.9rem); font-weight: 700; line-height: 1.05; color: var(--yellow); }
.cons__body p { font-weight: 300; margin-top: 14px; max-width: 52ch; color: rgba(255, 255, 255, .9); }
.cons__body ul { margin: 18px 0 22px; display: grid; gap: 10px; }
.cons__body li { position: relative; display: flex; align-items: center; gap: 12px; }
.cons__body li i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); }

.contact { background: var(--mist); }
.contact__in { display: grid; gap: 20px; align-items: center; }
.contact__text h2 { font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.08; }
.contact__text p { color: var(--muted); margin-top: 10px; max-width: 44ch; }
.contact__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 18px; }
.contact__who { position: relative; display: flex; align-items: center; gap: 14px; }
.contact__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.contact__who strong { display: block; font-size: 1.1rem; font-weight: 600; }
.contact__role, .contact__num { display: block; color: var(--muted); font-size: .9rem; }
.contact__num { color: var(--ink); }
.contact__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__missing { color: var(--muted); font-size: .85rem; }
.contact__who .ed-img { left: 32px; top: 16px; }

.reviews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-inline: calc(var(--gutter) + 26px); }
.quote__src { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .72rem; color: var(--muted); }

.site-card__img, .pkg-card__img, .cons__img, .post img, .thumb img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.site-card:hover .site-card__img, .pkg-card:hover .pkg-card__img, .cons__media:hover .cons__img, .post:hover img, .thumb:hover img { transform: scale(1.05); }
.btn, .tab, .more, .nav a, .select__btn { transition: background-color .25s, color .25s, border-color .25s, filter .25s; }

.sec-wrap > * { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.sec-wrap:not(.is-in) > * { opacity: 0; transform: translateY(26px); }
.sec-wrap.no-anim > * { transition: none; }
.sec-wrap:first-child:not(.is-in) > * { transform: none; }
.hero__copy > *, .chips { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero__copy p { animation-delay: .12s; }
.hero__cta { animation-delay: .24s; }
.chips { animation-delay: .36s; }
.sec-wrap.no-anim .hero__copy > *, .sec-wrap.no-anim .chips, .editing .hero__copy > *, .editing .chips { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

@media (min-width: 900px) {
  .hero--home { height: min(86vh, 780px); }
  .hero__copy { bottom: 120px; }
  .cons__in { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .contact__in { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .contact__card { padding: 28px; }
  .reviews { padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-wrap > *, .site-card__img, .pkg-card__img, .cons__img, .post img, .thumb img { transition: none; }
  .hero__copy > *, .chips { animation: none; }
}
.social__posts { scroll-padding-inline: calc(var(--gutter) + 26px); }
@media (min-width: 900px) { .social__posts { scroll-padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter))); } }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editing .hero__video { display: none; }
@media (max-width: 640px) {
  .ed-bar__status { display: none; }
  .ed-bar button, .ed-bar a { padding: 8px 9px; font-size: .8rem; }
}

/* ---------- dive packages page: three categories, one card each, the rest in a carousel ---------- */
.cat { padding-block: 30px 44px; }
.cat__top h1 { font-size: clamp(2rem, 6.400vw, 3.6rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.02; }
.cat__top p { color: var(--muted); margin-top: 10px; max-width: 52ch; }
.cat__cols { display: grid; gap: 34px; margin-top: 26px; }
.cat__col { min-width: 0; }
.cat__head { margin-bottom: 14px; }
.cat__head h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
.cat__head p { color: var(--muted); margin-top: 2px; font-size: .92rem; }
.solo .carousel__track { padding: 0; scroll-padding: 0; gap: 14px; border-radius: 18px; }
.solo .carousel__track > * { flex: 0 0 100%; scroll-snap-align: start; }
.solo__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.solo__nav { color: var(--ink); display: grid; place-items: center; }
.solo__nav svg { width: 34px; height: 34px; }
.solo__nav:hover:not(:disabled) { color: var(--teal); }
.solo__nav:disabled { opacity: .25; cursor: default; }
.solo__count { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.site-card--pkg .pkg-card__cat { top: 14px; left: 16px; font-size: .8rem; }
.site-card--pkg .pkg-card__times { top: 14px; right: 16px; font-size: .78rem; }
.site-card--pkg .site-card__price strong { font-weight: 600; }
.site-card--pkg .tab { font-size: .92rem; padding: 6px 18px 7px; }
.more-row { display: flex; justify-content: center; margin-top: 20px; }
.editing .solo .carousel__track { padding-top: 22px; border-radius: 0; }
@media (min-width: 900px) {
  .cat__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .cat__col .site-card { aspect-ratio: 4 / 5; }
}

/* ---------- booking pop-up ---------- */
.pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; padding: 0; background: rgba(9, 22, 46, .6); backdrop-filter: blur(3px); animation: pop-bg .25s ease both; }
.pop[hidden] { display: none; }
.pop__card { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 22px 22px 0 0; padding: 26px 22px 28px; box-shadow: 0 -10px 40px rgba(9, 22, 46, .3); animation: pop-up .35s cubic-bezier(.2, .7, .2, 1) both; }
.pop__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); color: var(--ink); }
.pop__close:hover { background: var(--pill); }
.pop__card h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; padding-right: 44px; }
.pop__text { color: var(--muted); margin-top: 8px; font-size: .95rem; }
.pop__for { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--mist); font-weight: 500; font-size: .92rem; }
.pop__for[hidden] { display: none; }
.pop__menu { display: grid; gap: 10px; margin-top: 18px; }
.pop__opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, background-color .2s, color .2s; }
.pop__opt > span { display: grid; margin-right: auto; min-width: 0; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.pop__opt strong { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.pop__opt > svg:first-child { flex: none; color: var(--navy); }
.pop__opt:hover { border-color: var(--navy); background: var(--mist); }
.pop__opt--wa { background: #1faa59; border-color: #1faa59; color: #fff; }
.pop__opt--wa > span, .pop__opt--wa strong, .pop__opt--wa > svg:first-child { color: #fff; }
.pop__opt--wa:hover { background: #17914a; border-color: #17914a; }
body.pop-open { overflow: hidden; }
@keyframes pop-bg { from { opacity: 0; } }
@keyframes pop-up { from { opacity: 0; transform: translateY(28px); } }
@media (min-width: 600px) {
  .pop { place-items: center; padding: 20px; }
  .pop__card { border-radius: 22px; padding: 32px; }
}
@media (prefers-reduced-motion: reduce) { .pop, .pop__card { animation: none; } }
.pop { z-index: 92; }
.pop__opt { gap: 12px; padding-inline: 14px; }
.pop__opt > span { font-size: .84rem; }
.pop__opt .arr { width: 22px; }

/* ---------- floating booking button (right side) ---------- */
.float-book { position: fixed; right: 16px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 15px; border-radius: 999px; background: var(--lime); color: #fff; font-weight: 600; font-size: .98rem; box-shadow: 0 10px 26px rgba(15, 35, 70, .32); transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .25s, background-color .25s; animation: rise .6s cubic-bezier(.2, .7, .2, 1) .6s both; }
.float-book:hover { background: #7db014; transform: translateY(-3px); }
.pop-open .float-book { opacity: 0; pointer-events: none; transform: translateY(12px); }
.editing .float-book { bottom: 84px; animation: none; }
.ed-fab { right: auto; left: 16px; }
@media (min-width: 900px) { .float-book { right: 28px; bottom: 28px; } .ed-fab { left: 28px; bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .float-book { animation: none; transition: none; } }

/* ---------- conservation: photo slider, numbered points, calmer text ---------- */
.cons { padding-block: 44px 46px; }
.cons__in { gap: 26px; }
.cons__media { aspect-ratio: auto; overflow: visible; border-radius: 0; min-width: 0; }
.cons__slide { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.cons .solo__bar { color: #fff; }
.cons .solo__nav { color: #fff; }
.cons .solo__nav:hover:not(:disabled) { color: var(--lime); }
.cons .solo__count { color: rgba(255, 255, 255, .7); }
.solo.is-single .solo__bar { display: none; }
.cons__body { padding-inline: 4px; }
.cons__body h2 { color: var(--lime); font-size: clamp(1.5rem, 4vw, 2.5rem); }
.cons__body p { font-size: .92rem; line-height: 1.6; margin-top: 16px; }
.cons__list { margin: 22px 0 28px; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: point; }
.cons__list li { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: .88rem; line-height: 1.45; counter-increment: point; }
.cons__list li i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: var(--lime); color: var(--navy-deep); font-style: normal; font-size: .72rem; font-weight: 700; }
.cons__list li i::before { content: counter(point); }
.cons__list--bullet li i { width: 9px; height: 9px; margin-top: 6px; }
.cons__list--bullet li i::before { content: ''; }
.editing .cons .carousel__track { padding-top: 22px; }
@media (min-width: 900px) {
  .cons { padding-block: 72px; }
  .cons__body { padding-inline: 0 12px; }
  .cons__body p { font-size: 1rem; }
  .cons__list li { font-size: .95rem; }
}

/* ---------- smaller testimony cards ---------- */
.carousel--quotes { --card-w: min(60vw, 236px); }
.quote { padding: 14px 14px 16px; border-radius: 14px; }
.quote__top { margin-bottom: 10px; }
.quote__avatar { width: 42px; height: 42px; }
.stars { font-size: .78rem; }
.quote h3 { font-size: .84rem; margin-bottom: 5px; }
.quote p { font-size: .72rem; line-height: 1.55; }
.quote__src { margin-top: 10px; font-size: .68rem; }
.quote__top .ed-img { left: 21px; top: 6px; }
@media (min-width: 900px) { .carousel--quotes { --card-w: 250px; } }

/* ---------- social ---------- */
.social .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.social .wrap .sec-title { flex: 1 1 100%; margin-bottom: 4px; }
.social__follow { font-size: .85rem; padding: .45em 1em; }
.post { flex-basis: min(38vw, 220px); }

/* ---------- footer: clamp the description, link partners ---------- */
.foot__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.foot__about .foot__text { max-width: 38ch; }
.editing .foot__text { display: block; overflow: visible; }
.foot__partners a { display: contents; }
.foot__partners li { transition: background-color .25s; }
.foot__partners li:hover { background: #fff; }

/* ---------- about page ---------- */
.ab-hero { position: relative; height: clamp(260px, 56vw, 460px); background: var(--navy-deep); overflow: hidden; isolation: isolate; }
.ab-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ab-hero .hero__shade { z-index: 0; }
.ab-hero__in { position: absolute; inset: auto 0 26px; z-index: 1; color: #fff; }
.ab-hero__in h1 { font-size: clamp(2rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.02; max-width: 14em; text-shadow: 0 2px 18px rgba(6, 24, 52, .45); animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.ab__in { display: grid; gap: 34px; }
.ab__lead { font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; max-width: 24ch; }
.ab__body { color: #3d434a; margin-top: 18px; line-height: 1.7; max-width: 62ch; }
.ab .hero__cta { margin-top: 26px; }
.ab__photo { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--mist); }
.ab__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab__side h2 { font-size: 1.15rem; font-weight: 700; margin: 22px 0 12px; }
.ab__offers { display: grid; gap: 10px; }
.ab__offers li { position: relative; display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ab__offers li.ed-add, .ab__offers li:last-child { border-bottom: 0; }
.ab__offers i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.editing .ab-hero__in h1 { animation: none; }
@media (min-width: 900px) { .ab__in { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; } .ab-hero__in { bottom: 44px; } }
.social .wrap { padding-inline: calc(var(--gutter) + 26px); }
.social .wrap .sec-title { padding-inline: 0; }
@media (min-width: 900px) { .social .wrap { padding-inline: var(--gutter); } }
.foot__in { padding-bottom: 88px; }

/* ---------- headings: green-to-blue gradient (site colours) ---------- */
.sec-head h2, .sec-title, .cat__top h1, .cat__head h2, .info__name, .ab__lead, .ab__side h2, .pop__card h2 {
  background: linear-gradient(180deg, #86bd16 8%, #1c6b6b 52%, #1f3d6d 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--navy);
}
.sec-head h2, .sec-title, .cat__top h1, .cat__head h2 { padding-block: .06em; }
.chips { gap: 8px 10px; }

/* ---------- card text: keep a safe margin from the card edges ---------- */
.site-card__body { padding-inline: clamp(16px, 6.500%, 28px); gap: 14px; }
.site-card__name { flex: 1 1 auto; min-width: 0; }
.site-card__name h3 { overflow-wrap: anywhere; }
.site-card__price { flex: 0 1 auto; max-width: 46%; min-width: 0; }
.site-card__price strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.12; }
.site-card--course .site-card__price, .site-card--pkg .site-card__price { text-align: right; }
.site-card--course .site-card__price strong, .site-card--pkg .site-card__price strong { font-size: clamp(.9rem, 3.800vw, 1.15rem); }
.site-card--course .site-card__name h3 { font-size: clamp(1rem, 4.400vw, 1.4rem); }
.pkg-card__price { right: 16px; }
.pkg-card__name { max-width: calc(100% - 170px); }
.pkg-card__times { right: 14px; }
.pkg-card__cat { left: 14px; }

/* ---------- home hero headline: 65% green / 35% blue gradient ---------- */
.hero__copy h1 {
  background: linear-gradient(180deg, #b4ea2a 0%, #a2dc22 48%, #45bdfb 82%, #45bdfb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #a2dc22;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(6, 24, 52, .55));
  padding-bottom: .08em;
}

/* ---------- floating stack: booking button with a directions button under it ---------- */
.float-stack { position: fixed; right: 16px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1); animation: rise .6s cubic-bezier(.2, .7, .2, 1) .6s both; }
.float-stack .float-book { position: static; animation: none; }
.float-map { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 10px 26px rgba(15, 35, 70, .32); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .25s; }
.float-map:hover { background: var(--teal); transform: translateY(-3px); }
.pop-open .float-stack { opacity: 0; pointer-events: none; transform: translateY(12px); }
.pop-open .float-stack .float-book { transform: none; }
.editing .float-stack { bottom: 84px; animation: none; }
.foot__in { padding-bottom: 140px; }
@media (min-width: 900px) { .float-stack { right: 28px; bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .float-stack { animation: none; transition: none; } }

/* ---------- directions button with its label; social title in plain blue ---------- */
.float-map { display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; padding: 10px 16px 10px 12px; border-radius: 999px; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.float-map svg { width: 20px; height: 20px; flex: none; }
.social .sec-title { background: none; -webkit-text-fill-color: currentColor; color: var(--navy); }
.foot__in { padding-bottom: 176px; }

/* ---------- all section headings in plain site blue (replaces the green-to-blue gradient) ---------- */
.sec-head h2, .sec-title, .cat__top h1, .cat__head h2, .info__name, .ab__lead, .ab__side h2, .pop__card h2 {
  background: none; -webkit-text-fill-color: currentColor; color: var(--navy);
}

/* ---------- language selector (header) ---------- */
.lang { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.lang button { min-width: 34px; padding: 6px 8px; border-radius: 999px; color: #fff; font-size: 12.48px; font-weight: 600; line-height: 1; transition: background-color .2s, color .2s; }
.lang button:hover { background: rgba(255, 255, 255, .18); }
.lang button[aria-pressed="true"] { background: var(--lime); color: #fff; }
@media (min-width: 900px) { .lang button { min-width: 40px; padding: 8px 10px; font-size: 13.6px; } }

/* ---------- package filters (packages page) ---------- */
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.flt { display: grid; gap: 3px; min-width: 0; }
.flt > span { font-size: .72rem; color: var(--muted); font-weight: 500; }
.flt select { width: 100%; min-width: 0; font: inherit; font-size: .84rem; color: var(--ink); padding: 9px 26px 9px 10px; border: 1px solid #d3d6da; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2372777d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center / 10px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.flt select:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.flt-empty { flex: 0 0 100% !important; padding: 40px 12px; text-align: center; background: var(--mist); border-radius: 18px; }
@media (min-width: 900px) { .cat__col .filters { grid-template-columns: 1fr 1fr; } .cat__col .filters .flt:last-child { grid-column: 1 / -1; } }

/* ---------- conservation program page ---------- */
.prog__lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: #3d434a; max-width: 52ch; line-height: 1.5; }
.prog__list { display: grid; gap: 18px; margin-top: 26px; }
.prog__card { position: relative; display: grid; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.prog__media { position: relative; aspect-ratio: 16 / 9; background: var(--mist); }
.prog__media img { width: 100%; height: 100%; object-fit: cover; }
.prog__body { padding: 20px 18px 10px; }
.prog__body h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.prog__body > p { color: var(--muted); margin-top: 6px; font-size: .95rem; max-width: 52ch; }
.prog__opts { margin-top: 12px; }
.prog__opts li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.prog__opts li.ed-add { display: block; border-top: 0; padding: 4px 0 10px; }
.prog__opt { display: grid; min-width: 0; }
.prog__opt strong { font-weight: 600; }
.prog__note { color: var(--muted); font-size: .82rem; }
.prog__price { font-size: .88rem; color: var(--teal); font-weight: 600; text-align: right; }
.prog__book { font-size: .9rem; padding: .42em 1.1em; }
.editing .prog__card { overflow: visible; }
@media (max-width: 420px) { .prog__opts li { grid-template-columns: minmax(0, 1fr) auto; } .prog__price { grid-column: 1; grid-row: 2; text-align: left; margin-top: -8px; } .prog__book { grid-row: 1 / span 2; grid-column: 2; } }
@media (min-width: 900px) {
  .prog__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .prog__media { aspect-ratio: auto; min-height: 280px; }
  .prog__body { padding: 28px 30px 14px; }
}

/* ---------- share buttons and share menu ---------- */
.share { flex: none; align-self: center; }
.sec-head .share, .cat__top .share { margin-top: 14px; }
.share--dark { background: rgba(255, 255, 255, .16); color: #fff; }
.share--dark:hover { background: rgba(255, 255, 255, .28); }
.cons__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pd__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pd__top .back { margin-bottom: 0; }
.pop__menu--grid { grid-template-columns: 1fr 1fr; }
.pop__menu--grid .pop__opt { padding: 12px; gap: 10px; font: inherit; text-align: left; cursor: pointer; }
.pop__menu--grid .pop__opt strong { font-size: .92rem; }
.pop--share .pop__for { margin-top: 10px; }
.share, .info__rating { font-size: .78rem; }

/* ---------- conservation page: program cards with photo slider ---------- */
.prog { padding-bottom: 30px; }
.prog__list { margin-top: 0; }
.prog__media { aspect-ratio: auto; background: none; min-width: 0; min-height: 0; }
.prog__media .carousel__track { border-radius: 0; height: 100%; }
.prog__slide { position: relative; aspect-ratio: 16 / 9; background: var(--mist); }
.prog__slide img { width: 100%; height: 100%; object-fit: cover; }
.prog__media .solo__bar { padding: 0 14px; margin-top: 8px; }
.prog__media .solo__nav svg { width: 28px; height: 28px; }
.prog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prog__body h3 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
@media (min-width: 900px) {
  .prog__media { display: flex; flex-direction: column; padding-bottom: 12px; }
  .prog__slide { aspect-ratio: 4 / 3; }
}

/* ---------- stories: cards that read like a blog ---------- */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.story-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.story-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--pill); overflow: hidden; }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.story-card:hover .story-card__media img { transform: scale(1.05); }
.story-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; flex: 1; }
.story-card__date { font-size: .78rem; color: var(--teal); font-weight: 600; }
.story-card h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--navy); }
.story-card h3 a:hover { color: var(--teal); }
.story-card__body > p { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.story-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.more--dark { color: var(--navy); font-size: .85rem; font-weight: 600; margin-top: 0; }
.more--dark:hover { color: var(--teal); }
.editing .story-card { overflow: visible; }

.article { padding-block: 24px 40px; max-width: 780px; }
.article__head { display: grid; gap: 8px; justify-items: start; margin-bottom: 20px; }
.article__head h1 { font-size: clamp(1.8rem, 5.600vw, 3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; color: var(--navy); }
.article__lead { font-size: 1.05rem; color: var(--muted); max-width: 60ch; }
.article__cover { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--mist); }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__body { margin-top: 24px; font-size: 1.02rem; line-height: 1.75; color: #2c3238; max-width: 66ch; }
.article .thumbs { margin-top: 24px; }
.prog__media { position: relative; padding-bottom: 0 !important; }
.prog__media .carousel__track { height: auto; }
.prog__media .solo__bar { position: absolute; inset: auto 10px 10px; margin: 0; padding: 0; pointer-events: none; }
.prog__media .solo__nav { pointer-events: auto; color: #fff; background: rgba(15, 35, 70, .45); border-radius: 50%; }
.prog__media .solo__nav:hover:not(:disabled) { color: #fff; background: var(--teal); }
.prog__media .solo__count { color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(6, 24, 52, .7); }
@media (min-width: 900px) { .prog__media .carousel__track, .prog__slide { height: 100%; } .prog__slide { aspect-ratio: auto; min-height: 280px; } }
.editing .prog__media .carousel__track { padding-top: 22px; }

/* ---------- inner-page hero in the home format (no counters) ---------- */
.hero--page { height: clamp(440px, 112vw, 640px); }
.hero--page .hero__copy { bottom: 40px; }
.hero--page .hero__shade { background: linear-gradient(rgba(10, 30, 60, .1) 15%, rgba(10, 30, 60, .62) 68%, rgba(10, 30, 60, .5)); }
@media (min-width: 900px) { .hero--page { height: min(72vh, 640px); } .hero--page .hero__copy { bottom: 64px; } }
.pop__for { white-space: pre-line; }
.social__row { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
.social__row .social__links { flex: none; flex-wrap: nowrap; }
.social__follow { min-width: 0; font-size: .82rem; padding: .5em .95em; }
.social__follow > span { overflow: hidden; text-overflow: ellipsis; }
.editing .social__row { flex-wrap: wrap; }
@media (max-width: 520px) { .social__follow .arr { display: none; } .social__follow { font-size: .8rem; padding-inline: .9em; } }

/* ---------- footer end: centre name first, then system and copyright lines ---------- */
.foot__bottom { border-top: 0; padding-top: 0; margin-top: 28px; }
.foot__meta { margin: 16px auto 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .35); max-width: 520px; }
.foot__meta a { text-decoration: underline; text-underline-offset: 3px; }
.foot__meta a:hover { color: var(--yellow); }

/* ---------- tighter gap between the review buttons and the social media title ---------- */
.sec-wrap #testimony { padding-bottom: 8px; }
.sec-wrap #social { padding-top: 14px; }
@media (min-width: 900px) { .sec-wrap #testimony { padding-bottom: 12px; } .sec-wrap #social { padding-top: 22px; } }

/* ================= responsive pass: phone, tablet, laptop, wide screens ================= */
/* Tablet and up: cards line up with the page margin instead of floating in the middle. */
@media (min-width: 600px) {
  :root { --gutter: 28px; --card-w: calc((100vw - 2 * var(--gutter) - 14px) / 2); }
  .carousel__track {
    padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter)));
    scroll-padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter)));
  }
  .carousel__track > * { scroll-snap-align: start; }
  .carousel.no-scroll .carousel__track { justify-content: center; }
  .carousel--quotes { --card-w: 260px; }
  .carousel__nav { display: block; position: absolute; top: calc(50% - 34px); z-index: 3; color: var(--navy); background: #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(15, 35, 70, .2); padding: 6px; }
  .carousel__nav--prev { left: 8px; }
  .carousel__nav--next { right: 8px; }
  .carousel.no-scroll .carousel__nav { display: none; }
  .solo .carousel__track { padding-inline: 0; scroll-padding-inline: 0; }
  .sec-title, .wrap > .sec-title { padding-inline: var(--gutter); }
  .wrap > .sec-title { padding-inline: 0; }
  .social .wrap, .reviews { padding-inline: var(--gutter); }
  .social__posts { padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter))); }
  .post { flex-basis: 220px; }
  .foot__in { padding-inline: var(--gutter); }
  .pkg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cat__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .sec-head p { font-size: .95rem; }
  .hero__copy h1 { max-width: 14em; }
}
@media (min-width: 720px) {
  .cons__in { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
  .contact__in, .ab__in { grid-template-columns: 1.1fr 1fr; gap: 36px; }
  .prog__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .prog__slide { aspect-ratio: auto; min-height: 260px; height: 100%; }
  .prog__media .carousel__track { height: 100%; }
}
/* Laptop and up: three cards per row inside the 1160px page width. */
@media (min-width: 900px) {
  :root { --gutter: 40px; --card-w: calc((min(100vw, 1160px) - 2 * var(--gutter) - 28px) / 3); }
  .sec { padding-block: 48px 38px; }
  .sec--tight { padding-block: 34px 26px; }
  .sec-head { margin-bottom: 26px; }
  .sec-head p { font-size: 1.02rem; }
  .carousel--quotes { --card-w: 280px; }
  .carousel__nav--prev { left: 12px; }
  .carousel__nav--next { right: 12px; }
  .cat__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cons__in { gap: 56px; }
  .post { flex-basis: 240px; }
}
@media (min-width: 1180px) {
  .pkg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Small phones: keep text and buttons inside the screen. */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .brand__text { font-size: 13.6px; }
  .lang button { min-width: 30px; padding: 6px; }
  .hero__copy h1 { font-size: 1.85rem; }
  .btn--lime, .btn--ghost { font-size: .95rem; }
  .float-map { font-size: .8rem; padding-inline: 10px 13px; }
  .float-book { font-size: .9rem; padding: 10px 15px 10px 13px; }
}

/* Header menu: inline links only when there is room for all of them; otherwise the wave button. */
@media (min-width: 900px) and (max-width: 1179px) {
  .menu-btn { display: grid; }
  .brand { margin-right: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-deep); padding: 8px 40px 14px; margin: 0; }
  .nav.is-open { display: block; }
  .nav ul { display: block; }
  .nav a { display: block; padding: 11px 6px; font-size: 16.8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
}
@media (min-width: 1180px) {
  .nav ul { gap: 2px; }
  .nav a { white-space: nowrap; padding: 8px 11px; font-size: 14.72px; }
}
/* Packages page on wide screens: the three cards start on one line; the filters sit under the third card. */
@media (min-width: 900px) {
  .cat__col { display: flex; flex-direction: column; }
  .cat__col .cat__head { min-height: 62px; }
  .cat__col .filters { order: 3; margin: 14px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat__col .filters .flt:last-child { grid-column: auto; }
}
@media (min-width: 600px) { .cat__col { display: flex; flex-direction: column; } .cat__col .cat__head { min-height: 88px; } }
@media (max-width: 420px) { .pd__grid { grid-template-columns: 1fr; } .pd__mapimg { aspect-ratio: 16 / 9; } }

/* ---------- booking button: green-to-blue gradient ---------- */
.btn--pay { background: linear-gradient(90deg, #8cc21a 0%, #1c8a7a 55%, #1f3d6d 100%); }
.btn--pay:hover { filter: brightness(1.08); }

/* ---------- member box on the package page ---------- */
.pd__memberinfo { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: .72rem; color: #fff; text-align: right; }
a.pd__memberinfo { color: var(--yellow); font-weight: 600; }
a.pd__memberinfo:hover { text-decoration: underline; }

/* ---------- booking pop-up: customer name ---------- */
.pop__name { display: grid; gap: 4px; margin-top: 16px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.pop__name input { font: inherit; font-size: 1rem; color: var(--ink); border: 1px solid #cfd3d8; border-radius: 12px; padding: 11px 13px; }
.pop__name input:focus { outline: 2px solid var(--lime); border-color: transparent; }
.pop__menu { margin-top: 12px; }

/* ---------- member page ---------- */
.mem__in { display: grid; gap: 28px; }
.mem__intro h1 { font-size: clamp(2rem, 6.400vw, 3.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.03; color: var(--navy); }
.mem__intro > p { color: var(--muted); margin-top: 12px; max-width: 46ch; font-size: 1.05rem; }
.mem__benefits { display: grid; gap: 10px; margin-top: 18px; }
.mem__benefits li { position: relative; display: flex; align-items: center; gap: 12px; }
.mem__benefits i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.mem__photo { position: relative; margin-top: 22px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--mist); }
.mem__photo img { width: 100%; height: 100%; object-fit: cover; }
.mem__panel { background: var(--mist); border-radius: 20px; padding: 22px 18px; align-self: start; }
.mem__form { display: grid; gap: 12px; }
.mem__form h2, .mem__card h2 { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.mem__form label { display: grid; gap: 4px; font-size: .82rem; color: var(--muted); font-weight: 500; }
.mem__form input, .mem__form select { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #cfd3d8; border-radius: 12px; padding: 11px 13px; width: 100%; }
.mem__form input:focus, .mem__form select:focus { outline: 2px solid var(--lime); border-color: transparent; }
.mem__form .btn { justify-content: center; margin-top: 6px; font-size: 1.02rem; }
.mem__err { color: #b3261e; font-size: .88rem; }
.mem__err[hidden] { display: none; }
.mem__note { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.mem__card { position: relative; border-radius: 18px; padding: 22px; color: #fff; background: linear-gradient(135deg, #8cc21a 0%, #1c8a7a 48%, #1f3d6d 100%); box-shadow: 0 14px 34px rgba(15, 35, 70, .22); }
.mem__card h2 { color: #fff; font-size: .9rem; font-weight: 500; opacity: .9; }
.mem__name { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 8px 0 18px; overflow-wrap: anywhere; }
.mem__card dl { display: flex; gap: 28px; margin: 0; }
.mem__card dt { font-size: .72rem; opacity: .85; }
.mem__card dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mem__badge { position: absolute; top: 18px; right: 18px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; }
.mem__actions { display: grid; gap: 10px; margin: 16px 0 12px; }
.mem__actions .btn { justify-content: center; }
.mem__remove { margin-top: 12px; font-size: .8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.mem__remove:hover { color: #b3261e; }
@media (min-width: 800px) { .mem__in { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .mem__panel { padding: 30px; } }
/* Nine menu links need a little more room before they sit in one row. */
@media (min-width: 1180px) and (max-width: 1279px) {
  .menu-btn { display: grid; }
  .brand { margin-right: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-deep); padding: 8px 40px 14px; margin: 0; }
  .nav.is-open { display: block; }
  .nav ul { display: block; }
  .nav a { display: block; padding: 11px 6px; font-size: 16.8px; border-bottom: 1px solid rgba(255, 255, 255, .12); white-space: normal; }
}
@media (min-width: 1280px) { .nav a { padding: 8px 9px; font-size: 14.4px; } }
span.pd__memberinfo { display: block; }
@media (max-width: 799px) { .mem__photo { display: none; } }

/* ---------- member page intro: same heading and text format as the other sections ---------- */
.mem { padding-block: 30px 26px; }
.mem__in { gap: 20px; }
.mem__intro { text-align: center; }
.mem__intro h1 { font-size: clamp(1.15rem, 2.400vw, 1.9rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.mem__intro > p { font-size: clamp(.82rem, 1.400vw, 1.02rem); font-weight: 300; line-height: 1.4; margin: 10px auto 0; max-width: 52ch; }
.mem__benefits { display: inline-grid; gap: 7px; margin-top: 14px; text-align: left; font-size: .86rem; }
.mem__benefits i { width: 8px; height: 8px; }
.mem__panel { padding: 20px 18px; }
.mem__form h2, .mem__card h2 { font-size: 1.05rem; }
@media (min-width: 800px) {
  .mem { padding-block: 48px 38px; }
  .mem__in { gap: 48px; }
  .mem__intro { text-align: left; }
  .mem__intro > p { margin-inline: 0; }
  .mem__benefits { font-size: .95rem; }
  .mem__panel { padding: 28px; }
}

/* ---------- readable body text on the dive site and package pages ---------- */
.info__desc { font-size: clamp(.9rem, 1.400vw, 1.02rem); font-weight: 400; line-height: 1.6; text-align: left; margin-top: 14px; }
.crumb { font-size: .78rem; margin-bottom: 6px; }
.info__rating { font-size: .84rem; }
.pd__map p, .pd__desc p { font-size: .88rem; font-weight: 400; line-height: 1.55; }
.pd__inc li { font-size: .84rem; font-weight: 400; padding-block: 7px; }
.pd__map h2, .pd__desc h2, .pd__inc h2 { font-size: .98rem; }
.pd__member p { font-size: .76rem; }
@media (min-width: 560px) {
  .pd__map p, .pd__desc p, .pd__inc li { font-size: .95rem; }
  .pd__map h2, .pd__desc h2, .pd__inc h2 { font-size: 1.08rem; }
  .pd__member p { font-size: .88rem; }
}
.ab__body { margin-top: 0; }
.hero--page .hero__copy p:empty { display: none; }
/* Home hero has no buttons: the headline and text sit just above the counters. */
.hero--home:not(.hero--page) .hero__copy { bottom: 104px; }
@media (min-width: 900px) { .hero--home:not(.hero--page) .hero__copy { bottom: 96px; } }

/* ---------- phones: everything starts at the same left margin ---------- */
@media (max-width: 599px) {
  :root { --card-w: min(80vw, 340px); }
  .carousel__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .carousel__track > * { scroll-snap-align: start; }
  .carousel--quotes { --card-w: min(70vw, 260px); }
  .solo .carousel__track { padding-inline: 0; scroll-padding-inline: 0; }
  .sec-title, .wrap > .sec-title { padding-inline: var(--gutter); }
  .wrap > .sec-title { padding-inline: 0; }
  .social .wrap, .reviews { padding-inline: var(--gutter); }
  .social__posts { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .foot__in { padding-inline: var(--gutter); }
}
.mem__benefits { max-width: 100%; }
.mem__benefits li { min-width: 0; overflow-wrap: anywhere; }
.mem__intro, .mem__panel { min-width: 0; }
.btn--wa-sm { font-size: .9rem; font-weight: 500; padding: .55em 1.1em; }

/* ---------- header: 80% see-through navy with blur ---------- */
.top { background: transparent; }
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(31, 61, 109, .8); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }

/* ---------- menu: a panel that slides in from the left ---------- */
.nav-backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(9, 22, 46, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.menu-btn { position: relative; z-index: 3; }
@media (max-width: 1279px) {
  .nav, .nav.is-open { display: block; }
  .nav { position: fixed; inset: 0 auto 0 0; top: 0; z-index: 2; width: min(82vw, 320px); margin: 0; padding: 78px 22px 28px; overflow-y: auto;
    background: var(--navy-deep); box-shadow: 12px 0 40px rgba(9, 22, 46, .35);
    transform: translateX(-102%); visibility: hidden; transition: transform .38s cubic-bezier(.2, .7, .2, 1), visibility 0s .38s; }
  .nav.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .nav ul { display: block; }
  .nav a { display: block; padding: 13px 4px; font-size: 17.28px; white-space: normal; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .menu-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
  .menu-open .float-stack, .menu-open .ed-fab { opacity: 0; pointer-events: none; }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 1280px) { .nav-backdrop { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav.is-open, .nav-backdrop { transition: none; } }
.editing .nav { visibility: visible; }

/* ---------- reviews waiting for confirmation (only visible while editing) ---------- */
.quote--off { opacity: .6; border-style: dashed; }
.quote__flag { display: block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #e3f4ea; color: #1a7f45; }
.quote--off .quote__flag { background: #fde7e5; color: #b3261e; }

/* ---------- header: black at 50% ---------- */
.top::before { background: rgba(0, 0, 0, .5); }

/* ---------- header: solid blue at the top, black at 50% after scrolling ---------- */
.top::before { background: var(--navy); transition: background-color .4s ease; }
.scrolled .top::before { background: rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { .top::before { transition: none; } }

/* ---------- member box on the package page: text flows with the width ---------- */
.pd__member { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; }
.pd__member p { flex: 1 1 150px; min-width: 0; padding: 0; text-align: left; font-size: clamp(.88rem, 2.200vw, 1.02rem); line-height: 1.3; font-weight: 500; }
.pd__member button { flex: none; width: auto; min-width: 52px; height: 44px; padding-inline: 14px; font-size: .9rem; }
.pd__memberinfo { flex: 1 1 100%; justify-content: flex-start; text-align: left; font-size: .82rem; }
span.pd__memberinfo { display: block; }
@media (min-width: 560px) { .pd__member { padding: 18px 20px; } .pd__member button { height: 48px; min-width: 60px; } }

/* ---------- partner without a logo: show the name ---------- */
.foot__pname { font-size: .78rem; font-weight: 700; letter-spacing: .01em; color: #3d434a; text-align: center; line-height: 1.1; white-space: nowrap; }
.foot__partners li:has(.foot__pname) { width: auto; min-width: 84px; padding-inline: 16px; }
@media (min-width: 560px) { .foot__pname { font-size: .95rem; } .foot__partners li:has(.foot__pname) { min-width: 120px; padding-inline: 22px; } }

/* ---------- menu: logo on top, member entry at the bottom ---------- */
.nav__brand, .nav__member { display: none; }
@media (max-width: 1279px) {
  .nav { display: flex !important; flex-direction: column; padding-top: 22px; }
  .nav__brand { display: flex; align-items: center; gap: 10px; padding: 0 4px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .18); color: #fff; }
  .nav .nav__brand { border-bottom: 1px solid rgba(255, 255, 255, .18); padding: 0 4px 16px; }
  .nav__brand img { height: 44px; width: auto; }
  .nav__brand span { display: grid; line-height: 1.1; font-size: 16px; }
  .nav__brand strong { font-weight: 600; letter-spacing: .01em; }
  .nav__member { display: grid; gap: 10px; margin-top: auto; padding-top: 22px; }
  .nav .nav__mlink { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; font-size: 16px; font-weight: 500; color: #fff; }
  .nav .nav__mlink:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .nav__mname { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
  .nav__mname small { font-size: 12.48px; font-weight: 400; color: var(--yellow); }
  .nav__logout { justify-self: start; color: rgba(255, 255, 255, .8); font-size: 14.4px; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
  .nav__logout:hover { color: #fff; }
}
@media (min-width: 1280px) {
  .nav { display: flex; align-items: center; }
  .nav__member { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
  .nav .nav__mlink { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: 14.08px; white-space: nowrap; }
  .nav__mname small { display: none; }
  /* A long member name is shortened with "…" and Log out stays on one line, so the menu never runs past the edge. */
  .nav .nav__mlink { min-width: 0; }
  .nav__mname { display: block; max-width: clamp(70px, 9vw, 180px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__logout { color: rgba(255, 255, 255, .8); font-size: 13.12px; text-decoration: underline; white-space: nowrap; }
}

/* ---------- member prices shown across the site ---------- */
.is-member s { font-weight: 400; font-size: .72em; opacity: .75; margin-right: 2px; }
.site-card__price strong.is-member s { display: block; }
.prog__price.is-member s { display: block; color: var(--muted); }

/* ---------- member page: log in / new member, and the member price list ---------- */
.mem__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #e6e8eb; margin-bottom: 16px; }
.mem__tabs button { padding: 9px 8px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--muted); }
.mem__tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(15, 35, 70, .14); }
.mem__actions .btn--line { justify-content: center; }
.mem__prices { margin-top: 30px; }
.mem__prices h2 { font-size: clamp(1.15rem, 2.400vw, 1.9rem); font-weight: 700; letter-spacing: -.015em; color: var(--navy); text-align: center; }
.mem__prices > p { color: var(--muted); font-weight: 300; text-align: center; font-size: clamp(.82rem, 1.400vw, 1.02rem); margin-top: 8px; }
.mem__prices h3 { font-size: 1rem; font-weight: 700; color: var(--teal); margin: 22px 0 8px; }
.mem__scroll { overflow-x: auto; }
.mem__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mem__table th { font-size: .74rem; font-weight: 600; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mem__table td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.mem__table .r { text-align: right; white-space: nowrap; }
.mem__table s { color: var(--muted); font-size: .86em; }
.mem__table strong { color: #1a7f45; }
.mem__table a:hover { color: var(--teal); text-decoration: underline; }
@media (max-width: 1279px) { .nav .nav__brand { display: flex; align-items: center; gap: 12px; } .nav .nav__brand img { height: 46px; } }

/* ---------- card bottom bar: "Read More" on the left (green, black text), detail tab on the right ---------- */
.site-card__tabs { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: stretch; gap: 0; }
.site-card__tabs .tab { position: static; min-width: 0; white-space: nowrap; }
.site-card__tabs .tab > span { overflow: hidden; text-overflow: ellipsis; }
.tab--more { background: var(--lime); color: var(--ink); font-weight: 500; flex: none; }
.tab--more:hover { background: #a3d92f; color: var(--ink); }
.site-card__tabs .tab:not(.tab--more) { margin-left: auto; }
.site-card--pkg .site-card__tabs .tab { font-size: .88rem; padding: 6px 14px 7px; }
.editing .site-card__tabs .tab--more { border-bottom-left-radius: 18px; }
.editing .site-card__tabs .tab:not(.tab--more) { border-bottom-right-radius: 18px; }
@media (max-width: 420px) { .site-card__tabs .tab { font-size: .74rem; padding: 6px 10px 7px; gap: 6px; } .site-card__tabs .tab .arr { width: 1.5em; } }

/* card bottom row: the two tabs sit flush against each other, no gap between */
.site-card__tabs .tab, .site-card__tabs .tab--more { flex: 1 1 0; margin-left: 0; justify-content: space-between; border-radius: 0; }
.site-card__tabs .tab:not(.tab--more) { margin-left: 0; }

/* dive-site page: "Diving Site" heading above the package list — no rule, even space above and below */
.sitepk { padding-top: clamp(8px, 1.6vw, 20px); }
.sitepk__title { border-top: 0; padding-top: 0; margin-top: 0; margin-bottom: clamp(20px, 2.6vw, 30px); }
.sitepk__dark { padding-top: clamp(28px, 3.4vw, 44px); }

/* no waiting: sections are visible at once, nothing fades or slides in while scrolling */
.sec-wrap > *, .sec-wrap:not(.is-in) > * { opacity: 1; transform: none; transition: none; }
.hero__copy > *, .chips, .ab-hero__in h1, .float-stack, .float-book { animation: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }

/* breadcrumb: the first step is a real link back to the list of dive sites */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb__back { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; margin-left: -2px; border-radius: 999px; background: #eef2f6; color: var(--navy, #1f3d6d); font-weight: 500; transition: background-color .2s; }
.crumb__back:hover, .crumb__back:focus-visible { background: #dfe7ef; }

/* header logo: one logo only on desktop (the drawer's logo stays inside the drawer), sized to the bar at every width */
@media (min-width: 1280px) { .nav .nav__brand { display: none; } }
.brand { flex: none; gap: clamp(8px, 1vw, 12px); }
.brand__logo { height: clamp(34px, calc(var(--bar-h, 58px) * .62), 44px); width: auto; aspect-ratio: 400 / 428; object-fit: contain; flex: none; }
.brand__text { font-size: clamp(13.6px, 12.48px + .3vw, 16.8px); white-space: nowrap; }
.top__in { --bar-h: 58px; }
@media (min-width: 900px) { .top__in { --bar-h: 68px; } }

/* About page: our team — cards slide sideways in a carousel; the management row uses smaller cards */
.carousel--team { --card-w: min(74vw, 280px); }
.carousel--team-small { --card-w: min(56vw, 200px); }
.carousel--team .carousel__track { align-items: stretch; }
.member-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.member-card__photo { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--teal), var(--navy)); }
.member-card__photo::before { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .9); font-size: 2.4rem; font-weight: 600; letter-spacing: .02em; }
.member-card__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.member-card__photo .img-empty { position: absolute; inset: 0; background: none; }
.member-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.member-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.member-card__role { color: var(--teal); font-weight: 500; font-size: .92rem; margin-top: 3px; }
.member-card__desc { color: #3d434a; font-size: .92rem; line-height: 1.55; margin-top: 10px; }
.member-card__exp { margin-top: auto; padding-top: 14px; }
.member-card__exp dt { color: var(--muted); font-size: .78rem; padding-top: 12px; border-top: 1px solid var(--line); }
.member-card__exp dd { margin: 2px 0 0; font-weight: 600; font-size: .95rem; color: var(--ink); }
.member-card--small { border-radius: 14px; }
.member-card--small .member-card__photo { aspect-ratio: 1; }
.member-card--small .member-card__photo::before { font-size: 1.7rem; }
.member-card--small .member-card__body { padding: 12px 13px 14px; }
.member-card--small h3 { font-size: .98rem; }
.member-card--small .member-card__role { font-size: .8rem; }
.member-card--small .member-card__desc { font-size: .8rem; line-height: 1.5; margin-top: 8px; }
.member-card--small .member-card__exp { padding-top: 10px; }
.member-card--small .member-card__exp dt { font-size: .7rem; padding-top: 9px; }
.member-card--small .member-card__exp dd { font-size: .82rem; }
@media (min-width: 900px) { .carousel--team { --card-w: 300px; } .carousel--team-small { --card-w: 210px; } }

/* partner banner: a section of its own; the wide picture on larger screens, the compact one on phones */
.banner { background: linear-gradient(180deg, #eaf2fa, #f4f8fc); }
.banner .sec-head { margin-bottom: clamp(16px, 2.2vw, 26px); }
.banner__link { display: block; width: 100%; max-width: 980px; margin-inline: auto; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 6px 22px rgba(15, 35, 70, .12); transition: box-shadow .2s, transform .2s; }
.banner__link:hover, .banner__link:focus-visible { box-shadow: 0 10px 28px rgba(15, 35, 70, .2); transform: translateY(-1px); }
.banner__img { display: block; width: 100%; height: auto; object-fit: cover; }
.banner__img--wide { aspect-ratio: 1448 / 181; }
.banner__img--small { aspect-ratio: 346 / 289; display: none; }
@media (max-width: 699px) {
  .banner__link { max-width: 360px; }
  .banner__img--wide { display: none; }
  .banner__img--small { display: block; }
}
.editing .banner__img--small, .editing .banner__img--wide { display: block; }

/* dive-site page: map of the dive site under the photos */
.sitemap { margin: clamp(22px, 3vw, 34px) 0 0; display: grid; gap: 12px; }
.sitemap h2 { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.sitemap p { color: var(--muted); font-size: clamp(.9rem, 1.4vw, 1rem); line-height: 1.55; max-width: 70ch; margin-top: 4px; }
.sitemap p:has(span:empty) { display: none; }
.editing .sitemap p:has(span:empty) { display: block; }
.sitemap__open { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.sitemap__img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #fff; }
div.sitemap__img { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 16px; }

/* promotion banners: picture only, DAN-banner shape, sliding in from the left */
.promo { padding-block: clamp(18px, 2.6vw, 30px) clamp(6px, 1vw, 12px); }
.promo__view { position: relative; max-width: 980px; margin-inline: auto; aspect-ratio: 1448 / 181; border-radius: 12px; overflow: hidden; background: var(--mist); box-shadow: 0 6px 22px rgba(15, 35, 70, .12); }
.promo__slide { position: absolute; inset: 0; display: block; transform: translateX(-100%); visibility: hidden; transition: transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s; }
.promo__slide.is-on { transform: none; visibility: visible; transition: transform .6s cubic-bezier(.2, .7, .2, 1); z-index: 1; }
.promo__slide.is-out { transform: translateX(100%); }
.promo__slide:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.promo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo__img--small { display: none; }
.promo__slide.is-chosen::after { content: ''; position: absolute; inset: 0; border: 3px solid var(--lime); border-radius: 12px; pointer-events: none; }
.promo__tick { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .78rem; font-weight: 600; }
.promo__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; color: var(--navy); }
.promo__nav button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: inherit; }
.promo__nav button:hover { background: var(--mist); }
.promo__dots { display: flex; gap: 5px; }
.promo__dots i { width: 6px; height: 6px; border-radius: 99px; background: #cfd4da; transition: width .2s, background-color .2s; }
.promo__dots i.is-on { width: 16px; background: var(--navy); }
@media (max-width: 699px) {
  .promo__view--tall { aspect-ratio: 346 / 289; max-width: 360px; }
  .promo__view--tall .promo__img--wide { display: none; }
  .promo__view--tall .promo__img--small { display: block; }
}
@media (prefers-reduced-motion: reduce) { .promo__slide, .promo__slide.is-on { transition: none; } }
/* while editing, every banner is listed so each can be changed */
.editing .promo__view { aspect-ratio: auto; display: grid; gap: 12px; overflow: visible; background: none; box-shadow: none; }
.editing .promo__slide { position: relative; transform: none; visibility: visible; aspect-ratio: 1448 / 181; border-radius: 12px; overflow: hidden; background: var(--mist); }
.editing .promo__slide.is-off { opacity: .55; }
.editing .promo__nav { display: none; }
.is-promo { color: inherit; }

/* footer partners: plain logos, one standard height, one solid colour (white, grey or black) */
.foot__partners { --logo-h: 38px; gap: clamp(22px, 4vw, 44px); align-items: center; }
.foot__partners li, .foot__partners li:has(.foot__pname) { width: auto; min-width: 0; height: var(--logo-h); padding: 0; border-radius: 0; background: none; }
.foot__partners li:hover { background: none; }
.foot__partners img { height: var(--logo-h); max-height: none; width: auto; max-width: none; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; transition: opacity .2s; }
.foot__partners--grey img { filter: brightness(0) invert(.72); }
.foot__partners--black img { filter: brightness(0); }
.foot__partners li:hover img { opacity: 1; }
.foot__pname { color: #fff; font-size: 1rem; }
.foot__partners--grey .foot__pname { color: #b8b8b8; }
.foot__partners--black .foot__pname { color: #000; }
@media (min-width: 900px) { .foot__partners { --logo-h: 46px; } }

/* hero chips are links to their section */
.chip__go { position: absolute; inset: 0; border-radius: 999px; }
.chip { transition: background-color .2s, color .2s, transform .2s; }
.chip:has(.chip__go:hover), .chip:has(.chip__go:focus-visible) { background: #fff; color: var(--navy); transform: translateY(-1px); }
.chip__go:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.editing .chip__go { display: none; }

/* arrows: short */
.arr { width: 1.15em; }
.pop__opt .arr { width: 18px; }
@media (max-width: 420px) { .site-card__tabs .tab .arr { width: 1.1em; } }

/* card bottom row: the labels sit in from the card edge, in line with the card's text */
.site-card__tabs .tab, .site-card--pkg .site-card__tabs .tab { padding: 7px 6.5% 8px; gap: 10px; }
@media (max-width: 420px) { .site-card__tabs .tab, .site-card--pkg .site-card__tabs .tab { padding: 7px 14px 8px; gap: 8px; } }

/* member box on a package page: blue, with a rule above the member line */
.pd__member { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); border: 1px solid rgba(255, 255, 255, .14); gap: 12px 12px; }
.pd__member button { border: 1px solid transparent; }
.pd__member .no { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.pd__member .yes { background: var(--lime); color: var(--ink); }
.pd__member button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--navy-deep), 0 0 0 4px #fff; }
.pd__memberinfo, span.pd__memberinfo { flex: 1 1 100%; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); }
a.pd__memberinfo { color: #fff; font-weight: 600; font-size: .9rem; gap: 8px; }
a.pd__memberinfo .arr { color: var(--lime); }
span.pd__memberinfo { display: grid; gap: 2px; font-size: .88rem; line-height: 1.35; }
span.pd__memberinfo strong { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
span.pd__memberinfo strong::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
span.pd__memberinfo > span { color: rgba(255, 255, 255, .78); padding-left: 17px; overflow-wrap: anywhere; }
/* the two labels stay attached; the longer one gets the room it needs so its text is not cut off */
.site-card__tabs .tab--more { flex: 0 0 auto; padding-right: 14px; }
.site-card__tabs .tab:not(.tab--more) { flex: 1 1 0; padding-inline: 14px; }

/* package cards on phones: a reduced price sits under the original price, not beside it */
@media (max-width: 699px) {
  .pkg-card__price .is-member { display: grid; justify-items: end; gap: 1px; line-height: 1.12; }
  .pkg-card__price .is-member s { margin: 0; font-size: .74em; }
  .pkg-card__price:has(.is-member) { bottom: 32px; }
}

/* booking pop-up: name and number of guests side by side, terms underneath */
.pop__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
.pop__row .pop__name { margin-top: 0; }
.pop__stepper { display: grid; grid-template-columns: 40px 52px 40px; border: 1px solid #cfd3d8; border-radius: 12px; overflow: hidden; background: #fff; }
.pop__stepper button { font-size: 1.2rem; font-weight: 500; color: var(--navy); background: var(--mist); }
.pop__stepper button:hover { background: #e7ebf0; }
.pop__name .pop__stepper input { border: 0; border-radius: 0; padding: 11px 0; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; min-width: 0; }
.pop__stepper input::-webkit-outer-spin-button, .pop__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pop__stepper:focus-within { outline: 2px solid var(--lime); border-color: transparent; }
.pop__name .pop__stepper input:focus { outline: none; }
.pop__terms { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #fff7dc; color: #6b4e00; font-size: .84rem; line-height: 1.4; }
@media (max-width: 380px) { .pop__row { grid-template-columns: 1fr; } .pop__stepper { grid-template-columns: 44px 1fr 44px; } }

/* tall package cards ("other packages", packages page): a reduced price shows the old price above the new one, never beside it */
.site-card__price strong.is-member, .site-card--pkg .site-card__price strong.is-member { display: grid; justify-items: end; gap: 2px; line-height: 1.1; white-space: nowrap; }
.site-card__price strong.is-member s { display: block; margin: 0; font-size: .72em; font-weight: 400; }
.site-card:not(.site-card--pkg):not(.site-card--course) .site-card__price strong.is-member { justify-items: start; }
.site-card__price:has(.is-member) { max-width: 52%; }

/* package page banner: a reduced price shows the old price above the new one, and the title keeps clear of it */
.tab--price:has(s) { flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.12; padding-block: 5px 6px; }
.tab--price s { margin: 0; font-size: .7em; font-weight: 400; opacity: .8; }
.pkg-card--banner .pkg-card__name { max-width: calc(100% - 190px); }
@media (min-width: 900px) { .pkg-card--banner .pkg-card__name { max-width: calc(100% - 260px); } }

/* team cards: "Read more" after a long introduction */
.member-card__more { display: inline; padding: 0; color: var(--teal); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.member-card__more:hover { color: var(--navy); }
.member-card__more:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 3px; }

/* booking pop-up: WhatsApp number and the message shown when something is missing */
.pop__phone { margin-top: 12px; }
.pop__err { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #fde4e4; color: #a61f1f; font-size: .86rem; line-height: 1.4; }

/* lighter work for phones: sections far below the screen are laid out only when they come near, and the glass blur is dropped */
.sec-wrap:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.editing .sec-wrap { content-visibility: visible; }
@media (max-width: 899px) {
  .chip, .top::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chip { background: rgba(236, 239, 242, .95); }
}
/* booking pop-up: email and planned date side by side */
.pop__row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 12px; }
.pop__name input[type="date"] { font: inherit; font-size: 1rem; color: var(--ink); border: 1px solid #cfd3d8; border-radius: 12px; padding: 10px 11px; min-width: 0; width: 100%; background: #fff; }
@media (max-width: 420px) { .pop__row--even { grid-template-columns: 1fr; } }

/* booking pop-up: add insurance, yes or no */
.pop__ins { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #eef4fb; border: 1px solid #d5e2f1; }
.pop__ins p { display: grid; gap: 2px; font-size: .84rem; line-height: 1.4; color: #3d434a; }
.pop__ins strong { font-size: .95rem; color: var(--navy); }
.pop__seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c3d0e0; border-radius: 10px; overflow: hidden; background: #fff; }
.pop__seg button { min-width: 52px; padding: 9px 12px; font-size: .92rem; font-weight: 600; color: var(--navy); }
.pop__seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pop__seg button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.pop__ins + .pop__menu { margin-top: 12px; }
@media (max-width: 380px) { .pop__ins { grid-template-columns: 1fr; } }

/* member page: payment status with QR code, and dive history */
.mem__hist { margin-top: 26px; }
.mem__hist h2 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.mem__acttitle { margin-top: 26px; }
.mem__histnote { margin-top: 6px; color: var(--muted); font-size: .92rem; line-height: 1.5; max-width: 62ch; }
.mem__invs { display: grid; gap: 14px; margin-top: 14px; }
.mem__inv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mem__invtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mem__invno { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mem__inv h3 { margin-top: 8px; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.mem__inv dl { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; }
.mem__inv dt { font-size: .74rem; color: var(--muted); }
.mem__inv dd { margin: 1px 0 0; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }
.mem__pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.mem__pill--paid { background: #e3f4ea; color: #1a7f45; }
.mem__pill--part { background: #fff1d6; color: #9a5b00; }
.mem__pill--due { background: #fde7e5; color: #b3261e; }
.mem__qr { display: grid; justify-items: center; gap: 4px; }
.mem__qr canvas { width: 124px; height: 124px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.mem__qr span { font-size: .72rem; color: var(--muted); text-align: center; max-width: 124px; }
.mem__acts { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mem__acts table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
.mem__acts th { text-align: left; font-size: .76rem; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mem__acts td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mem__acts tr:last-child td { border-bottom: 0; }
.mem__when { font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: 4px; }
.mem__when--next { color: var(--teal); }
@media (max-width: 520px) { .mem__inv { grid-template-columns: 1fr; } .mem__qr { justify-items: start; grid-template-columns: auto 1fr; align-items: center; gap: 12px; } .mem__qr span { text-align: left; max-width: none; } }

/* booking pop-up layout: name two thirds and guests one third on one row; captions inside the other fields; insurance in two halves */
.pop__row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 380px) { .pop__row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.pop__stepper { grid-template-columns: minmax(30px, 1fr) minmax(28px, 1.1fr) minmax(30px, 1fr); }
.pop__row--even, .pop__row.pop__row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 10px; }
@media (max-width: 420px) { .pop__row--even, .pop__row.pop__row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pop__phone { margin-top: 10px; }
.pop__name input::placeholder { color: #7b8086; opacity: 1; }
.pop__name input[data-pop-date] { font: inherit; font-size: 1rem; color: var(--ink); border: 1px solid #cfd3d8; border-radius: 12px; padding: 11px 13px; min-width: 0; width: 100%; background: #fff; cursor: pointer; }
.pop__ins { grid-template-columns: 1fr; gap: 10px; }
.pop__seg { grid-template-columns: 1fr 1fr; gap: 8px; border: 0; border-radius: 0; overflow: visible; background: none; }
.pop__seg button { display: grid; gap: 2px; align-content: start; text-align: left; padding: 10px 12px; border: 1.5px solid #c3d0e0; border-radius: 12px; background: #fff; color: var(--navy); min-width: 0; }
.pop__seg button strong { font-size: .98rem; color: inherit; }
.pop__seg button span { font-size: .76rem; font-weight: 400; line-height: 1.3; color: #5b6168; }
.pop__seg button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pop__seg button[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }

/* booking pop-up: fields never grow past their column */
.pop__name input { width: 100%; min-width: 0; box-sizing: border-box; }

/* booking pop-up: email and dive date keep a clear gap at every width, and stack when there is no room for two */
.pop__row.pop__row--even { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(8px, 3vw, 14px); row-gap: 10px; align-items: stretch; }
.pop__row.pop__row--even .pop__name { min-width: 0; margin-top: 0; }
.pop__row.pop__row--even input { width: 100%; min-width: 0; box-sizing: border-box; height: 100%; min-height: 46px; }
@media (max-width: 359px) { .pop__row.pop__row--even { grid-template-columns: minmax(0, 1fr); } }

/* booking pop-up never covers the whole screen: on phones it is a sheet that takes at most three quarters of the height
   (the page stays visible in the top quarter) and scrolls inside; on wide screens it is a centred card with room around it */
.pop__card { max-height: 75vh; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pop__card .pop__close { position: sticky; top: 0; float: right; margin: -6px -4px 0 8px; z-index: 2; }
@media (max-width: 599px) {
  .pop__card { padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .pop__card h2 { font-size: 1.25rem; padding-right: 0; }
  .pop__text { font-size: .86rem; line-height: 1.4; margin-top: 4px; }
  .pop__for { margin-top: 10px; padding: 9px 12px; font-size: .9rem; }
  .pop__row { margin-top: 10px; }
  .pop__name input, .pop__name input[data-pop-date] { padding: 9px 12px; }
  .pop__row.pop__row--even input { min-height: 42px; }
  .pop__terms { margin-top: 8px; padding: 7px 11px; font-size: .8rem; }
  .pop__ins { margin-top: 10px; padding: 10px 12px; }
  .pop__seg button { padding: 8px 10px; }
  .pop__menu { gap: 8px; }
  .pop__opt { padding-block: 10px; }
}
@media (min-width: 600px) { .pop__card { max-height: 86vh; max-height: 86dvh; } }
/* the close button stays reachable while the sheet scrolls; a white ring keeps it apart from what passes under it */
.pop__card .pop__close { box-shadow: 0 0 0 5px #fff, 0 2px 10px rgba(9, 22, 46, .18); }

/* pictures carry width and height for layout stability; their real height still follows their width unless a rule sets it */
img:where(:not([class])), img:where([width][height]) { height: auto; }

/* Member page: certificates */
.mem__certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; margin-top: 14px; }
.mem__cert { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mem__cert--course { grid-template-columns: 96px minmax(0, 1fr); }
.mem__certpic { display: block; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #eef3f9; cursor: zoom-in; aspect-ratio: 2000 / 1414; }
.mem__cert--course .mem__certpic { aspect-ratio: 4 / 5; }
.mem__certpic canvas { display: block; width: 100%; height: 100%; }
.mem__certpic--wait { cursor: default; background: repeating-linear-gradient(135deg, #eef3f9 0 10px, #e3ebf5 10px 20px); }
.mem__certkind { display: block; font-size: .78rem; font-weight: 600; color: #1d63ad; }
.mem__certtext h3 { margin: 2px 0 4px; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.mem__certtext p { margin: 0 0 10px; font-size: .86rem; color: #55606e; }
.mem__certbtn { font: inherit; font-size: .86rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 0; background: #1d63ad; color: #fff; cursor: pointer; }
.mem__certbtn:hover { background: #164f8c; }
.mem__certbtn:focus-visible, .mem__certpic:focus-visible { outline: 3px solid #8cc21a; outline-offset: 2px; }
.mem__certwait { display: inline-block; font-size: .82rem; font-weight: 600; color: #8a5a00; background: #fff4d6; padding: 5px 10px; border-radius: 999px; }

/* Formatted text (bold, italic, bullets, numbering, right-aligned) typed in the dashboard */
[data-multi][data-rich] { white-space: normal; }
.rt { display: block; }
.rt--gap { height: .75em; }
.rt--r { text-align: right; }
.rt--li { position: relative; padding-left: 1.35em; }
.rt--num { padding-left: 1.9em; }
.rt__m { position: absolute; left: 0; top: 0; }
.rt--r.rt--li { padding-left: 0; }
.rt--r .rt__m { position: static; margin-right: .5em; }
/* The dive site filter on the home page opens inside the page, so nothing under it is covered */
.select--flow .select__menu { position: static; margin-top: 6px; box-shadow: none; }
/* Member page: one booking at a time, a short dive history, certificates underneath */
.mem > .wrap > .mem__hist { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.mem__histgrid { display: grid; gap: 26px; }
@media (min-width: 960px) { .mem__histgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; } }
.mem__histgrid > div { min-width: 0; }
.mem__pick { display: grid; gap: 4px; margin-top: 14px; font-size: .82rem; color: var(--muted); font-weight: 500; }
.mem__pick select { font: inherit; font-size: .95rem; color: var(--ink); background: #fff; border: 1px solid #cfd3d8; border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; }
.mem__acts--scroll { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }
.mem__acts--scroll thead th { position: sticky; top: 0; background: #fff; box-shadow: 0 1px 0 var(--line); z-index: 1; }
.mem__acts--scroll:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.mem__more { margin-top: 8px; font-size: .82rem; color: var(--muted); }

/* Type grows gently with the screen: phones keep 16px, laptops and large monitors get a little more. Everything set in rem follows. */
html { font-size: clamp(16px, 14.6px + .2vw, 18.5px); }
/* Card rows (dive sites, courses, team…): the cards that run past the page margin fade out on both sides, so left and right look alike. */
@media (min-width: 600px) {
  .carousel:not(.no-scroll) > .carousel__track {
    --edge: max(var(--gutter), calc((100% - 1160px) / 2 + var(--gutter)));
    --fade: max(var(--edge), 72px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--fade)), transparent 100%);
  }
  .solo .carousel > .carousel__track, .prog__media .carousel > .carousel__track, .editing .carousel > .carousel__track { -webkit-mask-image: none; mask-image: none; }
}
/* Desktop: the booking pop-up glides in from the left. Only position and opacity move, and the blur behind it is dropped, so it stays light. */
@keyframes pop-side { from { opacity: 0; transform: translate3d(-72px, 0, 0); } }
@media (min-width: 800px) {
  .pop { backdrop-filter: none; background: rgba(9, 22, 46, .66); animation-duration: .3s; }
  .pop__card { animation: pop-side .45s cubic-bezier(.22, .8, .24, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .pop__card { animation: none; } }
/* Laptops (1280 to 1439 wide): the menu links sit a little closer, so the member name and the languages fit inside the page. */
@media (min-width: 1280px) and (max-width: 1439px) { .nav a { padding-inline: 8px; } .nav__mname { max-width: 80px; } }
/* Previous / next of the card rows: the same open circle arrow as the hero, in a soft grey (white where it lies over a photo). */
@media (min-width: 600px) {
  .carousel__nav { background: none; box-shadow: none; border-radius: 0; padding: 8px; color: #8b929c; opacity: .9; transition: color .2s, opacity .2s; }
  .carousel__nav:hover, .carousel__nav:focus-visible { color: #5d646e; opacity: 1; }
  .carousel__nav svg { display: block; width: 32px; height: 32px; }
  .solo .carousel__nav, .prog__media .carousel__nav { color: #fff; opacity: .85; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
  .solo .carousel__nav:hover, .prog__media .carousel__nav:hover { color: #fff; opacity: 1; }
}
@media (min-width: 1020px) { .carousel__nav svg { width: 36px; height: 36px; } }

/* ---------- menu: "Dive Package" with its sub-menu (Course, Fun Dive, Intro) ---------- */
.nav__chev { margin-left: 6px; flex: none; transition: transform .2s; }
.nav .nav__sub { display: block; }
@media (min-width: 1280px) {
  .nav li.has-sub > a { display: inline-flex; align-items: center; }
  .nav .nav__sub { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 190px; padding: 8px; border-radius: 14px; background: var(--navy-deep); box-shadow: 0 16px 34px rgba(6, 20, 44, .35);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
  .nav li.has-sub:hover > .nav__sub, .nav li.has-sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav li.has-sub:hover > a .nav__chev, .nav li.has-sub:focus-within > a .nav__chev { transform: rotate(180deg); }
  .nav .nav__sub a { display: block; padding: 9px 12px; border-radius: 9px; white-space: nowrap; font-size: 14.4px; }
  .nav .nav__sub a:hover, .nav .nav__sub a:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
}
@media (max-width: 1279px) {
  /* in the side menu the sub-links sit under their parent, indented */
  .nav li.has-sub > a { display: flex; align-items: center; justify-content: space-between; }
  .nav .nav__sub { margin: 0 0 4px 14px; padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .18); }
  .nav .nav__sub a { font-size: 15.2px; padding-block: 10px; border-bottom: 0; color: rgba(255, 255, 255, .86); }
}

/* ---------- photo cards: the name and the price never run into each other ---------- */
.site-card__body { flex-wrap: wrap; row-gap: 4px; align-items: flex-end; }
.site-card__name { flex: 1 1 52%; }
.site-card__name h3 { overflow-wrap: break-word; }
.site-card__price, .site-card__price:has(.is-member) { flex: 0 0 auto; max-width: 100%; margin-left: auto; }
.site-card::after { inset: 32% 0 0; }
.site-card__tabs .tab { white-space: nowrap; }

/* ---------- packages page: Course, Fun Dive, Intro and Dive Site under each other ---------- */
.cat--stack .cat__cols { grid-template-columns: minmax(0, 1fr); gap: 38px; }
.cat__anchor { display: block; height: 0; }
@media (min-width: 700px) {
  /* tablet and desktop: every card of a group is on the page, in rows; no one-at-a-time slider */
  .cat--stack .cat__col { display: block; }
  .cat--stack .cat__col + .cat__col { padding-top: 34px; border-top: 1px solid var(--line); }
  .cat--stack .cat__col .cat__head { min-height: 0; margin-bottom: 16px; }
  .cat--stack .cat__col .filters { order: 0; max-width: 640px; margin: 0 0 18px; }
  .cat--stack .solo .carousel__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; overflow: visible; border-radius: 0; scroll-snap-type: none; padding: 0; }
  .cat--stack .solo .carousel__track > * { min-width: 0; }
  .cat--stack .solo__bar { display: none; }
  .cat--stack .cat__col .site-card { aspect-ratio: 4 / 5; }
  .cat--stack .flt-empty { grid-column: 1 / -1; }
}

/* ---------- dive site page: map left, description and inclusions right, photos centred under both ---------- */
.info__cols { display: grid; gap: 18px; margin-top: 12px; }
.info__cols .sitemap { margin: 0; order: 2; }
.info__text { order: 1; min-width: 0; }
.info__cols .info__desc { margin-top: 0; }
@media (min-width: 900px) {
  .info__cols--map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 52px); align-items: start; margin-top: 20px; }
  .info__cols--map .sitemap { order: 0; }
  .info__cols--map .info__desc { max-width: none; }
}
.info .thumbs { margin-top: 26px; }
.info .thumbs__track { justify-content: safe center; }
/* the minimum number of guests, pointed out next to what is included */
.minpax { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px; border-radius: 12px; background: #fff6d8; border: 1px solid #ecd27a; color: #5a4100; font-size: .92rem; font-weight: 600; line-height: 1.35; }
.minpax svg { flex: none; }
.pd__inc .minpax { margin-top: 14px; }

/* packages page, Dive Site: a drop-down on phones (no arrows, the cards still swipe); all cards in rows from tablet up */
.flt--site { margin-bottom: 12px; }
.flt--site select { font-size: .95rem; padding-block: 11px; }
@media (max-width: 699px) { .cat__col--sites .solo__bar { display: none; } .cat__col--sites .cat__head { margin-bottom: 10px; } }
@media (min-width: 700px) { .flt--site { display: none; } }

/* packages page, tablet and desktop: one row of cards per group; "See all packages" opens the other rows */
.cat__morerow { display: none; }
@media (min-width: 700px) {
  .cat--stack .solo:not(.is-open) .carousel__track { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
  .cat__morerow:not([hidden]) { display: flex; justify-content: center; margin-top: 18px; }
  .cat__more { gap: 8px; }
  .cat__more svg { transition: transform .2s; }
  .cat__more[aria-expanded="true"] svg { transform: rotate(180deg); }
  /* the two buttons under a card both stay readable: "Book Here" is never cut, the longer label gives way first */
  .cat--stack .site-card__tabs .tab, .cat--stack .site-card--pkg .site-card__tabs .tab { padding-inline: 12px; gap: 6px; font-size: .8rem; }
  .cat--stack .site-card__tabs .tab--more { flex: 1 1 auto; min-width: 0; }
  .cat--stack .site-card__tabs .tab:not(.tab--more) { flex: 0 0 auto; }
}

/* ---------- articles ---------- */
.arts__top { margin-bottom: 22px; }
.arts__top h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; color: var(--navy); }
.arts__top p { color: var(--muted); margin-top: 10px; max-width: 56ch; }
.article__body [data-rich] strong { color: var(--navy); }
.article__cta { display: grid; gap: 16px; margin-top: 34px; padding: 22px; border-radius: 18px; background: var(--navy-deep); color: #fff; }
.article__cta h2 { font-size: 1.3rem; font-weight: 700; }
.article__cta p { margin-top: 4px; color: rgba(255, 255, 255, .82); font-size: .95rem; max-width: 46ch; }
.article__ctabtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (min-width: 700px) { .article__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 26px 30px; } }

/* ---------- copy protection for visitors (see app.js) ---------- */
.guard body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.guard input, .guard textarea, .guard select, .guard [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
.guard img, .guard video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
.guard body.editing { -webkit-user-select: auto; user-select: auto; }
@media print { .guard:not(.print-log) body > * { display: none !important; } .guard:not(.print-log) body::after { content: 'Banyumilir Dive Center — bdc.banyumilir.org'; display: block; padding: 40px; font: 600 14pt sans-serif; } }
/* booking pop-up: the hint inside an empty field is smaller and a lighter grey than what the guest types */
.pop input::placeholder, .pop textarea::placeholder { font-size: .82em; font-weight: 400; color: #a9afb7; opacity: 1; }
.pop input::-webkit-input-placeholder { font-size: .82em; font-weight: 400; color: #a9afb7; }

/* ---------- member page: dive log (one log at a time) ---------- */
.mem__acttitle small { font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.dlog__pick { display: grid; gap: 10px; margin-top: 14px; }
.dlog__pick select { font: inherit; font-size: .95rem; color: var(--ink); background: #fff; border: 1px solid #cfd3d8; border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; -webkit-user-select: text; user-select: text; }

/* member card: the button that jumps to the Diver's Log */
.mem__tolog { justify-content: center; }
#divelog { scroll-margin-top: 90px; }

/* ---------- reviews: every card the same height; a long review scrolls inside its own card ---------- */
.quote { display: flex; flex-direction: column; }
.quote__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: calc(3 * 1.55em); line-height: 1.55 !important; margin: 0; outline: none; }
.quote.is-open .quote__text { display: block; overflow-y: auto; -webkit-line-clamp: unset; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.quote__more { align-self: flex-start; margin-top: 4px; padding: 0; font-size: .72rem; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.quote.is-open .quote__more { visibility: hidden; }
.quote__more[hidden] { display: block; visibility: hidden; }
.quote__src { margin-top: auto; padding-top: 10px; }
.editing .quote__text { display: block; height: auto; overflow: visible; -webkit-line-clamp: unset; }
.editing .quote__more { display: none; }
/* ---------- member page: the Diver's Log as a list (date, dive site, package) ---------- */
.dlist { display: grid; gap: 8px; margin-top: 14px; }
.dlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; gap: 4px 14px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.dlist__row time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }
.dlist__row strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dlist__row span { grid-column: 2; font-size: .86rem; color: var(--muted); }
.dlist__row .dlist__none { display: none; }
.dlist__row i { grid-column: 3; grid-row: 1; width: 9px; height: 9px; border-right: 2px solid #8b929c; border-bottom: 2px solid #8b929c; transform: rotate(45deg); transition: transform .2s; justify-self: center; }
.dlist__row.is-open { border-color: var(--navy); background: #f4f7fb; }
.dlist__row.is-open i { transform: rotate(-135deg); }
.dlist__row:hover { border-color: #b9c2cd; }
.dlist__row:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
@media (min-width: 700px) { .dlist__row { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) 18px; } .dlist__row span { grid-column: 3; font-size: .92rem; } .dlist__row i { grid-column: 4; } }

.mem__instr { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: .9rem; }
.mem__instr a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* member page: the dive history drop-down (no dive is open until one is chosen) */
.mem__pick--log { margin-top: 14px; max-width: 560px; }
.mem__pick--log select { appearance: none; -webkit-appearance: none; font-size: 1rem; font-weight: 600; letter-spacing: .005em; color: var(--navy); padding: 14px 46px 14px 16px; border-radius: 14px; border-color: #c5ccd6; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231f3d6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.mem__pick--log select:hover { border-color: var(--navy); }
.mem__pick--log select:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.mem__pick--log option { font-weight: 400; color: var(--ink); }

/* The page's own text, written into the search copies by api/seo.php. app.js replaces it as soon as it runs. */
.prerender { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter); }
.prerender h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 .6em; }
.prerender h2 { font-size: 1.2rem; margin: 1.6em 0 .5em; }
.prerender p, .prerender ul { margin: 0 0 .8em; }
.prerender ul { padding-left: 1.2em; list-style: disc; }
.prerender a { color: var(--navy); text-decoration: underline; }