/* =========================================
   ARC LP — Base Styles
   (design system carried over from the ARC microsite)
   ========================================= */
:root {
  --font: 'General Sans', sans-serif;
  --c-dark: #3e3835;
  --c-brown: #4b423d;
  --c-circle: #4f4640;
  --c-taupe: #8a7e76;
  --c-line: #b9b4af;
  --c-light: #ffffff;
  --c-wa: #25d366;
  --container: 1320px;
  --gutter: 20px;
  --header-h: 76px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--c-dark);
  background: var(--c-light);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- ARC wordmark (replaces the text "ARC") ---------- */
.arc-word {
  display: inline-block;
  height: .74em;               /* ≈ cap height of General Sans */
  width: calc(.74em * 500 / 188);
  fill: currentColor;
  vertical-align: baseline;
  overflow: visible;
}
.nav__list .arc-word { height: .8em; width: calc(.8em * 500 / 188); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(36px, 2.55vw, 46px);
  padding: 0 clamp(16px, 1.3vw, 26px);
  min-width: clamp(130px, 10.05vw, 180px);
  font-size: clamp(12px, .88vw, 15px);
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--c-brown);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn--outline { background: rgba(255,255,255,.55); color: var(--c-dark); border-color: #5d6670; }
.btn--outline:hover { background: var(--c-brown); border-color: var(--c-brown); color: #fff; }
.btn--solid { background: var(--c-brown); color: #fff; }
.btn--solid:hover { background: #2c2724; border-color: #2c2724; }
.btn--block { width: 100%; height: 48px; }

/* =========================================
   HEADER
   Design canvas: 1919 · logo x 79, y 57 (67 x 95)
   · menu x 681–1238 between rules at y 39 / 94
   · Enquire Now x 1650–1840, y 43 (190 x 48)
   ========================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 1.7vw 4.12vw 0;                 /* menu rules at y 23 / 1355 */
  transition: padding .4s ease;
}
.nav__logo { justify-self: start; margin-top: .94vw; transition: margin .4s ease; }   /* 57 - 39 */
.nav__logo img { width: clamp(46px, 3.5vw, 72px); height: auto; transition: width .4s ease; }

/* centre menu sits between two thin rules (middle grid column, no logo on the left) */
.nav__menu { position: relative; grid-column: 2; padding: 0 2.6vw; }
.nav__menu::before,
.nav__menu::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: rgba(62,56,53,.3);
}
.nav__menu::before { top: 0; }
.nav__menu::after  { bottom: 0; }
.nav__list { display: flex; align-items: center; gap: 2.6vw; height: clamp(44px, 2.87vw, 58px); }
.nav__list > li { display: flex; align-items: center; }   /* keeps the inline-flex links off the text baseline, so they sit centred */
.nav__list a {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center;
  font-size: clamp(12px, .86vw, 17px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--c-dark);
  padding: 6px 0;
}
/* reserves the bold width, so the menu never shifts when the active item changes */
.nav__list a::before { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.nav__list a.is-active { font-weight: 600; }
.nav__list a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s ease;
}
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; margin-top: .21vw; transition: margin .4s ease; }   /* 43 - 39 */
.nav__cta {
  height: clamp(38px, 2.5vw, 50px);
  min-width: clamp(136px, 9.9vw, 196px);
  font-size: clamp(12px, .86vw, 17px);
}

/* desktop: Enquire Now lives in the hero, not the header */
@media (min-width: 992px) { .nav__cta { display: none; } }

/* scrolled: compact white bar */
.site-header.is-scrolled .nav { padding-top: 10px; padding-bottom: 10px; align-items: center; }
.site-header.is-scrolled .nav__logo,
.site-header.is-scrolled .nav__actions { margin-top: 0; }
.site-header.is-scrolled .nav__logo img { width: clamp(34px, 2.3vw, 44px); }

.nav__toggle { display: none; width: 30px; height: 22px; position: relative; }
.nav__toggle span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--c-dark);
  transition: transform .35s ease, opacity .25s ease, top .35s ease;
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 20px; }
.nav__toggle.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mobile-menu { display: none; }

/* =========================================
   HEADER — RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
  :root { --header-h: 72px; }
  .nav,
  .site-header.is-scrolled .nav {
    grid-template-columns: auto 1fr;
    align-items: center;
    height: var(--header-h);
    padding: 0 var(--gutter);
  }
  .nav__menu { display: none; }
  .nav__logo,
  .nav__actions { margin-top: 0; }
  .nav__logo img,
  .site-header.is-scrolled .nav__logo img { width: auto; height: 50px; }
  .nav__actions { grid-column: 1 / -1; gap: 18px; }
  .nav__cta { height: 38px; min-width: 0; padding: 0 14px; font-size: 12px; }
  .nav__toggle { display: block; }
  .site-header.menu-open { background: #fff; }

  .mobile-menu {
    display: block;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff;
    padding: 24px var(--gutter) 40px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s;
  }
  .mobile-menu.is-open { visibility: visible; opacity: 1; transform: none; }
  .mobile-menu li { border-bottom: 1px solid #ece8e4; }
  .mobile-menu a {
    display: block; padding: 15px 0;
    font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
  }
  .mobile-menu__cta { display: grid; gap: 10px; margin-top: 28px; }
  .mobile-menu__cta .btn { height: 48px; width: 100%; }
}
@media (max-width: 359px) { .nav__cta { display: none; } }

/* =========================================
   WHATSAPP FLOAT
   ========================================= */
.wa-float {
  position: fixed;
  right: clamp(16px, 6.2vw, 120px);      /* design: x 1756–1800 */
  bottom: clamp(60px, 7.2vw, 140px);      /* sits above the hero offer ticker */
  z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--c-wa);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(37,211,102,.4);
}
.wa-float svg { width: 40px; height: 40px; }

/* =========================================
   MODALS + FORMS
   ========================================= */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  visibility: hidden;
  pointer-events: none;
}
.modal.is-open { visibility: visible; pointer-events: auto; }
.modal__overlay { position: absolute; inset: 0; background: rgba(30,26,24,.62); backdrop-filter: blur(3px); }
.modal__box {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  padding: 40px 36px 32px;
}
.modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  font-size: 30px; line-height: 1; color: var(--c-dark);
  transition: transform .35s ease;
}
.modal__close:hover { transform: rotate(90deg); }
.modal__title {
  font-size: 28px; font-weight: 600; text-transform: uppercase;
  letter-spacing: -.02em; color: var(--c-dark);
}
.modal__sub { margin: 6px 0 24px; font-size: 14px; color: #000; }

.arc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { position: relative; }
.field--full, .arc-form .btn, .form-status { grid-column: 1 / -1; }
.field input,
.field textarea {
  width: 100%;
  font: inherit; font-size: 15px; color: var(--c-dark);
  background: transparent;
  border: 0; border-bottom: 1px solid #cfc9c4;
  padding: 18px 0 8px;
  border-radius: 0;
  outline: none;
  transition: border-color .3s ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 70px; }
.field input[type="date"], .field input[type="time"] { min-height: 46px; }
.field label {
  position: absolute; left: 0; top: 18px;
  font-size: 14px; color: #8b837d;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .3s ease, color .3s ease;
}
.field input:focus,
.field textarea:focus { border-color: var(--c-brown); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field label.is-fixed { transform: translateY(-18px) scale(.82); color: var(--c-brown); }
.field.has-error input,
.field.has-error textarea { border-color: #c0392b; }
.field .err { display: block; margin-top: 4px; font-size: 12px; color: #c0392b; }
.arc-form .btn { margin-top: 8px; }
.form-status { font-size: 14px; min-height: 1em; }
.form-status.is-success { color: #2e7d32; }

/* =========================================
   RESPONSIVE POLISH
   ========================================= */
/* headings: balanced line breaks (no single orphan word on its own line) */
.line > span { text-wrap: balance; }

/* form popups on phones: centred card that always fits the screen and scrolls inside */
@media (max-width: 767px) {
  .modal:not(.modal--media) .modal__box {
    width: 100%; max-width: 480px;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 26px 18px 20px;
  }
  .modal__close { top: 8px; right: 8px; }
  .modal__title { font-size: 22px; padding-right: 36px; }
  .modal__sub { margin: 6px 0 16px; font-size: 13px; line-height: 1.4; }
  .arc-form { grid-template-columns: 1fr 1fr; gap: 12px 12px; }
  .arc-form .field { grid-column: 1 / -1; }
  .arc-form .field:has(input[type="date"]),
  .arc-form .field:has(input[type="time"]) { grid-column: auto; }      /* date + time side by side */
  .field input, .field textarea { font-size: 16px; padding: 16px 0 6px; }   /* 16px stops iPhone zoom-on-focus */
  .field input[type="date"], .field input[type="time"] { min-height: 42px; font-size: 15px; }
  .field label { top: 16px; font-size: 13px; }
  .field textarea { min-height: 56px; }
  .field .err { font-size: 11px; margin-top: 3px; }
  .arc-form .btn { margin-top: 4px; height: 48px; }
  .form-status:empty { display: none; }
}
@media (max-width: 359px) {
  .arc-form .field:has(input[type="date"]),
  .arc-form .field:has(input[type="time"]) { grid-column: 1 / -1; }
}
/* very short screens (landscape phones) */
@media (max-height: 520px) and (max-width: 991px) {
  .modal:not(.modal--media) .modal__box { padding-top: 18px; }
  .modal__sub { display: none; }
}

/* MOBILE MENU — lives outside the header so the header's blur can't clip it */
@media (max-width: 991px) {
  .mobile-menu {
    top: 0; z-index: 99;
    padding-top: calc(var(--header-h) + 16px);
    overscroll-behavior: contain;
  }
  .mobile-menu a { position: relative; color: var(--c-dark); transition: color .3s ease, padding-left .3s ease; }
  .mobile-menu a::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px;
    background: currentColor; transform: translateY(-50%); transition: width .3s ease;
  }
  .mobile-menu a.is-active { font-weight: 600; padding-left: 22px; }
  .mobile-menu a.is-active::before { width: 12px; }
  .site-header.menu-open { box-shadow: none; }
}
html { scroll-padding-top: 72px; }

/* =========================================
   THANK YOU PAGE
   ========================================= */
.ty-page { background: var(--c-brown); }
.ty-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; padding: 22px var(--gutter);
}
.ty-header__logo img { width: clamp(40px, 3.2vw, 52px); height: auto; }
.ty {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px var(--gutter) 90px;
  color: #fff; text-align: center;
}
.ty__bg { position: absolute; inset: 0; z-index: -1; }
.ty__bg img { width: 100%; height: 100%; object-fit: cover; }
.ty__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,37,33,.72), rgba(43,37,33,.86)); }
.ty__inner { max-width: 720px; }
.ty__check { display: inline-block; width: 76px; height: 76px; margin-bottom: 28px; }
.ty__check svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ty__title {
  font-size: clamp(40px, 5.2vw, 90px); line-height: 1; letter-spacing: -.035em;
  text-transform: uppercase; font-weight: 400;
}
.ty__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.ty__title .line > span { display: inline-block; }
.ty__title em { font-style: normal; font-weight: 200; }
.ty__title strong { font-weight: 500; }
.ty__name { font-weight: 200; text-transform: none; }
.ty__lead { margin: 22px auto 0; max-width: 520px; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.5; color: rgba(255,255,255,.85); }
.ty__dl { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.7); }
.ty__dl a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); }
.ty__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ty__btn { height: 50px; min-width: 200px; padding: 0 28px; font-size: 13px; }
.ty__btn--solid { background: #fff; color: var(--c-dark); border-color: #fff; }
.ty__btn--solid:hover { background: transparent; color: #fff; }
.ty__btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ty__btn--outline:hover { background: #fff; color: var(--c-dark); border-color: #fff; }
.ty__call { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.7); }
.ty__call a { color: #fff; font-weight: 500; }
.ty__call a:hover { text-decoration: underline; }
.ty__foot { position: absolute; left: 0; right: 0; bottom: 22px; font-size: 12px; color: rgba(255,255,255,.55); }
.ty__foot .arc-word { height: .72em; width: calc(.72em * 500 / 188); }
@media (max-width: 575px) {
  .ty { padding: 100px 20px 80px; }
  .ty__check { width: 62px; height: 62px; margin-bottom: 22px; }
  .ty__title { font-size: clamp(32px, 9.4vw, 42px); }
  .ty__name { display: block; margin-top: 6px; font-size: .62em; }
  .ty__btns { flex-direction: column; gap: 10px; }
  .ty__btn { width: 100%; min-width: 0; height: 48px; }
}
.ty__name:not(:empty)::before { content: ', '; }
@media (max-width: 575px) { .ty__name:not(:empty)::before { content: none; } }

/* form honeypot (spam trap, never visible) */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================
   SECTIONS
   Each landing-page section is added below as its design comes in
   (desktop rules first, then that section's own @media rules).
   Animations for every section live in css/animations.css.
   ========================================= */

/* =========================================
   HERO
   Design canvas: 1919 x 945 · photo 1920 x 1080 shown full width, top-aligned
   · title centred, 68px, line-1 box top y 148 · text 18px, y 288–333
   ========================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: min(56.25vw, 100vh);    /* photo shape, but never taller than the screen, */
  height: min(56.25vw, 100svh);   /* so the pre-launch panel + offer bar are always in the first view */
  min-height: 560px;
  text-align: center;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #dcf0ff; }
/* photo sits 24 / 762 lower than the top (room for the Enquire button); the sky haze covers the seam */
.hero__bg img { position: absolute; left: 0; top: 3.15%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* pale sky haze behind the menu and title (as in the design) */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(220,240,255,.95) 0%,
    rgba(230,243,255,.68) 12%,
    rgba(238,245,252,.48) 17%,
    rgba(244,247,250,.28) 23%,
    rgba(248,248,248,.1) 30%,
    rgba(248,248,248,0) 36%);
}
/* soft sunlight through the windows — ambient, see animations.css */
.hero__glow {
  position: absolute; right: -12%; top: -30%;
  width: 62%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,247,230,.6), rgba(255,247,230,0));
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero__content { position: relative; padding: max(6.55vw, 76px) var(--gutter) 0; }   /* title caps at y 97 / 1355 */
.hero__title {
  font-size: clamp(34px, 3.65vw, 70px);    /* 70px at 1919 */
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: inline-block; }
.hero__title em     { font-style: normal; font-weight: 200; color: var(--c-taupe); }
.hero__title strong { font-weight: 500; }
.hero__text {
  margin: .6vw auto 0;
  font-size: clamp(15px, .94vw, 19px);
  line-height: 1.3;
  color: #000;
}
.hero__text strong { font-weight: 600; }
.hero__btn {                                  /* design x 610–743, y 247–279 */
  margin-top: 1.5vw;
  height: clamp(38px, 2.45vw, 50px);
  min-width: clamp(136px, 9.9vw, 196px);
  font-size: clamp(12px, .88vw, 17px);
}

/* ---- pre-launch tag + configuration panel (design x 0–452, y 597–715) ---- */
.hero__offer {
  position: absolute; left: 0; bottom: var(--ticker-h); z-index: 2;
  text-align: left;
  color: #fff;
}
.hero__tag {
  padding-left: 1.7vw;
  margin-bottom: .55vw;
  overflow: hidden;
  font-size: clamp(20px, 2.2vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,.28);
}
.hero__tag span { display: inline-block; }
.hero__panel {
  display: flex; align-items: center; gap: 1.33vw;
  height: clamp(58px, 6.1vw, 118px);
  padding: 0 2.95vw 0 1.7vw;
  background: #8f7f72;
  border-top-right-radius: clamp(26px, 3.1vw, 60px);
}
.hero__bhk {
  font-size: clamp(30px, 3.55vw, 68px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hero__amp { font-size: .62em; }
.hero__res {
  font-size: clamp(11px, 1.47vw, 28px);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.005em;
  white-space: nowrap;
}

/* ---- offer ticker along the bottom (design y 715–762, #48403b) ---- */
.hero { --ticker-h: clamp(40px, 3.47vw, 66px); }
.hero__ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: var(--ticker-h);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--c-brown);
  color: #fff;
}
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; flex: none; }
.ticker__item {
  flex: none;
  padding-right: 2.15vw;
  font-size: clamp(13px, 1.47vw, 28px);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.ticker__item b { font-weight: 600; }
.ticker__price { font-size: 1.04em; }
.ticker__rs { font-size: .72em; }
.ticker__unit { font-size: .72em; }

@media (max-width: 991px) {
  .hero { aspect-ratio: auto; height: auto; min-height: 100vh; min-height: 100svh; }
  .hero__bg img { top: 0; object-position: 54% 100%; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(224,241,255,.96) 0%,
      rgba(232,244,255,.8) 22%,
      rgba(240,246,252,.45) 34%,
      rgba(246,248,250,0) 48%);
  }
  .hero__glow { width: 120%; right: -50%; top: -20%; }
  .hero__content { padding: calc(var(--header-h) + 40px) var(--gutter) 0; }
  .hero__title { font-size: clamp(34px, 7.6vw, 60px); }
  .hero__text { margin-top: 14px; max-width: 440px; font-size: clamp(15px, 2.2vw, 17px); line-height: 1.45; }
  .hero__text br { display: none; }
  .hero__btn { margin-top: 20px; height: 44px; font-size: 13px; }
  .hero__tag { padding-left: var(--gutter); margin-bottom: 8px; }
  .hero__panel { gap: 14px; padding: 0 26px 0 var(--gutter); }
  .hero__ticker .ticker__item { padding-right: 28px; }
}
@media (max-width: 575px) {
  .hero__bhk { font-size: 28px; }
  .hero__res { font-size: 11px; }
}
/* landscape phones: keep the sky (and the title) at the top */
@media (max-width: 991px) and (orientation: landscape) {
  .hero__bg img { object-position: 54% 0; }
}

/* =========================================
   IMAGE POPUPS (route map, plans…) — image fitted to the screen, never cropped
   ========================================= */
.modal--media .modal__box {
  width: min(1500px, 94vw); height: 88vh; max-width: none; max-height: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; padding: 0; overflow: visible;
}
.modal--media .modal__box img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.modal--media .modal__close { top: -6px; right: -6px; background: #fff; border-radius: 50%; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.modal--media .modal__overlay { background: rgba(20,16,14,.88); }
@media (max-width: 575px) {
  .modal.modal--media { align-items: center; padding: 12px; }
  .modal--media .modal__box { width: calc(100vw - 24px); height: 72vh; }
  .modal--media .modal__close { top: 6px; right: 6px; width: 32px; height: 32px; font-size: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
}

/* "View larger" tag on zoomable images */
.zoom-hint {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(72,64,59,.9); color: #fff;
  font-size: 12px; letter-spacing: .02em;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* =========================================
   ABOUT THIRUVERKADU — same layout as ARC, light theme
   Design canvas: 1919 x 817 · cols: text 251–766 · map 835–1240 (405 x 621)
   · text 1311–1671 · rules y 301 / 561, #d8cdc3
   ========================================= */
.about {
  position: relative;
  overflow: hidden; overflow: clip;
  background: #fff;
  color: var(--c-dark);
  padding: 5.05vw 0 5.1vw;
}
.about__grid {
  display: grid;
  grid-template-columns: 26.84vw 21.1vw 18.76vw;     /* 515 · 405 · 360 */
  grid-template-areas:
    "intro media f2"
    "f1    media f3";
  grid-template-rows: auto 1fr;                       /* map's extra height goes below the features */
  column-gap: 3.65vw;                                 /* 70 / 1919 */
  row-gap: 2.9vw;                                     /* text end 422 → 01 at 478 */
  padding-left: 13.08vw;                              /* 251 / 1919 */
}
.about__intro { grid-area: intro; }
.about__media { grid-area: media; }
.about__f1    { grid-area: f1; }
.about__f2    { grid-area: f2; align-self: start; padding-top: 6.35vw; }   /* 02 at y 218 */
.about__f3    { grid-area: f3; }

.about__title {
  font-size: clamp(30px, 3.65vw, 70px);    /* 70px at 1919 */
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.about__title .line { display: block; width: max-content; white-space: nowrap; overflow: hidden; padding-bottom: .05em; }
.about__title .line > span { display: inline-block; }
.about__title em     { font-style: normal; font-weight: 200; color: var(--c-taupe); }
.about__title strong { font-weight: 500; color: var(--c-brown); }
.about__text {
  margin-top: .75vw;
  max-width: 26vw;
  font-size: clamp(14px, .95vw, 19px);
  line-height: 1.33;
  color: #000;
}
.about__text + .about__text { margin-top: .7vw; max-width: 23vw; }

.about__media {
  margin: 0;
  aspect-ratio: 405 / 620;
  overflow: hidden;
}
.about__map { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; overflow: hidden; }
.about__map img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}
.about__map:hover .zoom-hint,
.about__map:focus-visible .zoom-hint { opacity: 1; transform: none; }

.feat__head { display: flex; align-items: center; gap: 1.1vw; }
.feat__num {
  display: inline-block;
  font-size: clamp(30px, 3.55vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-dark);
}
.feat__title {
  font-size: clamp(13px, 1.27vw, 26px);
  line-height: 1;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--c-brown);
}
.feat__line {
  display: block;
  height: 1px;
  margin: .78vw 0 .94vw;                              /* rule 15px under the number, text 18px under the rule */
  background: #d8cdc3;
  transform-origin: left center;
}
.feat__text {
  font-size: clamp(14px, .95vw, 19px);
  line-height: 1.33;
  color: #000;
}

@media (max-width: 991px) {
  .about { padding: 64px var(--gutter); }
  .about__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro intro"
      "media media"
      "f1    f2"
      "f3    f3";
    column-gap: 32px; row-gap: 36px;
    padding-left: 0;
  }
  .about__f2 { align-self: start; padding-top: 0; }
  .about__title { font-size: clamp(36px, 7vw, 56px); }
  .about__text, .about__text + .about__text { max-width: 620px; margin-top: 14px; font-size: 15px; }
  .about__media { aspect-ratio: 16 / 10; }
  .about__map .zoom-hint { opacity: 1; transform: none; }
  .feat__num { font-size: clamp(36px, 6vw, 52px); }
  .feat__title { font-size: clamp(15px, 2.2vw, 19px); }
  .feat__head { gap: 14px; }
  .feat__line { margin: 14px 0 16px; }
  .feat__text { font-size: 15px; }
}
@media (max-width: 575px) {
  .about__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "media" "f1" "f2" "f3";
    row-gap: 32px;
  }
  .about__media { aspect-ratio: 4 / 5; }
}

/* =========================================
   CONNECTIVITY
   Design canvas: 1245 x 696 (x 1.541 = 1919) · background #c7b7a8
   · content x 161–1087 · map 451 square at y 183
   · list x 645–1087, rows 31 tall, 10.5 apart, centred on the map
   ========================================= */
.conn {
  position: relative;
  overflow: hidden; overflow: clip;
  background: #c7b7a8;
  color: var(--c-dark);
  padding: 4.5vw 12.7vw 5vw 12.93vw;
}
.conn__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  column-gap: 2.35vw;
}
.conn__title {
  font-size: clamp(30px, 3.65vw, 70px);     /* 70px at 1919 */
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.conn__title .line { display: block; overflow: hidden; padding-bottom: .04em; white-space: nowrap; }
.conn__title .line > span { display: inline-block; }
.conn__title em     { font-style: normal; font-weight: 200; color: var(--c-taupe); }
.conn__title strong { font-weight: 500; color: var(--c-brown); }
.conn__text {
  max-width: max(16.5vw, 17.5em);         /* stays on 2 lines on laptops too */
  margin-bottom: .1vw;
  font-size: clamp(14px, .95vw, 19px);
  line-height: 1.33;
  color: #000;
}
.conn__btns { display: flex; gap: .4vw; margin-bottom: .25vw; }
.conn__btns .btn { height: clamp(40px, 2.5vw, 50px); font-size: clamp(12px, .88vw, 17px); }
.conn__btns .btn--outline { background: transparent; border-color: #776c64; color: var(--c-brown); }
.conn__btns .btn--outline:hover { background: var(--c-brown); border-color: var(--c-brown); color: #fff; }

.conn__body {
  display: grid;
  grid-template-columns: 36.22vw 1fr;      /* 451 · 442 */
  column-gap: 2.65vw;
  align-items: center;
  margin-top: 3.45vw;
}
.conn__map { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; }
.conn__map-link { position: relative; display: block; width: 100%; height: 100%; }
.conn__map img { width: 100%; height: 100%; object-fit: cover; }
.conn__map-link:hover .zoom-hint,
.conn__map-link:focus-visible .zoom-hint { opacity: 1; transform: none; }

/* categories */
.conn__list { display: grid; gap: .85vw; }
.cat__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: clamp(40px, 2.5vw, 50px);
  padding: 0 1.15vw 0 1.3vw;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  font-size: clamp(12px, .88vw, 17px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: left;
  color: #2b2725;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.cat__head:hover { background: rgba(255,255,255,.22); }
.cat.is-open .cat__head {
  background: var(--c-brown); border-color: var(--c-brown); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.cat__icon { position: relative; flex: none; width: clamp(11px, .8vw, 15px); height: clamp(11px, .8vw, 15px); }
.cat__icon::before,
.cat__icon::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.cat__icon::after { transform: translateY(-50%) rotate(90deg); }          /* plus */
.cat.is-open .cat__icon::after { transform: translateY(-50%) rotate(0deg); } /* minus */

/* list unfolds to its own height */
.cat__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1); }
.cat.is-open .cat__body { grid-template-rows: 1fr; }
.cat__inner { min-height: 0; overflow: hidden; }
.cat:not(.is-open) .cat__inner { visibility: hidden; transition: visibility 0s .55s; }
.cat__rows {
  margin-top: 3px;
  padding: .4vw 1.2vw .4vw 1.3vw;
  background: #fff;
}
.cat__rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: max(.28vw, 4px) 0;
  font-size: clamp(13px, .7vw, 15px);
  font-weight: 500;
  line-height: 1.35;
  color: #000;
}
.cat__rows li span:last-child { flex: none; white-space: nowrap; }

@media (max-width: 991px) {
  .conn { padding: 64px var(--gutter); }
  .conn__head { grid-template-columns: 1fr; row-gap: 16px; }
  .conn__title { font-size: clamp(34px, 7vw, 56px); }
  .conn__text { max-width: 520px; font-size: 15px; }
  .conn__btns { gap: 8px; flex-wrap: wrap; }
  .conn__btns .btn { height: 46px; font-size: 13px; }
  .conn__body { grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; margin-top: 32px; }
  .conn__map .zoom-hint { opacity: 1; transform: none; }
  .conn__list { gap: 8px; }
  .cat__head { height: 48px; padding: 0 16px; font-size: 13px; }
  .cat__icon { width: 13px; height: 13px; }
  .cat__rows { padding: 8px 16px; }
  .cat__rows li { font-size: 14px; padding: 5px 0; }
}
@media (max-width: 575px) {
  .conn__body { grid-template-columns: 1fr; row-gap: 28px; }
  .conn__btns .btn { flex: 1 1 auto; min-width: 0; }
}

/* =========================================
   FLOOR PLANS — ARC layout · plans shown blurred behind an Enquire button
   Design canvas: 1308 wide · menu x 205–349 · card x 382–906 (524 x 551, y 208)
   · info x 940 · background #f7f7f7
   ========================================= */
.plans { position: relative; background: #f7f7f7; padding: 4.6vw 0 5.2vw; }
.plans__title {
  text-align: center;
  font-size: clamp(30px, 3.65vw, 70px);    /* 70px at 1919 */
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--c-dark);
}
.plans__title .line { display: block; overflow: hidden; padding-bottom: .05em; }
.plans__title .line > span { display: inline-block; }
.plans__title em     { font-style: normal; font-weight: 200; color: var(--c-taupe); }
.plans__title strong { font-weight: 500; color: var(--c-brown); }

.plans__tabs { display: flex; justify-content: center; gap: .45vw; margin-top: 2.4vw; }
.plans__tab {
  height: clamp(32px, 2.1vw, 42px);
  padding: 0 1.3vw;
  border: 1px solid #d8d6d3;
  background: transparent;
  color: #2b2725;
  font-size: clamp(11px, .85vw, 16px);
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.plans__tab:hover { border-color: var(--c-brown); }
.plans__tab.is-active { background: var(--c-brown); border-color: var(--c-brown); color: #fff; font-weight: 600; }

.plans__body {
  display: grid;
  grid-template-columns: 26.5vw 40.1vw 1fr;     /* menu ends at 347 · card 524 */
  column-gap: 2.6vw;
  align-items: start;
  margin-top: 3.6vw;
}
.plans__menu {
  position: relative;
  justify-self: end;
  min-width: 11.1vw;                             /* 144 / 1308 */
  border-right: 1px solid #e2dbd4;
  padding: 1.2vw 0;
  text-align: right;
}
.plans__menu > li + li { margin-top: .7vw; }
.plans__marker {                                 /* sliding highlight behind the active item */
  position: absolute; right: 0; left: 0;
  top: var(--mt, 0); height: var(--mh, 0);
  background: #e4ddd7;
  transition: top .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.plans__item {
  position: relative; z-index: 1;
  display: block; width: 100%;
  padding: .25vw 1.2vw .25vw 1vw;
  text-align: right;
  color: var(--c-brown);
  font-size: clamp(11px, .88vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: -.005em;
  transition: color .3s ease;
}
.plans__item span { white-space: nowrap; }
.plans__item small { display: block; font-size: .72em; line-height: 1.2; text-transform: none; }
.plans__item:hover { color: #000; }
.plans__item.is-active { font-weight: 600; }

.plans__panel { display: contents; }
@media (min-width: 992px) { .plans__panel-inner { display: contents; } }
.plans__acc-icon { display: none; }

.plans__card {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid #e2dbd4;
  aspect-ratio: 524 / 551;
  overflow: hidden;
}
.plans__zoom { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.plans__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 4%;
  object-fit: contain;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.plans__img.is-active { opacity: 1; transform: none; }

/* Enquire button over the blurred plan (design x 580–708, centred) */
.plans__enq {
  position: absolute; inset: 0; z-index: 3;
  width: max-content; margin: auto;              /* centred without transform (animations own transform) */
  height: clamp(36px, 2.45vw, 48px);
  min-width: clamp(120px, 9.86vw, 190px);
  font-size: clamp(12px, .88vw, 17px);
  box-shadow: 0 6px 20px rgba(43,37,33,.18);
}
.plans__enq { transition: background-color .35s ease, border-color .35s ease, translate .35s ease; }
.plans__enq:hover { translate: 0 -2px; }

/* unit plans: one slider, rebuilt for the active BHK tab */
.plans__units { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .5s ease, visibility .5s; }
.plans__card.is-unit .plans__units { visibility: visible; opacity: 1; }
.plans__card.is-unit .plans__zoom { visibility: hidden; opacity: 0; }
.plans__zoom { transition: opacity .5s ease, visibility .5s; }
.plans__units-slider, .plans__units-slider .slick-list, .plans__units-slider .slick-track { height: 100%; }
.plans__units-slider .slick-slide > div { height: 100%; }
.plans__unit { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.plans__unit img { width: 100%; height: 100%; padding: 4%; object-fit: contain; }
.plans__uarrow {
  position: absolute; top: 50%; z-index: 4; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--c-brown); border: 1px solid #d9d1ca;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.plans__uarrow:hover { background: var(--c-brown); color: #fff; border-color: var(--c-brown); }
.plans__uarrow--prev { left: 10px; }
.plans__uarrow--next { right: 10px; }
.plans__ucount {
  position: absolute; left: 12px; bottom: 10px; z-index: 4;
  padding: 4px 9px; background: rgba(72,64,59,.9); color: #fff;
  font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

.plans__info { align-self: center; max-width: 13vw; padding-top: 4vw; text-align: left; }
.plans__name { font-size: clamp(13px, .98vw, 18px); font-weight: 600; text-transform: uppercase; color: #2b2725; }
.plans__desc { margin-top: .9vw; font-size: clamp(13px, .98vw, 18px); line-height: 1.33; color: #000; }
.plans__dl { margin-top: 1.9vw; height: clamp(38px, 2.5vw, 50px); font-size: clamp(11px, .85vw, 16px); }
.plans__dl.btn--outline { background: transparent; border-color: #776c64; color: var(--c-brown); }
.plans__dl.btn--outline:hover { background: var(--c-brown); border-color: var(--c-brown); color: #fff; }
.plans__name, .plans__desc { transition: opacity .35s ease, transform .35s ease; }
.plans__info.is-changing .plans__name,
.plans__info.is-changing .plans__desc { opacity: 0; transform: translateY(8px); }

@media (max-width: 991px) {
  .plans { padding: 64px 0 56px; }
  .plans__title { font-size: clamp(30px, 6.4vw, 52px); padding: 0 var(--gutter); }
  .plans__tabs { gap: 8px; margin-top: 22px; }
  .plans__tab { height: 40px; padding: 0 16px; font-size: 12px; }
  /* plan list becomes an accordion; the open item holds the plan + info */
  .plans__body { display: block; margin-top: 28px; padding: 0 var(--gutter); }
  .plans__menu { width: auto; min-width: 0; border-right: 0; padding: 0; text-align: left; border-top: 1px solid #e2dbd5; }
  .plans__menu > li { border-bottom: 1px solid #e2dbd5; }
  .plans__menu > li + li { margin-top: 0; }
  .plans__marker { display: none; }
  .plans__item { display: flex; align-items: center; gap: 8px; padding: 16px 4px; text-align: left; font-size: 14px; }
  .plans__item small { display: inline; margin: 0 0 0 2px; font-size: 12px; }
  .plans__acc-icon { display: block; position: relative; width: 14px; height: 14px; margin-left: auto; flex: none; }
  .plans__acc-icon::before, .plans__acc-icon::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px;
    background: currentColor; transition: transform .35s ease;
  }
  .plans__acc-icon::after { transform: rotate(90deg); }
  .plans__item.is-active .plans__acc-icon::after { transform: rotate(0deg); }
  .plans__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
  .plans__panel.is-open { grid-template-rows: 1fr; }
  .plans__panel-inner { overflow: hidden; }
  .plans__card { width: 100%; }
  .plans__enq { height: 44px; font-size: 13px; }
  .plans__info { max-width: none; padding: 16px 0 22px; }
  .plans__desc { margin-top: 8px; font-size: 15px; }
  .plans__dl { margin-top: 16px; height: 46px; font-size: 13px; }
}
@media (max-width: 767px) {
  .plans__uarrow { width: 34px; height: 34px; }
  .plans__uarrow--prev { left: 6px; } .plans__uarrow--next { right: 6px; }
}

/* =========================================
   FOOTER
   Design canvas: 1919 x 446 · background #48403b · text x 201
   · rules x 130–1790 (#736860) · bottom row: Phone | Email | Legal | Copyright,
     separators y 326–373, 35px either side
   ========================================= */
.foot { background: #48403b; color: #dad9d8; padding: 3.4vw 6.77vw 3.8vw; }
.foot__disc {
  padding: 0 3.7vw;                              /* 201 - 130 */
  font-size: 16px;
  line-height: normal;
  color: #c8c5c4;
}
.foot__rule {
  display: block;
  height: 1px;
  margin: 1.5vw 0 1.6vw;
  background: #736860;
  transform-origin: left center;
}
.foot__rule + .foot__bottom { margin-top: 1.85vw; }
/* Urbando logo beside the second disclaimer (light version: white wordmark for the dark footer) */
.foot__brand { display: flex; align-items: center; gap: 2.6vw; padding: 0 3.7vw; }
.foot__brand .foot__disc { flex: 1; padding: 0; }
.foot__logo { flex: none; display: block; }
.foot__logo img { width: clamp(60px, 3.75vw, 80px); height: auto; transition: transform .4s ease; }
.foot__logo:hover img { transform: translateY(-3px); }
.foot__bottom { display: flex; flex-wrap: wrap; padding: 0 3.7vw; }
.foot__col { padding: 0 1.82vw; border-left: 1px solid #655f5b; }      /* 35 / 1919 */
.foot__col:first-child { padding-left: 0; border-left: 0; }
.foot__col h3 {
  font-size: clamp(14px, .94vw, 18px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.foot__col h3 + p { margin-top: .35vw; }
.foot__col p,
.foot__col a { font-size: clamp(13px, .83vw, 16px); line-height: 1.5; color: #dad9d8; }
.foot__col a { transition: color .3s ease; }
.foot__col a:hover { color: #fff; }
.foot__sep { margin: 0 .5em; color: #dad9d8; }
.foot__legal,
.foot__copy { display: flex; flex-direction: column; justify-content: center; }
.foot__copy strong { font-weight: 500; color: #fff; }
.foot__od { display: inline-block; vertical-align: middle; margin-left: .5em; line-height: 0; }
.foot__od img { display: block; width: clamp(18px, 1.04vw, 22px); height: auto; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.foot__od:hover img { transform: rotate(-10deg) scale(1.15); }

@media (max-width: 991px) {
  .foot { padding: 44px var(--gutter) 96px; }      /* room for the WhatsApp button */
  .foot__disc { padding: 0; font-size: 13px; line-height: 1.5; }
  .foot__brand { padding: 0; gap: 20px; }
  .foot__rule { margin: 22px 0; }
  .foot__rule + .foot__bottom { margin-top: 26px; }
  .foot__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 0; }
  .foot__col { padding: 0; border-left: 0; }
  .foot__col h3 + p { margin-top: 6px; }
  .foot__legal, .foot__copy { justify-content: flex-start; }
}
@media (max-width: 575px) {
  .foot__bottom { grid-template-columns: 1fr; gap: 20px; }
  .foot__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
}