/* ==========================================================================
   Bandhavgarh Safari Booking - shared stylesheet
   Palette is built around the logo: dark charcoal wordmark on transparent,
   so the header is LIGHT. Never invert the logo.
   ========================================================================== */

:root {
  --ink:        #1b1815;
  --ink-2:      #453d34;
  --ink-3:      #6b6156;
  --forest:     #14342a;
  --forest-2:   #1f4a3a;
  --tiger:      #c2510c;
  --tiger-2:    #e07a2f;
  --tiger-soft: #fdf1e6;
  --sand:       #fbf7f0;
  --sand-2:     #f4ede1;
  --paper:      #ffffff;
  --line:       #e7dfd2;
  --line-2:     #d6cab6;
  --ok:         #15803d;
  --err:        #b42318;

  --wrap:  1180px;
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  22px;

  --sh-1: 0 1px 2px rgba(27, 24, 21, .06), 0 2px 8px rgba(27, 24, 21, .05);
  --sh-2: 0 4px 14px rgba(27, 24, 21, .08), 0 14px 40px rgba(27, 24, 21, .08);
  --sh-3: 0 20px 60px rgba(27, 24, 21, .22);

  --head-h: 74px;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  /* `hidden` here silently kills position:sticky on every descendant.
     `clip` does not. Keep `hidden` first as the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.012em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 700; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--tiger); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest); }

strong, b { color: var(--ink); font-weight: 650; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.3em; }
li { margin: 0 0 .45em; }
li::marker { color: var(--tiger-2); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2rem 0;
}

:focus-visible {
  outline: 3px solid var(--tiger);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--forest);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: 0; color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--head-h);
}

.brand { flex: 0 0 auto; display: block; line-height: 0; }
.brand img { width: 186px; height: auto; }

.nav-desk { margin-left: auto; }
.nav-desk ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.nav-link:hover { background: var(--sand-2); color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--tiger); background: var(--tiger-soft); }

.head-cta { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 19px; height: 2px;
  margin: 4px auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mob {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 20px 20px;
}
.nav-mob[hidden] { display: none; }
.nav-mob ul { list-style: none; margin: 0 0 14px; padding: 0; }
.nav-mob li { margin: 0; border-bottom: 1px solid var(--line); }
.mob-link {
  display: block;
  padding: 14px 4px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.mob-link[aria-current="page"] { color: var(--tiger); }
.nav-mob-cta { display: grid; gap: 10px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--tiger-2), var(--tiger));
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn-primary:hover { color: #fff; box-shadow: var(--sh-2); }

.btn-dark { background: var(--forest); color: #fff; }
.btn-dark:hover { background: var(--forest-2); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--sand-2); color: var(--ink); border-color: var(--ink-3); }

.btn-light { background: #fff; color: var(--forest); }
.btn-light:hover { background: var(--sand-2); color: var(--forest); }

.btn-wa { background: #25d366; color: #0b3d21; }
.btn-wa:hover { background: #1fbe5a; color: #0b3d21; }

.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- sections */

.section { padding: clamp(48px, 6vw, 84px) 0; }
.section-sand { background: var(--sand-2); }
.section-paper { background: var(--paper); }
.section-forest { background: var(--forest); color: #d9e5de; }
.section-forest h1, .section-forest h2, .section-forest h3 { color: #fff; }

.sec-head { max-width: 62ch; margin-bottom: clamp(28px, 3.5vw, 44px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--ink-3); font-size: 1.06rem; }
.section-forest .sec-head p { color: #b8cbc1; }

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--tiger-soft);
  color: var(--tiger);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.section-forest .eyebrow { background: rgba(255, 255, 255, .12); color: #f6c79a; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--forest);
  color: #e6efe9;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(224, 122, 47, .30), transparent 58%),
    linear-gradient(180deg, rgba(10, 26, 20, .82) 0%, rgba(10, 26, 20, .62) 45%, rgba(10, 26, 20, .90) 100%);
  z-index: 1;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 2;
  /* padding-block only: a `padding` shorthand here would wipe out the
     20px side gutter that .wrap sets, pushing text to the screen edge. */
  padding-block: clamp(56px, 8vw, 110px) clamp(48px, 6vw, 84px);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero-lead {
  max-width: 56ch;
  margin-top: 18px;
  font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem);
  color: #cfdfd7;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.hero-stats li { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.hero-stats b {
  font-family: var(--serif);
  font-size: 1.32rem;
  color: #fff;
  font-weight: 700;
}
.hero-stats span { font-size: .9rem; color: #a9c1b5; }

/* page hero for interior pages */
.phero {
  position: relative;
  background: var(--forest);
  color: #cfdfd7;
  overflow: hidden;
}
.phero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 20, .78), rgba(10, 26, 20, .93));
  z-index: 1;
}
.phero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* padding-block only - see the note on .hero-inner. */
.phero-inner { position: relative; z-index: 2; padding-block: clamp(40px, 5.5vw, 72px); }
.phero h1 { color: #fff; max-width: 22ch; }
.phero p { max-width: 62ch; margin-top: 14px; color: #c3d6cb; }
.phero .btn { margin-top: 24px; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px; padding: 0;
  list-style: none;
  font-size: .85rem;
}
.crumbs li { margin: 0; color: #9db5a8; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #6d8c7c; }
.crumbs a { color: #cfe0d6; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
/* min(Npx, 100%) lets the track collapse below its ideal width on a phone.
   A bare minmax(300px, 1fr) forces the grid wider than the screen when it is
   nested inside another grid. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh-1);
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

.card-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--tiger-soft);
  color: var(--tiger);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
}

.tick, .cross {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tick li, .cross li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
}
.tick li:last-child, .cross li:last-child { margin-bottom: 0; }
.tick li::before, .cross li::before {
  position: absolute;
  left: 0; top: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tick li::before { content: "\2713"; background: #dcf1e3; color: var(--ok); }
.cross li::before { content: "\2715"; background: #fbe4e2; color: var(--err); }
.tick strong, .cross strong { display: block; margin-bottom: 2px; }

/* package card */

.pack {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.pack-top {
  padding: 26px 26px 22px;
  background: linear-gradient(160deg, var(--forest), var(--forest-2));
  color: #d3e3da;
}
.pack-top h3 { color: #fff; margin-bottom: 14px; }
.pack-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pack-now {
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.pack-was { text-decoration: line-through; color: #8fab9c; font-size: 1.05rem; }
.pack-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #f6c79a;
  font-size: .78rem;
  font-weight: 650;
}
.pack-body { padding: 24px 26px 26px; }
.pack-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 0 0 20px; padding: 0 0 18px;
  list-style: none;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.pack-meta li { margin: 0; color: var(--ink-3); }
.pack-meta b { color: var(--ink); }
.pack-note { margin-top: 16px; font-size: .86rem; color: var(--ink-3); }

/* stat / review strip */

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding: 18px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.strip-item { display: flex; align-items: baseline; gap: 8px; }
.strip-item b { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.strip-item span { font-size: .9rem; color: var(--ink-3); }
.stars { color: var(--tiger-2); letter-spacing: .06em; }

/* media + text */

.media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.split { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; }
.split > * { min-width: 0; }
.article-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.narrow-media { grid-template-columns: 1.1fr .9fr; }
}

/* blog cards */

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card .post-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.16rem; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--tiger); }
.post-more { margin-top: auto; padding-top: 14px; font-weight: 650; font-size: .92rem; }

/* ----------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh-1);
  margin: 0 0 1.4em;
}
.table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .95rem;
}
.table-wrap th, .table-wrap td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table-wrap thead th {
  background: var(--forest);
  color: #fff;
  font-family: var(--sans);
  font-weight: 650;
  font-size: .86rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-wrap tbody tr:nth-child(even) { background: var(--sand); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody th { background: var(--sand-2); font-weight: 650; color: var(--ink); white-space: nowrap; }
.table-scroll-hint {
  margin: -1em 0 1.4em;
  font-size: .82rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- accordion */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tiger);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--sand); }
.faq .faq-body { padding: 0 22px 20px; }
.faq .faq-body > :first-child { margin-top: 0; }

/* ------------------------------------------------------- article + sidebar */

.article-shell { padding: clamp(36px, 4.5vw, 64px) 0; }

@media (min-width: 1000px) {
  .article-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
}

.toc {
  display: none;
  position: sticky;
  top: calc(var(--head-h) + 20px);
  max-height: calc(100vh - var(--head-h) - 44px);
  overflow-y: auto;
  padding: 20px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
@media (min-width: 1000px) { .toc { display: block; } }
.toc h2 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 7px 10px;
  border-left: 2px solid var(--line);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.toc a:hover { color: var(--ink); background: var(--sand); }
.toc a.is-active {
  color: var(--tiger);
  border-left-color: var(--tiger);
  background: var(--tiger-soft);
  font-weight: 600;
}

.prose { max-width: 74ch; }
.prose > h2 {
  margin-top: 2.1em;
  padding-top: .1em;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.7em; }
.prose img { border-radius: var(--r); border: 1px solid var(--line); margin: 1.6em 0; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 8px; font-size: .86rem; color: var(--ink-3); }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--tiger-2);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
}

.callout {
  margin: 1.8em 0;
  padding: 22px 24px;
  background: var(--tiger-soft);
  border: 1px solid #f2d9c2;
  border-radius: var(--r);
}
.callout h3 { margin-bottom: .35em; }
.callout.forest { background: #eef4f0; border-color: #d3e3da; }

/* ------------------------------------------------------------------ forms */

.lead-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 600; color: var(--ink); }
.field input {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #a79c8e; }
.field input:focus {
  outline: none;
  border-color: var(--tiger);
  box-shadow: 0 0 0 3px rgba(224, 122, 47, .18);
}
.field input[aria-invalid="true"] { border-color: var(--err); }

.form-msg {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  min-height: 0;
}
.form-msg:empty { display: none; }
.form-msg.is-ok { color: var(--ok); font-weight: 600; }
.form-msg.is-err { color: var(--err); font-weight: 600; }
.form-msg a { color: inherit; }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--sh-2);
}
.form-card h2 { font-size: 1.5rem; }
.form-card .form-sub { color: var(--ink-3); margin-bottom: 20px; }

.section-forest .form-card { color: var(--ink-2); }

/* ------------------------------------------------------------------ modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(15, 26, 21, .62); backdrop-filter: blur(3px); }
.modal-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px 28px 28px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: pop .22s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-card h2 { font-size: 1.55rem; margin-bottom: .3em; }
.modal-sub { color: var(--ink-3); font-size: .94rem; margin-bottom: 20px; }
.modal-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sand-2);
  border: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.modal-x:hover { background: var(--line); }
body.modal-open { overflow: hidden; }

/* ------------------------------------------------------------- wa floater */

.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  background: #25d366;
  color: #08331b;
  border-radius: 999px;
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
  transition: transform .16s ease, box-shadow .16s ease;
}
.wa-float:hover { transform: translateY(-2px); color: #08331b; box-shadow: 0 10px 30px rgba(37, 211, 102, .55); }
@media (max-width: 640px) {
  .wa-float { padding: 13px; right: 14px; bottom: 14px; }
  .wa-float span { display: none; }
}

/* ----------------------------------------------------------------- footer */

.site-foot {
  background: var(--forest);
  color: #a9c1b5;
  padding-top: clamp(44px, 5vw, 68px);
  font-size: .95rem;
}
/* Explicit steps rather than auto-fit: auto-fit produced an awkward
   2-column footer on large phones and small tablets. */
.foot-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  padding-bottom: 38px;
}
.foot-brand { max-width: 320px; }

@media (min-width: 760px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (min-width: 1000px) {
  .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
  .foot-brand { grid-column: auto; max-width: 320px; }
}
.foot-logo {
  width: 190px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 10px;
}
.foot-note { margin: 16px 0 18px; font-size: .9rem; line-height: 1.6; }
.foot-note strong { color: #fff; }
.site-foot h2 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 9px; }
.foot-col a, .foot-contact a {
  color: #a9c1b5;
  text-decoration: none;
}
.foot-col a:hover, .foot-contact a:hover { color: #fff; text-decoration: underline; }
.foot-col a[aria-current="page"] { color: #f6c79a; }
.foot-contact address { font-style: normal; line-height: 1.7; margin-bottom: 12px; }
.foot-contact p { margin-bottom: 6px; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 20px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .86rem;
}
.foot-bottom p { margin: 0; }
.foot-bottom a { color: #a9c1b5; text-decoration: none; }
.foot-bottom a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------- misc */

.lede { font-size: 1.12rem; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1.05em; }

.cta-band {
  background: linear-gradient(140deg, var(--forest), #0e2920);
  color: #cfdfd7;
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 46px);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 56ch; margin-inline: auto; color: #b8cbc1; }
.cta-band .btn { margin-top: 22px; }

/* Safari zone cards: photo on top, copy below. */
.zone-list {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.zone-list > * { min-width: 0; }
.zone-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.zone-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  margin: 0;
}
.zone-body { padding: 20px 22px 22px; }
.zone-body h3 { margin-bottom: .4em; }
.zone-body p { margin-bottom: 0; font-size: .96rem; }

/* --------------------------------------------------------- responsive nav */

/* 1080, not 1000: between roughly 1000 and 1060 the logo, five nav links and
   the two header buttons no longer fit on one line, and the CTA spilled past
   the right edge. The burger takes over before that happens. */
@media (max-width: 1080px) {
  .nav-desk, .head-cta { display: none; }
  .burger { display: block; }
  .brand img { width: 160px; }
}
@media (max-width: 420px) {
  .brand img { width: 138px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .post-card:hover, .wa-float:hover { transform: none; }
}

@media print {
  .site-head, .site-foot, .wa-float, .modal, .toc, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------ legal pages */

.prose-legal { max-width: 78ch; }
.prose-legal h2 {
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  margin-top: 2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.prose-legal h2#toc { border-top: 0; }
.toc-list {
  columns: 2;
  column-gap: 34px;
  padding-left: 1.4em;
  font-size: .95rem;
}
.toc-list li { break-inside: avoid; }
@media (max-width: 620px) { .toc-list { columns: 1; } }

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

/* Long unbroken strings (URLs in the legal pages) were overflowing the
   viewport and being clipped by overflow-x: clip. */
body { overflow-wrap: break-word; }
.prose a, .prose p, .prose li, .foot-contact, .crumbs { overflow-wrap: anywhere; }

/* Make a horizontally scrollable table look scrollable: a soft edge fade
   that disappears once the table is scrolled to the end. */
.table-wrap {
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--paper) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(27, 24, 21, .16), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(27, 24, 21, .16), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

@media (max-width: 760px) {
  /* Tables get a swipe hint, since the content is wider than the screen. */
  .table-wrap::after {
    content: "Swipe the table sideways to see every column";
    display: block;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--ink-3);
  }
  .table-wrap table { min-width: 440px; }
}

/* Touch targets: give small links a real tappable area on touch devices
   without changing how they look. */
@media (pointer: coarse) {
  .foot-col li { margin-bottom: 2px; }
  .foot-col a,
  .foot-contact a,
  .foot-bottom a { display: inline-block; padding-block: 9px; }
  .crumbs a { display: inline-block; padding-block: 8px; }
  .toc-list a { display: inline-block; padding-block: 7px; }
  .btn-sm { padding: 12px 18px; }
}

/* Mobile browser chrome makes 100vh taller than the visible area, so the
   modal could run off-screen. dvh tracks the real viewport. */
.modal-card { max-height: calc(100dvh - 40px); }
.toc { max-height: calc(100dvh - var(--head-h) - 44px); }

@media (max-width: 640px) {
  :root { --head-h: 66px; }

  body { font-size: 16px; }

  .modal { padding: 12px; }
  .modal-card { padding: 26px 20px 22px; }

  /* Full-width CTAs read better than side-by-side half buttons. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  .hero-stats { gap: 8px 22px; }
  .hero-stats b { font-size: 1.15rem; }

  .cta-band .btn,
  .phero .btn { width: 100%; }

  .foot-bottom { flex-direction: column; gap: 6px; }
}

/* Struck-through former price shown beside a current price. */
.was {
  margin-left: 6px;
  color: var(--ink-3);
  text-decoration: line-through;
  font-weight: 400;
}

/* "Temporarily unavailable" marker on a service that is not running. */
.tag-off {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sand-2);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.note-off {
  padding: 10px 14px;
  border-left: 3px solid var(--line-2);
  background: var(--sand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .94rem;
}