/*
  Best of Phi Phi — Unified Design System v11
  One visual language for home, venue, journal, article and booking pages.
*/

:root {
  --ds-ink: #14382f;
  --ds-ink-soft: #486359;
  --ds-deep: #053f42;
  --ds-deep-2: #07575a;
  --ds-lagoon: #0b7f82;
  --ds-palm: #174f3f;
  --ds-gold: #f2bd55;
  --ds-gold-strong: #d89a2b;
  --ds-coral: #e87559;
  --ds-sand: #f8f1df;
  --ds-sand-2: #fffaf0;
  --ds-seafoam: #e7f4ef;
  --ds-white: #fffdfa;
  --ds-line: rgba(5, 87, 90, .16);
  --ds-line-gold: rgba(242, 189, 85, .38);
  --ds-shadow-sm: 0 12px 32px -25px rgba(4, 52, 48, .42);
  --ds-shadow-md: 0 24px 60px -40px rgba(4, 52, 48, .55);
  --ds-shadow-lg: 0 38px 90px -55px rgba(3, 48, 46, .7);
  --ds-radius-sm: 14px;
  --ds-radius-md: 22px;
  --ds-radius-lg: 32px;
  --ds-pill: 999px;
  --ds-page: 1180px;
  --ds-reading: 820px;
  --ds-space-1: .5rem;
  --ds-space-2: .75rem;
  --ds-space-3: 1rem;
  --ds-space-4: 1.5rem;
  --ds-space-5: 2rem;
  --ds-space-6: 3rem;
  --ds-space-7: 4.5rem;
  --ds-serif: "Fraunces", Georgia, serif;
  --ds-sans: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }

body.design-system-v11 {
  margin: 0;
  color: var(--ds-ink);
  background:
    radial-gradient(circle at 8% 13%, rgba(11, 127, 130, .08), transparent 28rem),
    radial-gradient(circle at 94% 35%, rgba(242, 189, 85, .12), transparent 26rem),
    linear-gradient(180deg, var(--ds-sand-2), var(--ds-sand));
  font-family: var(--ds-sans);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.design-system-v11::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(115deg, transparent 48%, rgba(255, 255, 255, .24) 49%, transparent 50%),
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .52), transparent 40%);
  background-size: 180px 180px, auto;
}

body.design-system-v11 *,
body.design-system-v11 *::before,
body.design-system-v11 *::after { box-sizing: border-box; }

body.design-system-v11 img { max-width: 100%; }

body.design-system-v11 a { text-underline-offset: .18em; }

body.design-system-v11 :focus-visible {
  outline: 3px solid var(--ds-gold);
  outline-offset: 4px;
}

body.design-system-v11 .wrap {
  width: min(var(--ds-page), calc(100% - 40px));
  margin-inline: auto;
}

body.design-system-v11 .skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 3000;
  transform: translateY(-150%);
  padding: 10px 16px;
  color: var(--ds-deep);
  background: var(--ds-gold);
  border-radius: var(--ds-pill);
  font-weight: 700;
}

body.design-system-v11 .skip-link:focus { transform: none; }

/* Shared masthead */
body.design-system-v11 .site-masthead,
body.design-system-v11 .guide-masthead {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 1200;
  width: min(1220px, calc(100% - 32px));
  min-height: 84px;
  margin: 0;
  padding: 12px 18px 12px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--ds-pill);
  background: rgba(4, 65, 66, .94);
  box-shadow: var(--ds-shadow-lg);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: min-height .25s ease, background .25s ease, box-shadow .25s ease;
}

body.design-system-v11 .site-masthead.is-scrolled,
body.design-system-v11 .guide-masthead.is-scrolled {
  min-height: 72px;
  background: rgba(3, 54, 56, .98);
  box-shadow: 0 18px 52px -30px rgba(1, 34, 36, .85);
}

body.design-system-v11 .brand-lockup,
body.design-system-v11 .guide-brand {
  min-width: 230px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--ds-white);
  text-decoration: none;
}

body.design-system-v11 .brand-mark,
body.design-system-v11 .guide-mark {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(242, 189, 85, .7);
  border-radius: 50%;
}

body.design-system-v11 .brand-mark::before,
body.design-system-v11 .guide-mark::before {
  content: "";
  position: absolute;
  inset: 13px;
  transform: rotate(45deg);
  border: 1px solid var(--ds-gold);
}

body.design-system-v11 .brand-mark::after,
body.design-system-v11 .guide-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ds-gold);
}

body.design-system-v11 .brand-copy,
body.design-system-v11 .guide-brand > span:last-child {
  display: grid;
  line-height: 1.05;
}

body.design-system-v11 .brand-name,
body.design-system-v11 .guide-brand strong {
  color: var(--ds-white);
  font-family: var(--ds-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 500;
  letter-spacing: -.02em;
}

body.design-system-v11 .brand-kicker,
body.design-system-v11 .guide-brand small {
  margin-top: 6px;
  color: rgba(255, 255, 255, .65);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.design-system-v11 .site-nav,
body.design-system-v11 .guide-masthead nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 2.5vw, 34px);
}

body.design-system-v11 .site-nav a,
body.design-system-v11 .guide-masthead nav a {
  position: relative;
  padding: 8px 0;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.design-system-v11 .site-nav a::after,
body.design-system-v11 .guide-masthead nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  background: var(--ds-gold);
  transition: transform .2s ease;
}

body.design-system-v11 .site-nav a:hover,
body.design-system-v11 .guide-masthead nav a:hover { color: var(--ds-white); }
body.design-system-v11 .site-nav a:hover::after,
body.design-system-v11 .guide-masthead nav a:hover::after { transform: scaleX(1); }

body.design-system-v11 .masthead-actions,
body.design-system-v11 .guide-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

body.design-system-v11 .language-toggle,
body.design-system-v11 .masthead-concierge,
body.design-system-v11 .guide-ask {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: var(--ds-pill);
  font-family: var(--ds-sans);
  font-size: .76rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

body.design-system-v11 .language-toggle {
  color: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  cursor: pointer;
}

body.design-system-v11 .language-toggle span {
  min-width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  color: var(--ds-deep);
  background: var(--ds-gold);
  border-radius: 50%;
  font-size: .62rem;
}

body.design-system-v11 .masthead-concierge,
body.design-system-v11 .guide-ask {
  color: var(--ds-deep);
  border: 1px solid var(--ds-gold);
  background: var(--ds-gold);
  box-shadow: 0 12px 28px -18px rgba(242, 189, 85, .8);
}

body.design-system-v11 .masthead-concierge:hover,
body.design-system-v11 .guide-ask:hover { background: #ffd477; }

body.design-system-v11 .menu-toggle {
  position: relative;
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

body.design-system-v11 .menu-toggle::before,
body.design-system-v11 .menu-toggle::after {
  content: "";
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1px;
  background: white;
  transition: transform .2s ease, top .2s ease;
}

body.design-system-v11 .menu-toggle::before { top: 17px; }
body.design-system-v11 .menu-toggle::after { top: 26px; }
body.design-system-v11.nav-open .menu-toggle::before { top: 22px; transform: rotate(45deg); }
body.design-system-v11.nav-open .menu-toggle::after { top: 22px; transform: rotate(-45deg); }

/* Shared language panel */
body.design-system-v11 .langbar {
  position: fixed;
  top: 112px;
  left: 50%;
  z-index: 1150;
  width: min(1040px, calc(100% - 40px));
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  transform: translate(-50%, -18px);
  visibility: hidden;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 250, 240, .97);
  box-shadow: var(--ds-shadow-lg);
  backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

body.design-system-v11.languages-open .langbar {
  transform: translate(-50%, 0);
  visibility: visible;
  opacity: 1;
}

body.design-system-v11 .langbar .globe {
  color: var(--ds-deep);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.design-system-v11 .langbar .language-note {
  margin: 0 7px 0 0;
  color: var(--ds-ink-soft);
  font-size: .72rem;
}

body.design-system-v11 .langbar .lbtn {
  min-width: 38px;
  min-height: 34px;
  padding: 6px 10px;
  color: var(--ds-deep);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-pill);
  background: white;
  text-decoration: none;
  font-size: .69rem;
  font-weight: 650;
}

body.design-system-v11 .langbar .lbtn:hover,
body.design-system-v11 .langbar .lbtn.on {
  color: var(--ds-deep);
  border-color: var(--ds-gold);
  background: var(--ds-gold);
}

/* Shared typography and controls */
body.design-system-v11 h1,
body.design-system-v11 h2,
body.design-system-v11 h3,
body.design-system-v11 h4 {
  color: var(--ds-ink);
  font-family: var(--ds-serif);
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}

body.design-system-v11 h1 { line-height: 1.02; }
body.design-system-v11 h2 { line-height: 1.12; }
body.design-system-v11 p { text-wrap: pretty; }

body.design-system-v11 .eyebrow,
body.design-system-v11 .vcat,
body.design-system-v11 .a-tag,
body.design-system-v11 .kicker,
body.design-system-v11 .jc-tag {
  color: var(--ds-coral);
  font-family: var(--ds-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.design-system-v11 .btn,
body.design-system-v11 .hero-primary,
body.design-system-v11 .hero-secondary,
body.design-system-v11 .plan-actions a,
body.design-system-v11 .booking-box a,
body.design-system-v11 .book .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 21px;
  border-radius: var(--ds-pill);
  font-family: var(--ds-sans);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

body.design-system-v11 .btn:hover,
body.design-system-v11 .hero-primary:hover,
body.design-system-v11 .hero-secondary:hover,
body.design-system-v11 .plan-actions a:hover { transform: translateY(-2px); }

body.design-system-v11 .btn-fill,
body.design-system-v11 .btn-gold,
body.design-system-v11 .hero-primary,
body.design-system-v11 .book .btn {
  color: var(--ds-deep);
  border: 1px solid var(--ds-gold);
  background: var(--ds-gold);
  box-shadow: 0 16px 34px -24px rgba(216, 154, 43, .8);
}

body.design-system-v11 .btn-line,
body.design-system-v11 .hero-secondary {
  color: var(--ds-deep);
  border: 1px solid rgba(5, 87, 90, .34);
  background: rgba(255, 255, 255, .62);
}

body.design-system-v11 .cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

body.design-system-v11 .feat,
body.design-system-v11 .pl,
body.design-system-v11 .price-tag,
body.design-system-v11 .trust {
  border-radius: var(--ds-pill);
}

/* Venue pages */
body.design-system-v11.page-venue .vhero {
  position: relative;
  width: min(1280px, calc(100% - 32px));
  min-height: 620px;
  margin: 24px auto 0;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-deep);
  box-shadow: var(--ds-shadow-lg);
}

body.design-system-v11.page-venue .vhero picture,
body.design-system-v11.page-venue .vhero picture::after {
  position: absolute;
  inset: 0;
}

body.design-system-v11.page-venue .vhero picture::after {
  content: "";
  display: block;
  background: linear-gradient(90deg, rgba(2, 38, 39, .9) 0%, rgba(2, 38, 39, .58) 46%, rgba(2, 38, 39, .05) 82%), linear-gradient(0deg, rgba(2, 38, 39, .58), transparent 55%);
}

body.design-system-v11.page-venue .vhero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.design-system-v11.page-venue .vhero-in {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 72px));
  margin: 0 auto;
  padding: 0 0 66px;
  color: white;
}

body.design-system-v11.page-venue .vhero h1 {
  max-width: 780px;
  margin: 14px 0 24px;
  color: white;
  font-size: clamp(3.2rem, 7vw, 6.8rem);
}

body.design-system-v11.page-venue .vhero .vcat { color: #ffd783; }

body.design-system-v11.page-venue .vmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: rgba(255, 255, 255, .82);
  font-size: .9rem;
}

body.design-system-v11.page-venue .vbody {
  position: relative;
  z-index: 3;
  margin-top: -26px;
  padding: 58px clamp(24px, 5vw, 72px) 72px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 253, 250, .94);
  box-shadow: var(--ds-shadow-md);
}

body.design-system-v11.page-venue .vlead {
  max-width: 820px;
  margin: 0 0 26px;
  color: var(--ds-ink);
  font-family: var(--ds-serif);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.25;
}

body.design-system-v11.page-venue .vtext {
  max-width: 820px;
  color: var(--ds-ink-soft);
  font-size: 1.04rem;
}

body.design-system-v11.page-venue .vtext p { margin: 0 0 1.15em; }

body.design-system-v11.page-venue .vfeat {
  margin: 30px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body.design-system-v11.page-venue .feat {
  padding: 8px 14px;
  color: var(--ds-deep);
  border: 1px solid var(--ds-line);
  background: var(--ds-seafoam);
  font-size: .8rem;
}

body.design-system-v11.page-venue .feat.gold {
  border-color: var(--ds-line-gold);
  background: #fff1d0;
}

body.design-system-v11.page-venue.dark {
  color: var(--ds-ink);
  background: linear-gradient(180deg, #031f21 0 770px, var(--ds-sand) 770px);
}

/* Journal and article pages */
body.design-system-v11.page-journal .journal-hero,
body.design-system-v11.page-article .article,
body.design-system-v11.page-booking .guide-hero {
  margin-top: 132px;
}

body.design-system-v11.page-journal .journal-hero {
  position: relative;
  padding: clamp(56px, 8vw, 100px);
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  color: white;
  background:
    radial-gradient(circle at 85% 15%, rgba(242, 189, 85, .25), transparent 17rem),
    linear-gradient(135deg, var(--ds-deep), #075f61);
  box-shadow: var(--ds-shadow-lg);
}

body.design-system-v11.page-journal .journal-hero h1 {
  max-width: 850px;
  margin: 14px 0 22px;
  color: white;
  font-size: clamp(3rem, 7vw, 6.2rem);
}

body.design-system-v11.page-journal .journal-hero p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 1.08rem;
}

body.design-system-v11.page-journal .jgrid {
  margin: 34px 0 74px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body.design-system-v11 .jcard,
body.design-system-v11 .ccard,
body.design-system-v11 .card,
body.design-system-v11 .why-item,
body.design-system-v11 .booking-box,
body.design-system-v11 .callout,
body.design-system-v11 .qa,
body.design-system-v11 .qa2,
body.design-system-v11 .guide-capture {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 253, 250, .84);
  box-shadow: var(--ds-shadow-sm);
}

body.design-system-v11.page-journal .jcard {
  min-height: 300px;
  display: flex;
  color: inherit;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.design-system-v11.page-journal .jcard:hover {
  transform: translateY(-5px);
  border-color: var(--ds-line-gold);
  box-shadow: var(--ds-shadow-md);
}

body.design-system-v11.page-journal .jc-body { padding: clamp(25px, 4vw, 42px); }
body.design-system-v11.page-journal .jcard h2 { margin: 12px 0 14px; font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
body.design-system-v11.page-journal .jcard p { color: var(--ds-ink-soft); }
body.design-system-v11.page-journal .jc-more { margin-top: 28px; color: var(--ds-lagoon); font-weight: 650; }

body.design-system-v11 .crumb {
  margin-top: 126px;
  padding-top: 0;
  color: var(--ds-ink-soft);
  font-size: .78rem;
}

body.design-system-v11 .crumb + * { margin-top: 24px; }

body.design-system-v11.page-article .article {
  width: min(var(--ds-reading), calc(100% - 40px));
  margin-top: 24px;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 253, 250, .92);
  box-shadow: var(--ds-shadow-md);
}

body.design-system-v11.page-article .crumb + .article { margin-top: 24px; }

body.design-system-v11.page-article .article h1 {
  margin: 13px 0 18px;
  font-size: clamp(2.8rem, 6vw, 5.4rem);
}

body.design-system-v11.page-article .a-meta {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-ink-soft);
  font-size: .78rem;
}

body.design-system-v11.page-article .a-lead {
  margin: 32px 0;
  color: var(--ds-ink);
  font-family: var(--ds-serif);
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.45;
}

body.design-system-v11.page-article .article h2 {
  margin: 2.2em 0 .55em;
  font-size: clamp(1.8rem, 3.4vw, 2.55rem);
}

body.design-system-v11.page-article .article h3 { margin-top: 1.3em; font-size: 1.3rem; }
body.design-system-v11.page-article .article p,
body.design-system-v11.page-article .article li { color: var(--ds-ink-soft); font-size: 1.01rem; }
body.design-system-v11.page-article .article a { color: var(--ds-lagoon); }

body.design-system-v11 .callout,
body.design-system-v11 .guide-capture {
  margin: 30px 0;
  padding: 24px 26px;
  border-left: 4px solid var(--ds-gold);
  background: linear-gradient(135deg, #fff7e6, rgba(231, 244, 239, .76));
}

body.design-system-v11 .a-faq { margin-top: 56px; }
body.design-system-v11 .qa,
body.design-system-v11 .qa2 { margin: 12px 0; padding: 20px 22px; }

/* Booking and planning pages */
body.design-system-v11.page-booking .guide-hero {
  padding: clamp(58px, 8vw, 96px);
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  color: white;
  background:
    radial-gradient(circle at 88% 12%, rgba(242, 189, 85, .3), transparent 18rem),
    linear-gradient(135deg, var(--ds-deep), var(--ds-deep-2));
  box-shadow: var(--ds-shadow-lg);
}

body.design-system-v11.page-booking .guide-hero h1 {
  max-width: 940px;
  margin: 12px 0 22px;
  color: white;
  font-size: clamp(3rem, 7vw, 6.2rem);
}

body.design-system-v11.page-booking .guide-hero h1 em { color: var(--ds-gold); }

body.design-system-v11.page-booking .guide-hero > p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 1.08rem;
}

body.design-system-v11.page-booking section.wrap,
body.design-system-v11.page-booking div.wrap:not(.guide-hero) {
  margin-top: 26px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 253, 250, .9);
  box-shadow: var(--ds-shadow-sm);
}

body.design-system-v11.page-booking section.wrap > h2 {
  margin-top: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

body.design-system-v11.page-booking .booking-box { padding: clamp(26px, 4vw, 42px); text-align: center; }

body.design-system-v11.page-booking table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: white;
}

body.design-system-v11.page-booking th,
body.design-system-v11.page-booking td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ds-line);
  text-align: left;
  vertical-align: top;
}

body.design-system-v11.page-booking th { color: white; background: var(--ds-deep); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
body.design-system-v11.page-booking tr:last-child td { border-bottom: 0; }

body.design-system-v11.page-booking .step {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ds-line);
}

body.design-system-v11.page-booking .step:last-child { border-bottom: 0; }
body.design-system-v11.page-booking .step time { color: var(--ds-coral); font-weight: 700; }
body.design-system-v11.page-booking .step h3 { margin: 0 0 6px; font-size: 1.42rem; }
body.design-system-v11.page-booking .step p { margin: 0; color: var(--ds-ink-soft); }

body.design-system-v11.page-booking .why-grid,
body.design-system-v11.page-booking .cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body.design-system-v11.page-booking .why-item,
body.design-system-v11.page-booking .card { padding: 24px; }

/* Reviews, social links and global conversion surfaces */
body.design-system-v11 .google-review-link,
body.design-system-v11 .venue-social-link {
  width: fit-content;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--ds-deep);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-pill);
  background: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: .78rem;
}

body.design-system-v11 .google-review-link:hover,
body.design-system-v11 .venue-social-link:hover { border-color: var(--ds-gold); background: white; }

body.design-system-v11 .wafloat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  min-width: 58px;
  min-height: 58px;
  display: grid;
  place-items: center;
  color: var(--ds-deep);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: var(--ds-gold);
  box-shadow: 0 20px 42px -24px rgba(3, 61, 61, .75);
  text-decoration: none;
}

/* Shared footer */
body.design-system-v11 .foot,
body.design-system-v11 footer.guide-foot {
  width: min(1220px, calc(100% - 32px));
  margin: 72px auto 16px;
  padding: clamp(42px, 7vw, 76px) 24px;
  color: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(circle at 82% 15%, rgba(242, 189, 85, .13), transparent 18rem),
    var(--ds-deep);
  box-shadow: var(--ds-shadow-lg);
  text-align: center;
}

body.design-system-v11 .foot-logo,
body.design-system-v11 footer.guide-foot em {
  color: white;
  font-family: var(--ds-serif);
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 400;
}

body.design-system-v11 .foot-logo em,
body.design-system-v11 footer.guide-foot em { color: var(--ds-gold); }
body.design-system-v11 .foot-tag { margin-top: 7px; color: var(--ds-gold); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
body.design-system-v11 .foot-rule { width: 72px; height: 1px; margin: 24px auto; background: var(--ds-line-gold); }
body.design-system-v11 .foot a,
body.design-system-v11 footer.guide-foot a { color: var(--ds-gold); }
body.design-system-v11 .foot-fine { margin-top: 28px; color: rgba(255, 255, 255, .44); font-size: .7rem; }

/* RTL uses the same system without reversing brand identity. */
html[dir="rtl"] body.design-system-v11 .site-nav,
html[dir="rtl"] body.design-system-v11 .guide-masthead nav,
html[dir="rtl"] body.design-system-v11 .vmeta,
html[dir="rtl"] body.design-system-v11 .cta-row { direction: rtl; }

html[dir="rtl"] body.design-system-v11 .article,
html[dir="rtl"] body.design-system-v11 .vhero-in,
html[dir="rtl"] body.design-system-v11 .vbody,
html[dir="rtl"] body.design-system-v11 .journal-hero { text-align: right; }

@media (max-width: 980px) {
  body.design-system-v11 .site-masthead,
  body.design-system-v11 .guide-masthead {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 70px;
    padding: 9px 10px 9px 14px;
    grid-template-columns: 1fr auto;
  }

  body.design-system-v11 .brand-lockup,
  body.design-system-v11 .guide-brand { min-width: 0; }
  body.design-system-v11 .brand-mark,
  body.design-system-v11 .guide-mark { width: 42px; height: 42px; flex-basis: 42px; }

  body.design-system-v11 .site-nav,
  body.design-system-v11 .guide-masthead nav {
    position: fixed;
    top: 90px;
    left: 10px;
    right: 10px;
    padding: 14px;
    display: grid;
    gap: 3px;
    transform: translateY(-12px);
    visibility: hidden;
    opacity: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--ds-radius-md);
    background: rgba(3, 54, 56, .98);
    box-shadow: var(--ds-shadow-lg);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  body.design-system-v11.nav-open .site-nav,
  body.design-system-v11.nav-open .guide-masthead nav {
    transform: none;
    visibility: visible;
    opacity: 1;
  }

  body.design-system-v11 .site-nav a,
  body.design-system-v11 .guide-masthead nav a { padding: 12px 13px; border-radius: 10px; }
  body.design-system-v11 .site-nav a:hover,
  body.design-system-v11 .guide-masthead nav a:hover { background: rgba(255, 255, 255, .07); }
  body.design-system-v11 .site-nav a::after,
  body.design-system-v11 .guide-masthead nav a::after { display: none; }

  body.design-system-v11 .menu-toggle { display: inline-block; }
  body.design-system-v11 .language-toggle { min-width: 44px; width: 44px; padding: 0; font-size: 0; }
  body.design-system-v11 .language-toggle span { margin: 0; }
  body.design-system-v11 .masthead-concierge,
  body.design-system-v11 .guide-ask { display: none; }

  body.design-system-v11 .langbar { top: 90px; width: calc(100% - 20px); max-height: calc(100vh - 110px); overflow: auto; }

  body.design-system-v11.page-venue .vhero { margin-top: 94px; min-height: 570px; }
  body.design-system-v11.page-venue .vhero-in { width: calc(100% - 44px); padding-bottom: 42px; }
  body.design-system-v11.page-venue .vhero h1 { font-size: clamp(2.8rem, 12vw, 5rem); }
  body.design-system-v11.page-venue .vhero picture::after { background: linear-gradient(0deg, rgba(2, 38, 39, .92), rgba(2, 38, 39, .12) 88%); }

  body.design-system-v11.page-journal .journal-hero,
  body.design-system-v11.page-booking .guide-hero { margin-top: 102px; }
  body.design-system-v11 .crumb { margin-top: 102px; }
  body.design-system-v11.page-article .article { margin-top: 20px; }
  body.design-system-v11.page-article .crumb + .article { margin-top: 20px; }
}

@media (max-width: 720px) {
  body.design-system-v11 .wrap { width: min(100% - 24px, var(--ds-page)); }
  body.design-system-v11 .brand-name,
  body.design-system-v11 .guide-brand strong { font-size: 1.02rem; }
  body.design-system-v11 .brand-kicker,
  body.design-system-v11 .guide-brand small { display: none; }
  body.design-system-v11 .masthead-actions,
  body.design-system-v11 .guide-actions { gap: 6px; }

  body.design-system-v11 .langbar { padding: 15px 12px; justify-content: flex-start; }
  body.design-system-v11 .langbar .globe { width: 100%; text-align: center; }
  body.design-system-v11 .langbar .language-note { width: 100%; margin: -2px 0 7px; text-align: center; }
  body.design-system-v11 .langbar .lbtn { flex: 1 0 17%; }

  body.design-system-v11.page-venue .vhero { width: calc(100% - 16px); min-height: 520px; border-radius: 24px; }
  body.design-system-v11.page-venue .vbody { width: calc(100% - 24px); margin-top: -18px; padding: 36px 22px 50px; border-radius: 24px; }
  body.design-system-v11.page-venue .vmeta { align-items: flex-start; flex-direction: column; gap: 5px; }

  body.design-system-v11.page-journal .journal-hero,
  body.design-system-v11.page-booking .guide-hero { padding: 44px 24px; border-radius: 24px; }
  body.design-system-v11.page-journal .journal-hero h1,
  body.design-system-v11.page-booking .guide-hero h1 { font-size: clamp(2.6rem, 14vw, 4.5rem); }
  body.design-system-v11.page-journal .jgrid { grid-template-columns: 1fr; }
  body.design-system-v11.page-journal .jcard { min-height: 0; }

  body.design-system-v11.page-article .article { width: calc(100% - 24px); padding: 36px 22px 46px; border-radius: 24px; }
  body.design-system-v11.page-article .article h1 { font-size: clamp(2.5rem, 13vw, 4.2rem); }

  body.design-system-v11.page-booking section.wrap,
  body.design-system-v11.page-booking div.wrap:not(.guide-hero) { width: calc(100% - 24px); padding: 30px 20px; border-radius: 24px; }
  body.design-system-v11.page-booking .why-grid,
  body.design-system-v11.page-booking .cols { grid-template-columns: 1fr; }
  body.design-system-v11.page-booking .step { grid-template-columns: 1fr; gap: 7px; }
  body.design-system-v11.page-booking table { display: block; overflow-x: auto; white-space: nowrap; }

  body.design-system-v11 .cta-row { align-items: stretch; flex-direction: column; }
  body.design-system-v11 .cta-row .btn { width: 100%; }
  body.design-system-v11 .google-review-link,
  body.design-system-v11 .venue-social-link { width: 100%; justify-content: center; }

  body.design-system-v11 .foot,
  body.design-system-v11 footer.guide-foot { width: calc(100% - 16px); margin-top: 48px; border-radius: 24px; }
  body.design-system-v11 .wafloat { right: 14px; bottom: 14px; min-width: 54px; min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.design-system-v11 *,
  body.design-system-v11 *::before,
  body.design-system-v11 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== v11.1 fixes — contrast, WhatsApp float, social links (2026-07-18) ===== */
/* 1. Language buttons: readable on every page */
body.design-system-v11 .langbar .lbtn{color:#053f42!important;background:#fff!important;opacity:1!important}
body.design-system-v11 .langbar .lbtn:hover,
body.design-system-v11 .langbar .lbtn.on{background:#f2bd55!important;color:#053f42!important;border-color:#f2bd55!important}
/* 2. Home hero: "Best of" readable over photo */
body.design-system-v11.page-home .hero h1{color:#f7f3e9!important;text-shadow:0 2px 30px rgba(4,30,25,.45)}
body.design-system-v11.page-home .hero h1 em{color:#f2cd7e!important}
/* 3. Hero secondary button: readable glass style */
body.design-system-v11.page-home .hero-secondary{color:#f7f3e9!important;border-color:rgba(247,243,233,.55)!important;background:rgba(5,63,66,.35)!important;backdrop-filter:blur(6px)}
body.design-system-v11.page-home .hero-secondary:hover{background:rgba(247,243,233,.16)!important}
/* 4. Plan strip heading: readable on dark teal */
body.design-system-v11 .plan-strip h2{color:#f7f3e9!important}
body.design-system-v11 .plan-strip .eyebrow{color:#f3bd4f!important}
/* 5. WhatsApp float: pill, never clipped, safe margins */
body.design-system-v11 .wafloat{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px;width:auto!important;height:auto!important;min-width:0!important;min-height:52px!important;padding:13px 20px!important;border-radius:999px!important;right:16px!important;bottom:16px!important;font-family:var(--ds-sans);font-size:.82rem;font-weight:650;line-height:1;white-space:nowrap}
@media(max-width:640px){body.design-system-v11 .wafloat{right:12px!important;bottom:12px!important;padding:12px 16px!important}}
/* 6. Venue social links row */
body.design-system-v11 .social-links-fix{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
body.design-system-v11 .social-links-fix a{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border:1px solid var(--ds-line);border-radius:999px;font-size:.75rem;font-weight:600;text-decoration:none;color:var(--ds-ink);background:#fff}
body.design-system-v11 .social-links-fix a:hover{border-color:var(--ds-gold);transform:translateY(-2px)}
body.design-system-v11.dark .social-links-fix a,body.dark.design-system-v11 .social-links-fix a{background:rgba(255,255,255,.05);color:#f2c47b;border-color:rgba(242,196,123,.35)}
/* 7. Language panel: correct position on all pages & mobile (legacy right:0 conflict) */
body.design-system-v11 .langbar{left:50%!important;right:auto!important;transform:translate(-50%,-18px)!important}
body.design-system-v11.languages-open .langbar{transform:translate(-50%,0)!important}
@media(max-width:860px){body.design-system-v11 .langbar{top:88px!important;width:calc(100% - 20px)!important;max-height:calc(100dvh - 108px);overflow:auto}}