/* AYODHYA LIVING — NALA / Soft light, layered glass, relaxed editorial energy */
:root {
  --deep: #153f3a;
  --deeper: #092f2e;
  --green: #44776e;
  --gold: #e4c4a3;
  --cream: #eaf2ee;
  --ivory: #f7fcf9;
  --ink: #153c38;
  --muted: #617d75;
  --line: rgba(255, 255, 255, .7);
  --glass: rgba(255,255,255,.59);
  --glass-border: 1px solid rgba(255,255,255,.8);
  --glass-shadow: 0 20px 65px rgba(30, 82, 70, .10), inset 0 1px 1px rgba(255,255,255,.92);
  --soft-ease: cubic-bezier(.2,.8,.2,1);
}
html {scroll-padding-top: 110px}
body {
  overflow-x: hidden;
  background: radial-gradient(ellipse 55% 24% at 9% 7%,rgba(204,237,220,.86),transparent 80%),
    radial-gradient(ellipse 55% 22% at 96% 32%,rgba(212,223,245,.68),transparent 82%),
    radial-gradient(ellipse 48% 19% at 12% 72%,rgba(252,226,213,.57),transparent 78%),
    #eaf2ee;
  color: var(--ink);
  font-family: 'DM Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
::selection {background:#beddd2;color:#113f36}
:focus-visible {outline:3px solid #5eada1;outline-offset:3px}
h1,h2,h3 {letter-spacing:-.035em}
h2 {font-size:clamp(2.65rem,5.2vw,5rem)}
h2 em {color:#679a8b}
.container {max-width:1230px}
.section {padding:104px 0}
.eyebrow {width:fit-content;gap:10px;margin-bottom:25px;padding:8px 12px;
  border:1px solid rgba(94,148,128,.2);border-radius:99px;
  color:#558173;background:rgba(255,255,255,.4);letter-spacing:.16em;font-size:10px}
.eyebrow>span {width:17px}
.eyebrow.light {color:#f3eddd;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.section-intro p,.two-column-heading>p {font-size:15px;line-height:1.9}
.button {border-radius:999px;padding:15px 25px;letter-spacing:.035em;text-transform:none;font-size:13px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6);transition:transform .3s var(--soft-ease),box-shadow .3s var(--soft-ease),background .3s}
.button:hover {transform:translateY(-3px);box-shadow:0 9px 22px rgba(14,53,43,.16)}
.button-gold {color:#123c33;background:linear-gradient(130deg,#fff8e9,#e5c9a4)}
.button-gold:hover {background:linear-gradient(130deg,#fffaf1,#efdbbd)}
.text-link {font-size:13px}

/* Frosted navigation floats above the page like an iOS toolbar. */
.site-header {position:sticky;top:12px;z-index:101;background:transparent;border:0;pointer-events:none}
.nav-shell {min-height:74px;max-width:1320px;margin:0 24px;
  padding:0 26px;background:rgba(250,255,253,.70);border:var(--glass-border);border-radius:24px;
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 14px 44px rgba(21,62,55,.11),inset 0 1px 2px #fff;pointer-events:auto}
@media(min-width:1369px){.nav-shell{margin-left:auto;margin-right:auto}}
.wordmark {display:flex;align-items:center;gap:10px;font-size:17px;color:#17443d;letter-spacing:.10em;padding-left:0}
.wordmark-symbol {display:block;width:76px;height:40px;object-fit:contain;flex:0 0 auto;filter:brightness(0);opacity:.78}
.wordmark .wordmark-copy {display:block;color:#17443d;font-size:17px;letter-spacing:.10em;line-height:1.1;margin:0}
.wordmark .wordmark-tagline {display:block;color:#829e91;font-size:8px;letter-spacing:.24em;margin-top:6px}
.primary-nav {gap:16px}
.primary-nav>a {color:#42675d;font-size:11px;transition:color .2s}
.primary-nav>a:hover {color:#0d4439}
.primary-nav .nav-cta {margin-left:4px;background:linear-gradient(125deg,#1f6962,#114b44);color:#fff;
  border:1px solid rgba(255,255,255,.28);padding:12px 18px;border-radius:99px;box-shadow:0 6px 14px rgba(27,78,63,.14)}
.primary-nav .nav-cta:hover {color:#fff;background:#1e5e56}

/* Cinematic NALA interior + floating translucent hero panel. */
.hero {position:relative;isolation:isolate;display:flex;align-items:center;min-height:690px;
  margin:24px auto 0;width:calc(100% - 48px);max-width:1440px;
  overflow:hidden;border-radius:38px;background:#335d52;box-shadow:0 29px 70px rgba(28,75,63,.18)}
.hero-photo {position:absolute;inset:0;height:100%;width:100%;min-height:0;z-index:-1;overflow:hidden}
.hero-photo>img {width:100%;height:100%;object-fit:cover;object-position:center 55%;transform:scale(1.015)}
.hero-photo:after {inset:0;background:linear-gradient(90deg,rgba(11,43,38,.60) 0%,rgba(11,43,38,.22) 52%,rgba(13,42,38,.12) 100%),
  linear-gradient(0deg,rgba(11,39,33,.28),transparent 48%)}
.hero-left {position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  width:min(590px,calc(100% - 88px));min-height:495px;margin:48px 0 48px clamp(27px,6vw,91px);
  padding:45px 46px 31px;background:linear-gradient(130deg,rgba(21,58,52,.67),rgba(24,65,58,.39));
  border:1px solid rgba(255,255,255,.44);border-radius:31px;
  -webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 24px 50px rgba(7,36,29,.15);overflow:visible}
.hero-left:before {right:-55px;bottom:-100px;width:250px;height:250px;border-color:rgba(255,255,255,.17)}
.hero h1 {margin:16px 0 25px;font-size:clamp(3.3rem,5.7vw,6.2rem);line-height:1.02;letter-spacing:-.062em;white-space:normal}
.hero h1 em {color:#e6d8c0;white-space:nowrap}
.hero-lead {font-size:15px;max-width:445px;line-height:1.88;color:#eaf4ed}
.hero-actions {margin-top:19px;gap:30px}
.light-link {color:#f8f5e9}
.hero-proof {margin-top:30px;display:flex;align-items:center;gap:10px;font-size:11px;color:#f4f7ef;font-weight:600;line-height:1.6}
.hero-proof-icon {display:grid;place-items:center;width:27px;height:27px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);font-size:12px}
.hero-proof b {color:#d9c9b0;font-weight:400;padding:0 2px}
.hero-disclaimer {margin:17px 0 0;font-size:10px;color:#d1e5dc}
.photo-label {left:auto;right:30px;bottom:30px;padding:15px 22px;background:rgba(245,255,251,.22);
  border:1px solid rgba(255,255,255,.44);border-radius:19px;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px #ffffff88}
.photo-label span {letter-spacing:.18em}
.photo-label strong {font-size:30px}
.vertical-tag {right:24px;top:22px;writing-mode:initial;letter-spacing:.13em;padding:9px 13px;
  color:#183e38;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.8);border-radius:20px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.feature-strip {position:relative;z-index:3;max-width:1140px;margin:-28px auto 0;padding:9px;
  grid-template-columns:repeat(3,minmax(0,1fr));background:rgba(252,255,252,.7);
  border:1px solid #fff;border-radius:24px;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--glass-shadow)}
.feature-strip>div {padding:20px 24px;border-right:1px solid rgba(113,151,133,.16)}
.feature-strip strong {font-size:13px}
.feature-strip small {font-size:10px;color:#77958a}
.feature-symbol {color:#67a391}

/* The softer half: editorial photos framed as glass objects. */
.about {background:transparent}
.about-visual {height:480px}
.about-visual img {border-radius:31px;box-shadow:0 27px 58px rgba(23,68,57,.16)}
.number-stamp {left:-17px;bottom:-18px;border:1px solid #fff;border-radius:21px;
  background:rgba(248,253,249,.73);color:#1a5b4f;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow)}
.about-text .section-lead {color:#365e55}
.about-text>p:not(.section-lead) {color:#648177}
.unit-section {margin:0 24px;border:var(--glass-border);border-radius:38px;
  background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(234,245,240,.49));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--glass-shadow)}
.unit-showcase {gap:21px}
.unit-showcase figure {border-radius:25px;box-shadow:0 18px 42px rgba(29,79,65,.13)}
.unit-showcase img {height:425px}
.unit-showcase figcaption {padding:69px 24px 22px;background:linear-gradient(transparent,rgba(5,37,32,.82))}
.unit-showcase figcaption strong {font-size:27px}

/* A deeper tonal moment keeps the page from feeling flat. */
.promo-section {position:relative;margin:24px;overflow:hidden;border:1px solid rgba(255,255,255,.17);border-radius:38px;
  background:radial-gradient(ellipse 50% 65% at 94% 1%,rgba(103,168,148,.44),transparent 80%),
    radial-gradient(ellipse 62% 80% at -15% 107%,rgba(40,138,117,.42),transparent 80%),
    linear-gradient(135deg,#0b3735,#164c46 65%,#26574e);color:#fff;
  box-shadow:0 22px 62px rgba(20,72,61,.17)}
.promo-section:before {content:"";position:absolute;top:-190px;right:-90px;width:400px;height:400px;
  border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:0 0 0 80px rgba(255,255,255,.026),0 0 0 165px rgba(255,255,255,.016);pointer-events:none}
.promo-heading p {color:#d6e5df}
.promo-heading h2 em {color:#e7cab4}
.promo-tile {min-height:205px;padding:25px;background:rgba(255,255,255,.095);
  border:1px solid rgba(255,255,255,.22);border-radius:24px;
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16);transition:transform .33s var(--soft-ease),background .33s}
.promo-tile:hover {transform:translateY(-4px);background:rgba(255,255,255,.15)}
.promo-tile.accent {background:rgba(221,246,228,.18)}
.promo-tile h3 {font-size:21px}
.promo-tile p {color:#dbece3;font-size:11px}
.promo-icon {color:#e6d4bb}
.promo-tile.featured {background:linear-gradient(125deg,rgba(255,248,235,.92),rgba(229,221,207,.82));color:#1b5247;
  border:1px solid rgba(255,255,255,.82);box-shadow:inset 0 1px #fff,0 17px 34px rgba(5,32,24,.11)}
.promo-tile.featured p {color:#4a7667}
.promo-price {font-size:clamp(3.2rem,5.4vw,5.9rem)}
.promo-footnote {color:#c5ddd3}

.calculator-section {background:transparent}
.calculator-grid {overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:35px;
  box-shadow:0 26px 70px rgba(22,78,63,.15),inset 0 1px #fff}
.calc-form-panel {background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.61));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.calc-panel-head span {color:#72a292}
.input-shell,.select-shell {background:rgba(255,255,255,.55);border:1px solid rgba(111,159,142,.27);border-radius:16px;min-height:56px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9),0 2px 9px rgba(30,75,60,.04)}
.input-shell:focus-within,.select-shell:focus-within {outline:2px solid rgba(100,170,152,.62)}
.input-shell input {color:#194b42}
.button-outline {border:1px solid rgba(84,143,122,.32);background:rgba(255,255,255,.5);color:#245c51}
.calc-results {background:radial-gradient(ellipse at 95% 2%,rgba(100,174,147,.3),transparent 55%),
  linear-gradient(145deg,rgba(15,70,64,.96),rgba(14,54,52,.96));color:#fff}
.result-eyebrow {color:#e9d5b7}
.result-number {font-size:clamp(2.7rem,4.4vw,4.8rem)}
.result-line {border-color:rgba(210,238,224,.17)}
.button-copy {background:linear-gradient(135deg,#e7f3e9,#b9ddcb);color:#1d5347}
.calc-fineprint {color:#b7d2c6}

.gallery-section {background:transparent}
.photo-grid {gap:21px}
.photo-grid figure {border-radius:27px;background:rgba(255,255,255,.7);padding:10px;
  border:1px solid #fff;box-shadow:var(--glass-shadow);overflow:hidden}
.photo-grid img {border-radius:19px;height:280px}
.photo-grid figcaption {padding:18px 15px 13px;font-size:25px}
.photo-grid figcaption span {color:#6c9485}

.site-footer {position:relative;overflow:hidden;background:radial-gradient(ellipse at 5% 4%,rgba(76,134,113,.3),transparent 52%),
  linear-gradient(145deg,#113c38,#082b29);border-radius:38px 38px 0 0;padding-top:74px}
.footer-logo {font-size:25px;letter-spacing:.1em}
.footer-logo span {color:#c9e2d5}
.footer-kicker {color:#bed9cb}
.whatsapp-link {border-radius:999px;background:rgba(255,255,255,.07);border-color:rgba(245,255,249,.31);padding:11px 16px;color:#ebf8ee!important}
.whatsapp-link:hover {background:rgba(255,255,255,.18);color:#fff!important}

/* Scroll-responsive WhatsApp glass capsule; the label folds into the icon. */
.floating-wa {position:fixed;z-index:220;right:clamp(16px,3vw,32px);
  bottom:calc(19px + env(safe-area-inset-bottom,0px));height:65px;
  display:inline-flex;align-items:center;gap:11px;padding:7px 19px 7px 7px;
  text-decoration:none;color:#194e47;border-radius:999px;border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(125deg,rgba(255,255,255,.88),rgba(230,246,238,.75));
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 16px 48px rgba(18,70,60,.22),inset 0 2px 2px rgba(255,255,255,.96),inset 0 -1px 2px rgba(105,143,127,.12);
  transition:padding .46s var(--soft-ease),gap .46s var(--soft-ease),transform .27s var(--soft-ease),box-shadow .27s;
  animation:wa-arrive .75s var(--soft-ease) both}
.floating-wa {pointer-events:auto;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;z-index:9999}
.floating-wa .wa-icon,.floating-wa .wa-icon *,
.floating-wa .wa-label,.floating-wa .wa-label * {pointer-events:none}
.floating-wa:hover {transform:translateY(-3px);box-shadow:0 20px 53px rgba(18,70,60,.25),inset 0 1px #fff}
.wa-icon {width:49px;height:49px;flex:0 0 49px;display:grid;place-items:center;
  border-radius:50%;color:#fafffc;
  background:linear-gradient(140deg,#7fbea7,#357e72 52%,#1c665d);
  border:1px solid rgba(255,255,255,.66);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.45),0 5px 12px rgba(23,98,82,.22)}
.wa-icon svg {width:28px;height:28px;display:block}
.wa-label {display:flex;align-items:center;gap:9px;max-width:180px;overflow:hidden;opacity:1;white-space:nowrap;
  color:#20564c;font-size:13px;font-weight:700;letter-spacing:-.01em;
  transform:translateX(0) scaleX(1);transform-origin:right center;
  transition:max-width .54s var(--soft-ease),opacity .26s ease,transform .54s var(--soft-ease)}
.wa-label>span {color:#6da995;font-size:17px}
.floating-wa.is-collapsed {gap:0;padding-right:7px}
.floating-wa.is-collapsed .wa-label {max-width:0;opacity:0;transform:translateX(15px) scaleX(.4)}
.floating-wa.is-collapsed:hover {gap:11px;padding-right:19px}
.floating-wa.is-collapsed:hover .wa-label {max-width:180px;opacity:1;transform:translateX(0) scaleX(1)}
@keyframes wa-arrive {from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:1140px) {
  .primary-nav {gap:10px}
  .hero {min-height:635px}
  .hero-left {width:min(550px,calc(100% - 60px));margin-left:30px}
  .hero h1 {font-size:clamp(3.15rem,5.6vw,5.6rem)}
  .feature-strip {margin-left:45px;margin-right:45px}
}
@media(max-width:880px) {
  .site-header {top:9px}
  .nav-shell {min-height:70px;margin:0 14px;padding:0 20px;border-radius:22px}
  .nav-toggle {display:block;border:1px solid rgba(93,139,118,.23);border-radius:15px;background:rgba(255,255,255,.4);width:42px;height:42px}
  .nav-toggle span {margin:5px 0;background:#356d5e}
  .primary-nav {position:absolute;top:calc(100% + 8px);left:15px;right:15px;overflow:hidden;
    border-radius:24px;background:rgba(245,255,250,.94);border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 25px 55px rgba(21,61,54,.16)}
  .primary-nav>a {font-size:12px}
  .hero {margin-top:19px;width:calc(100% - 28px);min-height:685px;display:flex;align-items:flex-end;border-radius:30px}
  .hero-left {margin:25px;width:min(585px,calc(100% - 50px));min-height:auto;padding:36px 33px}
  .hero h1 {font-size:clamp(3.6rem,8vw,5.5rem)}
  .hero-photo {min-height:0;height:100%}
  .hero-photo:after {background:linear-gradient(0deg,rgba(13,48,39,.50),rgba(16,49,43,.1) 78%)}
  .photo-label {top:78px;right:22px;bottom:auto}
  .vertical-tag {top:19px;right:22px}
  .feature-strip {margin:-17px 34px 0}
  .about-visual {height:465px}
  .unit-section,.promo-section {margin-left:13px;margin-right:13px;border-radius:29px}
  .promo-tile {min-height:195px}
  .calc-results {padding:42px}
}
@media(max-width:600px) {
  html {scroll-padding-top:95px}
  .container {padding:0 22px}
  .section {padding:76px 0}
  .site-header {top:7px}
  .nav-shell {min-height:62px;margin:0 10px;padding:0 14px;border-radius:20px}
  .wordmark {font-size:15px;gap:8px;padding-left:0;letter-spacing:.08em}
  .wordmark-symbol {width:66px;height:34px}
  .wordmark .wordmark-copy {font-size:15px;letter-spacing:.08em}
  .wordmark .wordmark-tagline {font-size:7px;margin-top:5px}
  .primary-nav {top:calc(100% + 7px);left:11px;right:11px}
  .hero {width:calc(100% - 18px);margin-top:12px;min-height:675px;border-radius:26px;align-items:flex-end}
  .hero-photo>img {object-position:54% center}
  .hero-left {margin:13px;width:calc(100% - 26px);min-height:auto;padding:28px 23px 24px;border-radius:24px;
    background:linear-gradient(145deg,rgba(13,48,42,.77),rgba(15,52,45,.55));
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  .hero .eyebrow {font-size:9px;padding:7px 9px;margin-bottom:13px;letter-spacing:.08em}
  .hero h1 {font-size:clamp(2.95rem,11.5vw,4.65rem);margin:12px 0 16px;line-height:1.04}
  .hero h1 em {white-space:normal}
  .hero-lead {font-size:13px;line-height:1.7}
  .hero-actions {margin-top:12px;gap:20px}
  .hero-actions .button {padding:12px 17px;font-size:12px}
  .hero-proof {font-size:10px;margin-top:22px}
  .hero-disclaimer {font-size:9px;margin-top:12px}
  .vertical-tag {right:14px;top:14px;font-size:8px;padding:7px 9px}
  .photo-label {top:60px;right:14px;padding:10px 13px;border-radius:15px}
  .photo-label span {font-size:8px;margin-bottom:2px}
  .photo-label strong {font-size:21px}
  .feature-strip {display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;
    margin:-15px 16px 0;padding:6px;border-radius:20px;scrollbar-width:none}
  .feature-strip::-webkit-scrollbar {display:none}
  .feature-strip>div {min-width:188px;flex:1 0 188px;scroll-snap-align:start;padding:13px 16px;border-bottom:0;border-right:1px solid rgba(113,151,133,.17)}
  .feature-strip>div:last-child {border-right:0}
  .feature-strip strong {font-size:12px}
  .feature-strip small {font-size:9px}
  h2 {font-size:clamp(2.55rem,10.3vw,3.6rem)}
  .about-visual {height:350px}
  .about-visual img {border-radius:24px}
  .number-stamp {border-radius:16px}
  .unit-section,.promo-section {margin:10px 9px;border-radius:27px}
  .unit-showcase img {height:310px}
  .unit-showcase figure {border-radius:18px}
  .promo-grid {gap:9px}
  .promo-tile {min-height:186px;padding:17px;border-radius:18px}
  .promo-tile h3 {font-size:18px}
  .promo-tile.featured {min-height:203px}
  .promo-price {font-size:clamp(3.1rem,13vw,4rem)}
  .calculator-grid {border-radius:25px}
  .calc-form-panel {padding:28px 21px}
  .calc-results {padding:32px 21px}
  .result-number {font-size:clamp(2.27rem,9vw,3.7rem)}
  .input-shell,.select-shell {border-radius:13px}
  .photo-grid figure {border-radius:20px}
  .photo-grid img {border-radius:14px;height:265px}
  .site-footer {border-radius:28px 28px 0 0;padding-top:62px}
  /* Keep the tap target above Safari and embedded-browser bottom controls. */
  .floating-wa {right:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));height:60px;gap:9px;padding:6px 15px 6px 6px}
  .wa-icon {width:46px;height:46px;flex-basis:46px}
  .wa-icon svg {width:27px;height:27px}
  .wa-label {font-size:12px;max-width:170px}
  .floating-wa.is-collapsed {padding-right:6px}
  .floating-wa.is-collapsed:hover {padding-right:15px;gap:9px}
}
@media(prefers-reduced-motion:reduce) {
  .floating-wa {animation:none}
  .floating-wa,.wa-label {transition:none}
  .promo-tile:hover,.button:hover,.floating-wa:hover {transform:none}
}