/* =====================================================================
   DHARAMSHALA TOURS — STUDIO DESIGN SYSTEM
   Dark-only · bright red accent · elevated card surfaces · fluid type.
   Single source of truth for the site look. Load it LAST.
   ⚠ FONTS: Rockstar Display is a DEMO (eval only) — buy the license before
     go-live, or switch --display to "Round 8" (webfont-licensed, in /fonts).
   ===================================================================== */

@font-face{
  font-family:"Rockstar";
  src:url("../fonts/rockstar-extrabold.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Round 8";   /* licensed fallback */
  src:url("../fonts/round8-four-webfont.woff2") format("woff2"),
      url("../fonts/round8-four-webfont.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ===== DARK (DEFAULT) — deep pine-black + bright red ===== */
:root{
  --paper:#0C0E0D; --paper-2:#141716;
  --ink:#F4F3EE; --ink-2:#AEB1AC; --ink-3:#73776F;
  --red:#FF2A2A; --red-press:#E01111;          /* bright red accent      */
  --red-75:#FF4B44;                            /* headings / marks       */
  --on-red:#0C0E0D;                            /* text on red buttons    */
  --font:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
  --display:"Rockstar","Round 8","Arial Narrow",var(--font);
  --frame-inset:clamp(12px,3vw,36px);
  --frame-radius:clamp(18px,2.4vw,32px);
  --nav-h:84px;                         /* header height + breathing room above the hero */
  --r:18px; --r-lg:26px; --pill:999px;
  --label:.75rem; --track:.11em;
  --gap:clamp(12px,2.4vw,28px);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.21,1);

  /* surfaces (cards / accordions / facts) — solid, no backdrop blur */
  --surface:#161A18;
  --surface-2:#1C201E;
  --surface-bd:rgba(255,255,255,.09);
  --surface-bd-hot:rgba(255,42,42,.45);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  --shadow-card-hot:0 1px 0 rgba(255,255,255,.05) inset,0 18px 44px rgba(0,0,0,.5);

  /* frosted overlays (navbar / hero sub-card / bars) */
  --glass-bg:rgba(16,19,18,.62);
  --glass-bd:rgba(255,255,255,.12);
  --gred-bg:rgba(255,42,42,.16);
  --gred-bd:rgba(255,42,42,.36);

  --line:rgba(255,255,255,.14);         /* dividers / rules      */
  --line-2:rgba(255,255,255,.07);       /* frame & footer borders */
  --fade:rgba(12,14,13,.62);            /* photo top-fade         */
  --fade-0:rgba(12,14,13,0);
  --row-stop:rgba(255,42,42,.09);       /* index-row hover wash   */
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --shadow-nav:0 8px 28px rgba(0,0,0,.5);
  --ring:rgba(255,75,68,.65);           /* focus ring             */
  --photo-fx:contrast(1.05) brightness(.78) saturate(1.05);
  color-scheme:dark;
}
/* dim editorial imagery so it sits on black, not glares */
.thumb img,
.plan-photo img,
.detail-gallery img,
.prose figure img{
  filter:contrast(1.03) brightness(.85);
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;max-width:100vw;}
body{font-family:var(--font);background:var(--paper);color:var(--ink);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
     scrollbar-color:var(--ink-3) var(--paper);}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--red);color:var(--on-red);}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px;}
.tnum{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.label{font-size:var(--label);font-weight:600;letter-spacing:var(--track);
       text-transform:uppercase;color:var(--ink);line-height:1.2;}
.label.soft{color:var(--ink-2);font-weight:500;}

/* ---------- frosted overlays (nav / hero chrome ONLY — never on cards,
   animated blur was the source of the old flicker) ---------- */
.glass{backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
       box-shadow:var(--shadow);}
.g-white{background:var(--glass-bg);border:1px solid var(--glass-bd);color:var(--ink);}

/* ---------- display type ---------- */
.display{font-family:var(--display);font-weight:400;font-style:normal;font-synthesis:none;
         text-transform:uppercase;color:var(--ink);letter-spacing:.02em;line-height:1;
         text-wrap:balance;}
h1.display,h2.display{color:var(--red-75);}

/* ---------- buttons: solid bright red (one treatment) ---------- */
.book,.nav-cta,.cta,.mini{font-size:var(--label);font-weight:700;letter-spacing:var(--track);
     text-transform:uppercase;color:var(--on-red);background:var(--red);border:1px solid var(--red);
     text-decoration:none;white-space:nowrap;border-radius:var(--pill);box-shadow:var(--shadow);
     transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
     cursor:pointer;display:inline-block;}
.book:hover,.nav-cta:hover,.cta:hover,.mini:hover{
     background:var(--red-press);border-color:var(--red-press);transform:translateY(-1px);}
.book:active,.nav-cta:active,.cta:active,.mini:active{transform:translateY(0);}
.book{padding:11px 19px;} .nav-cta{padding:9px 17px;} .cta{padding:14px 26px;font-size:.9rem;} .mini{padding:8px 14px;}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes drift{from{transform:scale(1.04)} to{transform:scale(1.1)}}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- navbar: floating pill hugging the hero frame ---------- */
.navbar{position:absolute;z-index:6;
        top:var(--frame-inset);
        left:var(--frame-inset);
        right:var(--frame-inset);
        display:flex;align-items:center;gap:clamp(14px,2vw,28px);
        padding:9px 12px 9px clamp(16px,2vw,22px);border-radius:var(--pill);
        box-shadow:var(--shadow-nav);}
.navbar.fixed{position:fixed;}
.navbar .nav-links{margin-left:auto;}   /* brand left · links + Book right */
.navbar > *{position:relative;z-index:1;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo{width:30px;height:30px;flex:none;display:block;animation:spin 15s linear infinite;}
.logo path{fill:var(--red-75);}
.wordmark{font-size:var(--label);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.nav-links{display:flex;gap:clamp(12px,1.8vw,26px);margin-left:auto;}
.nav-links a{font-size:var(--label);font-weight:600;letter-spacing:var(--track);text-transform:uppercase;
    color:var(--ink);text-decoration:none;padding:4px 2px;position:relative;transition:color .2s var(--ease);}
.nav-links a::after{content:"";position:absolute;left:2px;right:2px;bottom:-1px;height:2px;border-radius:2px;
    background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);}
.nav-links a:hover{color:var(--red-75);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}

/* directional header: visible at top + on scroll-up, hides on scroll-down */
.navbar{transform:none;opacity:1;pointer-events:auto;
        transition:transform .38s var(--ease),opacity .38s var(--ease);}
.navbar.nav-hidden{transform:translateY(calc(-100% - var(--frame-inset) - 8px));
        opacity:0;pointer-events:none;}

/* ---------- mobile burger (circular control) ---------- */
.nav-burger{display:none;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;border:1px solid var(--glass-bd);background:transparent;
  border-radius:var(--pill);color:var(--ink);padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);}
.nav-burger:hover{background:var(--gred-bg);border-color:var(--gred-bd);}
.nav-burger{flex-direction:column;gap:3px;}
.nav-burger span{width:16px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease);}
.navbar.menu-open .nav-burger span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.navbar.menu-open .nav-burger span:nth-child(2){opacity:0;}
.navbar.menu-open .nav-burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* ---------- hero ----------
   Fills the viewport (capped on huge monitors) but GROWS with its content:
   the head is in-flow, so long headlines/sub-cards can never clip at the
   frame edges (photo + bars stay absolute behind/over it). */
.hero{position:relative;min-height:clamp(600px,100svh,1100px);
      display:flex;flex-direction:column;
      padding:calc(var(--frame-inset) + var(--nav-h)) var(--frame-inset) var(--frame-inset);}
.hero>.frame{flex:1;height:auto;display:flex;flex-direction:column;}
.hero .hero-head{position:relative;inset:auto;flex:1;}
.frame{position:relative;width:100%;height:100%;border-radius:var(--frame-radius);
       overflow:hidden;background:var(--paper-2);border:1px solid var(--line-2);}
.photo{position:absolute;inset:0;background:var(--paper-2);}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center 78%;
           filter:var(--photo-fx);
           transform:scale(1.04);animation:drift 30s var(--ease) infinite alternate;}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--fade) 0%,var(--fade-0) 42%),
             linear-gradient(0deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 34%);}
.mark{width:clamp(72px,10.5vw,132px);height:auto;overflow:visible;animation:spin 42s linear infinite;}
.mark path{fill:var(--red-75);}
.hero-head{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
           justify-content:center;align-items:center;text-align:center;
           gap:clamp(12px,2.2vh,22px);
           /* bottom clearance = bar gap + bar height + breathing room, so text
              can never slide under the bottom bar even on short/wide windows */
           padding:clamp(64px,10vh,128px) clamp(16px,4vw,40px)
                   calc(var(--gap) + clamp(88px,13vh,132px));pointer-events:none;}
.hero-head>*{pointer-events:auto;max-width:100%;}
.headline-card{max-width:100%;}
.hero-head .display{font-size:clamp(2rem,9vw,8rem);color:var(--red-75);overflow-wrap:break-word;
                    text-shadow:0 2px 30px rgba(0,0,0,.25);}
.sub-card{padding:14px 20px;border-radius:var(--r);font-size:clamp(.95rem,1.6vw,1.15rem);
          font-weight:600;color:var(--ink);line-height:1.45;max-width:44ch;background:var(--glass-bg);}
.bar{position:absolute;left:var(--gap);right:var(--gap);z-index:5;display:flex;align-items:center;
     gap:clamp(10px,2vw,20px);padding:12px clamp(16px,2.4vw,24px);border-radius:var(--pill);}
.bar-bottom{bottom:var(--gap);}
.rule-h{height:1px;flex:1;background:var(--line);min-width:24px;}

/* ---------- inner-page hero (smaller) ----------
   The head is IN-FLOW (photo stays absolute behind it) so the frame grows
   with long titles/sub-cards instead of clipping them at the top edge. */
.page-hero{position:relative;padding:calc(var(--frame-inset) + 84px) var(--frame-inset) var(--frame-inset);}
.page-hero .frame{height:auto;min-height:clamp(300px,50vh,560px);display:flex;flex-direction:column;}
.page-hero .hero-head{position:relative;inset:auto;flex:1;
    justify-content:flex-end;align-items:flex-start;text-align:left;padding:clamp(20px,4vw,48px);}
.page-hero .hero-head .display{font-size:clamp(2.4rem,8.5vw,6.2rem);text-wrap:balance;}

/* ---------- section frame ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,56px);}
.sec{padding:clamp(56px,10vh,120px) 0;}
.sec-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(26px,5vh,52px);}
.sec-head .idx{font-size:.85rem;font-weight:700;color:var(--red-75);letter-spacing:.05em;}
.title-card{display:inline-block;margin-left:auto;}
.title-card .display{font-size:clamp(1.9rem,4.8vw,3.4rem);}

/* =====================================================================
   CARD SURFACES — one elevated treatment shared by every container card.
   Solid fills (no backdrop blur) so hover motion never fights the GPU.
   ===================================================================== */
.card,.option,.fact,.plan-card,.acc details,.book-band .inner,.chip{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--surface-bd);
  box-shadow:var(--shadow-card);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ---------- showcase tiles (treks / tours / listings) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,26px);}
.card{border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
      text-decoration:none;color:inherit;
      transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.card:hover{transform:translateY(-5px);border-color:var(--surface-bd-hot);box-shadow:var(--shadow-card-hot);}
.thumb{aspect-ratio:4/3;overflow:hidden;position:relative;}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.22) 100%);}
.thumb img{width:100%;height:100%;object-fit:cover;
           transition:transform .5s var(--ease),filter .5s var(--ease);}
.card:hover .thumb img{transform:scale(1.05);}

/* TOUCH devices have no hover — JS adds .in-view to the card in the centre
   band so the image brightens as it scrolls through. */
.card.in-view .thumb img,
.plan-photo.in-view img,
.detail-gallery img.in-view{filter:contrast(1) brightness(1);}

.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card-body h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;line-height:1.15;}
.card-body .meta{font-size:.85rem;color:var(--ink-2);}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
           padding-top:14px;border-top:1px solid var(--line-2);}
.price{font-weight:700;font-size:1.05rem;}
.price .per{font-weight:400;font-size:.72em;color:var(--ink-2);letter-spacing:0;}

/* ---------- options grid (what we offer / where we go) ---------- */
.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:clamp(12px,2vw,22px);align-items:start;}
.option{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-lg);
        min-height:196px;text-decoration:none;color:var(--ink);
        transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.option:hover{transform:translateY(-4px);border-color:var(--surface-bd-hot);box-shadow:var(--shadow-card-hot);}
.option .n{font-size:.8rem;font-weight:700;color:var(--red-75);letter-spacing:.04em;}
.option h3{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;
           line-height:1.04;color:var(--ink);margin-top:2px;}
.option p{font-size:.92rem;color:var(--ink-2);line-height:1.5;}
.option .go{margin-top:auto;font-size:1.25rem;color:var(--red);transform:translateX(-4px);opacity:0;
            transition:transform .25s var(--ease),opacity .25s var(--ease);}
.option:hover .go{opacity:1;transform:none;}
.opt-mark{position:absolute;top:18px;right:18px;width:26px;height:26px;pointer-events:none;opacity:.9;}
.opt-mark path{fill:var(--red-75);}
@media (hover:none){.option .go,.index-row .go{opacity:1;transform:none;}}

/* ---------- studio index list ---------- */
.index-list{border-top:1px solid var(--line);}
.index-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(14px,3vw,40px);
           padding:clamp(16px,3vh,30px) 4px;border-bottom:1px solid var(--line);
           text-decoration:none;color:var(--ink);
           transition:padding .25s var(--ease),background .25s var(--ease);}
.index-row:hover{padding-left:18px;background:linear-gradient(90deg,var(--row-stop),transparent);}
.index-row .n{font-size:.85rem;font-weight:700;color:var(--ink-2);}
.index-row .name{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,4.5vw,3rem);
                 letter-spacing:.02em;line-height:1;color:var(--ink);transition:color .25s var(--ease);}
.index-row:hover .name{color:var(--red-75);}
.index-row .cat{font-size:var(--label);font-weight:600;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2);}
.index-row .go{font-size:1.4rem;color:var(--red);transform:translateX(-6px);opacity:0;
               transition:transform .25s var(--ease),opacity .25s var(--ease);}
.index-row:hover .go{opacity:1;transform:none;}

/* ---------- plan / statement ---------- */
.plan{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,44px);align-items:center;}
.plan-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.plan-title{display:inline-block;}
.plan-title .display{font-size:clamp(2.1rem,5vw,3.8rem);}
.plan-card{padding:22px 24px;border-radius:var(--r-lg);font-size:1.05rem;line-height:1.6;color:var(--ink);font-weight:500;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{padding:9px 16px;border-radius:var(--pill);font-size:var(--label);font-weight:600;
      letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);}
.plan-photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-card);}
.plan-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .5s var(--ease);}
.plan-photo:hover img{transform:scale(1.04);}

/* ---------- footer ---------- */
.footer{padding:var(--frame-inset);}
.footer-frame{border-radius:var(--frame-radius);background:var(--paper-2);border:1px solid var(--line-2);
              padding:clamp(30px,6vw,72px);display:flex;flex-direction:column;gap:clamp(26px,5vh,52px);}
.footer-top{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;}
.footer-top .display{font-size:clamp(2.2rem,7vw,5.5rem);color:var(--red-75);max-width:16ch;}
.footer-cols{display:flex;flex-wrap:wrap;gap:clamp(26px,6vw,80px);}
.footer-col{display:flex;flex-direction:column;gap:10px;min-width:130px;}
.footer-col a,.footer-col span{font-size:.95rem;color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--red-75);}
.footer-col .h{font-size:var(--label);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);margin-bottom:4px;}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--line);
               padding-top:20px;font-size:var(--label);text-transform:uppercase;letter-spacing:var(--track);color:var(--ink-2);}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 16px;}
.footer-legal a{font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--ink-3);text-decoration:none;transition:color .2s var(--ease);}
.footer-legal a:hover{color:var(--red-75);}

/* ---------- entrance ---------- */
.reveal{opacity:0;transform:translateY(10px);animation:rise .7s var(--ease) forwards;}
.navbar.reveal{animation-delay:.05s}.hero-head.reveal{animation-delay:.18s}.bar-bottom.reveal{animation-delay:.30s}

/* ---------- long-form text (legal / journal) ---------- */
.prose{max-width:72ch;}
.prose h2{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin:1.9em 0 .5em;}
.prose h3{font-size:1.1rem;font-weight:700;margin:1.5em 0 .4em;}
.prose p{margin:0 0 1em;line-height:1.7;}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.2em;line-height:1.7;}
.prose li{margin:.35em 0;}
.prose a{color:var(--red-75);text-decoration:underline;text-underline-offset:3px;}
.prose strong{font-weight:700;}
.prose .meta{color:var(--ink-2);font-size:.92rem;}

/* ---- blog ---- */
.page-hero.post .hero-head .display{font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.06;}
.prose blockquote{margin:1.4em 0;padding:.7em 1.1em;border-left:3px solid var(--red);font-size:1.05rem;
                  background:linear-gradient(90deg,var(--row-stop),transparent);border-radius:0 var(--r) var(--r) 0;}
.prose figure{margin:1.6em 0;}
.prose figure img{width:100%;border-radius:var(--r);}
.prose figcaption{font-size:.82rem;color:var(--ink-2);margin-top:.5em;}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 1.6em;font-size:.85rem;color:var(--ink-2);}
.post-back{display:inline-block;margin-top:2.2em;font-weight:700;letter-spacing:var(--track);
           text-transform:uppercase;font-size:var(--label);color:var(--red-75);}

/* ====================================================================
   DETAIL PAGES — tours · treks · rentals · services
   ==================================================================== */

/* photoless "brand" hero — paper frame, centred display title, faint spinning mark */
.page-hero.brand .frame{display:flex;align-items:center;justify-content:center;background:var(--paper-2);}
.page-hero.brand .photo{display:none;}
.page-hero.brand .hero-head{position:relative;inset:auto;justify-content:center;align-items:center;text-align:center;padding:clamp(28px,5vw,56px);}
.page-hero.brand .hero-head>*{position:relative;z-index:1;}
.brand-mark{position:absolute;z-index:0;width:clamp(150px,30vw,340px);height:auto;opacity:.12;pointer-events:none;
            animation:spin 42s linear infinite;}
.brand-mark path{fill:var(--red-75);}
/* detail titles run longer than the listing heroes — cap them a touch smaller */
.page-hero.detail .hero-head .display{font-size:clamp(1.9rem,5.5vw,4.2rem);}

/* breadcrumb — thin uppercase line under the hero */
.crumb{max-width:var(--maxw);margin:clamp(16px,3vh,26px) auto 0;padding:0 clamp(18px,5vw,56px);
       font-size:var(--label);font-weight:600;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2);
       display:flex;flex-wrap:wrap;gap:8px;}
.crumb a{color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease);}
.crumb a:hover{color:var(--red-75);}
.crumb span.here{color:var(--ink);}
.crumb .sep{color:var(--ink-3);}

/* booking band — elevated bar with price, meta chips and the Book CTA */
.book-band{max-width:var(--maxw);margin:clamp(16px,3vh,26px) auto 0;padding:0 clamp(18px,5vw,56px);}
.book-band .inner{border-radius:var(--r-lg);padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;}
.book-band .bprice{font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:.01em;}
.book-band .bprice .per{font-weight:400;font-size:.62em;color:var(--ink-2);letter-spacing:0;}
.book-band .bprice .onreq{font-weight:700;font-size:1.05rem;}
.book-band .bmeta{display:flex;flex-wrap:wrap;gap:8px;}
.book-band .cta{margin-left:auto;}

/* facts grid */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.fact{padding:16px 18px;border-radius:var(--r);}
.fact .k{font-size:var(--label);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--red-75);margin-bottom:6px;}
.fact .v{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.4;}

/* image gallery (treks/tours with multiple photos) */
.detail-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.detail-gallery img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--r);
                    border:1px solid var(--surface-bd);
                    transition:transform .4s var(--ease),filter .4s var(--ease);}
.detail-gallery img:hover{transform:scale(1.02);}

/* tick lists (highlights / included / pack / safety) */
.ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 30px;}
.ticks.one{grid-template-columns:1fr;}
.ticks li{position:relative;padding-left:24px;line-height:1.55;color:var(--ink);}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--red);}
.sub-h{font-size:var(--label);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);}

/* accordion (day-by-day itinerary + FAQ) */
.acc{display:flex;flex-direction:column;gap:12px;}
.acc details{border-radius:var(--r);overflow:hidden;transition:border-color .25s var(--ease);}
.acc details[open]{border-color:var(--surface-bd-hot);}
.acc summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:baseline;gap:14px;
             -webkit-tap-highlight-color:transparent;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .q{font-weight:700;font-size:1.05rem;color:var(--ink);}
.acc summary .tag{font-size:var(--label);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--red-75);white-space:nowrap;}
.acc summary .plus{margin-left:auto;color:var(--red);font-size:1.25rem;line-height:1;align-self:center;
                   transition:transform .25s var(--ease);}
.acc details[open] summary .plus{transform:rotate(45deg);}
.acc .body{padding:2px 20px 20px;line-height:1.65;color:var(--ink-2);}
.acc .body p{margin:0 0 .7em;}.acc .body p:last-child{margin:0;}
.acc .body ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px;}
.acc .body li{line-height:1.5;}

/* =====================================================================
   VISUAL CARDS — photo-top editorial tiles (home: offer / regions /
   seasons / how). The photo sits at the TOP of a solid card and mask-opens
   (clip-path) as the tile scrolls into view; the copy lives cleanly on the
   card surface below it — never scrimmed over the image. Replaces the older
   "text slides up over the photo" treatment.
   ===================================================================== */
.vis{--vpad:clamp(15px,1.5vw,20px);
     overflow:hidden;justify-content:flex-start;gap:5px;min-height:0;
     padding:var(--vpad) var(--vpad) calc(var(--vpad) - 4px);isolation:isolate;
     background:var(--surface);border:1px solid var(--surface-bd);box-shadow:var(--shadow-card);
     backdrop-filter:none;-webkit-backdrop-filter:none;}
.vis-fit{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
/* photo band — pulled full-bleed to the card edges at the top */
.vis .vis-media{position:relative;overflow:hidden;
     margin:calc(-1 * var(--vpad)) calc(-1 * var(--vpad)) 11px;
     aspect-ratio:4/3;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;}
.vis-tall .vis-media{aspect-ratio:4/3;}
.vis .vis-media img{width:100%;height:100%;object-fit:cover;display:block;
     transition:transform .5s var(--ease);}
.vis:is(:hover,:focus-visible) .vis-media img{transform:scale(1.05);}
/* small white brand glyph on the photo corner — decorative, never text */
.vis .opt-mark{position:static;align-self:flex-end;width:18px;height:18px;opacity:.6;z-index:2;
     margin:2px 0 -16px;}
.vis .opt-mark path{fill:var(--red-75);}
/* the copy — on the solid card surface, theme ink, always legible */
.vis .n{color:var(--red-75);font-size:.78rem;font-weight:700;letter-spacing:.04em;}
.vis h3{color:var(--ink);font-size:clamp(1.12rem,1.5vw,1.42rem);line-height:1.05;margin-top:1px;}
.vis .vis-reveal{display:block;}
.vis .vis-reveal p{color:var(--ink-2);font-size:.9rem;line-height:1.5;margin-top:4px;opacity:1;transform:none;}
.vis .go{display:none;}
/* the mask reveal — image clip-opens as the tile enters the viewport */
@supports (animation-timeline: view()){
  .vis .vis-media img{animation:tile-reveal linear both;
       animation-timeline:view();animation-range:entry 4% cover 24%;}
}
@keyframes tile-reveal{
  from{clip-path:inset(9% 12% 9% 12% round 16px);}
  to{clip-path:inset(0 0 0 0 round 0);}
}

/* =====================================================================
   SIGNATURE REVEAL — a wide cinematic band whose image is masked to a small
   rounded rectangle and clip-OPENS to full-bleed as the section scrolls into
   view, with a slow parallax drift (native CSS scroll-driven animation, no
   JS). Degrades to a static framed image + caption where unsupported or when
   reduced motion is requested.
   ===================================================================== */
.reveal-band{position:relative;margin:clamp(8px,2vh,26px) 0;}
.reveal-stage{position:relative;overflow:hidden;background:var(--paper);
     height:clamp(440px,84svh,780px);margin:0 var(--frame-inset);
     border-radius:var(--frame-radius);}
.reveal-frame{position:absolute;inset:0;overflow:hidden;}
.reveal-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.reveal-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
     background:linear-gradient(180deg,rgba(6,8,7,.10) 0%,rgba(6,8,7,0) 32%,rgba(6,8,7,.50) 72%,rgba(6,8,7,.80) 100%);}
.reveal-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;
     display:flex;flex-direction:column;gap:12px;
     padding:clamp(24px,4vw,60px);max-width:min(720px,92%);}
.reveal-caption .label{color:#FF6A60;}
.reveal-caption h2{color:#fff;font-family:var(--display);
     font-size:clamp(1.9rem,5vw,3.5rem);line-height:1.02;text-shadow:0 2px 22px rgba(0,0,0,.5);}
.reveal-caption p{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.4vw,1.2rem);
     line-height:1.55;max-width:54ch;text-shadow:0 1px 12px rgba(0,0,0,.5);}
@supports (animation-timeline: view()){
  .reveal-frame{animation:reveal-open linear both;animation-timeline:view();
       animation-range:entry 12% cover 46%;will-change:clip-path;}
  .reveal-frame img{animation:reveal-drift linear both;animation-timeline:view();
       animation-range:entry 0% exit 100%;will-change:transform;}
  .reveal-caption{animation:reveal-cap linear both;animation-timeline:view();
       animation-range:entry 38% cover 52%;}
}
@keyframes reveal-open{
  from{clip-path:inset(15% 18% 18% 18% round 22px);}
  to{clip-path:inset(0 0 0 0 round var(--frame-radius));}
}
@keyframes reveal-drift{from{transform:scale(1.2);}to{transform:scale(1.04);}}
@keyframes reveal-cap{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}

/* =====================================================================
   RESPONSIVE — 1024 (small laptop) · 900 (tablet) · 700 · 560 (phone) · 420
   ===================================================================== */
@media (max-width:1024px){
  .plan{gap:clamp(18px,3vw,32px);}
  .cards{gap:14px;}
}
@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr;}
  .plan{grid-template-columns:1fr;}
  .plan-photo{aspect-ratio:16/10;order:-1;}
  .index-row{grid-template-columns:auto 1fr auto;}
  .index-row .cat{display:none;}
  .page-hero .frame{min-height:clamp(280px,44vh,460px);}
}
@media (max-width:700px){
  .ticks,.twocol{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr 1fr;}
  .book-band .inner{padding:16px 18px;}
  .book-band .cta{margin-left:0;width:100%;text-align:center;}
  .detail-gallery{grid-template-columns:1fr 1fr;}
  .sec{padding:clamp(48px,9vh,80px) 0;}
}
@media (max-width:560px){
  /* navbar: logo left · Book + burger right · links collapse into a
     tap-to-open dropdown */
  .wordmark{display:none;}            /* phones: logo + controls only */
  .logo{width:26px;height:26px;}
  .navbar{padding:7px 8px;gap:8px;flex-wrap:wrap;}
  .nav-burger{width:38px;height:38px;}
  .nav-burger{display:inline-flex;order:5;}
  .nav-cta{order:4;margin-left:auto;padding:9px 14px;}
  .nav-links{order:10;flex-basis:100%;width:100%;flex-direction:column;gap:2px;margin-left:0;
    margin-top:0;padding:0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .28s var(--ease),opacity .2s var(--ease),margin-top .28s var(--ease);}
  .navbar.menu-open .nav-links{max-height:60vh;opacity:1;visibility:visible;margin-top:8px;}
  .nav-links a{padding:13px 14px;border-radius:14px;font-size:.82rem;border:1px solid transparent;}
  .nav-links a::after{display:none;}
  .nav-links a:hover,.nav-links a:active,.nav-links a[aria-current="page"]{color:var(--ink);
    background:var(--gred-bg);border-color:var(--gred-bd);}

  /* hero: smaller mark + headline, content fits between the bars */
  .hero{min-height:clamp(520px,100svh,1100px);}
  .mark{width:80px;}
  .hero-head{padding:64px clamp(14px,5vw,24px) calc(var(--gap) + 82px);gap:14px;}
  .hero-head .display{font-size:clamp(1.9rem,9.5vw,3.4rem);}
  .sub-card{font-size:.95rem;max-width:100%;}
  .photo img{object-position:center 82%;}

  /* bottom bar: drop the labels, make Book a clean full-width action */
  .bar-bottom .label,.bar-bottom .rule-h{display:none;}
  .bar-bottom{padding:8px;}
  .bar-bottom .book{margin:0;width:100%;text-align:center;padding:13px 19px;}

  /* sections */
  .cards{grid-template-columns:1fr;}
  .card-body{padding:16px 18px 18px;}
  .options-grid{grid-template-columns:1fr 1fr;}
  .option{min-height:auto;padding:16px;}
  .option h3{font-size:1.2rem;}
  .option p{font-size:.88rem;}
  .vis .vis-media{aspect-ratio:4/3;}
  .vis-tall .vis-media{aspect-ratio:4/3;}
  .opt-mark{top:14px;right:14px;width:22px;height:22px;}
  .sec-head{gap:8px;}
  .title-card{margin-left:0;}
  .index-row{gap:12px;}
  .page-hero{padding-top:calc(var(--frame-inset) + 72px);}
  .page-hero .hero-head{padding:18px;}
  .book-band .inner{flex-direction:column;align-items:stretch;gap:12px;}
  .book-band .bprice{font-size:1.2rem;}
  .footer-top .display{font-size:clamp(2rem,11vw,3rem);}
  .footer-frame{padding:26px 18px;}
  .footer-cols{gap:22px 32px;}
  .footer-bottom{flex-direction:column;gap:8px;}
}
@media (max-width:420px){
  .options-grid{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .detail-gallery{grid-template-columns:1fr;}
  .hero-head .display{font-size:clamp(1.7rem,10vw,2.6rem);}
}
/* short landscape phones: keep the hero content clear of both bars */
@media (max-height:600px) and (max-width:900px){
  .hero{min-height:clamp(440px,100svh,1100px);}
  .hero-head{padding:56px clamp(14px,5vw,24px) calc(var(--gap) + 76px);gap:8px;}
  .mark{width:56px;}
  .hero-head .display{font-size:clamp(1.6rem,7vw,2.6rem);}
  .sub-card{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
  .photo img{animation:none;transform:scale(1.04);}
  .reveal{animation:none;opacity:1;transform:none;}
  .vis .vis-media img{animation:none;clip-path:none;transform:none;}
  .reveal-frame{animation:none;clip-path:none;}
  .reveal-frame img,.reveal-caption{animation:none;transform:none;opacity:1;}
  /* marks keep spinning by explicit request */
  .logo{animation:spin 15s linear infinite!important;animation-iteration-count:infinite!important;animation-duration:15s!important;}
  .mark,.brand-mark{animation:spin 42s linear infinite!important;animation-iteration-count:infinite!important;animation-duration:42s!important;}
}

/* ====================================================================
   PRELOADER — "the dial" splash (redesign 2026-07-02), theme-aware.
   Red progress ring around the spinning mark · clip-revealed wordmark ·
   rolling ticker · drawn ridge · live % counter · curtain slide-up exit.
   Markup = first child of <body>; removed by theme.js on window.load.
   ==================================================================== */
.pl-lock{overflow:hidden;}                 /* set on <html> while splash is up */

@property --pl-pct{syntax:"<integer>";inherits:false;initial-value:0;}

.preloader{
  position:fixed;inset:0;z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3vh,26px);
  background:var(--paper);color:var(--ink);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
/* faint red glow behind the dial so the flat paper isn't dead */
.preloader::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 40%,var(--row-stop),transparent 70%);}

@keyframes pl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes pl-up{to{transform:none;}}

/* corner tags */
.pl-top{position:absolute;top:clamp(16px,4vh,30px);left:clamp(18px,5vw,40px);right:clamp(18px,5vw,40px);
  display:flex;justify-content:space-between;gap:12px;animation:pl-fade .4s .25s var(--ease) both;}
.pl-tag{font-size:.66rem;font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-3);}

/* progress dial — red arc drawing around the spinning flower mark */
.pl-dial{position:relative;width:clamp(108px,20vw,160px);aspect-ratio:1;flex:none;
  display:flex;align-items:center;justify-content:center;
  animation:pl-pop .7s var(--ease) both;}
.pl-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pl-ring circle{fill:none;stroke-width:2.5;}
.pl-ring-track{stroke:var(--line-2);}
.pl-ring-arc{stroke:var(--red);stroke-linecap:round;
  stroke-dasharray:339.3;stroke-dashoffset:339.3;
  animation:pl-arc .5s var(--ease) .08s forwards;}
@keyframes pl-arc{to{stroke-dashoffset:0;}}
.pl-mark{width:46%;height:auto;overflow:visible;animation:spin 7s linear infinite;}
.pl-mark path{fill:var(--red-75);}
@keyframes pl-pop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}

/* wordmark — each line rises out of its own clip */
.pl-word{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  max-width:92vw;}
.pl-line{display:block;overflow:hidden;padding:.06em .1em;}
.pl-line i{display:block;font-style:normal;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(2.1rem,8.5vw,5rem);line-height:1.02;
  letter-spacing:.02em;color:var(--red-75);
  transform:translateY(115%);animation:pl-up .5s .15s var(--ease) forwards;}
.pl-line-2{display:flex;align-items:center;gap:14px;}
.pl-line-2::before,.pl-line-2::after{content:"";height:1px;width:clamp(26px,6vw,64px);background:var(--line);}
.pl-line-2 i{font-size:clamp(1.05rem,3.4vw,1.7rem);color:var(--ink);animation-delay:.25s;}

/* rolling offerings ticker */
.pl-ticker{
  height:1.5em;overflow:hidden;
  font-size:clamp(.7rem,2.4vw,.88rem);font-weight:700;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2);
  animation:pl-fade .4s .3s var(--ease) both;
}
.pl-roll{list-style:none;margin:0;padding:0;animation:pl-roll 4.8s var(--ease) infinite;}
.pl-roll li{height:1.5em;line-height:1.5em;display:flex;align-items:center;justify-content:center;gap:.55em;}
.pl-roll li::before{content:"/";color:var(--red);font-weight:700;flex:none;}
@keyframes pl-roll{
  0%,14%   {transform:translateY(0);}
  19%,33%  {transform:translateY(-1.5em);}
  38%,52%  {transform:translateY(-3em);}
  57%,71%  {transform:translateY(-4.5em);}
  76%,90%  {transform:translateY(-6em);}
  95%,100% {transform:translateY(-7.5em);}
}

/* drawn Dhauladhar ridge line along the bottom */
.pl-ridge{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(70px,14vh,130px);
  pointer-events:none;opacity:.5;
}
.pl-ridge path{
  fill:none;stroke:var(--red-75);stroke-width:2.2;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:pl-draw .5s var(--ease) .08s forwards;
}
@keyframes pl-draw{to{stroke-dashoffset:0;}}

/* bottom line: coordinates left · live percentage right */
.pl-foot{position:absolute;left:clamp(18px,5vw,40px);right:clamp(18px,5vw,40px);
  bottom:clamp(14px,3.5vh,26px);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.66rem;font-weight:600;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;
  animation:pl-fade .4s .3s var(--ease) both;}
.pl-pct{--pl-pct:0;color:var(--ink-2);animation:pl-count .5s .08s var(--ease) forwards;}
.pl-pct::after{counter-reset:plpct var(--pl-pct);content:"Loading " counter(plpct) "%";}
@keyframes pl-count{to{--pl-pct:100;}}

/* exit — curtain slides up to reveal the page */
.preloader.pl-done{animation:pl-out .4s cubic-bezier(.65,0,.35,1) forwards;
  pointer-events:none;border-radius:0 0 clamp(24px,5vw,44px) clamp(24px,5vw,44px);}
@keyframes pl-out{to{transform:translateY(-101%);visibility:hidden;}}

@media (prefers-reduced-motion:reduce){
  .preloader{animation:none;background:var(--paper);}
  .pl-top,.pl-word,.pl-line i,.pl-ticker,.pl-foot{animation:none;opacity:1;transform:none;}
  .pl-roll{animation:none;}
  .pl-ridge path{animation:none;stroke-dashoffset:0;}
  .pl-ring-arc{animation:none;stroke-dashoffset:0;}
  .pl-pct{animation:none;--pl-pct:100;}
  .preloader.pl-done{animation:pl-fade .4s var(--ease) reverse forwards;}
  /* dial mark keeps spinning by brand decree (matches .logo/.mark) */
  .pl-mark{animation:spin 7s linear infinite!important;}
}