/* Mukhappu Homes: concept build by Marketlube (fictional brand). */
:root {
  --laterite: #9E3B22;
  --laterite-deep: #6E2614;
  --teak: #5A3A22;
  --ink: #2A1C12;
  --lime: #F6F1E8;
  --sand: #E9DFCF;
  --line: #C9B79C;
  --green: #3F5B3A;
  --ink-soft: #5b4a3c;
  --head-h: 72px;
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Anek Malayalam", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.2rem, 1.35rem + 2.6vw, 3.55rem);
  --fs-h2: clamp(2rem, 1.25rem + 2.8vw, 3.7rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0875rem);
  --fs-small: 0.9rem;
  --sec-pad: clamp(72px, 9vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus: var(--ink);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--lime); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.06; margin: 0; letter-spacing: -0.015em; font-optical-sizing: auto; }
h2 { font-size: var(--fs-h2); text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: 12px; top: calc(var(--mlc-h) + 8px); z-index: 60; padding: 10px 14px; background: var(--ink); color: var(--lime); transform: translateY(-200%); }
.skip:focus { transform: none; }
:lang(ml) { font-family: var(--sans); letter-spacing: 0; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 24px; border: 2px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--laterite); color: var(--lime); }
.btn-solid:hover { background: var(--laterite-deep); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--sand); }
.btn-ghost-lime { border-color: rgba(246, 241, 232, .7); color: var(--lime); }
.btn-ghost-lime:hover { background: var(--lime); color: var(--laterite-deep); border-color: var(--lime); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { color: var(--laterite); font-weight: 600; text-underline-offset: 3px; }
.text-link:hover { color: var(--laterite-deep); }
.arrow-link {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; padding-block: 6px;
  border-bottom: 2px solid currentColor;
}
.arrow-link::after { content: "→"; transition: transform .3s var(--ease); }
.arrow-link:hover::after { transform: translateX(5px); }

.eyebrow { display: flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--laterite-deep); margin-bottom: 18px; }
.eyebrow-num { font-family: var(--serif); font-size: .95rem; letter-spacing: 0; font-weight: 500; padding-right: 12px; border-right: 1px solid currentColor; }
.eyebrow-lime { color: var(--lime); }
.kicker { font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; }
.ml-line { font-size: 1.2rem; font-weight: 500; line-height: 1.5; }
.ml-line-lg { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); margin-bottom: 14px; }

/* Header */
.site-header { position: sticky; top: var(--mlc-h); z-index: 50; background: var(--lime); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); background: #F6F1E8; }
.header-in { display: flex; align-items: center; gap: 24px; height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; letter-spacing: -0.01em; }
.brand-ml { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
.nav { display: none; }
.nav ul { display: flex; gap: clamp(14px, 1.6vw, 26px); }
.nav a { position: relative; text-decoration: none; font-weight: 500; font-size: .98rem; padding-block: 8px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--laterite); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.header-cta { display: none; min-height: 44px; padding: 0 18px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; background: var(--ink); color: var(--lime); border: 0; border-radius: 2px; cursor: pointer; font-weight: 600; }
.menu-btn-lines { display: grid; gap: 5px; width: 18px; }
.menu-btn-lines i { display: block; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-btn-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu {
  position: fixed; left: 0; right: 0; top: calc(var(--mlc-h) + var(--head-h)); bottom: 0; z-index: 49;
  background: var(--lime); overflow-y: auto; padding: 16px var(--gut) 40px; display: flex; flex-direction: column; gap: 32px;
  border-top: 1px solid var(--line);
}
.menu-list li { border-bottom: 1px solid var(--line); }
.menu-list a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; text-decoration: none; font-family: var(--serif); font-size: clamp(1.7rem, 1.2rem + 2.5vw, 2.6rem); line-height: 1.1; }
.menu-list a span { font-family: var(--sans); font-size: .8rem; color: var(--laterite-deep); font-weight: 600; }
.menu-list a:hover { color: var(--laterite); }
.menu-foot { display: grid; gap: 16px; }
.menu-foot p { color: var(--ink-soft); }
.menu-open { overflow: hidden; }
@media (min-width: 720px) { .header-cta { display: inline-flex; } }
@media (min-width: 1180px) {
  .nav { display: block; }
  .menu-btn, .menu { display: none !important; }
}

/* Hero */
.hero { display: grid; grid-template-columns: 1fr; background: var(--laterite); color: var(--lime); }
.hero-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--teak); }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 52% 50%; }
.hero-caption { position: absolute; right: 0; bottom: 0; padding: 8px 14px; background: var(--ink); color: var(--lime); font-size: .78rem; letter-spacing: .02em; }
.hero-block { --focus: var(--lime); display: flex; align-items: center; padding: clamp(36px, 6vw, 72px) var(--gut) clamp(40px, 6vw, 72px); }
.hero-copy { max-width: 620px; display: grid; gap: 18px; }
.hero-kicker { color: #f3e1d6; }
.hero .ml-line { color: var(--lime); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin-top: -8px; }
.hero-title { font-size: var(--fs-h1); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; margin-top: 4px; }
.hero-sub { font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); line-height: 1.6; color: #f7ebe3; max-width: 34em; }
.hero .btn-row { margin-top: 8px; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); min-height: clamp(600px, calc(100svh - var(--mlc-h) - var(--head-h) - 108px), 780px); }
  .hero-block { order: -1; padding: clamp(40px, 4.5vw, 72px) clamp(32px, 4vw, 64px) clamp(40px, 4.5vw, 72px) max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); }
  .hero-media { aspect-ratio: auto; }
  .hero-media img { position: absolute; inset: 0; object-position: 48% 55%; }
}

/* Facts */
.facts { background: var(--sand); border-bottom: 1px solid var(--line); }
.facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts-list li { display: grid; gap: 2px; padding: 22px 0; border-top: 1px solid var(--line); }
.facts-list li:nth-child(odd) { padding-right: 16px; }
.facts-list li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.facts-list li:nth-child(-n+2) { border-top: 0; }
.fact-num { font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); line-height: 1; color: var(--laterite); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.fact-label { font-size: .92rem; line-height: 1.35; color: var(--ink-soft); }
@media (min-width: 860px) {
  .facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-list li, .facts-list li:nth-child(odd), .facts-list li:nth-child(even) { padding: 26px 24px; border-top: 0; border-left: 1px solid var(--line); }
  .facts-list li:first-child { border-left: 0; padding-left: 0; }
}

/* Sections */
.section { padding-block: var(--sec-pad); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 860px; }
.sec-head h2 { max-width: 15em; }
.sec-intro { color: var(--ink-soft); font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); max-width: 36em; }
@media (min-width: 960px) {
  .sec-head-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 48px; max-width: none; }
}

/* Projects */
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: transparent; cursor: pointer; font-weight: 500; transition: background-color .25s, color .25s, border-color .25s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.chip-n { font-size: .78rem; opacity: .75; font-variant-numeric: tabular-nums; }
.filter-status { margin: 14px 0 28px; font-size: var(--fs-small); color: var(--ink-soft); }
.cards { display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: 1fr; }
@media (max-width: 699px) {
  .card-media { aspect-ratio: 3 / 2; }
  .card-draw { padding: 4% 14% 0; }
  .card-draw svg { max-height: 100%; }
}
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; background: var(--sand); }
.card.is-hidden { display: none; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--teak); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-media img.pos-right { object-position: 88% 40%; }
.card-media img.pos-mid { object-position: 60% 30%; }
.card-media img.pos-left { object-position: 30% 50%; }
.card-draw { display: grid; place-items: center; padding: 6% 8% 0; }
.card-draw svg { width: 100%; height: auto; transition: transform .9s var(--ease); }
.card:hover .card-draw svg { transform: scale(1.03); }
.draw-teak { background: var(--teak); color: var(--lime); }
.draw-laterite { background: var(--laterite); color: var(--lime); }
.draw-sand { background: #ddd0bb; color: var(--ink); }
.card-cap { position: absolute; right: 0; bottom: 0; padding: 6px 12px; background: rgba(42, 28, 18, .82); color: var(--lime); font-size: .76rem; line-height: 1.3; }
.tag { position: absolute; left: 14px; top: 14px; padding: 6px 10px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; border-radius: 2px; }
.tag-ongoing { background: var(--lime); color: var(--laterite-deep); }
.tag-ready { background: var(--green); color: var(--lime); }
.tag-done { background: var(--ink); color: var(--lime); }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.card-place { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--laterite-deep); }
.card-title { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); }
.card-spec { color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.card-price { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.card-price span { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); margin-right: 4px; }
.card-price-sm { font-family: var(--sans); font-size: .98rem; line-height: 1.5; }
.stage { margin-top: auto; padding-top: 8px; }
.stage-row { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; margin-bottom: 8px; }
.stage-row b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.stage-bar { height: 6px; background: var(--line); overflow: hidden; }
.stage-bar i { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(var(--p)); }
.stage-note { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.slots { display: grid; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.slots li { font-size: .8rem; line-height: 1.35; color: var(--ink-soft); padding: 7px 10px; border: 1px dashed #a8957a; }

/* Villas and apartments */
.types { background: var(--lime); padding-top: 0; }
.types-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
.type-block { --focus: var(--lime); display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 52px); color: var(--lime); min-height: 100%; }
.type-villa { background: var(--laterite); }
.type-apt { background: var(--teak); }
.type-label { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #f1dccf; }
.type-title { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem); line-height: 1.08; }
.type-block p { line-height: 1.6; }
.type-block em { font-style: italic; font-family: var(--serif); }
.type-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 16px; border-block: 1px solid rgba(246, 241, 232, .35); margin-top: auto; }
.type-facts dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.type-facts dd { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }
.type-block .arrow-link { align-self: flex-start; }
.type-photo { position: relative; overflow: hidden; background: var(--teak); }
.type-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.type-photo figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 12px 16px; background: var(--ink); color: var(--lime); font-size: .84rem; line-height: 1.4; }
@media (min-width: 760px) and (max-width: 1099px) {
  .types-grid { grid-template-columns: 1fr 1fr; }
  .type-photo { grid-column: 1 / -1; }
  .type-photo img { aspect-ratio: 16 / 10; }
}
@media (min-width: 1100px) {
  .types-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .type-photo img { position: absolute; inset: 0; aspect-ratio: auto; }
  .type-photo { min-height: 620px; }
}

/* Floor plans */
.plans { background: var(--sand); }
.plan-ui { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.plan-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--ink); max-width: 100%; }
.plan-tabs [role="tab"] {
  min-height: 48px; padding: 8px 16px; border: 0; background: transparent; cursor: pointer; text-align: left; font-weight: 500; line-height: 1.25;
  border-right: 1.5px solid var(--ink); transition: background-color .25s, color .25s; flex: 1 1 auto;
}
.plan-tabs [role="tab"]:last-child { border-right: 0; }
@media (max-width: 560px) {
  .plan-tabs { flex-direction: column; width: 100%; }
  .plan-tabs [role="tab"] { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .plan-tabs [role="tab"]:last-child { border-bottom: 0; }
}
.plan-tabs [role="tab"]:hover { background: rgba(42, 28, 18, .07); }
.plan-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--lime); }
.plan-tabs [role="tab"]:focus-visible { outline-offset: -5px; outline-color: var(--laterite); }
.tab-k { font-family: var(--serif); font-weight: 600; margin-right: 4px; }
.units { display: inline-flex; align-items: center; gap: 4px; }
.units-label { font-size: .85rem; color: var(--ink-soft); margin-right: 6px; }
.unit-btn { min-width: 48px; min-height: 44px; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; font-weight: 600; border-radius: 2px; }
.unit-btn[aria-pressed="true"] { background: var(--laterite); border-color: var(--laterite); color: var(--lime); }
.plan-stage { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--lime); border: 1px solid var(--line); }
.plan-stage:focus-visible { outline-offset: 4px; }
.plan-draw { display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, 3vw, 40px); border-bottom: 1px solid var(--line); min-width: 0; }
.plan-svg { width: 100%; height: auto; max-height: 780px; margin-inline: auto; overflow: visible; }
.plan-svg .p-outline { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: miter; }
.plan-svg .p-room { fill: none; stroke: var(--ink); stroke-width: 2; }
.plan-svg .p-open { fill: var(--sand); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.plan-svg .p-court { fill: url(#pebble); stroke: var(--ink); stroke-width: 1.5; }
.plan-svg .p-door { fill: none; stroke: var(--laterite); stroke-width: 1.6; }
.plan-svg .p-win { stroke: var(--lime); stroke-width: 7; }
.plan-svg .p-win2 { stroke: var(--ink); stroke-width: 1.2; }
.plan-svg .p-stair { fill: none; stroke: var(--ink-soft); stroke-width: 1; }
.plan-svg .p-name { font-family: var(--serif); font-size: 15px; font-weight: 500; fill: var(--ink); }
.plan-svg .p-name-sm { font-size: 12.5px; }
.plan-svg .p-pass { font-style: italic; fill: var(--ink-soft); font-weight: 400; }
.plan-swipe { display: none; }
@media (max-width: 699px) {
  .plan-draw { overflow-x: auto; overscroll-behavior-x: contain; }
  .plan-svg { min-width: 600px; }
  .plan-swipe { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: 8px; position: sticky; left: 0; }
  .plan-legend { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gut) - 20px); }
}
.plan-svg .p-size { font-family: var(--sans); font-size: 11.5px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.plan-svg .p-dim { font-family: var(--sans); font-size: 11px; fill: var(--laterite-deep); }
.plan-svg .p-dimline { stroke: var(--laterite); stroke-width: 1; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: .82rem; color: var(--ink-soft); }
.plan-legend span { display: inline-flex; align-items: center; gap: 8px; }
.plan-legend i { display: inline-block; width: 22px; height: 0; }
.lg-wall { border-top: 5px solid var(--ink); }
.lg-win { border-top: 3px double var(--ink); height: 6px !important; }
.lg-open { height: 12px !important; border: 1.5px dashed var(--ink); background: var(--sand); }
.plan-legend .north { margin-left: auto; font-weight: 600; color: var(--ink); }
.plan-legend .north i { width: auto; font-style: normal; }
.plan-side { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 40px); min-width: 0; }
.plan-kicker { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--laterite-deep); }
.plan-name { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); }
.plan-facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.plan-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.plan-facts div:nth-child(odd) { padding-right: 12px; }
.plan-facts div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); }
.plan-facts dt { font-size: .78rem; color: var(--ink-soft); }
.plan-facts dd { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.plan-rooms-title { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.plan-rooms { display: grid; gap: 0; font-size: .94rem; }
.plan-rooms li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.plan-rooms li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.plan-small { font-size: .82rem; color: var(--ink-soft); }
@media (min-width: 1000px) {
  .plan-stage { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
  .plan-draw { border-bottom: 0; border-right: 1px solid var(--line); }
}

/* Specifications */
.specs { background: var(--lime); }
.specs-grid { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: 1fr; }
.specs-side { display: grid; gap: 0; align-content: start; }
.specs-head { --focus: var(--lime); background: var(--teak); color: var(--lime); padding: clamp(28px, 4vw, 48px); display: grid; gap: 16px; }
.specs-head h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); }
.specs-head p:last-child { color: #efe4d6; }
.specs-photo { position: relative; overflow: hidden; background: var(--sand); }
.specs-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; }
.specs-photo figcaption { padding: 12px 0 0; font-size: .86rem; color: var(--ink-soft); background: var(--lime); }
@media (min-width: 1000px) {
  .specs-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .specs-side { position: sticky; top: calc(var(--mlc-h) + var(--head-h) + 24px); }
  .specs-photo img { aspect-ratio: 5 / 4; }
}
.accordion { border-top: 2px solid var(--ink); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item h3 { font-size: inherit; }
.acc-btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n t i" ". s s"; align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 20px 0; background: none; border: 0; text-align: left; cursor: pointer;
}
.acc-n { grid-area: n; font-family: var(--serif); font-size: .95rem; color: var(--laterite); font-variant-numeric: tabular-nums; }
.acc-t { grid-area: t; font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight: 500; line-height: 1.15; transition: color .25s; }
.acc-sum { grid-area: s; font-family: var(--sans); font-size: .92rem; color: var(--ink-soft); }
.acc-ico { grid-area: i; position: relative; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; transition: background-color .25s, transform .4s var(--ease); }
.acc-ico::before, .acc-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.acc-ico::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.acc-btn:hover .acc-t { color: var(--laterite); }
.acc-btn[aria-expanded="true"] .acc-ico { background: var(--ink); color: var(--lime); }
.acc-btn[aria-expanded="true"] .acc-ico::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (min-width: 640px) {
  .acc-btn { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "n t s i"; }
  .acc-sum { text-align: right; padding-right: 8px; }
}
.acc-panel { padding: 0 0 26px; }
.spec-list { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--sand); padding: 6px 20px; }
.spec-list div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-list div:last-child { border-bottom: 0; }
.spec-list dt { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--laterite-deep); padding-top: 2px; }
.spec-list dd { line-height: 1.5; }
@media (min-width: 640px) { .acc-panel { padding-left: 60px; } }

/* Build on your plot */
.plot { background: var(--sand); }
.plot-intro { display: grid; gap: clamp(28px, 4vw, 56px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.plot-intro .sec-head { margin-bottom: 0; }
.plot-photo { overflow: hidden; background: var(--teak); }
.plot-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plot-photo figcaption { padding-top: 12px; font-size: .86rem; color: var(--ink-soft); background: var(--sand); }
@media (min-width: 1000px) { .plot-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.steps { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--ink); margin-bottom: clamp(48px, 6vw, 80px); counter-reset: none; }
.steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.step-n { grid-row: span 2; font-family: var(--serif); font-size: 2.6rem; line-height: .9; color: var(--laterite); font-weight: 500; }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .steps li { grid-template-columns: 1fr; padding: 26px 22px 28px; border-bottom: 0; border-left: 1px solid var(--line); align-content: start; }
  .steps li:first-child { border-left: 0; padding-left: 0; }
  .step-n { grid-row: auto; font-size: 3.4rem; margin-bottom: 14px; }
}
.packages { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 860px) { .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkg { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); background: var(--lime); border-top: 6px solid var(--line); }
.pkg-mid { border-top-color: var(--laterite); }
.pkg-top { background: var(--ink); color: var(--lime); border-top-color: var(--laterite); --focus: var(--lime); }
.pkg-name { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; font-weight: 500; }
.pkg-note { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--laterite-deep); }
.pkg-rate { font-size: 1rem; color: var(--ink-soft); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pkg-top .pkg-rate { color: #d9cbb8; border-bottom-color: rgba(246, 241, 232, .25); }
.pkg-rate b { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); color: var(--ink); margin-right: 6px; font-variant-numeric: lining-nums; }
.pkg-top .pkg-rate b { color: var(--lime); }
.pkg ul { display: grid; gap: 10px; }
.pkg li { position: relative; padding-left: 20px; font-size: .96rem; line-height: 1.5; }
.pkg li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; background: var(--laterite); }
.pkg-top li::before { background: #d36a4c; }
.pkg em { font-family: var(--serif); }

.estimator { display: grid; grid-template-columns: 1fr; background: var(--laterite); color: var(--lime); --focus: var(--lime); }
.est-inputs, .est-result { padding: clamp(24px, 4vw, 48px); min-width: 0; }
.est-result { background: var(--laterite-deep); }
@media (min-width: 960px) { .estimator { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.est-title { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem); margin-bottom: 28px; }
.field-range { display: grid; gap: 12px; margin-bottom: 28px; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.range-head label { font-weight: 600; }
.range-head output { font-family: var(--serif); font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.range-scale { display: flex; justify-content: space-between; font-size: .8rem; opacity: .85; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(246, 241, 232, .4); }
input[type="range"]::-moz-range-track { height: 4px; background: rgba(246, 241, 232, .4); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; }
.pkg-radios { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pkg-radios legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.pkg-radios label { position: relative; display: block; cursor: pointer; }
.pkg-radios input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pkg-radios span { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1.5px solid rgba(246, 241, 232, .45); transition: background-color .2s, color .2s, border-color .2s; }
.pkg-radios b { font-weight: 600; }
.pkg-radios label:hover span { border-color: var(--lime); }
.pkg-radios input:checked + span { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.pkg-radios input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.est-label { font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #f0d7cb; }
.est-total { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); line-height: 1.05; margin: 6px 0 22px; font-variant-numeric: tabular-nums lining-nums; }
.est-bar { display: flex; height: 12px; gap: 2px; margin-bottom: 18px; }
.est-bar i { display: block; height: 100%; background: var(--lime); }
.est-bar i:nth-child(even) { background: #e7b9a4; }
.est-stages { display: grid; grid-template-columns: 1fr; font-size: .92rem; }
.est-stages li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(246, 241, 232, .2); }
.est-stages li span:first-child { font-family: var(--serif); opacity: .8; }
.est-stages li b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-stages li small { opacity: .8; margin-left: 6px; font-size: .82rem; }
.est-note { margin-top: 18px; font-size: .86rem; color: #f0d7cb; }

/* NRIs */
.nri { background: var(--teak); color: var(--lime); --focus: var(--lime); }
.nri-grid { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .nri-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nri h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); margin-bottom: 20px; }
.nri-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: #f1e6d8; max-width: 32em; margin-bottom: 28px; }
.nri-list { display: grid; border-top: 1px solid rgba(246, 241, 232, .3); }
.nri-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(246, 241, 232, .3); line-height: 1.5; }
.nri-list span { font-family: var(--serif); color: #e9b59e; }
.nri-small { margin-top: 22px; font-size: .88rem; color: #e2d4c2; max-width: 36em; }
.nri-visual { position: relative; padding-bottom: 64px; }
.nri-photo { overflow: hidden; background: var(--ink); }
.nri-photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 60% 50%; }
.site-note {
  position: absolute; left: clamp(0px, 3vw, 32px); bottom: 0; width: min(88%, 360px);
  background: var(--lime); color: var(--ink); padding: 20px 22px 18px; box-shadow: 0 18px 40px rgba(20, 12, 6, .3);
}
.note-head { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--laterite-deep); padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 12px; }
.note-head span:last-child { letter-spacing: .02em; text-transform: none; color: var(--ink-soft); font-weight: 500; }
.note-week { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.note-body { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.5; margin-top: 4px; }
.note-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.note-meta li { font-size: .78rem; padding: 3px 8px; border: 1px solid var(--ink); }
.note-sign { margin-top: 12px; font-size: .8rem; color: var(--ink-soft); }

/* Loans */
.loans { background: var(--lime); }
.loans-grid { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .loans-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.loans h2 { margin-bottom: 20px; max-width: 14em; }
.loan-points { display: grid; gap: 0; margin-top: 32px; border-top: 2px solid var(--ink); }
.loan-points li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.loan-points h3 { font-size: 1.25rem; }
.loan-points p { color: var(--ink-soft); }
.emi { background: var(--sand); padding: clamp(24px, 3.5vw, 44px); border-top: 6px solid var(--laterite); }
.emi-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 24px; }
.emi input[type="range"]::-webkit-slider-runnable-track { background: var(--line); }
.emi input[type="range"]::-moz-range-track { background: var(--line); }
.emi input[type="range"]::-webkit-slider-thumb { background: var(--laterite); border-color: var(--lime); }
.emi input[type="range"]::-moz-range-thumb { background: var(--laterite); border-color: var(--lime); }
.emi-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 24px; }
.field { display: grid; gap: 8px; align-content: end; }
.field label { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.field input, .field select {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 2px; background-color: var(--lime);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.emi-out { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; }
.emi-out p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.emi-out b { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1.1; color: var(--laterite-deep); font-variant-numeric: tabular-nums lining-nums; }
.emi-out .emi-sub b { font-size: 1.25rem; color: var(--ink); }
.emi-out span { font-size: .92rem; color: var(--ink-soft); }
.emi-note { margin-top: 14px; font-size: .84rem; color: var(--ink-soft); }

/* Practices */
.practices { background: var(--sand); }
.practice-grid { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
.practice-grid li { display: grid; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--line); align-content: start; }
.pr-n { font-family: var(--serif); font-size: 1rem; color: var(--laterite); }
.practice-grid p { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.25; max-width: 18em; }
@media (min-width: 700px) {
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-grid li { padding: 30px 28px 34px 0; }
  .practice-grid li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .practice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .practice-grid li, .practice-grid li:nth-child(even) { padding: 34px 32px 40px; border-left: 1px solid var(--line); }
  .practice-grid li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
.cred-slot { margin-top: 32px; display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 12px 16px; border: 1px dashed #a8957a; font-size: .88rem; color: var(--ink-soft); }
.cred-slot span { font-weight: 600; color: var(--ink); }

/* Visit band */
.visit { background: var(--laterite); color: var(--lime); padding-block: clamp(64px, 8vw, 120px); --focus: var(--lime); }
.visit-grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.visit h2 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.6rem); margin-bottom: 20px; max-width: 10em; }
.visit-copy > p:not(.eyebrow) { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); max-width: 30em; color: #f7ebe3; }
.visit-copy .ml-line { margin-top: 14px; color: var(--lime); }
.visit-form { display: grid; grid-template-columns: 1fr; gap: 16px; background: var(--laterite-deep); padding: clamp(22px, 3.5vw, 40px); }
@media (min-width: 600px) { .visit-form { grid-template-columns: 1fr 1fr; } .visit-form .check, .visit-form .btn { grid-column: 1 / -1; } }
.visit-form .field input, .visit-form .field select { background-color: var(--lime); color: var(--ink); border-color: var(--lime); }
.visit-form .field input::placeholder { color: #7b6a5b; }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.check input { width: 22px; height: 22px; accent-color: var(--lime); flex: none; margin: 0; }

/* Contact */
.contact { background: var(--lime); }
.contact-grid { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.contact h2 { margin-bottom: 28px; }
.contact-list { border-top: 2px solid var(--ink); }
.contact-list div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--laterite-deep); padding-top: 3px; }
.contact-list dd { overflow-wrap: anywhere; }
.contact-list a { text-decoration-color: var(--line); text-underline-offset: 4px; }
.contact-list a:hover { color: var(--laterite); text-decoration-color: currentColor; }
.map { background: var(--sand); }
.map svg { width: 100%; height: auto; }
.map-sea { font-family: var(--serif); font-style: italic; font-size: 18px; fill: #e9dfcf; letter-spacing: .1em; }
.map-road { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--laterite-deep); letter-spacing: .04em; }
.map-road-mute { fill: #66533f; font-weight: 500; }
.map-label { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.map-city { font-style: italic; font-family: var(--serif); font-size: 14px; }
.map-office { font-weight: 600; }
.map-dot circle { fill: var(--laterite); stroke: var(--lime); stroke-width: 3; }
.map-dot text { font-family: var(--serif); font-size: 15px; fill: var(--ink); }
.map-note { font-size: 11px; fill: #66533f; font-family: var(--sans); }
@media (max-width: 699px) {
  .map-dot text { font-size: 19px; }
  .map-dot circle { r: 9px; }
  .map-label { font-size: 16px; }
  .map-city { font-size: 17px; }
  .map-road { font-size: 15px; }
  .map-sea { font-size: 20px; }
  .map-note { font-size: 14px; }
}

/* Footer */
.site-footer { background: var(--ink); color: var(--lime); padding: clamp(56px, 7vw, 96px) 0 32px; --focus: var(--lime); }
.foot-grid { display: grid; gap: 40px 32px; grid-template-columns: 1fr 1fr; padding-bottom: 48px; border-bottom: 1px solid rgba(246, 241, 232, .18); }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 10px; align-content: start; }
.brand-mark-lg { width: 52px; height: 52px; margin-bottom: 8px; }
.foot-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: #e6d8c6; }
.foot-ml { color: #cdbca6; }
.foot-col h2 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #cdbca6; margin-bottom: 14px; }
.foot-col ul { display: grid; gap: 4px; }
.foot-col a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--lime); }
.foot-col a:hover { color: #e9b59e; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: auto; }
}
.foot-base { display: grid; gap: 12px; padding-top: 28px; font-size: .88rem; color: #d8cab8; }
.foot-concept a { color: var(--lime); font-weight: 600; text-underline-offset: 3px; }
.foot-concept a:hover { color: #e9b59e; }
@media (min-width: 900px) { .foot-base { grid-template-columns: minmax(0, 2fr) auto; align-items: end; gap: 32px; } }

/* Motion: hidden states only when motion is allowed (class set in head). */
.js-motion [data-reveal], .js-motion [data-card], .js-motion [data-step], .js-motion [data-pkg], .js-motion [data-practice], .js-motion [data-fact], .js-motion [data-hero-fade] { opacity: 0; }
.js-motion [data-clip] { clip-path: inset(0 0 100% 0); }
.js-motion [data-hero-block] { clip-path: inset(0 100% 0 0); }
.js-motion [data-split], .js-motion [data-hero-split] { visibility: hidden; }
.js-motion .stage-bar i { transform: scaleX(0); }
.split-line { padding-bottom: .06em; margin-bottom: -.06em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}