/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247,245,241,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s8);
  padding-block: var(--s4);
}

.logo {
  font-family: var(--display);
  font-weight: 800; font-size: 1.125rem;
  letter-spacing: -.02em; line-height: 1;
  flex-shrink: 0;
}
.logo b {
  display: block;
  font-family: var(--data);
  font-size: .5rem; font-weight: 700;
  letter-spacing: .3em;
  color: var(--saffron);
  margin-top: 3px;
}
.logo--lg { font-size: 1.75rem; }
.logo--lg b { font-size: .625rem; }

.nav__links {
  display: flex; gap: var(--s6);
  align-items: center; list-style: none;
  margin-left: auto;
}
.nav__links > li { position: relative; }
.nav__links a {
  font-family: var(--display);
  font-weight: 600; font-size: .9375rem;
  padding-block: var(--s3);
  display: inline-block;
}
.nav__links a:hover { color: var(--saffron); }

.has-drop > a::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 6px;
}
.drop {
  position: absolute;
  top: 100%;
  left: calc(var(--s4) * -1);
  /* Auto-filled dropdowns carry real service names — "Plot development and
     layouts" is 28 characters. 200px forced those onto two lines. Size to the
     content and cap it, so one line per item at any realistic label length. */
  min-width: 15rem;
  max-width: 22rem;
  width: max-content;
  background: var(--paper);
  border: 1px solid var(--rule);
  list-style: none;
  padding: var(--s2) 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  box-shadow: 0 8px 24px rgba(11,29,63,.08);
}
.drop.is-open { opacity: 1; visibility: visible; transform: none; }

.drop a {
  display: block;
  padding: var(--s3) var(--s5);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}
.drop a:hover { background: var(--slab); color: var(--saffron); }

/* Keep the last dropdown from running off the right edge */
.nav__links > li:last-child .drop,
.nav__links > li:nth-last-child(2) .drop { left: auto; right: calc(var(--s4) * -1); }

.nav__right { display: flex; align-items: center; gap: var(--s4); }
.nav__call {
  font-family: var(--data);
  font-size: var(--t-data); font-weight: 700;
  border: 1.5px solid var(--ink);
  padding: 8px 14px;
  white-space: nowrap;
}
.nav__call:hover { background: var(--ink); color: var(--paper); }

.nav__burger {
  display: none;
  flex-direction: column; gap: 4px;
  background: 0; border: 0; cursor: pointer; padding: 6px;
}
.nav__burger span {
  width: 22px; height: 2px; background: var(--ink); display: block;
}

/* mobile sheet */
.sheetnav {
  position: fixed; inset: 0;
  z-index: 55;
  background: var(--paper);
  padding: calc(var(--s16) + var(--s8)) var(--gutter) var(--s8);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sheetnav.is-open { transform: none; }
.sheetnav ul { list-style: none; flex: 1; }
.sheetnav > ul > li { border-bottom: 1px solid var(--rule); }
.sheetnav > ul > li > a {
  display: block;
  font-family: var(--display);
  font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.03em;
  padding: var(--s4) 0;
}
.sheetnav .sub {
  display: block;
  font-family: var(--body);
  font-size: 1rem;
  padding: var(--s2) 0 var(--s2) var(--s4);
  color: #2C3A57;
}
.sheetnav .btn { margin-top: var(--s6); justify-content: center; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__call { display: none; }
}
@media (min-width: 901px) { .sheetnav { display: none; } }

/* ============================================================
   STICKY CALL BAR — mobile only. Leads are priority #1.
   ============================================================ */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 70;
    border-top: 1px solid var(--rule);
  }
  .callbar a {
    text-align: center;
    padding: var(--s4);
    font-family: var(--display);
    font-weight: 700; font-size: 1rem;
  }
  .callbar__call { background: var(--saffron); color: #fff; }
  .callbar__wa   { background: var(--navy);    color: var(--paper); }
  body { padding-bottom: 56px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FLOATING WHATSAPP
   Pulsing rings, matching the reference. Animates transform +
   opacity only, so it's GPU-composited and cheap on mobile.
   ============================================================ */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 65;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #fff;
}

.wa__dot {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.34);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa:hover .wa__dot {
  transform: scale(1.06);
  box-shadow: 0 6px 22px rgba(37,211,102,.46);
}
.wa:active .wa__dot { transform: scale(.97); }

/* The rings. Two, offset, so the pulse reads as continuous. */
.wa__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.wa.is-live .wa__ring {
  animation: wa-pulse 2.4s cubic-bezier(.22,1,.36,1) 4;
}
.wa.is-live .wa__ring--2 { animation-delay: .8s; }

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(2.1); opacity: 0;   }
  100% { transform: scale(2.1); opacity: 0;   }
}

/* Nudge above the mobile call bar so they don't overlap */
@media (max-width: 720px) {
  .wa { bottom: 70px; width: 52px; height: 52px; }
  .wa__dot { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa.is-live .wa__ring { animation: none; }
  .wa:hover .wa__dot { transform: none; }
}

/* ============================================================
   FOOTER — three columns on indigo, as on the previous site
   ============================================================ */
.foot {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  /* Space above the footer scales with the viewport — 4rem is fine on a phone
     but looks cramped on a wide screen where the content column is short. */
  margin-top: clamp(var(--s12), 8vw, var(--s24));
  position: relative;
  overflow: hidden;
}
/* Faint grid, tying back to the drawing-sheet idea without shouting */
.foot::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.04) 79px 80px),
    repeating-linear-gradient(0deg,  transparent 0 79px, rgba(255,255,255,.04) 79px 80px);
  pointer-events: none;
}

.foot__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr .8fr 1.3fr;
  gap: var(--s10);
  /* Generous at the top: the footer is a change of context, and the columns
     need room to breathe below the fold. */
  padding-block: clamp(var(--s12), 6vw, var(--s24)) var(--s12);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
@media (max-width: 600px) { .foot__grid { grid-template-columns: 1fr; } }

.foot__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
  padding-bottom: var(--s3);
  margin-bottom: var(--s5);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.foot__about { line-height: 1.7; max-width: 38ch; font-size: var(--t-sm); }

.foot__social { list-style: none; display: flex; gap: var(--s3); margin-top: var(--s6); }
.foot__social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--white);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.foot__social a:hover { background: var(--saffron); transform: translateY(-2px); }

.foot__links { list-style: none; display: grid; gap: var(--s3); }
.foot__links a {
  color: rgba(255,255,255,.72);
  font-size: var(--t-sm);
  transition: color .16s var(--ease), padding-left .16s var(--ease);
}
.foot__links a:hover { color: var(--white); padding-left: 4px; }

/* ---- Contact ---- */
.foot__contact { list-style: none; display: grid; gap: var(--s5); }
.foot__contact li { display: flex; gap: var(--s4); align-items: flex-start; }
.foot__ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--saffron);
}
.foot__contact b {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: .9375rem;
  margin-bottom: 2px;
}
.foot__contact a {
  color: rgba(255,255,255,.72);
  font-size: var(--t-sm);
  line-height: 1.5;
  transition: color .16s var(--ease);
}
.foot__contact a:hover { color: var(--saffron); }

/* ---- Bottom bar ---- */
.foot__bar {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.foot__barin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-block: var(--s5);
  font-size: var(--t-sm);
}
.foot__legal { display: flex; gap: var(--s5); }
.foot__legal a { color: rgba(255,255,255,.72); }
.foot__legal a:hover { color: var(--saffron); }

/* Clear the fixed mobile call bar */
@media (max-width: 720px) { .foot__bar { padding-bottom: 56px; } }

/* ---- Uploaded logo ---- */
/* Sized by HEIGHT, so any aspect ratio works. The uploaded mark is 7.5:1
   (405x54) — a max-width of 220px would have shrunk it to fit rather than
   letting it use its natural width. object-fit:contain guards against a
   squashed logo if someone uploads an unusual shape. */
.logo__img {
  display: block;
  height: clamp(26px, 3.2vw, 36px);
  width: auto;
  max-width: min(340px, 42vw);
  object-fit: contain;
}
@media (max-width: 720px) {
  .logo__img { height: 26px; max-width: 50vw; }
}
.foot__logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  margin-bottom: var(--s5);
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang { display: flex; align-items: center; }

.lang__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.lang__opt {
  display: block;
  padding: 5px 10px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.lang__opt:hover { background: var(--slab); color: var(--ink); }
.lang__opt.is-on { background: var(--navy); color: var(--white); }

/* Telugu and Tamil glyphs are taller than Latin — give them a touch more room
   so the buttons don't look cramped next to "English". */
.lang__opt:not(:first-child) { padding-block: 3px; font-size: .875rem; }

/**
 * Mobile: the switcher moves to its own row under the logo.
 *
 * On one line it was 185px wide next to a 61px logo — half the screen for a
 * control most visitors use once, and it squeezed the phone number to zero
 * width and overflowed the viewport below 360px.
 *
 * `order` moves it below without changing the markup order, so the tab sequence
 * stays logical: logo, languages, phone, menu.
 */
/**
 * Mobile: the switcher gets its own row, directly under the logo.
 *
 * Side by side it was 185px next to a 61px logo — half the screen for a control
 * most people use once. It squeezed the phone number to zero width and
 * overflowed the viewport below 360px.
 *
 * The switcher is lifted OUT of .nav__right (which stays as phone + burger) and
 * placed as a third grid item spanning the full width. `order` handles the
 * position, so the markup and tab sequence are untouched.
 */
@media (max-width: 900px) {
  .nav__in {
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--s3);
  }

  .logo       { order: 1; }
  .nav__right { order: 2; margin-left: auto; gap: var(--s4); }

  /* Its own full-width row under the logo. min-width:100% rather than
     flex-basis so it can't be shrunk by a sibling. */
  .lang {
    order: 3;
    min-width: 100%;
    margin: 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
  }
  .lang__list { width: 100%; }

  /* flex on the <li>, not just the <a> — the anchor can't stretch a list item
     that's sizing to its own content, which left the three options at 77/62/51px
     because Telugu and Tamil glyphs are narrower than "English". */
  .lang__list > li { flex: 1; display: flex; }
  .lang__opt {
    flex: 1;
    text-align: center;
    padding-block: 9px;
    font-size: .875rem;
  }
}

/* Below ~400px the phone number and burger can't share a row with the logo.
   The number is still in the sticky call bar at the bottom of every page, so
   hiding it here costs nothing. */
@media (max-width: 400px) {
  .nav__call { display: none; }
}