@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-normal-a97232.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-normal-a97232.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-normal-a97232.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/DMSans-normal-8ca1b7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/DMSans-normal-8ca1b7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/DMSans-normal-8ca1b7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/InstrumentSerif-italic-52a6c2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/InstrumentSerif-normal-2d243d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/NotoNastaliqUrdu-normal-365651.woff2) format('woff2');
  unicode-range: U+20, U+60c, U+627, U+62f, U+644, U+646, U+648, U+6a9, U+6c1, U+6cc;
}

/* Layout: night-stage hero with the couple's names split by a giant italic "&", a live phone feed, then a scrolling story: about, reels, brand work, contact. */
:root{
  --ink:#100b16;          /* stage black, plum-biased */
  --ink-2:#1b1424;        /* raised surface */
  --line:#2e2438;
  --fg:#f6eef4;
  --muted:#b3a3b8;
  --blush:#ff8fb1;        /* main accent: rose */
  --gold:#ffc46b;         /* warm second light */
  --cyan:#25f4ee;         /* TikTok split, used only as glitch */
  --red:#fe2c55;
  --f-display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-urdu:"Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
@font-face {
  font-family: 'Nastaliq';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/NastaliqUrdu-sub.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Nastaliq';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/NotoNastaliqUrdu-latin-400-8bce10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nastaliq';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/NastaliqUrdu-sub.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Nastaliq';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/NotoNastaliqUrdu-latin-400-8bce10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*{box-sizing:border-box}
html,body{margin:0}
img,svg,video{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0}
.eyebrow{display:block;font:600 .78rem/1.5 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--blush)}

/* ---------- ambient canvas ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}
.glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--blush) 22%,transparent),transparent 65%);
  transform:translate(-50%,-50%);left:70%;top:30%;transition:left .6s ease-out,top .6s ease-out;filter:blur(10px)}

/* ---------- nav ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--ink) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font:800 1.7rem/1 var(--f-display);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:3px}
.logo i{font:italic 400 2.1rem/1 var(--f-serif);color:var(--blush);padding:0 3px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem;transition:color .2s}
.nav ul a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font:700 .95rem/1 var(--f-body);
  text-decoration:none;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn-hot{background:var(--blush);color:var(--ink);box-shadow:0 10px 40px -10px var(--blush)}
.btn-hot:hover{box-shadow:0 14px 50px -6px var(--blush)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blush)}
.btn-sm{padding:10px 18px;font-size:.88rem}
@media (max-width:760px){.nav ul{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,8vw,96px) 40px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.hero-grid>*{min-width:0}
.hero-title{grid-column:1/-1}
.hero-grid{row-gap:8px}
.names{font:800 clamp(2.3rem,9.4vw,8.6rem)/1 var(--f-display);letter-spacing:-.045em;margin:18px 0 0;white-space:nowrap}
.names .row{display:inline-block;overflow:hidden;padding-bottom:.08em;vertical-align:bottom}
.names .row:nth-child(2){padding-inline:.12em}
.names .row span{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.names .row:nth-child(2) span{animation-delay:.12s}
.names .row:nth-child(3) span{animation-delay:.24s}
.amp{font:italic 400 1.1em/1 var(--f-serif);color:var(--blush);letter-spacing:0}
.glitch{position:relative}
.glitch::before,.glitch::after{display:none}
.glitch::before{color:var(--cyan);transform:translate(-3px,0);animation:jit 4s steps(1) infinite}
.glitch::after{color:var(--red);transform:translate(3px,0);animation:jit 4s steps(1) infinite reverse}
.glitch>b{position:relative;font:inherit;color:var(--fg);z-index:1}
@keyframes jit{0%,92%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(10% 0 60% 0)}95%{clip-path:inset(55% 0 20% 0)}97%{clip-path:inset(30% 0 40% 0)}}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.urdu{font:500 clamp(1.3rem,2.6vw,1.8rem)/2.2 var(--f-urdu);color:var(--gold);direction:rtl;margin:14px 0 0;display:inline-block}
.lede{max-width:38ch;color:var(--muted);font-size:1.15rem;margin:8px 0 32px}
@media (max-width:480px){.lede{font-size:1.05rem}.cta-row .btn{flex:1 1 100%;justify-content:center}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.tt{width:18px;height:18px}

/* phone */
.phone{position:relative;width:min(270px,100%);aspect-ratio:9/19;margin-inline:auto;border-radius:44px;padding:12px;
  background:linear-gradient(160deg,#2a2033,#0c0810);box-shadow:0 0 0 1px var(--line),0 40px 120px -30px color-mix(in srgb,var(--blush) 60%,transparent);
  transform:rotate(4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.phone:hover{transform:rotate(0) scale(1.02)}
.screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--ink)}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:22px;background:#000;border-radius:20px;z-index:5}
.reel{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 64px 26px 18px}
.reel.on{opacity:1}
.reel .bgfx{position:absolute;inset:0;z-index:0}
.reel>*:not(.bgfx){position:relative;z-index:1}
.reel .rh{display:block;margin:0 0 4px;font:700 .95rem/1.2 var(--f-body)}
.reel p{margin:0;font-size:.82rem;line-height:1.35;color:#f3e6ee}
.reel .big{position:absolute;inset:0;display:grid;place-items:center;font:italic 400 5.5rem/1 var(--f-serif);color:rgba(255,255,255,.9);z-index:1;text-shadow:0 10px 40px rgba(0,0,0,.4)}
.r1 .bgfx{background:radial-gradient(120% 80% at 30% 20%,#ff8fb1 0,#7b2c6b 45%,#140a18 100%)}
.r2 .bgfx{background:radial-gradient(120% 80% at 70% 25%,#ffc46b 0,#b2456e 50%,#120a14 100%)}
.r3 .bgfx{background:radial-gradient(120% 80% at 50% 30%,#25f4ee 0,#3d3a8f 45%,#0e0a18 100%)}
.rail{position:absolute;right:12px;bottom:90px;display:flex;flex-direction:column;gap:18px;z-index:4}
.rail span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.28);backdrop-filter:blur(6px)}
.rail svg{width:20px;height:20px;fill:#fff}
.rail .heart.pop svg{animation:pop .5s ease}
.rail .heart.pop{background:var(--red)}
@keyframes pop{50%{transform:scale(1.4)}}
.progress{position:absolute;top:42px;left:16px;right:16px;display:flex;gap:4px;z-index:4}
.progress i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.progress i b{display:block;height:100%;width:0;background:#fff}
.handle{position:absolute;left:14px;bottom:-14px;transform:translateY(100%);font:600 .85rem var(--f-body);color:var(--muted)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;row-gap:0}.hero-grid>div:last-child{margin-top:56px}.phone{width:min(250px,75%);transform:rotate(2deg)}.urdu{margin-top:20px}}

/* counters */
.counters{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 48px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.counter{display:grid;gap:8px;align-content:start}
.counter b{display:flex;align-items:flex-end;height:2.4rem;font:800 2.4rem/1 var(--f-display);letter-spacing:-.03em}
.counter b em{font:italic 400 2.6rem/1 var(--f-serif);color:var(--blush)}
.counter span{font-size:.85rem;line-height:1.3;color:var(--muted)}
@media (max-width:480px){.counters{grid-template-columns:repeat(3,1fr);gap:16px}}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;margin-top:40px;background:color-mix(in srgb,var(--ink-2) 70%,transparent)}
.track{display:flex;gap:40px;width:max-content;animation:slide 32s linear infinite;font:800 clamp(1.6rem,4vw,2.8rem)/1 var(--f-display);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.track em{font:italic 400 1.1em var(--f-serif);text-transform:none;color:var(--blush)}
.track .dot{color:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding-block:clamp(72px,10vw,128px)}
.marquee{margin-top:clamp(48px,6vw,72px)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:48px}
@media (max-width:760px){.sec-head{margin-bottom:32px}}
.sec-head h2{font:800 clamp(2.2rem,5.5vw,4.2rem)/1 var(--f-display);letter-spacing:-.035em;margin-top:14px;max-width:16ch}
.sec-head h2 em{font:italic 400 1.08em var(--f-serif);color:var(--blush);letter-spacing:0}
.sec-head p{max-width:42ch;color:var(--muted);margin:0}

/* about */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative}
.duo>*{min-width:0}
.person{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-width:100%;isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.person:hover{transform:translateY(-8px)}
.person .ph{position:absolute;inset:0;z-index:-1}
.person.s .ph{background:radial-gradient(90% 70% at 30% 25%,#ff9cbb,#8d2f68 55%,#1a0d1c)}
.person.u .ph{background:radial-gradient(90% 70% at 70% 25%,#ffd08a,#9a4a3c 55%,#1a0e12)}
.person .init{position:absolute;top:18px;left:24px;font:italic 400 clamp(6rem,14vw,11rem)/1 var(--f-serif);color:rgba(255,255,255,.18)}
.person .cap{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(transparent,rgba(10,6,14,.85))}
.person h3{font:800 2.2rem/1 var(--f-display);letter-spacing:-.03em}
.person p{margin:8px 0 0;color:#e8dbe4;max-width:32ch;font-size:.98rem}
.heart-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 8px var(--ink),0 0 60px var(--blush);z-index:2}
.heart-mid svg{width:34px;height:34px;fill:var(--blush);animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.story{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.story>div{padding:24px 0 0;border-top:2px solid var(--line);min-width:0}
.story h3{margin:0 0 8px;font:600 1.15rem/1.3 var(--f-display)}
.story p{margin:0;color:var(--muted);font-size:.98rem}
@media (max-width:760px){.duo{grid-template-columns:1fr;gap:16px}.person{aspect-ratio:4/4.4}.person .cap{padding:22px}.story{grid-template-columns:1fr;margin-top:40px;gap:28px}.heart-mid{display:none}}

/* reels grid */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;box-shadow:0 0 0 1px var(--line)}
.card:hover{box-shadow:0 0 0 1px var(--blush),0 30px 60px -20px color-mix(in srgb,var(--blush) 50%,transparent)}
.card .bg{position:absolute;inset:0;z-index:0;transition:transform .6s}
.card:hover .bg{transform:scale(1.08)}
.card>*:not(.bg){position:relative;z-index:1}
.card .play{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);display:grid;place-items:center;transition:transform .3s,background .3s}
.card:hover .play{transform:scale(1.15);background:var(--blush)}
.card .play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.card .tag{align-self:flex-start;font:700 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.35);margin-bottom:10px}
.card h3{font:700 1.15rem/1.2 var(--f-display)}
.c1 .bg{background:linear-gradient(170deg,#ff8fb1,#5d1f52 70%)}
.c2 .bg{background:linear-gradient(170deg,#ffc46b,#a1384f 70%)}
.c3 .bg{background:linear-gradient(170deg,#9b8cff,#2b1d55 70%)}
.c4 .bg{background:linear-gradient(170deg,#25f4ee,#21365e 70%)}
.c1 .bg::after,.c2 .bg::after,.c3 .bg::after,.c4 .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,6,14,.8))}
@media (max-width:960px){.reels{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:480px){.card{padding:14px;border-radius:18px}.card h3{font-size:1rem}.card .play{width:48px;height:48px;margin:-24px 0 0 -24px}}
.center{display:flex;justify-content:center;margin-top:40px}

/* work with us */
.collab{background:var(--ink-2);border-radius:36px;padding:clamp(28px,5vw,64px);border:1px solid var(--line);position:relative;overflow:hidden}
.collab::before{content:"";position:absolute;width:600px;height:600px;right:-200px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 20%,transparent),transparent 65%)}
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);position:relative}
.offer{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:28px 8px;border-bottom:1px solid var(--line);min-width:0}
.offer:nth-child(odd){border-right:1px solid var(--line);padding-right:28px}
.offer:nth-child(even){padding-left:28px}
.offer .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--blush) 14%,transparent)}
.offer .ico svg{width:24px;height:24px;stroke:var(--blush);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.offer h3{font:600 1.3rem/1.2 var(--f-display);margin-bottom:6px}
.offer p{margin:0;color:var(--muted);font-size:.98rem}
@media (max-width:760px){.offers{grid-template-columns:1fr}.offer,.offer:nth-child(odd),.offer:nth-child(even){border-right:0;padding:22px 0}.offer .ico{width:44px;height:44px;border-radius:14px}}
@media (max-width:480px){.collab{border-radius:28px;padding:28px 20px}}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:56px;position:relative}
.steps>div{min-width:0}
.steps b{display:block;font:italic 400 2.6rem/1 var(--f-serif);color:var(--gold)}
.steps h3{margin:10px 0 4px;font:600 1.05rem var(--f-display)}
.steps p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:0;margin-top:40px}
  .steps>div{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--line)}
  .steps>div:last-child{border-bottom:0}
  .steps b{grid-row:span 2;font-size:2rem}.steps h3{margin:0 0 2px}}
.brand-line{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.contact>*{min-width:0}
.mail{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 20px;border:1px dashed var(--line);border-radius:18px}
.mail code{font:600 1.05rem var(--f-body);user-select:all;word-break:break-all}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
label{display:grid;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--fg);background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blush);box-shadow:0 0 0 4px color-mix(in srgb,var(--blush) 20%,transparent)}
textarea{min-height:130px;resize:vertical}
.sent{grid-column:1/-1;padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold);font-weight:600}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:40px}form{grid-template-columns:1fr}form .btn{width:100%;justify-content:center}}

/* footer */
footer{border-top:1px solid var(--line);padding-block:64px 32px}
.big-sign{white-space:nowrap;font:800 clamp(2.2rem,11.5vw,10rem)/1 var(--f-display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 35%,transparent);text-align:center;transition:color .5s}
.big-sign:hover{color:var(--blush);-webkit-text-stroke-color:var(--blush)}
.big-sign i{font:italic 400 1.1em var(--f-serif);padding-inline:.12em}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}

/* reveal on scroll: visible at rest, gentle lift when JS adds .in */
.rv{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.js .rv:not(.in){transform:translateY(28px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv:not(.in){transform:none;opacity:1}
  html{scroll-behavior:auto}
}

/* ================= multi-page additions ================= */
.nav ul a[aria-current="page"]{color:var(--fg)}
.nav ul a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:4px;border-radius:2px;background:var(--blush)}
.nav-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;place-items:center}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:box-shadow .2s}
.menu{display:none}
@media (max-width:760px){
  .menu-btn{display:grid}
  .nav-right .btn{display:none}
  .menu{display:block;position:fixed;inset:0;z-index:30;background:var(--ink);padding:calc(env(safe-area-inset-top,0px) + 88px) var(--gut-r) 40px var(--gut-l);
    opacity:0;pointer-events:none;transition:opacity .3s}
  .menu.open{opacity:1;pointer-events:auto}
  .menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
  .menu ul a{display:block;padding:12px 0;font:800 2.2rem/1.1 var(--f-display);letter-spacing:-.03em;text-decoration:none;border-bottom:1px solid var(--line)}
  .menu ul a[aria-current="page"]{color:var(--blush)}
  .menu .btn{margin-top:28px;width:100%;justify-content:center}
  body.menu-open{overflow:hidden}
  body.menu-open header{z-index:40;background:transparent;border-color:transparent}
  body.menu-open .menu-btn span{box-shadow:none;background:transparent;position:relative}
  body.menu-open .menu-btn span::before,body.menu-open .menu-btn span::after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:var(--fg);border-radius:2px}
  body.menu-open .menu-btn span::before{transform:rotate(45deg)}
  body.menu-open .menu-btn span::after{transform:rotate(-45deg)}
}

/* page hero (inner pages) */
.page-hero{padding-block:clamp(56px,8vw,104px) clamp(40px,5vw,64px)}
.page-hero h1{font:800 clamp(2.8rem,8.5vw,7rem)/.95 var(--f-display);letter-spacing:-.045em;margin-top:16px;max-width:14ch}
.page-hero h1 em{font:italic 400 1.06em var(--f-serif);color:var(--blush);letter-spacing:0}
.page-hero p{max-width:52ch;color:var(--muted);font-size:1.15rem;margin:20px 0 0}
.page-hero .cta-row{margin-top:32px}
.crumbs{display:flex;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:8px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--fg)}

/* simple section blocks */
.sec-tight{padding-top:0}
.prose{max-width:66ch;color:var(--muted)}
.prose h2{font:700 1.6rem/1.2 var(--f-display);color:var(--fg);margin:40px 0 12px}
.prose p,.prose li{margin:0 0 14px}
.prose a{color:var(--blush)}

/* split teaser */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split>*{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* platforms */
.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.platform{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:24px;background:var(--ink-2);border:1px solid var(--line);text-decoration:none;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.platform:hover{border-color:var(--blush);transform:translateY(-4px)}
.platform .pi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--blush) 14%,transparent)}
.platform .pi svg{width:24px;height:24px;fill:var(--blush)}
.platform h3{font:700 1.2rem/1.2 var(--f-display)}
.platform p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.platform .go{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--blush)}

/* audience */
.audience{display:flex;flex-wrap:wrap;gap:10px}
.country{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink-2) 60%,transparent);font-weight:600}
.country span{font-size:1.3rem;line-height:1}

/* why list */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.why>div{padding:28px;border-radius:24px;background:var(--ink-2);border:1px solid var(--line);min-width:0}
.why h3{font:700 1.25rem/1.25 var(--f-display);margin-bottom:8px}
.why p{margin:0;color:var(--muted);font-size:.98rem}
@media (max-width:760px){.why{grid-template-columns:1fr}.why>div{padding:22px}}

/* faq */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:600 1.15rem/1.35 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:400 1.3rem/1 var(--f-body);color:var(--blush);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:62ch}

/* hashtags */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags a{padding:10px 18px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:600;transition:border-color .2s,color .2s}
.tags a:hover{border-color:var(--blush);color:var(--blush)}

/* yt band */
.yt{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:clamp(28px,5vw,56px);border-radius:36px;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--red) 30%,transparent),transparent 60%),var(--ink-2);border:1px solid var(--line)}
.yt>*{min-width:0}
.yt h2{font:800 clamp(2rem,4.5vw,3.4rem)/1.02 var(--f-display);letter-spacing:-.035em;margin-top:14px}
.yt h2 em{font:italic 400 1.08em var(--f-serif);color:var(--blush)}
.yt p{color:var(--muted);margin:14px 0 0;max-width:44ch}
.yt .screen-yt{aspect-ratio:16/9;max-width:100%;border-radius:20px;background:linear-gradient(135deg,#7b2c6b,#120a14);display:grid;place-items:center;box-shadow:0 30px 80px -30px var(--red);text-decoration:none}
.yt .screen-yt span{width:76px;height:54px;border-radius:16px;background:var(--red);display:grid;place-items:center;transition:transform .3s}
.yt .screen-yt:hover span{transform:scale(1.1)}
.yt .screen-yt svg{width:24px;height:24px;fill:#fff;margin-left:3px}
@media (max-width:860px){.yt{grid-template-columns:1fr}}

/* cta band */
.cta-band{text-align:center;padding:clamp(40px,7vw,88px) clamp(20px,5vw,64px);border-radius:36px;border:1px solid var(--line);
  background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--blush) 22%,transparent),transparent 70%),var(--ink-2)}
.cta-band h2{font:800 clamp(2.2rem,6vw,4.6rem)/1 var(--f-display);letter-spacing:-.04em;max-width:16ch;margin:14px auto 0}
.cta-band h2 em{font:italic 400 1.08em var(--f-serif);color:var(--blush)}
.cta-band p{color:var(--muted);max-width:46ch;margin:18px auto 0}
.cta-band .cta-row{justify-content:center;margin-top:32px}
.cta-band .eyebrow{display:inline-block}

/* footer columns */
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;margin-top:56px}
.foot-cols>*{min-width:0}
.foot-cols .fh{margin:0 0 14px;font:600 .78rem/1.5 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--blush)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-cols a{text-decoration:none;color:var(--muted);transition:color .2s}
.foot-cols a:hover{color:var(--fg)}
.foot-cols p{margin:0;color:var(--muted);font-size:.95rem;max-width:30ch}
.foot-cols .logo{margin-bottom:12px}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols>div:first-child{grid-column:1/-1}}

/* 404 */
.lost{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.lost b{display:block;font:italic 400 clamp(7rem,24vw,16rem)/1 var(--f-serif);color:var(--blush)}
.lost h1{font:800 clamp(2rem,5vw,3.4rem)/1.05 var(--f-display);letter-spacing:-.035em;margin-top:8px}
.lost p{color:var(--muted);margin:14px auto 28px;max-width:40ch}
.lost .cta-row{justify-content:center}
@media (min-width:861px){.steps4{grid-template-columns:repeat(4,1fr)}}
.page-hero .urdu{font:500 clamp(1.3rem,2.6vw,1.8rem)/2.2 var(--f-urdu);color:var(--gold);max-width:none;margin-top:16px}
.split{align-items:start}
.split .sec-head{margin-bottom:0}
@media (max-width:520px){.platforms{grid-template-columns:repeat(2,1fr);gap:12px}.platform{padding:18px;gap:10px;border-radius:20px}.platform p{font-size:.85rem}}
/* youtube cards */
.ytcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ytcard{display:grid;gap:14px;text-decoration:none;min-width:0}
.ytcard .thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;border-radius:22px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.ytcard:hover .thumb{transform:translateY(-4px);box-shadow:0 0 0 1px var(--red),0 30px 60px -24px var(--red)}
.ytcard .yplay{width:68px;height:48px;border-radius:14px;background:var(--red);display:grid;place-items:center;transition:transform .3s}
.ytcard:hover .yplay{transform:scale(1.1)}
.ytcard .yplay svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.ytmeta{display:grid;gap:8px;justify-items:start}
.ytmeta .tag{font:700 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.ytmeta h3{font:700 1.25rem/1.25 var(--f-display)}
@media (max-width:640px){.ytcards{grid-template-columns:1fr}}
/* reach */
.reach{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:28px;background:var(--ink-2);overflow:hidden}
.reach>div{padding:28px 24px;display:grid;gap:8px;align-content:start;min-width:0;border-inline-start:1px solid var(--line)}
.reach>div:first-child{border-inline-start:0}
.reach b{font:800 clamp(2rem,4vw,3rem)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.reach b em{font:italic 400 1.1em/1 var(--f-serif);color:var(--blush)}
.reach span{color:var(--muted);font-size:.92rem;line-height:1.4}
@media (max-width:760px){.reach{grid-template-columns:repeat(2,1fr)}.reach>div{padding:22px 18px}.reach>div:nth-child(3){border-inline-start:0}.reach>div:nth-child(n+3){border-top:1px solid var(--line)}}
.counter b{white-space:nowrap}
/* hero: text starts right under the name, phone aligned to top */
.hero{padding-block:clamp(32px,5vw,64px) 32px}
.hero-grid{align-items:start;row-gap:0}
.hero .names{margin-top:12px}
.hero .urdu{margin-top:8px}
@media (min-width:861px){.hero-grid>div:last-child{margin-top:-24px}}
.card.has-cover .bg::after{display:none}
.reel.has-cover .big{display:none}

/* skip link + scroll progress */
.skip{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 12px);z-index:100;padding:12px 18px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:700;text-decoration:none;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}
main:focus{outline:0}
.progress-bar{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blush),var(--gold));pointer-events:none}
@media (prefers-reduced-motion:reduce){.progress-bar{display:none}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ================= advanced motion ================= */
/* intro: once per visit, ~1.4s, tap to skip. Pure CSS so it also hides without JS */
.intro{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;cursor:pointer;
  animation:introOut .55s cubic-bezier(.7,0,.2,1) .95s forwards}
.intro-in{display:flex;align-items:baseline;gap:.15em;font:800 clamp(2.6rem,9vw,6rem)/1 var(--f-display);letter-spacing:-.04em;overflow:hidden;padding:.1em}
.intro-in span{display:inline-block;animation:introUp .7s cubic-bezier(.2,.8,.2,1) both}
.intro .i-amp{font:italic 400 1.15em/1 var(--f-serif);color:var(--blush);animation-delay:.12s}
.intro .i-u{animation-delay:.24s}
.intro-skip{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);animation:fadeIn .4s .6s both}
.intro.gone{display:none}
@keyframes introUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}
@keyframes fadeIn{from{opacity:0}}

/* page transition curtain */
.curtain{position:fixed;inset:0;z-index:150;pointer-events:none;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--blush),#c95a86 60%,var(--ink));transform:translateY(100%)}
.curtain span{font:800 3rem/1 var(--f-display);color:var(--ink);opacity:0;transition:opacity .2s .15s}
.curtain span i{font:italic 400 1.15em var(--f-serif)}
.curtain.in{transform:none;transition:transform .38s cubic-bezier(.7,0,.2,1)}
.curtain.in span{opacity:1}
.js-entering .curtain{transform:none;animation:curtainUp .55s cubic-bezier(.7,0,.2,1) .05s forwards}
.js-entering .curtain span{opacity:1}
@keyframes curtainUp{to{transform:translateY(-100%)}}

/* custom cursor ring (native cursor stays visible) */
.cursor{position:fixed;left:0;top:0;z-index:120;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--blush) 80%,transparent);pointer-events:none;display:none;place-items:center;
  transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s,opacity .2s;mix-blend-mode:normal}
.has-cursor .cursor{display:grid}
.cursor-label{font:700 .8rem/1 var(--f-body);color:var(--ink);opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s}
.cursor.link{width:54px;height:54px;margin:-27px 0 0 -27px;background:color-mix(in srgb,var(--blush) 14%,transparent)}
.cursor.play{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--blush);border-color:var(--blush)}
.cursor.play .cursor-label{opacity:1;transform:none}
.cursor.hide{opacity:0}

/* word reveal for headings */
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wsplit .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wsplit.on .w>span{transform:none}

/* scroll story: words light up while scrolling */
.scrolly{position:relative;height:200vh}
.scrolly-sticky{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.scrolly-text{margin:0;max-width:22ch;font:800 clamp(2rem,5.6vw,4.6rem)/1.08 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.scrolly-text .sw{transition:color .3s}
.js-scrolly .scrolly-text .sw{color:color-mix(in srgb,var(--fg) 18%,transparent)}
.js-scrolly .scrolly-text .sw.lit{color:var(--fg)}
.js-scrolly .scrolly-text .sw.lit.hl{color:var(--blush);font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}

/* horizontal scroll videos */
.hscroll{position:relative;padding-block:clamp(48px,6vw,80px)}
.hs-sticky{overflow:hidden}
.hs-track{flex:none;display:flex;gap:20px;align-items:stretch;padding-left:max(var(--gut-l),calc((100vw - 1180px)/2 + 16px));padding-right:var(--gut-r);will-change:transform}
.hs-intro{flex:0 0 min(420px,80vw);display:flex;flex-direction:column;justify-content:center;gap:16px;padding-right:24px}
.hs-intro h2{font:800 clamp(2.2rem,4.6vw,3.8rem)/1 var(--f-display);letter-spacing:-.035em}
.hs-intro h2 em{font:italic 400 1.08em var(--f-serif);color:var(--blush);letter-spacing:0}
.hs-intro p{margin:0;color:var(--muted)}
.hs-track .card{flex:0 0 auto;width:clamp(220px,24vw,320px)}
.hs-end .bg{background:radial-gradient(90% 70% at 50% 30%,color-mix(in srgb,var(--blush) 35%,transparent),transparent 70%),var(--ink-2)}
.hs-end-in{position:relative;z-index:1;display:grid;gap:10px;justify-items:start}
.hs-end-in b{font:800 3rem/1 var(--f-display);letter-spacing:-.03em}
.hs-end-in>span:first-of-type{color:var(--muted)}
.hs-hint{display:none;margin:20px 0 0;text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* desktop with motion: pinned, vertical scroll moves the row sideways */
.hs-on .hs-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.hs-on.hscroll{padding-block:0}
.hs-on .hs-track .card{width:auto;height:min(68vh,600px);aspect-ratio:9/16}
.hs-on .hs-hint{display:block;position:absolute;left:0;right:0;bottom:24px}
/* phones / no-motion: native swipe with snap */
.hscroll:not(.hs-on) .hs-sticky{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hscroll:not(.hs-on) .hs-sticky::-webkit-scrollbar{display:none}
.hscroll:not(.hs-on) .hs-track .card,.hscroll:not(.hs-on) .hs-intro{scroll-snap-align:start}
@media (max-width:760px){.hs-intro{flex-basis:78vw}.hscroll:not(.hs-on) .hs-hint{display:block}.hs-track .card{width:64vw}}

/* hero phone + name scroll-linked */
.phone{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .intro,.curtain,.cursor{display:none!important}
  .wsplit .w>span{transform:none}
  .scrolly{height:auto;padding-block:96px}.scrolly-sticky{position:static;height:auto}
}
.no-intro .intro{display:none}
@media (max-width:480px){.counter b{font-size:1.85rem;height:1.9rem}.counters{gap:16px 12px}}
/* comfortable tap targets (24px+) */
.nav ul a{display:inline-block;padding-block:6px}
.foot-cols a{display:inline-block;padding-block:4px}
.prose a,.mail code{padding-block:2px}
.sent.err{background:color-mix(in srgb,var(--red) 16%,transparent);color:#ffb3c4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* language switch */
.lang{font:600 .95rem/1 var(--f-urdu);text-decoration:none;color:var(--muted);padding:10px 6px;transition:color .2s}
.lang[lang="en"]{font-family:var(--f-body)}
.lang:hover{color:var(--fg)}
@media (max-width:760px){.nav-right .lang{display:none}}

/* Urdu page */
html[lang="ur"] body{font-family:'Nastaliq',var(--f-urdu);line-height:2.1}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3{font-family:'Nastaliq',var(--f-urdu)!important;font-weight:700;letter-spacing:0!important;line-height:1.7!important}
html[lang="ur"] h1 em,html[lang="ur"] h2 em{font-family:'Nastaliq',var(--f-urdu)!important;font-style:normal;font-weight:400}
html[lang="ur"] .page-hero h1{font-size:clamp(2.4rem,7vw,5.2rem)}
html[lang="ur"] .sec-head h2,html[lang="ur"] .cta-band h2{font-size:clamp(1.8rem,4.4vw,3.2rem)}
html[lang="ur"] .eyebrow{letter-spacing:0;font-family:'Nastaliq',var(--f-urdu);font-size:.95rem;text-transform:none}
html[lang="ur"] .nav ul a,html[lang="ur"] .foot-cols,html[lang="ur"] .foot,html[lang="ur"] .btn-sm{font-family:var(--f-body)}
html[lang="ur"] header,html[lang="ur"] footer,html[lang="ur"] .menu{direction:ltr}
html[lang="ur"] .reach b{font-family:var(--f-display)}
html[lang="ur"] .wsplit .w{padding-bottom:.35em;margin-bottom:-.35em}

/* media kit packages */
.pk{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pkc{padding:24px;border-radius:24px;background:var(--ink-2);border:1px solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
.pkc .tag{font:700 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pkc h3{font:700 1.2rem/1.25 var(--f-display)}
.pkc p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:960px){.pk{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pk{grid-template-columns:1fr}}

/* print: media kit as a clean light PDF */
@media print{
  :root{--ink:#fff;--ink-2:#f7f2f5;--line:#e6dbe2;--fg:#1a1220;--muted:#5a4b5f;--blush:#c2416f;--gold:#9a5b00}
  body{background:#fff;color:#1a1220;font-size:12pt}
  header,.menu,#sky,.glow,.progress-bar,.curtain,.cursor,.intro,.skip,.no-print,.big-sign,.foot-cols,footer .foot span:last-child,.cta-band .cta-row{display:none!important}
  section{padding-block:18pt!important;break-inside:avoid}
  .page-hero{padding-block:0 12pt}
  .page-hero h1{font-size:34pt}
  .rv,.wsplit .w>span{transform:none!important}
  .reach,.why>div,.pkc,.cta-band,.country{box-shadow:none;background:#f7f2f5!important}
  a{color:inherit;text-decoration:none}
  footer{border:0;padding:0}
}
html[lang="ur"] .reach b{justify-self:start;direction:ltr;unicode-bidi:isolate}

/* motion diet 2026-10-17: intro/curtain/cursor retired for instant UX */
.intro,.curtain,.cursor{display:none!important}