/* =========================================================
   Shodan Travels & Tours — public site design system
   Brand: navy #02215E / gold #C9A020, carried over from the
   staff dashboard so the public site and the internal app
   read as one company. Everything else (type, layout, the
   passport-stamp / boarding-pass motifs) is built fresh for
   a warmer, more editorial marketing feel than the app has.
   ========================================================= */

:root {
  --navy:        #02215E;
  --navy-deep:   #041333;
  --gold:        #C9A020;
  --gold-light:  #E4C766;
  --cream:       #FBF7EE;
  --paper:       #FFFDF8;
  --ink:         #1B2340;
  --slate:       #5B6478;
  --sky:         #2F86D6;
  --line:        rgba(2, 33, 94, 0.12);
  --white:       #FFFFFF;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-card: 0 10px 30px rgba(2, 33, 94, 0.08);
  --shadow-lift: 0 18px 40px rgba(2, 33, 94, 0.14);

  --container: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 4.2vw, 4rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; color: var(--slate); }
.lede { font-size: 1.15rem; color: var(--slate); max-width: 62ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,0.75); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.92rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy-deep); box-shadow: var(--shadow-card); }
.btn-gold:hover { background: var(--gold-light); box-shadow: var(--shadow-lift); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline { border-color: rgba(255,255,255,0.5); color: var(--white); background: transparent; }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Top utility bar + Nav ---------- */
.topbar {
  background: var(--navy-deep); color: rgba(255,255,255,0.8);
  font-size: 0.8rem; padding: 8px 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,0.85); }
.topbar a:hover { color: var(--gold-light); }
.topbar-links { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 20px; }
.topbar-social { display: flex; gap: 14px; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 253, 248, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; transition: padding 0.25s ease; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.brand-logo {
  height: 44px; width: auto; max-width: 220px;
  object-fit: contain; object-position: left center;
  flex-shrink: 0;
  transition: height 0.25s ease;
}
.brand-logo--footer { height: 48px; }

/* Smart sticky: once the page scrolls past the topbar, the header shrinks
   slightly and picks up a shadow so it reads as "floating" — see the
   scroll listener in main.js that toggles this class. */
.site-header.is-scrolled { box-shadow: var(--shadow-card); }
.site-header.is-scrolled .container { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-scrolled .brand-logo { height: 34px; }

/* ---------- Nav: single line + responsive "More" dropdown ----------
   Which items collapse into More is decided at runtime by nav-fit.js: it
   measures how much width the nav row actually has and moves items in
   from the tail (last item first) until the rest fit on one line, then
   mirrors that in the More panel. Nothing here is tied to a fixed
   breakpoint, so it adapts to any screen width, zoom level, or label
   length. Below the mobile breakpoint the whole thing hands off to the
   hamburger instead (see the max-width: 820px block below). */
.nav-links { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; min-width: 0; justify-content: center; }
.nav-item {
  font-size: 0.86rem; font-weight: 600; color: var(--ink);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-item:hover, .nav-item.active { color: var(--navy); border-bottom-color: var(--gold); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* "More" trigger + dropdown panel */
.nav-more { position: relative; flex-shrink: 0; display: none; }
.nav-more-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--ink);
  background: none; border: none; padding: 6px 2px; cursor: pointer; white-space: nowrap;
}
.nav-more-toggle:hover, .nav-more.open .nav-more-toggle { color: var(--navy); }
.nav-more-caret { transition: transform 0.2s ease; }
.nav-more.open .nav-more-caret { transform: rotate(180deg); }

.nav-more-panel {
  position: absolute; top: calc(100% + 16px); right: 0; z-index: 60;
  min-width: 220px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-more.open .nav-more-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-more-panel a {
  padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600;
  color: var(--ink);
  display: none; /* shown per-item by nav-fit.js only for the items currently overflowing */
}
.nav-more-panel a:hover, .nav-more-panel a.active { background: var(--cream); color: var(--navy); }

/* Hamburger (hidden on desktop, animates into an X when open) */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--white); cursor: pointer; flex-shrink: 0; padding: 0;
}
.nav-toggle-bar {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--navy); transition: transform 0.28s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Below this, there isn't room for an inline nav at all — hand off fully
   to the hamburger, which reveals every item (including the ones that
   would otherwise be tucked under More) in a single animated column. */
@media (max-width: 820px) {
  .topbar { display: none; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn-outline-navy { display: none; }
  .nav-cta-desktop { display: none; } /* replaced on mobile by nav-cta-mobile inside the dropdown */

  body.nav-open .nav-links {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); padding: 10px 24px 22px; border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 100%); overflow-y: auto;
    animation: nav-drop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* On mobile every item shows in one stacked list — nothing hides,
     and the More trigger/panel are redundant, so suppress both. */
  body.nav-open .nav-links > .nav-item { display: block; padding: 12px 4px; }
  body.nav-open .nav-links .nav-more { display: none; }
  body.nav-open .nav-links .nav-cta-mobile { display: block; text-align: center; margin-top: 12px; }
}
.nav-cta-mobile { display: none; }
@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Below this, the brand block and CTA can no longer both sit comfortably
   on one line — let the brand text shrink/truncate instead of forcing
   the row wider than the screen. */
@media (max-width: 560px) {
  .site-header .container { flex-wrap: wrap; row-gap: 8px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .nav-cta { flex: 0 0 auto; }
  .nav-cta .btn-gold { padding: 11px 18px; font-size: 0.85rem; }
}

@media (max-width: 400px) {
  .brand-logo { height: 36px; }
  .nav-cta .btn-gold { padding: 10px 14px; font-size: 0.8rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  color: var(--white);
  padding: 96px 0 120px;
}
/* Photo layer sits behind everything; a video (if the file exists at
   /assets/video/hero.mp4) plays on top of it. If there's no video yet,
   this photo is simply what visitors see — nothing breaks either way. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-media video { position: absolute; inset: 0; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,19,51,0.88) 0%, rgba(2,33,94,0.82) 55%, rgba(4,19,51,0.94) 100%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: var(--white); }
.hero .lede { color: rgba(255,255,255,0.78); }
.hero-stats { display: flex; gap: 32px; margin-top: 42px; flex-wrap: wrap; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--gold); }
.hero-stat span { font-size: 0.78rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.06em; }

/* Flight-path motif: dotted arc with a plane traveling between two pins */
.flight-path { position: relative; height: 320px; }
.flight-path svg { width: 100%; height: 100%; }
.flight-path .route-line {
  fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0.65;
}
.flight-path .plane {
  transform-box: fill-box; transform-origin: center;
  animation: fly-along 7s linear infinite;
}
@keyframes fly-along {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
.flight-path .plane-el { offset-path: path('M20,260 C120,60 260,300 380,40'); animation: fly-along 8s linear infinite; }
.flight-path .pin { fill: var(--gold); }
.flight-path .pin-label { fill: rgba(255,255,255,0.75); font-family: var(--font-body); font-size: 12px; font-weight: 700; }

/* ---------- Passport-stamp badge (signature element) ---------- */
.stamp {
  width: 58px; height: 58px; border-radius: 50%;
  border: 2.5px dashed var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--navy); transform: rotate(-8deg);
  background: var(--white);
  flex-shrink: 0;
}
.stamp--onnavy { border-color: var(--gold-light); color: var(--white); background: rgba(255,255,255,0.06); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--line); padding: 30px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.card h3 { margin-bottom: 6px; }
.card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; color: var(--navy); margin-top: 10px; }
.card-link::after { content: '→'; transition: transform 0.15s ease; }
.card:hover .card-link::after { transform: translateX(3px); }

.country-card { text-align: center; }
.country-card .stamp { margin: 0 auto 16px; }

/* ---------- Boarding-pass process steps ---------- */
.boarding-pass {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .boarding-pass { grid-template-columns: 1fr; } }
.pass-stub {
  padding: 30px 26px; position: relative;
  border-right: 1px dashed var(--line);
}
.pass-stub:last-child { border-right: none; }
@media (max-width: 900px) {
  .pass-stub { border-right: none; border-bottom: 1px dashed var(--line); }
  .pass-stub:last-child { border-bottom: none; }
}
.pass-step-no { font-family: var(--font-display); font-size: 0.75rem; color: var(--gold); font-weight: 700; letter-spacing: 0.1em; }
.pass-stub h3 { margin: 10px 0 8px; font-size: 1.1rem; }
.pass-stub p { font-size: 0.9rem; margin: 0; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  padding: 40px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.form-field .hint { font-size: 0.76rem; color: var(--slate); font-weight: 400; }
input, select, textarea {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: var(--paper); width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(201,160,32,0.18); }
textarea { resize: vertical; min-height: 100px; }

.file-drop {
  border: 2px dashed var(--line); border-radius: var(--radius-md);
  padding: 22px; text-align: center; background: var(--paper);
  font-size: 0.86rem; color: var(--slate);
}
.file-drop strong { color: var(--navy); }

.form-note { font-size: 0.8rem; color: var(--slate); margin-top: 14px; }

.form-alert {
  border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.88rem; font-weight: 600;
  margin-bottom: 20px; border: 1.5px solid transparent;
}
.form-alert--success { background: rgba(30,126,52,0.09); border-color: rgba(30,126,52,0.35); color: #1e7e34; }
.form-alert--error   { background: rgba(179,38,30,0.08); border-color: rgba(179,38,30,0.3); color: #b3261e; }

/* ---------- Testimonials ---------- */
.testimonial-card { position: relative; }
.testimonial-card .quote-mark { font-family: var(--font-display); font-size: 3rem; color: var(--gold-light); line-height: 1; margin-bottom: 4px; }
.testimonial-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); text-transform: uppercase; margin-top: 14px; }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 4px;
  font-weight: 700; color: var(--navy); font-family: var(--font-display); font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--gold); flex-shrink: 0; transition: transform 0.15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 20px; margin: 0; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-lg); padding: 56px; color: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-banner h2 { color: var(--white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,0.75); margin: 0; }

/* ---------- Card thumbnails (photo-topped cards) ---------- */
.card-photo { margin: -30px -30px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; aspect-ratio: 16/10; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .card-photo img { transform: scale(1.06); }
.country-card .card-photo { aspect-ratio: 4/3; }

/* ---------- Photo page headers ---------- */
.page-header--photo {
  position: relative; background-size: cover; background-position: center;
  color: var(--white); overflow: hidden;
}
.page-header--photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,19,51,0.86) 0%, rgba(4,19,51,0.88) 100%);
}
.page-header--photo .container { position: relative; z-index: 1; }
.page-header--photo .breadcrumb, .page-header--photo .breadcrumb a { color: rgba(255,255,255,0.75); }
.page-header--photo h1 { color: var(--white); }
.page-header--photo .lede { color: rgba(255,255,255,0.8); }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-tile {
  aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden;
  position: relative; box-shadow: var(--shadow-card);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-tile:hover img { transform: scale(1.08); }
.gallery-tile span {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 28px 14px 14px; color: var(--white); font-weight: 700; font-size: 0.85rem;
  background: linear-gradient(0deg, rgba(2,19,51,0.85) 0%, rgba(2,19,51,0) 100%);
}
.gallery-tile--video { grid-column: span 2; grid-row: span 2; }
@media (max-width: 620px) { .gallery-tile--video { grid-column: span 2; grid-row: span 1; } }
.gallery-tile--video video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Avatars ---------- */
.avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream); flex-shrink: 0; }
.testimonial-byline { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.7); padding: 64px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--white); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a:hover { color: var(--gold-light); }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--gold-light); }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: var(--gold-light);
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { background: var(--gold); color: var(--navy-deep); }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem;
}
.footer-credit a { color: var(--gold-light); font-weight: 600; }
.footer-credit a:hover { color: var(--gold); }

/* ---------- Sticky WhatsApp ---------- */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center; color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); font-size: 1.5rem;
}

/* ---------- Breadcrumb / page header for inner pages ---------- */
.page-header { background: var(--cream); padding: 56px 0 44px; border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 0.8rem; color: var(--slate); margin-bottom: 12px; }
.breadcrumb a { color: var(--navy); font-weight: 600; }

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.pill { background: var(--cream); border: 1px solid var(--line); color: var(--navy); font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; }

.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

table.simple-table { width: 100%; border-collapse: collapse; }
table.simple-table th, table.simple-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
table.simple-table th { color: var(--navy); font-family: var(--font-display); font-weight: 600; }