/* ==========================================================================
   KEN FROOM TOURS — Design System
   Palette: deep navy, antique gold, warm ivory, a touch of bordeaux.
   Type: "Fraunces" for display headings, "Jost" for body & UI.
   ========================================================================== */

:root {
  /* Color palette */
  --navy-950: #071120;
  --navy-900: #0B1A30;
  --navy-800: #10233F;
  --navy-700: #1A3356;
  --navy-600: #27446E;

  --gold-200: #F2E3B3;
  --gold-300: #E9CE7F;
  --gold-400: #D9B855;
  --gold-500: #C9A227;
  --gold-600: #86650F;   /* darkened so gold text meets WCAG AA contrast on ivory & parchment */
  --gold-700: #6B500F;

  --bordeaux: #6E2B39;
  --bordeaux-deep: #542130;

  --ivory: #FBF7EE;
  --parchment: #F4ECDC;
  --sand: #E8DDC6;

  --ink: #14213A;
  --ink-soft: #3E4B63;
  --ink-faint: #566178;

  /* Gradients */
  --grad-gold: linear-gradient(135deg, #E9CE7F 0%, #C9A227 45%, #A67F1E 100%);
  --grad-gold-text: linear-gradient(110deg, #F2E3B3 0%, #D9B855 40%, #C9A227 70%, #E9CE7F 100%);
  --grad-navy: linear-gradient(180deg, #0B1A30 0%, #10233F 100%);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", sans-serif;

  /* Rhythm */
  --space-section: clamp(4.5rem, 9vw, 8rem);
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-soft: 0 18px 50px -18px rgba(11, 26, 48, 0.25);
  --shadow-card: 0 10px 34px -14px rgba(11, 26, 48, 0.28);
  --maxw: 1180px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.6em;
  color: var(--ink);
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1.15em; }

a { color: var(--gold-600); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--gold-500); }

.container {
  width: min(var(--maxw), 100% - 3rem);
  margin-inline: auto;
}

.container--narrow { width: min(820px, 100% - 3rem); margin-inline: auto; }

section { padding-block: var(--space-section); }

::selection { background: var(--gold-300); color: var(--navy-900); }

/* ---------- Small-caps kicker label ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1.1rem;
}

.kicker::before,
.kicker--rule-after::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

.kicker--center { justify-content: center; }
.kicker--center::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

.on-dark .kicker, .kicker--light { color: var(--gold-300); }

/* Diamond ornament divider */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--gold-500);
  margin: 2.2rem auto;
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: min(110px, 20vw);
  background: linear-gradient(to var(--dir, right), transparent, var(--gold-500));
}
.ornament::before { --dir: right; }
.ornament::after { --dir: left; }
.ornament span { font-size: 0.7rem; transform: rotate(45deg); display: inline-block; border: 1px solid var(--gold-500); width: 9px; height: 9px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-gold {
  background: var(--grad-gold);
  color: var(--navy-950);
  box-shadow: 0 10px 26px -10px rgba(201, 162, 39, 0.55);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(201, 162, 39, 0.65);
  color: var(--navy-950);
}

.btn-ghost {
  background: transparent;
  color: var(--gold-300);
  border-color: rgba(233, 206, 127, 0.55);
}
.btn-ghost:hover {
  background: rgba(233, 206, 127, 0.1);
  border-color: var(--gold-300);
  color: var(--gold-200);
}

.btn-ghost--dark {
  color: var(--navy-800);
  border-color: rgba(16, 35, 63, 0.4);
}
.btn-ghost--dark:hover {
  background: rgba(16, 35, 63, 0.06);
  border-color: var(--navy-800);
  color: var(--navy-900);
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-950);
  border-bottom: 1px solid rgba(233, 206, 127, 0.18);
  color: var(--gold-200);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 0.55rem;
}
.topbar a { color: var(--gold-300); font-weight: 500; }
.topbar a:hover { color: var(--gold-200); }
.topbar__tag { opacity: 0.85; }
.topbar__contacts { display: flex; gap: 1.6rem; white-space: nowrap; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 26, 48, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(233, 206, 127, 0.16);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.05rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--ivory);
}
.brand:hover { color: var(--ivory); }

.brand__mark {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1.5px solid var(--gold-400);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-300);
  background:
    radial-gradient(circle at 30% 25%, rgba(233, 206, 127, 0.18), transparent 60%),
    var(--navy-900);
  letter-spacing: 0.02em;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: 0.045em;
  line-height: 1.1;
}
.brand__name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 0.28rem;
}

.nav { display: flex; align-items: center; gap: 1.5rem; }

.nav a {
  color: rgba(251, 247, 238, 0.82);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--grad-gold);
  transition: right 0.3s ease;
}
.nav a:hover { color: var(--gold-200); }
.nav a:hover::after { right: 0; }
.nav a[aria-current="page"] { color: var(--gold-300); }
.nav a[aria-current="page"]::after { right: 0; }

.nav .btn { padding: 0.62rem 1.4rem; font-size: 0.78rem; }
.nav .btn::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(233, 206, 127, 0.5);
  border-radius: var(--radius);
  color: var(--gold-300);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--ivory);
  background:
    linear-gradient(180deg, rgba(7, 17, 32, 0.82) 0%, rgba(11, 26, 48, 0.55) 45%, rgba(7, 17, 32, 0.88) 100%),
    var(--hero-image, none),
    radial-gradient(ellipse 120% 80% at 70% 10%, #1A3356 0%, #0B1A30 55%, #071120 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  padding-block: clamp(6rem, 14vw, 11rem);
  overflow: hidden;
}

.hero--compact { padding-block: clamp(4.5rem, 9vw, 7rem); }

.hero__inner { position: relative; z-index: 2; max-width: 780px; }
.hero__inner--center { margin-inline: auto; text-align: center; }
.hero__inner--center .kicker { justify-content: center; }

.hero h1 { color: var(--ivory); }

.hero .gold-script {
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 600;
}

.hero__lede {
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: 1.75;
  color: rgba(251, 247, 238, 0.88);
  max-width: 620px;
  margin-bottom: 2.4rem;
  font-weight: 300;
}
.hero__inner--center .hero__lede { margin-inline: auto; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__inner--center .hero__actions { justify-content: center; }

.hero__note {
  margin-top: 2.2rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: rgba(233, 206, 127, 0.9);
}
.hero__note a { color: var(--gold-200); border-bottom: 1px solid rgba(233,206,127,0.4); }

/* Decorative compass watermark in hero corner */
.hero__compass {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 420px;
  height: 420px;
  opacity: 0.09;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Sections on dark navy ---------- */
.on-dark {
  background: var(--grad-navy);
  color: rgba(251, 247, 238, 0.88);
}
.on-dark h2, .on-dark h3 { color: var(--ivory); }

/* ---------- Intro strip (phone/email band) ---------- */
.assurance {
  background: var(--navy-950);
  border-block: 1px solid rgba(233, 206, 127, 0.2);
  padding-block: 1.6rem;
}
.assurance__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 3rem;
  text-align: center;
}
.assurance__item {
  color: rgba(251, 247, 238, 0.85);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.assurance__item .diamond { color: var(--gold-400); font-size: 0.6rem; }

/* ---------- Pillars / feature grid ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.pillar {
  background: #fff;
  border: 1px solid var(--sand);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem 2rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }

.pillar__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--gold-400);
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  color: var(--gold-600);
  background: linear-gradient(140deg, rgba(233, 206, 127, 0.25), rgba(233, 206, 127, 0.05));
}
.pillar__icon svg { width: 26px; height: 26px; }

.pillar h3 { margin-bottom: 0.5rem; }
.pillar p { color: var(--ink-soft); font-size: 0.99rem; margin-bottom: 0; }

/* ---------- Experience cards (photo cards) ---------- */
.exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  background: var(--navy-800); /* fallback if the photo doesn't load */
  box-shadow: var(--shadow-card);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.exp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }

.exp-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.exp-card:hover .exp-card__img { transform: scale(1.045); }

.exp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 32, 0) 30%, rgba(7, 17, 32, 0.55) 62%, rgba(7, 17, 32, 0.92) 100%);
}

.exp-card__body {
  position: relative;
  z-index: 2;
  padding: 1.9rem 1.8rem 1.7rem;
  color: var(--ivory);
  width: 100%;
}
.exp-card__body .kicker { margin-bottom: 0.5rem; color: var(--gold-300); }
.exp-card__body .kicker::before { width: 1.6rem; background: var(--gold-300); }
.exp-card__body h3 { color: var(--ivory); margin-bottom: 0.35rem; }
.exp-card__body p { color: rgba(251, 247, 238, 0.8); font-size: 0.95rem; margin: 0; }

/* ---------- Split section (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  background:
    radial-gradient(circle at 30% 20%, #1A3356, #0B1A30 70%);
  box-shadow: var(--shadow-soft);
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* gold frame offset behind the image */
.split__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(233, 206, 127, 0.55);
  border-radius: var(--radius-lg);
  transform: translate(14px, 14px);
  pointer-events: none;
  z-index: -1;
}
.split__frame {
  position: relative;
  padding: 14px 14px 0 0;
}
.split__frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: 78%;
  border: 1.5px solid var(--gold-400);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.split__frame .split__media { z-index: 1; }

.split__body .lead {
  font-size: 1.14rem;
  color: var(--ink-soft);
}

/* Checklist */
.check-list { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: 0.85rem; }
.check-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "◆";
  color: var(--gold-500);
  font-size: 0.7rem;
  line-height: 2.4;
  flex: none;
}
.on-dark .check-list li { color: rgba(251, 247, 238, 0.85); }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  margin-top: 3rem;
}
.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat__label {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(251, 247, 238, 0.7);
}

/* ---------- Testimonials ---------- */
.quote-card {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2.2rem 2.2rem;
  position: relative;
  box-shadow: var(--shadow-card);
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  left: 1.4rem;
  font-family: var(--font-display);
  font-size: 5.4rem;
  line-height: 1;
  color: var(--gold-400);
  opacity: 0.9;
}
.quote-card blockquote {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.quote-card figcaption {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.quote-card figcaption::before {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: var(--gold-500);
}
.quote-card cite { font-style: normal; }

/* ---------- Steps (How It Works) ---------- */
.steps { display: grid; gap: 0; counter-reset: step; margin-top: 1rem; }

.step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--sand);
  align-items: start;
}
.step:last-child { border-bottom: none; }

.step__num {
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 300;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-600); /* darker gold so the outline meets the 3:1 contrast minimum */
  padding-top: 0.3rem;
}
.step h3, .step__title { margin-bottom: 0.5rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.step p { color: var(--ink-soft); margin-bottom: 0.4rem; }
.step .step__aside {
  font-size: 0.92rem;
  color: var(--gold-700);
  font-style: italic;
  font-family: var(--font-display);
}

/* ---------- Services detail rows ---------- */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(2.6rem, 5vw, 4rem);
  border-bottom: 1px solid var(--sand);
}
.service-row:last-of-type { border-bottom: none; }
.service-row:nth-child(even) .service-row__media { order: 2; }

.service-row__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
  position: relative;
  background: radial-gradient(circle at 35% 25%, #1A3356, #0B1A30 75%);
  box-shadow: var(--shadow-card);
}
.service-row__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(100deg, rgba(7, 17, 32, 0.94) 20%, rgba(11, 26, 48, 0.82)),
    var(--cta-image, none),
    radial-gradient(ellipse at 80% 0%, #1A3356, #071120 70%);
  background-size: cover;
  background-position: center;
  color: var(--ivory);
  text-align: center;
  position: relative;
}
.cta-band::before, .cta-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
}
.cta-band::before { top: 0; }
.cta-band::after { bottom: 0; }

.cta-band h2 { color: var(--ivory); max-width: 700px; margin-inline: auto; }
.cta-band .hero__lede { margin-inline: auto; text-align: center; }

.cta-band__phone {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--gold-300);
  letter-spacing: 0.04em;
  margin: 1.4rem 0 2rem;
}
.cta-band__phone:hover { color: var(--gold-200); }
/* Both numbers side by side; they stack neatly on narrow phones */
.cta-band__phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 1.1rem;
  row-gap: 0.2rem;
  margin: 1.4rem 0 2rem;
}
.cta-band__phones .cta-band__phone { display: inline-block; margin: 0; }
.cta-band__or {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(251, 247, 238, 0.7);
}

/* ---------- Contact page ---------- */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3.5rem; }

.contact-card {
  background: var(--navy-900);
  border: 1px solid rgba(233, 206, 127, 0.3);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem;
  color: rgba(251, 247, 238, 0.85);
  text-align: center;
}
.contact-card h3, .contact-card__title { color: var(--gold-300); font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.contact-card .big-link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--ivory);
  margin: 0.8rem 0 0.6rem;
  letter-spacing: 0.03em;
  word-break: break-word;
}
.contact-card .big-link:hover { color: var(--gold-200); }
.contact-card p { font-size: 0.95rem; margin: 0; color: rgba(251, 247, 238, 0.7); }

/* Form */
.form-shell {
  background: #fff;
  border: 1px solid var(--sand);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: var(--shadow-card);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-grid .field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.field textarea { resize: vertical; min-height: 140px; }

.form-note {
  font-size: 0.92rem;
  color: var(--ink-faint);
  margin-top: 1.2rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-950);
  color: rgba(251, 247, 238, 0.72);
  padding-top: 4.5rem;
  border-top: 3px solid;
  border-image: var(--grad-gold) 1;
  font-size: 0.95rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.site-footer h4, .footer-heading {
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.site-footer a { color: rgba(251, 247, 238, 0.72); }
.site-footer a:hover { color: var(--gold-300); }

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.site-footer .brand { margin-bottom: 1.2rem; }
.site-footer .brand__name { font-size: 1.2rem; }

.site-footer__bottom {
  border-top: 1px solid rgba(233, 206, 127, 0.15);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(251, 247, 238, 0.72);
}

/* ---------- Page intro (inner pages) ---------- */
.page-intro { text-align: center; max-width: 760px; margin-inline: auto; }
.page-intro .lead { font-size: 1.15rem; color: var(--ink-soft); }

/* ---------- Reveal animation ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-3 { margin-top: 3rem; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.bg-parchment { background: var(--parchment); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 61.25em) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .split, .service-row { grid-template-columns: 1fr; }
  .service-row:nth-child(even) .service-row__media { order: 0; }
  .split__media { min-height: 340px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .topbar__tag { display: none; }
}

@media (max-width: 47.5em) {
  .grid-3, .grid-2, .contact-cards, .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 2.4rem; }
  .step { grid-template-columns: 64px 1fr; gap: 1.2rem; }
  .step__num { font-size: 3rem; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .topbar__inner { justify-content: center; }

  /* Mobile nav */
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-950);
    border-bottom: 1px solid rgba(233, 206, 127, 0.25);
    padding: 0.6rem 1.5rem 1.4rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid rgba(233, 206, 127, 0.1); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1rem; border-bottom: none; }
}

/* ==========================================================================
   REVISION 2 — Listing cards, partner logos, cruise offers, team, directory
   ========================================================================== */

/* ---------- Generic listing card with an image slot ----------
   The image slot NEVER collapses: it keeps its aspect ratio and shows an
   elegant navy frame with a faint gold diamond until a real photo exists. */
.listing {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.listing:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.img-slot {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 32% 24%, #1A3356 0%, #0E1F38 60%, #0B1A30 100%);
  overflow: hidden;
  flex: none;
}
.img-slot::before {
  /* faint gold diamond ornament that shows through while no photo exists */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(233, 206, 127, 0.4);
}
.img-slot::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(233, 206, 127, 0.18);
  border-radius: 4px;
  pointer-events: none;
}
.img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* covers the ornament once the real photo loads */
}
.img-slot--logo {
  aspect-ratio: 3 / 2;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4ECDC 100%);
}
.img-slot--logo::before { border-color: rgba(201, 162, 39, 0.35); }
.img-slot--logo img { object-fit: contain; padding: 18%; }

.img-slot--portrait { aspect-ratio: 4 / 5; }

.listing__body { padding: 1.1rem 1.2rem 1.15rem; }
.listing__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.listing__caption {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-top: 0.3rem;
}

/* ---------- Partner cruise line logo grid ---------- */
.partner-grid {
  /* Flex instead of grid so a short last row sits in the middle,
     whatever number of cruise lines the team adds. */
  --cols: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}
.partner-grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * 1.6rem) / var(--cols)); min-width: 0; }

/* ---------- Cruise offer cards (URcomped-style, but contact-to-book) ---------- */
.cruise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.cruise-card {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cruise-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }

.cruise-card .img-slot { aspect-ratio: 16 / 9; }

.cruise-card__badge {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  background: var(--grad-gold);
  color: var(--navy-950);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 3px;
}

.cruise-card__logo {
  position: absolute;
  bottom: 0.8rem; right: 0.8rem;
  z-index: 2;
  width: 74px; height: 46px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 5px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cruise-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.cruise-card__logo span {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--navy-800);
  text-align: center;
  line-height: 1.2;
  padding: 0 4px;
}

.cruise-card__body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.cruise-card__line {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.4rem;
}
.cruise-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.45rem;
}
.cruise-card__meta {
  font-size: 0.88rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}
.cruise-card__meta .diamond { color: var(--gold-500); font-size: 0.6rem; }
.cruise-card__desc { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 1rem; }

.cruise-card__perks {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0.9rem 0 0;
  border-top: 1px dashed var(--sand);
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.cruise-card__perks li { display: flex; gap: 0.6rem; }
.cruise-card__perks li::before { content: "◆"; color: var(--gold-500); font-size: 0.6rem; line-height: 2.1; }

.cruise-card__cta { margin-top: auto; }
.cruise-card__cta .btn { width: 100%; padding: 0.8rem 1rem; font-size: 0.78rem; }
.cruise-card__cta-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0.6rem 0 0;
}
.cruise-card__cta-note a { color: var(--gold-600); font-weight: 600; }

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}
.team-card { text-align: center; }
.team-card .img-slot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid var(--gold-400);
  box-shadow: var(--shadow-card);
  margin: 0 auto 1rem;
  width: min(180px, 100%);
}
.team-card .img-slot::after { border-radius: 50%; inset: 6px; }
.team-card__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}
.team-card__role {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-top: 0.25rem;
}
.on-dark .team-card__name { color: var(--ivory); }
.on-dark .team-card__role { color: var(--gold-300); }

/* ---------- Casino directory ---------- */
.dir-filter {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  max-width: 560px;
  margin: 0 auto 2.6rem;
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 0.35rem 0.5rem 0.35rem 1.4rem;
  box-shadow: var(--shadow-card);
}
.dir-filter svg { flex: none; color: var(--gold-600); width: 20px; height: 20px; }
.dir-filter input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.55rem 0;
}
.dir-filter input:focus { outline: none; }

.dir-count {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.2rem;
}

.dir-group {
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.dir-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy-800);
  transition: background 0.25s ease;
}
.dir-group summary::-webkit-details-marker { display: none; }
.dir-group summary:hover { background: var(--ivory); }
.dir-group summary .dir-group__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.dir-group summary .chev {
  width: 26px; height: 26px;
  border: 1px solid var(--gold-400);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-600);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  font-family: var(--font-body);
}
.dir-group[open] summary { border-bottom: 1px solid var(--sand); background: var(--ivory); }
.dir-group[open] summary .chev { transform: rotate(180deg); }

.dir-group__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  padding: 1.5rem;
}
.dir-group__grid .listing__body { padding: 0.85rem 1rem 0.95rem; }
.dir-group__grid .listing__name { font-size: 0.98rem; }
.dir-group__grid .listing__caption { font-size: 0.68rem; }

.dir-region-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-600);
  text-align: center;
  margin: 3.2rem 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: center;
}
.dir-region-title::before, .dir-region-title::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
}

.dir-empty {
  display: none;
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  padding: 2rem 0;
}

/* ---------- Social icons ---------- */
.socials { display: inline-flex; gap: 0.7rem; align-items: center; }
.socials a {
  width: 36px; height: 36px;
  border: 1px solid rgba(233, 206, 127, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-300);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.socials a:hover { background: rgba(233, 206, 127, 0.12); color: var(--gold-200); border-color: var(--gold-300); }
.socials svg { width: 17px; height: 17px; }

/* ---------- Motto ribbon ---------- */
.motto {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-300);
  letter-spacing: 0.03em;
}

/* ---------- Brand logo image over monogram ---------- */
.brand__mark { position: relative; overflow: hidden; }
.brand__mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}

/* ---------- Legal / privacy page ---------- */
.legal-body {
  background: #fff;
  border: 1px solid var(--sand);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: var(--shadow-card);
}
.legal-body h2 { font-size: 1.5rem; margin-top: 1.8em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-soft); }

/* ---------- Two-phone contact row ---------- */
.contact-cards--three { grid-template-columns: repeat(3, 1fr); }

/* ---------- Responsive additions ---------- */
@media (max-width: 70em) {
  .nav { gap: 1.1rem; }
  .nav a { font-size: 0.76rem; letter-spacing: 0.1em; }
}
@media (max-width: 61.25em) {
  .team-grid, .dir-group__grid { grid-template-columns: repeat(3, 1fr); }
  .partner-grid { --cols: 3; }
  .cruise-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards--three { grid-template-columns: 1fr; }
}
@media (max-width: 73.75em) {
  /* the 9-item nav needs the hamburger a little earlier than the old 5-item one */
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-950);
    border-bottom: 1px solid rgba(233, 206, 127, 0.25);
    padding: 0.6rem 1.5rem 1.4rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid rgba(233, 206, 127, 0.1); font-size: 0.86rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1rem; border-bottom: none; }
}
@media (max-width: 47.5em) {
  .dir-group__grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { --cols: 2; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .cruise-grid { grid-template-columns: 1fr; }
}
@media (max-width: 26.25em) {
  .dir-group__grid { grid-template-columns: 1fr; }
}

/* ---------- Testimonial avatars ---------- */
.quote-card figcaption { align-items: center; }
.quote-card__avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.quote-card__avatar::before { width: 12px; height: 12px; }
.quote-card__avatar::after { inset: 3px; border-radius: 50%; }

/* ---------- Mobile top bar: let the contact ribbon wrap ---------- */
@media (max-width: 47.5em) {
  .topbar__contacts {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 1.1rem;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   REVISION 3 — readability, logo, testimonial photos, square listings, form
   ========================================================================== */

/* Heavier, more readable hero paragraph text */
.hero__lede {
  font-weight: 400;
  color: rgba(251, 247, 238, 0.95);
}

/* Brand mark: logo-only (JS puts "KF" back only if the logo is missing),
   slightly larger, logo fills the circle */
.brand__mark { width: 56px; height: 56px; }
.brand__mark img { object-fit: cover; }

/* Compact social icons in the top ribbon */
.socials--topbar { gap: 0.45rem; margin-left: 0.4rem; }
.socials--topbar a { width: 27px; height: 27px; border-width: 1px; }
.socials--topbar svg { width: 13px; height: 13px; }

/* Square portrait (About page) */
.split__media--square { aspect-ratio: 1 / 1; min-height: 0; }

/* Partner cruise line listings: square photo tiles, photo fills, centered text */
.partner-grid .img-slot--logo { aspect-ratio: 1 / 1; }
.partner-grid .img-slot--logo img { object-fit: cover; padding: 0; }
.partner-grid .listing__body { text-align: center; }

/* Testimonials: big rectangular photo on top, experience underneath */
.quote-card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.quote-card--photo::before { display: none; } /* the old floating quote mark */
.quote-card__photo { aspect-ratio: 4 / 3; }
.quote-card__text { padding: 1.5rem 1.7rem 1.7rem; position: relative; flex: 1; display: flex; flex-direction: column; }
.quote-card__text blockquote {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.quote-card__text blockquote::before { content: "\201C"; color: var(--gold-500); margin-right: 0.15em; }
.quote-card__text blockquote::after { content: "\201D"; color: var(--gold-500); margin-left: 0.15em; }
.quote-card__text figcaption { margin-top: auto; }

/* ---------- Enquiry form: sections, required markers, checkboxes ---------- */
.form-section-title {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-600);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 0.6rem;
  margin: 1.2rem 0 0.2rem;
}
.form-section-title:first-child { margin-top: 0; }
.form-section-note {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: var(--ink-faint);
  font-style: italic;
  margin: -0.2rem 0 0.2rem;
}
.req { color: #A3374B; font-weight: 700; margin-left: 0.15rem; }
.form-required-hint {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: -0.4rem;
}

.check-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem 1.2rem;
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.check-grid input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold-500);
  cursor: pointer;
}

@media (max-width: 47.5em) {
  .check-grid { grid-template-columns: 1fr 1fr; }
}

/* Brand logo: never crop the artwork inside the gold ring */
.brand__mark { width: 58px; height: 58px; }
.brand__mark img { object-fit: contain; padding: 3px; }

/* Keep the long-labeled form fields from stretching the grid on phones */
.form-grid, .form-grid > * , .check-grid label { min-width: 0; }
.form-grid label { overflow-wrap: break-word; }

/* ==========================================================================
   REVISION 4 — accessibility (WCAG 2.2 AA), plus Promotions, Blog, FAQ, Video
   ========================================================================== */

/* ---------- Accessibility foundations ---------- */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0.75rem;
  z-index: 1000;
  padding: 0.8rem 1.2rem;
  background: var(--gold-300);
  color: var(--navy-950);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); color: var(--navy-950); outline: 3px solid var(--navy-950); outline-offset: 2px; }

main:focus { outline: none; }

/* A clear focus ring everywhere: dark on light backgrounds, gold on dark ones */
:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 3px; border-radius: 2px; }
.topbar :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .on-dark :focus-visible,
.hero :focus-visible, .cta-band :focus-visible, .contact-card :focus-visible, .video-frame :focus-visible {
  outline-color: var(--gold-300);
}
.btn-gold:focus-visible { outline-color: var(--navy-950); }
.cta-band .btn-gold:focus-visible, .hero .btn-gold:focus-visible, .site-header .btn-gold:focus-visible { outline-color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--navy-700); outline-offset: 2px; }
.dir-filter:focus-within { outline: 3px solid var(--navy-700); outline-offset: 3px; }

::placeholder { color: var(--ink-faint); opacity: 1; }

[id] { scroll-margin-top: 110px; }

/* Links inside running text need more than color to stand out */
main p a:not(.btn):not(.big-link), main li a:not(.btn), .legal-body a, .prose a, .form-note a, .toc a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.on-dark p a:not(.btn), .hero p a:not(.btn), .cta-band p a:not(.btn), .contact-card a, .dir-empty a { color: var(--gold-300); }
.on-dark p a:not(.btn):hover { color: var(--gold-200); }

/* ---------- Lists / headings that changed element type for better structure ---------- */
.steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.listing__name { margin: 0; }
.listing__caption { margin: 0.3rem 0 0; }
.footer-heading { font-size: 0.8rem; }
.topbar__privacy { text-decoration: underline; text-underline-offset: 0.2em; }
.social-note { display: block; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.7rem; }

/* ---------- Form structure ---------- */
.form-fieldset { border: 0; margin: 0 0 2.2rem; padding: 0; min-width: 0; }
.form-fieldset legend { padding: 0; width: 100%; }
.form-fieldset > .form-section-note { margin-top: 0; }
.check-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.check-fieldset legend {
  padding: 0; margin-bottom: 0.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
}
.field-hint { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.35rem; }
.form-privacy-hint { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.form-actions { margin-top: 0.4rem; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--bordeaux); }

/* ---------- Table of contents (privacy page) ---------- */
.toc { background: var(--parchment); border: 1px solid var(--sand); border-radius: var(--radius-lg); padding: 1.3rem 1.6rem; margin-bottom: 2.4rem; }
.toc__title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.6rem; }
.toc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.legal-body h3 { margin-top: 1.8rem; font-size: 1.3rem; }
.legal-body ul { padding-left: 1.3rem; }
.legal-body li { margin-bottom: 0.5rem; }

/* ---------- Prose (blog articles, FAQ answers) ---------- */
.prose { font-size: 1.08rem; color: var(--ink-soft); }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.2rem; color: var(--ink); }
.prose h3 { font-size: 1.3rem; margin-top: 1.8rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4rem; }
.prose img { border-radius: var(--radius); margin-block: 1.5rem; height: auto; }
.prose blockquote { margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.4rem; border-left: 3px solid var(--gold-500); font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* ---------- Promotions ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.promo-card {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.promo-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.promo-card__dates { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 0.5rem; }
.promo-card__title { font-size: 1.5rem; margin-bottom: 0.6rem; }
.promo-card__text { color: var(--ink-soft); flex: 1; }
.promo-card .btn { align-self: flex-start; margin-top: 0.4rem; }
.promo-empty { max-width: 640px; margin: 0 auto; text-align: center; padding: 2.4rem 1.6rem; background: var(--parchment); border: 1px solid var(--sand); border-radius: var(--radius-lg); }
.promo-empty h2 { font-size: 1.8rem; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.post-card {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 0.4rem; }
.post-card__title { font-size: 1.4rem; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--gold-600); }
.post-card__body p { color: var(--ink-soft); }
.read-more { margin-top: auto; font-weight: 600; letter-spacing: 0.08em; }
.post-card__photo { display: block; }

.hero--post .post-title { font-size: clamp(2rem, 5vw, 3.2rem); }
.post-meta { color: rgba(251, 247, 238, 0.9); letter-spacing: 0.08em; margin: 0; }
.kicker-link { color: var(--gold-300); }
.post { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.post__figure { margin: 0 0 2.2rem; }
.post__photo { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.post__back { margin-top: 3rem; }

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: 2.8rem; }
.faq-group__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.faq-item { background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); margin-bottom: 0.7rem; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.3rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { color: var(--gold-600); transition: transform 0.25s ease; flex: none; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--sand); }
.faq-item__answer { padding: 1.1rem 1.3rem 1.3rem; }

/* ---------- About page: "How comps work" video ---------- */
.comps-video { padding-block: clamp(3rem, 7vw, 5.5rem); }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--navy-900); color: var(--ivory);
  border: 1px solid rgba(233, 206, 127, 0.45); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft);
}
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame--placeholder {
  background: radial-gradient(circle at 30% 20%, #1A3356 0%, #0E1F38 60%, #0B1A30 100%);
  display: grid; place-items: center; text-align: center;
}
.video-frame__inner { padding: 1.5rem; max-width: 520px; }
.video-frame__icon { display: block; width: 72px; height: 72px; margin: 0 auto 1rem; color: var(--gold-300); }
.video-frame__icon svg, .video-play svg { width: 100%; height: 100%; }
.video-frame__label { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.4rem; color: var(--ivory); }
.video-frame__sub { color: rgba(251, 247, 238, 0.85); margin: 0; font-size: 0.98rem; }
.video-frame__sub a, .video-frame__label a { color: var(--gold-300); }
.video-frame__label .btn { color: var(--navy-950); }
.video-play {
  position: absolute; inset: 0; width: 100%; background: rgba(7, 17, 32, 0.35); border: 0; cursor: pointer; color: var(--gold-300);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; font-family: var(--font-body);
}
.video-play svg { width: 84px; height: 84px; transition: transform 0.25s ease; }
.video-play:hover svg { transform: scale(1.08); }
.video-play__text { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); }
.video-embed__fallback { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); }
.transcript { margin-top: 1.2rem; background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); }
.transcript summary { cursor: pointer; padding: 0.9rem 1.2rem; font-weight: 600; color: var(--ink); }
.transcript__body { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }

/* ---------- Responsive for the new pieces ---------- */
@media (max-width: 61.25em) {
  .promo-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .promo-grid, .post-grid { grid-template-columns: 1fr; }
  .faq-item summary { font-size: 1.05rem; padding: 0.95rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Menu: nine links plus the button must never wrap onto two lines */
.nav a { white-space: nowrap; }
@media (min-width: 73.8125em) {
  .nav { gap: 1.25rem; }
  .nav a { font-size: 0.74rem; letter-spacing: 0.11em; }
  .nav .btn { padding: 0.62rem 1.2rem; }
}

/* Small-screen safety: long web addresses and the search box may never push the page wider */
.social-note { overflow-wrap: anywhere; }
.dir-filter input { min-width: 0; width: 100%; }

/* Cruise-line checkboxes: plain readable labels, comfortable 24px tick boxes */
.check-grid label { text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; margin-bottom: 0; }
.check-grid input[type="checkbox"] { width: 24px; height: 24px; padding: 0; flex: none; }
@media (max-width: 32.5em) { .check-grid { grid-template-columns: 1fr; } }

/* ---------- Promotions: event details + home page strip ---------- */
.promo-card__details { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.25rem; font-size: 0.95rem; color: var(--ink); }
.promo-card__label { display: inline-block; min-width: 3.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); }
h3.promo-card__title { font-size: 1.4rem; }
.home-promos { background: var(--parchment); }

/* Promotion cards stay centred when there are only one or two */
.promo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.promo-grid > .promo-card, .promo-grid > .flip-card { flex: 0 1 calc((100% - 4rem) / 3); min-width: 0; }
@media (max-width: 61.25em) { .promo-grid > .promo-card, .promo-grid > .flip-card { flex-basis: calc((100% - 2rem) / 2); } }
@media (max-width: 40em) { .promo-grid > .promo-card, .promo-grid > .flip-card { flex-basis: 100%; } }

/* ---------- Quote request form (Formspree) ---------- */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-errors {
  border: 2px solid var(--bordeaux); background: #FBEFF1; border-radius: var(--radius);
  padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; color: var(--ink);
}
.form-errors:focus { outline: 3px solid var(--navy-700); outline-offset: 3px; }
.form-errors__title { font-size: 1.15rem; color: var(--bordeaux); margin: 0 0 0.5rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors li { margin-bottom: 0.3rem; }
.form-errors a { color: var(--bordeaux); font-weight: 500; }

.field-error { display: block; margin-top: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--bordeaux); }
.field-error::before { content: "⚠ "; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bordeaux); border-width: 2px; }

.field input[type="file"] { padding: 0.7rem; background: #fff; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  margin-right: 0.9rem; padding: 0.55rem 1rem; border: 0; border-radius: var(--radius);
  background: var(--navy-800); color: var(--gold-200); cursor: pointer;
}
.file-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.92rem; color: var(--ink-soft); }
.file-list li::before { content: "✓ "; color: var(--gold-600); font-weight: 700; }

.certify {
  display: flex; align-items: flex-start; gap: 0.8rem; margin: 0.4rem 0 1.4rem;
  padding: 1rem 1.2rem; background: var(--parchment); border: 1px solid var(--sand); border-radius: var(--radius);
}
.certify input { width: 24px; height: 24px; flex: none; margin-top: 0.15rem; accent-color: var(--gold-600); cursor: pointer; }
.certify label { font-weight: 500; color: var(--ink); cursor: pointer; }
.certify .field-error { flex-basis: 100%; }
.certify:has(+ .field-error), .certify:has([aria-invalid="true"]) { border-color: var(--bordeaux); }

.form-status { min-height: 1.2em; margin: 0.8rem 0 0; font-weight: 500; color: var(--ink-soft); }
.form-shell[aria-busy="true"] .btn { opacity: 0.75; cursor: progress; }

.form-success {
  text-align: center; background: #fff; border: 1px solid var(--sand); border-top: 3px solid var(--gold-500);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.2rem); box-shadow: var(--shadow-card);
}
.form-success__icon { display: block; font-size: 1.6rem; color: var(--gold-500); margin-bottom: 0.6rem; }
.form-success__title { font-size: clamp(1.5rem, 3vw, 2rem); }
.form-success__title:focus { outline: none; }
.certify + .field-error { margin: -0.9rem 0 1.2rem; }

/* ---------- Google review testimonials (text only) ---------- */
.quote-card--review { display: flex; flex-direction: column; padding-top: 2.4rem; }
.quote-card--review::before { display: none; }
.quote-card__stars { margin: 0 0 0.9rem; font-size: 1.15rem; letter-spacing: 0.18em; color: var(--gold-500); line-height: 1; }
.quote-card--review blockquote { flex: 1; }
.quote-card--review blockquote p { margin: 0; }
.quote-card--review blockquote p::before { content: "\201C"; color: var(--gold-500); margin-right: 0.1em; }
.quote-card--review blockquote p::after { content: "\201D"; color: var(--gold-500); margin-left: 0.1em; }
.quote-card--review figcaption { flex-wrap: wrap; }
.quote-card__source { flex-basis: 100%; padding-left: 2.5rem; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-faint); }

/* ---------- Privacy policy page ---------- */
.toc__list { columns: 2; column-gap: 2rem; }
@media (max-width: 40em) { .toc__list { columns: 1; } }
.legal-body.prose h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); margin-top: 2.4rem; }
.legal-note { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--sand); color: var(--ink-soft); }
.quote-card__stars { color: var(--gold-600); }
.toc .toc__list { display: block; } .toc__list li { break-inside: avoid; margin-bottom: 0.3rem; }

/* ==========================================================================
   REVISION 5 — age gate, team profiles, combined Casinos & Cruises page
   ========================================================================== */

/* ---------- 21+ age gate ---------- */
.age-gate {
  border: 0; padding: 0; margin: auto; background: transparent; max-width: min(560px, calc(100% - 2rem)); width: 100%;
}
.age-gate::backdrop { background: radial-gradient(ellipse at 50% 30%, #10233F 0%, #071120 75%); }
.age-gate__panel {
  background: var(--navy-900); color: var(--ivory); text-align: center;
  border: 1px solid rgba(233, 206, 127, 0.5); border-top: 3px solid var(--gold-500); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 5vw, 2.8rem); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.age-gate__logo { width: 72px; height: 72px; margin: 0 auto 1.2rem; display: block; }
.age-gate__title { color: var(--ivory); font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.7rem; }
.age-gate__title:focus { outline: none; }
.age-gate__text { color: rgba(251, 247, 238, 0.9); }
.age-gate__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.4rem; }
.age-gate__help { margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(233, 206, 127, 0.2); font-size: 0.85rem; color: rgba(251, 247, 238, 0.82); }
.age-gate__help a { color: var(--gold-300); text-decoration: underline; }
.age-gate :focus-visible { outline-color: var(--gold-300); }
html.age-gate-open { overflow: hidden; }

/* ---------- Team cards open a profile pop-up ---------- */
.team-card__button {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; text-align: center;
  border-radius: var(--radius-lg); padding: 0.4rem 0.4rem 0.8rem; transition: transform 0.25s ease;
}
.team-card__button:hover { transform: translateY(-3px); }
.team-card__button:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 4px; }
.team-card__button .team-card__name, .team-card__button .team-card__role { display: block; }
.team-card__more {
  display: inline-block; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-600); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.team-profile {
  border: 0; padding: 0; border-radius: var(--radius-lg); max-width: min(560px, calc(100% - 2rem)); width: 100%;
  box-shadow: 0 30px 80px -20px rgba(7, 17, 32, 0.6); color: var(--ink); background: #fff;
}
.team-profile::backdrop { background: rgba(7, 17, 32, 0.75); }
.team-profile__inner { position: relative; padding: clamp(1.6rem, 4vw, 2.4rem); border-top: 3px solid var(--gold-500); }
.team-profile__close {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; font-size: 1.8rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.team-profile__close:hover { background: var(--parchment); }
.team-profile__head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; padding-right: 2.5rem; }
.team-profile__photo { width: 96px; height: 96px; flex: none; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--gold-400); }
.team-profile__photo::after { border-radius: 50%; inset: 4px; }
.team-profile__name { font-size: 1.6rem; margin: 0 0 0.2rem; }
.team-profile__role { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); }
.team-profile__bio { color: var(--ink-soft); }
.team-profile__contact { list-style: none; margin: 0 0 1.4rem; padding: 1rem 1.1rem; background: var(--parchment); border-radius: var(--radius); display: grid; gap: 0.35rem; }
.team-profile__label { display: inline-block; min-width: 3.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.team-profile__contact a { text-decoration: underline; }

/* ---------- Casinos & Cruises page ---------- */
.jump-links { background: var(--navy-950); border-bottom: 1px solid rgba(233, 206, 127, 0.25); }
.jump-links__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.4rem; padding-block: 0.9rem; }
.jump-links a { color: var(--gold-300); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0; }
.jump-links a:hover { color: var(--gold-200); }
.dir-region-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.dir-group .listing__name { margin: 0; font-size: 0.98rem; }
#cruise-lines .listing__name { margin: 0; font-size: 1.08rem; }

/* ---------- Optional photo behind the smaller page banners ---------- */
.hero--photo { background-size: cover; background-position: center; }
.team-profile { text-align: left; } .team-profile .team-profile__photo { width: 96px; margin: 0; box-shadow: none; }
.team-grid > * { min-width: 0; } .team-card__role, .team-card__name { overflow-wrap: anywhere; } @media (max-width: 22.5em) { .team-card__role { letter-spacing: 0.08em; } }

/* ---------- Casinos & Cruises: the two big choice cards ---------- */
.choice-section { padding-top: clamp(3rem, 6vw, 4.5rem); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); max-width: 1040px; margin-inline: auto; }
.choice-grid > * { min-width: 0; }
.choice-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sand); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--gold-400); color: var(--ink); }
.choice-card__img { aspect-ratio: 16 / 9; }
.choice-card__img img { transition: transform 0.6s ease; }
.choice-card:hover .choice-card__img img { transform: scale(1.04); }
.choice-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: clamp(1.4rem, 3vw, 2rem); flex: 1; }
.choice-card__stat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-600); }
.choice-card__title { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.choice-card__text { color: var(--ink-soft); }
.choice-card__btn { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .choice-card, .choice-card__img img { transition: none; } .choice-card:hover { transform: none; } .choice-card:hover .choice-card__img img { transform: none; } }

/* ---------- Casinos & Cruises sub-pages: "Land-Based Casinos | VIP Cruises" switch ---------- */
.trip-switch { background: var(--navy-950); border-bottom: 1px solid rgba(233, 206, 127, 0.25); padding-block: 1rem; }
.trip-switch__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; max-width: 640px; margin-inline: auto; padding: 0.35rem; border: 1px solid rgba(233, 206, 127, 0.35); border-radius: 999px; }
.trip-switch__item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.65rem 1rem; border-radius: 999px; color: var(--gold-300); text-decoration: none; line-height: 1.2; transition: background 0.2s ease, color 0.2s ease; }
.trip-switch__item:hover { background: rgba(233, 206, 127, 0.12); color: var(--gold-200); }
.trip-switch__item[aria-current="page"] { background: var(--grad-gold); color: var(--navy-950); }
.trip-switch__label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.trip-switch__count { font-size: 0.75rem; opacity: 0.85; margin-top: 0.15rem; }
@media (max-width: 26.25em) { .trip-switch__inner { border-radius: 18px; } .trip-switch__item { border-radius: 14px; padding: 0.6rem 0.5rem; } .trip-switch__label { font-size: 0.74rem; letter-spacing: 0.06em; } }
.cross-link { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.cross-link p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; font-size: 1.1rem; color: var(--ink-soft); }

/* ---------- Windows Contrast themes (forced colors) ----------
   When a visitor turns on a contrast theme, Windows replaces our colors with theirs.
   These rules keep things visible that our design shows with color or photos alone. */
@media (forced-colors: active) {
  /* Photos behind banners stay visible in contrast mode and clash with the visitor's colors: drop them */
  .hero, .cta-band { background: Canvas; }
  .cta-band::before, .cta-band::after { background: CanvasText; }
  /* The 21+ pop-up should fully cover the page, as it does normally */
  .age-gate::backdrop { background: Canvas; }
  .age-gate__panel { border: 2px solid CanvasText; }
  /* Pop-ups need a visible edge */
  dialog.team-profile { border: 2px solid CanvasText; }
  /* "You are here" markers that normally use gold */
  .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
  .trip-switch__item { border: 1px solid transparent; }
  .trip-switch__item[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  /* Outlined step numbers on How It Works */
  .step__num { color: CanvasText; -webkit-text-stroke: 0; }
  /* Gold gradient text becomes plain text */
  .gold-script { -webkit-text-fill-color: currentColor; background: none; }
}

/* ---------- Playing-card reveal (Promotions + Blog cards) ----------
   A playing card is dealt face up where the card will appear, then flips over (rotateY)
   to reveal the normal promotion or blog card on its back. The card and the playing card
   share one grid cell, so they are always exactly the same size and nothing jumps.
   Without JavaScript, with reduced motion, or if the script fails, the normal card simply shows. */
.flip-card { display: flex; min-width: 0; perspective: 1600px; }
.flip-card__inner { position: relative; display: grid; flex: 1; min-width: 0; }
.flip-card__inner > * { grid-area: 1 / 1; min-width: 0; }
.flip-card__face { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-flip) .flip-card:not(.is-done) .flip-card__inner {
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1);
  }
  html.js:not(.no-flip) .flip-card:not(.is-done) .flip-card__face,
  html.js:not(.no-flip) .flip-card:not(.is-done) .flip-card__inner > :not(.flip-card__face) {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Before the flip: the playing card faces the visitor, the real card waits on the back */
  html.js:not(.no-flip) .flip-card:not(.is-done) .flip-card__inner > :not(.flip-card__face) { transform: rotateY(180deg) !important; }
  html.js:not(.no-flip) .flip-card:not(.is-done) .flip-card__face {
    display: block; position: relative; z-index: 1;
    border-radius: var(--radius-lg);
    background:
      radial-gradient(ellipse at 50% 35%, rgba(233, 206, 127, 0.16), transparent 65%),
      radial-gradient(ellipse at 50% 50%, #1A3356 0%, #0B1A30 70%, #071120 100%);
    box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(233, 206, 127, 0.35), inset 0 0 0 8px #0B1A30, inset 0 0 0 9px rgba(233, 206, 127, 0.25);
  }
  html.js:not(.no-flip) .flip-card:not(.is-done) .flip-card__face img {
    position: absolute; inset: 1.4rem; width: calc(100% - 2.8rem); height: calc(100% - 2.8rem);
    object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
  }
  /* The flip */
  html.js:not(.no-flip) .flip-card.is-flipped:not(.is-done) .flip-card__inner { transform: rotateY(180deg); }
}

/* Chip version (About page team photos): same flip, sized exactly like the round photo */
.flip-card--team { display: block; width: min(180px, 100%); margin: 0 auto 1rem; perspective: 900px; }
.flip-card--team .img-slot { width: 100%; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-flip) .flip-card--team:not(.is-done) .flip-card__face {
    aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: #fff;
    border: 2px solid var(--gold-400); box-shadow: var(--shadow-card);
  }
  html.js:not(.no-flip) .flip-card--team:not(.is-done) .flip-card__face img {
    inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; transform: scale(1.03);
  }
}
.page-credit { margin: 0; padding: 0.9rem 1rem; text-align: center; font-size: 0.72rem; color: var(--ink-faint); background: var(--ivory); }
.page-credit a { color: inherit; }
.flip-card.is-settling .flip-card__inner,
.flip-card.is-settling .flip-card__inner > * { transition: none !important; }

/* ---------- Roulette wheel loading screens ----------
   The wheel picture never moves. The ball is drawn in CSS and circles the numbers
   counter-clockwise on a mahogany rim. Sizes are fractions of --size so it scales cleanly. */
.roulette { --size: 220px; position: relative; width: var(--size); height: var(--size); flex: none; }
.roulette__rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 0 79%, #2a140b 79.5%, #5a2e17 86%, #3a1d0f 93%, #c9a227 94%, #e9ce7f 95.5%, #8a6a1a 97.5%, transparent 98%);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}
.roulette__wheel { position: absolute; inset: 9%; width: 82%; height: 82%; }
.roulette__logo { position: absolute; inset: 29%; width: 42%; height: 42%; border-radius: 50%; }
.roulette__orbit { position: absolute; inset: 0; animation: kft-roulette-orbit 1.15s linear infinite; }
.roulette__ball {
  position: absolute; left: 50%; top: 50%; width: 6.5%; height: 6.5%; margin: -3.25% 0 0 -3.25%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0, #f2f2f2 30%, #c4c4c4 70%, #8d8d8d 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  transform: translateY(calc(var(--size) * -0.4375));
}
@keyframes kft-roulette-orbit { to { transform: rotate(-360deg); } } /* negative = counter-clockwise */

/* Full-page version (slow connections) */
.roulette-loader {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  background: radial-gradient(ellipse at 50% 40%, #10233F, #071120);
  animation: kft-fade-in 0.25s ease both;
}
.roulette-loader.is-leaving { animation: kft-fade-out 0.3s ease both; }
.roulette-loader__text, .roulette-dialog__status {
  margin: 0; color: var(--gold-300); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-align: center;
}
@keyframes kft-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kft-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Get Started form version: spins while sending, then the ball drops and a thank-you appears */
.roulette-dialog {
  border: 0; padding: 0; background: transparent; color: var(--ivory);
  max-width: min(440px, calc(100% - 2rem)); width: 100%; margin: auto;
}
.roulette-dialog::backdrop { background: rgba(7, 17, 32, 0.88); }
.roulette-dialog__panel {
  display: grid; justify-items: center; gap: 1.3rem; text-align: center;
  padding: clamp(1.6rem, 5vw, 2.4rem); border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 50% 25%, #1A3356 0%, #0B1A30 65%, #071120 100%);
  border: 1px solid rgba(233, 206, 127, 0.35); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.roulette-dialog .roulette { --size: min(220px, 62vw); }
.roulette-dialog__done { display: grid; justify-items: center; gap: 0.7rem; animation: kft-fade-in 0.4s ease both; }
.roulette-dialog__done[hidden] { display: none; }
.roulette-dialog__title { margin: 0; color: var(--ivory); font-size: clamp(1.7rem, 5vw, 2.2rem); }
.roulette-dialog__title:focus { outline: none; }
.roulette-dialog__lead { margin: 0; color: var(--gold-300); font-family: var(--font-display); font-size: 1.15rem; }
.roulette-dialog__text { margin: 0; color: rgba(251, 247, 238, 0.88); }
.roulette-dialog__done .btn { margin-top: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .roulette__orbit { animation: none; } /* the ball simply rests on the rim */
  .roulette-loader, .roulette-loader.is-leaving, .roulette-dialog__done { animation: none; }
}
@media (forced-colors: active) {
  .roulette__ball { forced-color-adjust: none; }
}

/* ---------- Larger logo (header + footer) ----------
   The artwork is square, so inside a circle its corners need room.
   Sizes below keep every bit of "KENNETH FROOM TOURS, INC." clear
   of the gold ring (the artwork needs ~52% of its width as radius). */
/* The logo is no longer trimmed into its own smaller circle (that made
   a second "inner border" and clipped the cards/lettering). Only the gold
   ring frames it now, with a thin navy gap. */
.brand__mark { width: 98px; height: 98px; border-width: 2px; }
.brand__mark img { padding: 5px; border-radius: 0; }
.site-footer .brand__mark { width: 112px; height: 112px; }
.brand__name { font-size: 1.24rem; }
@media (max-width: 47.5em) {
  .brand__mark { width: 72px; height: 72px; }
  .brand__mark img { padding: 4px; }
  .brand__name { font-size: 1.05rem; }
  .brand__name small { letter-spacing: 0.3em; }
}

/* ---------- Home banner: stronger shade behind the white text ----------
   Extra darkness on the left (where the words sit) while the ship still
   shows on the right, plus a soft shadow under the letters. */
.hero:not(.hero--compact) {
  background:
    linear-gradient(90deg, rgba(7, 17, 32, 0.78) 0%, rgba(7, 17, 32, 0.5) 60%, rgba(7, 17, 32, 0.3) 100%),
    linear-gradient(180deg, rgba(7, 17, 32, 0.72) 0%, rgba(11, 26, 48, 0.55) 45%, rgba(7, 17, 32, 0.9) 100%),
    var(--hero-image, none),
    radial-gradient(ellipse 120% 80% at 70% 10%, #1A3356 0%, #0B1A30 55%, #071120 100%);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
}
.hero:not(.hero--compact) h1,
.hero:not(.hero--compact) .hero__lede,
.hero:not(.hero--compact) .hero__note,
.hero:not(.hero--compact) .kicker { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); }
.hero:not(.hero--compact) .gold-script { text-shadow: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); }
.hero:not(.hero--compact) .hero__lede { color: #fff; font-weight: 500; }
@media (max-width: 47.5em) {
  /* On phones the words cover the whole photo, so shade it evenly */
  .hero:not(.hero--compact) {
    background:
      linear-gradient(180deg, rgba(7, 17, 32, 0.82) 0%, rgba(7, 17, 32, 0.72) 50%, rgba(7, 17, 32, 0.9) 100%),
      var(--hero-image, none),
      radial-gradient(ellipse 120% 80% at 70% 10%, #1A3356 0%, #0B1A30 55%, #071120 100%);
    background-size: cover, cover, cover;
    background-position: center, center, center;
  }
}

/* ---------- Casino terms (Site Settings → Casino terms) ---------- */
.fine-print {
  margin: 2.5rem auto 0;
  max-width: 760px;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--sand);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-soft, #4a4f5a);
}
.fine-print p { margin: 0; }
.fine-print strong { color: var(--ink); }
.fine-print--center { text-align: left; }
.fine-print--form { margin: 0 0 1.4rem; max-width: none; }
.fine-print-pointer { font-size: 0.84rem; color: var(--ink-soft, #4a4f5a); margin-top: 1.6rem; }
.fine-print-pointer a { text-decoration: underline; }
.on-dark .fine-print { background: rgba(255, 255, 255, 0.06); color: rgba(251, 247, 238, 0.85); border-color: rgba(233, 206, 127, 0.3); }
.on-dark .fine-print strong { color: var(--ivory); }

/* Problem-gambling help line at the bottom of every page */
.site-footer__help {
  margin: 0 0 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(233, 206, 127, 0.15);
  font-size: 0.82rem;
  color: rgba(251, 247, 238, 0.7);
}
.site-footer__help a { color: var(--gold-300); text-decoration: underline; }
@media (max-width: 40em) {
  /* Stack the two numbers with "or" between them on phones */
  .cta-band__phones { flex-direction: column; align-items: center; row-gap: 0.35rem; }
}

/* ---------- Home banner slideshow (Page: Home → Banner: slideshow photos) ----------
   Photos crossfade every 7 seconds and drift with a slow zoom/pan.
   The same dark shade as before sits on top so the white text stays readable. */
.hero--slides { background: #071120; }
.hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hero__slide.is-prev { opacity: 1; z-index: 1; }
.hero__slide.is-active { opacity: 1; z-index: 2; transition: opacity 1.8s ease; }
.hero__slide picture, .hero__slide img { display: block; width: 100%; height: 100%; }
.hero__slide img {
  object-fit: cover;
  transform: var(--kb-from);
  will-change: transform;
}
.hero__slide.is-active img,
.hero__slide.is-prev img { animation: kft-ken-burns 10s linear forwards; }
.hero__slides.is-paused img { animation-play-state: paused; }
@keyframes kft-ken-burns {
  from { transform: var(--kb-from); }
  to   { transform: var(--kb-to); }
}
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(7, 17, 32, 0.78) 0%, rgba(7, 17, 32, 0.5) 60%, rgba(7, 17, 32, 0.3) 100%),
    linear-gradient(180deg, rgba(7, 17, 32, 0.72) 0%, rgba(11, 26, 48, 0.55) 45%, rgba(7, 17, 32, 0.9) 100%);
}
@media (max-width: 47.5em) {
  .hero__slides::after {
    background: linear-gradient(180deg, rgba(7, 17, 32, 0.82) 0%, rgba(7, 17, 32, 0.72) 50%, rgba(7, 17, 32, 0.9) 100%);
  }
}
/* Visitors who ask their device for less motion get a still photo */
@media (prefers-reduced-motion: reduce) {
  .hero__slide img, .hero__slide.is-active img, .hero__slide.is-prev img { animation: none; transform: none; }
  .hero__slide.is-active { transition: none; }
}

/* Small pause / play button for the moving photos (bottom-right of the banner) */
.hero__pause {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(233, 206, 127, 0.55);
  background: rgba(7, 17, 32, 0.55);
  color: var(--gold-300);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero__pause:hover { background: rgba(7, 17, 32, 0.85); border-color: var(--gold-300); }
.hero__pause-icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.hero__pause[aria-pressed="true"] .hero__pause-icon {
  width: 0; height: 0; border-right: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid currentColor;
  margin-left: 3px;
}
@media (forced-colors: active) {
  .hero__pause { border-color: ButtonText; }
  .hero__pause-icon { forced-color-adjust: none; color: ButtonText; }
}

/* ---------- Logo beside the first banner on every page ----------
   (Moved out of the header, where it made the bar too tall.)
   Home: logo then the left-aligned words. Other pages: logo on the left,
   words still centered on the page (an empty column of the same width on
   the right keeps them centered). Phones: logo sits above the words. */
.hero-logo {
  --size: 190px;
  width: var(--size);
  height: var(--size);
  flex: none;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(233, 206, 127, 0.18), transparent 60%),
    var(--navy-900);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.hero-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
}
.hero__inner--logo {
  --logo-col: 190px;
  display: grid;
  grid-template-columns: var(--logo-col) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1060px;
}
.hero__inner--logo > * { grid-column: 2; }
.hero__inner--logo > .hero-brand { grid-column: 1; grid-row: 1 / span 12; align-self: center; }
/* Home: line the logo up with the small heading + big headline, not the whole block */
.hero__inner--logo:not(.hero__inner--center) > .hero-brand { grid-row: 1 / span 2; }
.hero__inner--logo.hero__inner--center {
  --logo-col: 150px;
  grid-template-columns: var(--logo-col) minmax(0, 1fr) var(--logo-col);
  max-width: none;
  width: min(var(--maxw), 100% - 3rem);
}
.hero__inner--center .hero-logo { --size: 150px; }

@media (max-width: 61.25em) {
  .hero__inner--logo.hero__inner--center { grid-template-columns: minmax(0, 1fr); }
  .hero__inner--logo.hero__inner--center > * { grid-column: 1; }
  .hero__inner--logo.hero__inner--center > .hero-brand { grid-row: auto; justify-self: center; margin-bottom: 1.6rem; }
  .hero__inner--center .hero-logo { --size: 116px; }
  .hero__inner--logo:not(.hero__inner--center) { --logo-col: 140px; }
  .hero__inner--logo:not(.hero__inner--center) .hero-logo { --size: 140px; }
}
@media (max-width: 47.5em) {
  .hero__inner--logo:not(.hero__inner--center) { grid-template-columns: minmax(0, 1fr); }
  .hero__inner--logo:not(.hero__inner--center) > * { grid-column: 1; }
  .hero__inner--logo:not(.hero__inner--center) > .hero-brand { grid-row: auto; justify-self: start; margin-bottom: 1.6rem; }
  .hero__inner--logo:not(.hero__inner--center) .hero-logo { --size: 104px; }
  .hero__inner--center .hero-logo { --size: 104px; }
}
@media (forced-colors: active) { .hero-logo { border-color: CanvasText; } }

/* ---------- Wider layout on big monitors (e.g. 1920×1080 at 100% zoom) ----------
   The page used to stay 1180px wide on every screen, leaving wide empty
   margins on a 1920px monitor. Larger screens now use more of the width. */
@media (min-width: 90em)  { :root { --maxw: 1320px; } }   /* 1440px+ screens */
@media (min-width: 105em) { :root { --maxw: 1480px; } }   /* 1680px+ screens, incl. 1920 */
@media (min-width: 105em) {
  .hero__inner--logo:not(.hero__inner--center) { max-width: 1200px; --logo-col: 220px; }
  .hero__inner--logo:not(.hero__inner--center) .hero-logo { --size: 220px; }
}

/* ---------- Gold italic headline words: never clip the last letter ----------
   The gold colour is painted inside the text box, and slanted letters at the
   end of a line (like the P in "VIP") lean past it. A little padding on each
   line piece gives them room without moving anything. */
.gold-script {
  padding-inline: 0.14em;
  margin-inline: -0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Logo back in the header (smaller), big logo + "Est. 1982" on the home banner ---------- */
.site-header .brand__mark { width: 84px; height: 84px; }
.site-header .brand__mark img { padding: 4px; }
@media (max-width: 47.5em) {
  .site-header .brand__mark { width: 60px; height: 60px; }
  .site-header .brand__mark img { padding: 3px; }
}
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
}
.hero-brand__est {
  margin: 0;
  padding-left: 0.4em; /* balances the letter-spacing so the words sit centred under the logo */
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.hero__inner--logo:not(.hero__inner--center) > .hero-brand { grid-row: 1 / span 3; }
@media (max-width: 47.5em) {
  .hero__inner--logo:not(.hero__inner--center) > .hero-brand { grid-row: auto; }
  .hero-brand__est { font-size: 0.72rem; }
}

/* ---------- Tighter spacing above and below each section ----------
   Requested by the team: about 20px of space at the top and bottom of
   every content section (it used to be 72-128px). The banners at the top
   of each page are trimmed too, but keep a little more room so the
   headline isn't pressed against the menu. */
:root { --space-section: 1.25rem; }               /* 20px */
.comps-video, .post, .cross-link { padding-block: 1.25rem; }
.choice-section { padding-top: 1.25rem; }
.hero--compact { padding-block: clamp(2.25rem, 4vw, 3rem); }        /* 36-48px */
.hero:not(.hero--compact) { padding-block: clamp(3rem, 6vw, 4.5rem); } /* home banner: 48-72px */
.section-head { margin-bottom: 1.75rem; }

/* ---------- Home logo: "Est. 1982" inside the circle, under the artwork ----------
   The artwork is drawn a little smaller and higher so the words fit in the
   bottom of the ring without touching it (sizes are % so it scales). */
.hero-logo--est img {
  inset: auto;
  left: 15%;
  top: 6.5%;
  width: 70%;
  height: 70%;
  padding: 0;
}
.hero-logo__est {
  position: absolute;
  left: 0;
  right: 0;
  top: 79%;
  z-index: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: max(9px, calc(var(--size) * 0.062));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* balances the letter-spacing so it sits centred */
  text-transform: uppercase;
  color: var(--gold-300);
  white-space: nowrap;
}
@media (max-width: 47.5em) {
  .hero__inner--logo:not(.hero__inner--center) .hero-logo { --size: 124px; }
  .hero-logo__est { letter-spacing: 0.22em; padding-left: 0.22em; }
}

/* ---------- Lighter shade over the home slideshow (team request) ----------
   Still darkest behind the words on the left so the white text stays readable. */
.hero__slides::after {
  background:
    linear-gradient(90deg, rgba(7, 17, 32, 0.55) 0%, rgba(7, 17, 32, 0.3) 60%, rgba(7, 17, 32, 0.12) 100%),
    linear-gradient(180deg, rgba(7, 17, 32, 0.5) 0%, rgba(11, 26, 48, 0.3) 45%, rgba(7, 17, 32, 0.7) 100%);
}
@media (max-width: 47.5em) {
  .hero__slides::after {
    background: linear-gradient(180deg, rgba(7, 17, 32, 0.66) 0%, rgba(7, 17, 32, 0.52) 50%, rgba(7, 17, 32, 0.78) 100%);
  }
}

/* ---------- Meet the Team: playing-card-shaped headshots ----------
   Photos are the same shape as a playing card (5:7). A red or blue card back
   shows first and turns over to reveal the photo, like the Promotions cards.
   Faces are kept in view (the crop favours the top-middle of each photo). */
.team-card .img-slot {
  aspect-ratio: 5 / 7;
  border-radius: 12px;
  width: min(220px, 100%);
}
.team-card .img-slot::after { border-radius: 8px; inset: 6px; }
.team-card .img-slot img { object-fit: cover; object-position: center 22%; }
.flip-card--team { width: min(220px, 100%); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-flip) .flip-card--team:not(.is-done) .flip-card__face {
    aspect-ratio: 5 / 7;
    border: 0;
    border-radius: 12px;
    overflow: visible;
    background: var(--card-back, url("/assets/site/cards/card-back-red.webp")) center / 100% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 10px 18px rgba(11, 26, 48, 0.28));
  }
}
/* Card colours: a checkerboard that follows the number of photos per row.
   4 across (desktop): red blue red blue / blue red blue red */
.team-grid > * { --card-back: url("/assets/site/cards/card-back-blue.webp"); }
.team-grid > :is(:nth-child(8n+1), :nth-child(8n+3), :nth-child(8n+6), :nth-child(8n+8)) { --card-back: url("/assets/site/cards/card-back-red.webp"); }
@media (max-width: 61.25em) {
  /* 3 across (tablets): red blue red / blue red blue */
  .team-grid > :nth-child(n) { --card-back: url("/assets/site/cards/card-back-blue.webp"); }
  .team-grid > :nth-child(odd) { --card-back: url("/assets/site/cards/card-back-red.webp"); }
}
@media (max-width: 47.5em) {
  /* 2 across (phones): red blue / blue red */
  .team-grid > :nth-child(n) { --card-back: url("/assets/site/cards/card-back-blue.webp"); }
  .team-grid > :is(:nth-child(4n+1), :nth-child(4n+4)) { --card-back: url("/assets/site/cards/card-back-red.webp"); }
}
/* The small photo inside each person's pop-up matches */
.team-profile__photo,
.team-profile .team-profile__photo { width: 96px; height: auto; aspect-ratio: 5 / 7; border-radius: var(--radius); }
.team-profile__photo::after { border-radius: 3px; inset: 4px; }
.team-profile__photo img { object-fit: cover; object-position: center 22%; }

/* ==========================================================================
   Ken's Escorted Cruises (Home + Cruises page)
   Each sailing is simple bulleted text.
   ========================================================================== */
.escorted__accent { display: block; font-style: italic; color: var(--gold-600); }
.escorted__intro { max-width: 640px; margin: 0.9rem auto 0; color: var(--ink-soft); }

/* Perks panel: what Ken hosts on every sailing */
.xc-perks {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(233, 206, 127, 0.14), transparent 60%),
    var(--navy-900);
  color: rgba(251, 247, 238, 0.9);
  border: 1px solid rgba(233, 206, 127, 0.35);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2rem);
  margin: 0 auto 2rem;
  max-width: 1080px;
}
.xc-perks__heading {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.xc-perks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1.6rem; }
.xc-perk { display: flex; gap: 0.9rem; align-items: flex-start; }
.xc-perk__icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(233, 206, 127, 0.6); color: var(--gold-300);
}
.xc-perk__icon svg { width: 26px; height: 26px; }
.xc-perk__text { font-size: 0.93rem; line-height: 1.55; }
.xc-perk__text strong { display: block; color: var(--ivory); font-size: 1rem; margin-bottom: 0.15rem; }
@media (max-width: 61.25em) { .xc-perks__list { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Each sailing: simple bulleted text under a gold rule */
.xc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; max-width: 1080px; margin-inline: auto; }
.xc-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 47.5em) { .xc-grid, .xc-grid--compact { grid-template-columns: 1fr; gap: 1.6rem; } }
.xc { min-width: 0; border-top: 2px solid var(--gold-400); padding-top: 1rem; scroll-margin-top: 140px; }
.xc__title { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.3; color: var(--navy-900); }
.xc__list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.xc__list li { position: relative; padding-left: 1.1rem; }
.xc__list li::before { content: "◆"; position: absolute; left: 0; top: 0.55em; font-size: 0.55rem; line-height: 1; color: var(--gold-500, #C9A227); }
.xc__list strong { color: var(--navy-900); font-weight: 600; }
.xc__note { font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }
.xc__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: baseline; }
.xc__reserve { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-700); text-decoration: underline; text-decoration-color: var(--gold-400); text-underline-offset: 4px; }
.xc__reserve:hover { color: var(--navy-900); }
.xc__more { font-size: 0.85rem; color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.xc__more:hover { color: var(--gold-700); }


/* ---------- Gold strip under the home banner: diamonds evenly between the phrases ----------
   Each diamond is its own piece with the same space on both sides. On narrower
   screens the phrases stack, with a small diamond centred between each line. */
.assurance__inner { gap: 0.6rem 1.6rem; }
.assurance__item { display: block; margin-right: -0.1em; } /* cancels the letter-spacing after the last letter, so each diamond is optically centred */
.assurance__sep { color: var(--gold-400); font-size: 0.6rem; line-height: 1; }
@media (max-width: 68em) {
  .assurance__inner { flex-direction: column; gap: 0.45rem; }
  .assurance__sep { font-size: 0.5rem; }
}

/* ==========================================================================
   Language button ("A | 文") in the top bar, its menu, and the strip shown on translated pages
   ========================================================================== */
.topbar { position: relative; z-index: 60; } /* lets the language menu open over the sticky header */
.topbar__contacts { align-items: center; }
.lang-switch { position: relative; display: inline-flex; margin-left: 0.2rem; letter-spacing: normal; }
.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 27px;
  padding: 0 0.55rem 0 0.65rem;
  border: 1px solid rgba(233, 206, 127, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-300);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lang-switch__button:hover,
.lang-switch__button[aria-expanded="true"] { background: rgba(233, 206, 127, 0.12); border-color: var(--gold-300); color: var(--gold-200); }
.lang-switch__button:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.lang-switch__icon { display: inline-flex; align-items: center; gap: 0.38rem; line-height: 1; }
.lang-switch__a { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; }
.lang-switch__bar { width: 1px; height: 0.85rem; background: currentColor; opacity: 0.55; }
.lang-switch__zh { font-size: 0.85rem; font-weight: 500; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans", sans-serif; }
.lang-switch__caret {
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.lang-switch__button[aria-expanded="true"] .lang-switch__caret { transform: translateY(1px) rotate(-135deg); }
.lang-switch.is-busy .lang-switch__icon { animation: lang-pulse 1s ease-in-out infinite; }
@keyframes lang-pulse { 50% { opacity: 0.35; } }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 70;
  width: max-content;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(26rem, 70vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  white-space: normal;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: 400 0.92rem/1.3 var(--font-body);
  text-align: start;
  cursor: pointer;
}
.lang-switch__menu button::before { content: ""; flex: none; width: 0.9rem; height: 0.9rem; } /* room for the tick */
.lang-switch__menu button[aria-checked="true"] { font-weight: 600; color: var(--navy-900); }
.lang-switch__menu button[aria-checked="true"]::before { content: "\2713"; color: var(--gold-600); font-weight: 700; }
.lang-switch__menu button:hover,
.lang-switch__menu button:focus-visible { background: var(--parchment); outline: none; }
.lang-switch__menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--navy-700); }

.lang-note { background: var(--parchment); border-bottom: 1px solid var(--sand); color: var(--ink-soft); font-size: 0.88rem; }
.lang-note[hidden] { display: none; }
.lang-note__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-block: 0.55rem; text-align: center; }
.lang-note__inner p { margin: 0; }
.lang-note__button {
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--navy-700);
  border-radius: 999px;
  background: transparent;
  color: var(--navy-900);
  font: 500 0.82rem/1.4 var(--font-body);
  cursor: pointer;
}
.lang-note__button:hover { background: var(--navy-900); color: var(--ivory); }
.lang-note__button:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* Translated pages: menu words are often longer than the English ones, so let the menu wrap onto two lines instead of running off the edge. */
@media (min-width: 73.8125em) {
  html:not([lang="en"]) .nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.35rem; column-gap: 1.1rem; }
  html:not([lang="en"]) .nav a { letter-spacing: 0.06em; }
}
@media (max-width: 61.25em) {
  .topbar__inner { justify-content: center; }
  .topbar__contacts { flex-wrap: wrap; justify-content: center; white-space: normal; gap: 0.2rem 1.1rem; }
}
@media (max-width: 47.5em) {
  .lang-switch__menu { right: 50%; transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lang-switch.is-busy .lang-switch__icon { animation: none; opacity: 0.6; }
}