/* ==========================================================================
   GO Serve — Site Styles
   ========================================================================== */

:root {
  --color-primary: #0b0b45;
  --color-primary-dark: #06061f;
  --color-accent: #bf5700;
  --color-accent-dark: #9c4700;
  --color-text: #1c1e2b;
  --color-text-light: #5c6270;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f6fa;
  --color-border: #e4e6ee;

  --font-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1160px;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(11, 11, 69, 0.08);
  --transition: 0.2s ease-in-out;
  --header-h: 98px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: 1.15rem; }

.eyebrow {
  display: inline-block;
  color: var(--color-accent-dark);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.section {
  padding: 96px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-heading {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-heading p {
  color: var(--color-text-light);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn-secondary-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-secondary-light:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

.btn-full {
  width: 100%;
  text-align: center;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.logo-img {
  height: 78px;
  width: auto;
}

.footer-brand .logo-img {
  height: 88px;
}

.main-nav ul {
  display: flex;
  gap: 32px;
}

.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: color var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-accent);
}

.nav-cta {
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--color-bg-alt) 0%, #eceefa 100%);
  padding: 110px 0;
}

.hero-inner {
  max-width: 640px;
}

.hero h1 {
  color: var(--color-primary);
  margin-bottom: 20px;
}

.hero p {
  color: var(--color-text-light);
  font-size: 1.1rem;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Hero photo background variant ---------- */
.hero.hero-photo-bg {
  background: var(--color-primary-dark);
  padding: 150px 0 120px;
  overflow: hidden;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 6, 31, 0.92) 0%, rgba(6, 6, 31, 0.8) 38%, rgba(6, 6, 31, 0.4) 68%, rgba(6, 6, 31, 0.05) 100%);
  z-index: 1;
}

.hero.hero-photo-bg .hero-inner {
  position: relative;
  z-index: 2;
}

.hero.hero-photo-bg h1 {
  color: #fff;
}

.hero.hero-photo-bg p {
  color: #d7d9ee;
}

.hero.hero-photo-bg .stat-label {
  color: #cfd1ea;
}

/* Phones: show the photo as its own block above the text, so people are visible on the first screen. */
@media (max-width: 720px) {
  .hero.hero-photo-bg {
    padding: 0 0 56px;
  }

  .hero-bg-img {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 36px;
  }

  .hero-overlay {
    display: none;
  }
}

/* ---------- Full-bleed photo band ---------- */
.photo-band-full {
  width: 100%;
  height: 460px;
  overflow: hidden;
}

.photo-band-full img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .photo-band-full {
    height: 340px;
  }
}

/* Phones: show the whole 4:3 photo instead of a thin strip. */
@media (max-width: 720px) {
  .photo-band-full {
    height: auto;
  }

  .photo-band-full img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Icons (Lucide, assets/icons/*.svg) ----------
   Usage: <span class="icon" style="--icon:url(assets/icons/heart.svg)" aria-hidden="true"></span>
   Every icon is a transparent shape in ONE color: orange on light backgrounds, white on dark ones
   (hero, page headers, CTA band, footer, dark panels). Don't set icon colors anywhere else. */
.icon {
  display: inline-block;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--color-accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.hero-photo-bg .icon,
.page-hero .icon,
.cta-band .icon,
.site-footer .icon,
.partner-panel-dark .icon {
  background-color: #fff;
}

/* Card icon: sits above a card heading, no background */
.icon-badge {
  display: block;
  margin-bottom: 14px;
  font-size: 2.25rem;
  line-height: 1;
}

.icon-badge .icon {
  width: 1em;
  height: 1em;
}

/* Stat block icon (sits above the number) */
.stat-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
}

/* Feature row: icon beside text (contact details, short lists) */
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.feature-row > .icon {
  margin-top: 2px;
}

/* ---------- Text-only page treatments ---------- */
.side-photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-icon {
  width: 1.3em;
  height: 1.3em;
}

.expect-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 40px;
}

.expect-row .feature-row {
  align-items: center;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.95rem;
  line-height: 1.35;
}

.expect-row .feature-row > .icon {
  margin-top: 0;
}

@media (max-width: 720px) {
  .expect-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* ---------- Nav dropdowns ---------- */
.main-nav .has-submenu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: transform var(--transition), color var(--transition);
}

.submenu-toggle:hover,
.has-submenu:hover > .submenu-toggle {
  color: var(--color-accent);
}

.has-submenu.open > .submenu-toggle {
  transform: rotate(180deg);
}

.main-nav .submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 110;
  min-width: 250px;
  margin-top: 14px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(11, 11, 69, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* invisible bridge so the panel doesn't close while the pointer crosses the gap */
.main-nav .submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.main-nav .submenu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.93rem;
  white-space: nowrap;
}

.main-nav .submenu li a:hover,
.main-nav .submenu li a.active {
  background: var(--color-bg-alt);
  color: var(--color-accent);
}

@media (min-width: 1001px) {
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu,
  .has-submenu.open > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ---------- Page header (interior pages) ---------- */
.page-hero {
  background: var(--color-primary);
  color: #fff;
  padding: 80px 0;
  text-align: center;
}

.page-hero .eyebrow {
  color: #ffb27a;
}

.page-hero h1 {
  margin-bottom: 16px;
}

.page-hero p {
  max-width: 640px;
  margin: 0 auto;
  color: #cfd1ea;
  font-size: 1.05rem;
}

/* ---------- Stats ---------- */
.stats-row {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: 48px;
}

.stat {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-accent);
}

.stat-label {
  color: var(--color-text-light);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-hero .stat-label {
  color: #cfd1ea;
}

/* ---------- Card grid (features / paths / who-we-serve) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card-icon {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.card h3 {
  margin-bottom: 10px;
  color: var(--color-primary);
}

.card p {
  color: var(--color-text-light);
  font-size: 0.96rem;
}

.card-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---------- Pillar groups (trip planning) ---------- */
.pillar-group {
  margin-bottom: 72px;
}

.pillar-group:last-child {
  margin-bottom: 0;
}

.pillar-group > h2 {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 40px;
}

/* ---------- Roadmap ---------- */
.roadmap {
  counter-reset: step;
  display: grid;
  gap: 24px;
}

.roadmap-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.roadmap-step-number {
  counter-increment: step;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.roadmap-step-number::before {
  content: counter(step);
}

.roadmap-step h3 {
  color: var(--color-primary);
  margin-bottom: 6px;
}

.roadmap-step p {
  color: var(--color-text-light);
  font-size: 0.96rem;
}

.roadmap-step p a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ---------- Quote / mission statement block ---------- */
.quote-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 32px;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

.quote-block p.quote {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
}

.scripture {
  margin-top: 20px;
  font-style: italic;
  color: var(--color-text-light);
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.team-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.team-photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, var(--color-bg-alt), var(--color-bg-alt) 10px, #e9ebf5 10px, #e9ebf5 20px);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.team-card h3 {
  color: var(--color-primary);
  margin-bottom: 2px;
}

.team-role {
  display: block;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.team-card p {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* ---------- Partners ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.partner-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), outline-color var(--transition);
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  outline: 3px solid transparent;
  outline-offset: -1px;
}

.partner-card:hover {
  box-shadow: var(--shadow);
  outline-color: var(--color-accent);
}

.partner-card-link a.card-link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.placeholder-img {
  height: 180px;
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-alt),
    var(--color-bg-alt) 10px,
    #e9ebf5 10px,
    #e9ebf5 20px
  );
}

.placeholder-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-card h3,
.partner-card p,
.partner-card .partner-tag {
  padding-left: 24px;
  padding-right: 24px;
}

.partner-card h3 {
  margin-top: 20px;
  color: var(--color-primary);
}

.partner-tag {
  color: var(--color-accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 6px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.partner-card > p {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.partner-card-link {
  margin-top: auto;
  padding-top: 14px;
}

.priority-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 24px;
}

.partner-grid-empty {
  color: var(--color-text-light);
  text-align: center;
  padding: 32px 0;
}

/* ---------- Partner profile: focus areas ---------- */
.focus-list {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}

.focus-list li {
  color: var(--color-text-light);
  padding-left: 28px;
  position: relative;
}

.focus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Partner profile: photo gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-grid .placeholder-img {
  height: 160px;
  border-radius: var(--radius);
}

.gallery-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- Partner profile: trip itinerary ---------- */
.itinerary-list {
  display: grid;
  gap: 20px;
}

.itinerary-day {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.itinerary-day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding: 0 8px;
}

.itinerary-day h3 {
  color: var(--color-primary);
  margin-bottom: 8px;
}

.itinerary-day ul {
  color: var(--color-text-light);
  font-size: 0.95rem;
  display: grid;
  gap: 4px;
}

.itinerary-day ul li {
  padding-left: 16px;
  position: relative;
}

.itinerary-day ul li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--color-accent-dark);
}

@media (max-width: 720px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .itinerary-day {
    grid-template-columns: 1fr;
  }

  .itinerary-day-label {
    width: fit-content;
  }
}

/* ---------- Testimonials ---------- */
.testimonial-quote {
  color: var(--color-text-light);
  margin-bottom: 18px;
}

.testimonial-name {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.92rem;
}

.testimonial-date {
  color: var(--color-text-light);
  font-size: 0.82rem;
  margin-top: 2px;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 72px 0;
}

.cta-band h2 {
  margin-bottom: 12px;
}

.cta-band p {
  color: #cfd1ea;
  max-width: 560px;
  margin: 0 auto 28px;
}

/* ---------- FAQs ---------- */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px 28px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 32px 20px 0;
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.faq-item p {
  color: var(--color-text-light);
  padding-bottom: 20px;
}

/* ---------- Legal pages ---------- */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 0 96px;
}

.legal-content h2 {
  color: var(--color-primary);
  margin: 40px 0 14px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--color-text-light);
  margin-bottom: 14px;
}

.legal-content ul {
  list-style: disc;
  padding-left: 24px;
}

.legal-content .updated-date {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 40px;
}

.legal-content a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ---------- 404 ---------- */
.error-page {
  padding: 110px 0;
  text-align: center;
}

.error-code {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 16px;
}

.error-page h1 {
  color: var(--color-primary);
  margin-bottom: 16px;
}

.error-page p {
  color: var(--color-text-light);
  max-width: 480px;
  margin: 0 auto 32px;
}

/* ---------- Contact ---------- */
.contact-page {
  padding: 96px 0;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-info h1 {
  color: var(--color-primary);
  margin-bottom: 16px;
}

.contact-info > p {
  color: var(--color-text-light);
  margin-bottom: 28px;
}

.contact-details li {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.98rem;
}

.contact-details li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.contact-details strong {
  color: var(--color-primary);
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.contact-form {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color var(--transition);
}

.form-row select {
  appearance: auto;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(191, 87, 0, 0.15);
}

.form-error {
  display: none;
  background: #fdecea;
  border: 1px solid #eb4d4d;
  color: #a12a2a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 0.92rem;
}

.form-error.visible {
  display: block;
}

/* ---------- Focus visibility (keyboard nav) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-row label {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--color-text-light);
}

.form-success {
  display: none;
  background: #e7f5ee;
  border: 1px solid #b7e2cb;
  color: #1c6b45;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.92rem;
  margin-bottom: 18px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: #c7c9e2;
  padding: 56px 0 0;
}

.footer-inner {
  /* one box: logo + tagline (left), links with the ACSI / WeTravel cards under them (middle), contact (right) */
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas:
    "logo nav"
    "tag  trust";
  column-gap: 32px;
  row-gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-brand { display: contents; }

.footer-brand .logo {
  grid-area: logo;
  justify-self: start;
  align-self: start;
  color: #fff;
}

.footer-brand-text {
  grid-area: tag;
  align-self: start;
}

.footer-brand p {
  margin-top: 0;
  font-size: 0.9rem;
  color: #9698c2;
  max-width: 280px;
}

.footer-nav {
  grid-area: nav;
  align-self: start;
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-contact {
  margin-top: 16px;
  font-size: 0.95rem;
  color: #c7c9e2;
}

.footer-contact a { color: #e3e5f5; }
.footer-contact p + p { margin-top: 4px; }

.footer-contact a:hover {
  color: #fff;
}

.footer-legal {
  text-align: center;
  font-size: 0.82rem;
  color: #9698c2;
  max-width: 640px;
  margin: 0 auto 8px;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  font-size: 0.82rem;
  color: #9698c2;
}

.footer-bottom a {
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: #fff;
}

/* ---------- Leave-site modal (GO Tours) ---------- */
.leave-site-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 31, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.leave-site-modal {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow);
}

.leave-site-modal h3 {
  color: var(--color-primary);
  margin-bottom: 12px;
}

.leave-site-modal p {
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.leave-site-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Partner profile: editorial template ---------- */
/* Mirrors the bold stencil-headline / handwritten-tagline / dark-panel look of
   the Canva mission-trip flyers these pages are built from. Scoped to partner
   detail pages only — .page-hero and .cta-band stay untouched everywhere else. */

.headline-display {
  font-family: "Anton", var(--font-base);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.partner-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 58vh;
  overflow: hidden;
  color: #fff;
}

.partner-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.partner-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 31, 0.3) 0%, rgba(6, 6, 31, 0.66) 45%, rgba(6, 6, 31, 0.94) 94%);
  z-index: 1;
}

.partner-hero-inner {
  position: relative;
  z-index: 2;
  padding: 64px 24px 56px;
}

.partner-hero .script-tag {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-size: 2rem;
  line-height: 1;
  color: #ffc99a;
  transform: rotate(-3deg);
  margin-bottom: 2px;
}

.partner-hero h1 {
  font-family: "Anton", var(--font-base);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 5vw + 1rem, 4.2rem);
  line-height: 0.98;
  margin: 4px 0 18px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.partner-hero p {
  max-width: 560px;
  font-size: 1.08rem;
  color: #e7e9f7;
}

.partner-back-bar {
  padding: 20px 0;
}

.partner-panel-dark {
  background: var(--color-primary-dark);
  color: #fff;
}

.partner-panel-dark .eyebrow {
  color: var(--color-accent);
}

.partner-panel-dark h2 {
  color: #fff;
}

.partner-panel-dark p {
  color: #c7cbe6;
}

.partner-panel-dark .itinerary-day {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.partner-panel-dark .itinerary-day-label {
  background: var(--color-accent);
}

.partner-panel-dark .itinerary-day h3 {
  color: #fff;
}

.partner-panel-dark .itinerary-day ul {
  color: #c7cbe6;
}

.partner-panel-dark .itinerary-day ul li::before {
  color: var(--color-accent);
}

.partner-panel-texture {
  background-color: var(--color-bg-alt);
  background-image: radial-gradient(rgba(11, 11, 69, 0.22) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.gallery-grid img {
  box-shadow: 0 6px 18px rgba(11, 11, 69, 0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-grid img:hover {
  transform: scale(1.03) rotate(-1deg);
  box-shadow: 0 16px 32px rgba(11, 11, 69, 0.2);
}

@media (max-width: 720px) {
  .partner-hero {
    min-height: 46vh;
  }

  .partner-hero .script-tag {
    font-size: 1.6rem;
  }
}

/* ---------- Partner profile: full-bleed photo panel (spiritual formation) ---------- */
.partner-panel-photo {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.partner-panel-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.partner-panel-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 31, 0.82) 0%, rgba(6, 6, 31, 0.9) 100%);
  z-index: 1;
}

.partner-panel-photo .container {
  position: relative;
  z-index: 2;
}

.partner-panel-photo .eyebrow {
  color: var(--color-accent);
}

.partner-panel-photo h2 {
  color: #fff;
}

.partner-panel-photo p {
  color: #dcdfef;
}

.formation-grid {
  display: grid;
  gap: 28px;
  margin-top: 8px;
}

.formation-block h3 {
  color: var(--color-accent);
  margin-bottom: 8px;
}

.formation-block p {
  color: #dcdfef;
}

/* ---------- Partner profile: invitation section ---------- */
.invitation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.invitation-statement {
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--color-primary);
  font-weight: 600;
}

.invitation-quote {
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 20px;
  margin: 16px 0;
  font-style: italic;
  color: var(--color-text);
  font-size: 1.05rem;
}

.invitation-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-light);
}

@media (max-width: 720px) {
  .invitation-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .card-grid,
  .card-grid.cols-4,
  .partner-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .roadmap-step {
    grid-template-columns: 44px 1fr;
  }
}

@media (max-width: 720px) {
  :root { --header-h: 88px; }
  .logo-img { height: 72px; }
  .footer-brand .logo-img { height: 80px; }
}

/* Menu collapses into the hamburger on tablets and phones (the full menu needs ~1000px) */
@media (max-width: 1000px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .main-nav.open {
    max-height: 320px;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .main-nav ul li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .logo { margin-right: auto; }
}

@media (max-width: 720px) {
  .nav-cta {
    display: none;
  }

  .card-grid,
  .card-grid.cols-4,
  .partner-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stats-row {
    gap: 32px;
  }

  .hero {
    padding: 64px 0;
  }

  .section,
  .page-hero,
  .cta-band,
  .contact-page {
    padding: 64px 0;
  }
}

/* ---------- Schedule (on-site booking) ---------- */
.schedule-section .container {
  max-width: 960px;
}

.schedule-embed {
  background: #fff;
  border: 1px solid var(--color-border, #e3e4ef);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(20, 24, 70, 0.08);
}

.schedule-embed iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
}

.schedule-fallback {
  text-align: center;
  padding: 48px 24px;
}

.schedule-note {
  text-align: center;
  margin-top: 24px;
  color: var(--color-text-light);
}

@media (max-width: 720px) {
  .schedule-embed iframe {
    height: 1100px;
  }
}

/* Nav dropdowns on phones: sections expand inline when the chevron is tapped */
@media (max-width: 1000px) {
  .main-nav.open {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .main-nav .has-submenu {
    flex-wrap: wrap;
    gap: 0;
  }

  .main-nav .has-submenu > a {
    flex: 1;
  }

  .submenu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }

  .main-nav .submenu {
    position: static;
    flex-basis: 100%;
    display: none;
    min-width: 0;
    margin: 0 0 4px;
    padding: 0 0 0 16px;
    border: none;
    border-left: 2px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .main-nav .submenu::before {
    display: none;
  }

  .has-submenu.open > .submenu {
    display: block;
  }

  .main-nav .submenu li a {
    padding: 11px 0;
    border-bottom: none;
    border-radius: 0;
    white-space: normal;
    color: var(--color-text-light);
  }
}

@media (max-width: 1000px) {
  .main-nav .has-submenu {
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav .has-submenu > a {
    border-bottom: none;
  }
}

/* ==========================================================================
   Photo-led layout components (replace plain text-card grids)
   ========================================================================== */

/* Path tiles: a photo with the title over it. Whole tile is one link. */
.path-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.path-tiles.four { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.path-tiles.four .path-tile { aspect-ratio: 4 / 3; }
.path-tiles.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }

.path-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  background: var(--color-primary-dark);
  box-shadow: var(--shadow);
}

.path-tiles.two .path-tile { aspect-ratio: 4 / 3; }

.path-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.path-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 31, 0) 25%, rgba(6, 6, 31, 0.92) 100%);
}

.path-tile-text {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.path-tile h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.path-tile p {
  color: #e3e5f5;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.path-tile .path-more {
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffb27a;
}

.path-tile:hover img { transform: scale(1.05); }

/* Story row: large photo beside text. Add .reverse to put the photo on the right. */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.story + .story { margin-top: 96px; }
.story.reverse .story-photo { order: 2; }

.story-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.story-text > h2 {
  color: var(--color-primary);
  margin-bottom: 16px;
}

.story-text > p {
  color: var(--color-text-light);
  margin-bottom: 28px;
}

/* Icon list: borderless icon + heading + text rows */
.icon-list {
  display: grid;
  gap: 24px;
}

.icon-list-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}

.icon-list-item .icon {
  width: 32px;
  height: 32px;
}

.icon-list-item h3 {
  color: var(--color-primary);
  margin-bottom: 4px;
}

.icon-list-item p {
  color: var(--color-text-light);
  font-size: 0.97rem;
}

/* Icon strip: borderless centered columns */
.icon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.icon-strip.three { grid-template-columns: repeat(3, 1fr); }

.icon-strip .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
}

.icon-strip h3 {
  color: var(--color-primary);
  margin-bottom: 8px;
}

.icon-strip p {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* Roadmap as a timeline: no boxes, a line joins the numbered dots */
.roadmap {
  position: relative;
}

.roadmap-step {
  position: relative;
  padding: 0 0 36px;
  background: none;
  border: none;
  border-radius: 0;
}

.roadmap-step:last-child { padding-bottom: 0; }

.roadmap-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 4px;
  width: 2px;
  background: var(--color-border);
}

@media (max-width: 900px) {
  .path-tiles,
  .path-tiles.four { grid-template-columns: repeat(2, 1fr); }
  .story { gap: 40px; }
  .icon-strip,
  .icon-strip.three { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .path-tiles,
  .path-tiles.four,
  .path-tiles.two { grid-template-columns: 1fr; }
  .path-tile,
  .path-tiles.two .path-tile { aspect-ratio: 4 / 3; }
  .story,
  .story.reverse { grid-template-columns: 1fr; gap: 28px; }
  .story.reverse .story-photo { order: 0; }
  .story + .story { margin-top: 64px; }
  .icon-strip,
  .icon-strip.three { grid-template-columns: 1fr; gap: 32px; }
  .roadmap-step:not(:last-child)::before { left: 21px; top: 44px; }
}

/* Legibility: stat numbers in a photo hero are white */
.hero-photo-bg .stat-number {
  color: #fff;
  text-shadow: 0 2px 12px rgba(6, 6, 31, 0.6);
}

/* Two partner cards: center them instead of leaving an empty third column */
.partner-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 720px) {
  .partner-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }
}

/* Path tiles are buttons: bold title only, orange outline on hover (same as partner location cards) */
.path-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 4px solid var(--color-accent);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.path-tile:hover::before,
.path-tile:focus-visible::before {
  opacity: 1;
}

.path-tile-text {
  padding: 28px 24px;
}

.path-tile h3 {
  margin: 0;
  font-size: 1.5rem;
}

.tiles-note {
  margin-top: 36px;
  text-align: center;
  color: var(--color-text-light);
}

.tiles-note a {
  color: var(--color-accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Page hero with a photo behind it (navy overlay keeps the text readable) ---------- */
.page-hero.has-photo {
  position: relative;
  overflow: hidden;
  padding: 120px 0 110px;
  background: var(--color-primary-dark);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 11, 69, 0.78) 0%, rgba(11, 11, 69, 0.66) 50%, rgba(6, 6, 31, 0.86) 100%);
}

.page-hero.has-photo .container {
  position: relative;
  z-index: 2;
}

.page-hero.has-photo p {
  color: #e6e8f6;
}

@media (max-width: 720px) {
  .page-hero.has-photo {
    padding: 88px 0 80px;
  }
}

/* ---------- Photo cards: bold rounded photo with the text on the image ---------- */
.photo-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow);
}

.photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 31, 0) 20%, rgba(6, 6, 31, 0.94) 100%);
}

.photo-card-text {
  position: relative;
  z-index: 1;
  padding: 22px;
}

.photo-card h3 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.photo-card p {
  color: #e3e5f5;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------- Split panel: photo on the left, navy text panel on the right ---------- */
.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-primary);
  box-shadow: var(--shadow);
}

.split-panel img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.split-panel-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 56px 52px;
  color: #fff;
}

.split-panel-text .eyebrow {
  color: #ffb27a;
  margin-bottom: 0;
}

.split-panel-text h2 {
  color: #fff;
}

.split-panel-text blockquote {
  font-style: italic;
  color: #e6e8f6;
  font-size: 1.05rem;
  line-height: 1.7;
}

.split-panel-name {
  font-weight: 700;
  color: #fff;
}

/* ---------- Testimonials: quotes sit on the page, not in boxes ---------- */
.card.testimonial-card {
  background: none;
  border: none;
  border-top: 3px solid var(--color-accent);
  border-radius: 0;
  padding: 22px 4px 0;
}

.card.testimonial-card:hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  .photo-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .photo-cards { grid-template-columns: 1fr; }
  .photo-card { aspect-ratio: 4 / 3; }
  .split-panel { grid-template-columns: 1fr; }
  .split-panel img { min-height: 0; aspect-ratio: 4 / 3; }
  .split-panel-text { padding: 36px 26px; }
}

/* Split panel extras */
.split-panel.reverse img { order: 2; }
.split-panel-text > p { color: #e6e8f6; }
.split-panel-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* Long prose beside a photo (About) */
.story-prose > .eyebrow { display: inline-block; }
.story-prose h2 { color: var(--color-primary); }
.story-prose p { font-size: 1rem; }

@media (max-width: 720px) {
  .split-panel.reverse img { order: 0; }
}

/* Legibility: stat numbers in a photo hero are white */
.page-hero.has-photo .stat-number {
  color: #fff;
  text-shadow: 0 2px 12px rgba(6, 6, 31, 0.6);
}

/* Get Started process: large icon where the number circle was (same 44px size), numbers live in the heading text */
.roadmap-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.roadmap-step-icon .icon {
  width: 44px;
  height: 44px;
}

/* ---------- Footer credibility strip: ACSI partner logo + WeTravel reviews ---------- */
.footer-trust {
  grid-area: trust;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 0 36px;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius);
}

.footer-trust-item img {
  height: 64px;
  width: auto;
  max-width: 100%;
}

/* WeTravel's badge is a 202x150 iframe; let it fill its own card */
.footer-trust-reviews {
  width: 202px;
  padding: 0;
}

.footer-trust-reviews iframe {
  display: block;
  border: 0;
}

@media (max-width: 720px) {
  .footer-trust-item:not(.footer-trust-reviews) { width: 100%; padding: 0 20px; height: 120px; }
  .footer-trust-item img { height: 52px; }
}

/* ---------- Home hero: even darkening over the whole photo (no left-to-right fade) ---------- */
.hero-overlay {
  background: rgba(6, 6, 31, 0.5);
}

.hero.hero-photo-bg h1,
.hero.hero-photo-bg p {
  text-shadow: 0 2px 14px rgba(6, 6, 31, 0.55);
}

/* ---------- Floating share button (partner pages) ---------- */
.share-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 8px 22px rgba(11, 11, 69, 0.3);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}

.share-btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
}

.share-btn .icon {
  width: 24px;
  height: 24px;
  background-color: #fff;
}

.share-pop {
  min-width: 230px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(11, 11, 69, 0.2);
}

.share-pop[hidden] { display: none; }

.share-pop-title {
  padding: 6px 10px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.share-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  text-align: left;
  cursor: pointer;
}

.share-opt:hover {
  background: var(--color-bg-alt);
}

.share-opt .icon {
  width: 20px;
  height: 20px;
}

/* Docked on wide screens: a rail beside the text column; the button sticks below the header once scrolled to it */
.share-rail {
  position: absolute;
  width: 54px;
  pointer-events: none;
  z-index: 40;
}

.share-float.is-docked {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  right: auto;
  bottom: auto;
  width: 54px;
  pointer-events: auto;
}

.share-float.is-docked .share-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
}

@media print {
  .share-float { display: none; }
}

/* ==========================================================================
   Discipleship Through Missions: the scrolling roadmap (discipleship-through-missions.html)
   Dark, glowing "road at night". Icons here are white (see the .icon colour rule).
   Animations only run when JS adds .js to <html>; otherwise everything is visible.
   ========================================================================== */

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.scroll-cue .icon {
  width: 28px;
  height: 28px;
  animation: cue-bob 1.8s ease-in-out infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

.journey {
  position: relative;
  isolation: isolate;
  padding: 110px 0 130px;
  color: #fff;
  overflow-x: clip;
  background: #0b0b45;
  scroll-margin-top: var(--header-h);
}

/* The big dark gradient lives on its own layer so it is painted once, not on every scroll frame */
.journey::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 12% 18%, rgba(191, 87, 0, 0.22), transparent 60%),
    radial-gradient(900px 700px at 90% 52%, rgba(70, 90, 255, 0.2), transparent 60%),
    radial-gradient(800px 600px at 15% 88%, rgba(191, 87, 0, 0.16), transparent 60%),
    linear-gradient(180deg, #06061f 0%, #0b0b45 45%, #0a0a3a 75%, #06061f 100%);
  will-change: transform;
  pointer-events: none;
}

.journey .icon { background-color: #fff; }

/* ---------- the destination, at the top of the road ---------- */
.journey-destination {
  max-width: 820px;
  margin-bottom: 90px;
  text-align: center;
}

.journey-destination .eyebrow { color: #ffb27a; }

.journey-verse {
  font-size: clamp(1.4rem, 2.2vw + 0.8rem, 2.1rem);
  font-style: italic;
  line-height: 1.45;
  color: #fff;
}

.journey-ref {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb27a;
}

/* ---------- the road ---------- */
.journey-body { position: relative; }

.journey-line {
  position: absolute;
  top: 0;
  height: var(--line-h, 100%);
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}

.journey-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffb27a, #ff8a3d 40%, #bf5700);
  box-shadow: 0 0 18px rgba(255, 138, 61, 0.65);
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}

.journey-traveler {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.35), 0 0 28px rgba(255, 138, 61, 0.95);
  transform: translateY(0);
  will-change: transform;
}

.stages {
  position: relative;
  z-index: 1;
  list-style: none;
}

/* ---------- one step ---------- */
.stage {
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  grid-template-areas: "text node photo";
  column-gap: 44px;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding: 48px 0;
}

.stage:nth-child(even) { grid-template-areas: "photo node text"; }

.stage-text { grid-area: text; }
.stage-node { grid-area: node; }
.stage-photo, .stage-photo-col { grid-area: photo; }

.stage-node {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #0b0b45;
  border: 3px solid rgba(255, 255, 255, 0.28);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.stage-node .icon { width: 36px; height: 36px; }

.stage.reached .stage-node {
  background: linear-gradient(135deg, #ff9a4d, #bf5700);
  border-color: #ffd2ad;
  box-shadow: 0 0 0 9px rgba(255, 138, 61, 0.18), 0 0 46px rgba(255, 138, 61, 0.6);
}

.stage-step {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffb27a;
}

.stage-text h2 {
  margin-bottom: 14px;
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.9rem);
  color: #fff;
}

.stage-lead {
  margin-bottom: 18px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  color: #ffd2ad;
}

.stage-text p {
  margin-bottom: 18px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #d6d8f2;
}

.stage-question {
  margin: 8px 0 22px;
  padding: 4px 0 4px 20px;
  border-left: 4px solid #ff8a3d;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: #fff;
}

.stage-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.stage-photo-col .stage-photo { margin-bottom: 26px; }

/* ---------- a branch: a smaller timeline that grows out of a step ---------- */
.branch { margin-top: 26px; }

.branch-title {
  margin-bottom: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb27a;
}

.lesson-parts {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px 18px;
  list-style: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.lesson-parts li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.93rem;
  line-height: 1.5;
  color: #d6d8f2;
}

.lesson-parts .icon { width: 22px; height: 22px; }
.lesson-parts strong { color: #fff; }

.branch-list { position: relative; display: grid; gap: 18px; list-style: none; }
.branch-list.compact { gap: 12px; }

.branch-list li {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: start;
}

.branch-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 40px;
  bottom: -18px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 138, 61, 0.7), rgba(255, 138, 61, 0.15));
}

.branch-list.compact li:not(:last-child)::before { bottom: -12px; top: 36px; }
.branch-list.compact li { align-items: center; grid-template-columns: 34px 1fr; gap: 14px; }

.branch-dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 138, 61, 0.18);
  border: 1.5px solid #ff9a4d;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffd2ad;
}

.branch-list.compact .branch-dot { width: 34px; height: 34px; font-size: 0.82rem; }
.branch-dot .icon { width: 18px; height: 18px; }

.branch-list strong { display: block; font-size: 1.02rem; color: #fff; }
.branch-list.compact strong { font-size: 0.97rem; font-weight: 600; }
.branch-list p { margin: 4px 0 0 !important; font-size: 0.96rem !important; line-height: 1.65 !important; }

/* ---------- the end of the road ---------- */
.journey-end-node {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #0b0b45;
  border: 3px solid rgba(255, 255, 255, 0.28);
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

.journey-end-node .icon { width: 42px; height: 42px; }

.journey-end.reached .journey-end-node {
  background: linear-gradient(135deg, #ffb27a, #bf5700);
  border-color: #ffe3cc;
  box-shadow: 0 0 0 12px rgba(255, 138, 61, 0.2), 0 0 70px rgba(255, 138, 61, 0.75);
}

/* ---------- motion: only when JS is running (html.js) ---------- */
@keyframes node-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.js .stage-node,
.js .journey-end-node { opacity: 0; }

.js .stage.is-visible .stage-node,
.js .journey-end.is-visible .journey-end-node {
  animation: node-pop 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) 0.1s both;
}

.js .stage-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.js .stage.is-visible .stage-text > * {
  opacity: 1;
  transform: none;
}

.js .stage.is-visible .stage-text > :nth-child(1) { transition-delay: 0.25s; }
.js .stage.is-visible .stage-text > :nth-child(2) { transition-delay: 0.45s; }
.js .stage.is-visible .stage-text > :nth-child(3) { transition-delay: 0.75s; }
.js .stage.is-visible .stage-text > :nth-child(4) { transition-delay: 1.05s; }
.js .stage.is-visible .stage-text > :nth-child(5) { transition-delay: 1.35s; }
.js .stage.is-visible .stage-text > :nth-child(6) { transition-delay: 1.6s; }

.js .stage-photo,
.js .stage-photo-col {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

.js .stage.is-visible .stage-photo,
.js .stage.is-visible .stage-photo-col {
  opacity: 1;
  transform: none;
}

.js .branch-list li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .stage.is-visible .branch-list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.9s + var(--i, 0) * 0.16s);
}

.js .stage-text .branch { opacity: 0; transition: opacity 0.6s ease; }
.js .stage.is-visible .stage-text .branch { opacity: 1; transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .js .stage-node, .js .journey-end-node,
  .js .stage-text > *,
  .js .stage-photo, .js .stage-photo-col, .js .branch-list li, .js .stage-text .branch {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .scroll-cue .icon { animation: none; }
}

/* ---------- phones and small tablets: the road moves to the left edge ---------- */
@media (max-width: 900px) {
  .journey { padding: 80px 0 100px; }
  .journey-destination { margin-bottom: 56px; }

  .journey-line { left: 52px; }

  .stage,
  .stage:nth-child(even) {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "node photo" "node text";
    column-gap: 20px;
    row-gap: 24px;
    align-items: start;
    min-height: 0;
    padding: 36px 0 56px;
  }

  .stage-node { justify-self: start; width: 56px; height: 56px; border-width: 2px; }
  .stage-node .icon { width: 26px; height: 26px; }

}

/* Phones: Step 2 reads heading first, then its book photo and lesson list */
@media (max-width: 900px) {
  .stage:nth-child(2) {
    grid-template-areas: "node text" "node photo";
  }
}

/* ==========================================================================
   Discipleship page, round 2: accordion, rotating gallery, solid-orange bubbles
   ========================================================================== */

/* Lit-up bubbles use the same GO Tours orange as every button on the site */
.stage.reached .stage-node,
.journey-end.reached .journey-end-node {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 9px rgba(191, 87, 0, 0.28), 0 0 46px rgba(191, 87, 0, 0.6);
}

.inline-link {
  display: inline;
  font-weight: 600;
  color: #ffb27a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-link:hover { color: #fff; }

/* ---------- Step 2: the training row stretches so both sides end at the same line ---------- */
.stage-training { align-items: stretch; }
.stage-training .stage-node { align-self: center; }

.stage-training .stage-text {
  display: flex;
  flex-direction: column;
}

.stage-training .stage-photo-col {
  display: flex;
  flex-direction: column;
}

/* ---------- the accordion (hover a strip to pop its pictures up above it) ---------- */
.accordion {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  margin-top: 6px;
}

.acc-item {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: border-color 0.4s ease, background 0.4s ease;
}

.acc-item.is-open {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--color-accent);
}

/* the picture area opens to the full height of the picture (grid row 0fr -> 1fr), all three the same shape so
   the page does not jump as you move between them */
.acc-media {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc-item.is-open .acc-media { grid-template-rows: 1fr; }

.acc-media-inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.acc-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;          /* Student Book: product photos, landscape */
}

.acc-item.is-doc .acc-slides { aspect-ratio: 17 / 25; }   /* journal + leader's guide pages (temporary, tall) */

.acc-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.acc-slides img.is-active { opacity: 1; }

.acc-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(6, 6, 31, 0.6);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--transition);
}

.acc-nav:hover { background: var(--color-accent); }
.acc-prev { left: 12px; }
.acc-next { right: 12px; }
.acc-nav .icon { width: 22px; height: 22px; }
.acc-prev .icon { transform: rotate(90deg); }
.acc-next .icon { transform: rotate(-90deg); }

.acc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.acc-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}

.acc-dots span.is-active { background: #fff; transform: scale(1.25); }

.acc-head {
  display: block;
  width: 100%;
  padding: 16px 20px 18px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: #fff;
  cursor: pointer;
}

.acc-head:focus-visible { outline: 3px solid #ffb27a; outline-offset: -3px; }

.acc-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.12rem;
  color: #fff;
}

.acc-head span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #d6d8f2;
}

.acc-item.is-open .acc-head span { -webkit-line-clamp: unset; overflow: visible; }
.acc-head em { color: #fff; }

/* ---------- Step 3: a slowly turning gallery ---------- */
.stage-photo.gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.stage-photo.gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.stage-photo.gallery img.is-active {
  opacity: 1;
  animation: gallery-drift 10s ease-out both;
}

@keyframes gallery-drift {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-photo.gallery img.is-active { animation: none; }
  .acc-item, .acc-slides img { transition: none; }
}

/* ---------- phones: the accordion gets a fixed height and sits below the heading ---------- */
@media (max-width: 900px) {
  .stage-training .stage-text { display: block; }
  .stage-training .stage-node { align-self: start; }
  .stage-training { align-items: start; }
  .accordion { display: flex; flex: none; }
}

/* ==========================================================================
   Discipleship page, round 3: Step 3 "On the Trip" is the highlight.
   On desktop the road splits at the airplane, runs out along both sides of the panel, comes down its
   edges (drawn by scroll, see journey.js) and rejoins underneath. Below 900px it is a simple card.
   ========================================================================== */

.stage.stage-trip {
  display: block;
  min-height: 0;
  padding: 100px 0 84px;
}

.trip-panel {
  position: relative;
  padding: 108px 64px 84px;
  border: 4px solid var(--color-accent);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

/* when JS draws the border as the road, the plain CSS border steps aside */
.js .trip-panel.has-svg { border-color: transparent; }

.trip-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}

/* the impact pictures: a slow slideshow behind the white veil */
.trip-bg { position: absolute; inset: 0; }

.trip-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.trip-bg img.is-active {
  opacity: 1;
  animation: gallery-drift 10s ease-out both;
}

.trip-veil {
  position: absolute;
  inset: 0;
  /* v2 (photos more visible): strong white only behind the text column, fading to almost clear on the right.
     PREVIOUS (revert to this if v2 is worse): linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 50%, rgba(255,255,255,.42) 100%) */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.4) 68%, rgba(255, 255, 255, 0.08) 84%, rgba(255, 255, 255, 0) 100%);
}

/* the drawn border */
.trip-border {
  display: none;
  position: absolute;
  left: -4px;
  top: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.js .trip-panel.has-svg .trip-border { display: block; }

.trip-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 4;
}

.trip-draw {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(255, 138, 61, 0.85));
}

/* the airplane sits on the top edge, dead centre */
.trip-node {
  position: absolute;
  left: calc(50% - 42px);
  top: -46px;
  z-index: 3;
}

.trip-text {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

/* sparks that shoot left and right along the top edge when the airplane lights up */
.trip-node .spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(255, 138, 61, 0.9);
}

.trip-node .spark-r { background: linear-gradient(90deg, rgba(255, 138, 61, 0), #ffb27a 65%, #fff); }
.trip-node .spark-l { background: linear-gradient(270deg, rgba(255, 138, 61, 0), #ffb27a 65%, #fff); }

.stage.reached .trip-node .spark-r { animation: spark-right 1.4s ease-out 0.1s both; }
.stage.reached .trip-node .spark-l { animation: spark-left 1.4s ease-out 0.1s both; }

@keyframes spark-right {
  0% { opacity: 0; transform: translateX(-10px); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--spark-dist, 420px)); }
}

@keyframes spark-left {
  0% { opacity: 0; transform: translateX(10px); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--spark-dist, 420px) * -1 - 96px)); }
}

/* ---- navy text on the white panel ---- */
.trip-panel .stage-step { color: var(--color-accent-dark); }
.trip-panel .stage-text h2 { color: var(--color-primary); }
.trip-panel .stage-lead { color: var(--color-accent-dark); }
.trip-panel .stage-text p { color: #1f2147; }
.trip-panel .trip-text { text-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.8); }
.trip-panel .branch-list strong { color: var(--color-primary); }
.trip-panel .branch-dot {
  background: #fff2e6;
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.trip-panel .branch-dot .icon { background-color: var(--color-accent); }
.trip-panel .branch-list li:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(191, 87, 0, 0.7), rgba(191, 87, 0, 0.15));
}
.trip-panel .inline-link { color: var(--color-accent-dark); }
.trip-panel .inline-link:hover { color: var(--color-primary); }

/* ---- the beating heart at the very end ---- */
.journey-end.reached .journey-end-node .icon {
  animation: heartbeat 1.4s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 60%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1.02); }
  42% { transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .journey-end.reached .journey-end-node .icon,
  .trip-node .spark,
  .trip-bg img.is-active { animation: none !important; }
}

/* ---- phones and small tablets: the panel is a plain card to the right of the road ---- */
@media (max-width: 900px) {
  .stage.stage-trip,
  .stage.stage-trip:nth-child(even) {
    display: block;
    padding: 36px 0 56px 76px;
  }

  .stage.stage-trip,
  .stage.stage-trip:nth-child(even) { padding-left: 68px; }
  .trip-panel { padding: 24px 14px 26px; border-radius: 22px; }
  /* text spans the full card width on phones, so keep the stronger white all the way across */
  .trip-veil { background: rgba(255, 255, 255, 0.88); }
  .trip-panel .branch-list li { grid-template-columns: 30px 1fr; gap: 10px; }
  .trip-panel .branch-dot { width: 30px; height: 30px; }
  .trip-panel .branch-dot .icon { width: 15px; height: 15px; }
  .trip-panel .branch-list li:not(:last-child)::before { left: 14px; top: 32px; }
  .trip-clip { border-radius: 18px; }
  .trip-border { display: none !important; }
  .trip-node { left: -72px; top: 18px; }
  .trip-node .spark { display: none; }
}

/* ==========================================================================
   Home page: "Disciple Differently" lettering + expandable roadmap drawer
   ========================================================================== */
.disciple {
  --gap: clamp(30px, 3vw, 44px);   /* the same space above the lettering, below it (to the button) and below the button */
  padding: calc(var(--gap) * 2) 16.7vw var(--gap);
  text-align: center;
  background: #fff;
  display: flex;            /* flex keeps the margins between lettering and button from merging */
  flex-direction: column;
  align-items: center;
}

.disciple-title {
  display: flow-root;
  width: 100%;
  margin: 0 auto;
  font-size: 100px; /* refined by roadmap-home.js so the words fill the (inset) width */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--color-primary);
  /* approximate trim until the script measures the real letter shapes */
  margin-top: -0.16em;
  margin-bottom: -0.22em;
}

.disciple-title .fit-inner {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0.14em 0.02em 0.2em;
  /* the padding lets the gradient paint the whole letters; the negative margin gives the room back */
  margin-top: -0.14em;
  margin-bottom: -0.2em;
  color: var(--color-primary);
}

/* navy flowing into GO Tours orange across the letters (solid navy where gradient text is unsupported) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .disciple-title .fit-inner {
    background-image: linear-gradient(90deg, #0b0b45 0%, #0b0b45 34%, #8a3d1f 66%, #bf5700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.disciple-action { margin-top: calc(var(--gap) * 2); }

/* quiet button: white with a navy ring and navy lettering */
.disciple-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  font-size: 1.02rem;
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.disciple-btn:hover,
.disciple-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

.disciple-btn .icon {
  width: 22px;
  height: 22px;
  background-color: var(--color-primary);
  transition: transform 0.4s ease, background-color var(--transition);
}

.disciple-btn:hover .icon,
.disciple-btn:focus-visible .icon { background-color: #fff; }

.disciple-btn.is-open .icon { transform: rotate(180deg); }
.disciple-btn.is-loading { opacity: 0.7; cursor: progress; }

/* the drawer: slides open to reveal the whole roadmap */
.roadmap-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.roadmap-drawer.is-open { grid-template-rows: 1fr; }

.roadmap-drawer-inner {
  min-height: 0;
  overflow: hidden;
}

.roadmap-drawer.is-settled .roadmap-drawer-inner { overflow: visible; }

.roadmap-drawer .journey { padding-top: 90px; padding-bottom: 36px; }

@media (prefers-reduced-motion: reduce) {
  .roadmap-drawer, .disciple-btn .icon { transition: none; }
}

/* phones: two big lines instead of one */
@media (max-width: 640px) {
  .disciple { padding-left: 10.5vw; padding-right: 10.5vw; }
  .disciple-action { margin-left: -5vw; margin-right: -5vw; }
  .disciple-title .fit-line { display: block; }
  .disciple-btn { padding: 13px 22px; font-size: 0.96rem; }
  .disciple-btn-label { text-align: center; }
}

/* ==========================================================================
   The finale: the road reaches the heart, then a ring draws itself (on its own, not by scrolling) into a full
   circle holding the closing words, over one faded photo. Below 900px it is a simple bordered card.
   ========================================================================== */
.journey-end.finale {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  padding: 0;
}

.finale-circle {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.finale .journey-end-node {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.js .finale .journey-end-node { opacity: 0; }

.finale-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.finale-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 4;
}

.finale-draw {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255, 138, 61, 0.85));
}

.js .finale-draw {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.16s cubic-bezier(0.45, 0, 0.25, 1) 0.22s;
}

.js .finale.finale-go .finale-draw { stroke-dashoffset: 0; }

.finale-clip {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

.finale-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* strongest white in the middle (behind the words), the photo glowing toward the rim */
.finale-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.5) 68%, rgba(255, 255, 255, 0.04) 100%);
}

.finale-body {
  position: relative;
  z-index: 2;
  width: 70%;
  padding-top: 4%;
  text-align: center;
  color: #1f2147;
}

.finale-lead {
  max-width: 24em;
  margin: 0 auto 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3a3d63;
}

.finale-body h2 {
  margin-bottom: 10px;
  font-size: clamp(1.55rem, 1.6vw + 0.9rem, 2.1rem);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--color-primary);
}

.finale-and {
  margin-bottom: 4px;
  font-size: 1rem;
  font-style: italic;
  color: #3a3d63;
}

.finale-glory {
  margin-bottom: 20px;
  font-size: clamp(1.45rem, 1.5vw + 0.85rem, 2rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--color-accent);
}

.finale-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.finale-link {
  padding: 4px 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #3a3d63;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.finale-link:hover { color: var(--color-accent-dark); }

/* the words arrive once the ring is under way */
.js .finale-body > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.js .finale.finale-go .finale-body > * { opacity: 1; transform: none; }

.js .finale.finale-go .finale-lead { transition-delay: 0.58s; }
.js .finale.finale-go h2 { transition-delay: 0.76s; }
.js .finale.finale-go .finale-and { transition-delay: 0.98s; }
.js .finale.finale-go .finale-glory { transition-delay: 1.11s; }
.js .finale.finale-go .finale-actions { transition-delay: 1.33s; }

/* the heart pops in while staying centred on the ring */
@keyframes finale-pop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.js .finale.is-visible .journey-end-node {
  animation: finale-pop 0.36s cubic-bezier(0.2, 1.2, 0.4, 1) 0.05s both;
}

@media (prefers-reduced-motion: reduce) {
  .js .finale-draw,
  .js .finale-body > * { transition: none !important; }
  .finale .journey-end-node { transform: translate(-50%, -50%) !important; opacity: 1 !important; }
}

/* phones and small tablets: a bordered card beside the road, with the heart on the road */
@media (max-width: 900px) {
  .journey-end.finale { padding-left: 76px; margin-top: 8px; }

  .finale-circle {
    width: 100%;
    aspect-ratio: auto;
    border-radius: 22px;
    border: 4px solid var(--color-accent);
    padding: 30px 18px 28px;
  }

  .finale-ring { display: none; }
  .finale-veil { background: rgba(255, 255, 255, 0.9); }
  .finale-clip { inset: 0; border-radius: 18px; }
  .finale-body { width: 100%; padding-top: 0; text-align: left; }
  .finale-lead { margin-left: 0; }
  .finale-actions { align-items: flex-start; }

  .finale .journey-end-node {
    left: -72px;
    top: 18px;
    width: 56px;
    height: 56px;
    transform: none;
  }

  .js .finale.is-visible .journey-end-node { animation-name: node-pop; }
  .finale .journey-end-node .icon { width: 26px; height: 26px; }
}

/* ---------- finale: testimonial banner, then the close / back button underneath ---------- */
.finale-after {
  max-width: 800px;
  margin: 64px auto 0;
  text-align: center;
}

.finale-quote {
  position: relative;
  padding: 30px 36px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 4px solid var(--color-accent);
  text-align: left;
}

.finale-quote blockquote {
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.7;
  color: #fff;
}

.finale-quote figcaption {
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb27a;
}

.finale-after-actions { margin-top: 30px; }

.js .finale-after {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.44s ease, transform 0.44s ease;
}

.js .finale.finale-go .finale-after { opacity: 1; transform: none; transition-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .js .finale-after { transition: none !important; }
}

@media (max-width: 900px) {
  .finale-after { margin-top: 36px; }
  .finale-quote { padding: 24px 22px 22px; }
  .finale-quote blockquote { font-size: 1.05rem; }
}

/* ---------- home hero fills the whole first screen, so the lettering below only appears on scrolling ---------- */
.hero.hero-photo-bg {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 720px) {
  .hero.hero-photo-bg { justify-content: flex-start; }
}

/* pages from the real documents: shown whole, on a paper-coloured mat */
.acc-item.is-doc .acc-slides { background: #f4efe6; }
.acc-item.is-doc .acc-slides img { object-fit: contain; }

/* footer on tablets and phones: everything stacks in one column */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "tag" "nav" "trust";
    row-gap: 22px;
  }
}

/* Schedule page: the "write to us instead" options are obvious buttons */
.schedule-alt {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.schedule-alt-lead {
  margin-bottom: 18px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary);
}

.schedule-alt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------- Accessibility ---------- */
/* "Skip to main content": invisible until a keyboard user presses Tab, then it appears at the top-left */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  transition: top 0.15s ease;
}

.skip-link:focus { top: 0; outline: 3px solid #ffb27a; outline-offset: 0; }

main:focus { outline: none; }

/* keyboard focus is visible on dark areas too (low specificity: any rule above still wins) */
:where(.journey, .site-footer, .hero-photo-bg, .page-hero, .split-panel-text, .cta-band) :where(a, button, summary):focus-visible {
  outline: 3px solid #ffb27a;
  outline-offset: 3px;
}

summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* people who ask their device for less motion get no smooth page scrolling */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Contrast fixes found by the text-over-photo audit (small, nearly invisible changes) */
.page-hero.has-photo .eyebrow { color: #ffd9bd; }
.hero.hero-photo-bg p { color: #fff; }

/* closed training panels: their picture area is hidden from the keyboard and screen readers too
   (it is revealed instantly when the panel opens, and hidden again after it has closed) */
.acc-item:not(.is-open) .acc-media-inner { visibility: hidden; transition: visibility 0s linear 0.7s; }
.acc-item.is-open .acc-media-inner { visibility: visible; transition: none; }

/* ==========================================================================
   Partner page, version 2 (body.partner-v2): photo-led, and designed to print as a clean invitation
   ========================================================================== */
.print-only { display: none; }

.pv2-hero { min-height: 72vh; }
.pv2-hero .partner-hero-overlay {
  background: linear-gradient(180deg, rgba(6, 6, 31, 0.3) 0%, rgba(6, 6, 31, 0.55) 45%, rgba(6, 6, 31, 0.92) 100%);
}
.pv2-hook {
  margin: 0 0 14px !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd9bd !important;
}
.pv2-lead { max-width: 640px !important; font-size: 1.12rem !important; line-height: 1.7; color: #fff !important; }
.pv2-ask { margin-top: 16px; font-weight: 700; font-size: 1.2rem !important; color: #fff !important; }
.pv2-hero .hero-actions { margin-top: 24px; }
.pv2-hero .hero-actions .icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.pv2-hero .btn-secondary-light { display: inline-flex; align-items: center; }

/* quick facts strip */
.pv2-facts { background: var(--color-primary); color: #fff; }
.pv2-facts dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 30px 0;
}
.pv2-facts dl > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; }
.pv2-facts .icon { grid-row: 1 / span 2; width: 30px; height: 30px; background-color: #fff; }
.pv2-facts dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffb27a; }
.pv2-facts dd { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }

.pv2-big { font-size: 1.2rem; line-height: 1.75; color: var(--color-text); margin-bottom: 26px; }

/* three ways to bless */
.way-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.way-card { overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.way-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.way-card-text { position: relative; padding: 30px 26px 30px; }
.way-num {
  position: absolute;
  top: -22px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(191, 87, 0, 0.4);
}
.way-card h3 { margin: 4px 0 10px; font-size: 1.25rem; color: var(--color-primary); }
.way-card p { font-size: 0.98rem; line-height: 1.7; color: var(--color-text-light); }

/* the week */
.week { list-style: none; position: relative; }
.week::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--color-border); }
.week-day { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 0 0 30px; }
.week-day:last-child { padding-bottom: 0; }
.week-dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-accent); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--color-bg-alt); }
.week-dot .icon { width: 26px; height: 26px; background-color: #fff; }
.week-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-dark); }
.week-day h3 { margin: 2px 0 8px; font-size: 1.3rem; color: var(--color-primary); }
.week-day ul { list-style: disc; padding-left: 20px; color: var(--color-text-light); line-height: 1.65; }
.week-day li + li { margin-top: 4px; }

/* gallery */
.pv2-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.pv2-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; transition: transform var(--transition); }
.pv2-gallery img:first-child { grid-column: span 2; grid-row: span 2; }
.pv2-gallery img:nth-child(6) { grid-column: span 2; }
.pv2-gallery img:hover { transform: scale(1.02); }

@media (max-width: 900px) {
  .pv2-facts dl { grid-template-columns: 1fr 1fr; }
  .way-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .pv2-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .pv2-gallery img:first-child { grid-column: span 2; grid-row: span 1; }
  .pv2-gallery img:nth-child(6) { grid-column: auto; }
}

@media (max-width: 720px) {
  .pv2-hero { min-height: 0; display: block; background: var(--color-primary-dark); }
  .pv2-hero .partner-hero-bg { position: static; height: auto; aspect-ratio: 8 / 9; }
  .pv2-hero .partner-hero-overlay { display: none; }
  .pv2-hero .partner-hero-inner { padding: 28px 24px 44px; }
}

/* ---------- Print: a clean, branded invitation (Letter paper) ---------- */
@media print {
  @page { size: letter; margin: 0.55in; }
  body.partner-v2 { font-size: 10.5pt; line-height: 1.5; color: #111; background: #fff; }
  body.partner-v2 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.partner-v2 .site-header,
  body.partner-v2 .site-footer,
  body.partner-v2 .skip-link,
  body.partner-v2 .share-float,
  body.partner-v2 .share-rail,
  body.partner-v2 .cta-band,
  body.partner-v2 .print-hide,
  body.partner-v2 .split-panel-actions { display: none !important; }
  body.partner-v2 .print-only { display: block !important; }

  .pv2-printhead { display: flex !important; align-items: center; gap: 16px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px solid var(--color-accent); }
  .pv2-printhead .logo-img { height: 54px; width: auto; }
  .pv2-printhead div { flex: 1; font-size: 11pt; color: var(--color-primary); }
  .pv2-qr { width: 78px; height: 78px; }
  .pv2-printfoot { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--color-accent); font-size: 10pt; text-align: center; color: var(--color-primary); }

  body.partner-v2 .section, body.partner-v2 .section-alt { padding: 14px 0 !important; background: #fff !important; }
  body.partner-v2 .container { max-width: none; padding: 0; }
  body.partner-v2 h2 { font-size: 16pt; margin-bottom: 6px; }
  body.partner-v2 .section-heading { margin: 0 0 10px; }

  .pv2-hero { min-height: 0; display: block; background: #fff; color: #111; page-break-inside: avoid; }
  .pv2-hero .partner-hero-bg { position: static; display: block; width: 100%; height: 2.4in; object-fit: cover; border-radius: 8px; }
  .pv2-hero .partner-hero-overlay { display: none; }
  .pv2-hero .partner-hero-inner { padding: 12px 0 0; }
  .pv2-hero h1 { color: var(--color-primary); text-shadow: none; font-size: 30pt; margin: 0 0 4px; }
  .pv2-hero .script-tag { color: var(--color-accent-dark); }
  .pv2-hook { color: var(--color-accent-dark) !important; }
  .pv2-lead, .pv2-ask { color: #111 !important; font-size: 11pt !important; max-width: none !important; }

  .pv2-facts { background: #fff; color: var(--color-primary); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .pv2-facts dl { padding: 8px 0; gap: 10px; }
  .pv2-facts .icon { background-color: var(--color-accent); width: 20px; height: 20px; }
  .pv2-facts dt { color: var(--color-accent-dark); font-size: 7pt; }
  .pv2-facts dd { font-size: 9pt; }

  .story { grid-template-columns: 1fr 1.3fr; gap: 18px; }
  .story-photo img, .way-card img { border-radius: 8px; box-shadow: none; }
  .pv2-big { font-size: 11pt; margin-bottom: 0; }
  .way-cards { gap: 14px; }
  .way-card { box-shadow: none; border: 1px solid var(--color-border); page-break-inside: avoid; }
  .way-card-text { padding: 20px 12px 12px; }
  .way-card h3 { font-size: 11pt; }
  .way-card p { font-size: 8.5pt; line-height: 1.45; }
  .way-num { width: 30px; height: 30px; top: -15px; font-size: 10pt; box-shadow: none; }

  .week::before { left: 17px; }
  .week-day { grid-template-columns: 36px 1fr; gap: 12px; padding-bottom: 8px; page-break-inside: avoid; }
  .week-dot { width: 36px; height: 36px; box-shadow: none; }
  .week-dot .icon { width: 18px; height: 18px; }
  .week-day h3 { font-size: 11pt; margin: 0 0 2px; }
  .week-day ul { font-size: 9pt; line-height: 1.4; }

  .icon-strip { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .icon-strip h3 { font-size: 9pt; }
  .icon-strip p { font-size: 8pt; }
  .icon-strip .icon { width: 24px; height: 24px; margin-bottom: 6px; }

  .pv2-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1in; gap: 6px; }
  .pv2-gallery img { border-radius: 4px; }

  .split-panel { grid-template-columns: 1fr 1.4fr; border-radius: 8px; box-shadow: none; background: var(--color-primary) !important; page-break-inside: avoid; }
  .split-panel img { min-height: 0; }
  .split-panel-text { padding: 16px; gap: 6px; }
  .split-panel-text h2 { font-size: 13pt; }
  .split-panel-text p { font-size: 9pt; }

  .section, .section-alt, .week-day, .way-card, .split-panel { break-inside: avoid; }
}

/* print: force the full-width layout (Letter paper is narrower than a phone breakpoint) and four pages */
@media print {
  .way-cards { grid-template-columns: repeat(3, 1fr) !important; max-width: none !important; margin: 0 !important; }
  .pv2-facts dl { grid-template-columns: repeat(4, 1fr) !important; }
  .pv2-gallery { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 1.15in !important; }
  .pv2-gallery img:first-child { grid-column: span 2 !important; grid-row: span 2 !important; }
  .pv2-gallery img:nth-child(6) { grid-column: span 2 !important; }
  body.partner-v2 .story, body.partner-v2 .story.reverse { grid-template-columns: 1fr 1.3fr !important; gap: 18px !important; }
  body.partner-v2 .story.reverse .story-photo { order: 0 !important; }
  .pb-before { break-before: page; page-break-before: always; }
  .week-day { padding-bottom: 6px !important; }
  .story-photo img { aspect-ratio: 4 / 3; height: auto; }
  .split-panel { grid-template-columns: 1fr 1.4fr !important; }
  .split-panel img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
  .icon-strip { grid-template-columns: repeat(4, 1fr) !important; }
}

/* print: compact so the invitation lands on four pages */
@media print {
  body.partner-v2 .pv2-printhead { display: flex !important; align-items: center; gap: 14px; margin-bottom: 8px; padding-bottom: 6px; }
  .pv2-printhead .logo-img { height: 44px; }
  .pv2-qr { width: 62px; height: 62px; }
  .pv2-hero .partner-hero-bg { height: 1.95in !important; }
  .pv2-hero h1 { font-size: 24pt !important; }
  .pv2-hero .partner-hero-inner { padding-top: 6px; }
  .pv2-lead, .pv2-ask { font-size: 10pt !important; line-height: 1.45 !important; }
  .pv2-hook { font-size: 9pt !important; margin-bottom: 4px !important; }
  .pv2-facts dl { padding: 5px 0; }
  body.partner-v2 .section, body.partner-v2 .section-alt { padding: 9px 0 !important; }
  body.partner-v2 .story-prose p { font-size: 9.2pt; line-height: 1.42; margin-bottom: 5px; }
  body.partner-v2 .story-photo img { max-height: 2.4in; object-fit: cover; }
  body.partner-v2 .story-text h2 { font-size: 14pt; }
  .pv2-big { font-size: 10pt !important; line-height: 1.5; }
  .way-card img { aspect-ratio: 16 / 10; }
  .week-dot { width: 30px; height: 30px; }
  .week-dot .icon { width: 15px; height: 15px; }
  .week { }
  .week::before { left: 14px; }
  .week-day { grid-template-columns: 30px 1fr !important; gap: 10px; padding-bottom: 4px !important; }
  .week-day ul { font-size: 8.6pt; }
  .week-label { font-size: 6.5pt; }
}

/* print: week and included share a page */
@media print {
  .pb-before .week { margin-top: 0; }
  body.partner-v2 .pb-before .section-heading p { display: none; }
  body.partner-v2 .pb-before .section-heading { margin-bottom: 6px; }
  .icon-strip { margin-top: 4px; }
  .icon-strip p { display: none; }
  body.partner-v2 .section:not(.pb-before) .section-heading p { font-size: 8.5pt; margin-top: 2px; }
  .week-day h3 { font-size: 10pt !important; }
  .week-day { padding-bottom: 2px !important; }
  .icon-strip .icon { width: 20px; height: 20px; margin-bottom: 3px; }
  .icon-strip { gap: 6px; }
  .icon-strip h3 { font-size: 8.5pt; }
}

/* ---------- All Partners: browser-style tabs over one white panel of tiles ---------- */
.partner-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
  margin-bottom: -1px; /* the selected tab sits on the panel's top border */
}
.partner-tabs::-webkit-scrollbar { display: none; }
.partner-tab {
  flex: 0 0 auto;
  padding: 12px 22px;
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: #e9ebf2;
  color: var(--color-text-light);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.partner-tab:hover { background: #f1f2f7; color: var(--color-primary); }
.partner-tab[aria-selected="true"] {
  background: #fff;
  color: var(--color-primary);
  box-shadow: inset 0 3px 0 var(--color-accent);
}
.partner-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.partner-tabs-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 32px;
}
.partner-card.is-filtered-out { display: none; }

@media (max-width: 720px) {
  .partner-tab { padding: 10px 14px; font-size: 0.88rem; }
  .partner-tabs-panel { padding: 18px; border-top-right-radius: 0; }
}

/* ==========================================================================
   Discipleship Curriculum page (discipleship-curriculum.html, built by tools/build_curriculum_page.py)
   ========================================================================== */
.cur-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 96px 0 104px;
}
.cur-hero::before { /* soft orange glow behind the book */
  content: "";
  position: absolute;
  right: -10%;
  top: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(191, 87, 0, 0.35), rgba(191, 87, 0, 0) 70%);
  pointer-events: none;
}
.cur-hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.cur-hero .eyebrow { color: #ffd9bd; }
.cur-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; margin: 10px 0 22px; }
.cur-script { display: block; font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 400; font-size: 0.6em; color: #ffb27a; letter-spacing: 0.01em; margin-bottom: 4px; }
.cur-hero-lead { font-size: 1.15rem; line-height: 1.7; color: #fff; max-width: 560px; }
.cur-hero .hero-actions { margin-top: 30px; }
.cur-hero-book { justify-self: center; max-width: 380px; }
.cur-hero-book img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transform: rotate(3deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.06);
}

/* three pieces */
.cur-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cur-piece { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cur-piece-mat { aspect-ratio: 4 / 5; background: #f4efe6; display: grid; place-items: center; padding: 28px; }
.cur-piece-mat img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 14px 30px rgba(6, 6, 31, 0.22); }
.cur-piece-text { padding: 26px 26px 30px; }
.cur-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-dark); }
.cur-piece h3 { margin: 4px 0 10px; font-size: 1.4rem; color: var(--color-primary); }
.cur-piece p { color: var(--color-text-light); line-height: 1.7; font-size: 0.98rem; }
.cur-piece h4 { margin: 18px 0 8px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.cur-piece ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.cur-piece li { position: relative; padding-left: 22px; font-size: 0.95rem; line-height: 1.55; color: var(--color-text); }
.cur-piece li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }

/* nine lessons */
.cur-anatomy { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto 44px; }
.cur-anatomy li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px; border-radius: var(--radius); background: var(--color-bg-alt); }
.cur-anatomy .icon { width: 34px; height: 34px; margin-bottom: 4px; }
.cur-anatomy strong { color: var(--color-primary); font-size: 1.1rem; }
.cur-anatomy span:not(.icon) { color: var(--color-text-light); font-size: 0.95rem; }
.cur-lessons { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.cur-lessons li { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; transition: border-color var(--transition), transform var(--transition); }
.cur-lessons li:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.cur-lesson-num { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 1.1rem; }
.cur-lessons strong { display: block; color: var(--color-primary); line-height: 1.3; margin-bottom: 4px; }
.cur-lessons li span:not(.cur-lesson-num) { color: var(--color-text-light); font-size: 0.93rem; line-height: 1.5; }

/* inside a team meeting */
.cur-page-photo img { aspect-ratio: auto; object-fit: contain; background: #f4efe6; padding: 22px; }
.cur-meeting { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 14px; }
.cur-meeting li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.cur-meeting .icon { width: 26px; height: 26px; margin-top: 2px; }
.cur-meeting strong { display: block; color: var(--color-primary); }
.cur-meeting strong em { font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--color-accent-dark); margin-left: 6px; }
.cur-meeting li span:not(.icon) { color: var(--color-text-light); font-size: 0.95rem; }
.cur-own { padding: 18px 20px; border-left: 4px solid var(--color-accent); background: #fff; border-radius: 0 var(--radius) var(--radius) 0; color: var(--color-text); line-height: 1.6; }
.cur-own ul { margin: 8px 0 0; padding-left: 20px; color: var(--color-text-light); font-size: 0.95rem; }

/* author */
.cur-author { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; max-width: 900px; margin: 0 auto; }
.cur-author img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--color-bg-alt), var(--shadow); }
.cur-author h2 { margin: 6px 0 12px; color: var(--color-primary); }
.cur-author p { color: var(--color-text-light); line-height: 1.75; }

/* free chapters form */
.cur-cta { background: var(--color-primary); color: #fff; padding: 88px 0; scroll-margin-top: var(--header-h); }
.cur-cta-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.cur-cta .eyebrow { color: #ffd9bd; }
.cur-cta h2 { color: #fff; margin: 8px 0 14px; }
.cur-cta-text p { color: #fff; font-size: 1.08rem; line-height: 1.7; }
.cur-form label { display: block; font-weight: 700; margin-bottom: 8px; }
.cur-form-row { display: flex; gap: 12px; }
.cur-form input[type="email"] { flex: 1; min-width: 0; padding: 15px 18px; border-radius: 999px; border: 2px solid transparent; font: inherit; font-size: 1rem; }
.cur-form input[type="email"]:focus { outline: none; border-color: #ffb27a; }
.cur-form .btn { white-space: nowrap; }
.cur-form-msg { min-height: 1.4em; margin: 10px 0 0; color: #ffd9bd; font-weight: 600; }
.cur-form-msg a { color: #fff; }
.cur-form-fine { font-size: 0.85rem; color: #cfd1ea; margin-top: 4px; }
.cur-done { text-align: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 34px 28px; }
.cur-done .icon { width: 40px; height: 40px; background-color: #fff; }
.cur-done h3 { color: #fff; font-size: 1.5rem; margin: 10px 0 8px; }
.cur-done p { color: #fff; margin-bottom: 20px; }
.cur-done:focus { outline: none; }
.cur-cta .icon, .cur-hero .icon { background-color: #fff; }

@media (max-width: 900px) {
  .cur-hero { padding: 64px 0 72px; }
  .cur-hero-inner, .cur-cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .cur-hero-book { max-width: 260px; }
  .cur-pieces { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .cur-lessons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cur-anatomy { grid-template-columns: 1fr; }
  .cur-lessons { grid-template-columns: 1fr; }
  .cur-author { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; }
  .cur-form-row { flex-direction: column; }
}
.stage-more { margin-top: 18px; }
.cur-own ul { list-style: disc; }

/* Free curriculum sample teaser (home, thank-you page) */
.cur-teaser { background: var(--color-primary); color: #fff; padding: 72px 0; overflow: hidden; }
.cur-teaser-inner { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: center; max-width: 960px; }
.cur-teaser img { width: 100%; height: auto; border-radius: 12px; transform: rotate(-3deg); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); }
.cur-teaser .eyebrow { color: #ffd9bd; }
.cur-teaser h2 { color: #fff; margin: 8px 0 12px; }
.cur-teaser p { color: #fff; font-size: 1.08rem; margin-bottom: 22px; }
.cta-band .schedule-alt-actions { margin-top: 8px; }
@media (max-width: 720px) {
  .cur-teaser { padding: 56px 0; }
  .cur-teaser-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; justify-items: center; }
  .cur-teaser img { max-width: 170px; }
  .cur-teaser .split-panel-actions { justify-content: center; }
}

/* roadmap finale: soft second option under the main button */
.finale-link { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.finale-link:hover { color: var(--color-accent-dark); }

/* Header: My Account icon (WeTravel login) to the right of Let's Talk */
.nav-account {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px; /* sits closer to Let's Talk than the header's normal gap */
  border-radius: 50%;
  border: 2px solid var(--color-border);
  color: var(--color-primary);
  transition: border-color var(--transition), background var(--transition);
}
.nav-account .icon { width: 24px; height: 24px; background-color: var(--color-accent); }
.nav-account:hover { border-color: var(--color-accent); background: #fff6ee; }
.nav-account:hover .icon { background-color: var(--color-accent-dark); }
.nav-account:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .nav-account { width: 40px; height: 40px; }
}
@media (min-width: 1001px) { .header-inner > .main-nav { margin-left: auto; margin-right: auto; } }