/* =====================================================================
   Beyond Journey - Spiritual Journeys landing page (/spiritual-journeys)
   ---------------------------------------------------------------------
   Built from the owner's design of 2026-09-28 (a ChatGPT mock-up, kept
   out of the repository). The sitewide header and footer are the live
   ones; everything between them is this file.

   SCOPING - every rule sits under .spj and every class is prefixed
   spj-. The page runs on _HolidayLayout, whose style.css capitalises
   every heading in Inter, paints links grey with a half-second
   transition, turns every li into an inline-block, zeroes every margin,
   pads every <section> and gives .container z-index 1; the base block
   below undoes those inside .spj only.

   SPACING - one system, set on .spj and tightened for phones at the
   end of the file. Every section is padded by --spj-sec; two sections
   on the same ground (the categories and the journeys) share one
   --spj-sec between them, half from each. Every heading block sits
   --spj-head above its content, and card rows use --spj-gap. Change
   the tokens, not the sections.

   COLOUR - the owner's mock-up, since 2026-10-12: maroon
   #7a2a36 (deeper #4a1c24 for headings and the dark card), gold #c9a24e,
   a cream canvas #f6efe4 and white cards. The tokens below still carry
   their old names (--spj-navy, --spj-orange) so nothing else had to
   change: navy means the deep maroon, orange means the maroon accent.
   From 2026-09-29 to 2026-10-12 the page ran the website's navy and
   orange; the designer brought the mock-up back ("make it"). Orange is the accent on buttons,
   icons and large type; small text accents use the darker orange, and
   pressed states, arrows and the tag on the Darshan panel use navy,
   because orange text on a light ground does not read at small sizes.

   TYPE - the site's own, at the sizes the About and home pages use:
   headings in style.css's heading face (--spj-display) in capitals,
   26px/700 for a section heading and 14-15px/600 for a card title, and
   Poppins for everything else. Until 2026-09-29 the page was set in
   EB Garamond with two Allura script lines, from the mock-up; the owner
   asked for the site's font, style and sizes throughout.

   IMAGES - /img/spiritual/*. The photographs are cut from the design
   mock-up itself, so they are only as sharp as that image (about 2x
   upscaled). Replace any of them at the same path with a real
   photograph and nothing here has to change. hero.jpg and cta.jpg had
   text baked into their left halves; that side is a softened mirror of
   the right, and it sits under the dark scrim. The Darshan panel's sky
   and hills are drawn in CSS/SVG because the mock-up's photo had the
   script line printed across them.
   ===================================================================== */

.spj {
  /* colour */
  --spj-navy: #4a1c24;
  --spj-navy-2: #6b2a35;
  --spj-orange: #7a2a36;
  --spj-orange-dk: #5c1f29;
  --spj-orange-50: #f8ece7;
  --spj-ink: #4a1c24;
  --spj-body: #4f4744;
  --spj-soft: #6b625e;
  --spj-faint: #8c827c;
  --spj-gold: #c9a24e;       /* the mock-up's gold: the rule under the title, the lotus, the ticks */
  --spj-gold-lt: #e3c67e;
  --spj-canvas: #f6efe4;     /* the mock-up's cream ground: every band but the FAQ */
  --spj-surface: #ffffff;    /* cards, and the pilgrimage, darshan and FAQ bands */
  --spj-chip: #f1e7d9;
  --spj-line: rgba(74, 28, 36, .12);
  --spj-hair: #e8dfd3;
  --spj-shadow: 0 1px 2px rgba(74, 28, 36, .05), 0 10px 24px -16px rgba(74, 28, 36, .35);
  --spj-shadow-up: 0 2px 4px rgba(74, 28, 36, .06), 0 20px 36px -18px rgba(74, 28, 36, .4);

  /* spacing */
  --spj-sec: clamp(56px, 5.4vw, 84px);   /* a section's padding, top and bottom */
  --spj-head: 28px;                      /* heading block to its content */
  --spj-gap: 18px;                       /* between cards */
  --spj-r: 14px;                         /* card corners */
  --spj-side: 28px;                      /* the wrap's side padding */

  /* type */
  --spj-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;   /* the site's face; the mock-up's serif ran for a few hours on 2026-10-12 and the designer asked for the website's font back */
  --spj-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --spj-ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--spj-canvas);
  color: var(--spj-body);
  font-family: var(--spj-sans);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- base, undoing the template inside the page ---------- */
.spj h1, .spj h2, .spj h3, .spj h4 {
  font-family: var(--spj-display);
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: -.02em;
  color: var(--spj-ink);
  line-height: 1.25;
  margin: 0;
}
/* card titles: the site's 600, untightened */
.spj h3 { font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.spj p { margin: 0; }
.spj ul, .spj ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.spj li { display: block; margin: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.spj a { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, gap .2s; }
.spj a:hover, .spj a:focus { text-decoration: none; }
.spj img { display: block; max-width: 100%; }
.spj button { font-family: inherit; }
.spj :focus-visible { outline: 2px solid var(--spj-orange); outline-offset: 3px; }
.spj section { scroll-margin-top: 90px; }
/* style.css and bj-space.css pad every <section>; each band here sets
   its own padding from the tokens above */
.spj-hero, .spj-cats, .spj-jr, .spj-pil, .spj-land, .spj-dar, .spj-talk, .spj-cta { padding: 0; }

.spj-wrap {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--spj-side);
}

/* line icons from the sprite at the top of the view */
.spj-i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- buttons and links ---------- */
.spj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 700 13px/1 var(--spj-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.spj-btn .spj-i { font-size: 15px; stroke-width: 2; transition: transform .2s var(--spj-ease); }
.spj-btn:hover .spj-i { transform: translateX(3px); }
.spj .spj-btn--primary { background: var(--spj-orange); color: #fff; box-shadow: 0 12px 24px -14px rgba(122, 42, 54, .85); }
.spj .spj-btn--primary:hover, .spj .spj-btn--primary:focus-visible { background: var(--spj-orange-dk); color: #fff; }

.spj .spj-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 13px/1.2 var(--spj-sans);
  color: var(--spj-orange-dk);
  white-space: nowrap;
  cursor: pointer;
}
.spj .spj-more:hover, .spj .spj-more:focus-visible { color: var(--spj-navy); gap: 11px; }
.spj-more .spj-i { font-size: 15px; }

.spj-arr {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(74, 28, 36, .3);
  background: transparent;
  color: var(--spj-navy);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.spj-arr .spj-i { font-size: 17px; }
.spj-arr:hover:not(:disabled) { background: var(--spj-navy); border-color: var(--spj-navy); color: #fff; }
.spj-arr:disabled { opacity: .3; cursor: default; }
.spj-arrs { display: flex; gap: 10px; }

/* ---------- section heads ---------- */
.spj-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: var(--spj-head);
}
.spj-head h2 { font-size: 26px; }
.spj-head__sub { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: #6b625e; }
.spj-head__tools { display: flex; align-items: center; gap: 20px; flex: none; }
/* the link or arrows sit level with the subtitle, not the heading */
.spj-head > .spj-more, .spj-head > .spj-arrs, .spj-head__tools { margin-bottom: 2px; }

/* sideways rails: scrolled by the arrows, a swipe or the trackpad */
.spj-rail {
  display: grid;
  grid-auto-flow: column;
  gap: var(--spj-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for the cards' shadow, which overflow would otherwise clip; the
     scroll-padding makes the first card snap home at scrollLeft 0 */
  padding: 6px 4px 26px;
  scroll-padding-inline: 4px;
  margin: -6px -4px -26px;
}
.spj-rail::-webkit-scrollbar { display: none; }
.spj-rail > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .spj-rail { scroll-behavior: auto; }
}

/* =====================================================================
   1. HERO
   The site's hero, not the mock-up's. The owner turned the serif banner
   down on 2026-09-29 and asked for the font, text style and sizes of
   the rest of the site, so every value here is taken from the About and
   Contact heroes (bj-about.css, bj-contact.css), not from the tokens
   above:
   - the copy sits in the site's .container, level with the header logo
   - the h1 is style.css's heading face in capitals, 40px/700, with
     its second half in the accent
   - the lead is 14.5px Poppins; kicker, breadcrumb, promise pills and
     both buttons are the same glass and accent pills
   - the accent is the site orange again (the owner asked for the site
     theme across the page on 2026-09-29, after first asking for maroon
     here); the veil is navy, kept light
   - the veil is light and warm, not About's navy: the owner found the
     navy veil too heavy (2026-09-29), and a warm dark keeps the
     sunset's own colour. It fades out by 80% of the width, and the
     text-shadow carries the copy where it thins
   ===================================================================== */
.spj-hero {
  --spj-accent: var(--spj-orange);
  --spj-accent-dk: var(--spj-orange-dk);
  --spj-accent-lt: var(--spj-orange);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: 64px 0 72px;
  overflow: hidden;
  background: #4a1c24;
  color: #fff;
}
/* a flex item shrinks to its content; the wrap has to span the band */
.spj-hero > .container { width: 100%; }
.spj-hero__bg { position: absolute; inset: 0; z-index: -2; }
/* the video, with its own first frame as the poster, so the band is the
   same picture before it plays. Since 2026-10-21 it is the designer's
   daytime cut, which has no black bars (cropdetect 1920:1080:0:0), so it is
   drawn exactly the band's size. The twilight file (spiritual-hero.mp4)
   carried 16px black columns and was drawn 2.4% wider to hide them: put
   left: -1.2%; width: 102.4% back if that film ever returns */
.spj-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  pointer-events: none;
}
/* a tablet or a phone shows only part of the frame, so it shows the frame's
   right-hand side, where the aarti is: the priests with their lamps under
   the temple spires, all through the clip (2026-10-10, the designer: "mob
   view m ganga aarti proper cover nhi ho rhi" - at 66% the phone saw the
   ghats and spires, the priests were cut off at its right edge). The
   daytime cut has the priests on the right too */
@media (max-width: 991px) { .spj-hero__video { object-position: 100% 50%; } }
.spj-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(74, 28, 36, .30) 0%, rgba(74, 28, 36, .16) 36%, rgba(74, 28, 36, .02) 62%, rgba(74, 28, 36, 0) 80%);
}
/* the light pass (2026-10-12; the designer: "bht dark gnda sa lg rha h")
   lifted the dusk film with brightness(1.16) saturate(1.08). The daytime
   cut (2026-10-21) is bright on its own, and the lift washed its lamps and
   sky out towards white. Then the shade below made it read "dull"
   (2026-10-21), so the film gets a little more colour and contrast
   instead - no brightness, the lamps stay gold, not white */
.spj-hero__video { filter: saturate(1.14) contrast(1.05); }
.spj-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(74, 28, 36, 0), rgba(74, 28, 36, .12));
}
.spj .spj-hero h1, .spj-hero__lead, .spj-hero__crumbs { text-shadow: 0 2px 16px rgba(10, 16, 32, .55); }

/* breadcrumb on the left, the photograph's caption on the right */
.spj-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.spj-hero__crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.spj .spj-hero__crumbs a { color: rgba(255, 255, 255, .85); }
.spj .spj-hero__crumbs a:hover, .spj .spj-hero__crumbs a:focus-visible { color: #fff; }
.spj-hero__crumbs > * + *::before { content: '/'; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.spj-hero__place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  background: rgba(10, 16, 32, .26);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}
.spj-hero__place .spj-i { font-size: 14px; color: #e3c67e; }

.spj-hero__copy { max-width: 640px; }
.spj .spj-hero h1 {
  margin: 18px 0 14px;
  font-family: var(--spj-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: capitalize;
  color: #fff;
}
.spj .spj-hero h1 em { display: block; font-style: normal; color: var(--spj-accent-lt); }
.spj-hero__lead { max-width: 540px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .86); }

.spj-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.spj-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 700 13px/1 var(--spj-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--spj-ease), box-shadow .2s var(--spj-ease), background-color .2s, border-color .2s, color .2s;
}
.spj-hbtn .spj-i { font-size: 15px; stroke-width: 2; transition: transform .2s var(--spj-ease); }
.spj-hbtn--primary:hover .spj-i { transform: translateX(3px); }
.spj .spj-hbtn--primary { background: var(--spj-accent); color: #fff; box-shadow: 0 10px 24px rgba(122, 42, 54, .45); }
.spj .spj-hbtn--primary:hover, .spj .spj-hbtn--primary:focus-visible {
  background: var(--spj-accent-dk);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(122, 42, 54, .55);
}
.spj .spj-hbtn--ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.spj .spj-hbtn--ghost:hover, .spj .spj-hbtn--ghost:focus-visible { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }


/* the copy rises in once, top to bottom; the reduced-motion rule at the
   end of the file switches it off. backwards, not both, so no transform
   is left on the copy afterwards */
@keyframes spj-rise { from { opacity: 0; transform: translateY(14px); } }
.spj-hero__top, .spj-hero__copy > * { animation: spj-rise .7s var(--spj-ease) backwards; }
.spj-hero__copy > :nth-child(1) { animation-delay: .06s; }
.spj-hero__copy > :nth-child(2) { animation-delay: .12s; }
.spj-hero__copy > :nth-child(3) { animation-delay: .18s; }
.spj-hero__copy > :nth-child(4) { animation-delay: .24s; }
.spj-hero__copy > :nth-child(5) { animation-delay: .3s; }

/* =====================================================================
   2. FIND YOUR SPIRITUAL JOURNEY (category filter)
   Shares the canvas ground with the journeys below, so the two split one
   --spj-sec between them.
   ===================================================================== */
.spj-cats { padding: var(--spj-sec) 0 calc(var(--spj-sec) / 2); }
/* two rows of five on a desktop (2026-10-12, the designer: "structure best
   karo"): ten tiles in one row were 112px wide, with the names wrapping
   to three lines. Tablets and phones keep their swipe rail below. */
.spj-cats__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.spj-cat {
  appearance: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--spj-r);
  background: var(--spj-surface);
  box-shadow: var(--spj-shadow);
  text-align: center;
  cursor: pointer;
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-cat__img { aspect-ratio: 4 / 3; border-radius: var(--spj-r) var(--spj-r) 0 0; overflow: hidden; }
@media (max-width: 991px) { .spj-cat__img { aspect-ratio: 1 / 1.02; } }
.spj-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-cat__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px auto 0;
  border-radius: 50%;
  background: var(--spj-surface);
  color: var(--spj-orange);
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(74, 28, 36, .14);
}
.spj-cat__name {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-height: 58px;
  padding: 10px 8px 16px;
  font: 600 14px/1.3 var(--spj-display);
  text-transform: capitalize;
  color: var(--spj-ink);
}
.spj-cat:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-cat:hover .spj-cat__img img { transform: scale(1.07); }
.spj-cat[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--spj-orange), var(--spj-shadow-up); }
.spj-cat[aria-pressed="true"] .spj-cat__ico { background: var(--spj-orange); color: #fff; }

/* =====================================================================
   3. JOURNEYS WORTH TAKING
   ===================================================================== */
.spj-jr { padding: calc(var(--spj-sec) / 2) 0 var(--spj-sec); }
/* the applied-filter bar: shown while a category is picked. A card of
   its own (the owner asked for it to look finished, 2026-09-29): funnel
   in a tinted disc, "Showing <category>", the count the script fills,
   and the clear button on the right. */
.spj-jr__filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: calc(var(--spj-head) / -2) 0 20px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--spj-hair);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--spj-shadow);
}
.spj-jr__filter[hidden] { display: none; }
.spj-jr__filter-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(122, 42, 54, .08);
  color: var(--spj-orange);
  font-size: 16px;
}
.spj-jr__filter-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--spj-soft); }
.spj-jr__filter-text strong { color: var(--spj-ink); font-weight: 600; }
.spj-jr__filter-count {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--spj-chip);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #6b625e;
  vertical-align: 1px;
  white-space: nowrap;
}
.spj-jr__filter-count:empty { display: none; }
.spj-jr__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 34px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(122, 42, 54, .5);
  border-radius: 999px;
  background: #fff;
  font: 700 12px/1 var(--spj-sans);
  color: var(--spj-orange-dk);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.spj-jr__clear:hover, .spj-jr__clear:focus-visible { background: var(--spj-orange); border-color: var(--spj-orange); color: #fff; }
.spj-jr__clear .spj-i { font-size: 13px; stroke-width: 2; }

/* the journeys get more room between cards than the page's other rails */
.spj-jr__rail { --spj-gap: 24px; grid-auto-columns: calc((100% - 3 * var(--spj-gap)) / 4); }
.spj-jr.is-all .spj-jr__rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  row-gap: 28px;
}
.spj-jr.is-all .spj-arrs { visibility: hidden; }

/* The card follows the site's Top Selling card (HolidayPackage.cshtml,
   .hp-pack-card): white, a hairline border, 18px corners, a badge on the
   photograph, a ruled foot. Inside: the category as a white badge over a
   soft dark foot on the photo, a 17px title, a meta row (duration and
   region, orange icons), the themes as one quiet line, then the two
   buttons. Redone on the owner's second review, 2026-09-29. The card is
   a size container so its foot can answer to the card's own width. */
.spj-jc {
  position: relative;
  display: flex;
  flex-direction: column;
  container: spj-card / inline-size;
  border: 1px solid var(--spj-hair);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px -12px rgba(74, 28, 36, .28);
  transition: transform .35s var(--spj-ease), box-shadow .35s var(--spj-ease), border-color .35s var(--spj-ease);
}
.spj-jc[hidden] { display: none; }
.spj-jc:hover { transform: translateY(-5px); border-color: rgba(122, 42, 54, .4); box-shadow: 0 18px 36px -16px rgba(74, 28, 36, .4); }
.spj-jc__img { position: relative; aspect-ratio: 1.5; overflow: hidden; }
.spj-jc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--spj-ease); }
.spj-jc:hover .spj-jc__img img { transform: scale(1.07); }
/* the category label sits in the white panel above the title (2026-10-12;
   it was a pill over the photograph, and the owner wants no words on a
   card photo) */
.spj-jc__badge {
  align-self: flex-start;
  margin-bottom: 9px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--spj-orange-50);
  color: var(--spj-orange-dk);
  font: 700 10.5px/1.3 var(--spj-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.spj-jc__body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.spj .spj-jc__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.3;
}
/* duration and region, the icons in the accent */
.spj .spj-jc__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--spj-soft); }
.spj .spj-jc__meta li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.spj-jc__meta .spj-i { font-size: 14px; stroke-width: 1.8; color: var(--spj-orange); }
/* the themes as one quiet line, the first one in the accent */
/* one line, cut with an ellipsis when the card is narrow, so a wrapped
   line never starts with a dot and every card keeps the same height */
.spj .spj-jc__tags { margin: 12px 0 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 1.5; color: var(--spj-faint); }
.spj .spj-jc__tags li { display: inline; }
.spj-jc__tags li + li::before { content: '\00b7'; margin: 0 7px; color: #d9cfc3; }
.spj-jc__tags li.is-key { color: var(--spj-orange-dk); font-weight: 600; }
/* no fares (the owner, 2026-09-29): the site's two enquiry buttons side
   by side, as on its package cards - a callback request, filled, and
   "Customise your trip", quiet. Both open js/bj-enquiry.js's dialog naming
   the journey. 11px labels fit one row on a 4-across card; the container
   rules below drop " your trip" on a narrower card and stack the pair on a
   phone's half-width card. */
.spj-jc__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--spj-hair);
}
.spj .spj-jc__btn {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 0 5px;
  text-align: center;
  border: 1px solid var(--spj-navy);
  border-radius: 10px;   /* squarer, as on the site's package listing: a pill's round ends ate the label's room */
  background: var(--spj-navy);   /* navy, not orange: the owner's call, 2026-09-29 */
  color: #fff;
  font: 700 11px/38px var(--spj-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.spj .spj-jc__btn:hover, .spj .spj-jc__btn:focus-visible { background: var(--spj-navy-2); border-color: var(--spj-navy-2); color: #fff; }
.spj .spj-jc__btn--quiet { background: #fff; border-color: rgba(74, 28, 36, .2); color: var(--spj-navy); }
.spj .spj-jc__btn--quiet:hover, .spj .spj-jc__btn--quiet:focus-visible { background: #f3f4f8; border-color: var(--spj-navy); color: var(--spj-navy); }
/* measured at 11px/700: "Customise your trip" 112px, "Request callback"
   98px; the longest title, "Varanasi - Ayodhya - Prayagraj", is 256px at
   17px. A button is its label + 12px and the card spends 44px around the
   pair (18px padding each side, 8px between), so:
   - under 294px the longest title wraps: every title keeps two lines and
     the meta stacks, so neighbouring cards stay level
   - under 292px the full labels no longer fit: " your trip" drops
   - under 263px even the short pair does not fit: the buttons stack */
@container spj-card (max-width: 293px) {
  .spj .spj-jc__title { min-height: 2.6em; }
  .spj .spj-jc__meta { flex-direction: column; gap: 3px; }
}
@container spj-card (max-width: 291px) {
  .spj-jc__tail { display: none; }
}
@container spj-card (max-width: 262px) {
  .spj-jc__foot { flex-direction: column; }
  .spj-jc__tail { display: inline; }
}

/* a category with nothing on sale yet: planned to order */
.spj-jc--ask {
  grid-column: span 2;
  justify-content: center;
  padding: 30px 32px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(122, 42, 54, .35), transparent 60%),
    linear-gradient(135deg, #6b2a35, #4a1c24);
  color: rgba(255, 255, 255, .9);
}
.spj-jc--ask:hover { transform: none; }
.spj-jc--ask .spj-i--lotus { font-size: 40px; color: #e3c67e; }
.spj .spj-jc--ask h3 { margin-top: 12px; font-size: 20px; color: #fff; }
.spj-jc--ask p { max-width: 420px; margin-top: 8px; font-size: 13.5px; line-height: 1.65; }
.spj-jc--ask .spj-btn { align-self: flex-start; margin-top: 20px; height: 44px; background: #fff; color: var(--spj-navy); box-shadow: none; }
.spj-jc--ask .spj-btn:hover { background: #f8ece7; color: var(--spj-orange-dk); }

/* =====================================================================
   4. MORE THAN A PILGRIMAGE
   The photograph fills the first column as a rounded picture, as tall as
   the copy and the five promises beside it. Until 2026-10-12 it ran from
   the window's left edge and faded into the white over its last third,
   which turned the dark photograph muddy (the designer: "acha nhi lg
   rha, best chahiye"). Tablets and phones keep it as a band on top.
   ===================================================================== */
.spj-pil {
  --pil-col: .35;        /* the photo's share of the wrap */
  --pil-gap: 48px;
  position: relative;
  overflow: hidden;
  background: var(--spj-canvas);
}
.spj-pil__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(max(0px, (100% - 1320px) / 2) + var(--spj-side) + (min(100%, 1320px) - 2 * var(--spj-side)) * var(--pil-col) + var(--pil-gap));
}
.spj-pil__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.spj-pil__grid {
  display: grid;
  grid-template-columns: calc(var(--pil-col) * 100%) minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: var(--pil-gap);
  padding: var(--spj-sec) 0;
}
.spj-pil__copy { grid-column: 2; }
.spj-pil__lotus { font-size: 40px; color: var(--spj-orange); stroke-width: 1.3; }
.spj .spj-pil__title { margin-top: 14px; font-size: 26px; }
/* the second half in the page's accent, as the site's headings do in orange */
.spj .spj-pil__title em { display: block; font-style: normal; color: var(--spj-orange); }
.spj-pil__text { max-width: 440px; margin-top: 16px; font-size: 13.5px; line-height: 1.75; color: var(--spj-body); }
.spj-pil__feats {
  grid-column: 3;
  display: grid;
  gap: 20px;
  padding-left: 32px;
  border-left: 1px solid var(--spj-hair);
}
.spj-pil__feats li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; }
.spj-pil__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.2px solid rgba(122, 42, 54, .4);
  background: rgba(255, 255, 255, .5);
  color: var(--spj-orange);
  font-size: 23px;
}
.spj-pil__ico .spj-i { stroke-width: 1.4; }
.spj-pil__feats strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--spj-ink); }
.spj-pil__feats span.spj-pil__d { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--spj-soft); }


/* the places row: its layout is in THE MOCK-UP LOOK at the end of the file */
.spj-dest__rail { position: relative; z-index: 1; min-width: 0; }
.spj-dest__rail[hidden] { display: none; }
.spj-dc {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--spj-r);
  overflow: hidden;
  background: var(--spj-surface);
  box-shadow: var(--spj-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-dc:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-dc__img { aspect-ratio: 1 / 1.04; overflow: hidden; }
.spj-dc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-dc:hover .spj-dc__img img { transform: scale(1.07); }
.spj-dc__name { display: block; padding: 12px 14px 0; font: 600 15px/1.25 var(--spj-display); text-transform: capitalize; color: var(--spj-ink); }
.spj-dc__state { display: block; padding: 3px 14px 14px; font-size: 12px; color: var(--spj-faint); }


/* =====================================================================
   7. STORIES + WHAT OUR TRAVELLERS SAY
   ===================================================================== */
.spj-talk { padding: var(--spj-sec) 0; background: var(--spj-canvas); border-top: 1px solid var(--spj-hair); }
.spj-talk__grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 48px; }
/* both columns end on the same line: the story cards stretch to the review card, or the other way round */
.spj-stories { display: flex; flex-direction: column; }
.spj-stories__row { flex: 1; grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
.spj-sc {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--spj-r);
  overflow: hidden;
  background: var(--spj-surface);
  box-shadow: var(--spj-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-sc:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-sc__img { aspect-ratio: 1.45; overflow: hidden; }
.spj-sc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-sc:hover .spj-sc__img img { transform: scale(1.07); }
.spj-sc__title { display: block; padding: 12px 14px 10px; font: 600 14px/1.35 var(--spj-display); text-transform: capitalize; color: var(--spj-ink); }
/* the card's own call to action, pinned to its foot so a row of cards ends level */
.spj-sc::after {
  content: 'Read more \2192';
  margin-top: auto;
  padding: 0 14px 14px;
  font: 600 10.5px/1.2 var(--spj-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--spj-orange-dk);
}

/* the review card stretches to end level with the story cards */
.spj-tms { display: flex; flex-direction: column; }
.spj-tms .spj-head { flex-wrap: nowrap; }
/* beside the stories the column is narrow: the arrows sit on the
   subtitle's line, so the heading has the full width and one line, level
   with "Stories Beyond The Journey" (it broke after "Travellers") */
@media (min-width: 1200px) {
  .spj-tms .spj-head { position: relative; }
  .spj-tms .spj-head > .spj-arrs { position: absolute; right: 0; bottom: 0; margin: 0; }
  .spj-tms .spj-head h2 { white-space: nowrap; }
}
/* the review, top to bottom (the owner, 2026-09-29): the photo with the
   name and place beside it, the stars, then the words */
.spj-tm {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;               /* bootstrap's figure { margin: 0 0 1rem } outranks style.css's * reset */
  gap: 14px;
  padding: 24px 22px;
  border-radius: var(--spj-r);
  background: var(--spj-surface);
  box-shadow: var(--spj-shadow);
  animation: spj-fade .45s var(--spj-ease);
}
.spj-tm[hidden] { display: none; }
.spj-tm__top { display: flex; align-items: center; gap: 14px; }
.spj-tm__face { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 16px -8px rgba(74, 28, 36, .45); }
.spj-tm__stars { display: flex; gap: 3px; font-size: 13px; color: var(--spj-orange); }
.spj-tm__q { position: relative; margin-top: 4px; padding-left: 26px; }
.spj-tm__q::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  left: 0;
  font: 700 48px/1 Georgia, 'Times New Roman', serif;   /* About's quote mark */
  color: var(--spj-orange);
}
.spj-tm__q p { font-size: 13.5px; line-height: 1.7; color: var(--spj-body); }
.spj .spj-tm__who { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--spj-ink); }
.spj .spj-tm__meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--spj-faint); }
.spj-tm__meta span { white-space: nowrap; }
.spj-tm__meta span + span::before { content: '|'; margin: 0 7px; color: #d9cfc3; }
@keyframes spj-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   8. CLOSING BAND
   ===================================================================== */
/* The site's own closing card (Holiday/Index.cshtml .bj-cta-band): a
   rounded navy card inside the wrap, the photograph behind a navy wash
   with an orange glow at the top, everything centred - kicker, headline
   with its second half in orange, one line, two buttons, and the
   assurances in one row under a hairline. Rebuilt on the owner's review,
   2026-09-29 ("isko shi se design kro"): it used to run full-bleed with
   the copy crowded to the left. */
/* =====================================================================
   STORY READER (native <dialog>)
   ===================================================================== */
.spj-story {
  /* style.css zeroes every margin, which takes away the centring a modal
     <dialog> gets from the browser */
  margin: auto;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #4f4744;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 30px 80px -20px rgba(74, 28, 36, .5);
  overflow: auto;
  overscroll-behavior: contain;
}
.spj-story::backdrop { background: rgba(74, 28, 36, .62); backdrop-filter: blur(2px); }
.spj-story[open] { animation: spj-fade .35s cubic-bezier(.22, .61, .36, 1); }
.spj-story__media { position: relative; aspect-ratio: 3.2; overflow: hidden; }
.spj-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spj-story__x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #4a1c24;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.spj-story__x .spj-i { font-size: 18px; }
.spj-story__body { padding: 26px 32px 8px; }
.spj-story__kicker { font: 700 11px/1.4 'Poppins', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #5c1f29; }
.spj-story .spj-story__title {
  margin: 8px 0 4px;
  font: 700 24px/1.25 var(--spj-display);
  text-transform: capitalize;
  letter-spacing: -.02em;
  color: #4a1c24;
}
.spj-story__read { font-size: 12.5px; color: #8c827c; }
.spj-story__text p { margin: 14px 0 0; font-size: 14px; line-height: 1.75; color: #4f4744; }
.spj-story__text h4 {
  margin: 22px 0 0;
  font: 600 16px/1.3 var(--spj-display);
  text-transform: capitalize;
  letter-spacing: 0;
  color: #4a1c24;
}
.spj-story__text ul { margin: 8px 0 0; padding: 0; list-style: none; }
.spj-story__text li { display: block; position: relative; padding-left: 18px; margin-top: 6px; font-size: 14px; line-height: 1.65; color: #4f4744; }
.spj-story__text li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #7a2a36; }
.spj-story__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 32px;
  border-top: 1px solid rgba(122, 42, 54, .12);
  background: #fff;
}
.spj-story__pager { display: flex; gap: 10px; }
.spj-story .spj-btn { height: 44px; padding: 0 22px; font-size: 13px; }

/* =====================================================================
   6b. HOW IT WORKS
   Three tiles, icon beside the words as everywhere on the site, the step
   number as a small orange label. Added on the owner's review,
   2026-09-29, as a navy band; since 2026-10-12 white cards on the
   off-white ground, as the hotels page draws its three steps - the
   designer found the page "bht dark".
   ===================================================================== */
.spj-how { padding: var(--spj-sec) 0; background: var(--spj-canvas); border-top: 1px solid var(--spj-hair); }
.spj-how .spj-head__sub { max-width: 640px; }
.spj-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spj-gap); }
.spj .spj-how__step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: var(--spj-surface);
  border: 1px solid var(--spj-hair);
  box-shadow: var(--spj-shadow);
}
.spj-how__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--spj-orange);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 22px -8px rgba(122, 42, 54, .45);
}
.spj-how__ico .spj-i { stroke-width: 1.7; }
.spj-how__num { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--spj-orange-dk); }
.spj .spj-how__step h3 { font-size: 16px; color: var(--spj-ink); }
.spj-how__step p { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--spj-body); }

/* =====================================================================
   7b. FAQ
   The /holiday FAQ's cards: a kicker, the heading and a help card on the
   left, the questions as native <details> on the right with the plus
   that turns into a minus. Added on the owner's review, 2026-09-29.
   The intro is /holiday's .hp-faq__intro measure for measure (the owner,
   2026-10-01): a 26px heading, the card padded 26/24, two 16px links.
   The icons are white there (Font Awesome's svg never took that page's
   orange), so they are white here, as <i> and as <svg>.
   ===================================================================== */
.spj-faq { padding: var(--spj-sec) 0; background: var(--spj-surface); border-top: 1px solid var(--spj-hair); }
.spj-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.spj-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 12px/1.4 var(--spj-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--spj-orange); }
.spj-kicker .spj-i { font-size: 15px; }
.spj-faq__intro h2 { font-size: 26px; }
.spj-faq__intro .spj-head__sub { margin-top: 8px; line-height: 1.6; }
/* a soft orange card since the light pass of 2026-10-12 (was navy) */
.spj-faq__help { margin-top: 22px; padding: 26px 24px; border-radius: 16px; background: linear-gradient(135deg, #fbf3ee 0%, var(--spj-orange-50) 100%); border: 1px solid #ebcfc4; color: var(--spj-ink); }
.spj .spj-faq__help h3 { font-size: 15px; line-height: 1.4; color: var(--spj-ink); }
.spj-faq__help p { margin: 6px 0 16px; font-size: 13px; line-height: 1.6; color: var(--spj-body); }
.spj .spj-faq__help a { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--spj-ink); transition: color .3s; }
.spj .spj-faq__help a:last-child { margin-bottom: 0; }
.spj .spj-faq__help a i, .spj .spj-faq__help a svg { flex: 0 0 auto; width: 1em; text-align: center; color: var(--spj-orange); }
.spj .spj-faq__help a:hover, .spj .spj-faq__help a:focus-visible { color: var(--spj-orange-dk); }
.spj-faq__item {
  margin-bottom: 12px;
  border: 1px solid var(--spj-hair);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.spj-faq__item:hover { border-color: rgba(122, 42, 54, .45); }
.spj-faq__item[open] { border-color: rgba(122, 42, 54, .55); box-shadow: 0 12px 26px -18px rgba(74, 28, 36, .3); }
.spj-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  font: 700 15px/1.4 var(--spj-sans);
  color: var(--spj-navy);
}
.spj-faq__q::-webkit-details-marker { display: none; }
.spj-faq__q:focus-visible { outline-offset: -2px; border-radius: 14px; }
.spj-faq__ico { position: relative; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: rgba(122, 42, 54, .12); transition: background-color .3s; }
.spj-faq__ico::before, .spj-faq__ico::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--spj-orange);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--spj-ease), background-color .3s;
}
.spj-faq__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.spj-faq__item[open] .spj-faq__ico { background: var(--spj-orange); }
.spj-faq__item[open] .spj-faq__ico::before, .spj-faq__item[open] .spj-faq__ico::after { background: #fff; transform: translate(-50%, -50%); }
.spj-faq__a { padding: 0 20px 18px; }
.spj-faq__a p { font-size: 14px; line-height: 1.75; color: var(--spj-body); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1299px) {
  .spj-jr__rail { grid-auto-columns: calc((100% - 2 * var(--spj-gap)) / 3); }
  .spj-jr.is-all .spj-jr__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  .spj { --spj-gap: 16px; }
  .spj-jr__rail { --spj-gap: 20px; }

  .spj-cats__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 5 * 14px) / 6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 4px 26px;
    margin: -6px -4px -26px;
  }
  .spj-cats__row::-webkit-scrollbar { display: none; }
  .spj-cats__row > * { scroll-snap-align: start; }

  .spj-pil { --pil-col: .3; --pil-gap: 36px; }
  .spj-pil__feats { padding-left: 24px; gap: 18px; }



  .spj-talk__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spj-sec); }
  .spj-tms { max-width: 700px; }

  .spj-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 991px) {
  .spj-hero { padding: 60px 0 64px; }
  .spj .spj-hero h1 { font-size: 34px; }
  /* the copy runs over the aarti at this width: an even veil, as on a phone */
  .spj-hero::before { background: linear-gradient(90deg, rgba(74, 28, 36, .38) 0%, rgba(74, 28, 36, .24) 100%); }

  .spj-cats__row { grid-auto-columns: calc((100% - 4 * 14px) / 5); }

  .spj-pil__photo { position: relative; width: 100%; height: 300px; }
  .spj-pil__photo img {
    object-position: 50% 42%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .spj-pil__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 0 0 var(--spj-sec); margin-top: -28px; }
  .spj-pil__copy, .spj-pil__feats { grid-column: 1; }
  .spj-pil__text { max-width: 620px; }
  .spj-pil__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--spj-hair); }


  .spj-how__steps { grid-template-columns: minmax(0, 1fr); }

  .spj-stories__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 4px 26px;
    margin: -6px -4px -26px;
  }
  .spj-stories__row::-webkit-scrollbar { display: none; }
  .spj-stories__row > * { scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .spj { --spj-sec: 52px; --spj-head: 22px; --spj-gap: 12px; --spj-side: 16px; }
  .spj-head { flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; }
  .spj-head h2, .spj-faq__intro h2, .spj .spj-pil__title, .spj .spj-dar__title, .spj .spj-cta__title { font-size: 23px; }
  /* the reviews' arrows stay level with the title (the owner, 2026-09-29);
     at 20-23px the title and two small arrows fit a 328px column */
  .spj-tms .spj-head { flex-wrap: nowrap; align-items: flex-start; }
  .spj-head > .spj-more, .spj-head > .spj-arrs, .spj-head__tools { margin-bottom: 0; }

  /* About's and Contact's phone hero: the copy runs the full width, so the
     veil is even rather than fading out on the right, and the promise
     pills stack */
  .spj-hero { min-height: 0; padding: 56px 0 60px; }
  .spj-hero::before { background: linear-gradient(90deg, rgba(74, 28, 36, .40) 0%, rgba(74, 28, 36, .26) 100%); }
  .spj .spj-hero h1 { font-size: 28px; margin-top: 16px; }
  .spj-hero__lead { font-size: 14px; }

  .spj-cats__row { grid-auto-columns: calc((100% - 3 * 12px) / 4); gap: 12px; }
  .spj-cat__name { font-size: 12.5px; min-height: 50px; padding: 8px 4px 12px; }

  .spj-jr__rail, .spj-dest__rail { grid-auto-columns: calc((100% - var(--spj-gap)) / 2); gap: var(--spj-gap); }
  .spj-jr__rail { --spj-gap: 14px; }
  .spj-jr.is-all .spj-jr__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .spj-jc__body { padding: 16px 12px 14px; }
  .spj .spj-jc__title { font-size: 15px; }
  .spj-jc__badge { padding: 3px 8px; font-size: 10px; }
  .spj .spj-jc__meta { font-size: 12px; }
  .spj-jc--ask { padding: 24px 20px; }

  .spj-pil__photo { height: 260px; }
  .spj-pil__grid { gap: 28px; margin-top: -24px; }
  /* five small cards in one row (the owner, 2026-09-29): the icon over the
     title, the one-line description left for the desktop. The row runs 6px
     into the side padding each way; that is what lets "Experiences", the
     longest word, fit a 360px phone at 9.5px. */
  .spj-pil__feats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 -6px; padding-top: 22px; }
  .spj .spj-pil__feats li {
    grid-template-columns: none;
    justify-items: center;
    align-content: start;
    gap: 8px;
    padding: 12px 2px 11px;
    border: 1px solid var(--spj-hair);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--spj-shadow);
    text-align: center;
  }
  .spj-pil__ico { width: 34px; height: 34px; font-size: 17px; }
  .spj-pil__feats strong { font-size: clamp(9.5px, 2.65vw, 11px); line-height: 1.25; hyphens: auto; }
  .spj-pil__feats span.spj-pil__d { display: none; }

  .spj-dc__name { font-size: 14px; padding: 10px 12px 0; }
  .spj-dc__state { padding: 2px 12px 12px; }


  .spj-tm { padding: 20px 18px; gap: 12px; }
  .spj-tm__face { width: 56px; height: 56px; }

  .spj .spj-how__step { padding: 18px 16px; gap: 14px; }
  .spj-faq__q { padding: 14px 16px; font-size: 14px; }
  .spj-faq__a { padding: 0 16px 16px; }
  .spj-faq__help { padding: 20px; }
  .spj .spj-faq__help a { font-size: 14px; }
  .spj .spj-cta__trust { gap: 8px 18px; margin-top: 22px; padding-top: 16px; }
  .spj .spj-cta__trust li { font-size: 12px; }
  .spj-cta__card { border-radius: 18px; }


  .spj-story__body { padding: 20px 20px 4px; }
  .spj-story .spj-story__title { font-size: 21px; }
  .spj-story__foot { padding: 12px 20px; }
}

@media (max-width: 575px) {
  /* the breadcrumb needs the row; the caption goes */
  .spj-hero__place { display: none; }
  /* the filter bar as two rows: funnel and text, then the clear button
     under the text, as wide as its label (the owner's phone rule). The
     ::before is a zero-height full-width item ordered between them, so
     it always breaks the line; a max-width on the button would not,
     since it also caps the size used for line breaking. */
  .spj-jr__filter { gap: 4px 14px; padding: 10px 12px; }
  .spj-jr__filter::before { content: ''; order: 1; flex: 0 0 100%; height: 0; }
  .spj-jr__filter-text { flex: 1 1 0; }
  .spj-jr__clear { order: 2; flex: 0 0 auto; margin-left: 48px; }
  .spj-cats__row { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .spj-stories__row { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }

  /* measured at 360px (the owner's phone review, 2026-09-29). Section heads
     at 20px, so "What Our Travellers Say" (230px), "Planned With You, In
     Three Steps" (317) and "Explore India's Sacred Landscape" (324) each
     keep one line in the 328px column */
  .spj-head h2, .spj-faq__intro h2, .spj .spj-pil__title, .spj .spj-dar__title { font-size: 20px; }

  /* a head's link stays left and its arrows go to the right edge (the
     owner, 2026-09-29); the reviews' arrows, alone on their row, likewise */
  .spj-head__tools { flex: 1 1 100%; justify-content: space-between; }
  .spj-tms .spj-head { flex-wrap: nowrap; align-items: flex-start; }
  .spj-tms .spj-head > .spj-arrs { gap: 6px; margin-left: auto; padding-top: 1px; }
  .spj-tms .spj-arr { width: 30px; height: 30px; }
  .spj-tms .spj-arr .spj-i { font-size: 14px; }

  /* hero: the two buttons side by side (304 of 336px) */
  .spj-hero__actions { flex-wrap: nowrap; gap: 8px; }
  .spj-hbtn { gap: 6px; padding: 0 14px; }
  .spj-hbtn .spj-i { font-size: 13px; }
  /* and the three promises on one line, short labels at 10.5px (326 of 336) */

  /* journeys: one full card at a time, the buttons side by side */
  .spj-jr__rail { grid-auto-columns: 100%; }
  .spj-jr.is-all .spj-jr__rail { grid-template-columns: minmax(0, 1fr); }
  .spj .spj-jc__title { font-size: 17px; }

  /* the map: the five regions as one row of chips, " India" dropped */
  /* three destinations across */
  .spj-dest__rail { grid-auto-columns: calc((100% - 2 * 10px) / 3); gap: 10px; }
  .spj-dc__name { padding: 8px 8px 0; font-size: 12.5px; line-height: 1.25; }
  .spj-dc__state { padding: 2px 8px 10px; font-size: 10.5px; line-height: 1.35; }

  /* the three steps as square cards in a slider, one at a time, with the
     site's dots (js/bj-mobrail.js, named in the view's BJM_RAILS) */
  .spj-how__steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .spj-how__steps::-webkit-scrollbar { display: none; }
  .spj .spj-how__step { align-content: start; padding: 20px 18px; scroll-snap-align: start; }
  .spj-how .bjm-nav { margin-top: 16px; }

  /* the closing card: its two buttons side by side, without their icons
     as on the home page's closing card (277 of 292px) */
  .spj-cta__card { padding-left: 18px; padding-right: 18px; }
  .spj-cta__actions { flex-wrap: nowrap; gap: 8px; }
  .spj-cta__actions .spj-btn { height: 42px; padding: 0 13px; font-size: 12px; }
  .spj-cta__actions .spj-btn .spj-i, .spj-cta__actions .spj-btn i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spj *, .spj-story { animation: none !important; transition: none !important; }
}

/* =====================================================================
   The banner film's sound (2026-10-10, the designer: "banner video audio
   ke saath play ho, awaaz aaye"). A glass pill in the banner's top row,
   beside the place caption - not in a corner, where the floating
   call/chat dock and the expert pill slide over it - that says whether
   the sound is on and switches it. On a phone, where the caption is
   hidden, it sits above the breadcrumb, in the band's top corner.
   js/bj-spiritual.js (7) keeps it in step with the video.
   ===================================================================== */
.spj-hero .spj-sound {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  margin: 0 0 0 auto; padding: 6px 13px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px;
  background: rgba(74, 28, 36, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
/* the caption takes the free space, so the two pills sit together on the right */
.spj-hero__top > .spj-hero__place { margin-left: auto; }
.spj-hero__top > .spj-hero__place + .spj-sound { margin-left: 0; }
.spj-hero .spj-sound:hover { background: rgba(74, 28, 36, .65); border-color: rgba(255, 255, 255, .6); }
.spj-hero .spj-sound:focus-visible { outline: 2px solid #e3c67e; outline-offset: 2px; }
.spj-hero .spj-sound[hidden] { display: none; }
.spj-sound svg {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.spj-sound svg path:first-child { fill: currentColor; }
.spj-sound__on { display: none; }
.spj-sound.is-on .spj-sound__on { display: block; }
.spj-sound.is-on .spj-sound__off { display: none; }
/* while it is silent, the speaker is orange, so the pill reads as an offer */
.spj-sound:not(.is-on) svg { color: #e3c67e; }
/* a phone's row is the breadcrumb's alone (it wraps beside the pill at
   360px), so the pill sits above it, in the band's top corner */
@media (max-width: 575px) {
  .spj-hero .spj-sound { gap: 5px; padding: 5px 10px 5px 8px; font-size: 11px; }
  .spj-sound svg { width: 13px; height: 13px; }
}

/* =====================================================================
   THE MOCK-UP LOOK (2026-10-12)
   The owner's mock-up, which the designer sent with
   "make it": the banner's title with a gold rule (the serif face went
   back to the site's Poppins the same day), the categories with a
   line under each name, the landscape and the Darshan card as one row,
   region cards either side of the map, a rail of three stories and a
   full-width closing band. The palette is in the tokens at the top.
   ===================================================================== */
/* the type is the site's (2026-10-12, the designer: "fonts bade hain, chhote
   karo, font style website wala rakho"): Poppins at 600, the section
   headings at 26px, About's hero at 40px - the mock-up's serif at 32-62px
   was too big for her */
.spj h1, .spj h2 { font-weight: 600; }
.spj-head h2, .spj-faq__intro h2 { font-size: 26px; line-height: 1.25; }
.spj .spj-pil__title { font-size: 26px; line-height: 1.25; }
.spj .spj-pil__title em { color: var(--spj-orange); }

/* ---- the banner ---- */
.spj-hero { background: #3a141b; }
.spj .spj-hero h1 { margin: 10px 0 12px; font-size: 40px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.spj-hero__rule { display: inline-block; width: 36px; height: 1px; margin-left: 16px; vertical-align: middle; background: var(--spj-gold); }
.spj-hero__tag { max-width: 560px; font: 500 18px/1.4 var(--spj-sans); color: #fff; text-shadow: 0 2px 16px rgba(10, 6, 8, .55); }
/* .spj in front: the base block's "p { margin: 0 }" would win otherwise */
.spj .spj-hero__tag { margin: 0; }
.spj .spj-hero__lead { margin-top: 16px; max-width: 520px; }
.spj-hero__actions { margin-top: 26px; }
.spj-hbtn { font-weight: 600; }
.spj-hbtn .fa { font-size: 12px; }
.spj .spj-hbtn--primary { box-shadow: 0 10px 24px rgba(58, 20, 27, .45); }
.spj .spj-hbtn--primary:hover, .spj .spj-hbtn--primary:focus-visible { box-shadow: 0 14px 28px rgba(58, 20, 27, .55); }
/* the caption and the Sound pill at the banner's foot, on the right */
.spj-hero__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 40px; }
.spj-hero .spj-sound { margin: 0; }
.spj-hero__place .spj-i { color: var(--spj-gold-lt); }

/* ---- the categories: a line under each name ---- */
.spj-cat__name { min-height: 0; padding: 10px 8px 3px; font-size: 14px; }
.spj-cat__desc { display: block; padding: 0 10px 16px; font-size: 12px; line-height: 1.45; color: var(--spj-soft); }
.spj-cat__ico { color: var(--spj-orange); }

/* ---- the landscape and the Darshan card, one row ---- */
.spj-land { position: relative; padding: var(--spj-sec) 0; background: var(--spj-canvas); }
.spj-land__ridge { display: none; }
.spj-land__cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.spj-land__main { position: relative; min-width: 0; }
.spj-land__head { margin-bottom: 22px; }
.spj-land__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.spj-land__links path { fill: none; stroke: rgba(74, 28, 36, .25); stroke-width: 1; stroke-dasharray: 3 4; transition: stroke .3s; }
.spj-land__links path.is-on { stroke: rgba(74, 28, 36, .6); }
.spj-land__body { display: grid; grid-template-columns: minmax(0, 1fr) 236px minmax(0, 1fr); gap: 24px; align-items: center; }
.spj-regs { position: relative; z-index: 1; display: grid; gap: 14px; align-content: center; }
.spj-reg {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--spj-hair);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--spj-shadow);
  color: var(--spj-ink);
  font-family: var(--spj-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s var(--spj-ease), transform .25s var(--spj-ease);
}
.spj-reg:hover { transform: translateY(-2px); box-shadow: var(--spj-shadow-up); }
.spj-reg__img { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--spj-chip); }
.spj-reg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spj-reg__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html body .spj .spj-reg__name { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--spj-ink); }
html body .spj .spj-reg__places { font-size: 11.5px; font-weight: 400; line-height: 1.45; color: var(--spj-soft); }
.spj-reg__go {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; margin-left: auto;
  border-radius: 50%; border: 1px solid var(--spj-line);
  color: var(--spj-orange); font-size: 14px;
  transition: background-color .2s, color .2s, transform .2s var(--spj-ease);
}
.spj-reg__go .spj-i { stroke-width: 2; }
.spj-reg:hover .spj-reg__go { transform: translateX(2px); }
.spj-reg[aria-pressed="true"] { border-color: var(--spj-orange); box-shadow: 0 0 0 1px var(--spj-orange), var(--spj-shadow-up); }
.spj-reg[aria-pressed="true"] .spj-reg__go { background: var(--spj-orange); border-color: var(--spj-orange); color: #fff; }
.spj-map { position: relative; z-index: 1; width: 100%; aspect-ratio: 612 / 696; }
.spj-map > img, .spj-map > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spj-map .spj-st { transition: opacity .35s, filter .35s; cursor: pointer; }
.spj-map[data-active] .spj-st { opacity: .5; }
.spj-map[data-active="north"] .spj-st--north,
.spj-map[data-active="south"] .spj-st--south,
.spj-map[data-active="east"] .spj-st--east,
.spj-map[data-active="west"] .spj-st--west,
.spj-map[data-active="central"] .spj-st--central { opacity: 1; filter: saturate(1.3); }
.spj-map .spj-st:hover { opacity: .85; }
.spj-pin { fill: var(--spj-orange); stroke: #fff; stroke-width: 3; transition: opacity .35s; opacity: .3; }
.spj-pin.is-on { opacity: 1; }
/* the places row under the map */
.spj-dest { display: block; position: relative; z-index: 1; margin-top: 24px; }
.spj-dest__nav { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.spj-dest__rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; }
/* the Darshan card: the photograph behind, a maroon veil rising from the foot, the words on it */
.spj-dar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
  border-radius: 22px;
  background: #4a1c24;
  color: #fff;
  box-shadow: var(--spj-shadow-up);
}
.spj-dar__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 18%; }
.spj-dar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(74, 28, 36, .12) 0%, rgba(74, 28, 36, .62) 36%, rgba(74, 28, 36, .95) 58%, #4a1c24 100%);
}
.spj-dar__body { padding: 190px 28px 28px; }
.spj .spj-dar__title { font-size: 24px; line-height: 1.2; color: #fff; }
.spj .spj-dar__title em { display: block; font-style: normal; color: #fff; }
.spj .spj-dar__lead { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .9); }
.spj .spj-dar__list { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.spj .spj-dar__list li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.spj-dar__list .spj-i { flex: none; font-size: 15px; stroke-width: 2.4; color: var(--spj-gold); }
.spj .spj-dar__cta { align-self: flex-start; margin-top: 22px; background: #9b3647; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); }
.spj .spj-dar__cta:hover, .spj .spj-dar__cta:focus-visible { background: #b04257; }

/* ---- the stories: arrows beside the link, as the journeys have them ---- */
.spj-stories .spj-head__tools { gap: 16px; }

/* ---- the closing band ---- */
.spj-cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 7vw, 96px) 0; background: #4a1c24; color: #fff; }
.spj-cta__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.spj-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(58, 20, 27, .88) 0%, rgba(58, 20, 27, .66) 38%, rgba(58, 20, 27, .14) 72%, rgba(58, 20, 27, 0) 100%);
}
.spj-cta__inner { max-width: 720px; }
.spj .spj-cta__title { font-size: 28px; line-height: 1.2; color: #fff; }
.spj .spj-cta__sub { margin-top: 12px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.spj-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.spj .spj-btn--glass {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.spj .spj-btn--glass:hover, .spj .spj-btn--glass:focus-visible { background: #fff; border-color: #fff; color: var(--spj-navy); }
.spj .spj-btn--glass i { font-size: 12px; }

/* ---- smaller screens ---- */
@media (max-width: 1199px) {
  .spj-land__cols { grid-template-columns: minmax(0, 1fr); }
  .spj-land__links { display: none; }
  .spj-land__body { grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); }
  .spj-dar { min-height: 0; }
  .spj-dar__body { padding-top: 230px; }
  .spj-dar__photo { object-position: 50% 30%; }
}
@media (max-width: 991px) {
  .spj .spj-hero h1 { font-size: 34px; }
  .spj-hero__tag { font-size: 17px; }
  .spj-stories .spj-arrs { display: none; }
}
@media (max-width: 767px) {
  .spj .spj-hero h1 { font-size: 28px; }
  .spj-hero__tag { font-size: 16px; }
  .spj-head h2, .spj-faq__intro h2 { font-size: 23px; }
  .spj .spj-pil__title { font-size: 23px; }
  .spj .spj-dar__title { font-size: 22px; }
  .spj .spj-cta__title { font-size: 23px; }
  .spj-land__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .spj-regs { display: contents; }
  .spj-map { grid-column: 1 / -1; width: min(280px, 80%); justify-self: center; margin: 10px 0; }
  .spj-regs--r .spj-reg { order: 1; }
  .spj-cat__desc { display: none; }
  .spj-cat__name { min-height: 50px; padding: 8px 4px 12px; }
}
@media (max-width: 575px) {
  .spj .spj-hero h1 { font-size: 26px; }
  /* the title fills the line on a phone: the gold rule sits under it */
  .spj-hero__rule { display: block; width: 30px; margin: 10px 0 0; }
  .spj-hero__tag { font-size: 15px; }
  .spj-hero__foot { margin-top: 26px; }
  .spj-head h2, .spj-faq__intro h2 { font-size: 20px; }
  .spj .spj-pil__title { font-size: 20px; }
  .spj .spj-dar__title { font-size: 20px; }
  html body .spj .spj-reg { height: auto !important; padding: 8px !important; gap: 9px; border-radius: 12px; }
  .spj-reg__img { width: 44px; height: 44px; border-radius: 8px; }
  html body .spj .spj-reg__name { font-size: 12.5px; }
  html body .spj .spj-reg__places { display: none; }
  /* the card is 170px wide: the name has the room, the arrow goes */
  .spj-reg__go { display: none; }
  .spj-map { width: min(230px, 66%); }
  .spj-dar { border-radius: 18px; }
  .spj-dar__body { padding: 180px 18px 20px; }
  .spj .spj-dar__list li { font-size: 12.5px; }
  .spj .spj-dar__cta.spj-btn { height: 42px; padding: 0 16px; font-size: 12.5px; }
  .spj-cta { padding: 48px 0; }
  .spj .spj-cta__title { font-size: 20px; }
  .spj .spj-cta__sub { font-size: 13px; }
}

/* the film's band as tall as its words (the designer, 2026-10-14: "faltu
   ke spaces ... htaao"): 56px above the breadcrumb and under the button */
@media (min-width: 768px) {
  .spj .spj-hero { min-height: 0; padding: 56px 0; }
}

/* The whole film, and sharp (2026-10-21, the designer: "video puri nahi aa
   rahi ... banner ki height badi karni ho toh karo ... blur bilkul nahi,
   proper chahiye"). From 576px up the band takes the film's own 16:9 shape,
   so every edge of the frame shows. This overrides the "as tall as its
   words" rule above, for this banner only. The band grows past 16:9 only
   if the words need more room.
   - min-height, not aspect-ratio: the band is overflow: hidden, and an
     aspect-ratio box that clips does not grow for its content, so a tablet
     would have cut the buttons off. 56.25vw is 16:9 of the window; less
     9px allows for a desktop scrollbar, so the frame is not trimmed at
     the sides.
   - the breadcrumb stays at the top, the words sit in the middle of the
     frame, the Sound pill at its foot.
   - phones keep the band as tall as its words: 16:9 at 390px is 219px,
     too short for the copy. They show the frame's right side, where the
     priests are (the max-width: 991px rule above). */
@media (min-width: 576px) {
  /* Second pass, the same day ("ye toh kuch jyada bada ho gaya"): the full
     16:9 ran past a laptop's screen. The band is now as tall as the screen
     under the header, and never taller than the film's 16:9; the words set
     its least height. On a 1366x768 laptop that is about 600px: the whole
     band, its words and its Sound pill on the first screen, about four
     fifths of the frame's height, all of its width. A tablet is the 16:9
     (no floor here: a 520px floor cut a tablet's frame to 80% wide). */
  .spj .spj-hero { min-height: min(calc(100vh - 60px), calc(56.25vw - 9px)); align-items: stretch; padding: 56px 0 36px; }
  .spj-hero > .container { display: flex; flex-direction: column; }
  .spj-hero__copy { margin: auto 0; }
  .spj-hero__foot { margin-top: 24px; }
}

/* The words over the bright daytime film (2026-10-21, the designer: "banner
   pe jo mera content likha hua hai wo proper dikh bhi nahi raha"). The old
   veil was tuned for the dusk film and nearly clear; over a blue sky and
   sunlit temples the white words washed out. Now a warm dark shade (the
   page's maroon, not navy - the owner found navy heavy) sits behind the
   words and clears before the priests on the right, a light shade along
   the top carries the breadcrumb, and every line of copy gets a tight
   shadow under its soft one. The lead is full white. */
/* Lightened the same day ("mujhe nahi achha lag raha yaar, dull lag raha
   hai"): the maroon at .80 turned the blue sky and the sunlit temples a
   muddy brown, and measured 7:1 to 16:1 behind the words - far more than
   reading needs (4.5:1). Now a neutral warm dark at about half that
   strength, which darkens without tinting, and a crisper text shadow;
   the words still measure above 4.5:1 on their brightest patches. */
.spj .spj-hero::before {
  background:
    linear-gradient(180deg, rgba(16, 8, 10, .26) 0, rgba(16, 8, 10, 0) 120px),
    linear-gradient(90deg, rgba(16, 8, 10, .52) 0%, rgba(16, 8, 10, .40) 30%, rgba(16, 8, 10, .14) 50%, rgba(16, 8, 10, 0) 62%);
}
.spj .spj-hero h1, .spj .spj-hero__tag, .spj .spj-hero__lead, .spj .spj-hero__crumbs {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 20px rgba(0, 0, 0, .45);
}
.spj .spj-hero__lead { color: #fff; }
.spj .spj-hero__crumbs, .spj .spj-hero__crumbs a { color: rgba(255, 255, 255, .92); }
.spj .spj-hero__crumbs > * + *::before { color: rgba(255, 255, 255, .6); }
.spj .spj-hbtn--ghost { background: rgba(0, 0, 0, .22); }

/* Phones and tablets (2026-10-21, the designer: "iska mob or tab view bhi
   proper kar dena"). The band used to be only as tall as its words, so the
   words and their shade covered the whole film and the aarti could not be
   seen; on a tablet the band was a cramped 16:9 strip. Now the words sit at
   the top under a warm shade that clears lower down, the band is taller,
   and its lower part shows the aarti itself - the priests with their lamps
   - with the place caption and the Sound pill at its foot.
   - the shade is measured in px from the top, because the words end about
     310px down at every phone and tablet width; a light shade along the
     foot carries the two pills.
   - phone: up to 600px tall, never more than the screen less 140px, so the
     next section's heading still peeks.
   - tablet portrait: 72% of its width, 480-640px, never more than the
     screen less 80px. A landscape tablet from 992px has the desktop band. */
@media (max-width: 991px) {
  .spj .spj-hero { align-items: stretch; padding: 56px 0 24px; }
  .spj-hero > .container { display: flex; flex-direction: column; }
  .spj-hero__copy { margin: 0 0 auto; }
  .spj-hero__foot { margin-top: 28px; }
  .spj .spj-hero::before {
    background:
      linear-gradient(0deg, rgba(16, 8, 10, .28) 0, rgba(16, 8, 10, 0) 100px),
      linear-gradient(180deg, rgba(16, 8, 10, .52) 0, rgba(16, 8, 10, .40) 260px, rgba(16, 8, 10, .12) 340px, rgba(16, 8, 10, 0) 400px);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .spj .spj-hero { min-height: min(clamp(480px, 72vw, 640px), calc(100vh - 80px)); }
}
@media (max-width: 575px) {
  .spj .spj-hero { min-height: min(600px, calc(100vh - 140px)); min-height: min(600px, calc(100svh - 140px)); }
  /* the foot's pills go to the left on a phone: the site's floating call,
     WhatsApp and chat buttons sit on the right edge at the same height and
     covered the Sound pill on a 360x740 screen */
  .spj .spj-hero__foot { justify-content: flex-start; }
  .spj .spj-hero__place { display: inline-flex; }
}
/* under 390px the caption and the Sound pill together would reach the
   floating buttons, so only the Sound pill stays */
@media (max-width: 389px) {
  .spj .spj-hero__place { display: none; }
}