/* ==========================================================================
   GREEN PARK — Simple, clean theme
   White background · one font (DM Sans) · green brand colour
   Built on Bootstrap 5 grid.
   --------------------------------------------------------------------------
   1.  Variables
   2.  Base
   3.  Buttons
   4.  Header
   5.  Hero slider
   6.  Search bar
   7.  Section heading
   8.  Feature boxes
   9.  Project cards
   10. About
   11. Services
   12. Gallery
   13. Contact strip
   14. Footer
   15. Responsive
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  --green:        #157a46;
  --green-dark:   #0e5c34;
  --green-light:  #eaf5ef;
  --green-hover:  #12693c;

  --text:         #1f2a30;
  --text-soft:    #55636c;
  --text-light:   #8a969e;

  --white:        #ffffff;
  /* Section band — a hint of green so it never reads as dirty grey */
  --bg-soft:      #f3f7f4;
  --border:       #e4e9e6;

  /* Cards are tinted deeply enough to stand out on white AND on --bg-soft.
     A lighter tint disappeared against the section band. */
  --card-bg:       #e3f1ea;
  --card-bg-hover: #d7ebe0;

  /* Rounding — cards a touch softer than buttons */
  --radius-card: 14px;
  --radius-btn:  10px;
  --radius:      10px;

  /* Layered shadows read softer than one big blur */
  --shadow:       0 1px 2px rgba(16, 40, 28, .04),
                  0 4px 16px rgba(16, 40, 28, .05);
  --shadow-hover: 0 2px 4px rgba(16, 40, 28, .05),
                  0 14px 32px rgba(16, 40, 28, .11);
  --shadow-btn:   0 2px 6px rgba(21, 122, 70, .22);
  --shadow-btn-h: 0 6px 18px rgba(21, 122, 70, .32);

  --header-h:     76px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "DM Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* DM Sans has a real 700, so headings carry weight without needing a second
   family. Slight negative tracking keeps large sizes from looking loose. */
h1, h2, h3, h4, h5 {
  margin: 0 0 .6rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--text);
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.15; letter-spacing: -.028em; }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); letter-spacing: -.024em; }
h3 { font-size: 1.2rem; letter-spacing: -.014em; }
h4 { font-size: 1.05rem; letter-spacing: -.012em; }

p { margin: 0 0 1rem; color: var(--text-soft); }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--green-dark); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--green); color: #fff; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
/* Shorter band, used for the plot finder */
.section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.bg-soft { background: var(--bg-soft); }

/* Hairline where two bands of the same colour would otherwise run together */
.bg-soft + .bg-soft { border-top: 1px solid var(--border); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: .8rem 1.4rem; background: var(--green); color: #fff; font-weight: 500;
}
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

.container { --bs-gutter-x: 1.9rem; }
@media (min-width: 1400px) { .container { max-width: 1200px; } }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn-main,
.btn-line,
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.008em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease,
              transform .22s ease, box-shadow .22s ease;
}

/* The trailing arrow nudges forward on hover */
.btn-main svg,
.btn-line svg,
.btn-white svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .22s ease;
}
/* Only a trailing icon slides — a leading one (the phone) stays put */
.btn-main:hover > svg:last-child,
.btn-line:hover > svg:last-child,
.btn-white:hover > svg:last-child { transform: translateX(4px); }
.btn-main > svg:first-child:not(:last-child),
.btn-line > svg:first-child:not(:last-child),
.btn-white > svg:first-child:not(:last-child) { transform: none !important; }

.btn-main {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-main:hover {
  background: var(--green-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-h);
}
.btn-main:active { transform: translateY(0); box-shadow: var(--shadow-btn); }

.btn-line {
  border-color: #cfdcd5;
  color: var(--green-dark);
  background: #fff;
}
.btn-line:hover {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
  transform: translateY(-2px);
}
.btn-line:active { transform: translateY(0); }

.btn-white { background: #fff; color: var(--green); }
.btn-white:hover { background: var(--green-light); color: var(--green-dark); transform: translateY(-2px); }

/* Over a photo the outline button has to be white-on-transparent */
.on-photo .btn-line {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.on-photo .btn-line:hover { background: #fff; border-color: #fff; color: var(--green-dark); }

.btn-lg-touch { padding: 1.05rem 2.1rem; font-size: 1.02rem; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.topbar {
  background: var(--green-dark);
  color: rgba(255, 255, 255, .9);
  font-size: .875rem;
}
.topbar a { color: rgba(255, 255, 255, .9); }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar-item svg { width: 16px; height: 16px; flex: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(16, 40, 28, .09); }
.site-header .navbar { padding: 0; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.brand-name {
  display: block;
  color: var(--green-dark);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.15;
}
.brand-sub {
  display: block;
  color: var(--text-light);
  font-size: .74rem;
  font-weight: 400;
  line-height: 1.2;
}

.main-nav .nav-link {
  padding: .6rem 1rem;
  color: var(--text);
  font-size: .97rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all .2s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus { color: var(--green); background: var(--green-light); }
.main-nav .nav-link.active { color: var(--green); font-weight: 600; }

.dropdown-menu {
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius);
  --bs-dropdown-padding-y: .4rem;
  box-shadow: var(--shadow-hover);
  min-width: 14rem;
}
.dropdown-item {
  padding: .6rem 1.1rem;
  color: var(--text);
  font-size: .94rem;
  border-radius: 5px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--green-light); color: var(--green-dark); }
/* Bootstrap's default active state is blue — keep it in the brand instead */
.dropdown-item.active, .dropdown-item:active {
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 500;
}

.navbar-toggler {
  width: 46px; height: 46px; padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--green);
}
.navbar-toggler:focus { box-shadow: none; outline: 3px solid var(--green); outline-offset: 2px; }

@media (max-width: 1199.98px) {
  .main-nav { padding: .5rem 0 1rem; border-top: 1px solid var(--border); margin-top: .5rem; }
  .main-nav .nav-link { padding: .8rem .4rem; border-radius: 0; font-size: 1rem; }
  .main-nav .dropdown-menu { border: 0; box-shadow: none; padding-left: .8rem; }
}

/* --- Desktop: dropdowns open on hover, with a fade-and-slide -------------
   The menu stays in the DOM (display:block) so it can animate; visibility
   and opacity do the showing. Bootstrap's click still works because .show
   is matched alongside :hover. */
@media (min-width: 1200px) {

  /* Nav items fill the header height so the menu drops from its bottom edge
     instead of from the middle of the bar. */
  .main-nav .nav-item { display: flex; align-items: center; height: var(--header-h); }

  .main-nav .dropdown-menu {
    display: block;
    top: 100%;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .26s ease, transform .26s cubic-bezier(.2, .8, .3, 1),
                visibility .26s ease;
  }

  .main-nav .dropdown:hover > .dropdown-menu,
  .main-nav .dropdown:focus-within > .dropdown-menu,
  .main-nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Parent link reacts while its menu is open */
  .main-nav .dropdown:hover > .nav-link,
  .main-nav .dropdown:focus-within > .nav-link {
    color: var(--green);
    background: var(--green-light);
  }

  /* Caret flips over */
  .main-nav .dropdown-toggle::after {
    transition: transform .26s ease;
  }
  .main-nav .dropdown:hover > .dropdown-toggle::after,
  .main-nav .dropdown:focus-within > .dropdown-toggle::after {
    transform: rotate(180deg);
  }

  /* Menu links slide in one after another */
  .main-nav .dropdown-menu .dropdown-item {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
  }
  .main-nav .dropdown:hover > .dropdown-menu .dropdown-item,
  .main-nav .dropdown:focus-within > .dropdown-menu .dropdown-item,
  .main-nav .dropdown-menu.show .dropdown-item {
    opacity: 1;
    transform: translateX(0);
  }
  .main-nav .dropdown-menu li:nth-child(1) .dropdown-item { transition-delay: .04s; }
  .main-nav .dropdown-menu li:nth-child(2) .dropdown-item { transition-delay: .08s; }
  .main-nav .dropdown-menu li:nth-child(3) .dropdown-item { transition-delay: .12s; }
  .main-nav .dropdown-menu li:nth-child(4) .dropdown-item { transition-delay: .16s; }
  .main-nav .dropdown-menu li:nth-child(5) .dropdown-item { transition-delay: .20s; }
  .main-nav .dropdown-menu li:nth-child(6) .dropdown-item { transition-delay: .24s; }
  .main-nav .dropdown-menu li:nth-child(7) .dropdown-item { transition-delay: .28s; }
  .main-nav .dropdown-menu li:nth-child(8) .dropdown-item { transition-delay: .32s; }
}

/* ==========================================================================
   5. HERO SLIDER
   ========================================================================== */
.hero {
  position: relative;
  background: var(--green-dark);
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
.hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide-inner {
  width: 100%;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(5rem, 8vw, 6.5rem);
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

/* Ken Burns — the photo drifts in slowly for as long as the slide is up,
   which is what makes an auto-playing slider feel alive rather than static. */
.hero-slide.is-active .hero-photo {
  animation: heroZoom 8s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14); }
}

/* Simple, even dark overlay so white text is always readable */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 46, 30, .88) 0%, rgba(14, 46, 30, .72) 55%, rgba(14, 46, 30, .5) 100%);
}

.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero p {
  max-width: 34rem;
  margin-bottom: 1.8rem;
  color: rgba(255, 255, 255, .9);
  font-size: 1.05rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  padding: .45rem 1rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
}
.hero-tag svg { width: 16px; height: 16px; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Slide copy rises in one piece at a time each time a slide becomes active */
.hero-slide .hero-tag,
.hero-slide h1,
.hero-slide p,
.hero-slide .hero-buttons {
  opacity: 0;
  transform: translateY(24px);
}
.hero-slide.is-active .hero-tag     { animation: heroUp .85s cubic-bezier(.2, .8, .3, 1) .12s forwards; }
.hero-slide.is-active h1            { animation: heroUp .85s cubic-bezier(.2, .8, .3, 1) .26s forwards; }
.hero-slide.is-active p             { animation: heroUp .85s cubic-bezier(.2, .8, .3, 1) .40s forwards; }
.hero-slide.is-active .hero-buttons { animation: heroUp .85s cubic-bezier(.2, .8, .3, 1) .54s forwards; }

@keyframes heroUp {
  to { opacity: 1; transform: none; }
}

/* Dots */
.hero-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.6rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: .6rem;
}
.hero-dots button {
  width: 36px; height: 5px; padding: 0;
  border: 0; border-radius: 100px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.hero-dots button[aria-selected="true"] { background: #fff; width: 52px; }

/* Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-top: -23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease;
}
.hero-arrow:hover { background: rgba(255, 255, 255, .38); }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow.prev { left: 1rem; }
.hero-arrow.next { right: 1rem; }

/* ==========================================================================
   6. SEARCH BAR
   ========================================================================== */
.search-bar {
  position: relative;
  z-index: 10;
  margin-top: clamp(2rem, 4vw, 3rem);   /* sits below the slider, never over it */
  padding: 1.75rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 6px rgba(16, 40, 28, .06),
              0 18px 44px rgba(16, 40, 28, .13);
}
.search-bar h3 { margin-bottom: .2rem; font-size: 1.2rem; }
.search-bar p { margin: 0; font-size: .93rem; }

.form-label-simple {
  display: block;
  margin-bottom: .4rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
}
.form-input {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}
.form-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(21, 122, 70, .15);
}

/* Match the button height to the select next to it */
.search-bar .btn-main { padding-top: .8rem; padding-bottom: .8rem; }

/* ==========================================================================
   7. SECTION HEADING
   ========================================================================== */
.section-head { margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: .6rem; }
.section-head p { max-width: 40rem; margin: 0; font-size: 1.02rem; }
.section-head.center { text-align: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* Small pill label above a heading */
.tag {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .3rem .9rem;
  border-radius: 100px;
  background: var(--green-light);
  color: var(--green);
  font-size: .82rem;
  font-weight: 500;
}

/* Plain "Read more" text link */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--green);
  font-size: .93rem;
  font-weight: 500;
}
.text-link:hover { color: var(--green-dark); }

/* ==========================================================================
   8. FEATURE BOXES
   ========================================================================== */
.feature-box {
  height: 100%;
  padding: 2.1rem 1.8rem;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
}
.feature-box:hover {
  background: var(--card-bg-hover);
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* The icon circle is solid green, since the card itself is already tinted */
.feature-box .ico {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(21, 122, 70, .25);
  transition: transform .28s ease;
}
.feature-box:hover .ico { transform: scale(1.06); }
.feature-box .ico svg { width: 26px; height: 26px; }
.feature-box h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.feature-box p { margin: 0; font-size: .96rem; }

/* ==========================================================================
   9. PROJECT CARDS
   ========================================================================== */
/* Project cards are links, so they get the boldest treatment: a tinted card
   that fills solid green on hover. */
.project-card {
  position: relative;
  display: block;
  height: 100%;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: background .3s ease, transform .28s ease, box-shadow .28s ease;
}
.project-card:hover {
  background: var(--green);
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(16, 40, 28, .06), 0 16px 34px rgba(21, 122, 70, .3);
}

.project-card .body { padding: 1.9rem 1.6rem 1.7rem; }

/* Location pin sits above the name */
.project-card .body::before {
  content: "";
  display: block;
  width: 46px; height: 46px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background-color: var(--green);
  background-position: center;
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath d='M19.5 10.5c0 7.1-7.5 11.25-7.5 11.25S4.5 17.6 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3C/svg%3E");
  transition: background-color .3s ease;
}
/* On the solid-green card the pin flips to a white circle with a green mark */
.project-card:hover .body::before {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23157a46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath d='M19.5 10.5c0 7.1-7.5 11.25-7.5 11.25S4.5 17.6 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3C/svg%3E");
}

.project-card h3 {
  margin-bottom: .4rem;
  font-size: 1.16rem;
  color: var(--text);
  transition: color .3s ease;
}
.project-card p {
  margin: 0 0 1.1rem;
  font-size: .94rem;
  transition: color .3s ease;
}

.project-card .more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--green);
  font-size: .94rem;
  font-weight: 500;
  transition: color .3s ease;
}
.project-card .more svg { width: 16px; height: 16px; transition: transform .25s ease; }

/* Text turns white once the card is green */
.project-card:hover h3,
.project-card:hover .more { color: #fff; }
.project-card:hover p { color: rgba(255, 255, 255, .85); }
.project-card:hover .more svg { transform: translateX(5px); }

/* ==========================================================================
   10. ABOUT
   ========================================================================== */
.about-img {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.tick-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.tick-list li {
  display: flex;
  gap: .7rem;
  margin-bottom: .75rem;
  color: var(--text-soft);
  font-size: .98rem;
}
.tick-list svg {
  width: 22px; height: 22px; flex: none; margin-top: .18rem;
  color: var(--green);
}

/* ==========================================================================
   11. SERVICES
   ========================================================================== */
.service-box {
  height: 100%;
  padding: 2rem 1.8rem;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
}
.service-box:hover {
  background: var(--card-bg-hover);
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.service-box .num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(21, 122, 70, .25);
  transition: transform .28s ease;
}
.service-box:hover .num { transform: scale(1.06); }
.service-box h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.service-box p { margin: 0 0 1.1rem; font-size: .95rem; }

/* ==========================================================================
   12. GALLERY
   ========================================================================== */
.gallery-item {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--green-light);
  aspect-ratio: 4 / 3;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.07); }

/* ==========================================================================
   13. CONTACT STRIP
   ========================================================================== */
.contact-strip {
  padding: clamp(2.8rem, 6vw, 4rem) 0;
  background: var(--green);
  color: #fff;
}
.contact-strip h2 { color: #fff; }
.contact-strip p { color: rgba(255, 255, 255, .9); }

.contact-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, .13);
  border-radius: var(--radius-btn);
  color: #fff;
}
.contact-card:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.contact-card svg { width: 24px; height: 24px; flex: none; }
.contact-card .label { display: block; font-size: .82rem; color: rgba(255, 255, 255, .8); }
.contact-card .value { display: block; font-size: 1rem; font-weight: 500; }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  padding: clamp(3rem, 5vw, 4rem) 0 0;
  background: #14211b;
  color: rgba(255, 255, 255, .68);
  font-size: .95rem;
}
.site-footer h4 { margin-bottom: 1.1rem; color: #fff; font-size: 1rem; font-weight: 600; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255, 255, 255, .6); }
.footer-intro { max-width: 23rem; }
.site-footer a { color: rgba(255, 255, 255, .68); }
.site-footer a:hover { color: #fff; }
.site-footer p { color: rgba(255, 255, 255, .68); }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .6rem; }

.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .9rem; line-height: 1.6; }
.footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: .25rem; color: var(--green); }

.rera-box {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem .9rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  font-size: .82rem;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  font-size: .88rem;
}

/* ==========================================================================
   FLOATING ACTION BUTTONS (WhatsApp + Call)
   ========================================================================== */
.float-actions {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.float-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px rgba(16, 40, 28, .28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.float-btn:hover { color: #fff; transform: scale(1.08); box-shadow: 0 8px 22px rgba(16, 40, 28, .34); }
.float-btn:active { transform: scale(.96); }
.float-btn svg { width: 29px; height: 29px; }

.float-btn--wa   { background: #25d366; }        /* WhatsApp brand green */
.float-btn--call { background: var(--green); }
.float-btn--call svg { width: 25px; height: 25px; }

/* Label slides out on hover (desktop only) */
.float-btn .label {
  position: absolute;
  right: calc(100% + .65rem);
  padding: .45rem .85rem;
  border-radius: 8px;
  background: #14211b;
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.float-btn .label::after {          /* little arrow pointing at the button */
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #14211b;
}
.float-btn:hover .label,
.float-btn:focus-visible .label { opacity: 1; transform: translateX(0); }

/* --- WhatsApp animation ---------------------------------------------------
   Two expanding rings behind the button, offset in time, plus a slow
   heartbeat on the button itself so it draws the eye without shouting. */
.float-btn--wa::before,
.float-btn--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25d366;
  animation: waRing 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}
.float-btn--wa::after { animation-delay: 1.2s; }

@keyframes waRing {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.05); opacity: 0; }
}

.float-btn--wa { animation: waBeat 2.4s ease-in-out infinite; }
@keyframes waBeat {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.07); }
  96%           { transform: scale(1.02); }
}
/* Hover takes over from the heartbeat so the two don't fight */
.float-btn--wa:hover { animation-play-state: paused; transform: scale(1.08); }

@media (max-width: 767.98px) {
  .float-btn { width: 52px; height: 52px; }
  .float-btn svg { width: 27px; height: 27px; }
  .float-btn .label { display: none; }
}

/* ==========================================================================
   SOCIAL MEDIA ICONS
   ========================================================================== */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.social-row a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.social-row a svg { width: 18px; height: 18px; }

/* Each icon always wears its own network's brand colour */
.social-row a[data-net="facebook"] {
  background: #1877f2;
  box-shadow: 0 3px 10px rgba(24, 119, 242, .32);
}
.social-row a[data-net="instagram"] {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 3px 10px rgba(220, 39, 67, .32);
}
.social-row a[data-net="youtube"] {
  background: #ff0000;
  box-shadow: 0 3px 10px rgba(255, 0, 0, .32);
}

/* Hover just lifts the icon and deepens its own glow */
.social-row a:hover { color: #fff; transform: translateY(-3px); filter: brightness(1.08); }
.social-row a[data-net="facebook"]:hover  { box-shadow: 0 8px 20px rgba(24, 119, 242, .48); }
.social-row a[data-net="instagram"]:hover { box-shadow: 0 8px 20px rgba(220, 39, 67, .48); }
.social-row a[data-net="youtube"]:hover   { box-shadow: 0 8px 20px rgba(255, 0, 0, .48); }

/* On the green contact strip a white ring separates the icons from the panel */
.social-row--light a { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.social-row--light a:hover { box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(0, 0, 0, .22); }

/* Scroll reveal — kept very subtle */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* Slide copy must stay visible — the blanket rule above would otherwise
     leave it stuck at opacity 0 */
  .hero-slide .hero-tag,
  .hero-slide h1,
  .hero-slide p,
  .hero-slide .hero-buttons { opacity: 1; transform: none; }
  .hero-slide.is-active .hero-photo { animation: none; transform: scale(1.02); }
  /* No pulsing rings or heartbeat when motion is reduced */
  .float-btn--wa,
  .float-btn--wa::before,
  .float-btn--wa::after { animation: none !important; }
  .float-btn--wa::before,
  .float-btn--wa::after { opacity: 0; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .hero-arrow { display: none; }
}

@media (max-width: 767.98px) {
  body { font-size: 15.5px; }
  .section { padding: 3rem 0; }
  .hero-slide-inner { padding: 3rem 0 4.5rem; }
  .hero p { font-size: 1rem; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn-main,
  .hero-buttons .btn-line { width: 100%; }
  .search-bar { margin-top: 1.5rem; }
  /* Leave room for the floating WhatsApp + call stack */
  .site-footer { padding-bottom: 6.5rem; }
}

@media print {
  .site-header, .topbar, .float-actions, .hero-dots, .hero-arrow, .contact-strip { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   16. INNER PAGES
   --------------------------------------------------------------------------
   Page banner, long-form text and value cards used by the About Us pages.
   ========================================================================== */

/* ---- Page banner -------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  background: linear-gradient(100deg, var(--green-dark) 0%, var(--green) 100%);
  color: #fff;
  overflow: hidden;
}
.page-hero::after {              /* soft light bloom, keeps the band from looking flat */
  content: "";
  position: absolute;
  right: -10%;
  top: -60%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .11) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero h1 { position: relative; color: #fff; margin-bottom: .5rem; }
.page-hero p {
  position: relative;
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 1.05rem;
}

.crumbs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
  font-size: .9rem;
}
.crumbs li { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .7); }
.crumbs a { color: rgba(255, 255, 255, .82); }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .45); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 500; }

/* ---- Long-form text ----------------------------------------------------- */
.prose { max-width: 44rem; }
.prose.wide { max-width: none; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; margin-bottom: .6rem; color: var(--green-dark); }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 1.02rem; }

/* Opening paragraph of a page reads a size up */
.prose .intro {
  margin-bottom: 1.5rem;
  color: var(--text);
  font-size: clamp(1.1rem, 1.8vw, 1.28rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.012em;
}

/* ---- Value cards (Vision / Mission) ------------------------------------- */
.value-card {
  height: 100%;
  padding: 2.2rem 1.9rem;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
}
.value-card:hover {
  background: var(--card-bg-hover);
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.value-card .ico {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(21, 122, 70, .25);
}
.value-card .ico svg { width: 27px; height: 27px; }
.value-card h2 { margin-bottom: .7rem; font-size: 1.5rem; }
.value-card p { margin: 0; font-size: 1rem; }

/* ---- Pull quote --------------------------------------------------------- */
.pull-quote {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--green);
  border-radius: var(--radius-card);
  color: #fff;
}
.pull-quote p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.014em;
}
.pull-quote footer {
  margin-top: 1rem;
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
}

/* ---- Side panel (stats / facts beside body copy) ------------------------ */
.side-panel {
  padding: 1.8rem 1.6rem;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.side-panel h3 { margin-bottom: 1.1rem; font-size: 1.1rem; }
.side-panel .fact { padding: .85rem 0; border-bottom: 1px solid rgba(21, 122, 70, .14); }
.side-panel .fact:last-child { border-bottom: 0; padding-bottom: 0; }
.side-panel .fact span {
  display: block;
  color: var(--text-light);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.side-panel .fact strong {
  display: block;
  margin-top: .15rem;
  color: var(--green-dark);
  font-size: 1.02rem;
  font-weight: 600;
}

/* ==========================================================================
   17. GALLERY PAGE
   ========================================================================== */
.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gallery-tile:hover img { transform: scale(1.07); }

/* Green veil + zoom icon on hover */
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 92, 52, .8) 0%, rgba(14, 92, 52, .15) 60%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.gallery-tile:hover::after,
.gallery-tile:focus-visible::after { opacity: 1; }

.gallery-tile .zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.gallery-tile .zoom svg { width: 22px; height: 22px; }
.gallery-tile:hover .zoom,
.gallery-tile:focus-visible .zoom { opacity: 1; transform: scale(1); }

.gallery-tile .cap {
  position: absolute;
  left: 1rem; right: 1rem;
  bottom: .9rem;
  z-index: 2;
  color: #fff;
  font-size: .88rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery-tile:hover .cap,
.gallery-tile:focus-visible .cap { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   18. MAGNIFIC POPUP — zoom animation + brand styling
   ========================================================================== */

/* Fade the backdrop and container in and out (paired with the JS zoom option) */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  transition: opacity .3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; }
.mfp-with-zoom.mfp-ready.mfp-bg { opacity: .92; }
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; }

.mfp-bg { background: #0b1a13; }

.mfp-figure::after { box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }

/* Caption */
.mfp-title {
  padding-top: .6rem;
  color: rgba(255, 255, 255, .88);
  font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.5;
}
.mfp-counter {
  color: rgba(255, 255, 255, .55);
  font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
  font-size: .85rem;
}

/* Close button */
.mfp-close,
.mfp-close:active { opacity: 1; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  width: 44px;
  height: 44px;
  right: 0;
  padding: 0;
  color: #fff;
  font-size: 30px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  transition: background .25s ease, transform .25s ease;
}
.mfp-image-holder .mfp-close:hover {
  background: var(--green);
  transform: rotate(90deg);
}

/* Prev / next arrows — round, brand green on hover */
.mfp-arrow {
  width: 52px;
  height: 52px;
  margin-top: -26px;
  opacity: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  transition: background .25s ease, transform .25s ease;
}
.mfp-arrow:hover { background: var(--green); transform: scale(1.08); }
.mfp-arrow:active { margin-top: -26px; }
.mfp-arrow::before,
.mfp-arrow::after { display: none; }         /* drop the default CSS triangles */

/* Draw clean chevrons instead */
.mfp-arrow-left,
.mfp-arrow-right {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
.mfp-arrow-left {
  left: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E");
}
.mfp-arrow-right {
  right: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
}

@media (max-width: 575.98px) {
  .mfp-arrow { width: 42px; height: 42px; margin-top: -21px; background-size: 18px 18px; }
  .mfp-arrow-left { left: .35rem; }
  .mfp-arrow-right { right: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mfp-with-zoom .mfp-container,
  .mfp-with-zoom.mfp-bg { transition: none; }
}

/* ==========================================================================
   19. FOUNDER / OWNER PAGE
   ========================================================================== */
.owner-wrap { position: relative; }

/* ---- Portrait ----------------------------------------------------------- */
.owner-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--green-light);
  box-shadow: 0 4px 10px rgba(16, 40, 28, .06), 0 26px 54px rgba(16, 40, 28, .16);
}
.owner-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Green frame offset behind the portrait */
.owner-photo-frame { position: relative; }
.owner-photo-frame::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  width: 62%;
  height: 62%;
  border-top: 3px solid var(--green);
  border-left: 3px solid var(--green);
  border-radius: 18px 0 0 0;
  pointer-events: none;
}
.owner-photo-frame::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 62%;
  height: 62%;
  border-bottom: 3px solid var(--green);
  border-right: 3px solid var(--green);
  border-radius: 0 0 18px 0;
  pointer-events: none;
}

/* Floating badge over the portrait */
.owner-badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.05rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .95);
  color: var(--green-dark);
  font-size: .86rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.owner-badge svg { width: 16px; height: 16px; color: var(--green); }

/* ---- Name block --------------------------------------------------------- */
.owner-name {
  margin-bottom: .25rem;
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.owner-role {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .35rem 1rem;
  border-radius: 100px;
  background: var(--green-light);
  color: var(--green);
  font-size: .92rem;
  font-weight: 600;
}

/* ---- Founder's message -------------------------------------------------- */
.owner-quote {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 1.6rem 1.6rem 1.6rem 3.4rem;
  background: var(--card-bg);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.owner-quote::before {
  content: "\201C";
  position: absolute;
  left: 1rem;
  top: .35rem;
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem;
  line-height: 1;
  opacity: .32;
}
.owner-quote p {
  margin: 0;
  color: var(--text);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.62;
}
.owner-quote cite {
  display: block;
  margin-top: .9rem;
  color: var(--text-light);
  font-size: .88rem;
  font-style: normal;
  font-weight: 500;
}

/* ---- Direct contact tiles ---------------------------------------------- */
.contact-tile {
  display: flex;
  align-items: center;
  gap: .95rem;
  height: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-tile:hover {
  background: var(--card-bg-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.contact-tile .ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(21, 122, 70, .25);
}
.contact-tile .ico svg { width: 21px; height: 21px; }
.contact-tile .ico--wa { background: #25d366; box-shadow: 0 4px 12px rgba(37, 211, 102, .3); }
.contact-tile .ico--wa svg { width: 23px; height: 23px; }

.contact-tile .txt { min-width: 0; }
.contact-tile .k {
  display: block;
  color: var(--text-light);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.contact-tile .v {
  display: block;
  margin-top: .1rem;
  color: var(--green-dark);
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---- Small stat row ----------------------------------------------------- */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}
.mini-stats .s { padding: 1.2rem 1rem 0 0; }
.mini-stats .s strong {
  display: block;
  color: var(--green);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.mini-stats .s span {
  display: block;
  margin-top: .4rem;
  color: var(--text-light);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .mini-stats { grid-template-columns: 1fr 1fr; }
  .owner-photo-frame::before,
  .owner-photo-frame::after { display: none; }
}

/* Opening line on the founder page */
.lead-text {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   20. CONTACT PAGE
   ========================================================================== */

/* ---- Contact detail rows ----------------------------------------------- */
.info-list { margin: 0; padding: 0; list-style: none; }
.info-list li {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}
.info-list li:first-child { padding-top: 0; }
.info-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.info-list .ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
}
.info-list .ico svg { width: 21px; height: 21px; }
.info-list .ico--wa { background: rgba(37, 211, 102, .16); color: #1da851; }

.info-list .k {
  display: block;
  margin-bottom: .1rem;
  color: var(--text-light);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.info-list .v {
  display: block;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.info-list .v a { color: var(--green-dark); font-weight: 500; }
.info-list .v a:hover { color: var(--green); text-decoration: underline; }

/* ---- Enquiry form ------------------------------------------------------ */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.form-card h2 { margin-bottom: .35rem; font-size: 1.6rem; }
.form-card .hint { margin-bottom: 1.6rem; font-size: .94rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: .4rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
}
.field .req { color: #c0392b; }

textarea.form-input { resize: vertical; min-height: 7.5rem; }

.form-note {
  margin-top: 1rem;
  color: var(--text-light);
  font-size: .85rem;
  line-height: 1.55;
}

/* Inline validation feedback */
.form-input:user-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

/* ---- Map --------------------------------------------------------------- */
.map-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  line-height: 0;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 46vw, 460px);
  border: 0;
  filter: saturate(.95);
}

/* Address card floating over the map on wider screens */
.map-card {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  max-width: 21rem;
  padding: 1.25rem 1.35rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 6px 24px rgba(16, 40, 28, .2);
  line-height: 1.6;
}
.map-card h3 { margin-bottom: .35rem; font-size: 1.08rem; }
.map-card p { margin: 0 0 .9rem; font-size: .9rem; }

@media (max-width: 767.98px) {
  .map-card {
    position: static;
    max-width: none;
    margin-top: 1rem;
    box-shadow: var(--shadow);
  }
  .map-frame { border-radius: var(--radius-card) var(--radius-card) 0 0; }
}

/* ==========================================================================
   21. PLOT FINDER (home page)
   ========================================================================== */
.finder-card {
  position: relative;
  padding: clamp(1.6rem, 3.4vw, 2.5rem);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(16, 40, 28, .06),
              0 20px 46px rgba(16, 40, 28, .13);
  overflow: hidden;
}

/* Green rule across the top */
.finder-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 5px;
  background: linear-gradient(90deg, var(--green-dark), var(--green) 55%, #3fae72);
}

/* Faint map-pin watermark in the corner */
.finder-card::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 190px; height: 190px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23157a46' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath d='M19.5 10.5c0 7.1-7.5 11.25-7.5 11.25S4.5 17.6 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3C/svg%3E");
  opacity: .07;
  pointer-events: none;
}

/* ---- Heading row ------------------------------------------------------- */
.finder-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.finder-icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  flex: none;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--green), var(--green-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(21, 122, 70, .32);
}
.finder-icon svg { width: 28px; height: 28px; }

.finder-top h2 { margin: 0 0 .15rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.finder-top p { margin: 0; font-size: .95rem; }

.finder-count {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  padding: .4rem .95rem;
  flex: none;
  border-radius: 100px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.finder-count .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(21, 122, 70, .18);
}

/* ---- Select + button --------------------------------------------------- */
.finder-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .9rem;
}
.finder-row .field-grow { flex: 1 1 20rem; min-width: 0; }

/* Pin icon sits inside the select */
.select-wrap { position: relative; }
.select-wrap > svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  color: var(--green);
  pointer-events: none;
  z-index: 2;
}
.select-wrap select {
  padding-left: 3rem;
  padding-top: .95rem;
  padding-bottom: .95rem;
  font-size: 1.02rem;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2355636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  cursor: pointer;
}

.finder-row .btn-main {
  flex: 0 0 auto;
  padding-top: .95rem;
  padding-bottom: .95rem;
}

/* ---- Quick location chips --------------------------------------------- */
.finder-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.finder-chips .chips-label {
  margin-right: .3rem;
  color: var(--text-light);
  font-size: .85rem;
  font-weight: 500;
}
.finder-chips a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .95rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #fff;
  color: var(--text);
  font-size: .88rem;
  font-weight: 500;
  transition: all .22s ease;
}
.finder-chips a svg {
  width: 13px; height: 13px;
  color: var(--green);
  opacity: .55;
  transition: opacity .22s ease, transform .22s ease;
}
.finder-chips a:hover {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(21, 122, 70, .28);
}
.finder-chips a:hover svg { color: #fff; opacity: 1; transform: translateX(2px); }

@media (max-width: 767.98px) {
  .finder-top { flex-wrap: wrap; gap: .85rem; margin-bottom: 1.25rem; }
  .finder-icon { width: 50px; height: 50px; border-radius: 13px; }
  .finder-icon svg { width: 24px; height: 24px; }
  .finder-count { margin-left: 0; order: 3; }
  .finder-row .btn-main { width: 100%; }
  .finder-card::after { width: 130px; height: 130px; }
  .finder-chips { margin-top: 1.2rem; padding-top: 1.1rem; }
  .finder-chips .chips-label { width: 100%; margin-bottom: .2rem; }
}