/* ============================================================
   Sachdeva Real Estate — shared stylesheet (light)
   Palette lives in :root. Change it there, the whole site follows.
   ============================================================ */

:root{
  --paper:      #F2F5F0;   /* pale green-grey ground */
  --paper-2:    #FFFFFF;   /* raised cards */
  --paper-3:    #E7ECE3;   /* recessed bands */
  --fg:         #14201B;   /* deep ink-green, not pure black */
  --fg-soft:    #33453C;
  --muted:      #61705F;
  --line:       rgba(20,32,27,.13);
  --green:      #1E5B44;   /* primary accent — land, growth */
  --green-lite: #2E7A5C;
  --brass:      #A8813A;   /* secondary accent — used sparingly */
  --brass-lite: #C79A45;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --deva: "Kohinoor Devanagari", "Noto Serif Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", serif;
  --guru: "Gurmukhi MN", "Gurmukhi Sangam MN", "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", "Raavi", sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px;
}

/* paper texture — very light, keeps large flat areas from looking digital */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9;
  pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }

/* ---------- Devanagari adjustments ---------- */
[lang="hi"], [lang="hi"] body{ font-family:var(--deva); line-height:1.85; }
[lang="hi"] h1,[lang="hi"] h2,[lang="hi"] h3,
[lang="hi"] .hero h1,[lang="hi"] blockquote,[lang="hi"] .big-tel{
  font-family:var(--deva); letter-spacing:0; line-height:1.35;
}
[lang="hi"] .hero h1{ line-height:1.2; font-size:clamp(38px,9.5vw,96px); }
[lang="hi"] .eyebrow,[lang="hi"] .hero-mark,[lang="hi"] footer h4,
[lang="hi"] .detail dt,[lang="hi"] .stat span,[lang="hi"] .meta{ letter-spacing:.06em; }

/* ---------- Gurmukhi adjustments ---------- */
[lang="pa"], [lang="pa"] body{ font-family:var(--guru); line-height:1.8; }
[lang="pa"] h1,[lang="pa"] h2,[lang="pa"] h3,
[lang="pa"] .hero h1,[lang="pa"] blockquote,[lang="pa"] .big-tel{
  font-family:var(--guru); letter-spacing:0; line-height:1.32;
}
[lang="pa"] .hero h1{ line-height:1.18; font-size:clamp(38px,9.5vw,96px); }
[lang="pa"] .eyebrow,[lang="pa"] .hero-mark,[lang="pa"] footer h4,
[lang="pa"] .detail dt,[lang="pa"] .stat span,[lang="pa"] .meta,
[lang="pa"] .stat-solo span{ letter-spacing:.06em; }

/* ---------- scroll progress ---------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:60;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--brass-lite));
}

/* ---------- language switch ---------- */
.langbar{
  position:fixed; top:14px; right:14px; z-index:55;
  display:flex; padding:4px; gap:3px; border-radius:999px;
  background:rgba(255,255,255,.78); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 3px 14px rgba(20,32,27,.09);
}
.langbar a{
  padding:6px 11px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--muted); transition:background .3s, color .3s; white-space:nowrap;
}
.langbar a:hover{ color:var(--fg); }
.langbar a.on{ background:var(--green); color:#fff; }
.langbar a[hreflang="hi"]{ font-family:var(--deva); }
.langbar a[hreflang="pa"]{ font-family:var(--guru); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; padding-block:clamp(72px,12vw,140px); }

.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--green); font-weight:700; margin-bottom:22px;
}
h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,5.4vw,52px); line-height:1.12;
  letter-spacing:-.02em; margin-bottom:20px; text-wrap:balance;
}
h3{ font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:-.01em; }
.lede{ color:var(--muted); max-width:56ch; font-size:clamp(16px,2.1vw,19px); }

/* ============ HERO ============ */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; position:relative; overflow:hidden;
  padding-block:clamp(90px,16vh,150px);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55;
  animation:drift 22s var(--ease) infinite alternate;
}
.hero-bg span:nth-child(1){ width:62vw; height:62vw; top:-20%; left:-14%;
  background:radial-gradient(circle,rgba(46,122,92,.42),transparent 68%); }
.hero-bg span:nth-child(2){ width:54vw; height:54vw; bottom:-24%; right:-16%;
  background:radial-gradient(circle,rgba(199,154,69,.40),transparent 68%); animation-delay:-8s; }
.hero-bg span:nth-child(3){ width:42vw; height:42vw; top:36%; left:44%;
  background:radial-gradient(circle,rgba(30,91,68,.22),transparent 70%); animation-delay:-14s; }
@keyframes drift{ to{ transform:translate3d(6%,-8%,0) scale(1.18); } }

.hero .wrap{ position:relative; z-index:2; }
.hero-mark{
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(26px,6vh,48px);
}
.hero-mark b{ color:var(--green); font-weight:700; }

.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(44px,11.5vw,124px); line-height:.98;
  letter-spacing:-.035em; margin-bottom:26px;
}
.hero h1 .gold{
  background:linear-gradient(96deg,var(--green-lite),var(--green) 45%,#0E3D2C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:var(--fg-soft); max-width:44ch; font-size:clamp(16px,2.3vw,20px); }

.hero-id{
  display:flex; align-items:center; gap:clamp(16px,3.2vw,26px);
  margin-top:clamp(30px,5vh,44px);
}
.hero-photo{ position:relative; flex:none; width:clamp(96px,15vw,132px); aspect-ratio:1; }
.hero-photo::before{                     /* the same offset frame as the contact portrait */
  content:""; position:absolute; inset:0; translate:8px 8px;
  border-radius:16px; border:1px solid var(--brass); opacity:.5;
}
.hero-photo img{
  position:relative; z-index:1; display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%; border-radius:16px;
  border:1px solid var(--line); box-shadow:0 10px 28px rgba(20,32,27,.15);
}
.hero-id-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.hero-id-text .nm{ font-size:clamp(17px,2.7vw,21px); font-weight:600; color:var(--fg); line-height:1.3; }
.hero-id-text .nm span{ color:var(--muted); font-weight:400; }
.hero-id-text .role{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.hero-id-text .tel{
  margin-top:5px; font-size:clamp(18px,3vw,23px); font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  transition:color .35s;
}
.hero-id-text .tel:hover{ color:var(--green); }
[lang="hi"] .hero-id-text .role,[lang="pa"] .hero-id-text .role{ letter-spacing:.06em; }

.scrollcue{
  position:absolute; bottom:26px; left:50%; translate:-50% 0; z-index:2;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scrollcue i{ width:1px; height:38px; background:linear-gradient(var(--green),transparent); }

/* staggered entrance */
.rise{ opacity:0; transform:translateY(26px); animation:rise .95s var(--ease) forwards; }
.rise:nth-child(1){ animation-delay:.05s } .rise:nth-child(2){ animation-delay:.16s }
.rise:nth-child(3){ animation-delay:.28s } .rise:nth-child(4){ animation-delay:.40s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============ scroll reveals ============ */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal].in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.1s } [data-delay="2"]{ transition-delay:.2s }
[data-delay="3"]{ transition-delay:.3s } [data-delay="4"]{ transition-delay:.4s }
[data-delay="5"]{ transition-delay:.5s }

/* ============ marquee ============ */
.marquee{
  border-block:1px solid var(--line); padding-block:22px; overflow:hidden;
  background:var(--paper-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee ul{ display:flex; gap:52px; list-style:none; width:max-content; animation:slide 34s linear infinite; }
.marquee li{
  font-family:var(--display); font-size:clamp(20px,3.4vw,34px);
  color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:52px;
}
.marquee li::after{ content:"◆"; font-size:9px; color:var(--brass); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============ stats ============ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.stat{ background:var(--paper-2); padding:clamp(26px,4vw,40px) 22px; }
.stat b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(38px,7vw,64px); line-height:1; letter-spacing:-.03em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.stat span{ display:block; margin-top:12px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }

/* ============ single headline stat ============ */
.stat-solo{
  display:flex; align-items:center; gap:clamp(18px,4vw,34px);
  margin-top:clamp(44px,7vw,72px); padding-top:30px; border-top:1px solid var(--line);
}
.stat-solo b{
  font-family:var(--display); font-weight:400; line-height:.86;
  font-size:clamp(58px,13vw,116px); letter-spacing:-.04em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.stat-solo span{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); max-width:14ch; line-height:1.45;
  border-left:1px solid var(--line); padding-left:clamp(18px,4vw,34px);
  align-self:stretch; display:flex; align-items:center;
}
[lang="hi"] .stat-solo span{ letter-spacing:.06em; }

/* ============ service cards ============ */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; margin-top:52px; }
.card{
  position:relative; padding:32px 28px 36px; border:1px solid var(--line);
  border-radius:14px; background:var(--paper-2); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(420px circle at 50% 0%,rgba(30,91,68,.09),transparent 70%);
}
.card:hover{ transform:translateY(-7px); border-color:rgba(30,91,68,.34);
  box-shadow:0 16px 36px rgba(20,32,27,.09); }
.card:hover::before{ opacity:1; }
.card i{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin-bottom:24px; border-radius:14px;
  background:linear-gradient(150deg,rgba(30,91,68,.11),rgba(199,154,69,.09));
  border:1px solid rgba(30,91,68,.16);
  transition:background .5s, border-color .5s, transform .5s var(--ease);
}
.card i svg{
  width:27px; height:27px; stroke:var(--green); stroke-width:1.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .5s;
}
.card:hover i{ transform:translateY(-2px) scale(1.05);
  background:linear-gradient(150deg,rgba(30,91,68,.2),rgba(199,154,69,.14));
  border-color:rgba(30,91,68,.3); }
.card h3{ margin-bottom:12px; }
.card p{ color:var(--muted); font-size:15.5px; position:relative; }

/* ============ process timeline ============ */
.steps{ position:relative; margin-top:56px; padding-left:34px; }
.steps::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--green),rgba(30,91,68,.15));
  transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--ease);
}
.steps.in::before{ transform:scaleY(1); }
.step{ position:relative; padding-bottom:38px; }
.step:last-child{ padding-bottom:0; }
.step::before{
  content:""; position:absolute; left:-34px; top:9px; width:11px; height:11px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--green);
}
.step h3{ margin-bottom:8px; }
.step p{ color:var(--muted); font-size:15.5px; max-width:52ch; }

/* ============ quote band ============ */
.band{ background:var(--paper-3); border-block:1px solid var(--line); }
.band blockquote{
  font-family:var(--display); font-size:clamp(24px,4.6vw,44px);
  line-height:1.28; letter-spacing:-.02em; max-width:22ch; text-wrap:balance;
}
.band blockquote span{ color:var(--green); }

/* ============ contact ============ */
.contact-grid{ display:grid; gap:clamp(34px,5vw,52px); grid-template-columns:1fr; margin-top:44px; }
@media(min-width:760px){ .contact-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
@media(min-width:1000px){ .contact-grid{ grid-template-columns:auto 1fr .8fr; } }
.big-tel{
  font-family:var(--display); font-size:clamp(30px,6.4vw,58px);
  letter-spacing:-.02em; line-height:1.05; display:inline-block;
  border-bottom:1px solid rgba(30,91,68,.35); padding-bottom:8px;
  font-variant-numeric:tabular-nums;
  transition:border-color .4s, color .4s;
}
.big-tel:hover{ color:var(--green); border-color:var(--green); }
.detail{ padding-block:16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; }
.detail dt{ color:var(--muted); font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.detail dd{ text-align:right; font-size:15.5px; }

/* ============ portrait ============ */
.portrait-block{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.portrait{
  position:relative; width:min(300px,68vw); aspect-ratio:1; flex:none;
}
/* offset second frame, sitting behind and down-right */
.portrait::before{
  content:""; position:absolute; inset:0; z-index:0;
  translate:15px 15px; border-radius:20px;
  border:1px solid var(--brass); opacity:.55;
}
.portrait img{
  position:relative; z-index:1; display:block;
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(150deg,var(--paper-3),var(--paper-2));
  box-shadow:0 18px 44px rgba(20,32,27,.16);
}
.portrait-cap{ font-size:14px; color:var(--muted); line-height:1.5; }
.portrait-cap b{ display:block; color:var(--fg); font-weight:600; font-size:16px; }

/* ============ footer ============ */
footer{ background:var(--paper-3); border-top:1px solid var(--line); padding-block:56px 40px; font-size:14px; }
.fgrid{ display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
footer h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--green);
  font-weight:700; margin-bottom:16px; }
footer ul{ list-style:none; display:grid; gap:9px; }
footer a{ color:var(--muted); transition:color .3s; }
footer a:hover{ color:var(--fg); }
.colophon{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }

/* ============ STICKY DOCK ============ */
.dock{
  position:fixed; z-index:50; left:50%; bottom:18px; translate:-50% 0;
  display:flex; gap:10px; padding:7px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.8); backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 8px 30px rgba(20,32,27,.16);
  transition:gap .6s var(--ease), padding .6s var(--ease), bottom .6s var(--ease),
             width .6s var(--ease), border-radius .6s var(--ease);
  width:auto; max-width:calc(100vw - 28px);
}
.dock a{
  display:flex; align-items:center; gap:0; justify-content:center;
  height:46px; padding-inline:15px; border-radius:999px;
  font-size:14px; font-weight:600; white-space:nowrap;
  transition:padding .6s var(--ease), gap .6s var(--ease), height .6s var(--ease), transform .25s;
}
.dock a:active{ transform:scale(.95); }
.dock .call{ background:linear-gradient(135deg,var(--green-lite),var(--green)); color:#fff; }
.dock .wa{ background:#1FA855; color:#fff; }
.dock .maps{ background:var(--fg); color:#fff; }
.dock svg{ width:19px; height:19px; flex:none; }
.dock .label{
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .6s var(--ease), opacity .4s var(--ease), margin .6s var(--ease);
}
.dock.big{ bottom:14px; width:calc(100vw - 24px); padding:9px; gap:9px; border-radius:22px; }
.dock.big a{ flex:1 1 0; min-width:0; height:58px; gap:9px; padding-inline:12px; font-size:13.5px; }
.dock.big .label{ max-width:200px; opacity:1; }
/* on narrow phones three labels won't fit — the map button goes icon-only */
@media(max-width:410px){
  .dock.big .maps{ flex:0 0 54px; padding-inline:0; }
  .dock.big .maps .label{ max-width:0; opacity:0; }
}
@media(min-width:900px){ .dock.big{ width:min(640px,calc(100vw - 40px)); } }

/* ============ article pages (SEO) ============ */
.article{ padding-top:clamp(96px,14vh,150px); }
.article .wrap{ max-width:760px; }
.article h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px,6.4vw,58px); line-height:1.08; letter-spacing:-.03em;
  margin-bottom:22px; text-wrap:balance;
}
.article h2{ font-size:clamp(23px,3.6vw,32px); margin-top:52px; }
.article h3{ margin-top:34px; margin-bottom:8px; color:var(--green); }
.article p{ color:var(--fg-soft); margin-top:16px; }
.article ul,.article ol{ color:var(--fg-soft); margin-top:16px; padding-left:22px; display:grid; gap:9px; }
.article .meta{ color:var(--muted); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:26px; }
.backlink{ display:inline-block; margin-top:56px; color:var(--green); font-size:14px; font-weight:600; }
.cta-inline{
  margin-top:52px; padding:30px 28px; border:1px solid rgba(30,91,68,.24);
  border-radius:14px; background:linear-gradient(165deg,rgba(30,91,68,.07),transparent);
}
.cta-inline p{ margin-top:8px; }
.cta-inline a{ color:var(--green); font-weight:700; }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}