:root {
  --purple: #7047eb;
  --gradient-cta: linear-gradient(90deg, #5b3df6 0%, #2f8ef4 30%, #e94fa1 65%, #f7941e 100%);
  --purple-hover: #5f38d6;
  --text-dark: #101014;
  --text-muted: #9b9ba3;
  --text-body: #55555e;
  --border: rgba(16,16,20,0.08);
  --bg: #ffffff;
  --pill-lavender: #f1edfd;
  --btn-gray: #f2f1f4;
  --card-gray: #f6f5f8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; background: var(--bg); }

body {
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-dark);
  background: var(--bg);
  font-size: 16px;
  overflow-x: hidden;
}

/* Own our own surface. Some hosts ship a parent/other theme (Astra) or leave
   Customizer / global-styles background CSS in the DB that loads after this
   file and tints the page. #main-content wraps every template's output
   (see header.php), so painting it here keeps the theme independent of that. */
#main-content { background: var(--bg); }
body.blog #main-content,
body.archive #main-content,
body.search #main-content,
body.error404 #main-content { background: var(--bg) !important; }

/* Minimal reveal — one gentle fade-up per section as it scrolls in.
   Class hooks are added by main.js; nothing hides without JS, and it is
   fully off when the visitor asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================
   NAVBAR
   ========================================================== */
.navbar {
  /* Bar spans the viewport (background + border), contents do not */
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Same 1240px column and 44px gutter as .hero, so the logo lines up with the
   headline below it. Three grid tracks (1fr auto 1fr) centre the links on the
   page rather than between two side blocks of unequal width. */
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.logo { justify-self: start; }
.logo img { height: 34px; width: auto; display: block; }

.nav-links { display: flex; gap: 34px; list-style: none !important; margin: 0 !important; padding: 0 !important; justify-self: center; }

.nav-links li { margin: 0 !important; padding: 0 !important; }

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: opacity 0.18s ease;
}

.nav-links a:hover { opacity: 0.55; }

/* ── Dropdown (desktop) ─────────────────────────────────── */
.nav-item { position: relative; }

.nav-item.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-item.has-dropdown > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.nav-item.has-dropdown:hover > a::after,
.nav-item.has-dropdown:focus-within > a::after {
  transform: rotate(225deg) translateY(2px);
}

/* Kept in the layout (hidden with opacity/visibility rather than
   `display:none`) so it can fade instead of blinking, and so the panel is a
   real hover target the moment the cursor reaches it. */
.nav-dropdown {
  display: flex;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(16,16,20,0.22);
  padding: 10px;
  flex-direction: column;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

/* The panel sits 14px below the link. Without this bridge that gap is dead
   space: the cursor leaves the item on the way down, hover drops and the menu
   disappears before you can reach it. The strip is invisible and only live
   while the menu is open. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.nav-dropdown a {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: normal;
}

.nav-dropdown a:hover { background: var(--card-gray); opacity: 1; }

/* Grouped variant — e.g. Services & Pricing. The panel lists the 3 top-level
   categories; hovering one opens a flyout with that category's services, so
   desktop mirrors the 3-category structure of the mobile accordion. */
.nav-dropdown-grouped { min-width: 240px; }

.nav-subitem { position: relative; }

.nav-subitem-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-dark);
  cursor: default;
}

.nav-subitem-label svg { flex-shrink: 0; opacity: 0.45; }

.nav-subitem:hover > .nav-subitem-label,
.nav-subitem:focus-within > .nav-subitem-label { background: var(--card-gray); }

.nav-subdropdown {
  position: absolute;
  top: -11px;
  left: calc(100% + 9px);
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(16,16,20,0.22);
  padding: 10px;
  display: flex;
  flex-direction: column;
  z-index: 61;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

/* Hover bridge across the 9px gap between the panel and its flyout. */
.nav-subdropdown::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
}

.nav-subitem:hover > .nav-subdropdown,
.nav-subitem:focus-within > .nav-subdropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.nav-dropdown-master {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--purple);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--btn-gray);
  border-radius: 100px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text-dark);
  white-space: nowrap;
  transition: background 0.18s ease;
}

.nav-cta:hover { background: #e8e7ec; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.pill.spots { padding-left: 4px; background: transparent; }

.pill .dot-wrap { position: relative; width: 9px; height: 9px; }

.pill .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #f4526a;
  display: block;
  position: relative;
  z-index: 1;
}

.pill .dot-wrap::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(244, 82, 106, 0.25);
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.pill.rating {
  background: var(--pill-lavender);
  gap: 10px;
  padding: 10px 20px 10px 14px;
  text-decoration: none;
  cursor: pointer;
}

.stars { display: flex; gap: 3px; }
.stars svg { width: 17px; height: 17px; display: block; }
.stars.mini svg { width: 14px; height: 14px; }
.pill.rating strong { font-weight: 700; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  padding: 20px 32px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(112, 71, 235, 0.5);
}

.btn-primary:hover { filter: brightness(0.92); transform: translateY(-1px); }

.btn-primary .icon-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.btn-secondary { background: var(--btn-gray); color: var(--text-dark); }
.btn-secondary:hover { background: #e8e7ec; transform: translateY(-1px); }

/* Gradient-highlighted headline text */
.text-gradient {
  background: var(--gradient-cta);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-head { text-align: center; margin-bottom: 64px; }

.section-tag {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,16,20,0.04);
  margin-bottom: 28px;
}

.section-head h1,
.section-head h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 620px;
  margin: 0 auto;
}

/* ==========================================================
   FINAL CTA — dark card
   ========================================================== */
.final-cta {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 44px 130px;
}

.cta-card {
  position: relative;
  background: #17171c;
  border-radius: 26px;
  padding: 96px 40px 100px;
  text-align: center;
  overflow: hidden;
}

/* faint grid lines */
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 65% 80% at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 80% at center, black 30%, transparent 75%);
  pointer-events: none;
}

.cta-card > * { position: relative; z-index: 1; }

.booking-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
}

.booking-pill .g-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2fd575;
  box-shadow: 0 0 8px rgba(47,213,117,0.8);
}

.cta-card h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 36px;
}

/* typewriter caret on the last word */
.type-target { white-space: pre; }

.caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  background: var(--purple);
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cta-card .btn { font-size: 17px; padding: 16px 30px; }

/* ==========================================================
   FOOTER — white, matching navbar
   ========================================================== */
.footer {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 72px 44px 40px;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-brand img {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}

.footer-brand p {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  max-width: 280px;
  margin-bottom: 24px;
}

.footer-socials { display: flex; gap: 10px; }

.footer-socials a {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.footer-socials a:hover {
  background: var(--card-gray);
  border-color: rgba(16,16,20,0.16);
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.footer-col ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.footer-col li { margin: 0 0 13px !important; padding: 0 !important; }

.footer-col a {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.footer-col a:hover { opacity: 0.55; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.footer-bottom p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-legal a:hover { color: var(--text-dark); }

.footer-payments {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.footer-payments img {
  height: 26px;
  width: auto;
  opacity: 0.85;
}

/* ---- simple service package cards (no toggle, single price) ---- */
.price-simple-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.price-simple-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 30px 32px;
  box-shadow: 0 6px 24px -12px rgba(16,16,20,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.price-simple-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -28px rgba(16,16,20,0.2);
}

.ps-icon {
  width: 52px; height: 52px;
  background: var(--pill-lavender);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.price-simple-card h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.ps-price {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.ps-price strong {
  color: var(--text-dark);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ps-features {
  padding-top: 4px;
  margin-bottom: 26px;
}

.price-simple-card .plan-cta { margin-bottom: 0; }

/* ============ MOTION PREFERENCE ============ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .logo-track, .v-chat .typing i, .pill .dot-wrap::before { animation: none; }
}
/* ==========================================================
   PAGE HEAD — sub-page intro, same look as the Services section head
   ========================================================== */
.page-head { max-width: 1320px; margin: 0 auto; padding: 40px 44px 0; }

.page-head .section-head { margin-bottom: 48px; }

.page-head-sub {
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 620px;
  margin: 20px auto 0;
}

/* ==========================================================
   ACCESSIBILITY — skip link
   ========================================================== */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  width: auto; height: auto;
  clip: auto;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--purple);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* ==========================================================
   MOBILE NAV — hamburger + drop-down sheet
   ========================================================== */
body.nav-open { overflow: hidden; }

.nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: var(--btn-gray);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease;
}

.mobile-menu-btn:hover { background: #e8e7ec; }

.mobile-menu-btn span {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--text-dark);
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16,16,20,0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.mobile-nav-overlay.open { opacity: 1; }

.mobile-nav-sheet {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 24px 60px -15px rgba(16,16,20,0.28);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 92vh;
  overflow-y: auto;
}

.mobile-nav-overlay.open .mobile-nav-sheet { transform: translateY(0); }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 15px;
  border-bottom: 1px solid var(--border);
}

.mobile-nav-logo { display: flex; align-items: center; text-decoration: none; }
.mobile-nav-logo img { height: 32px; width: auto; display: block; }

.mobile-nav-close {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--btn-gray);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}

.mobile-nav-close:hover { background: #e8e7ec; }

/* X icon — two rotated bars, same technique as .mobile-menu-btn span */
.mobile-nav-close .x-bar {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--text-dark);
}
.mobile-nav-close .x-bar:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav-close .x-bar:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── Rows ───────────────────────────────────────────────── */
.mobile-nav-links { padding: 6px 0; flex: 1; }

.mobile-nav-item { border-bottom: 1px solid var(--border); }
.mobile-nav-item:last-child { border-bottom: none; }

.mobile-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 17px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  text-align: left;
  text-decoration: none;
  transition: background 0.18s ease;
}

.mobile-nav-row:hover { background: var(--card-gray); }

.mobile-nav-row .chevron { color: var(--text-muted); transition: transform 0.25s ease; flex-shrink: 0; }
.mobile-nav-item.open > .mobile-nav-row .chevron { transform: rotate(180deg); }

/* ── Sub-menu ───────────────────────────────────────────── */
.mobile-nav-sub {
  display: none;
  flex-direction: column;
  background: var(--card-gray);
  border-top: 1px solid var(--border);
}

.mobile-nav-item.open > .mobile-nav-sub { display: flex; }

.mobile-nav-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.18s ease, background 0.18s ease;
}

.mobile-nav-sub a:last-child { border-bottom: none; }

.mobile-nav-sub a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
}

.mobile-nav-sub a:hover { color: var(--text-dark); background: var(--pill-lavender); }

/* ── Nested (grouped) mobile sub-menu — e.g. Services & Pricing's 3
   categories, each expanding to its own list of services ─────────── */
.mobile-nav-subitem { border-bottom: 1px solid var(--border); }
.mobile-nav-subitem:last-of-type { border-bottom: none; }

.mobile-nav-row-sub {
  padding: 14px 26px;
  font-size: 16px;
}

.mobile-nav-row-sub .chevron { width: 16px; height: 16px; }

/* Same class as the top-level sub-panel, so it inherits `display:none` by
   default. Both levels are matched with `>` so opening "Services & Pricing"
   reveals only the three category rows — each category's own services stay
   hidden until that category is opened in turn. */
.mobile-nav-subitem > .mobile-nav-sub { display: none; }
.mobile-nav-subitem.open > .mobile-nav-sub { display: flex; }
.mobile-nav-subitem.open > .mobile-nav-row-sub .chevron { transform: rotate(180deg); }

.mobile-nav-sub-master {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  border-top: 1px solid var(--border);
}

.mobile-nav-sub-master:hover { background: var(--pill-lavender); }

/* ── CTAs ───────────────────────────────────────────────── */
.mobile-nav-ctas {
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.mobile-cta-chat,
.mobile-cta-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 20px;
  border-radius: 100px;
  text-decoration: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: background 0.18s ease;
}

.mobile-cta-chat { background: var(--text-dark); color: #fff; }
.mobile-cta-chat:hover { background: #26262e; }

.mobile-cta-book {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(112, 71, 235, 0.5);
}

.mobile-cta-book:hover { filter: brightness(0.92); }

.mobile-nav-trust {
  padding: 16px 20px 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  /* Links are gone, so the third grid track would sit empty on the right and
     drag the menu button back towards the logo — drop to two tracks. */
  .nav-inner { grid-template-columns: 1fr auto; }
  .mobile-menu-btn { display: flex; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .navbar { padding: 14px 0; }
  .nav-inner { padding: 0 20px; }   /* matches .hero's 20px gutter */
  .nav-cta { display: none; }
  .btn { font-size: 17px; padding: 16px 26px; justify-content: center; }
  .pill { font-size: 13.5px; padding: 8px 14px; }
  .pill.rating { border-radius: 16px; padding: 10px 14px; line-height: 1.35; gap: 8px; }
  .pill.rating .stars svg { width: 13px; height: 13px; }
  .final-cta { padding: 0 20px 90px; }
  .cta-card { padding: 64px 24px 68px; border-radius: 20px; }
  .footer { padding: 52px 20px 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   LINK COLOURS — no CTA ever falls back to the browser blue

   Anchors do not inherit colour: the UA sheet forces its own blue on any
   <a> with no explicit colour, and its own purple on :visited. So every
   link gets a colour, and every CTA pins that colour through all five
   states so a visited link or a plugin stylesheet cannot repaint it.
   ========================================================== */
a { color: inherit; }

/* White-on-brand CTAs */
.btn-primary, .btn-primary:link, .btn-primary:visited, .btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.works-cta, .works-cta:link, .works-cta:visited, .works-cta:hover, .works-cta:active, .works-cta:focus,
.connect-link, .connect-link:link, .connect-link:visited, .connect-link:hover, .connect-link:active, .connect-link:focus,
.plan-cta, .plan-cta:link, .plan-cta:visited, .plan-cta:hover, .plan-cta:active, .plan-cta:focus,
.mobile-cta-chat, .mobile-cta-chat:link, .mobile-cta-chat:visited, .mobile-cta-chat:hover, .mobile-cta-chat:active, .mobile-cta-chat:focus,
.mobile-cta-book, .mobile-cta-book:link, .mobile-cta-book:visited, .mobile-cta-book:hover, .mobile-cta-book:active, .mobile-cta-book:focus {
  color: #fff;
  text-decoration: none;
}

/* Dark-on-light CTAs, pills and nav rows */
.btn-secondary, .btn-secondary:link, .btn-secondary:visited, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus,
.nav-cta, .nav-cta:link, .nav-cta:visited, .nav-cta:hover, .nav-cta:active, .nav-cta:focus,
.nav-links a, .nav-links a:link, .nav-links a:visited, .nav-links a:hover, .nav-links a:active, .nav-links a:focus,
.pill, .pill:link, .pill:visited, .pill:hover, .pill:active, .pill:focus,
.trust-item, .trust-item:link, .trust-item:visited, .trust-item:hover, .trust-item:active, .trust-item:focus,
.shop-item, .shop-item:link, .shop-item:visited, .shop-item:hover, .shop-item:active, .shop-item:focus,
.mobile-nav-row, .mobile-nav-row:link, .mobile-nav-row:visited, .mobile-nav-row:hover, .mobile-nav-row:active, .mobile-nav-row:focus,
.footer-col a, .footer-col a:link, .footer-col a:visited, .footer-col a:hover, .footer-col a:active, .footer-col a:focus,
.press-logo, .press-logo:link, .press-logo:visited, .press-logo:hover, .press-logo:active, .press-logo:focus {
  color: var(--text-dark);
  text-decoration: none;
}

/* Purple text links */
.post-link, .post-link:link, .post-link:visited, .post-link:hover, .post-link:active, .post-link:focus {
  color: var(--purple);
  text-decoration: none;
}

@media (max-width: 640px) {
  .page-head { padding: 28px 20px 0; }
  .page-head .section-head { margin-bottom: 36px; }
  .page-head-sub { font-size: 17px; }
}