:root{
  --white:#FFFFFF; --paper:#FAF8F4; --ink:#111111; --gray:#6B6B6B; --hair:#D9D9D9;
  --chartreuse:#C8F03C; --accent:var(--chartreuse); --on-accent:#111111;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --m:64px; --g:24px; --ease:cubic-bezier(.2,.7,.2,1); --sec:128px;
}
html[data-accent="cobalt"]{--accent:#2F4BFF;--on-accent:#FFFFFF}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--display);color:var(--ink);background:var(--white);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.grid>*{min-width:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.wide{font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;font-weight:500}
.it{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-stretch:100%;font-weight:400}
.gray{color:var(--gray)}
section{padding:var(--sec) 0}
.eyebrow{display:flex;gap:14px;align-items:center;color:var(--gray);margin-bottom:28px}
.hero .eyebrow .eyebrow::before{content:"";width:28px;height:1px;background:var(--ink)}
h2.h2{font-size:clamp(28px,3.2vw,44px);line-height:1.02}
.cap{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--gray);line-height:1.5}
.cap b{color:var(--ink);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#fff 0 10px,#f1f1f1 10px 20px);border:1px solid var(--hair);font-family:var(--mono);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:20px;line-height:1.6}

/* drafting line */
.dl{position:relative;height:28px}
.dl svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dl .stroke{stroke:var(--accent);stroke-width:2;fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000)}
.dl.drawn .stroke{transition:stroke-dashoffset 1.6s var(--ease);stroke-dashoffset:0}
.dl .tick{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.dl .lab{position:absolute;left:50%;top:-3px;transform:translateX(-50%);background:var(--white);padding:0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ink .dl .lab{background:var(--ink);color:#fff}.ink .dl .tick{stroke:#fff}
.dl.stitch .stroke{stroke-dasharray:10 7!important;stroke-dashoffset:0!important;transition:none}
@media (prefers-reduced-motion:reduce){.dl .stroke{stroke-dasharray:none;stroke-dashoffset:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:16px 22px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.link{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:44px;width:auto}
.brand span{font-size:14px;font-stretch:125%;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:30px;font-size:14px}
.nav a{text-decoration:none;position:relative;padding:6px 0}
.nav a.act::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.nav .btn{padding:11px 16px}
.burger{display:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);padding:9px 12px;background:#fff}

/* hero */
.hero{padding:72px 0 96px}
.hero h1 .it{white-space:nowrap}
.hero .eyebrow{grid-column:1/-1}
.hero h1{grid-column:1/-1;font-size:clamp(40px,5vw,72px);line-height:.98;margin-bottom:40px}
.hero .lede{grid-column:1/span 4;grid-row:3;display:flex;flex-direction:column;gap:32px;padding-top:40px;align-self:start} /* 40 = dimension line 28 + 12 gap, so the lede starts on the photo's top edge */
.hero .lede p{text-box:trim-start cap alphabetic} /* first line's cap height sits exactly on the photo top (Chrome/Safari; others land ~8px lower) */
.hero .lede p{font-size:20px;line-height:1.45}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .img{grid-column:5/span 8;grid-row:3}
.hero .img img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* signature */
.sig{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sig-head{align-items:end;margin-bottom:48px}
.sig-head .t{grid-column:1/span 7}
.sig-head p{grid-column:9/span 4;color:#2d2d2d;font-size:16px}
.zonelist{grid-column:1/span 3;list-style:none;border-top:1px solid var(--ink);align-self:start}
.zonelist button{all:unset;cursor:pointer;display:flex;gap:14px;width:100%;padding:14px 0;border-bottom:1px solid var(--hair);font-size:16px;color:#3d3d3d}
.zonelist button .n{font-family:var(--mono);font-size:11px;color:var(--gray);padding-top:4px}
.zonelist button[aria-selected="true"]{color:var(--ink);font-weight:500}
.zonelist button[aria-selected="true"] .n{color:var(--ink)}
.zonelist button[aria-selected="true"]::after{content:"→";margin-left:auto;font-family:var(--mono)}
.stage{grid-column:4/span 9}
.stabs{display:flex;gap:32px;border-bottom:1px solid var(--hair);margin-bottom:16px;position:relative}
.stabs button{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 0;color:var(--gray);position:relative}
.stabs button .k{color:var(--gray);margin-right:8px}
.stabs button[aria-selected="true"]{color:var(--ink)}
.stabs .bar{position:absolute;bottom:-1px;height:2px;background:var(--accent);transition:left .5s var(--ease),width .5s var(--ease)}

.frame{position:relative;aspect-ratio:16/10;background:#fff;border:1px solid var(--hair);overflow:hidden}
.frame .layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .5s var(--ease)}
.frame .layer.on{opacity:1}
.frame .layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.frame .layer .ph{width:100%;height:100%;border:0}
.stabs button[disabled]{cursor:not-allowed;color:#b5b5b5;text-decoration:line-through}
.frame .phflag{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(17,17,17,.86);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;text-align:center}
.frame .dflag{position:absolute;right:12px;top:12px;z-index:2}
.zplan{margin-top:24px;border-top:1px solid var(--ink);padding-top:12px}
.zplan img{width:100%;height:auto;border:1px solid var(--hair);background:#fff;margin-top:10px}
.frame .badge{position:absolute;left:12px;top:12px;background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--hair);z-index:2}
.stage .capline{display:flex;justify-content:space-between;gap:20px;margin-top:12px}
.stage .counter{font-family:var(--mono);font-size:12px;color:var(--gray);white-space:nowrap}

/* audiences */
.aud-head{margin-bottom:48px;align-items:end}
.aud-head .t{grid-column:1/span 7}
.aud-head p{grid-column:9/span 4;color:#2d2d2d;font-size:16px}
.aud{grid-template-columns:repeat(3,minmax(0,1fr))}
.aud .tile{border-top:1px solid var(--ink);padding-top:14px}
.aud .tile .thumb{aspect-ratio:4/5;margin:14px 0;overflow:hidden;background:#fff}
.aud .tile .thumb img{width:100%;height:100%;object-fit:cover}
.aud .tile h3{font-size:20px;font-stretch:115%;text-transform:uppercase;font-weight:500;line-height:1.1}
.aud .tile p{font-size:14px;color:#2d2d2d;margin-top:6px}
.aud .tile .go{display:inline-block;margin-top:12px}
.resi{margin-top:40px;border-top:1px solid var(--hair);padding-top:16px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.resi .l{display:flex;gap:16px;align-items:center}
.resi img{width:72px;height:72px;object-fit:cover}

/* featured */
.work{border-top:1px solid var(--hair)}
.prow{padding:40px 0 56px;border-top:1px solid var(--hair)}
.prow:first-of-type{border-top:0;padding-top:8px}
.metaline{font-size:11px;letter-spacing:.06em;color:var(--ink);line-height:1.7;margin:14px 0 18px}
.prow .name{grid-column:1/span 3;align-self:start}
.prow h3{font-size:22px;line-height:1.05}
.prow .name h2{font-size:clamp(28px,3vw,40px);line-height:1}
.meta-row{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);line-height:1.9;margin:18px 0 22px}
.meta-row span{color:var(--ink)}
.prow .imgs{grid-column:4/span 9;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--g);align-items:start}
.prow .imgs.two{grid-template-columns:1fr 1fr}
.prow .imgs.one{grid-template-columns:1fr}
.prow .imgs.two img{aspect-ratio:3/2;object-fit:cover}
.prow .imgs figure{margin:0}
.prow .imgs img{width:100%;height:auto}
.f-a{grid-column:1/-1}.f-b{grid-column:1/span 5}.f-c{grid-column:6/span 4}.f-d{grid-column:1/span 4}.f-e{grid-column:5/span 5}

/* process */
.proc-sec{border-top:1px solid var(--hair)}
.proc-head{margin-bottom:40px;align-items:end}
.proc-head .t{grid-column:1/span 7}
.proc-head p{grid-column:9/span 4;font-size:16px;color:#2d2d2d}
.phases{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px}
.phase .num{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:16px}
.phase .num b{font-size:44px;font-stretch:125%;font-weight:500;line-height:1}
.phase figure{aspect-ratio:4/3;background:#fff;border:1px solid var(--hair);position:relative;overflow:hidden;margin:0}
.phase figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.phase h3{font-size:18px;font-stretch:115%;text-transform:uppercase;font-weight:500;line-height:1.15;margin:18px 0 8px}
.phase ul{list-style:none;font-size:14px;color:#2d2d2d}
.phase li{padding:5px 0;border-top:1px solid var(--hair)}
.phase .pay{margin-top:14px;display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);padding:5px 8px}

/* packages */
.pk{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pk-head{margin-bottom:48px;align-items:end}
.pk-head .t{grid-column:1/span 7}
.pk-head p{grid-column:9/span 4;font-size:16px;color:#2d2d2d}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--hair);padding:28px;display:flex;flex-direction:column;gap:18px;position:relative}
.card.feature{border:1px solid var(--ink)}
.card.feature .flag{position:absolute;top:-1px;right:-1px;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px}
.card h3{font-size:26px;font-stretch:125%;text-transform:uppercase;font-weight:500;line-height:1}
.card .phbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.card .phbar i{height:6px;background:var(--hair)}
.card .phbar i.on{background:var(--ink)}
.card .price{font-family:var(--mono);font-size:13px;line-height:1.8;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:12px 0}
.card .price b{font-size:28px;font-family:var(--display);font-stretch:110%;font-weight:500;display:block;letter-spacing:0;line-height:1.2}
.card ul{list-style:none;font-size:14px;flex:1}
.card li{padding:7px 0;border-bottom:1px solid var(--hair);display:flex;gap:10px}
.card li::before{content:"—";color:var(--gray)}
.fine{margin-top:28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* about */
.about .portrait{grid-column:1/span 4}
.about .portrait .ph{aspect-ratio:4/5}
.about .txt{grid-column:6/span 7;align-self:center}
.about .quote{font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.25;margin:18px 0 32px}
.about .cv{list-style:none;border-top:1px solid var(--ink)}
.about .cv li{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:16px}
.about .cv li span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);padding-top:4px}
.lineage{margin-top:32px;padding:18px;border:1px dashed var(--gray)}
.lineage .names{font-stretch:115%;text-transform:uppercase;font-weight:500;font-size:15px;line-height:1.8;margin-top:6px}
.lineage .names em{font-style:normal;text-transform:none;font-weight:400;font-size:15px;color:var(--gray);font-stretch:100%}

/* inquire */
.inq{background:var(--ink);color:#fff}
.inq .t{grid-column:1/span 6}
.inq h2{font-size:clamp(36px,4.6vw,72px);line-height:.96}
.inq .t p{margin-top:24px;color:#cfcfcf;font-size:18px;max-width:460px}
.inq form{grid-column:8/span 5;display:grid;gap:22px}
.inq label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a8a8a8;margin-bottom:6px}
.inq .in{border-bottom:1px solid #fff;padding:10px 0;color:#8a8a8a;font-size:16px}
.inq .chips{display:flex;gap:8px;flex-wrap:wrap}
.inq .chips span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #555;padding:7px 10px}
.inq .chips span.on{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}


/* footer */
.foot{padding:72px 0 40px;border-top:1px solid var(--hair)}
.foot .lg{grid-column:1/span 3}
.foot .lg img{width:120px}
.foot .col{grid-column:span 3;font-size:14px;line-height:2}
.foot .col b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--gray);margin-bottom:8px}
.foot .base{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--hair);padding-top:18px;margin-top:40px;gap:16px;flex-wrap:wrap}

/* responsive */
@media (max-width:1100px){
  :root{--m:40px;--g:20px;--sec:96px}
  .nav{gap:18px}
  .hero .lede{grid-column:1/-1;grid-row:auto;padding-top:28px}
  .hero .img{grid-column:1/-1;grid-row:auto}
  .sig-head .t,.sig-head p,.aud-head .t,.aud-head p,.proc-head .t,.proc-head p,.pk-head .t,.pk-head p{grid-column:1/-1}
  .zonecol{grid-column:1/-1!important}
  .zplan{display:none}
  .zonelist{grid-column:1/-1;display:flex;overflow-x:auto;border-top:0;gap:0}
  .zonelist li{flex:0 0 auto}
  .zonelist button{border-bottom:1px solid var(--hair);padding:12px 18px 12px 0;margin-right:18px;white-space:nowrap}
  .zonelist button[aria-selected="true"]{border-bottom:2px solid var(--ink)}
  .zonelist button[aria-selected="true"]::after{content:none}
  .stage{grid-column:1/-1}
  .aud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prow .name,.prow .imgs{grid-column:1/-1}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr}
  .about .portrait{grid-column:1/span 5}.about .txt{grid-column:6/span 7}
  .inq .t,.inq form{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--m:20px;--g:16px;--sec:64px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nav{display:none}.burger{display:inline-block}
  br.dk{display:none}
  .hero h1 .it{white-space:normal}
  .brand img{height:36px}.brand span{font-size:12px}
  .site-head .wrap{height:64px}
  .hero{padding:24px 0 56px}
  .hero h1{font-size:40px;margin-bottom:20px}
  .hero .eyebrow{margin-bottom:16px}
  .hero .dl .lab{font-size:10px;letter-spacing:.06em;padding:0 8px}
  .hero .dl .lab-x{display:none}
  .hero .lede p{font-size:18px}
  .stabs{gap:18px}
  .stabs button .k{display:none}
  .stage .capline{flex-direction:column;gap:4px}
  .aud{grid-template-columns:1fr 1fr;gap:16px}
  .aud .tile h3{font-size:16px}
  .prow .imgs,.prow .imgs.two,.prow .imgs.one{grid-template-columns:1fr}
  .f-a,.f-b,.f-c,.f-d,.f-e{grid-column:1/-1}
  .f-d,.f-e{display:none}
  .phases{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .about .portrait,.about .txt{grid-column:1/-1}
  .about .portrait .ph{aspect-ratio:16/10}
  .about .cv li{grid-template-columns:1fr;gap:2px}
  .foot .lg,.foot .col{grid-column:1/-1}
  .dl .lab{font-size:9px}
}

/* v4 additions */
.zonelist{max-width:100%;overflow-x:auto;scrollbar-width:none}
.zonelist::-webkit-scrollbar{display:none}
.zonecol{grid-column:1/span 3}
.zonelist{grid-column:auto}
.resi-line{margin-top:32px;border-top:1px solid var(--hair);padding-top:14px}
.procline{margin-top:40px;border-top:1px solid var(--hair);padding-top:16px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;font-size:15px}
.name-story{margin:32px 0 0}
.name-story .dl{margin-bottom:14px}
.ns-row{display:flex;gap:24px;align-items:center}
.bn{font-family:"Noto Serif Bengali","Noto Sans Bengali","Kohinoor Bangla","Vrinda",serif;font-size:56px;line-height:1.2;font-weight:600;color:var(--ink)}
.ns-row p{font-size:15px;color:#2d2d2d;margin-top:4px}
.lineage{margin-top:28px}
@media (max-width:760px){.ns-row{flex-direction:column;align-items:flex-start;gap:8px}.bn{font-size:44px}.aud{grid-template-columns:1fr}.aud .tile .thumb{aspect-ratio:3/2}}

/* live v1 */
.nav a.act::after{content:none}
.about .head{grid-column:1/span 5}
.about .body{grid-column:7/span 6}
.about .quote{margin:24px 0 0}
.inq .side{grid-column:8/span 5;display:grid;gap:22px;align-content:start}
.inq .side ul{list-style:none;border-top:1px solid #444}
.inq .side li{padding:12px 0;border-bottom:1px solid #444;font-size:16px;color:#e6e6e6;display:flex;gap:14px}
.inq .side li span{font-family:var(--mono);font-size:11px;color:#a8a8a8;padding-top:4px}
.inq .mail{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:#cfcfcf}
.inq .mail a{color:#fff}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.mnav{display:none;border-top:1px solid var(--hair);background:#fff}
.mnav a{display:block;padding:14px var(--m);border-bottom:1px solid var(--hair);text-decoration:none;font-size:16px}
.mnav a.btn{margin:14px var(--m);display:inline-flex;border-bottom:1px solid var(--accent)}
.site-head.open .mnav{display:block}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px;border:1px solid var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:1100px){.about .head,.about .body,.inq .side{grid-column:1/-1}.about .body{margin-top:32px}}
@media (min-width:761px){.mnav{display:none!important}}