/* ============================================================================
   TRAVELTYME PILGRIMAGES — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   To re-brand the site, edit the variables in :root below.
   • Colors  ....... --gold, --night, --cream, --burgundy ...
   • Fonts   ....... swap the Google Fonts <link> in each HTML <head> + names here
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ---- Sacred palette (crimson-led, matched to the TravelTyme logo) ---- */
  --ink:          #23262c;   /* cool near-black for body text */
  --ink-soft:     #4c525c;
  --cream:        #f7f1e6;   /* warm ivory section bg (pairs with navy) */
  --parchment:    #fcf9f2;   /* lightest page bg */
  --parchment-2:  #efe9db;
  --night:        #16243f;   /* deep navy — headings + dark sections */
  --night-2:      #22355c;
  --night-3:      #2e4576;   /* lighter navy for gradient tops */
  --crimson:      #b01e28;   /* the logo red — used only for tiny accents */
  --crimson-deep: #7c1620;
  --gold:         #c2a24d;   /* PRIMARY accent (buttons, links, labels) */
  --gold-soft:    #dcc487;
  --gold-deep:    #937a32;
  --burgundy:     #6d2436;
  --burgundy-soft:#8c3247;
  --stone:        #8a8ea0;   /* cool muted */
  --line:         rgba(92,100,128,.22);
  --line-light:   rgba(235,240,255,.16);

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif:   'EB Garamond', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --wrap: 1200px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 4px;
  --shadow-lg: 0 30px 60px -25px rgba(20,22,52,.45);
  --shadow-md: 0 18px 40px -22px rgba(20,22,52,.4);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Cross-shaped bullet used in highlight lists */
  --cross-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4v6h6v4h-6v10h-4V12H4V8h6z'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-serif);
  font-size:1.075rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--parchment);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .5em; color:var(--night); letter-spacing:.2px; }
h1{ font-size:clamp(2.6rem,6vw,4.6rem); font-weight:600; }
h2{ font-size:clamp(2rem,4.2vw,3.1rem); }
h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
p{ margin:0 0 1.1em; }
.lead{ font-size:1.25rem; color:var(--ink-soft); }

/* Small-caps eyebrow label */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  margin:0 0 1rem;
}
.eyebrow::before,.eyebrow.center::after{
  content:""; width:34px; height:1px; background:var(--gold); opacity:.7;
}
.eyebrow.on-dark{ color:var(--gold-soft); }
.eyebrow.center{ justify-content:center; }

/* Gold decorative divider (flourish) */
.flourish{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.4rem 0; color:var(--gold); }
.flourish::before,.flourish::after{ content:""; height:1px; width:min(90px,18vw); background:linear-gradient(90deg,transparent,var(--gold)); }
.flourish::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.flourish svg{ width:26px; height:26px; opacity:.9; }

/* ---------- Layout helpers ---------- */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
.wrap-narrow{ width:min(760px, 92vw); margin-inline:auto; }
.section{ padding:clamp(3.5rem,8vw,7rem) 0; position:relative; }
.section.tight{ padding:clamp(2.5rem,5vw,4rem) 0; }
.center{ text-align:center; }
.bg-cream{ background:var(--cream); }
.bg-parchment{ background:var(--parchment); }
.bg-night{ background:radial-gradient(120% 140% at 50% -10%, #263a63 0%, #16243f 55%, #0b1526 100%); color:#e4e8f2; }
.bg-night h1,.bg-night h2,.bg-night h3{ color:#fff; }

/* Subtle parchment grain / paper texture on light sections */
.bg-cream::before,.bg-parchment::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 20% 10%, rgba(194,162,77,.05), transparent 40%),
                   radial-gradient(circle at 80% 90%, rgba(109,36,54,.04), transparent 45%);
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--gold); --btn-fg:#1a1710;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-sans); font-weight:600; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.95rem 1.7rem; border:1px solid transparent; border-radius:var(--radius);
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  box-shadow:0 10px 24px -12px rgba(151,124,51,.7);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(151,124,51,.85); background:var(--gold-soft); }
.btn svg{ width:16px; height:16px; }
.btn-outline{
  background:transparent; color:var(--night); border-color:var(--line);
  box-shadow:none;
}
.btn-outline:hover{ background:var(--night); color:#fff; border-color:var(--night); }
.btn-ghost-gold{
  background:transparent; color:var(--gold-soft); border-color:rgba(220,196,135,.5); box-shadow:none;
}
.btn-ghost-gold:hover{ background:var(--gold); color:#1a1710; border-color:var(--gold); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.76rem; }
.btn-block{ width:100%; justify-content:center; }
.textlink{ font-family:var(--font-sans); font-size:.86rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-deep); display:inline-flex; align-items:center; gap:.45rem; }
.textlink svg{ width:15px; transition:transform .3s var(--ease); }
.textlink:hover svg{ transform:translateX(4px); }

/* ============================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,249,242,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{ box-shadow:0 8px 30px -20px rgba(20,22,52,.4); background:rgba(252,249,242,.96); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:.85rem 0; }
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand .mark{ width:44px; height:44px; flex:none; }
.brand-logo{ height:66px; width:auto; display:block; transition:height .3s var(--ease); }
.site-header.scrolled .brand-logo{ height:54px; }
.footer-logo{ height:78px; width:auto; display:block; margin-bottom:1.1rem; }
.brand .brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand .brand-name{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--night); letter-spacing:.3px; }
.brand .brand-sub{ font-family:var(--font-sans); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--font-sans); font-size:.82rem; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); position:relative; padding:.3rem 0;
}
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--gold); transition:right .35s var(--ease); }
.nav-links a:hover,.nav-links a.active{ color:var(--night); }
.nav-links a:hover::after,.nav-links a.active::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.nav-portal{ font-family:var(--font-sans); font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--night); display:inline-flex; align-items:center; gap:.4rem; }
.nav-portal svg{ width:15px; }
.nav-toggle{ display:none; background:none; border:none; padding:.4rem; color:var(--night); }
.nav-toggle svg{ width:28px; height:28px; }

/* ============================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; color:#eef1f7; overflow:hidden;
  background:radial-gradient(120% 120% at 50% -10%, #2e4576 0%, #172744 45%, #0b1526 100%);
  padding:clamp(4.5rem,11vw,9rem) 0 clamp(6rem,11vw,9rem);
  text-align:center;
}
.hero-inner{ position:relative; z-index:3; }
.hero h1{ color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.35); margin-bottom:.3em; }
.hero .lead{ color:#e7dfcd; max-width:640px; margin-inline:auto; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.2rem; }
.hero-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,5vw,4rem); margin-top:3.2rem; padding-top:2.2rem; border-top:1px solid var(--line-light); }
.hero-stat b{ font-family:var(--font-display); font-size:2.4rem; color:var(--gold-soft); display:block; line-height:1; }
.hero-stat span{ font-family:var(--font-sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#c9c1b0; }
/* radiant light + starfield behind hero */
.hero-rays{ position:absolute; inset:0; z-index:1; opacity:.5; }
.hero-stars{ position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent),
                   radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.55), transparent),
                   radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.5), transparent),
                   radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.6), transparent),
                   radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,.45), transparent),
                   radial-gradient(1px 1px at 12% 75%, rgba(255,255,255,.5), transparent);
}
.hero-arch{ position:absolute; left:0; bottom:-1px; z-index:2; width:100%; height:clamp(46px,6vw,80px); }

/* ---- Hero film: real photos drifting and cross-fading behind the headline ----
   Frames stack; the active one fades in over 1.6s while it slowly pushes in.
   A navy shade keeps the white headline readable on every photo. */
.hero--film{ min-height:min(92vh, 900px); display:flex; align-items:center; background:#0b1526; }
.hero--film .hero-inner{ flex:none; }   /* keep .wrap's 92vw width inside the flex row */
.hero--film h1{ text-shadow:0 2px 28px rgba(5,10,22,.7); }
.hero--film .lead{ color:#efe7d6; text-shadow:0 1px 14px rgba(5,10,22,.8); }
.hf{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hf-frame{ position:absolute; inset:-2%; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.6s var(--ease); will-change:opacity, transform; }
.hf-frame.is-on{ opacity:1; z-index:1; }
.hf-frame.was-on{ opacity:0; z-index:0; }   /* keeps drifting while it fades out */
.hf-frame.is-on, .hf-frame.was-on{ animation:hf-drift 12s linear both; }
/* alternate drift direction so consecutive photos don't move the same way */
.hf-frame:nth-child(odd).is-on, .hf-frame:nth-child(odd).was-on{ animation-name:hf-drift-b; }
@keyframes hf-drift  { from{ transform:scale(1.04) translate3d(-1%, .6%, 0); } to{ transform:scale(1.14) translate3d(1.2%, -1%, 0); } }
@keyframes hf-drift-b{ from{ transform:scale(1.14) translate3d(1%, -.8%, 0); } to{ transform:scale(1.04) translate3d(-1%, .6%, 0); } }
/* the last frame (the rotunda) settles: a gentle pull-back, then it holds */
.hf-frame:nth-last-child(2).is-on, .hf-frame:nth-last-child(2).was-on{ animation:hf-settle 9s var(--ease) both; }
@keyframes hf-settle{ from{ transform:scale(1.16) translate3d(0, 1.5%, 0); } to{ transform:scale(1.03); } }

/* candlelight: a warm pool that breathes irregularly, like a real flame */
.hf-glow{ position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 70%, rgba(255,176,82,.32), rgba(255,140,40,0) 70%);
  animation:hf-flicker 2.6s steps(1, end) infinite; }
@keyframes hf-flicker{
  0%{opacity:.55} 9%{opacity:.8} 17%{opacity:.62} 26%{opacity:.9} 38%{opacity:.7}
  47%{opacity:.85} 58%{opacity:.6} 69%{opacity:.92} 80%{opacity:.66} 91%{opacity:.82} 100%{opacity:.55} }
/* light through the oculus: a soft shaft that slowly brightens and swings a little */
.hf-beam{ position:absolute; left:40%; top:-30%; width:34%; height:150%; pointer-events:none; mix-blend-mode:screen;
  transform-origin:50% 0; transform:rotate(-22deg);
  background:linear-gradient(90deg, rgba(255,240,205,0) 0%, rgba(255,240,205,.28) 45%, rgba(255,248,225,.36) 52%, rgba(255,240,205,0) 100%);
  filter:blur(18px); animation:hf-beam 9s ease-in-out infinite alternate; }
@keyframes hf-beam{ from{ opacity:.35; transform:rotate(-24deg); } to{ opacity:.9; transform:rotate(-19deg); } }

.hf-shade{ position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(9,18,34,.52) 0%, rgba(9,18,34,.2) 70%, rgba(9,18,34,.06) 100%),
    linear-gradient(180deg, rgba(9,18,34,.6) 0%, rgba(9,18,34,.15) 30%, rgba(9,18,34,.12) 62%, rgba(9,18,34,.66) 100%); }
.hero--film .hero-stats{ border-top-color:rgba(235,225,200,.22); }

/* caption + pause sit just above the skyline arch */
.hf-bar{ position:absolute; z-index:4; left:0; right:0; bottom:calc(clamp(46px,6vw,80px) + .9rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-left:max(clamp(1rem,4vw,2.5rem), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(1rem,4vw,2.5rem), env(safe-area-inset-right, 0px)); }
.hf-caption{ margin:0; font-family:var(--font-sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); text-shadow:0 1px 8px rgba(0,0,0,.8); min-width:0; }
.hf-caption::before{ content:""; display:inline-block; width:1.6rem; height:1px; background:currentColor; vertical-align:middle; margin-right:.7rem; opacity:.7; }
.hf-caption.in{ animation:hf-cap .9s var(--ease) both; }
@keyframes hf-cap{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.hf-pause{ flex:none; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font:600 .66rem/1 var(--font-sans); letter-spacing:.18em; text-transform:uppercase;
  color:#efe7d6; background:rgba(9,18,34,.45); border:1px solid rgba(235,225,200,.35); border-radius:999px; padding:.55rem .9rem; }
.hf-pause[hidden]{ display:none; }
.hf-pause:hover{ border-color:var(--gold-soft); color:#fff; }
.hf-pause:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
.hf-ico-pause{ width:9px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.hero--film.is-paused .hf-ico-pause{ width:0; height:0; border-left:9px solid currentColor; border-right:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent; }
.hero--film.is-paused .hf-frame, .hero--film.is-paused .hf-glow, .hero--film.is-paused .hf-beam{ animation-play-state:paused; }
.hero--film.is-still .hf-frame{ animation:none !important; transform:none; transition:none; }
.hero--film.is-still .hf-glow, .hero--film.is-still .hf-beam{ animation:none; opacity:.6; }
@media (max-width:720px){
  .hero--film{ min-height:min(88vh, 760px); }
  .hf-bar{ bottom:calc(46px + .6rem); }
  .hf-caption{ font-size:.6rem; letter-spacing:.14em; }
  .hf-caption::before{ display:none; }
  .hf-pause .hf-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
  .hf-frame, .hf-glow, .hf-beam, .hf-caption.in{ animation:none !important; transition:none !important; }
}

/* Page hero (interior pages) */
.page-hero{
  position:relative; color:#eef1f7; text-align:center; overflow:hidden;
  background:radial-gradient(120% 130% at 50% -20%, #2e4576 0%, #17273f 55%, #0d1730 100%);
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
}
.page-hero h1{ color:#fff; font-size:clamp(2.3rem,5vw,3.6rem); }
.page-hero p{ color:#e2dac8; max-width:600px; margin:0 auto; }
.page-hero .hero-stars{ opacity:.7; }

/* ============================================================================
   FEATURE / VALUE ROW
   ========================================================================== */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.value{ text-align:center; padding:1rem; }
.value .ico{ width:58px; height:58px; margin:0 auto 1.1rem; color:var(--gold-deep); }
.value h3{ font-size:1.4rem; margin-bottom:.4rem; }
.value p{ color:var(--ink-soft); font-size:1rem; margin:0; }

/* ============================================================================
   PILGRIMAGE CARDS
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:clamp(1.5rem,3vw,2.2rem); }
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--parchment); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 14px 34px -26px rgba(20,22,52,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold-soft); }
.card-media{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.card-media .art{ position:absolute; inset:0; z-index:0; }
.card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .7s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(13,15,40,.55), transparent 55%); }
.card-region{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-sans); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(252,249,242,.92); color:var(--night); padding:.35rem .7rem; border-radius:2px;
}
.badge{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--font-sans); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .65rem; border-radius:2px; color:#fff;
}
.badge.open{ background:#3f7d4e; }
.badge.few-left{ background:#b06a1e; }
.badge.waitlist{ background:var(--night-3); }
.badge.sold-out{ background:#7a2233; }
.badge.upcoming{ background:#4a4f86; }
.card-body{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.card-dest{ font-family:var(--font-sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.5rem; }
.card h3{ font-size:1.6rem; margin-bottom:.35rem; }
.card .sub{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--stone); margin-bottom:.9rem; }
.card .blurb{ font-size:.98rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.card-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-family:var(--font-sans); font-size:.78rem; color:var(--ink-soft); margin-bottom:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.card-meta .m{ display:inline-flex; align-items:center; gap:.4rem; }
.card-meta svg{ width:14px; color:var(--gold-deep); }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.card-price b{ font-family:var(--font-display); font-size:1.5rem; color:var(--night); }
.card-price span{ font-family:var(--font-sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); display:block; }

/* Filter bar */
.filterbar{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.6rem; }
.filter{
  font-family:var(--font-sans); font-size:.78rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  padding:.55rem 1.15rem; border:1px solid var(--line); border-radius:40px; background:transparent; color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.filter:hover{ border-color:var(--gold); color:var(--night); }
.filter.active{ background:var(--night); color:#fff; border-color:var(--night); }

/* ============================================================================
   DETAIL PAGE
   ========================================================================== */
.detail-hero{ position:relative; overflow:hidden; color:#eef1f7; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);
  background:radial-gradient(120% 130% at 50% -20%, #2e4576 0%, #17273f 55%, #0d1730 100%); }
.detail-hero .art{ position:absolute; inset:0; opacity:.28; z-index:0; }
.detail-hero .wrap{ position:relative; z-index:2; }
.detail-hero.has-photo .art{ opacity:1; }
.detail-hero .detail-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }
.detail-hero:not(.has-photo)::after{ content:none; }
.detail-hero.has-photo::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(9,18,34,.55) 0%, rgba(9,18,34,.7) 60%, rgba(9,18,34,.88) 100%); }
.detail-hero h1{ color:#fff; margin-bottom:.15em; }
.detail-hero .sub{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.2rem,2.5vw,1.7rem); color:var(--gold-soft); }
.detail-hero .detail-meta{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.6rem; font-family:var(--font-sans); font-size:.85rem; color:#e2dac8; }
.detail-hero .detail-meta .m{ display:inline-flex; align-items:center; gap:.5rem; }
.detail-hero .detail-meta svg{ width:17px; color:var(--gold-soft); }
.breadcrumb{ font-family:var(--font-sans); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#b9b1a0; margin-bottom:1.4rem; }
.breadcrumb a:hover{ color:var(--gold-soft); }

.detail-grid{ display:grid; grid-template-columns:1fr 360px; gap:clamp(2rem,5vw,4rem); align-items:start; }
.prose h2{ margin-top:0; }
.prose h3{ color:var(--night); margin-top:2rem; }
.hl-list{ list-style:none; padding:0; margin:0 0 1rem; }
.hl-list li{ position:relative; padding:.5rem 0 .5rem 2rem; border-bottom:1px solid var(--line); }
.hl-list li::before{ content:""; position:absolute; left:0; top:.85rem; width:16px; height:16px;
  background:var(--gold); -webkit-mask:var(--cross-mask) center/contain no-repeat; mask:var(--cross-mask) center/contain no-repeat; }
.inc-list{ columns:2; column-gap:2rem; list-style:none; padding:0; margin:0; }
.inc-list li{ break-inside:avoid; padding:.35rem 0 .35rem 1.6rem; position:relative; font-size:.98rem; }
.inc-list li::before{ content:"✦"; position:absolute; left:0; color:var(--gold-deep); }

.itinerary{ position:relative; margin:1.5rem 0 0; padding-left:1.5rem; }
.itinerary::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--gold),transparent); }
.itin-item{ position:relative; padding:0 0 1.6rem 1.4rem; }
.itin-item::before{ content:""; position:absolute; left:-1.5rem; top:.4rem; width:12px; height:12px; border-radius:50%; background:var(--parchment); border:2px solid var(--gold); }
.itin-item .day{ font-family:var(--font-sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.itin-item h4{ font-family:var(--font-display); font-size:1.3rem; margin:.1rem 0 .3rem; color:var(--night); }
.itin-item p{ margin:0; color:var(--ink-soft); font-size:1rem; }

/* Booking side card */
.booking-card{ position:sticky; top:100px; background:var(--parchment); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-md); }
.booking-card .price{ font-family:var(--font-display); font-size:2.6rem; color:var(--night); line-height:1; }
.booking-card .price small{ font-family:var(--font-sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:.2rem; }
.booking-card .price span{ font-size:1rem; color:var(--stone); }
.booking-rows{ margin:1.4rem 0; border-top:1px solid var(--line); }
.booking-row{ display:flex; align-items:center; gap:.7rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-family:var(--font-sans); font-size:.88rem; }
.booking-row svg{ width:17px; color:var(--gold-deep); flex:none; }
.booking-row b{ color:var(--night); font-weight:600; }
.booking-card .btn{ margin-bottom:.7rem; }
.booking-note{ font-family:var(--font-sans); font-size:.76rem; color:var(--stone); text-align:center; margin-top:.4rem; }

/* ============================================================================
   STORY / SPLIT / QUOTE
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split-media{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.split-media .art{ position:absolute; inset:0; z-index:0; }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.split-media .frame{ position:absolute; inset:14px; border:1px solid rgba(220,196,135,.5); pointer-events:none; z-index:3; }

.quote{ text-align:center; }
.quote blockquote{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.6rem,3.5vw,2.5rem); line-height:1.4; color:#fff; max-width:900px; margin:1.2rem auto; font-weight:500; }
.quote cite{ font-family:var(--font-sans); font-style:normal; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); }

/* CTA band */
.cta-band{ position:relative; overflow:hidden; text-align:center; color:#eef1f7;
  background:radial-gradient(120% 160% at 50% 0%, #2e4576 0%, #152238 60%, #0b1526 100%);
  padding:clamp(3.5rem,8vw,6rem) 0; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#ddd4c2; max-width:560px; margin:0 auto 2rem; }

/* ============================================================================
   PHOTO-FORWARD HOME VARIANT (full-screen hero + immersive tiles)
   ========================================================================== */
.hero-photo{ position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#eef1f7; overflow:hidden; }
.hero-photo .bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transform:scale(1.03); }
.hero-photo .overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,18,34,.74) 0%, rgba(9,18,34,.5) 42%, rgba(9,18,34,.82) 100%); }
.hero-photo .hero-stars{ z-index:1; opacity:.5; }
.hero-photo-inner{ position:relative; z-index:2; padding:7rem 0; }
.hero-photo h1{ color:#fff; text-shadow:0 2px 34px rgba(0,0,0,.55); }
.hero-photo .lead{ color:#e9edf6; max-width:640px; margin-inline:auto; }
.scroll-cue{ position:absolute; bottom:1.7rem; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-sans); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); animation:cue 2.5s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(7px);} }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.tile{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; display:block; box-shadow:var(--shadow-md); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.tile .art{ position:absolute; inset:0; z-index:0; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .8s var(--ease); }
.tile:hover img{ transform:scale(1.07); }
.tile::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(9,18,34,.92) 0%, rgba(9,18,34,.35) 46%, rgba(9,18,34,.05) 100%); }
.tile-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.6rem; color:#fff; }
.tile-tag{ font-family:var(--font-sans); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); }
.tile-body h3{ color:#fff; font-size:1.7rem; margin:.35rem 0 .45rem; line-height:1.1; }
.tile-body p{ color:rgba(255,255,255,.82); font-size:.94rem; margin:0 0 .8rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile-meta{ display:flex; flex-wrap:wrap; gap:1.1rem; font-family:var(--font-sans); font-size:.76rem; color:rgba(255,255,255,.72); }
.tile-price{ position:absolute; top:12px; left:12px; z-index:3; font-family:var(--font-display); font-size:1.25rem; color:#fff; background:rgba(9,18,34,.6); padding:.15rem .6rem; border-radius:3px; }

/* Testimonials strip */
.tstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; }
.tstrip .t{ background:rgba(255,255,255,.045); border:1px solid var(--line-light); border-radius:var(--radius); padding:2rem 2rem 1.6rem; position:relative; }
.tstrip .t .mark{ font-family:var(--font-display); font-size:3.4rem; line-height:.4; color:var(--gold-soft); opacity:.5; }
.tstrip .t p{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:#eef1f7; margin:.4rem 0 1rem; }
.tstrip .t cite{ font-family:var(--font-sans); font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); }
.placeholder-note{ text-align:center; font-family:var(--font-sans); font-size:.76rem; color:var(--stone); margin-top:1.6rem; }

@media (max-width:960px){ .tiles{ grid-template-columns:1fr 1fr; } .tstrip{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
@media (max-width:640px){ .tiles{ grid-template-columns:1fr; } }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#0b1526; color:#c2c9d8; padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:clamp(1.6rem,4vw,3rem); }
.footer-grid h4{ font-family:var(--font-sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1.1rem; }
.footer-grid a{ color:#c9c1b0; font-size:.95rem; display:block; padding:.28rem 0; transition:color .25s var(--ease); }
.footer-grid a:hover{ color:#fff; }
.footer-brand .brand-name{ font-family:var(--font-display); font-size:1.6rem; color:#fff; }
.footer-brand p{ font-size:.95rem; color:#a49c8c; margin-top:.8rem; max-width:280px; }
.footer-contact div{ display:flex; gap:.6rem; align-items:flex-start; padding:.28rem 0; font-size:.95rem; }
.footer-contact svg{ width:16px; color:var(--gold); flex:none; margin-top:.3rem; }
.footer-social{ display:flex; gap:.8rem; margin-top:1.2rem; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--line-light); border-radius:50%; display:grid; place-items:center; transition:all .3s var(--ease); }
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); color:#14163a; }
.footer-social svg{ width:18px; }
.footer-bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-light); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-family:var(--font-sans); font-size:.78rem; color:#8a8272; }

/* ============================================================================
   MISC
   ========================================================================== */
.empty{ text-align:center; padding:4rem 1rem; color:var(--stone); }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* Contact / form */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.info-card{ text-align:center; padding:2rem 1.5rem; background:var(--parchment); border:1px solid var(--line); border-radius:var(--radius); }
.info-card .ico{ width:46px; height:46px; margin:0 auto 1rem; color:var(--gold-deep); }
.info-card h3{ font-size:1.3rem; margin-bottom:.3rem; }
.info-card a,.info-card p{ color:var(--ink-soft); font-size:1rem; margin:.1rem 0; }
.info-card a:hover{ color:var(--gold-deep); }

.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:1.3rem 2.5rem 1.3rem 0; font-family:var(--font-display); font-size:1.35rem; color:var(--night); position:relative; }
.faq-q::after{ content:"+"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:1.6rem; color:var(--gold-deep); transition:transform .3s var(--ease); }
.faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 0 1.3rem; color:var(--ink-soft); }

/* ---------- Contact form ---------- */
.fld{ display:block; font-family:var(--font-sans); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.4rem; }
.inquiry input,.inquiry textarea{
  width:100%; font-family:var(--font-serif); font-size:1rem; color:var(--ink);
  background:var(--parchment); border:1px solid var(--line); border-radius:var(--radius);
  padding:.75rem .9rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.inquiry input:focus,.inquiry textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,162,77,.15); }
.inquiry textarea{ resize:vertical; }

/* ---------- Pilgrim service links ---------- */
.pilgrim-links{ display:flex; flex-direction:column; gap:1rem; margin-top:1.4rem; }
.portal-link{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; background:var(--parchment); border:1px solid var(--line); border-radius:var(--radius); transition:all .3s var(--ease); }
.portal-link:hover{ border-color:var(--gold-soft); transform:translateX(4px); box-shadow:var(--shadow-md); }
.portal-link .pl-ico{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--cream); color:var(--gold-deep); }
.portal-link .pl-ico svg{ width:20px; }
.portal-link b{ font-family:var(--font-display); font-size:1.3rem; color:var(--night); display:block; }
.portal-link small{ font-family:var(--font-sans); font-size:.82rem; color:var(--stone); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:960px){
  .detail-grid{ grid-template-columns:1fr; }
  .booking-card{ position:static; }
  .values{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .info-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .split{ grid-template-columns:1fr; }
  .split-media{ max-width:440px; margin-inline:auto; order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .nav-links,.nav-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav.open .nav-links{
    display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column;
    background:var(--parchment); border-bottom:1px solid var(--line); padding:1rem 5vw 1.5rem; gap:.4rem;
    box-shadow:var(--shadow-md);
  }
  .nav.open .nav-links a{ padding:.7rem 0; border-bottom:1px solid var(--line); }
  .site-header{ position:sticky; }
  .nav{ position:relative; }
  .inc-list{ columns:1; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stat b{ font-size:2rem; }
}

/* ---- CRM-fed price wording + physical requirements (website step 4 groundwork) ---- */
.card-price b{ text-wrap:balance; }
.booking-card .price-line .pp{ display:block; font-family:var(--font-display); font-size:2.3rem; line-height:1.05; color:var(--night); font-weight:600; }
.booking-card .price-line .pp em{ font-style:normal; font-family:var(--font-sans); font-size:.8rem; letter-spacing:.04em; color:var(--stone); font-weight:500; }
.booking-card .price-line .price-detail{ display:block; margin-top:.35rem; font-family:var(--font-sans); font-size:.82rem; color:var(--night); }
.booking-card .price-line .price-air{ display:inline-block; margin-top:.55rem; font-family:var(--font-sans); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8a6a1f; background:rgba(201,162,74,.14); border-radius:999px; padding:.3rem .7rem; }
.booking-card .price-line .price-sub{ display:block; margin-top:.6rem; font-family:var(--font-sans); font-size:.76rem; color:var(--stone); }
.card-price-crm b{ font-size:1.05rem !important; line-height:1.3; }
.card .blurb{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.physical-note{ border-left:3px solid var(--gold-soft); padding:.2rem 0 .2rem 1rem; color:var(--ink, #2b2b2b); }

/* ---- Content pages: What is a Pilgrimage, Travel Insurance, Before You Travel,
        Sacred Destinations (Nov 2026) ---- */
.page-prose{ font-size:1.12rem; }
.page-prose h2{ margin:2.6rem 0 .8rem; font-size:clamp(1.6rem,3vw,2.1rem); }
.page-prose h2:first-child{ margin-top:0; }
.page-prose .eyebrow{ margin:1.5rem 0 1rem; }
.page-prose .textlink{ text-decoration:none; }
.page-prose p a:not(.textlink):not(.btn){ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }
.signoff{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.signoff-name{ font-family:var(--font-display); font-size:1.25rem; line-height:1.5; }
.callout{ margin:2.2rem 0; padding:2rem 1.5rem; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); }
.callout h3{ margin:0 0 .3rem; }
.callout p{ color:var(--stone); font-size:.95rem; margin:0 0 1.2rem; }
.permit{ margin:1.2rem 0; padding:1.2rem 1.4rem; background:var(--cream); border-left:3px solid var(--gold); border-radius:var(--radius); }
.permit h3{ margin:0 0 .4rem !important; font-size:1.35rem; }
.permit p{ margin:.3rem 0; }
.fineprint{ font-family:var(--font-sans); font-size:.8rem; color:var(--stone); margin-top:2rem; }
.map-link{ display:inline-block; margin-top:.5rem; font-family:var(--font-sans); font-size:.82rem !important; font-weight:600; color:var(--gold-deep) !important; text-decoration:underline; text-underline-offset:2px; }
.dest-card .blurb{ -webkit-line-clamp:5; }
.dest-card .art svg{ display:block; width:100%; height:100%; }
.dest-card .card-media::after{ display:none; }
.dest-trips{ font-family:var(--font-sans); font-size:.8rem; color:var(--gold-deep); margin:-.4rem 0 1rem; }
@media (min-width:961px) and (max-width:1100px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }
/* Header with five links (Travel Insurance added Nov 2026): keep each on one line. */
.nav-links a,.nav-portal,.nav-cta .btn{ white-space:nowrap; }
@media (min-width:721px) and (max-width:1180px){
  .nav{ gap:1rem; } .nav-links{ gap:1.1rem; } .nav-cta{ gap:.6rem; }
  .brand-logo{ max-height:52px; width:auto; }
}
@media (min-width:721px) and (max-width:960px){ .nav-portal{ display:none; } }
/* About: founder photo (landscape, with caption). */
.split-media.landscape{ aspect-ratio:3/2; margin:0; }
.founder-photo img{ object-position:30% 30%; }
.founder-photo figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:.6rem 1rem; font-family:var(--font-sans); font-size:.78rem; color:#fff; background:linear-gradient(to top, rgba(9,18,34,.85), rgba(9,18,34,0)); }
@media (max-width:960px){ .split-media.landscape{ max-width:560px; } }
.split-media .art svg{ display:block; width:100%; height:100%; }
/* Contact form (Vestigia + Cloudflare Turnstile) */
.inq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .inq-grid{ grid-template-columns:1fr; } }
.inquiry .hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.ts-box{ margin-top:1rem; min-height:65px; }
.inq-status{ margin:.8rem 0 0; font-family:var(--font-sans); font-size:.88rem; }
.inq-status.err{ color:#9a2230; }
.inq-done{ padding:1.6rem; background:var(--parchment); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--radius); }
.inq-done h3{ margin:0 0 .4rem; }