@charset "UTF-8";
/* ==========================================================================
   New Life Landscapings LLC — Brand Overrides
   Load AFTER style.css. Do NOT edit vendor CSS files.
   ========================================================================== */

/* Prevent horizontal scrollbars from wide gutters / off-canvas nav on any
   viewport. `clip` keeps sticky/fixed elements fully working where supported. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

:root {
  /* Brand palette (GardnX base template + business-aligned accents) */
  --nl-green: #0b332a;        /* primary dark green */
  --nl-green-soft: #061815;   /* deeper green for dark sections */
  --nl-lime: #DFFC8E;         /* signature accent */
  --nl-lime-soft: #C8E27F;    /* secondary accent */
  --nl-moss: #527169;         /* muted green */
  --nl-mist: #DDEBEA;         /* light green-grey background */
  --nl-ivory: #eef3e1;        /* very light green tint */
  --nl-sand: #eae4ce;         /* warm neutral */
  --nl-orange: #FF5C2A;       /* warm highlight / CTA */
  --nl-ink: #181818;          /* body text */
  --nl-white: #ffffff;

  --nl-font-sans: "Manrope", "Open Sans", system-ui, -apple-system, sans-serif;
  --nl-radius: 8px;
}

/* Global text/selection refinements */
::selection {
  background: var(--nl-lime);
  color: var(--nl-green-soft);
}

html {
  scroll-behavior: smooth;
}

/* Consistent focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nl-green);
  outline-offset: 2px;
}

/* Brand utility classes (used throughout the new pages) */
.text-primary-brand {
  color: var(--nl-green) !important;
}
.text-accent-brand {
  color: var(--nl-lime) !important;
}
.bg-brand {
  background-color: var(--nl-green) !important;
}
.bg-brand-soft {
  background-color: var(--nl-mist) !important;
}

/* Buttons — consistent primary CTA across all pages */
.btn-primary-brand {
  display: inline-block;
  background-color: var(--nl-green);
  color: var(--nl-lime);
  border: 1px solid transparent;
  padding: 16px 34px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: var(--nl-radius);
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.btn-primary-brand:hover,
.btn-primary-brand:focus {
  background-color: var(--nl-lime);
  color: var(--nl-green-soft);
  text-decoration: none;
  transform: translateY(-2px);
}
.btn-accent-brand {
  display: inline-block;
  background-color: var(--nl-lime);
  color: var(--nl-green-soft);
  border: 1px solid transparent;
  padding: 16px 34px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--nl-radius);
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.btn-accent-brand:hover,
.btn-accent-brand:focus {
  background-color: var(--nl-green);
  color: var(--nl-lime);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Section heading eyebrow + title rhythm */
.section-eyebrow {
  display: inline-block;
  color: var(--nl-green);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Service detail page: sidebar + feature list */
.service-sidebar .service-widget {
  background: #ffffff;
  border: 1px solid #e5e7de;
  border-radius: var(--nl-radius);
  padding: 24px;
}
.service-sidebar .service-widget h4 {
  color: var(--nl-green);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 14px;
}
.service-sidebar .service-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-sidebar .service-widget ul li {
  border-bottom: 1px solid #eef3e1;
}
.service-sidebar .service-widget ul li:last-child {
  border-bottom: 0;
}
.service-sidebar .service-widget ul li a {
  display: block;
  padding: 10px 6px;
  color: var(--nl-ink);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.service-sidebar .service-widget ul li a:hover,
.service-sidebar .service-widget ul li a.active {
  color: var(--nl-green);
  font-weight: 700;
  padding-left: 12px;
}
.service-details-img img {
  border-radius: var(--nl-radius);
  width: 100%;
  object-fit: cover;
}

/* Contact page extras */
.consent-box {
  background: var(--nl-ivory);
  border-left: 4px solid var(--nl-lime);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.consent-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.consent-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nl-green);
}
.consent-box-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nl-green);
  flex: 0 0 auto;
}
.consent-required,
.consent-optional {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
}
.consent-required {
  color: #92400e;
  background: #fef3c7;
}
.consent-optional {
  color: #4f6b64;
  background: #eef3f2;
}
.consent-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--nl-moss);
  cursor: pointer;
}
#contact-page .consent-option input[type="checkbox"] {
  flex: 0 0 auto;
  -webkit-appearance: checkbox;
  appearance: auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid #0b332a;
  border-radius: 3px;
  background: #ffffff;
  accent-color: var(--nl-green);
}
.consent-option a {
  color: var(--nl-green);
  font-weight: 700;
  text-decoration: underline;
}
.service-area-box {
  background: #ffffff;
  border: 1px solid #e5e7de;
  border-radius: var(--nl-radius);
  padding: 22px;
}
.service-area-box h4 {
  color: var(--nl-green);
  font-weight: 800;
  margin-bottom: 10px;
}
.service-area-box p {
  line-height: 1.7;
  color: var(--nl-ink);
  margin-bottom: 8px;
}
.service-area-box p:last-child {
  margin-bottom: 0;
}

/* Legal pages: readable content column */
.legal-page .legal-content {
  max-width: 820px;
  margin: 0 auto;
}
.legal-page .legal-content h2 {
  color: var(--nl-green);
  font-weight: 800;
  font-size: 24px;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.legal-page .legal-content p,
.legal-page .legal-content li {
  color: var(--nl-ink);
  line-height: 1.8;
}
.legal-page .legal-content ul {
  padding-left: 1.25rem;
}

/* Responsive image safety */
img {
  max-width: 100%;
  height: auto;
}

/* Before / After block on the homepage */
.before-after-section .ba-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--nl-radius);
  box-shadow: 0 12px 30px rgba(6, 24, 21, 0.12);
}
.before-after-section .ba-item img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}
.before-after-section .ba-item h5 {
  position: absolute;
  left: 16px;
  bottom: 14px;
  margin: 0;
  background: var(--nl-green);
  color: var(--nl-lime);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--nl-radius);
}
@media (max-width: 767px) {
  .before-after-section .ba-item img {
    height: 240px;
  }
}

/* ==========================================================================
   NOTE: During page builds (Phase 3) any component-specific brand tweaks
   are appended below, keeping style.css untouched.
   ========================================================================== */

/* ==========================================================================
   Phase 5 — Quote form feedback (flash banner, inline errors, honeypot)
   ========================================================================== */
.form-alert {
  padding: 14px 18px;
  border-radius: var(--nl-radius, 8px);
  margin-bottom: 24px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}
.form-alert--success {
  background: #eafbe0;
  border-color: #b5dfa0;
  color: #2c5e21;
}
.form-alert--error {
  background: #fdeceb;
  border-color: #f0b6b2;
  color: #a3312b;
}
#contact-page .contact-form-wrap input.is-invalid {
  background: #fdeceb;
  border: 1px solid #e56b65;
}
.field-error {
  display: block;
  margin: -12px 0 16px;
  color: #a3312b;
  font-size: 13px;
  font-weight: 600;
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Live-site imagery (replaces GardnX base-template demo backgrounds)
   ========================================================================== */
.hero-area-banner {
  background-image: url(../img/live/img/hero-1.jpg);
}

.breadcrumb-area.about-bg {
  background-image: url(../img/live/img/middle2.jpg);
}
.breadcrumb-area.service-bg {
  background-image: url(../img/live/img/hero-3.jpg);
}
.breadcrumb-area.project-bg {
  background-image: url(../img/live/img/hero-4.jpg);
}
.breadcrumb-area.blog-bg {
  background-image: url(../img/live/img/middle3.jpg);
}
.breadcrumb-area.contact-bg {
  background-image: url(../img/live/img/hero-5.jpg);
}

/* ==========================================================================
   Phase 8 — Slim-down follow-ups
   (top bar removed, live logo, footer visibility, map spacing)
   ========================================================================== */

/* Top bar removed: header no longer needs its 60px offset */
.header-area.absolute-header {
  margin-top: 0;
}

/* Header/footer logo sizing */
.header-area .header-inner-box .logo img,
#footer-1.footer-area .logo img {
  width: auto;
  max-height: 64px;
}

/* ==========================================================================
   Phase 9 — Footer restyle (v4)
   ========================================================================== */

/* --- Main footer --- */
#footer-1.footer-area {
  position: relative;
  z-index: 1;
  color: #ffffff;
  background-color: #06201a;
}
#footer-1 .footer-up {
  padding: 60px 0 50px;
}
#footer-1.footer-area .logo {
  display: inline-block;
  margin-bottom: 18px;
}
#footer-1.footer-area .footer-about {
  color: #bcd3ca;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  max-width: 340px;
}
#footer-1.footer-area h5 {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 24px;
}
#footer-1.footer-area .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer-1.footer-area .footer-links li + li {
  margin-top: 12px;
}
#footer-1.footer-area .footer-links a {
  display: inline-block;
  color: #ddebea;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}
#footer-1.footer-area .footer-links a:hover {
  color: var(--nl-lime);
}

/* --- Contact: grid-aligned so icons and text line up --- */
#footer-1.footer-area .footer-contact-grid {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 12px;
  row-gap: 18px;
  align-items: start;
}
#footer-1.footer-area .footer-contact-grid .fci {
  display: contents;
}
#footer-1.footer-area .footer-contact-grid .fci > i {
  color: var(--nl-lime);
  font-size: 18px;
  margin-top: 3px;
  justify-self: center;
}
#footer-1.footer-area .footer-contact-grid .fci > span,
#footer-1.footer-area .footer-contact-grid .fci > a {
  color: #ddebea;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#footer-1.footer-area .footer-contact-grid .fci > a:hover {
  color: var(--nl-lime);
}

/* Footer bottom: legal links + copyright more visible */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #041712;
}
.footer-bottom .copyright-line {
  color: #9db8ae;
  margin: 0;
  font-size: 14px;
}
.footer-bottom .footer-legal {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.footer-bottom .footer-legal a {
  color: #c4d6d0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-bottom .footer-legal a:hover {
  color: var(--nl-lime);
}

@media (max-width: 991px) {
  #footer-1 .footer-up {
    padding: 45px 0 40px;
  }
  #footer-1.footer-area .footer-contact-grid .fci > span,
  #footer-1.footer-area .footer-contact-grid .fci > a {
    white-space: normal;
  }
  .footer-bottom .footer-legal {
    justify-content: flex-start;
    gap: 18px;
  }
}

/* Contact page: map sits below the form with breathing room */
.contact-page.google-map {
  position: relative;
  z-index: 0;
  margin-top: 48px;
}
.contact-page.google-map iframe {
  display: block;
  border-radius: var(--nl-radius);
}

/* Contact page: template's fixed 700px height crowds the form and leaves a
   gap below on desktop — let the section size to its content instead. */
#contact-page.contact-section {
  height: auto;
}

/* Outdoor Living section restyle */
.service-section.outdoor-living-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--nl-mist) 100%);
  border-top: 1px solid #e5e7de;
  border-bottom: 1px solid #e5e7de;
}

/* Service details sidebar: only LDB is a link, others plain text */
.service-sidebar .service-widget ul li .service-sidebar-plain {
  display: block;
  padding: 10px 6px;
  color: var(--nl-moss);
}

/* ==========================================================================
   Phase 9 — Homepage + Services section restyle
   (uniform service cards across Landscaping + Outdoor Living)
   ========================================================================== */

#service-1 .single-service-item,
#service-2 .single-service-item {
  background: #ffffff;
  border: 1px solid #e5e7de;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(6, 24, 21, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#service-1 .single-service-item:hover,
#service-2 .single-service-item:hover {
  box-shadow: 0 14px 34px rgba(6, 24, 21, 0.12);
  transform: translateY(-4px);
}
#service-1 .service-img img,
#service-2 .service-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (max-width: 767px) {
  #service-1 .service-img img,
  #service-2 .service-img img {
    height: 200px;
  }
}
#service-1 .service-content,
#service-2 .service-content {
  margin-top: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#service-1 .service-content h5,
#service-2 .service-content h5 {
  font-size: 22px;
  font-weight: 700;
  color: var(--nl-green);
  margin-bottom: 10px;
}
#service-1 .service-content p,
#service-2 .service-content p {
  flex: 1;
}
#service-1 .read_more_link,
#service-2 .read_more_link {
  margin-top: auto;
  align-self: flex-start;
}

/* Outdoor Living image strip (homepage) — fills the card height evenly */
#service-2 .outdoor-strip .col-md-4 {
  display: flex;
}
#service-2 .outdoor-strip .col-md-4 img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  border-radius: 14px;
}

/* ==========================================================================
   Phase 10 — Follow-ups (breadcrumb overlay, header brand name, offline fonts)
   ========================================================================== */

/* Breadcrumb: dark overlay so white text stays readable on any photo */
.breadcrumb-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 24, 21, 0.55);
  z-index: 0;
}
.breadcrumb-area .breadcrumb-title,
.breadcrumb-area .breadcrumb-icon {
  position: relative;
  z-index: 2;
}

/* Header: logo + company name */
.header-area .header-inner-box .navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.header-area .header-inner-box .brand-name {
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .header-area .header-inner-box .brand-name {
    font-size: 17px;
  }
}

/* ==========================================================================
   Phase 8 QA — accessibility (contrast, heading semantics)
   ========================================================================== */

/* "2013 Since" stat badge: solid dark-green backing keeps the lime readable
   over any photo; reuses the heading styles via a div (no longer an h1). */
.founder-year-wrap {
  background: var(--nl-green);
  border-radius: var(--nl-radius);
  padding: 12px 22px 16px;
}
.founder-year-wrap h1,
.founder-year-wrap .founder-year {
  color: var(--nl-lime);
}
.founder-year-wrap span {
  color: var(--nl-lime);
}

/* Section eyebrows: #777 is just under the 4.5:1 AA threshold — use brand green */
.section-title h6 {
  color: var(--nl-green);
}

/* Numbered list markers ("01." / "02.") in the About feature list: lime-on-white
   fails contrast — use brand green instead. */
.about-feature h4 span {
  color: var(--nl-green);
}