/* fonts are served from this folder, so the site makes no outside requests */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-variable.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin-variable.woff2) format("woff2")}
@font-face{font-family:"Noto Nastaliq Urdu";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-nastaliq-urdu-500.woff2) format("woff2")}
/* Layout: a fixed full-screen 3D stage. One chapter of text shows at a time, lower-left on wide screens and as a bottom sheet on phones. The stops of the route run down the right edge. */
:root{
  --forest:#0e2a22; --pine:#1d4a3a; --leaf:#2f7d5b; --sage:#a8cdb0; --mint:#e4f2e1; --cream:#f7f4e6; --lamp:#f2b24f;
  --ink:var(--forest); --ink-soft:#2b5546; --accent:var(--leaf); --chip:#f7f4e6; --chip-ink:#0e2a22;
  --veil:228 242 225; --veil-a:1; --sky:#d9eed8;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting","Noto Naskh Arabic",serif;
  --gutter:clamp(20px,5.2vw,88px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mint);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.track{height:1300vh}
.stage{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#8fcab4 0%,#dff1d8 58%,#cbe4c1 100%)}
.stage[data-tone="dark"]{--ink:var(--cream);--ink-soft:#cfe3d2;--accent:var(--lamp)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.5s ease}
.stage.is-ready #scene{opacity:1}
.fx{position:absolute;inset:0;pointer-events:none}
.veil-side{background:linear-gradient(90deg,rgb(var(--veil)/.8) 0%,rgb(var(--veil)/.62) 16%,rgb(var(--veil)/.24) 32%,rgb(var(--veil)/0) 46%);opacity:var(--veil-a);transition:opacity .5s}
.veil-mid{background:radial-gradient(ellipse 54% 46% at 50% 50%,rgb(var(--veil)/.74) 0%,rgb(var(--veil)/.5) 50%,rgb(var(--veil)/0) 84%);opacity:0;transition:opacity .8s}
.veil-top{background:linear-gradient(180deg,rgb(var(--veil)/.5) 0,rgb(var(--veil)/0) 120px)}
.stage.is-finale .veil-side{opacity:0}
.stage.is-finale .veil-mid{opacity:1}
.vignette{box-shadow:inset 0 0 22vmax rgb(6 30 22/.26)}
.grain{opacity:.06;mix-blend-mode:multiply;background-size:140px 140px}

.bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 0;z-index:5}
.brand{display:inline-flex;align-items:center;gap:.5em;color:var(--ink);text-decoration:none;font:600 1.5rem/1 var(--display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;transition:color .5s}
.brand svg{width:1.05em;height:1.3em;flex:none}
.play{display:inline-flex;align-items:center;gap:.55em;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);background:color-mix(in srgb,var(--chip) 0%,transparent);color:var(--ink);font:600 .95rem/1 var(--body);padding:.7em 1.05em .7em .85em;border-radius:999px;cursor:pointer;transition:background .25s,color .5s,border-color .5s}
.play:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.play svg{width:1em;height:1em;flex:none}
.play .i-pause{display:none}
.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-pause{display:block}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px;border-radius:6px}

.chapter{position:absolute;left:var(--gutter);bottom:clamp(22px,13vh,140px);width:min(34rem,max(43vw,300px));opacity:0;visibility:hidden;will-change:opacity,transform;z-index:3;color:var(--ink);transition:color .5s}
.chapter.is-first{opacity:1;visibility:visible}
.chapter::before{content:"";position:absolute;inset:-56px -90px -64px -120px;z-index:-1;background:rgb(var(--veil)/.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 100%);mask-image:radial-gradient(closest-side,#000 52%,transparent 100%)}
.stage.is-lite .chapter::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.chapter > * + *{margin-top:clamp(.5rem,2.2vh,1.05rem)}
.chapter h1,.chapter h2{margin:0;font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.022em;text-wrap:balance}
.chapter h1{font-size:clamp(1.9rem,min(6vw,11.5vh),5.6rem);line-height:.97}
.chapter h2{font-size:clamp(1.5rem,min(3.9vw,7.6vh),3.5rem);line-height:1.03}
.chapter p{margin-bottom:0;font-size:clamp(.9rem,min(1.22vw,2.6vh),1.2rem);line-height:1.56;max-width:31rem;color:var(--ink-soft);transition:color .5s}
.chapter .lede{font-size:clamp(.98rem,min(1.5vw,3.1vh),1.4rem);line-height:1.45;color:var(--ink)}
.place{display:flex;align-items:center;gap:.5em;font-weight:600;color:var(--accent)!important;font-size:1rem!important}
.place svg{width:.95em;height:1.15em;flex:none}
.urdu{font-family:var(--urdu);font-weight:500;font-size:clamp(1.1rem,min(2.1vw,4.4vh),2rem)!important;line-height:2.3!important;color:var(--accent)!important;direction:rtl;text-align:left;margin:0}
.note{padding-top:.95rem;border-top:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);font-size:clamp(.98rem,1.1vw,1.08rem)!important}
.note strong{color:var(--ink);font-weight:700}
.note small{display:block;margin-top:.35em;font-size:.82rem;opacity:.85}
.chapter--finale{left:50%;bottom:auto;top:50%;width:min(46rem,calc(100% - 40px));text-align:center;transform:translate3d(-50%,-50%,0)}
.chapter--finale p{margin-inline:auto}
.chapter--finale .urdu{text-align:center;font-size:clamp(1.4rem,min(3.6vw,6.4vh),3.2rem)!important;line-height:2.1!important}
.chapter--finale h2{font-size:clamp(1.5rem,min(4.4vw,8vh),3.9rem)}
.btn{display:inline-flex;align-items:center;gap:.5em;margin-top:1.5rem;border:0;background:var(--pine);color:var(--cream);font:600 1rem/1 var(--body);padding:.95em 1.5em;border-radius:999px;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--leaf)}
.stage[data-tone="dark"] .btn{background:var(--cream);color:var(--forest)}

.route{position:absolute;right:calc(var(--gutter) * .55);top:50%;transform:translateY(-50%);z-index:4}
.route ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:22px;position:relative}
.route-line{position:absolute;right:6px;top:8px;bottom:8px;width:2px;background:color-mix(in srgb,var(--ink) 22%,transparent);border-radius:2px}
.route-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0);transition:transform .5s ease,background .5s;border-radius:2px}
.route button{display:flex;align-items:center;justify-content:flex-end;gap:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);font:600 .86rem/1 var(--body);position:relative;z-index:1;transition:color .5s}
.route .name{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;white-space:nowrap;padding:.42em .7em;border-radius:999px;background:rgb(var(--veil)/.86)}
.route .dot{width:14px;height:14px;border-radius:50%;background:rgb(var(--veil));border:2px solid color-mix(in srgb,var(--ink) 45%,transparent);transition:background .3s,border-color .3s,transform .3s;flex:none}
.route button.is-past .dot{background:var(--accent);border-color:var(--accent)}
.route button.is-on .dot{transform:scale(1.35);background:var(--accent);border-color:rgb(var(--veil))}
.route button.is-on .name,.route button:hover .name,.route button:focus-visible .name{opacity:1;transform:none}

.hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:600 .9rem/1 var(--body);color:var(--ink);z-index:3;transition:opacity .5s;pointer-events:none}
.hint.is-off{opacity:0}
.hint i{display:block;width:2px;height:34px;border-radius:2px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:drop 2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.tag{position:absolute;left:0;top:0;padding:.42em .78em;border-radius:999px;background:var(--chip);color:var(--chip-ink);font:600 .84rem/1.15 var(--body);white-space:nowrap;box-shadow:0 3px 14px rgb(6 24 18/.22);opacity:0;transition:opacity .45s;margin-top:-14px}
.tag::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:12px;margin-left:-1px;background:var(--chip);border-radius:0 0 2px 2px}
.tag.is-on{opacity:1}

/* ---------- header link, and the cue at the end of the journey ---------- */
.bar-right{display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
.bar-link{color:var(--ink);font:600 .95rem/1 var(--body);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em;transition:color .5s}
.bar-link:hover{color:var(--accent)}
.more{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:600 .9rem/1 var(--body);color:var(--ink);z-index:3;opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap;padding:.6em 1em 0;border-radius:999px 999px 0 0;background:rgb(var(--veil)/.78)}
.stage.is-finale .more{opacity:1}
.more i{display:block;width:2px;height:28px;border-radius:2px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:drop 2s ease-in-out infinite}

/* ---------- facts and contact: scrolls up over the stage once the journey has ended ---------- */
.info{position:relative;z-index:10;background:var(--cream);color:var(--forest);border-radius:28px 28px 0 0;box-shadow:0 -18px 50px rgb(6 30 22/.28);padding-block:clamp(56px,9vw,120px) 0}
.wrap{width:min(72rem,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.info h2,.info h3{font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.02em;margin:0;text-wrap:balance}
.info h2{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1}
.info h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;margin-bottom:1.4rem}
.info p{margin:0;font-size:1.06rem;line-height:1.6;color:#2b5546;max-width:38rem}
.info p + p{margin-top:.8rem}
.kicker{font-weight:600;color:var(--leaf)!important;margin-bottom:.9rem!important}
.info-lede{margin-top:1.2rem!important;font-size:clamp(1.1rem,1.5vw,1.3rem)!important;color:var(--forest)!important}
.block{margin-top:clamp(56px,8vw,104px)}
.block.two,.block.ask,.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:clamp(36px,6vw,80px)}
.block.two > div,.block.ask > *,.contact > div{min-width:0}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1px;background:#cfdcc6;border:1px solid #cfdcc6;border-radius:18px;overflow:hidden}
.stats li{background:var(--cream);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:.55rem}
.stats strong{font:560 clamp(2rem,3.6vw,3rem)/1 var(--display);font-variation-settings:"SOFT" 100;letter-spacing:-.02em;color:var(--pine);font-variant-numeric:tabular-nums}
.stats span{font-size:1.02rem;line-height:1.45;color:#2b5546}
.stats small{font-size:.8rem;line-height:1.4;color:#5b7a69;margin-top:auto;padding-top:.4rem}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:1.15rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem 1rem;font-size:1.04rem;line-height:1.55;color:#2b5546}
.steps li::before{content:counter(s);grid-row:1/3;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pine);color:var(--cream);font:600 1rem/2.4rem var(--body);text-align:center}
.steps strong{color:var(--forest);display:block}
.prices{margin:0;display:grid}
.prices div{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid #cfdcc6}
.prices div:first-child{border-top:1px solid #cfdcc6}
.prices dt{font-size:1.02rem;color:#2b5546}
.prices dd{margin:0;font:600 1.08rem/1.2 var(--body);color:var(--forest);white-space:nowrap;font-variant-numeric:tabular-nums}
.fine{margin-top:1.1rem!important;font-size:.92rem!important;color:#5b7a69!important}
.plan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(20px,3vw,40px)}
.plan li{border-top:3px solid var(--leaf);padding-top:1rem}
.plan .when{display:block;font:600 1rem/1.2 var(--body);color:var(--leaf);margin-bottom:.5rem}
.plan p{font-size:1.02rem}
.block.ask{background:var(--pine);color:var(--cream);border-radius:24px;padding:clamp(28px,4.4vw,60px)}
.block.ask h3{color:var(--cream)}
.block.ask p{color:#cfe3d2}
.block.ask .big{font:560 clamp(2.8rem,7vw,5.2rem)/1 var(--display);font-variation-settings:"SOFT" 100;letter-spacing:-.03em;color:var(--lamp);margin-bottom:1.1rem}
.ways{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;align-content:start}
.ways li{font-size:1.02rem;line-height:1.5;color:#cfe3d2;padding-bottom:1.2rem;border-bottom:1px solid rgb(247 244 230/.18)}
.ways li:last-child{border-bottom:0;padding-bottom:0}
.ways strong{display:block;color:var(--cream);font-size:1.08rem;margin-bottom:.15rem}
.contact{margin-top:clamp(56px,8vw,104px)}
.reach{margin:1.6rem 0 0;display:grid;gap:1.1rem}
.reach dt{font-size:.9rem;font-weight:600;color:var(--leaf);margin-bottom:.2rem}
.reach dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;font:560 clamp(1.15rem,2vw,1.5rem)/1.3 var(--display);font-variation-settings:"SOFT" 100;color:var(--forest);overflow-wrap:anywhere}
.reach .is-empty{font:500 1rem/1.4 var(--body);color:#5b7a69;font-style:italic}
.copy{border:1.5px solid #9fbba6;background:none;color:var(--pine);font:600 .82rem/1 var(--body);padding:.5em .85em;border-radius:999px;cursor:pointer}
.copy:hover{background:#e4f2e1}
.team{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.team li{font-size:1rem;line-height:1.45;color:#2b5546}
.team strong{display:block;font-size:1.12rem;color:var(--forest)}
.foot{margin-top:clamp(56px,8vw,104px);padding-block:28px calc(34px + env(safe-area-inset-bottom,0px));border-top:1px solid #cfdcc6;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 2rem}
.foot p{font-size:.95rem;color:#5b7a69}
.foot-urdu{font-family:var(--urdu);font-size:1.2rem!important;line-height:2.2!important;color:var(--leaf)!important;width:100%;margin:0}
.foot a{color:var(--pine);font-weight:600;font-size:.95rem;text-underline-offset:.3em}

.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.rise:nth-child(2){animation-delay:.12s}.rise:nth-child(3){animation-delay:.26s}.rise:nth-child(4){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (max-height:440px){.note,.hint,.more{display:none}.bar{padding-top:calc(10px + env(safe-area-inset-top,0px))}.btn{margin-top:.7rem;padding:.7em 1.2em}.route ol{gap:12px}}
@media (max-width:820px) and (max-aspect-ratio:5/4),(max-aspect-ratio:1/1){
  .chapter::before{display:none}
  .veil-side{background:linear-gradient(0deg,rgb(var(--veil)/.97) 0%,rgb(var(--veil)/.9) 24%,rgb(var(--veil)/.5) 44%,rgb(var(--veil)/0) 60%)}
  .chapter{left:20px;right:20px;width:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  .chapter h1{font-size:clamp(2.1rem,min(11.4vw,6.6vh),3.6rem)}
  .chapter h2{font-size:clamp(1.6rem,min(8.2vw,4.6vh),2.6rem)}
  .chapter p{font-size:clamp(.95rem,min(4.1vw,2.2vh),1.12rem)}
  .chapter .lede{font-size:clamp(1rem,min(4.4vw,2.4vh),1.2rem)}
  .urdu{font-size:clamp(1.2rem,min(5.6vw,3vh),1.6rem)!important}
  .chapter--finale .urdu{font-size:clamp(1.5rem,min(8vw,4.4vh),2.3rem)!important}
  .chapter--finale h2{font-size:clamp(1.6rem,min(8.2vw,4.6vh),2.6rem)}
  .chapter--hero{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .chapter--finale{left:50%;right:auto;width:calc(100% - 40px);bottom:auto}
  .route{right:0;left:0;top:0;transform:none;height:4px}
  .route ol{display:none}
  .route-line{position:absolute;inset:0;width:auto;border-radius:0;background:color-mix(in srgb,var(--ink) 14%,transparent)}
  .route-fill{transform:scaleX(var(--p,0))!important;transform-origin:left;transition:none}
  .play span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bar-link{font-size:.88rem}
  .more{font-size:.82rem;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .more i{height:16px}
  .play{padding:.8em}
  .brand{font-size:1.35rem}
  .tag{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){.rise,.hint i,.more i{animation:none}.veil-side,.veil-mid,#scene{transition:none}}

/* plain reading mode: used when 3D cannot run */
body.plain .track,body.plain #scene,body.plain .fx,body.plain .route,body.plain .hint,body.plain .more,body.plain .play,body.plain .tags{display:none}
body.plain .info{border-radius:0;box-shadow:none}
body.plain .stage{position:relative;inset:auto;overflow:visible;min-height:100vh;padding:96px 20px 80px}
body.plain .bar{position:absolute}
body.plain .btn,body.plain .chapter::before{display:none}
body.plain .chapter--finale p{margin-inline:0}
body.plain .chapter--finale .urdu{text-align:left}
body.plain .chapter{position:relative;left:auto;right:auto;top:auto;bottom:auto;opacity:1!important;visibility:visible!important;transform:none!important;width:min(40rem,100%);margin:0 auto;padding-block:7vh;text-align:left}