@charset "UTF-8";
/* ==========================================================================
   Travel Fair India Pvt. Ltd. — site.css
   One stylesheet. No Bootstrap, no framework.

   CONTENTS
     1. FONTS
     2. TOKENS
     3. RESET + BASE
     4. LAYOUT
     5. COMPONENTS
     6. UTILITIES
     7. PRINT HOOKS

   Media queries are co-located with their component, not collected at the
   bottom. The old site kept them in a separate responsive.css and the
   overrides became impossible to reason about.
   ========================================================================== */


/* ==========================================================================
   1. FONTS
   Self-hosted. The old site pulled Roboto from Google Fonts with an @import
   inside CSS, which is render-blocking and adds a third-party dependency.
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ==========================================================================
   2. TOKENS

   CONTRAST RULE — do not violate this:
     --navy    on white = 11.6:1  AAA   -> body text, headings, links
     --gold    on white =  2.1:1  FAILS -> NEVER text on white
     --gold    on navy  =  5.4:1  AA    -> this is how gold becomes text
     --gold-700 on white =  3.0:1 FAILS body text; large display only

   Gold is for borders, rules, focus rings, badge backgrounds, and text on
   navy. It is never a text colour on a light background.
   ========================================================================== */

:root {
  /* brand */
  --navy:      #173b57;
  --navy-700:  #0f2a3f;
  --navy-300:  #5c7f9a;
  --navy-100:  #e8eef3;
  --gold:      #e5a623;
  --gold-700:  #c98d13;
  --gold-100:  #fdf3e0;

  /* neutrals */
  --ink:       #1f2933;
  --muted:     #5b6873;
  --line:      #d9e0e6;
  --line-soft: #edf1f4;
  --bg:        #ffffff;
  --bg-alt:    #f6f8fa;

  /* status */
  --ok:        #1b7f4b;
  --ok-bg:     #eaf6ef;
  --warn:      #b45309;
  --warn-bg:   #fdf6e7;
  --err:       #b3261e;
  --err-bg:    #fdeceb;

  /* metrics */
  --container: 1200px;
  --gap:       24px;
  --radius:    6px;
  --radius-lg: 10px;

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --shadow-1: 0 1px 2px rgba(23,59,87,.08), 0 2px 8px rgba(23,59,87,.06);
  --shadow-2: 0 2px 6px rgba(23,59,87,.10), 0 8px 24px rgba(23,59,87,.10);

  --focus: 0 0 0 3px var(--gold);
}


/* ==========================================================================
   3. RESET + BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  line-height: 1.25;
  color: var(--navy);
  font-weight: 700;
}
h1 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.35rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.35em; }
li + li { margin-top: .3em; }

a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--navy-700); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 3px;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

strong, b { font-weight: 700; }
small { font-size: .875em; }

code, kbd, samp {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .9em;
  background: var(--bg-alt);
  padding: .1em .35em;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: .7em 1.2em; z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
.container--narrow { max-width: 820px; }

/* The layout detects its own sidebar. This is why the Dreamweaver template
   needs no conditional expression for the showSidebar parameter — the
   optional region either emits .layout__aside or it does not, and CSS
   responds. See references/dwt-conventions.md. */
.layout {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  padding-block: 28px 48px;
}
@media (min-width: 992px) {
  .layout:has(> .layout__aside) {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }
}
.layout__main { min-width: 0; }
.layout__aside { min-width: 0; }

.section { padding-block: 44px; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: 28px; }

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--tight { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.stack > * + * { margin-top: 1rem; }
.stack--lg > * + * { margin-top: 1.75rem; }


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1 Top bar ---------------------------------------------------------- */

.topbar {
  background: var(--navy-700);
  color: #dbe5ec;
  font-size: .875rem;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  align-items: center; justify-content: space-between;
  padding-block: 7px;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--gold); text-decoration: underline; }
.topbar__recognition {
  display: flex; align-items: center; gap: 7px;
  color: #cfdae3;
}
.topbar__contact { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.topbar__contact a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
@media (max-width: 767px) {
  .topbar__recognition { width: 100%; order: 2; font-size: .8rem; }
}

/* --- 5.2 Header ----------------------------------------------------------- */

.header { background: #fff; border-bottom: 1px solid var(--line); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 14px;
}
.header__logo { display: inline-block; line-height: 0; }
.header__logo img { width: 227px; height: 47px; }
@media (max-width: 480px) {
  .header__logo img { width: 180px; height: 37px; }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff; border: 0;
  padding: .6em 1em; border-radius: var(--radius);
  font: inherit; font-weight: 500; cursor: pointer;
}
@media (min-width: 992px) { .nav-toggle { display: none; } }

/* --- 5.3 Primary navigation ---------------------------------------------- */

.nav { background: var(--navy); }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.nav__list > li { margin: 0; position: relative; }
.nav__list a {
  display: block; padding: .8em 16px;
  color: #eaf0f5; text-decoration: none; font-weight: 500;
}
.nav__list a:hover,
.nav__list a:focus-visible { background: var(--navy-700); color: #fff; }
.nav__list [aria-current="page"] {
  color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}

.nav__sub {
  list-style: none; margin: 0; padding: 0;
  background: var(--navy-700);
}
.nav__sub a { padding-left: 32px; font-weight: 400; font-size: .94rem; }

.submenu-toggle {
  position: absolute; right: 6px; top: 4px;
  background: transparent; border: 0; color: #eaf0f5;
  padding: .5em .7em; cursor: pointer; line-height: 0;
}
.submenu-toggle .icon { transition: transform .18s ease; }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Mobile: closed unless toggled */
@media (max-width: 991px) {
  .nav { display: none; }
  .nav.is-open { display: block; }
  .nav__sub[hidden] { display: none; }
}

/* Desktop: horizontal bar, CSS-only hover dropdowns.
   This replaces bootstrap-dropdownhover.js and animate.min.css entirely. */
@media (min-width: 992px) {
  .nav__list { flex-direction: row; flex-wrap: wrap; }
  .nav__list > li > a { padding: .95em 15px; }
  .nav__sub {
    position: absolute; top: 100%; left: 0; z-index: 40;
    min-width: 268px;
    box-shadow: var(--shadow-2);
    border-top: 3px solid var(--gold);
    display: none;
  }
  .nav__list > li:hover > .nav__sub,
  .nav__list > li:focus-within > .nav__sub { display: block; }
  .nav__sub a { padding: .62em 16px; }
  .nav__list [aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--gold);
  }
  .submenu-toggle { display: none; }
}

/* --- 5.4 Breadcrumbs ------------------------------------------------------ */

.crumbs {
  list-style: none; margin: 0 0 1.2em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: .875rem; color: var(--muted);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before {
  content: "›"; color: var(--navy-300);
}
.crumbs a { color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* --- 5.5 Page header ------------------------------------------------------ */

.page-head { margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .35em; }
.page-head__lede {
  font-size: 1.08rem; color: var(--muted); max-width: 68ch; margin-bottom: 0;
}
.page-head--bar h1 {
  border-left: 4px solid var(--gold);
  padding-left: 14px;
}

/* --- 5.6 Hero / carousel -------------------------------------------------- */

.hero { position: relative; background: var(--navy); }
.hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}
.hero__slide img {
  width: 100%; height: clamp(240px, 42vw, 460px); object-fit: cover;
}
.hero__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 26px 16px;
  background: linear-gradient(to top, rgba(15,42,63,.88), rgba(15,42,63,0));
  color: #fff;
}
.hero__caption h2 { color: #fff; margin-bottom: .25em; }
.hero__caption p { margin: 0; color: #dbe5ec; }

.hero__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(15,42,63,.72); color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.hero__btn:hover { background: var(--navy-700); }
.hero__btn--prev { left: 10px; }
.hero__btn--next { right: 10px; }

.hero__dots {
  position: absolute; bottom: 10px; inset-inline: 0;
  display: flex; justify-content: center; gap: 8px;
}
.hero__dots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0;
}
.hero__dots [aria-current="true"] { background: var(--gold); }

/* --- 5.7 Cards ------------------------------------------------------------ */

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card__media { position: relative; background: var(--bg-alt); }
.card__media img { width: 100%; height: 190px; object-fit: cover; }
.card__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.card__title { font-size: 1.05rem; margin-bottom: .35em; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__meta {
  font-size: .875rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: .6em;
}
.card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.card__text { font-size: .94rem; color: var(--muted); margin-bottom: 1em; }
.card__foot { margin-top: auto; }

.card__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--gold); color: var(--navy-700);
  font-size: .78rem; font-weight: 700;
  padding: .25em .6em; border-radius: 3px;
}

/* --- 5.8 Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .72em 1.35em;
  font: inherit; font-weight: 500; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); color: #fff; }

/* Gold button: dark navy text on gold. Gold text on white would fail contrast. */
.btn--gold { background: var(--gold); color: var(--navy-700); }
.btn--gold:hover { background: var(--gold-700); color: #fff; }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); }

.btn--block { width: 100%; }
.btn--sm { padding: .5em 1em; font-size: .9rem; }

/* --- 5.9 Tabs (tour Itinerary / Inclusions / Exclusions) ------------------
   Panels ship VISIBLE with no [hidden]. JS adds hidden on init, so a
   no-JS visitor and a crawler get all three sections as stacked prose.
   -------------------------------------------------------------------------- */

.tabs { margin: 1.75rem 0; }
.tabs__list {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 0;
}
.tabs__list button {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: .7em 1.1em;
  font: inherit; font-weight: 500; color: var(--muted); cursor: pointer;
}
.tabs__list button:hover { color: var(--navy); }
.tabs__list [aria-selected="true"] {
  color: var(--navy); border-bottom-color: var(--gold);
}
.tabs__panel { padding-top: 1.4rem; }

/* Before JS upgrades it, each panel gets a visible heading. JS removes
   these when it activates tab mode on wide screens. */
.tabs__panel > h2:first-child { font-size: 1.15rem; }
.tabs.is-tabbed .tabs__panel > .tabs__panel-heading { display: none; }
.tabs:not(.is-tabbed) .tabs__list { display: none; }

/* --- 5.10 Itinerary days -------------------------------------------------- */

.day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: #fff;
}
.day > summary {
  cursor: pointer; list-style: none;
  padding: .85em 44px .85em 16px;
  font-weight: 500; color: var(--navy);
  position: relative;
}
.day > summary::-webkit-details-marker { display: none; }
.day > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--navy-300);
  border-bottom: 2px solid var(--navy-300);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.day[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.day[open] > summary { border-bottom: 1px solid var(--line-soft); }
.day__body { padding: 14px 16px 4px; }
.day__label { color: var(--gold-700); font-weight: 700; margin-right: .4em; }

/* --- 5.11 Fact list (duration, destinations, company info) ---------------- */

.facts {
  display: grid; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 1.5rem;
}
.facts > div {
  display: grid; grid-template-columns: 190px 1fr;
  gap: 14px; padding: .7em 16px;
  border-bottom: 1px solid var(--line-soft);
}
.facts > div:last-child { border-bottom: 0; }
.facts > div:nth-child(odd) { background: var(--bg-alt); }
.facts dt { font-weight: 500; color: var(--navy); margin: 0; }
.facts dd { margin: 0; }
@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- 5.12 Panels / notices ------------------------------------------------ */

.panel {
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 18px 20px;
  margin-bottom: 1.5rem;
}
.panel > :last-child { margin-bottom: 0; }
.panel h2, .panel h3 { margin-top: 0; }

.panel--gold  { border-left-color: var(--gold); background: var(--gold-100); }
.panel--info  { border-left-color: var(--navy-300); background: var(--navy-100); }
.panel--ok    { border-left-color: var(--ok);   background: var(--ok-bg); }
.panel--warn  { border-left-color: var(--warn); background: var(--warn-bg); }

/* Anti-phishing / payment safety notice. Deliberately readable, not fine
   print — hiding material conditions in small text is itself a policy risk. */
.notice-safety {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--gold-100);
  padding: 18px 20px;
  font-size: .95rem;
}
.notice-safety h2 { font-size: 1.05rem; margin-bottom: .5em; }
.notice-safety > :last-child { margin-bottom: 0; }

/* --- 5.13 Recognition block ----------------------------------------------- */

.recognition {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  background: #fff;
}
.recognition__head {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: .9em;
}
.recognition__head h2 { margin: 0; font-size: 1.15rem; }
.recognition__meta {
  display: grid; gap: 6px 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  font-size: .92rem; margin: 0;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.recognition__meta div { display: flex; gap: 7px; }
.recognition__meta dt { color: var(--muted); margin: 0; }
.recognition__meta dd { margin: 0; font-weight: 500; color: var(--navy); }

/* --- 5.14 Tables ---------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: .5em; }
th, td { padding: .65em .8em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--navy); color: #fff; font-weight: 500; border-color: var(--navy); }
tbody tr:nth-child(even) { background: var(--bg-alt); }

/* --- 5.15 Forms ----------------------------------------------------------- */

.form { display: grid; gap: 14px; }
.form__row { display: grid; gap: 14px; }
@media (min-width: 620px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.field { display: grid; gap: 5px; }
.field label { font-weight: 500; font-size: .93rem; color: var(--navy); }
.field .req { color: var(--err); }
.field .hint { font-size: .85rem; color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  padding: .62em .75em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:hover, select:hover, textarea:hover { border-color: var(--navy-300); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: var(--focus);
}
textarea { min-height: 120px; resize: vertical; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.check input { margin-top: .28em; flex: 0 0 auto; }

/* Honeypot. Offscreen rather than display:none — many bots skip fields that
   are display:none, which defeats the purpose. */
.hp { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.form__error {
  background: var(--err-bg); border: 1px solid var(--err);
  color: var(--err); border-radius: var(--radius); padding: .7em 1em; font-size: .92rem;
}

/* --- 5.16 Sidebar --------------------------------------------------------- */

.aside-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.aside-card > :last-child { margin-bottom: 0; }
.aside-card h2 {
  font-size: 1.05rem;
  border-left: 4px solid var(--gold);
  padding-left: 11px;
  margin-bottom: .8em;
}
.aside-card--cta { background: var(--navy); border-color: var(--navy); color: #eaf0f5; }
.aside-card--cta h2 { color: #fff; }
.aside-card--cta a:not(.btn) { color: var(--gold); }

.aside-list { list-style: none; margin: 0; padding: 0; font-size: .94rem; }
.aside-list li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.aside-list li:last-child { border-bottom: 0; }
.aside-list a { display: block; padding: .55em 0; text-decoration: none; }
.aside-list a:hover { text-decoration: underline; }

.aside-contact { list-style: none; margin: 0; padding: 0; font-size: .94rem; }
.aside-contact li {
  display: flex; gap: 9px; align-items: flex-start; margin: 0 0 .6em;
}

/* --- 5.17 Footer ---------------------------------------------------------- */

.footer {
  background: var(--navy-700);
  color: #c3d0da;
  padding-block: 44px 0;
  margin-top: 40px;
  font-size: .94rem;
}
.footer h2 {
  color: #fff; font-size: 1rem; margin-bottom: .9em;
  border-left: 3px solid var(--gold); padding-left: 10px;
}
.footer a { color: #dbe5ec; text-decoration: none; }
.footer a:hover { color: var(--gold); text-decoration: underline; }
.footer__cols {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-bottom: 32px;
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin: 0 0 .45em; }

.footer address { font-style: normal; line-height: 1.7; }
.footer__ids { margin-top: .8em; font-size: .88rem; color: #9db0bf; }
.footer__ids span { display: block; }

.footer__social { display: flex; gap: 12px; margin-top: 1em; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
}
.footer__social a:hover { background: var(--gold); color: var(--navy-700); }

.footer__note {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 20px;
  font-size: .85rem; color: #9db0bf; line-height: 1.7;
}
.footer__note strong { color: #c3d0da; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 16px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; align-items: center;
  font-size: .85rem; color: #9db0bf;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }

/* --- 5.18 Icons ----------------------------------------------------------- */

.icon {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
  vertical-align: -.125em;
}
.icon--lg { width: 1.4em; height: 1.4em; }
.icon--solid { fill: currentColor; stroke: none; }


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

.text-muted  { color: var(--muted); }
.text-center { text-align: center; }
.text-sm     { font-size: .9rem; }
.text-lg     { font-size: 1.08rem; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.75rem; }

.list-plain { list-style: none; padding-left: 0; }
.list-check { list-style: none; padding-left: 0; }
.list-check li {
  position: relative; padding-left: 26px; margin-bottom: .45em;
}
.list-check li::before {
  content: ""; position: absolute; left: 2px; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.list-cross { list-style: none; padding-left: 0; }
.list-cross li { position: relative; padding-left: 26px; margin-bottom: .45em; }
.list-cross li::before {
  content: "×"; position: absolute; left: 4px; top: -.05em;
  color: var(--err); font-size: 1.25em; line-height: 1.4;
}

.flow > * + * { margin-top: 1rem; }


/* ==========================================================================
   7. PRINT HOOKS
   ========================================================================== */

@media print {
  .topbar, .nav, .nav-toggle, .layout__aside, .hero__btn, .hero__dots,
  .footer__social, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .layout { display: block; }
  a { text-decoration: underline; }
  .tabs__list { display: none !important; }
  .tabs__panel[hidden] { display: block !important; }
  .day[open] > summary::after, .day > summary::after { display: none; }
  .day > .day__body { display: block !important; }
}


/* ==========================================================================
   8. PREMIUM UI  —  "Your India Journey"
   ==========================================================================

   Added in the 2026 redesign. This section comes last on purpose: the :root
   block below re-declares the palette tokens, so every component written in
   sections 3-7 picks up the new colours without being rewritten.

   PALETTE — evolved from the existing navy/gold logo, not replaced.
     --ink      #16232e  charcoal-navy, near black          16.4:1 on ivory
     --navy     #143b52  the brand navy, deepened            11.9:1 on ivory
     --ivory    #faf7f2  warm off-white ground
     --saffron  #c26a1d  terracotta-leaning accent            3.6:1 - LARGE ONLY
     --saffron-ink #9c4f12  the small-text weight of it       5.5:1
     --gold     #e5a623  the existing brand gold              2.1:1 - NEVER TEXT
     --teal     #1f6b5e  muted secondary                      5.9:1

   The contrast rule from section 2 still stands and now covers saffron too:
   --saffron and --gold are fills, rules, markers and text-on-dark. Only
   --saffron-ink carries small text on a light ground.

   TYPE
     display  Fraunces   - editorial headings, optical sizing
     body     Manrope    - UI and running text, international legibility
     Both self-hosted; see fonts/README. Fallback stacks are real, so the
     site is fully usable before the woff2 files are dropped in.
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-var.woff2") format("woff2-variations");font-weight:300 900;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var.woff2") format("woff2-variations");font-weight:200 800;font-display:swap}

:root{
  --ink:#16232e;
  --ink-2:#4c5f6e;
  --ink-3:#7b8c99;

  --navy:#143b52;
  --navy-700:#0d2939;
  --navy-300:#5b7f96;
  --navy-100:#e6edf2;

  --ivory:#faf7f2;
  --ivory-2:#f2ece3;
  --bg:#ffffff;
  --bg-alt:#faf7f2;

  --saffron:#c26a1d;
  --saffron-ink:#9c4f12;
  --saffron-100:#fbf0e5;
  --gold:#e5a623;
  --gold-700:#c98d13;
  --gold-100:#fdf3e0;

  --teal:#1f6b5e;
  --teal-100:#e7f1ee;

  --line:#e2dbd1;
  --line-soft:#efe9e1;

  --ok:#1f6b5e;
  --ok-bg:#e7f1ee;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --sh-1:0 1px 2px rgba(22,35,46,.05);
  --sh-2:0 2px 8px rgba(22,35,46,.07),0 12px 28px -18px rgba(22,35,46,.22);
  --sh-3:0 8px 20px rgba(22,35,46,.10),0 28px 60px -28px rgba(22,35,46,.30);

  --r-sm:3px;
  --r-md:6px;
  --r-lg:12px;

  --head-h:74px;
}

body{font-family:var(--body);background:var(--bg);color:var(--ink);letter-spacing:-.005em}
h1,h2,h3,h4,.u-display{font-family:var(--display);font-weight:500;letter-spacing:-.018em;text-wrap:balance}
.u-body{font-family:var(--body)}
.u-eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--saffron-ink);display:block;margin-bottom:.7rem;
}
.u-eyebrow--light{color:var(--gold)}
.u-lede{font-size:1.075rem;line-height:1.65;color:var(--ink-2);max-width:62ch}
.u-num{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   8.1  BUTTONS — restated on the new palette
   -------------------------------------------------------------------------- */
.btn{
  font-family:var(--body);font-weight:600;font-size:.94rem;letter-spacing:-.005em;
  border-radius:var(--r-sm);padding:.78rem 1.4rem;line-height:1.2;
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn--primary{background:var(--saffron);border-color:var(--saffron);color:#fff}
.btn--primary:hover{background:var(--saffron-ink);border-color:var(--saffron-ink);color:#fff}
.btn--navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn--outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink);background:var(--ivory);color:var(--ink)}
.btn--onDark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px)}
.btn--onDark:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--lg{padding:.95rem 1.75rem;font-size:1rem}

/* --------------------------------------------------------------------------
   8.2  SITE HEADER — sticky, with mega menu and global search
   -------------------------------------------------------------------------- */
.tfi-bar{background:var(--navy-700);color:#cfe0ea;font-size:.78rem;letter-spacing:.01em}
.tfi-bar__in{
  max-width:1280px;margin:0 auto;padding:.45rem 24px;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.tfi-bar a{color:#fff;text-decoration:none}
.tfi-bar a:hover{text-decoration:underline;text-underline-offset:3px}
.tfi-bar__est{color:#9fbccd}
.tfi-bar__links{display:flex;gap:1.25rem;align-items:center}
@media(max-width:720px){.tfi-bar__est{display:none}.tfi-bar__in{justify-content:center}}

.tfi-head{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .2s ease;
}
.tfi-head.is-stuck{box-shadow:var(--sh-2)}
.tfi-head__in{
  max-width:1280px;margin:0 auto;padding:0 24px;height:var(--head-h);
  display:flex;align-items:center;gap:1.5rem;
}
.tfi-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.tfi-logo img{display:block;height:38px;width:auto}
.tfi-logo__txt{display:none}
@media(min-width:520px){.tfi-logo__txt{display:block;line-height:1.15}}
.tfi-logo__name{font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.tfi-logo__tag{font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--saffron-ink);font-weight:700}

.tfi-mainnav{display:none;margin-left:auto}
@media(min-width:1080px){.tfi-mainnav{display:flex;align-items:center;gap:.15rem}}
.tfi-mainnav > li{list-style:none;position:relative}
.tfi-mainnav ul{list-style:none;margin:0;padding:0}
.tfi-mainnav > li > a,.tfi-mainnav > li > button{
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);
  background:none;border:0;cursor:pointer;text-decoration:none;
  padding:.55rem .72rem;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:.32rem;
}
.tfi-mainnav > li > a:hover,.tfi-mainnav > li > button:hover,
.tfi-mainnav > li > button[aria-expanded="true"]{background:var(--ivory);color:var(--saffron-ink)}
.tfi-mainnav .caret{width:9px;height:9px;transition:transform .18s ease;flex:0 0 auto}
.tfi-mainnav > li > button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.tfi-mainnav a[aria-current]{color:var(--saffron-ink)}

.tfi-head__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
@media(min-width:1080px){.tfi-head__actions{margin-left:.75rem}}
.tfi-iconbtn{
  width:40px;height:40px;display:inline-grid;place-items:center;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);cursor:pointer;text-decoration:none;
}
.tfi-iconbtn:hover{border-color:var(--ink);background:var(--ivory)}
.tfi-iconbtn svg{width:19px;height:19px}
.tfi-wa{color:#1f6b5e;border-color:#cfe3dd}
.tfi-wa:hover{background:#e7f1ee;border-color:#1f6b5e}
.tfi-head__cta{display:none}
@media(min-width:760px){.tfi-head__cta{display:inline-flex}}
@media(min-width:1080px){.tfi-navtoggle{display:none}}

/* --------------------------------------------------------------------------
   8.3  MEGA MENU
   -------------------------------------------------------------------------- */
.tfi-mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:min(940px,90vw);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:1.6rem;z-index:70;
}
.tfi-mega[hidden]{display:none}
.tfi-mega__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 2rem}
.tfi-mega__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tfi-mega__h,.tfi-mega h3{
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--saffron-ink);margin:0 0 .8rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line-soft);
}
.tfi-mega li{margin:0}
.tfi-mega li + li{margin-top:.42rem}
.tfi-mega a{
  font-size:.88rem;color:var(--ink-2);text-decoration:none;display:block;
  padding:.14rem 0;border-radius:2px;
}
.tfi-mega a:hover{color:var(--saffron-ink)}
.tfi-mega__feature{
  grid-column:span 1;background:var(--ivory);border-radius:var(--r-md);
  padding:1.1rem;border:1px solid var(--line-soft);
}
.tfi-mega__feature p{font-size:.85rem;color:var(--ink-2);margin:.4rem 0 .9rem}
.tfi-mega__foot{
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;
}
.tfi-mega__foot a{color:var(--saffron-ink);font-weight:600;text-decoration:none}
.tfi-mega__foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   8.4  MOBILE DRAWER
   -------------------------------------------------------------------------- */
.tfi-drawer{
  position:fixed;inset:0;z-index:90;background:#fff;
  display:flex;flex-direction:column;overflow-y:auto;
}
.tfi-drawer[hidden]{display:none}
.tfi-drawer__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 20px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:#fff;
}
.tfi-drawer__body{padding:.5rem 20px 2rem}
.tfi-acc{border-bottom:1px solid var(--line-soft)}
.tfi-acc__btn{
  width:100%;font:inherit;font-size:1.02rem;font-weight:600;color:var(--ink);
  background:none;border:0;padding:1rem 0;display:flex;justify-content:space-between;
  align-items:center;cursor:pointer;text-align:left;gap:1rem;
}
.tfi-acc__btn .caret{width:11px;height:11px;transition:transform .18s ease;color:var(--ink-3)}
.tfi-acc__btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.tfi-acc__panel{padding:0 0 1rem}
.tfi-acc__panel[hidden]{display:none}
.tfi-acc__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.tfi-acc__panel a{display:block;padding:.6rem .9rem;font-size:.95rem;color:var(--ink-2);text-decoration:none;border-radius:var(--r-sm)}
.tfi-acc__panel a:hover{background:var(--ivory);color:var(--saffron-ink)}
.tfi-acc__h,.tfi-acc__panel h4{
  font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:.9rem 0 .35rem;padding-left:.9rem;
}
.tfi-drawer__cta{display:grid;gap:.6rem;margin-top:1.5rem}

/* --------------------------------------------------------------------------
   8.5  GLOBAL SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.tfi-search{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column}
.tfi-search[hidden]{display:none}
.tfi-search__scrim{position:absolute;inset:0;background:rgba(13,41,57,.55);backdrop-filter:blur(3px)}
.tfi-search__panel{
  position:relative;background:#fff;width:min(760px,100%);margin:0 auto;
  max-height:100%;display:flex;flex-direction:column;
  border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3);
}
@media(min-width:760px){
  .tfi-search{padding-top:6vh}
  .tfi-search__panel{border-radius:var(--r-lg);max-height:88vh}
}
.tfi-search__bar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.tfi-search__bar svg{width:20px;height:20px;color:var(--ink-3);flex:0 0 auto}
.tfi-search__input{
  flex:1;font:inherit;font-size:1.06rem;border:0;outline:0;background:none;color:var(--ink);min-width:0;
}
.tfi-search__input::placeholder{color:var(--ink-3)}
.tfi-search__esc{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.25rem .5rem;background:none;cursor:pointer;
}
.tfi-search__esc:hover{color:var(--ink);border-color:var(--ink)}
.tfi-search__body{overflow-y:auto;padding:.5rem 0 1rem;flex:1;-webkit-overflow-scrolling:touch}
.tfi-search__group{padding:.6rem 0}
.tfi-search__group h3{
  font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0;padding:.4rem 1.15rem .5rem;
}
.tfi-search__group ul{list-style:none;margin:0;padding:0}
.tfi-hit{
  display:flex;gap:.85rem;align-items:flex-start;padding:.62rem 1.15rem;
  text-decoration:none;color:inherit;border-left:3px solid transparent;
}
.tfi-hit:hover,.tfi-hit.is-active{background:var(--ivory);border-left-color:var(--saffron)}
.tfi-hit__ico{
  width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--navy-100);color:var(--navy);
}
.tfi-hit__ico svg{width:16px;height:16px}
.tfi-hit__t{font-weight:600;font-size:.94rem;line-height:1.35;color:var(--ink)}
.tfi-hit__t mark{background:var(--gold-100);color:var(--saffron-ink);padding:0 1px;border-radius:2px}
.tfi-hit__s{font-size:.8rem;color:var(--ink-3);margin-top:.12rem}
.tfi-search__empty{padding:2.2rem 1.15rem;text-align:center;color:var(--ink-2)}
.tfi-search__empty strong{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:.35rem}
.tfi-search__sugg{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1rem}
.tfi-chip{
  font:inherit;font-size:.83rem;background:var(--ivory);border:1px solid var(--line);
  color:var(--ink-2);border-radius:999px;padding:.35rem .8rem;cursor:pointer;text-decoration:none;
}
.tfi-chip:hover{border-color:var(--saffron);color:var(--saffron-ink);background:var(--saffron-100)}
.tfi-search__foot{
  border-top:1px solid var(--line-soft);padding:.7rem 1.15rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;font-size:.78rem;color:var(--ink-3);
}
.tfi-search__foot kbd{
  font:inherit;font-size:.7rem;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:3px;padding:.05rem .32rem;background:var(--ivory);color:var(--ink-2);
}
.tfi-search__all{color:var(--saffron-ink);font-weight:700;text-decoration:none}
.tfi-search__all:hover{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   8.6  HERO
   -------------------------------------------------------------------------- */
.tfi-hero{position:relative;isolation:isolate;background:var(--navy-700);color:#fff;overflow:hidden}
.tfi-hero__media{position:absolute;inset:0;z-index:-2}
.tfi-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.tfi-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,41,57,.72) 0%,rgba(13,41,57,.45) 38%,rgba(13,41,57,.86) 100%);
}
.tfi-hero__in{max-width:1280px;margin:0 auto;padding:clamp(3.5rem,9vw,6.5rem) 24px clamp(2rem,4vw,3rem)}
.tfi-hero__copy{max-width:36ch}
.tfi-hero h1{
  font-size:clamp(2.15rem,5.6vw,4rem);line-height:1.03;color:#fff;margin:0;
  font-weight:500;letter-spacing:-.028em;
}
.tfi-hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.tfi-hero__sub{margin-top:1.1rem;font-size:clamp(1rem,1.9vw,1.16rem);color:#dbe7ee;line-height:1.6;max-width:46ch}
.tfi-hero__cta{display:flex;gap:.7rem;margin-top:1.9rem;flex-wrap:wrap}

/* the search interface built into the hero */
.tfi-herosearch{
  margin-top:clamp(2rem,5vw,3.2rem);background:rgba(255,255,255,.97);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:1.1rem;
  display:grid;gap:.75rem;
}
@media(min-width:860px){.tfi-herosearch{grid-template-columns:1fr auto;align-items:center;padding:1rem 1rem 1rem 1.35rem}}
.tfi-herosearch__field{display:flex;align-items:center;gap:.8rem;min-width:0}
.tfi-herosearch__field svg{width:21px;height:21px;color:var(--saffron);flex:0 0 auto}
.tfi-herosearch__fake{
  flex:1;text-align:left;font:inherit;font-size:1.02rem;color:var(--ink-3);
  background:none;border:0;cursor:pointer;padding:.55rem 0;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tfi-herosearch__fake:hover{color:var(--ink-2)}
.tfi-herosearch .btn{white-space:nowrap}
.tfi-heroquick{
  margin-top:.9rem;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;
  font-size:.83rem;color:#c3d6e1;
}
.tfi-heroquick a{
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:.28rem .75rem;background:rgba(255,255,255,.07);
}
.tfi-heroquick a:hover{background:#fff;color:var(--navy);border-color:#fff}

/* --------------------------------------------------------------------------
   8.7  TRUST BAR
   -------------------------------------------------------------------------- */
.tfi-trust{border-bottom:1px solid var(--line-soft);background:#fff}
.tfi-trust__in{
  max-width:1280px;margin:0 auto;padding:1.4rem 24px;
  display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.tfi-trust__it{display:flex;gap:.75rem;align-items:flex-start}
.tfi-trust__ico{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--saffron-100);color:var(--saffron-ink);
}
.tfi-trust__ico svg{width:17px;height:17px}
.tfi-trust__t{font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.3}
.tfi-trust__d{font-size:.79rem;color:var(--ink-3);margin-top:.15rem;line-height:1.4}

/* --------------------------------------------------------------------------
   8.8  SECTIONS + EDITORIAL BLOCKS
   -------------------------------------------------------------------------- */
.tfi-sec{padding:clamp(3rem,6vw,4.75rem) 0}
.tfi-sec--alt{background:var(--ivory)}
.tfi-sec--dark{background:var(--navy-700);color:#e8f0f5}
.tfi-sec--dark h2,.tfi-sec--dark h3{color:#fff}
.tfi-sec--dark .u-lede{color:#bcd2df}
.tfi-in{max-width:1280px;margin:0 auto;padding:0 24px}
.tfi-sechead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2rem;
}
.tfi-sechead h2{font-size:clamp(1.65rem,3.4vw,2.4rem);margin:0;line-height:1.12}
.tfi-sechead .u-lede{margin-top:.7rem}
.tfi-more{
  font-size:.87rem;font-weight:700;color:var(--saffron-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.tfi-more:hover{gap:.6rem}
.tfi-more svg{width:14px;height:14px;transition:transform .16s ease}

/* destination tiles — asymmetric, image-led, not cards */
.tfi-tiles{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.tfi-tiles{grid-template-columns:repeat(4,1fr)}}
.tfi-tile{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-md);
  text-decoration:none;color:#fff;min-height:180px;background:var(--navy);
  grid-column:span 1;
}
@media(min-width:760px){
  .tfi-tile--wide{grid-column:span 2}
  .tfi-tile--tall{grid-row:span 2;min-height:376px}
}
.tfi-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.6,.3,1)}
.tfi-tile:hover img,.tfi-tile:focus-visible img{transform:scale(1.06)}
.tfi-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,41,57,0) 30%,rgba(13,41,57,.78) 100%);
}
.tfi-tile__c{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem}
.tfi-tile__n{font-family:var(--display);font-size:1.16rem;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.tfi-tile__m{font-size:.75rem;color:#c9dbe6;margin-top:.15rem;letter-spacing:.02em}
.tfi-tile__a{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  opacity:0;transform:translateX(-5px);transition:opacity .22s ease,transform .22s ease;
}
.tfi-tile:hover .tfi-tile__a,.tfi-tile:focus-visible .tfi-tile__a{opacity:1;transform:none}
.tfi-tile__a svg{width:13px;height:13px}

/* tour cards */
.tfi-rail{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.tfi-rail--scroll{
  display:flex;overflow-x:auto;gap:18px;scroll-snap-type:x mandatory;
  padding-bottom:.75rem;margin-bottom:-.75rem;
}
.tfi-rail--scroll > *{flex:0 0 min(88vw,300px);scroll-snap-align:start}
.tfi-tour{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.tfi-tour:hover{border-color:var(--line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tfi-tour__m{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivory-2)}
.tfi-tour__m img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.tfi-tour:hover .tfi-tour__m img{transform:scale(1.05)}
.tfi-tag{
  position:absolute;top:.65rem;left:.65rem;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--navy);
  padding:.28rem .55rem;border-radius:var(--r-sm);
}
.tfi-tour__b{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.tfi-tour__t{font-family:var(--display);font-size:1.09rem;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.tfi-tour:hover .tfi-tour__t{color:var(--saffron-ink)}
.tfi-tour__r{font-size:.79rem;color:var(--ink-3);display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.tfi-tour__r b{color:var(--ink-2);font-weight:600}
.tfi-tour__d{font-size:.86rem;color:var(--ink-2);line-height:1.55}
.tfi-tour__f{
  margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
}
.tfi-dur{
  font-size:.78rem;font-weight:700;color:var(--navy);background:var(--navy-100);
  padding:.24rem .55rem;border-radius:var(--r-sm);letter-spacing:.01em;
}
.tfi-tour__go{font-size:.83rem;font-weight:700;color:var(--saffron-ink);display:inline-flex;align-items:center;gap:.3rem}
.tfi-tour__go svg{width:13px;height:13px;transition:transform .16s ease}
.tfi-tour:hover .tfi-tour__go svg{transform:translateX(3px)}

/* interests — editorial, no boxes */
.tfi-interests{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));border-top:1px solid var(--line)}
.tfi-int{
  display:flex;gap:.9rem;padding:1.35rem 1.2rem 1.45rem;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  transition:background .18s ease;
}
.tfi-int:hover{background:#fff}
.tfi-sec--alt .tfi-int:hover{background:#fff}
.tfi-int__i{width:34px;height:34px;flex:0 0 auto;color:var(--saffron);}
.tfi-int__i svg{width:100%;height:100%}
.tfi-int__t{font-family:var(--display);font-size:1.04rem;font-weight:600;letter-spacing:-.012em}
.tfi-int:hover .tfi-int__t{color:var(--saffron-ink)}
.tfi-int__d{font-size:.82rem;color:var(--ink-3);margin-top:.22rem;line-height:1.5}

/* signature experiences — big photography, storytelling */
.tfi-sig{display:grid;gap:22px}
@media(min-width:900px){.tfi-sig{grid-template-columns:repeat(2,1fr)}.tfi-sig > :first-child{grid-column:1/-1}}
.tfi-sigc{position:relative;overflow:hidden;border-radius:var(--r-md);text-decoration:none;color:#fff;display:block;min-height:290px}
@media(min-width:900px){.tfi-sig > :first-child{min-height:400px}}
.tfi-sigc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.tfi-sigc:hover img{transform:scale(1.05)}
.tfi-sigc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,41,57,.05) 25%,rgba(13,41,57,.85) 100%)}
.tfi-sigc__c{position:absolute;inset:auto 0 0 0;padding:1.4rem 1.5rem;z-index:1;max-width:52ch}
.tfi-sigc__t{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.tfi-sigc__d{font-size:.9rem;color:#d3e2eb;margin-top:.5rem;line-height:1.55}
.tfi-sigc__l{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.85rem;font-size:.83rem;
  font-weight:700;color:var(--gold);letter-spacing:.01em;
}
.tfi-sigc__l svg{width:13px;height:13px;transition:transform .16s ease}
.tfi-sigc:hover .tfi-sigc__l svg{transform:translateX(3px)}

/* brand story stats */
.tfi-story{display:grid;gap:2.4rem}
@media(min-width:900px){.tfi-story{grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}}
.tfi-story h2{font-size:clamp(1.75rem,3.6vw,2.6rem);line-height:1.1}
.tfi-story p{margin-top:1.1rem;color:var(--ink-2);line-height:1.7;max-width:56ch}
.tfi-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tfi-stat{padding:1.35rem 1.3rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tfi-stat__n{font-family:var(--display);font-size:clamp(1.55rem,3.4vw,2.15rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em}
.tfi-stat__l{font-size:.82rem;color:var(--ink-2);margin-top:.45rem;line-height:1.45}
.tfi-stat__s{font-size:.71rem;color:var(--ink-3);margin-top:.3rem}

/* credentials — the verifiable strip */
.tfi-creds{background:var(--navy-700);color:#fff}
.tfi-creds__in{max-width:1280px;margin:0 auto;padding:2rem 24px 2.2rem}
.tfi-creds__lede{font-size:.86rem;color:#a8c4d4;margin-bottom:1.2rem}
.tfi-creds__lede b{color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;margin-right:.6rem}
.tfi-creds__g{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-top:1px solid rgba(229,166,35,.3)}
.tfi-cred{padding:1.1rem 1.3rem 1.1rem 0;border-right:1px solid rgba(255,255,255,.1)}
.tfi-cred:last-child{border-right:0}
@media(min-width:640px){.tfi-cred{padding-left:1.3rem}.tfi-cred:first-child{padding-left:0}}
.tfi-cred dt{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem}
.tfi-cred dd{margin:0;font-size:.94rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.01em;word-break:break-word}
.tfi-cred small{display:block;font-size:.74rem;color:#9fbccd;font-weight:400;margin-top:.3rem;letter-spacing:0}

/* reviews */
.tfi-revs{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tfi-rev{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:1.5rem 1.5rem 1.35rem;display:flex;flex-direction:column}
.tfi-rev__q{font-family:var(--display);font-size:1.06rem;line-height:1.5;color:var(--ink);font-weight:400;letter-spacing:-.01em}
.tfi-rev__q::before{content:"\201C";color:var(--gold);font-size:2rem;line-height:0;vertical-align:-.35rem;margin-right:.1rem}
.tfi-rev__w{margin-top:auto;padding-top:1.15rem;display:flex;align-items:center;gap:.7rem}
.tfi-rev__av{width:36px;height:36px;border-radius:50%;background:var(--navy-100);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:0 0 auto}
.tfi-rev__n{font-weight:700;font-size:.88rem}
.tfi-rev__c{font-size:.78rem;color:var(--ink-3)}

/* final CTA */
.tfi-cta{position:relative;isolation:isolate;background:var(--navy-700);color:#fff;overflow:hidden;text-align:center}
.tfi-cta__media{position:absolute;inset:0;z-index:-2}
.tfi-cta__media img{width:100%;height:100%;object-fit:cover}
.tfi-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,41,57,.88),rgba(13,41,57,.94))}
.tfi-cta__in{max-width:720px;margin:0 auto;padding:clamp(3.2rem,7vw,5rem) 24px}
.tfi-cta h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;color:#fff;margin:0}
.tfi-cta p{margin-top:1rem;color:#c7dae5;font-size:1.05rem;line-height:1.6}
.tfi-cta__b{display:flex;gap:.7rem;justify-content:center;margin-top:1.9rem;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   8.9  FOOTER
   -------------------------------------------------------------------------- */
.tfi-foot{background:var(--ink);color:#b9c8d3;font-size:.88rem}
.tfi-foot__in{max-width:1280px;margin:0 auto;padding:3.2rem 24px 1.6rem}
.tfi-foot__g{display:grid;gap:2.2rem;grid-template-columns:1fr}
@media(min-width:680px){.tfi-foot__g{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.tfi-foot__g{grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:2.6rem}}
.tfi-foot h3{
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
.tfi-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.tfi-foot a{color:#d5e2ea;text-decoration:none}
.tfi-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tfi-foot__about p{color:#a8bac7;line-height:1.65;margin:.9rem 0 0;max-width:38ch}
.tfi-foot__logo{display:flex;align-items:center;gap:.65rem}
.tfi-foot__logo img{height:34px;width:auto}
.tfi-foot__name{font-family:var(--display);font-size:1.02rem;font-weight:600;color:#fff}
.tfi-foot address{font-style:normal;line-height:1.7;color:#c3d3dd}
.tfi-foot__ids{margin-top:1rem;font-size:.76rem;color:#8ba2b1;display:grid;gap:.25rem;font-variant-numeric:tabular-nums}
.tfi-foot__soc{display:flex;gap:.5rem;margin-top:1.2rem}
.tfi-foot__soc a{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);display:grid;place-items:center;color:#d5e2ea}
.tfi-foot__soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.tfi-foot__soc svg{width:16px;height:16px}
.tfi-foot__rec{
  margin-top:2.6rem;padding:1.15rem 1.3rem;border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md);background:rgba(255,255,255,.03);
}
.tfi-foot__rec p{margin:0;color:#c9d8e2;line-height:1.6;font-size:.85rem}
.tfi-foot__rec b{color:#fff}
.tfi-foot__bot{
  margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:#8ba2b1;
}
.tfi-foot__bot a{color:#a8bac7}

/* --------------------------------------------------------------------------
   8.10  MOBILE STICKY ACTION BAR
   -------------------------------------------------------------------------- */
.tfi-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(22,35,46,.08);
  display:grid;grid-template-columns:auto auto 1fr;gap:.55rem;padding:.6rem .8rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
}
@media(min-width:760px){.tfi-sticky{display:none}}
.tfi-sticky .btn{padding:.7rem 1rem}
.tfi-sticky .tfi-iconbtn{width:44px;height:44px}
body.has-sticky{padding-bottom:76px}
@media(min-width:760px){body.has-sticky{padding-bottom:0}}

/* --------------------------------------------------------------------------
   8.11  TRIP PLANNER (multi-step)
   -------------------------------------------------------------------------- */
.tfi-planner{max-width:760px;margin:0 auto}
.tfi-steps{display:flex;gap:.4rem;margin-bottom:1.8rem;flex-wrap:wrap}
.tfi-steps__i{flex:1 1 0;min-width:44px;height:4px;border-radius:2px;background:var(--line);transition:background .25s ease}
.tfi-steps__i.is-done{background:var(--teal)}
.tfi-steps__i.is-now{background:var(--saffron)}
.tfi-step[hidden]{display:none}
.tfi-step__n{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem}
.tfi-step h2{font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.18;margin:0}
.tfi-step__h{color:var(--ink-2);margin-top:.6rem;font-size:.95rem;line-height:1.6;max-width:52ch}
.tfi-opts{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:1.6rem}
.tfi-opt{position:relative}
.tfi-opt input{position:absolute;opacity:0;width:1px;height:1px}
.tfi-opt span{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--r-md);cursor:pointer;font-size:.93rem;font-weight:600;color:var(--ink);
  background:#fff;transition:border-color .15s ease,background .15s ease;min-height:52px;
}
.tfi-opt span:hover{border-color:var(--ink-3)}
.tfi-opt input:checked + span{border-color:var(--saffron);background:var(--saffron-100);color:var(--saffron-ink)}
.tfi-opt input:focus-visible + span{outline:2px solid var(--saffron);outline-offset:2px}
.tfi-opt svg{width:19px;height:19px;flex:0 0 auto;color:var(--saffron)}
.tfi-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.tfi-summary{
  background:var(--ivory);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:1.1rem 1.25rem;margin-top:1.6rem;font-size:.88rem;
}
.tfi-summary dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:0}
.tfi-summary dt{color:var(--ink-3);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tfi-summary dd{margin:0;color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   8.12  MOTION + REVEALS
   -------------------------------------------------------------------------- */
.u-reveal{opacity:1;transform:none}
.js .u-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.6,.3,1)}
.js .u-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .u-reveal{opacity:1;transform:none}
  .tfi-tile img,.tfi-tour__m img,.tfi-sigc img{transition:none}
}

.tfi-mega__h,.tfi-acc__h{margin-top:0}
.tfi-acc__h{margin:.9rem 0 .35rem;padding-left:.9rem}

/* --------------------------------------------------------------------------
   8.13  BLOCKIFY LABEL PAIRS
   These title/description pairs are <span>s, chosen so the whole card can be a
   single <a>. Spans are inline by default, so without this the title and its
   description run together — "RajasthanForts, palaces and the Thar". Only the
   pairs whose parent is not already a flex column need it.
   -------------------------------------------------------------------------- */
.tfi-logo__name,.tfi-logo__tag,
.tfi-trust__t,.tfi-trust__d,
.tfi-tile__n,.tfi-tile__m,
.tfi-int__t,.tfi-int__d,
.tfi-sigc__t,.tfi-sigc__d,.tfi-sigc__l,
.tfi-rev__n,.tfi-rev__c,
.tfi-hit__t,.tfi-hit__s{display:block}
.tfi-sigc__l{display:inline-flex}
.tfi-hit > span:last-child{min-width:0;flex:1}

/* --------------------------------------------------------------------------
   8.14  HEADER FIT
   Seven nav items, a logo lockup and three actions do not fit 1232px of usable
   container at the sizes first chosen — the "Plan My Trip" button was pushed
   off the right edge and "India Tours" wrapped onto two lines. Tightened, and
   the logo wordmark now waits for the width to justify it.
   -------------------------------------------------------------------------- */
.tfi-head__in{gap:1rem}
.tfi-logo__txt{display:none}
@media(min-width:1220px){.tfi-logo__txt{display:block}}
.tfi-mainnav > li > a,.tfi-mainnav > li > button{
  font-size:.86rem;padding:.5rem .58rem;white-space:nowrap;
}
.tfi-mainnav{gap:0}
.tfi-head__actions{flex:0 0 auto}
.btn--sm{padding:.55rem 1rem;font-size:.85rem}

/* --------------------------------------------------------------------------
   8.15  CARDS ON DARK SECTIONS
   .tfi-sec--dark sets a light text colour for the band. A .tfi-tour card
   placed in that band has a WHITE background but was inheriting that light
   colour, so its title rendered white-on-white and vanished. A component with
   its own surface must take its text from the same token set as that surface,
   never from whatever section it happens to sit in.
   -------------------------------------------------------------------------- */
.tfi-tour{color:var(--ink)}
.tfi-tour__t{color:var(--ink)}
.tfi-sec--dark .tfi-tour__d{color:var(--ink-2)}
.tfi-sec--dark .tfi-rev__q{color:var(--ink)}