/* Home page — hero, promises, about teaser, stacked project panels, sketch, statement, services, quote */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--deep)}
.hero__media{position:absolute;inset:0}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,19,13,.4) 0%,rgba(8,19,13,0) 30%,rgba(8,19,13,.1) 55%,rgba(8,19,13,.72) 100%)}
.hero__dim{position:absolute;inset:0;background:var(--deep);opacity:0}
.hero__txt{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);align-items:end}
.hero h1{grid-column:2;font-size:clamp(21px,2.6vw,39px);max-width:14ch;line-height:1.1}
.hero h1 em{color:var(--sand)}
.hero__foot{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px}
.hero__foot>.lab{justify-self:center}
.hero>.imgnote{bottom:calc(58px + env(safe-area-inset-bottom,0px))}

/* promises */
.prom{padding-block:clamp(64px,8vw,110px);background:var(--pearl);color:var(--ink)}
.prom__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gx);margin-bottom:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,80px);border-bottom:1px solid var(--rule-ink)}
.prom__stat b{display:block;font-size:clamp(42px,5.4vw,70px);line-height:1}
.prom__stat small{display:block;color:var(--mute-ink)}
.prom__top{max-width:40ch;margin-bottom:clamp(48px,7vw,80px)}
.prom__top h2{font-size:clamp(30px,4.2vw,56px);line-height:1.16;letter-spacing:-.02em}
.prom__top h2 em{color:var(--sand);font-style:italic}
.prom__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gx)}
.prom__card .imgw{display:block;aspect-ratio:3/4;overflow:hidden}
.prom__card .imgw img{width:100%;height:100%;object-fit:cover;display:block}
.prom__card .stat__rule{margin:16px 0 18px}
.prom__card h3{font-size:clamp(25px,2.4vw,32px);margin:0 0 12px;line-height:1.05}
.prom__card .lead{font-family:var(--display);font-size:clamp(15px,1.3vw,17px);line-height:1.4;margin:0 0 10px;max-width:28ch;text-wrap:pretty}
.prom__card .body{font:400 14px/1.55 var(--sans);color:var(--mute-ink);max-width:30ch;margin:0}
.stat__rule{position:relative;display:block;height:1px;background:var(--rule-ink);margin:16px 0 12px}
.stat__rule::before,.stat__rule::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--rule-ink)}
.stat__rule::before{left:0}
.stat__rule::after{right:0}

/* about teaser block */
.about{position:relative;padding-block:clamp(90px,11vw,160px)}
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);align-items:start}
.about__img{position:sticky;top:14vh;width:min(100%,340px);aspect-ratio:3/4}
.about__txt{display:grid;gap:clamp(56px,8vw,120px)}
.about__big{font-family:var(--display);font-size:clamp(23px,2.5vw,37px);line-height:1.16;letter-spacing:-.02em;text-wrap:pretty}
.about__big .lab{display:inline-block;vertical-align:top;margin:.55em 7.5em 0 0;font-size:10px}
.about__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px)}
.about__row .lab{max-width:24ch}
.about__row .body{max-width:40ch;color:var(--pearl);opacity:.9}
.about__row .body p+p{margin-top:1.1em}
.about__row .lk{margin-top:36px}

/* stacked project panels */
.stack{position:relative}
.panel{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:var(--deep);display:block;color:var(--pearl)}
.panel .par{position:absolute;inset:0}
.panel__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,19,13,0) 55%,rgba(8,19,13,.7) 100%)}
.panel__dim{position:absolute;inset:0;background:var(--deep);opacity:0;pointer-events:none}
.panel__txt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:18px 0;background:linear-gradient(90deg,rgba(8,19,13,.6) 0%,rgba(8,19,13,.6) 15%,rgba(8,19,13,0) 30%)}
.panel .lab{display:block;margin-bottom:10px}
.panel h3{font:400 clamp(38px,4.6vw,66px)/.98 var(--display);letter-spacing:-.03em}

/* sketch */
.sketch{padding-block:clamp(90px,11vw,160px);overflow:hidden}
.sketch__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);align-items:center}
.sketch__art svg{width:100%;height:auto;overflow:visible}
.dr{fill:none;stroke:var(--forest);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.dr.thin{stroke-width:.7;stroke:#8A5A34}
.dr-sun{fill:var(--sand);stroke:none}
.sketch__txt{display:grid;gap:24px;max-width:50ch}
.sketch__txt h2{font-size:clamp(36px,4.6vw,66px)}
.sketch__txt .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;color:var(--mute-ink)}
.sketch__txt .lk{justify-self:start;color:var(--forest)}

/* statement */
.stmt{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--deep);color:var(--pearl)}
.stmt .par{position:absolute;inset:0}
.stmt__shade{position:absolute;inset:0;background:rgba(8,19,13,.4)}
.stmt__words{position:absolute;left:0;right:0;top:38%;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.stmt__words span{font:400 clamp(30px,4.8vw,78px)/1 var(--display);letter-spacing:-.035em;white-space:nowrap;will-change:transform}
.stmt__words em{color:var(--sand)}
.stmt__foot{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);align-items:end}
.stmt__foot div{display:grid;gap:22px;justify-items:start;max-width:40ch}

/* services (Krishvi Design Studio) */
.svc__head{padding-top:clamp(80px,10vw,140px);padding-bottom:24px}
.svc__head .disp{font-size:clamp(34px,4.4vw,64px)}
.svc__head .lab{display:block;margin-bottom:14px}
.svc__pin{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(60px,9vw,130px)}
.svc__media,.svc__index{display:none}
.svc__text article{padding-block:36px;border-top:1px solid var(--rule-ink);display:grid;gap:16px;max-width:52ch}
.svc__text article img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.svc__text h3{font:400 clamp(32px,9vw,52px)/1 var(--display);letter-spacing:-.03em}
.svc__text p{color:var(--mute-ink)}
.svc__text .lk{justify-self:start;color:var(--forest)}
.svc-on .svc__pin{height:100svh;min-height:560px;grid-template-columns:minmax(0,6fr) minmax(0,3.3fr) minmax(0,4fr);gap:clamp(20px,3vw,56px);align-content:center;align-items:center;padding-bottom:0}
.svc-on .svc__media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pearl-2)}
.svc-on .svc__media figure{position:absolute;inset:0}
.svc-on .svc__media img{width:100%;height:100%;object-fit:cover}
.svc-on .svc__index{display:block}
.svc__index li{display:grid;grid-template-columns:40px 1fr 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule-ink);font:500 10.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute-ink);cursor:pointer;transition:color .4s}
.svc__index li:first-child{border-top:1px solid var(--rule-ink)}
.svc__index li.on{color:var(--ink)}
.svc__index li i{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .4s}
.svc__index li.on i{opacity:1}
.svc-on .svc__text{position:relative;min-height:300px;align-self:center}
.svc-on .svc__text article{position:absolute;left:0;right:0;top:0;border:0;padding:0;opacity:0;visibility:hidden}
.svc-on .svc__text article.on{opacity:1;visibility:visible}
.svc-on .svc__text article img{display:none}
.svc-on .svc__text h3{font-size:clamp(36px,4vw,60px)}

/* quote */
.quote{position:relative;background:var(--forest);color:var(--pearl);overflow:hidden}
.quote__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh}
.quote__img{position:relative;min-height:60svh}
.quote__img .par{position:absolute;inset:0}
.quote__txt{display:grid;align-content:center;gap:30px;padding-block:clamp(80px,10vw,140px);padding-left:clamp(24px,4vw,64px);padding-right:max(var(--gx),env(safe-area-inset-right,0px))}
.quote blockquote{font:400 clamp(30px,4.2vw,64px)/1.14 var(--display);letter-spacing:-.03em;text-wrap:balance}
.quote .body{max-width:40ch;opacity:.9}
.quote .lk{justify-self:start}

@media (max-width:899px){
  .hero__txt,.about__grid,.about__row,.sketch__grid,.sketch__txt .cols,.quote__grid,.stmt__foot{grid-template-columns:minmax(0,1fr)}
  .hero h1{grid-column:1;font-size:clamp(27px,7vw,43px)}
  .prom__stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .prom__grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .about__img{position:relative;top:0;width:min(100%,420px);aspect-ratio:4/3}
  .about__big .lab{margin-right:3em}
  .stmt__words{flex-direction:column;align-items:flex-start;gap:6px;top:30%}
  .stmt__words span{font-size:clamp(34px,11vw,64px)}
  .quote__img{min-height:46svh}
}
@media (max-width:520px){
  .hero__foot .chip{display:none}
}
