/* =========================================================
   GARCIA'S LAWN MOWER
   GLOBAL DESIGN SYSTEM
========================================================= */


/* =========================================================
   01. ROOT / DESIGN TOKENS
========================================================= */

:root {

  /* -------------------------------------------------------
     BRAND — NAVY
  ------------------------------------------------------- */

  --glm-navy-950: #06182F;
  --glm-navy-900: #08213E;
  --glm-navy-800: #103152;


  /* -------------------------------------------------------
     BRAND — GREEN
  ------------------------------------------------------- */

  --glm-green-900: #194A25;
  --glm-green-800: #245E2E;
  --glm-green-700: #347B37;

  --glm-green-600: #559D48;
  --glm-green-500: #73B85A;
  --glm-green-400: #91CB71;

  --glm-green-200: #CFE5BF;
  --glm-green-100: #E5F0DA;
  --glm-green-050: #F0F5E9;


  /* -------------------------------------------------------
     BRAND — ORANGE
  ------------------------------------------------------- */

  --glm-orange-600: #E95B0C;
  --glm-orange-500: #F36A16;
  --glm-orange-400: #F88933;


  /* -------------------------------------------------------
     BRAND — SKY
  ------------------------------------------------------- */

  --glm-sky-300: #AFE2EA;
  --glm-sky-100: #E4F5F6;


  /* -------------------------------------------------------
     NEUTRALS
  ------------------------------------------------------- */

  --glm-ivory-100: #F7F6EF;
  --glm-ivory-200: #F1F1E9;

  --glm-white: #FFFFFF;

  --glm-text: #102035;
  --glm-text-soft: #566171;
  --glm-text-muted: #6B746F;

  --glm-border: #DDE4D7;
  --glm-border-dark: rgba(6, 24, 47, 0.12);


  /* -------------------------------------------------------
     SEMANTIC
  ------------------------------------------------------- */

  --glm-background: var(--glm-ivory-100);
  --glm-surface: var(--glm-white);

  --glm-primary: var(--glm-navy-950);
  --glm-accent: var(--glm-green-700);
  --glm-cta: var(--glm-orange-500);

  --glm-selection-bg: var(--glm-green-200);
  --glm-selection-text: var(--glm-navy-950);


  /* -------------------------------------------------------
     TYPOGRAPHY
  ------------------------------------------------------- */

  --glm-font-display: "DM Serif Display", Georgia, serif;

  --glm-font-body:
    "Manrope",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


  /* -------------------------------------------------------
     FONT SIZES

     Evitamos texto demasiado pequeño.
  ------------------------------------------------------- */

  --glm-fs-xs: 0.875rem;     /* 14px */
  --glm-fs-sm: 0.9375rem;    /* 15px */
  --glm-fs-base: 1.0625rem;  /* 17px */
  --glm-fs-md: 1.125rem;     /* 18px */
  --glm-fs-lg: 1.25rem;      /* 20px */

  --glm-fs-h6: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  --glm-fs-h5:
    clamp(1.125rem, 1.04rem + 0.4vw, 1.35rem);

  --glm-fs-h4:
    clamp(1.35rem, 1.18rem + 0.7vw, 1.75rem);

  --glm-fs-h3:
    clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem);

  --glm-fs-h2:
    clamp(2.5rem, 1.9rem + 2vw, 4.15rem);

  --glm-fs-h1:
    clamp(3.25rem, 2.4rem + 3.5vw, 6.5rem);


  /* -------------------------------------------------------
     SPACING
  ------------------------------------------------------- */

  --glm-space-1: 0.5rem;
  --glm-space-2: 0.75rem;
  --glm-space-3: 1rem;
  --glm-space-4: 1.5rem;
  --glm-space-5: 2rem;
  --glm-space-6: 3rem;
  --glm-space-7: 4rem;
  --glm-space-8: 5rem;
  --glm-space-9: 7rem;
  --glm-space-10: 9rem;


  /* -------------------------------------------------------
     LAYOUT
  ------------------------------------------------------- */

  --glm-container: 1480px;

  --glm-gutter:
    clamp(1.25rem, 4.6vw, 5rem);

  --glm-section-space:
    clamp(5.5rem, 8vw, 9rem);

  --glm-header-height: 104px;


  /* -------------------------------------------------------
     RADII

     Sin convertirlo en diseño SaaS.
  ------------------------------------------------------- */

  --glm-radius-xs: 6px;
  --glm-radius-sm: 10px;
  --glm-radius-md: 16px;
  --glm-radius-lg: 24px;
  --glm-radius-xl: 34px;

  --glm-radius-pill: 999px;


  /* -------------------------------------------------------
     SHADOWS
  ------------------------------------------------------- */

  --glm-shadow-xs:
    0 2px 12px rgba(6, 24, 47, 0.05);

  --glm-shadow-sm:
    0 8px 30px rgba(6, 24, 47, 0.07);

  --glm-shadow-md:
    0 18px 55px rgba(6, 24, 47, 0.10);

  --glm-shadow-lg:
    0 30px 80px rgba(6, 24, 47, 0.13);

  --glm-shadow-orange:
    0 16px 38px rgba(243, 106, 22, 0.20);


  /* -------------------------------------------------------
     MOTION
  ------------------------------------------------------- */

  --glm-ease-standard:
    cubic-bezier(0.22, 1, 0.36, 1);

  --glm-ease-expo:
    cubic-bezier(0.16, 1, 0.3, 1);

  --glm-ease-soft:
    cubic-bezier(0.33, 1, 0.68, 1);

  --glm-duration-fast: 220ms;
  --glm-duration: 420ms;
  --glm-duration-slow: 760ms;

}


/* =========================================================
   02. RESET
========================================================= */

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

html {
  margin: 0;
  padding: 0;

  scroll-behavior: smooth;

  background: var(--glm-background);

  color-scheme: light;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;

  min-height: 100vh;
  min-height: 100svh;

  font-family: var(--glm-font-body);

  font-size: var(--glm-fs-base);
  font-weight: 400;

  line-height: 1.68;

  color: var(--glm-text);

  background:
    radial-gradient(
      circle at 82% 5%,
      rgba(145, 203, 113, 0.10),
      transparent 29rem
    ),

    radial-gradient(
      circle at 10% 65%,
      rgba(175, 226, 234, 0.08),
      transparent 32rem
    ),

    linear-gradient(
      180deg,
      #FAF9F3 0%,
      var(--glm-ivory-100) 45%,
      #F4F5ED 100%
    );

  overflow-x: hidden;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   03. SUBTLE ORGANIC BACKGROUND
========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: -2;

  background:
    radial-gradient(
      ellipse at 15% 18%,
      rgba(115, 184, 90, 0.035) 0%,
      rgba(115, 184, 90, 0.012) 38%,
      transparent 66%
    ),

    radial-gradient(
      ellipse at 90% 72%,
      rgba(16, 49, 82, 0.025) 0%,
      transparent 58%
    );
}


/* grain muy ligero */

body::after {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 9998;

  opacity: 0.018;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  mix-blend-mode: multiply;
}


/* =========================================================
   04. TEXT SELECTION
========================================================= */

::selection {
  color: var(--glm-selection-text);
  background: var(--glm-selection-bg);
}


/* =========================================================
   05. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--glm-font-display);
  font-weight: 400;

  letter-spacing: -0.035em;

  color: var(--glm-navy-950);
}

h1 {
  font-size: var(--glm-fs-h1);
  line-height: 0.96;
}

h2 {
  font-size: var(--glm-fs-h2);
  line-height: 1.02;
}

h3 {
  font-size: var(--glm-fs-h3);
  line-height: 1.1;
}

h4 {
  font-size: var(--glm-fs-h4);
  line-height: 1.2;
}

p {
  max-width: 68ch;

  color: var(--glm-text-soft);

  font-size: var(--glm-fs-base);

  line-height: 1.72;
}

strong {
  font-weight: 700;
}

small {
  font-size: var(--glm-fs-sm);
}


/* =========================================================
   06. LINKS
========================================================= */

a {
  color: inherit;

  text-decoration: none;

  transition:
    color var(--glm-duration-fast) var(--glm-ease-standard),
    opacity var(--glm-duration-fast) var(--glm-ease-standard);
}


/* =========================================================
   07. MEDIA
========================================================= */

img,
picture,
video,
canvas,
svg {
  display: block;

  max-width: 100%;
}

img {
  height: auto;
}


/* =========================================================
   08. BUTTON RESET
========================================================= */

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;

  cursor: pointer;
}


/* =========================================================
   09. GLOBAL CONTAINER
========================================================= */

.glm-container {
  width: min(
    calc(100% - (var(--glm-gutter) * 2)),
    var(--glm-container)
  );

  margin-inline: auto;
}


/* =========================================================
   10. SECTIONS
========================================================= */

section {
  position: relative;

  scroll-margin-top:
    calc(var(--glm-header-height) + 28px);
}

.glm-section {
  padding-block: var(--glm-section-space);
}


/* =========================================================
   11. EYEBROW / SECTION LABEL
========================================================= */

.glm-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 0.9rem;

  margin-bottom: 1.35rem;

  color: var(--glm-green-800);

  font-size: 0.85rem;
  font-weight: 800;

  letter-spacing: 0.22em;

  line-height: 1.3;

  text-transform: uppercase;
}

.glm-eyebrow::after {
  content: "";

  width: 44px;
  height: 1px;

  background: currentColor;

  transform-origin: left center;

  transition:
    width var(--glm-duration) var(--glm-ease-expo);
}


/* =========================================================
   12. BUTTON SYSTEM
========================================================= */

.glm-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 56px;

  gap: 0.8rem;

  padding: 0.9rem 1.65rem;

  overflow: hidden;

  border-radius: var(--glm-radius-md);

  font-size: 1rem;
  font-weight: 800;

  line-height: 1;

  letter-spacing: -0.01em;

  isolation: isolate;

  transition:
    transform var(--glm-duration) var(--glm-ease-expo),
    box-shadow var(--glm-duration) var(--glm-ease-expo),
    color var(--glm-duration) var(--glm-ease-expo),
    background-color var(--glm-duration) var(--glm-ease-expo),
    border-color var(--glm-duration) var(--glm-ease-expo);
}


.glm-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  opacity: 0;

  transform: translateY(100%);

  transition:
    opacity var(--glm-duration) ease,
    transform var(--glm-duration) var(--glm-ease-expo);
}


.glm-btn:hover {
  transform: translateY(-3px);
}


.glm-btn:hover::before {
  opacity: 1;

  transform: translateY(0);
}


/* primary */

.glm-btn--primary {
  color: var(--glm-white);

  background: var(--glm-orange-500);

  box-shadow: var(--glm-shadow-orange);
}

.glm-btn--primary::before {
  background: var(--glm-orange-600);
}

.glm-btn--primary:hover {
  box-shadow:
    0 20px 44px rgba(243, 106, 22, 0.27);
}


/* secondary */

.glm-btn--secondary {
  color: var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.55);

  border:
    1px solid rgba(25, 74, 37, 0.65);

  backdrop-filter: blur(12px);
}

.glm-btn--secondary::before {
  background: var(--glm-green-050);
}

.glm-btn--secondary:hover {
  border-color: var(--glm-green-700);
}


/* =========================================================
   13. FOCUS ACCESSIBILITY
========================================================= */

:focus-visible {
  outline:
    3px solid rgba(243, 106, 22, 0.6);

  outline-offset: 5px;
}


/* =========================================================
   14. SKIP LINK
========================================================= */

.glm-skip-link {
  position: fixed;

  top: 16px;
  left: 16px;

  z-index: 12000;

  padding:
    0.85rem 1.15rem;

  color: var(--glm-white);

  background: var(--glm-navy-950);

  border-radius: var(--glm-radius-sm);

  transform: translateY(-160%);

  transition:
    transform var(--glm-duration-fast) ease;
}

.glm-skip-link:focus {
  transform: translateY(0);
}


/* =========================================================
   15. SCROLLBAR
========================================================= */

html {
  scrollbar-width: thin;

  scrollbar-color:
    var(--glm-green-700)
    var(--glm-ivory-200);
}


body::-webkit-scrollbar {
  width: 12px;
}


body::-webkit-scrollbar-track {
  background:
    var(--glm-ivory-200);
}


body::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      var(--glm-green-500),
      var(--glm-green-800)
    );

  border:
    3px solid var(--glm-ivory-200);

  border-radius:
    var(--glm-radius-pill);
}


body::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      var(--glm-green-600),
      var(--glm-navy-900)
    );
}


/* =========================================================
   16. REVEAL MOTION SYSTEM
========================================================= */

[data-reveal] {
  opacity: 0;

  transform:
    translate3d(0, 28px, 0);

  filter:
    blur(6px);

  transition:
    opacity 0.85s var(--glm-ease-expo),
    transform 0.95s var(--glm-ease-expo),
    filter 0.85s var(--glm-ease-expo);

  transition-delay:
    var(--glm-reveal-delay, 0ms);
}


[data-reveal].is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);

  filter:
    blur(0);
}


/* mask reveal */

[data-reveal="mask"] {
  opacity: 1;

  transform: none;

  filter: none;

  clip-path:
    inset(0 100% 0 0);

  transition:
    clip-path
    1.05s
    var(--glm-ease-expo);
}

[data-reveal="mask"].is-visible {
  clip-path:
    inset(0 0 0 0);
}


/* image reveal */

[data-reveal="image"] {
  opacity: 1;

  transform:
    scale(1.04);

  filter: none;

  clip-path:
    inset(0 0 100% 0);

  transition:
    clip-path 1.1s var(--glm-ease-expo),
    transform 1.4s var(--glm-ease-expo);
}

[data-reveal="image"].is-visible {
  transform:
    scale(1);

  clip-path:
    inset(0 0 0 0);
}


/* left reveal */

[data-reveal="left"] {
  transform:
    translate3d(-36px, 0, 0);
}

[data-reveal="left"].is-visible {
  transform:
    translate3d(0, 0, 0);
}


/* =========================================================
   17. SAME-PAGE SECTION ARRIVAL
========================================================= */

.section-arrival {
  animation:
    glm-section-arrival
    850ms
    var(--glm-ease-expo);
}


@keyframes glm-section-arrival {

  0% {
    filter:
      brightness(0.97);

    transform:
      translateY(10px);
  }

  100% {
    filter:
      brightness(1);

    transform:
      translateY(0);
  }

}


/* =========================================================
   18. PAGE TRANSITION
========================================================= */

.glm-page-transition {
  position: fixed;

  inset: 0;

  z-index: 15000;

  display: grid;
  place-items: center;

  pointer-events: none;

  visibility: hidden;
}


.glm-page-transition__layer {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      var(--glm-navy-950) 0%,
      #0B2C36 58%,
      var(--glm-green-900) 100%
    );

  transform:
    translate3d(0, 101%, 0);

  transition:
    transform
    650ms
    var(--glm-ease-expo);

  will-change:
    transform;
}


.glm-page-transition__layer::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--glm-orange-500),
      var(--glm-green-400),
      transparent
    );
}


.glm-page-transition__brand {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  gap: 1rem;

  color:
    rgba(255, 255, 255, 0.92);

  font-size: 0.82rem;
  font-weight: 700;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity 320ms ease 180ms,
    transform 500ms var(--glm-ease-expo) 180ms;
}


.glm-page-transition__line {
  width: 46px;
  height: 1px;

  background:
    var(--glm-green-400);
}


/* leaving current page */

html.is-page-leaving
.glm-page-transition {
  visibility: visible;

  pointer-events: all;
}


html.is-page-leaving
.glm-page-transition__layer {
  transform:
    translate3d(0, 0, 0);
}


html.is-page-leaving
.glm-page-transition__brand {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   19. PAGE INITIAL ENTRANCE
========================================================= */

[data-page-content] {
  opacity: 0;

  transform:
    translate3d(0, 12px, 0);

  transition:
    opacity 650ms var(--glm-ease-expo),
    transform 850ms var(--glm-ease-expo);
}


html.is-page-ready
[data-page-content] {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


/* =========================================================
   20. COMPUTER
   1025px+
========================================================= */

@media (min-width: 1025px) {

  body {
    font-size:
      1.0625rem;
  }

  .glm-container {
    width:
      min(
        calc(100% - 9rem),
        var(--glm-container)
      );
  }

}


/* =========================================================
   21. TABLET
   768px — 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  :root {
    --glm-header-height: 88px;

    --glm-section-space:
      clamp(4.75rem, 8vw, 6.5rem);

    --glm-gutter:
      clamp(1.75rem, 4vw, 3rem);
  }


  body {
    font-size:
      1.025rem;
  }


  .glm-btn {
    min-height:
      54px;

    padding-inline:
      1.4rem;
  }

}


/* =========================================================
   22. MOBILE
   481px — 767px
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  :root {
    --glm-header-height: 78px;

    --glm-gutter: 1.35rem;

    --glm-section-space:
      4.75rem;
  }


  body {
    font-size:
      1rem;

    line-height:
      1.65;
  }


  p {
    font-size:
      1rem;

    line-height:
      1.68;
  }


  .glm-btn {
    min-height:
      52px;

    padding-inline:
      1.25rem;
  }


  body::-webkit-scrollbar {
    width:
      8px;
  }

}


/* =========================================================
   23. SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

  :root {
    --glm-header-height: 74px;

    --glm-gutter: 1.1rem;

    --glm-section-space:
      4.25rem;
  }


  body {
    font-size:
      0.975rem;

    line-height:
      1.64;
  }


  p {
    font-size:
      0.975rem;
  }


  .glm-eyebrow {
    font-size:
      0.76rem;

    letter-spacing:
      0.18em;
  }


  .glm-btn {
    min-height:
      50px;

    padding:
      0.85rem 1.1rem;

    font-size:
      0.94rem;
  }

}


/* =========================================================
   24. REDUCED MOTION
   No es un breakpoint responsive.
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }


  [data-reveal],
  [data-page-content] {
    opacity:
      1;

    transform:
      none;

    filter:
      none;

    clip-path:
      none;
  }

}


























































/* =========================================================
   02. HEADER
   GARCIA'S LAWN MOWER
========================================================= */


/* =========================================================
   SHELL
========================================================= */

.glm-header-shell {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 11000;

  height: var(--glm-header-height);

  transition:
    box-shadow 400ms var(--glm-ease-expo),
    background-color 400ms var(--glm-ease-expo),
    border-color 400ms var(--glm-ease-expo);
}


/*
  Reserva exactamente la altura del fixed header.

  Esta pieza evita:
  - saltos de layout
  - hero debajo del header
  - cambio de posición al activar responsive
*/

.glm-header-slot {
  width: 100%;
  height: var(--glm-header-height);

  flex: 0 0 var(--glm-header-height);
}


/* =========================================================
   HEADER
========================================================= */

.glm-header {
  width: 100%;
  height: 100%;

  background:
    rgba(250, 249, 243, 0.94);

  border-bottom:
    1px solid rgba(6, 24, 47, 0.055);

  backdrop-filter:
    blur(18px) saturate(135%);

  -webkit-backdrop-filter:
    blur(18px) saturate(135%);
}


.glm-header-shell.is-scrolled
.glm-header {
  background:
    rgba(250, 249, 243, 0.975);

  border-bottom-color:
    rgba(6, 24, 47, 0.09);

  box-shadow:
    0 10px 38px
    rgba(6, 24, 47, 0.055);
}


/* =========================================================
   INNER LAYOUT
========================================================= */

.glm-header__inner {
  position: relative;

  display: grid;

  grid-template-columns:
    auto minmax(0, 1fr) auto;

  align-items: center;

  gap: clamp(2rem, 3vw, 4rem);

  height: 100%;
}


/* =========================================================
   BRAND
========================================================= */

.glm-header__brand {
  position: relative;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}


.glm-header__logo {
  width: clamp(112px, 8.5vw, 142px);

  max-height:
    calc(var(--glm-header-height) - 10px);

  object-fit: contain;

  filter:
    drop-shadow(
      0 6px 13px
      rgba(6, 24, 47, 0.09)
    );

  transition:
    transform 500ms var(--glm-ease-expo),
    filter 500ms var(--glm-ease-expo);
}


.glm-header__brand:hover
.glm-header__logo {
  transform:
    translateY(-2px)
    rotate(-1deg);

  filter:
    drop-shadow(
      0 9px 18px
      rgba(6, 24, 47, 0.12)
    );
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.glm-desktop-nav {
  justify-self: center;

  display: flex;
  align-items: center;

  gap:
    clamp(1.15rem, 1.7vw, 2.15rem);
}


.glm-nav-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  min-height: 46px;

  color:
    var(--glm-text);

  font-size:
    0.965rem;

  font-weight:
    650;

  letter-spacing:
    -0.018em;

  white-space:
    nowrap;

  transition:
    color 280ms var(--glm-ease-standard);
}


.glm-nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 5px;

  width: 20px;
  height: 2px;

  border-radius:
    var(--glm-radius-pill);

  background:
    var(--glm-green-600);

  opacity: 0;

  transform:
    translateX(-50%)
    scaleX(0.2);

  transform-origin:
    center;

  transition:
    opacity 300ms ease,
    transform 450ms var(--glm-ease-expo);
}


.glm-nav-link:hover {
  color:
    var(--glm-green-800);
}


.glm-nav-link:hover::after,
.glm-nav-link.is-active::after {
  opacity: 1;

  transform:
    translateX(-50%)
    scaleX(1);
}


.glm-nav-link.is-active {
  color:
    var(--glm-navy-950);
}


/* =========================================================
   DESKTOP ACTIONS
========================================================= */

.glm-header__actions {
  display: flex;
  align-items: center;

  gap: 0.8rem;

  justify-self: end;
}


/* phone */

.glm-header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.65rem;

  min-height: 52px;

  padding:
    0.7rem 1.2rem;

  color:
    var(--glm-navy-950);

  background:
    rgba(229, 240, 218, 0.68);

  border:
    1px solid rgba(52, 123, 55, 0.14);

  border-radius:
    var(--glm-radius-pill);

  font-size:
    0.94rem;

  font-weight:
    800;

  white-space:
    nowrap;

  transition:
    color 320ms var(--glm-ease-expo),
    background 320ms var(--glm-ease-expo),
    transform 320ms var(--glm-ease-expo),
    border-color 320ms var(--glm-ease-expo);
}


.glm-header-phone svg {
  width: 20px;
  height: 20px;

  fill:
    var(--glm-green-800);

  transition:
    transform 400ms var(--glm-ease-expo);
}


.glm-header-phone:hover {
  color:
    var(--glm-green-900);

  background:
    var(--glm-green-100);

  border-color:
    rgba(52, 123, 55, 0.28);

  transform:
    translateY(-2px);
}


.glm-header-phone:hover svg {
  transform:
    rotate(-8deg)
    scale(1.07);
}


/* =========================================================
   FREE ESTIMATE CTA
========================================================= */

.glm-header-cta {
  position: relative;

  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  min-height: 54px;

  padding:
    0.75rem 1.35rem;

  overflow: hidden;

  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  border:
    1px solid
    rgba(233, 91, 12, 0.55);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    0 10px 30px
    rgba(243, 106, 22, 0.14);

  font-size:
    0.94rem;

  font-weight:
    800;

  white-space:
    nowrap;

  transition:
    transform 400ms var(--glm-ease-expo),
    box-shadow 400ms var(--glm-ease-expo);
}


.glm-header-cta::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      115deg,
      var(--glm-orange-600),
      var(--glm-orange-400)
    );

  transform:
    translateX(-102%);

  transition:
    transform 550ms var(--glm-ease-expo);
}


.glm-header-cta:hover::before {
  transform:
    translateX(0);
}


.glm-header-cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 14px 34px
    rgba(243, 106, 22, 0.22);
}


.glm-header-cta__icon {
  display: grid;
  place-items: center;
}


.glm-header-cta__icon svg {
  width: 19px;
  height: 19px;

  fill: currentColor;
}


.glm-header-cta__arrow {
  font-size: 1.15rem;

  transition:
    transform 350ms var(--glm-ease-expo);
}


.glm-header-cta:hover
.glm-header-cta__arrow {
  transform:
    translateX(4px);
}


/* =========================================================
   HAMBURGER
========================================================= */

.glm-menu-toggle {
  display: none;

  position: relative;

  z-index: 5;

  align-items: center;
  justify-content: flex-start;

  gap: 0.55rem;

  padding: 0;

  color:
    var(--glm-navy-950);

  background:
    transparent;
}


.glm-menu-toggle__box {
  position: relative;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border:
    1px solid
    rgba(6, 24, 47, 0.10);

  border-radius:
    var(--glm-radius-md);

  background:
    rgba(255, 255, 255, 0.62);

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    transform 400ms var(--glm-ease-expo);
}


.glm-menu-toggle__box span {
  position: absolute;

  width: 18px;
  height: 1.8px;

  border-radius:
    var(--glm-radius-pill);

  background:
    var(--glm-navy-950);

  transition:
    transform 450ms var(--glm-ease-expo),
    width 350ms var(--glm-ease-expo);
}


.glm-menu-toggle__box span:first-child {
  transform:
    translateY(-4px);
}


.glm-menu-toggle__box span:last-child {
  width: 13px;

  transform:
    translate(2.5px, 4px);
}


.glm-menu-toggle.is-open
.glm-menu-toggle__box span:first-child {
  width: 18px;

  transform:
    rotate(45deg);
}


.glm-menu-toggle.is-open
.glm-menu-toggle__box span:last-child {
  width: 18px;

  transform:
    rotate(-45deg);
}


.glm-menu-toggle__label {
  font-size:
    0.82rem;

  font-weight:
    800;
}


/* =========================================================
   MOBILE MENU OVERLAY
========================================================= */

.glm-mobile-menu {
  position: fixed;

  top: var(--glm-header-height);
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 10900;

  visibility: hidden;

  pointer-events: none;

  overflow: hidden;
}


.glm-mobile-menu.is-open {
  visibility: visible;

  pointer-events: auto;
}


/* backdrop */

.glm-mobile-menu__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(6, 24, 47, 0.22);

  opacity: 0;

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);

  transition:
    opacity 450ms ease;
}


.glm-mobile-menu.is-open
.glm-mobile-menu__backdrop {
  opacity: 1;
}


/* actual menu */

.glm-mobile-menu__panel {
  position: absolute;

  inset: 0;

  overflow-y: auto;
  overscroll-behavior: contain;

  background:
    linear-gradient(
      145deg,
      rgba(250, 249, 243, 0.995) 0%,
      rgba(246, 247, 238, 0.995) 68%,
      rgba(231, 241, 220, 0.995) 100%
    );

  transform:
    translateY(-24px);

  opacity: 0;

  clip-path:
    inset(0 0 100% 0);

  transition:
    clip-path 650ms var(--glm-ease-expo),
    transform 650ms var(--glm-ease-expo),
    opacity 350ms ease;
}


.glm-mobile-menu.is-open
.glm-mobile-menu__panel {
  opacity: 1;

  transform:
    translateY(0);

  clip-path:
    inset(0 0 0 0);
}


/* decorative organic shape */

.glm-mobile-menu__panel::before {
  content: "";

  position: absolute;

  right: -18%;
  bottom: -16%;

  width: 62vw;
  aspect-ratio: 1;

  border-radius:
    44% 56% 64% 36% /
    52% 40% 60% 48%;

  background:
    rgba(145, 203, 113, 0.11);

  pointer-events: none;

  transform:
    rotate(-15deg);
}


.glm-mobile-menu__inner {
  position: relative;

  z-index: 1;

  display: flex;
  flex-direction: column;

  width:
    min(
      calc(100% - (var(--glm-gutter) * 2)),
      760px
    );

  min-height: 100%;

  margin-inline: auto;

  padding:
    clamp(2.3rem, 6vh, 4.5rem)
    0
    clamp(2rem, 5vh, 3.5rem);
}


.glm-mobile-menu__eyebrow {
  margin-bottom: 1.5rem;

  color:
    var(--glm-green-800);

  font-size:
    0.75rem;

  font-weight:
    800;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;
}


/* =========================================================
   MOBILE LINKS
========================================================= */

.glm-mobile-menu__links {
  display: flex;
  flex-direction: column;

  border-top:
    1px solid
    rgba(6, 24, 47, 0.10);
}


.glm-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 67px;

  padding:
    0.85rem 0;

  color:
    var(--glm-navy-950);

  border-bottom:
    1px solid
    rgba(6, 24, 47, 0.09);

  font-family:
    var(--glm-font-display);

  font-size:
    clamp(1.65rem, 4.6vw, 2.25rem);

  line-height:
    1;

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    color 250ms ease,
    opacity 500ms var(--glm-ease-expo),
    transform 600ms var(--glm-ease-expo);
}


.glm-mobile-link > span:last-child {
  color:
    var(--glm-green-600);

  font-family:
    var(--glm-font-body);

  font-size:
    1.05rem;

  transition:
    transform 350ms var(--glm-ease-expo);
}


.glm-mobile-link:hover {
  color:
    var(--glm-green-800);
}


.glm-mobile-link:hover
> span:last-child {
  transform:
    translate(3px, 3px);
}


.glm-mobile-menu.is-open
.glm-mobile-link {
  opacity: 1;

  transform:
    translateY(0);
}


.glm-mobile-menu.is-open
.glm-mobile-link:nth-child(1) {
  transition-delay: 100ms;
}


.glm-mobile-menu.is-open
.glm-mobile-link:nth-child(2) {
  transition-delay: 140ms;
}


.glm-mobile-menu.is-open
.glm-mobile-link:nth-child(3) {
  transition-delay: 180ms;
}


.glm-mobile-menu.is-open
.glm-mobile-link:nth-child(4) {
  transition-delay: 220ms;
}


.glm-mobile-menu.is-open
.glm-mobile-link:nth-child(5) {
  transition-delay: 260ms;
}


.glm-mobile-menu.is-open
.glm-mobile-link:nth-child(6) {
  transition-delay: 300ms;
}


/* =========================================================
   MOBILE MENU FOOTER
========================================================= */

.glm-mobile-menu__footer {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 1rem;

  margin-top: auto;
  padding-top: 2rem;
}


.glm-mobile-menu__phone {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 72px;

  padding:
    0.9rem 1.1rem;

  color:
    var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.58);

  border:
    1px solid
    rgba(6, 24, 47, 0.10);

  border-radius:
    var(--glm-radius-md);
}


.glm-mobile-menu__phone span {
  color:
    var(--glm-text-muted);

  font-size:
    0.72rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.glm-mobile-menu__phone strong {
  margin-top:
    0.25rem;

  font-size:
    1rem;
}


.glm-mobile-menu__estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 72px;

  padding:
    0.9rem 1.1rem;

  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  border-radius:
    var(--glm-radius-md);

  font-size:
    0.9rem;

  font-weight:
    800;

  box-shadow:
    0 14px 36px
    rgba(243, 106, 22, 0.16);
}


/* =========================================================
   SCROLL LOCK
========================================================= */

html.glm-menu-open {
  overflow:
    hidden;
}


/*
  body position is set dynamically via JS.

  Do NOT set top: 0.
  The negative top value corresponds to the user's
  actual scrollY and is restored exactly.
*/

body.glm-scroll-locked {
  position: fixed;

  left: 0;
  right: 0;

  width: 100%;

  overflow: hidden;
}


/* =========================================================
   01 — COMPUTER
   1025px+
========================================================= */

@media (min-width: 1025px) {

  .glm-menu-toggle,
  .glm-mobile-menu {
    display: none;
  }


  .glm-header__inner {
    min-width: 0;
  }

}


/* =========================================================
   02 — TABLET
   768px — 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-header__inner {
    display: grid;

    grid-template-columns:
      1fr auto 1fr;

    gap: 1rem;
  }


  .glm-desktop-nav,
  .glm-header-phone {
    display: none;
  }


  .glm-menu-toggle {
    display: flex;

    justify-self: start;
  }


  .glm-header__brand {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
      translate(-50%, -50%);
  }


  .glm-header__logo {
    width:
      80px;

    max-height:
      calc(var(--glm-header-height) - 8px);
  }


  .glm-header__actions {
    grid-column: 3;

    justify-self: end;
  }


  .glm-header-cta {
    min-height:
      48px;

    padding:
      0.65rem 1rem;

    border-radius:
      14px;
  }


  .glm-header-cta__icon svg {
    width:
      18px;

    height:
      18px;
  }


  .glm-mobile-menu__footer {
    margin-top:
      3rem;
  }

}


/* =========================================================
   03 — MOBILE
   481px — 767px
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-header__inner {
    display: grid;

    grid-template-columns:
      1fr auto 1fr;

    gap:
      0.6rem;
  }


  .glm-desktop-nav,
  .glm-header-phone {
    display:
      none;
  }


  .glm-menu-toggle {
    display:
      flex;

    justify-self:
      start;
  }


  .glm-menu-toggle__label {
    display:
      none;
  }


  .glm-menu-toggle__box {
    width:
      42px;

    height:
      42px;
  }


  .glm-header__brand {
    position:
      absolute;

    left:
      50%;

    top:
      50%;

    transform:
      translate(-50%, -50%);
  }


  /*
    Deliberadamente visualmente mayor que
    hamburger / CTA.
  */

  .glm-header__logo {
    width:
      72px;

    max-height:
      calc(var(--glm-header-height) - 5px);
  }


  .glm-header__actions {
    grid-column:
      3;

    justify-self:
      end;
  }


  .glm-header-cta {
    min-height:
      44px;

    gap:
      0.42rem;

    padding:
      0.55rem 0.75rem;

    border-radius:
      13px;

    font-size:
      0.76rem;

    letter-spacing:
      -0.02em;

    box-shadow:
      0 8px 20px
      rgba(243, 106, 22, 0.13);
  }


  .glm-header-cta__icon svg {
    width:
      16px;

    height:
      16px;
  }


  .glm-header-cta__arrow {
    display:
      none;
  }


  .glm-mobile-menu__footer {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   04 — SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

  .glm-header__inner {
    display:
      grid;

    grid-template-columns:
      1fr auto 1fr;

    gap:
      0.4rem;
  }


  .glm-desktop-nav,
  .glm-header-phone {
    display:
      none;
  }


  .glm-menu-toggle {
    display:
      flex;

    justify-self:
      start;
  }


  .glm-menu-toggle__label {
    display:
      none;
  }


  .glm-menu-toggle__box {
    width:
      40px;

    height:
      40px;

    border-radius:
      12px;
  }


  .glm-header__brand {
    position:
      absolute;

    left:
      50%;

    top:
      50%;

    transform:
      translate(-50%, -50%);
  }


  .glm-header__logo {
    width:
      66px;

    max-height:
      calc(var(--glm-header-height) - 4px);
  }


  .glm-header__actions {
    grid-column:
      3;

    justify-self:
      end;
  }


  .glm-header-cta {
    min-height:
      40px;

    gap:
      0.35rem;

    padding:
      0.5rem 0.62rem;

    border-radius:
      11px;

    font-size:
      0.7rem;
  }


  .glm-header-cta__icon {
    display:
      none;
  }


  .glm-header-cta__arrow {
    display:
      none;
  }


  .glm-mobile-menu__inner {
    padding-top:
      2rem;

    padding-bottom:
      1.5rem;
  }


  .glm-mobile-menu__eyebrow {
    margin-bottom:
      1rem;
  }


  .glm-mobile-link {
    min-height:
      59px;

    font-size:
      clamp(1.45rem, 7.3vw, 1.9rem);
  }


  .glm-mobile-menu__footer {
    grid-template-columns:
      1fr;

    gap:
      0.65rem;

    padding-top:
      1.35rem;
  }


  .glm-mobile-menu__phone,
  .glm-mobile-menu__estimate {
    min-height:
      60px;
  }

}


/* =========================================================
   REDUCED MOTION
   Accessibility preference — not a responsive breakpoint
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .glm-mobile-menu__panel,
  .glm-mobile-menu__backdrop,
  .glm-mobile-link,
  .glm-header__logo,
  .glm-header-cta,
  .glm-header-phone,
  .glm-menu-toggle__box,
  .glm-menu-toggle__box span {
    transition-duration:
      0.01ms !important;
  }

}



















































/* =========================================================
   03. HERO
   GARCIA'S LAWN MOWER
========================================================= */

.glm-hero {
  position: relative;

  width: 100%;

  /*
    Critical structural rule:

    header slot + hero = 100svh
  */

  height:
    calc(
      100vh -
      var(--glm-header-height)
    );

  height:
    calc(
      100svh -
      var(--glm-header-height)
    );

  overflow: hidden;

  background:
    linear-gradient(
      112deg,
      rgba(250, 249, 243, 0.98) 0%,
      rgba(247, 246, 239, 0.98) 54%,
      rgba(240, 245, 233, 0.92) 100%
    );

  isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.glm-hero__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;
}


.glm-hero__ambient-shape {
  position: absolute;

  border-radius:
    48% 52% 67% 33% /
    52% 37% 63% 48%;

  background:
    rgba(145, 203, 113, 0.11);

  filter:
    blur(1px);
}


.glm-hero__ambient-shape--one {
  width:
    clamp(240px, 30vw, 560px);

  aspect-ratio:
    1;

  top:
    -30%;

  right:
    -6%;

  transform:
    rotate(22deg);
}


.glm-hero__ambient-shape--two {
  width:
    clamp(190px, 22vw, 410px);

  aspect-ratio:
    1;

  bottom:
    -33%;

  left:
    49%;

  background:
    rgba(115, 184, 90, 0.09);

  transform:
    rotate(-18deg);
}


.glm-hero__ambient-line {
  position: absolute;

  width:
    clamp(420px, 52vw, 900px);

  aspect-ratio:
    2 / 1;

  border:
    1px solid
    rgba(52, 123, 55, 0.065);

  border-radius:
    50%;

  transform:
    rotate(-13deg);
}


.glm-hero__ambient-line--one {
  left:
    -17%;

  top:
    7%;
}


.glm-hero__ambient-line--two {
  left:
    -12%;

  top:
    15%;

  transform:
    rotate(-13deg)
    scale(0.86);
}


/* =========================================================
   MAIN GRID
========================================================= */

.glm-hero__container {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  align-items: center;

  gap:
    clamp(2.5rem, 5vw, 6.5rem);

  height: 100%;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.glm-hero__content {
  position: relative;

  z-index: 4;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  height: 100%;

  padding-block:
    clamp(1.5rem, 3.6vh, 3rem);
}


/* =========================================================
   INTRO
========================================================= */

.glm-hero__intro {
  display: flex;
  flex-direction: column;

  gap:
    clamp(0.45rem, 0.8vh, 0.75rem);

  margin-bottom:
    clamp(0.8rem, 1.6vh, 1.35rem);
}


.glm-hero__brand-label {
  display: flex;
  align-items: center;

  gap: 0.9rem;

  color:
    var(--glm-green-800);

  font-size:
    clamp(0.72rem, 0.73vw, 0.84rem);

  font-weight: 800;

  line-height: 1;

  letter-spacing:
    0.24em;

  text-transform: uppercase;
}


.glm-hero__brand-line {
  display: block;

  width: 48px;
  height: 1px;

  flex-shrink: 0;

  background:
    var(--glm-green-700);

  transform-origin:
    left center;
}


.glm-hero__eyebrow {
  color:
    var(--glm-navy-950);

  font-size:
    clamp(0.72rem, 0.76vw, 0.88rem);

  font-weight: 700;

  letter-spacing:
    0.25em;

  line-height: 1.25;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.glm-hero__title {
  margin: 0;

  max-width:
    760px;

  color:
    var(--glm-navy-950);

  font-family:
    var(--glm-font-display);

  font-size:
    clamp(
      3.1rem,
      min(4.85vw, 8.4vh),
      5.6rem
    );

  font-weight: 400;

  letter-spacing:
    -0.045em;

  line-height:
    0.91;
}


.glm-hero__title-line {
  display: block;

  overflow: hidden;

  padding-bottom:
    0.06em;
}


.glm-hero__title-line > span {
  display: block;

  transform:
    translateY(115%);

  opacity: 0;

  transition:
    transform
    950ms
    var(--glm-ease-expo),

    opacity
    500ms
    ease;
}


.glm-hero__title-line:nth-child(2)
> span {
  transition-delay:
    80ms;
}


.glm-hero__title-line:nth-child(3)
> span {
  transition-delay:
    150ms;
}


.glm-hero__title em {
  color:
    var(--glm-green-700);

  font-style: normal;
}


/* ready */

.glm-hero.is-hero-ready
.glm-hero__title-line > span {
  transform:
    translateY(0);

  opacity: 1;
}


/* =========================================================
   HAND-DRAWN STYLE ACCENT
========================================================= */

.glm-hero__title-mark {
  width:
    clamp(120px, 13vw, 210px);

  height: 12px;

  margin-top:
    clamp(0.6rem, 1vh, 0.9rem);

  overflow: hidden;
}


.glm-hero__title-mark span {
  display: block;

  width: 100%;
  height: 4px;

  border-radius:
    50%;

  background:
    linear-gradient(
      90deg,
      var(--glm-green-400),
      rgba(145, 203, 113, 0.22)
    );

  transform:
    translateX(-102%)
    rotate(-1.5deg);

  transform-origin:
    left center;

  transition:
    transform
    1.1s
    var(--glm-ease-expo)
    320ms;
}


.glm-hero.is-hero-ready
.glm-hero__title-mark span {
  transform:
    translateX(0)
    rotate(-1.5deg);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.glm-hero__description {
  max-width:
    580px;

  margin:
    clamp(0.9rem, 1.7vh, 1.4rem)
    0
    0;

  color:
    var(--glm-text-soft);

  font-size:
    clamp(
      0.98rem,
      min(1.05vw, 2vh),
      1.12rem
    );

  line-height:
    1.58;
}


/* =========================================================
   CTA ROW
========================================================= */

.glm-hero__actions {
  display: flex;
  align-items: center;

  gap:
    clamp(0.75rem, 1.2vw, 1rem);

  margin-top:
    clamp(1.15rem, 2.1vh, 1.75rem);
}


.glm-hero-btn {
  position: relative;

  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.75rem;

  min-height:
    56px;

  padding:
    0.9rem
    clamp(1.2rem, 1.6vw, 1.65rem);

  overflow: hidden;

  border-radius:
    var(--glm-radius-md);

  font-size:
    clamp(0.9rem, 0.9vw, 1rem);

  font-weight: 800;

  line-height: 1;

  letter-spacing:
    -0.025em;

  white-space: nowrap;

  transition:
    transform
    400ms
    var(--glm-ease-expo),

    box-shadow
    400ms
    var(--glm-ease-expo),

    border-color
    300ms
    ease;
}


.glm-hero-btn__icon {
  display: grid;
  place-items: center;

  flex-shrink: 0;
}


.glm-hero-btn__icon svg {
  width: 21px;
  height: 21px;

  fill: currentColor;
}


.glm-hero-btn__arrow {
  font-size: 1.15rem;

  transition:
    transform
    400ms
    var(--glm-ease-expo);
}


.glm-hero-btn:hover {
  transform:
    translateY(-3px);
}


.glm-hero-btn:hover
.glm-hero-btn__arrow {
  transform:
    translateX(5px);
}


/* primary */

.glm-hero-btn--primary {
  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  border:
    1px solid
    var(--glm-orange-500);

  box-shadow:
    0 14px 32px
    rgba(243, 106, 22, 0.17);
}


.glm-hero-btn--primary::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      115deg,
      var(--glm-orange-600),
      var(--glm-orange-400)
    );

  transform:
    translateX(-102%);

  transition:
    transform
    550ms
    var(--glm-ease-expo);
}


.glm-hero-btn--primary:hover::before {
  transform:
    translateX(0);
}


.glm-hero-btn--primary:hover {
  box-shadow:
    0 18px 38px
    rgba(243, 106, 22, 0.24);
}


/* secondary */

.glm-hero-btn--secondary {
  color:
    var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.38);

  border:
    1px solid
    rgba(25, 74, 37, 0.72);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.glm-hero-btn--secondary
.glm-hero-btn__icon {
  color:
    var(--glm-green-800);
}


.glm-hero-btn--secondary:hover {
  background:
    rgba(229, 240, 218, 0.7);

  border-color:
    var(--glm-green-700);
}


/* =========================================================
   TRUST ROW
========================================================= */

.glm-hero__trust {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0;

  max-width:
    700px;

  margin-top:
    clamp(1.3rem, 2.6vh, 2.2rem);
}


.glm-hero-trust {
  display: flex;
  align-items: flex-start;

  gap:
    clamp(0.7rem, 0.9vw, 1rem);

  min-width: 0;

  padding-right:
    clamp(0.8rem, 1.5vw, 1.4rem);
}


.glm-hero-trust
+ .glm-hero-trust {
  padding-left:
    clamp(0.8rem, 1.5vw, 1.4rem);

  border-left:
    1px solid
    rgba(6, 24, 47, 0.11);
}


.glm-hero-trust__icon {
  display: grid;
  place-items: center;

  width:
    clamp(42px, 3.4vw, 50px);

  aspect-ratio: 1;

  flex: 0 0 auto;

  color:
    var(--glm-green-800);

  background:
    rgba(229, 240, 218, 0.82);

  border-radius:
    50%;
}


.glm-hero-trust__icon svg {
  width: 23px;
  height: 23px;

  fill: currentColor;
}


.glm-hero-trust__content {
  display: flex;
  flex-direction: column;

  gap: 0.25rem;

  min-width: 0;
}


.glm-hero-trust strong {
  color:
    var(--glm-navy-950);

  font-size:
    clamp(0.78rem, 0.76vw, 0.9rem);

  line-height:
    1.15;
}


.glm-hero-trust small {
  color:
    var(--glm-text-muted);

  font-size:
    clamp(0.68rem, 0.67vw, 0.8rem);

  line-height:
    1.42;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.glm-hero__visual {
  --hero-x: 0px;
  --hero-y: 0px;

  position: relative;

  align-self: center;

  width: 100%;

  height:
    min(
      70vh,
      calc(
        100svh -
        var(--glm-header-height) -
        5rem
      )
    );

  min-height: 0;

  opacity: 0;

  transform:
    translate3d(
      24px,
      10px,
      0
    );

  transition:
    opacity
    850ms
    ease
    120ms,

    transform
    1.1s
    var(--glm-ease-expo)
    120ms;
}


.glm-hero.is-hero-ready
.glm-hero__visual {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


/* background glow */

.glm-hero__visual-glow {
  position: absolute;

  width: 74%;
  height: 70%;

  right: -5%;
  top: 9%;

  z-index: -1;

  border-radius:
    52% 48% 41% 59% /
    48% 38% 62% 52%;

  background:
    rgba(145, 203, 113, 0.14);

  filter:
    blur(1px);

  transform:
    translate(
      calc(var(--hero-x) * -0.12),
      calc(var(--hero-y) * -0.12)
    )
    rotate(-7deg);

  transition:
    transform
    600ms
    var(--glm-ease-soft);
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.glm-hero__main-media {
  position: absolute;

  inset:
    4%
    0
    4%
    8%;

  margin: 0;

  overflow: hidden;

  border-radius:
    var(--glm-radius-lg);

  background:
    var(--glm-green-100);

  box-shadow:
    0 28px 70px
    rgba(6, 24, 47, 0.12);

  transform:
    translate(
      calc(var(--hero-x) * 0.08),
      calc(var(--hero-y) * 0.08)
    );

  transition:
    transform
    650ms
    var(--glm-ease-soft);
}


.glm-hero__main-image {
  width: 100%;
  height: 100%;

  overflow: hidden;
}


.glm-hero__main-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

  transform:
    scale(1.035);

  transition:
    transform
    1.25s
    var(--glm-ease-expo);

  will-change:
    transform;
}


.glm-hero.is-hero-ready
.glm-hero__main-image img {
  transform:
    scale(1);
}


/* subtle photo overlay */

.glm-hero__main-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      rgba(6, 24, 47, 0.02),
      transparent 40%,
      rgba(6, 24, 47, 0.035)
    );
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.glm-hero-card {
  position: absolute;

  z-index: 5;

  overflow: hidden;

  color:
    var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.96);

  border:
    1px solid
    rgba(255, 255, 255, 0.86);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    0 20px 48px
    rgba(6, 24, 47, 0.14);

  opacity: 0;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    opacity
    650ms
    ease,

    transform
    950ms
    var(--glm-ease-expo),

    box-shadow
    450ms
    var(--glm-ease-expo);
}


.glm-hero-card:hover {
  box-shadow:
    0 26px 58px
    rgba(6, 24, 47, 0.18);
}


.glm-hero-card__media {
  width: 100%;

  overflow: hidden;
}


.glm-hero-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    800ms
    var(--glm-ease-expo);
}


.glm-hero-card:hover
.glm-hero-card__media img {
  transform:
    scale(1.045);
}


.glm-hero-card__body {
  display: flex;
  align-items: center;

  gap:
    clamp(0.65rem, 0.8vw, 0.9rem);

  padding:
    clamp(0.8rem, 1vw, 1rem);
}


.glm-hero-card__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-050);

  border-radius:
    50%;
}


.glm-hero-card__icon svg {
  width: 20px;
  height: 20px;

  fill:
    currentColor;
}


.glm-hero-card__text {
  display: flex;
  flex-direction: column;

  gap: 0.22rem;

  min-width: 0;
}


.glm-hero-card__text strong {
  color:
    var(--glm-navy-950);

  font-size:
    clamp(0.76rem, 0.77vw, 0.9rem);

  line-height:
    1.15;
}


.glm-hero-card__text small {
  color:
    var(--glm-text-soft);

  font-size:
    clamp(0.67rem, 0.68vw, 0.78rem);

  line-height:
    1.35;
}


/* top-left */

.glm-hero-card--trimming {
  top: 10%;
  left: -6%;

  width:
    clamp(190px, 16vw, 230px);

  transform:
    translate3d(
      calc(
        -28px +
        var(--hero-x) * -0.18
      ),
      calc(
        12px +
        var(--hero-y) * -0.18
      ),
      0
    );
}


.glm-hero-card--trimming
.glm-hero-card__media {
  height:
    clamp(116px, 11vw, 145px);
}


/* bottom-right */

.glm-hero-card--property {
  right: -2%;

  bottom: 0;

  width:
    clamp(230px, 19vw, 285px);

  transform:
    translate3d(
      calc(
        28px +
        var(--hero-x) * 0.16
      ),
      calc(
        18px +
        var(--hero-y) * 0.16
      ),
      0
    );
}


.glm-hero-card--property
.glm-hero-card__media {
  height:
    clamp(105px, 10vw, 135px);
}


/* reveal */

.glm-hero.is-hero-ready
.glm-hero-card--trimming {
  opacity: 1;

  transform:
    translate3d(
      calc(
        var(--hero-x) * -0.18
      ),
      calc(
        var(--hero-y) * -0.18
      ),
      0
    );

  transition-delay:
    380ms;
}


.glm-hero.is-hero-ready
.glm-hero-card--property {
  opacity: 1;

  transform:
    translate3d(
      calc(
        var(--hero-x) * 0.16
      ),
      calc(
        var(--hero-y) * 0.16
      ),
      0
    );

  transition-delay:
    480ms;
}


/* =========================================================
   LOWER ORGANIC SHAPE
========================================================= */

.glm-hero__visual-shape {
  position: absolute;

  z-index: -1;

  left: 9%;
  bottom: -8%;

  width: 54%;
  height: 28%;

  border-radius:
    58% 42% 60% 40% /
    58% 55% 45% 42%;

  background:
    rgba(207, 229, 191, 0.52);

  transform:
    rotate(8deg);
}


/* =========================================================
   GENERIC HERO REVEALS
========================================================= */

[data-hero-reveal] {
  opacity: 0;

  transform:
    translateY(18px);

  filter:
    blur(5px);

  transition:
    opacity
    700ms
    ease,

    transform
    850ms
    var(--glm-ease-expo),

    filter
    700ms
    var(--glm-ease-expo);
}


.glm-hero.is-hero-ready
[data-hero-reveal] {
  opacity: 1;

  transform:
    translateY(0);

  filter:
    blur(0);
}


.glm-hero.is-hero-ready
.glm-hero__intro
[data-hero-reveal] {
  transition-delay:
    40ms;
}


.glm-hero.is-hero-ready
.glm-hero__description {
  transition-delay:
    260ms;
}


.glm-hero.is-hero-ready
.glm-hero__actions {
  transition-delay:
    330ms;
}


.glm-hero.is-hero-ready
.glm-hero__trust {
  transition-delay:
    430ms;
}


/* =========================================================
   01 — COMPUTER
   1025px+
========================================================= */

@media (min-width: 1025px) {

  .glm-hero__container {
    padding-bottom:
      clamp(0.4rem, 1vh, 1rem);
  }


  .glm-hero__visual {
    max-width:
      810px;

    justify-self:
      end;
  }

}


/* =========================================================
   02 — TABLET
   768px — 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-hero__container {
    grid-template-columns:
      minmax(0, 1.02fr)
      minmax(0, 0.98fr);

    gap:
      1.7rem;
  }


  .glm-hero__content {
    padding-block:
      1.5rem;
  }


  .glm-hero__title {
    font-size:
      clamp(
        2.7rem,
        min(5.2vw, 7vh),
        4rem
      );
  }


  .glm-hero__description {
    max-width:
      470px;

    font-size:
      0.94rem;
  }


  .glm-hero-btn {
    min-height:
      50px;

    padding-inline:
      1rem;

    font-size:
      0.82rem;
  }


  .glm-hero__trust {
    margin-top:
      1.3rem;
  }


  .glm-hero-trust {
    flex-direction:
      column;

    gap:
      0.55rem;
  }


  .glm-hero-trust__icon {
    width:
      40px;
  }


  .glm-hero__visual {
    height:
      calc(
        100svh -
        var(--glm-header-height) -
        4rem
      );
  }


  .glm-hero__main-media {
    inset:
      5% 0 5% 8%;

    border-radius:
      20px;
  }


  .glm-hero-card--trimming {
    left:
      -11%;

    width:
      170px;
  }


  .glm-hero-card--trimming
  .glm-hero-card__media {
    height:
      96px;
  }


  .glm-hero-card--property {
    right:
      -2%;

    width:
      190px;
  }


  .glm-hero-card--property
  .glm-hero-card__media {
    height:
      88px;
  }

}


/* =========================================================
   03 — MOBILE
   481px — 767px
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-hero {
    overflow:
      hidden;
  }


  .glm-hero__container {
    display: grid;

    grid-template-columns:
      1fr;

    grid-template-rows:
      minmax(0, 1fr)
      clamp(175px, 27svh, 215px);

    gap:
      0.75rem;

    align-items:
      stretch;

    padding-top:
      1rem;

    padding-bottom:
      0.75rem;
  }


  .glm-hero__content {
    height:
      auto;

    padding:
      0;

    justify-content:
      flex-start;
  }


  .glm-hero__intro {
    gap:
      0.35rem;

    margin-bottom:
      0.55rem;
  }


  .glm-hero__brand-label {
    font-size:
      0.65rem;
  }


  .glm-hero__brand-line {
    width:
      32px;
  }


  .glm-hero__eyebrow {
    font-size:
      0.64rem;
  }


  .glm-hero__title {
    max-width:
      520px;

    font-size:
      clamp(
        2.15rem,
        8vw,
        3.25rem
      );

    line-height:
      0.91;
  }


  .glm-hero__title-mark {
    width:
      110px;

    height:
      7px;

    margin-top:
      0.3rem;
  }


  .glm-hero__description {
    max-width:
      520px;

    margin-top:
      0.55rem;

    font-size:
      0.88rem;

    line-height:
      1.47;
  }


  .glm-hero__actions {
    gap:
      0.55rem;

    margin-top:
      0.75rem;
  }


  .glm-hero-btn {
    min-height:
      45px;

    padding:
      0.7rem 0.9rem;

    border-radius:
      12px;

    font-size:
      0.76rem;
  }


  .glm-hero-btn__icon svg {
    width:
      17px;

    height:
      17px;
  }


  .glm-hero__trust {
    display: flex;

    width: 100%;

    max-width:
      none;

    gap:
      0.6rem;

    margin-top:
      0.75rem;

    overflow-x:
      auto;

    overscroll-behavior-inline:
      contain;

    scrollbar-width:
      none;
  }


  .glm-hero__trust::-webkit-scrollbar {
    display:
      none;
  }


  .glm-hero-trust {
    flex:
      0 0 auto;

    align-items:
      center;

    min-width:
      175px;

    padding:
      0.5rem 0.75rem;

    gap:
      0.6rem;

    background:
      rgba(255,255,255,0.42);

    border:
      1px solid
      rgba(6,24,47,0.07);

    border-radius:
      12px;
  }


  .glm-hero-trust
  + .glm-hero-trust {
    padding-left:
      0.75rem;

    border-left:
      1px solid
      rgba(6,24,47,0.07);
  }


  .glm-hero-trust__icon {
    width:
      36px;
  }


  .glm-hero-trust__icon svg {
    width:
      19px;

    height:
      19px;
  }


  .glm-hero-trust strong {
    font-size:
      0.72rem;
  }


  .glm-hero-trust small {
    font-size:
      0.64rem;
  }


  .glm-hero__visual {
    grid-row:
      2;

    width:
      100%;

    height:
      100%;
  }


  .glm-hero__main-media {
    inset:
      0;

    border-radius:
      18px;

    box-shadow:
      0 16px 40px
      rgba(6,24,47,0.11);
  }


  .glm-hero-card--trimming {
    top:
      -12px;

    left:
      14px;

    width:
      150px;
  }


  .glm-hero-card--trimming
  .glm-hero-card__media {
    height:
      67px;
  }


  .glm-hero-card--property {
    right:
      12px;

    bottom:
      -4px;

    width:
      172px;
  }


  .glm-hero-card--property
  .glm-hero-card__media {
    height:
      65px;
  }


  .glm-hero-card__body {
    padding:
      0.55rem;
  }


  .glm-hero-card__icon {
    width:
      29px;

    height:
      29px;

    flex-basis:
      29px;
  }


  .glm-hero-card__icon svg {
    width:
      15px;

    height:
      15px;
  }


  .glm-hero-card__text strong {
    font-size:
      0.64rem;
  }


  .glm-hero-card__text small {
    font-size:
      0.56rem;
  }

}


/* =========================================================
   04 — SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

  .glm-hero__container {
    display:
      grid;

    grid-template-columns:
      1fr;

    grid-template-rows:
      minmax(0, 1fr)
      clamp(155px, 24svh, 185px);

    gap:
      0.55rem;

    padding-top:
      0.75rem;

    padding-bottom:
      0.55rem;
  }


  .glm-hero__content {
    height:
      auto;

    padding:
      0;
  }


  .glm-hero__intro {
    gap:
      0.28rem;

    margin-bottom:
      0.45rem;
  }


  .glm-hero__brand-label {
    gap:
      0.55rem;

    font-size:
      0.59rem;

    letter-spacing:
      0.18em;
  }


  .glm-hero__brand-line {
    width:
      26px;
  }


  .glm-hero__eyebrow {
    font-size:
      0.58rem;

    letter-spacing:
      0.18em;
  }


  .glm-hero__title {
    font-size:
      clamp(
        1.9rem,
        9.5vw,
        2.8rem
      );

    line-height:
      0.91;
  }


  .glm-hero__title-mark {
    width:
      90px;

    height:
      6px;

    margin-top:
      0.2rem;
  }


  .glm-hero__description {
    margin-top:
      0.4rem;

    font-size:
      0.79rem;

    line-height:
      1.42;
  }


  .glm-hero__actions {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      0.45rem;

    margin-top:
      0.55rem;
  }


  .glm-hero-btn {
    min-width:
      0;

    min-height:
      42px;

    gap:
      0.4rem;

    padding:
      0.55rem 0.55rem;

    font-size:
      0.66rem;
  }


  .glm-hero-btn__icon svg {
    width:
      15px;

    height:
      15px;
  }


  .glm-hero-btn__arrow {
    display:
      none;
  }


  .glm-hero__trust {
    display:
      flex;

    width:
      100%;

    gap:
      0.45rem;

    margin-top:
      0.55rem;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .glm-hero__trust::-webkit-scrollbar {
    display:
      none;
  }


  .glm-hero-trust {
    flex:
      0 0 154px;

    align-items:
      center;

    gap:
      0.45rem;

    padding:
      0.42rem 0.55rem;

    background:
      rgba(255,255,255,0.42);

    border:
      1px solid
      rgba(6,24,47,0.065);

    border-radius:
      11px;
  }


  .glm-hero-trust
  + .glm-hero-trust {
    padding-left:
      0.55rem;

    border-left:
      1px solid
      rgba(6,24,47,0.065);
  }


  .glm-hero-trust__icon {
    width:
      32px;
  }


  .glm-hero-trust__icon svg {
    width:
      17px;

    height:
      17px;
  }


  .glm-hero-trust strong {
    font-size:
      0.64rem;
  }


  .glm-hero-trust small {
    font-size:
      0.57rem;

    line-height:
      1.3;
  }


  .glm-hero__visual {
    height:
      100%;
  }


  .glm-hero__main-media {
    inset:
      0;

    border-radius:
      15px;
  }


  .glm-hero-card--trimming {
    top:
      -8px;

    left:
      8px;

    width:
      127px;
  }


  .glm-hero-card--trimming
  .glm-hero-card__media {
    height:
      54px;
  }


  .glm-hero-card--property {
    right:
      7px;

    bottom:
      -2px;

    width:
      145px;
  }


  .glm-hero-card--property
  .glm-hero-card__media {
    height:
      53px;
  }


  .glm-hero-card__body {
    gap:
      0.35rem;

    padding:
      0.4rem;
  }


  .glm-hero-card__icon {
    display:
      none;
  }


  .glm-hero-card__text strong {
    font-size:
      0.58rem;
  }


  .glm-hero-card__text small {
    font-size:
      0.5rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .glm-hero__title-line > span,
  [data-hero-reveal],
  .glm-hero__visual,
  .glm-hero-card,
  .glm-hero__title-mark span,
  .glm-hero__main-image img {
    opacity:
      1 !important;

    transform:
      none !important;

    filter:
      none !important;

    transition:
      none !important;
  }

}
























































/* =========================================================
   04. SERVICES
   GARCIA'S LAWN MOWER
========================================================= */

.glm-services {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--glm-ivory-100) 0%,
      #F3F5ED 48%,
      var(--glm-ivory-100) 100%
    );

  isolation: isolate;
}


/* =========================================================
   AMBIENT
========================================================= */

.glm-services__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-services__orbit {
  position: absolute;

  border:
    1px solid
    rgba(52, 123, 55, 0.045);

  border-radius: 50%;
}


.glm-services__orbit--one {
  width: 760px;
  height: 330px;

  right: -290px;
  top: 80px;

  transform: rotate(-15deg);
}


.glm-services__orbit--two {
  width: 600px;
  height: 240px;

  right: -190px;
  top: 145px;

  border-color:
    rgba(243, 106, 22, 0.035);

  transform: rotate(-15deg);
}


.glm-services__path {
  position: absolute;

  width: 620px;
  height: 230px;

  border:
    1px solid
    rgba(52,123,55,0.04);

  border-radius: 50%;
}


.glm-services__path--one {
  left: -270px;
  top: 42%;

  transform: rotate(13deg);
}


.glm-services__path--two {
  left: -190px;
  top: calc(42% + 55px);

  transform:
    rotate(13deg)
    scale(0.82);
}


/* =========================================================
   HEADER
========================================================= */

.glm-services__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(3rem, 7vw, 8rem);

  margin-bottom:
    clamp(3rem, 5vw, 4.8rem);
}


.glm-services__title {
  max-width: 850px;

  margin: 0;
}


.glm-services__title span {
  display: block;

  color:
    var(--glm-green-700);
}


.glm-services__intro {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 1.2rem;
}


.glm-services__intro p {
  max-width: 490px;

  margin: 0;

  color:
    var(--glm-text-soft);
}


.glm-services__estimate-link {
  display: inline-flex;
  align-items: center;

  gap: 0.55rem;

  color:
    var(--glm-green-800);

  font-size: 0.82rem;

  font-weight: 800;
}


.glm-services__estimate-link
span:last-child {
  color:
    var(--glm-orange-500);

  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


html.has-fine-pointer
.glm-services__estimate-link:hover
span:last-child {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   SERVICES BENTO
========================================================= */

.glm-services__grid {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  gap:
    clamp(0.85rem, 1.4vw, 1.25rem);
}


/* =========================================================
   CARD
========================================================= */

.glm-service-family {
  --glm-service-spot-x: 50%;
  --glm-service-spot-y: 50%;

  position: relative;

  grid-column: span 4;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 330px;

  padding:
    clamp(1.35rem, 2vw, 2rem);

  overflow: hidden;

  color:
    var(--glm-navy-950);

  background:
    rgba(255,255,255,0.78);

  border:
    1px solid
    rgba(6,24,47,0.08);

  border-radius:
    var(--glm-radius-lg);

  box-shadow:
    0 10px 35px
    rgba(6,24,47,0.055);

  isolation: isolate;

  transition:
    transform
    500ms
    var(--glm-ease-expo),

    border-color
    350ms
    ease,

    box-shadow
    500ms
    var(--glm-ease-expo);
}


.glm-service-family--large {
  grid-column: span 7;

  min-height: 390px;
}


.glm-service-family--tree {
  grid-column: span 5;

  min-height: 390px;

  background:
    linear-gradient(
      145deg,
      var(--glm-green-050),
      rgba(255,255,255,0.86)
    );
}


/* =========================================================
   CARD SPOTLIGHT
========================================================= */

.glm-service-family__spotlight {
  position: absolute;
  inset: -1px;

  z-index: -1;

  opacity: 0;

  background:
    radial-gradient(
      380px circle at
      var(--glm-service-spot-x)
      var(--glm-service-spot-y),
      rgba(145,203,113,0.14),
      transparent 60%
    );

  transition:
    opacity
    350ms
    ease;

  pointer-events: none;
}


html.has-fine-pointer
.glm-service-family:hover
.glm-service-family__spotlight {
  opacity: 1;
}


html.has-fine-pointer
.glm-service-family:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(52,123,55,0.16);

  box-shadow:
    0 24px 58px
    rgba(6,24,47,0.09);
}


/* =========================================================
   DARK FEATURE CARD
========================================================= */

.glm-service-family--lawn {
  color:
    var(--glm-white);

  background:
    linear-gradient(
      145deg,
      var(--glm-navy-950) 0%,
      #0B303A 68%,
      var(--glm-green-900) 100%
    );

  border-color:
    rgba(255,255,255,0.07);

  box-shadow:
    var(--glm-shadow-md);
}


.glm-service-family--lawn
.glm-service-family__spotlight {
  background:
    radial-gradient(
      440px circle at
      var(--glm-service-spot-x)
      var(--glm-service-spot-y),
      rgba(145,203,113,0.14),
      transparent 62%
    );
}


/* =========================================================
   CARD TOP
========================================================= */

.glm-service-family__top {
  position: relative;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}


.glm-service-family__category {
  color:
    var(--glm-green-800);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.glm-service-family--lawn
.glm-service-family__category {
  color:
    var(--glm-green-400);
}


/* =========================================================
   DECORATIVE MARK
========================================================= */

.glm-service-family__mark {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border:
    1px solid
    rgba(52,123,55,0.14);

  border-radius: 50%;
}


.glm-service-family__mark span {
  position: relative;

  width: 12px;
  height: 12px;
}


.glm-service-family__mark span::before,
.glm-service-family__mark span::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  background:
    var(--glm-green-600);

  transform:
    translate(-50%, -50%);
}


.glm-service-family__mark span::before {
  width: 12px;
  height: 1px;
}


.glm-service-family__mark span::after {
  width: 1px;
  height: 12px;
}


.glm-service-family--lawn
.glm-service-family__mark {
  border-color:
    rgba(255,255,255,0.13);
}


.glm-service-family--lawn
.glm-service-family__mark span::before,
.glm-service-family--lawn
.glm-service-family__mark span::after {
  background:
    var(--glm-green-400);
}


/* =========================================================
   CARD ILLUSTRATION
========================================================= */

.glm-service-family__visual {
  position: absolute;

  right: 0;
  top: 45px;

  z-index: 1;

  width: 58%;
  height: 55%;

  color:
    rgba(52,123,55,0.25);

  pointer-events: none;

  transition:
    transform
    700ms
    var(--glm-ease-expo),

    color
    450ms
    ease;
}


.glm-service-family__visual svg {
  width: 100%;
  height: 100%;

  overflow: visible;

  stroke:
    currentColor;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.glm-service-family--lawn
.glm-service-family__visual {
  width: 55%;
  height: 65%;

  color:
    rgba(145,203,113,0.24);
}


.glm-service-family--tree
.glm-service-family__visual {
  width: 58%;

  color:
    rgba(52,123,55,0.22);
}


.glm-service-family--garden
.glm-service-family__visual {
  color:
    rgba(243,106,22,0.20);
}


.glm-service-family--health
.glm-service-family__visual {
  color:
    rgba(85,157,72,0.25);
}


.glm-service-family--clean
.glm-service-family__visual {
  color:
    rgba(16,49,82,0.19);
}


html.has-fine-pointer
.glm-service-family:hover
.glm-service-family__visual {
  transform:
    translate3d(-5px, -4px, 0)
    scale(1.035);

  color:
    rgba(52,123,55,0.36);
}


html.has-fine-pointer
.glm-service-family--lawn:hover
.glm-service-family__visual {
  color:
    rgba(145,203,113,0.34);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.glm-service-family__content {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  max-width: 90%;

  margin-top: auto;
}


.glm-service-family--large
.glm-service-family__content {
  max-width: 58%;
}


.glm-service-family__content h3 {
  max-width: 420px;

  margin:
    0 0 0.75rem;

  color:
    var(--glm-navy-950);

  font-family:
    var(--glm-font-display);

  font-size:
    clamp(1.75rem, 2.3vw, 2.7rem);

  font-weight: 400;

  line-height: 1.03;

  letter-spacing:
    -0.03em;
}


.glm-service-family--lawn
.glm-service-family__content h3 {
  color:
    var(--glm-white);

  font-size:
    clamp(2rem, 2.8vw, 3.4rem);
}


.glm-service-family__content p {
  max-width: 440px;

  margin:
    0;

  color:
    var(--glm-text-muted);

  font-size:
    0.91rem;

  line-height:
    1.62;
}


.glm-service-family--lawn
.glm-service-family__content p {
  color:
    rgba(255,255,255,0.61);
}


/* =========================================================
   SERVICE CHIPS
========================================================= */

.glm-service-family__services {
  display: flex;
  flex-wrap: wrap;

  gap:
    0.42rem;

  margin-top:
    1.2rem;
}


.glm-service-family__services span {
  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding:
    0.35rem 0.65rem;

  color:
    var(--glm-green-800);

  background:
    rgba(229,240,218,0.72);

  border:
    1px solid
    rgba(52,123,55,0.08);

  border-radius:
    var(--glm-radius-pill);

  font-size:
    0.68rem;

  font-weight:
    750;

  white-space: nowrap;
}


.glm-service-family--lawn
.glm-service-family__services span {
  color:
    rgba(255,255,255,0.82);

  background:
    rgba(255,255,255,0.065);

  border-color:
    rgba(255,255,255,0.09);
}


/* =========================================================
   WORK PREVIEW
========================================================= */

.glm-services-preview {
  position: relative;

  margin-top:
    clamp(5rem, 8vw, 8rem);

  padding-top:
    clamp(3.5rem, 5vw, 5rem);

  border-top:
    1px solid
    rgba(6,24,47,0.09);
}


/* =========================================================
   PREVIEW HEADER
========================================================= */

.glm-services-preview__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.58fr);

  align-items: end;

  gap:
    clamp(3rem, 7vw, 8rem);

  margin-bottom:
    clamp(2.5rem, 4vw, 4rem);
}


.glm-services-preview__eyebrow {
  display: inline-block;

  margin-bottom:
    0.8rem;

  color:
    var(--glm-green-800);

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.glm-services-preview__heading h3 {
  max-width:
    760px;

  margin: 0;

  color:
    var(--glm-navy-950);

  font-family:
    var(--glm-font-display);

  font-size:
    clamp(2.5rem, 4.5vw, 5rem);

  font-weight:
    400;

  line-height:
    0.98;

  letter-spacing:
    -0.04em;
}


.glm-services-preview__heading h3 span {
  display: block;

  color:
    var(--glm-green-700);
}


.glm-services-preview__intro {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap:
    1.25rem;
}


.glm-services-preview__intro p {
  max-width:
    440px;

  margin: 0;

  color:
    var(--glm-text-soft);
}


/* =========================================================
   GALLERY CTA
========================================================= */

.glm-services-preview__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap:
    0.65rem;

  min-height:
    52px;

  padding:
    0.8rem 1.15rem;

  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    0 13px 30px
    rgba(243,106,22,0.17);

  font-size:
    0.82rem;

  font-weight:
    800;

  transition:
    transform
    400ms
    var(--glm-ease-expo),

    background
    300ms
    ease,

    box-shadow
    400ms
    var(--glm-ease-expo);
}


html.has-fine-pointer
.glm-services-preview__button:hover {
  transform:
    translateY(-3px);

  background:
    var(--glm-orange-600);

  box-shadow:
    0 18px 38px
    rgba(243,106,22,0.23);
}


.glm-services-preview__button-arrow {
  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


html.has-fine-pointer
.glm-services-preview__button:hover
.glm-services-preview__button-arrow {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   FLEXIBLE IMAGE MOSAIC
========================================================= */

.glm-work-preview {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-auto-flow: dense;

  grid-auto-rows:
    clamp(115px, 10vw, 155px);

  gap:
    clamp(0.55rem, 0.9vw, 0.85rem);
}


/* =========================================================
   IMAGE
========================================================= */

.glm-work-preview__item {
  position: relative;

  grid-column:
    span 4;

  grid-row:
    span 2;

  min-width: 0;

  overflow: hidden;

  background:
    var(--glm-green-100);

  border-radius:
    var(--glm-radius-lg);

  box-shadow:
    var(--glm-shadow-xs);

  isolation: isolate;
}


.glm-work-preview__item--feature {
  grid-column:
    span 7;

  grid-row:
    span 3;
}


.glm-work-preview__item:nth-child(2) {
  grid-column:
    span 5;

  grid-row:
    span 3;
}


.glm-work-preview__item:nth-child(3),
.glm-work-preview__item:nth-child(4),
.glm-work-preview__item:nth-child(5) {
  grid-column:
    span 4;

  grid-row:
    span 2;
}


.glm-work-preview__item:nth-child(6) {
  grid-column:
    span 8;

  grid-row:
    span 2;
}


.glm-work-preview__item img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(1.015);

  transition:
    transform
    900ms
    var(--glm-ease-expo),

    filter
    600ms
    ease;
}


.glm-work-preview__shade {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      transparent 40%,
      rgba(6,24,47,0.27) 100%
    );

  opacity: 0.65;

  transition:
    opacity
    450ms
    ease;

  pointer-events: none;
}


html.has-fine-pointer
.glm-work-preview__item:hover img {
  transform:
    scale(1.055);
}


html.has-fine-pointer
.glm-work-preview__item:hover
.glm-work-preview__shade {
  opacity: 0.9;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.glm-work-preview__label {
  position: absolute;

  left: 1rem;
  bottom: 1rem;

  z-index: 2;

  display: inline-flex;

  padding:
    0.45rem 0.65rem;

  color:
    var(--glm-white);

  background:
    rgba(6,24,47,0.42);

  border:
    1px solid
    rgba(255,255,255,0.16);

  border-radius:
    var(--glm-radius-pill);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


/* =========================================================
   PREVIEW FOOTER
========================================================= */

.glm-services-preview__footer {
  display: grid;

  grid-template-columns:
    minmax(50px, 1fr)
    auto
    auto;

  align-items: center;

  gap:
    1.2rem;

  margin-top:
    1.6rem;
}


.glm-services-preview__footer-line {
  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(52,123,55,0.05),
      rgba(52,123,55,0.25)
    );
}


.glm-services-preview__footer p {
  margin: 0;

  color:
    var(--glm-text-muted);

  font-size:
    0.72rem;

  font-weight:
    700;
}


.glm-services-preview__footer a {
  display: inline-flex;
  align-items: center;

  gap:
    0.5rem;

  color:
    var(--glm-green-800);

  font-size:
    0.75rem;

  font-weight:
    800;
}


.glm-services-preview__footer a span {
  color:
    var(--glm-orange-500);

  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


html.has-fine-pointer
.glm-services-preview__footer a:hover span {
  transform:
    translateX(4px);
}


/* =========================================================
   SAFE REVEAL

   All content remains visible if JS fails.
========================================================= */

.glm-services
[data-services-reveal] {
  opacity: 1;

  visibility: visible;

  transform: none;

  filter: none;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

html.is-reduced-motion
.glm-service-family,
html.is-reduced-motion
.glm-service-family__spotlight,
html.is-reduced-motion
.glm-service-family__visual,
html.is-reduced-motion
.glm-work-preview__item img,
html.is-reduced-motion
.glm-work-preview__shade,
html.is-reduced-motion
.glm-services-preview__button,
html.is-reduced-motion
.glm-services-preview__button-arrow,
html.is-reduced-motion
.glm-services__estimate-link span,
html.is-reduced-motion
.glm-services-preview__footer a span {
  transition-duration:
    0.01ms !important;

  transform:
    none !important;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-service-family--large,
  .glm-service-family--tree {
    min-height:
      410px;
  }


  .glm-service-family:not(.glm-service-family--large):not(.glm-service-family--tree) {
    min-height:
      340px;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-services__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.62fr);

    gap:
      3rem;
  }


  .glm-service-family,
  .glm-service-family--large,
  .glm-service-family--tree {
    grid-column:
      span 6;

    min-height:
      350px;
  }


  .glm-service-family:last-child {
    grid-column:
      span 12;

    min-height:
      300px;
  }


  .glm-service-family--large
  .glm-service-family__content {
    max-width:
      78%;
  }


  .glm-service-family__visual {
    width:
      54%;
  }


  .glm-services-preview__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.65fr);

    gap:
      3rem;
  }


  .glm-work-preview {
    grid-auto-rows:
      110px;
  }


  .glm-work-preview__item--feature {
    grid-column:
      span 7;
  }


  .glm-work-preview__item:nth-child(2) {
    grid-column:
      span 5;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-services__header {
    grid-template-columns:
      1fr;

    gap:
      1.5rem;

    margin-bottom:
      2.7rem;
  }


  .glm-services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      0.75rem;
  }


  .glm-service-family,
  .glm-service-family--large,
  .glm-service-family--tree {
    grid-column:
      span 1;

    min-height:
      335px;

    padding:
      1.2rem;
  }


  .glm-service-family--large {
    grid-column:
      1 / -1;

    min-height:
      350px;
  }


  .glm-service-family:last-child {
    grid-column:
      1 / -1;

    min-height:
      280px;
  }


  .glm-service-family--large
  .glm-service-family__content {
    max-width:
      65%;
  }


  .glm-service-family__content {
    max-width:
      100%;
  }


  .glm-service-family__visual {
    width:
      62%;

    opacity:
      0.85;
  }


  .glm-service-family__content h3 {
    font-size:
      1.7rem;
  }


  .glm-services-preview {
    margin-top:
      5rem;
  }


  .glm-services-preview__header {
    grid-template-columns:
      1fr;

    gap:
      1.5rem;
  }


  .glm-work-preview {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    grid-auto-rows:
      115px;
  }


  .glm-work-preview__item,
  .glm-work-preview__item:nth-child(3),
  .glm-work-preview__item:nth-child(4),
  .glm-work-preview__item:nth-child(5) {
    grid-column:
      span 3;

    grid-row:
      span 2;
  }


  .glm-work-preview__item--feature,
  .glm-work-preview__item:nth-child(2),
  .glm-work-preview__item:nth-child(6) {
    grid-column:
      span 6;

    grid-row:
      span 2;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-services__header {
    grid-template-columns:
      1fr;

    gap:
      1.2rem;

    margin-bottom:
      2.2rem;
  }


  .glm-services__title {
    font-size:
      clamp(
        2.25rem,
        11.5vw,
        3.2rem
      );
  }


  .glm-services__grid {
    grid-template-columns:
      1fr;

    gap:
      0.7rem;
  }


  .glm-service-family,
  .glm-service-family--large,
  .glm-service-family--tree,
  .glm-service-family:last-child {
    grid-column:
      auto;

    min-height:
      310px;

    padding:
      1.1rem;

    border-radius:
      18px;
  }


  .glm-service-family--large {
    min-height:
      350px;
  }


  .glm-service-family--large
  .glm-service-family__content,
  .glm-service-family__content {
    max-width:
      100%;
  }


  .glm-service-family__visual {
    top:
      38px;

    right:
      -18px;

    width:
      65%;

    height:
      48%;

    opacity:
      0.72;
  }


  .glm-service-family--large
  .glm-service-family__visual {
    width:
      68%;

    height:
      52%;
  }


  .glm-service-family__content h3,
  .glm-service-family--lawn
  .glm-service-family__content h3 {
    font-size:
      1.8rem;
  }


  .glm-service-family__content p {
    font-size:
      0.88rem;

    line-height:
      1.55;
  }


  .glm-service-family__services {
    gap:
      0.35rem;

    margin-top:
      0.95rem;
  }


  .glm-service-family__services span {
    min-height:
      28px;

    padding:
      0.3rem 0.55rem;

    font-size:
      0.63rem;
  }


  .glm-services-preview {
    margin-top:
      4.5rem;

    padding-top:
      3rem;
  }


  .glm-services-preview__header {
    grid-template-columns:
      1fr;

    gap:
      1.25rem;

    margin-bottom:
      2rem;
  }


  .glm-services-preview__heading h3 {
    font-size:
      clamp(
        2.2rem,
        11vw,
        3rem
      );
  }


  .glm-services-preview__button {
    width:
      100%;
  }


  .glm-work-preview {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      120px;

    gap:
      0.5rem;
  }


  .glm-work-preview__item,
  .glm-work-preview__item:nth-child(2),
  .glm-work-preview__item:nth-child(3),
  .glm-work-preview__item:nth-child(4),
  .glm-work-preview__item:nth-child(5),
  .glm-work-preview__item:nth-child(6) {
    grid-column:
      span 1;

    grid-row:
      span 2;

    border-radius:
      15px;
  }


  .glm-work-preview__item--feature {
    grid-column:
      1 / -1;

    grid-row:
      span 2;
  }


  .glm-services-preview__footer {
    grid-template-columns:
      28px minmax(0, 1fr);

    gap:
      0.7rem;
  }


  .glm-services-preview__footer p {
    font-size:
      0.66rem;
  }


  .glm-services-preview__footer a {
    grid-column:
      2;

    justify-self:
      start;
  }

}
























































/* =========================================================
   05. WHY CHOOSE US
   GARCIA'S LAWN MOWER
========================================================= */

.glm-why {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #F3F5EC 0%,
      var(--glm-ivory-100) 100%
    );

  isolation: isolate;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.glm-why__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-why__ambient-ring {
  position: absolute;

  border:
    1px solid
    rgba(52, 123, 55, 0.055);

  border-radius: 50%;
}


.glm-why__ambient-ring--one {
  width: 720px;
  height: 320px;

  left: -250px;
  top: 10%;

  transform:
    rotate(17deg);
}


.glm-why__ambient-ring--two {
  width: 590px;
  height: 240px;

  left: -170px;
  top: 16%;

  transform:
    rotate(17deg);
}


.glm-why__ambient-leaf {
  position: absolute;

  right: -90px;
  bottom: 5%;

  width: 320px;
  height: 190px;

  border-radius:
    100% 0 100% 0;

  background:
    rgba(145, 203, 113, 0.065);

  transform:
    rotate(17deg);
}


/* =========================================================
   HEADER
========================================================= */

.glm-why__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(3rem, 7vw, 8rem);

  margin-bottom:
    clamp(3rem, 5vw, 5rem);
}


.glm-why__title {
  max-width:
    820px;

  margin: 0;
}


.glm-why__title span {
  display: block;

  color:
    var(--glm-green-700);
}


.glm-why__intro {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 1.3rem;
}


.glm-why__intro p {
  margin: 0;

  max-width:
    480px;
}


.glm-why__intro-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 0.65rem;

  color:
    var(--glm-navy-950);

  font-size:
    0.95rem;

  font-weight:
    800;
}


.glm-why__intro-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 44px;
  height: 1px;

  background:
    var(--glm-green-600);

  transition:
    width
    450ms
    var(--glm-ease-expo);
}


.glm-why__intro-link:hover::after {
  width:
    100%;
}


.glm-why__intro-arrow {
  color:
    var(--glm-green-700);

  transition:
    transform
    400ms
    var(--glm-ease-expo);
}


.glm-why__intro-link:hover
.glm-why__intro-arrow {
  transform:
    translate(4px, -4px);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.glm-why__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(2rem, 4vw, 5rem);

  align-items: stretch;
}


/* =========================================================
   VISUAL
========================================================= */

.glm-why__visual {
  position: relative;

  min-width: 0;
}


.glm-why__figure {
  position: relative;

  width: 100%;
  height: 100%;

  min-height:
    720px;

  margin: 0;

  overflow: hidden;

  border-radius:
    var(--glm-radius-xl);

  background:
    var(--glm-green-100);

  box-shadow:
    var(--glm-shadow-lg);
}


.glm-why__figure > img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(1.02);

  transition:
    transform
    1.2s
    var(--glm-ease-expo);
}


.glm-why__visual:hover
.glm-why__figure > img {
  transform:
    scale(1.055);
}


.glm-why__image-shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(6, 24, 47, 0.05) 0%,
      rgba(6, 24, 47, 0.08) 43%,
      rgba(6, 24, 47, 0.62) 100%
    );
}


/* =========================================================
   PROPERTY BADGE
========================================================= */

.glm-why__property-badge {
  position: absolute;

  top: 1.5rem;
  left: 1.5rem;

  display: flex;
  align-items: center;

  gap: 0.85rem;

  padding:
    0.85rem 1rem;

  color:
    var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.90);

  border:
    1px solid
    rgba(255, 255, 255, 0.72);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    0 12px 32px
    rgba(6, 24, 47, 0.10);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);
}


.glm-why__property-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex:
    0 0 42px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-050);

  border-radius: 50%;
}


.glm-why__property-icon svg {
  width: 22px;
  height: 22px;

  fill:
    currentColor;
}


.glm-why__property-badge > span:last-child {
  display: flex;
  flex-direction: column;

  gap: 0.15rem;
}


.glm-why__property-badge small {
  color:
    var(--glm-text-muted);

  font-size:
    0.7rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.glm-why__property-badge strong {
  font-size:
    0.9rem;

  line-height:
    1.25;
}


/* =========================================================
   VISUAL MESSAGE
========================================================= */

.glm-why__visual-message {
  position: absolute;

  left: 1.8rem;
  right: 1.8rem;
  bottom: 1.8rem;

  display: grid;

  grid-template-columns:
    46px 1fr;

  align-items: start;

  gap: 1rem;
}


.glm-why__visual-line {
  width: 46px;
  height: 2px;

  margin-top: 0.75rem;

  background:
    var(--glm-orange-400);
}


.glm-why__visual-message p {
  margin: 0;

  max-width:
    470px;

  color:
    rgba(255, 255, 255, 0.94);

  font-family:
    var(--glm-font-display);

  font-size:
    clamp(1.35rem, 1.65vw, 1.8rem);

  line-height:
    1.28;
}


/* =========================================================
   FLOAT CARD
========================================================= */

.glm-why__float-card {
  position: absolute;

  right: -24px;
  top: 45%;

  display: flex;
  align-items: center;

  gap: 0.8rem;

  padding:
    0.9rem 1rem;

  color:
    var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid
    rgba(255, 255, 255, 0.85);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    var(--glm-shadow-md);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  transform:
    translateY(-50%);
}


.glm-why__float-icon {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  flex:
    0 0 39px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-100);

  border-radius: 50%;
}


.glm-why__float-icon svg {
  width: 20px;
  height: 20px;

  fill:
    currentColor;
}


.glm-why__float-card > span:last-child {
  display: flex;
  flex-direction: column;

  color:
    var(--glm-text-muted);

  font-size:
    0.72rem;

  line-height:
    1.2;
}


.glm-why__float-card strong {
  margin-top:
    0.15rem;

  color:
    var(--glm-navy-950);

  font-size:
    0.88rem;
}


/* =========================================================
   REASONS
========================================================= */

.glm-why__reasons {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(0.85rem, 1.3vw, 1.2rem);

  align-content: start;
}


/* =========================================================
   REASON CARD
========================================================= */

.glm-why-card {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap:
    clamp(0.85rem, 1vw, 1.05rem);

  min-height:
    170px;

  padding:
    clamp(1.3rem, 1.65vw, 1.7rem);

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.68);

  border:
    1px solid
    rgba(6, 24, 47, 0.075);

  border-radius:
    var(--glm-radius-lg);

  box-shadow:
    var(--glm-shadow-xs);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transition:
    transform
    450ms
    var(--glm-ease-expo),

    border-color
    350ms
    ease,

    box-shadow
    450ms
    var(--glm-ease-expo),

    background
    350ms
    ease;
}


.glm-why-card::after {
  content: "";

  position: absolute;

  width: 100px;
  height: 100px;

  right: -45px;
  bottom: -48px;

  border-radius: 50%;

  background:
    rgba(145, 203, 113, 0.075);

  transition:
    transform
    550ms
    var(--glm-ease-expo);
}


.glm-why-card:hover {
  transform:
    translateY(-5px);

  background:
    rgba(255, 255, 255, 0.90);

  border-color:
    rgba(52, 123, 55, 0.17);

  box-shadow:
    var(--glm-shadow-sm);
}


.glm-why-card:hover::after {
  transform:
    scale(1.35);
}


/* accent card */

.glm-why-card--accent {
  color:
    var(--glm-white);

  background:
    linear-gradient(
      145deg,
      var(--glm-navy-950),
      #0B3240
    );

  border-color:
    rgba(255,255,255,0.07);

  box-shadow:
    var(--glm-shadow-md);
}


.glm-why-card--accent::after {
  background:
    rgba(145, 203, 113, 0.10);
}


.glm-why-card--accent:hover {
  background:
    linear-gradient(
      145deg,
      #071C35,
      #0D3A45
    );

  border-color:
    rgba(145,203,113,0.18);
}


/* =========================================================
   CARD ICON
========================================================= */

.glm-why-card__icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  flex:
    0 0 48px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-050);

  border-radius:
    50%;

  transition:
    transform
    450ms
    var(--glm-ease-expo),

    background
    350ms
    ease;
}


.glm-why-card:hover
.glm-why-card__icon {
  transform:
    translateY(-2px)
    rotate(-3deg);
}


.glm-why-card__icon svg {
  width: 24px;
  height: 24px;

  fill:
    currentColor;
}


.glm-why-card--accent
.glm-why-card__icon {
  color:
    var(--glm-green-400);

  background:
    rgba(145,203,113,0.12);
}


/* =========================================================
   CARD COPY
========================================================= */

.glm-why-card__copy {
  position: relative;

  z-index: 1;

  display: flex;
  flex-direction: column;

  gap: 0.55rem;
}


.glm-why-card__copy strong {
  color:
    var(--glm-navy-950);

  font-size:
    clamp(1rem, 1vw, 1.1rem);

  line-height:
    1.25;
}


.glm-why-card__copy p {
  margin: 0;

  color:
    var(--glm-text-muted);

  font-size:
    0.93rem;

  line-height:
    1.55;
}


.glm-why-card--accent
.glm-why-card__copy strong {
  color:
    var(--glm-white);
}


.glm-why-card--accent
.glm-why-card__copy p {
  color:
    rgba(255,255,255,0.68);
}


/* =========================================================
   CTA
========================================================= */

.glm-why__cta {
  grid-column:
    1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;

  margin-top:
    0.3rem;

  padding:
    1.35rem 1.45rem;

  background:
    var(--glm-green-050);

  border:
    1px solid
    rgba(52, 123, 55, 0.11);

  border-radius:
    var(--glm-radius-lg);
}


.glm-why__cta-copy {
  display: flex;
  flex-direction: column;

  gap: 0.2rem;
}


.glm-why__cta-copy span {
  color:
    var(--glm-text-muted);

  font-size:
    0.78rem;

  font-weight:
    700;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.glm-why__cta-copy strong {
  color:
    var(--glm-navy-950);

  font-size:
    clamp(1rem, 1.1vw, 1.2rem);
}


.glm-why__cta-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  min-height: 50px;

  padding:
    0.8rem 1.2rem;

  flex-shrink: 0;

  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  border-radius:
    var(--glm-radius-md);

  font-size:
    0.88rem;

  font-weight:
    800;

  box-shadow:
    0 12px 28px
    rgba(243, 106, 22, 0.16);

  transition:
    transform
    400ms
    var(--glm-ease-expo),

    box-shadow
    400ms
    var(--glm-ease-expo);
}


.glm-why__cta-button span {
  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


.glm-why__cta-button:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 16px 34px
    rgba(243, 106, 22, 0.22);
}


.glm-why__cta-button:hover span {
  transform:
    translateX(4px);
}


/* =========================================================
   REVEAL FOUNDATION

   Visible by default.
   JS only enhances it.
========================================================= */

.glm-why [data-why-reveal] {
  opacity: 1;

  visibility: visible;

  transform: none;

  filter: none;

  clip-path: none;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-why__layout {
    min-height:
      720px;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-why__header {
    grid-template-columns:
      1fr 0.62fr;

    gap:
      3rem;
  }


  .glm-why__layout {
    grid-template-columns:
      0.88fr 1.12fr;

    gap:
      2rem;
  }


  .glm-why__figure {
    min-height:
      650px;
  }


  .glm-why__reasons {
    grid-template-columns:
      1fr;
  }


  .glm-why-card {
    min-height:
      130px;
  }


  .glm-why__float-card {
    right:
      -15px;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-why__header {
    grid-template-columns:
      1fr;

    gap:
      1.5rem;

    margin-bottom:
      2.5rem;
  }


  .glm-why__layout {
    grid-template-columns:
      1fr;

    gap:
      1.5rem;
  }


  .glm-why__figure {
    min-height:
      520px;

    border-radius:
      22px;
  }


  .glm-why__float-card {
    right:
      1rem;

    top:
      auto;

    bottom:
      8.8rem;

    transform:
      none;
  }


  .glm-why__reasons {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .glm-why-card {
    min-height:
      165px;

    padding:
      1.2rem;
  }


  .glm-why-card__icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }


  .glm-why-card__icon svg {
    width:
      21px;

    height:
      21px;
  }


  .glm-why__cta {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .glm-why__cta-button {
    width:
      100%;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-why__header {
    grid-template-columns:
      1fr;

    gap:
      1.25rem;

    margin-bottom:
      2rem;
  }


  .glm-why__title {
    font-size:
      clamp(2.2rem, 12vw, 3.1rem);
  }


  .glm-why__layout {
    grid-template-columns:
      1fr;

    gap:
      1.25rem;
  }


  .glm-why__figure {
    min-height:
      440px;

    border-radius:
      18px;
  }


  .glm-why__property-badge {
    top:
      1rem;

    left:
      1rem;

    padding:
      0.7rem 0.8rem;
  }


  .glm-why__property-icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }


  .glm-why__property-icon svg {
    width:
      19px;

    height:
      19px;
  }


  .glm-why__property-badge small {
    font-size:
      0.6rem;
  }


  .glm-why__property-badge strong {
    font-size:
      0.78rem;
  }


  .glm-why__visual-message {
    left:
      1.1rem;

    right:
      1.1rem;

    bottom:
      1.1rem;

    grid-template-columns:
      32px 1fr;

    gap:
      0.7rem;
  }


  .glm-why__visual-line {
    width:
      32px;
  }


  .glm-why__visual-message p {
    font-size:
      1.16rem;
  }


  .glm-why__float-card {
    display:
      none;
  }


  .glm-why__reasons {
    grid-template-columns:
      1fr;

    gap:
      0.75rem;
  }


  .glm-why-card {
    min-height:
      0;

    padding:
      1.1rem;

    border-radius:
      18px;
  }


  .glm-why-card__icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }


  .glm-why-card__copy strong {
    font-size:
      1rem;
  }


  .glm-why-card__copy p {
    font-size:
      0.88rem;
  }


  .glm-why__cta {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      1rem;

    padding:
      1.1rem;
  }


  .glm-why__cta-button {
    width:
      100%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .glm-why__figure > img,
  .glm-why-card,
  .glm-why-card::after,
  .glm-why-card__icon,
  .glm-why__cta-button,
  .glm-why__cta-button span {
    transition:
      none !important;

    transform:
      none !important;
  }

}























































/* =========================================================
   06. REVIEWS
   GARCIA'S LAWN MOWER
========================================================= */

.glm-reviews {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--glm-ivory-100) 0%,
      #F1F4E9 54%,
      #F6F6EF 100%
    );

  isolation: isolate;
}


/* =========================================================
   AMBIENT DECORATION
========================================================= */

.glm-reviews__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


/* large circles inspired by logo */

.glm-reviews__orbit {
  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(52, 123, 55, 0.06);
}


.glm-reviews__orbit--one {
  width: 760px;
  height: 760px;

  right: -370px;
  top: -280px;
}


.glm-reviews__orbit--two {
  width: 610px;
  height: 610px;

  right: -290px;
  top: -205px;

  border-color:
    rgba(243, 106, 22, 0.045);
}


/* organic leaves */

.glm-reviews__leaf {
  position: absolute;

  border-radius:
    100% 0 100% 0;

  background:
    rgba(145, 203, 113, 0.075);
}


.glm-reviews__leaf--one {
  width: 300px;
  height: 165px;

  left: -90px;
  top: 37%;

  transform:
    rotate(-23deg);
}


.glm-reviews__leaf--two {
  width: 230px;
  height: 130px;

  left: 60px;
  top: 42%;

  opacity: 0.45;

  transform:
    rotate(18deg);
}


/* subtle mower-path lines */

.glm-reviews__mow-line {
  position: absolute;

  width: 620px;
  height: 200px;

  border:
    1px solid
    rgba(52, 123, 55, 0.04);

  border-radius: 50%;
}


.glm-reviews__mow-line--one {
  left: -250px;
  bottom: 6%;

  transform:
    rotate(11deg);
}


.glm-reviews__mow-line--two {
  left: -170px;
  bottom: 9%;

  transform:
    rotate(11deg)
    scale(0.83);
}


/* =========================================================
   HEADER
========================================================= */

.glm-reviews__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(3rem, 7vw, 8rem);

  margin-bottom:
    clamp(3rem, 5vw, 5rem);
}


.glm-reviews__title {
  max-width:
    860px;

  margin: 0;
}


.glm-reviews__title span {
  display: block;

  color:
    var(--glm-green-700);
}


.glm-reviews__intro {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 1.35rem;
}


.glm-reviews__intro p {
  max-width:
    470px;

  margin: 0;
}


/* =========================================================
   TRUST LINE
========================================================= */

.glm-reviews__trust {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap:
    0.65rem;

  color:
    var(--glm-navy-950);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.03em;
}


.glm-reviews__trust
> span[aria-hidden="true"] {
  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background:
    var(--glm-orange-500);
}


/* =========================================================
   STAGE
========================================================= */

.glm-reviews__stage {
  position: relative;

  display: grid;

  grid-template-columns:
    115px
    minmax(0, 1fr);

  align-items: stretch;

  gap:
    clamp(1rem, 2vw, 2rem);

  padding-bottom:
    1.8rem;
}


/* =========================================================
   LEFT RAIL
========================================================= */

.glm-reviews__rail {
  display: flex;
  flex-direction: column;

  align-items: center;

  min-height:
    500px;

  padding-top:
    1.2rem;
}


.glm-reviews__quote {
  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  color:
    var(--glm-green-700);

  background:
    var(--glm-green-100);

  border:
    1px solid
    rgba(52, 123, 55, 0.11);

  border-radius: 50%;
}


.glm-reviews__quote svg {
  width: 36px;

  fill:
    currentColor;
}


.glm-reviews__rail-label {
  margin-top:
    2rem;

  color:
    var(--glm-green-800);

  font-size:
    0.66rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  line-height:
    1.3;

  text-transform:
    uppercase;

  writing-mode:
    vertical-rl;

  transform:
    rotate(180deg);
}


.glm-reviews__rail-line {
  width: 1px;

  flex: 1;

  min-height:
    110px;

  margin-top:
    1.4rem;

  background:
    linear-gradient(
      180deg,
      rgba(52,123,55,0.34),
      rgba(52,123,55,0)
    );
}


/* =========================================================
   PANEL
========================================================= */

.glm-reviews__panel {
  position: relative;

  min-width: 0;

  padding:
    clamp(1.25rem, 2vw, 2rem);

  background:
    rgba(255, 255, 255, 0.76);

  border:
    1px solid
    rgba(6, 24, 47, 0.075);

  border-radius:
    var(--glm-radius-xl);

  box-shadow:
    0 24px 65px
    rgba(6, 24, 47, 0.08);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  overflow: hidden;
}


.glm-reviews__panel::before {
  content: "";

  position: absolute;

  width: 290px;
  height: 290px;

  right: -140px;
  top: -150px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(145, 203, 113, 0.13),
      rgba(145, 203, 113, 0)
      68%
    );

  pointer-events: none;
}


/* =========================================================
   PANEL TOP
========================================================= */

.glm-reviews__panel-top {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  gap: 0.75rem;

  min-height: 34px;

  margin-bottom:
    1.25rem;
}


.glm-reviews__panel-dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  border-radius: 50%;

  background:
    var(--glm-orange-500);
}


.glm-reviews__panel-line {
  width: 36px;
  height: 1px;

  background:
    var(--glm-green-600);
}


.glm-reviews__panel-word {
  color:
    var(--glm-text-muted);

  font-size:
    0.7rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   ELFSIGHT WIDGET SHELL
========================================================= */

.glm-reviews__widget-shell {
  position: relative;

  z-index: 2;

  width: 100%;

  min-height:
    440px;

  overflow: visible;

  border-radius:
    var(--glm-radius-lg);
}


/*
  IMPORTANT:

  Do NOT apply styles directly to:
  - Elfsight iframe
  - Elfsight cards
  - Elfsight stars
  - widget internal elements

  Only this exterior shell is controlled
  by the website.
*/


/* =========================================================
   TEMPORARY PLACEHOLDER
========================================================= */

.glm-reviews__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    1rem;

  width: 100%;
  min-height:
    440px;

  padding:
    2rem;

  color:
    var(--glm-navy-950);

  background:
    linear-gradient(
      135deg,
      rgba(240, 245, 233, 0.86),
      rgba(255, 255, 255, 0.74)
    );

  border:
    1px dashed
    rgba(52, 123, 55, 0.20);

  border-radius:
    var(--glm-radius-lg);

  text-align:
    left;
}


.glm-reviews__placeholder-mark {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  flex:
    0 0 54px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-100);

  border-radius:
    50%;
}


.glm-reviews__placeholder-mark svg {
  width: 26px;
  height: 26px;

  fill:
    currentColor;
}


.glm-reviews__placeholder-copy {
  display: flex;
  flex-direction: column;

  gap: 0.3rem;
}


.glm-reviews__placeholder-copy strong {
  font-size:
    1rem;
}


.glm-reviews__placeholder-copy p {
  margin: 0;

  font-size:
    0.9rem;
}


/* =========================================================
   CORNER CARD
========================================================= */

.glm-reviews__corner-card {
  position: absolute;

  right:
    -18px;

  bottom: 0;

  z-index: 4;

  display: flex;
  align-items: center;

  gap:
    0.8rem;

  max-width:
    230px;

  padding:
    0.9rem 1rem;

  color:
    var(--glm-navy-950);

  background:
    rgba(255, 255, 255, 0.95);

  border:
    1px solid
    rgba(6, 24, 47, 0.08);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    var(--glm-shadow-md);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.glm-reviews__corner-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-100);

  border-radius:
    50%;
}


.glm-reviews__corner-icon svg {
  width: 20px;
  height: 20px;

  fill:
    currentColor;
}


.glm-reviews__corner-card
> span:last-child {
  display: flex;
  flex-direction: column;

  color:
    var(--glm-text-muted);

  font-size:
    0.68rem;

  line-height:
    1.25;
}


.glm-reviews__corner-card strong {
  margin-top:
    0.18rem;

  color:
    var(--glm-navy-950);

  font-size:
    0.82rem;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.glm-reviews__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;

  margin-top:
    clamp(2rem, 4vw, 3.5rem);

  padding-top:
    clamp(1.5rem, 2vw, 2rem);

  border-top:
    1px solid
    rgba(6, 24, 47, 0.08);
}


.glm-reviews__bottom-copy {
  display: flex;
  align-items: center;

  gap:
    1rem;
}


.glm-reviews__bottom-label {
  flex-shrink: 0;

  color:
    var(--glm-green-800);

  font-size:
    0.75rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.glm-reviews__bottom-copy p {
  margin: 0;

  max-width:
    520px;

  padding-left:
    1rem;

  border-left:
    1px solid
    rgba(6, 24, 47, 0.10);

  font-size:
    0.95rem;
}


/* CTA */

.glm-reviews__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap:
    0.7rem;

  min-height:
    52px;

  padding:
    0.8rem 1.2rem;

  flex-shrink: 0;

  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  border-radius:
    var(--glm-radius-md);

  font-size:
    0.88rem;

  font-weight:
    800;

  box-shadow:
    0 12px 28px
    rgba(243, 106, 22, 0.16);

  transition:
    transform
    400ms
    var(--glm-ease-expo),

    box-shadow
    400ms
    var(--glm-ease-expo);
}


.glm-reviews__cta-arrow {
  font-size:
    1.05rem;

  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


.glm-reviews__cta:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 17px 34px
    rgba(243, 106, 22, 0.22);
}


.glm-reviews__cta:hover
.glm-reviews__cta-arrow {
  transform:
    translateX(4px);
}


/* =========================================================
   SAFE REVEAL

   Visible by default.
========================================================= */

.glm-reviews
[data-reviews-reveal] {
  opacity: 1;

  visibility: visible;

  transform: none;

  filter: none;
}


/* =========================================================
   01 — COMPUTER
   1025px+
========================================================= */

@media (min-width: 1025px) {

  .glm-reviews__panel {
    min-height:
      540px;
  }


  .glm-reviews__widget-shell {
    min-height:
      440px;
  }

}


/* =========================================================
   02 — TABLET
   768px — 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-reviews__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(270px, 0.58fr);

    gap:
      3rem;
  }


  .glm-reviews__stage {
    grid-template-columns:
      85px
      minmax(0, 1fr);

    gap:
      1.25rem;
  }


  .glm-reviews__rail {
    min-height:
      440px;
  }


  .glm-reviews__quote {
    width:
      60px;

    height:
      60px;
  }


  .glm-reviews__quote svg {
    width:
      30px;
  }


  .glm-reviews__widget-shell,
  .glm-reviews__placeholder {
    min-height:
      400px;
  }


  .glm-reviews__corner-card {
    right:
      0;
  }

}


/* =========================================================
   03 — MOBILE
   481px — 767px
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-reviews__header {
    grid-template-columns:
      1fr;

    gap:
      1.5rem;

    margin-bottom:
      2.5rem;
  }


  .glm-reviews__stage {
    display:
      block;

    padding-bottom:
      0;
  }


  .glm-reviews__rail {
    display:
      none;
  }


  .glm-reviews__panel {
    padding:
      1rem;

    border-radius:
      22px;
  }


  .glm-reviews__widget-shell,
  .glm-reviews__placeholder {
    min-height:
      380px;
  }


  .glm-reviews__corner-card {
    position:
      relative;

    right:
      auto;

    bottom:
      auto;

    max-width:
      none;

    width:
      fit-content;

    margin:
      1rem 0 0 auto;
  }


  .glm-reviews__bottom {
    align-items:
      flex-end;
  }


  .glm-reviews__bottom-copy {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      0.55rem;
  }


  .glm-reviews__bottom-copy p {
    padding-left:
      0;

    border-left:
      0;
  }

}


/* =========================================================
   04 — SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

  .glm-reviews__header {
    grid-template-columns:
      1fr;

    gap:
      1.25rem;

    margin-bottom:
      2rem;
  }


  .glm-reviews__title {
    font-size:
      clamp(
        2.2rem,
        12vw,
        3.1rem
      );
  }


  .glm-reviews__trust {
    gap:
      0.5rem;

    font-size:
      0.68rem;
  }


  .glm-reviews__stage {
    display:
      block;

    padding-bottom:
      0;
  }


  .glm-reviews__rail {
    display:
      none;
  }


  .glm-reviews__panel {
    padding:
      0.8rem;

    border-radius:
      18px;
  }


  .glm-reviews__panel-top {
    margin-bottom:
      0.75rem;
  }


  .glm-reviews__widget-shell,
  .glm-reviews__placeholder {
    min-height:
      330px;
  }


  .glm-reviews__placeholder {
    flex-direction:
      column;

    text-align:
      center;
  }


  .glm-reviews__corner-card {
    position:
      relative;

    right:
      auto;

    bottom:
      auto;

    max-width:
      none;

    margin-top:
      0.75rem;

    box-shadow:
      var(--glm-shadow-sm);
  }


  .glm-reviews__bottom {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      1rem;

    margin-top:
      2rem;
  }


  .glm-reviews__bottom-copy {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      0.5rem;
  }


  .glm-reviews__bottom-copy p {
    padding-left:
      0;

    border-left:
      0;

    font-size:
      0.9rem;
  }


  .glm-reviews__cta {
    width:
      100%;
  }

}













































/* =========================================================
   SERVICE AREAS
   GARCIA'S LAWN MOWER
========================================================= */

.glm-areas {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #F6F6EF 0%,
      var(--glm-ivory-100) 100%
    );

  isolation: isolate;
}


/* =========================================================
   AMBIENT
========================================================= */

.glm-areas__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-areas__orbit {
  position: absolute;

  border:
    1px solid
    rgba(52, 123, 55, 0.055);

  border-radius: 50%;
}


.glm-areas__orbit--one {
  width: 720px;
  height: 330px;

  right: -230px;
  top: 60px;

  transform:
    rotate(-14deg);
}


.glm-areas__orbit--two {
  width: 590px;
  height: 250px;

  right: -155px;
  top: 120px;

  transform:
    rotate(-14deg);
}


.glm-areas__path {
  position: absolute;

  left: -180px;

  width: 520px;
  height: 220px;

  border-radius: 50%;

  border:
    1px solid
    rgba(52, 123, 55, 0.04);
}


.glm-areas__path--one {
  bottom: 7%;

  transform:
    rotate(18deg);
}


.glm-areas__path--two {
  bottom: 11%;

  transform:
    rotate(18deg)
    scale(0.82);
}


/* =========================================================
   HEADER
========================================================= */

.glm-areas__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(3rem, 7vw, 8rem);

  margin-bottom:
    clamp(3rem, 5vw, 5rem);
}


.glm-areas__title {
  max-width:
    850px;

  margin: 0;
}


.glm-areas__title span {
  display: block;

  color:
    var(--glm-green-700);
}


.glm-areas__intro {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap:
    1.3rem;
}


.glm-areas__intro p {
  max-width:
    480px;

  margin: 0;
}


/* =========================================================
   HEADER LINK
========================================================= */

.glm-areas__estimate-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap:
    0.65rem;

  color:
    var(--glm-navy-950);

  font-size:
    0.95rem;

  font-weight:
    800;
}


.glm-areas__estimate-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 42px;
  height: 1px;

  background:
    var(--glm-green-600);

  transition:
    width
    450ms
    var(--glm-ease-expo);
}


.glm-areas__estimate-link:hover::after {
  width:
    100%;
}


.glm-areas__estimate-arrow {
  color:
    var(--glm-green-700);

  transition:
    transform
    400ms
    var(--glm-ease-expo);
}


.glm-areas__estimate-link:hover
.glm-areas__estimate-arrow {
  transform:
    translate(4px, -4px);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.glm-areas__layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.36fr)
    minmax(0, 1fr);

  min-height:
    660px;

  overflow: hidden;

  background:
    var(--glm-white);

  border:
    1px solid
    rgba(6, 24, 47, 0.08);

  border-radius:
    var(--glm-radius-xl);

  box-shadow:
    0 26px 70px
    rgba(6, 24, 47, 0.09);
}


/* =========================================================
   SIDEBAR
========================================================= */

.glm-areas__sidebar {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding:
    clamp(1.5rem, 2.2vw, 2.2rem);

  background:
    linear-gradient(
      160deg,
      rgba(250, 249, 243, 0.98),
      rgba(241, 245, 234, 0.98)
    );

  border-right:
    1px solid
    rgba(6, 24, 47, 0.075);
}


.glm-areas__sidebar-top {
  padding-bottom:
    1.4rem;

  border-bottom:
    1px solid
    rgba(6, 24, 47, 0.08);
}


.glm-areas__sidebar-label {
  color:
    var(--glm-navy-950);

  font-family:
    var(--glm-font-display);

  font-size:
    clamp(1.55rem, 1.7vw, 2rem);

  line-height:
    1.1;
}


.glm-areas__sidebar-top p {
  margin:
    0.55rem 0 0;

  font-size:
    0.88rem;

  line-height:
    1.55;
}


/* =========================================================
   COUNTY
========================================================= */

.glm-areas__county {
  padding:
    1.5rem 0;

  border-bottom:
    1px solid
    rgba(6, 24, 47, 0.08);
}


.glm-areas__county-heading {
  display: flex;
  align-items: center;

  gap:
    0.75rem;

  margin-bottom:
    0.9rem;
}


.glm-areas__county-marker {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-100);

  border-radius:
    50%;
}


.glm-areas__county-marker svg {
  width: 19px;
  height: 19px;

  fill:
    currentColor;
}


.glm-areas__county-heading
> span:last-child {
  display: flex;
  flex-direction: column;

  gap:
    0.1rem;
}


.glm-areas__county-heading small {
  color:
    var(--glm-text-muted);

  font-size:
    0.65rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.glm-areas__county-heading strong {
  color:
    var(--glm-navy-950);

  font-size:
    0.96rem;
}


/* =========================================================
   AREA BUTTONS
========================================================= */

.glm-areas__list {
  display: flex;
  flex-direction: column;

  gap:
    0.3rem;
}


.glm-area-button {
  width: 100%;
  min-height: 47px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap:
    0.65rem;

  padding:
    0.6rem 0.7rem;

  color:
    var(--glm-text);

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    11px;

  text-align:
    left;

  transition:
    color
    300ms
    ease,

    background
    300ms
    ease,

    border-color
    300ms
    ease,

    transform
    400ms
    var(--glm-ease-expo);
}


.glm-area-button:hover {
  color:
    var(--glm-green-900);

  background:
    rgba(255, 255, 255, 0.66);

  border-color:
    rgba(52, 123, 55, 0.10);

  transform:
    translateX(3px);
}


.glm-area-button.is-active {
  color:
    var(--glm-navy-950);

  background:
    var(--glm-white);

  border-color:
    rgba(52, 123, 55, 0.16);

  box-shadow:
    var(--glm-shadow-xs);
}


.glm-area-button__dot {
  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    var(--glm-green-500);

  box-shadow:
    0 0 0 4px
    rgba(115, 184, 90, 0.10);

  transition:
    background
    300ms
    ease,

    box-shadow
    300ms
    ease;
}


.glm-area-button.is-active
.glm-area-button__dot {
  background:
    var(--glm-orange-500);

  box-shadow:
    0 0 0 5px
    rgba(243, 106, 22, 0.12);
}


.glm-area-button__name {
  font-size:
    0.88rem;

  font-weight:
    700;
}


.glm-area-button__arrow {
  color:
    var(--glm-green-700);

  opacity:
    0.55;

  transition:
    opacity
    300ms
    ease,

    transform
    350ms
    var(--glm-ease-expo);
}


.glm-area-button:hover
.glm-area-button__arrow,
.glm-area-button.is-active
.glm-area-button__arrow {
  opacity:
    1;

  transform:
    translate(2px, -2px);
}


/* =========================================================
   SHOW ALL
========================================================= */

.glm-areas__show-all {
  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    0.65rem;

  width: 100%;
  min-height: 50px;

  margin-top:
    auto;

  padding:
    0.75rem 1rem;

  color:
    var(--glm-white);

  background:
    var(--glm-navy-950);

  border-radius:
    var(--glm-radius-md);

  font-size:
    0.82rem;

  font-weight:
    800;

  transition:
    background
    350ms
    ease,

    transform
    400ms
    var(--glm-ease-expo),

    box-shadow
    400ms
    var(--glm-ease-expo);
}


.glm-areas__show-all:hover {
  background:
    var(--glm-green-900);

  transform:
    translateY(-2px);

  box-shadow:
    var(--glm-shadow-sm);
}


.glm-areas__show-all-icon {
  display: grid;
  place-items: center;
}


.glm-areas__show-all-icon svg {
  width: 18px;
  height: 18px;

  fill:
    currentColor;
}


/* =========================================================
   MAP SHELL
========================================================= */

.glm-areas__map-shell {
  position: relative;

  min-width: 0;

  min-height:
    660px;

  background:
    #E9ECE5;
}


.glm-areas__map {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  background:
    #E9ECE5;
}


/* =========================================================
   LEAFLET
========================================================= */

.glm-areas
.leaflet-container {
  font-family:
    var(--glm-font-body);

  background:
    #E9ECE5;
}


.glm-areas
.leaflet-control-zoom {
  overflow: hidden;

  margin:
    18px 18px 0 0 !important;

  border:
    1px solid
    rgba(6, 24, 47, 0.09) !important;

  border-radius:
    13px !important;

  box-shadow:
    0 8px 24px
    rgba(6, 24, 47, 0.10) !important;
}


.glm-areas
.leaflet-control-zoom a {
  width:
    42px;

  height:
    42px;

  line-height:
    42px;

  color:
    var(--glm-navy-950);

  background:
    rgba(255,255,255,0.94);

  border-bottom:
    1px solid
    rgba(6,24,47,0.07);
}


.glm-areas
.leaflet-control-zoom a:hover {
  color:
    var(--glm-green-800);

  background:
    var(--glm-green-050);
}


.glm-areas
.leaflet-control-attribution {
  padding:
    4px 7px;

  color:
    var(--glm-text-muted);

  background:
    rgba(255,255,255,0.84);

  font-size:
    0.62rem;
}


/* =========================================================
   CUSTOM MARKER
========================================================= */

.glm-map-marker-wrapper {
  background:
    transparent;

  border:
    0;
}


.glm-map-marker {
  position: relative;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  color:
    var(--glm-white);

  background:
    var(--glm-green-800);

  border:
    4px solid
    var(--glm-white);

  border-radius:
    50% 50% 50% 8px;

  box-shadow:
    0 7px 18px
    rgba(6, 24, 47, 0.22);

  transform:
    rotate(-45deg);

  transition:
    background
    300ms
    ease,

    box-shadow
    300ms
    ease;
}


.glm-map-marker::after {
  content: "";

  width: 8px;
  height: 8px;

  background:
    var(--glm-white);

  border-radius:
    50%;

  transform:
    rotate(45deg);
}


.glm-map-marker-wrapper.is-active
.glm-map-marker {
  background:
    var(--glm-orange-500);

  box-shadow:
    0 9px 24px
    rgba(243, 106, 22, 0.28);
}


/* =========================================================
   POPUP
========================================================= */

.glm-areas
.leaflet-popup-content-wrapper {
  overflow: hidden;

  padding:
    0;

  color:
    var(--glm-text);

  background:
    rgba(255, 255, 255, 0.98);

  border-radius:
    16px;

  box-shadow:
    0 20px 50px
    rgba(6, 24, 47, 0.16);
}


.glm-areas
.leaflet-popup-content {
  min-width:
    190px;

  margin:
    0;
}


.glm-map-popup {
  padding:
    1rem 1.05rem;
}


.glm-map-popup__county {
  display:
    block;

  margin-bottom:
    0.35rem;

  color:
    var(--glm-green-700);

  font-size:
    0.63rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.glm-map-popup strong {
  display:
    block;

  color:
    var(--glm-navy-950);

  font-family:
    var(--glm-font-display);

  font-size:
    1.35rem;

  font-weight:
    400;

  line-height:
    1.1;
}


.glm-map-popup p {
  margin:
    0.5rem 0 0;

  color:
    var(--glm-text-muted);

  font-size:
    0.78rem;

  line-height:
    1.45;
}


.glm-areas
.leaflet-popup-tip {
  background:
    var(--glm-white);
}


/* =========================================================
   MAP CARD
========================================================= */

.glm-areas__map-card {
  position: absolute;

  left: 1.25rem;
  top: 1.25rem;

  z-index: 500;

  display: flex;
  align-items: center;

  gap:
    0.75rem;

  padding:
    0.8rem 0.95rem;

  color:
    var(--glm-navy-950);

  background:
    rgba(255,255,255,0.91);

  border:
    1px solid
    rgba(255,255,255,0.78);

  border-radius:
    var(--glm-radius-md);

  box-shadow:
    0 12px 32px
    rgba(6, 24, 47, 0.10);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  pointer-events:
    none;
}


.glm-areas__map-card-icon {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  flex:
    0 0 39px;

  color:
    var(--glm-green-800);

  background:
    var(--glm-green-100);

  border-radius:
    50%;
}


.glm-areas__map-card-icon svg {
  width: 20px;
  height: 20px;

  fill:
    currentColor;
}


.glm-areas__map-card
> span:last-child {
  display: flex;
  flex-direction: column;

  color:
    var(--glm-text-muted);

  font-size:
    0.67rem;

  line-height:
    1.25;
}


.glm-areas__map-card strong {
  margin-top:
    0.1rem;

  color:
    var(--glm-navy-950);

  font-size:
    0.85rem;
}


/* =========================================================
   LEGEND
========================================================= */

.glm-areas__legend {
  position: absolute;

  left: 1.25rem;
  bottom: 1.25rem;

  z-index: 500;

  padding:
    0.65rem 0.85rem;

  color:
    var(--glm-text);

  background:
    rgba(255,255,255,0.90);

  border:
    1px solid
    rgba(6, 24, 47, 0.07);

  border-radius:
    10px;

  box-shadow:
    var(--glm-shadow-xs);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  font-size:
    0.7rem;

  font-weight:
    700;

  pointer-events:
    none;
}


.glm-areas__legend span {
  display:
    flex;

  align-items:
    center;

  gap:
    0.5rem;
}


.glm-areas__legend-dot {
  width: 8px;
  height: 8px;

  border-radius:
    50%;

  background:
    var(--glm-green-700);

  box-shadow:
    0 0 0 4px
    rgba(85, 157, 72, 0.12);
}


/* =========================================================
   BOTTOM
========================================================= */

.glm-areas__bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    2rem;

  margin-top:
    clamp(2rem, 4vw, 3.5rem);

  padding-top:
    clamp(1.5rem, 2vw, 2rem);

  border-top:
    1px solid
    rgba(6, 24, 47, 0.08);
}


.glm-areas__bottom-copy {
  display: flex;
  align-items: center;

  gap:
    1rem;
}


.glm-areas__bottom-eyebrow {
  flex-shrink:
    0;

  color:
    var(--glm-green-800);

  font-size:
    0.73rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.glm-areas__bottom-copy p {
  margin:
    0;

  max-width:
    560px;

  padding-left:
    1rem;

  border-left:
    1px solid
    rgba(6, 24, 47, 0.10);

  font-size:
    0.94rem;
}


/* call */

.glm-areas__call {
  display: flex;
  align-items: center;

  gap:
    0.7rem;

  min-height:
    52px;

  padding:
    0.7rem 1.1rem;

  flex-shrink:
    0;

  color:
    var(--glm-navy-950);

  background:
    var(--glm-green-100);

  border:
    1px solid
    rgba(52, 123, 55, 0.12);

  border-radius:
    var(--glm-radius-md);

  transition:
    transform
    400ms
    var(--glm-ease-expo),

    background
    300ms
    ease;
}


.glm-areas__call:hover {
  transform:
    translateY(-2px);

  background:
    var(--glm-green-200);
}


.glm-areas__call-icon {
  display: grid;
  place-items: center;
}


.glm-areas__call-icon svg {
  width: 20px;
  height: 20px;

  fill:
    var(--glm-green-800);
}


.glm-areas__call
> span:last-child {
  display: flex;
  flex-direction: column;

  color:
    var(--glm-text-muted);

  font-size:
    0.64rem;

  line-height:
    1.25;

  text-transform:
    uppercase;
}


.glm-areas__call strong {
  color:
    var(--glm-navy-950);

  font-size:
    0.88rem;

  text-transform:
    none;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-areas__layout {
    min-height:
      660px;
  }


  .glm-areas__map-shell {
    min-height:
      660px;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-areas__header {
    grid-template-columns:
      1fr
      minmax(260px, 0.58fr);

    gap:
      3rem;
  }


  .glm-areas__layout {
    grid-template-columns:
      290px
      minmax(0, 1fr);

    min-height:
      610px;
  }


  .glm-areas__sidebar {
    padding:
      1.4rem;
  }


  .glm-areas__map-shell {
    min-height:
      610px;
  }


  .glm-area-button {
    min-height:
      45px;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-areas__header {
    grid-template-columns:
      1fr;

    gap:
      1.5rem;

    margin-bottom:
      2.5rem;
  }


  .glm-areas__layout {
    display:
      flex;

    flex-direction:
      column;

    min-height:
      0;

    overflow:
      visible;

    border-radius:
      22px;
  }


  .glm-areas__sidebar {
    order:
      2;

    border-right:
      0;

    border-top:
      1px solid
      rgba(6, 24, 47, 0.08);

    border-radius:
      0 0 22px 22px;
  }


  .glm-areas__map-shell {
    order:
      1;

    min-height:
      470px;

    border-radius:
      22px 22px 0 0;

    overflow:
      hidden;
  }


  .glm-areas__county {
    padding:
      1.2rem 0;
  }


  .glm-areas__list {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      0.45rem;
  }


  .glm-areas__show-all {
    margin-top:
      1.2rem;
  }


  .glm-areas__bottom {
    align-items:
      flex-end;
  }


  .glm-areas__bottom-copy {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      0.5rem;
  }


  .glm-areas__bottom-copy p {
    padding-left:
      0;

    border-left:
      0;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-areas__header {
    grid-template-columns:
      1fr;

    gap:
      1.25rem;

    margin-bottom:
      2rem;
  }


  .glm-areas__title {
    font-size:
      clamp(
        2.2rem,
        12vw,
        3.1rem
      );
  }


  .glm-areas__layout {
    display:
      flex;

    flex-direction:
      column;

    min-height:
      0;

    overflow:
      visible;

    border-radius:
      18px;
  }


  .glm-areas__map-shell {
    order:
      1;

    min-height:
      390px;

    overflow:
      hidden;

    border-radius:
      18px 18px 0 0;
  }


  .glm-areas__sidebar {
    order:
      2;

    padding:
      1.15rem;

    border-right:
      0;

    border-top:
      1px solid
      rgba(6,24,47,0.08);

    border-radius:
      0 0 18px 18px;
  }


  .glm-areas__list {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      0.25rem;
  }


  .glm-area-button {
    min-height:
      46px;

    font-size:
      0.86rem;
  }


  .glm-areas__show-all {
    margin-top:
      1rem;
  }


  .glm-areas__map-card {
    left:
      0.8rem;

    top:
      0.8rem;

    padding:
      0.65rem 0.75rem;
  }


  .glm-areas__map-card-icon {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }


  .glm-areas__legend {
    left:
      0.8rem;

    bottom:
      0.8rem;
  }


  .glm-areas
  .leaflet-control-zoom {
    margin:
      12px 12px 0 0 !important;
  }


  .glm-areas__bottom {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      1rem;

    margin-top:
      2rem;
  }


  .glm-areas__bottom-copy {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      0.45rem;
  }


  .glm-areas__bottom-copy p {
    padding-left:
      0;

    border-left:
      0;

    font-size:
      0.9rem;
  }


  .glm-areas__call {
    width:
      100%;

    justify-content:
      center;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .glm-area-button,
  .glm-area-button__arrow,
  .glm-areas__show-all,
  .glm-areas__call,
  .glm-areas__estimate-link::after,
  .glm-areas__estimate-arrow,
  .glm-map-marker {
    transition:
      none !important;
  }

}

































































/* =========================================================
   09. FOOTER
   GARCIA'S LAWN MOWER
========================================================= */

.glm-footer {
  position: relative;

  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.78);

  background:
    linear-gradient(
      145deg,
      var(--glm-navy-950) 0%,
      #08263A 58%,
      #0B352E 100%
    );

  isolation: isolate;
}


/* =========================================================
   AMBIENT
========================================================= */

.glm-footer__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-footer__orbit {
  position: absolute;

  border:
    1px solid
    rgba(145, 203, 113, 0.08);

  border-radius: 50%;
}


.glm-footer__orbit--one {
  width: 780px;
  height: 360px;

  right: -250px;
  top: 90px;

  transform:
    rotate(-14deg);
}


.glm-footer__orbit--two {
  width: 620px;
  height: 270px;

  right: -160px;
  top: 145px;

  transform:
    rotate(-14deg);
}


.glm-footer__grass {
  position: absolute;

  width: 260px;
  height: 170px;

  border-radius:
    100% 0 100% 0;

  background:
    rgba(145, 203, 113, 0.055);
}


.glm-footer__grass--one {
  left: -80px;
  bottom: 8%;

  transform:
    rotate(-22deg);
}


.glm-footer__grass--two {
  left: 50px;
  bottom: 3%;

  opacity: 0.5;

  transform:
    rotate(15deg)
    scale(0.72);
}


/* =========================================================
   TOP CTA
========================================================= */

.glm-footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 3rem;

  padding:
    clamp(3.5rem, 6vw, 5.5rem)
    0
    clamp(3rem, 5vw, 4.5rem);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.glm-footer__eyebrow {
  display: inline-block;

  margin-bottom:
    0.8rem;

  color:
    var(--glm-green-400);

  font-size:
    0.75rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.glm-footer__cta-copy h2 {
  max-width:
    760px;

  margin: 0;

  color:
    var(--glm-white);

  font-size:
    clamp(
      2.5rem,
      4.2vw,
      5rem
    );

  line-height:
    0.98;
}


.glm-footer__cta-copy h2 span {
  color:
    var(--glm-green-400);
}


/* =========================================================
   CTA ACTIONS
========================================================= */

.glm-footer__cta-actions {
  display: flex;
  align-items: center;

  gap:
    0.8rem;

  flex-shrink: 0;
}


.glm-footer__estimate,
.glm-footer__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap:
    0.7rem;

  min-height:
    54px;

  padding:
    0.8rem 1.25rem;

  border-radius:
    var(--glm-radius-md);

  font-size:
    0.88rem;

  font-weight:
    800;

  transition:
    transform
    400ms
    var(--glm-ease-expo),

    background
    350ms
    ease,

    box-shadow
    400ms
    var(--glm-ease-expo);
}


.glm-footer__estimate {
  color:
    var(--glm-white);

  background:
    var(--glm-orange-500);

  box-shadow:
    0 14px 34px
    rgba(243, 106, 22, 0.18);
}


.glm-footer__estimate:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 40px
    rgba(243, 106, 22, 0.25);
}


.glm-footer__call {
  color:
    var(--glm-white);

  background:
    rgba(255, 255, 255, 0.07);

  border:
    1px solid
    rgba(255, 255, 255, 0.14);
}


.glm-footer__call:hover {
  transform:
    translateY(-3px);

  background:
    rgba(255, 255, 255, 0.11);
}


.glm-footer__call-icon {
  display: grid;
  place-items: center;
}


.glm-footer__call-icon svg {
  width: 19px;
  height: 19px;

  fill:
    var(--glm-green-400);
}


/* =========================================================
   MAIN GRID
========================================================= */

.glm-footer__main {
  display: grid;

  grid-template-columns:
    minmax(260px, 1.35fr)
    minmax(160px, 0.72fr)
    minmax(245px, 0.95fr)
    minmax(180px, 0.72fr);

  gap:
    clamp(2.5rem, 5vw, 5rem);

  padding:
    clamp(3.5rem, 6vw, 5.5rem)
    0;
}


/* =========================================================
   BRAND
========================================================= */

.glm-footer__brand {
  max-width:
    390px;
}


.glm-footer__logo-link {
  display: inline-flex;

  margin-bottom:
    1.4rem;
}


.glm-footer__logo {
  width:
    clamp(120px, 10vw, 155px);

  filter:
    drop-shadow(
      0 10px 24px
      rgba(0, 0, 0, 0.16)
    );
}


.glm-footer__description {
  max-width:
    380px;

  margin:
    0 0 1.8rem;

  color:
    rgba(255, 255, 255, 0.62);

  font-size:
    0.96rem;

  line-height:
    1.7;
}


/* =========================================================
   CONTACT
========================================================= */

.glm-footer__contact {
  display: flex;
  flex-direction: column;

  gap:
    0.9rem;
}


.glm-footer__contact a {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap:
    0.18rem;
}


.glm-footer__contact-label {
  color:
    var(--glm-green-400);

  font-size:
    0.65rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.glm-footer__contact strong {
  color:
    rgba(255, 255, 255, 0.88);

  font-size:
    0.9rem;

  font-weight:
    650;

  transition:
    color 300ms ease;
}


.glm-footer__contact a:hover strong {
  color:
    var(--glm-white);
}


/* =========================================================
   COLUMNS
========================================================= */

.glm-footer__column {
  min-width: 0;
}


.glm-footer__column-title {
  display: block;

  margin-bottom:
    1.35rem;

  color:
    var(--glm-white);

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.glm-footer__links {
  display: flex;
  flex-direction: column;

  gap:
    0.15rem;
}


.glm-footer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    1rem;

  min-height:
    39px;

  color:
    rgba(255, 255, 255, 0.64);

  font-size:
    0.89rem;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.055);

  transition:
    color
    300ms
    ease,

    padding
    400ms
    var(--glm-ease-expo);
}


.glm-footer__links a
span:last-child {
  color:
    var(--glm-green-400);

  opacity:
    0;

  transform:
    translateX(-5px);

  transition:
    opacity
    300ms
    ease,

    transform
    400ms
    var(--glm-ease-expo);
}


.glm-footer__links a:hover {
  color:
    var(--glm-white);

  padding-left:
    4px;
}


.glm-footer__links a:hover
span:last-child {
  opacity:
    1;

  transform:
    translateX(0);
}


/* =========================================================
   HOURS
========================================================= */

.glm-footer__hours {
  display: flex;
  flex-direction: column;
}


.glm-footer__hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    1rem;

  min-height:
    39px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.055);
}


.glm-footer__hours-row span {
  color:
    rgba(255, 255, 255, 0.56);

  font-size:
    0.82rem;
}


.glm-footer__hours-row strong {
  color:
    rgba(255, 255, 255, 0.84);

  font-size:
    0.78rem;

  font-weight:
    650;

  white-space:
    nowrap;
}


/* =========================================================
   SERVICE AREAS
========================================================= */

.glm-footer__areas {
  display: flex;
  flex-wrap: wrap;

  gap:
    0.5rem;
}


.glm-footer__areas span {
  display: inline-flex;

  align-items: center;

  min-height:
    32px;

  padding:
    0.45rem 0.7rem;

  color:
    rgba(255, 255, 255, 0.70);

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    var(--glm-radius-pill);

  font-size:
    0.73rem;
}


.glm-footer__areas-link {
  display: inline-flex;
  align-items: center;

  gap:
    0.5rem;

  margin-top:
    1.25rem;

  color:
    var(--glm-green-400);

  font-size:
    0.78rem;

  font-weight:
    800;
}


.glm-footer__areas-link span {
  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


.glm-footer__areas-link:hover span {
  transform:
    translateX(4px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.glm-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    2rem;

  min-height:
    82px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.glm-footer__copyright {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.46);

  font-size:
    0.76rem;
}


/* =========================================================
   POWERED BY
========================================================= */

.glm-footer__powered {
  display: inline-flex;
  align-items: center;

  gap:
    0.38rem;

  color:
    rgba(255, 255, 255, 0.48);

  font-size:
    0.75rem;

  transition:
    color
    300ms
    ease;
}


.glm-footer__powered strong {
  color:
    rgba(255, 255, 255, 0.80);

  font-weight:
    700;

  transition:
    color
    300ms
    ease;
}


.glm-footer__powered-arrow {
  color:
    var(--glm-green-400);

  transition:
    transform
    350ms
    var(--glm-ease-expo);
}


.glm-footer__powered:hover {
  color:
    rgba(255, 255, 255, 0.74);
}


.glm-footer__powered:hover strong {
  color:
    var(--glm-white);
}


.glm-footer__powered:hover
.glm-footer__powered-arrow {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-footer__main {
    align-items:
      start;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .glm-footer__cta {
    align-items:
      flex-end;
  }


  .glm-footer__cta-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .glm-footer__estimate,
  .glm-footer__call {
    width:
      100%;
  }


  .glm-footer__main {
    grid-template-columns:
      1.25fr 0.75fr;

    gap:
      3rem 4rem;
  }


  .glm-footer__brand {
    max-width:
      440px;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .glm-footer__cta {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      2rem;
  }


  .glm-footer__cta-actions {
    width:
      100%;
  }


  .glm-footer__main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      2.8rem 2rem;
  }


  .glm-footer__brand {
    grid-column:
      1 / -1;

    max-width:
      520px;
  }


  .glm-footer__bottom {
    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      0.6rem;

    padding:
      1.3rem 0;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-footer__cta {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      1.6rem;

    padding-top:
      3rem;

    padding-bottom:
      2.7rem;
  }


  .glm-footer__cta-copy h2 {
    font-size:
      clamp(
        2.25rem,
        12vw,
        3.1rem
      );
  }


  .glm-footer__cta-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .glm-footer__estimate,
  .glm-footer__call {
    width:
      100%;
  }


  .glm-footer__main {
    grid-template-columns:
      1fr;

    gap:
      2.7rem;

    padding:
      3rem 0;
  }


  .glm-footer__logo {
    width:
      130px;
  }


  .glm-footer__description {
    font-size:
      0.92rem;
  }


  .glm-footer__hours-row {
    min-height:
      42px;
  }


  .glm-footer__hours-row span {
    font-size:
      0.79rem;
  }


  .glm-footer__hours-row strong {
    font-size:
      0.75rem;
  }


  .glm-footer__bottom {
    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      0.65rem;

    min-height:
      0;

    padding:
      1.35rem 0;
  }


  .glm-footer__powered {
    flex-wrap:
      wrap;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .glm-footer__estimate,
  .glm-footer__call,
  .glm-footer__links a,
  .glm-footer__links a span,
  .glm-footer__areas-link span,
  .glm-footer__powered-arrow {
    transition:
      none !important;

    transform:
      none !important;
  }

}