/* ============================================================
   RHCP — Batadana · Sattu Bungalow trail guide
   Self-hosted fonts, dark default + persisted light theme,
   bilingual EN / UR (RTL, Noto Nastaliq Urdu). Mobile-first.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:"Oswald";src:url("../fonts/Oswald-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts/Oswald-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu";src:url("../fonts/NotoNastaliqUrdu-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --green-900:#082b16;--green-800:#0d3b1e;--green-700:#12492a;--green-600:#1a4d2e;--green-500:#2a7d4f;--green-400:#3f9d68;
  --accent:#e8552d;--accent-soft:#f2764f;
  --font-head:"Oswald",sans-serif;--font-body:"Roboto",system-ui,sans-serif;--font-ur:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;
  --maxw:1120px;--r-lg:20px;--r-md:14px;--ease:cubic-bezier(.2,.7,.2,1);
  --easy-p:55.56%;--hut-p:77.78%;
}
[data-theme="dark"]{
  --bg:#071b0f;--bg-alt:#0a2313;--surface:rgba(255,255,255,.04);--surface-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.17);
  --text:#eaf3ec;--text-dim:#a6bfae;--text-mute:#80998a;--header-bg:rgba(7,22,15,.74);
  --topo-op:.05;--shadow:0 18px 50px -20px rgba(0,0,0,.7);--note-bg:rgba(232,85,45,.08);--note-border:rgba(232,85,45,.3);
  --quote-bg:linear-gradient(150deg,#0f3b21,#0a2a17);--wm-op:.05;
}
[data-theme="light"]{
  --bg:#f4faf6;--bg-alt:#e9f3ec;--surface:#fff;--surface-2:#f0f7f2;
  --border:rgba(13,59,30,.12);--border-strong:rgba(13,59,30,.22);
  --text:#0f2a1a;--text-dim:#3f5a49;--text-mute:#647f6e;--header-bg:rgba(244,250,246,.84);
  --topo-op:.06;--shadow:0 18px 44px -22px rgba(13,59,30,.32);--note-bg:#fdf3ee;--note-border:#f0cdbe;
  --quote-bg:linear-gradient(150deg,#0d3b1e,#12492a);--wm-op:.05;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow-x:clip){html{overflow-x:clip}}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);min-width:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.container.narrow{max-width:940px}
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:200;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{inset-inline-start:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* faint RHCP logo watermark (~5%) */
.watermark{position:fixed;inset:0;z-index:45;pointer-events:none;opacity:var(--wm-op);
  background:url("../assets/rhcp-logo.webp") center/min(72vw,560px) no-repeat}

/* ---------- Urdu mode ---------- */
.lang-ur body,[lang="ur"]{font-family:var(--font-ur)}
.lang-ur [data-en]{font-family:var(--font-ur);letter-spacing:0!important;text-transform:none!important;line-height:2.15}
#detail-ur{display:none}
.lang-ur #detail-en{display:none}
.lang-ur #detail-ur{display:block}

/* ============ HEADER ============ */
.site-header{position:fixed;top:0;inset-inline:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px clamp(14px,4vw,34px);background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .4s}
.site-header.scrolled{border-bottom-color:var(--border)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:40px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-text strong{font-family:var(--font-head);font-size:1.12rem;letter-spacing:.12em}
.brand-text small{display:none;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);font-family:var(--font-body)}
.header-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.lang-toggle,.theme-toggle{cursor:pointer;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  border-radius:999px;display:grid;place-items:center;transition:transform .2s var(--ease),border-color .3s}
.lang-toggle{height:40px;min-width:62px;padding:0 14px;font-family:var(--font-ur);font-size:.95rem;line-height:1}
.lang-ur .lang-toggle{font-family:var(--font-head);letter-spacing:.1em}
.theme-toggle{width:40px;height:40px}
.lang-toggle:hover,.theme-toggle:hover{transform:translateY(-2px);border-color:var(--accent)}
.theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;padding:104px 16px 80px}
.hero-bg{position:absolute;inset:-8% 0 0 0;background:url("../assets/photos/03-ridge-valley-view.jpg") center/cover no-repeat;
  transform:scale(1.08);will-change:transform}
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 18%,transparent 40%,rgba(4,16,9,.55) 100%),
  linear-gradient(180deg,rgba(4,18,10,.66) 0%,rgba(4,18,10,.34) 42%,rgba(5,20,11,.88) 100%)}
[data-theme="light"] .hero-scrim{background:
  radial-gradient(120% 80% at 50% 18%,transparent 45%,rgba(6,26,14,.35) 100%),
  linear-gradient(180deg,rgba(6,26,14,.5) 0%,rgba(6,26,14,.2) 45%,rgba(6,26,14,.68) 100%)}
.hero-topo{position:absolute;inset:0;background:url("../assets/topo-pattern.webp");background-size:520px;opacity:.06;mix-blend-mode:overlay}
.hero-inner{position:relative;z-index:2;width:100%;max-width:860px;color:#fff}
.hero-logo{width:86px;margin:0 auto 16px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.hero-eyebrow{font-family:var(--font-head);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:#ffd9c9;margin-bottom:12px}
.hero-title{font-family:var(--font-head);font-weight:700;line-height:1.04;font-size:clamp(2.3rem,9vw,5.2rem);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.lang-ur .hero-title{line-height:1.7;font-size:clamp(1.9rem,6.5vw,3.8rem)}
.hero-sub{margin-top:14px;font-size:clamp(1.05rem,3vw,1.5rem);font-weight:700;color:#f4ede0}
.hero-region{margin-top:6px;font-size:.9rem;color:#cdd9cf}
.stat-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:28px auto 0;max-width:760px}
.chip{background:rgba(10,26,16,.52);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-md);padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
  transition:transform .25s var(--ease),border-color .25s}
.chip:hover{transform:translateY(-4px);border-color:var(--accent)}
.chip-val{font-family:var(--font-head);font-size:1.65rem;line-height:1;color:#fff;direction:ltr;unicode-bidi:isolate}
.chip-tilde{color:#ffcbb8;margin-inline-end:1px}
.chip-static{font-family:var(--font-head);font-size:1.2rem;line-height:1.2;color:#fff}
.chip-unit{font-size:.7rem;color:#ffcbb8;text-transform:uppercase;letter-spacing:.1em}
.chip-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#c3d1c7;margin-top:4px}
.chip-diff{grid-column:1/-1}
.lang-ur .chip-label{font-size:.8rem;line-height:1.9}
.hero-note{margin:14px auto 0;max-width:640px;font-size:.74rem;color:#c9d6cd;opacity:.9}
.lang-ur .hero-note{font-size:.82rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;
  font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase;font-size:.84rem;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-soft)}
.btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(0,0,0,.2)}
.lang-ur .btn{font-size:.95rem}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;opacity:.85;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ============ SECTIONS ============ */
.section{position:relative;padding:clamp(56px,9vw,104px) 0;overflow:hidden}
.section-alt{background:var(--bg-alt)}
.section-topo{position:absolute;inset:0;background:url("../assets/topo-pattern.webp");background-size:600px;opacity:var(--topo-op);pointer-events:none}
.section .container{position:relative;z-index:1}
.section-head{text-align:center;max-width:740px;margin:0 auto clamp(30px,5vw,52px)}
.kicker{display:inline-block;font-family:var(--font-head);letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;color:var(--accent);
  margin-bottom:12px;padding:5px 14px;border:1px solid var(--border-strong);border-radius:999px}
.section-head h2{font-family:var(--font-head);font-weight:700;font-size:clamp(1.75rem,5vw,3rem);line-height:1.1}
.lang-ur .section-head h2{line-height:1.8;font-size:clamp(1.5rem,4.2vw,2.5rem)}
.section-lead{margin-top:14px;color:var(--text-dim);font-size:clamp(.98rem,2vw,1.12rem)}

/* ============ AT A GLANCE ============ */
.name-banner{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:18px 20px;margin-bottom:16px;border-inline-start:4px solid var(--accent)}
.nb-dot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(232,85,45,.18)}
.nb-label{font-family:var(--font-head);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.nb-value{font-size:clamp(1.02rem,2.4vw,1.3rem);font-weight:700;line-height:1.4}
.spec-grid{display:grid;grid-template-columns:1fr;gap:14px}
.spec-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;
  display:flex;gap:14px;align-items:flex-start;overflow:hidden;transition:transform .3s var(--ease),border-color .3s,background .3s}
.spec-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--green-500);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.spec-card.hot::before{background:var(--accent)}
.spec-card:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--surface-2)}
.spec-card:hover::before{transform:scaleY(1)}
.spec-ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--green-600),var(--green-800));color:#eafff1}
.spec-card.hot .spec-ico{background:linear-gradient(150deg,var(--accent),#c43e1b)}
[data-theme="light"] .spec-ico{background:linear-gradient(150deg,var(--green-500),var(--green-700));color:#fff}
[data-theme="light"] .spec-card.hot .spec-ico{background:linear-gradient(150deg,var(--accent),#c43e1b)}
.spec-body{min-width:0;flex:1}
.spec-num{font-family:var(--font-head);font-size:.7rem;color:var(--accent);letter-spacing:.1em}
.spec-label{font-family:var(--font-head);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)}
.spec-value{font-size:1.04rem;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.spec-caveat{margin-top:6px;font-size:.76rem;color:var(--text-mute);line-height:1.45}
.lang-ur .spec-value{font-weight:400;font-size:1.05rem}
.lang-ur .spec-caveat{font-size:.8rem;line-height:2}

/* ============ ROUTE SKETCH ============ */
.route-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:24px 20px 22px}
/* mobile: vertical timeline */
.rwrap{position:relative;height:420px;margin-bottom:34px}
.track{position:absolute;top:11px;bottom:11px;inset-inline-start:7px;width:8px}
.seg{position:absolute;inset-inline:0;border-radius:8px;transition:transform 1.1s var(--ease);transform-origin:top}
.seg-easy{top:0;height:var(--easy-p);background:var(--green-500)}
.seg-climb{top:var(--easy-p);bottom:0;background:var(--accent);transition-delay:.9s}
.rnodes{position:absolute;inset:0}
.rnode{position:absolute;inset-inline-start:0;top:calc((100% - 22px) * var(--p) / 100);display:flex;align-items:flex-start;gap:14px}
.rdot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--green-700);border:4px solid var(--bg);
  box-shadow:0 0 0 2px var(--green-500);transition:transform .4s var(--ease) 1.6s}
[data-theme="light"] .rdot{background:var(--green-600);border-color:#fff}
.n-end .rdot,.n-start .rdot{background:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.rtxt{display:flex;flex-direction:column;line-height:1.25;min-width:0;margin-top:-1px}
.rtxt b{font-family:var(--font-head);font-size:1rem;letter-spacing:.03em}
.rtxt small{font-size:.76rem;color:var(--text-mute)}
.lang-ur .rtxt b{font-weight:400;font-size:.98rem}
.lang-ur .rtxt b,.lang-ur .rtxt small{line-height:1.9}
.lang-ur .rtxt{margin-top:-8px}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.84rem;color:var(--text-dim)}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg::before{content:"";flex:0 0 auto;width:26px;height:8px;border-radius:4px}
.lg-easy::before{background:var(--green-500)}
.lg-climb::before{background:var(--accent)}
.short-chip{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border-radius:999px;
  border:2px solid var(--green-500);background:var(--surface-2);font-weight:700;font-size:.92rem;max-width:100%}
.lang-ur .short-chip{font-weight:400}
.sc-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.js .route-card:not(.drawn) .seg{transform:scaleY(0)}
.js .route-card:not(.drawn) .rdot{transform:scale(0)}

/* ============ TRAIL NOTES ============ */
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,40px);align-items:start}
.mini-kicker{font-family:var(--font-head);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.about-p{color:var(--text-dim);font-size:1.02rem}
.lang-ur .about-p{font-size:1.05rem;line-height:2.3}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;min-width:0}
.stat b{font-family:var(--font-head);font-size:1.5rem;line-height:1.1;direction:ltr;unicode-bidi:isolate;text-align:start}
.stat span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-top:4px}
.lang-ur .stat span{font-size:.82rem}
.gallery-grid{display:grid;gap:clamp(12px,2.2vw,20px)}
.g-trail{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-trail .g-wide{grid-column:1/-1}
.g-sattu{grid-template-columns:1fr}
.gal-item{position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--surface)}
.gal-item img{width:100%;height:clamp(200px,34vw,300px);object-fit:cover;transition:transform .7s var(--ease)}
.g-trail .g-wide img{height:clamp(220px,42vw,340px)}
.g-sattu .gal-item img{height:clamp(240px,62vw,380px)}
.gal-item:hover img{transform:scale(1.06)}
.gal-item figcaption,.d-photo figcaption{position:absolute;inset-inline:0;bottom:0;padding:14px 16px;color:#fff;font-size:.86rem;
  background:linear-gradient(0deg,rgba(4,16,9,.86),transparent)}
.lang-ur .gal-item figcaption{font-size:.9rem;line-height:2}
.etq-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(28px,5vw,44px)}
.etq-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(20px,3.5vw,32px);
  border-inline-start:5px solid var(--accent);transition:transform .3s var(--ease)}
.etq-card:hover{transform:translateY(-4px)}
.etq-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px;color:#fff;
  background:linear-gradient(150deg,var(--green-500),var(--green-700))}
.etq-card h3{font-family:var(--font-head);font-size:1.3rem;margin-bottom:8px}
.lang-ur .etq-card h3{font-weight:400}
.etq-card p{color:var(--text-dim)}
.activities{margin-top:clamp(28px,5vw,44px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(20px,3.5vw,30px)}
.activities h3{font-family:var(--font-head);font-size:1.25rem;margin-bottom:14px}
.lang-ur .activities h3{font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;border:2px solid var(--green-500);
  background:var(--surface-2);font-size:.92rem;line-height:1.4;max-width:100%}
.chips li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.sources{margin-top:26px;text-align:center;font-size:.8rem;color:var(--text-mute);display:flex;flex-direction:column;gap:4px}

/* ============ DETAILED INFORMATION ============ */
.detail-block{display:block}
.detail-block[lang="ur"]{font-size:1.04rem;line-height:2.3}
.d-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(18px,3.6vw,32px);margin-bottom:18px}
.d-title{display:flex;align-items:center;gap:14px;font-family:var(--font-head);font-size:clamp(1.2rem,3.4vw,1.6rem);line-height:1.25;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
[lang="ur"] .d-title{font-family:var(--font-ur);text-transform:none;letter-spacing:0;font-weight:400;line-height:2}
.d-num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-family:var(--font-head);font-size:1.05rem;letter-spacing:0}
.d-para{color:var(--text-dim);margin-bottom:14px}
.d-lead{color:var(--text);font-weight:700}
[lang="ur"] .d-lead{font-weight:400;color:var(--green-400)}
[data-theme="light"] [lang="ur"] .d-lead{color:var(--green-600)}
.d-sub{font-family:var(--font-head);font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-400);margin:22px 0 10px}
[data-theme="light"] .d-sub{color:var(--green-600)}
[lang="ur"] .d-sub{font-family:var(--font-ur);letter-spacing:0;font-weight:400;font-size:1.15rem}
.d-list{margin:4px 0 16px;display:flex;flex-direction:column;gap:9px}
.d-list li{position:relative;padding-inline-start:30px;color:var(--text-dim)}
ul.d-list li::before{content:"";position:absolute;inset-inline-start:6px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
[lang="ur"] ul.d-list li::before{top:1em}
ol.d-list{counter-reset:li}
ol.d-list li{counter-increment:li;padding-inline-start:40px}
ol.d-list li::before{content:counter(li);position:absolute;inset-inline-start:0;top:.1em;width:28px;height:28px;border-radius:50%;
  background:var(--green-600);color:#fff;font-family:var(--font-head);font-size:.85rem;display:grid;place-items:center}
[lang="ur"] ol.d-list li::before{top:.55em}
.d-quote{position:relative;background:var(--quote-bg);color:#fff;border-radius:var(--r-lg);padding:22px 24px;margin:18px 0;
  border-inline-start:6px solid var(--accent)}
.d-quote p{font-size:clamp(1.02rem,2.4vw,1.2rem);font-weight:700;line-height:1.55}
[lang="ur"] .d-quote p{font-weight:400;line-height:2.2}
.d-label{display:block;font-family:var(--font-head);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#a8c8b4;margin-bottom:8px}
[lang="ur"] .d-label{font-family:var(--font-ur);letter-spacing:0;font-size:.9rem;line-height:2}
.d-note{background:var(--note-bg);border:1px solid var(--note-border);border-inline-start:6px solid var(--accent);border-radius:var(--r-md);
  padding:16px 20px;margin:16px 0}
.d-note .d-label{color:var(--accent)}
.d-note p{color:var(--text-dim);font-size:.95rem}
.d-summary{background:var(--surface-2);border-color:var(--border)}
.d-summary .d-list{margin:8px 0 0}
.d-cards{display:grid;grid-template-columns:1fr;gap:14px;margin:12px 0 16px}
.d-card{background:var(--surface-2);border:1px solid var(--border);border-inline-start:4px solid var(--green-500);border-radius:var(--r-md);padding:16px 18px;min-width:0}
.d-card h5{font-size:1.02rem;font-weight:700;line-height:1.35;margin-bottom:6px}
[lang="ur"] .d-card h5{font-weight:400;font-size:1.08rem;line-height:2}
.d-cardsub{display:block;font-family:var(--font-head);font-size:.8rem;letter-spacing:.06em;color:var(--accent);margin-bottom:6px}
[lang="ur"] .d-cardsub{font-family:var(--font-ur);letter-spacing:0}
.d-card p{color:var(--text-dim);font-size:.94rem}
.cols-1 .d-card{border-inline-start-color:var(--accent)}
.d-steps{position:relative;margin:6px 0 18px}
.d-steps li{position:relative;padding-inline-start:58px;padding-bottom:20px;counter-increment:st}
.d-steps{counter-reset:st}
.d-steps li::before{content:counter(st);position:absolute;inset-inline-start:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--green-600);color:#fff;font-family:var(--font-head);display:grid;place-items:center;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--green-500)}
.d-steps li:first-child::before,.d-steps li:last-child::before{background:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.d-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:18px;top:44px;bottom:2px;width:4px;border-radius:2px;background:var(--border-strong)}
.d-steps h5{font-size:1.08rem;font-weight:700;line-height:1.4;margin-bottom:4px}
[lang="ur"] .d-steps h5{font-weight:400;line-height:2}
.d-steps p{color:var(--text-dim)}
.d-table-wrap{margin:12px 0 18px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.d-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.92rem}
.d-table th{background:var(--green-600);color:#fff;font-family:var(--font-head);font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  font-size:.8rem;text-align:start;padding:12px 14px}
[lang="ur"] .d-table th{font-family:var(--font-ur);letter-spacing:0;font-size:.92rem}
.d-table td{padding:12px 14px;vertical-align:top;border-top:1px solid var(--border);color:var(--text-dim);overflow-wrap:anywhere}
.d-table tr:nth-child(even) td{background:var(--surface-2)}
.d-table td:first-child{color:var(--text);font-weight:700;width:40%}
[lang="ur"] .d-table td:first-child{font-weight:400}
.pri{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:700;font-size:.82rem;color:#fff}
[lang="ur"] .pri{font-weight:400}
.p-high{background:#c81e3c}.p-mid{background:#1e6eaa}.p-low{background:#3c8c5a}
.d-photo{position:relative;margin:16px 0 18px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);cursor:zoom-in}
.d-photo img{width:100%;height:clamp(220px,56vw,460px);object-fit:cover}
.d-photo figcaption{font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
[lang="ur"] .d-photo figcaption{font-family:var(--font-ur);letter-spacing:0;text-transform:none;font-size:.92rem}

/* ============ DOWNLOADS ============ */
.dl-grid{display:grid;grid-template-columns:1fr;gap:14px}
.dl-card{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;transition:transform .25s var(--ease),border-color .25s;min-width:0}
.dl-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.dl-ico{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff}
.dl-body{display:flex;flex-direction:column;min-width:0}
.dl-body b{font-family:var(--font-head);font-size:1.15rem;letter-spacing:.04em}
.lang-ur .dl-body b{font-weight:400}
.dl-body small{color:var(--text-dim);font-size:.86rem}
.dl-size{font-style:normal;font-size:.74rem;color:var(--text-mute);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;text-align:start}

/* ============ FOOTER ============ */
.site-footer{position:relative;background:var(--green-900);color:#dceee2;padding:clamp(46px,7vw,76px) 0 42px;overflow:hidden;text-align:center}
[data-theme="light"] .site-footer{background:var(--green-800)}
.footer-topo{position:absolute;inset:0;background:url("../assets/topo-pattern.webp");background-size:600px;opacity:.07;pointer-events:none}
.footer-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.footer-logo{width:78px;margin-bottom:8px}
.footer-title{font-family:var(--font-head);font-size:1.25rem;letter-spacing:.06em;color:#fff}
.footer-meta{color:#a9c6b5;font-size:.9rem}
.footer-best{margin-top:12px}
.best-badge{display:inline-block;font-family:var(--font-head);letter-spacing:.06em;font-size:.8rem;padding:8px 16px;border-radius:999px;
  background:rgba(232,85,45,.16);border:1px solid rgba(232,85,45,.4);color:#ffb59c}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,12,7,.93);display:grid;place-items:center;padding:20px;animation:lbIn .3s forwards}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:94vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:16px;inset-inline-end:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.4);color:#fff;font-size:1.8rem;cursor:pointer;line-height:1;transition:transform .2s,background .2s}
.lb-close:hover{transform:rotate(90deg);background:var(--accent)}

/* ============ REVEAL ============ */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ============ BREAKPOINTS (mobile-first) ============ */
@media (min-width:560px){
  .brand-text small{display:block}
  .stat-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-cards.cols-2,.d-cards.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-sattu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-sattu .gal-item:last-child{grid-column:1/-1}
  .g-sattu .gal-item img{height:clamp(220px,34vw,340px)}
}
@media (min-width:760px){
  /* horizontal route strip */
  .route-card{padding:30px clamp(64px,9vw,96px) 26px}
  .rwrap{height:auto;padding-top:78px;margin-bottom:26px}
  .lang-ur .rwrap{padding-top:96px}
  .track{position:relative;top:auto;bottom:auto;inset-inline-start:auto;width:auto;height:14px}
  .seg{top:0;bottom:0;transform-origin:left}
  [dir="rtl"] .seg{transform-origin:right}
  .seg-easy{height:auto;inset-inline:0 auto;width:var(--easy-p)}
  .seg-climb{height:auto;inset-inline:var(--easy-p) 0}
  .js .route-card:not(.drawn) .seg{transform:scaleX(0)}
  .rnodes{position:relative;inset:auto;height:92px;margin-top:-18px}
  .lang-ur .rnodes{height:118px}
  .rnode{top:0;inset-inline-start:calc(var(--p) * 1%);flex-direction:column;align-items:center;gap:8px;text-align:center;transform:translateX(-50%)}
  [dir="rtl"] .rnode{transform:translateX(50%)}
  .rtxt{align-items:center;width:max-content;max-width:170px;margin-top:0}
  .lang-ur .rtxt{margin-top:-4px}
  /* forest hut label sits above the track so it never collides with the finish label */
  .rnode:nth-child(3){top:auto;bottom:calc(100% - 22px);flex-direction:column-reverse}
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .dl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dl-card{flex-direction:column;align-items:flex-start}
}
@media (min-width:980px){
  .spec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .d-cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-sattu{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-sattu .gal-item:last-child{grid-column:auto}
  .g-sattu .gal-item img{height:340px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .hero-bg{transform:none}
}
[dir="rtl"] .stat b,[dir="rtl"] .dl-size{text-align:right}