/* ============================================================
   ireoplots.cloud, Ireo Pridepark II, Sector 4 & 28 Sohna

   The palette, the ground pattern and the typographic habits here come
   from the developer's own e-brochure: cream #FFFDF3 paper, the
   four-petal lattice watermark, olive-green headings, the logo's greens
   and lime rule, and the brochure's flush-right statement copy.
   ============================================================ */

/* Satoshi by Indian Type Foundry, ITF Free Font License, self-hosted */
@font-face{
  font-family:"Satoshi";
  src:url("/static/fonts/Satoshi-Variable.woff2") format("woff2-variations"),
      url("/static/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;
}

:root{
  --cream:#FFFDF3;          /* brochure paper */
  --cream-2:#F5F4E2;        /* the watermark tone, also the alternate band */
  --olive:#2B4905;          /* brochure heading green */
  --green:#007941;          /* logo emerald */
  --green-d:#005121;        /* logo dark green */
  --leaf:#4BAE48;
  --lime:#BAD531;           /* logo lime rule */
  --ink:#1A1E15;
  --body:#2E3328;
  --mute:#5A5F52;
  --line:rgba(43,73,5,.16);
  --line-2:rgba(43,73,5,.3);

  --f:"Satoshi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shell:1200px;
  --gut:clamp(20px,5vw,56px);
  --bar:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--f);font-size:17px;line-height:1.72;font-weight:450;
  color:var(--body);background:var(--cream);-webkit-font-smoothing:antialiased;
  overflow-x:clip;overflow-wrap:break-word;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--olive);line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.shell{width:100%;max-width:calc(var(--shell) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(56px,7.5vw,116px);position:relative}

/* the brochure's ground: cream paper under the four-petal lattice */
.sec--paper{background:var(--cream)}
.sec--leaf{background:var(--cream) url("/media/brand/leaf-pattern.svg") 0 0/240px 240px repeat}
.sec--band{background:var(--cream-2)}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green);
}
.eyebrow::before{content:"";width:30px;height:3px;background:var(--lime)}
.h1{font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.04;letter-spacing:-.035em}
.h2{font-size:clamp(1.85rem,3.6vw,3rem);line-height:1.08}
.h3{font-size:clamp(1.2rem,1.9vw,1.55rem)}
/* the brochure sets the opening line light and the payoff bold */
.h1 .soft,.h2 .soft{display:block;font-weight:400;color:var(--ink)}
.hero .h1 .soft{color:rgba(255,253,243,.92)}
.lede{font-size:clamp(1.06rem,1.35vw,1.22rem);color:var(--body);max-width:62ch;line-height:1.66}
.prose p+p{margin-top:18px}
.prose b,.prose strong{color:var(--olive);font-weight:700}
.mt-s{margin-top:16px}.mt-m{margin-top:26px}.mt-l{margin-top:34px}

/* the brochure's signature: statement copy set flush right */
.to-right{text-align:right}
.to-right .eyebrow{flex-direction:row-reverse}
.to-right .eyebrow::before{display:none}
.to-right .eyebrow::after{content:"";width:30px;height:3px;background:var(--lime)}
.to-right .lede,.to-right .prose{margin-left:auto}
@media (max-width:860px){
  .to-right{text-align:left}
  .to-right .eyebrow{flex-direction:row}
  .to-right .eyebrow::before{content:"";width:30px;height:3px;background:var(--lime);display:block}
  .to-right .eyebrow::after{display:none}
  .to-right .lede,.to-right .prose{margin-left:0}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:13px 28px;border-radius:999px;
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  transition:background .25s,color .25s,border-color .25s,transform .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn--green{background:var(--green-d);color:#fff}
.btn--green:hover{background:var(--olive)}
.btn--lime{background:var(--lime);color:var(--olive)}
.btn--lime:hover{background:#CBE256}
.btn--line{border:1.5px solid var(--line-2);color:var(--olive)}
.btn--line:hover{border-color:var(--olive);background:rgba(43,73,5,.05)}
.btn--paper{background:var(--cream);color:var(--olive)}
.btn--paper:hover{background:#fff}
.btn--ghost{border:1.5px solid rgba(255,253,243,.5);color:var(--cream)}
.btn--ghost:hover{background:rgba(255,253,243,.14);border-color:var(--cream)}
.btn--wide{width:100%}
.btn--sm{min-height:44px;padding:10px 20px;font-size:.72rem}

/* ---------- header ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:70;transition:background .3s,box-shadow .3s}
.bar.is-solid,.bar.is-menu{background:rgba(255,253,243,.96);box-shadow:0 1px 0 var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bar__row{height:var(--bar);display:flex;align-items:center;gap:clamp(12px,2.5vw,32px)}
.mark{flex:none;display:block}
.mark img{width:clamp(146px,17vw,196px);height:auto}
/* over the photograph the logo needs its own card, exactly as on the brochure cover */
.bar:not(.is-solid):not(.is-menu) .mark{background:var(--cream);padding:8px 12px;border-radius:10px}
.bar__nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);margin-left:auto}
.bar__nav a{
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--olive);
  padding-block:8px;white-space:nowrap;
  background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 3px no-repeat;
  transition:background-size .3s var(--ease);
}
.bar__nav a:hover{background-size:100% 3px}
.bar__nav a.is-tel{display:none}
.bar:not(.is-solid):not(.is-menu) .bar__nav a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.bar__act{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.bar__tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;color:var(--olive);white-space:nowrap}
.bar:not(.is-solid):not(.is-menu) .bar__tel{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.bar__burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);
  flex-direction:column;justify-content:center;align-items:center;gap:5px}
.bar__burger span{display:block;width:17px;height:2px;background:var(--olive);border-radius:2px;transition:transform .25s}
.bar.is-menu .bar__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.bar.is-menu .bar__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.bar:not(.is-solid):not(.is-menu) .bar__burger{border-color:rgba(255,255,255,.6);background:rgba(0,0,0,.18)}
.bar:not(.is-solid):not(.is-menu) .bar__burger span{background:#fff}

@media (max-width:1060px){
  .bar__burger{display:flex}
  .bar__nav{
    position:fixed;inset:var(--bar) 0 auto;display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);padding:8px var(--gut) 26px;box-shadow:0 20px 40px -26px rgba(43,73,5,.5);
    max-height:calc(100dvh - var(--bar));overflow-y:auto;margin-left:0;
  }
  .bar__nav.is-open{display:flex}
  .bar__nav a{color:var(--olive)!important;text-shadow:none!important;padding:15px 2px;border-bottom:1px solid var(--line);
    font-size:.95rem;letter-spacing:.04em;background-image:none}
  .bar__nav a.is-tel{display:block;color:var(--green)!important}
}
/* below the burger breakpoint the bar is always a solid strip, never a
   floating logo card over the photograph */
@media (max-width:1060px){
  .bar{background:rgba(255,253,243,.97);box-shadow:0 1px 0 var(--line);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .bar:not(.is-solid):not(.is-menu) .mark{background:none;padding:0}
  .bar:not(.is-solid):not(.is-menu) .bar__tel{color:var(--olive);text-shadow:none}
  .bar:not(.is-solid):not(.is-menu) .bar__burger{border-color:var(--line-2);background:none}
  .bar:not(.is-solid):not(.is-menu) .bar__burger span{background:var(--olive)}
}
@media (max-width:620px){
  .bar__act .btn{display:none}
  :root{--bar:72px}
  .mark img{width:118px}

  /* on a phone the call is the primary action, so it is a filled, ringing
     button rather than a grey glyph someone has to go looking for */
  .bar__tel,
  .bar:not(.is-solid):not(.is-menu) .bar__tel{
    position:relative;min-height:44px;padding:0 15px;border:0;border-radius:999px;
    background:var(--green);color:#fff;text-shadow:none;
    box-shadow:0 7px 18px -7px rgba(0,121,65,.85);
  }
  .bar__tel::after{
    content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--green);
    animation:ring 2.2s var(--ease) infinite;pointer-events:none;
  }
  .bar__tel svg{width:18px;height:18px;transform-origin:center;animation:shake 3s ease-in-out infinite}
  .bar__tel:active{transform:scale(.96)}
}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
@keyframes shake{
  0%,62%,100%{transform:rotate(0)}
  66%{transform:rotate(-16deg)}70%{transform:rotate(14deg)}
  74%{transform:rotate(-11deg)}78%{transform:rotate(9deg)}82%{transform:rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .bar__tel::after,.bar__tel svg{animation:none}
}
@media (max-width:420px){
  .bar__tel,
  .bar:not(.is-solid):not(.is-menu) .bar__tel{width:44px;padding:0;justify-content:center;gap:0}
  .bar__tel span{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,92svh,860px);display:flex;align-items:flex-end;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
@media (max-width:700px){.hero__bg img{object-position:center 34%}}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,28,6,.40) 0%,rgba(10,28,6,.04) 30%,rgba(10,28,6,.10) 66%,rgba(10,28,6,.40) 100%)}
.hero__in{width:100%;padding-top:calc(var(--bar) + clamp(40px,8vh,90px));padding-bottom:clamp(34px,5vw,62px)}
.hero__card{
  background:var(--cream);border-radius:18px;max-width:min(600px,100%);
  padding:clamp(24px,2.8vw,40px) clamp(24px,2.8vw,42px) clamp(26px,3vw,40px);
  box-shadow:0 34px 76px -44px rgba(10,28,6,.75);
}
.hero__rera{
  display:inline-block;font-size:.63rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-d);background:rgba(0,121,65,.09);border:1px solid rgba(0,121,65,.28);
  padding:7px 13px;border-radius:999px;margin-bottom:20px;
}
/* the H1 now carries the searched phrase; the display line keeps the size */
.hero__name{font-size:clamp(1rem,1.35vw,1.16rem);font-weight:700;letter-spacing:-.005em;
  line-height:1.35;color:var(--green-d);margin-bottom:12px}
.hero__tag{font-size:clamp(2.2rem,5.2vw,3.9rem);line-height:1.04;letter-spacing:-.035em;
  font-weight:700;color:var(--olive);text-wrap:balance}
.hero__tag .soft{display:block;font-weight:400;color:var(--ink)}
.hero__sub{margin-top:18px;color:var(--body);font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:46ch}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
@media (max-width:560px){.hero__act{display:grid;grid-template-columns:1fr}}
@media (max-width:700px){
  .hero{min-height:clamp(600px,100svh,900px);align-items:flex-end}
  .hero__in{padding-top:calc(var(--bar) + 40px);padding-bottom:30px}
  .hero__card{background:none;box-shadow:none;padding:0;max-width:none;border-radius:0}
  .hero__bg::after{background:linear-gradient(180deg,rgba(10,28,6,.44) 0%,rgba(10,28,6,.06) 22%,rgba(10,28,6,.56) 56%,rgba(10,28,6,.94) 100%)}
  .hero__rera{margin-bottom:14px;font-size:.58rem;letter-spacing:.11em;padding:6px 12px;
    color:var(--cream);background:rgba(0,81,33,.74);border-color:rgba(186,213,49,.55)}
  .hero__name{color:var(--lime);margin-bottom:10px;font-size:1rem}
  .hero__tag{font-size:clamp(1.95rem,8.6vw,2.6rem);color:#fff}
  .hero__tag .soft{color:rgba(255,253,243,.93)}
  .hero__sub{margin-top:14px;font-size:1rem;line-height:1.58;color:rgba(255,253,243,.95)}
  .hero__act{margin-top:20px;gap:10px}
  .hero__act .btn{min-height:50px}
  .hero__act .btn--line{border-color:rgba(255,253,243,.55);color:var(--cream)}
  .hero__act .btn--line:hover{background:rgba(255,253,243,.14);border-color:var(--cream)}
}

/* ---------- the facts rail ---------- */
.facts{background:var(--green-d);color:rgba(255,253,243,.86)}
.facts__in{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.facts__i{padding:clamp(20px,2.4vw,30px) clamp(14px,1.8vw,26px);border-right:1px solid rgba(255,253,243,.16)}
.facts__i:last-child{border-right:0}
.facts__i dt{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.facts__i dd{margin:7px 0 0;font-size:clamp(.98rem,1.2vw,1.12rem);font-weight:700;color:#fff;line-height:1.32;letter-spacing:-.01em}
.facts__i dd small{display:block;font-size:.76rem;font-weight:400;color:rgba(255,253,243,.7);letter-spacing:0;margin-top:3px}
@media (max-width:860px){
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .facts__i{border-bottom:1px solid rgba(255,253,243,.16)}
  .facts__i:nth-child(even){border-right:0}
  .facts__i:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:440px){.facts__in{grid-template-columns:1fr}.facts__i{border-right:0!important}}

/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,74px);align-items:center}
.split--tall{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
.split__shot{position:relative;border-radius:16px;overflow:hidden;background:var(--cream-2)}
.split__shot img{width:100%;height:100%;object-fit:cover}
.split__shot--wide img{aspect-ratio:16/9}
.split__shot--tall img{aspect-ratio:3/4}
@media (max-width:860px){
  .split,.split--tall{grid-template-columns:1fr}
  .split__media{order:-1}
  .split__shot--tall img{aspect-ratio:4/3}
}

/* ---------- amenities, as the brochure groups them ---------- */
.am{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,52px) clamp(30px,6vw,86px)}
.am__g h3{font-size:1.02rem;color:var(--green);letter-spacing:0;margin-bottom:12px}
.am__g ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.am__g li{position:relative;padding-left:20px;color:var(--body);line-height:1.55;font-weight:450}
.am__g li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 2px rgba(0,121,65,.25)}
@media (max-width:640px){.am{grid-template-columns:1fr}}

/* ---------- site plan ---------- */
.plan{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:clamp(26px,4vw,52px);align-items:start}
.plan__shot{display:block;background:#fff;padding:clamp(10px,1.4vw,18px);border-radius:14px;cursor:zoom-in;
  box-shadow:0 1px 0 var(--line),0 26px 56px -34px rgba(43,73,5,.55)}
.plan__legend{list-style:none;margin:0;padding:0}
.plan__legend li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);line-height:1.5}
.plan__legend li:first-child{border-top:1px solid var(--line)}
.plan__legend b{flex:none;width:27px;height:27px;border-radius:50%;background:var(--cream-2);color:var(--green-d);
  display:grid;place-items:center;font-size:.72rem}
.plan__note{margin-top:18px;font-size:.88rem;color:var(--mute)}
@media (max-width:860px){.plan{grid-template-columns:1fr}}

/* ---------- reasons ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(16px,2.2vw,26px)}
.why__c{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,30px);
  position:relative;overflow:hidden}
.why__c::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--lime)}
.why__c span{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--green)}
.why__c h3{margin:10px 0 8px;font-size:1.1rem}
.why__c p{font-size:.96rem;line-height:1.62}

/* a section opened straight from a sitelink must clear the sticky bar */
#project, #plots, #amenities, #plan, #location, #faq, #enquire{scroll-margin-top:96px}

/* ---------- what is nearby ---------- */
.near{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(26px,4vw,56px);align-items:start}
.near h3{font-size:1rem;color:var(--green);letter-spacing:0;margin-bottom:12px}
.dist{margin:0}
.dist > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.dist > div:first-child{border-top:1px solid var(--line)}
.dist dt{color:var(--body);line-height:1.45}
.dist dd{margin:0;text-align:right;font-weight:700;color:var(--olive);white-space:nowrap}
.dist dd small{display:block;font-weight:400;font-size:.8rem;color:var(--mute);white-space:normal}
.near__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.6vw,32px)}
.near__c p{font-size:.97rem;line-height:1.6;color:var(--body)}
@media (max-width:900px){.near{grid-template-columns:1fr}}
.map__note{margin-top:12px;font-size:.82rem;color:var(--mute);text-align:center}

/* ---------- map ---------- */
.map{border-radius:16px;overflow:hidden;background:#fff;padding:clamp(10px,1.4vw,16px);
  box-shadow:0 1px 0 var(--line),0 26px 56px -34px rgba(43,73,5,.5)}

/* ---------- reel ---------- */
.reel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
.reel__nav{display:flex;gap:8px;flex:none}
.reel__nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--olive)}
.reel__nav button:hover{background:var(--olive);border-color:var(--olive);color:var(--cream)}
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,32%);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.reel::-webkit-scrollbar{display:none}
.reel figure{margin:0;scroll-snap-align:start}
.reel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.reel figcaption{margin-top:10px;font-size:.86rem;font-weight:700;color:var(--olive)}
@media (max-width:640px){.reel{grid-auto-columns:78%}}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:700;color:var(--olive);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq p{padding:0 0 22px;color:var(--body)}

/* ---------- form card ---------- */
.card{background:var(--cream);border-radius:16px;padding:clamp(22px,2.8vw,34px);
  box-shadow:0 1px 0 var(--line),0 30px 64px -40px rgba(43,73,5,.6)}
.card__note{font-size:.95rem;color:var(--mute);margin:8px 0 20px}
.field{display:block;margin-bottom:15px}
.field span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.field input,.field select{
  width:100%;min-height:52px;padding:13px 15px;font:500 1rem var(--f);color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,121,65,.14)}
.is-wrong{border-color:#B3261E!important;box-shadow:0 0 0 3px rgba(179,38,30,.12)!important}
.card__legal{margin-top:12px;font-size:.78rem;color:var(--mute);text-align:center}
.card__done{text-align:center;padding:8px 0 2px}
.card__done b{display:block;color:var(--olive);font-size:1.1rem;margin-bottom:8px}
.card__done p{font-size:.95rem;color:var(--body);margin-bottom:18px}
form.is-done .field,form.is-done>.btn,form.is-done .card__legal{display:none}

/* ---------- closing cta ---------- */
.close-cta{background:var(--green-d);color:rgba(255,253,243,.88);position:relative;overflow:hidden}
.close-cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;
  background:url("/media/brand/leaf-pattern.svg") 0 0/240px 240px repeat}
.close-cta .shell{position:relative}
.close-cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(28px,5vw,64px);align-items:center}
.close-cta h2{color:#fff}
.close-cta .eyebrow{color:var(--lime)}
.close-cta .eyebrow::before,.close-cta .eyebrow::after{background:var(--lime)}
.close-cta__tel{display:inline-block;margin-top:20px;font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:700;color:#fff;letter-spacing:-.02em}
@media (max-width:860px){.close-cta__grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{background:var(--olive);color:rgba(255,253,243,.76);padding-block:clamp(40px,5vw,64px) 28px;font-size:.92rem}
.foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,52px);padding-bottom:30px;border-bottom:1px solid rgba(255,253,243,.18)}
.foot__logo{width:190px;background:var(--cream);padding:10px 14px;border-radius:10px}
.foot h4{color:var(--lime);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.foot a:hover{color:#fff}
.foot__links{display:grid;gap:9px}
.foot__rera{margin-top:22px;font-size:.84rem;color:var(--lime)}
.foot__legal{margin-top:14px;font-size:.76rem;line-height:1.66;color:rgba(255,253,243,.58)}
@media (max-width:860px){.foot__top{grid-template-columns:1fr}}

/* ---------- floating whatsapp ---------- */
.wa{position:fixed;right:16px;bottom:16px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.wa svg{width:30px;height:30px;fill:#fff}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wa::after{animation:none}}

/* ---------- dialog ---------- */
.dialog{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(20,40,10,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dialog__card{position:relative;width:min(430px,100%);max-height:calc(100dvh - 32px);overflow-y:auto}
.dialog__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:var(--cream-2);color:var(--olive);font-size:1.2rem;line-height:1;display:grid;place-items:center}
.dialog__x:hover{background:var(--lime)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.is-seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}