/*
Theme Name: Ganesh Land Developers
Theme URI: https://ganeshlanddevelopers.com
Author: Ganesh Land Developers
Author URI: https://ganeshlanddevelopers.com
Description: A premium, production-ready WordPress classic theme for Ganesh Land Developers — DTCP & RERA approved plots in Trichy, Tamil Nadu. Converted from an approved static HTML prototype. Features a custom "Projects" post type, full Customizer control over contact details, hero content and business statistics, and a click-to-WhatsApp enquiry flow.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ganesh-land-developers
Tags: e-commerce, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, responsive-layout, threaded-comments, translation-ready
*/

/* =========================================================
   Ganesh Land Developers — Theme Stylesheet
   Palette: Deep Green / Gold / White / Light Cream
   ========================================================= */

:root {
  /* Brand colors */
  --green-900: #0b3d2e;
  --green-800: #0f4a37;
  --green-700: #14603f;
  --green-600: #1c7a52;
  --green-100: #e3f0e7;

  --gold-700: #a9820f;
  --gold-600: #c9a227;
  --gold-500: #d9b743;
  --gold-300: #ecd587;

  --cream-100: #fdf9f0;
  --cream-200: #faf3e2;
  --white: #ffffff;

  --text-dark: #1c2b22;
  --text-muted: #5a6b60;
  --text-on-dark: #f4f7f4;

  --border-soft: #e7e2d3;

  /* Type */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container-w: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(11, 61, 46, 0.08);
  --shadow-md: 0 12px 32px rgba(11, 61, 46, 0.14);
  --header-h: 96px; /* tall enough for the 80px-max desktop logo without crowding the nav */

  /* Height of WordPress's own logged-in admin toolbar, when it's actually
     position:fixed (see the body.admin-bar rule below) — 0 otherwise, so
     every sticky/fixed calculation below stays correct for logged-out
     visitors without a separate no-admin-bar code path. */
  --admin-bar-h: 0px;

  --transition: 0.25s ease;
}

/* WordPress's #wpadminbar is fixed (32px tall) at 783px and up, but
   switches to position:absolute (scrolls away with the page) at its own
   782px breakpoint — so the sticky Header only needs to offset for it
   above that width; matching WP core's own breakpoint here, not this
   theme's separate layout breakpoints. */
@media screen and (min-width: 783px) {
  body.admin-bar { --admin-bar-h: 32px; }
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Final fallback only — the actual overflow sources (see .site-header,
     .main-nav, .nav-backdrop above) are fixed at the root, not just hidden
     here. Kept as a safety net against any future stray wide element. */
  overflow-x: hidden;
  /* .site-header is position:fixed (see Header section below), so it's
     out of normal flow and reserves no space of its own — this pushes
     every page's actual content down by exactly the Header's height (plus
     the WordPress admin bar's, when showing) so nothing ever starts
     underneath it. Stays correct at every breakpoint automatically since
     --header-h itself changes per breakpoint and this recalculates with it. */
  padding-top: calc(var(--header-h) + var(--admin-bar-h));
}

img { max-width: 100%; display: block; }
.entry-content img,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; margin: 0; padding: 0; }
.entry-content ul, .entry-content ol { list-style: revert; padding-left: 1.4em; margin: 0 0 1em; }
.entry-content li { color: var(--text-muted); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--green-900);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; color: var(--text-muted); }

button { font-family: inherit; cursor: pointer; }

input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

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

.skip-link { position: absolute; left: -999px; top: 0; background: var(--green-900); color: var(--white); padding: 12px 20px; z-index: 1000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

section[id] { scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h)); }

/* WordPress core accessibility / content classes */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--cream-100); border-radius: 6px; box-shadow: var(--shadow-md);
  clip: auto !important; clip-path: none; color: var(--green-900); display: block;
  font-size: 0.9rem; font-weight: 700; height: auto; left: 6px; line-height: normal;
  padding: 12px 18px; text-decoration: none; top: 6px; width: auto; z-index: 100000;
}
.alignleft { float: left; margin: 0.4em 1.6em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.6em; }
.aligncenter { display: block; margin: 1em auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: 6px; }
.wp-block-image { margin: 0 0 1.4em; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }

.btn-primary { background: var(--green-900); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-700); }

.btn-gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); color: var(--green-900); box-shadow: 0 8px 22px rgba(201, 162, 39, 0.35); }
.btn-gold:hover { box-shadow: 0 10px 26px rgba(201, 162, 39, 0.45); }

.btn-whatsapp { background: #25d366; color: var(--white); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35); }
.btn-whatsapp:hover { background: #1fb955; }

.btn-outline { background: transparent; color: var(--green-900); border-color: var(--green-900); }
.btn-outline:hover { background: var(--green-900); color: var(--white); }

.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); }
.btn-outline-light:hover { background: rgba(255,255,255,0.15); }

.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  /* position: fixed (not sticky) — this theme deliberately keeps
     overflow-x: hidden on html/body as a safety net elsewhere in this
     file, and having *any* ancestor with a non-visible overflow is a
     well-known way for browsers (Safari in particular) to silently stop
     honouring position: sticky on a descendant. Fixed positioning is
     immune to that entirely, so it's the reliable choice here — body's
     padding-top (see Reset section above) reserves the matching space so
     no content is ever hidden underneath it, with no layout jump since
     that padding is present from the very first paint, not toggled later.
     Applies globally via this one shared rule, used by every template
     through the common header.php (get_header()) — never scoped to
     front-page.php. */
  position: fixed; top: var(--admin-bar-h); left: 0; right: 0; z-index: 900;
  background: rgba(253, 249, 240, 0.92);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
  /* No backdrop-filter here: it creates a new containing block for
     position:fixed descendants (.main-nav, .nav-backdrop live inside this
     header), which would break their true viewport-relative positioning
     regardless of the header's own position value. Keep this header's
     fixed-position children genuinely fixed to the real viewport instead. */
}
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-sm); border-color: var(--border-soft); }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-link { display: flex; align-items: center; }
/* The logo (custom or the bundled transparent wordmark) is always shown at
   its own aspect ratio — height/width constraints only, object-fit:
   contain so it's never stretched, cropped or distorted. */
.logo-img, .custom-logo {
  display: block;
  height: auto; width: auto;
  max-height: 80px; max-width: 240px; /* desktop — comfortably within the 75-85px target, aspect ratio always preserved via object-fit */
  object-fit: contain;
}
.logo-img.img-fallback, .custom-logo-link.img-fallback .custom-logo {
  min-width: 120px; min-height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--green-700), var(--gold-500));
}
/* Visible header/footer branding is the logo image only — the site name
   stays available to assistive tech via .screen-reader-text (see header.php). */
.logo-text { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; line-height: 1.1; color: var(--green-900); display: flex; flex-direction: column; }
.logo-text strong { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; color: var(--gold-700); text-transform: uppercase; }

/* .main-nav is the off-canvas wrapper (plain div — see header.php); on
   desktop it's just an inline flex item and .main-nav-menu (the real
   <nav>, from wp_nav_menu()) renders horizontally inside it. Link styling
   is scoped to .main-nav-menu specifically (not .main-nav) so it never
   bleeds onto the mobile-only CTA/social links that also live in this
   wrapper — see .mobile-nav-extra below. */
.main-nav { display: flex; align-items: center; }
.main-nav-menu ul { display: flex; align-items: center; gap: 30px; }
.main-nav-menu ul ul { display: none; } /* sub-menus collapse to top level in this classic theme */
.mobile-nav-extra { display: none; } /* revealed only inside the mobile/tablet drawer — see Responsive section */

.nav-link, .main-nav-menu a {
  position: relative; font-weight: 600; font-size: 1.0625rem; color: var(--text-dark);
  padding: 8px 2px; transition: color var(--transition); display: inline-block;
}
.nav-link::after, .main-nav-menu a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--gold-600); transition: width var(--transition);
}
.nav-link:hover, .nav-link.active, .main-nav-menu a:hover, .main-nav-menu a.active, .main-nav-menu .current-menu-item > a { color: var(--green-800); }
.nav-link:hover::after, .nav-link.active::after, .main-nav-menu a:hover::after, .main-nav-menu a.active::after, .main-nav-menu .current-menu-item > a::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-cta { padding: 11px 22px; font-size: 0.9rem; }

/* Facebook/Instagram icons — shared class between the desktop header, the
   mobile drawer, and the footer's "Follow Us" column. */
.social-icons { display: flex; align-items: center; gap: 10px; }
.social-icon-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(11, 61, 46, 0.06);
  border: 1px solid var(--border-soft);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.social-icon-link svg { display: block; }
.social-icon-link:hover, .social-icon-link:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--gold-500); }
.social-icon-link:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }

.hamburger {
  display: none; width: 42px; height: 42px; border: none; background: transparent;
  border-radius: 50%; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--green-900); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: calc(var(--header-h) + var(--admin-bar-h)) 0 0 0; background: rgba(11, 61, 46, 0.4);
  opacity: 0; visibility: hidden; transition: opacity var(--transition); z-index: 400;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

/* =========================================================
   Hero — 3-slide banner carousel
   The full banner image is always shown uncropped (object-fit: contain);
   height is driven by the image's own aspect ratio so slides never jump.
   ========================================================= */
.hero { position: relative; color: var(--white); background: var(--green-900); }

.hero-slider { position: relative; }

/* --- Media stack: just the images. Height always comes from their own
   aspect ratio, completely unaffected by how much text a slide has — this
   is also what the arrows/dots are anchored to, so they stay pinned to the
   photo itself at every breakpoint instead of drifting with the content. --- */
.hero-media-stack { position: relative; display: grid; overflow: hidden; }

.hero-slide-media {
  grid-area: 1 / 1; /* stack every slide in the same cell so the crossfade never shows a gap */
  position: relative;
  width: 100%;
  aspect-ratio: 1935 / 813; /* matches the banner images; reserves space up front, no layout shift */
  background: var(--green-900); /* shows through as a clean brand backdrop if a slide has no image */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  transition: opacity 0.7s ease; /* crossfade only — the 5s autoplay interval itself lives in script.js's AUTOPLAY_MS */
}
.hero-slide-media.is-active { opacity: 1; visibility: visible; z-index: 1; }

.hero-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop or stretch — the complete banner stays visible */
}

/* --- Content stack: per-slide heading/description/buttons. On desktop and
   tablet this overlays the "safe" left side of the image with a gradient
   only behind the text itself, keeping the rest of the photo bright. --- */
.hero-content-stack { position: absolute; inset: 0; z-index: 2; display: grid; pointer-events: none; }

.hero-slide-content {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(560px, 56%);
  padding: 32px clamp(20px, 4vw, 48px);
  background: linear-gradient(100deg, rgba(11,61,46,0.92) 0%, rgba(11,61,46,0.75) 60%, rgba(11,61,46,0) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.hero-slide-content.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.eyebrow, .section-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 14px; }
.section-eyebrow { color: var(--gold-700); }

.hero-heading { color: var(--white); font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin-bottom: 16px; }
.text-gold { color: var(--gold-300); }

.hero-desc { color: rgba(244, 247, 244, 0.92); font-size: 1rem; max-width: 480px; margin-bottom: 22px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.trust-badges li { font-size: 0.84rem; font-weight: 600; color: var(--text-on-dark); padding-left: 22px; position: relative; }
.trust-badges li::before { content: "✔"; position: absolute; left: 0; color: var(--gold-300); font-size: 0.8rem; }

/* Prev/Next arrows */
.hero-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,61,46,0.55); color: var(--white); border: 1px solid rgba(255,255,255,0.45);
  font-size: 1.5rem; line-height: 1; padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.hero-slider-arrow:hover { background: rgba(11,61,46,0.85); }
.hero-slider-arrow:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }
.hero-slider-prev { left: 16px; }
.hero-slider-next { right: 16px; }

/* Dots */
.hero-slider-dots { position: absolute; z-index: 4; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 10px; }
.hero-slider-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--white); background: transparent; padding: 0; opacity: 0.75; }
.hero-slider-dots button.is-active { background: var(--gold-500); border-color: var(--gold-500); opacity: 1; }

/* =========================================================
   Trust features ticker — continuously scrolling strip directly under the
   hero slider. Pure CSS: two identical <ul> tracks sit side by side inside
   a flex row that's exactly double-width (width: max-content), and the
   whole row animates transform: translateX(-50%) — at the halfway point
   the visible content is pixel-identical to the start, so the loop resets
   with no visible seam. The parent's overflow: hidden clips the
   double-wide track so it never affects the page's own scrollable width.
   The second <ul> is aria-hidden so screen readers see the list once.
   ========================================================= */
.trust-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-800), var(--green-900));
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 20px 0;
}
/* Soft edge fade masks */
.trust-ticker::before,
.trust-ticker::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(24px, 6vw, 70px);
  z-index: 2;
  pointer-events: none;
}
.trust-ticker::before { left: 0; background: linear-gradient(90deg, var(--green-900), transparent); }
.trust-ticker::after { right: 0; background: linear-gradient(270deg, var(--green-900), transparent); }

.trust-ticker-track {
  display: flex;
  width: max-content;
  animation: trust-ticker-scroll 34s linear infinite;
}
.trust-ticker:hover .trust-ticker-track,
.trust-ticker-track:focus-within {
  animation-play-state: paused;
}
@keyframes trust-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.trust-ticker-set { display: flex; flex-shrink: 0; }

.trust-ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.16);
}

.trust-ticker-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.16);
  border: 1px solid rgba(201, 162, 39, 0.4);
}
.trust-ticker-icon { width: 19px; height: 19px; color: var(--gold-300); }

.trust-ticker-text { display: flex; flex-direction: column; gap: 2px; }
.trust-ticker-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--white); }
.trust-ticker-subtitle { font-size: 0.76rem; color: rgba(244, 247, 244, 0.78); }

@media (prefers-reduced-motion: reduce) {
  .trust-ticker-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .trust-ticker-set[aria-hidden="true"] { display: none; } /* the duplicate copy exists only to drive the scroll animation */
  .trust-ticker-set { flex-wrap: wrap; justify-content: center; }
  .trust-ticker-item { white-space: normal; border-right: none; padding: 10px 18px; }
}

/* =========================================================
   Sections / utility
   ========================================================= */
.section { padding: 90px 0; }
.bg-cream { background: var(--cream-100); }

.section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-sub { font-size: 1rem; }

.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

.gradient-placeholder { position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); overflow: hidden; color: rgba(255,255,255,0.9); background-size: cover; background-position: center; }
.placeholder-icon { font-size: 2.6rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
.gradient-green { background-image: linear-gradient(135deg, var(--green-600), var(--green-900)); }
.gradient-gold { background-image: linear-gradient(135deg, var(--gold-500), var(--gold-700)); }
.gradient-green-gold { background-image: linear-gradient(135deg, var(--green-700), var(--gold-600)); }
.gradient-gold-green { background-image: linear-gradient(135deg, var(--gold-600), var(--green-800)); }

/* =========================================================
   About — company + founder, layered photo composition
   ========================================================= */
.about { background: var(--green-100); } /* soft mint wash, reusing the existing token */

.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about-media { position: relative; }

.about-media-frame { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--green-800); }
.about-office-img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }

/* Founder portrait card, overlapping the office photo's bottom-right corner
   — an enlarged, photo-carrying version of the same "white card over the
   image" idea the rest of the site already uses (see .project-badge,
   .stat cards, etc.), just scaled up to hold a portrait + caption. The
   bottom-right corner is deliberately clear of the GLD logo, which sits in
   the upper-left area of the office photo. */
.about-portrait-card {
  position: absolute;
  z-index: 2;
  bottom: -28px; right: -24px; /* overhangs into the 60px column gap, well short of the text column — never past .about-media's own edge on the outer/left side */
  /* Capped at 195px: the office frame's rendered width plateaus around
     460-490px at every desktop viewport (the grid column stops growing once
     .container hits its 1200px max-width), so past ~200px here the card's
     left edge starts reaching into the GLD roundel logo on the wall behind
     the desk. 195px is the largest width that still leaves it clearly
     uncovered — verified by rendering this card in isolation over the real
     photo at each width before landing here. */
  width: clamp(155px, 15vw, 195px);
  background: var(--white);
  /* Premium, noticeably-rounded card (not the site's usual --radius-md/lg
     scale — this one's deliberately larger, ~28-32px, to read as its own
     "premium" portrait card rather than match the standard card radius). */
  border-radius: 30px;
  /* Subtle on purpose: just enough separation from the office photo behind
     it, not the heavier --shadow-md used for hover/active states elsewhere. */
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
/* Dedicated aspect-ratio box for the portrait (same wrapper-div + object-fit
   pattern used for .project-media/.hero-slide-media elsewhere in this file)
   so the crop is always predictable regardless of the card's own sizing.
   The ratio matches the source photo almost exactly, so object-fit: contain
   shows Ganesh's full body with no stretching and effectively no letterbox.
   Background is solid white (gld-founder-white.png already has a clean
   white background baked in — this is just the fallback for the sub-pixel
   edge, so nothing but white ever shows through). */
.about-portrait-media { position: relative; aspect-ratio: 1101 / 1429; overflow: hidden; background: var(--white); }
.about-portrait-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.about-portrait-caption { padding: 10px 14px 14px; text-align: center; }
.about-portrait-caption strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.98rem; color: var(--green-900); }

.about-points { margin: 22px 0 28px; display: flex; flex-direction: column; gap: 12px; }
.about-points li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--text-dark); }
.tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-size: 0.7rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

/* =========================================================
   Why choose us
   ========================================================= */
.feature-card { padding: 32px 26px; text-align: left; }
.feature-icon { font-size: 2.1rem; display: inline-block; margin-bottom: 14px; }
.feature-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feature-card p { margin: 0; font-size: 0.94rem; }

/* =========================================================
   Projects
   ========================================================= */
.project-card { overflow: hidden; display: flex; flex-direction: column; }
/* Briefly highlights the destination card after a Happy Customers photo
   label scrolls to it — see the .happy-card-label click handling in
   script.js. box-shadow paints outside the card's own border box, so it's
   unaffected by this card's overflow: hidden above, and it animates
   smoothly via .card's own existing box-shadow transition. */
.project-card.is-highlighted { box-shadow: 0 0 0 4px var(--gold-300), var(--shadow-md); }
.project-media { aspect-ratio: 16 / 10; border-radius: 0; position: relative; }
.project-badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.92); color: var(--green-900); font-size: 0.72rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.02em; }
.project-body { padding: 26px; display: flex; flex-direction: column; flex-grow: 1; }
.project-body h3 { font-size: 1.25rem; margin-bottom: 6px; }
.project-body h3 a { color: inherit; }
.project-location { font-size: 0.85rem; color: var(--gold-700); font-weight: 600; margin-bottom: 12px; }
.project-price { font-size: 0.85rem; color: var(--green-800); font-weight: 700; margin-bottom: 12px; }
.project-body > p:not(.project-location):not(.project-price) { font-size: 0.94rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.project-tags li { font-size: 0.75rem; font-weight: 600; background: var(--green-100); color: var(--green-800); padding: 5px 12px; border-radius: 999px; }
.project-body .btn { margin-top: auto; }
.projects-empty-note { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-top: -20px; margin-bottom: 40px; }

/* Project thumbnail photo (lazy-loaded <img>, uniform aspect ratio via .project-media above) */
.project-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Rate badge, bottom-right corner of the thumbnail */
.project-rate-badge {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(11,61,46,0.92); color: var(--white);
  font-size: 0.78rem; font-weight: 700; padding: 6px 12px;
  border-radius: 999px; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}

/* Enquire Now / Call Now — equal-width, equal-height, side by side */
.project-card-actions { display: flex; align-items: stretch; gap: 10px; margin-top: auto; }
.project-card-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; }

/* "View All Projects" / "Show Less Projects" toggle */
.projects-toggle-wrap { text-align: center; margin-top: 44px; }
.projects-toggle-wrap.is-js-hidden { display: none; } /* only hidden once script.js confirms it can drive the toggle */

/* The 5 additional project cards: visible by default (no-JS fallback keeps
   every project accessible) — script.js adds .is-collapsed on load and
   animates .is-entering/.is-leaving for a smooth, lightweight reveal. */
.project-card--extra { opacity: 1; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease; }
.project-card--extra.is-collapsed { display: none; }
.project-card--extra.is-entering,
.project-card--extra.is-leaving { opacity: 0; transform: translateY(16px); }

/* =========================================================
   Amenities
   ========================================================= */
.amenities-grid { text-align: center; }
.amenity {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 30px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.amenity:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--green-600); }

/* Icon badge — a soft circular backdrop behind each inline SVG, consistent
   across all 8 amenities regardless of how visually "busy" each icon is. */
.amenity-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-100);
  margin-bottom: 14px;
  transition: background var(--transition);
}
.amenity:hover .amenity-icon-wrap { background: var(--gold-300); }
.amenity-icon { width: 26px; height: 26px; color: var(--green-800); transition: color var(--transition); }
.amenity:hover .amenity-icon { color: var(--green-900); }

.amenity p { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--text-dark); line-height: 1.35; }

/* =========================================================
   DTCP & RERA approval
   ========================================================= */
.approval-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.approval-points { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.approval-point { display: flex; gap: 16px; align-items: flex-start; }
.approval-icon { font-size: 1.6rem; flex-shrink: 0; }
.approval-point h3 { font-size: 1.05rem; margin-bottom: 4px; }
.approval-point p { margin: 0; font-size: 0.92rem; }
.approval-frame {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 6vw, 56px); /* keeps the badge well clear of the rounded edges at every width */
}
.approval-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* =========================================================
   Buying process — animated road-journey timeline
   Desktop/tablet: one continuous horizontal blacktop road; car travels
   left→right. Mobile (≤767px, see Responsive section): the road becomes a
   vertical strip per step (content height varies too much per card for one
   shared element to size reliably) and the car travels top→bottom.
   Car position/travel distance is computed in script.js by measuring the
   first and last .process-marker directly, so it's exact regardless of
   orientation or how much any card's text wraps.
   ========================================================= */
.process-road-wrap { position: relative; }

.process-road {
  position: relative;
  width: 80%;
  height: 16px;
  margin: 0 auto -36px; /* centres the road on the marker row that follows (56px marker: 28 + 8 = 36) */
  border-radius: 999px;
  background: linear-gradient(180deg, #4c4c4c, #201f1e);
  border-top: 2px solid var(--gold-600);
  border-bottom: 2px solid var(--gold-600);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 4px 10px rgba(11,61,46,0.15);
  overflow: hidden;
}
.process-road-surface {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 7px);
}
.process-road::after { /* dashed white centre line */
  content: "";
  position: absolute;
  top: 50%; left: 5%; right: 5%; height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.9) 0 14px, transparent 14px 26px);
  border-radius: 2px;
}

.process-car {
  position: absolute;
  left: 0; top: 0; /* script.js sets the real left/top to the first marker's centre */
  width: 34px; height: 20px;
  color: var(--gold-500);
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4));
}
.process-car svg { width: 100%; height: 100%; display: block; }
.process-car.is-driving { animation: process-car-drive var(--car-duration, 4.2s) linear forwards; }
@keyframes process-car-drive {
  from { transform: translate(-50%, -50%) translate(0, 0); }
  to   { transform: translate(-50%, -50%) translate(var(--car-x, 0px), var(--car-y, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .process-car { display: none; } /* the travelling animation never starts for reduced-motion users — see script.js */
}

.process-timeline { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }

.process-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

.process-marker {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--green-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  border: 3px solid var(--cream-100);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

/* Vertical connector — makes it unambiguous which number belongs to which
   card. Colour-syncs with the marker as the car arrives/departs. */
.process-connector {
  width: 3px; height: 26px;
  background: var(--border-soft);
  margin: 6px 0;
  border-radius: 999px;
  transition: background var(--transition);
}

.process-content {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.process-icon-wrap { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green-100); margin: 0 auto 12px; transition: background var(--transition); }
.process-icon { width: 20px; height: 20px; color: var(--green-800); }

.process-content h3 { font-size: 1rem; margin-bottom: 6px; }
.process-content p { font-size: 0.86rem; margin: 0; color: var(--text-muted); }

/* Mouse hover — independent of the drive animation, for anyone exploring by hand. */
.process-step:hover .process-marker { transform: scale(1.06); box-shadow: var(--shadow-md); }
.process-step:hover .process-content { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--green-600); }

/* "Active" — the car has just arrived at this stop. */
.process-step.is-active .process-marker { background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.25), var(--shadow-md); transform: scale(1.1); }
.process-step.is-active .process-connector { background: var(--gold-600); }
.process-step.is-active .process-content { border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18), var(--shadow-md); transform: translateY(-4px); }
.process-step.is-active .process-icon-wrap { background: var(--gold-300); }

/* "Complete" — the car has already passed this stop. */
.process-step.is-complete .process-marker { background: linear-gradient(135deg, var(--green-600), var(--green-800)); color: var(--white); }
.process-step.is-complete .process-connector { background: var(--green-600); }
.process-step.is-complete .process-content { border-color: var(--green-600); }
.process-step.is-complete .process-icon-wrap { background: var(--green-100); }

/* =========================================================
   Happy Customers — infinite photo carousel
   ========================================================= */
.happy-carousel { position: relative; }
.happy-viewport { overflow: hidden; }
.happy-track {
  display: flex; gap: 24px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* prefers-reduced-motion already neutralises this globally — see the
     "Reduced motion" block near the end of this file (`* { transition-
     duration: 0.01ms !important; }`), no extra override needed here. */
}
.happy-slide { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; } /* 3 visible on desktop, 2 gaps of 24px; min-width:0 stops a flex item's default auto min-size from ever forcing this wider than its basis */

.happy-card {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm);
  background: var(--cream-100);
}
.happy-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.happy-card-label {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  display: inline-block; max-width: calc(100% - 20px);
  background: linear-gradient(135deg, var(--green-800), var(--green-900));
  color: var(--white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gold-500);
  box-shadow: var(--shadow-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.happy-card-label:hover, .happy-card-label:focus-visible {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); color: var(--green-900);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.happy-card-label:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }

.happy-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.happy-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--white); font-size: 1.3rem; color: var(--green-800); display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); }
.happy-arrow:hover { background: var(--green-900); color: var(--white); }
.happy-arrow:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }
.happy-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 220px; }
.happy-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--border-soft); padding: 0; }
.happy-dots button.is-active { background: var(--gold-600); }
.happy-dots button:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }

/* =========================================================
   CTA banner
   ========================================================= */
.cta-banner { background: linear-gradient(120deg, var(--green-900), var(--green-700) 60%, var(--gold-700)); color: var(--white); padding: 60px 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-inner h2 { color: var(--white); margin-bottom: 8px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-inner p { color: rgba(244,247,244,0.9); margin: 0; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: flex-start; }
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info-card { display: flex; align-items: center; gap: 16px; background: var(--cream-100); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 18px 20px; }
.contact-icon-svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--green-800); }
.contact-info-card h3 { font-size: 0.95rem; margin-bottom: 2px; }
.contact-info-card a, .contact-info-card p { font-size: 0.95rem; margin: 0; color: var(--text-dark); font-weight: 600; }
.contact-info-card a:hover, .contact-info-card a:focus-visible { color: var(--green-800); }
.contact-info-card a:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; border-radius: 2px; }

.map-embed-wrap {
  aspect-ratio: 16 / 9; margin-top: 6px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--cream-100);
}
.map-embed-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-view-link { margin-top: 14px; }

.contact-form { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 36px; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 7px; color: var(--text-dark); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--cream-100); color: var(--text-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(20, 96, 63, 0.15);
}
.form-row textarea { resize: vertical; }
.form-row.has-error input, .form-row.has-error textarea { border-color: #c0392b; }
.form-error { display: block; font-size: 0.78rem; color: #c0392b; margin-top: 5px; min-height: 1em; }

/* Honeypot — kept fully out of view and out of the tab order; real
   visitors never see or interact with this field. */
.gld-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

/* Contact form result box — shown after submission (success or error),
   populated dynamically by script.js when JS is enabled (id="formResult"),
   or rendered server-side by contact.php as a no-JS fallback. Sits in
   normal document flow below .form-actions, so it can never overlap the
   Submit / WhatsApp buttons above it. */
.form-result-box {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 16px 18px;
  border-radius: var(--radius-md); border: 1px solid transparent;
}
.form-result-box[hidden] { display: none; }
.form-result-box.success { background: var(--green-100); border-color: var(--green-600); color: var(--green-900); }
.form-result-box.error { background: #fdecea; border-color: #c0392b; color: #7a2419; }
.form-result-icon { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; }
.form-result-title { font-weight: 700; font-size: 0.98rem; margin: 0 0 4px; color: inherit; }
.form-result-box p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: inherit; }
.form-result-box p + p { margin-top: 4px; }
.form-result-open-wa { margin-top: 12px; }

.form-privacy-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 16px; margin-bottom: 0; text-align: center; }
.form-privacy-note a { color: var(--green-800); text-decoration: underline; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--green-900); color: rgba(244,247,244,0.85); padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand p { color: rgba(244,247,244,0.7); font-size: 0.9rem; margin-top: 14px; }
.footer-logo { display: block; }
.footer-logo .logo-img, .footer-logo .custom-logo {
  max-height: 62px; max-width: 190px; /* slightly larger footer treatment — more vertical room than the sticky header */
  filter: brightness(0) invert(1); /* footer-only white treatment — the header logo keeps its original brand colours */
}
.footer-logo .logo-text, .footer-logo.custom-logo-link { color: var(--white); }
.footer-logo .logo-text strong { color: var(--gold-300); }
.footer-brand .footer-brand-name { color: var(--white); font-weight: 700; font-size: 1rem; margin: 12px 0 0; letter-spacing: 0.01em; }
.footer-col h3 { color: var(--white); font-size: 1rem; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li { color: rgba(244,247,244,0.75); font-size: 0.92rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--gold-300); }

.footer-legal-links { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }

.footer-social { margin-top: 16px; }
.footer-social .social-icon-link { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.footer-social .social-icon-link:hover, .footer-social .social-icon-link:focus-visible { background: var(--gold-600); border-color: var(--gold-600); }

/* Mobile-only developer credit below the Follow Us social icons — hidden
   here on desktop and tablet; the max-width:767px block at the very end
   of this file is the only place that turns it back on, so no earlier
   rule can be the one hiding it. Does not touch or duplicate the existing
   desktop/tablet credit in .footer-bottom-inner .footer-credit above. */
.mobile-developer-credit { display: none; }

.footer-bottom { padding: 20px 0; overflow: visible; }
/* Back to two items (copyright, credit) — plain flex space-between is
   enough to pin them to opposite edges on desktop; it wraps to stacked,
   centred rows on its own once the row runs out of width (see the
   max-width:991px override below), no grid trickery needed for just two.
   display/visibility/overflow set explicitly (not just relying on the
   browser default) so nothing here can be silently switched off by a
   stray rule elsewhere — this row, and the credit line in it, must always
   render on every breakpoint. */
.footer-bottom-inner { display: flex; visibility: visible; overflow: visible; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-size: 0.82rem; color: rgba(244,247,244,0.6); }
.footer-bottom-inner p { display: block; visibility: visible; margin: 0; color: inherit; }
/* The "Designed & Developed by" text stays the footer's existing muted
   size/colour (inherited above) — only the linked name gets the gold
   accent, a step up in size, and its own hover treatment.
   overflow-wrap guarantees "Maxions Technologies" wraps onto its own line
   rather than ever forcing horizontal scroll on the narrowest phones. */
.footer-credit { overflow-wrap: break-word; }
.footer-credit a { color: var(--gold-300); font-size: 1.05em; font-weight: 600; text-decoration: none; transition: color var(--transition); }
.footer-credit a:hover, .footer-credit a:focus-visible { color: var(--gold-500); text-decoration: underline; }

/* =========================================================
   Mobile sticky action bar
   ========================================================= */
.mobile-action-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--white); box-shadow: 0 -6px 20px rgba(11,61,46,0.15); }
.mobile-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; font-weight: 700; font-size: 0.92rem; }
.mobile-action .icon { width: 18px; height: 18px; }
.mobile-action.call { background: var(--green-900); color: var(--white); }
.mobile-action.whatsapp { background: #25d366; color: var(--white); }

/* =========================================================
   Back to top
   ========================================================= */
.back-to-top {
  position: fixed; right: 20px; bottom: 90px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-900); color: var(--white); border: none; font-size: 1.2rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 550;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--green-700); }

/* =========================================================
   Generic page / blog / archive / 404 templates
   ========================================================= */
.page-header-band { background: linear-gradient(120deg, var(--green-900), var(--green-700)); color: var(--white); padding: 64px 0; text-align: center; }
.page-header-band h1 { color: var(--white); margin-bottom: 6px; }
.page-header-band .breadcrumb { color: rgba(244,247,244,0.75); font-size: 0.85rem; }
.page-header-band .breadcrumb a { color: var(--gold-300); }

.page-header-band .breadcrumb a:hover, .page-header-band .breadcrumb a:focus-visible { text-decoration: underline; }

.content-area { padding: 70px 0; }
.entry-content { max-width: 780px; margin: 0 auto; }
.entry-content h2, .entry-content h3 { margin-top: 1.4em; }
.entry-content a { color: var(--green-800); text-decoration: underline; }
.entry-content blockquote { border-left: 4px solid var(--gold-600); margin: 1.4em 0; padding: 0.4em 1.4em; background: var(--cream-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Privacy Policy / Terms and Conditions — premium, readable legal-page
   treatment built on the shared .content-area / .entry-content shell above. */
.legal-content > p:first-child { font-size: 1.05rem; color: var(--text-dark); }
.legal-content .legal-updated {
  display: inline-block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--gold-700); background: var(--cream-200); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 6px 16px; margin: 0 0 1.6em;
}
.legal-content h2 { font-size: 1.28rem; color: var(--green-900); margin: 1.8em 0 0.6em; }
.legal-content ul { margin: 0 0 1.2em; }
.legal-content li { margin-bottom: 0.4em; }

.legal-contact-cta {
  max-width: 780px; margin: 56px auto 0; text-align: center;
  background: var(--cream-100); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 40px 32px;
}
.legal-contact-cta h2 { margin: 0 0 10px; color: var(--green-900); }
.legal-contact-cta p { max-width: 520px; margin: 0 auto; }
.legal-contact-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 480px) {
  .legal-contact-cta { padding: 32px 20px; }
}

.post-list { display: grid; gap: 30px; max-width: 900px; margin: 0 auto; }
.post-card { display: flex; gap: 24px; padding: 24px; }
.post-card-thumb { width: 220px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body h2 { font-size: 1.35rem; margin-bottom: 8px; }
.post-card-body h2 a { color: var(--green-900); }
.post-card-meta { font-size: 0.8rem; color: var(--gold-700); font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.post-card-body p { font-size: 0.95rem; }
.read-more { font-weight: 700; color: var(--green-800); }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 50px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; color: var(--text-dark);
}
.pagination a:hover { background: var(--green-900); color: var(--white); border-color: var(--green-900); }
.pagination .current { background: var(--green-900); color: var(--white); border-color: var(--green-900); }

.not-found-wrap { text-align: center; max-width: 560px; margin: 0 auto; }
.not-found-wrap .not-found-code { font-family: var(--font-heading); font-size: 5rem; color: var(--gold-600); line-height: 1; margin-bottom: 10px; }
.search-form-404 { display: flex; gap: 10px; margin: 26px 0; }
.search-form-404 input[type="search"] { flex-grow: 1; padding: 12px 16px; border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--cream-100); }

/* Single project template */
.project-hero { position: relative; }
.project-hero-media { aspect-ratio: 21/9; position: relative; }
/* Darkening gradient used on the single-project banner (see single-project.php) */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(11,61,46,0.92) 0%, rgba(11,61,46,0.78) 45%, rgba(11,61,46,0.55) 100%);
  z-index: 1;
}
.project-meta-bar { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 24px 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 34px; }
.project-meta-item { font-size: 0.92rem; }
.project-meta-item strong { display: block; color: var(--green-900); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.project-cta-box { background: var(--cream-100); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 30px; text-align: center; margin-top: 40px; }
.project-cta-box .hero-actions { justify-content: center; margin-bottom: 0; }

/* Comments (kept minimal/consistent, in case comments are enabled on posts) */
.comments-area { max-width: 780px; margin: 60px auto 0; }
.comments-title, .comment-reply-title { font-size: 1.3rem; }
.comment-list { display: flex; flex-direction: column; gap: 20px; }
.comment-list .children { list-style: none; margin: 16px 0 0; padding-left: 30px; }
.comment-body { background: var(--cream-100); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 20px; }
.comment-author .avatar { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.comment-metadata { font-size: 0.78rem; color: var(--text-muted); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--cream-100); color: var(--text-dark); margin-top: 6px;
}
.comment-form p { margin-bottom: 16px; }
.comment-form label { font-weight: 600; font-size: 0.88rem; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  /* Between the hamburger breakpoint (860px) and a comfortably wide desktop,
     the nav links + CTA button already fill the row — drop the header
     social icons here to avoid crowding/overflow; they're still available
     via the mobile drawer below 860px and reappear once there's room. */
  .header-social { display: none; }
}
@media (max-width: 991px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .approval-grid, .contact-grid { grid-template-columns: 1fr; }
  /* width:100% is load-bearing, not decorative: .about-media's only normal-flow
     child is .about-media-frame, an aspect-ratio box with no intrinsic width of
     its own. Without an explicit width here, the auto side-margins (used to
     center it) cancel this grid item's default stretch and it sizes to
     fit-content instead — which collapses toward 0 with nothing to measure,
     shrinking the whole photo+card composition to a sliver pinned to the
     row's midpoint. Pairing width:100% with max-width keeps it capped at
     460px but sized (then centered) off the grid track, not off content. */
  .about-media { width: 100%; max-width: 460px; margin: 0 auto 60px; } /* extra clearance so the overlapping portrait card never touches the text below */
  /* Tablet: .about-media is capped at 460px here (no longer a fraction of a
     wide 2-column grid), which lands at almost the same rendered frame width
     as the desktop plateau above — so this keeps the same ~195px safe
     ceiling rather than the desktop clamp's own vw math (which is tuned to
     the 2-column layout's frame width, not this stacked one). */
  .about-portrait-card { width: clamp(175px, 24vw, 195px); }
  :root { --header-h: 84px; }
  .logo-img, .custom-logo { max-height: 66px; max-width: 200px; }
  /* Medium tablet keeps the 5-across horizontal road, just tighter. */
  .process-road { margin-bottom: -31px; } /* 46px marker: 23 + 8 (half the road's own height) */
  .process-timeline { gap: 10px; }
  .process-marker { width: 46px; height: 46px; font-size: 0.92rem; }
  .process-connector { height: 20px; }
  .process-content { padding: 18px 12px; }
  .process-content h3 { font-size: 0.92rem; }
  .process-content p { font-size: 0.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Tablet and mobile: stack the two bottom-row items centred instead of
     the desktop's left/right split — reads more naturally centred and
     full-width than squeezed side by side once the row no longer has
     desktop's width to spare. flex-direction:column forces the stack
     outright rather than leaving it to wrap only if the two happen not
     to fit on one line at a given width. gap is bumped up from the
     desktop rule's 8px so the two lines get comfortable breathing room
     once they're stacked instead of side by side. */
  .footer-bottom-inner { flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
  .trust-ticker-item { padding: 0 20px; gap: 10px; }
  .trust-ticker-icon-wrap { width: 34px; height: 34px; }
  .trust-ticker-icon { width: 17px; height: 17px; }
  .trust-ticker-title { font-size: 0.86rem; }
  .trust-ticker-subtitle { font-size: 0.72rem; }
  .hero-slide-content { width: min(480px, 64%); } /* a bit more breathing room on tablet widths */
  .post-card { flex-direction: column; }
  .post-card-thumb { width: 100%; }
  .happy-slide { flex: 0 0 calc((100% - 24px) / 2); } /* tablet — 2 visible, 1 gap */
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed; top: calc(var(--header-h) + var(--admin-bar-h)); right: 0; height: calc(100dvh - var(--header-h) - var(--admin-bar-h));
    width: min(85vw, 340px); max-width: 100%; background: var(--white); box-shadow: -8px 0 30px rgba(11,61,46,0.15);
    transform: translateX(100%); transition: transform var(--transition); z-index: 450; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; align-items: stretch; /* stacks the menu above .mobile-nav-extra, see below */
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav-menu ul { flex-direction: column; align-items: flex-start; gap: 4px; padding: 26px 28px 10px; }
  .main-nav-menu ul li { width: 100%; }
  .nav-link, .main-nav-menu a { display: block; padding: 14px 4px; font-size: 1rem; border-bottom: 1px solid var(--border-soft); }
  .nav-link::after, .main-nav-menu a::after { display: none; }

  /* Mobile-only "Contact Our Team" + Facebook/Instagram, pinned to the
     bottom of the drawer — the desktop equivalents in .header-actions are
     hidden below instead of being shown twice. */
  .mobile-nav-extra {
    display: block;
    margin-top: auto;
    padding: 18px 28px 26px;
    border-top: 1px solid var(--border-soft);
  }
  .mobile-nav-cta { width: 100%; margin-bottom: 16px; }
  .mobile-nav-social { justify-content: center; }

  .hamburger { display: inline-flex; }
  .header-cta, .header-social { display: none; }

  .mobile-action-bar { display: flex; }
  .back-to-top { bottom: 78px; }
  body { padding-bottom: 62px; }
  /* Extra clearance for the footer's last row specifically: body's own
     62px above already clears the fixed mobile-action-bar at this
     breakpoint's default text size, but stacking two lines here (see the
     max-width:991px rule) plus larger device font-size settings can push
     the credit line taller than that — this keeps it comfortably above
     the bar regardless. */
  .footer-bottom { padding-bottom: 32px; }
}

@media (max-width: 767px) {
  :root { --header-h: 72px; }
  .logo-img, .custom-logo { max-height: 54px; max-width: 165px; } /* stays clearly readable beside the hamburger button */
  .section { padding: 64px 0; }
  .happy-track { gap: 16px; }
  .happy-slide { flex: 0 0 100%; } /* mobile — 1 visible */

  /* About: below ~508px .about-media fills the full container width (its
     460px cap no longer binds), shrinking 1:1 with the viewport — so the
     logo behind it shrinks too, and the card has to shrink with both just to
     hold the same clearance. A small controlled overhang (right: -15px,
     inside the container's 24px padding, so it still can't reach the
     viewport edge) buys back a little of that width versus insetting fully;
     32vw tracks the frame's own shrink rate so the card stays clear of the
     logo down to 320px instead of just at 767px, capped at 162px so it
     doesn't re-grow past that clearance once .about-media hits its 460px
     cap again around 508px and stays flat the rest of the way up to 767px. */
  .about-portrait-card { right: -15px; bottom: -18px; width: clamp(100px, 32vw, 162px); }

  /* Hero: the overlay text panel would cover most of the image at this
     width, so the content stack drops out of the image entirely and
     becomes its own centred, compact block directly below the full banner
     photo (the media stack above it is untouched, so the image itself
     never crops or jumps). Only the active slide stays in normal flow
     within the content stack (inactive ones switch to an
     absolutely-positioned, hidden state) so its height always tracks just
     the visible slide's own content instead of stretching to whichever of
     the three slides has the most text. */
  .hero-content-stack { position: static; pointer-events: auto; }
  .hero-slide-content { position: absolute; inset: 0; visibility: hidden; }
  .hero-slide-content.is-active { position: static; visibility: visible; }

  .hero-slide-content {
    width: 100%;
    align-items: center;
    text-align: center;
    background: linear-gradient(160deg, var(--green-800), var(--green-900));
    padding: 28px 20px 32px;
  }
  .hero-desc { max-width: 480px; margin-left: auto; margin-right: auto; }
  .trust-badges { justify-content: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  /* Mobile-only: the aspect-ratio-driven height above (1935/813) makes the
     banner very short on narrow phones. Overriding height here — with both
     width (100%, from the base rule) and height now explicit — takes over
     from aspect-ratio for sizing at this breakpoint only; desktop/tablet
     are untouched since this whole block only applies ≤767px. Arrows stay
     centred (top:50%/translateY(-50%), already relative to this same
     element) and dots stay pinned near the bottom (bottom:12px, just
     below) automatically, since both are just offsets from this box's own
     edges, not hard-coded to its old height. The text/CTA panel is a
     separate block below the image at this breakpoint (see
     .hero-content-stack above), so it's completely unaffected by this. */
  .hero-slide-media { height: clamp(230px, 68vw, 300px); }
  .hero-slide-img { object-fit: cover; object-position: center; }

  .hero-slider-arrow { width: 38px; height: 38px; font-size: 1.25rem; }
  .hero-slider-dots { bottom: 12px; }

  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); } /* amenities keep 2-per-row on mobile — only .grid-3/.grid-4 in general drop to 1 here */
  /* Buying process: convert to a vertical road — marker on the left,
     content on the right, black road running down the left edge instead of
     across, car travels top to bottom. Never the 5-across horizontal
     layout at this width.
     Steps have different text lengths, so one shared road element sized by
     percentage can't reliably reach every marker's centre — instead each
     step (but the last) draws its own mini road segment from its own
     marker centre down to the next one, using height: calc(100% + gap) so
     it always reaches exactly that far regardless of how tall this step's
     own content is. The shared #processRoad bar (horizontal-only) is
     hidden here; script.js measures the actual marker positions itself,
     so the car's travel distance stays correct in both orientations. */
  .process-road { display: none; }
  .process-timeline { display: flex; flex-direction: column; gap: 28px; }
  .process-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
  .process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 20px; left: 20px;
    width: 6px; height: calc(100% + 28px);
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, #4c4c4c, #201f1e);
    border-left: 1.5px solid var(--gold-600);
    border-right: 1.5px solid var(--gold-600);
    z-index: 0;
  }
  .process-marker { width: 40px; height: 40px; font-size: 0.82rem; border-width: 2px; }
  .process-connector { display: none; } /* marker sits directly beside its own card now, so the connector isn't needed for the association to be obvious */
  .process-content { text-align: left; }
  .process-icon-wrap { margin: 0 0 10px; } /* left-align instead of the desktop centring */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Final word on the footer bottom row at mobile widths (<=767px) —
     placed after every earlier .footer-bottom-inner/.footer-credit rule
     in this file (the max-width:991px stack and max-width:860px padding
     above), and written with the full .site-footer .footer-bottom ...
     selector chain for higher specificity, so nothing earlier in the
     cascade — and nothing a CSS-combining/minifying step on the host
     might reorder — can leave the developer credit hidden, clipped, or
     narrower than the row. Copyright first, credit second, both centred,
     full-width, wrapping normally; every property the credit specifically
     needs is set explicitly rather than left to inherit. */
  .site-footer .footer-bottom .footer-bottom-inner {
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
    overflow: visible;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
  }
  .site-footer .footer-bottom .footer-bottom-inner p,
  .site-footer .footer-bottom .footer-credit {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    transform: none;
  }
  /* Clearance above the fixed Call Now / WhatsApp bar (.mobile-action-bar)
     for the credit line specifically — on top of body's own 62px general
     page-bottom clearance (max-width:860px, above) — plus the notch/home
     -indicator safe area on phones that report one; 0px on every other
     device, so this is a no-op there. */
  .site-footer .footer-bottom {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .cta-inner { flex-direction: column; text-align: center; }
  .contact-form { padding: 26px; }
  /* Ticker keeps animating on mobile (per spec) — just tighter, so each
     item stays comfortably readable at this width without being cut off. */
  .trust-ticker { padding: 16px 0; }
  .trust-ticker-item { padding: 0 16px; gap: 8px; }
  .trust-ticker-icon-wrap { width: 30px; height: 30px; }
  .trust-ticker-icon { width: 15px; height: 15px; }
  .trust-ticker-title { font-size: 0.82rem; }
  .trust-ticker-subtitle { font-size: 0.7rem; }
}

@media (max-width: 480px) {
  .logo-text { font-size: 0.92rem; }
  .testimonial-card { padding: 30px 22px; }
  /* Shrink padding/font-size instead of letting the two side-by-side
     project-card buttons wrap or overflow on very small screens. */
  .project-card-actions { gap: 8px; }
  .project-card-actions .btn { padding: 11px 8px; font-size: 0.82rem; }
}

@media (max-width: 360px) {
  /* Amenity names are longer than most other card labels here — on very
     narrow phones, 2-per-row leaves too little width for them to stay
     readable, so this is the one point where amenities also drop to 1-per-row. */
  .amenities-grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   Mobile-only developer credit — Follow Us column
   =========================================================
   Deliberately the last block in the file: .mobile-developer-credit is
   display:none by default (see the base rule next to .footer-social,
   above) for every width above this breakpoint, and this is the one and
   only place that turns it back on, so no earlier rule — footer-related
   or not — can end up being the one that hides it. Strictly mobile-only:
   767px and below only; 768px and up are untouched by this block. */
@media (max-width: 767px) {
  .mobile-developer-credit {
    display: block;
    position: static;
    visibility: visible;
    opacity: 1;
    margin: 18px 0 0;
    text-align: left; /* matches the Follow Us heading and social icons above it */
    white-space: normal;
    color: rgba(244, 247, 244, 0.6);
    font-size: 0.82rem;
  }
  .mobile-developer-credit a {
    color: var(--gold-300);
    font-size: 1.05em;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition);
  }
  .mobile-developer-credit a:hover,
  .mobile-developer-credit a:focus-visible {
    color: var(--gold-500);
    text-decoration: underline;
  }
}

/* Prevent the Maxions credit from appearing twice on mobile: the new
   .mobile-developer-credit under the Follow Us social icons (just above)
   is the one mobile should show, so the older .footer-credit in the
   footer's copyright/bottom row is hidden here at the same <=767px
   breakpoint.
   Selector note: the earlier max-width:767px rule that makes this
   element visible is written as ".footer-bottom-inner p, ... .footer-credit"
   — since .footer-credit's own element IS one of those <p>s, its
   ".footer-bottom-inner p" branch also matches it, at a HIGHER
   specificity (4 classes+1 element vs. that rule's own 3-class
   .footer-credit branch) than a plain .footer-credit override would
   have. Matching .footer-bottom-inner explicitly here (4 classes) beats
   that regardless of source order, so this is genuinely the deciding
   rule rather than merely the last one. */
@media (max-width: 767px) {
  .site-footer .footer-bottom .footer-bottom-inner .footer-credit {
    display: none;
  }
}