/*
  JAIPUR HERITAGE TOUR — HOMEPAGE
  Custom sizing, spacing, typography and breakpoints use px.
  Fluid widths use percentages where necessary for responsiveness.
  The responsive page is composed using flexible rows and columns.
*/
:root {
  --ivory: #f8f3e9;
  --cream: #fffaf1;
  --cream-deep: #f0e6d7;
  --sand: #e8d4bc;
  --blush: #f2e0d8;
  --dusty-rose: #be826c;
  --terracotta: #a34f41;
  --terracotta-dark: #86382e;
  --maroon: #542c30;
  --ink: #302522;
  --body: #665851;
  --gold: #a98549;
  --olive: #59604c;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --alt: 'Jost', Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
}

main {
  overflow-x: clip;
}

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: white;
  background: var(--terracotta);
}

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

a:hover {
  color: inherit;
}

button {
  font-family: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 5px;
}

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

h1,
h2,
h3,
h4,
h5,
p {
  margin-top: 0;
}

.site-shell {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 68px;
}

.section {
  margin-top: 50px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 500;
  padding: 10px 18px;
  background: var(--maroon);
  color: white;
}

.skip-link:focus {
  top: 20px;
  color: white;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 3px;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  height: 3px;
  width: 0;
  background: var(--terracotta);
  transition: width 90ms linear;
}

.loading-curtain {
  display: none;
}

.has-js .loading-curtain {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--maroon);
  color: var(--cream);
  z-index: 400;
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(.74, 0, .21, 1), visibility 900ms;
  pointer-events: none;
}

.loading-curtain.is-hidden {
  transform: translateY(-110%);
  visibility: hidden;
}

.curtain-emblem {
  font-size: 68px;
  line-height: 1;
  color: #e3b58f;
  animation: curtain-spin 9s linear infinite;
}

.curtain-copy {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
}

.top-ribbon {
  background: var(--maroon);
  color: #fff4e5;
  height: 34px;
}

.top-ribbon-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-family: var(--alt);
  font-size: 10px;
  letter-spacing: 1.5px;
}

.ribbon-left,
.ribbon-middle,
.ribbon-right {
  white-space: nowrap;
}

.ribbon-middle {
  font-size: 11px;
  letter-spacing: 2.5px;
}

.sun-symbol {
  color: #d8b582;
  font-size: 15px;
  margin-right: 7px;
}

.ribbon-right span {
  color: #d8b582;
  margin-left: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(248, 243, 233, .96);
  border-bottom: 1px solid rgba(84, 44, 48, .12);
  backdrop-filter: blur(18px);
  transition: box-shadow 300ms ease, background 300ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 40px rgba(58, 38, 33, .07);
  background: rgba(255, 250, 241, .97);
}

.nav-wrap {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  color: var(--maroon);
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b99a79;
  border-radius: 50%;
  color: var(--maroon);
  transition: transform 650ms ease;
}

.brand:hover .brand-mark {
  transform: rotate(15deg);
}

.brand-mark svg {
  width: 36px;
  height: 36px;
}

.brand-words {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand-words strong {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
}

.brand-words small {
  font-size: 9px;
  letter-spacing: 3.1px;
  font-weight: 700;
  margin-top: 7px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-left: auto;
}

.desktop-nav .nav-link {
  font-family: var(--alt);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #5a4741;
  padding: 36px 0;
  position: relative;
  white-space: nowrap;
}

.desktop-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link.active {
  color: var(--terracotta-dark);
}

.desktop-nav .nav-link:hover::after,
.desktop-nav .nav-link.active::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-cta {
  display: flex;
  align-items: center;
  height: 47px;
  background: var(--maroon);
  border: 1px solid var(--maroon);
  padding: 0 5px 0 20px;
  color: white;
  gap: 20px;
  border-radius: 3px;
  font-family: var(--alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
  transition: background 300ms, transform 300ms, color 300ms;
}

.nav-cta:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
  transform: translateY(-2px);
}

.circle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  font-size: 19px;
}

.menu-toggle {
  display: none;
  border: 1px solid rgba(84, 44, 48, .22);
  width: 46px;
  height: 43px;
  background: transparent;
  border-radius: 3px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-toggle span {
  height: 2px;
  width: 19px;
  background: var(--maroon);
  display: block;
  transition: transform 250ms, opacity 250ms;
}

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

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

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

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px 28px 25px;
  background: var(--cream);
  border-top: 1px solid #e9dacc;
  box-shadow: 0 22px 33px rgba(70, 34, 32, .12);
}

.mobile-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.mobile-menu a {
  color: var(--maroon);
  border-bottom: 1px solid #e9dacc;
  padding: 12px 2px;
  font-family: var(--serif);
  font-size: 20px;
}

.mobile-menu-note {
  margin-top: 18px;
  color: var(--terracotta);
  font-size: 10px;
  letter-spacing: 1.5px;
}

/* Page-based navigation keeps Home active while browsing the homepage. */
.desktop-nav .nav-link[aria-current="page"] {
  color: var(--terracotta-dark);
}

.desktop-nav .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.mobile-menu a.active,
.mobile-menu a[aria-current="page"] {
  color: var(--terracotta-dark);
  padding-left: 13px;
  background: linear-gradient(90deg, rgba(163, 79, 65, .08), transparent 85%);
}

.mobile-menu a.active::before,
.mobile-menu a[aria-current="page"]::before {
  content: '✦';
  color: var(--gold);
  font-size: 10px;
  margin-left: -12px;
  margin-right: 4px;
}

.mobile-menu .mobile-contact-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--maroon);
  color: white;
  padding: 12px 16px;
  margin-top: 16px;
  border-bottom: 0;
  font-family: var(--alt);
  font-size: 14px;
  font-weight: 600;
}

.mobile-menu .mobile-contact-link:hover {
  color: white;
  background: var(--terracotta);
}

.mobile-menu .mobile-contact-link span {
  font-size: 20px;
}

/* HERO */
.hero-section {
  padding-top: 28px;
  background: radial-gradient(circle at 16% 21%, #fff9ef 0, transparent 42%), var(--ivory);
  position: relative;
  overflow: hidden;
}

.hero-background-mandala {
  position: absolute;
  top: -145px;
  left: -165px;
  font-size: 480px;
  font-weight: 400;
  font-family: Georgia, serif;
  line-height: 1;
  color: rgba(170, 101, 77, .06);
  pointer-events: none;
}

.hero-layout {
  display: flex;
  align-items: center;
  gap: 44px;
  min-height: 650px;
}

.hero-copy {
  flex: 1 1 52%;
  min-width: 0;
  padding-top: 6px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 3px;
  color: var(--terracotta);
  text-transform: uppercase;
}

.eyebrow-line {
  width: 32px;
  height: 1px;
  display: inline-block;
  background: currentColor;
  flex: 0 0 auto;
}

.hero-eyebrow {
  margin-bottom: 20px;
}

.hero-pretitle {
  color: var(--maroon);
  font-family: var(--serif);
  font-size: 19px;
  margin: 0 0 3px;
}

.hero-title {
  font-family: var(--serif);
  font-size: 75px;
  line-height: 1.1;
  letter-spacing: -3px;
  font-weight: 500;
  color: var(--maroon);
  margin-bottom: 25px;
}

.hero-title em,
.section-title em,
.closing-content h2 em,
.quote-inner p em {
  color: var(--terracotta);
  font-style: italic;
  font-weight: 400;
}

.hero-dot {
  color: var(--gold);
}

.hero-description {
  color: var(--body);
  max-width: 450px;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.button {
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 54px;
  padding: 7px 7px 7px 25px;
  position: relative;
  overflow: hidden;
  font-family: var(--alt);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  white-space: nowrap;
  border-radius: 2px;
  transition: transform 250ms ease, background 300ms ease, border-color 300ms, color 300ms;
}

.button::before {
  position: absolute;
  content: '';
  inset: 0;
  background: rgba(255, 255, 255, .12);
  transform: translateX(-105%) skewX(-18deg);
  transition: transform 550ms ease;
}

.button:hover::before {
  transform: translateX(105%) skewX(-18deg);
}

.button-primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}

.button-primary:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: white;
  transform: translateY(-3px);
}

.button-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: transform 300ms;
}

.button:hover .button-icon {
  transform: rotate(45deg);
}

.text-link {
  color: var(--maroon);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 250ms;
}

.text-link:hover {
  color: var(--terracotta);
}

.text-link-symbol {
  font-size: 23px;
  font-weight: 400;
  color: var(--terracotta);
  margin-right: 2px;
}

.hero-footer-note {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 55px;
}

.mini-seal {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c6b29d;
  border-radius: 50%;
  color: var(--terracotta);
  font-size: 23px;
}

.hero-footer-note strong,
.hero-footer-note small {
  display: block;
}

.hero-footer-note strong {
  font-size: 11px;
  letter-spacing: 1.9px;
  font-weight: 700;
  color: var(--maroon);
}

.hero-footer-note small {
  font-size: 11px;
  color: #8a7a6c;
  letter-spacing: .3px;
  margin-top: 4px;
}

.hero-visual {
  flex: 1 1 48%;
  position: relative;
  height: 620px;
  min-width: 0;
  padding: 0 18px 32px 35px;
}

.hero-arch-img {
  background-image: url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 570px;
  border-radius: 255px 255px 7px 7px;
  overflow: hidden;
  position: relative;
  background: #c58d71;
  z-index: 2;
  box-shadow: 0 26px 55px rgba(87, 47, 37, .17);
}

.hero-arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1100ms cubic-bezier(.2, .7, .2, 1);
}

.hero-arch-img:hover img {
  transform: scale(1.065);
}

.hero-photo-outline {
  position: absolute;
  top: -17px;
  left: 18px;
  right: 0;
  height: 583px;
  border: 1px solid #bd8f75;
  border-radius: 270px 270px 4px 4px;
  pointer-events: none;
}

.hero-photo-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 135px;
  background: linear-gradient(to top, rgba(51, 24, 18, .76), transparent);
}

.hero-photo-label {
  position: absolute;
  bottom: 24px;
  left: 35px;
  z-index: 3;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
}

.hero-photo-label span {
  color: #edd4c1;
  font-weight: 400;
}

.hero-floating-picture {
  position: absolute;
  bottom: -3px;
  left: -59px;
  width: 175px;
  z-index: 4;
  padding: 8px;
  box-shadow: 0 14px 45px rgba(66, 40, 30, .18);
  background: var(--cream);
  transform: rotate(-7deg);
}

.hero-floating-picture img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.hero-floating-picture span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--maroon);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .7px;
}

.hero-floating-picture b {
  font-size: 15px;
}

.hero-stamp {
  position: absolute;
  right: -34px;
  top: 55px;
  z-index: 5;
  width: 123px;
  height: 123px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--maroon);
  color: #ffe8d2;
  border: 5px solid #f9ecdc;
  outline: 1px solid var(--maroon);
  box-shadow: 0 9px 33px rgba(40, 22, 20, .2);
  transform: rotate(12deg);
}

.hero-stamp span {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.3px;
}

.hero-stamp strong {
  font-size: 32px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.5;
}

.vertical-caption {
  position: absolute;
  right: -20px;
  bottom: 110px;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 2px;
  color: #96765b;
}

.hero-bottom {
  min-height: 95px;
  margin-top: 23px;
  padding-top: 17px;
  padding-bottom: 20px;
  border-top: 1px solid #d9cab8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-icon {
  font-size: 31px;
  line-height: 1;
  color: var(--terracotta);
}

.hero-stat strong,
.hero-stat small {
  display: block;
}

.hero-stat strong {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--maroon);
  font-size: 15px;
}

.hero-stat small {
  font-size: 10px;
  color: #88776d;
  margin-top: 4px;
  white-space: nowrap;
}

.stat-divider {
  height: 33px;
  width: 1px;
  background: #d5c5b1;
}

.scroll-down {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--maroon);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.7px;
  white-space: nowrap;
}

.scroll-wheel {
  border: 1px solid #c9b49f;
  border-radius: 50%;
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: transform 300ms, background 300ms;
}

.scroll-down:hover .scroll-wheel {
  background: #e6d8c6;
  transform: translateY(5px);
}

/* COMMON */
.section-title {
  font-family: var(--serif);
  color: var(--maroon);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.3;
  letter-spacing: -1.6px;
  margin: 18px 0 20px;
}

.lead-paragraph {
  font-size: 15px;
  color: #54443b;
  line-height: 1.9;
  font-weight: 500;
}

.ornament-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--terracotta);
  margin-bottom: 22px;
}

.ornament-divider span {
  width: 38px;
  height: 1px;
  background: #d6ae93;
}

.underline-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 55px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--terracotta);
  color: var(--maroon);
  font-size: 12px;
  font-weight: 700;
  transition: color 300ms, gap 300ms;
}

.underline-link:hover {
  color: var(--terracotta);
  gap: 64px;
}

.underline-link span {
  font-size: 21px;
  line-height: 1;
}

/* STORY */
.story-layout {
  display: flex;
  gap: 85px;
  align-items: center;
}

.story-art {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 590px;
  position: relative;
  padding: 30px 120px 52px 12px;
}

.story-photo-large {
  background-image: url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  height: 490px;
  overflow: hidden;
  position: relative;
  background: #d7b49c;
  border-radius: 250px 250px 3px 3px;
  box-shadow: 0 25px 55px rgba(65, 33, 27, .10);
}

.story-photo-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms;
}

.story-photo-large:hover img {
  transform: scale(1.06);
}

.story-photo-small {
  background-image: url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 232px;
  height: 272px;
  border: 8px solid var(--ivory);
  box-shadow: 0 12px 45px rgba(81, 38, 29, .14);
  background: #be8b77;
}

.story-photo-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-pattern {
  width: 145px;
  height: 145px;
  position: absolute;
  top: 9px;
  right: 44px;
  opacity: .5;
  background-image: radial-gradient(#bf9479 2px, transparent 3px);
  background-size: 17px 17px;
}

.story-art-label {
  position: absolute;
  top: 90px;
  left: -5px;
  color: white;
  z-index: 3;
  writing-mode: vertical-rl;
  letter-spacing: 4px;
  font-family: var(--serif);
  background: var(--terracotta);
  padding: 20px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.story-content {
  flex: 1 1 50%;
  min-width: 0;
  padding: 10px 0;
}

.story-content>p:not(.lead-paragraph) {
  color: var(--body);
  line-height: 1.95;
  margin-bottom: 26px;
  font-size: 13px;
  max-width: 530px;
}

.story-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  padding: 24px 0 28px;
  margin-bottom: 25px;
  border-top: 1px solid #e0d0bd;
  border-bottom: 1px solid #e0d0bd;
}

.story-facts>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fact-number {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--maroon);
  line-height: 1.1;
}

.fact-label {
  font-family: var(--alt);
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #968172;
}

/* MARQUEE */
.heritage-marquee {
  position: relative;
  overflow: hidden;
  background: #ede0ce;
  border-top: 1px solid #dcc8b6;
  border-bottom: 1px solid #dcc8b6;
  margin-top: 50px;
  height: 67px;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee-travel 33s linear infinite;
}

.marquee-track span {
  color: #a9816b;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 3.2px;
  padding-right: 25px;
}

.marquee-track b {
  font-size: 19px;
  color: var(--terracotta);
  margin: 0 25px;
  font-weight: 400;
}

.heritage-marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* PLACES */
.places-section {
  margin-top: 50px;
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 70px;
}

.section-heading-row .section-title {
  margin-bottom: 0;
}

.heading-aside {
  max-width: 330px;
  padding-bottom: 8px;
}

.heading-aside p {
  line-height: 1.85;
  font-size: 13px;
  color: var(--body);
  margin: 0 0 19px;
}

.heading-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 2px;
}

.places-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 35px;
  margin-bottom: 23px;
  border-bottom: 1px solid #e0d1c0;
}

.filter-buttons {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.filter-button {
  position: relative;
  border: 0;
  padding: 0 0 15px;
  margin: 0;
  background: none;
  color: #847266;
  font-size: 12px;
  font-weight: 600;
  transition: color 300ms;
}

.filter-button::after {
  content: '';
  position: absolute;
  height: 2px;
  background: var(--terracotta);
  left: 0;
  right: 0;
  bottom: -1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms;
}

.filter-button:hover,
.filter-button.active {
  color: var(--maroon);
}

.filter-button.active::after {
  transform: scaleX(1);
}

.filter-button span {
  font-size: 9px;
  margin-left: 4px;
  color: var(--terracotta);
}

.toolbar-note {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #ad917e;
  white-space: nowrap;
  padding-bottom: 13px;
}

.places-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 35px;
}

.place-card {
  flex: 1 1 31%;
  min-width: 0;
  transition: opacity 350ms, transform 350ms;
}

.place-card.is-filtered-out {
  display: none;
}

.place-open {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
}

.place-image {
  background-image: url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  display: block;
  position: relative;
  overflow: hidden;
  height: 292px;
  background: #d6aa8c;
}

.place-image::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .60);
  opacity: 0;
  transform: scale(.96);
  transition: transform 400ms, opacity 400ms;
  pointer-events: none;
}

.place-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.place-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(53, 31, 24, .20), transparent 36%, transparent 70%, rgba(48, 23, 20, .35));
}

.place-open:hover .place-image img,
.place-open:focus-visible .place-image img {
  transform: scale(1.09);
}

.place-open:hover .place-image::before {
  opacity: 1;
  transform: scale(1);
}

.place-image-num {
  position: absolute;
  top: 20px;
  left: 21px;
  z-index: 2;
  color: white;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
}

.place-image-arrow {
  position: absolute;
  right: 19px;
  bottom: 19px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .75);
  color: white;
  font-size: 24px;
  transition: background 250ms, transform 350ms;
}

.place-open:hover .place-image-arrow {
  transform: rotate(45deg);
  background: var(--terracotta);
  border-color: var(--terracotta);
}

.place-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 2px 0;
  color: var(--maroon);
}

.place-info>span:first-child {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.place-info small {
  font-size: 9px;
  font-family: var(--alt);
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 2px;
}

.place-info strong {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.4;
  font-weight: 500;
  margin-top: 3px;
}

.place-info em {
  font-style: normal;
  font-size: 11px;
  color: #98867a;
}

.place-info-icon {
  color: #c8a88f;
  font-size: 21px;
  transition: transform 300ms;
}

.place-open:hover .place-info-icon {
  transform: rotate(90deg);
}

.places-bottom {
  border-top: 1px solid #e3d3c2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding-top: 23px;
}

.places-bottom>span {
  color: #8a786b;
  font-size: 12px;
}

.decorative-star {
  font-size: 22px;
  color: var(--terracotta);
  vertical-align: middle;
  margin-right: 6px;
}

/* CULTURE */
.culture-section {
  background: #f0e5d6;
  padding: 67px 0 65px;
  position: relative;
  overflow: hidden;
}

.culture-decor {
  position: absolute;
  right: -70px;
  top: -190px;
  font-size: 510px;
  font-family: Georgia, serif;
  line-height: 1;
  color: rgba(179, 107, 80, .055);
  pointer-events: none;
}

.culture-layout {
  display: flex;
  gap: 88px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.culture-left {
  flex: 1 1 46%;
  min-width: 0;
}

.culture-left>p {
  max-width: 480px;
  color: var(--body);
  line-height: 1.9;
  font-size: 14px;
}

.culture-options {
  margin-top: 32px;
  border-top: 1px solid #d4c2b2;
}

.culture-option {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d4c2b2;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 25px;
  text-align: left;
  padding: 10px 0;
  color: #77675d;
  transition: padding 250ms, color 250ms;
}

.culture-option:hover,
.culture-option.active {
  color: var(--maroon);
  padding-left: 11px;
}

.culture-num {
  font-size: 10px;
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 1px;
}

.culture-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-right: auto;
}

.culture-arrow {
  font-size: 23px;
  opacity: .25;
  transition: opacity 250ms, transform 250ms;
}

.culture-option.active .culture-arrow,
.culture-option:hover .culture-arrow {
  opacity: 1;
  transform: rotate(45deg);
  color: var(--terracotta);
}

.culture-right {
  flex: 1 1 54%;
  min-width: 0;
}

.culture-feature-image {
  background-image: url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  height: 407px;
  background: #b7a395;
  padding: 12px;
  position: relative;
}

.culture-feature-image>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 220ms ease, transform 700ms ease;
}

.culture-feature-image:hover>img {
  transform: scale(1.02);
}

.culture-feature-image>img.changing {
  opacity: .15;
}

.culture-image-frame {
  position: absolute;
  inset: 22px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .65);
}

.culture-image-label {
  position: absolute;
  left: 33px;
  bottom: 29px;
  background: var(--cream);
  padding: 12px 16px;
  color: var(--maroon);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.7px;
}

.culture-image-label b {
  margin-left: 10px;
  color: var(--terracotta);
}

.culture-feature-text {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0;
  padding: 20px 10px 0;
}

.culture-feature-number {
  color: var(--terracotta);
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
}

.culture-feature-text h3 {
  font-family: var(--serif);
  color: var(--maroon);
  font-size: 25px;
  font-weight: 500;
  margin: 5px 0 5px;
}

.culture-feature-text p {
  color: var(--body);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

/* ROUTE */
.route-section {
  background: var(--maroon);
  color: white;
  padding: 62px 0 60px;
  position: relative;
  overflow: hidden;
}

.route-section::before {
  position: absolute;
  content: '';
  width: 490px;
  height: 490px;
  border: 1px solid rgba(240, 214, 189, .08);
  border-radius: 50%;
  right: -110px;
  top: -250px;
  box-shadow: 0 0 0 56px rgba(240, 214, 189, .025), 0 0 0 110px rgba(240, 214, 189, .018);
}

.route-shell {
  position: relative;
  z-index: 1;
}

.route-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 55px;
}

.eyebrow-light {
  color: #e9bb99;
}

.route-heading .section-title {
  color: #fff6e9;
  margin-bottom: 0;
}

.route-heading .section-title em {
  color: #efbf9e;
}

.route-heading-right {
  max-width: 410px;
}

.route-heading-right p {
  color: #e4cbc4;
  font-size: 13px;
  line-height: 1.8;
}

.route-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 17px;
}

.route-pill {
  border: 1px solid rgba(255, 245, 230, .35);
  background: transparent;
  color: #e4c8bd;
  padding: 10px 19px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 30px;
  transition: background 250ms, color 250ms, border 250ms;
}

.route-pill.active,
.route-pill:hover {
  background: #fff1dd;
  border-color: #fff1dd;
  color: var(--maroon);
}

.route-steps {
  position: relative;
  display: flex;
  gap: 36px;
  margin-top: 62px;
  padding-top: 2px;
}

.route-steps::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  height: 1px;
  background: rgba(255, 242, 224, .38);
  content: '';
}

.route-step {
  flex: 1 1 25%;
  min-width: 0;
  position: relative;
}

.route-hour {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #efcfb6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 37px;
}

.route-hour span {
  opacity: .55;
}

.route-track-dot {
  position: absolute;
  top: 46px;
  width: 21px;
  height: 21px;
  border: 5px solid var(--maroon);
  background: #eebf9b;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(254, 237, 215, .55);
  transition: background 250ms, transform 250ms;
}

.route-step:hover .route-track-dot {
  background: white;
  transform: scale(1.22);
}

.route-step h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
  color: white;
  padding-top: 20px;
}

.route-step p {
  max-width: 245px;
  color: #dfc6bf;
  font-size: 12px;
  line-height: 1.8;
  min-height: 66px;
  margin-bottom: 11px;
}

.route-step-icon {
  color: #f1b99f;
  font-size: 20px;
  display: inline-block;
  transition: transform 250ms;
}

.route-step:hover .route-step-icon {
  transform: translate(4px, -4px);
}

.route-bottom {
  border-top: 1px solid rgba(255, 241, 220, .26);
  margin-top: 35px;
  padding-top: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.route-bottom>span {
  color: #ecc7ae;
  letter-spacing: 2px;
  font-size: 10px;
}

.button-outline-light {
  background: transparent;
  border-color: #e7beaa;
  color: #fff4e3;
}

.button-outline-light:hover {
  background: #fff2df;
  border-color: #fff2df;
  color: var(--maroon);
}

.button-outline-light .button-icon {
  border-color: #bd9689;
}

.button-outline-light:hover .button-icon {
  border-color: var(--maroon);
}

/* FOOD */
.food-header {
  max-width: 850px;
  text-align: center;
  margin: 0 auto 32px;
}

.food-header .eyebrow {
  justify-content: center;
}

.food-header .section-title {
  margin: 16px auto 15px;
}

.food-header p {
  color: var(--body);
  margin: 0 auto;
  max-width: 650px;
  font-size: 13px;
  line-height: 1.9;
}

.food-showcase {
  display: flex;
  gap: 22px;
  align-items: stretch;
}

.food-feature {
  flex: 1 1 28%;
  min-width: 0;
  background: var(--cream);
  border: 1px solid #ebddd0;
  padding: 9px;
  transition: transform 350ms ease, box-shadow 350ms ease;
}

.food-feature-main {
  flex: 1 1 44%;
}

.food-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(72, 41, 30, .10);
}

.food-picture {
  background-image: url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: 275px;
  background: #d7b49a;
}

.food-feature-main .food-picture {
  height: 342px;
}

.food-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms;
}

.food-feature:hover .food-picture img {
  transform: scale(1.08);
}

.food-index {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 248, 238, .94);
  color: var(--maroon);
  padding: 7px 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.food-copy {
  padding: 19px 12px 18px;
}

.food-copy>span {
  color: var(--terracotta);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.food-copy h3 {
  font-family: var(--serif);
  color: var(--maroon);
  font-size: 26px;
  font-weight: 500;
  margin: 4px 0 9px;
}

.food-copy p {
  color: var(--body);
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
}

/* QUOTE */
.quote-section {
  position: relative;
  overflow: hidden;
  min-height: 442px;
  background: #8a594b;
  margin-top: 50px;
}

.quote-image {
  position: absolute;
  inset: 0;
  background-image: url('../img/unsplash-1667099639128-4b10f464f4a2-ecf0d6bd0.avif'), url("../img/photo-fallback.svg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.quote-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(57, 29, 30, .88), rgba(63, 33, 29, .77), rgba(79, 36, 30, .75));
}

.quote-inner {
  position: relative;
  z-index: 1;
  min-height: 442px;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff5eb;
}

.quote-flower {
  color: #f0c6a0;
  font-size: 26px;
  margin-bottom: 11px;
}

.quote-inner p {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1.37;
  font-weight: 400;
  margin: 0;
}

.quote-inner p em {
  color: #efbe9a;
}

.quote-inner>span {
  color: #efc7ab;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.8px;
  margin: 23px 0 27px;
}

.button-cream {
  background: #fff6e9;
  color: var(--maroon);
  border-color: #fff6e9;
}

.button-cream:hover {
  background: transparent;
  color: white;
  border-color: white;
  transform: translateY(-3px);
}

.button-cream .button-icon {
  border-color: #d1b4a1;
}

/* FAQ */
.faq-layout {
  display: flex;
  align-items: flex-start;
  gap: 110px;
}

.faq-intro {
  flex: 1 1 42%;
  min-width: 0;
}

.faq-intro>p {
  color: var(--body);
  line-height: 1.9;
  max-width: 380px;
  font-size: 13px;
}

.faq-flower {
  font-size: 115px;
  line-height: 1;
  margin-top: 30px;
  color: #e7c7b2;
  transform-origin: center;
  animation: soft-spin 35s linear infinite;
}

.faq-questions {
  flex: 1 1 58%;
  min-width: 0;
  border-top: 1px solid #dfcbbb;
}

.faq-questions .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dfcbbb;
  border-radius: 0;
}

.faq-questions .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 22px 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--maroon);
  font-weight: 500;
  line-height: 1.5;
  gap: 17px;
}

.faq-questions .accordion-button:not(.collapsed) {
  color: var(--terracotta-dark);
}

.faq-questions .accordion-button>span {
  color: var(--terracotta);
  font-size: 10px;
  font-family: var(--alt);
  font-weight: 700;
  letter-spacing: 1px;
}

.faq-questions .accordion-button::after {
  background-image: none;
  content: '+';
  height: auto;
  width: auto;
  font-size: 24px;
  color: var(--terracotta);
  margin-left: auto;
  transform: none;
  font-family: var(--sans);
  font-weight: 400;
}

.faq-questions .accordion-button:not(.collapsed)::after {
  content: '−';
}

.faq-questions .accordion-body {
  color: var(--body);
  padding: 0 20px 23px 34px;
  font-size: 13px;
  line-height: 1.9;
}

/* CLOSING */
.closing-panel {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: #ead9c7;
  min-height: 367px;
  padding: 44px 50px;
  border: 1px solid #e2c8af;
}

.closing-panel::before,
.closing-panel::after {
  content: '';
  font-family: Georgia, serif;
  font-size: 190px;
  position: absolute;
  color: rgba(163, 79, 65, .08);
  line-height: 1;
}

.closing-panel::before {
  left: -63px;
  top: -65px;
}

.closing-panel::after {
  right: -65px;
  bottom: -75px;
}

.closing-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}

.closing-content .eyebrow {
  justify-content: center;
}

.closing-content h2 {
  color: var(--maroon);
  font-family: var(--serif);
  font-size: 43px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1.3px;
  margin: 15px 0;
}

.closing-content p {
  color: #67544b;
  max-width: 555px;
  margin: 0 auto 22px;
  font-size: 13px;
  line-height: 1.9;
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.closing-arches {
  position: absolute;
  bottom: 0;
  right: 20px;
  display: flex;
  gap: 8px;
  pointer-events: none;
  opacity: .22;
}

.closing-arches span {
  width: 38px;
  height: 75px;
  border: 2px solid var(--terracotta);
  border-radius: 26px 26px 0 0;
}

/* FOOTER */
.site-footer {
  margin-top: 50px;
  background: #f0e6d9;
  border-top: 1px solid #dfc9b6;
}

.footer-upper {
  padding-top: 56px;
  padding-bottom: 49px;
  display: flex;
  gap: 55px;
  justify-content: space-between;
}

.footer-brand-area {
  max-width: 360px;
  flex: 1 1 33%;
}

.brand-footer {
  margin-bottom: 20px;
}

.footer-brand-area>p {
  color: #78675b;
  max-width: 330px;
  font-size: 12px;
  line-height: 2;
}

.footer-hindi {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--terracotta);
}

.footer-hindi span {
  padding-left: 12px;
}

.footer-menu,
.footer-location {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.footer-menu strong,
.footer-location strong {
  font-family: var(--alt);
  color: var(--terracotta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 9px;
}

.footer-menu a {
  color: #66544a;
  font-size: 12px;
  transition: transform 200ms, color 200ms;
}

.footer-menu a:hover {
  transform: translateX(5px);
  color: var(--terracotta);
}

.footer-city {
  font-family: var(--serif);
  color: var(--maroon);
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1px;
}

.footer-city span {
  color: var(--terracotta);
}

.footer-location p {
  color: #79675d;
  font-size: 12px;
  line-height: 1.9;
  margin: 0;
}

.footer-mini-coords {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #a38975;
}

.footer-bottom {
  min-height: 71px;
  border-top: 1px solid #dac8b7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #8b7769;
  font-size: 10px;
}

.footer-bottom>span:nth-child(2) {
  letter-spacing: 1.4px;
}

.footer-bottom b {
  color: var(--terracotta);
  font-size: 17px;
  font-weight: 400;
  margin-left: 6px;
}

#backToTop {
  border: 1px solid #c5aa96;
  color: var(--maroon);
  background: transparent;
  width: 40px;
  height: 40px;
  font-size: 20px;
  transition: background 250ms, transform 250ms;
}

#backToTop:hover {
  background: var(--maroon);
  color: white;
  transform: translateY(-4px);
}

/* MODAL, TOAST */
body.modal-open-custom {
  overflow: hidden;
}

.place-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.place-modal[hidden] {
  display: none;
}

.modal-shade {
  position: absolute;
  inset: 0;
  background: rgba(30, 17, 20, .74);
  backdrop-filter: blur(7px);
  animation: fade-in 260ms ease both;
}

.modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  min-height: 450px;
  display: flex;
  background: var(--cream);
  box-shadow: 0 30px 100px rgba(24, 12, 12, .32);
  animation: modal-enter 400ms cubic-bezier(.2, .8, .2, 1) both;
}

.modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 41px;
  height: 41px;
  border: 1px solid #d8c4b5;
  background: #fff8ed;
  color: var(--maroon);
  font-size: 31px;
  font-weight: 300;
}

.modal-photo {
  flex: 1 1 45%;
  background: var(--sand);
  min-height: 450px;
}

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

.modal-content {
  flex: 1 1 55%;
  padding: 52px 46px;
}

.modal-content h2 {
  font-family: var(--serif);
  font-size: 42px;
  color: var(--maroon);
  font-weight: 500;
  margin: 13px 0 17px;
}

.modal-content>p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.95;
}

.modal-tip {
  padding: 15px 18px;
  margin: 24px 0;
  background: #f2e6d7;
  border-left: 2px solid var(--terracotta);
}

.modal-tip span {
  font-size: 9px;
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 1.6px;
}

.modal-tip p {
  margin: 4px 0 0;
  color: #6a544b;
  font-size: 12px;
  line-height: 1.8;
}

.toast-message {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: 350;
  background: var(--maroon);
  color: #fff8ee;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 35px rgba(30, 20, 20, .2);
  opacity: 0;
  transform: translate(-50%, 50px);
  pointer-events: none;
  transition: opacity 300ms, transform 300ms;
  max-width: 360px;
  text-align: center;
}

.toast-message.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* SCROLL AND INTERACTION ANIMATIONS */
.has-js [data-reveal] {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(.2, .7, .2, 1), transform 800ms cubic-bezier(.2, .7, .2, 1);
}

.has-js [data-reveal="up"] {
  transform: translateY(35px);
}

.has-js [data-reveal="left"] {
  transform: translateX(-38px);
}

.has-js [data-reveal="right"] {
  transform: translateX(38px);
}

.has-js [data-reveal].in-view {
  opacity: 1;
  transform: translate(0, 0);
}

.place-card:nth-child(2),
.food-feature:nth-child(2) {
  transition-delay: 95ms;
}

.place-card:nth-child(3),
.food-feature:nth-child(3) {
  transition-delay: 180ms;
}

.place-card:nth-child(5) {
  transition-delay: 95ms;
}

.place-card:nth-child(6) {
  transition-delay: 180ms;
}

.animate-entry {
  opacity: 0;
  transform: translateY(25px);
  animation: hero-appear 850ms cubic-bezier(.2, .75, .2, 1) forwards;
}

.hero-copy .animate-entry:nth-child(1) {
  animation-delay: 450ms;
}

.hero-copy .animate-entry:nth-child(2) {
  animation-delay: 550ms;
}

.hero-copy .animate-entry:nth-child(3) {
  animation-delay: 650ms;
}

.hero-copy .animate-entry:nth-child(4) {
  animation-delay: 770ms;
}

.hero-copy .animate-entry:nth-child(5) {
  animation-delay: 880ms;
}

.hero-copy .animate-entry:nth-child(6) {
  animation-delay: 990ms;
}

.hero-visual.animate-entry {
  animation-delay: 650ms;
}

.floating-element {
  animation: gentle-float 6s ease-in-out infinite;
}

.hero-stamp {
  animation-delay: -3s;
}

.mandala-rotate {
  animation: soft-spin 80s linear infinite;
}

@keyframes hero-appear {
  from {
    opacity: 0;
    transform: translateY(27px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes curtain-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes soft-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes gentle-float {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -12px;
  }
}

@keyframes marquee-travel {
  to {
    transform: translateX(-50%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* RESPONSIVE */
@media (max-width: 1399px) {
  .site-shell {
    padding-left: 52px;
    padding-right: 52px;
  }

  .desktop-nav {
    gap: 20px;
  }

  .hero-title {
    font-size: 66px;
  }

  .story-layout,
  .culture-layout {
    gap: 55px;
  }

  .hero-floating-picture {
    left: -48px;
  }

  .vertical-caption {
    right: -27px;
  }
}

@media (max-width: 1199px) {
  .site-shell {
    padding-left: 40px;
    padding-right: 40px;
  }

  .nav-wrap {
    gap: 17px;
  }

  .brand-mark {
    height: 42px;
    width: 42px;
  }

  .brand-mark svg {
    height: 31px;
    width: 31px;
  }

  .brand-words strong {
    font-size: 22px;
    letter-spacing: 2px;
  }

  .brand-words small {
    font-size: 8px;
    letter-spacing: 2.2px;
  }

  .desktop-nav {
    gap: 12px;
  }

  .desktop-nav .nav-link {
    font-size: 11px;
  }

  .nav-cta {
    gap: 10px;
    padding-left: 11px;
  }

  .hero-layout {
    gap: 25px;
  }

  .hero-title {
    font-size: 60px;
  }

  .hero-visual {
    height: 575px;
    padding-left: 22px;
  }

  .hero-arch-img {
    height: 540px;
  }

  .hero-photo-outline {
    height: 551px;
    left: 8px;
  }

  .hero-floating-picture {
    left: -30px;
    width: 145px;
  }

  .hero-floating-picture img {
    height: 160px;
  }

  .hero-stamp {
    right: -23px;
    width: 105px;
    height: 105px;
  }

  .hero-stamp strong {
    font-size: 26px;
  }

  .vertical-caption {
    display: none;
  }

  .story-layout {
    gap: 42px;
  }

  .story-art {
    padding-right: 75px;
  }

  .story-photo-small {
    width: 200px;
    height: 245px;
  }

  .section-title {
    font-size: 40px;
  }

  .places-list {
    column-gap: 17px;
  }

  .place-image {
    height: 258px;
  }

  .culture-layout {
    gap: 45px;
  }

  .food-picture {
    height: 240px;
  }

  .food-feature-main .food-picture {
    height: 310px;
  }

  .faq-layout {
    gap: 60px;
  }
}

@media (max-width: 991px) {
  .top-ribbon-inner .ribbon-right {
    display: none;
  }

  .nav-wrap {
    min-height: 76px;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .nav-cta {
    height: 43px;
  }

  .circle-arrow {
    width: 32px;
    height: 32px;
  }

  .hero-layout {
    min-height: 540px;
    gap: 20px;
  }

  .hero-title {
    font-size: 49px;
    letter-spacing: -2px;
  }

  .hero-pretitle {
    font-size: 16px;
  }

  .hero-description {
    font-size: 13px;
  }

  .hero-visual {
    height: 500px;
  }

  .hero-arch-img {
    height: 460px;
  }

  .hero-photo-outline {
    height: 471px;
  }

  .hero-stamp {
    width: 88px;
    height: 88px;
    top: 38px;
    right: -16px;
  }

  .hero-stamp span {
    font-size: 6px;
  }

  .hero-stamp strong {
    font-size: 23px;
  }

  .hero-floating-picture {
    width: 110px;
    bottom: 8px;
  }

  .hero-floating-picture img {
    height: 128px;
  }

  .hero-floating-picture span {
    font-size: 6px;
  }

  .hero-footer-note {
    margin-top: 30px;
  }

  .hero-buttons {
    gap: 16px;
  }

  .hero-bottom {
    gap: 12px;
  }

  .hero-stat {
    gap: 8px;
  }

  .hero-stat strong {
    font-size: 13px;
  }

  .hero-stat small {
    font-size: 9px;
    white-space: normal;
  }

  .stat-icon {
    font-size: 24px;
  }

  .scroll-down {
    display: none;
  }

  .story-layout {
    gap: 35px;
  }

  .story-art {
    min-height: 500px;
    padding: 30px 68px 38px 10px;
  }

  .story-photo-large {
    height: 425px;
  }

  .story-photo-small {
    width: 155px;
    height: 210px;
  }

  .story-facts {
    gap: 16px;
  }

  .fact-number {
    font-size: 22px;
  }

  .fact-label {
    font-size: 8px;
  }

  .section-title {
    font-size: 36px;
  }

  .heading-aside {
    max-width: 250px;
  }

  .place-card {
    flex-basis: 47%;
  }

  .place-image {
    height: 285px;
  }

  .culture-layout {
    gap: 25px;
  }

  .culture-feature-image {
    height: 370px;
  }

  .culture-option {
    min-height: 63px;
  }

  .culture-name {
    font-size: 19px;
  }

  .route-steps {
    gap: 20px;
  }

  .route-step h3 {
    font-size: 20px;
  }

  .route-step p {
    font-size: 11px;
  }

  .food-showcase {
    gap: 12px;
  }

  .food-feature-main {
    flex: 1 1 36%;
  }

  .food-feature {
    flex: 1 1 32%;
  }

  .food-picture,
  .food-feature-main .food-picture {
    height: 230px;
  }

  .food-copy h3 {
    font-size: 21px;
  }

  .food-copy {
    padding: 16px 8px;
  }

  .faq-layout {
    gap: 40px;
  }

  .footer-upper {
    flex-wrap: wrap;
    row-gap: 30px;
  }

  .footer-brand-area {
    flex-basis: 42%;
  }

  .footer-location {
    flex-basis: 26%;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 85px;
  }

  .site-shell {
    padding-left: 24px;
    padding-right: 24px;
  }

  .section {
    margin-top: 50px;
  }

  .top-ribbon-inner {
    justify-content: center;
  }

  .top-ribbon-inner .ribbon-left {
    display: none;
  }

  .nav-wrap {
    min-height: 72px;
  }

  .hero-section {
    padding-top: 30px;
  }

  .hero-layout {
    flex-direction: column;
    gap: 35px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-title {
    font-size: 62px;
  }

  .hero-description {
    max-width: 540px;
  }

  .hero-footer-note {
    margin-top: 25px;
  }

  .hero-visual {
    width: 100%;
    max-width: 520px;
    height: 560px;
    padding-left: 45px;
    padding-right: 30px;
    align-self: center;
  }

  .hero-arch-img {
    height: 515px;
  }

  .hero-photo-outline {
    left: 28px;
    right: 12px;
    height: 525px;
  }

  .hero-stamp {
    right: 5px;
    top: 35px;
    width: 102px;
    height: 102px;
  }

  .hero-floating-picture {
    width: 150px;
    left: -5px;
    bottom: 9px;
  }

  .hero-floating-picture img {
    height: 163px;
  }

  .hero-floating-picture span {
    font-size: 7px;
  }

  .hero-bottom {
    flex-wrap: wrap;
    row-gap: 20px;
    margin-top: 20px;
  }

  .hero-stat {
    flex: 1 1 40%;
  }

  .hero-bottom .stat-divider {
    display: none;
  }

  .story-layout {
    flex-direction: column;
    gap: 22px;
  }

  .story-art {
    width: 100%;
    max-width: 560px;
    align-self: center;
    min-height: 535px;
    padding-right: 95px;
  }

  .story-photo-large {
    height: 470px;
  }

  .story-photo-small {
    width: 210px;
    height: 230px;
  }

  .story-content {
    width: 100%;
  }

  .section-title {
    font-size: 42px;
  }

  .section-heading-row {
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }

  .heading-aside {
    max-width: 590px;
  }

  .heading-aside p {
    margin-bottom: 9px;
  }

  .toolbar-note {
    display: none;
  }

  .places-toolbar {
    margin-top: 26px;
  }

  .place-image {
    height: 253px;
  }

  .culture-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .culture-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .culture-left,
  .culture-right {
    width: 100%;
  }

  .culture-left .section-title {
    margin-bottom: 12px;
  }

  .culture-options {
    margin-top: 20px;
  }

  .culture-feature-image {
    height: 360px;
  }

  .route-section {
    padding: 49px 0;
  }

  .route-heading {
    flex-direction: column;
    align-items: start;
    gap: 12px;
  }

  .route-heading-right {
    max-width: 100%;
  }

  .route-steps {
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 30px;
    margin-top: 37px;
  }

  .route-steps::before {
    display: none;
  }

  .route-step {
    flex-basis: 45%;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, .23);
  }

  .route-hour {
    margin-bottom: 18px;
  }

  .route-track-dot {
    left: -11px;
    top: 35px;
  }

  .route-step p {
    min-height: 0;
  }

  .food-showcase {
    flex-wrap: wrap;
    gap: 16px;
  }

  .food-feature-main {
    flex-basis: 100%;
  }

  .food-feature {
    flex-basis: 46%;
  }

  .food-feature-main .food-picture {
    height: 340px;
  }

  .food-picture {
    height: 240px;
  }

  .quote-image {
    background-attachment: scroll;
  }

  .quote-inner p {
    font-size: 38px;
  }

  .faq-layout {
    flex-direction: column;
    gap: 25px;
  }

  .faq-intro,
  .faq-questions {
    width: 100%;
  }

  .faq-flower {
    display: none;
  }

  .closing-content h2 {
    font-size: 36px;
  }

  .footer-upper {
    gap: 30px;
  }

  .footer-brand-area {
    flex-basis: 100%;
    max-width: 100%;
  }

  .footer-brand-area>p {
    max-width: 500px;
  }

  .footer-menu {
    flex-basis: 25%;
  }

  .footer-location {
    flex-basis: 30%;
  }

  .modal-box {
    max-width: 540px;
    max-height: 90%;
    overflow-y: auto;
    flex-direction: column;
  }

  .modal-photo {
    min-height: 230px;
    height: 230px;
    flex: 0 0 auto;
  }

  .modal-content {
    padding: 25px 30px 30px;
  }

  .modal-content h2 {
    font-size: 32px;
  }
}

@media (max-width: 575px) {
  .site-shell {
    padding-left: 19px;
    padding-right: 19px;
  }

  .top-ribbon {
    height: 30px;
  }

  .ribbon-middle {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand-words strong {
    font-size: 20px;
  }

  .brand-words small {
    font-size: 7px;
    letter-spacing: 2px;
    margin-top: 5px;
  }

  .nav-cta {
    display: none;
  }

  .hero-title {
    font-size: 49px;
  }

  .hero-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    gap: 8px;
  }

  .eyebrow-line {
    width: 23px;
  }

  .hero-description {
    font-size: 13px;
  }

  .button {
    min-height: 50px;
    font-size: 11px;
    gap: 12px;
    padding-left: 16px;
  }

  .button-icon {
    width: 36px;
    height: 36px;
  }

  .hero-buttons {
    gap: 16px;
  }

  .hero-visual {
    height: 458px;
    max-width: 420px;
    padding-left: 31px;
    padding-right: 21px;
  }

  .hero-arch-img {
    height: 430px;
    border-radius: 210px 210px 4px 4px;
  }

  .hero-photo-outline {
    left: 18px;
    right: 9px;
    height: 438px;
    border-radius: 220px 220px 4px 4px;
  }

  .hero-stamp {
    width: 88px;
    height: 88px;
    right: 4px;
    top: 26px;
    border-width: 3px;
  }

  .hero-stamp strong {
    font-size: 23px;
  }

  .hero-floating-picture {
    left: -7px;
    width: 111px;
    bottom: 0;
    padding: 5px;
  }

  .hero-floating-picture img {
    height: 115px;
  }

  .hero-floating-picture span {
    font-size: 6px;
    margin-top: 5px;
  }

  .hero-photo-label {
    font-size: 8px;
    left: 20px;
    bottom: 20px;
    letter-spacing: 1px;
  }

  .hero-bottom {
    margin-top: 15px;
  }

  .hero-stat {
    flex: 1 1 46%;
  }

  .hero-stat .stat-icon {
    font-size: 20px;
  }

  .hero-stat strong {
    font-size: 12px;
  }

  .hero-stat small {
    font-size: 9px;
  }

  .story-art {
    min-height: 420px;
    padding: 20px 62px 33px 9px;
  }

  .story-photo-large {
    height: 370px;
  }

  .story-photo-small {
    width: 160px;
    height: 180px;
    border-width: 5px;
  }

  .story-pattern {
    right: 13px;
  }

  .story-art-label {
    top: 58px;
  }

  .section-title {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .story-facts {
    column-gap: 19px;
    row-gap: 22px;
  }

  .fact-number {
    font-size: 22px;
  }

  .marquee-track span {
    font-size: 16px;
  }

  .filter-buttons {
    gap: 17px;
  }

  .filter-button {
    font-size: 11px;
  }

  .place-card {
    flex-basis: 100%;
  }

  .place-image {
    height: 320px;
  }

  .place-info strong {
    font-size: 26px;
  }

  .places-bottom {
    align-items: start;
    flex-direction: column;
  }

  .culture-feature-image {
    height: 300px;
  }

  .culture-feature-text h3 {
    font-size: 22px;
  }

  .culture-name {
    font-size: 19px;
  }

  .route-step {
    flex-basis: 100%;
  }

  .route-hour {
    font-size: 10px;
  }

  .route-bottom {
    align-items: start;
    flex-direction: column;
  }

  .route-bottom>span {
    font-size: 9px;
    line-height: 1.9;
  }

  .food-feature,
  .food-feature-main {
    flex-basis: 100%;
  }

  .food-picture,
  .food-feature-main .food-picture {
    height: 260px;
  }

  .food-header .section-title {
    font-size: 32px;
  }

  .quote-inner {
    min-height: 375px;
  }

  .quote-section {
    min-height: 375px;
  }

  .quote-inner p {
    font-size: 30px;
  }

  .quote-inner>span {
    font-size: 9px;
    letter-spacing: 1.3px;
  }

  .faq-questions .accordion-button {
    font-size: 15px;
    gap: 12px;
  }

  .closing-panel {
    padding: 40px 18px;
  }

  .closing-content h2 {
    font-size: 31px;
  }

  .closing-actions {
    gap: 15px;
  }

  .footer-menu {
    flex-basis: 38%;
  }

  .footer-location {
    flex-basis: 100%;
  }

  .footer-bottom {
    padding-top: 18px;
    padding-bottom: 18px;
    flex-wrap: wrap;
  }

  .footer-bottom>span:nth-child(2) {
    display: none;
  }

  .modal-box {
    max-height: 88%;
  }

  .modal-photo {
    min-height: 190px;
    height: 190px;
  }

  .modal-content {
    padding: 25px 22px;
  }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: 43px;
  }

  .hero-description {
    font-size: 12px;
  }

  .hero-buttons {
    align-items: start;
    flex-direction: column;
  }

  .hero-visual {
    height: 404px;
  }

  .hero-arch-img {
    height: 380px;
  }

  .hero-photo-outline {
    height: 390px;
  }

  .hero-stamp {
    width: 76px;
    height: 76px;
  }

  .hero-stamp strong {
    font-size: 19px;
  }

  .hero-stamp span {
    font-size: 5px;
  }

  .hero-floating-picture {
    width: 95px;
  }

  .hero-floating-picture img {
    height: 95px;
  }

  .place-image {
    height: 270px;
  }

  .story-art {
    min-height: 390px;
    padding-right: 50px;
  }

  .story-photo-large {
    height: 347px;
  }

  .story-photo-small {
    width: 127px;
    height: 155px;
  }

  .filter-buttons {
    gap: 11px;
  }

  .filter-button {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  .animate-entry {
    opacity: 1 !important;
    transform: none !important;
  }

  .loading-curtain {
    display: none;
  }
}

/* Keep the longer static-site navigation uncluttered on laptop/tablet widths. */
@media (max-width: 1199px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .nav-cta {
    height: 43px;
  }

  .circle-arrow {
    width: 32px;
    height: 32px;
  }
}

/*
  JAIPUR HERITAGE TOUR / ABOUT JAIPUR
  Only aj-about-* classes are used for page-specific UI.
  Header/footer/shared typography are inherited from assets/css/style.css.
  All custom length values use px. Flexible percentage widths are used for responsiveness.
  Responsive sections use flexible rows and pixel-valued spacing.
*/
.aj-about-page {
  color: var(--ink);
  overflow: hidden;
}

.aj-about-page .aj-about-section {
  margin: 50px 0;
}

.aj-about-page a {
  text-decoration: none;
}

.aj-about-page a:focus-visible {
  outline-color: var(--terracotta);
}

.aj-about-overline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--terracotta);
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.7px;
  line-height: 1.6;
}

.aj-about-overline b {
  display: block;
  width: 29px;
  height: 1px;
  flex: 0 0 29px;
  background: currentColor;
}

.aj-about-heading {
  font-family: var(--serif);
  font-size: 51px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -1.9px;
  color: var(--maroon);
  margin: 19px 0 20px;
}

.aj-about-heading em {
  font-weight: 400;
  color: var(--terracotta);
}

.aj-about-page p {
  font-size: 14px;
  color: var(--body);
  line-height: 2;
}

.aj-about-lead {
  font-family: var(--serif);
  font-size: 19px !important;
  line-height: 1.75 !important;
  color: var(--maroon) !important;
}

.aj-about-ornament {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 140px;
  margin: 20px 0 20px;
  color: var(--gold);
  font-size: 18px;
}

.aj-about-ornament span {
  height: 1px;
  flex: 1;
  background: #d8bda2;
}

.aj-about-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 7px 7px 7px 24px;
  gap: 32px;
  font-family: var(--alt);
  font-size: 12px;
  letter-spacing: .3px;
  font-weight: 600;
  border-radius: 2px;
  transition: transform 300ms ease, background 300ms ease;
}

.aj-about-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  font-size: 22px;
  background: rgba(255, 255, 255, .12);
}

.aj-about-button:hover {
  transform: translateY(-3px);
}

.aj-about-button-dark {
  color: #fff9ef;
  background: var(--maroon);
}

.aj-about-button-dark:hover {
  background: var(--terracotta);
  color: #fff9ef;
}

.aj-about-button-light {
  color: var(--maroon);
  background: var(--ivory);
}

.aj-about-button-light span {
  background: rgba(84, 44, 48, .10);
}

.aj-about-button-light:hover {
  color: var(--maroon);
  background: white;
}

.aj-about-text-link {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 8px;
  color: var(--maroon);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--alt);
  transition: gap 250ms ease, color 250ms ease;
}

.aj-about-text-link span {
  font-size: 22px;
  line-height: 1;
  color: var(--terracotta);
}

.aj-about-text-link:hover {
  gap: 48px;
  color: var(--terracotta-dark);
}

.aj-about-photo-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, #e6bea6, #a8594a);
}

.aj-about-photo-shell>img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
  transition: transform 950ms cubic-bezier(.2, .6, .2, 1);
}

.aj-about-photo-shell>img[data-fallback-applied="true"] {
  display: none;
}

.aj-about-photo-shell:hover>img {
  transform: scale(1.055);
}

/* HERO / warm ivory, like the approved homepage */
.aj-about-hero {
  position: relative;
  background: radial-gradient(circle at 13% 27%, #fffaf2 0, transparent 43%), var(--ivory);
  padding-top: 24px;
  overflow: hidden;
}

.aj-about-hero::before {
  content: '';
  position: absolute;
  left: -128px;
  top: 20px;
  font-size: 370px;
  line-height: 1;
  color: rgba(167, 100, 76, .045);
  font-family: Georgia, serif;
  pointer-events: none;
}

.aj-about-hero-etching {
  position: absolute;
  right: -80px;
  top: 20px;
  width: 460px;
  height: 480px;
  color: rgba(133, 68, 57, .052);
  pointer-events: none;
  transform: rotate(7deg);
}

.aj-about-hero-etching svg {
  width: 100%;
  height: 100%;
}

.aj-about-hero-layout {
  min-height: 648px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.aj-about-hero-copy {
  position: relative;
  z-index: 3;
  flex: 1 1 51%;
  min-width: 0;
  padding: 30px 0 45px;
}

.aj-about-breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #a98a7d;
  margin-bottom: 37px;
}

.aj-about-breadcrumb a {
  transition: color 180ms;
}

.aj-about-breadcrumb a:hover {
  color: var(--terracotta);
}

.aj-about-breadcrumb>span:nth-child(2) {
  font-size: 11px;
  color: var(--gold);
}

.aj-about-breadcrumb>span:last-child {
  color: var(--terracotta);
}

.aj-about-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.7px;
  color: var(--terracotta);
  margin-bottom: 14px;
}

.aj-about-kicker-bar {
  width: 32px;
  height: 1px;
  background: var(--terracotta);
}

.aj-about-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 67px;
  line-height: 1.16;
  letter-spacing: -2.8px;
  color: var(--maroon);
  margin: 0 0 26px;
}

.aj-about-hero-copy h1 i {
  font-weight: 400;
  color: var(--terracotta);
}

.aj-about-hero-copy>p {
  font-size: 15px;
  line-height: 2;
  max-width: 490px;
  margin-bottom: 30px;
}

.aj-about-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
}

.aj-about-hero-coordinate {
  color: #a68b7c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.aj-about-hero-signature {
  margin-top: 48px;
  padding-top: 21px;
  border-top: 1px solid #dfccba;
  width: 300px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
}

.aj-about-hero-signature small {
  display: block;
  font-family: var(--alt);
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: #ab9180;
  margin-top: 7px;
}

.aj-about-star {
  font-size: 29px;
  color: var(--gold);
}

.aj-about-hero-visual {
  position: relative;
  height: 615px;
  flex: 1 1 49%;
  min-width: 0;
  padding: 38px 23px 25px 65px;
}

.aj-about-hero-outline {
  position: absolute;
  top: 21px;
  left: 51px;
  right: 7px;
  height: 563px;
  border: 1px solid rgba(165, 88, 71, .65);
  border-radius: 300px 300px 4px 4px;
  pointer-events: none;
}

.aj-about-hero-photo {
  width: 100%;
  height: 558px;
  border-radius: 295px 295px 4px 4px;
  background: #bf876f;
}

.aj-about-hero-photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 125px;
  background: linear-gradient(transparent, rgba(41, 20, 21, .68));
  z-index: 2;
  pointer-events: none;
}

.aj-about-palace-drawing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 227, 201, .7);
}

.aj-about-palace-drawing svg {
  width: 100%;
  height: 100%;
}

.aj-about-photo-caption {
  position: absolute;
  bottom: 21px;
  left: 25px;
  font-size: 9px;
  color: #fff6ea;
  z-index: 3;
  letter-spacing: 2px;
  font-weight: 700;
}

.aj-about-photo-caption b {
  font-weight: 400;
  color: #e8c4a9;
  margin: 0 5px;
}

.aj-about-year-seal {
  position: absolute;
  width: 123px;
  height: 123px;
  right: -28px;
  top: 46px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(13deg);
  border-radius: 50%;
  background: var(--maroon);
  color: #f6e4d0;
  box-shadow: 0 12px 25px rgba(64, 34, 34, .15);
  border: 5px double #f6e4d0;
}

.aj-about-year-seal span {
  font-family: var(--alt);
  font-size: 8px;
  letter-spacing: 1px;
}

.aj-about-year-seal strong {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.4;
}

.aj-about-hero-photo-small {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 171px;
  height: 196px;
  background: #b46b57;
  z-index: 4;
  border: 8px solid #fff9f0;
  transform: rotate(-9deg);
  box-shadow: 0 15px 35px rgba(58, 38, 33, .15);
}

.aj-about-small-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  color: #e8bb9a;
}

.aj-about-hero-photo-small span {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff9f0;
  color: var(--maroon);
  font-size: 7px;
  text-align: center;
  padding: 8px 2px 1px;
  letter-spacing: 1px;
  font-weight: 700;
}

.aj-about-hero-vertical {
  position: absolute;
  z-index: 3;
  right: -15px;
  bottom: 75px;
  writing-mode: vertical-rl;
  color: #ab8b76;
  font-size: 8px;
  letter-spacing: 2px;
}

.aj-about-hero-foot {
  min-height: 73px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-top: 1px solid #e4d5c5;
  color: #9b8577;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
}

.aj-about-hero-foot-line {
  height: 1px;
  background: #dac5b2;
  flex: 1;
}

.aj-about-small-star {
  font-size: 18px;
  color: var(--gold);
}

/* CITY INTRO */
.aj-about-intro-layout {
  display: flex;
  align-items: center;
  gap: 100px;
}

.aj-about-intro-visual {
  flex: 1 1 46%;
  position: relative;
  min-width: 0;
  padding: 27px 56px 44px 18px;
}

.aj-about-intro-visual::before {
  content: '';
  position: absolute;
  inset: 0 40px 37px 0;
  border: 1px solid #d5a58e;
  border-radius: 280px 280px 2px 2px;
}

.aj-about-intro-image {
  height: 520px;
  border-radius: 270px 270px 3px 3px;
  background: #bf8e6e;
}

.aj-about-intro-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: #e9c2a0;
  padding: 30px;
}

.aj-about-intro-fallback svg {
  width: 100%;
  height: 100%;
}

.aj-about-intro-illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 205px;
  height: 161px;
  background: #e8d1b7;
  color: #995948;
  border: 8px solid var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(5deg);
  box-shadow: 0 12px 30px rgba(90, 40, 32, .08);
}

.aj-about-intro-illustration svg {
  width: 90%;
  height: 90%;
}

.aj-about-intro-art-label {
  position: absolute;
  top: 90px;
  right: 6px;
  color: #ac8671;
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

.aj-about-intro-art-label b {
  margin-top: 13px;
  color: var(--terracotta);
}

.aj-about-intro-copy {
  flex: 1 1 54%;
  min-width: 0;
}

.aj-about-intro-copy p {
  max-width: 580px;
}

.aj-about-intro-copy>p+p {
  margin-top: 13px;
}

.aj-about-intro-quote {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 0 17px 22px;
  border-left: 2px solid var(--terracotta);
}

.aj-about-intro-quote span {
  font-family: var(--serif);
  font-size: 80px;
  line-height: .8;
  color: #d8a68c;
}

.aj-about-intro-quote strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--maroon);
  font-style: italic;
}

/* COLOURED HERITAGE TIMELINE */
.aj-about-history-panel {
  position: relative;
  overflow: hidden;
  background: var(--maroon);
  color: #fbefe2;
  padding: 60px 68px 35px;
  isolation: isolate;
}

.aj-about-history-panel::after {
  content: '';
  position: absolute;
  top: -180px;
  right: -130px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 233, 204, .14);
  box-shadow: 0 0 0 32px rgba(255, 233, 204, .025), 0 0 0 64px rgba(255, 233, 204, .025);
  pointer-events: none;
  z-index: -1;
}

.aj-about-history-etching {
  position: absolute;
  bottom: -62px;
  right: -32px;
  width: 375px;
  height: 440px;
  color: rgba(247, 219, 196, .085);
  z-index: -1;
  pointer-events: none;
}

.aj-about-history-etching svg {
  width: 100%;
  height: 100%;
}

.aj-about-overline-light {
  color: #e7b79c;
}

.aj-about-history-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 55px;
  padding-bottom: 51px;
}

.aj-about-history-header>div {
  flex: 1 1 62%;
}

.aj-about-heading-light {
  color: #fff4e8;
  margin-bottom: 0;
}

.aj-about-heading-light em {
  color: #e6ac94;
}

.aj-about-history-header p {
  flex: 1 1 32%;
  color: #d8bdad;
  font-size: 13px;
  margin: 0 0 7px;
}

.aj-about-history-timeline {
  display: flex;
  position: relative;
  gap: 37px;
  border-top: 1px solid rgba(255, 226, 202, .29);
}

.aj-about-history-item {
  flex: 1 1 33%;
  min-width: 0;
  position: relative;
  padding: 33px 20px 36px 0;
}

.aj-about-history-dot {
  position: absolute;
  left: 0;
  top: -15px;
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  border: 4px solid var(--maroon);
  border-radius: 50%;
  background: #ddb08b;
  font-size: 12px;
}

.aj-about-history-year {
  font-family: var(--serif);
  color: #edd0b0;
  font-size: 69px;
  line-height: 1.2;
  letter-spacing: -2px;
}

.aj-about-history-label {
  display: block;
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: #c99483;
  margin: 4px 0 13px;
}

.aj-about-history-item h3 {
  font-family: var(--serif);
  color: white;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 12px;
}

.aj-about-history-item p {
  color: #d6bbae;
  font-size: 12px;
  line-height: 1.95;
  max-width: 315px;
}

.aj-about-history-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 226, 202, .23);
  padding-top: 21px;
  font-size: 9px;
  letter-spacing: 1.9px;
  color: #d4ac93;
}

/* THE PINK STORY: collage */
.aj-about-pink-layout {
  display: flex;
  align-items: center;
  gap: 90px;
}

.aj-about-pink-copy {
  flex: 1 1 43%;
}

.aj-about-pink-copy p {
  max-width: 480px;
}

.aj-about-pink-copy .aj-about-text-link {
  margin-top: 19px;
}

.aj-about-colour-samples {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 24px;
}

.aj-about-colour-samples span {
  width: 36px;
  height: 27px;
}

.aj-about-colour-samples span:first-child {
  border-radius: 2px 0 0 2px;
}

.aj-about-colour-samples span:nth-child(4) {
  border-radius: 0 2px 2px 0;
}

.aj-about-colour-samples strong {
  color: #a28774;
  letter-spacing: 1.5px;
  font-size: 9px;
  margin-left: 10px;
}

.aj-about-pink-gallery {
  position: relative;
  flex: 1 1 57%;
  min-width: 0;
  height: 520px;
}

.aj-about-pink-gallery::before {
  content: '';
  position: absolute;
  right: 42px;
  top: 10px;
  width: 68%;
  height: 90%;
  border: 1px solid #d1a082;
}

.aj-about-pink-top {
  position: absolute;
  top: 30px;
  left: 0;
  width: 67%;
  height: 425px;
  background: #ce9382;
}

.aj-about-pink-bottom {
  position: absolute;
  bottom: 5px;
  right: 0;
  width: 46%;
  height: 280px;
  border: 9px solid var(--ivory);
  background: #bd7360;
  box-shadow: 0 15px 35px rgba(64, 29, 25, .14);
}

.aj-about-pink-top::after,
.aj-about-pink-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 2;
  background: linear-gradient(transparent, rgba(51, 26, 28, .7));
  pointer-events: none;
}

.aj-about-pink-top>span,
.aj-about-pink-bottom>span {
  position: absolute;
  left: 17px;
  bottom: 17px;
  z-index: 3;
  color: #fff8ee;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.aj-about-pink-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 290px;
  color: rgba(255, 221, 194, .42);
}

.aj-about-pink-backdrop-two {
  font-size: 205px;
  color: rgba(255, 221, 194, .56);
}

.aj-about-pink-letter {
  position: absolute;
  right: 11px;
  top: -4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--terracotta);
}

.aj-about-pink-letter span {
  font-family: var(--serif);
  font-size: 86px;
  line-height: 1;
}

.aj-about-pink-letter small {
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 2px;
}

/* ARCHITECTURE TRIPTYCH */
.aj-about-architecture {
  background: #f0e7dc;
  padding: 55px 0 52px;
}

.aj-about-architecture-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  margin-bottom: 28px;
}

.aj-about-architecture-head>div {
  flex: 1 1 60%;
}

.aj-about-architecture-head p {
  flex: 1 1 32%;
  max-width: 370px;
  margin-bottom: 5px;
}

.aj-about-architecture-gallery {
  display: flex;
  gap: 15px;
  min-height: 425px;
}

.aj-about-architecture-card {
  display: block;
  position: relative;
  overflow: hidden;
  min-width: 0;
  color: white;
}

.aj-about-architecture-card:hover {
  color: white;
}

.aj-about-architecture-card-large {
  flex: 1.45 1 0;
}

.aj-about-architecture-card-middle {
  flex: 1 1 0;
}

.aj-about-architecture-card-small {
  flex: .9 1 0;
}

.aj-about-architecture-photo {
  width: 100%;
  height: 425px;
}

.aj-about-architecture-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 260px;
  color: rgba(255, 230, 199, .34);
}

.aj-about-fallback-fort {
  background: linear-gradient(155deg, #bd886f, #7f5147);
}

.aj-about-fallback-palace {
  background: linear-gradient(145deg, #e9b7a1, #a95d5a);
}

.aj-about-fallback-geometry {
  background: linear-gradient(145deg, #d0a981, #8d5c4a);
}

.aj-about-architecture-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: end;
  padding: 30px 29px 26px;
  background: linear-gradient(transparent 30%, rgba(40, 20, 20, .8) 100%);
}

.aj-about-architecture-overlay small {
  color: #edd3bc;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.7px;
  margin-bottom: 9px;
}

.aj-about-architecture-overlay strong {
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1.2;
  font-weight: 500;
}

.aj-about-architecture-overlay>span {
  font-family: var(--alt);
  color: #fff2e7;
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-top: 15px;
  transform: translateX(0);
  transition: transform 240ms;
}

.aj-about-architecture-card:hover .aj-about-architecture-overlay>span {
  transform: translateX(8px);
}

.aj-about-architecture-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 25px;
}

.aj-about-architecture-foot>span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #8e766a;
}

.aj-about-architecture-foot>span b {
  color: var(--terracotta);
  font-size: 18px;
  font-weight: 400;
  margin-right: 8px;
}

/* LIVING CULTURE */
.aj-about-living-layout {
  display: flex;
  align-items: center;
  gap: 70px;
}

.aj-about-living-heading {
  position: relative;
  flex: 1 1 37%;
  min-width: 0;
}

.aj-about-living-heading .aj-about-heading {
  font-size: 42px;
}

.aj-about-living-heading p {
  max-width: 365px;
}

.aj-about-living-mandala {
  width: 198px;
  height: 198px;
  color: rgba(163, 79, 65, .20);
  margin: 30px 0 0 auto;
  transform: rotate(-13deg);
}

.aj-about-living-mandala svg {
  width: 100%;
  height: 100%;
}

.aj-about-living-cards {
  display: flex;
  gap: 12px;
  flex: 1 1 63%;
  align-items: stretch;
}

.aj-about-living-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 33%;
  padding: 28px 22px 31px;
  border: 1px solid #dfc5b2;
  background: #fbf6ee;
  transition: background 300ms ease, transform 350ms ease, box-shadow 350ms ease;
}

.aj-about-living-card:nth-child(2) {
  background: #efe5d8;
  margin-top: 28px;
}

.aj-about-living-card:nth-child(3) {
  background: #f0dfd6;
  margin-top: 55px;
}

.aj-about-living-card:hover {
  transform: translateY(-9px);
  background: #fffaf3;
  box-shadow: 0 16px 35px rgba(89, 42, 35, .11);
}

.aj-about-living-number {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--gold);
}

.aj-about-living-symbol {
  height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9f5e53;
}

.aj-about-living-symbol svg {
  width: 104px;
  height: 104px;
}

.aj-about-living-card small {
  color: var(--terracotta);
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.aj-about-living-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--maroon);
  margin: 9px 0;
}

.aj-about-living-card p {
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 0;
}

.aj-about-living-arrow {
  align-self: end;
  margin-top: auto;
  padding-top: 18px;
  color: var(--terracotta);
  font-size: 26px;
}

/* QUOTE / OLD CITY ILLUSTRATION */
.aj-about-canvas-shell {
  position: relative;
}

.aj-about-canvas-panel {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 65px 35px;
  background: linear-gradient(110deg, rgba(74, 38, 41, .96), rgba(102, 55, 57, .96)), #5d3439;
}

.aj-about-canvas-panel::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  bottom: 22px;
  border: 1px solid rgba(255, 227, 201, .27);
  z-index: -1;
  pointer-events: none;
}

.aj-about-canvas-art {
  position: absolute;
  width: 90%;
  height: 100%;
  bottom: -70px;
  left: 5%;
  color: rgba(249, 218, 188, .12);
  z-index: -1;
}

.aj-about-canvas-art svg {
  width: 100%;
  height: 100%;
}

.aj-about-canvas-content {
  max-width: 870px;
}

.aj-about-canvas-content h2 {
  color: #fff5e7;
  font-family: var(--serif);
  font-size: 47px;
  font-weight: 500;
  line-height: 1.3;
  margin: 15px 0;
}

.aj-about-canvas-content h2 em {
  color: #e2ac93;
  font-weight: 400;
}

.aj-about-canvas-content p {
  margin: 0 auto 24px;
  color: #e6cfc0;
  font-size: 13px;
  max-width: 570px;
}

.aj-about-canvas-corner {
  position: absolute;
  bottom: 37px;
  right: 45px;
  color: #e4b99e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* LINKED NEXT CHAPTERS */
.aj-about-essentials-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px;
}

.aj-about-essentials-head .aj-about-overline {
  justify-content: center;
}

.aj-about-essentials-head .aj-about-heading {
  font-size: 43px;
}

.aj-about-essentials-head p {
  max-width: 550px;
  margin: 0 auto;
}

.aj-about-next-row {
  display: flex;
  gap: 13px;
}

.aj-about-next-card {
  position: relative;
  flex: 1 1 33%;
  min-height: 175px;
  padding: 25px 65px 25px 27px;
  display: flex;
  flex-direction: column;
  background: #f0e5d7;
  border: 1px solid #e5d1be;
  transition: transform 250ms ease, background 300ms ease;
}

.aj-about-next-card:nth-child(2) {
  background: #eddad1;
}

.aj-about-next-card:nth-child(3) {
  background: #eadfcf;
}

.aj-about-next-card:hover {
  transform: translateY(-5px);
  background: #e9d0c0;
}

.aj-about-next-card>span {
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--terracotta);
}

.aj-about-next-card strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  color: var(--maroon);
  margin: 9px 0 5px;
  line-height: 1.2;
}

.aj-about-next-card small {
  color: #907768;
  font-size: 10px;
  letter-spacing: .4px;
}

.aj-about-next-card b {
  position: absolute;
  top: 28px;
  right: 27px;
  font-size: 25px;
  font-weight: 400;
  color: var(--terracotta);
}

/* RESPONSIVE: all section-specific adjustments are locally scoped. */
@media (max-width: 1399px) {
  .aj-about-hero-layout {
    gap: 37px;
  }

  .aj-about-hero-copy h1 {
    font-size: 59px;
  }

  .aj-about-hero-visual {
    padding-left: 45px;
  }

  .aj-about-hero-outline {
    left: 31px;
  }

  .aj-about-year-seal {
    right: -18px;
  }

  .aj-about-intro-layout {
    gap: 60px;
  }

  .aj-about-pink-layout {
    gap: 55px;
  }

  .aj-about-living-layout {
    gap: 40px;
  }

  .aj-about-living-card {
    padding-left: 17px;
    padding-right: 17px;
  }

  .aj-about-living-card h3 {
    font-size: 21px;
  }
}

@media (max-width: 1199px) {
  .aj-about-hero-copy h1 {
    font-size: 53px;
  }

  .aj-about-hero-visual {
    height: 560px;
    padding: 30px 14px 16px 37px;
  }

  .aj-about-hero-photo {
    height: 510px;
  }

  .aj-about-hero-outline {
    height: 511px;
    left: 24px;
  }

  .aj-about-hero-photo-small {
    width: 145px;
    height: 171px;
  }

  .aj-about-year-seal {
    width: 102px;
    height: 102px;
    right: -14px;
  }

  .aj-about-year-seal strong {
    font-size: 28px;
  }

  .aj-about-intro-image {
    height: 455px;
  }

  .aj-about-heading {
    font-size: 43px;
  }

  .aj-about-history-panel {
    padding-left: 45px;
    padding-right: 45px;
  }

  .aj-about-history-year {
    font-size: 58px;
  }

  .aj-about-pink-gallery {
    height: 455px;
  }

  .aj-about-pink-top {
    height: 370px;
  }

  .aj-about-pink-bottom {
    height: 245px;
  }

  .aj-about-living-layout {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }

  .aj-about-living-heading {
    width: 100%;
  }

  .aj-about-living-heading p {
    max-width: 680px;
  }

  .aj-about-living-mandala {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    width: 140px;
    height: 140px;
  }

  .aj-about-living-cards {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .aj-about-hero-layout {
    min-height: 570px;
    gap: 25px;
  }

  .aj-about-hero-copy h1 {
    font-size: 44px;
    letter-spacing: -1.6px;
  }

  .aj-about-hero-copy>p {
    font-size: 13px;
  }

  .aj-about-hero-coordinate {
    font-size: 9px;
  }

  .aj-about-hero-visual {
    height: 480px;
    padding: 28px 14px 14px 29px;
  }

  .aj-about-hero-photo {
    height: 438px;
  }

  .aj-about-hero-outline {
    height: 443px;
    left: 17px;
  }

  .aj-about-hero-vertical {
    display: none;
  }

  .aj-about-hero-photo-small {
    width: 110px;
    height: 139px;
  }

  .aj-about-year-seal {
    width: 87px;
    height: 87px;
    top: 37px;
  }

  .aj-about-year-seal span {
    font-size: 6px;
  }

  .aj-about-year-seal strong {
    font-size: 23px;
  }

  .aj-about-hero-signature {
    margin-top: 27px;
  }

  .aj-about-intro-layout {
    gap: 35px;
  }

  .aj-about-intro-visual {
    padding-right: 42px;
  }

  .aj-about-intro-image {
    height: 390px;
  }

  .aj-about-intro-illustration {
    width: 135px;
    height: 115px;
  }

  .aj-about-intro-art-label {
    display: none;
  }

  .aj-about-heading {
    font-size: 38px;
  }

  .aj-about-intro-copy p {
    font-size: 12px;
  }

  .aj-about-intro-quote strong {
    font-size: 16px;
  }

  .aj-about-history-panel {
    padding: 44px 35px 28px;
  }

  .aj-about-history-header {
    gap: 20px;
  }

  .aj-about-history-item {
    padding-right: 0;
  }

  .aj-about-history-timeline {
    gap: 20px;
  }

  .aj-about-history-year {
    font-size: 48px;
  }

  .aj-about-history-item h3 {
    font-size: 19px;
  }

  .aj-about-pink-layout {
    gap: 35px;
  }

  .aj-about-pink-gallery {
    height: 410px;
  }

  .aj-about-pink-top {
    height: 340px;
  }

  .aj-about-pink-bottom {
    height: 208px;
  }

  .aj-about-architecture-gallery,
  .aj-about-architecture-photo {
    min-height: 340px;
    height: 340px;
  }

  .aj-about-architecture-overlay {
    padding: 20px;
  }

  .aj-about-architecture-overlay strong {
    font-size: 23px;
  }

  .aj-about-architecture-head p {
    font-size: 12px;
  }

  .aj-about-living-mandala {
    width: 110px;
    height: 110px;
  }

  .aj-about-canvas-content h2 {
    font-size: 40px;
  }

  .aj-about-next-card {
    min-height: 175px;
    padding-left: 20px;
    padding-right: 34px;
  }

  .aj-about-next-card strong {
    font-size: 22px;
  }

  .aj-about-next-card b {
    right: 15px;
  }
}

@media (max-width: 767px) {
  .aj-about-hero {
    padding-top: 20px;
  }

  .aj-about-hero-layout {
    flex-direction: column;
    gap: 20px;
  }

  .aj-about-hero-copy {
    width: 100%;
    padding: 5px 0 0;
  }

  .aj-about-breadcrumb {
    margin-bottom: 23px;
  }

  .aj-about-hero-copy h1 {
    font-size: 58px;
  }

  .aj-about-hero-copy>p {
    max-width: 550px;
    font-size: 14px;
  }

  .aj-about-hero-visual {
    width: 100%;
    max-width: 560px;
    height: 515px;
    padding: 28px 25px 20px 45px;
    align-self: center;
  }

  .aj-about-hero-photo {
    height: 465px;
  }

  .aj-about-hero-outline {
    height: 471px;
    left: 31px;
    right: 10px;
  }

  .aj-about-year-seal {
    top: 43px;
    right: 3px;
    width: 96px;
    height: 96px;
  }

  .aj-about-hero-photo-small {
    width: 145px;
    height: 166px;
  }

  .aj-about-hero-foot {
    flex-wrap: wrap;
    min-height: 60px;
    column-gap: 13px;
    font-size: 9px;
  }

  .aj-about-hero-foot-line {
    min-width: 35px;
  }

  .aj-about-intro-layout {
    flex-direction: column;
    gap: 25px;
  }

  .aj-about-intro-visual {
    width: 100%;
    max-width: 540px;
    align-self: center;
    padding: 20px 55px 35px 15px;
  }

  .aj-about-intro-image {
    height: 470px;
  }

  .aj-about-intro-copy {
    width: 100%;
  }

  .aj-about-intro-copy p {
    font-size: 13px;
  }

  .aj-about-history-header {
    flex-direction: column;
    align-items: start;
    padding-bottom: 38px;
    gap: 12px;
  }

  .aj-about-history-header p {
    max-width: 530px;
  }

  .aj-about-history-timeline {
    flex-direction: column;
    gap: 0;
    border-top: 0;
    border-left: 1px solid rgba(255, 226, 202, .29);
    margin-left: 9px;
  }

  .aj-about-history-item {
    padding: 0 0 34px 27px;
  }

  .aj-about-history-dot {
    left: -15px;
    top: 13px;
  }

  .aj-about-history-year {
    font-size: 55px;
  }

  .aj-about-history-item p {
    max-width: 490px;
  }

  .aj-about-history-footer {
    gap: 15px;
  }

  .aj-about-pink-layout {
    flex-direction: column;
    gap: 25px;
  }

  .aj-about-pink-copy {
    width: 100%;
  }

  .aj-about-pink-gallery {
    width: 100%;
    max-width: 560px;
    align-self: center;
    height: 470px;
  }

  .aj-about-pink-top {
    height: 398px;
  }

  .aj-about-pink-bottom {
    height: 260px;
  }

  .aj-about-architecture-head {
    flex-direction: column;
    gap: 0;
    align-items: start;
  }

  .aj-about-architecture-head p {
    max-width: 580px;
  }

  .aj-about-architecture-gallery {
    flex-wrap: wrap;
    min-height: 0;
  }

  .aj-about-architecture-card-large {
    flex-basis: 100%;
  }

  .aj-about-architecture-card-middle,
  .aj-about-architecture-card-small {
    flex-basis: 46%;
  }

  .aj-about-architecture-card-large .aj-about-architecture-photo {
    height: 340px;
  }

  .aj-about-architecture-card-middle .aj-about-architecture-photo,
  .aj-about-architecture-card-small .aj-about-architecture-photo {
    height: 280px;
  }

  .aj-about-living-heading .aj-about-heading {
    font-size: 37px;
  }

  .aj-about-living-mandala {
    display: none;
  }

  .aj-about-canvas-panel {
    min-height: 360px;
  }

  .aj-about-canvas-content h2 {
    font-size: 33px;
  }

  .aj-about-next-row {
    flex-wrap: wrap;
  }

  .aj-about-next-card {
    flex-basis: 46%;
  }

  .aj-about-next-card:last-child {
    flex-basis: 100%;
  }
}

@media (max-width: 575px) {
  .aj-about-page .aj-about-section {
    margin: 50px 0;
  }

  .aj-about-hero-copy h1 {
    font-size: 47px;
    letter-spacing: -1.6px;
  }

  .aj-about-breadcrumb {
    font-size: 9px;
  }

  .aj-about-kicker {
    font-size: 9px;
    letter-spacing: 1.7px;
  }

  .aj-about-hero-copy>p {
    font-size: 13px;
  }

  .aj-about-hero-actions {
    gap: 16px;
  }

  .aj-about-hero-signature {
    width: 100%;
  }

  .aj-about-hero-visual {
    height: 420px;
    padding: 24px 20px 14px 30px;
  }

  .aj-about-hero-photo {
    height: 378px;
  }

  .aj-about-hero-outline {
    height: 382px;
    left: 18px;
    right: 9px;
  }

  .aj-about-year-seal {
    width: 77px;
    height: 77px;
    right: 1px;
    top: 33px;
    border-width: 3px;
  }

  .aj-about-year-seal span {
    font-size: 5px;
  }

  .aj-about-year-seal strong {
    font-size: 21px;
  }

  .aj-about-hero-photo-small {
    width: 112px;
    height: 132px;
    border-width: 5px;
  }

  .aj-about-hero-photo-small span {
    font-size: 6px;
  }

  .aj-about-photo-caption {
    font-size: 7px;
    left: 17px;
    letter-spacing: 1px;
  }

  .aj-about-hero-foot {
    justify-content: space-between;
    row-gap: 3px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .aj-about-hero-foot>span:nth-child(3) {
    display: none;
  }

  .aj-about-heading {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .aj-about-lead {
    font-size: 17px !important;
  }

  .aj-about-intro-visual {
    padding-right: 48px;
  }

  .aj-about-intro-image {
    height: 355px;
  }

  .aj-about-intro-illustration {
    width: 127px;
    height: 107px;
  }

  .aj-about-intro-quote strong {
    font-size: 15px;
  }

  .aj-about-history-panel {
    padding: 39px 23px 26px;
  }

  .aj-about-history-header p {
    font-size: 12px;
  }

  .aj-about-history-year {
    font-size: 50px;
  }

  .aj-about-history-item h3 {
    font-size: 21px;
  }

  .aj-about-history-footer {
    font-size: 7px;
    letter-spacing: .7px;
  }

  .aj-about-pink-gallery {
    height: 360px;
  }

  .aj-about-pink-top {
    height: 300px;
  }

  .aj-about-pink-bottom {
    height: 176px;
    border-width: 6px;
  }

  .aj-about-pink-letter span {
    font-size: 62px;
  }

  .aj-about-colour-samples strong {
    font-size: 8px;
    letter-spacing: .4px;
  }

  .aj-about-colour-samples span {
    width: 24px;
    height: 23px;
  }

  .aj-about-architecture {
    padding-top: 40px;
    padding-bottom: 42px;
  }

  .aj-about-architecture-card-large .aj-about-architecture-photo {
    height: 300px;
  }

  .aj-about-architecture-card-middle,
  .aj-about-architecture-card-small {
    flex-basis: 100%;
  }

  .aj-about-architecture-card-middle .aj-about-architecture-photo,
  .aj-about-architecture-card-small .aj-about-architecture-photo {
    height: 245px;
  }

  .aj-about-architecture-overlay strong {
    font-size: 26px;
  }

  .aj-about-architecture-foot {
    align-items: start;
    flex-direction: column;
  }

  .aj-about-living-cards {
    flex-direction: column;
    gap: 13px;
  }

  .aj-about-living-card,
  .aj-about-living-card:nth-child(2),
  .aj-about-living-card:nth-child(3) {
    margin-top: 0;
    padding: 22px 25px;
  }

  .aj-about-living-symbol {
    height: 100px;
    justify-content: start;
  }

  .aj-about-living-symbol svg {
    width: 80px;
    height: 80px;
  }

  .aj-about-living-card h3 {
    font-size: 26px;
  }

  .aj-about-canvas-panel {
    padding: 58px 23px;
    min-height: 390px;
  }

  .aj-about-canvas-panel::before {
    inset: 13px;
  }

  .aj-about-canvas-content h2 {
    font-size: 28px;
  }

  .aj-about-canvas-content p {
    font-size: 12px;
  }

  .aj-about-canvas-corner {
    bottom: 23px;
    right: 25px;
    font-size: 7px;
  }

  .aj-about-essentials-head .aj-about-heading {
    font-size: 33px;
  }

  .aj-about-next-row {
    flex-direction: column;
  }

  .aj-about-next-card {
    width: 100%;
    min-height: 145px;
  }

  .aj-about-next-card strong {
    font-size: 25px;
  }
}

@media (max-width: 380px) {
  .aj-about-hero-copy h1 {
    font-size: 41px;
  }

  .aj-about-hero-coordinate {
    display: none;
  }

  .aj-about-hero-visual {
    height: 358px;
  }

  .aj-about-hero-photo {
    height: 319px;
  }

  .aj-about-hero-outline {
    height: 324px;
  }

  .aj-about-year-seal {
    width: 68px;
    height: 68px;
  }

  .aj-about-year-seal strong {
    font-size: 18px;
  }

  .aj-about-hero-photo-small {
    width: 97px;
    height: 116px;
  }

  .aj-about-intro-image {
    height: 318px;
  }

  .aj-about-heading {
    font-size: 31px;
  }

  .aj-about-colour-samples strong {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .aj-about-photo-shell img,
  .aj-about-button,
  .aj-about-next-card,
  .aj-about-living-card {
    transition: none;
  }
}


/* JAIPUR HERITAGE TOUR / PLACES TO VISIT
 * This stylesheet is intentionally isolated beneath .jpl-page and .jpl-*.
 * Shared header, footer, tokens and typography come from style.css.
 * Pixel-based sizing only. Percentage widths are used for fluid responsiveness.
 * No rem, vw, vh, clamp or CSS Grid.
 */
.jpl-page {
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden
}

.jpl-page .jpl-section {
  margin-top: 50px
}

.jpl-page a {
  text-decoration: none
}

.jpl-page p {
  font-size: 14px;
  line-height: 2;
  color: var(--body)
}

.jpl-page button {
  cursor: pointer
}

.jpl-page [hidden] {
  display: none !important
}

.jpl-overline {
  font-family: var(--alt);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--terracotta);
  letter-spacing: 2.7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5
}

.jpl-overline i {
  width: 30px;
  height: 1px;
  background: currentColor;
  display: block;
  flex: 0 0 30px
}

.jpl-overline--light {
  color: #e4b590
}

.jpl-button {
  border: 1px solid transparent;
  border-radius: 2px;
  min-height: 54px;
  padding: 7px 7px 7px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--alt);
  letter-spacing: .2px;
  white-space: nowrap;
  transition: transform 260ms, background 260ms, color 260ms
}

.jpl-button>span {
  display: flex;
  width: 39px;
  height: 39px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .14);
  font-size: 21px;
  font-weight: 400
}

.jpl-button:hover {
  transform: translateY(-3px)
}

.jpl-button--dark {
  background: var(--maroon);
  color: #fff8ed
}

.jpl-button--dark:hover {
  background: var(--terracotta);
  color: white
}

.jpl-button--outline {
  background: transparent;
  color: var(--maroon);
  border-color: #b89e8f
}

.jpl-button--outline>span {
  background: #efe1d3
}

.jpl-button--outline:hover {
  background: #eee2d2;
  color: var(--maroon)
}

.jpl-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, #d6ac8c, #985c51)
}

.jpl-photo>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 1050ms cubic-bezier(.22, .7, .2, 1);
}

.jpl-photo:hover>img {
  transform: scale(1.055)
}

.jpl-fallback-etch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 236, 215, .45);
  overflow: hidden;
  z-index: 0
}

.jpl-fallback-etch svg {
  width: 78%;
  height: 85%;
  opacity: .7
}

.jpl-fallback-etch span {
  position: absolute;
  font-size: 140px;
  line-height: 1;
  opacity: .18
}

/* HERO : same royal colours as approved homepage, new editorial composition */
.jpl-hero {
  position: relative;
  padding-top: 25px;
  overflow: hidden;
  background: radial-gradient(circle at 9% 24%, #fffdf7, transparent 46%), #f8f3e9
}

.jpl-hero-lineart {
  position: absolute;
  left: -98px;
  top: 50px;
  width: 315px;
  height: 440px;
  color: rgba(147, 89, 72, .055);
  pointer-events: none;
  transform: rotate(-13deg)
}

.jpl-hero-lineart svg {
  width: 100%;
  height: 100%
}

.jpl-hero-shell {
  display: flex;
  min-height: 660px;
  align-items: center;
  gap: 46px
}

.jpl-hero-copy {
  flex: 1 1 53%;
  min-width: 0;
  position: relative;
  z-index: 3;
  padding: 0 0 32px
}

.jpl-crumb {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--alt);
  font-size: 10px;
  color: #9e887a;
  letter-spacing: 1.8px;
  font-weight: 600;
  margin-bottom: 35px
}

.jpl-crumb span:nth-child(2) {
  color: var(--gold)
}

.jpl-crumb span:last-child {
  color: var(--terracotta)
}

.jpl-crumb a:hover {
  color: var(--terracotta)
}

.jpl-hero-copy h1 {
  font-family: var(--serif);
  color: var(--maroon);
  font-weight: 500;
  font-size: 76px;
  letter-spacing: -3.6px;
  line-height: 1.13;
  margin: 18px 0 24px
}

.jpl-hero-copy h1 em {
  color: var(--terracotta);
  font-weight: 400
}

.jpl-hero-copy h1 span {
  font-style: italic;
  font-weight: 400
}

.jpl-hero-copy>p {
  font-size: 15px;
  max-width: 480px;
  margin-bottom: 30px
}

.jpl-hero-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  flex-wrap: wrap
}

.jpl-coordinates {
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #aa8b78;
  white-space: nowrap
}

.jpl-hero-foot {
  margin-top: 55px;
  border-top: 1px solid #ddcbbb;
  padding-top: 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #9d897b;
  font-size: 9px;
  letter-spacing: 1.3px;
  font-family: var(--alt);
  font-weight: 700
}

.jpl-hero-foot>span {
  font-size: 28px;
  color: var(--gold);
  line-height: 1
}

.jpl-hero-foot b {
  font-weight: 500;
  color: var(--terracotta)
}

.jpl-hero-gallery {
  flex: 1 1 47%;
  min-width: 0;
  position: relative;
  height: 622px;
  padding: 28px 23px 37px 50px
}

.jpl-hero-arch-frame {
  position: absolute;
  top: 14px;
  left: 40px;
  right: 12px;
  height: 551px;
  border: 1px solid #c98e76;
  border-radius: 315px 315px 2px 2px;
  pointer-events: none
}

.jpl-hero-primary {
  height: 546px;
  border-radius: 305px 305px 3px 3px;
  background: #b46b5b
}

.jpl-hero-primary .jpl-fallback-etch {
  color: rgba(255, 217, 194, .7)
}

.jpl-hero-primary:after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 144px;
  background: linear-gradient(transparent, rgba(38, 22, 22, .68));
  pointer-events: none
}

.jpl-image-folio {
  position: absolute;
  bottom: 26px;
  left: 26px;
  z-index: 3;
  letter-spacing: 2px;
  font-size: 9px;
  font-family: var(--alt);
  font-weight: 700;
  color: white
}

.jpl-image-folio b {
  color: #f4c5a9;
  margin: 0 7px
}

.jpl-hero-mini {
  width: 174px;
  height: 215px;
  position: absolute;
  z-index: 4;
  bottom: 9px;
  left: 0;
  transform: rotate(-8deg);
  border: 8px solid var(--ivory);
  box-shadow: 0 13px 40px rgba(57, 32, 28, .23)
}

.jpl-mini-pattern {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #edd0ae;
  font-size: 105px
}

.jpl-hero-mini span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cream);
  color: var(--maroon);
  z-index: 3;
  font-size: 8px;
  text-align: center;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 6px 2px
}

.jpl-hero-royal-stamp {
  position: absolute;
  z-index: 5;
  right: -14px;
  top: 65px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff3de;
  box-shadow: 0 13px 30px rgba(51, 28, 28, .17);
  border: 5px double #ecd4b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(14deg);
  text-align: center
}

.jpl-hero-royal-stamp b {
  font-size: 15px;
  line-height: 1.1;
  color: #dcb18a
}

.jpl-hero-royal-stamp span {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2
}

.jpl-hero-royal-stamp small {
  font-size: 7px;
  letter-spacing: 1.4px;
  margin-top: 5px
}

.jpl-hero-vertical {
  position: absolute;
  right: -11px;
  bottom: 85px;
  writing-mode: vertical-rl;
  color: #b1988b;
  letter-spacing: 2px;
  font-size: 9px
}

.jpl-hero-bottom {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e1d2c0;
  color: #a38b7e;
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.7px
}

.jpl-bottom-star {
  font-size: 21px;
  color: var(--gold)
}

/* INTRO */
.jpl-intro-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jpl-intro-ornament {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  color: var(--terracotta);
  font-size: 10px;
  letter-spacing: 2.4px;
  font-family: var(--alt);
  font-weight: 700
}

.jpl-intro-ornament i {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--terracotta)
}

.jpl-intro h2,
.jpl-section-heading h2,
.jpl-routes-left h2,
.jpl-next h2 {
  font-family: var(--serif);
  font-size: 55px;
  line-height: 1.23;
  letter-spacing: -2px;
  font-weight: 500;
  color: var(--maroon)
}

.jpl-intro h2 {
  margin: 21px 0 17px
}

.jpl-intro h2 em,
.jpl-section-heading h2 em,
.jpl-routes-left h2 em,
.jpl-next h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jpl-intro-inner>p {
  max-width: 565px;
  margin-bottom: 27px
}

.jpl-intro-stats {
  border-top: 1px solid #ddc9b6;
  border-bottom: 1px solid #ddc9b6;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 740px;
  width: 100%;
  gap: 46px;
  padding: 16px 10px
}

.jpl-intro-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px
}

.jpl-intro-stats strong {
  font-family: var(--serif);
  color: var(--maroon);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.25
}

.jpl-intro-stats span {
  color: #9a8274;
  font-size: 9px;
  font-family: var(--alt);
  font-weight: 700;
  letter-spacing: 1.6px
}

.jpl-intro-stats>i {
  height: 35px;
  width: 1px;
  background: #dac7b8
}

/* FEATURE CHAPTER */
.jpl-feature-wrap {
  display: flex;
  min-height: 630px;
  gap: 0;
  align-items: stretch
}

.jpl-feature-media {
  flex: 1.09 1 0;
  min-width: 0;
  position: relative;
  padding: 20px 0 22px 23px
}

.jpl-feature-outline {
  position: absolute;
  border: 1px solid #b4806d;
  inset: 6px 15px 6px 7px;
  pointer-events: none
}

.jpl-feature-photo {
  height: 100%;
  min-height: 570px;
  background: linear-gradient(150deg, #cf9b74, #775142)
}

.jpl-feature-photo .jpl-fallback-etch {
  color: rgba(255, 229, 206, .5)
}

.jpl-feature-counter {
  position: absolute;
  bottom: 55px;
  left: 43px;
  z-index: 4;
  color: #fff1e0;
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1
}

.jpl-feature-counter small {
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  margin-left: 9px
}

.jpl-feature-media:after {
  content: "";
  position: absolute;
  bottom: 22px;
  left: 23px;
  right: 0;
  height: 146px;
  background: linear-gradient(transparent, rgba(27, 17, 15, .6));
  pointer-events: none
}

.jpl-feature-image-note {
  position: absolute;
  top: 51px;
  left: 53px;
  z-index: 4;
  color: #fff0dc;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
  writing-mode: vertical-rl
}

.jpl-feature-copy {
  flex: 1 1 0;
  min-width: 0;
  background: #542c30;
  color: #fff6e7;
  padding: 64px 57px 54px;
  position: relative;
  overflow: hidden
}

.jpl-feature-copy>*:not(.jpl-feature-engraving) {
  position: relative;
  z-index: 2
}

.jpl-feature-copy h2 {
  color: #fff4e3;
  font-family: var(--serif);
  font-size: 57px;
  letter-spacing: -1.9px;
  font-weight: 400;
  line-height: 1.23;
  margin: 30px 0 16px
}

.jpl-feature-copy h2 em {
  color: #d6a78b;
  font-weight: 400
}

.jpl-feature-subtitle {
  color: #ecc3a2;
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 24px
}

.jpl-feature-subtitle span {
  margin: 0 11px;
  color: #ca8a75
}

.jpl-feature-copy p {
  color: #e3c7ba;
  max-width: 470px
}

.jpl-feature-details {
  margin-top: 22px;
  padding: 19px 0;
  border-top: 1px solid rgba(242, 209, 189, .2);
  border-bottom: 1px solid rgba(242, 209, 189, .2);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.jpl-feature-details div {
  display: flex;
  gap: 14px;
  align-items: baseline
}

.jpl-feature-details strong {
  min-width: 98px;
  font-size: 9px;
  color: #e4ae8c;
  letter-spacing: 1.4px
}

.jpl-feature-details span {
  font-size: 12px;
  color: #ebcec0
}

.jpl-feature-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  max-width: 265px;
  margin-top: 27px;
  background: transparent;
  color: white;
  border: 0;
  border-bottom: 1px solid #d9b18b;
  padding: 0 0 10px;
  font-family: var(--alt);
  font-size: 13px;
  font-weight: 600
}

.jpl-feature-link:hover {
  color: #ecc4a5
}

.jpl-feature-link span {
  font-size: 23px;
  line-height: 1
}

.jpl-feature-engraving {
  width: 330px;
  height: 410px;
  position: absolute;
  right: -110px;
  bottom: -185px;
  color: rgba(255, 221, 196, .075);
  pointer-events: none;
  transform: rotate(-10deg)
}

.jpl-feature-engraving svg {
  height: 100%;
  width: 100%
}

/* LANDMARKS */
.jpl-collection {
  padding-bottom: 10px
}

.jpl-section-heading {
  display: flex;
  align-items: end;
  gap: 50px;
  justify-content: space-between;
  margin-bottom: 33px
}

.jpl-section-heading>div {
  flex: 1 1 58%
}

.jpl-section-heading>p {
  max-width: 390px;
  flex: 1 1 30%;
  margin-bottom: 8px
}

.jpl-section-heading h2 {
  margin: 17px 0 0
}

.jpl-filter-bar {
  border-top: 1px solid #dcc9b6;
  border-bottom: 1px solid #dcc9b6;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  padding: 15px 0;
  margin-bottom: 27px
}

.jpl-filter-bar>span {
  font-family: var(--alt);
  color: #998478;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  white-space: nowrap
}

.jpl-filter-bar>span b {
  color: var(--terracotta);
  font-size: 14px;
  margin-left: 6px
}

.jpl-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.jpl-filter {
  padding: 10px 15px;
  border: 1px solid #e6d7c9;
  background: transparent;
  color: #74625c;
  font-family: var(--alt);
  font-size: 11px;
  font-weight: 600;
  transition: background 250ms, border-color 250ms, color 250ms
}

.jpl-filter:hover {
  border-color: #ae7e69;
  color: var(--maroon)
}

.jpl-filter.active,
.jpl-filter.active:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff8ec
}

.jpl-filter sup {
  font-size: 8px;
  color: #d9b597
}

.jpl-collection-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 29px 22px;
  align-items: stretch
}

.jpl-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  background: #fffaf2;
  border: 1px solid #e9dacc;
  transition: border-color 260ms, transform 300ms, box-shadow 300ms;
  position: relative;
  overflow: hidden
}

.jpl-card:hover {
  border-color: #d7b6a2;
  transform: translateY(-6px);
  box-shadow: 0 20px 38px rgba(80, 44, 40, .07)
}

.jpl-card-visual {
  height: 255px;
  background: linear-gradient(145deg, #cba17e, #925647)
}

.jpl-photo--hawa,
.jpl-photo--patrika {
  background: linear-gradient(145deg, #e9b1a0, #a35b58)
}

.jpl-photo--nahar,
.jpl-photo--jaigarh {
  background: linear-gradient(145deg, #b5a47d, #655e4c)
}

.jpl-photo--jantar,
.jpl-photo--panna {
  background: linear-gradient(145deg, #dbc59a, #936a4e)
}

.jpl-photo--gaitore,
.jpl-photo--albert {
  background: linear-gradient(145deg, #d6bda3, #81594c)
}

.jpl-photo--galta,
.jpl-photo--jal {
  background: linear-gradient(145deg, #abbcae, #68767b)
}

.jpl-card-image-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(0deg, rgba(42, 26, 28, .42), transparent 60%);
  pointer-events: none
}

.jpl-card-num {
  position: absolute;
  top: 16px;
  left: 17px;
  z-index: 3;
  color: white;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .3)
}

.jpl-card-category {
  position: absolute;
  bottom: 16px;
  left: 18px;
  z-index: 3;
  color: #fff7ec;
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px
}

.jpl-card-content {
  padding: 23px 23px 24px
}

.jpl-card-location {
  color: var(--terracotta);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.25px
}

.jpl-card h3 {
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: -.5px;
  line-height: 1.2;
  color: var(--maroon);
  margin: 10px 0 12px;
  font-weight: 500
}

.jpl-card p {
  color: #7d6c61;
  font-size: 12px;
  line-height: 1.85;
  min-height: 45px;
  margin-bottom: 22px
}

.jpl-card-discover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid #e9dacc;
  padding: 14px 0 0;
  font-family: var(--alt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--maroon);
  transition: color 250ms
}

.jpl-card-discover span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--terracotta);
  transition: transform 250ms
}

.jpl-card-discover:hover {
  color: var(--terracotta)
}

.jpl-card-discover:hover span {
  transform: translate(3px, -3px)
}

.jpl-results {
  font-size: 10px !important;
  color: #948075 !important;
  text-align: center;
  letter-spacing: 1px;
  margin: 23px 0 0
}

/* HAWA CHAPTER */
.jpl-hawa-layout {
  display: flex;
  align-items: center;
  gap: 80px;
  min-height: 590px
}

.jpl-hawa-copy {
  flex: 1 1 47%;
  min-width: 0;
  position: relative
}

.jpl-hawa-index {
  display: block;
  font-size: 10px;
  font-family: var(--alt);
  font-weight: 700;
  color: #a18979;
  letter-spacing: 1.7px;
  margin-top: 43px
}

.jpl-hawa-copy h2 {
  font-family: var(--serif);
  font-size: 69px;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -2px;
  margin: 16px 0 24px;
  color: var(--maroon)
}

.jpl-hawa-copy h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jpl-hawa-copy p {
  max-width: 445px
}

.jpl-text-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 245px;
  margin-top: 27px;
  padding: 0 0 11px;
  border: 0;
  border-bottom: 1px solid var(--terracotta);
  background: transparent;
  color: var(--maroon);
  font-size: 12px;
  font-family: var(--alt);
  font-weight: 700;
  text-align: left
}

.jpl-text-cta span {
  font-size: 23px;
  color: var(--terracotta);
  line-height: 1
}

.jpl-text-cta:hover {
  color: var(--terracotta)
}

.jpl-hawa-decor {
  position: absolute;
  left: -130px;
  bottom: -185px;
  width: 350px;
  height: 400px;
  pointer-events: none;
  color: rgba(146, 74, 59, .055);
  transform: rotate(4deg)
}

.jpl-hawa-decor svg {
  height: 100%;
  width: 100%
}

.jpl-hawa-visual {
  flex: 1 1 53%;
  min-width: 0;
  position: relative;
  padding: 21px 17px 23px 37px
}

.jpl-hawa-visual:before {
  content: "";
  position: absolute;
  inset: 7px 0 9px 24px;
  border: 1px solid #b57e69;
  pointer-events: none
}

.jpl-hawa-photo {
  height: 550px;
  background: linear-gradient(130deg, #e4ab9c, #9e5349)
}

.jpl-hawa-photo .jpl-fallback-etch {
  color: rgba(255, 227, 213, .65)
}

.jpl-hawa-photo:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 125px;
  background: linear-gradient(transparent, rgba(36, 19, 23, .55));
  z-index: 2
}

.jpl-hawa-photo-caption {
  position: absolute;
  bottom: 48px;
  left: 60px;
  z-index: 3;
  color: #fff2e8;
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 700
}

.jpl-hawa-corner {
  position: absolute;
  top: 35px;
  right: -26px;
  width: 113px;
  height: 113px;
  background: var(--maroon);
  color: #fff5e5;
  border: 5px double #e5c4a3;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(14deg);
  z-index: 3;
  font-family: var(--serif);
  font-size: 31px
}

.jpl-hawa-corner small {
  font-family: var(--alt);
  font-size: 8px;
  letter-spacing: 1.2px
}

/* DISCOVER QUIET PLACES */
.jpl-hidden {
  background: var(--maroon);
  padding: 56px 0 45px;
  position: relative;
  overflow: hidden
}

.jpl-hidden:before {
  content: '';
  position: absolute;
  right: -75px;
  top: -70px;
  font-family: Georgia, serif;
  font-size: 450px;
  line-height: 1;
  color: rgba(245, 202, 170, .043)
}

.jpl-hidden-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2
}

.jpl-hidden h2 {
  font-family: var(--serif);
  font-size: 51px;
  font-weight: 500;
  letter-spacing: -1.7px;
  line-height: 1.25;
  color: #fff3e6;
  margin: 15px 0
}

.jpl-hidden h2 em {
  color: #dcae90;
  font-weight: 400
}

.jpl-hidden-head p {
  color: #dcc3b3;
  max-width: 600px
}

.jpl-hidden-panels {
  position: relative;
  display: flex;
  gap: 16px;
  margin-top: 24px
}

.jpl-hidden-panel {
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
  background: #79484a;
  position: relative;
  border: 1px solid #9c7270;
  text-align: left;
  color: #fff7ea;
  transition: transform 350ms;
  overflow: hidden
}

.jpl-hidden-panel:hover {
  transform: translateY(-6px)
}

.jpl-hidden-panel-image {
  height: 305px;
  overflow: hidden
}

.jpl-hidden-panel--one .jpl-hidden-panel-image {
  background: linear-gradient(130deg, #bd9075, #755247)
}

.jpl-hidden-panel--two .jpl-hidden-panel-image {
  background: linear-gradient(130deg, #b8ab8c, #756456)
}

.jpl-hidden-panel--three .jpl-hidden-panel-image {
  background: linear-gradient(130deg, #b6b798, #748078)
}

.jpl-hidden-etch {
  position: absolute;
  inset: 0;
  color: rgba(255, 236, 208, .4)
}

.jpl-hidden-etch svg {
  height: 100%;
  width: 100%
}

.jpl-hidden-panel-image:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(transparent 35%, rgba(35, 22, 25, .75))
}

.jpl-hidden-panel-info {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 20px;
  display: flex;
  flex-direction: column
}

.jpl-hidden-panel-info small {
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: #efd0bb
}

.jpl-hidden-panel-info strong {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4
}

.jpl-hidden-panel-info span {
  position: absolute;
  bottom: 20px;
  right: 22px;
  font-size: 24px
}

.jpl-hidden-bottom {
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #c99f89;
  letter-spacing: 2px;
  margin-top: 23px
}

/* EASY ROUTES */
.jpl-routes-layout {
  display: flex;
  align-items: center;
  gap: 75px
}

.jpl-routes-left {
  flex: 1 1 43%;
  position: relative;
  min-width: 0
}

.jpl-routes-left h2 {
  margin: 20px 0
}

.jpl-routes-left p {
  max-width: 430px;
  margin-bottom: 27px
}

.jpl-routes-right {
  flex: 1 1 57%;
  min-width: 0;
  border-top: 1px solid #d9c3ae
}

.jpl-routes-etch {
  position: absolute;
  right: -80px;
  bottom: -170px;
  width: 310px;
  height: 200px;
  color: rgba(140, 77, 61, .085);
  pointer-events: none
}

.jpl-routes-etch svg {
  width: 100%;
  height: 100%
}

.jpl-route {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 8px 26px 0;
  border-bottom: 1px solid #d9c3ae;
  transition: padding 250ms, background 250ms
}

.jpl-route:hover {
  padding-left: 9px;
  background: rgba(236, 220, 203, .22)
}

.jpl-route-id {
  align-self: flex-start;
  color: #bb8b71;
  font-family: var(--serif);
  font-size: 28px;
  min-width: 45px;
  line-height: 1.1
}

.jpl-route-main {
  flex: 1 1 0;
  min-width: 0
}

.jpl-route-main>span {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--alt);
  color: var(--terracotta);
  letter-spacing: 1.8px
}

.jpl-route h3 {
  color: var(--maroon);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  margin: 6px 0
}

.jpl-route p {
  font-size: 11px;
  line-height: 1.9;
  margin: 0
}

.jpl-route p b {
  color: var(--terracotta);
  font-weight: 400;
  padding: 0 3px
}

.jpl-route-star {
  font-size: 26px;
  color: #c4a48a
}

/* QUOTE BANNER */
.jpl-quote {
  background: #eee3d6;
  position: relative;
  padding: 65px 0 58px;
  text-align: center
}

.jpl-quote-inner {
  position: relative
}

.jpl-quote-inner>span {
  color: var(--terracotta);
  font-size: 10px;
  letter-spacing: 2.1px;
  font-family: var(--alt);
  font-weight: 700
}

.jpl-quote h2 {
  margin: 17px 0;
  color: var(--maroon);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -1.2px;
  position: relative;
  z-index: 2
}

.jpl-quote h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jpl-quote p {
  font-family: var(--serif);
  font-style: italic;
  color: #9f7b70 !important;
  position: relative;
  z-index: 2
}

.jpl-quote-arch {
  position: absolute;
  left: -130px;
  top: -38px;
  width: 260px;
  height: 260px;
  color: rgba(157, 84, 66, .09);
  transform: rotate(-11deg)
}

.jpl-quote-arch svg {
  width: 100%;
  height: 100%
}

/* CTA */
.jpl-next-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  padding-bottom: 50px
}

.jpl-next-wrap>div:first-child {
  flex: 1 1 58%
}

.jpl-next h2 {
  margin: 14px 0
}

.jpl-next p {
  max-width: 545px;
  margin-bottom: 0
}

.jpl-next-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px
}

/* INFORMATION MODAL: static page with client-side detail; no server or data fetch */
.jpl-dialog {
  width: calc(100% - 38px);
  max-width: 580px;
  max-height: calc(100% - 40px);
  border: 1px solid #d3ae95;
  padding: 0;
  background: #fff8ed;
  color: var(--maroon);
  box-shadow: 0 20px 70px rgba(44, 25, 25, .3);
  overflow: auto
}

.jpl-dialog::backdrop {
  background: rgba(31, 19, 22, .76);
  backdrop-filter: blur(5px)
}

.jpl-dialog-inner {
  padding: 54px 48px 37px;
  position: relative;
  overflow: hidden
}

.jpl-dialog-ornament {
  position: absolute;
  top: -82px;
  right: -35px;
  font-size: 260px;
  line-height: 1;
  color: rgba(159, 83, 67, .07);
  pointer-events: none
}

.jpl-dialog-close {
  position: absolute;
  right: 19px;
  top: 15px;
  z-index: 3;
  background: var(--maroon);
  color: white;
  border: 0;
  width: 37px;
  height: 37px;
  font-size: 28px;
  line-height: 1
}

.jpl-dialog-close:hover {
  background: var(--terracotta)
}

.jpl-dialog-location {
  display: block;
  margin-top: 40px;
  font-family: var(--alt);
  letter-spacing: 1.4px;
  font-size: 10px;
  color: #967f6e;
  font-weight: 700
}

.jpl-dialog h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  margin: 13px 0 20px;
  color: var(--maroon)
}

.jpl-dialog p {
  font-size: 15px;
  max-width: 480px;
  margin-bottom: 31px
}

.jpl-dialog-bottom {
  border-top: 1px solid #e3cbbb;
  padding-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.jpl-dialog-bottom span {
  color: #9b7e70;
  font-family: var(--alt);
  font-size: 9px;
  letter-spacing: 1px
}

.jpl-dialog-bottom a {
  font-family: var(--alt);
  font-size: 11px;
  color: var(--terracotta);
  font-weight: 700
}

/* Responsive — shared navbar breakpoints handled by approved style.css */
@media(max-width:1199px) {
  .jpl-hero-shell {
    gap: 25px;
    min-height: 610px
  }

  .jpl-hero-copy h1 {
    font-size: 65px
  }

  .jpl-hero-gallery {
    height: 570px;
    padding-left: 34px
  }

  .jpl-hero-primary {
    height: 510px
  }

  .jpl-hero-arch-frame {
    left: 23px;
    height: 517px
  }

  .jpl-hero-mini {
    width: 140px;
    height: 170px
  }

  .jpl-hero-royal-stamp {
    right: -7px;
    width: 100px;
    height: 100px
  }

  .jpl-hero-royal-stamp span {
    font-size: 15px
  }

  .jpl-feature-copy {
    padding: 45px 36px 40px
  }

  .jpl-feature-copy h2 {
    font-size: 49px
  }

  .jpl-feature-wrap {
    min-height: 590px
  }

  .jpl-feature-photo {
    min-height: 545px
  }

  .jpl-hawa-layout {
    gap: 35px
  }

  .jpl-hawa-copy h2 {
    font-size: 59px
  }

  .jpl-hawa-photo {
    height: 500px
  }

  .jpl-hawa-corner {
    right: -12px
  }

  .jpl-routes-layout {
    gap: 35px
  }
}

@media(max-width:991px) {
  .jpl-hero-shell {
    gap: 15px;
    min-height: 540px
  }

  .jpl-hero-copy h1 {
    font-size: 53px;
    letter-spacing: -2.3px
  }

  .jpl-hero-gallery {
    height: 490px;
    padding: 20px 10px 28px 25px
  }

  .jpl-hero-primary {
    height: 450px
  }

  .jpl-hero-arch-frame {
    left: 14px;
    height: 452px;
    right: 0
  }

  .jpl-hero-mini {
    width: 122px;
    height: 147px;
    border-width: 6px
  }

  .jpl-hero-royal-stamp {
    right: -5px;
    top: 40px;
    width: 84px;
    height: 84px;
    border-width: 3px
  }

  .jpl-hero-royal-stamp span {
    font-size: 13px
  }

  .jpl-hero-foot {
    margin-top: 24px
  }

  .jpl-hero-copy>p {
    font-size: 13px
  }

  .jpl-hero-vertical {
    display: none
  }

  .jpl-intro h2,
  .jpl-section-heading h2,
  .jpl-routes-left h2,
  .jpl-next h2 {
    font-size: 46px
  }

  .jpl-feature-copy {
    padding: 32px 27px
  }

  .jpl-feature-copy h2 {
    font-size: 40px;
    margin: 21px 0 12px
  }

  .jpl-feature-wrap {
    min-height: 510px
  }

  .jpl-feature-photo {
    min-height: 490px
  }

  .jpl-feature-details div {
    flex-direction: column;
    gap: 3px
  }

  .jpl-feature-details strong {
    min-width: 0
  }

  .jpl-feature-copy p {
    font-size: 12px
  }

  .jpl-feature-media {
    padding-left: 13px
  }

  .jpl-feature-media:after {
    left: 13px
  }

  .jpl-feature-image-note {
    left: 30px
  }

  .jpl-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  .jpl-filters {
    width: 100%
  }

  .jpl-card {
    flex: 0 0 calc((100% - 20px)/2)
  }

  .jpl-collection-gallery {
    gap: 20px
  }

  .jpl-hawa-layout {
    gap: 26px
  }

  .jpl-hawa-copy h2 {
    font-size: 50px
  }

  .jpl-hawa-photo {
    height: 450px
  }

  .jpl-hawa-corner {
    width: 90px;
    height: 90px;
    font-size: 25px
  }

  .jpl-hawa-index {
    margin-top: 18px
  }

  .jpl-hidden-panel-image {
    height: 265px
  }

  .jpl-hidden-panel-info strong {
    font-size: 21px
  }

  .jpl-route {
    gap: 11px
  }

  .jpl-route h3 {
    font-size: 21px
  }
}

@media(max-width:767px) {
  .jpl-hero {
    padding-top: 19px
  }

  .jpl-hero-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 0
  }

  .jpl-hero-copy {
    padding: 10px 0 0
  }

  .jpl-crumb {
    margin-bottom: 24px
  }

  .jpl-hero-copy h1 {
    font-size: 59px;
    margin-top: 12px
  }

  .jpl-hero-copy>p {
    max-width: 525px
  }

  .jpl-hero-foot {
    display: none
  }

  .jpl-hero-gallery {
    width: 100%;
    height: 520px;
    padding: 25px 22px 38px 45px;
    max-width: 530px;
    margin: 5px auto 8px
  }

  .jpl-hero-primary {
    height: 455px
  }

  .jpl-hero-arch-frame {
    left: 35px;
    right: 10px;
    height: 461px
  }

  .jpl-hero-mini {
    width: 138px;
    height: 163px;
    left: 0
  }

  .jpl-hero-royal-stamp {
    width: 92px;
    height: 92px;
    right: 4px
  }

  .jpl-hero-vertical {
    display: block;
    right: 0;
    bottom: 83px
  }

  .jpl-hero-bottom {
    min-height: 50px;
    gap: 10px;
    font-size: 8px
  }

  .jpl-bottom-star {
    font-size: 16px
  }

  .jpl-intro h2,
  .jpl-section-heading h2,
  .jpl-routes-left h2,
  .jpl-next h2 {
    font-size: 43px
  }

  .jpl-intro-stats {
    gap: 11px
  }

  .jpl-intro-stats div {
    min-width: 0;
    flex: 1
  }

  .jpl-intro-stats strong {
    font-size: 26px
  }

  .jpl-intro-stats span {
    font-size: 8px;
    letter-spacing: .5px
  }

  .jpl-feature-wrap {
    display: flex;
    flex-direction: column
  }

  .jpl-feature-media {
    height: 470px;
    flex: none;
    padding: 10px 15px 12px
  }

  .jpl-feature-outline {
    inset: 0 22px
  }

  .jpl-feature-photo {
    height: 100%;
    min-height: 0
  }

  .jpl-feature-media:after {
    bottom: 12px;
    left: 15px;
    right: 15px
  }

  .jpl-feature-copy {
    flex: none;
    padding: 42px 34px
  }

  .jpl-feature-copy h2 {
    font-size: 49px
  }

  .jpl-feature-details div {
    flex-direction: row;
    gap: 15px
  }

  .jpl-feature-counter {
    left: 33px;
    bottom: 35px
  }

  .jpl-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }

  .jpl-section-heading p {
    max-width: 520px
  }

  .jpl-hawa-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 20px
  }

  .jpl-hawa-copy h2 {
    font-size: 56px
  }

  .jpl-hawa-copy p {
    max-width: 570px
  }

  .jpl-hawa-visual {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding-left: 27px
  }

  .jpl-hawa-photo {
    height: 450px
  }

  .jpl-hawa-visual:before {
    left: 13px
  }

  .jpl-hidden {
    padding: 43px 0
  }

  .jpl-hidden h2 {
    font-size: 41px
  }

  .jpl-hidden-panels {
    flex-wrap: wrap
  }

  .jpl-hidden-panel {
    flex: 0 0 calc((100% - 16px)/2)
  }

  .jpl-hidden-panel:last-child {
    flex: 1 1 100%
  }

  .jpl-hidden-panel:last-child .jpl-hidden-panel-image {
    height: 220px
  }

  .jpl-hidden-panel-image {
    height: 250px
  }

  .jpl-routes-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 35px
  }

  .jpl-routes-left h2 {
    font-size: 46px
  }

  .jpl-routes-right {
    flex: none
  }

  .jpl-route h3 {
    font-size: 24px
  }

  .jpl-quote h2 {
    font-size: 36px
  }

  .jpl-quote-arch {
    left: -75px;
    opacity: .5
  }

  .jpl-next-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px
  }

  .jpl-next-actions {
    flex-direction: row;
    flex-wrap: wrap
  }

  .jpl-next h2 {
    font-size: 42px
  }
}

@media(max-width:560px) {
  .jpl-hero-lineart {
    opacity: .6
  }

  .jpl-hero-copy h1 {
    font-size: 50px;
    letter-spacing: -2px
  }

  .jpl-hero-copy>p {
    font-size: 13px
  }

  .jpl-hero-actions {
    gap: 13px
  }

  .jpl-hero-gallery {
    height: 453px;
    padding: 20px 15px 30px 30px
  }

  .jpl-hero-primary {
    height: 405px
  }

  .jpl-hero-arch-frame {
    left: 22px;
    right: 4px;
    top: 10px;
    height: 412px
  }

  .jpl-hero-mini {
    width: 116px;
    height: 136px;
    left: 0;
    bottom: 7px
  }

  .jpl-hero-royal-stamp {
    width: 82px;
    height: 82px;
    right: 3px;
    top: 35px
  }

  .jpl-hero-vertical {
    display: none
  }

  .jpl-hero-bottom {
    justify-content: center
  }

  .jpl-hero-bottom>span:last-child {
    display: none
  }

  .jpl-intro h2,
  .jpl-section-heading h2,
  .jpl-routes-left h2,
  .jpl-next h2 {
    font-size: 37px
  }

  .jpl-intro-ornament {
    font-size: 8px;
    letter-spacing: 1.3px
  }

  .jpl-intro-stats {
    padding: 13px 0;
    gap: 4px
  }

  .jpl-intro-stats strong {
    font-size: 23px
  }

  .jpl-intro-stats span {
    font-size: 7px
  }

  .jpl-intro-stats>i {
    height: 25px
  }

  .jpl-feature-media {
    height: 365px
  }

  .jpl-feature-copy {
    padding: 36px 24px
  }

  .jpl-feature-copy h2 {
    font-size: 45px
  }

  .jpl-feature-details div {
    flex-direction: column;
    gap: 3px
  }

  .jpl-feature-image-note {
    left: 25px
  }

  .jpl-filters {
    gap: 5px
  }

  .jpl-filter {
    padding: 9px 11px;
    font-size: 10px
  }

  .jpl-card {
    flex: 1 1 100%
  }

  .jpl-card-visual {
    height: 260px
  }

  .jpl-card-content {
    padding: 21px
  }

  .jpl-card p {
    min-height: 0
  }

  .jpl-card h3 {
    font-size: 28px
  }

  .jpl-hawa-copy h2 {
    font-size: 51px
  }

  .jpl-hawa-photo {
    height: 405px
  }

  .jpl-hawa-corner {
    right: 2px;
    top: 31px;
    width: 77px;
    height: 77px;
    font-size: 23px
  }

  .jpl-hawa-photo-caption {
    left: 43px;
    bottom: 42px;
    font-size: 8px
  }

  .jpl-hidden h2 {
    font-size: 36px
  }

  .jpl-hidden-panels {
    flex-direction: column
  }

  .jpl-hidden-panel {
    flex: none;
    width: 100%
  }

  .jpl-hidden-panel-image,
  .jpl-hidden-panel:last-child .jpl-hidden-panel-image {
    height: 255px
  }

  .jpl-hidden-panel-info strong {
    font-size: 25px
  }

  .jpl-route {
    gap: 10px
  }

  .jpl-route-id {
    min-width: 35px;
    font-size: 24px
  }

  .jpl-route-star {
    font-size: 17px
  }

  .jpl-route h3 {
    font-size: 21px
  }

  .jpl-route p {
    font-size: 10px
  }

  .jpl-quote {
    padding: 44px 0
  }

  .jpl-quote h2 {
    font-size: 30px
  }

  .jpl-next-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch
  }

  .jpl-next h2 {
    font-size: 38px
  }

  .jpl-dialog-inner {
    padding: 49px 26px 28px
  }

  .jpl-dialog h2 {
    font-size: 36px
  }

  .jpl-dialog-bottom {
    flex-wrap: wrap
  }
}

@media(max-width:360px) {
  .jpl-hero-copy h1 {
    font-size: 43px
  }

  .jpl-hero-gallery {
    height: 390px;
    padding-left: 23px;
    padding-right: 12px
  }

  .jpl-hero-primary {
    height: 343px
  }

  .jpl-hero-arch-frame {
    left: 14px;
    height: 350px
  }

  .jpl-hero-mini {
    width: 98px;
    height: 116px
  }

  .jpl-hero-royal-stamp {
    width: 72px;
    height: 72px
  }

  .jpl-hero-royal-stamp span {
    font-size: 11px
  }

  .jpl-intro h2,
  .jpl-section-heading h2,
  .jpl-routes-left h2,
  .jpl-next h2 {
    font-size: 33px
  }

  .jpl-feature-copy h2 {
    font-size: 38px
  }

  .jpl-hawa-copy h2 {
    font-size: 44px
  }

  .jpl-hawa-photo {
    height: 340px
  }

  .jpl-hidden h2 {
    font-size: 32px
  }

  .jpl-quote h2 {
    font-size: 27px
  }
}

@media(prefers-reduced-motion:reduce) {

  .jpl-page .jpl-card,
  .jpl-page .jpl-photo>img,
  .jpl-page .jpl-button,
  .jpl-page .jpl-hidden-panel {
    transition: none !important
  }
}

/* JAIPUR HERITAGE TOUR — CULTURE & HERITAGE
   All new selectors scoped under jch- and the jch-page root.
   Inherits the approved homepage's palette, header, footer, and fonts.
   Pixel-based sizing; flexible percentages only where required for fluid layouts.
   Works with the existing Bootstrap layout without overwriting shared styles.
*/
.jch-page {
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden
}

.jch-page .jch-section {
  margin-top: 50px
}

.jch-page p {
  color: var(--body);
  font-size: 14px;
  line-height: 1.9
}

.jch-page h1,
.jch-page h2,
.jch-page h3 {
  font-family: var(--serif);
  font-weight: 500
}

.jch-page a {
  text-decoration: none
}

.jch-page [hidden] {
  display: none !important
}

.jch-eyebrow {
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.1px;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  line-height: 1.7
}

.jch-eyebrow i {
  height: 1px;
  width: 30px;
  background: currentColor;
  display: block;
  flex: 0 0 30px
}

.jch-eyebrow--light {
  color: #deb293
}

.jch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 55px;
  padding: 7px 7px 7px 23px;
  border: 1px solid transparent;
  font: 600 12px var(--alt);
  white-space: nowrap;
  transition: transform 300ms, background 300ms, color 300ms
}

.jch-btn span {
  height: 39px;
  width: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255, 255, 255, .14);
  font-weight: 400
}

.jch-btn:hover {
  transform: translateY(-3px)
}

.jch-btn--solid {
  background: var(--maroon);
  color: #fff5e9
}

.jch-btn--solid:hover {
  background: var(--terracotta);
  color: #fff
}

.jch-btn--cream {
  color: var(--maroon);
  background: #fff2e1
}

.jch-btn--cream:hover {
  color: var(--maroon);
  background: #fffaf4
}

.jch-btn--cream span {
  background: #e8dac8
}

.jch-btn--outline {
  color: #fff4df;
  background: transparent;
  border-color: #a67e6d
}

.jch-btn--outline:hover {
  color: #fff;
  background: #ffffff12
}

.jch-inline-link {
  color: var(--maroon);
  font-size: 12px;
  font-family: var(--alt);
  font-weight: 700;
  display: inline-flex;
  gap: 35px;
  justify-content: space-between;
  align-items: center;
  min-width: 225px;
  border-bottom: 1px solid #b98067;
  padding: 0 0 12px;
  transition: color 250ms
}

.jch-inline-link:hover {
  color: var(--terracotta)
}

.jch-inline-link span {
  color: var(--terracotta);
  font-size: 23px;
  font-weight: 400;
  line-height: 1
}

.jch-inline-link--light {
  color: #fff1e0;
  border-color: #d5a183
}

.jch-inline-link--light:hover {
  color: #e9b89b
}

.jch-inline-link--light span {
  color: #e6b69a
}

.jch-photo {
  position: relative;
  isolation: isolate;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(145deg, #dfb18e, #87564d)
}

.jch-photo>img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 2;
  transition: transform 900ms cubic-bezier(.25, .65, .24, 1)
}

.jch-photo:hover>img {
  transform: scale(1.05)
}

.jch-photo-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 11px;
  color: #fff0dd;
  background: radial-gradient(circle at 35% 22%, rgba(255, 244, 215, .25), transparent 44%), repeating-linear-gradient(45deg, transparent 0px, transparent 28px, rgba(255, 255, 255, .045) 29px, rgba(255, 255, 255, .045) 30px)
}

.jch-photo-fallback svg {
  width: 75%;
  height: 75%;
  max-width: 330px;
  max-height: 330px;
  color: rgba(255, 234, 209, .35)
}

.jch-photo-fallback strong {
  font: 700 10px var(--alt);
  letter-spacing: 2px;
  text-align: center;
  padding: 0 15px
}

/* 01 / Editorial hero */
.jch-hero {
  position: relative;
  background: radial-gradient(circle at 18% 10%, #fffdf7, transparent 45%), #f8f3e9;
  padding-top: 20px
}

.jch-hero-engraving {
  position: absolute;
  left: -150px;
  top: 160px;
  width: 420px;
  height: 420px;
  color: rgba(151, 91, 70, .07);
  pointer-events: none;
  transform: rotate(-17deg)
}

.jch-hero-engraving svg {
  height: 100%;
  width: 100%
}

.jch-hero-layout {
  display: flex;
  align-items: center;
  gap: 35px;
  min-height: 705px
}

.jch-hero-copy {
  flex: 1.02 1 0;
  min-width: 0;
  padding-bottom: 18px;
  position: relative;
  z-index: 3
}

.jch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  font: 600 10px var(--alt);
  letter-spacing: 1.6px;
  color: #a28c80;
  margin-bottom: 36px
}

.jch-breadcrumb>span:nth-child(2) {
  color: var(--gold)
}

.jch-breadcrumb>span:last-child {
  color: var(--terracotta)
}

.jch-breadcrumb a:hover {
  color: var(--terracotta)
}

.jch-hero-copy h1 {
  font-size: 70px;
  letter-spacing: -3.7px;
  line-height: 1.12;
  margin: 19px 0 22px;
  color: var(--maroon)
}

.jch-hero-copy h1 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-hero-copy h1 span {
  font-weight: 400;
  font-style: italic
}

.jch-hero-copy>p {
  max-width: 500px;
  font-size: 15px;
  line-height: 1.95;
  margin-bottom: 27px
}

.jch-hero-action {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap
}

.jch-hero-script {
  font-family: var(--serif);
  font-size: 18px;
  color: #a56c5c
}

.jch-hero-footnote {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #a88b7a;
  font: 700 9px var(--alt);
  letter-spacing: 1.8px;
  margin-top: 52px
}

.jch-hero-footnote b {
  font: 500 23px var(--serif);
  color: var(--terracotta)
}

.jch-hero-footnote i {
  display: block;
  max-width: 72px;
  width: 100%;
  height: 1px;
  background: #d9c4b3
}

.jch-hero-art {
  flex: .98 1 0;
  height: 635px;
  min-width: 0;
  position: relative;
  padding: 20px 25px 25px 57px
}

.jch-hero-art:before {
  content: "";
  position: absolute;
  inset: 5px 15px 55px 43px;
  border: 1px solid #ce9a84;
  border-radius: 290px 290px 4px 4px;
  pointer-events: none
}

.jch-hero-large {
  height: 555px;
  border-radius: 280px 280px 3px 3px;
  overflow: hidden
}

.jch-hero-large .jch-photo {
  background: linear-gradient(135deg, #ac7c66, #624542)
}

.jch-hero-large .jch-photo:after {
  content: "";
  z-index: 3;
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(47, 26, 29, .42));
  pointer-events: none
}

.jch-hero-small {
  width: 170px;
  height: 206px;
  padding: 8px;
  background: #f8f3e9;
  box-shadow: 0 13px 34px rgba(68, 37, 38, .18);
  position: absolute;
  bottom: 5px;
  left: 1px;
  transform: rotate(-9deg);
  z-index: 5
}

.jch-hero-small>.jch-photo {
  height: 167px;
  background: linear-gradient(150deg, #66828c, #b9a9a2)
}

.jch-hero-small>span {
  font: 700 8px var(--alt);
  letter-spacing: 1.6px;
  text-align: center;
  display: block;
  padding: 6px 0;
  color: var(--maroon)
}

.jch-hero-seal {
  position: absolute;
  right: -16px;
  top: 88px;
  height: 122px;
  width: 122px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff5e4;
  border: 5px double #e4bda3;
  box-shadow: 0 12px 30px rgba(42, 19, 19, .23);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(12deg)
}

.jch-hero-seal>span {
  color: #d9aa82;
  font-size: 21px;
  line-height: 1
}

.jch-hero-seal strong {
  font: 500 16px var(--serif);
  line-height: 1.15
}

.jch-hero-seal small {
  font: 700 7px var(--alt);
  letter-spacing: .8px;
  margin-top: 6px
}

.jch-hero-vertical {
  position: absolute;
  right: -10px;
  bottom: 135px;
  writing-mode: vertical-rl;
  color: #ab9489;
  font: 700 9px var(--alt);
  letter-spacing: 2px
}

.jch-hero-bottom {
  border-top: 1px solid #e0d0bf;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a38a7c;
  font: 700 9px var(--alt);
  letter-spacing: 1.8px
}

.jch-hero-bottom>span:nth-child(2) {
  font-size: 22px;
  color: var(--gold)
}

/* 02 / Prologue */
.jch-prologue-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jch-kicker {
  color: var(--terracotta);
  font: 700 10px var(--alt);
  letter-spacing: 2.3px
}

.jch-prologue h2 {
  color: var(--maroon);
  font-size: 48px;
  letter-spacing: -1.8px;
  line-height: 1.32;
  margin: 22px 0 18px
}

.jch-prologue h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-prologue p {
  max-width: 690px;
  margin: 0 0 27px
}

.jch-prologue-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  max-width: 770px;
  padding: 17px 0;
  border-top: 1px solid #ddc8b6;
  border-bottom: 1px solid #ddc8b6
}

.jch-prologue-links a {
  flex: 1 1 150px;
  min-width: 0;
  color: var(--maroon);
  font: 700 10px var(--alt);
  letter-spacing: 1px;
  padding: 7px 4px;
  border-right: 1px solid #dfcbbb;
  transition: color 260ms
}

.jch-prologue-links a:last-child {
  border: 0
}

.jch-prologue-links a:hover {
  color: var(--terracotta)
}

/* 03 / Blue pottery editorial feature */
.jch-craft-story-layout {
  display: flex;
  min-height: 635px;
  align-items: stretch
}

.jch-story-image {
  position: relative;
  flex: 1.02 1 0;
  min-width: 0;
  background: #9f8b82;
  padding: 20px 0 20px 23px
}

.jch-story-image:before {
  content: "";
  position: absolute;
  inset: 5px 17px 5px 8px;
  border: 1px solid #bf8e7d;
  z-index: 3;
  pointer-events: none
}

.jch-story-image>.jch-photo {
  height: 100%;
  min-height: 575px;
  background: linear-gradient(135deg, #b7cdd1, #386578)
}

.jch-story-image>.jch-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(36, 30, 35, .6));
  z-index: 3;
  pointer-events: none
}

.jch-story-image-number {
  position: absolute;
  z-index: 5;
  left: 48px;
  bottom: 51px;
  color: white;
  font: 500 52px var(--serif);
  line-height: 1
}

.jch-story-image-number small {
  font: 700 10px var(--alt);
  letter-spacing: 1.4px
}

.jch-story-side-label {
  position: absolute;
  z-index: 4;
  left: 52px;
  top: 43px;
  color: white;
  font: 700 9px var(--alt);
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  text-shadow: 0 2px 5px #463334
}

.jch-story-copy {
  flex: 1 1 0;
  padding: 65px 62px 50px;
  background: var(--maroon);
  position: relative;
  color: #fff3e7;
  overflow: hidden
}

.jch-story-copy>*:not(.jch-story-etch) {
  position: relative;
  z-index: 2
}

.jch-story-copy h2 {
  font-size: 62px;
  line-height: 1.17;
  letter-spacing: -2.3px;
  color: #fff3e7;
  margin: 24px 0 27px
}

.jch-story-copy h2 em {
  color: #e4b798;
  font-weight: 400
}

.jch-story-copy p {
  color: #e8cec0;
  max-width: 460px
}

.jch-story-highlights {
  border-top: 1px solid #ffffff30;
  border-bottom: 1px solid #ffffff30;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 0;
  margin: 24px 0 23px
}

.jch-story-highlights div {
  display: flex;
  align-items: baseline;
  gap: 16px
}

.jch-story-highlights span {
  color: #e2a984;
  min-width: 100px;
  font: 700 9px var(--alt);
  letter-spacing: 1.4px
}

.jch-story-highlights strong {
  color: #f1d9cb;
  font-size: 12px;
  font-weight: 400
}

.jch-story-etch {
  position: absolute;
  right: -152px;
  bottom: -154px;
  color: #ffffff0a;
  width: 420px;
  height: 420px;
  pointer-events: none;
  transform: rotate(12deg)
}

.jch-story-etch svg {
  width: 100%;
  height: 100%
}

/* 04 / Living crafts interactive editorial atlas */
.jch-crafts {
  position: relative
}

.jch-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 38px;
  margin-bottom: 30px
}

.jch-section-heading>div {
  flex: 1 1 58%;
  min-width: 0
}

.jch-section-heading>p {
  flex: 1 1 30%;
  max-width: 380px;
  margin: 0 0 5px
}

.jch-section-heading h2 {
  font-size: 56px;
  line-height: 1.22;
  letter-spacing: -2.1px;
  color: var(--maroon);
  margin: 12px 0 0
}

.jch-section-heading h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-craft-showcase {
  display: flex;
  border: 1px solid #e0cbb8;
  position: relative;
  z-index: 2;
  min-height: 474px;
  background: #fcf7ee
}

.jch-craft-tabs {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #dfcbb8
}

.jch-craft-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e4d5c6;
  cursor: pointer;
  text-align: left;
  padding: 23px 19px 23px 25px;
  color: var(--maroon);
  position: relative;
  transition: background 270ms, padding 270ms
}

.jch-craft-tab:last-child {
  border-bottom: 0
}

.jch-craft-tab:hover {
  background: #f4e7d8
}

.jch-craft-tab.is-active {
  background: var(--maroon);
  color: #fff4e5;
  padding-left: 34px
}

.jch-craft-tab small {
  position: absolute;
  top: 14px;
  left: 25px;
  font: 700 8px var(--alt);
  letter-spacing: 1.1px;
  color: #a47b67
}

.jch-craft-tab.is-active small {
  left: 34px;
  color: #d7a88a
}

.jch-craft-tab span {
  display: block;
  font: 500 22px var(--serif);
  line-height: 1.3;
  margin-top: 13px;
  flex: 1 1 0
}

.jch-craft-tab span em {
  font-weight: 400;
  color: var(--terracotta)
}

.jch-craft-tab.is-active span em {
  color: #edb697
}

.jch-craft-tab>b {
  font: 400 24px var(--sans);
  color: #b68871
}

.jch-craft-tab.is-active>b {
  color: #e7b695
}

.jch-craft-panels {
  flex: 1 1 0;
  min-width: 0
}

.jch-craft-panel {
  height: 100%;
  display: flex;
  align-items: stretch;
  min-height: 472px;
  animation: jch-panel-appear 460ms both
}

@keyframes jch-panel-appear {
  from {
    opacity: .35;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.jch-panel-photo {
  width: 45%;
  flex: 0 0 45%;
  min-width: 0;
  padding: 13px 0 13px 13px
}

.jch-panel-photo>.jch-photo {
  min-height: 445px;
  background: linear-gradient(140deg, #bf9e85, #6b5960)
}

.jch-panel-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 30px 32px 28px
}

.jch-panel-info>span {
  color: var(--terracotta);
  font: 700 9px var(--alt);
  letter-spacing: 1.5px
}

.jch-panel-info h3 {
  font-size: 32px;
  color: var(--maroon);
  line-height: 1.25;
  letter-spacing: -.8px;
  margin: 15px 0 16px
}

.jch-panel-info h3 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-panel-info p {
  font-size: 12px;
  line-height: 1.95
}

.jch-panel-info small {
  font: 700 9px var(--alt);
  color: #b58d73;
  letter-spacing: 1.25px;
  margin-top: 16px
}

.jch-craft-footnote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 18px 0;
  color: #ac8976;
  font: 700 9px var(--alt);
  letter-spacing: 1.4px
}

.jch-craft-etch {
  position: absolute;
  right: -115px;
  bottom: -180px;
  width: 330px;
  height: 330px;
  color: rgba(153, 89, 67, .055);
  transform: rotate(13deg);
  pointer-events: none
}

.jch-craft-etch svg {
  width: 100%;
  height: 100%
}

/* 05 / Puppetry */
.jch-people-layout {
  display: flex;
  align-items: center;
  gap: 76px;
  min-height: 570px
}

.jch-people-copy {
  flex: 1 1 48%;
  min-width: 0
}

.jch-people-copy h2 {
  font-size: 56px;
  line-height: 1.25;
  color: var(--maroon);
  letter-spacing: -2px;
  margin: 18px 0 20px
}

.jch-people-copy h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-people-copy>p {
  max-width: 530px;
  margin-bottom: 27px
}

.jch-people-note {
  border-top: 1px solid #dbc7b5;
  display: flex;
  gap: 21px;
  padding: 17px 0 11px
}

.jch-people-note>span {
  font: 500 25px var(--serif);
  color: var(--terracotta);
  line-height: 1
}

.jch-people-note strong {
  font: 700 10px var(--alt);
  letter-spacing: 1.4px;
  color: var(--maroon)
}

.jch-people-note p {
  font-size: 12px;
  line-height: 1.8;
  margin: 8px 0 0
}

.jch-people-art {
  flex: 1 1 52%;
  min-width: 0;
  position: relative;
  padding: 23px 0 50px 28px
}

.jch-people-art:before {
  position: absolute;
  content: "";
  inset: 7px 17px 65px 9px;
  border: 1px solid #c8957c;
  pointer-events: none
}

.jch-puppet-photo {
  height: 485px;
  position: relative
}

.jch-puppet-photo>.jch-photo {
  background: linear-gradient(145deg, #c35c63, #7e4a55)
}

.jch-people-caption {
  position: absolute;
  bottom: 15px;
  right: 5px;
  background: #fff9ec;
  padding: 18px 27px;
  box-shadow: 0 9px 24px #422b2c13;
  z-index: 2;
  text-align: center
}

.jch-people-caption b {
  display: block;
  color: var(--maroon);
  font: 500 21px var(--serif)
}

.jch-people-caption span {
  display: block;
  font: 700 8px var(--alt);
  letter-spacing: 1.1px;
  color: #a47d6e
}

.jch-people-engraving {
  position: absolute;
  bottom: -5px;
  left: -101px;
  width: 195px;
  height: 205px;
  color: rgba(167, 77, 63, .13);
  transform: rotate(-6deg);
  pointer-events: none
}

.jch-people-engraving svg {
  width: 100%;
  height: 100%
}

/* 06 / Festivals */
.jch-festivals {
  background: var(--maroon);
  padding: 52px 0 35px;
  position: relative
}

.jch-festival-heading {
  display: flex;
  align-items: flex-end;
  gap: 50px;
  justify-content: space-between;
  margin-bottom: 31px
}

.jch-festival-heading>div {
  flex: 1 1 60%
}

.jch-festival-heading>p {
  flex: 1 1 34%;
  max-width: 370px;
  margin: 0 0 6px;
  color: #e2c5b6
}

.jch-festival-heading h2 {
  color: #fff3e5;
  font-size: 53px;
  line-height: 1.24;
  letter-spacing: -1.7px;
  margin: 12px 0 0
}

.jch-festival-heading h2 em {
  font-weight: 400;
  color: #dfad8f
}

.jch-festival-cards {
  display: flex;
  gap: 18px
}

.jch-festival-card {
  flex: 1 1 0;
  min-width: 0;
  height: 405px;
  position: relative;
  overflow: hidden;
  padding: 23px 22px 22px;
  border: 1px solid #d4a18445;
  background: #89515a;
  color: #fff7e9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 300ms, border-color 300ms
}

.jch-festival-card:hover {
  transform: translateY(-7px);
  border-color: #e9bd98
}

.jch-festival-card--one {
  background: linear-gradient(160deg, #a65b58, #633342)
}

.jch-festival-card--two {
  background: linear-gradient(160deg, #ad7b5d, #744343)
}

.jch-festival-card--three {
  background: linear-gradient(160deg, #86705b, #4f5048)
}

.jch-festival-icon {
  position: absolute;
  inset: 48px 0 auto;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 230px;
  color: rgba(255, 239, 220, .23);
  transition: transform 600ms
}

.jch-festival-card:hover .jch-festival-icon {
  transform: scale(1.08) rotate(-3deg)
}

.jch-festival-icon svg {
  width: 78%;
  height: 100%
}

.jch-festival-upper,
.jch-festival-info {
  position: relative;
  z-index: 1
}

.jch-festival-upper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px
}

.jch-festival-upper span {
  font: 500 31px var(--serif)
}

.jch-festival-upper small {
  font: 700 9px var(--alt);
  letter-spacing: 1.15px;
  color: #ffdfbf;
  text-align: right
}

.jch-festival-info>b {
  display: block;
  font: 700 9px var(--alt);
  letter-spacing: 1.3px;
  color: #f1bd95
}

.jch-festival-info h3 {
  font: 500 34px var(--serif);
  margin: 10px 0 8px;
  color: #fff5e8
}

.jch-festival-info p {
  font-size: 12px;
  line-height: 1.75;
  margin: 0;
  color: #f5ded2
}

.jch-festivals-note {
  color: #d3aa96 !important;
  font-size: 10px !important;
  margin: 17px 0 0 !important;
  text-align: right
}

/* 07 / Bazaar */
.jch-bazaar-layout {
  display: flex;
  align-items: center;
  gap: 76px;
  min-height: 650px
}

.jch-bazaar-main {
  flex: 1.08 1 0;
  min-width: 0;
  position: relative;
  padding: 19px 25px 19px 19px
}

.jch-bazaar-main:before {
  position: absolute;
  content: "";
  inset: 4px 10px 4px 4px;
  border: 1px solid #c38b72;
  pointer-events: none
}

.jch-bazaar-photo {
  height: 574px
}

.jch-bazaar-photo .jch-photo {
  background: linear-gradient(145deg, #da987b, #925a57)
}

.jch-bazaar-stamp {
  width: 107px;
  height: 107px;
  background: var(--maroon);
  border: 4px double #efd4b9;
  color: #fff4df;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 2px;
  transform: rotate(12deg);
  z-index: 4;
  font: 700 11px var(--alt);
  letter-spacing: 1px
}

.jch-bazaar-stamp b {
  font: 500 32px var(--serif);
  line-height: 1.2
}

.jch-bazaar-stamp span {
  font: 700 8px var(--alt);
  letter-spacing: 1px
}

.jch-bazaar-copy {
  flex: .92 1 0;
  min-width: 0
}

.jch-bazaar-copy h2 {
  font-size: 56px;
  line-height: 1.19;
  color: var(--maroon);
  letter-spacing: -1.9px;
  margin: 20px 0 22px
}

.jch-bazaar-copy h2 em {
  font-weight: 400;
  color: var(--terracotta)
}

.jch-bazaar-copy>p {
  max-width: 490px
}

.jch-bazaar-list {
  border-top: 1px solid #e0cdb9;
  margin: 22px 0 26px
}

.jch-bazaar-list>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e0cdb9;
  padding: 15px 0
}

.jch-bazaar-list strong {
  font: 500 20px var(--serif);
  color: var(--maroon)
}

.jch-bazaar-list span {
  font: 600 10px var(--alt);
  color: #987b6c;
  text-align: right
}

/* 08 / Architectural decoration */
.jch-design {
  padding: 49px 0;
  background: #f0e4d6
}

.jch-design-layout {
  display: flex;
  align-items: center;
  gap: 62px
}

.jch-design-copy {
  flex: 1 1 52%;
  min-width: 0
}

.jch-design-copy h2 {
  font-size: 55px;
  color: var(--maroon);
  letter-spacing: -1.8px;
  line-height: 1.25;
  margin: 19px 0 21px
}

.jch-design-copy h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-design-copy>p {
  max-width: 515px
}

.jch-design-ruler {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 26px 0;
  color: var(--terracotta);
  font: 700 9px var(--alt);
  letter-spacing: 1.3px
}

.jch-design-ruler span {
  border: 1px solid #c9ad9a;
  padding: 9px 10px
}

.jch-design-visual {
  flex: 1 1 48%;
  min-width: 0;
  position: relative;
  padding: 21px 0 26px 23px
}

.jch-design-visual:before {
  position: absolute;
  content: "";
  inset: 7px 12px 30px 8px;
  border: 1px solid #a96d5f;
  pointer-events: none
}

.jch-design-photo {
  height: 440px;
  position: relative
}

.jch-design-photo>.jch-photo {
  background: linear-gradient(120deg, #d89480, #874d53)
}

.jch-design-lines {
  position: absolute;
  right: -40px;
  bottom: -18px;
  width: 190px;
  height: 200px;
  color: #a7706755;
  pointer-events: none
}

.jch-design-lines svg {
  width: 100%;
  height: 100%
}

.jch-design-visual>span {
  font: 700 9px var(--alt);
  letter-spacing: 1.4px;
  color: #98796a;
  position: absolute;
  bottom: 1px;
  left: 23px
}

/* 09 / Visit note */
.jch-visit-wrap {
  display: flex;
  align-items: start;
  gap: 90px
}

.jch-visit-intro {
  flex: 1 1 48%;
  min-width: 0
}

.jch-visit-intro h2 {
  font-size: 54px;
  line-height: 1.23;
  color: var(--maroon);
  letter-spacing: -2px;
  margin: 15px 0 20px
}

.jch-visit-intro h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jch-visit-intro>p {
  max-width: 445px
}

.jch-visit-list {
  flex: 1 1 52%;
  min-width: 0;
  border-top: 1px solid #d9c4af
}

.jch-visit-list>div {
  display: flex;
  align-items: baseline;
  gap: 19px;
  padding: 19px 0;
  border-bottom: 1px solid #d9c4af
}

.jch-visit-list span {
  color: var(--terracotta);
  font: 500 26px var(--serif)
}

.jch-visit-list p {
  margin: 0;
  font-size: 12px
}

.jch-visit-list strong {
  color: var(--maroon)
}

/* 10 / Final invitation */
.jch-final {
  background: var(--maroon);
  color: #fff2e4;
  padding: 57px 0 0;
  text-align: center;
  position: relative
}

.jch-final-layout {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative
}

.jch-final-symbol {
  font-size: 39px;
  line-height: 1;
  color: #d6ad86;
  margin: 0 0 15px
}

.jch-final h2 {
  color: #fff1e0;
  font-size: 65px;
  line-height: 1.16;
  letter-spacing: -2.6px;
  margin: 19px 0 19px
}

.jch-final h2 em {
  font-weight: 400;
  color: #deaf8e
}

.jch-final p {
  color: #e4c7b8;
  max-width: 555px
}

.jch-final-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0 47px
}

.jch-final-footer {
  min-height: 52px;
  width: 100%;
  border-top: 1px solid #ffffff27;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c39d8b;
  font: 700 9px var(--alt);
  letter-spacing: 1.7px
}

.jch-final-footer>span:nth-child(2) {
  font-size: 20px;
  color: #d1aa83
}

/* Responsive / no CSS Grid / no viewport units */
@media(max-width:1399px) {
  .jch-hero-copy h1 {
    font-size: 65px
  }

  .jch-hero-art {
    height: 600px
  }

  .jch-hero-large {
    height: 530px
  }

  .jch-story-copy {
    padding: 55px 49px 44px
  }

  .jch-story-copy h2 {
    font-size: 54px
  }

  .jch-people-layout,
  .jch-bazaar-layout {
    gap: 55px
  }

  .jch-people-copy h2,
  .jch-bazaar-copy h2 {
    font-size: 51px
  }

  .jch-panel-info h3 {
    font-size: 29px
  }
}

@media(max-width:1199px) {
  .jch-hero-layout {
    gap: 20px;
    min-height: 640px
  }

  .jch-hero-copy h1 {
    font-size: 57px;
    letter-spacing: -2.5px
  }

  .jch-hero-art {
    height: 560px;
    padding: 18px 22px 25px 33px
  }

  .jch-hero-art:before {
    left: 22px
  }

  .jch-hero-large {
    height: 490px
  }

  .jch-hero-small {
    width: 136px;
    height: 164px
  }

  .jch-hero-small>.jch-photo {
    height: 126px
  }

  .jch-hero-seal {
    right: 0;
    width: 104px;
    height: 104px
  }

  .jch-story-copy h2 {
    font-size: 48px
  }

  .jch-story-copy {
    padding: 47px 36px
  }

  .jch-story-image>.jch-photo {
    min-height: 550px
  }

  .jch-craft-tab {
    padding-left: 16px;
    padding-right: 13px
  }

  .jch-craft-tab small {
    left: 16px
  }

  .jch-craft-tab.is-active {
    padding-left: 20px
  }

  .jch-craft-tab.is-active small {
    left: 20px
  }

  .jch-craft-tab span {
    font-size: 18px
  }

  .jch-panel-info {
    padding: 24px 20px
  }

  .jch-panel-info h3 {
    font-size: 26px
  }

  .jch-people-layout,
  .jch-bazaar-layout {
    gap: 36px
  }

  .jch-people-copy h2,
  .jch-bazaar-copy h2 {
    font-size: 45px
  }

  .jch-design-layout {
    gap: 32px
  }

  .jch-design-copy h2,
  .jch-visit-intro h2 {
    font-size: 46px
  }

  .jch-visit-wrap {
    gap: 45px
  }
}

@media(max-width:991px) {
  .jch-hero-layout {
    flex-direction: column;
    min-height: 0;
    align-items: stretch;
    padding-top: 24px
  }

  .jch-hero-copy {
    padding-top: 0;
    flex: none
  }

  .jch-hero-copy h1 {
    font-size: 64px
  }

  .jch-hero-copy>p {
    max-width: 600px
  }

  .jch-hero-art {
    flex: none;
    height: 540px;
    max-width: 550px;
    width: 100%;
    align-self: center;
    margin-top: 12px
  }

  .jch-hero-large {
    height: 490px
  }

  .jch-hero-bottom {
    margin-top: 10px
  }

  .jch-prologue h2 {
    font-size: 41px
  }

  .jch-craft-story-layout {
    min-height: 0
  }

  .jch-story-copy h2 {
    font-size: 43px
  }

  .jch-story-copy {
    padding: 37px 28px
  }

  .jch-story-image>.jch-photo {
    min-height: 550px
  }

  .jch-section-heading h2 {
    font-size: 48px
  }

  .jch-craft-showcase {
    flex-direction: column
  }

  .jch-craft-tabs {
    flex: none;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid #dfcbb8
  }

  .jch-craft-tab {
    min-height: 100px;
    flex: 1 1 0;
    border-bottom: 0;
    border-right: 1px solid #e4d5c6;
    padding: 22px 12px 15px
  }

  .jch-craft-tab small {
    top: 10px;
    left: 12px;
    font-size: 7px
  }

  .jch-craft-tab.is-active {
    padding-left: 12px
  }

  .jch-craft-tab.is-active small {
    left: 12px
  }

  .jch-craft-tab span {
    font-size: 16px
  }

  .jch-craft-tab b {
    display: none
  }

  .jch-craft-panels {
    min-height: 390px
  }

  .jch-craft-panel {
    min-height: 390px
  }

  .jch-panel-photo>.jch-photo {
    min-height: 360px
  }

  .jch-panel-info h3 {
    font-size: 36px
  }

  .jch-people-layout {
    gap: 30px
  }

  .jch-people-copy h2 {
    font-size: 40px
  }

  .jch-puppet-photo {
    height: 450px
  }

  .jch-festival-heading h2 {
    font-size: 46px
  }

  .jch-festival-card {
    height: 400px;
    padding: 17px
  }

  .jch-festival-info h3 {
    font-size: 30px
  }

  .jch-bazaar-layout {
    gap: 30px
  }

  .jch-bazaar-photo {
    height: 510px
  }

  .jch-bazaar-copy h2 {
    font-size: 42px
  }

  .jch-bazaar-list>div {
    flex-direction: column;
    gap: 4px
  }

  .jch-bazaar-list span {
    text-align: left
  }

  .jch-design-copy h2,
  .jch-visit-intro h2 {
    font-size: 42px
  }
}

@media(max-width:767px) {
  .jch-page .jch-section {
    margin-top: 50px
  }

  .jch-hero-layout {
    padding-top: 15px
  }

  .jch-breadcrumb {
    margin-bottom: 27px
  }

  .jch-hero-copy h1 {
    font-size: 57px
  }

  .jch-hero-copy>p {
    font-size: 14px
  }

  .jch-hero-footnote {
    margin-top: 33px
  }

  .jch-hero-art {
    height: 460px;
    width: 100%;
    max-width: 475px;
    padding: 17px 16px 22px 32px
  }

  .jch-hero-art:before {
    inset: 5px 7px 40px 20px
  }

  .jch-hero-large {
    height: 407px
  }

  .jch-hero-seal {
    top: 60px;
    right: -10px
  }

  .jch-hero-vertical {
    right: -12px;
    bottom: 66px
  }

  .jch-hero-bottom {
    font-size: 8px
  }

  .jch-prologue h2 {
    font-size: 36px
  }

  .jch-prologue-links {
    gap: 0
  }

  .jch-prologue-links a {
    font-size: 9px
  }

  .jch-craft-story-layout {
    flex-direction: column
  }

  .jch-story-image {
    height: 430px;
    flex: none;
    padding: 17px 15px 0
  }

  .jch-story-image>.jch-photo {
    min-height: 0;
    height: 100%
  }

  .jch-story-image:before {
    inset: 7px 7px 7px 7px
  }

  .jch-story-copy {
    padding: 39px 34px 43px
  }

  .jch-story-copy h2 {
    font-size: 48px
  }

  .jch-section-heading {
    flex-direction: column;
    align-items: start;
    gap: 12px
  }

  .jch-section-heading h2 {
    font-size: 43px
  }

  .jch-section-heading>p {
    max-width: 600px
  }

  .jch-craft-tabs {
    flex-wrap: wrap
  }

  .jch-craft-tab {
    flex: 1 1 50%;
    min-height: 83px;
    border-bottom: 1px solid #e4d5c6
  }

  .jch-craft-tab span {
    font-size: 19px
  }

  .jch-craft-panel {
    flex-direction: column
  }

  .jch-panel-photo {
    padding: 12px 12px 0;
    width: 100%;
    flex: none;
    height: 250px
  }

  .jch-panel-photo>.jch-photo {
    min-height: 0
  }

  .jch-panel-info {
    padding: 26px 27px 30px
  }

  .jch-panel-info h3 {
    font-size: 35px
  }

  .jch-panel-info p {
    max-width: 510px
  }

  .jch-craft-footnote {
    flex-direction: column;
    align-items: start;
    font-size: 8px;
    gap: 7px
  }

  .jch-people-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 11px
  }

  .jch-people-copy h2 {
    font-size: 44px
  }

  .jch-people-art {
    align-self: center;
    max-width: 510px;
    width: 100%;
    padding: 12px 18px 35px
  }

  .jch-puppet-photo {
    height: 395px
  }

  .jch-people-art:before {
    inset: 4px 9px 50px 4px
  }

  .jch-people-caption {
    right: 3px
  }

  .jch-festival-heading {
    flex-direction: column;
    align-items: start;
    gap: 15px
  }

  .jch-festival-heading h2 {
    font-size: 42px
  }

  .jch-festival-cards {
    flex-wrap: wrap
  }

  .jch-festival-card {
    flex: 1 1 100%;
    height: 290px
  }

  .jch-festival-icon {
    height: 210px;
    inset: 20px 10px auto;
    justify-content: flex-end
  }

  .jch-festival-icon svg {
    width: 45%
  }

  .jch-festival-info p {
    max-width: 380px
  }

  .jch-bazaar-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 26px
  }

  .jch-bazaar-main {
    width: 100%;
    max-width: 570px;
    align-self: center
  }

  .jch-bazaar-photo {
    height: 420px
  }

  .jch-bazaar-copy h2 {
    font-size: 47px
  }

  .jch-bazaar-list>div {
    flex-direction: row
  }

  .jch-bazaar-list span {
    text-align: right
  }

  .jch-design-layout {
    flex-direction: column;
    align-items: stretch
  }

  .jch-design-copy h2 {
    font-size: 45px
  }

  .jch-design-visual {
    width: 100%;
    max-width: 550px;
    align-self: center
  }

  .jch-design-photo {
    height: 375px
  }

  .jch-visit-wrap {
    flex-direction: column;
    gap: 16px
  }

  .jch-visit-intro h2 {
    font-size: 46px
  }

  .jch-visit-list {
    width: 100%
  }

  .jch-final h2 {
    font-size: 52px
  }
}

@media(max-width:575px) {
  .jch-hero-copy h1 {
    font-size: 49px;
    letter-spacing: -2px
  }

  .jch-hero-art {
    height: 388px;
    padding-left: 30px
  }

  .jch-hero-large {
    height: 342px
  }

  .jch-hero-art:before {
    inset: 5px 9px 38px 19px
  }

  .jch-hero-small {
    width: 113px;
    height: 141px;
    padding: 6px
  }

  .jch-hero-small>.jch-photo {
    height: 110px
  }

  .jch-hero-small>span {
    font-size: 6px
  }

  .jch-hero-seal {
    width: 85px;
    height: 85px;
    top: 42px;
    right: -5px;
    border-width: 3px
  }

  .jch-hero-seal strong {
    font-size: 12px
  }

  .jch-hero-seal small {
    font-size: 6px
  }

  .jch-hero-seal>span {
    font-size: 15px
  }

  .jch-hero-vertical {
    display: none
  }

  .jch-hero-bottom {
    gap: 6px;
    letter-spacing: .65px
  }

  .jch-hero-bottom span:last-child {
    text-align: right
  }

  .jch-prologue h2 {
    font-size: 30px;
    letter-spacing: -.8px
  }

  .jch-prologue-links a {
    flex: 1 1 100%;
    border: 0;
    border-bottom: 1px solid #e5d3c1
  }

  .jch-prologue-links a:last-child {
    border: 0
  }

  .jch-story-image {
    height: 355px
  }

  .jch-story-copy {
    padding: 31px 23px 34px
  }

  .jch-story-copy h2 {
    font-size: 45px
  }

  .jch-story-highlights div {
    flex-direction: column;
    gap: 5px
  }

  .jch-section-heading h2 {
    font-size: 42px
  }

  .jch-craft-tab span {
    font-size: 16px
  }

  .jch-craft-tab {
    padding: 21px 7px 10px
  }

  .jch-craft-tab small {
    left: 8px;
    letter-spacing: .45px;
    font-size: 7px
  }

  .jch-craft-tab.is-active {
    padding-left: 8px
  }

  .jch-craft-tab.is-active small {
    left: 8px
  }

  .jch-panel-photo {
    height: 225px
  }

  .jch-panel-info h3 {
    font-size: 29px
  }

  .jch-people-copy h2 {
    font-size: 41px
  }

  .jch-people-art {
    padding-left: 12px
  }

  .jch-puppet-photo {
    height: 350px
  }

  .jch-people-caption {
    padding: 13px 16px
  }

  .jch-people-caption b {
    font-size: 18px
  }

  .jch-people-caption span {
    font-size: 7px
  }

  .jch-festival-heading h2 {
    font-size: 37px
  }

  .jch-festival-card {
    height: 310px
  }

  .jch-festival-upper small {
    max-width: 180px
  }

  .jch-bazaar-photo {
    height: 345px
  }

  .jch-bazaar-stamp {
    width: 88px;
    height: 88px
  }

  .jch-bazaar-stamp b {
    font-size: 24px
  }

  .jch-bazaar-copy h2 {
    font-size: 43px
  }

  .jch-bazaar-list>div {
    flex-direction: column
  }

  .jch-bazaar-list span {
    text-align: left
  }

  .jch-design-copy h2 {
    font-size: 40px
  }

  .jch-design-photo {
    height: 320px
  }

  .jch-design-lines {
    width: 133px;
    height: 155px;
    right: -28px
  }

  .jch-visit-intro h2 {
    font-size: 41px
  }

  .jch-final h2 {
    font-size: 45px
  }

  .jch-final-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch
  }

  .jch-final-actions .jch-btn {
    width: 100%
  }

  .jch-final-footer {
    gap: 10px;
    font-size: 7px;
    letter-spacing: 1px
  }
}

@media(max-width:380px) {
  .jch-hero-copy h1 {
    font-size: 43px
  }

  .jch-hero-script {
    font-size: 16px
  }

  .jch-hero-art {
    height: 334px
  }

  .jch-hero-large {
    height: 292px
  }

  .jch-hero-small {
    width: 101px;
    height: 123px
  }

  .jch-hero-small>.jch-photo {
    height: 94px
  }

  .jch-hero-footnote {
    letter-spacing: 1px
  }

  .jch-story-copy h2 {
    font-size: 39px
  }

  .jch-section-heading h2 {
    font-size: 37px
  }

  .jch-craft-tab span {
    font-size: 14px
  }

  .jch-panel-info h3 {
    font-size: 26px
  }

  .jch-people-copy h2 {
    font-size: 35px
  }

  .jch-festival-heading h2 {
    font-size: 33px
  }

  .jch-bazaar-copy h2 {
    font-size: 38px
  }

  .jch-design-copy h2 {
    font-size: 37px
  }

  .jch-visit-intro h2 {
    font-size: 36px
  }

  .jch-final h2 {
    font-size: 40px
  }
}

@media(prefers-reduced-motion:reduce) {

  .jch-page *,
  .jch-page *::before,
  .jch-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

/* JAIPUR HERITAGE TOUR — FOOD & FLAVOURS
   Scoped page components: jff- prefix only. Shared site header/footer come from style.css.
   px-based spacing/sizing, fluid percentages, Flexbox; no CSS Grid, rem, vw, vh, clamp.
*/
.jff-page {
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden
}

.jff-page .jff-section {
  margin-top: 50px
}

.jff-page p {
  color: var(--body);
  font-size: 14px;
  line-height: 1.95
}

.jff-page h1,
.jff-page h2,
.jff-page h3 {
  font-family: var(--serif);
  font-weight: 500
}

.jff-page a {
  text-decoration: none
}

.jff-page [hidden] {
  display: none !important
}

.jff-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 10px var(--alt);
  letter-spacing: 2.1px;
  color: var(--terracotta);
  line-height: 1.5
}

.jff-eyebrow--light {
  color: #e0b595
}

.jff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 55px;
  padding: 7px 7px 7px 23px;
  font: 600 12px var(--alt);
  border: 1px solid transparent;
  transition: background 250ms, transform 250ms, color 250ms;
  white-space: nowrap
}

.jff-btn span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 39px;
  height: 39px;
  font: 400 23px var(--sans);
  background: #ffffff25
}

.jff-btn:hover {
  transform: translateY(-3px)
}

.jff-btn--dark {
  background: var(--maroon);
  color: #fff9ed
}

.jff-btn--dark:hover {
  background: var(--terracotta);
  color: white
}

.jff-btn--cream {
  background: #fff2e3;
  color: var(--maroon)
}

.jff-btn--cream:hover {
  background: #fffaf3;
  color: var(--maroon)
}

.jff-btn--cream span {
  background: #e8daca
}

.jff-btn--outline {
  border-color: #d1aa90;
  background: transparent;
  color: #fff4e9
}

.jff-btn--outline:hover {
  background: #ffffff16;
  color: white
}

.jff-line-link {
  min-width: 230px;
  display: inline-flex;
  justify-content: space-between;
  gap: 35px;
  border-bottom: 1px solid #aa725d;
  padding-bottom: 12px;
  color: var(--maroon);
  font: 700 12px var(--alt);
  transition: color 250ms
}

.jff-line-link span {
  font: 400 22px var(--sans);
  line-height: 1;
  color: var(--terracotta)
}

.jff-line-link:hover {
  color: var(--terracotta)
}

.jff-line-link--light {
  color: #fff0df;
  border-color: #bd917c
}

.jff-line-link--light span {
  color: #e6b69c
}

.jff-line-link--light:hover {
  color: #f4c7a9
}

.jff-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #bc8d72, #634746);
  isolation: isolate
}

.jff-photo>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: transform 750ms cubic-bezier(.23, .69, .32, 1)
}

.jff-photo:hover>img {
  transform: scale(1.06)
}

.jff-photo-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 22px;
  color: #ecd3bd;
  background: radial-gradient(circle at 28% 14%, #ffffff28, transparent 52%), repeating-linear-gradient(48deg, transparent 0px, transparent 27px, #ffffff08 28px, #ffffff08 29px)
}

.jff-photo-base svg {
  width: 75%;
  height: 74%;
  max-width: 310px;
  max-height: 310px;
  color: #fae6ce74;
  flex-shrink: 1
}

.jff-photo-base span {
  font: 700 9px var(--alt);
  letter-spacing: 1.6px;
  text-align: center;
  color: #f2dece
}

/* HERO */
.jff-hero {
  position: relative;
  padding-top: 20px;
  background: radial-gradient(circle at 13% 6%, #fffdf8, transparent 53%), #f8f3e9
}

.jff-hero-etch {
  position: absolute;
  width: 440px;
  height: 440px;
  left: -215px;
  top: 151px;
  color: #b16e5440;
  opacity: .33;
  transform: rotate(-17deg);
  pointer-events: none
}

.jff-hero-etch svg {
  width: 100%;
  height: 100%
}

.jff-hero-shell {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 700px
}

.jff-hero-copy {
  flex: 1.03 1 0;
  min-width: 0;
  position: relative;
  z-index: 5;
  padding-bottom: 18px
}

.jff-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 39px;
  font: 700 10px var(--alt);
  letter-spacing: 1.5px;
  color: #9d887e
}

.jff-crumb span {
  color: var(--gold)
}

.jff-crumb strong {
  color: var(--terracotta);
  font-weight: 700
}

.jff-crumb a:hover {
  color: var(--terracotta)
}

.jff-hero-copy h1 {
  color: var(--maroon);
  font-size: 76px;
  letter-spacing: -3.5px;
  line-height: 1.12;
  margin: 20px 0 24px
}

.jff-hero-copy h1 em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-hero-copy h1>span {
  color: #a9864e
}

.jff-hero-copy>p {
  font-size: 15px;
  line-height: 1.95;
  max-width: 535px;
  margin-bottom: 27px
}

.jff-hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap
}

.jff-handwritten {
  color: #a16a56;
  font: italic 18px var(--serif)
}

.jff-hero-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 51px
}

.jff-hero-foot>span {
  color: var(--terracotta);
  font: 500 23px var(--serif)
}

.jff-hero-foot i {
  color: #b8a596;
  font-style: normal
}

.jff-hero-foot>b {
  height: 1px;
  width: 70px;
  background: #decbbd
}

.jff-hero-foot small {
  color: #a28a78;
  font: 700 9px var(--alt);
  letter-spacing: 1.8px
}

.jff-hero-visual {
  flex: .97 1 0;
  min-width: 0;
  height: 635px;
  position: relative;
  padding: 16px 25px 28px 49px
}

.jff-hero-visual:before {
  content: "";
  position: absolute;
  inset: 1px 12px 55px 32px;
  border: 1px solid #c99c82;
  border-radius: 320px 320px 0 0
}

.jff-hero-arch {
  height: 555px;
  border-radius: 320px 320px 0 0;
  overflow: hidden
}

.jff-photo--hero {
  background: linear-gradient(140deg, #ab745f, #6e4744)
}

.jff-photo--hero:after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 3;
  background: linear-gradient(0deg, #3c282578, transparent 48%);
  pointer-events: none
}

.jff-hero-polaroid {
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 177px;
  height: 215px;
  padding: 8px 8px 6px;
  z-index: 5;
  background: #faf4e9;
  box-shadow: 0 18px 40px #553d3250;
  transform: rotate(-9deg)
}

.jff-hero-polaroid .jff-photo {
  height: 174px
}

.jff-hero-polaroid small {
  display: block;
  text-align: center;
  font: 700 8px var(--alt);
  color: var(--maroon);
  letter-spacing: 1.1px;
  padding-top: 7px
}

.jff-hero-medallion {
  position: absolute;
  right: -14px;
  top: 79px;
  width: 121px;
  height: 121px;
  border: 5px double #deb89b;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transform: rotate(13deg);
  background: var(--maroon);
  color: #fff5e5;
  box-shadow: 0 11px 23px #43313036;
  text-align: center
}

.jff-hero-medallion>span {
  color: #d5a87b;
  font-size: 22px;
  line-height: 1
}

.jff-hero-medallion b {
  font: 500 17px var(--serif);
  line-height: 1.15
}

.jff-hero-medallion small {
  font: 700 6px var(--alt);
  letter-spacing: .8px;
  margin-top: 6px
}

.jff-hero-vertical {
  position: absolute;
  right: -5px;
  bottom: 145px;
  writing-mode: vertical-rl;
  font: 700 9px var(--alt);
  color: #a08c7b;
  letter-spacing: 1.5px
}

.jff-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  border-top: 1px solid #e4d2c1;
  color: #a08977;
  font: 700 9px var(--alt);
  letter-spacing: 1.7px
}

.jff-hero-bottom span:nth-child(2) {
  color: var(--gold);
  font-size: 22px
}

/* OPENING */
.jff-opening-layout {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jff-opening h2 {
  font-size: 51px;
  line-height: 1.25;
  letter-spacing: -1.7px;
  color: var(--maroon);
  margin: 19px 0 18px
}

.jff-opening h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-opening p {
  max-width: 710px;
  margin: 0 0 27px
}

.jff-opening-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  width: 100%;
  border-top: 1px solid #d9c6b3;
  border-bottom: 1px solid #d9c6b3;
  padding: 10px 0
}

.jff-opening-nav a {
  flex: 1 1 160px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  padding: 13px 8px;
  border-right: 1px solid #dfccba;
  color: var(--maroon);
  font: 700 10px var(--alt);
  letter-spacing: .9px;
  white-space: nowrap;
  transition: color 250ms
}

.jff-opening-nav a:last-child {
  border-right: 0
}

.jff-opening-nav a span {
  color: var(--terracotta);
  font: 400 17px var(--sans)
}

.jff-opening-nav a:hover {
  color: var(--terracotta)
}

/* THALI */
.jff-thali-layout {
  display: flex;
  align-items: stretch;
  min-height: 670px
}

.jff-thali-image {
  position: relative;
  flex: 1.05 1 0;
  min-width: 0;
  padding: 17px 0 18px 19px;
  background: #aa8270
}

.jff-thali-image:before {
  content: "";
  position: absolute;
  inset: 6px 13px 6px 6px;
  border: 1px solid #f0d6bc77;
  pointer-events: none;
  z-index: 3
}

.jff-photo--thali {
  min-height: 620px
}

.jff-thali-image .jff-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(transparent 45%, #2d1d1a70)
}

.jff-thali-rail {
  position: absolute;
  left: 37px;
  top: 39px;
  writing-mode: vertical-rl;
  color: #fff4dc;
  font: 700 9px var(--alt);
  letter-spacing: 2px;
  z-index: 5;
  text-shadow: 0 2px 6px #311d17
}

.jff-thali-number {
  position: absolute;
  bottom: 45px;
  left: 55px;
  font: 500 61px var(--serif);
  color: #fff9ed;
  z-index: 4
}

.jff-thali-number small {
  font: 700 10px var(--alt);
  letter-spacing: 1.2px
}

.jff-thali-copy {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  background: var(--maroon);
  color: #fff7e9;
  padding: 64px 60px 53px
}

.jff-thali-copy>*:not(.jff-thali-line) {
  position: relative;
  z-index: 2
}

.jff-thali-copy h2 {
  font-size: 65px;
  line-height: 1.17;
  letter-spacing: -2px;
  color: #fff2e7;
  margin: 23px 0 20px
}

.jff-thali-copy h2 em {
  color: #dfb08f;
  font-weight: 400
}

.jff-thali-copy>p {
  color: #e4c7b8;
  max-width: 490px;
  margin-bottom: 20px
}

.jff-thali-line {
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 430px;
  height: 430px;
  color: #f9e8d312;
  pointer-events: none
}

.jff-thali-line svg {
  height: 100%;
  width: 100%
}

.jff-thali-points {
  border-top: 1px solid #ffffff28;
  border-bottom: 1px solid #ffffff28;
  margin: 19px 0 22px;
  padding: 15px 0
}

.jff-thali-points>div {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 7px 0
}

.jff-thali-points b {
  font: 400 23px var(--serif);
  color: #d7aa90;
  min-width: 25px
}

.jff-thali-points span {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.jff-thali-points strong {
  color: #fff2e1;
  font: 500 18px var(--serif)
}

.jff-thali-points small {
  font: 400 12px var(--sans);
  color: #dec2b5
}

/* DISHES */
.jff-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px
}

.jff-heading-row>div {
  flex: 1 1 58%
}

.jff-heading-row>p {
  flex: 1 1 33%;
  max-width: 405px;
  margin-bottom: 4px
}

.jff-heading-row h2 {
  font-size: 57px;
  color: var(--maroon);
  letter-spacing: -2px;
  line-height: 1.2;
  margin: 15px 0 0
}

.jff-heading-row h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #dac6b6;
  border-bottom: 1px solid #dac6b6;
  padding: 15px 0;
  margin-bottom: 23px
}

.jff-filter {
  background: transparent;
  border: 1px solid #dfcbb8;
  padding: 11px 16px;
  color: var(--maroon);
  font: 600 11px var(--alt);
  cursor: pointer;
  display: flex;
  gap: 13px;
  align-items: center;
  transition: background 220ms, color 220ms, border-color 220ms
}

.jff-filter b {
  font: 700 9px var(--alt);
  opacity: .65
}

.jff-filter:hover {
  border-color: var(--terracotta)
}

.jff-filter.is-active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff6ec
}

.jff-dish-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 23px;
  row-gap: 34px
}

.jff-dish {
  flex: 0 0 calc((100% - 46px)/3);
  min-width: 0;
  position: relative
}

.jff-dish-image {
  height: 275px;
  position: relative;
  background: #aa8c70;
  overflow: hidden
}

.jff-photo--dish {
  background: linear-gradient(140deg, #b88e6b, #795347)
}

.jff-dish-index {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 3;
  padding: 8px 10px;
  background: #f7eee5;
  color: var(--maroon);
  font: 700 9px var(--alt);
  letter-spacing: 1px
}

.jff-dish-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid #e0cdbb;
  padding: 14px 0 8px;
  margin-bottom: 13px;
  color: #a77765;
  font: 700 8px var(--alt);
  letter-spacing: 1.2px
}

.jff-dish-meta>span:last-child {
  color: #987b6e;
  text-align: right
}

.jff-dish h3 {
  font: 500 27px var(--serif);
  color: var(--maroon);
  margin-bottom: 9px;
  line-height: 1.3
}

.jff-dish p {
  font-size: 12px;
  line-height: 1.8;
  max-width: 360px;
  margin-bottom: 0
}

.jff-results {
  text-align: right;
  color: #a4806e !important;
  margin: 25px 0 0 !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .6px
}

/* STREET */
.jff-street-layout {
  display: flex;
  align-items: center;
  gap: 74px;
  min-height: 555px
}

.jff-street-copy {
  flex: 1 1 48%;
  min-width: 0
}

.jff-street-copy h2 {
  font-size: 58px;
  line-height: 1.22;
  color: var(--maroon);
  letter-spacing: -2px;
  margin: 20px 0
}

.jff-street-copy h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-street-copy>p {
  max-width: 525px
}

.jff-street-quote {
  display: flex;
  gap: 13px;
  border-top: 1px solid #dec9b7;
  border-bottom: 1px solid #dec9b7;
  padding: 17px 0;
  margin: 27px 0
}

.jff-street-quote>span {
  font: 500 63px var(--serif);
  color: var(--terracotta);
  line-height: .7
}

.jff-street-quote p {
  margin: 0;
  color: var(--maroon);
  font: 500 22px var(--serif);
  line-height: 1.45
}

.jff-street-quote em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-street-visual {
  flex: 1 1 52%;
  min-width: 0;
  position: relative;
  padding: 18px 25px 42px 22px
}

.jff-street-visual:before {
  content: "";
  position: absolute;
  inset: 4px 7px 56px 7px;
  border: 1px solid #c8907a;
  pointer-events: none
}

.jff-street-photo {
  height: 480px
}

.jff-photo--street {
  background: linear-gradient(135deg, #9e6c54, #64423d)
}

.jff-street-mark {
  position: absolute;
  right: -20px;
  top: -25px;
  height: 170px;
  width: 130px;
  color: #9c503e44;
  pointer-events: none
}

.jff-street-mark svg {
  height: 100%;
  width: 100%
}

.jff-street-caption {
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff8ef;
  padding: 17px 24px;
  text-align: center;
  box-shadow: 0 11px 28px #3d262626
}

.jff-street-caption b {
  font: 500 21px var(--serif);
  color: var(--maroon)
}

.jff-street-caption small {
  font: 700 8px var(--alt);
  letter-spacing: 1px;
  color: #a47e6b
}

/* SWEETS */
.jff-sweets {
  background: #efe5d8;
  padding: 58px 0;
  position: relative
}

.jff-sweets-shell {
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative
}

.jff-sweet-decor {
  position: absolute;
  left: -130px;
  top: -100px;
  width: 350px;
  height: 350px;
  color: #a76c5540;
  pointer-events: none
}

.jff-sweet-decor svg {
  width: 100%;
  height: 100%
}

.jff-sweet-image {
  flex: 1 1 51%;
  min-width: 0;
  position: relative;
  height: 470px;
  padding: 16px 0 0 16px
}

.jff-sweet-image:before {
  content: "";
  position: absolute;
  inset: 3px 15px 19px 3px;
  border: 1px solid #a97966;
  pointer-events: none;
  z-index: 3
}

.jff-photo--ghewar {
  background: linear-gradient(150deg, #d0b188, #806045)
}

.jff-sweet-stamp {
  position: absolute;
  left: -13px;
  bottom: -19px;
  width: 110px;
  height: 110px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-15deg);
  border-radius: 50%;
  background: var(--maroon);
  border: 5px double #e8b98d;
  color: #fff1df;
  font: 700 10px var(--alt);
  letter-spacing: 1px;
  box-shadow: 0 8px 20px #3d251d40
}

.jff-sweet-content {
  flex: 1 1 49%;
  min-width: 0;
  position: relative;
  z-index: 2
}

.jff-sweet-content h2 {
  font-size: 59px;
  line-height: 1.19;
  color: var(--maroon);
  letter-spacing: -2px;
  margin: 20px 0
}

.jff-sweet-content h2 em {
  font-weight: 400;
  color: var(--terracotta)
}

.jff-sweet-content>p {
  max-width: 550px
}

.jff-sweet-content>p strong {
  font-weight: 700;
  color: var(--maroon)
}

.jff-sweet-facts {
  display: flex;
  gap: 14px;
  border-top: 1px solid #d9c1ac;
  border-bottom: 1px solid #d9c1ac;
  padding: 17px 0;
  margin: 24px 0;
  flex-wrap: wrap
}

.jff-sweet-facts span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 115px;
  border-right: 1px solid #d9c1ac
}

.jff-sweet-facts span:last-child {
  border: 0
}

.jff-sweet-facts b {
  font: 700 12px var(--alt);
  letter-spacing: 1px;
  color: var(--maroon)
}

.jff-sweet-facts small {
  font-size: 11px;
  color: #977461
}

/* SPICE */
.jff-spice-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jff-spice-header h2 {
  font-size: 53px;
  color: var(--maroon);
  line-height: 1.25;
  letter-spacing: -1.9px;
  margin: 15px 0 16px
}

.jff-spice-header h2 em {
  font-weight: 400;
  color: var(--terracotta)
}

.jff-spice-header p {
  max-width: 670px
}

.jff-spice-items {
  display: flex;
  gap: 20px;
  margin-top: 25px
}

.jff-spice-items article {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #dfc9b5;
  background: #fbf6ed;
  padding: 22px 25px 27px;
  position: relative;
  overflow: hidden;
  transition: transform 280ms, box-shadow 280ms
}

.jff-spice-items article:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px #542c3015
}

.jff-spice-art {
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #b4765d
}

.jff-spice-art svg {
  height: 100%;
  max-width: 160px;
  width: 100%
}

.jff-spice-art--plate {
  color: #a98549
}

.jff-spice-art--lattice {
  color: #8e7266
}

.jff-spice-items article>span {
  font: 700 9px var(--alt);
  letter-spacing: 1.5px;
  color: var(--terracotta)
}

.jff-spice-items h3 {
  font: 500 29px var(--serif);
  margin: 12px 0;
  color: var(--maroon)
}

.jff-spice-items p {
  margin: 0;
  font-size: 12px
}

/* TRAIL */
.jff-trail {
  background: var(--maroon);
  padding: 55px 0 43px;
  color: #fff4e7;
  position: relative
}

.jff-trail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.jff-trail-header h2 {
  font-size: 57px;
  line-height: 1.2;
  color: #fff4e7;
  letter-spacing: -2px;
  margin: 16px 0
}

.jff-trail-header h2 em {
  color: #edbc9b;
  font-weight: 400
}

.jff-trail-header p {
  max-width: 635px;
  color: #e0c4b7
}

.jff-trail-steps {
  display: flex;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid #ffffff3d;
  border-bottom: 1px solid #ffffff3d
}

.jff-trail-steps>div {
  flex: 1 1 0;
  min-width: 0;
  padding: 28px 21px 25px;
  border-right: 1px solid #ffffff2f
}

.jff-trail-steps>div:last-child {
  border: 0
}

.jff-step-number {
  display: block;
  font: 400 46px var(--serif);
  line-height: 1.1;
  color: #d6a783;
  margin-bottom: 15px
}

.jff-trail-steps b {
  font: 700 9px var(--alt);
  letter-spacing: 1.4px;
  color: #dfb197
}

.jff-trail-steps h3 {
  font: 500 23px var(--serif);
  color: #fff2e4;
  margin: 11px 0
}

.jff-trail-steps p {
  font-size: 12px;
  color: #e0c3b5;
  line-height: 1.8;
  margin: 0
}

.jff-trail-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-top: 24px
}

.jff-trail-bottom>span {
  font: 700 9px var(--alt);
  letter-spacing: 1.4px;
  color: #d7ab90
}

/* HORIZONTAL GALLERY */
.jff-gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 27px
}

.jff-gallery-heading h2 {
  font-size: 53px;
  color: var(--maroon);
  letter-spacing: -1.7px;
  margin: 13px 0 0
}

.jff-gallery-heading h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-gallery-controls {
  display: flex;
  gap: 9px
}

.jff-gallery-controls button {
  width: 47px;
  height: 47px;
  border: 1px solid #b58c77;
  cursor: pointer;
  background: transparent;
  color: var(--maroon);
  font-size: 23px;
  transition: background 250ms, color 250ms
}

.jff-gallery-controls button:hover {
  background: var(--maroon);
  color: white
}

.jff-gallery-scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain
}

.jff-gallery-scroller::-webkit-scrollbar {
  display: none
}

.jff-gallery-scroller figure {
  flex: 0 0 31%;
  min-width: 0;
  scroll-snap-align: start;
  margin: 0
}

.jff-gallery-scroller figure .jff-photo {
  height: 310px;
  background: #9b7364
}

.jff-gallery-scroller figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #d8c5b2;
  color: var(--maroon);
  font: 700 11px var(--alt);
  letter-spacing: .8px
}

.jff-gallery-scroller figcaption span {
  font: 500 20px var(--serif);
  color: var(--terracotta)
}

.jff-gallery-foot {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 17px;
  color: #a38a7c;
  font: 700 9px var(--alt);
  letter-spacing: 1px
}

/* VISITOR NOTES */
.jff-notes-layout {
  display: flex;
  align-items: start;
  gap: 90px
}

.jff-notes-heading {
  flex: 1 1 43%;
  min-width: 0
}

.jff-notes-heading h2 {
  font-size: 54px;
  color: var(--maroon);
  letter-spacing: -2px;
  line-height: 1.19;
  margin: 16px 0
}

.jff-notes-heading h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jff-notes-heading p {
  max-width: 430px
}

.jff-notes-list {
  flex: 1 1 57%;
  min-width: 0;
  border-top: 1px solid #d9c4b0
}

.jff-notes-list>div {
  display: flex;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid #d9c4b0
}

.jff-notes-list>div>span {
  font: 500 29px var(--serif);
  color: var(--terracotta)
}

.jff-notes-list h3 {
  font: 500 21px var(--serif);
  color: var(--maroon);
  margin-bottom: 4px
}

.jff-notes-list p {
  font-size: 12px;
  margin: 0
}

/* CLOSING */
.jff-final {
  background: var(--maroon);
  color: #fff2e4;
  text-align: center;
  padding: 52px 0 0
}

.jff-final-layout {
  display: flex;
  align-items: center;
  flex-direction: column
}

.jff-final-star {
  font-size: 36px;
  color: #d8ad83;
  margin-bottom: 13px;
  line-height: 1
}

.jff-final h2 {
  font-size: 69px;
  color: #fff4e7;
  line-height: 1.19;
  letter-spacing: -2.3px;
  margin: 18px 0 15px
}

.jff-final h2 em {
  color: #e5b394;
  font-weight: 400
}

.jff-final p {
  max-width: 610px;
  color: #e2c2b2
}

.jff-final-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 22px 0 46px
}

.jff-final-foot {
  border-top: 1px solid #ffffff30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 52px;
  color: #d1a48f;
  font: 700 9px var(--alt);
  letter-spacing: 1.5px
}

.jff-final-foot span:nth-child(2) {
  font-size: 19px
}

/* RESPONSIVENESS — Breakpoints use px only */
@media(max-width:1399px) {
  .jff-hero-copy h1 {
    font-size: 68px
  }

  .jff-hero-visual {
    height: 600px
  }

  .jff-hero-arch {
    height: 525px
  }

  .jff-thali-copy {
    padding: 49px 43px
  }

  .jff-thali-copy h2 {
    font-size: 56px
  }

  .jff-street-layout,
  .jff-sweets-shell {
    gap: 51px
  }

  .jff-street-copy h2 {
    font-size: 54px
  }
}

@media(max-width:1199px) {
  .jff-hero-shell {
    min-height: 620px;
    gap: 24px
  }

  .jff-hero-copy h1 {
    font-size: 59px
  }

  .jff-hero-visual {
    height: 540px;
    padding: 20px 19px 25px 30px
  }

  .jff-hero-visual:before {
    left: 18px
  }

  .jff-hero-arch {
    height: 472px
  }

  .jff-hero-polaroid {
    width: 146px;
    height: 185px
  }

  .jff-hero-polaroid .jff-photo {
    height: 144px
  }

  .jff-hero-medallion {
    width: 103px;
    height: 103px;
    right: -4px
  }

  .jff-hero-medallion b {
    font-size: 14px
  }

  .jff-thali-layout {
    min-height: 590px
  }

  .jff-photo--thali {
    min-height: 560px
  }

  .jff-thali-copy h2 {
    font-size: 50px
  }

  .jff-thali-copy {
    padding: 42px 35px
  }

  .jff-dish-image {
    height: 230px
  }

  .jff-street-layout {
    gap: 35px
  }

  .jff-street-copy h2 {
    font-size: 47px
  }

  .jff-street-photo {
    height: 430px
  }

  .jff-sweets-shell {
    gap: 40px
  }

  .jff-sweet-content h2 {
    font-size: 51px
  }

  .jff-sweet-image {
    height: 410px
  }

  .jff-notes-layout {
    gap: 50px
  }
}

@media(max-width:991px) {
  .jff-hero-shell {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 20px
  }

  .jff-hero-copy {
    flex: none;
    padding: 0
  }

  .jff-hero-copy h1 {
    font-size: 69px
  }

  .jff-hero-copy>p {
    max-width: 630px
  }

  .jff-hero-foot {
    margin-top: 33px
  }

  .jff-hero-visual {
    align-self: center;
    max-width: 580px;
    width: 100%;
    height: 520px;
    flex: none;
    margin-top: 15px
  }

  .jff-hero-arch {
    height: 455px
  }

  .jff-hero-bottom {
    margin-top: 14px
  }

  .jff-opening h2 {
    font-size: 45px
  }

  .jff-thali-copy h2 {
    font-size: 43px
  }

  .jff-thali-copy {
    padding: 35px 25px
  }

  .jff-thali-layout {
    min-height: 0
  }

  .jff-photo--thali {
    min-height: 540px
  }

  .jff-thali-image {
    padding-left: 12px
  }

  .jff-thali-points strong {
    font-size: 16px
  }

  .jff-thali-points small {
    font-size: 11px
  }

  .jff-heading-row h2 {
    font-size: 48px
  }

  .jff-dish-image {
    height: 205px
  }

  .jff-dish h3 {
    font-size: 23px
  }

  .jff-dish-meta {
    font-size: 7px;
    letter-spacing: .7px
  }

  .jff-street-layout {
    gap: 23px
  }

  .jff-street-copy h2 {
    font-size: 42px
  }

  .jff-street-photo {
    height: 420px
  }

  .jff-street-quote p {
    font-size: 19px
  }

  .jff-sweets-shell {
    gap: 32px
  }

  .jff-sweet-content h2 {
    font-size: 43px
  }

  .jff-sweet-image {
    height: 385px
  }

  .jff-spice-items article {
    padding: 20px 17px 23px
  }

  .jff-spice-items h3 {
    font-size: 25px
  }

  .jff-trail-steps {
    flex-wrap: wrap
  }

  .jff-trail-steps>div {
    flex: 1 1 50%;
    border-bottom: 1px solid #ffffff2f
  }

  .jff-trail-steps>div:nth-child(2) {
    border-right: 0
  }

  .jff-trail-steps>div:nth-child(n+3) {
    border-bottom: 0
  }

  .jff-gallery-scroller figure {
    flex-basis: 43%
  }

  .jff-gallery-scroller figure .jff-photo {
    height: 275px
  }

  .jff-notes-layout {
    gap: 35px
  }

  .jff-notes-heading h2 {
    font-size: 44px
  }
}

@media(max-width:767px) {
  .jff-page .jff-section {
    margin-top: 50px
  }

  .jff-hero-shell {
    padding-top: 10px
  }

  .jff-crumb {
    margin-bottom: 28px
  }

  .jff-hero-copy h1 {
    font-size: 58px
  }

  .jff-hero-copy>p {
    font-size: 14px
  }

  .jff-hero-visual {
    height: 462px;
    max-width: 500px;
    padding: 15px 14px 24px 31px
  }

  .jff-hero-visual:before {
    inset: 3px 8px 45px 16px
  }

  .jff-hero-arch {
    height: 407px
  }

  .jff-hero-medallion {
    right: 0
  }

  .jff-hero-vertical {
    display: none
  }

  .jff-hero-bottom {
    font-size: 8px;
    gap: 15px
  }

  .jff-opening h2 {
    font-size: 39px
  }

  .jff-opening-nav a {
    flex: 1 1 50%;
    border-bottom: 1px solid #dcc8b7
  }

  .jff-opening-nav a:nth-child(even) {
    border-right: 0
  }

  .jff-opening-nav a:nth-child(n+3) {
    border-bottom: 0
  }

  .jff-thali-layout {
    flex-direction: column
  }

  .jff-thali-image {
    height: 450px;
    flex: none;
    padding: 12px 12px 12px 14px
  }

  .jff-photo--thali {
    min-height: 0
  }

  .jff-thali-copy {
    padding: 41px 35px 44px
  }

  .jff-thali-copy h2 {
    font-size: 53px
  }

  .jff-heading-row {
    flex-direction: column;
    align-items: start;
    gap: 10px
  }

  .jff-heading-row h2 {
    font-size: 45px
  }

  .jff-heading-row p {
    max-width: 100%
  }

  .jff-dish {
    flex: 0 0 calc((100% - 17px)/2)
  }

  .jff-dish-list {
    column-gap: 17px;
    row-gap: 26px
  }

  .jff-dish-image {
    height: 240px
  }

  .jff-dish h3 {
    font-size: 25px
  }

  .jff-street-layout {
    flex-direction: column;
    align-items: stretch
  }

  .jff-street-copy h2 {
    font-size: 49px
  }

  .jff-street-visual {
    width: 100%;
    max-width: 575px;
    align-self: center;
    padding-bottom: 36px
  }

  .jff-street-photo {
    height: 430px
  }

  .jff-sweets-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 37px
  }

  .jff-sweet-image {
    width: 100%;
    height: 385px;
    flex: none;
    max-width: 580px;
    align-self: center
  }

  .jff-sweet-content h2 {
    font-size: 50px
  }

  .jff-sweet-facts {
    margin: 18px 0
  }

  .jff-spice-header h2 {
    font-size: 47px
  }

  .jff-spice-items {
    flex-wrap: wrap
  }

  .jff-spice-items article {
    flex: 1 1 45%
  }

  .jff-spice-items article:last-child {
    flex-basis: 100%
  }

  .jff-spice-items article:last-child .jff-spice-art {
    height: 120px
  }

  .jff-trail-header h2 {
    font-size: 49px
  }

  .jff-gallery-heading h2 {
    font-size: 43px
  }

  .jff-gallery-scroller figure {
    flex-basis: 60%
  }

  .jff-gallery-scroller figure .jff-photo {
    height: 270px
  }

  .jff-notes-layout {
    flex-direction: column;
    gap: 14px
  }

  .jff-notes-heading h2 {
    font-size: 46px
  }

  .jff-notes-list {
    width: 100%
  }

  .jff-final h2 {
    font-size: 59px
  }
}

@media(max-width:575px) {
  .jff-hero-copy h1 {
    font-size: 50px;
    letter-spacing: -2.1px
  }

  .jff-hero-visual {
    height: 390px
  }

  .jff-hero-arch {
    height: 339px
  }

  .jff-hero-polaroid {
    width: 116px;
    height: 148px;
    padding: 6px
  }

  .jff-hero-polaroid .jff-photo {
    height: 113px
  }

  .jff-hero-polaroid small {
    font-size: 6px
  }

  .jff-hero-medallion {
    width: 87px;
    height: 87px;
    top: 56px
  }

  .jff-hero-medallion>b {
    font-size: 12px
  }

  .jff-hero-medallion small {
    font-size: 5px
  }

  .jff-hero-medallion>span {
    font-size: 16px
  }

  .jff-hero-bottom {
    font-size: 7px;
    letter-spacing: .7px
  }

  .jff-hero-bottom span:last-child {
    text-align: right
  }

  .jff-opening h2 {
    font-size: 34px
  }

  .jff-opening-nav a {
    font-size: 9px
  }

  .jff-thali-image {
    height: 340px
  }

  .jff-thali-number {
    left: 37px;
    font-size: 46px
  }

  .jff-thali-copy {
    padding: 35px 25px 39px
  }

  .jff-thali-copy h2 {
    font-size: 44px
  }

  .jff-thali-points>div {
    gap: 10px
  }

  .jff-heading-row h2 {
    font-size: 40px
  }

  .jff-filter {
    flex: 1 1 40%;
    justify-content: space-between;
    padding: 10px;
    font-size: 10px
  }

  .jff-dish-list {
    row-gap: 24px
  }

  .jff-dish-image {
    height: 205px
  }

  .jff-dish h3 {
    font-size: 22px
  }

  .jff-dish-meta {
    font-size: 7px;
    letter-spacing: 0;
    flex-direction: column;
    gap: 3px
  }

  .jff-dish-meta>span:last-child {
    text-align: left
  }

  .jff-dish p {
    font-size: 11px
  }

  .jff-street-copy h2 {
    font-size: 43px
  }

  .jff-street-photo {
    height: 360px
  }

  .jff-street-caption {
    padding: 12px 18px
  }

  .jff-street-caption b {
    font-size: 18px
  }

  .jff-sweets {
    padding: 41px 0
  }

  .jff-sweet-image {
    height: 325px
  }

  .jff-sweet-stamp {
    width: 89px;
    height: 89px;
    font-size: 8px
  }

  .jff-sweet-content h2 {
    font-size: 44px
  }

  .jff-spice-header h2 {
    font-size: 39px
  }

  .jff-spice-items {
    gap: 13px
  }

  .jff-spice-items article {
    flex-basis: 100%;
    padding: 22px
  }

  .jff-spice-art {
    height: 128px
  }

  .jff-trail-header h2 {
    font-size: 43px
  }

  .jff-trail-steps>div {
    flex-basis: 100%;
    border-right: 0;
    border-bottom: 1px solid #ffffff2f !important;
    padding: 22px 5px
  }

  .jff-trail-steps>div:last-child {
    border-bottom: 0 !important
  }

  .jff-step-number {
    font-size: 39px;
    margin-bottom: 5px
  }

  .jff-trail-bottom {
    align-items: stretch;
    flex-direction: column
  }

  .jff-trail-bottom .jff-btn {
    width: 100%
  }

  .jff-gallery-heading h2 {
    font-size: 37px
  }

  .jff-gallery-controls button {
    width: 41px;
    height: 41px
  }

  .jff-gallery-scroller figure {
    flex-basis: 82%
  }

  .jff-gallery-scroller figure .jff-photo {
    height: 270px
  }

  .jff-gallery-foot {
    font-size: 7px
  }

  .jff-notes-heading h2 {
    font-size: 40px
  }

  .jff-final h2 {
    font-size: 46px
  }

  .jff-final-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch
  }

  .jff-final-actions .jff-btn {
    width: 100%
  }

  .jff-final-foot {
    font-size: 7px;
    letter-spacing: .5px;
    gap: 10px
  }
}

@media(max-width:380px) {
  .jff-hero-copy h1 {
    font-size: 44px
  }

  .jff-hero-visual {
    height: 330px
  }

  .jff-hero-arch {
    height: 283px
  }

  .jff-hero-actions {
    gap: 13px
  }

  .jff-handwritten {
    font-size: 16px
  }

  .jff-hero-foot small {
    font-size: 8px
  }

  .jff-opening h2 {
    font-size: 30px
  }

  .jff-opening-nav a {
    font-size: 8px
  }

  .jff-thali-copy h2 {
    font-size: 39px
  }

  .jff-heading-row h2 {
    font-size: 35px
  }

  .jff-dish-image {
    height: 157px
  }

  .jff-dish h3 {
    font-size: 19px
  }

  .jff-street-copy h2 {
    font-size: 38px
  }

  .jff-sweet-content h2 {
    font-size: 39px
  }

  .jff-spice-header h2 {
    font-size: 36px
  }

  .jff-trail-header h2 {
    font-size: 39px
  }

  .jff-gallery-heading h2 {
    font-size: 33px
  }

  .jff-final h2 {
    font-size: 42px
  }
}

@media(prefers-reduced-motion:reduce) {

  .jff-page *,
  .jff-page *::before,
  .jff-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

/* JAIPUR HERITAGE TOUR — ITINERARIES
   Isolated .jit- classes only. Inherits approved brand header/footer from style.css.
   Pixel-based typography / spacing, Flexbox layouts, fluid widths, 50px section gaps.
   No prohibited sizing functions or layout methods.
*/
.jit-page {
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden
}

.jit-page .jit-section {
  margin-top: 50px;
  position: relative
}

.jit-page [hidden] {
  display: none !important
}

.jit-page h1,
.jit-page h2,
.jit-page h3,
.jit-page h4 {
  font-family: var(--serif);
  font-weight: 500
}

.jit-page a {
  text-decoration: none
}

.jit-page p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--body)
}

.jit-kicker {
  display: inline-block;
  font: 700 10px var(--alt);
  line-height: 1.6;
  letter-spacing: 2.3px;
  color: var(--terracotta)
}

.jit-btn {
  display: inline-flex;
  gap: 17px;
  justify-content: space-between;
  align-items: center;
  min-height: 55px;
  padding: 7px 7px 7px 22px;
  border: 1px solid transparent;
  background: none;
  font: 600 12px var(--alt);
  letter-spacing: .1px;
  transition: background 250ms, color 250ms, transform 250ms;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer
}

.jit-btn b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 39px;
  flex: none;
  font: 400 22px var(--sans);
  background: #ffffff1a
}

.jit-btn:hover {
  transform: translateY(-3px)
}

.jit-btn--dark {
  background: var(--maroon);
  color: #fff8ee
}

.jit-btn--dark:hover {
  background: var(--terracotta);
  color: white
}

.jit-btn--light {
  background: #fff4e3;
  color: var(--maroon)
}

.jit-btn--light b {
  background: #e5d2c0
}

.jit-btn--light:hover {
  background: #fffdf6;
  color: var(--maroon)
}

.jit-btn--outline {
  border-color: #d4ac97;
  color: #fff5e9
}

.jit-btn--outline:hover {
  color: white;
  background: #ffffff14
}

.jit-btn--line {
  border-color: #cfa58e;
  color: #fff7ed
}

.jit-btn--line:hover {
  background: #ffffff17;
  color: white
}

.jit-photo {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #b87f6a, #6a474b)
}

.jit-photo:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(45deg, transparent 0px, transparent 24px, #fff4df10 25px, #fff4df10 26px)
}

.jit-photo-grain {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 400 125px var(--serif);
  color: #ead7bd4f
}

.jit-photo>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1)
}

.jit-photo:hover>img {
  transform: scale(1.065)
}

/* HERO - deep aubergine with picture book layering */
.jit-hero {
  position: relative;
  background: radial-gradient(circle at 21% 25%, #704349 0px, transparent 570px), #48282e;
  color: #fff1e2;
  padding-top: 24px;
  overflow: hidden
}

.jit-hero-engrave {
  position: absolute;
  left: -175px;
  bottom: 16px;
  width: 440px;
  height: 430px;
  opacity: .11;
  color: #e7b895;
  pointer-events: none;
  transform: rotate(-9deg)
}

.jit-hero-engrave svg {
  width: 100%;
  height: 100%
}

.jit-hero-grid {
  position: relative;
  display: flex;
  align-items: center;
  gap: 58px;
  min-height: 690px
}

.jit-hero-copy {
  flex: 1 1 49%;
  min-width: 0;
  position: relative;
  z-index: 5;
  padding: 25px 0 50px
}

.jit-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 43px;
  font: 700 10px var(--alt);
  letter-spacing: 1.5px;
  color: #d4b3a3
}

.jit-crumb span {
  color: #d5ae75
}

.jit-crumb strong {
  color: #f8e2c5;
  font-weight: 700
}

.jit-crumb a:hover {
  color: #fff
}

.jit-hero .jit-kicker {
  color: #e8b88e
}

.jit-hero h1 {
  font-size: 74px;
  line-height: 1.13;
  letter-spacing: -2.9px;
  color: #fff5e9;
  margin: 19px 0 23px
}

.jit-hero h1 em {
  font-weight: 400;
  color: #e4b494
}

.jit-hero-copy>p {
  max-width: 510px;
  color: #e9ccbd;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 32px
}

.jit-hero-buttons {
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap
}

.jit-hero-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #be9d83;
  padding-bottom: 7px;
  color: #fff0e0;
  font: 700 11px var(--alt)
}

.jit-hero-link:hover {
  color: #eab99b
}

.jit-hero-link span {
  font-size: 18px;
  color: #e7b492
}

.jit-hero-caption {
  margin-top: 70px;
  display: flex;
  align-items: center;
  gap: 17px
}

.jit-hero-caption span {
  color: #e4b58a;
  font: 500 23px var(--serif)
}

.jit-hero-caption i {
  background: #a17b70;
  height: 1px;
  width: 55px
}

.jit-hero-caption small {
  font: 700 9px var(--alt);
  letter-spacing: 1.7px;
  color: #d7bcb1
}

.jit-hero-art {
  flex: 1 1 51%;
  min-width: 0;
  position: relative;
  height: 635px;
  padding: 25px 15px 33px 28px
}

.jit-hero-art:before {
  content: "";
  position: absolute;
  inset: 10px -1px 68px 10px;
  border: 1px solid #d6a783a1;
  border-radius: 300px 300px 0 0;
  pointer-events: none
}

.jit-hero-frame {
  height: 570px;
  border-radius: 310px 310px 0 0;
  overflow: hidden
}

.jit-hero-frame .jit-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, #34232799, transparent 57%)
}

.jit-hero-postcard {
  position: absolute;
  left: -35px;
  bottom: 5px;
  width: 187px;
  height: 221px;
  padding: 9px;
  background: #fff6e7;
  z-index: 5;
  box-shadow: 0 19px 32px #1910156e;
  transform: rotate(-9deg)
}

.jit-hero-postcard .jit-photo {
  height: 181px
}

.jit-hero-postcard>span {
  display: block;
  color: var(--maroon);
  font: 700 8px var(--alt);
  text-align: center;
  letter-spacing: 1.3px;
  padding-top: 10px
}

.jit-hero-seal {
  position: absolute;
  right: -21px;
  top: 90px;
  height: 124px;
  width: 124px;
  border: 5px double #e3c1a2;
  z-index: 6;
  background: #e6ba91;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  color: var(--maroon);
  transform: rotate(12deg);
  box-shadow: 0 11px 22px #281a2052
}

.jit-hero-seal>span {
  font-size: 20px;
  line-height: 1
}

.jit-hero-seal strong {
  font: 600 16px var(--serif);
  line-height: 1.12
}

.jit-hero-seal small {
  font: 700 7px var(--alt);
  letter-spacing: .6px;
  margin-top: 6px
}

.jit-hero-side {
  position: absolute;
  right: -21px;
  bottom: 177px;
  color: #d5aea1;
  font: 700 9px var(--alt);
  letter-spacing: 1.8px;
  writing-mode: vertical-rl
}

.jit-hero-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 63px;
  border-top: 1px solid #a37e794f;
  color: #d4b6a7;
  font: 700 9px var(--alt);
  letter-spacing: 1.5px
}

.jit-hero-base span:nth-child(2) {
  color: #ddae8b;
  font: 500 26px var(--serif)
}

/* Shared section editorial heading */
.jit-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 31px
}

.jit-section-heading>div {
  flex: 1 1 55%;
  min-width: 0
}

.jit-section-heading>p {
  flex: 1 1 35%;
  max-width: 390px;
  margin: 0 0 4px
}

.jit-section-heading h2 {
  font-size: 61px;
  color: var(--maroon);
  letter-spacing: -1.9px;
  line-height: 1.2;
  margin: 15px 0 0
}

.jit-section-heading h2 em {
  color: var(--terracotta);
  font-weight: 400
}

/* Intro: compass & history */
.jit-intro-row {
  display: flex;
  align-items: center;
  gap: 35px;
  padding-top: 12px;
  padding-bottom: 18px
}

.jit-intro-stamp {
  width: 220px;
  height: 220px;
  flex: none;
  color: #b28a7677;
  transform: rotate(-17deg)
}

.jit-intro-stamp svg {
  width: 100%;
  height: 100%
}

.jit-intro-copy {
  flex: 1 1 56%;
  min-width: 0
}

.jit-intro-copy h2 {
  font-size: 48px;
  line-height: 1.21;
  letter-spacing: -1.5px;
  margin: 12px 0 17px;
  color: var(--maroon)
}

.jit-intro-copy h2 em {
  font-weight: 400;
  color: var(--terracotta)
}

.jit-intro-copy p {
  margin: 0 0 11px;
  max-width: 630px
}

.jit-intro-copy strong {
  color: var(--maroon)
}

.jit-intro-numbers {
  flex: none;
  width: 160px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-left: 1px solid #d7bda8;
  padding-left: 23px
}

.jit-intro-numbers div {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid #ddcbb8
}

.jit-intro-numbers strong {
  font: 500 36px var(--serif);
  color: var(--terracotta)
}

.jit-intro-numbers span {
  font: 700 9px var(--alt);
  letter-spacing: 1.2px;
  color: #8c7767
}

/* Journey selection */
.jit-journey-cards {
  display: flex;
  gap: 17px
}

.jit-journey-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fffaf2;
  border: 1px solid #e5d4c4;
  transition: transform 450ms, box-shadow 450ms
}

.jit-journey-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 20px 35px #5c3d3323
}

.jit-journey-image {
  height: 255px;
  position: relative;
  overflow: hidden
}

.jit-journey-num {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--maroon);
  padding: 9px 18px;
  color: #fff2e0;
  font: 500 26px var(--serif);
  z-index: 4
}

.jit-journey-content {
  padding: 27px 28px 24px
}

.jit-journey-content>span {
  color: var(--terracotta);
  font: 700 9px var(--alt);
  letter-spacing: 2px
}

.jit-journey-content h3 {
  font-size: 29px;
  line-height: 1.22;
  color: var(--maroon);
  margin: 13px 0 12px;
  min-height: 70px
}

.jit-journey-content p {
  font-size: 13px;
  min-height: 78px;
  line-height: 1.85
}

.jit-journey-content ul {
  list-style: none;
  padding: 16px 0 13px;
  margin: 14px 0 14px;
  border-top: 1px solid #eadbd0;
  border-bottom: 1px solid #eadbd0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.jit-journey-content li {
  color: #736157;
  font: 500 11px var(--alt);
  padding-left: 18px;
  position: relative
}

.jit-journey-content li:before {
  content: "";
  position: absolute;
  left: 0;
  color: var(--terracotta);
  font-size: 10px
}

.jit-card-select {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 12px;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--maroon);
  font: 700 11px var(--alt);
  padding: 12px 0 0
}

.jit-card-select b {
  font: 400 24px var(--sans);
  color: var(--terracotta)
}

.jit-card-select:hover {
  color: var(--terracotta)
}

.jit-journeys-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  text-align: center
}

.jit-journeys-foot span {
  color: var(--gold);
  font-size: 20px
}

.jit-journeys-foot p {
  margin: 0;
  color: #998371;
  font-size: 11px
}

/* Large interactive day-by-day travel journal */
.jit-planner-section {
  background: #eee2d4;
  padding: 65px 0 72px
}

.jit-section-heading--plain {
  margin-bottom: 36px
}

.jit-tabbar {
  display: flex;
  border: 1px solid #d5bca9;
  background: #f9f3ea;
  padding: 8px;
  gap: 8px
}

.jit-plan-tab {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #765f51;
  transition: background 250ms, color 250ms;
  cursor: pointer;
  text-align: left
}

.jit-plan-tab strong {
  font: 500 35px var(--serif);
  color: #c59b82
}

.jit-plan-tab span {
  font: 600 18px var(--serif);
  color: var(--maroon);
  white-space: nowrap
}

.jit-plan-tab small {
  font: 700 9px var(--alt);
  letter-spacing: 1px;
  margin-left: auto
}

.jit-plan-tab.is-active {
  background: var(--maroon);
  color: white
}

.jit-plan-tab.is-active strong,
.jit-plan-tab.is-active span,
.jit-plan-tab.is-active small {
  color: #fff4e8
}

.jit-plan-tab:hover:not(.is-active) {
  background: #f0dfcf
}

.jit-plans {
  background: #fff9f0;
  border: 1px solid #d6beac;
  border-top: 0;
  padding: 42px 50px 50px
}

.jit-plan-intro {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 35px;
  border-bottom: 1px solid #dec7b4;
  padding-bottom: 33px
}

.jit-plan-intro>div:first-child {
  flex: 1 1 75%;
  min-width: 0
}

.jit-plan-intro h2 {
  font-size: 53px;
  letter-spacing: -1.6px;
  color: var(--maroon);
  line-height: 1.2;
  margin: 13px 0 16px
}

.jit-plan-intro h2 em {
  font-weight: 400;
  color: var(--terracotta)
}

.jit-plan-intro p {
  max-width: 725px;
  margin-bottom: 17px
}

.jit-plan-facts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.jit-plan-facts span {
  padding: 8px 12px;
  border: 1px solid #e5c9b5;
  font: 600 10px var(--alt);
  color: #815a51;
  background: #faf0e7
}

.jit-plan-intro-aside {
  flex: 0 0 196px;
  text-align: center;
  border-left: 1px solid #e7d2c0;
  padding-left: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.jit-plan-ordinal {
  font: 500 111px var(--serif);
  line-height: 1;
  color: #ccac98
}

.jit-plan-intro-aside>span:nth-child(2) {
  font: 700 8px var(--alt);
  color: #947560;
  letter-spacing: 1px
}

.jit-plan-intro-aside p {
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
  margin: 12px 0 0;
  color: #907a70
}

.jit-day {
  margin-top: 48px
}

.jit-day+.jit-day {
  padding-top: 44px;
  border-top: 1px solid #e4ccba
}

.jit-day-heading {
  max-width: 830px;
  margin-bottom: 32px
}

.jit-day-heading>span {
  font: 700 10px var(--alt);
  letter-spacing: 2px;
  color: var(--terracotta)
}

.jit-day-heading>span b {
  font-size: 16px;
  margin: 0 9px;
  color: var(--gold)
}

.jit-day-heading h3 {
  color: var(--maroon);
  font-size: 43px;
  letter-spacing: -1px;
  margin: 10px 0
}

.jit-day-heading p {
  font-size: 14px;
  max-width: 650px;
  margin: 0
}

.jit-route-vertical {
  position: relative
}

.jit-route-vertical:before {
  content: "";
  position: absolute;
  left: 26px;
  top: 30px;
  bottom: 55px;
  width: 1px;
  background: linear-gradient(#a86554, #ddbaa2)
}

.jit-stop {
  display: flex;
  gap: 18px;
  align-items: stretch;
  padding: 0 0 29px;
  position: relative
}

.jit-stop:last-child {
  padding-bottom: 0
}

.jit-stop-spine {
  width: 53px;
  flex: none;
  position: relative;
  z-index: 1
}

.jit-stop-spine span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid #c78e74;
  background: #fff7ee;
  border-radius: 50%;
  font: 500 20px var(--serif);
  color: var(--terracotta)
}

.jit-stop-image {
  height: 197px;
  width: 235px;
  flex: none;
  overflow: hidden;
  align-self: flex-start
}

.jit-stop-image .jit-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 7px solid #fff5eb59;
  z-index: 2;
  pointer-events: none
}

.jit-stop-body {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px 0 0 10px
}

.jit-stop-time {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--terracotta);
  font: 700 10px var(--alt);
  letter-spacing: 1px
}

.jit-stop-time i {
  width: 21px;
  height: 1px;
  background: #bd9581
}

.jit-stop-time span:last-child {
  color: #9a8073;
  font-size: 9px;
  letter-spacing: 1.3px
}

.jit-stop-body h4 {
  font-size: 28px;
  line-height: 1.25;
  margin: 11px 0 8px;
  color: var(--maroon)
}

.jit-stop-body>p {
  font-size: 13px;
  margin: 0 0 10px;
  line-height: 1.82
}

.jit-stop-tip {
  display: flex;
  align-items: baseline;
  gap: 13px;
  border-top: 1px solid #eaddd0;
  padding-top: 10px
}

.jit-stop-tip b {
  flex: none;
  color: #ad6656;
  font: 700 9px var(--alt);
  letter-spacing: 1px
}

.jit-stop-tip span {
  color: #8c7a6b;
  font-size: 11px;
  line-height: 1.6
}

.jit-end-of-plan {
  display: flex;
  gap: 25px;
  justify-content: space-between;
  align-items: center;
  background: var(--maroon);
  padding: 28px 34px;
  margin-top: 38px
}

.jit-end-of-plan>div:first-child {
  max-width: 670px;
  min-width: 0
}

.jit-end-of-plan b {
  font: 700 9px var(--alt);
  color: #d4a88f;
  letter-spacing: 1.4px
}

.jit-end-of-plan h3 {
  font-size: 30px;
  margin: 10px 0;
  color: #fff5e8
}

.jit-end-of-plan h3 em {
  font-weight: 400;
  color: #e7b79b
}

.jit-end-of-plan p {
  font-size: 12px;
  color: #e3c5b7;
  line-height: 1.8;
  margin: 0
}

.jit-end-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: stretch;
  min-width: 212px
}

.jit-end-actions .jit-btn {
  width: 100%;
  font-size: 11px
}

/* Comparison */
.jit-compare-inner {
  background: #fff8ef;
  border: 1px solid #e3cdbb;
  padding: 48px
}

.jit-compare-head {
  max-width: 750px;
  margin-bottom: 28px
}

.jit-compare-head h2 {
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--maroon);
  margin: 12px 0 10px
}

.jit-compare-head h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jit-compare-head p {
  margin: 0
}

.jit-comparison {
  overflow-x: auto
}

.jit-comparison table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px
}

.jit-comparison th,
.jit-comparison td {
  text-align: center;
  padding: 18px 15px;
  border-bottom: 1px solid #e6d4c8;
  color: #765b52;
  font: 500 12px var(--alt)
}

.jit-comparison thead th {
  background: var(--maroon);
  color: #fff4e6;
  font: 700 10px var(--alt);
  letter-spacing: 1.4px
}

.jit-comparison thead th:first-child,
.jit-comparison tbody th {
  text-align: left
}

.jit-comparison tbody th {
  color: var(--maroon);
  font-weight: 700
}

.jit-comparison tbody tr:nth-child(odd) {
  background: #fcf2e8
}

.jit-comparison td:nth-child(4) {
  color: #9d523f;
  font-weight: 700
}

.jit-compare-note {
  text-align: center;
  font-size: 11px !important;
  color: #988173 !important;
  margin: 20px 0 0 !important
}

/* six editorial add-on cards */
.jit-experience-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 17px
}

.jit-exp-item {
  flex: 1 1 30%;
  min-width: 260px;
  background: #fdf8ef;
  border: 1px solid #e6d6c7;
  display: flex;
  flex-direction: column;
  transition: transform 330ms
}

.jit-exp-item:hover {
  transform: translateY(-6px)
}

.jit-exp-photo {
  height: 190px;
  overflow: hidden
}

.jit-exp-text {
  padding: 23px 23px 24px;
  flex: 1
}

.jit-exp-text>span {
  font: 700 9px var(--alt);
  letter-spacing: 1.3px;
  color: var(--terracotta)
}

.jit-exp-text h3 {
  color: var(--maroon);
  font-size: 26px;
  margin: 10px 0
}

.jit-exp-text p {
  font-size: 12px;
  line-height: 1.9;
  margin: 0
}

/* scenic editorial */
.jit-route-layout {
  display: flex;
  align-items: stretch;
  min-height: 650px
}

.jit-route-photo {
  flex: 1 1 48%;
  position: relative;
  min-width: 0;
  min-height: 600px;
  overflow: hidden
}

.jit-route-photo .jit-photo:after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 2;
  background: linear-gradient(transparent 45%, #3b25258e)
}

.jit-route-photo>span {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  color: #fff4e8;
  font: 700 10px var(--alt);
  letter-spacing: 1.9px;
  z-index: 3;
  text-shadow: 0 2px 6px #291817
}

.jit-route-copy {
  flex: 1 1 52%;
  min-width: 0;
  padding: 57px 55px 55px;
  background: #e8d5c5
}

.jit-route-copy h2 {
  font-size: 53px;
  letter-spacing: -1.8px;
  line-height: 1.2;
  color: var(--maroon);
  margin: 15px 0 19px
}

.jit-route-copy h2 em {
  font-weight: 400;
  color: var(--terracotta)
}

.jit-route-copy>p {
  font-size: 14px;
  margin-bottom: 21px
}

.jit-route-advice {
  border-top: 1px solid #c7a99b
}

.jit-route-advice>div {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #d8baa9
}

.jit-route-advice b {
  font: 500 28px var(--serif);
  color: #ab7461;
  flex: 0 0 39px
}

.jit-route-advice span {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.jit-route-advice strong {
  font: 600 17px var(--serif);
  color: var(--maroon)
}

.jit-route-advice small {
  font: 400 11px var(--sans);
  line-height: 1.75;
  color: #755f57
}

/* seasons */
.jit-season-cards {
  display: flex;
  gap: 15px
}

.jit-season-cards article {
  flex: 1 1 0;
  background: #fff9f1;
  border: 1px solid #e1ccb8;
  min-width: 0;
  padding: 32px;
  position: relative;
  overflow: hidden
}

.jit-season-cards article:before {
  content: "";
  font: 400 175px var(--serif);
  position: absolute;
  right: -13px;
  top: -70px;
  color: #e8cab820;
  pointer-events: none
}

.jit-season-cards article>span {
  font: 700 10px var(--alt);
  color: var(--terracotta);
  letter-spacing: 1.6px
}

.jit-season-cards h3 {
  font-size: 29px;
  color: var(--maroon);
  margin: 30px 0 12px
}

.jit-season-cards p {
  min-height: 126px;
  font-size: 12px;
  position: relative
}

.jit-season-cards b {
  font: 700 9px var(--alt);
  color: var(--terracotta);
  letter-spacing: 1px
}

/* drag/arrow slider */
.jit-gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
  gap: 24px
}

.jit-gallery-heading h2 {
  color: var(--maroon);
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: -1.5px;
  margin: 13px 0 0
}

.jit-gallery-heading h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jit-gallery-controls {
  display: flex;
  gap: 7px
}

.jit-gallery-controls button {
  width: 51px;
  height: 51px;
  border: 1px solid #cfb19d;
  background: #fff9ee;
  color: var(--maroon);
  font-size: 21px;
  cursor: pointer;
  transition: background 250ms, color 250ms
}

.jit-gallery-controls button:hover {
  background: var(--maroon);
  color: white
}

.jit-gallery-scroll {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: 5px
}

.jit-gallery-scroll::-webkit-scrollbar {
  display: none
}

.jit-gallery-scroll figure {
  flex: none;
  width: 330px;
  margin: 0;
  scroll-snap-align: start
}

.jit-gallery-scroll .jit-photo {
  height: 275px
}

.jit-gallery-scroll figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0
}

.jit-gallery-scroll figcaption span {
  color: var(--terracotta);
  font: 700 11px var(--alt)
}

.jit-gallery-scroll figcaption strong {
  color: var(--maroon);
  font: 500 18px var(--serif)
}

.jit-gallery-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  border-top: 1px solid #decdbf;
  padding-top: 16px;
  gap: 15px;
  color: #9a8273;
  font: 700 9px var(--alt);
  letter-spacing: 1.3px
}

/* Visitor tips */
.jit-tips {
  background: #f2e5d7;
  padding: 62px 0
}

.jit-tips-layout {
  display: flex;
  gap: 70px
}

.jit-tips-left {
  position: relative;
  flex: 1 1 42%;
  min-width: 0;
  padding: 10px 0 15px
}

.jit-tips-left h2 {
  color: var(--maroon);
  font-size: 57px;
  line-height: 1.2;
  letter-spacing: -1.8px;
  margin: 15px 0 22px
}

.jit-tips-left h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jit-tips-left>p {
  max-width: 370px
}

.jit-tips-ornament {
  position: absolute;
  bottom: -35px;
  left: 40px;
  color: #ab715245;
  width: 270px;
  height: 270px;
  transform: rotate(-11deg);
  pointer-events: none
}

.jit-tips-ornament svg {
  width: 100%;
  height: 100%
}

.jit-tips-right {
  flex: 1 1 58%;
  min-width: 0
}

.jit-tip-item {
  display: flex;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid #d9bda8
}

.jit-tip-item:first-child {
  border-top: 1px solid #d9bda8
}

.jit-tip-item>span {
  font: 500 29px var(--serif);
  color: #ae735e;
  min-width: 41px
}

.jit-tip-item small {
  font: 700 9px var(--alt);
  color: #a56553;
  letter-spacing: 1.5px
}

.jit-tip-item h3 {
  font-size: 21px;
  color: var(--maroon);
  margin: 4px 0 7px
}

.jit-tip-item p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8
}

/* FAQ */
.jit-faq-layout {
  display: flex;
  gap: 85px
}

.jit-faq-intro {
  flex: 0 0 35%
}

.jit-faq-intro h2 {
  color: var(--maroon);
  font-size: 62px;
  line-height: 1.15;
  letter-spacing: -1.9px;
  margin: 15px 0 21px
}

.jit-faq-intro h2 em {
  color: var(--terracotta);
  font-weight: 400
}

.jit-faq-intro p {
  max-width: 310px
}

.jit-text-link {
  display: inline-flex;
  gap: 30px;
  align-items: center;
  color: var(--maroon);
  font: 700 12px var(--alt);
  border-bottom: 1px solid var(--terracotta);
  padding: 10px 0
}

.jit-text-link span {
  color: var(--terracotta);
  font-size: 18px
}

.jit-text-link:hover {
  color: var(--terracotta)
}

.jit-faq-items {
  flex: 1 1 0;
  min-width: 0
}

.jit-faq-item {
  border-bottom: 1px solid #dec7b5
}

.jit-faq-item:first-child {
  border-top: 1px solid #dec7b5
}

.jit-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 13px 0;
  cursor: pointer
}

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

.jit-faq-item summary b {
  font: 500 21px var(--serif);
  color: #ba816c;
  flex: none
}

.jit-faq-item summary span {
  font: 600 17px var(--serif);
  color: var(--maroon);
  flex: 1
}

.jit-faq-item summary i {
  font: 400 24px var(--sans);
  color: var(--terracotta);
  font-style: normal;
  transition: transform 250ms
}

.jit-faq-item[open] summary i {
  transform: rotate(45deg)
}

.jit-faq-item p {
  padding: 0 36px 19px 40px;
  margin: 0;
  font-size: 12px;
  line-height: 1.95
}

/* closing */
.jit-closing {
  background: radial-gradient(circle at 50% 20%, #74464b, #48282e 72%);
  text-align: center;
  color: #fff6e7;
  padding: 81px 0 0;
  overflow: hidden
}

.jit-closing-art {
  position: absolute;
  width: 430px;
  height: 400px;
  bottom: -60px;
  right: -70px;
  opacity: .13;
  color: #f8ccab;
  pointer-events: none;
  transform: rotate(8deg)
}

.jit-closing-art svg {
  width: 100%;
  height: 100%
}

.jit-closing-inner {
  position: relative;
  z-index: 1
}

.jit-closing .jit-kicker {
  color: #e0b498
}

.jit-closing h2 {
  font-size: 71px;
  letter-spacing: -2.5px;
  line-height: 1.16;
  margin: 17px 0 19px;
  color: #fff4e7
}

.jit-closing h2 em {
  font-weight: 400;
  color: #e6b393
}

.jit-closing p {
  max-width: 575px;
  margin: 0 auto 28px;
  color: #e7c7b8;
  font-size: 14px
}

.jit-closing-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap
}

.jit-closing-foot {
  border-top: 1px solid #ffffff30;
  min-height: 71px;
  margin-top: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  color: #ddbaa6;
  font: 700 10px var(--alt);
  letter-spacing: 1.7px
}

.jit-closing-foot span:nth-child(2) {
  font-size: 24px;
  color: #d8aa85
}

/* Responsive sizes */
@media(max-width:1300px) {
  .jit-hero h1 {
    font-size: 66px
  }

  .jit-hero-grid {
    gap: 35px
  }

  .jit-hero-postcard {
    left: -20px
  }

  .jit-hero-seal {
    right: -10px
  }

  .jit-plan-tab {
    padding: 15px 10px
  }

  .jit-plan-tab small {
    font-size: 8px
  }

  .jit-route-copy {
    padding: 45px 38px
  }

  .jit-route-copy h2 {
    font-size: 47px
  }
}

@media(max-width:1199px) {
  .jit-hero-grid {
    min-height: 610px
  }

  .jit-hero-art {
    height: 540px
  }

  .jit-hero-frame {
    height: 476px
  }

  .jit-hero h1 {
    font-size: 60px
  }

  .jit-hero-postcard {
    width: 152px;
    height: 188px
  }

  .jit-hero-postcard .jit-photo {
    height: 152px
  }

  .jit-hero-seal {
    height: 102px;
    width: 102px
  }

  .jit-hero-seal strong {
    font-size: 13px
  }

  .jit-hero-side {
    right: -9px
  }

  .jit-intro-stamp {
    width: 150px;
    height: 150px
  }

  .jit-journey-content {
    padding: 23px 20px
  }

  .jit-journey-content h3 {
    font-size: 26px
  }

  .jit-section-heading h2 {
    font-size: 52px
  }

  .jit-stop-image {
    width: 195px;
    height: 183px
  }

  .jit-plans {
    padding: 36px 30px
  }

  .jit-plan-tab small {
    display: none
  }

  .jit-plan-tab {
    justify-content: center
  }

  .jit-route-layout {
    min-height: 570px
  }

  .jit-route-photo {
    min-height: 570px
  }

  .jit-faq-layout {
    gap: 48px
  }
}

@media(max-width:991px) {
  .jit-hero-grid {
    gap: 18px;
    min-height: 520px
  }

  .jit-hero h1 {
    font-size: 49px
  }

  .jit-hero-copy>p {
    font-size: 13px
  }

  .jit-hero-art {
    height: 445px;
    padding: 16px 17px 19px
  }

  .jit-hero-frame {
    height: 400px
  }

  .jit-hero-postcard {
    width: 120px;
    height: 153px;
    left: -18px
  }

  .jit-hero-postcard .jit-photo {
    height: 119px
  }

  .jit-hero-postcard>span {
    font-size: 6px
  }

  .jit-hero-seal {
    width: 85px;
    height: 85px;
    right: -8px;
    top: 48px
  }

  .jit-hero-seal strong {
    font-size: 11px
  }

  .jit-hero-seal small {
    font-size: 5px
  }

  .jit-hero-side {
    display: none
  }

  .jit-hero-caption {
    margin-top: 40px
  }

  .jit-intro-row {
    gap: 20px
  }

  .jit-intro-stamp {
    display: none
  }

  .jit-intro-copy h2 {
    font-size: 42px
  }

  .jit-intro-numbers {
    width: 125px;
    padding-left: 15px
  }

  .jit-intro-numbers strong {
    font-size: 28px
  }

  .jit-intro-numbers span {
    font-size: 8px
  }

  .jit-journey-cards {
    flex-wrap: wrap
  }

  .jit-journey-card {
    flex: 1 1 47%
  }

  .jit-journey-content h3,
  .jit-journey-content p {
    min-height: 0
  }

  .jit-journey-image {
    height: 230px
  }

  .jit-plan-intro h2 {
    font-size: 43px
  }

  .jit-plan-intro-aside {
    flex-basis: 150px
  }

  .jit-plan-ordinal {
    font-size: 83px
  }

  .jit-planner-section {
    padding: 49px 0
  }

  .jit-stop-image {
    width: 155px;
    height: 171px
  }

  .jit-stop-body {
    padding-left: 0
  }

  .jit-stop-body h4 {
    font-size: 24px
  }

  .jit-stop-tip {
    flex-direction: column;
    gap: 3px
  }

  .jit-route-layout {
    flex-wrap: wrap
  }

  .jit-route-photo {
    flex: 1 1 100%;
    min-height: 340px;
    height: 340px
  }

  .jit-route-copy {
    flex: 1 1 100%
  }

  .jit-season-cards {
    flex-wrap: wrap
  }

  .jit-season-cards article {
    flex: 1 1 45%
  }

  .jit-season-cards p {
    min-height: 0
  }

  .jit-tips-layout {
    gap: 30px
  }

  .jit-tips-left h2 {
    font-size: 47px
  }

  .jit-tips-ornament {
    width: 190px;
    height: 190px
  }

  .jit-faq-intro {
    flex-basis: 33%
  }

  .jit-faq-intro h2 {
    font-size: 50px
  }

  .jit-closing h2 {
    font-size: 61px
  }
}

@media(max-width:767px) {
  .jit-hero {
    padding-top: 8px
  }

  .jit-hero-grid {
    flex-direction: column;
    gap: 11px;
    min-height: 0;
    padding-top: 18px
  }

  .jit-hero-copy {
    width: 100%;
    padding: 0 0 8px
  }

  .jit-crumb {
    margin-bottom: 25px
  }

  .jit-hero h1 {
    font-size: 56px;
    letter-spacing: -2px
  }

  .jit-hero-copy>p {
    max-width: 570px;
    margin-bottom: 24px
  }

  .jit-hero-caption {
    margin-top: 24px
  }

  .jit-hero-art {
    width: 100%;
    max-width: 560px;
    height: 475px;
    flex: none;
    align-self: center;
    padding: 18px 20px 45px 50px;
    margin-bottom: 9px
  }

  .jit-hero-art:before {
    inset: 8px 12px 46px 40px
  }

  .jit-hero-frame {
    height: 420px
  }

  .jit-hero-postcard {
    height: 183px;
    width: 149px;
    left: 9px;
    bottom: 1px
  }

  .jit-hero-postcard .jit-photo {
    height: 147px
  }

  .jit-hero-seal {
    width: 102px;
    height: 102px;
    right: 8px;
    top: 57px
  }

  .jit-hero-seal strong {
    font-size: 13px
  }

  .jit-hero-base {
    font-size: 8px;
    min-height: 52px
  }

  .jit-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }

  .jit-section-heading h2 {
    font-size: 48px
  }

  .jit-section-heading>p {
    max-width: 640px
  }

  .jit-intro-row {
    display: block
  }

  .jit-intro-copy h2 {
    font-size: 45px
  }

  .jit-intro-numbers {
    width: 100%;
    flex-direction: row;
    border: 0;
    border-top: 1px solid #dec6b6;
    padding: 11px 0 0;
    margin-top: 24px;
    justify-content: space-between
  }

  .jit-intro-numbers div {
    border: 0;
    padding: 0
  }

  .jit-journey-card {
    flex: 1 1 100%
  }

  .jit-journey-image {
    height: 260px
  }

  .jit-journey-content {
    padding: 23px 25px
  }

  .jit-journey-content h3 {
    font-size: 28px
  }

  .jit-journey-content p {
    max-width: 570px
  }

  .jit-journey-content ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px
  }

  .jit-tabbar {
    gap: 4px;
    padding: 4px
  }

  .jit-plan-tab {
    flex-direction: column;
    gap: 4px;
    padding: 9px 5px
  }

  .jit-plan-tab strong {
    font-size: 29px
  }

  .jit-plan-tab span {
    font-size: 14px
  }

  .jit-plans {
    padding: 27px 17px 30px
  }

  .jit-plan-intro {
    display: block
  }

  .jit-plan-intro h2 {
    font-size: 42px
  }

  .jit-plan-intro-aside {
    display: none
  }

  .jit-day {
    margin-top: 36px
  }

  .jit-day+.jit-day {
    padding-top: 31px
  }

  .jit-day-heading h3 {
    font-size: 35px
  }

  .jit-stop {
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 8px
  }

  .jit-stop-spine {
    width: 46px
  }

  .jit-stop-spine span {
    width: 44px;
    height: 44px;
    font-size: 16px
  }

  .jit-route-vertical:before {
    left: 22px
  }

  .jit-stop-image {
    height: 180px;
    width: calc(100% - 60px);
    flex: none
  }

  .jit-stop-body {
    margin-left: 60px;
    flex: 1 1 100%;
    padding: 0
  }

  .jit-stop-body h4 {
    font-size: 25px
  }

  .jit-stop-tip {
    flex-direction: row;
    gap: 10px
  }

  .jit-end-of-plan {
    flex-direction: column;
    align-items: stretch;
    padding: 24px
  }

  .jit-end-actions {
    flex-direction: row;
    flex-wrap: wrap
  }

  .jit-end-actions .jit-btn {
    flex: 1 1 200px
  }

  .jit-compare-inner {
    padding: 30px 20px
  }

  .jit-compare-head h2 {
    font-size: 43px
  }

  .jit-exp-item {
    flex: 1 1 44%;
    min-width: 0
  }

  .jit-exp-photo {
    height: 170px
  }

  .jit-route-copy {
    padding: 40px 30px
  }

  .jit-route-copy h2 {
    font-size: 46px
  }

  .jit-gallery-heading h2 {
    font-size: 45px
  }

  .jit-gallery-scroll figure {
    width: 290px
  }

  .jit-gallery-scroll .jit-photo {
    height: 240px
  }

  .jit-tips-layout {
    display: block
  }

  .jit-tips-left {
    padding-bottom: 15px
  }

  .jit-tips-left h2 {
    font-size: 45px
  }

  .jit-tips-ornament {
    right: 0;
    left: auto;
    top: 20px;
    width: 140px;
    height: 140px;
    opacity: .4
  }

  .jit-faq-layout {
    display: block
  }

  .jit-faq-intro {
    margin-bottom: 28px
  }

  .jit-faq-intro h2 {
    font-size: 51px
  }

  .jit-closing h2 {
    font-size: 55px
  }

  .jit-closing {
    padding-top: 64px
  }

  .jit-closing-foot {
    margin-top: 52px
  }
}

@media(max-width:575px) {
  .jit-hero h1 {
    font-size: 47px
  }

  .jit-hero-art {
    height: 380px;
    max-width: 440px;
    padding: 14px 20px 40px 36px
  }

  .jit-hero-frame {
    height: 339px
  }

  .jit-hero-art:before {
    inset: 4px 10px 45px 27px
  }

  .jit-hero-postcard {
    width: 117px;
    height: 143px;
    left: 2px
  }

  .jit-hero-postcard .jit-photo {
    height: 109px
  }

  .jit-hero-postcard>span {
    font-size: 6px;
    padding-top: 8px
  }

  .jit-hero-seal {
    right: 0;
    width: 84px;
    height: 84px;
    top: 41px
  }

  .jit-hero-seal strong {
    font-size: 11px
  }

  .jit-hero-caption small {
    font-size: 8px;
    letter-spacing: .5px
  }

  .jit-hero-caption i {
    width: 25px
  }

  .jit-hero-base {
    gap: 8px;
    font-size: 7px;
    letter-spacing: .3px
  }

  .jit-hero-base span:last-child {
    text-align: right
  }

  .jit-section-heading h2 {
    font-size: 40px
  }

  .jit-intro-copy h2 {
    font-size: 39px
  }

  .jit-intro-numbers strong {
    font-size: 25px
  }

  .jit-intro-numbers span {
    font-size: 7px
  }

  .jit-journey-image {
    height: 219px
  }

  .jit-plan-intro h2 {
    font-size: 35px
  }

  .jit-plan-facts span {
    font-size: 9px
  }

  .jit-day-heading h3 {
    font-size: 30px
  }

  .jit-stop-image {
    height: 161px
  }

  .jit-stop-body h4 {
    font-size: 23px
  }

  .jit-stop-time {
    gap: 8px;
    font-size: 9px
  }

  .jit-stop-tip {
    flex-direction: column;
    gap: 2px
  }

  .jit-stop-tip b {
    font-size: 8px
  }

  .jit-end-of-plan h3 {
    font-size: 25px
  }

  .jit-compare-head h2 {
    font-size: 37px
  }

  .jit-exp-item {
    flex: 1 1 100%
  }

  .jit-exp-photo {
    height: 215px
  }

  .jit-route-photo {
    min-height: 290px;
    height: 290px
  }

  .jit-route-copy {
    padding: 35px 23px
  }

  .jit-route-copy h2 {
    font-size: 39px
  }

  .jit-season-cards article {
    flex: 1 1 100%;
    padding: 25px
  }

  .jit-season-cards h3 {
    margin-top: 18px;
    font-size: 26px
  }

  .jit-gallery-heading h2 {
    font-size: 38px
  }

  .jit-gallery-scroll figure {
    width: 270px
  }

  .jit-gallery-scroll .jit-photo {
    height: 225px
  }

  .jit-gallery-bottom {
    font-size: 7px
  }

  .jit-tips-left h2 {
    font-size: 41px
  }

  .jit-tips-ornament {
    height: 110px;
    width: 110px
  }

  .jit-tip-item {
    gap: 14px
  }

  .jit-tip-item>span {
    font-size: 25px;
    min-width: 32px
  }

  .jit-faq-intro h2 {
    font-size: 45px
  }

  .jit-faq-item summary span {
    font-size: 15px
  }

  .jit-faq-item summary {
    gap: 13px;
    min-height: 68px
  }

  .jit-faq-item p {
    padding-left: 33px;
    padding-right: 8px
  }

  .jit-closing h2 {
    font-size: 43px
  }

  .jit-closing-foot {
    font-size: 8px;
    letter-spacing: .4px
  }

  .jit-closing-actions {
    flex-direction: column;
    align-items: stretch
  }

  .jit-closing-actions .jit-btn {
    width: 100%
  }
}

@media(max-width:370px) {
  .jit-hero h1 {
    font-size: 41px
  }

  .jit-hero-art {
    height: 332px;
    padding-left: 30px
  }

  .jit-hero-frame {
    height: 297px
  }

  .jit-hero-postcard {
    width: 100px;
    height: 127px
  }

  .jit-hero-postcard .jit-photo {
    height: 94px
  }

  .jit-hero-seal {
    height: 73px;
    width: 73px
  }

  .jit-hero-seal strong {
    font-size: 9px
  }

  .jit-hero-seal small {
    font-size: 4px
  }

  .jit-btn {
    font-size: 11px;
    padding-left: 14px
  }

  .jit-plan-tab span {
    font-size: 12px
  }

  .jit-plan-tab strong {
    font-size: 24px
  }

  .jit-plan-intro h2 {
    font-size: 32px
  }

  .jit-stop-image {
    height: 145px
  }

  .jit-section-heading h2 {
    font-size: 36px
  }

  .jit-intro-copy h2 {
    font-size: 36px
  }

  .jit-intro-numbers {
    gap: 2px
  }

  .jit-intro-numbers strong {
    font-size: 23px
  }

  .jit-intro-numbers div {
    gap: 6px
  }

  .jit-route-copy h2 {
    font-size: 37px
  }

  .jit-gallery-heading h2 {
    font-size: 35px
  }

  .jit-gallery-controls button {
    height: 40px;
    width: 40px
  }
}

/* Print only the selected itinerary, with useful trip details intact. */
@media print {

  .top-ribbon,
  .site-header,
  .site-footer,
  .loading-curtain,
  .reading-progress,
  .jit-hero,
  .jit-intro,
  .jit-journeys,
  .jit-compare,
  .jit-experiences,
  .jit-route-story,
  .jit-seasons,
  .jit-gallery,
  .jit-tips,
  .jit-faq,
  .jit-closing,
  .jit-tabbar,
  .jit-end-of-plan {
    display: none !important
  }

  .jit-page,
  .jit-planner-section,
  .jit-plans {
    background: white !important;
    overflow: visible !important
  }

  .jit-planner-section {
    padding: 0 !important;
    margin: 0 !important
  }

  .jit-plans {
    border: 0 !important;
    padding: 0 !important
  }

  .jit-stop,
  .jit-day {
    break-inside: avoid;
    page-break-inside: avoid
  }

  .jit-stop-image {
    height: 100px;
    width: 130px
  }

  .jit-page .jit-section {
    margin-top: 0
  }

  .jit-stop-body h4 {
    font-size: 18px
  }

  .jit-day-heading h3 {
    font-size: 28px
  }
}

@media(prefers-reduced-motion:reduce) {

  .jit-page *,
  .jit-page *::before,
  .jit-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

/* Jaipur Heritage Tour — Contact Us
   All page-specific selectors use jct-. Shared header/footer remain inherited.
   Flexible dimensions are percentages; custom spacing/sizes are pixel based.
   No CSS grid, clamp, vw, vh, rem or fixed viewport heights. */
.jct-page {
  color: var(--ink);
  overflow: hidden
}

.jct-page .jct-section {
  margin-top: 50px
}

.jct-page a {
  text-decoration: none
}

.jct-page a:focus-visible,
.jct-page button:focus-visible,
.jct-page input:focus-visible,
.jct-page select:focus-visible,
.jct-page textarea:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px
}

.jct-page p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--body)
}

.jct-eyebrow,
.jct-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2.5px;
  color: var(--terracotta)
}

.jct-kicker i {
  width: 31px;
  height: 1px;
  background: currentColor
}

.jct-page h1,
.jct-page h2,
.jct-page h3 {
  font-family: var(--serif);
  font-weight: 500
}

.jct-page h1 em,
.jct-page h2 em,
.jct-page h3 em {
  color: var(--terracotta);
  font-weight: 400
}

.jct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 54px;
  padding: 7px 7px 7px 24px;
  font-family: var(--alt);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 300ms ease, background 250ms, color 250ms;
  white-space: nowrap
}

.jct-btn:hover {
  transform: translateY(-3px)
}

.jct-btn b {
  width: 39px;
  height: 39px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  background: rgba(255, 255, 255, .11)
}

.jct-btn--primary {
  background: var(--maroon);
  color: #fff9f0
}

.jct-btn--primary:hover {
  background: var(--terracotta);
  color: white
}

.jct-btn--outline {
  border-color: #b88c72;
  color: var(--maroon);
  background: transparent
}

.jct-btn--outline b {
  background: rgba(94, 52, 45, .07)
}

.jct-btn--outline:hover {
  background: #eee1d2;
  color: var(--maroon)
}

.jct-text-link {
  font-family: var(--alt);
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--terracotta);
  padding: 6px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 45px;
  color: var(--maroon);
  transition: gap 250ms, color 250ms
}

.jct-text-link span {
  color: var(--terracotta);
  font-size: 22px
}

.jct-text-link:hover {
  gap: 55px;
  color: var(--terracotta)
}

.site-header .jct-nav-contact-active {
  background: var(--terracotta);
  border-color: var(--terracotta)
}

.site-header .jct-nav-contact-active:hover {
  background: var(--maroon)
}

.site-header .mobile-menu .mobile-contact-link.active {
  background: var(--terracotta);
  color: white;
  padding-left: 16px
}

.site-header .mobile-menu .mobile-contact-link.active::before {
  display: none
}

/* 1 / Warm photo-led hero with light line art only as a backdrop */
.jct-hero {
  position: relative;
  background: radial-gradient(circle at 17% 17%, #fffaf2 0, transparent 44%), var(--ivory);
  padding-top: 20px;
  isolation: isolate
}

.jct-hero-etching {
  position: absolute;
  left: -125px;
  top: 120px;
  width: 440px;
  height: 450px;
  color: rgba(131, 67, 54, .065);
  pointer-events: none;
  z-index: -1;
  transform: rotate(-6deg)
}

.jct-hero-etching svg {
  width: 100%;
  height: 100%
}

.jct-hero-layout {
  display: flex;
  align-items: center;
  gap: 50px;
  min-height: 620px
}

.jct-hero-copy {
  flex: 1 1 54%;
  min-width: 0;
  position: relative;
  padding-bottom: 28px
}

.jct-breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #a58a76;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 50px
}

.jct-breadcrumb a {
  transition: color 250ms
}

.jct-breadcrumb a:hover {
  color: var(--terracotta)
}

.jct-breadcrumb span:nth-child(2) {
  color: var(--gold)
}

.jct-breadcrumb span:last-child {
  color: var(--terracotta)
}

.jct-hero-copy h1 {
  font-size: 65px;
  line-height: 1.19;
  letter-spacing: -2.8px;
  color: var(--maroon);
  margin: 22px 0 25px
}

.jct-hero-copy>p {
  max-width: 510px;
  font-size: 15px;
  line-height: 2.05;
  margin-bottom: 29px
}

.jct-hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap
}

.jct-hero-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 47px;
  padding-top: 22px;
  border-top: 1px solid #e4d2bc;
  width: 320px
}

.jct-sun {
  font-size: 40px;
  color: var(--gold);
  line-height: 1
}

.jct-hero-note strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--maroon);
  font-weight: 500
}

.jct-hero-note small {
  font-size: 9px;
  color: #ad9681;
  letter-spacing: 1.2px;
  font-weight: 700
}

.jct-hero-visual {
  position: relative;
  flex: 1 1 46%;
  min-width: 0;
  height: 612px;
  padding: 38px 42px 38px 29px
}

.jct-hero-image-border {
  position: absolute;
  top: 20px;
  left: 15px;
  right: 26px;
  bottom: 51px;
  border: 1px solid rgba(163, 79, 65, .45);
  border-radius: 300px 300px 3px 3px
}

.jct-hero-photo {
  height: 530px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 270px 270px 3px 3px;
  background: linear-gradient(145deg, #d6aa83, #9f5a4b)
}

.jct-hero-photo::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(transparent, rgba(54, 31, 30, .7));
  pointer-events: none;
  z-index: 2
}

.jct-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1000ms cubic-bezier(.17, .67, .24, 1);
  z-index: 1
}

.jct-hero-photo:hover img {
  transform: scale(1.055)
}

.jct-photo-art {
  position: absolute;
  inset: 35px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 236, 211, .75)
}

.jct-photo-art svg {
  width: 95%;
  height: 95%
}

.jct-hero-seal {
  position: absolute;
  left: -28px;
  bottom: 58px;
  z-index: 4;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 6px double #e8c9a7;
  background: var(--maroon);
  color: #f3e3ce;
  box-shadow: 0 13px 32px #502d2b33;
  transform: rotate(-12deg)
}

.jct-hero-seal span {
  font-size: 7px;
  letter-spacing: 1.3px
}

.jct-hero-seal strong {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: 2px;
  font-weight: 400
}

.jct-hero-seal small {
  font-size: 7px;
  letter-spacing: 1px
}

.jct-photo-credit {
  position: absolute;
  right: 76px;
  bottom: 70px;
  color: white;
  z-index: 4;
  letter-spacing: 2px;
  font-size: 9px;
  font-weight: 700
}

.jct-photo-credit span {
  color: #eabf96;
  padding: 0 5px
}

.jct-hero-vertical {
  position: absolute;
  right: 2px;
  top: 169px;
  color: #ad8e77;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 2px
}

.jct-hero-bottom {
  min-height: 77px;
  display: flex;
  align-items: center;
  gap: 27px;
  color: #9c8571;
  border-top: 1px solid #e4d4c3;
  font-family: var(--alt);
  font-weight: 700;
  letter-spacing: 1.9px;
  font-size: 9px
}

.jct-hero-bottom span:nth-child(2) {
  font-size: 20px;
  color: var(--gold)
}

.jct-hero-bottom i {
  height: 1px;
  background: #dfcbb4;
  flex: 1
}

/* 2 / Magazine intro */
.jct-intro-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 58px;
  border-bottom: 1px solid #e0cdb8;
  padding-top: 25px;
  padding-bottom: 51px
}

.jct-intro-inner>.jct-eyebrow {
  align-self: flex-start;
  flex: 0 0 160px;
  margin-top: 19px
}

.jct-intro h2 {
  font-size: 38px;
  letter-spacing: -1px;
  line-height: 1.4;
  color: var(--maroon);
  margin: 0;
  flex: 1 1 47%
}

.jct-intro-side {
  flex: 1 1 31%;
  max-width: 300px
}

.jct-intro-side p {
  margin: 0 0 16px;
  font-size: 13px
}

.jct-intro-side>span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #a78b73
}

.jct-intro-side b {
  color: var(--gold);
  margin-left: 7px
}

/* 3 / Form stage */
.jct-enquiry-layout {
  display: flex;
  gap: 38px;
  align-items: stretch
}

.jct-form-shell {
  flex: 1 1 65%;
  min-width: 0;
  background: #fffaf3;
  border: 1px solid #e6d6c4;
  box-shadow: 0 20px 60px #78523d0d;
  padding: 50px 49px 42px;
  position: relative
}

.jct-form-shell::before,
.jct-form-shell::after {
  position: absolute;
  content: '';
  width: 41px;
  height: 41px;
  border: 1px solid #c9a681;
  pointer-events: none
}

.jct-form-shell::before {
  left: 12px;
  top: 12px;
  border-right: 0;
  border-bottom: 0
}

.jct-form-shell::after {
  right: 12px;
  bottom: 12px;
  border-top: 0;
  border-left: 0
}

.jct-form-heading {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #e4d1bf;
  padding-bottom: 26px;
  margin-bottom: 28px
}

.jct-form-heading>div:first-child {
  max-width: 520px
}

.jct-form-heading h2 {
  font-size: 39px;
  line-height: 1.22;
  letter-spacing: -1.4px;
  color: var(--maroon);
  margin: 17px 0 11px
}

.jct-form-heading p {
  font-size: 13px;
  max-width: 500px;
  margin: 0
}

.jct-form-stamp {
  flex: 0 0 108px;
  color: #ba8f78;
  transform: rotate(7deg)
}

.jct-form-stamp svg {
  width: 100%;
  height: 108px
}

.jct-form {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.jct-field-row {
  display: flex;
  align-items: flex-start;
  gap: 20px
}

.jct-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  flex: 1 1 50%
}

.jct-field label,
.jct-interests legend {
  font-family: var(--alt);
  color: var(--maroon);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6
}

.jct-field label>span {
  color: var(--terracotta)
}

.jct-field label small,
.jct-interests legend small {
  font-family: var(--sans);
  font-size: 10px;
  color: #aa9180;
  font-weight: 400
}

.jct-field input,
.jct-field select,
.jct-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  background: #fffdf9;
  border: 1px solid #dccaB7;
  border-radius: 2px;
  min-height: 51px;
  color: var(--maroon);
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  outline: none;
  transition: border-color 250ms, background 250ms, box-shadow 250ms
}

.jct-field select {
  appearance: none;
  padding-right: 37px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2 5 5 5 5-5' fill='none' stroke='%238e695e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center
}

.jct-field input::placeholder,
.jct-field textarea::placeholder {
  color: #ac9b8f
}

.jct-field input:hover,
.jct-field select:hover,
.jct-field textarea:hover {
  border-color: #b68c75
}

.jct-field input:focus,
.jct-field select:focus,
.jct-field textarea:focus {
  border-color: var(--terracotta);
  background: white;
  box-shadow: 0 0 0 3px #c5775b1e
}

.jct-field textarea {
  min-height: 126px;
  resize: vertical
}

.jct-field-help {
  font-size: 9px;
  color: #aa9180
}

.jct-interests {
  padding: 0;
  margin: 5px 0 0;
  border: 0;
  min-width: 0
}

.jct-interests legend {
  padding: 0 0 12px;
  margin: 0
}

.jct-interest-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.jct-interest-options label {
  position: relative;
  margin: 0;
  cursor: pointer
}

.jct-interest-options input {
  position: absolute;
  left: 8px;
  top: 13px;
  width: 15px;
  height: 15px;
  opacity: 0
}

.jct-interest-options span {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  background: #f8f1e8;
  border: 1px solid #dfcab5;
  font-family: var(--alt);
  font-size: 10px;
  color: #795f53;
  transition: background 220ms, color 220ms, border-color 220ms
}

.jct-interest-options span:hover {
  border-color: var(--terracotta)
}

.jct-interest-options input:checked+span {
  background: var(--maroon);
  border-color: var(--maroon);
  color: white
}

.jct-interest-options input:focus-visible+span {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px
}

.jct-field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #af9b8c
}

.jct-field-meta small {
  font-size: 9px
}

.jct-message {
  margin-top: 2px
}

.jct-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid #e6d6c4
}

.jct-privacy {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  max-width: 390px
}

.jct-privacy>span {
  font-size: 24px;
  color: var(--gold);
  line-height: 1
}

.jct-privacy p {
  font-size: 10px;
  line-height: 1.8;
  margin: 0
}

.jct-privacy strong {
  color: var(--maroon)
}

.jct-submit {
  border: 0;
  flex: 0 0 auto
}

.jct-prepared {
  margin-top: 28px;
  padding: 28px;
  background: #f3e7d8;
  border: 1px solid #d8bfa4
}

.jct-prepared[hidden] {
  display: none
}

.jct-prepared h3 {
  font-size: 30px;
  color: var(--maroon);
  margin: 11px 0
}

.jct-prepared>p {
  font-size: 12px;
  max-width: 600px
}

.jct-prepared textarea {
  width: 100%;
  min-height: 194px;
  resize: vertical;
  padding: 16px;
  border: 1px solid #d2baa0;
  background: #fffaf3;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.9;
  font-family: var(--sans)
}

.jct-prepared-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 17px
}

.jct-copy-status {
  font-size: 11px !important;
  color: var(--terracotta) !important;
  min-height: 20px;
  margin: 10px 0 0
}

.jct-aside {
  flex: 1 1 35%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.jct-aside-top {
  background: #f0e5d7;
  padding: 40px 35px 34px;
  position: relative;
  overflow: hidden
}

.jct-aside-top::before {
  position: absolute;
  content: '';
  right: -90px;
  bottom: -110px;
  width: 250px;
  height: 250px;
  border: 1px solid #b99e8540;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #b99e8511, 0 0 0 65px #b99e850b
}

.jct-aside-art {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 124px;
  height: 124px;
  color: #b99576;
  margin: 19px 0 5px
}

.jct-aside-art svg {
  width: 100%;
  height: 100%
}

.jct-aside-top h3 {
  font-size: 35px;
  line-height: 1.32;
  color: var(--maroon);
  margin: 10px 0 15px;
  letter-spacing: -1px
}

.jct-aside-top p {
  position: relative;
  font-size: 12px;
  margin: 0 0 25px
}

.jct-aside-top>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0 8px;
  border-top: 1px solid #d9c0a9;
  border-bottom: 1px solid #d9c0a9;
  font-family: var(--alt);
  font-size: 12px;
  font-weight: 600;
  color: var(--maroon)
}

.jct-aside-top>a span {
  font-size: 21px;
  color: var(--terracotta)
}

.jct-aside-photo {
  height: 330px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #c89976, #955449)
}

.jct-aside-photo>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 750ms
}

.jct-aside-photo:hover>img {
  transform: scale(1.055)
}

.jct-aside-photo::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(transparent 25%, rgba(58, 31, 30, .79));
  pointer-events: none
}

.jct-aside-image-art {
  color: #f5d7b4;
  position: absolute;
  inset: 20px 50px
}

.jct-aside-image-art svg {
  width: 100%;
  height: 100%
}

.jct-aside-photo-caption {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  left: 27px;
  right: 20px;
  color: white
}

.jct-aside-photo-caption span {
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 700;
  display: block;
  margin-bottom: 7px
}

.jct-aside-photo-caption strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px
}

.jct-aside-postscript {
  display: flex;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #e2cdb8;
  padding: 18px 0
}

.jct-aside-postscript b {
  font-size: 32px;
  line-height: 1;
  color: var(--gold);
  font-weight: 400
}

.jct-aside-postscript span {
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 1.3px
}

.jct-aside-postscript small {
  font-size: 9px;
  color: #b09a84;
  letter-spacing: 1.7px
}

/* 4 / Three editorial action cards */
.jct-section-heading {
  text-align: center;
  max-width: 610px;
  margin: 0 auto 31px
}

.jct-section-heading h2 {
  font-size: 45px;
  color: var(--maroon);
  line-height: 1.2;
  letter-spacing: -1.4px;
  margin: 14px 0 14px
}

.jct-section-heading p {
  font-size: 13px;
  margin: 0
}

.jct-ways-grid {
  display: flex;
  gap: 20px;
  align-items: stretch
}

.jct-way {
  flex: 1 1 33.333%;
  min-width: 0;
  position: relative;
  background: #f2e8dc;
  border: 1px solid #e6d4c1;
  padding: 34px 34px 30px;
  overflow: hidden;
  transition: transform 350ms, box-shadow 350ms, background 350ms
}

.jct-way:nth-child(2) {
  background: #f9f3ea
}

.jct-way:nth-child(3) {
  background: #e9dfcf
}

.jct-way:hover {
  transform: translateY(-7px);
  box-shadow: 0 19px 32px #56392d14
}

.jct-way::after {
  content: '';
  position: absolute;
  right: -27px;
  top: -35px;
  font-size: 150px;
  font-family: Georgia, serif;
  color: #9e625710;
  pointer-events: none
}

.jct-way-number {
  font-family: var(--alt);
  font-weight: 700;
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 1.5px
}

.jct-way-icon {
  font-family: Georgia, serif;
  color: var(--gold);
  font-size: 61px;
  margin: 15px 0 4px;
  line-height: 1.2
}

.jct-way h3 {
  font-size: 26px;
  letter-spacing: -.5px;
  color: var(--maroon);
  margin: 12px 0 12px
}

.jct-way p {
  font-size: 12px;
  line-height: 2;
  max-width: 305px;
  min-height: 80px
}

.jct-way a {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid #ba8c72;
  padding-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--maroon)
}

.jct-way a span {
  font-size: 19px;
  color: var(--terracotta)
}

/* 5 / Illustrated Jaipur map, no fictitious premises/address */
.jct-city {
  background: #f0e5d6
}

.jct-city-layout {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  gap: 72px;
  padding-top: 65px;
  padding-bottom: 65px
}

.jct-city-art {
  flex: 1 1 49%;
  min-width: 0;
  min-height: 417px;
  background: #e3c6ac;
  position: relative;
  overflow: hidden;
  border: 1px solid #c6a38e;
  box-shadow: inset 0 0 0 13px #edd9c3
}

.jct-city-art::before {
  content: '';
  position: absolute;
  inset: 34px;
  border: 1px solid #b98471;
  pointer-events: none
}

.jct-city-art::after {
  content: '';
  position: absolute;
  left: -110px;
  bottom: -185px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid #bb886d80;
  box-shadow: 0 0 0 35px #bb886d17, 0 0 0 75px #bb886d11;
  pointer-events: none
}

.jct-city-art-lines {
  position: absolute;
  left: 17%;
  top: 20%;
  width: 67%;
  height: 64%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #99554b
}

.jct-city-art-lines svg {
  width: 100%;
  height: 100%
}

.jct-city-tiny {
  position: absolute;
  top: 47px;
  left: 58px;
  color: #93584e;
  font-family: var(--alt);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 10px
}

.jct-city-coordinates {
  position: absolute;
  right: 27px;
  top: 36px;
  text-align: right;
  line-height: 1.8;
  color: #9b6e57;
  letter-spacing: 1px;
  font-size: 10px
}

.jct-city-pin {
  position: absolute;
  bottom: 69px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--maroon);
  color: white;
  padding: 9px 15px;
  box-shadow: 0 9px 15px #6e403035
}

.jct-city-pin b {
  font-size: 20px;
  color: #e7bc92;
  font-weight: 400
}

.jct-city-pin span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px
}

.jct-city-art-footer {
  position: absolute;
  bottom: 31px;
  left: 59px;
  right: 59px;
  font-size: 9px;
  letter-spacing: 1.7px;
  font-weight: 700;
  color: #9a6b52;
  border-top: 1px solid #bc9478;
  padding-top: 8px;
  display: flex;
  justify-content: space-between
}

.jct-city-copy {
  flex: 1 1 51%;
  min-width: 0;
  align-self: center
}

.jct-city-copy h2 {
  font-size: 47px;
  line-height: 1.28;
  letter-spacing: -1.5px;
  color: var(--maroon);
  margin: 19px 0 20px
}

.jct-city-copy>p {
  max-width: 570px
}

.jct-city-details {
  border-top: 1px solid #d9bda2;
  margin: 28px 0 25px
}

.jct-city-details>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dec6ae;
  padding: 14px 0
}

.jct-city-details small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #a38169
}

.jct-city-details strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--maroon);
  text-align: right
}

/* 6 / Process */
.jct-guide-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px
}

.jct-guide-head h2 {
  font-size: 46px;
  color: var(--maroon);
  line-height: 1.3;
  letter-spacing: -1.6px;
  margin: 16px 0 30px
}

.jct-guide-head>p {
  max-width: 280px;
  font-size: 13px;
  margin: 0 0 30px
}

.jct-steps {
  display: flex;
  gap: 0;
  border-top: 1px solid #d7bda5;
  border-bottom: 1px solid #d7bda5
}

.jct-steps>article {
  flex: 1 1 33.333%;
  min-width: 0;
  padding: 30px 30px 24px;
  border-right: 1px solid #dfc8b1;
  position: relative
}

.jct-steps>article:first-child {
  padding-left: 0
}

.jct-steps>article:last-child {
  border: 0
}

.jct-steps>article>span {
  font-family: var(--serif);
  font-size: 51px;
  color: #cb9e82;
  line-height: 1
}

.jct-steps h3 {
  font-size: 24px;
  color: var(--maroon);
  margin: 15px 0 10px
}

.jct-steps p {
  font-size: 12px;
  margin: 0
}

/* 7 / FAQ */
.jct-faq {
  background: #fff9f0;
  padding: 70px 0 62px
}

.jct-faq-layout {
  display: flex;
  gap: 85px;
  align-items: flex-start
}

.jct-faq-intro {
  flex: 0 0 40%;
  min-width: 0
}

.jct-faq-intro h2 {
  font-size: 47px;
  line-height: 1.32;
  letter-spacing: -1.4px;
  color: var(--maroon);
  margin: 18px 0
}

.jct-faq-intro>p {
  max-width: 360px
}

.jct-faq-etching {
  width: 270px;
  height: 204px;
  color: #c59f82;
  transform: rotate(-6deg);
  margin: 15px 0 0
}

.jct-faq-etching svg {
  height: 100%;
  width: 100%
}

.jct-faq-list {
  flex: 1;
  min-width: 0;
  border-top: 1px solid #e0c9b4
}

.jct-faq-list details {
  border-bottom: 1px solid #e0c9b4;
  padding: 0
}

.jct-faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 19px;
  min-height: 83px;
  padding: 16px 0;
  color: var(--maroon);
  font-family: var(--alt);
  font-size: 14px;
  font-weight: 600
}

.jct-faq-list summary::-webkit-details-marker {
  display: none
}

.jct-faq-list summary b {
  align-self: center;
  font-size: 10px;
  color: var(--terracotta);
  letter-spacing: 1px
}

.jct-faq-list summary span {
  flex: 1
}

.jct-faq-list summary i {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 22px;
  color: var(--terracotta);
  border: 1px solid #e2c7b0;
  border-radius: 50%;
  font-weight: 400;
  transition: transform 300ms
}

.jct-faq-list details[open] summary i {
  transform: rotate(45deg)
}

.jct-faq-list details p {
  margin: 0 35px 23px 32px;
  max-width: 540px;
  font-size: 12px;
  line-height: 2
}

/* 8 / Closing */
.jct-closing {
  background: var(--maroon);
  color: #fff7eb;
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 82px 0 0
}

.jct-closing-art {
  position: absolute;
  top: -55px;
  right: -80px;
  width: 450px;
  height: 500px;
  color: #ffffff09;
  pointer-events: none;
  transform: rotate(13deg)
}

.jct-closing-art svg {
  width: 100%;
  height: 100%
}

.jct-closing-content {
  position: relative
}

.jct-closing .jct-eyebrow {
  color: #e9b994
}

.jct-closing h2 {
  font-size: 67px;
  line-height: 1.22;
  letter-spacing: -2px;
  margin: 20px auto;
  color: #fff9ef
}

.jct-closing h2 em {
  color: #e7ba9e
}

.jct-closing p {
  max-width: 510px;
  color: #eddacc;
  font-size: 14px;
  margin: 0 auto 27px
}

.jct-closing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px
}

.jct-btn--light {
  background: #fff8ea;
  color: var(--maroon)
}

.jct-btn--light b {
  background: #e9ddce
}

.jct-btn--light:hover {
  background: white;
  color: var(--maroon)
}

.jct-btn--ghost {
  border-color: #9e7980;
  color: #fff7ea;
  background: transparent
}

.jct-btn--ghost:hover {
  background: #75484e;
  color: white
}

.jct-closing-foot {
  margin-top: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ffffff2b;
  min-height: 66px;
  color: #e6c7b2;
  font-family: var(--alt);
  font-size: 9px;
  letter-spacing: 1.5px
}

.jct-closing-foot span:nth-child(2) {
  font-size: 23px
}

@media(max-width:1299px) {
  .jct-hero-layout {
    gap: 25px
  }

  .jct-hero-copy h1 {
    font-size: 55px
  }

  .jct-hero-visual {
    height: 566px
  }

  .jct-hero-photo {
    height: 486px
  }

  .jct-form-shell {
    padding: 38px 30px
  }

  .jct-aside-top {
    padding: 32px 25px
  }

  .jct-enquiry-layout {
    gap: 22px
  }

  .jct-intro-inner {
    gap: 30px
  }

  .jct-city-layout {
    gap: 50px
  }

  .jct-faq-layout {
    gap: 50px
  }
}

@media(max-width:1099px) {
  .jct-hero-copy h1 {
    font-size: 48px
  }

  .jct-hero-copy>p {
    font-size: 13px
  }

  .jct-hero-visual {
    height: 510px;
    padding: 32px 22px 32px
  }

  .jct-hero-photo {
    height: 446px
  }

  .jct-hero-image-border {
    right: 10px;
    bottom: 40px
  }

  .jct-hero-seal {
    height: 109px;
    width: 109px;
    left: -16px;
    bottom: 52px;
    border-width: 4px
  }

  .jct-hero-seal strong {
    font-size: 21px
  }

  .jct-hero-seal span,
  .jct-hero-seal small {
    font-size: 6px
  }

  .jct-photo-credit {
    right: 35px;
    bottom: 60px
  }

  .jct-hero-vertical {
    display: none
  }

  .jct-intro-inner {
    flex-wrap: wrap
  }

  .jct-intro-inner>.jct-eyebrow {
    flex: 0 0 100%;
    margin: 0
  }

  .jct-intro h2 {
    flex-basis: 50%
  }

  .jct-intro-side {
    flex-basis: 35%
  }

  .jct-enquiry-layout {
    flex-wrap: wrap
  }

  .jct-form-shell {
    flex-basis: 100%
  }

  .jct-aside {
    flex-direction: row;
    flex-basis: 100%;
    align-items: stretch
  }

  .jct-aside-top {
    flex: 1 1 53%
  }

  .jct-aside-photo {
    flex: 1 1 47%;
    height: auto;
    min-height: 400px
  }

  .jct-aside-postscript {
    display: none
  }

  .jct-ways-grid {
    gap: 12px
  }

  .jct-way {
    padding: 25px 20px
  }

  .jct-way h3 {
    font-size: 22px
  }

  .jct-way p {
    min-height: 97px
  }

  .jct-city-layout {
    gap: 30px
  }

  .jct-city-copy h2 {
    font-size: 38px
  }

  .jct-faq-layout {
    gap: 35px
  }

  .jct-faq-intro h2 {
    font-size: 37px
  }
}

@media(max-width:767px) {
  .jct-hero {
    padding-top: 16px
  }

  .jct-hero-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 0
  }

  .jct-hero-copy {
    flex: none;
    padding: 6px 0 0
  }

  .jct-breadcrumb {
    margin-bottom: 24px
  }

  .jct-hero-copy h1 {
    font-size: 52px;
    letter-spacing: -2.4px;
    margin: 14px 0 17px;
    line-height: 1.14
  }

  .jct-hero-copy>p {
    font-size: 13px;
    max-width: 530px;
    margin: 0 0 23px
  }

  .jct-hero-note {
    margin-top: 27px;
    padding-top: 16px
  }

  .jct-hero-visual {
    height: 410px;
    flex: none;
    margin: 15px auto 0;
    width: 100%;
    max-width: 520px;
    padding: 24px 36px 22px
  }

  .jct-hero-photo {
    height: 363px
  }

  .jct-hero-image-border {
    left: 24px;
    right: 20px;
    top: 10px;
    bottom: 25px
  }

  .jct-hero-seal {
    left: 0;
    bottom: 19px
  }

  .jct-photo-credit {
    bottom: 41px;
    right: 49px
  }

  .jct-hero-bottom {
    min-height: 51px;
    gap: 12px;
    font-size: 8px
  }

  .jct-hero-bottom span:nth-child(3) {
    display: none
  }

  .jct-hero-etching {
    width: 320px;
    height: 320px;
    left: -160px;
    top: 120px
  }

  .jct-intro-inner {
    padding-top: 3px;
    padding-bottom: 31px;
    gap: 10px
  }

  .jct-intro h2 {
    flex-basis: 100%;
    font-size: 35px
  }

  .jct-intro-side {
    flex-basis: 100%;
    max-width: 520px
  }

  .jct-enquiry-layout {
    gap: 23px
  }

  .jct-form-shell {
    padding: 34px 23px
  }

  .jct-form-heading h2 {
    font-size: 34px
  }

  .jct-form-stamp {
    width: 77px;
    flex-basis: 77px
  }

  .jct-form-stamp svg {
    height: 76px
  }

  .jct-field-row {
    gap: 14px
  }

  .jct-field input,
  .jct-field select,
  .jct-field textarea {
    font-size: 12px
  }

  .jct-aside {
    flex-direction: column
  }

  .jct-aside-photo {
    min-height: 350px;
    height: 350px;
    flex: none
  }

  .jct-ways-grid {
    flex-wrap: wrap;
    gap: 13px
  }

  .jct-way {
    flex: 1 1 47%
  }

  .jct-way:last-child {
    flex-basis: 100%
  }

  .jct-way p {
    min-height: 0
  }

  .jct-city-layout {
    flex-direction: column;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 45px
  }

  .jct-city-art {
    width: 100%;
    min-height: 378px;
    flex: none
  }

  .jct-city-copy {
    flex: none
  }

  .jct-city-copy h2 {
    font-size: 41px
  }

  .jct-guide-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0
  }

  .jct-guide-head h2 {
    font-size: 40px;
    margin-bottom: 10px
  }

  .jct-guide-head>p {
    max-width: 540px;
    margin-bottom: 20px
  }

  .jct-steps>article {
    padding: 22px 16px
  }

  .jct-steps h3 {
    font-size: 19px
  }

  .jct-steps>article>span {
    font-size: 39px
  }

  .jct-faq {
    padding: 42px 0
  }

  .jct-faq-layout {
    flex-direction: column;
    gap: 20px
  }

  .jct-faq-intro {
    flex: none
  }

  .jct-faq-intro h2 {
    font-size: 41px
  }

  .jct-faq-etching {
    display: none
  }

  .jct-faq-list {
    flex: none;
    width: 100%
  }

  .jct-closing {
    padding-top: 64px
  }

  .jct-closing h2 {
    font-size: 54px
  }

  .jct-closing-foot {
    margin-top: 50px
  }
}

@media(max-width:549px) {
  .jct-hero-copy h1 {
    font-size: 43px;
    letter-spacing: -1.6px
  }

  .jct-hero-actions {
    gap: 15px
  }

  .jct-hero-note {
    width: 100%
  }

  .jct-hero-visual {
    height: 329px;
    padding: 20px 26px 18px
  }

  .jct-hero-photo {
    height: 290px
  }

  .jct-hero-image-border {
    left: 13px;
    right: 12px;
    top: 9px;
    bottom: 18px
  }

  .jct-hero-seal {
    width: 88px;
    height: 88px;
    left: -6px;
    bottom: 8px
  }

  .jct-hero-seal strong {
    font-size: 18px
  }

  .jct-hero-seal small {
    display: none
  }

  .jct-photo-credit {
    bottom: 31px;
    right: 33px;
    font-size: 8px
  }

  .jct-hero-bottom span:last-child {
    display: none
  }

  .jct-intro h2 {
    font-size: 30px
  }

  .jct-form-shell {
    padding: 29px 19px
  }

  .jct-form-heading {
    gap: 8px
  }

  .jct-form-heading h2 {
    font-size: 29px
  }

  .jct-form-stamp {
    flex-basis: 50px
  }

  .jct-form-stamp svg {
    height: 52px
  }

  .jct-form {
    gap: 18px
  }

  .jct-field-row {
    flex-direction: column;
    gap: 17px
  }

  .jct-field-row .jct-field {
    width: 100%;
    flex: none
  }

  .jct-field {
    gap: 7px
  }

  .jct-interest-options {
    gap: 8px
  }

  .jct-interest-options span {
    font-size: 10px;
    padding: 7px 10px
  }

  .jct-form-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 18px
  }

  .jct-submit {
    width: 100%
  }

  .jct-privacy {
    max-width: 100%
  }

  .jct-prepared {
    padding: 18px
  }

  .jct-prepared-actions {
    flex-direction: column
  }

  .jct-prepared-actions .jct-btn {
    width: 100%
  }

  .jct-aside-top {
    padding: 27px
  }

  .jct-aside-top h3 {
    font-size: 29px
  }

  .jct-section-heading h2 {
    font-size: 38px
  }

  .jct-ways-grid {
    flex-direction: column
  }

  .jct-way {
    flex: none
  }

  .jct-way p {
    max-width: none
  }

  .jct-city-art {
    min-height: 300px
  }

  .jct-city-tiny {
    top: 38px;
    left: 36px;
    font-size: 8px
  }

  .jct-city-coordinates {
    right: 24px;
    top: 51px;
    font-size: 8px
  }

  .jct-city-art-footer {
    left: 33px;
    right: 33px;
    font-size: 7px
  }

  .jct-city-art-lines {
    top: 22%;
    height: 62%
  }

  .jct-city-copy h2 {
    font-size: 36px
  }

  .jct-city-details>div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px
  }

  .jct-city-details strong {
    text-align: left
  }

  .jct-guide-head h2 {
    font-size: 36px
  }

  .jct-steps {
    flex-direction: column
  }

  .jct-steps>article,
  .jct-steps>article:first-child {
    border-right: 0;
    border-bottom: 1px solid #dfc8b1;
    padding: 19px 0
  }

  .jct-steps>article:last-child {
    border-bottom: 0
  }

  .jct-steps>article>span {
    font-size: 34px
  }

  .jct-steps h3 {
    margin: 7px 0
  }

  .jct-faq-intro h2 {
    font-size: 37px
  }

  .jct-faq-list summary {
    font-size: 12px;
    gap: 10px
  }

  .jct-faq-list details p {
    margin-left: 25px
  }

  .jct-closing h2 {
    font-size: 44px
  }

  .jct-closing-actions {
    flex-direction: column;
    align-items: stretch
  }

  .jct-closing-actions .jct-btn {
    width: 100%
  }

  .jct-closing-foot {
    font-size: 8px;
    letter-spacing: .5px
  }
}

@media(max-width:360px) {
  .jct-hero-copy h1 {
    font-size: 38px
  }

  .jct-hero-actions .jct-btn {
    width: 100%
  }

  .jct-hero-actions .jct-text-link {
    width: 100%;
    justify-content: space-between
  }

  .jct-hero-visual {
    height: 289px;
    padding: 20px 19px 15px
  }

  .jct-hero-photo {
    height: 254px
  }

  .jct-hero-seal {
    width: 76px;
    height: 76px
  }

  .jct-hero-seal strong {
    font-size: 16px
  }

  .jct-photo-credit {
    right: 23px;
    font-size: 7px
  }

  .jct-form-heading h2 {
    font-size: 26px
  }

  .jct-form-heading p {
    font-size: 11px
  }

  .jct-section-heading h2 {
    font-size: 34px
  }

  .jct-city-copy h2 {
    font-size: 33px
  }

  .jct-closing h2 {
    font-size: 40px
  }
}

@media(prefers-reduced-motion:reduce) {

  .jct-page *,
  .jct-page *::before,
  .jct-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
}

/* The approved site's shared image fallback is intentionally hidden here so the
   section's own Jaipur-inspired line art stays visible if a remote photo fails. */
.jct-hero-photo img[data-fallback-applied="true"],
.jct-aside-photo img[data-fallback-applied="true"] {
  display: none
}

/*
 JAIPUR HERITAGE TOUR — PHOTO GALLERY
 This file is intentionally isolated to jgl- prefixed components.
 Uses flexbox + CSS columns; all dimensional type and spacing use px.
 Shared header / footer comes from the approved assets/css/style.css.
*/
.jgl-page {
  --jgl-ivory: #f8f3e9;
  --jgl-paper: #fffaf1;
  --jgl-maroon: #542c30;
  --jgl-terra: #a34f41;
  --jgl-gold: #a98549;
  --jgl-body: #665851;
  overflow: hidden;
  color: var(--jgl-maroon);
  background: var(--jgl-ivory)
}

.jgl-page .jgl-section {
  margin-top: 50px
}

.jgl-page h1,
.jgl-page h2,
.jgl-page h3 {
  font-family: var(--serif);
  font-weight: 500
}

.jgl-page p {
  color: var(--jgl-body);
  line-height: 1.9
}

.jgl-page .jgl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--jgl-terra);
  font-family: var(--alt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.7px;
  line-height: 1.5
}

.jgl-eyebrow i {
  display: block;
  width: 27px;
  height: 1px;
  background: var(--jgl-terra)
}

.jgl-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

/* HERO · warm editorial cover */
.jgl-hero {
  background: radial-gradient(circle at 17% 20%, #fffaf2 0, #fff9f100 51%), #f8f3e9;
  position: relative;
  overflow: hidden;
  padding: 25px 0 0
}

.jgl-hero-ornament {
  position: absolute;
  left: -180px;
  bottom: -140px;
  width: 500px;
  color: #b9846930;
  pointer-events: none;
  transform: rotate(-14deg)
}

.jgl-hero-ornament svg {
  width: 100%;
  height: auto
}

.jgl-hero-layout {
  display: flex;
  align-items: center;
  gap: 35px;
  min-height: 670px;
  position: relative
}

.jgl-hero-copy {
  flex: 1 1 47%;
  min-width: 0;
  position: relative;
  z-index: 2;
  padding-bottom: 10px
}

.jgl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  font-family: var(--alt);
  color: #89756b;
  margin-bottom: 42px
}

.jgl-breadcrumb a {
  color: var(--jgl-terra)
}

.jgl-breadcrumb span:nth-child(2) {
  color: var(--jgl-gold)
}

.jgl-hero-copy h1 {
  font-size: 78px;
  line-height: 1.13;
  letter-spacing: -3.7px;
  color: var(--jgl-maroon);
  margin: 22px 0 24px
}

.jgl-hero-copy h1 em {
  color: var(--jgl-terra);
  font-weight: 400
}

.jgl-hero-copy h1>span {
  color: var(--jgl-gold)
}

.jgl-hero-copy>p {
  font-size: 15px;
  line-height: 1.95;
  max-width: 450px;
  margin-bottom: 28px
}

.jgl-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap
}

.jgl-hero-actions>span {
  font: italic 20px var(--serif);
  color: #ad7e58
}

.jgl-button {
  min-height: 53px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  padding: 7px 7px 7px 23px;
  border: 1px solid transparent;
  font: 600 12px var(--alt);
  letter-spacing: .4px;
  transition: transform 330ms ease, background 330ms ease, color 330ms ease
}

.jgl-button b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  font-size: 20px;
  font-weight: 400;
  background: #ffffff1d;
  transition: transform 320ms
}

.jgl-button:hover {
  transform: translateY(-4px)
}

.jgl-button:hover b {
  transform: rotate(45deg)
}

.jgl-button--solid {
  background: var(--jgl-maroon);
  color: #fffaf1
}

.jgl-button--solid:hover {
  background: var(--jgl-terra);
  color: #fffaf1
}

.jgl-hero-index {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 55px;
  color: #8c786c
}

.jgl-hero-index>b {
  font: 500 53px var(--serif);
  line-height: 1;
  color: var(--jgl-terra)
}

.jgl-hero-index>span {
  font: 700 9px var(--alt);
  line-height: 1.9;
  letter-spacing: 1.3px
}

.jgl-hero-index>i {
  height: 1px;
  background: #c4ab93;
  flex: 1;
  max-width: 83px;
  margin: 0 5px
}

.jgl-hero-index>small {
  font: 700 8px var(--alt);
  letter-spacing: 1.7px;
  white-space: nowrap
}

.jgl-hero-stage {
  height: 623px;
  flex: 1 1 53%;
  min-width: 0;
  position: relative;
  max-width: 630px;
  padding: 12px 36px 28px 31px
}

.jgl-hero-arch-outline {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 17px;
  right: 18px;
  bottom: 17px;
  border: 1px solid #c8a987;
  border-radius: 300px 300px 4px 4px;
  transform: rotate(2deg)
}

.jgl-hero-photo {
  position: absolute;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, #cb9479, #f0d9ba 65%, #b77e65);
  isolation: isolate
}

.jgl-hero-photo img,
.jgl-postcard-img img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms cubic-bezier(.23, .68, .2, 1)
}

.jgl-hero-photo:hover img,
.jgl-postcard:hover img {
  transform: scale(1.09)
}

.jgl-hero-photo--primary {
  inset: 12px 36px 27px 31px;
  border-radius: 290px 290px 4px 4px;
  border: 8px solid #fffaf1;
  box-shadow: 0 19px 45px #542c3024;
  z-index: 2
}

.jgl-hero-photo--secondary {
  width: 193px;
  height: 231px;
  left: -44px;
  bottom: -2px;
  border: 7px solid #fffaf1;
  box-shadow: 0 17px 39px #542c3040;
  z-index: 4
}

.jgl-hero-photo--primary img {
  object-position: center center
}

.jgl-hero-engraving {
  position: absolute;
  z-index: 0;
  inset: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #713e3a7c
}

.jgl-hero-engraving svg {
  width: 90%;
  height: 90%
}

.jgl-hero-roundel {
  width: 119px;
  height: 119px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 5;
  right: 0;
  top: 63px;
  border: 5px double #f2cc96;
  background: var(--jgl-maroon);
  border-radius: 50%;
  color: #f9e1c6;
  transform: rotate(13deg);
  box-shadow: 0 12px 20px #522c2c2f;
  text-align: center
}

.jgl-hero-roundel>span {
  font-size: 19px;
  line-height: 1
}

.jgl-hero-roundel strong {
  font: 500 17px var(--serif);
  line-height: 1.05;
  margin: 6px 0
}

.jgl-hero-roundel small {
  font: 600 6px var(--alt);
  letter-spacing: .8px
}

.jgl-hero-vertical {
  position: absolute;
  right: -15px;
  bottom: 115px;
  z-index: 4;
  writing-mode: vertical-rl;
  letter-spacing: 2.1px;
  font: 700 8px var(--alt);
  color: var(--jgl-terra)
}

.jgl-hero-photo-tag {
  position: absolute;
  bottom: 16px;
  right: 35px;
  z-index: 5;
  color: #e8e0d6;
  background: #542c30;
  padding: 8px 14px;
  font: 700 8px var(--alt);
  letter-spacing: 1.5px
}

.jgl-hero-base {
  border-top: 1px solid #e0d1c2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 26px;
  padding-top: 13px;
  padding-bottom: 15px;
  color: #957867;
  font: 700 9px var(--alt);
  letter-spacing: 1.9px
}

.jgl-hero-base span:nth-child(2) {
  color: #b78958;
  font-size: 20px
}

/* INTRO */
.jgl-intro-layout {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  border-bottom: 1px solid #dfcbb6;
  padding-bottom: 34px
}

.jgl-intro-label {
  flex: 0 0 185px;
  font: 700 9px var(--alt);
  letter-spacing: 1.8px;
  color: var(--jgl-terra);
  margin-top: 13px
}

.jgl-intro h2 {
  flex: 1 1 56%;
  font-size: 43px;
  line-height: 1.35;
  letter-spacing: -1.4px;
  margin: 0
}

.jgl-intro h2 em {
  color: var(--jgl-terra);
  font-weight: 400
}

.jgl-intro-copy {
  flex: 1 1 29%;
  max-width: 300px;
  padding-top: 5px
}

.jgl-intro-copy p {
  font-size: 13px;
  margin-bottom: 16px
}

.jgl-intro-copy>span {
  font: 700 8px var(--alt);
  letter-spacing: 1.6px;
  color: #9b7f65
}

.jgl-intro-copy b {
  color: var(--jgl-terra);
  margin-left: 5px
}

/* EDITORIAL HEADINGS */
.jgl-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 25px
}

.jgl-section-head h2 {
  font-size: 59px;
  letter-spacing: -2.1px;
  margin: 10px 0 0;
  line-height: 1.22
}

.jgl-section-head h2 em {
  font-weight: 400;
  color: var(--jgl-terra)
}

.jgl-section-head>p {
  font-size: 13px;
  max-width: 340px;
  line-height: 1.85;
  margin: 0 0 8px
}

/* FILTERS */
.jgl-filter-wrap {
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid #d9c4b1;
  gap: 18px;
  margin-bottom: 27px
}

.jgl-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap
}

.jgl-filter {
  padding: 14px 14px 15px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8b7669;
  font: 600 11px var(--alt);
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms, border-color 220ms
}

.jgl-filter span {
  font: 600 8px var(--alt);
  color: #a98549;
  margin-left: 4px
}

.jgl-filter:hover,
.jgl-filter.is-active {
  color: var(--jgl-maroon)
}

.jgl-filter.is-active {
  border-bottom-color: var(--jgl-terra)
}

.jgl-results {
  font: 700 8px var(--alt);
  letter-spacing: 1.5px;
  color: #9b7863;
  white-space: nowrap;
  padding-bottom: 16px
}

/* MASONRY — CSS columns, not grid */
.jgl-masonry {
  columns: 3;
  column-gap: 18px
}

.jgl-tile {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: 0 0 18px;
  position: relative
}

.jgl-tile[hidden] {
  display: none !important
}

.jgl-tile-open {
  display: block;
  text-align: left;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  overflow: hidden;
  background: #d5b396;
  color: #fff8ef;
  isolation: isolate
}

.jgl-tile-media {
  display: block;
  position: relative;
  height: 325px;
  overflow: hidden;
  background: linear-gradient(139deg, #ab6757, #e0ba93 52%, #834849);
}

.jgl-tile--tall .jgl-tile-media {
  height: 475px
}

.jgl-tile--wide .jgl-tile-media {
  height: 270px
}

.jgl-tile:nth-child(5n+2) .jgl-tile-media {
  background: linear-gradient(145deg, #806355, #d6ae81 52%, #66585d)
}

.jgl-tile:nth-child(5n+3) .jgl-tile-media {
  background: linear-gradient(140deg, #527076, #d8d7b1 50%, #a77e62)
}

.jgl-tile:nth-child(5n+4) .jgl-tile-media {
  background: linear-gradient(136deg, #9c564f, #edbd83 52%, #a5576e)
}

.jgl-tile:nth-child(5n+5) .jgl-tile-media {
  background: linear-gradient(130deg, #6b7a66, #c3aa8c 52%, #87543b)
}

.jgl-tile-illustration {
  position: absolute;
  inset: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff7e599;
  z-index: 0
}

.jgl-tile-illustration svg {
  width: 90%;
  height: 90%
}

.jgl-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 1100ms cubic-bezier(.2, .7, .1, 1), filter 550ms
}

.jgl-tile-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, #240d0f1c 0, transparent 35%, #2414160a 49%, #230b15b8 100%);
  transition: background 280ms
}

.jgl-tile-open:hover img {
  transform: scale(1.095);
  filter: saturate(1.16)
}

.jgl-tile-open:hover .jgl-tile-wash {
  background: linear-gradient(180deg, #240d0f4a 0, transparent 35%, #230b15b2 100%)
}

.jgl-tile-top {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 19px;
  right: 19px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  font: 700 9px var(--alt);
  letter-spacing: 1.3px
}

.jgl-tile-plus {
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff7c;
  background: #ffffff24;
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  font: 400 22px var(--alt);
  transition: background 260ms, transform 300ms
}

.jgl-tile-open:hover .jgl-tile-plus {
  transform: rotate(45deg);
  background: #fff9f1;
  color: var(--jgl-maroon)
}

.jgl-tile-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 56px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 3
}

.jgl-tile-cat {
  font: 700 9px var(--alt);
  letter-spacing: 1.8px;
  color: #ffdaa3;
  text-transform: uppercase
}

.jgl-tile-caption strong {
  font: 500 29px var(--serif);
  line-height: 1.15;
  margin: 7px 0 6px;
  color: #fffaf1
}

.jgl-tile-caption small {
  font: 400 12px var(--sans);
  line-height: 1.65;
  color: #f3dbd2
}

.jgl-gallery-foot {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #997b64;
  font: 700 9px var(--alt);
  letter-spacing: 1.5px;
  border-top: 1px solid #ddc9b6;
  margin-top: 15px;
  padding-top: 16px
}

/* DISTINCT HERITAGE INTERLUDE */
.jgl-interlude {
  background: var(--jgl-maroon);
  padding: 87px 0 91px;
  color: #fff1dc;
  position: relative;
  overflow: hidden
}

.jgl-interlude-etch {
  position: absolute;
  width: 320px;
  height: 360px;
  color: #ffffff17;
  pointer-events: none
}

.jgl-interlude-etch svg {
  width: 100%;
  height: 100%
}

.jgl-interlude-etch--left {
  left: -65px;
  top: -45px;
  transform: rotate(-10deg)
}

.jgl-interlude-etch--right {
  right: -65px;
  bottom: -75px;
  transform: rotate(13deg)
}

.jgl-interlude-inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jgl-interlude-inner>span:first-child {
  font: 700 10px var(--alt);
  letter-spacing: 2.8px;
  color: #dec29d
}

.jgl-interlude-inner>p {
  font: 400 47px var(--serif);
  letter-spacing: -1.8px;
  line-height: 1.45;
  color: #ffefe1;
  max-width: 850px;
  margin: 20px 0 15px
}

.jgl-interlude-inner em {
  color: #e5b492;
  font-weight: 400
}

.jgl-interlude-hindi {
  color: #e4be93;
  font: italic 21px var(--serif)
}

/* POSTCARD EDITORIAL RAIL */
.jgl-postcard-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 3px 1px 8px;
  overscroll-behavior-inline: contain
}

.jgl-postcard-rail::-webkit-scrollbar {
  display: none
}

.jgl-postcard {
  flex: 0 0 34%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  background: #eee0cf;
  scroll-snap-align: start;
  position: relative;
  color: var(--jgl-maroon)
}

.jgl-postcard-img {
  display: block;
  position: relative;
  overflow: hidden;
  height: 335px;
  background: linear-gradient(130deg, #b17c64, #e8ceae 55%, #9d6258)
}

.jgl-postcard--b .jgl-postcard-img {
  background: linear-gradient(125deg, #3c6269, #bad2cb 62%, #e6dabc)
}

.jgl-postcard--c .jgl-postcard-img {
  background: linear-gradient(125deg, #bd8552, #eed2aa 62%, #8f604c)
}

.jgl-postcard--d .jgl-postcard-img {
  background: linear-gradient(125deg, #b25a55, #efb89b 62%, #b88568)
}

.jgl-postcard-img img {
  position: absolute;
  inset: 0;
  object-fit: cover
}

.jgl-postcard-text {
  display: flex;
  flex-direction: column;
  padding: 24px 25px 27px;
  border: 1px solid #e0c9b1;
  border-top: 0;
  flex: 1
}

.jgl-postcard-text small {
  font: 700 9px var(--alt);
  letter-spacing: 1.7px;
  color: var(--jgl-terra)
}

.jgl-postcard-text strong {
  font: 500 27px var(--serif);
  line-height: 1.3;
  margin: 10px 0;
  color: var(--jgl-maroon)
}

.jgl-postcard-text i {
  font: 600 11px var(--alt);
  font-style: normal;
  color: #8e6854;
  margin-top: auto
}

.jgl-postcard-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #ddc7b0;
  padding: 18px 0 0;
  margin-top: 18px;
  font: 700 9px var(--alt);
  letter-spacing: 1.6px;
  color: #9d8066
}

.jgl-postcard-bottom>div {
  display: flex;
  gap: 8px
}

.jgl-postcard-bottom button {
  width: 44px;
  height: 41px;
  border: 1px solid #bc9d85;
  background: transparent;
  color: var(--jgl-maroon);
  font-size: 21px;
  transition: background 200ms, color 200ms
}

.jgl-postcard-bottom button:hover {
  background: var(--jgl-maroon);
  color: #fff8ed
}

/* EDITORIAL CLOSING */
.jgl-ending {
  background: var(--jgl-maroon);
  color: #fff1dc;
  position: relative;
  overflow: hidden
}

.jgl-ending-layout {
  min-height: 490px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 65px;
  padding-bottom: 75px
}

.jgl-ending-art {
  position: absolute;
  left: -80px;
  bottom: 10px;
  height: 430px;
  width: 440px;
  color: #ffffff22
}

.jgl-ending-art svg {
  width: 100%;
  height: 100%
}

.jgl-ending-copy {
  position: relative;
  text-align: center;
  max-width: 780px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column
}

.jgl-ending-copy>span {
  font: 700 10px var(--alt);
  letter-spacing: 2.3px;
  color: #d9af8b
}

.jgl-ending h2 {
  font-size: 68px;
  line-height: 1.17;
  letter-spacing: -2.5px;
  color: #fff7ec;
  margin: 14px 0 22px
}

.jgl-ending h2 em {
  font-weight: 400;
  color: #e2b18d
}

.jgl-ending p {
  color: #e8cec1;
  font-size: 13px;
  max-width: 555px
}

.jgl-ending-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 22px
}

.jgl-button--light {
  background: #fff2e0;
  color: var(--jgl-maroon)
}

.jgl-button--light b {
  background: #542c3012
}

.jgl-button--light:hover {
  background: #e5b390;
  color: var(--jgl-maroon)
}

.jgl-ending-text {
  font: 600 12px var(--alt);
  color: #f8d8b5;
  border-bottom: 1px solid #d0a487;
  padding-bottom: 6px
}

.jgl-ending-text:hover {
  color: white
}

.jgl-ending-base {
  position: absolute;
  bottom: 0;
  left: 68px;
  right: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ffffff30;
  color: #c89e89;
  font: 700 8px var(--alt);
  letter-spacing: 1.5px;
  min-height: 44px
}

.jgl-ending-base span:nth-child(2) {
  font-size: 18px
}

/* ACCESSIBLE LIGHTBOX */
body.jgl-modal-open {
  overflow: hidden
}

.jgl-lightbox[hidden] {
  display: none !important
}

.jgl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px
}

.jgl-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #160e11f0;
  backdrop-filter: blur(12px)
}

.jgl-lightbox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1190px;
  max-height: 100%;
  color: #fff4e9
}

.jgl-lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 53px;
  font: 700 10px var(--alt);
  letter-spacing: 1.6px;
  color: #dec2aa;
  gap: 15px
}

.jgl-lightbox-toolbar>b {
  color: #d9b18d
}

.jgl-lightbox-toolbar>span:first-child b {
  color: #ddb98b;
  margin-left: 5px
}

.jgl-lightbox-close {
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff6b;
  background: #ffffff18;
  color: white;
  font-size: 21px
}

.jgl-lightbox-close:hover,
.jgl-lightbox-arrow:hover {
  background: #f1e3d3;
  color: var(--jgl-maroon)
}

.jgl-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  min-height: 0;
  flex: 1
}

.jgl-lightbox-arrow {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid #ffffff64;
  background: #ffffff16;
  color: #fff5ea;
  font: 400 27px var(--alt);
  transition: background 200ms, color 200ms
}

.jgl-lightbox-imagebox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  flex: 1;
  height: 560px;
  max-height: 65%;
  background: linear-gradient(125deg, #80534c, #ce9778, #98724e);
  overflow: hidden
}

.jgl-lightbox-imagebox>img {
  position: relative;
  z-index: 2;
  object-fit: contain;
  height: 100%;
  max-width: 100%;
  width: auto
}

.jgl-lightbox-imagebox>img[hidden] {
  display: none
}

.jgl-lightbox-fallback {
  position: absolute;
  inset: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f3dec393
}

.jgl-lightbox-fallback svg {
  height: 95%;
  max-width: 95%
}

.jgl-lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 72px 4px
}

.jgl-lightbox-caption #jglLightboxCategory {
  font: 700 9px var(--alt);
  letter-spacing: 1.7px;
  color: #d1aa86
}

.jgl-lightbox-caption h2 {
  font: 500 35px var(--serif);
  margin: 4px 0 1px;
  color: #fff4e8
}

.jgl-lightbox-caption p {
  font: 400 12px var(--sans);
  color: #d6bfb2;
  margin: 0
}

.jgl-lightbox-hint {
  color: #b89d8f;
  font: 700 8px var(--alt);
  letter-spacing: 1.2px;
  white-space: nowrap
}

/* RESPONSIVE */
@media(max-width:1399px) {
  .jgl-body .desktop-nav {
    display: none
  }

  .jgl-body .menu-toggle {
    display: flex
  }

  .jgl-hero-copy h1 {
    font-size: 69px
  }

  .jgl-hero-stage {
    height: 570px
  }

  .jgl-hero-photo--secondary {
    left: -23px
  }

  .jgl-intro-label {
    flex-basis: 150px
  }

  .jgl-intro h2 {
    font-size: 37px
  }
}

@media(max-width:1199px) {
  .jgl-hero-layout {
    gap: 20px;
    min-height: 570px
  }

  .jgl-hero-copy h1 {
    font-size: 59px;
    letter-spacing: -2.5px
  }

  .jgl-hero-copy>p {
    font-size: 14px
  }

  .jgl-hero-stage {
    height: 535px;
    flex-basis: 49%;
    padding-right: 23px
  }

  .jgl-hero-photo--primary {
    right: 22px
  }

  .jgl-hero-arch-outline {
    right: 7px
  }

  .jgl-hero-photo--secondary {
    width: 147px;
    height: 180px;
    left: -19px
  }

  .jgl-hero-roundel {
    right: -10px;
    width: 103px;
    height: 103px
  }

  .jgl-hero-roundel strong {
    font-size: 14px
  }

  .jgl-hero-vertical {
    display: none
  }

  .jgl-intro-layout {
    flex-wrap: wrap
  }

  .jgl-intro-copy {
    max-width: 100%;
    flex-basis: 100%;
    margin-left: 180px
  }

  .jgl-section-head h2 {
    font-size: 51px
  }

  .jgl-filter-wrap {
    align-items: start;
    flex-direction: column;
    gap: 0
  }

  .jgl-results {
    align-self: flex-end
  }

  .jgl-postcard {
    flex-basis: 39%
  }
}

@media(max-width:991px) {
  .jgl-hero-layout {
    flex-direction: column;
    align-items: stretch;
    min-height: 0
  }

  .jgl-hero-copy {
    flex: none
  }

  .jgl-hero-copy h1 {
    font-size: 69px
  }

  .jgl-hero-copy>p {
    max-width: 640px
  }

  .jgl-hero-index {
    margin-top: 28px
  }

  .jgl-hero-stage {
    flex: none;
    align-self: center;
    width: 100%;
    max-width: 610px;
    height: 550px;
    margin-top: 16px
  }

  .jgl-intro h2 {
    font-size: 44px
  }

  .jgl-intro-copy {
    margin-left: 0
  }

  .jgl-section-head {
    flex-direction: column;
    align-items: start
  }

  .jgl-section-head>p {
    max-width: 640px
  }

  .jgl-masonry {
    columns: 2
  }

  .jgl-postcard {
    flex-basis: 52%
  }

  .jgl-ending-base {
    left: 40px;
    right: 40px
  }
}

@media(max-width:767px) {
  .jgl-hero-copy h1 {
    font-size: 62px
  }

  .jgl-hero-stage {
    height: 510px
  }

  .jgl-hero-photo--secondary {
    left: -10px
  }

  .jgl-hero-roundel {
    right: 3px
  }

  .jgl-intro-layout {
    gap: 11px
  }

  .jgl-intro-label {
    flex: 1 1 100%
  }

  .jgl-intro h2 {
    flex: 1 1 100%;
    font-size: 40px
  }

  .jgl-intro-copy {
    flex: 1 1 100%
  }

  .jgl-section-head h2 {
    font-size: 46px
  }

  .jgl-section-head>p {
    font-size: 12px
  }

  .jgl-filter {
    padding: 12px 11px;
    font-size: 10px
  }

  .jgl-tile--tall .jgl-tile-media {
    height: 390px
  }

  .jgl-tile .jgl-tile-media {
    height: 315px
  }

  .jgl-tile--wide .jgl-tile-media {
    height: 250px
  }

  .jgl-tile-caption {
    padding: 43px 18px 18px
  }

  .jgl-tile-caption strong {
    font-size: 23px
  }

  .jgl-tile-caption small {
    font-size: 11px
  }

  .jgl-interlude {
    padding: 64px 0
  }

  .jgl-interlude-inner>p {
    font-size: 34px
  }

  .jgl-postcard {
    flex-basis: 65%
  }

  .jgl-ending h2 {
    font-size: 55px
  }

  .jgl-ending-art {
    opacity: .5
  }

  .jgl-lightbox {
    padding: 9px
  }

  .jgl-lightbox-arrow {
    width: 39px;
    flex-basis: 39px;
    height: 46px
  }

  .jgl-lightbox-imagebox {
    height: 480px
  }

  .jgl-lightbox-caption {
    padding: 15px 18px
  }

  .jgl-lightbox-hint {
    display: none
  }
}

@media(max-width:575px) {
  .jgl-hero {
    padding-top: 15px
  }

  .jgl-breadcrumb {
    margin-bottom: 25px
  }

  .jgl-hero-copy h1 {
    font-size: 50px;
    letter-spacing: -2.3px;
    margin-top: 17px
  }

  .jgl-eyebrow {
    font-size: 9px;
    letter-spacing: 2px
  }

  .jgl-hero-copy>p {
    font-size: 13px
  }

  .jgl-hero-actions>span {
    font-size: 16px
  }

  .jgl-hero-index>b {
    font-size: 42px
  }

  .jgl-hero-index>span {
    font-size: 8px
  }

  .jgl-hero-index>small {
    font-size: 7px
  }

  .jgl-hero-stage {
    height: 395px;
    padding: 8px 20px 20px 23px;
    max-width: 425px
  }

  .jgl-hero-photo--primary {
    inset: 8px 21px 22px 24px;
    border-width: 5px
  }

  .jgl-hero-arch-outline {
    left: 12px;
    right: 5px;
    bottom: 12px
  }

  .jgl-hero-photo--secondary {
    width: 113px;
    height: 139px;
    border-width: 4px;
    left: -7px
  }

  .jgl-hero-roundel {
    width: 83px;
    height: 83px;
    border-width: 3px;
    top: 40px;
    right: -1px
  }

  .jgl-hero-roundel strong {
    font-size: 11px;
    margin: 3px 0
  }

  .jgl-hero-roundel>span {
    font-size: 13px
  }

  .jgl-hero-roundel small {
    font-size: 5px
  }

  .jgl-hero-photo-tag {
    font-size: 7px;
    right: 19px;
    bottom: 12px
  }

  .jgl-hero-base {
    font-size: 7px;
    letter-spacing: .8px
  }

  .jgl-intro h2 {
    font-size: 34px
  }

  .jgl-intro-copy p {
    font-size: 12px
  }

  .jgl-section-head h2 {
    font-size: 41px
  }

  .jgl-masonry {
    columns: 1;
    column-gap: 0
  }

  .jgl-tile {
    margin-bottom: 13px
  }

  .jgl-tile .jgl-tile-media {
    height: 355px
  }

  .jgl-tile--tall .jgl-tile-media {
    height: 445px
  }

  .jgl-tile--wide .jgl-tile-media {
    height: 290px
  }

  .jgl-tile-caption strong {
    font-size: 29px
  }

  .jgl-filter-wrap {
    margin-bottom: 20px
  }

  .jgl-filters {
    gap: 3px
  }

  .jgl-filter {
    font-size: 10px;
    padding: 11px 9px
  }

  .jgl-gallery-foot {
    font-size: 7px;
    letter-spacing: 1px
  }

  .jgl-interlude-inner>p {
    font-size: 31px;
    letter-spacing: -.7px
  }

  .jgl-interlude-hindi {
    font-size: 17px
  }

  .jgl-interlude-etch {
    opacity: .5
  }

  .jgl-postcard {
    flex-basis: 85%;
    min-width: 0
  }

  .jgl-postcard-img {
    height: 300px
  }

  .jgl-postcard-text strong {
    font-size: 24px
  }

  .jgl-ending-layout {
    padding-top: 62px
  }

  .jgl-ending h2 {
    font-size: 47px
  }

  .jgl-ending p {
    font-size: 12px
  }

  .jgl-ending-actions {
    flex-direction: column;
    gap: 18px
  }

  .jgl-ending-base {
    left: 19px;
    right: 19px;
    font-size: 7px;
    letter-spacing: 1px
  }

  .jgl-lightbox-toolbar {
    font-size: 8px;
    letter-spacing: 1px
  }

  .jgl-lightbox-toolbar>span:first-child {
    max-width: 135px
  }

  .jgl-lightbox-stage {
    gap: 4px
  }

  .jgl-lightbox-arrow {
    width: 32px;
    flex-basis: 32px;
    height: 40px;
    font-size: 22px
  }

  .jgl-lightbox-imagebox {
    height: 390px
  }

  .jgl-lightbox-caption h2 {
    font-size: 27px
  }

  .jgl-lightbox-caption {
    padding: 15px 5px
  }

  .jgl-lightbox-caption p {
    font-size: 11px
  }
}

@media(max-width:380px) {
  .jgl-hero-copy h1 {
    font-size: 43px
  }

  .jgl-hero-index>i {
    display: none
  }

  .jgl-hero-index {
    gap: 10px
  }

  .jgl-hero-stage {
    height: 333px
  }

  .jgl-hero-photo--secondary {
    width: 89px;
    height: 116px
  }

  .jgl-hero-roundel {
    width: 69px;
    height: 69px
  }

  .jgl-hero-roundel small {
    display: none
  }

  .jgl-hero-roundel strong {
    font-size: 10px
  }

  .jgl-hero-photo-tag {
    font-size: 6px;
    letter-spacing: .5px
  }

  .jgl-intro h2 {
    font-size: 29px
  }

  .jgl-section-head h2 {
    font-size: 36px
  }

  .jgl-postcard {
    flex-basis: 93%
  }

  .jgl-ending h2 {
    font-size: 41px
  }

  .jgl-filter {
    font-size: 9px;
    padding: 10px 7px
  }

  .jgl-lightbox-imagebox {
    height: 320px
  }
}

@media(prefers-reduced-motion:reduce) {

  .jgl-page *,
  .jgl-page *::before,
  .jgl-page *::after,
  .jgl-lightbox * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

@media print {
  .jgl-lightbox {
    display: none !important
  }

  .jgl-tile-open {
    break-inside: avoid
  }

  .jgl-page .jgl-section {
    margin-top: 25px
  }
}


/* CULTURE PAGE - MOBILE CRAFT SECTION FIX */

@media (max-width: 767px) {

    .jch-craft-showcase {
        height: auto;
        min-height: 0;
        align-items: stretch;
    }

    .jch-craft-panels {
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
    }

    .jch-craft-panel {
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .jch-panel-photo {
        height: 225px;
        flex: 0 0 auto;
        padding: 12px 12px 0;
    }

    .jch-panel-photo > .jch-photo {
        height: 100%;
        min-height: 0;
    }

    .jch-panel-info {
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
        padding: 25px 20px 30px;
    }

    .jch-craft-footnote {
        position: relative;
        margin-top: 12px;
        padding: 15px 0;
    }

}