/* ==========================================================================
   RG Infra — rginfrahomes.in
   One stylesheet. No build step, no framework.

   The idea: an architect's drawing sheet in warm ivory. Ink lines on paper,
   a faint site-plan grid, hairline rules instead of shadows, a title block in
   the corner of every sheet, and an elevation that draws itself on load.
   ========================================================================== */

:root{
  /* Paper and ink */
  --paper:      #F5F0E6;
  --paper-2:    #EDE6D8;
  --ink:        #17261F;   /* green-black */
  --ink-soft:   #3C4A43;
  --line:       #CBC4B4;

  /* Brass. --brass draws lines and strokes; --brass-deep is the text-safe
     weight (4.5:1 on paper); --brass-light is the one that reads on green. */
  --brass:      #B0822B;
  --brass-deep: #8A6520;
  --brass-light:#D8A94A;

  --green:      #163B2E;   /* the CTA band and the footer */
  --wa:         #25D366;   /* WhatsApp, and only WhatsApp */

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
           "Segoe UI", "Helvetica Neue", sans-serif;
  --deva:  "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Nirmala UI", serif;

  --wrap: 1140px;
  --gut: clamp(20px, 5vw, 48px);
  --rule: 1px solid var(--line);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(16px, 0.95rem + 0.2vw, 17.5px);
  line-height:1.65;
  color:var(--ink);
  background-color:var(--paper);
  /* the site-plan grid */
  background-image:
    linear-gradient(to right,  rgba(23,38,31,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,38,31,.05) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; height:auto }

/* -------------------------------------------------------------- typography */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:"opsz" 40;
  letter-spacing:-0.012em;
  line-height:1.12;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 1.55rem + 3.3vw, 4.05rem); line-height:1.03 }
h2{ font-size:clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem) }
h3{ font-size:clamp(1.18rem, 1.02rem + .6vw, 1.4rem); letter-spacing:-0.005em }
h4{ font-size:1rem; font-family:var(--sans); font-weight:600;
    letter-spacing:.11em; text-transform:uppercase; font-size:.72rem }

em, .it{ font-style:italic; font-variation-settings:"opsz" 40, "SOFT" 40 }

p{ margin:0 0 1.15em }
p.lede{
  font-size:clamp(1.06rem, 1rem + .45vw, 1.25rem);
  color:var(--ink-soft); max-width:60ch;
}
.muted{ color:var(--ink-soft) }
.tight{ max-width:62ch }

a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em }
a:hover{ text-decoration-color:var(--brass) }

.eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-deep); margin:0 0 1.1em;
}
.deva{ font-family:var(--deva); letter-spacing:0; text-transform:none;
       font-size:.95rem; font-weight:400 }

/* an underline that draws itself in brass on hover */
.ulink{ position:relative; text-decoration:none; display:inline-block }
.ulink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.ulink:hover::after, .ulink:focus-visible::after{ transform:scaleX(1) }

/* ------------------------------------------------------------------ layout */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:clamp(44px, 7vw, 84px) }
.section + .section, .hero + .section{ border-top:var(--rule) }
.section-narrow{ max-width:72ch }

.section-head{ display:grid; gap:.2rem 26px; margin-bottom:clamp(24px,3vw,38px) }
.snum{
  font-family:var(--serif); font-size:clamp(1.6rem,1.2rem+1.3vw,2.3rem);
  font-variation-settings:"opsz" 20; color:var(--brass-deep);
  line-height:1; margin:0 0 .35rem;
}
.section-head h2{ margin:0 }
.section-head .sub{ margin:.85rem 0 0; color:var(--ink-soft); max-width:58ch }
@media (min-width:900px){
  .section-head{ grid-template-columns:96px minmax(0,1fr) }
  .snum{ grid-row:1/span 3; text-align:right; margin:0; padding-top:.1em }
  .section-head h2, .section-head .sub{ grid-column:2 }
}

.rule{ border:0; border-top:var(--rule); margin:0 }

/* ------------------------------------------------------------------ header */

.site-header{ position:relative; z-index:20; background:rgba(245,240,230,.92);
              backdrop-filter:saturate(140%) blur(6px); border-bottom:var(--rule) }
/* wraps so the open menu drops onto its own full-width row below the brand */
.header-in{ display:flex; flex-wrap:wrap; align-items:center;
            justify-content:space-between; gap:16px; min-height:72px }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.mark{
  width:38px; height:38px; flex:0 0 38px; border:1.5px solid var(--ink);
  display:grid; place-items:center; font-family:var(--serif); font-weight:500;
  font-size:.95rem; letter-spacing:.01em; font-variation-settings:"opsz" 14;
  background:var(--paper);
}
.brand-name{ display:block; font-family:var(--serif); font-size:1.22rem;
             font-weight:500; line-height:1.05; font-variation-settings:"opsz" 24 }
.brand-sub{ display:block; font-size:.62rem; letter-spacing:.2em;
            text-transform:uppercase; color:var(--ink-soft); margin-top:3px }

.nav-toggle{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.nav-label{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 14px;
  border:1.5px solid var(--ink); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; cursor:pointer; background:var(--paper);
}
.nav-label .bars{ display:block; width:16px; height:8px; border-top:1.5px solid var(--ink);
                  border-bottom:1.5px solid var(--ink) }
.nav-toggle:focus-visible + .nav-label{ outline:2px solid var(--brass-deep); outline-offset:3px }

.nav{ display:none; flex:0 0 100%; order:3; padding-bottom:18px }
.nav-toggle:checked ~ .nav{ display:block }
.nav ul{ list-style:none; margin:0 0 14px; padding:0; border-top:var(--rule) }
.nav li{ border-bottom:var(--rule) }
.nav a{ display:flex; align-items:center; min-height:48px; text-decoration:none;
        font-size:.95rem; letter-spacing:.01em }
.nav a[aria-current="page"]{ color:var(--brass-deep) }

@media (min-width:860px){
  .nav-label{ display:none }
  .nav{ display:flex !important; align-items:center; gap:30px; flex:0 0 auto;
        order:0; padding:0 }
  .nav ul{ display:flex; gap:30px; margin:0; border:0 }
  .nav li{ border:0 }
  .nav a{ min-height:0; font-size:.82rem; letter-spacing:.06em; position:relative }
  /* the brass rule draws itself in under the link you are pointing at */
  .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
                 background:var(--brass); transform:scaleX(0); transform-origin:left center;
                 transition:transform .38s cubic-bezier(.2,.7,.3,1) }
  .nav a:hover::after, .nav a:focus-visible::after,
  .nav a[aria-current="page"]::after{ transform:scaleX(1) }
}

/* ----------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink); font-family:var(--sans);
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper) }
.btn-primary{ background:var(--ink); color:var(--paper) }
.btn-primary:hover{ background:var(--green); border-color:var(--green) }
.btn-wa:hover{ border-color:var(--wa); background:var(--wa); color:#08301A }
.btn .wa-glyph{ width:18px; height:18px; flex:0 0 18px; fill:currentColor }
.btn-ghost{ border-color:rgba(23,38,31,.30) }
.btn-ghost:hover{ border-color:var(--ink) }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }

.on-green .btn{ border-color:rgba(245,240,230,.6); color:var(--paper) }
.on-green .btn:hover{ background:var(--paper); color:var(--green); border-color:var(--paper) }
.on-green .btn-wa:hover{ background:var(--wa); color:#08301A; border-color:var(--wa) }

/* -------------------------------------------------------------------- hero */

.hero{ padding-block:clamp(40px,6vw,74px) clamp(30px,4vw,44px); position:relative }
.hero-grid{ display:grid; gap:clamp(30px,4vw,40px) }
.hero h1{ margin-bottom:.38em }
.hero .lede{ max-width:46ch }
@media (min-width:960px){
  .hero-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end;
              gap:clamp(36px,4vw,64px) }
  .hero-art{ margin-bottom:-56px; position:relative; z-index:2 } /* overlaps the rule below */
}

.hero-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px;
            font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
            color:var(--ink-soft) }
.hero-meta span{ display:inline-flex; align-items:center; gap:8px }
.hero-meta span::before{ content:""; width:14px; height:1px; background:var(--brass) }

/* ---------------------------------------------- the elevation that draws in */

.draw{ display:block; width:100%; height:auto; overflow:visible }
.draw path{
  fill:none; stroke:var(--ink); stroke-width:1.25;
  /* no vector-effect:non-scaling-stroke here: Chromium ignores pathLength when it is
     set, so the dasharray:100 draw-in stopped ~60% of the way along every stroke on
     desktop. The stroke scales a hair with the drawing instead, which is fine. */
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:draw 1.25s cubic-bezier(.32,.62,.28,1) forwards;
  animation-delay:var(--d,0s);
}
.draw .accent{ stroke:var(--brass) }
.draw .hair{ stroke:var(--line) }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.divider-art{ padding-block:clamp(26px,4vw,46px); border-top:var(--rule) }
.divider-art .draw{ max-width:820px; margin-inline:auto; opacity:.9 }

/* ------------------------------------------------------------------- cards */

.grid{ display:grid; gap:1px; background:var(--line); border:var(--rule) }
.grid > *{ background:var(--paper); padding:clamp(22px,3vw,30px) }
@media (min-width:720px){ .grid-2{ grid-template-columns:1fr 1fr } }
@media (min-width:860px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

.card h3{ margin-bottom:.45em }
.card p:last-child{ margin-bottom:0 }
.card .k{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
          color:var(--brass-deep); display:block; margin-bottom:12px }

/* ------------------------------------------------------------------- steps */

.steps{ list-style:none; margin:0; padding:0; border-top:var(--rule) }
.steps li{ display:grid; grid-template-columns:54px minmax(0,1fr); gap:4px 18px;
           padding:22px 0; border-bottom:var(--rule) }
.steps .n{ font-family:var(--serif); font-size:1.15rem; color:var(--brass-deep);
           font-variation-settings:"opsz" 14; grid-row:1/span 2; line-height:1.4 }
.steps h3{ margin:0; font-size:1.12rem }
.steps p{ margin:.3em 0 0; color:var(--ink-soft) }
@media (min-width:720px){
  .steps li{ grid-template-columns:64px minmax(0,20ch) minmax(0,1fr); align-items:baseline }
  .steps h3{ grid-column:2 } .steps p{ grid-column:3; margin-top:0 }
}

/* --------------------------------------------------------- definition list */

.dl{ margin:0; border-top:var(--rule) }
.dl > div{ display:grid; gap:2px 20px; padding:14px 0; border-bottom:var(--rule) }
.dl dt{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
        color:var(--ink-soft) }
.dl dd{ margin:0; font-size:1.02rem }
@media (min-width:600px){ .dl > div{ grid-template-columns:200px minmax(0,1fr); align-items:baseline } }

/* configurations / highlights */
.rows{ list-style:none; margin:0; padding:0; border-top:var(--rule) }
.rows li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
          padding:13px 0; border-bottom:var(--rule) }
.rows li strong{ font-weight:600 }
.rows li span{ color:var(--ink-soft); font-size:.95rem }
.ticks{ list-style:none; margin:0; padding:0 }
.ticks li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink-soft) }
.ticks li::before{ content:""; position:absolute; left:0; top:.72em; width:14px;
                   height:1px; background:var(--brass) }

/* ------------------------------------------------------------- green panel */

.band{ background:var(--green); color:var(--paper); border-top:0 }
.band .eyebrow{ color:var(--brass-light) }
.band h2{ color:var(--paper) }
.band p{ color:rgba(245,240,230,.84) }
.band a{ color:var(--paper) }
.band .rule, .band .dl, .band .dl > div{ border-color:rgba(245,240,230,.22) }
.band .dl dt{ color:rgba(245,240,230,.72) }
.band .dl dd{ color:var(--paper) }
.band-grid{ display:grid; gap:clamp(30px,4vw,54px) }
@media (min-width:900px){ .band-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr) } }

/* -------------------------------------------------------------------- form */

.field{ margin-bottom:18px }
.field label{ display:block; font-size:.68rem; letter-spacing:.18em;
              text-transform:uppercase; margin-bottom:8px; color:rgba(245,240,230,.78) }
.field input, .field select{
  width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:1rem;
  color:var(--paper); background:rgba(245,240,230,.06);
  border:1px solid rgba(245,240,230,.34); border-radius:0; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,rgba(245,240,230,.7) 50%),
                   linear-gradient(135deg,rgba(245,240,230,.7) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field select option{ color:var(--ink); background:var(--paper) }
.field input::placeholder{ color:rgba(245,240,230,.45) }
.field input:focus, .field select:focus{ outline:2px solid var(--brass-light); outline-offset:2px }
.form-note{ font-size:.82rem; color:rgba(245,240,230,.7); margin:14px 0 0 }

/* ------------------------------------------------------------- title block */
/* the corner block of a drawing sheet: RG INFRA · RANCHI · SHEET 01 · HOME  */

.titleblock{ padding-bottom:clamp(30px,4vw,50px) }
.tb{ border:var(--rule); display:grid; grid-template-columns:1fr 1fr;
     max-width:520px; margin-left:auto; background:var(--paper-2) }
.tb div{ padding:10px 14px; border-right:var(--rule); border-bottom:var(--rule) }
.tb div:nth-child(2n){ border-right:0 }
.tb div:nth-last-child(-n+2){ border-bottom:0 }
.tb dt{ font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
        color:var(--ink-soft); margin-bottom:2px }
.tb dd{ margin:0; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
        font-weight:600 }
@media (min-width:720px){ .tb{ grid-template-columns:repeat(4,1fr) }
  .tb div{ border-bottom:0 } .tb div:nth-child(2n){ border-right:var(--rule) }
  .tb div:last-child{ border-right:0 } }

/* ------------------------------------------------------------------ footer */

.site-footer{ background:var(--green); color:var(--paper);
              padding-block:clamp(44px,5vw,64px) 30px }
.site-footer a{ color:rgba(245,240,230,.88) }
.site-footer a:hover{ color:var(--paper) }
.footer-grid{ display:grid; gap:30px 26px }
@media (min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:960px){ .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr } }
.site-footer h4{ color:var(--brass-light); margin-bottom:14px }
.site-footer address{ font-style:normal; line-height:1.9;
                      color:rgba(245,240,230,.84); font-size:.95rem }
.footer-links{ list-style:none; margin:0; padding:0; line-height:2.1; font-size:.95rem }
.footer-links a{ text-decoration:none }
.footer-links a:hover{ text-decoration:underline; text-underline-offset:.22em }
.footer-deva{ font-family:var(--deva); color:var(--brass-light); font-size:1.05rem;
              margin:0 0 10px }
.legal-strip{ margin-top:38px; padding-top:22px; border-top:1px solid rgba(245,240,230,.2);
              font-size:.78rem; line-height:1.9; color:rgba(245,240,230,.7) }
.legal-strip strong{ color:var(--paper); font-weight:600 }

/* ------------------------------------------------------------------- legal */

.legal h2{ font-size:clamp(1.24rem,1.1rem+.6vw,1.5rem); margin:2.1em 0 .6em }
.legal h1 + .updated{ color:var(--ink-soft); font-size:.86rem; margin-bottom:2.4em }
.legal ul{ padding-left:1.15em; margin:0 0 1.15em }
.legal li{ margin-bottom:.5em; color:var(--ink-soft) }
.legal p{ color:var(--ink-soft) }
.legal p strong, .legal li strong{ color:var(--ink) }
.panel{ border:var(--rule); background:var(--paper-2); padding:clamp(20px,3vw,26px) }

/* ------------------------------------------------------------------- utils */

.map{ border:var(--rule); line-height:0; margin-top:26px }
.map iframe{ width:100%; height:min(58vw,420px); border:0; display:block }
.stack > * + *{ margin-top:clamp(30px,4vw,44px) }

.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--ink);
       color:var(--paper); padding:12px 18px; text-decoration:none }
.skip:focus{ left:12px; top:12px }

:focus-visible{ outline:2px solid var(--brass-deep); outline-offset:3px }
.band :focus-visible, .site-footer :focus-visible{ outline-color:var(--brass-light) }

/* one orchestrated reveal on load */
.reveal{ opacity:0; transform:translateY(16px);
         animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards;
         animation-delay:var(--d,0s) }
@keyframes rise{ to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important;
                          animation-delay:0ms !important; transition-duration:.001ms !important }
  .reveal{ opacity:1; transform:none }
  .draw path{ stroke-dashoffset:0 }
}