/* Grand Metro Developers — site design system */
/* Honeypot field: off-screen, not display:none (some bots skip that), so it
   stays invisible and unreachable to real visitors but still catches simple
   form-filling bots that populate every input. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
/* Skip-to-content link: off-screen until keyboard-focused, then jumps
   above the header so keyboard users don't have to tab through the full
   nav on every page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:12px 20px;background:#2451B7;color:#fff;font-weight:600;text-decoration:none;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
:root{
  --navy:#2451B7;
  --navy-2:#1B3D8F;
  --gold:#FF9A42;
  --gold-light:#FFC896;
  --orange:#FF7A1A;
  --cream:#F5F8FF;
  --gray-100:#EEF3FC;
  --gray-300:#D7E2F5;
  --gray-600:#5A6B85;
  --text:#16223D;
  --white:#ffffff;
  --success:#25d366;
  --teal:#0E9F87;
  --teal-light:#4FD1B5;
  --violet:#7C5CFC;
  --violet-light:#B7A6FF;
  --radius:10px;
  --shadow:0 8px 24px rgba(36,81,183,.10);
  --shadow-lg:0 16px 40px rgba(36,81,183,.16);
  --maxw:1180px;
  --header-h:90px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
section[id]{scroll-margin-top:90px}
body{
  margin:0;
  font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
}
/* The support email (themetrolifedevelopers@gmail.com) is one unbroken
   33-character word with nowhere to wrap — dropped into a <p> at typical
   phone widths (as on /privacy and the home enquiry section) it forces the
   line, and the page, past the viewport. .footer-link and the contact page
   already patched this one spot at a time; fixing every <p> here matches
   the fix that was already applied ad hoc, and covers wherever else the
   same email/URL pattern turns up next. */
p{overflow-wrap:anywhere}
h1,h2,h3,h4{
  font-family:'Poppins',Inter,sans-serif;
  color:var(--navy);
  margin:0 0 .5em;
  line-height:1.25;
}
h1{font-family:'Playfair Display',Poppins,serif;font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:700}
h2{font-family:'Playfair Display',Poppins,serif;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em;color:var(--gray-600)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.icon{flex-shrink:0;vertical-align:-4px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:64px 0;position:relative}
.section-alt{
  background:
    radial-gradient(circle at 85% 0%,rgba(255,122,26,.06),transparent 45%),
    linear-gradient(rgba(36,81,183,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,81,183,.04) 1px,transparent 1px),
    var(--gray-100);
  background-size:auto,34px 34px,34px 34px,auto;
}

/* Gold-foil text treatment */
.text-gold{
  background:linear-gradient(115deg,#CC5A00 10%,#FFDCB0 35%,#FF7A1A 55%,#FFE7C9 75%,#CC5A00 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Wave section divider */
.wave-divider{line-height:0;margin-top:-1px}
.wave-divider svg{width:100%;height:44px;display:block}

/* Hamburger (CSS-drawn, no emoji/icon-font dependency) — inherits the
   toggle button's color so it stays visible on the dark header instead of
   the hardcoded navy that used to blend into it. Morphs into an X when the
   mobile nav is open (menu-toggle.open, set by main.js). */
.hamburger{position:relative;display:block;width:20px;height:2px;background:currentColor;transition:background .2s ease}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:top .2s ease,transform .2s ease}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}
.menu-toggle.open .hamburger{background:transparent}
.menu-toggle.open .hamburger::before{top:0;transform:rotate(45deg)}
.menu-toggle.open .hamburger::after{top:0;transform:rotate(-45deg)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-1{transition-delay:.05s}.reveal-2{transition-delay:.12s}.reveal-3{transition-delay:.19s}
.reveal-4{transition-delay:.26s}.reveal-5{transition-delay:.33s}.reveal-6{transition-delay:.4s}
/* Scale-in variant — used for hero "moments" (the map visual frame, the
   big feature-stat number) instead of the standard slide-up. */
.reveal.reveal-scale{transform:scale(.94);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.reveal-scale.in-view{transform:scale(1)}

/* Mobile sticky Call/WhatsApp bar — a floating inset pill (rounded, off
   the edges, its own shadow) rather than a flush full-width flat strip,
   matching the more considered look the rest of the site got in later
   passes (nav drawer, project card). .wa-float is hidden entirely at
   this breakpoint — with this bar already covering both call and
   WhatsApp, the separate floating WhatsApp circle was pure redundancy,
   and the two were colliding visually (the circle sitting right on top
   of this bar's own WhatsApp half). Desktop/tablet (>760px, no sticky
   bar at all) keeps .wa-float as the only quick-contact affordance
   there. */
.mobile-sticky-bar{display:none}
@media (max-width:760px){
  /* White pill, not two solid color blocks — the earlier navy+green
     gradient pair read as loud/generic-app-UI (two fully-saturated
     colors of equal weight, jammed edge to edge). One calm white bar
     with each action's own color carried by its icon/text instead, plus
     a thin divider rather than a hard color seam — same information,
     much quieter, closer to the restrained language the rest of the
     site's cards/badges already use. */
  .mobile-sticky-bar{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:65;display:flex;
    border-radius:16px;background:var(--white);border:1px solid var(--gray-300);
    transform:translateY(140%);transition:transform .3s ease;
    box-shadow:0 14px 32px -10px rgba(10,20,50,.22);
  }
  .mobile-sticky-bar.visible{transform:translateY(0)}
  .msb-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
    padding:14px 10px;font-weight:700;font-size:.92rem;
    transition:background .15s ease,transform .15s ease;
  }
  .msb-btn:active{transform:scale(.97)}
  /* Icon gets its own small tinted circle — a touch of each action's
     brand color without filling the whole button with it. */
  .msb-btn .icon{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:30px;height:30px;border-radius:50%;padding:6px;box-sizing:border-box;
  }
  .msb-call{color:var(--navy);border-radius:16px 0 0 16px;position:relative}
  .msb-call::after{content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:var(--gray-300)}
  .msb-call .icon{background:rgba(36,81,183,.1)}
  .msb-call:active{background:rgba(36,81,183,.05)}
  .msb-wa{color:#1DA851;border-radius:0 16px 16px 0}
  .msb-wa .icon{background:rgba(37,211,102,.12)}
  .msb-wa:active{background:rgba(37,211,102,.06)}
  /* .wa-float's hide rule lives near its own base rule further down the
     file, not here — same selector/specificity, and a rule placed here
     would lose the cascade tie-break to the base rule appearing later in
     the file (this bit the footer padding-bottom rule below too). */
}
.eyebrow{
  display:inline-block;color:var(--orange);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.78rem;margin-bottom:10px;
}
.center{text-align:center}
.lede{max-width:640px;margin:0 auto 40px;color:var(--gray-600)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-weight:600;font-size:.95rem;cursor:pointer;border:2px solid transparent;transition:.2s;
}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary:hover{background:#E56A0F}
.btn-outline{border-color:var(--white);color:var(--white)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-2)}
.btn-whatsapp{background:var(--success);color:var(--white)}

/* Header — full-width bar overlaid on page content; site-main's padding-top
   (below) reserves the space it no longer takes in flow. Uses an opaque-ish
   gradient (not a thin translucent tint) so it reads as a deliberate navy
   surface everywhere, instead of picking up muddy tones from whatever photo
   scrolls underneath it. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(115deg,rgba(8,16,42,.92),rgba(19,37,84,.92));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,154,66,.55) 50%,transparent);
}
.site-header.scrolled{background:linear-gradient(115deg,#070d24,#0f1d47);box-shadow:0 10px 28px rgba(4,10,28,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;max-width:var(--maxw);margin:0 auto;transition:padding .3s ease}
.site-header.scrolled .header-inner{padding:11px 24px}
.brand{display:flex;align-items:center}
/* Semibold rather than bold/black, tight tracking, one line at a modest
   size — the full company name reads as a calm wordmark instead of
   shouting, and stays level with the nav/phone/CTA row beside it. */
.brand-name{font-family:Poppins,sans-serif;font-weight:600;color:var(--white);font-size:.98rem;letter-spacing:-.005em;line-height:1;white-space:nowrap}
/* Nav reads as its own pill-within-the-pill (glass track, solid-white active
   state) rather than plain inline links. */
.nav{
  display:flex;gap:2px;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:4px;
}
.nav a{
  position:relative;font-weight:600;font-size:.83rem;line-height:1;color:rgba(255,255,255,.82);white-space:nowrap;
  padding:11px 14px;border-radius:999px;
  transition:color .2s ease,background .2s ease;
}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.1)}
.nav a.active{color:var(--navy-2);background:var(--white)}
/* Call CTA appended inside the nav track itself, after the links — only
   meant for the mobile drawer (see max-width:900px below), where it
   replaces .header-cta's .phone-pill (dropped there for space, see that
   rule's comment). Hidden here on desktop, where .phone-pill already
   covers this and .nav is a plain inline pill-track with no room for a
   full-width CTA anyway. Same reasoning for .nav-eyebrow/.nav-contact —
   both mobile-drawer-only, see max-width:900px below. */
.nav-call,.nav-eyebrow,.nav-contact{display:none}
.header-cta{display:flex;gap:10px;align-items:center}
/* Same glass-pill treatment as the nav track beside it (same background,
   border and radius) so it reads as one more pill in that family, not a
   loose bit of text. */
.phone-pill{
  display:flex;align-items:center;gap:8px;font-weight:600;color:rgba(255,255,255,.85);font-size:.83rem;line-height:1;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;
  padding:11px 16px;transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.phone-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--white)}
/* Sized to the same padding/radius rhythm as the phone pill and nav track
   beside it — the base .btn's larger padding made this the one oversized,
   over-glowing shape in an otherwise light, evenly-scaled row. */
.site-header .header-cta a.btn-navy{
  padding:11px 22px;font-size:.83rem;line-height:1;
  background:linear-gradient(120deg,var(--orange),var(--gold));color:var(--white);
  box-shadow:0 4px 14px rgba(255,122,26,.3);transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.site-header .header-cta a.btn-navy:hover{
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,122,26,.4);
  background:linear-gradient(120deg,var(--gold),var(--orange));
}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--white);padding:6px;line-height:0}

/* site-main reserves the space the now-fixed header no longer occupies in
   flow. Pages that want a full-bleed photo/dark hero behind the header
   (currently just the homepage) cancel this with their own negative
   margin-top — see .home-hero. */
.site-main{padding-top:var(--header-h)}

@media (max-width:900px){
  /* Mobile nav — a full-screen navy takeover, not a floating card. It
     reuses the hero's own deep navy (#0A1530) rather than white, so
     opening it reads as "the site plan" replacing the page for a moment
     instead of an app-generic dropdown; the header stays pinned on top
     (same near-navy, blurred glass) so the two feel like one surface.
     The faint grid lines behind the links are a deliberate, restrained
     nod to what this company actually sells — a subdivided, numbered
     plot layout — rather than decoration for its own sake. Links set in
     the site's own display serif (Playfair, same face as every page's
     H1) at editorial size, not compact UI-sized pill buttons. */
  .nav{
    /* height, not bottom:0 — .site-header has backdrop-filter, which makes
       it the containing block for this fixed-position child, so bottom:0
       would resolve against the header's own small box instead of the
       viewport. height:100vh/100svh is viewport-relative regardless of
       containing block, so it isn't affected by that. */
    position:fixed;top:var(--header-h);left:0;right:0;z-index:90;
    height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
    display:block;background:#0A1530;
    background-image:
      repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 56px),
      repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 56px);
    padding:0;border-radius:0;border:none;box-shadow:none;
    transform:translateX(100%);visibility:hidden;pointer-events:none;overflow-y:auto;
    transition:transform .4s cubic-bezier(.4,0,.2,1),visibility 0s linear .4s;
  }
  .nav.open{
    transform:translateX(0);visibility:visible;pointer-events:auto;
    padding:32px 28px 40px;
    transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .nav.open .nav-eyebrow{
    display:block;font-family:Poppins,sans-serif;color:var(--orange);font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;margin-bottom:20px;
  }
  .nav.open a{
    display:block;color:rgba(255,255,255,.6);text-align:left;position:relative;
    font-family:'Playfair Display',Poppins,serif;font-weight:700;font-size:1.5rem;line-height:1.3;
    padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.12);
    background:none;border-radius:0;
    opacity:0;transform:translateY(10px);
    animation:navLinkIn .45s ease forwards;
  }
  .nav.open a:first-of-type{border-top:1px solid rgba(255,255,255,.12)}
  .nav.open a:nth-of-type(1){animation-delay:.06s}
  .nav.open a:nth-of-type(2){animation-delay:.1s}
  .nav.open a:nth-of-type(3){animation-delay:.14s}
  .nav.open a:nth-of-type(4){animation-delay:.18s}
  .nav.open a:nth-of-type(5){animation-delay:.22s}
  .nav.open a:nth-of-type(6){animation-delay:.26s}
  @keyframes navLinkIn{to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion:reduce){
    .nav.open a{animation:none;opacity:1;transform:none}
  }
  .nav.open a:hover{color:var(--white)}
  /* Gold, not a filled pill — a slim accent bar in the left margin is
     enough wayfinding without boxing the link the way every other button
     on the page is boxed. */
  .nav.open a.active{color:var(--gold-light)}
  .nav.open a.active::before{
    content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
    width:3px;height:22px;background:var(--gold-light);border-radius:2px;
  }
  .menu-toggle{display:block}
  /* Hides the whole button, not just its label — the label span wraps the
     entire text, so hiding only the label left an empty pill outline. */
  .header-cta a.btn-navy{display:none}
  /* .phone-pill dropped from the compact header entirely on mobile — with
     the brand wordmark, phone pill AND hamburger all fighting for one
     narrow row, the hamburger was getting squeezed to the point of
     clipping off the edge on real phone widths (not just very narrow
     ones — the old max-width:380px cutoff wasn't tight enough). Brand +
     hamburger alone comfortably fits any phone width; the phone number
     moves into the drawer as .nav-call instead, see below. */
  .header-cta .phone-pill{display:none}
  /* Contact block at the foot of the drawer, replacing the header's
     .phone-pill on mobile. An outlined gold pill, not a solid block —
     quieter than the serif list above it, so it reads as "one more way
     to reach us" rather than competing with the page's own orange CTAs. */
  .nav.open .nav-contact{
    display:block;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  }
  .nav.open .nav-contact-label{
    display:block;font-family:Poppins,sans-serif;color:rgba(255,255,255,.5);font-size:.85rem;margin-bottom:12px;
  }
  .nav.open .nav-call{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 16px;border-radius:999px;border:1.5px solid var(--gold-light);
    color:var(--gold-light);font-family:Poppins,sans-serif;font-weight:700;font-size:.95rem;
    transition:background .2s ease;
  }
  .nav.open .nav-call:hover{background:rgba(255,200,150,.1)}
}

/* Hero — used as the plain page-title band on Navaratna Garden's own page.
   A clean gradient, not a photo: the old version layered a translucent tint
   over the promotional flyer image (navaratna-plot-layout.jpg), which has
   bright printed text and a route-map baked into it that ghosted through
   behind the headline at any reasonable overlay opacity. */
.hero{
  position:relative;color:var(--white);
  background:linear-gradient(135deg,#132A5E 0%,#1B3D8F 55%,#2451B7 100%);
  padding:100px 0 90px;
}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.badge{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);
  padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.02em;
}
.hero h1{color:var(--white);max-width:820px}
.hero p.sub{color:#C9D9F5;max-width:600px;font-size:1.05rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* Homepage hero — full-bleed photo, full-screen height on every device
   (100vh/100svh — the native CSS unit that adapts to whatever the actual
   viewport is, on any device, without per-breakpoint tuning), headline/
   CTA/trust content overlaid on top. Nothing below it is visible until
   the visitor scrolls — that's an explicit requirement, not a side
   effect. Some crop is inherent to object-fit:cover filling an arbitrary
   viewport shape with one photo; accepted this time in exchange for
   guaranteed full-screen coverage on every device — see the object-
   position note on .home-hero-media img. */
/* Pin wrapper — taller than the viewport so .home-hero (sticky, below) has
   scroll distance to transform across before it releases into normal flow.
   The negative margin lives here now, not on .home-hero itself, so the
   sticky child still starts flush under the fixed header on load. */
.home-hero-pin{
  position:relative;height:170vh;height:170svh;
  margin-top:calc(var(--header-h) * -1);
}
.home-hero{
  position:sticky;top:0;overflow:hidden;color:var(--white);
  padding:calc(var(--header-h) + 40px) 0 90px;
  height:100vh;height:100svh;display:flex;align-items:center;
  background:#0A1530;
}
.home-hero-media{position:absolute;inset:0;z-index:0}
/* object-position keeps the open sky/negative-space corner of the square
   source photo under where the text sits, rather than dead-center. Starts
   scaled up and softly out of focus — main.js's scroll handler zooms it
   out and sharpens it as the pin section scrolls past, so the full plot
   layout resolves into view. The scale/blur here are the resting (0%
   scroll and no-JS) state; transform/filter are overwritten inline once
   the scroll handler takes over. */
.home-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(.92) brightness(.98) blur(6px);
  transform:scale(1.22);transform-origin:center;
}
.home-hero-scrim{
  position:absolute;inset:0;
  background:rgba(0,0,0,.5);
}
/* Content block moves/fades as one unit via inline transform/opacity from
   main.js as the visitor scrolls through the pin — separate from each
   child's own .reveal entrance animation on load, so the two never fight
   over the same property at the same time. */
.home-hero-content{will-change:transform,opacity}
.home-hero-media img{will-change:transform,filter}
/* Scroll cue — small bouncing mouse glyph, bottom-center. Fades out over
   the first sliver of scroll (main.js) so it reads as an invitation, not
   a permanently stuck UI element once the visitor is already scrolling. */
.home-hero-scrollcue{
  position:absolute;left:50%;bottom:28px;z-index:1;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.75);text-shadow:0 2px 10px rgba(0,0,0,.4);
  pointer-events:none;
}
.home-hero-scrollcue span{
  width:22px;height:36px;border:2px solid rgba(255,255,255,.6);border-radius:12px;
  position:relative;
}
.home-hero-scrollcue span::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;border-radius:2px;background:rgba(255,255,255,.85);
  animation:heroScrollCueDrop 1.8s ease infinite;
}
@keyframes heroScrollCueDrop{
  0%{opacity:1;transform:translate(-50%,0)}
  70%{opacity:0;transform:translate(-50%,14px)}
  100%{opacity:0;transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){
  .home-hero-scrollcue span::before{animation:none}
  /* main.js skips the scroll-zoom effect entirely under reduced motion, so
     collapse the pin back to a plain full-height section instead of
     leaving dead, un-animated scroll distance above the price banner. */
  .home-hero-pin{height:auto}
  .home-hero{position:relative}
  .home-hero-media img{transform:none;filter:saturate(.92) brightness(.98)}
}
.home-hero > .container{width:100%}
.home-hero-content{position:relative;z-index:1;max-width:640px}
.home-hero h1{
  color:var(--white);font-size:clamp(2.2rem,4.2vw,3.2rem);line-height:1.1;letter-spacing:-.01em;
  text-shadow:0 3px 20px rgba(0,0,0,.55);
}
.home-hero-accent{color:var(--gold-light)}
.home-hero-sub{color:rgba(255,255,255,.9);font-size:1.05rem;line-height:1.55;margin-top:16px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.home-hero .hero-actions{margin-top:30px}
/* Compliance line — small, textual, secondary, after the CTAs so it's not
   competing with the headline for first-glance attention. Each badge is
   its own frosted-glass pill rather than plain text with a dot separator
   — reads as two distinct credentials, not one run-on line. */
.home-hero-trust{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:26px;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.9);
}
.home-hero-trust span{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:8px 14px;
  box-shadow:0 4px 16px -4px rgba(0,0,0,.25);
}
.home-hero-trust .data-pending{background:none;border:none;color:rgba(255,255,255,.75);padding:0;font-weight:600}

/* Price banner — the one deliberately loud moment on the home page. The
   hero above is navy and the stats strip below is plain white, so an
   orange/gold band between them reads as a genuine interruption rather
   than another quiet section, which is the point: this is the single
   number the whole page wants a visitor to leave remembering. */
.price-banner{
  position:relative;overflow:hidden;padding:56px 0;text-align:center;color:#fff;
  background:linear-gradient(120deg,var(--orange),#FF9A42 55%,var(--gold-light));
}
.price-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:26px 26px;
}
.price-banner-inner{position:relative}
/* .eyebrow is inline-block site-wide (fine everywhere else, since it's
   always followed by a block-level heading) — here it's followed by
   .price-banner-amount, another inline-level box, and two inline-level
   boxes in a row share a line instead of stacking. Forcing block here
   (scoped to this instance, not the shared .eyebrow class) keeps the
   amount on its own line under the eyebrow instead of beside it. */
.price-banner-eyebrow{display:block;color:#fff;opacity:.95}
/* Plain bold text straight on the gradient, not boxed in a translucent
   panel — a glass-tag treatment tried here first muted the gradient's own
   saturation right where it should be brightest, which read as duller
   than the surrounding band instead of the loudest part of it. */
.price-banner-amount{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px;
  font-family:Poppins,sans-serif;font-weight:800;font-size:clamp(3.6rem,10vw,6.5rem);
  letter-spacing:-.02em;line-height:1;text-shadow:0 8px 26px rgba(0,0,0,.22);
}
/* Same fix as the EMI calculator's amount — Poppins has no ₹ glyph, so the
   symbol gets a font that actually has one instead of silently falling
   back to a mismatched system font. */
.price-banner-rupee{font-family:Inter,'Noto Sans',sans-serif;font-weight:700}
.price-banner-lakhs{font-size:clamp(1rem,2.6vw,1.5rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.price-banner-sub{max-width:520px;margin:16px auto 28px;color:rgba(255,255,255,.95);font-size:1rem;line-height:1.6}
.price-banner-cta{box-shadow:0 10px 24px -8px rgba(10,21,64,.5)}

/* Stats — a plain, quiet section fully split from the hero (own white
   background, not a navy continuation), so it reads as a simple factual
   strip rather than another branded/graded moment. */
.stats-section{background:var(--white)}
.home-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:44px 0}
.home-hero-stats > div{text-align:center;position:relative}
.home-hero-stats > div:not(:last-child)::after{
  content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:var(--gray-300);
}
.home-hero-stats .num{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1.9rem;color:var(--text)}
.home-hero-stats .lbl{display:block;font-size:.8rem;color:var(--gray-600);margin-top:4px}

@media (max-width:640px){
  .home-hero-stats{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .home-hero-stats > div::after{display:none}

  /* Price text was wrapping to two cramped lines against the quick-action
     icons at this width — trimmed size/gap rather than stacking the row,
     so price and actions still read as one glanceable line. */
  .project-cta-row{gap:10px}
  .project-price{font-size:.92rem}
  .project-quick-actions a{width:38px;height:38px}

  /* Mobile hero — still full-screen (100vh/100svh, from the base rule,
     unchanged here) with the same overlay content, just tighter
     type/spacing and side-by-side (not stacked) pill buttons to fit the
     narrower width. Content stays vertically centered via the base
     rule's flex/align-items:center, so it never sits pinned to the very
     bottom edge where the fixed WhatsApp float button lives. */
  .home-hero-content{max-width:none}
  .home-hero-pin{height:135vh;height:135svh}
  .home-hero{padding:calc(var(--header-h) - 6px) 0 32px}
  .home-hero-scrollcue{bottom:18px}
  .home-hero h1{font-size:1.7rem;line-height:1.22;text-shadow:none}
  .home-hero-sub{font-size:.95rem;line-height:1.55;margin-top:14px;text-shadow:none}
  .home-hero .hero-actions{margin-top:22px;flex-wrap:nowrap;gap:10px}
  .home-hero .hero-actions .btn{
    flex:1;justify-content:center;padding:13px 8px;font-size:.85rem;white-space:normal;text-align:center;
  }
  .home-hero-trust{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}
}
/* Narrowest phones (iPhone SE-class, 320-340px) — at the sizing above,
   the primary button's "View Projects" label wrapped to two cramped
   lines. A small additional trim here (not needed at 360px+) keeps it
   to one line. */
@media (max-width:340px){
  .home-hero h1{font-size:1.5rem}
  .home-hero .hero-actions .btn{font-size:.76rem;padding:12px 6px}
}

/* Cards */
.grid{display:grid;gap:26px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

/* Every grid container's items default to min-width:auto, which resolves
   to the item's content min-content size rather than shrinking to fit —
   a <select> with a long option, or any other unbreakable content, then
   forces its track past the container and the whole page gains a
   horizontal scrollbar (confirmed on .enquiry at 320px: its 1fr track
   computed to 276.6px against a 216px content box). Reset it everywhere a
   grid holds form fields or cards, not only where it's already been seen,
   since the same content shapes recur across pages that share this file. */
.grid > *,
.enquiry > *,
.contact-main-grid > *,
.emi-calc > *,
.footer-grid > *,
.vm-grid > *,
.project-card > *,
.blog-featured > *,
.blog-list-item > *,
.contact-hero-card > *,
.testimonial-slide > * {
  min-width: 0;
}

/* Stats bar — shared by any page wanting a plain navy stat band (About Us
   uses this; the homepage now has its own .stats-section instead). Was
   accidentally deleted while reworking the homepage hero; restored here. */
.stats-bar{background:var(--navy);color:var(--white)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 0;text-align:center}
.stats-grid .num{font-family:Poppins,sans-serif;font-weight:700;font-size:2rem;color:var(--gold-light)}
.stats-grid .lbl{font-size:.82rem;color:#B9CDF2;margin-top:4px}
@media (max-width:700px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

.card{
  background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:.35s cubic-bezier(.2,.8,.3,1);
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.card .card-body{padding:22px}
.card .status-pill{
  display:inline-block;background:var(--gold);color:var(--white);font-size:.72rem;font-weight:700;
  padding:4px 12px;border-radius:999px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;
}
/* Project address line — small pin icon leading the text, same pattern
   as the fact grid below rather than plain unmarked paragraph text. */
.project-address{display:flex;align-items:flex-start;gap:8px;color:var(--gray-600);margin-bottom:20px}
.project-address .icon{color:var(--orange);flex-shrink:0;margin-top:3px}
/* Quick-scan fact grid — icon + label + value, replacing a checklist of
   full sentences with the same "glance and compare" pattern a shopper
   expects from a listings site: four numbers, not four paragraphs. */
.project-facts{
  display:flex;flex-direction:column;gap:14px;
  padding:18px 0;border-top:1px solid var(--gray-300);border-bottom:1px solid var(--gray-300);
}
.project-fact{display:flex;align-items:flex-start;gap:10px}
.project-fact .icon{color:var(--orange);flex-shrink:0;margin-top:2px}
.project-fact-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-600)}
.project-fact-value{display:block;font-weight:700;color:var(--text);font-size:.95rem;margin-top:2px;line-height:1.3}
/* Price + quick-contact row, above the main CTA — a one-tap call/WhatsApp
   doesn't need the visitor to open the full plot-details page first. */
.project-cta-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:20px 0 16px}
.project-price{font-family:Poppins,sans-serif;font-weight:700;font-size:1.05rem;color:var(--navy)}
.project-price small{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:.7rem;color:var(--gray-600);text-transform:uppercase;letter-spacing:.03em}
.project-quick-actions{display:flex;gap:8px;flex-shrink:0}
.project-quick-actions a{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;
  border:1.5px solid var(--gray-300);color:var(--navy);transition:.2s ease;flex-shrink:0;
}
.project-quick-actions a:hover{border-color:var(--navy);background:var(--gray-100)}
.project-quick-actions a.wa{color:var(--success);border-color:rgba(37,211,102,.35)}
.project-quick-actions a.wa:hover{background:rgba(37,211,102,.08);border-color:var(--success)}
.card > img{transition:transform .5s ease}
.card:has(> img):hover > img{transform:scale(1.06)}
.card > img{aspect-ratio:16/10;object-fit:cover}

/* Frames the layout-brochure diagram — object-fit:contain (not cover) so
   none of the plot table gets cropped off, but capped to a sane height so
   it doesn't balloon to the source image's full 1600x1035 on a full-width
   mobile column, which is what made it read as an oversized "tall, mostly
   white" image dominating the page. */
.brochure-frame{
  background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);aspect-ratio:8/5;max-height:480px;padding:14px;
}
.project-card{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.project-card > img{height:100%}
@media (max-width:760px){
  .project-card{grid-template-columns:1fr}
  .project-card > img{height:auto}
}
.feature-card{text-align:center;padding:30px 22px;transition:.35s cubic-bezier(.2,.8,.3,1)}
.feature-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-lg)}
/* Each card gets its own colored gradient badge instead of a single repeated
   orange-on-white circle — six identical badges read as a template; six
   distinct ones (same category-color system as the location page's stat
   icons) read as designed. White icons throughout keep them all the same
   *weight*, which is what the outline-vs-filled WhatsApp glyph used to break. */
.feature-icon{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;
  box-shadow:0 10px 22px -8px rgba(4,10,30,.35);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover .feature-icon{transform:scale(1.08) rotate(6deg)}
.feature-icon.cat-trust{background:linear-gradient(135deg,var(--navy),#4C7CFF)}
.feature-icon.cat-build{background:linear-gradient(135deg,var(--orange),var(--gold))}
.feature-icon.cat-location{background:linear-gradient(135deg,var(--teal),var(--teal-light))}
.feature-icon.cat-finance{background:linear-gradient(135deg,var(--violet),var(--violet-light))}
.feature-icon.cat-nature{background:linear-gradient(135deg,#3FAE6A,#8FE0B0)}
.feature-icon.cat-support{background:linear-gradient(135deg,#25D366,#128C7E)}

/* Table */
table.plots{width:100%;border-collapse:collapse;font-size:.92rem}
table.plots th{background:var(--navy);color:var(--white);padding:10px 12px;text-align:left}
table.plots td{padding:9px 12px;border-bottom:1px solid var(--gray-300)}
table.plots tr:nth-child(even){background:var(--gray-100)}

/* Trust strip */
.trust-strip{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.trust-chip{
  display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--gray-300);
  border-radius:999px;padding:8px 16px;font-weight:600;font-size:.85rem;color:var(--navy);
}

/* Placeholder notice (internal — remove once real data supplied) */
.data-pending{
  background:#fff4e5;border:1px dashed var(--orange);color:#8a4a12;
  padding:3px 10px;border-radius:6px;font-size:.78rem;font-weight:700;
}

/* Enquiry form */
.enquiry{background:var(--navy);color:var(--white);border-radius:16px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:900px){.enquiry{grid-template-columns:1fr;padding:28px}}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:.82rem;margin-bottom:6px;color:#B9CDF2}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:var(--white);font-family:inherit;font-size:.95rem;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:#8f97ac}

/* Footer */
.site-footer{
  position:relative;background:#1B3D8F;color:#B9C6E8;padding:0 0 24px;font-size:.88rem;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),#FFC896,var(--orange));
}
/* Reserves room at the very bottom of the page so the mobile sticky
   Call/WhatsApp bar (fixed, floating over content — see its own rules
   above) never covers the footer's last line once scrolled all the way
   down. Placed after the base .site-footer rule (not next to the sticky
   bar's own rules) deliberately — same selector, same specificity, so
   whichever comes later in the file wins regardless of the media query;
   put earlier, the base rule's padding shorthand silently overrode it. */
@media (max-width:760px){
  .site-footer{padding-bottom:88px}
}

/* Slim top CTA row — restrained, not a full hero band */
.footer-top-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:28px 0;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:38px;
}
.footer-top-cta h3{color:#fff;font-size:1.15rem;margin:0;font-family:Poppins,sans-serif}
.footer-top-cta p{color:#B9C6E8;margin:4px 0 0;font-size:.85rem}
.footer-top-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.footer-top-actions .btn-outline{border-color:rgba(255,255,255,.4)}

.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr}}
.footer-grid > div{min-width:0}
.footer-grid h4{color:var(--white);font-size:.95rem;margin-bottom:14px}
.footer-grid a{display:block;color:#B9C6E8;margin-bottom:8px}
.footer-grid a:hover{color:var(--gold-light)}
.footer-grid > div:not(:first-child) h4{position:relative;padding-bottom:10px}
.footer-grid > div:not(:first-child) h4::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--orange);
}

.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s;margin-bottom:0;
}
.footer-social a:hover{background:var(--orange);color:#fff;transform:translateY(-3px)}
.footer-social a.coming-soon{opacity:.4;cursor:default}
.footer-social a.coming-soon:hover{background:rgba(255,255,255,.09);transform:none}

.footer-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand-mark{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-light),var(--orange));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  font-family:Poppins,sans-serif;font-size:.82rem;
}
.footer-brand-row h4{margin:0}

.footer-link{display:flex !important;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere}
.footer-link-icon{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.09);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.footer-link .icon{opacity:.9}

.footer-bottom{border-top:1px solid #2E52A8;margin-top:34px;padding-top:20px;text-align:center;font-size:.8rem;color:#A5B5DB}
@media (max-width:640px){
  .footer-top-cta{flex-direction:column;align-items:flex-start}
}

/* WhatsApp floating button — desktop/tablet only. On mobile the sticky
   Call/WhatsApp bar (see its rules near the top of this file) already
   covers WhatsApp, so this stays hidden there instead of floating on top
   of that bar's own WhatsApp half. */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;background:var(--success);color:var(--white);
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;box-shadow:0 10px 26px rgba(37,211,102,.45);
}
@media (max-width:760px){
  .wa-float{display:none}
}

/* Interactive plot map — luxury masterplan treatment */
@keyframes plotGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.35),inset 0 1px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 0 0 6px rgba(255,122,26,0),inset 0 1px 0 rgba(255,255,255,.5)}
}
@keyframes floatIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.plot-map{
  position:relative;border-radius:20px;padding:44px 36px;overflow:hidden;
  background:
    radial-gradient(circle at 12% -10%,rgba(255,122,26,.16),transparent 45%),
    radial-gradient(circle at 100% 10%,rgba(36,81,183,.20),transparent 40%),
    linear-gradient(180deg,#12295E,#1B3D8F 60%,#12295E);
  border:1px solid rgba(255,122,26,.25);
  box-shadow:0 30px 60px rgba(10,22,64,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
.plot-map::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:26px 26px;
}
.plot-map-header{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:22px;margin-bottom:26px;flex-wrap:wrap;
}
.plot-map-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold-light),transparent 70%);
}
.plot-map-title{display:flex;align-items:center;gap:14px}
.plot-map-title .mark{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-light),var(--orange));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:.9rem;
  box-shadow:0 0 0 4px rgba(255,122,26,.18);
}
.plot-map-title .txt .t1{
  color:#fff;font-family:'Poppins',serif;font-weight:700;font-size:1.3rem;letter-spacing:.01em;
}
.plot-map-title .txt .t2{color:var(--gold-light);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85}

/* Compass — minimal gold ring */
.compass{
  width:46px;height:46px;border-radius:50%;position:relative;flex-shrink:0;
  border:1px solid rgba(255,122,26,.4);background:rgba(255,122,26,.06);
}
.compass span{position:absolute;color:var(--gold-light);font-size:.58rem;font-weight:700;letter-spacing:.05em}
.compass .n{top:2px;left:50%;transform:translateX(-50%)}
.compass .s{bottom:2px;left:50%;transform:translateX(-50%);opacity:.5}
.compass .e{right:3px;top:50%;transform:translateY(-50%);opacity:.5}
.compass .w{left:3px;top:50%;transform:translateY(-50%);opacity:.5}
.compass .needle{
  position:absolute;top:50%;left:50%;width:1.5px;height:14px;background:var(--gold-light);
  transform-origin:bottom center;transform:translate(-50%,-100%);box-shadow:0 0 6px rgba(255,122,26,.7);
}

.plot-map-body{position:relative}
/* The widest row is 9 plots at a 46px min-width each — below ~614px
   viewport that no longer fits inside .plot-map's padding, and because
   .plot-map itself is overflow:hidden (for its rounded corners/background
   pattern), the excess plots used to be silently clipped off-screen with
   no way to reach them. Scrolling here instead of on .plot-map keeps the
   clip for the decorative bits but makes every plot reachable. */
.plot-grid-area{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}

.plot-row{display:flex;gap:10px;justify-content:center;margin:0 0 10px}
.plot-box{
  flex:1 1 0;min-width:46px;max-width:80px;aspect-ratio:1/0.9;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;border:1px solid rgba(255,255,255,.35);transition:.25s cubic-bezier(.2,.8,.3,1);
  position:relative;background:linear-gradient(155deg,#EAF1FC,#9DC0F2 55%,#5B90E0);
  box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -6px 10px rgba(30,70,160,.3);
  animation:floatIn .5s ease backwards;
}
.plot-box .no{font-family:Poppins,sans-serif;font-weight:700;font-size:.95rem;color:#16223D;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.plot-box .area{font-size:.58rem;color:#16223D;font-weight:600}
.plot-box.tier-md{background:linear-gradient(155deg,#D6E5FA,#A9C6F2 55%,#7BA8E8)}
.plot-box.tier-lg{background:linear-gradient(155deg,#F5F9FF,#D6E5FA 55%,#BFD6F5)}
.plot-box:hover{
  transform:translateY(-8px) scale(1.1);border-color:#fff;z-index:5;
  box-shadow:0 18px 30px rgba(0,0,0,.45),0 0 0 3px rgba(36,81,183,.55),inset 0 1px 0 rgba(255,255,255,.7);
}
.plot-box.status-available{animation:floatIn .5s ease backwards,plotGlow 3.2s ease-in-out infinite}
.plot-box.status-reserved{
  background:linear-gradient(155deg,#FFB877,#FF7A1A 55%,#CC5A00);
  box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);
}
.plot-box.status-reserved .no,.plot-box.status-reserved .area{color:#fff;text-shadow:none}
.plot-box.status-sold{
  background:linear-gradient(155deg,#B8C2D6,#8792A8 55%,#66708A);opacity:.55;cursor:not-allowed;
  box-shadow:none;
}
.plot-box.status-sold .no,.plot-box.status-sold .area{color:#dfe2ea;text-shadow:none}
.plot-box.status-sold:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.35)}
.plot-box.selected{outline:2px solid var(--success);outline-offset:3px;box-shadow:0 0 0 6px rgba(37,211,102,.2),0 18px 30px rgba(0,0,0,.45)}

/* Fine gold divider between plot rows — replaces literal road bars */
.road-band{
  position:relative;height:1px;margin:4px 0 14px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.55) 15%,rgba(255,122,26,.55) 85%,transparent);
}
.road-band .road-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
  background:#12295E;color:var(--gold-light);font-size:.58rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 12px;border:1px solid rgba(255,122,26,.4);border-radius:999px;
}

/* Boundary reference (Existing 200 Ft Road) — subtle side note, not a literal road bar */
.road-side{display:none}
.road-bottom{
  margin-top:22px;padding-top:16px;position:relative;text-align:center;
}
.road-bottom::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.55),transparent);
}
.road-bottom .road-label{
  display:inline-block;background:#12295E;color:var(--gold-light);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 16px;border:1px solid rgba(255,122,26,.4);border-radius:999px;
}

@media (max-width:640px){
  .plot-map{padding:28px 16px}
  .plot-box{min-width:38px;max-width:64px}
  .plot-row{gap:6px}
  /* justify-content:center on a row wider than its box hides half the
     overflow on the left, past scrollLeft:0, with no way to reach it —
     left-align instead so the scrollable part is only ever on the right. */
  .plot-row{justify-content:flex-start}
}

.plot-legend{position:relative;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.plot-legend .item{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#B9CDF2}
.plot-legend .swatch{width:14px;height:14px;border-radius:4px;display:inline-block;box-shadow:0 0 8px currentColor}
.plot-tooltip{
  position:fixed;background:#12295E;color:#fff;padding:10px 14px;border-radius:8px;font-size:.82rem;
  pointer-events:none;z-index:80;box-shadow:0 10px 24px rgba(0,0,0,.45);border:1px solid rgba(255,122,26,.3);
  display:none;max-width:220px;
}
.plot-tooltip strong{color:var(--gold-light)}
.plot-map-note{position:relative;color:#B9CDF2;font-size:.76rem;text-align:center;margin-top:22px}

/* EMI Calculator */
.emi-calc{
  background:var(--white);border:1px solid var(--gray-300);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:36px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;
}
@media (max-width:860px){.emi-calc{grid-template-columns:1fr}}
.emi-field{margin-bottom:22px}
.emi-field .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.emi-field label{font-weight:600;color:var(--navy);font-size:.9rem}
.emi-field .val{font-family:Poppins,sans-serif;font-weight:700;color:var(--orange)}
.emi-field input[type=range]{width:100%;margin:0;border:0;display:block;accent-color:var(--orange);cursor:pointer}
/* Fixed at 20px so the marker below can compute the thumb's true center in
   px (browser-default thumb size varies by OS/browser, which is why the
   marker used to sit a few px off from where the thumb actually lands). */
.emi-field input[type=range]::-webkit-slider-thumb{width:20px;height:20px;box-shadow:0 3px 8px rgba(255,122,26,.5)}
.emi-field input[type=range]::-moz-range-thumb{width:20px;height:20px;box-shadow:0 3px 8px rgba(255,122,26,.5);border:none}
/* Visitors dragging this slider have no idea where Navaratna Garden's
   actual plots fall in it — this pins that reference point on the track
   itself (at 20%, i.e. ₹8L within the ₹5L–₹20L range) instead of leaving
   them to guess, or explain it in prose they'd have to read separately.
   A native range thumb's center isn't `percentage * trackWidth` — the
   track is inset by half the thumb's width at each end, so the thumb
   center runs from thumbWidth/2 to trackWidth-thumbWidth/2, not 0 to
   trackWidth. `left:20%` ignored that inset and sat a few px left of
   where the thumb actually lands at 20%; this calc() matches it exactly. */
.emi-slider-wrap{position:relative;padding-top:26px}
.emi-slider-marker{
  position:absolute;top:0;left:calc(10px + (100% - 20px) * 0.2);transform:translateX(-50%);pointer-events:none;
  font-size:.66rem;font-weight:700;color:var(--navy);white-space:nowrap;line-height:1;
  background:var(--gray-100);border:1px solid var(--gray-300);border-radius:999px;padding:4px 9px;
}
.emi-slider-marker::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:2px;height:18px;background:var(--navy);opacity:.45;border-radius:1px;
}

/* One number carries this panel now (Total Interest/Total Payment were
   dropped), so it's built to be a confident hero stat rather than a
   shrunken version of the old three-stat layout: a warm icon badge to
   anchor it, a soft radial glow (same trick as .plot-map's background)
   behind the number for depth, and the amount sized to fill the space the
   removed rows left rather than leaving it looking sparse. */
.emi-result{
  position:relative;overflow:hidden;background:linear-gradient(160deg,#1B3D8F,#0C1938);
  border-radius:14px;padding:40px 32px;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.emi-result::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 12%,rgba(255,154,66,.22),transparent 55%);
}
.emi-result-icon{
  position:relative;width:46px;height:46px;border-radius:50%;flex-shrink:0;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--gold-light),var(--orange));
  box-shadow:0 10px 22px -8px rgba(255,122,26,.6);
}
.emi-result .label{position:relative;color:#9DB6EC;font-size:.86rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
/* Poppins, not Playfair — every other number on the site (hero stats,
   plot sizes, stat counters) is set in Poppins; this was the one serif
   outlier. */
.emi-result .amount{position:relative;font-family:Poppins,sans-serif;font-size:clamp(2.7rem,5.6vw,3.8rem);font-weight:800;letter-spacing:-.01em;margin:12px 0 20px}
/* Poppins has no ₹ glyph — Inter does, and is already loaded site-wide, so
   the symbol gets its own font instead of silently falling through to
   whatever generic sans-serif the OS happens to substitute. */
.emi-amount-symbol{font-family:Inter,'Noto Sans',sans-serif;font-weight:700}
.emi-note{position:relative;font-size:.76rem;color:#B9CDF2;line-height:1.65;max-width:280px}

/* Lightbox */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(5,10,25,.92);z-index:100;display:none;
  align-items:center;justify-content:center;padding:30px;
}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:24px;right:28px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.4rem;border:1px solid rgba(255,255,255,.25);
}
.gallery-clickable{cursor:zoom-in}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid rgba(255,255,255,.25);
}
.lightbox-nav:hover{background:rgba(255,255,255,.18)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-counter{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#B9C6E8;
  font-size:.78rem;letter-spacing:.05em;
}
@media (max-width:640px){
  .lightbox-nav{width:38px;height:38px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
}

/* Gallery page — event video feature + photo grid, same restrained editorial
   language as the blog: muted duotone accents, thin rules, no bright color
   blocks or flashy hover motion. */
.gallery-video-feature{
  display:flex;gap:52px;align-items:center;max-width:820px;margin:0 auto 72px;
}
.gallery-video-wrap{
  width:260px;flex-shrink:0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-lg);
  background:#0C1938;
}
.gallery-video-wrap video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover;background:#0C1938}
.gallery-video-caption{flex:1}
.gallery-video-label{
  display:inline-flex;align-items:center;gap:10px;color:var(--orange);font-weight:800;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;
}
.gallery-video-label::before{content:"";width:28px;height:1.5px;background:var(--orange)}
.gallery-video-caption h3{margin-bottom:10px}
.gallery-video-caption p{margin-bottom:0}
@media (max-width:700px){
  .gallery-video-feature{flex-direction:column;text-align:center;gap:26px}
  .gallery-video-label::before{display:none}
  .gallery-video-wrap{width:210px}
}

.gallery-section-head{margin-bottom:48px}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.gallery-tile{
  position:relative;overflow:hidden;border-radius:8px;cursor:zoom-in;background:var(--gray-100);
  box-shadow:var(--shadow);
}
.gallery-tile img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block;transition:transform .5s ease}
.gallery-tile:hover img{transform:scale(1.035)}
@media (max-width:640px){.gallery-grid{grid-template-columns:1fr;gap:18px}}

/* ===================================================================
   Location page — full redesign (2026-08-13).
   Hero (animated gradient mesh + connectivity ticker) → spotlighted map
   visual → big-type feature-stat band → unified connectivity rail
   (filterable, horizontal-scroll cards) → enlarged directions map.
   =================================================================== */

/* ---- Hero ---- */
.location-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#1B3D8F 0%,#132B66 45%,#0C1938 100%);
  padding-top:96px;padding-bottom:60px;
}
.location-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:26px 26px;
}
/* Blobs stay still by default; js/main.js nudges their transform on scroll
   (a scroll-linked parallax rather than an idle CSS loop) — see the
   "Location hero parallax" block in main.js. */
.location-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5;will-change:transform;transition:transform .1s linear}
.location-blob-1{width:380px;height:380px;top:-140px;left:-110px;background:radial-gradient(circle at 35% 35%,var(--orange),transparent 70%)}
.location-blob-2{width:460px;height:460px;bottom:-220px;right:-150px;background:radial-gradient(circle at 60% 40%,#4C7CFF,transparent 70%)}
.location-blob-3{width:300px;height:300px;top:30%;right:8%;background:radial-gradient(circle at 45% 45%,var(--violet),transparent 70%);opacity:.3}
.location-hero-inner{position:relative;z-index:2;padding-bottom:0}
.location-hero .eyebrow{color:var(--gold-light)}
.location-hero h1{color:#fff;max-width:760px;margin-left:auto;margin-right:auto}
.location-hero .lede{color:#C9D9F5}

.hero-stat-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.hero-stat{
  position:relative;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:22px 28px;min-width:150px;box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:transform .3s ease,background .3s ease,border-color .3s ease;
}
.hero-stat:hover{transform:translateY(-5px);background:rgba(255,255,255,.11)}
.hero-stat-icon{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;color:#fff;
}
.hero-stat.cat-industry .hero-stat-icon{background:linear-gradient(135deg,var(--orange),var(--gold-light));box-shadow:0 8px 18px -6px rgba(255,122,26,.55)}
.hero-stat.cat-education .hero-stat-icon{background:linear-gradient(135deg,var(--navy),#4C7CFF);box-shadow:0 8px 18px -6px rgba(76,124,255,.55)}
.hero-stat.cat-transit .hero-stat-icon{background:linear-gradient(135deg,var(--teal),var(--teal-light));box-shadow:0 8px 18px -6px rgba(14,159,135,.5)}
.hero-stat.cat-landmark .hero-stat-icon{background:linear-gradient(135deg,var(--violet),var(--violet-light));box-shadow:0 8px 18px -6px rgba(124,92,252,.5)}
.hero-stat:hover .hero-stat-icon{transform:scale(1.08) rotate(-4deg)}
.hero-stat-num{
  display:block;font-family:Poppins,sans-serif;font-weight:800;font-size:2.3rem;letter-spacing:-.01em;color:#fff;
}
.hero-stat.cat-industry .hero-stat-num{background:linear-gradient(120deg,#fff 30%,var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat.cat-education .hero-stat-num{background:linear-gradient(120deg,#fff 30%,#9DB8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat.cat-transit .hero-stat-num{background:linear-gradient(120deg,#fff 30%,var(--teal-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat-num small{font-size:.85rem;font-weight:700;color:var(--gold-light);margin-left:2px;-webkit-text-fill-color:var(--gold-light)}
.hero-stat-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#B9C6E8;margin-top:8px;font-weight:600}
@media (max-width:640px){.hero-stat{padding:18px 22px;min-width:104px}.hero-stat-num{font-size:1.7rem}}

/* Infinite connectivity ticker beneath the hero stats */
.hero-ticker{
  position:relative;z-index:2;margin-top:40px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.hero-ticker-track{display:inline-flex;gap:0;animation:ticker-scroll 32s linear infinite;white-space:nowrap}
.hero-ticker-item{
  display:inline-flex;align-items:center;gap:8px;padding:0 26px;font-size:.78rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:#B9C6E8;
}
.hero-ticker-item .icon{opacity:.7;width:14px;height:14px}
.hero-ticker-dot{color:var(--gold-light);opacity:.8}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.location-blob{transition:none}.hero-ticker-track{animation:none}}

/* Standalone dark strip for the ticker, used on pages that don't have
   their own dark hero to embed it in (e.g. the project page). */
.ticker-band{background:linear-gradient(120deg,#1B3D8F,#0C1938);padding:20px 0;overflow:hidden}
.ticker-band .hero-ticker{margin-top:0}

/* ---- Spotlighted map visual ----
   Light section (not dark navy) so it contrasts against the hero above and
   the feature-stat band below — three dark sections in a row read as "one
   giant blue page", so this one stays light. The image sits in a white
   "mat" inset inside a slim gradient frame, at a contained max-width
   (1300px, not near-viewport-width) so it reads as a framed graphic
   rather than an overwhelming, edge-to-edge blow-up. */
.location-visual-section{overflow:hidden;background:var(--cream)}
.location-visual-card{
  position:relative;max-width:1300px;margin:0 auto;padding:0 24px;
}
.location-visual-frame{
  position:relative;border-radius:28px;padding:4px;
  background:linear-gradient(135deg,rgba(255,122,26,.6),rgba(124,92,252,.4),rgba(36,81,183,.55));
  box-shadow:var(--shadow-lg);
}
.location-visual-mat{position:relative;background:#fff;border-radius:24px;padding:14px;overflow:hidden}
.location-visual-frame img{width:100%;height:auto;display:block;border-radius:14px}
.location-visual-badge{
  position:absolute;top:28px;left:28px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:rgba(12,25,56,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 16px 9px 12px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
.location-visual-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,154,66,.25)}
.location-visual-tick{position:absolute;width:26px;height:26px;border-color:rgba(36,81,183,.35);pointer-events:none;z-index:2}
.location-visual-tick.tl{top:-10px;left:-10px;border-top:2px solid;border-left:2px solid;border-radius:6px 0 0 0}
.location-visual-tick.br{bottom:-10px;right:-10px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 6px 0}
@media (max-width:900px){.location-visual-card{padding:0 16px}.location-visual-mat{padding:10px}}
@media (max-width:640px){.location-visual-badge{top:18px;left:18px;padding:7px 14px 7px 10px;font-size:.66rem}}

/* ---- Feature stat band (big-type pull quote) ---- */
.feature-stat-band{
  position:relative;overflow:hidden;color:#fff;padding:72px 0 60px;
  background:linear-gradient(155deg,#1B3D8F,#0C1938);
}
.feature-stat-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 20%,rgba(255,154,66,.16),transparent 45%),
             radial-gradient(circle at 92% 82%,rgba(76,124,255,.18),transparent 45%);
}
.fsb-inner{position:relative;z-index:1;display:flex;align-items:center;gap:56px;flex-wrap:wrap;justify-content:center}
.fsb-hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px}
.fsb-num{
  font-family:'Playfair Display',Poppins,serif;font-weight:700;font-size:clamp(4.2rem,9vw,7.2rem);line-height:.95;
  background:linear-gradient(115deg,#FFDCB0 5%,#FFC896 30%,#fff 55%,#FFC896 80%,#FFDCB0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fsb-num small{font-size:.32em;font-weight:600;margin-left:4px;-webkit-text-fill-color:var(--gold-light)}
.fsb-hero-label{margin-top:6px;font-size:.98rem;color:#C9D9F5;max-width:360px}
.fsb-divider{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent)}
.fsb-mini-row{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
.fsb-mini{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:110px}
.fsb-mini-num{font-family:Poppins,sans-serif;font-weight:700;font-size:2.1rem;color:#fff}
.fsb-mini-num small{font-size:.85rem;font-weight:600;color:var(--gold-light);margin-left:2px}
.fsb-mini-label{margin-top:4px;font-size:.78rem;color:#B9C6E8;max-width:130px}
.fsb-footnote{position:relative;z-index:1;text-align:center;margin:36px auto 0;color:#C9D9F5;font-size:.9rem}
.fsb-footnote strong{color:#fff}
@media (max-width:760px){
  .fsb-inner{gap:32px}
  .fsb-divider{display:none}
  .fsb-mini-row{gap:26px}
}

/* ---- Connectivity: filters + horizontal-scroll card rail ---- */
.connectivity-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.connectivity-filter-tab{
  background:var(--gray-100);border:1px solid transparent;padding:10px 20px;border-radius:999px;
  font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--gray-600);cursor:pointer;transition:.25s;
}
.connectivity-filter-tab:hover{color:var(--navy)}
.connectivity-filter-tab.active{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(36,81,183,.25)}

.connectivity-rail-wrap{position:relative}
.connectivity-rail{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 4px 20px;
  scrollbar-width:none;
  /* `scroll-behavior` is inherited from html{scroll-behavior:smooth} (see
     top of this file) unless overridden here. Left inherited, every
     per-frame `rail.scrollLeft = ...` nudge from the auto-scroll loop in
     js/main.js queued its own smooth-scroll animation on top of the one
     still running from the previous frame — the competing animations is
     what read as the rail "drifting back and forth" instead of gliding.
     auto-scroll drives its own frame-by-frame motion already, so this
     needs to be instant; the explicit behavior:'smooth' passed to
     scrollTo()/scrollBy() for the loop-back and the arrow buttons still
     overrides this and stays smooth. */
  scroll-behavior:auto;
}
/* While the rail is auto-playing (see js/main.js) snapping is switched off —
   otherwise the browser fights every small programmatic scrollLeft nudge by
   snapping straight back to the nearest card, and the rail never visibly
   moves. Snap comes back the instant a visitor hovers/touches/drags it. */
.connectivity-rail.rail-auto-playing{scroll-snap-type:none}
.connectivity-rail::-webkit-scrollbar{display:none}
.connectivity-card{
  position:relative;overflow:hidden;flex:0 0 224px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:flex-start;
  background:linear-gradient(160deg,#fff,var(--cream));border:1px solid var(--gray-300);
  border-radius:18px;padding:24px 22px;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
/* Top accent bar + corner watermark — same "designed" language as the
   feature-stat band and the map-visual frame, so the rail doesn't read as
   a plainer, unfinished component next to the rest of the page. */
.connectivity-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--navy),#4C7CFF);opacity:0;transition:opacity .3s ease;
}
.connectivity-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.connectivity-card:hover::before{opacity:1}
.connectivity-card.is-hidden{display:none}
.cc-ghost{position:absolute;right:-14px;bottom:-14px;width:96px;height:96px;opacity:.055;color:var(--navy);pointer-events:none;transform:rotate(-10deg);transition:transform .5s ease}
.connectivity-card:hover .cc-ghost{transform:rotate(-3deg) scale(1.06)}
.cc-icon{
  position:relative;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),#4C7CFF);color:#fff;margin-bottom:18px;z-index:1;
  box-shadow:0 10px 20px -8px rgba(36,81,183,.55);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.cc-icon::after{content:'';position:absolute;inset:-8px;border-radius:inherit;background:inherit;filter:blur(14px);opacity:.4;z-index:-1}
.connectivity-card:hover .cc-icon{transform:rotate(-6deg) scale(1.07)}
.connectivity-card.cat-industry .cc-icon{background:linear-gradient(135deg,var(--orange),var(--gold-light));box-shadow:0 10px 20px -8px rgba(255,122,26,.5)}
.connectivity-card.cat-industry::before{background:linear-gradient(90deg,var(--orange),var(--gold-light))}
.connectivity-card.cat-industry .cc-ghost{color:var(--orange)}
.connectivity-card.cat-transit .cc-icon{background:linear-gradient(135deg,var(--teal),var(--teal-light));box-shadow:0 10px 20px -8px rgba(14,159,135,.5)}
.connectivity-card.cat-transit::before{background:linear-gradient(90deg,var(--teal),var(--teal-light))}
.connectivity-card.cat-transit .cc-ghost{color:var(--teal)}
.connectivity-card.cat-landmark .cc-icon{background:linear-gradient(135deg,var(--violet),var(--violet-light));box-shadow:0 10px 20px -8px rgba(124,92,252,.5)}
.connectivity-card.cat-landmark::before{background:linear-gradient(90deg,var(--violet),var(--violet-light))}
.connectivity-card.cat-landmark .cc-ghost{color:var(--violet)}
.connectivity-card.cat-education::before{background:linear-gradient(90deg,var(--navy),#4C7CFF)}
/* Name is the headline (SIPCOT, TNPL, National Law College...) — that's
   what a person is actually scanning for. Distance is a secondary pill. */
.cc-name{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1.14rem;color:var(--text);line-height:1.28;margin-bottom:4px;position:relative;z-index:1}
/* Short "what is this" tag under the name (Govt./Private, temple, bus
   stop...) so SIPCOT/TNPL-style acronyms aren't a mystery to a visitor
   who isn't from Trichy. */
.cc-desc{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:.8rem;color:var(--gray-600);line-height:1.35;margin-bottom:14px;position:relative;z-index:1}
.cc-distance{
  /* Pushed to the bottom of the (flex) card via margin-top:auto, so the
     pill lines up at the same height across a row regardless of whether
     the name above it wraps to one line or two. */
  display:inline-flex;align-items:baseline;gap:3px;font-family:Poppins,sans-serif;font-weight:700;font-size:.92rem;
  color:var(--navy);background:var(--gray-100);border-radius:999px;padding:5px 12px;margin-top:auto;position:relative;z-index:1;
}
.cc-distance small{font-size:.66rem;font-weight:700;color:var(--orange)}
.cc-distance.cc-distance-muted{
  font-family:Inter,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-600);
}
.connectivity-card.cat-industry .cc-distance{color:var(--orange)}
.connectivity-card.cat-transit .cc-distance{color:var(--teal)}
.connectivity-card.cat-landmark .cc-distance{color:var(--violet)}

.rail-arrow{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:#fff;border:1px solid var(--gray-300);box-shadow:var(--shadow);color:var(--navy);cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;
}
.rail-arrow:hover{transform:scale(1.08);box-shadow:var(--shadow-lg)}
.connectivity-rail-nav{display:flex;justify-content:center;gap:14px;margin-top:6px}
@media (max-width:640px){.connectivity-card{flex-basis:188px;padding:20px 18px}.cc-name{font-size:1.02rem}}

/* FAQ accordion */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--white);border:1px solid var(--gray-300);border-radius:12px;
  overflow:hidden;transition:.25s;
}
.faq-item:hover{border-color:var(--orange)}
.faq-item[open]{border-color:var(--orange);box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-weight:600;color:var(--navy);font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .chev{transition:transform .25s ease;color:var(--orange);flex-shrink:0}
.faq-item[open] summary .chev{transform:rotate(180deg)}
.faq-item .faq-answer{padding:0 22px 20px;color:var(--gray-600);line-height:1.65;font-size:.95rem}

/* Contact page — rounded bento-card hero (CSS grid, no absolute positioning
   so it holds together cleanly at any viewport width/aspect ratio) */
.contact-hero-wrap{padding:40px 0 8px}
.contact-hero-card{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:44px;
  border-radius:32px;padding:48px;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,122,26,.10),transparent 50%),
    radial-gradient(circle at 92% 0%,rgba(36,81,183,.12),transparent 45%),
    var(--gray-100);
}
.contact-hero-card .hero-content{min-width:0}
.contact-hero-card .eyebrow{color:var(--orange)}
.contact-hero-card h1{color:var(--navy);margin-bottom:10px;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.contact-hero-card .sub{color:var(--gray-600);font-size:1.02rem;margin:0}
.contact-hero-photo{
  border-radius:24px;overflow:hidden;aspect-ratio:4/3.1;
  box-shadow:0 20px 50px rgba(36,81,183,.2);
}
.contact-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
@media (max-width:760px){
  .contact-hero-card{grid-template-columns:1fr;padding:32px 24px}
  .contact-hero-photo{aspect-ratio:16/10}
}

/* Contact page — form-first layout: the form is the focal element,
   contact details condensed into a slim list rather than large cards */
.contact-main-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
.contact-form-card{padding:34px}
.contact-sidebar{display:flex;flex-direction:column;gap:20px}
.contact-info-list{
  background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.contact-info-item{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border-bottom:1px solid var(--gray-100);transition:.2s;
}
.contact-info-item:last-child{border-bottom:none}
.contact-info-item:hover{background:var(--gray-100)}
.contact-info-item .icon-circle{
  width:38px;height:38px;border-radius:50%;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;color:var(--orange);flex-shrink:0;
}
.contact-info-item strong{display:block;color:var(--navy);font-size:.88rem}
.contact-info-item span{display:block;color:var(--gray-600);font-size:.82rem;margin-top:1px}
@media (max-width:900px){
  .contact-main-grid{grid-template-columns:1fr}
  .contact-form-card{padding:26px}
}

/* Color-coded form fields — each field gets a distinct accent from the
   palette so the form reads as organized rather than a flat gray stack.
   Border accents are safe on any background; label-color overrides are
   scoped to light-card forms only (dark forms keep their light label color
   for contrast against the navy background). */
.field-name input{border-left:3px solid var(--navy) !important}
.field-name input:focus{outline:none;box-shadow:0 0 0 3px rgba(36,81,183,.15)}

.field-phone input{border-left:3px solid var(--orange) !important}
.field-phone input:focus{outline:none;box-shadow:0 0 0 3px rgba(255,122,26,.15)}

.field-email input{border-left:3px solid #5B90E0 !important}
.field-email input:focus{outline:none;box-shadow:0 0 0 3px rgba(91,144,224,.18)}

.field-message textarea{border-left:3px solid var(--gold) !important}
.field-message textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(255,154,66,.15)}

/* Light-background forms (white cards) can also color the label text */
.contact-form-card .field-name label{color:var(--navy)}
.contact-form-card .field-phone label{color:var(--orange)}
.contact-form-card .field-email label{color:#3D6FD1}
.contact-form-card .field-message label{color:#CC7A1F}

/* Dark forms (.enquiry, navy background) — navy/mid-blue accents would
   nearly disappear against the section's own navy fill, so use brighter
   variants for those two fields specifically; orange/gold already contrast
   fine and stay as-is via the shared rules above. */
.enquiry .field-name input{border-left-color:#fff !important}
.enquiry .field-email input{border-left-color:#9DC0F2 !important}

.contact-trust-note{
  display:flex;align-items:flex-start;gap:10px;padding:16px 18px;
  background:var(--gray-100);border-radius:var(--radius);color:var(--gray-600);
  font-size:.82rem;line-height:1.5;
}
.contact-trust-note .icon{color:var(--orange);flex-shrink:0;margin-top:1px}

/* Enquiry form success panel — hidden by default, swapped in for the form
   on submit (see .enquiry-form handling in js/main.js). Lives on both light
   card backgrounds (.contact-form-card) and the dark .enquiry section, so
   it needs both palettes like the field accents above. */
.enquiry-success{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:28px;border-radius:var(--radius);background:var(--gray-100);
  outline:none;
}
/* The [hidden] attribute is how js/main.js toggles this panel before/after
   a successful submit. .enquiry-success{display:flex} above has the same
   specificity as the browser's default [hidden]{display:none} rule, and
   author styles win ties over the UA stylesheet — so without this, the
   panel showed on every page load regardless of the hidden attribute. */
.enquiry-success[hidden]{display:none}
.enquiry-success .icon-circle{
  width:44px;height:44px;border-radius:50%;background:var(--success);color:var(--white);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.enquiry-success h3{color:var(--navy);margin:0;font-size:1.15rem}
.enquiry-success p{color:var(--gray-600);margin:0}
.enquiry .enquiry-success{background:rgba(255,255,255,.08)}
.enquiry .enquiry-success h3{color:#fff}
.enquiry .enquiry-success p{color:#B9CDF2}
/* Inline replacement for the old window.alert() on a failed submit —
   injected/toggled by components/EnquiryFormHandler.tsx, not present in
   the static markup (so it doesn't need touching in every legacy form
   template). role="alert" gets it announced to screen readers same as a
   native alert() would, without blocking the page. */
.enquiry-error{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;margin-top:12px;border-radius:8px;background:#FDECEA;color:#c0392b;font-size:.85rem;line-height:1.5}
.enquiry-error[hidden]{display:none}
.enquiry .enquiry-error{background:rgba(255,255,255,.1);color:#FFD3CE}

/* Blog — quiet editorial design: restrained palette, generous rhythm, a divided
   article list instead of a card grid, so the page reads differently from the
   rest of the site rather than repeating its feature-card pattern. */

.blog-intro-rule{
  width:56px;height:2px;background:var(--orange);margin:28px auto 0;
}

/* Section tabs (replaces pill buttons — quieter, more editorial) */
.blog-filter-tabs{
  display:flex;gap:34px;flex-wrap:wrap;justify-content:center;
  border-bottom:1px solid var(--gray-300);margin:0 0 60px;
}
.blog-filter-tab{
  background:none;border:none;padding:0 0 16px;cursor:pointer;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gray-600);border-bottom:2px solid transparent;transition:.2s;
}
.blog-filter-tab:hover{color:var(--navy)}
.blog-filter-tab.active{color:var(--orange);border-color:var(--orange)}
.blog-list-item.is-hidden{display:none}

/* Featured post — calm two-column spread, no diagonal cuts, no motion tricks */
.blog-featured{
  display:grid;grid-template-columns:1fr 1.15fr;border:1px solid var(--gray-300);
  box-shadow:var(--shadow);margin-bottom:72px;
}
.blog-featured .blog-cover{height:100%}
.blog-feat-folio{
  position:absolute;left:16px;bottom:16px;color:#fff;
  background:rgba(12,25,56,.72);padding:4px 11px;border-radius:4px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.blog-featured-label{
  display:inline-flex;align-items:center;gap:10px;color:var(--orange);font-weight:800;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;
}
.blog-featured-label::before{content:"";width:28px;height:1.5px;background:var(--orange)}
.blog-featured .blog-body{padding:56px 60px;display:flex;flex-direction:column;justify-content:center}
.blog-featured h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.32}
@media (max-width:900px){
  .blog-featured{grid-template-columns:1fr}
  .blog-featured .blog-cover{height:280px}
  .blog-featured .blog-body{padding:38px}
}

/* Shared cover treatment — muted navy/charcoal duotone, never bright/candy-colored */
.blog-cover{
  display:flex;align-items:center;justify-content:center;color:#fff;min-height:150px;
  position:relative;overflow:hidden;background:linear-gradient(160deg,#1B3D8F,#0C1938);
}
.blog-cover::after{
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:24px 24px;
}
.blog-cover-icon{position:relative;z-index:1;opacity:.92}
.blog-cover-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-feat-folio{z-index:2}

.blog-section-head{margin-bottom:44px}

/* Article list — thin dividers, even vertical rhythm, no shadows/lift/rotate */
.blog-list{display:flex;flex-direction:column}
.blog-list-item{
  display:grid;grid-template-columns:168px 1fr;gap:40px;align-items:start;
  padding:44px 0;border-bottom:1px solid var(--gray-300);
}
.blog-list-item:first-child{padding-top:0}
.blog-list-item:last-child{border-bottom:none;padding-bottom:0}
.blog-list-item .blog-cover{min-height:130px;border-radius:var(--radius)}
.blog-list-item .blog-cover-icon{width:30px;height:30px}
.blog-list-item h3{
  font-size:1.28rem;line-height:1.35;margin-bottom:12px;transition:color .2s;
}
.blog-list-item:hover h3{color:var(--orange)}
.blog-list-item p{margin-bottom:0}
@media (max-width:640px){
  .blog-list-item{grid-template-columns:1fr;gap:18px}
  .blog-list-item .blog-cover{min-height:150px}
}

.blog-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.blog-tag{
  color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding-right:12px;border-right:1px solid var(--gray-300);
}
.blog-date{color:var(--gray-600);font-size:.78rem}
.blog-sources{margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-300);font-size:.76rem;color:var(--gray-600)}
.blog-sources a{color:var(--orange);font-weight:600}
.blog-read-more{
  margin-top:16px;display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.85rem;color:var(--navy);transition:gap .2s,color .2s;
}
.blog-list-item:hover .blog-read-more{color:var(--orange);gap:10px}
/* #slug anchors from the home page rail land here — without this the fixed
   header (see section[id]{scroll-margin-top:90px} above) would cover the
   top of whichever post was jumped to, since these are plain divs, not
   the section[id] elements that rule targets. */
.blog-featured,.blog-list-item{scroll-margin-top:90px}

/* Home-page blog rail — same rail-arrow/auto-scroll mechanics as the
   location page's connectivity rail (see js/main.js), reusing the blog
   page's own cover/tag/date/read-more styling so a card here looks like a
   preview of the real thing rather than a separate component. */
.blog-rail-viewall{
  font-weight:700;font-size:.88rem;color:var(--navy);display:inline-flex;align-items:center;gap:6px;
  flex-shrink:0;transition:color .2s,gap .2s;
}
.blog-rail-viewall:hover{color:var(--orange);gap:10px}
.blog-rail-wrap{position:relative}
.blog-rail{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 20px;
  scrollbar-width:none;scroll-behavior:auto;
}
.blog-rail.rail-auto-playing{scroll-snap-type:none}
.blog-rail::-webkit-scrollbar{display:none}
.blog-rail-card{
  flex:0 0 300px;scroll-snap-align:start;display:block;overflow:hidden;
  background:var(--white);border:1px solid var(--gray-300);border-radius:16px;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.blog-rail-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.blog-rail-card .blog-cover{min-height:150px}
.blog-rail-card .blog-cover-icon{width:28px;height:28px}
.blog-rail-body{padding:22px}
.blog-rail-body h3{font-size:1.05rem;line-height:1.35;margin:0 0 4px;color:var(--navy);transition:color .2s}
.blog-rail-card:hover .blog-rail-body h3{color:var(--orange)}
.blog-rail-nav{display:flex;justify-content:center;gap:14px;margin-top:6px}
@media (max-width:640px){.blog-rail-card{flex-basis:250px}}

/* Breadcrumb */
.breadcrumb{background:var(--gray-100);padding:14px 0;font-size:.85rem;color:var(--gray-600)}
.breadcrumb a{color:var(--orange);font-weight:600}

/* ---- About page: trust badges, vision/mission, values, process ---- */
.trust-badge-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.trust-badge{
  display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--gray-300);
  padding:7px 16px;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--navy);box-shadow:var(--shadow);
}
.trust-badge svg{color:var(--orange);flex-shrink:0}

.vm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media (max-width:900px){.vm-grid{grid-template-columns:1fr}}
.vm-card{
  position:relative;overflow:hidden;padding:38px 34px;border-radius:var(--radius);
  background:linear-gradient(160deg,#fff,var(--cream));border:1px solid var(--gray-300);box-shadow:var(--shadow);
  transition:.35s cubic-bezier(.2,.8,.3,1);
}
.vm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.vm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--navy),#4C7CFF)}
.vm-card.vm-mission::before{background:linear-gradient(90deg,var(--orange),var(--gold-light))}
.vm-icon{
  width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),#4C7CFF);color:#fff;margin-bottom:20px;
  box-shadow:0 10px 20px -8px rgba(36,81,183,.5);
}
.vm-card.vm-mission .vm-icon{background:linear-gradient(135deg,var(--orange),var(--gold-light));box-shadow:0 10px 20px -8px rgba(255,122,26,.5)}
.vm-card h3{font-size:1.35rem;margin-bottom:12px}
.vm-card p{color:var(--gray-600);margin:0;line-height:1.7}

.our-story{
  max-width:820px;margin:0 auto;padding:36px 40px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--gray-300);box-shadow:var(--shadow);
  position:relative;
}
.our-story::before{
  content:'\201C';position:absolute;top:6px;left:24px;font-family:'Playfair Display',serif;
  font-size:5rem;color:var(--gray-300);line-height:1;
}
.our-story p{position:relative;color:var(--gray-600);font-size:1.05rem;line-height:1.85;margin:0}
.our-story p + p{margin-top:16px}

.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:900px){.process-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.process-steps{grid-template-columns:1fr}}
.process-step{position:relative;padding:28px 22px;background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius);box-shadow:var(--shadow);transition:.3s}
.process-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.process-step-num{
  width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Poppins,sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:16px;
}
.process-step h4{font-size:1.05rem;margin-bottom:8px}
.process-step p{color:var(--gray-600);font-size:.92rem;margin:0;line-height:1.6}
.process-steps .process-step:not(:last-child)::after{
  content:'';position:absolute;top:48px;right:-24px;width:24px;height:2px;background:var(--gray-300);
}

/* Testimonials carousel */
.testimonials-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px;text-align:left}
.testimonials-head h2{margin-bottom:0}
.testimonials-trust{display:flex;align-items:center;gap:12px}
.ta-avatar-stack{display:flex}
.ta-avatar{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Poppins,sans-serif;font-weight:700;font-size:.72rem;color:#fff;border:2px solid var(--white);
  box-shadow:var(--shadow);margin-left:-10px;
}
.ta-avatar:first-child{margin-left:0}
.testimonials-trust p{margin:0;font-size:.85rem;color:var(--gray-600);line-height:1.35}
.testimonials-trust strong{color:var(--navy);font-family:Poppins,sans-serif;font-size:1rem}

.testimonial-carousel{position:relative;display:flex;align-items:stretch;gap:18px}
.testimonial-nav-btn{
  flex-shrink:0;align-self:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--gray-300);background:var(--white);
  display:flex;align-items:center;justify-content:center;color:var(--navy);cursor:pointer;transition:.2s;box-shadow:var(--shadow);
}
.testimonial-nav-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.testimonial-track{flex:1;min-width:0}
.testimonial-slide{display:none;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--gray-300)}
.testimonial-slide.is-active{display:grid}
.testimonial-visual{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:40px 24px;background:linear-gradient(150deg,var(--navy),var(--navy-2));min-height:280px;
}
.testimonial-visual-initials{
  width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Poppins,sans-serif;font-weight:700;font-size:1.5rem;color:var(--navy);background:var(--white);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.testimonial-visual-stars{color:var(--gold-light);letter-spacing:.15em;font-size:1.05rem}
.testimonial-quote-card{position:relative;background:var(--gray-100);padding:40px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.testimonial-quote-mark{font-family:'Playfair Display',serif;font-size:3.4rem;line-height:.6;color:var(--gold);opacity:.55}
.testimonial-text{margin:0;font-size:1.08rem;line-height:1.75;color:var(--text)}
.testimonial-author strong{display:block;font-family:Poppins,sans-serif;color:var(--navy);font-size:1rem}
.testimonial-author span{color:var(--gray-600);font-size:.85rem}

.testimonial-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.testimonial-dot{width:9px;height:9px;border-radius:50%;background:var(--gray-300);border:none;padding:0;cursor:pointer;transition:.2s}
.testimonial-dot.is-active{background:var(--gold);width:22px;border-radius:5px}

@media (max-width:760px){
  .testimonial-slide{grid-template-columns:1fr}
  .testimonial-visual{min-height:180px;padding:28px}
  .testimonial-quote-card{padding:28px}
  .testimonial-carousel{gap:10px}
  .testimonial-nav-btn{width:38px;height:38px}
  .testimonials-head{text-align:center;justify-content:center}
}
@media (max-width:900px){.process-steps .process-step::after{display:none}}