/* ============================================ */
/* Vishwa Homes — V3 interaction + density layer */
/* ============================================ */

section{padding:110px 0}
@media (max-width:760px){section{padding:72px 0}}

/* ---------- floating WhatsApp ---------- */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:60px; height:60px; border-radius:99px;
  background:#25d366; color:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 12px 32px rgba(37,211,102,.4), 0 4px 12px rgba(0,0,0,.3);
  transition:transform .35s var(--ease), box-shadow .35s;
  text-decoration:none;
}
.fab:hover{transform:translateY(-4px) scale(1.08); box-shadow:0 18px 42px rgba(37,211,102,.55), 0 6px 16px rgba(0,0,0,.4)}
.fab svg{width:30px; height:30px; fill:currentColor}
.fab .pulse{position:absolute; inset:-4px; border-radius:99px; border:2px solid #25d366; animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(.95);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
.fab .lbl{
  position:absolute; right:74px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--bg);
  padding:10px 18px; border-radius:99px;
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap; pointer-events:none; opacity:0; transform:translate(8px,-50%);
  transition:opacity .3s, transform .3s var(--ease);
}
.fab:hover .lbl{opacity:1; transform:translate(0,-50%)}
@media (max-width:560px){.fab .lbl{display:none}}

/* ---------- trust bar ---------- */
.featured-in{
  background:var(--paper); padding:36px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fi-grid{display:grid; grid-template-columns:auto repeat(5,1fr); gap:48px; align-items:center}
.fi-lbl{font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute); white-space:nowrap}
.fi-logo{
  font-family:var(--serif); font-size:clamp(14px,1.2vw,18px); font-weight:400;
  color:rgba(244,239,228,.7); text-align:center; letter-spacing:.02em;
  transition:color .35s, transform .35s var(--ease);
}
.fi-logo em{font-style:italic; color:var(--accent); opacity:.85}
.fi-logo:hover{color:var(--ink); transform:translateY(-2px)}
@media (max-width:760px){.fi-grid{grid-template-columns:1fr 1fr; gap:24px} .fi-lbl{grid-column:1/-1; text-align:center}}

/* ---------- discipline cards ---------- */
.disc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
@media (max-width:900px){.disc-cards{grid-template-columns:1fr}}
.dc{
  position:relative; overflow:hidden; aspect-ratio:5/6; min-height:520px;
  background:var(--paper); cursor:pointer;
  border:1px solid var(--line);
}
.dc .dc-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform 1.6s var(--ease), filter .8s;
  filter:brightness(.55) contrast(1.05);
}
.dc:hover .dc-bg{transform:scale(1.08); filter:brightness(.65) contrast(1.05)}
.dc::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,29,18,.1) 0%, rgba(11,29,18,.15) 50%, rgba(11,29,18,.96) 100%);
  pointer-events:none;
}
.dc-content{
  position:absolute; inset:0; z-index:2;
  padding:36px; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--ink);
}
.dc-num{position:absolute; top:24px; left:24px; font-family:var(--serif); font-size:13px; letter-spacing:.06em; color:var(--accent)}
.dc-content h3{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.02em; margin-bottom:16px}
.dc-content h3 em{color:var(--accent)}
.dc-content p{font-size:14px; line-height:1.65; color:rgba(244,239,228,.85); margin-bottom:24px; max-width:32ch}
.dc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px}
.dc-tags span{font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:99px; color:rgba(244,239,228,.85); backdrop-filter:blur(8px)}
.dc-cta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); padding-top:18px; border-top:1px solid rgba(201,168,124,.4); display:flex; justify-content:space-between; align-items:center}
.dc-cta .arr{transition:transform .4s var(--ease)}
.dc:hover .dc-cta .arr{transform:translateX(8px)}

/* ---------- testimonials ---------- */
.testimonials{background:var(--paper); position:relative; overflow:hidden}
.t-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px}
@media (max-width:900px){.t-grid{grid-template-columns:1fr; gap:32px}}
.t-card{
  padding:48px; border:1px solid var(--line); background:var(--bg);
  position:relative; transition:transform .5s var(--ease), border-color .5s;
}
.t-card:hover{transform:translateY(-6px); border-color:var(--accent)}
.t-card::before{
  content:"\201C"; position:absolute; top:18px; left:24px;
  font-family:var(--serif); font-size:96px; line-height:1; color:var(--accent); opacity:.5; font-weight:300;
}
.t-quote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(20px,2vw,26px); line-height:1.4; letter-spacing:-.012em;
  color:var(--ink); margin-bottom:32px; padding-top:28px;
}
.t-meta{display:flex; align-items:center; gap:16px; padding-top:28px; border-top:1px solid var(--line)}
.t-avatar{
  width:54px; height:54px; border-radius:99px; background:var(--paper);
  border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--serif); font-size:22px; color:var(--accent); flex-shrink:0;
}
.t-name strong{display:block; font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); margin-bottom:2px}
.t-name span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}

/* ---------- lead CTA block ---------- */
.lead-cta{position:relative; overflow:hidden; background:var(--ink); color:var(--bg); padding:0}
.lead-cta-grid{display:grid; grid-template-columns:1fr 1fr; min-height:560px; align-items:stretch}
@media (max-width:900px){.lead-cta-grid{grid-template-columns:1fr}}
.lc-img{position:relative; overflow:hidden; min-height:380px}
.lc-img > div{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 1.4s var(--ease)}
.lead-cta:hover .lc-img > div{transform:scale(1.08)}
.lc-text{padding:80px; display:flex; flex-direction:column; justify-content:center}
@media (max-width:900px){.lc-text{padding:60px 24px}}
.lc-text .eyebrow{color:var(--accent); margin-bottom:24px; display:block}
.lc-text h2{font-family:var(--serif); font-weight:300; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-.025em; margin-bottom:28px; color:var(--bg)}
.lc-text h2 em{color:#5a3a18}
.lc-text p{font-size:15.5px; line-height:1.7; color:rgba(11,29,18,.75); margin-bottom:36px; max-width:46ch}
.lc-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 32px; background:var(--accent); color:var(--bg);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  border-radius:99px; cursor:pointer; border:1px solid var(--accent);
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.btn-primary:hover{transform:translateX(6px); background:var(--bg); color:var(--accent); border-color:var(--accent)}
.btn-secondary{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 28px; background:transparent; color:rgba(11,29,18,.9);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  border-radius:99px; cursor:pointer; border:1px solid rgba(11,29,18,.3);
  transition:border-color .35s, color .35s;
}
.btn-secondary:hover{border-color:var(--accent); color:#5a3a18}

/* ---------- FAQ ---------- */
.faq{padding:120px 0}
.faq-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:80px; align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr; gap:32px}}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line); cursor:pointer}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0; font-family:var(--serif); font-weight:300;
  font-size:clamp(20px,2.2vw,28px); letter-spacing:-.012em;
  transition:padding .4s var(--ease), color .4s;
}
.faq-item:hover .faq-q{padding-left:14px; color:var(--accent)}
.faq-q .ic{
  width:32px; height:32px; border:1px solid var(--line); border-radius:99px;
  display:grid; place-items:center; font-family:var(--sans); font-size:14px;
  flex-shrink:0; transition:transform .4s var(--ease), background .4s, color .4s, border-color .4s;
}
.faq-item.open .faq-q .ic{transform:rotate(45deg); background:var(--accent); color:var(--bg); border-color:var(--accent)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .6s var(--ease), padding .6s var(--ease)}
.faq-item.open .faq-a{max-height:400px; padding:0 0 32px}
.faq-a p{font-size:15px; color:var(--mute); line-height:1.75; max-width:62ch}

/* ---------- gallery strip ---------- */
.gallery{padding:0; display:grid; grid-template-columns:2fr 1fr; gap:4px; height:60vh; min-height:480px; background:var(--bg)}
.gallery > div{background-size:cover; background-position:center; position:relative; overflow:hidden}
.gallery > div::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(11,29,18,.6))}
.gallery .gcap{position:absolute; left:24px; bottom:24px; z-index:2; font-family:var(--serif); font-style:italic; font-size:18px; color:#fff}
@media (max-width:760px){.gallery{grid-template-columns:1fr; height:auto} .gallery > div{height:50vh}}

/* ---------- sticky CTA bar ---------- */
.sticky-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(160%);
  z-index:65; background:rgba(11,29,18,.97);
  border:1px solid var(--accent);
  padding:14px 14px 14px 28px; border-radius:99px;
  display:flex; align-items:center; gap:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.65), 0 0 0 4px rgba(201,168,124,.08);
  transition:transform .6s var(--ease);
  max-width:calc(100vw - 32px);
  backdrop-filter:blur(8px);
}
.sticky-bar.show{transform:translateX(-50%) translateY(0)}
.sticky-bar .sb-text{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink); white-space:nowrap}
.sticky-bar .sb-text em{color:var(--accent)}
.sticky-bar .sb-cta{
  background:var(--accent); color:var(--bg);
  padding:11px 22px; border-radius:99px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  transition:background .3s, color .3s;
}
.sticky-bar .sb-cta:hover{background:var(--bg); color:var(--accent)}
@media (max-width:560px){.sticky-bar{display:none}}

/* ---------- manifesto lift ---------- */
.manifesto-quote{color:var(--ink) !important}
.manifesto-side p{color:rgba(244,239,228,.78) !important; font-size:16px !important}

/* ---------- reveal variants ---------- */
.r-up{opacity:0; transform:translateY(60px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.r-up.in{opacity:1; transform:none}
.r-mask{position:relative; overflow:hidden}
.r-mask > *{display:block; transform:translateY(110%); transition:transform 1.2s var(--ease)}
.r-mask.in > *{transform:translateY(0)}
.r-zoom{opacity:0; transform:scale(.94); transition:opacity 1.2s var(--ease), transform 1.4s var(--ease)}
.r-zoom.in{opacity:1; transform:scale(1)}
.r-fade{opacity:0; transition:opacity 1.4s var(--ease)}
.r-fade.in{opacity:1}
.parallax{will-change:transform}
.count-up{display:inline-block; font-variant-numeric:tabular-nums}

/* ---------- hero scroll arrow ---------- */
.hero-arrow{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:3; width:24px; height:40px; border:1px solid rgba(244,239,228,.6); border-radius:14px;
  display:grid; place-items:center;
}
.hero-arrow::after{
  content:""; width:3px; height:8px; background:var(--accent); border-radius:99px;
  animation:harrow 2s infinite var(--ease);
}
@keyframes harrow{0%{transform:translateY(-6px); opacity:0}50%{opacity:1}100%{transform:translateY(8px); opacity:0}}

/* ---------- process timeline ---------- */
.timeline{padding:120px 0; background:var(--paper)}
.tl-rows{margin-top:64px}
.tl-row{
  display:grid; grid-template-columns:auto 1fr 2fr auto; gap:48px;
  padding:36px 0; border-bottom:1px solid var(--line); align-items:center;
  transition:padding .5s var(--ease), background .5s;
}
.tl-row:hover{padding-left:18px; background:linear-gradient(90deg,rgba(201,168,124,.04),transparent 50%)}
.tl-step{
  width:64px; height:64px; border-radius:99px;
  border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--serif); font-size:24px; color:var(--accent); font-weight:300;
}
.tl-name{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,42px); letter-spacing:-.02em; line-height:1}
.tl-name em{color:var(--accent)}
.tl-desc{font-size:14.5px; color:var(--mute); line-height:1.7; max-width:60ch}
.tl-time{font-family:var(--serif); font-size:14px; color:var(--mute); white-space:nowrap; font-style:italic}
@media (max-width:900px){.tl-row{grid-template-columns:auto 1fr; gap:24px} .tl-desc,.tl-time{display:none}}

/* ---------- nav-cta ---------- */
.nav-cta{
  background:var(--accent); border-color:var(--accent) !important; color:var(--bg) !important;
  font-weight:600;
}
.nav-cta:hover{background:var(--bg) !important; color:var(--accent) !important; border-color:var(--accent) !important}

/* ---------- section dots ---------- */
.section-dots{
  position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:14px;
}
.section-dots a{
  width:8px; height:8px; border-radius:99px; background:rgba(244,239,228,.25);
  transition:all .3s; position:relative;
}
.section-dots a:hover, .section-dots a.active{background:var(--accent); transform:scale(1.4)}
.section-dots a .lab{
  position:absolute; right:18px; top:50%; transform:translate(8px,-50%);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap; opacity:0; transition:opacity .3s, transform .3s var(--ease);
  pointer-events:none;
}
.section-dots a:hover .lab{opacity:1; transform:translate(0,-50%); color:var(--accent)}
@media (max-width:1280px){.section-dots{display:none}}

/* ---------- responsive ---------- */
.hero-content{padding-top:120px}
@media (max-width:760px){.hero-content{padding-top:100px; padding-bottom:80px}}
@media (max-width:760px){.hero-tag{font-size:9.5px; letter-spacing:.24em; margin-bottom:28px}}
@media (max-width:760px){.hero h1{font-size:clamp(40px,11vw,72px) !important; line-height:.95}}
@media (max-width:760px){.hero-foot{margin-top:36px; gap:24px; padding-top:18px}}
@media (max-width:760px){.hero-foot p{font-size:14px}}
@media (max-width:760px){.hero-foot .scroll-cue{display:none} .hero-arrow{display:none}}
@media (max-width:560px){.brand{gap:10px;font-size:18px} .brand-mark{width:28px;height:28px} .nav-cta{padding:9px 16px;font-size:10px}}
@media (max-width:900px){.feat-text{padding:48px 22px 60px}}
@media (max-width:900px){.feat-meta{gap:24px}}
@media (max-width:900px){.feature.reverse .feat-grid{direction:ltr}}
@media (max-width:900px){.feature .feat-grid{grid-template-columns:1fr !important; direction:ltr !important}}
@media (max-width:900px){.feature .feat-img{order:1; min-height:320px !important} .feature .feat-text{order:2}}
@media (max-width:900px){.fn-portrait{aspect-ratio:4/4; max-height:420px}}
@media (max-width:760px){.index-grid{grid-template-columns:1fr 1fr} .ix{padding:36px 20px} .ix .v{font-size:42px}}
@media (max-width:900px){.dc{min-height:480px} .disc-cards{gap:18px}}
@media (max-width:900px){.lc-text{padding:48px 22px 64px}}
@media (max-width:900px){.lc-actions{flex-direction:column; align-items:stretch}}
@media (max-width:900px){.tl-row{padding:24px 0; gap:18px}}
@media (max-width:760px){.t-card{padding:32px 24px}}
@media (max-width:900px){.contact{padding:90px 0 40px}}
@media (max-width:900px){.contact h2{font-size:48px !important; line-height:1; margin-bottom:48px}}
@media (max-width:900px){.contact-grid{gap:28px}}
@media (max-width:900px){.dc-bg{position:absolute !important; inset:0 !important; transform:none !important; background-size:cover !important}}
@media (max-width:900px){.parallax{transform:none !important; transition:none !important}}

/* ---------- global ---------- */
p{color:var(--ink); opacity:.85}
.fn-bio,.feat-desc,.lc-text p,.faq-a p,.manifesto-side p{color:var(--mute) !important; opacity:1}
body{font-size:15.5px; letter-spacing:.005em}
.hero::after{
  background:
    linear-gradient(180deg,rgba(11,29,18,.55) 0%,rgba(11,29,18,.18) 30%,rgba(11,29,18,.55) 70%,rgba(11,29,18,.92) 100%),
    radial-gradient(ellipse at left bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 65%) !important;
}

/* ---------- feat flag ---------- */
.feat-flag{
  display:inline-block; margin-right:10px; padding:4px 10px;
  background:rgba(201,168,124,.14); border:1px solid rgba(201,168,124,.45);
  border-radius:99px; color:var(--accent);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  vertical-align:middle;
}

/* ---------- grain overlay ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- feat img vignette ---------- */
.feat-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(11,29,18,.35) 100%);
  opacity:.8; transition:opacity .8s var(--ease);
}
.feature:hover .feat-img::after{opacity:.4}

/* ---------- brass rule ---------- */
.brass-rule{height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.4; margin:0 auto; max-width:120px}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* ---------- footer credit ---------- */
.built-by{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); opacity:.75; display:inline-flex; gap:6px; align-items:center}
.built-by a{color:var(--accent); border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .3s}
.built-by a:hover{border-bottom-color:var(--accent)}
.built-by .heart{color:var(--accent)}