/* Krishvi E'Villa — page-specific styles.
   Layout: one continuous walk through E'Villa, from a small framed view that opens to the sunset street,
   through pearl pages of brick, light and planting, to the clubhouse, plans and the call to visit.
   Forest and pearl bands, looping titles, offset galleries, on the Krishvi Group header, footer and type. */
.pg-l{background:var(--pearl);color:var(--ink);position:relative}
.pg-l .lab.dim{color:var(--mute-ink)}
.pg-l.lined>.lines{color:var(--forest)}
.pg-d.lined>.lines{color:var(--pearl)}
.prog{position:fixed;left:0;right:0;top:0;height:1px;z-index:91;background:var(--sand);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
figure{margin:0}
.imgw img{width:100%;height:100%;object-fit:cover}
.stat__rule{position:relative;display:block;height:1px;background:var(--rule-ink);margin:14px 0 10px}
.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}
@media (pointer:fine){summary,.gal__rail,.seg button{cursor:none}}

/* line reveals: the mask reaches past the line box, so descenders and accents are never clipped */
.ln-mask{padding-block:.18em .34em;margin-block:-.18em -.34em}

/* thin rule above a heading */
.vl{display:block;width:1px;height:56px;background:currentColor;opacity:.4;margin:0 auto clamp(30px,4vw,52px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:17px 22px;background:var(--pearl);color:var(--forest);position:relative}
.btn i{width:7px;height:7px;border-radius:50%;background:#3FA866;display:block}
.btn--line{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* floating call and WhatsApp */
.fab{position:fixed;right:max(var(--gx),env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:89;display:flex;gap:6px;transition:opacity .4s,transform .4s}
.fab.off{opacity:0;transform:translateY(12px);pointer-events:none}
.fab a{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;background:rgba(8,19,13,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--pearl);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);transition:background .35s}
.fab a:hover{background:var(--forest)}
.fab .wa{padding:0 16px 0 13px}
.fab .call{width:44px}
.fab svg{width:18px;height:18px;display:block}
.fab .wa svg{fill:#58C27D}
.fab .call svg{fill:none;stroke:currentColor;stroke-width:1.6}

/* looping title */
.mq{overflow:hidden;white-space:nowrap;font:400 clamp(84px,15vw,260px)/1.12 var(--display);letter-spacing:-.035em;user-select:none;padding-block:.18em .3em;margin-block:-.18em -.3em}
.mq__t{display:inline-flex;will-change:transform}
.mq__g{display:inline-flex}
.mq__g span{padding-right:.4em}

/* hero: a small framed view opens to the whole street */
.evh{position:relative;background:var(--ground)}
.evh__pin{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ground);color:var(--pearl)}
.mo .evh{height:310svh}
.mo .evh__pin{position:sticky;top:0}
.evh__mq{position:absolute;left:0;right:0;top:42%;translate:0 -50%;z-index:1}
.evh__img{position:absolute;inset:0;z-index:2;clip-path:inset(20% 39% 36% 39%);overflow:hidden;background:var(--deep)}
.evh__img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.evh__dim{position:absolute;inset:0;z-index:3;background:var(--deep);opacity:0;pointer-events:none}
.evh__txt{position:absolute;left:0;right:0;bottom:clamp(74px,11svh,118px);z-index:3;display:grid;justify-items:center;gap:14px;text-align:center}
.evh__line{font:500 clamp(15px,1.25vw,18px)/1.42 var(--sans);max-width:42ch;text-wrap:balance}
.evh__chip{padding:8px 13px;box-shadow:inset 0 0 0 1px rgba(247,239,231,.42)}
.evh__scroll{position:absolute;left:max(var(--gx),env(safe-area-inset-left,0px));bottom:calc(32px + env(safe-area-inset-bottom,0px));z-index:3;color:var(--pearl)}
.evh__pin>.imgnote{z-index:4;bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* introduction, key facts and gallery */
.in2{position:relative;z-index:1;padding-block:clamp(84px,11vw,150px) clamp(40px,5vw,70px);overflow:clip}
.in2__t{display:grid;justify-items:center;text-align:center;gap:clamp(20px,2.4vw,30px)}
.in2__t h2{font-size:clamp(40px,5.4vw,84px);line-height:1.06;max-width:15ch}
.in2__t p{font:400 16px/1.62 var(--sans);max-width:54ch;color:var(--mute-ink);text-wrap:pretty}
.kf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,4vw,56px) var(--gx);margin-top:clamp(60px,8vw,112px)}
.kf__i b{display:block;font-size:clamp(30px,3.5vw,54px);line-height:1;font-variant-numeric:tabular-nums}
.kf__i small{display:block;color:var(--mute-ink)}
.gal{position:relative;z-index:1}
.gal__rail{display:flex;align-items:flex-start;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x proximity;padding-inline:max(var(--gx),env(safe-area-inset-left,0px));scroll-padding-inline:max(var(--gx),env(safe-area-inset-left,0px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal__rail::-webkit-scrollbar{display:none}
.gal__f{flex:0 0 auto;scroll-snap-align:start;position:relative}
.gal__f .imgw{overflow:hidden}
.gal__nav{display:flex;gap:10px;justify-content:flex-end;padding:22px max(var(--gx),env(safe-area-inset-right,0px)) 0}
.gal__nav button{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;display:grid;place-items:center;transition:opacity .3s,background .3s}
.gal__nav button:disabled{opacity:.28}
.gal__nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.ex{padding-block:clamp(70px,9vw,120px) clamp(70px,9vw,120px)}
.ex .gal__f:nth-child(1){width:min(46vw,760px);margin-top:92px}
.ex .gal__f:nth-child(2){width:min(31vw,520px)}
.ex .gal__f:nth-child(3){width:min(44vw,720px);margin-top:150px}
.ex .gal__f:nth-child(4){width:min(30vw,500px);margin-top:36px}
.ex .gal__f:nth-child(5){width:min(46vw,760px);margin-top:112px}
.ex .gal__f:nth-child(1) .imgw{aspect-ratio:3/2}
.ex .gal__f:nth-child(2) .imgw{aspect-ratio:4/5}
.ex .gal__f:nth-child(3) .imgw{aspect-ratio:16/10}
.ex .gal__f:nth-child(4) .imgw{aspect-ratio:1/1}
.ex .gal__f:nth-child(5) .imgw{aspect-ratio:3/2}

/* customer voice */
.vo{padding-block:clamp(30px,5vw,70px) clamp(100px,13vw,180px);overflow:clip}
.vo .mq{color:var(--ink)}
.vo__b{display:grid;justify-items:center;text-align:center;gap:clamp(30px,4vw,48px);margin-top:clamp(22px,3vw,40px)}
.vo__img{width:clamp(130px,12vw,190px);aspect-ratio:1/1;overflow:hidden}
.vo blockquote{font:400 clamp(30px,4.4vw,70px)/1.12 var(--display);letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.who{display:grid;gap:4px}
.who b{font:600 12.5px/1.3 var(--sans)}
.who span{font:400 12.5px/1.3 var(--sans);color:var(--mute-ink)}

/* full-width scene */
.fw{position:relative;height:100svh;min-height:440px;overflow:hidden;background:var(--deep);z-index:1}
.fw .par{position:absolute;inset:0}
.fw__dim{position:absolute;inset:0;background:var(--deep);opacity:0;pointer-events:none}
.fw>.imgnote{bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:2}

/* design ideas */
.dz{padding-block:clamp(90px,11vw,160px);overflow:clip;position:relative;z-index:1}
.dz__in{display:grid;gap:clamp(56px,7vw,110px);max-width:1280px;margin-inline:auto}
.dz__b{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);width:min(100%,clamp(560px,64vw,960px));align-items:start}
.dz__b:nth-child(even){margin-left:auto;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.dz__b:nth-child(even) .dz__t{order:-1}
.dz__f{aspect-ratio:4/5;overflow:hidden;position:relative}
.dz__t{display:grid;gap:14px;padding-top:clamp(0px,2.4vw,34px);align-content:start}
.dz__t h3{font-size:clamp(28px,2.9vw,46px);line-height:1.08}
.dz__t p{font:400 15px/1.58 var(--sans);color:var(--mute-ink);max-width:36ch;text-wrap:pretty}

/* why a villa */
.wy{position:relative;background:var(--forest);color:var(--pearl);padding-block:clamp(90px,11vw,150px);z-index:1;overflow:clip}
.wy h2{font-size:clamp(34px,4.6vw,70px);line-height:1.08;max-width:17ch}
.wy__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gx);margin-top:clamp(48px,6vw,84px)}
.wy__i{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--rule);align-content:start}
.wy__i h3{font:400 clamp(23px,2.2vw,32px)/1.12 var(--display);letter-spacing:-.02em}
.wy__i p{font:400 15px/1.58 var(--sans);color:rgba(247,239,231,.78);max-width:34ch}

/* homeowners */
.qs{padding-block:clamp(90px,11vw,150px);position:relative;z-index:1;overflow:clip}
.qs__head{margin-bottom:clamp(28px,4vw,50px)}
.qs__l{display:grid}
.qs__r{display:grid;gap:18px;padding-block:clamp(26px,3.4vw,44px);border-top:1px solid var(--rule-ink)}
.qs__r:last-child{border-bottom:1px solid var(--rule-ink)}
.qs__r blockquote{font:400 clamp(24px,2.8vw,42px)/1.18 var(--display);letter-spacing:-.02em;max-width:34ch;text-indent:clamp(0px,7vw,110px);text-wrap:pretty}
.qs__r .who{justify-self:start;padding-left:clamp(0px,7vw,110px)}

/* clubhouse */
.cb{position:relative;background:var(--ground);color:var(--pearl);z-index:1;overflow:clip}
.cb__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);padding-block:clamp(70px,9vw,120px) clamp(40px,5vw,70px);align-items:start}
.cb__l{display:grid;gap:18px;justify-items:start}
.cb__l h2{font-size:clamp(42px,6vw,96px);line-height:1}
.cb__l p{font:400 16px/1.6 var(--sans);color:rgba(247,239,231,.78);max-width:40ch}
.am{columns:2;column-gap:clamp(24px,4vw,60px)}
.am li{font:400 clamp(17px,1.5vw,21px)/1.2 var(--display);letter-spacing:-.01em;padding:11px 0;border-top:1px solid var(--rule);break-inside:avoid;transition:padding .5s var(--ease)}
.am li:hover{padding-left:10px}
.cg{padding-bottom:clamp(70px,9vw,120px)}
.cg .gal__f{width:clamp(270px,31vw,500px)}
.cg .gal__f .imgw{display:block;aspect-ratio:16/9}
.cg .gal__f:nth-child(even){margin-top:46px}
.cg figcaption{margin-top:10px;color:var(--mute)}

/* plans and specifications */
.pl{padding-block:clamp(90px,11vw,150px);position:relative;z-index:1;overflow:clip}
.pl__h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.pl__h h2{font-size:clamp(38px,5vw,78px);line-height:1.06}
.pl__h p{font:400 15px/1.58 var(--sans);color:var(--mute-ink);max-width:42ch}
.pl__m{overflow:hidden;background:#4C3A2F}
.pl__m img{width:100%;height:auto}
.pl__f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.7fr);gap:var(--gx);margin-top:clamp(56px,7vw,100px);align-items:start}
.pl__c{display:grid;gap:22px;justify-items:start;position:sticky;top:96px}
.pl__c h3{font-size:clamp(28px,2.9vw,46px);line-height:1.08}
.seg{display:grid;gap:8px;width:100%}
.seg__r{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:10px 13px;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--rule-ink);color:var(--ink);transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--forest);color:var(--pearl);box-shadow:none}
.pl__fig{background:#fff;padding:clamp(8px,1.4vw,20px)}
.pl__fig img{width:100%;height:auto}
.sp2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--gx);margin-top:clamp(70px,9vw,130px);align-items:start}
.sp2__l{display:grid;gap:20px;position:sticky;top:96px}
.sp2__l h2{font-size:clamp(34px,4vw,62px);line-height:1.06}
.ft{display:grid;gap:7px;font:500 13.5px/1.35 var(--sans);max-width:36ch}
.ft li{display:grid;grid-template-columns:12px 1fr;gap:9px;align-items:baseline}
.ft li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sand);translate:0 -2px}
.spc{border-top:1px solid var(--rule-ink)}
.spc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;font:400 clamp(19px,1.7vw,24px)/1.15 var(--display);letter-spacing:-.015em}
.spc summary::-webkit-details-marker{display:none}
.spc summary i{position:relative;width:12px;height:12px;flex:0 0 12px}
.spc summary i::before,.spc summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.spc summary i::after{transform:rotate(90deg)}
.spc[open] summary i::after{transform:rotate(0)}
.spc ul{display:grid;gap:8px;padding:0 0 22px;font:400 14.5px/1.5 var(--sans);color:var(--mute-ink);max-width:62ch}
.sp2__r .spc:last-child{border-bottom:1px solid var(--rule-ink)}

/* location */
.lo{position:relative;background:var(--ground);color:var(--pearl);padding-block:clamp(90px,11vw,150px);overflow:clip;z-index:1}
.lo__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--gx);align-items:start}
.lo__l{display:grid;gap:22px;justify-items:start;position:sticky;top:96px}
.lo__l h2{font-size:clamp(34px,4.4vw,68px);line-height:1.06;max-width:15ch}
.lo__l p{font:400 15px/1.58 var(--sans);color:rgba(247,239,231,.78);max-width:42ch}
.lo dl{display:grid;gap:14px;margin:0}
.lo dt{font:500 10.5px/1.45 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lo dd{margin:3px 0 0;font:400 14px/1.5 var(--sans);overflow-wrap:anywhere;max-width:44ch}
.lo__d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.6vw,48px) clamp(24px,4vw,60px)}
.lo__d h3{font:500 10.5px/1.45 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.lo__d li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule);font:400 14px/1.3 var(--sans)}
.lo__d li span:last-child{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.lo__n{margin-top:22px;color:var(--mute);font-size:12.5px}

/* closing */
.cz{position:relative;background:var(--forest);color:var(--pearl);padding-block:clamp(100px,13vw,180px);text-align:center;z-index:1}
.cz__in{display:grid;justify-items:center;gap:20px}
.cz .vl{margin-bottom:10px}
.cz h2{font-size:clamp(40px,5.6vw,88px);line-height:1.06;max-width:14ch}
.cz p{font:400 16px/1.55 var(--sans);max-width:44ch;color:rgba(247,239,231,.82)}
.cz .btns{margin-top:12px}
.cz__m{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin-top:12px}

/* next project */
.nx{position:relative;display:block;height:100svh;min-height:520px;overflow:hidden;background:var(--deep);color:var(--pearl);z-index:1}
.nx .par{position:absolute;inset:0}
.nx__sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,19,13,.2),rgba(8,19,13,.1) 45%,rgba(8,19,13,.7))}
.nx__c{position:absolute;left:0;right:0;bottom:clamp(40px,8svh,84px);display:grid;justify-items:center;gap:10px;text-align:center}
.nx__r{position:relative;width:86px;height:86px;border-radius:50%;border:1px solid rgba(247,239,231,.55);display:grid;place-items:center;margin-bottom:6px}
.nx__r span{font:500 10px/1 var(--sans);letter-spacing:.06em;opacity:.8;translate:0 -6px}
.nx__r b{position:absolute;left:50%;bottom:-11px;translate:-50% 0;padding:6px 12px;border-radius:99px;border:1px solid rgba(247,239,231,.7);background:rgba(8,19,13,.4);font:600 11px/1 var(--sans)}
.nx h2{font-size:clamp(56px,9.4vw,160px);line-height:1;margin-top:8px}

@media (max-width:899px){
  .evh__img{clip-path:inset(18% 19% 42% 19%)}
  .evh__mq{top:38%}
  .evh__img img{object-position:50% 60%}
  .evh__txt{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
  .evh__pin>.imgnote{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .kf__i b{font-size:clamp(23px,6.6vw,34px)}
  .evh__scroll{bottom:calc(36px + env(safe-area-inset-bottom,0px))}
  .kf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex .gal__f:nth-child(n){width:80vw;margin-top:0}
  .ex .gal__f:nth-child(even){margin-top:30px;width:66vw}
  .dz__b,.dz__b:nth-child(even){grid-template-columns:minmax(0,1fr);width:100%;margin-left:0}
  .dz__b:nth-child(even) .dz__t{order:0}
  .dz__f{aspect-ratio:4/4.4}
  .wy__g,.cb__g,.pl__h,.pl__f,.sp2,.lo__g{grid-template-columns:minmax(0,1fr)}
  .pl__c,.sp2__l,.lo__l{position:static}
  .lo__d{grid-template-columns:minmax(0,1fr)}
  .qs__r blockquote{text-indent:0}
  .qs__r .who{padding-left:0}
}
@media (max-width:480px){
  .am{columns:1}
  .btns{width:100%}
  .cz .btn{width:100%;justify-content:center}
}