/* ==================================================================
   Keshika Travel & Tours — Gaya Pitru Tarpana & Kashi Moksha Yatra
   Landing page styles.  Font: Plus Jakarta Sans.
   ================================================================== */

:root {
    --ink:        #2a1a10;
    --ink-soft:   #5f4e40;
    --muted:      #7c6a58;
    --brand:      #4a2113;
    --brand-2:    #6b3218;
    --gold:       #c97a16;
    --gold-soft:  #f0c274;
    --cream:      #fbf5ea;
    --cream-2:    #f5ead6;
    --line:       #ece4d6;
    --page:       #ebe7e1;
    --white:      #ffffff;
    --ok:         #2f7a49;
    --no:         #b0563a;
    --radius-xl:  28px;
    --radius-lg:  24px;
    --radius-md:  16px;
    --shadow:     0 24px 60px rgba(60, 35, 15, .10);
    --content:    1380px;                 /* inner reading width on wide screens */
    --gutter:     clamp(20px, 4.5vw, 72px);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; line-height: 1.14; font-weight: 700; }
h1 { font-size: clamp(34px, 5.2vw, 58px); letter-spacing: -.035em; line-height: 1.06; }
h2 { font-size: clamp(27px, 3.4vw, 41px); }
h3 { font-size: 19px; letter-spacing: -.02em; }
p  { margin: 0; }

.ico    { width: 22px; height: 22px; flex: none; }
.ico-sm { width: 17px; height: 17px; }

.skip-link {
    position: absolute; left: -9999px; top: 12px; z-index: 200;
    background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 10px;
}
.skip-link:focus { left: 16px; }

/* ---------------------------------------------------------------- shell */
.shell {
    width: 100%;
    background: var(--white);
    position: relative;
}

.section { padding: 96px var(--gutter); }
/* keep line lengths sane on wide monitors while the page stays edge-to-edge */
.section > * { max-width: var(--content); margin-inline: auto; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; }
.section-head h2 { margin-top: 16px; }
.section-head-center { flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; }
.section-sub { color: var(--muted); font-size: 15px; max-width: 520px; line-height: 1.8; }
.section-head-center .section-sub { max-width: 600px; margin-top: 14px; }

/* ---------------------------------------------------------------- chips + buttons */
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--white); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
    letter-spacing: .01em;
}
.chip-light {
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34);
    color: #fff; backdrop-filter: blur(8px);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border: 1px solid transparent; border-radius: 999px;
    font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space: nowrap;
}
.btn-sm { padding: 10px 19px; font-size: 13.5px; }
.btn-lg { padding: 15px 28px; font-size: 15px; }

.btn-primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; box-shadow: 0 10px 26px rgba(74, 33, 19, .22); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(74, 33, 19, .3); }

.btn-cream { background: var(--white); color: var(--brand); }
.btn-cream:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }

.btn-ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); }

.btn-line { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--gold); color: var(--brand); }

.btn-wa { background: #128c4a; color: #fff; box-shadow: 0 10px 24px rgba(18, 140, 74, .28); }
.btn-wa:hover { background: #0f7a41; transform: translateY(-2px); }

/* ---------------------------------------------------------------- header */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--gold), #8a3f10); color: #fff;
    box-shadow: 0 8px 18px rgba(138, 63, 16, .28);
}
.brand-text strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.brand-text small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* uploaded logo — assets/img/logo.png (see logo_url() in includes/functions.php) */
/* 4:3 lockup — below ~70px the "Keshika Travel and Tours" wordmark stops being readable */
.brand-logo { height: 72px; width: auto; max-width: 210px; object-fit: contain; }
/* white plate: keeps a dark logo legible on the dark footer when there is no logo-light file */
.brand-plate { background: #fff; padding: 9px 15px; border-radius: 14px; }
.footer-brand .brand-logo { height: 96px; max-width: 240px; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    /* stays inside the content width on wide monitors, gutter-padded below that */
    padding: 11px max(var(--gutter), calc((100% - var(--content)) / 2));
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 34px rgba(60, 35, 15, .07); }

.site-nav { display: flex; gap: 2px; }
.site-nav a {
    padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 500;
    color: var(--ink-soft); text-decoration: none; transition: background .2s, color .2s;
}
.site-nav a:hover { background: var(--cream); color: var(--ink); }
.nav-cta-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
    display: none; width: 42px; height: 42px; border: 1px solid var(--line);
    background: var(--white); border-radius: 12px; place-items: center; cursor: pointer; color: var(--ink);
}

/* ---------------------------------------------------------------- hero */
.hero {
    position: relative; margin: 0;
    min-height: clamp(580px, 86vh, 860px); overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(40px, 6vh, 76px) var(--gutter);
    color: #fff;
    isolation: isolate;
}
.hero-body, .hero-foot { width: 100%; max-width: var(--content); margin-inline: auto; }
.hero-media, .cta-media { position: absolute; inset: 0; z-index: -1; }
/* extra bleed top and bottom so the parallax shift never exposes an edge */
.hero-media { inset: -10% 0; will-change: transform; }

/* looping background film — fades over the poster once it can actually play */
.hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }
.hero-media img, .cta-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(30, 14, 6, .84) 0%, rgba(30, 14, 6, .55) 42%, rgba(30, 14, 6, .18) 72%),
        linear-gradient(0deg, rgba(30, 14, 6, .55), rgba(30, 14, 6, 0) 55%);
}

/* auto block margins centre the copy in the space above the badge row */
.hero-body { margin-block: auto; }
.hero h1 { margin: 22px 0 18px; max-width: 760px; text-shadow: 0 2px 24px rgba(20, 9, 3, .35); }
.hero-lead { max-width: 560px; font-size: 15.5px; color: rgba(255, 255, 255, .86); line-height: 1.8; }

.hero-facts {
    display: flex; align-items: center; gap: 18px;
    margin-top: 34px; padding: 10px 10px 10px 24px;
    background: rgba(255, 255, 255, .96); border-radius: 999px;
    box-shadow: 0 18px 44px rgba(20, 9, 3, .3);
    max-width: 720px;
}
.fact { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fact-ico { color: var(--gold); display: grid; place-items: center; }
.fact-text { min-width: 0; }
.fact-text small {
    display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; line-height: 1.6;
}
.fact-text strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.35; white-space: nowrap; }
.fact-div { width: 1px; height: 36px; background: var(--line); flex: none; }
.fact-go {
    margin-left: auto; width: 50px; height: 50px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    color: #fff; text-decoration: none; white-space: nowrap;
    font-size: 14.5px; font-weight: 600;
    background: linear-gradient(140deg, var(--gold), #8a3f10);
    transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
/* the label only appears where the button is a full-width bar (mobile) */
.fact-go-text { display: none; }
.fact-go svg { transition: transform .3s var(--ease-out); }
.fact-go:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(138, 63, 16, .38); }
.fact-go:hover svg { transform: translateX(3px); }

.hero-foot { display: flex; align-items: center; gap: 22px; }
.hero-org { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.hero-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, .28); }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #fff;
}
.badge-pill svg { color: var(--gold-soft); }

/* ---------------------------------------------------------------- rites strip */
.rites { padding: 56px var(--gutter) 8px; }
.rites > * { max-width: var(--content); margin-inline: auto; }
.rites-title {
    text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: 26px;
}
.rites-list {
    list-style: none; margin: 0 auto; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 46px;
}
.rites-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 600; color: #6a594a;
    transition: color .25s ease;
}
.rites-list svg { color: var(--gold); }
.rites-list li:hover { color: var(--brand); }

/* ---------------------------------------------------------------- bento grid */
.bento {
    display: grid;
    grid-template-columns: 1fr 1fr 1.42fr;
    grid-template-rows: 268px 132px 112px;
    gap: 16px;
}
.place-card {
    position: relative; border-radius: 22px; overflow: hidden;
    isolation: isolate; text-decoration: none; color: #fff;
}
.place-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.card-veil {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(24, 12, 5, .85) 2%, rgba(24, 12, 5, .28) 42%, rgba(24, 12, 5, .05) 70%);
}
.place-card:hover img { transform: scale(1.06); }

.place-1 { grid-column: 1; grid-row: 1 / 3; }
.place-2 { grid-column: 2; grid-row: 1 / 3; }
.place-3 { grid-column: 3; grid-row: 1; }
.place-4 { grid-column: 3; grid-row: 2 / 4; }

.place-body {
    position: absolute; inset: auto 0 0 0; padding: 20px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.place-name h3 { font-size: 19px; }
.place-name p { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .8); margin-top: 3px; }
.place-meta { text-align: right; flex: none; }
.place-meta strong { display: block; font-size: 14px; }
.place-meta small { display: block; font-size: 11px; color: rgba(255, 255, 255, .78); line-height: 1.5; max-width: 150px; }

.price-banner {
    grid-column: 1 / 3; grid-row: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 16px 18px 16px 26px; border-radius: 22px; color: #fff;
    background: linear-gradient(115deg, #5c2a15 0%, #3d1b0e 100%);
    position: relative; overflow: hidden;
}
.price-banner::after {
    content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(240, 194, 116, .22), transparent 62%);
}
.price-banner-main { display: flex; align-items: center; gap: 18px; }
.price-banner-main strong { font-size: 29px; font-weight: 800; letter-spacing: -.03em; color: var(--gold-soft); line-height: 1; }
.price-banner-main span { font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .82); border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 18px; }
.price-banner .btn { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- the yatra */
.yatra { background: linear-gradient(180deg, #faf3e4 0%, #f8efdd 70%, #f6ecd8 100%); }
/* align-items:start, not stretch — a stretched grid item has no room to stick */
.yatra-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.yatra-copy h2 { margin: 16px 0 18px; }

/* ---- day-by-day timeline (no interaction: every day is always readable) ---- */
.itin { list-style: none; margin: 30px 0 0; padding: 0; }
/* One line only. A horizontal rule per step used to cross the vertical thread
   at every lamp, leaving a T-junction and a stub that stopped in mid air. The
   thread alone carries the sequence. */
.itin-step {
    display: grid; grid-template-columns: 60px 1fr; gap: 22px;
    padding: 30px 0;
}
.itin-step:first-child { padding-top: 4px; }

.itin-rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* thread running lamp to lamp: starts below this label, ends at the next lamp,
   so the -60px clears this step's bottom padding and the next one's top */
.itin-rail::after {
    content: ''; position: absolute; left: 50%; top: 62px; bottom: -60px;
    width: 1px; background: rgba(74, 33, 19, .16);
}
.itin-step:last-child .itin-rail::after { display: none; }
.itin-diya { display: grid; place-items: center; width: 46px; height: 46px; }
.itin-diya img { width: 42px; height: auto; display: block; }
.itin-day {
    font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.itin-body h3 {
    font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
    font-weight: 400; letter-spacing: 0;
    font-size: clamp(23px, 2.5vw, 31px); line-height: 1.2; color: var(--brand);
}
/* cap the measure so lines stay readable on a wide monitor */
.itin-body p { margin-top: 11px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); max-width: 62ch; }

.itin-tags { list-style: none; margin: 17px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.itin-tags li {
    padding: 8px 14px; border: 1px solid rgba(74, 33, 19, .2); border-radius: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #8a5f2a; background: rgba(255, 255, 255, .45);
}

.route-note {
    display: flex; align-items: center; gap: 11px; margin-top: 26px;
    padding: 15px 20px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(74, 33, 19, .12);
    border-radius: var(--radius-md); font-size: 13.5px; color: var(--ink-soft);
}
.route-note svg { color: var(--gold); }

/* the photograph holds its place while the days scroll past */
.yatra-media {
    position: sticky; top: 96px;
    margin: 0; border-radius: var(--radius-lg); overflow: hidden;
    height: min(84vh, 820px);
}
.yatra-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yatra-media figcaption {
    position: absolute; left: 18px; bottom: 18px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 18px; border-radius: 999px; background: rgba(255, 255, 255, .94);
    font-size: 12.5px; font-weight: 600; color: var(--brand);
    backdrop-filter: blur(6px);
}
.yatra-media figcaption svg { color: var(--gold); }

/* ---------------------------------------------------------------- guruji
   Sits directly under the dark video hero, so it is deliberately light —
   the page opens out rather than staying heavy. */
.guruji {
    position: relative; overflow: hidden;
    padding: clamp(56px, 8vh, 92px) var(--gutter);
    background:
        radial-gradient(760px 380px at 88% 6%, rgba(201, 122, 22, .12), transparent 60%),
        linear-gradient(180deg, #fbf3e3 0%, #fdfaf3 62%, var(--white) 100%);
}
.guruji-inner {
    position: relative; z-index: 1;
    max-width: var(--content); margin-inline: auto;
    display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px, 4.5vw, 58px); align-items: center;
}

/* portrait with the offset gold frame */
.guruji-photo { position: relative; margin: 0; padding: 0 16px 16px 0; }
.guruji-photo img {
    position: relative; z-index: 1; display: block; width: 100%; height: auto;
    border-radius: 20px; box-shadow: 0 30px 60px -28px rgba(60, 30, 12, .55);
}
.guruji-photo::before {
    content: ''; position: absolute; right: 0; bottom: 0; width: 76%; height: 80%;
    border: 2px solid var(--gold); border-radius: 20px;
}

.guruji-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.guruji-eyebrow svg { color: var(--gold); }

.guruji-name {
    margin: 13px 0 18px;
    font-size: clamp(26px, 3.4vw, 42px); font-weight: 700;
    letter-spacing: -.035em; line-height: 1.1; color: var(--brand);
}

.guruji-lead { font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.8; color: var(--ink-soft); max-width: 640px; }
.guruji-lead b { color: #9a5510; font-weight: 700; }

.guruji-rites {
    list-style: none; margin: 24px 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px;
}
.guruji-rites li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
}
.guruji-rites svg { color: var(--gold); flex: none; margin-top: 2px; }

/* organiser + collaboration, folded in from the old highlight band */
.guruji-credits {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid #eddcbe;
    display: flex; align-items: stretch; gap: clamp(18px, 3.5vw, 46px); flex-wrap: wrap;
}
.guruji-credit { display: flex; flex-direction: column; gap: 5px; }
.guruji-credit > span {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.guruji-credit svg { color: var(--gold); }
.guruji-credit strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.guruji-credit-div { width: 1px; background: #eddcbe; flex: none; }

.guruji-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------------------------------------------------------------- package */
.package {
    position: relative;
    background:
        radial-gradient(900px 420px at 88% 4%, rgba(201, 122, 22, .13), transparent 62%),
        radial-gradient(700px 380px at 4% 96%, rgba(74, 33, 19, .07), transparent 60%),
        linear-gradient(180deg, #fbf5ea 0%, #f6ead6 100%);
}

/* shared small header used by each block in the section */
.pkg-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.pkg-sub-head h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; color: var(--brand); }
.pkg-sub-head h3 svg { color: var(--gold); }
.pkg-count { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ---- price + inclusions bento ---- */
.pkg-bento { display: grid; grid-template-columns: .82fr 1.18fr; gap: 20px; align-items: stretch; }

.pkg-price {
    position: relative; overflow: hidden; color: #fff;
    display: flex; flex-direction: column;
    border-radius: 26px; padding: 32px;
    background: linear-gradient(158deg, #5c2a15 0%, #38180c 62%, #2a1208 100%);
    box-shadow: 0 26px 60px rgba(60, 26, 10, .28);
}
.pkg-price::after {
    content: ''; position: absolute; top: -110px; right: -90px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(240, 194, 116, .3), transparent 62%);
    pointer-events: none;
}
.pkg-price > * { position: relative; z-index: 1; }

.pkg-price-tag {
    display: inline-flex; padding: 7px 14px; border-radius: 999px;
    border: 1px solid rgba(240, 194, 116, .42); background: rgba(240, 194, 116, .12);
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft);
}
.pkg-price-value { display: flex; align-items: flex-start; gap: 4px; margin: 20px 0 0; color: #fff; }
.pkg-price-value small { font-size: 20px; font-weight: 700; margin-top: 12px; color: var(--gold-soft); }
.pkg-price-value strong { font-size: clamp(50px, 6vw, 70px); font-weight: 800; letter-spacing: -.045em; line-height: .92; }
.pkg-price-value span { font-size: 22px; font-weight: 700; margin-top: 9px; color: rgba(255, 255, 255, .6); }
.pkg-price-sub { margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .66); }

/* margin-top:auto pins the facts + CTA to the bottom when the card stretches */
.pkg-price-facts { list-style: none; margin: 24px 0; margin-top: auto; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.pkg-price-facts li { display: flex; align-items: center; gap: 11px; padding: 8px 0; font-size: 13.5px; color: rgba(255, 255, 255, .84); }
.pkg-price-facts svg { color: var(--gold-soft); }

.pkg-price-cta { width: 100%; }
.pkg-price-note { margin-top: 14px; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .5); }

/* inclusion tiles */
.pkg-includes { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; padding: 28px; }
.pkg-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pkg-tile {
    display: flex; align-items: flex-start; gap: 14px; padding: 18px;
    background: var(--white); border: 1px solid var(--line); border-radius: 18px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.pkg-tile:hover { transform: translateY(-3px); border-color: #e7d2ae; box-shadow: 0 16px 32px rgba(74, 33, 19, .09); }
.pkg-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pkg-tile-ico {
    width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(150deg, #fbeed6, #f3dcb4); color: #9a5510;
}
.pkg-tile strong { display: block; font-size: 14.5px; letter-spacing: -.01em; margin-bottom: 3px; }
.pkg-tile p { font-size: 12.8px; color: var(--muted); line-height: 1.6; }

/* ---- accommodation: a photo card per city ---- */
.pkg-stay { margin-top: 20px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; padding: 28px; }

.stay-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px;
}
.stay-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border: 1px solid var(--line); border-radius: 22px;
    transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .4s ease;
}
.stay-card:hover { transform: translateY(-6px); border-color: #e7d2ae; box-shadow: 0 22px 42px rgba(74, 33, 19, .14); }

.stay-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.stay-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.stay-card:hover .stay-photo img { transform: scale(1.08); }
.stay-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(24, 12, 5, .82) 0%, rgba(24, 12, 5, .2) 46%, rgba(24, 12, 5, .05) 72%);
}

.stay-num {
    position: absolute; top: 14px; left: 14px; z-index: 1;
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--gold), #8a3f10); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 6px 16px rgba(30, 14, 6, .4);
    transition: transform .4s var(--ease-out);
}
.stay-card:hover .stay-num { transform: scale(1.1) rotate(-8deg); }

.stay-nights {
    position: absolute; top: 14px; right: 14px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .93); color: var(--brand);
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.stay-nights svg { width: 14px; height: 14px; color: var(--gold); }

.stay-city { position: absolute; left: 18px; bottom: 15px; z-index: 1; color: #fff; }
.stay-city strong { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.stay-city span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

.stay-info { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; }
.stay-info p { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.stay-info svg { color: var(--gold); flex: none; margin-top: 2px; }
.stay-day {
    margin-left: auto; flex: none; align-self: center;
    padding: 5px 11px; border-radius: 999px; background: var(--cream-2);
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand);
}

/* ---- exclusions + note ---- */
.pkg-foot { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; margin-top: 20px; align-items: stretch; }
.pkg-excludes { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; padding: 28px; }
.pkg-excludes .pkg-sub-head h3 { color: var(--ink-soft); }
.excl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.excl-list li {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px;
    background: rgba(255, 255, 255, .75); border: 1px dashed #e6d9c3; border-radius: 14px;
    font-size: 13.5px; color: var(--muted); line-height: 1.6;
}
.excl-list svg { color: #c08a72; margin-top: 3px; flex: none; }

.pkg-side { display: flex; flex-direction: column; gap: 20px; }

.note-callout {
    background: linear-gradient(160deg, #fffdf8, #fbf3e3);
    border: 1px solid #ecdcbc; border-radius: 26px; padding: 28px;
}

.pkg-help {
    background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: 28px;
    flex: 1; display: flex; flex-direction: column;
}
.pkg-help h4 { font-size: 16px; color: var(--brand); margin-bottom: 8px; }
.pkg-help p { font-size: 13.5px; color: var(--muted); line-height: 1.75; }
.pkg-help-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.note-callout h4 { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--brand); margin-bottom: 10px; }
.note-callout h4 svg { color: var(--gold); }
.note-callout p { font-size: 13.8px; color: var(--ink-soft); line-height: 1.85; }

/* ---------------------------------------------------------------- cta banner */
.cta-banner {
    position: relative; isolation: isolate; padding: clamp(72px, 12vh, 130px) var(--gutter);
    display: grid; place-items: center; text-align: center; color: #fff;
}
.cta-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(28, 13, 5, .68), rgba(28, 13, 5, .82));
}
.cta-body { position: relative; max-width: 700px; }
.cta-body h2 { margin-bottom: 18px; text-shadow: 0 2px 20px rgba(20, 9, 3, .3); }
.cta-body p { color: rgba(255, 255, 255, .84); font-size: 15.5px; line-height: 1.85; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------------------------------------------------------------- registration */
.register-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 26px; align-items: stretch; }

.register-info {
    background: linear-gradient(165deg, #4a2113 0%, #2b1308 100%);
    color: #fff; border-radius: var(--radius-lg); padding: 34px;
    display: flex; flex-direction: column;
}
.register-info h3 { font-size: 19px; margin-bottom: 8px; }
.info-list { margin: 14px 0 0; }
.info-list > div { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.info-list dt {
    display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255, 255, 255, .58); font-weight: 600;
}
.info-list dt svg { color: var(--gold-soft); }
.info-list dd { margin: 5px 0 0; font-size: 15px; font-weight: 600; }
.info-list dd a { color: var(--gold-soft); text-decoration: none; }
.info-list dd a:hover { text-decoration: underline; }

.info-foot {
    margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.6;
}
.info-foot strong { font-size: 14.5px; color: #fff; }
.info-guru { color: var(--gold-soft); }

.register-form-wrap {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px;
    display: flex; flex-direction: column;
}
.reg-form { display: flex; flex-direction: column; flex: 1; }

.alert { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius-md); margin-bottom: 24px; }
.alert strong { display: block; font-size: 15px; }
.alert p { font-size: 14px; margin-top: 4px; }
.alert ul { margin: 7px 0 0; padding-left: 18px; font-size: 13.5px; }
.alert-ico { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .8); display: grid; place-items: center; flex: none; }
.alert-ok { background: #eef7f0; border: 1px solid #cfe6d6; color: #235c39; }
.alert-wa-note { margin-top: 12px; font-size: 13.5px; }
.alert .btn-wa { margin-top: 10px; }
.alert-err { background: #fdefec; border: 1px solid #f2d3ca; color: #8c3520; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: #4a3b2e; }
.req { color: var(--no); }
.opt { font-weight: 400; font-size: 12px; color: var(--muted); }

.reg-form input[type=text],
.reg-form input[type=email],
.reg-form input[type=tel],
.reg-form select,
.reg-form textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
    background: #fdfaf4; font: inherit; font-size: 14.5px; color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.reg-form textarea { resize: vertical; min-height: 92px; line-height: 1.7; }
.reg-form select {
    appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c6a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center;
}
.reg-form :is(input, select, textarea):focus {
    outline: none; border-color: var(--gold); background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 122, 22, .16);
}
.reg-form ::placeholder { color: #b8a894; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
    display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
    background: var(--cream); border-radius: 14px; font-size: 13.5px;
    color: var(--ink-soft); line-height: 1.65; margin-bottom: 22px; cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand-2); }

.form-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }

/* ---------------------------------------------------------------- faq */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: none; border: 0; padding: 21px 0; font: inherit; font-size: 16px; font-weight: 600;
    color: var(--ink); text-align: left; cursor: pointer; letter-spacing: -.01em;
}
.faq-chevron { color: var(--muted); transition: transform .3s ease, color .3s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: var(--gold); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2, .8, .2, 1); }
.faq-a p { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.85; max-width: 94%; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #24140b; color: rgba(255, 255, 255, .72); padding: 64px var(--gutter) 0; }
.footer-top, .footer-bottom { max-width: var(--content); margin-inline: auto; }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.brand-light { color: #fff; }
.brand-light small { color: rgba(255, 255, 255, .55); }
.footer-brand p { font-size: 13.5px; line-height: 1.85; max-width: 330px; margin: 18px 0 22px; }
.socials { display: flex; gap: 10px; }
.socials a {
    width: 37px; height: 37px; border-radius: 50%; background: rgba(255, 255, 255, .08);
    display: grid; place-items: center; color: #fff; transition: background .25s ease, transform .25s ease;
}
.socials a:hover { background: var(--gold); transform: translateY(-2px); }

.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; font-size: 13.5px; color: rgba(255, 255, 255, .68); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--gold-soft); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0 26px;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: 12.5px; color: rgba(255, 255, 255, .5);
}
.footer-om { color: var(--gold-soft); letter-spacing: .06em; }

/* ============================================================= associate sponsor
   Sits between the guruji section and the rites strip. Kept on a white ground
   so it reads as a separate voice from the yatra itself, with one dark panel
   for the message so the block has a centre of gravity.
   ============================================================================ */
.mifa { padding: clamp(48px, 6vh, 76px) var(--gutter); background: var(--white); }
.mifa-inner { max-width: var(--content); margin-inline: auto; }

/* The heading sits inside the text column, not above the whole section: it
   titles the words it belongs to, and the column no longer starts halfway
   down the founder card. */
.mifa-head { margin-bottom: 26px; }
.mifa-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold);
}
.mifa-titles {
    margin-top: 14px;
    display: flex; align-items: center;
    gap: clamp(14px, 1.8vw, 22px); flex-wrap: wrap;
}
/* The mark is gold artwork on solid black, so it gets a dark plate rather than
   a cream one. A rounded square, not a circle: the association name arcs right
   into the corners of the artwork and a circular crop would clip it. */
.mifa-logo {
    display: grid; place-items: center; flex: none;
    width: clamp(78px, 8vw, 104px); height: clamp(78px, 8vw, 104px);
    border-radius: 20px; padding: 7px;
    background: #000; border: 1px solid rgba(240, 194, 116, .38);
    box-shadow: 0 14px 30px rgba(30, 14, 6, .24);
}
.mifa-logo img { width: 100%; height: 100%; object-fit: contain; }
.mifa-titles h2 {
    flex: 1 1 14ch; color: var(--brand);
    font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.035em; line-height: 1.1;
}

/* ---- opening words and founder card ----
   Words on the left, portrait on the right: the guruji section above leads
   with its photograph, so alternating keeps the page from repeating itself.
   Ordered in CSS rather than in the markup so that when this stacks on a
   phone the heading still comes first and the portrait follows it. */
/* The words take the space, not the portrait. A modest photograph beside a
   full width column keeps both ending at about the same place, so there is no
   gutter left over horizontally and no overhang vertically. */
.mifa-main {
    display: grid; grid-template-columns: 1.42fr .58fr;
    gap: clamp(26px, 3vw, 44px); align-items: center;
}
.mifa-body    { order: 1; }
.mifa-founder { order: 2; }

/* Same treatment as the guruji portrait: the photograph itself, with the gold
   frame offset behind its lower right corner. The frame is drawn on the
   portrait wrapper rather than the figure, so the caption underneath does not
   stretch it out of shape. */
.mifa-founder { margin: 0; }
.mifa-portrait { position: relative; display: block; padding: 0 16px 16px 0; }
/* natural 4:5, uncropped: at this column width it no longer overhangs the text */
.mifa-portrait img {
    position: relative; z-index: 1; display: block; width: 100%; height: auto;
    border-radius: 20px; box-shadow: 0 30px 60px -28px rgba(60, 30, 12, .55);
}
.mifa-portrait::before {
    content: ''; position: absolute; right: 0; bottom: 0; width: 76%; height: 80%;
    border: 2px solid var(--gold); border-radius: 20px;
}
/* stand-in until the portrait arrives */
.mifa-monogram {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 100%; aspect-ratio: 4 / 5; border-radius: 20px;
    background: linear-gradient(160deg, var(--brand) 0%, #2b1308 100%);
    color: var(--gold-soft); font-size: clamp(44px, 6vw, 68px);
    font-weight: 700; letter-spacing: .06em;
}
.mifa-founder figcaption { margin-top: 14px; text-align: center; }
.mifa-founder strong { display: block; font-size: 17px; color: var(--brand); letter-spacing: -.02em; }
.mifa-founder span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* no measure cap: the text runs the full width of its column, which is what
   closes the gap rather than growing the picture to fill it */
.mifa-body p {
    margin: 0 0 15px;
    font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.8; color: var(--ink-soft);
}
.mifa-body p:last-child { margin-bottom: 0; }
/* carried by weight and colour, the way the guruji lead emphasises its close */
.mifa-emphasis { color: #9a5510; font-weight: 700; }

/* ---- commitment grid ---- */
.mifa-sub {
    font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted);
}
.mifa-commit { margin-top: clamp(30px, 3vw, 44px); }
.mifa-commit-grid {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.mifa-commit-grid li {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 24px 22px 26px; background: var(--white);
    transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.mifa-commit-grid li:hover {
    transform: translateY(-4px); border-color: #e7d2ae;
    box-shadow: 0 16px 30px rgba(74, 33, 19, .1);
}
.mifa-commit-ico {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 12px; background: var(--cream-2); color: var(--gold);
    margin-bottom: 15px;
}
.mifa-commit-grid strong { display: block; font-size: 15.5px; color: var(--brand); letter-spacing: -.02em; }
.mifa-commit-grid p { margin: 8px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink-soft); }

/* ---- the message panel ----
   A photograph sits under the brown rather than flat colour, dimmed almost to
   nothing so it reads as depth and not as a picture. Layer order matters: the
   gold bloom paints over the wash, the wash over the photograph. */
.mifa-message {
    margin: clamp(30px, 3vw, 44px) 0 0;
    padding: clamp(34px, 4vw, 58px) clamp(26px, 4vw, 72px);
    border-radius: var(--radius-lg); text-align: center; color: #fff;
    border: 1px solid rgba(240, 194, 116, .18);
    background:
        radial-gradient(700px 340px at 50% 0%, rgba(240, 194, 116, .26), transparent 62%),
        linear-gradient(163deg, rgba(74, 33, 19, .93) 0%, rgba(30, 14, 6, .97) 100%),
        url('../img/kashi-varanasi.jpg') center / cover no-repeat;
    box-shadow: 0 30px 60px -34px rgba(30, 14, 6, .7);
}
.mifa-sub-light { color: var(--gold-soft); }

.mifa-message-mark {
    display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px;
    border-radius: 50%; color: var(--gold-soft);
    border: 1px solid rgba(240, 194, 116, .42); background: rgba(255, 255, 255, .06);
}
.mifa-message-mark svg { width: 26px; height: 26px; }

.mifa-message blockquote { margin: 16px 0 0; }
.mifa-message blockquote p {
    margin: 0 auto; max-width: 900px;
    font-size: clamp(20px, 2.5vw, 32px); line-height: 1.42;
    font-weight: 600; letter-spacing: -.025em;
}
.mifa-message-rule {
    display: block; width: 62px; height: 1px; margin: 26px auto 0;
    background: linear-gradient(90deg, transparent, rgba(240, 194, 116, .75), transparent);
}
.mifa-message figcaption {
    margin: 22px auto 0; max-width: 780px;
    font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .78);
}

/* ---- call to action, sitting with the words like the guruji section ---- */
.mifa-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* the dialling button keeps the number legible rather than shrinking it */
.mifa-actions .btn[href^="tel:"] { letter-spacing: 0; }

/* ------------------------------------------------------------- floating actions
   Both buttons live in one stack rather than being pinned separately, so they
   share a centre line and an even gap no matter what size either one is. */
.float-stack {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    display: grid; justify-items: center; gap: 12px;
}
.float-stack .audio-toggle,
.float-stack .wa-float {
    position: relative;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
}

.audio-toggle {
    cursor: pointer;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .94);
    color: var(--brand); backdrop-filter: blur(8px);
    box-shadow: 0 10px 26px rgba(60, 35, 15, .16);
    transition: transform .25s var(--ease-out), box-shadow .25s ease, color .25s ease;
}
.audio-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60, 35, 15, .22); }
.audio-toggle svg { width: 21px; height: 21px; }
/* only one of the two glyphs shows, depending on state */
.audio-toggle .audio-on { display: none; }
.audio-toggle .audio-off { display: grid; }
.audio-toggle.is-playing { color: var(--gold); border-color: #e7d2ae; }
.audio-toggle.is-playing .audio-on { display: grid; }
.audio-toggle.is-playing .audio-off { display: none; }

/* Sound is switched on but the browser has not released it yet — it waits for
   the visitor's first gesture. A slow, quiet ring says the button is worth
   pressing, without demanding attention on a page of mourning. */
.audio-toggle.is-waiting::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid rgba(198, 154, 82, .55); pointer-events: none;
    animation: audioWait 2.8s var(--ease-out) infinite;
}
@keyframes audioWait {
    0%   { opacity: .7; transform: scale(.9); }
    70%  { opacity: 0;  transform: scale(1.2); }
    100% { opacity: 0;  transform: scale(1.2); }
}

/* ---------------------------------------------------------------- whatsapp float */
.wa-float {
    color: #fff; background: #128c4a;
    box-shadow: 0 10px 26px rgba(18, 140, 74, .32);
    transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18, 140, 74, .42); }
.wa-float svg { width: 24px; height: 24px; }

/* ================================================================ motion
   Entry animations are gated behind .js so the page is never blank if
   JavaScript fails to run.
   ================================================================== */
:root { --ease-out: cubic-bezier(.16, .84, .30, 1); }

.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), filter .75s var(--ease-out);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal="blur"]  { transform: translateY(14px); filter: blur(10px); }

.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js [data-reveal].is-in { will-change: auto; }

/* ---------------------------------------------------------------- hero entry */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroSettle {
    from { transform: scale(1.09); }
    to   { transform: scale(1); }
}

.js .hero-body > *,
.js .hero-foot { animation: heroRise .95s var(--ease-out) both; }
.js .hero-body > *:nth-child(1) { animation-delay: .10s; }
.js .hero-body > *:nth-child(2) { animation-delay: .20s; }
.js .hero-body > *:nth-child(3) { animation-delay: .30s; }
.js .hero-body > *:nth-child(4) { animation-delay: .42s; }
.js .hero-foot                  { animation-delay: .58s; }

.js .hero-media img { animation: heroSettle 2.2s var(--ease-out) both; }

/* price lifts into focus once its card arrives — never renders a wrong figure */
@keyframes priceIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(7px); }
    to   { opacity: 1; transform: none; filter: none; }
}
.js .pkg-price.is-in .pkg-price-value { animation: priceIn .85s var(--ease-out) .18s both; }
.js .pkg-price.is-in .pkg-price-sub   { animation: priceIn .85s var(--ease-out) .30s both; }

/* ---------------------------------------------------------------- scroll progress */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--gold), #8a3f10);
    z-index: 100; pointer-events: none;
}

/* ---------------------------------------------------------------- header shrink */
.site-header.is-stuck { padding-top: 7px; padding-bottom: 7px; }
.brand-logo { transition: height .35s var(--ease-out); }
.site-header.is-stuck .brand-logo { height: 52px; }

/* ---------------------------------------------------------------- button sweep */
.btn-primary, .btn-cream { position: relative; overflow: hidden; }
.btn-primary::after, .btn-cream::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
    transform: translateX(-120%);
    transition: transform .75s var(--ease-out);
}
.btn-cream::after { background: linear-gradient(115deg, transparent 32%, rgba(201, 122, 22, .22) 50%, transparent 68%); }
.btn-primary:hover::after, .btn-cream:hover::after { transform: translateX(120%); }
.btn-primary > *, .btn-cream > * { position: relative; z-index: 1; }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- micro-interactions */
.site-nav a { position: relative; }
.site-nav a::after {
    content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1.5px;
    background: var(--gold); transform: scaleX(0); transform-origin: 50%;
    transition: transform .35s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

.rites-list svg { transition: transform .4s var(--ease-out); }
.rites-list li:hover svg { transform: scale(1.18) rotate(-8deg); }

.place-body { transition: transform .45s var(--ease-out); }
.place-card:hover .place-body { transform: translateY(-5px); }

.pkg-tile-ico { transition: transform .45s var(--ease-out); }
.pkg-tile:hover .pkg-tile-ico { transform: rotate(-7deg) scale(1.08); }

.stay-step { transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; }
.stay-step:hover { transform: translateY(-4px); border-color: #e7d2ae; box-shadow: 0 16px 30px rgba(74, 33, 19, .1); }
.stay-num { transition: transform .4s var(--ease-out); }
.stay-step:hover .stay-num { transform: scale(1.1) rotate(-6deg); }

.excl-list li { transition: transform .3s var(--ease-out), background .3s ease, border-color .3s ease; }
.excl-list li:hover { transform: translateX(5px); background: #fff; border-color: #ddc8ab; }

.faq-q { transition: color .25s ease; }
.faq-q:hover { color: var(--brand); }

.field:focus-within label { color: var(--brand); }
.field label { transition: color .25s ease; }

.socials a svg, .wa-float svg { transition: transform .35s var(--ease-out); }
.socials a:hover svg { transform: scale(1.12); }

/* gentle pulse so the WhatsApp button reads as live */
.wa-float::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    animation: waPulse 2.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(18, 140, 74, .45); }
    70%  { box-shadow: 0 0 0 18px rgba(18, 140, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 140, 74, 0); }
}

/* ================================================================ responsive */
@media (max-width: 1080px) {
    .section { padding: 76px var(--gutter); }
    .rites { padding: 46px var(--gutter) 8px; }
    .site-header { padding: 14px var(--gutter); }
    .hero { padding: 44px var(--gutter); min-height: 560px; }
    .mifa-commit-grid { grid-template-columns: repeat(2, 1fr); }
    .yatra-grid { grid-template-columns: 1fr; gap: 36px; }
    /* single column: nothing to stick beside, so let it sit in the flow */
    /* relative, NOT static: the photograph and its caption are positioned
       absolutely against this figure. Making it static removes the containing
       block, so they escape and stretch across the whole section. */
    .yatra-media { position: relative; height: 380px; }
    .pkg-bento { grid-template-columns: 1fr; }
    .pkg-foot { grid-template-columns: 1fr; }
    .guruji-inner { grid-template-columns: 1fr; gap: 32px; }
    .guruji-photo { max-width: 340px; }
    /* founder card above the words, and capped so it never dominates */
    .mifa-main { grid-template-columns: 1fr; gap: 30px; }
    .mifa-founder { max-width: 320px; margin-inline: auto; }
    /* a smaller plate leaves the association name room to sit beside it */
    .mifa-logo { width: 68px; height: 68px; border-radius: 16px; }
    .register-grid { grid-template-columns: 1fr; }
    .register-info { position: static; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .site-footer { padding: 48px var(--gutter) 0; }
}

@media (max-width: 960px) {
    .site-nav {
        position: absolute; top: calc(100% + 1px); left: 0; right: 0;
        flex-direction: column; gap: 2px; padding: 14px;
        background: #fff; border-radius: 0 0 20px 20px;
        box-shadow: 0 20px 40px rgba(60, 35, 15, .12);
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 12px 16px; font-size: 15px; }
    .nav-cta-mobile { display: block; background: var(--cream); color: var(--brand); font-weight: 700; }
    .nav-toggle { display: grid; }
    .header-actions .btn { display: none; }

    .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .place-card { grid-column: auto !important; grid-row: auto !important; min-height: 240px; }
    .price-banner { grid-column: 1 / -1 !important; grid-row: auto !important; }

    .stay-track { grid-template-columns: 1fr 1fr; }
    .stay-step:not(:last-child)::after { display: none; }
    .stay-step:last-child:nth-child(odd) { grid-column: 1 / -1; }

    .hero-facts { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 18px; gap: 0; }
    .fact { padding: 11px 4px; }
    .fact-div { width: 100%; height: 1px; }
    .fact-go { margin: 14px 0 0; width: 100%; border-radius: 14px; height: 50px; }
    .fact-go-text { display: inline; }
    .fact-text strong { white-space: normal; }
    /* keep the summary card clear of the organiser line beneath it */
    .hero-foot { margin-top: 26px; }
}

@media (max-width: 720px) {
    body { font-size: 15px; }
    .site-header { padding: 12px var(--gutter); }
    .site-footer { padding: 44px var(--gutter) 0; }
    .section { padding: 60px var(--gutter); }
    .rites { padding: 40px var(--gutter) 4px; }
    .rites-list { justify-content: center; gap: 14px 26px; }
    .rites-list li { font-size: 14px; }

    .brand-logo { height: 56px; max-width: 150px; }
    .footer-brand .brand-logo { height: 82px; max-width: 200px; }

    .hero { padding: 40px var(--gutter); min-height: 540px; }
    .hero-foot { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; }
    .hero-rule { display: none; }
    .badge-pill { font-size: 10.5px; padding: 7px 12px; }

    .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .itin-step { grid-template-columns: 46px 1fr; gap: 16px; padding: 24px 0; }
    .itin-diya { width: 38px; height: 38px; }
    .itin-diya img { width: 34px; }
    .itin-rail::after { top: 54px; bottom: -48px; }   /* 24px padding either side */
    .bento { grid-template-columns: 1fr; }
    .place-card { min-height: 250px; }
    .price-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 24px; gap: 18px; }
    .price-banner-main { flex-direction: column; gap: 10px; }
    .price-banner-main span { border-left: 0; padding-left: 0; }

    .pkg-price, .pkg-includes, .pkg-stay, .pkg-excludes, .note-callout,
    .register-form-wrap, .register-info { padding: 22px 18px; }
    .pkg-tiles { grid-template-columns: 1fr; }
    .stay-track { grid-template-columns: 1fr; }
    .pkg-sub-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    /* A 16:9 photograph in a narrow, tall box gets cropped to a thin centre
       slice and then upscaled, which reads as a big blurred smudge. Keeping the
       banner shorter on a phone means far more of the frame is used, so the
       picture stays sharp and still shows the ghats. */
    .cta-banner { padding: 48px var(--gutter); }
    .cta-media img { object-position: 50% 58%; }
    .cta-body p { font-size: 14.5px; line-height: 1.75; }
    .cta-actions { margin-top: 24px; gap: 10px; }
    .guruji { padding: 52px var(--gutter); }
    .guruji-photo { max-width: none; }
    .mifa { padding: 52px var(--gutter); }
    .mifa-commit-grid { grid-template-columns: 1fr; gap: 14px; }
    .mifa-commit-grid li { padding: 20px 18px 22px; }
    .mifa-message-mark { width: 46px; height: 46px; margin-bottom: 14px; }
    .mifa-message-mark svg { width: 22px; height: 22px; }
    .guruji-rites { grid-template-columns: 1fr; }
    .guruji-credits { flex-direction: column; gap: 18px; }
    .guruji-credit-div { width: 100%; height: 1px; }
    .guruji-actions .btn { width: 100%; }
    .mifa-actions .btn { width: 100%; }
    .footer-top { grid-template-columns: 1fr; gap: 30px; }
    .form-foot .btn { width: 100%; }
    .float-stack { right: 16px; bottom: 16px; gap: 10px; }
    .float-stack .audio-toggle,
    .float-stack .wa-float { width: 46px; height: 46px; }
    .audio-toggle svg { width: 19px; height: 19px; }
    .wa-float svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js [data-reveal],
    .js [data-reveal="left"],
    .js [data-reveal="right"],
    .js [data-reveal="zoom"],
    .js [data-reveal="blur"] { opacity: 1; transform: none; filter: none; }
    .wa-float::before { animation: none; }
    .scroll-progress { display: none; }
}