/* ============================================================
   GARCIA'S LANDSCAPING & HARDSCAPING LLC
   Global Design System 2026
   Cinematic Forest + Warm Stone

   Identidad:
   - Verde bosque profundo
   - Naranja cálido
   - Marfil mineral
   - Tipografía editorial
   - Diseño arquitectónico
   ============================================================ */


/* ============================================================
   01. VARIABLES GLOBALES
   ============================================================ */

:root {

  /* COLORES PRINCIPALES */

  --garcia-forest: #173F2D;
  --garcia-green: #216B42;
  --garcia-leaf: #2DBA59;

  --garcia-clay: #C76331;
  --garcia-orange: #F26A21;
  --garcia-orange-deep: #BC4712;


  /* FONDOS Y SUPERFICIES */

  --garcia-ivory: #F6F3EB;
  --garcia-limestone: #DDD2C0;

  --garcia-white: #FFFFFF;

  --garcia-surface: #FFFEFA;
  --garcia-surface-soft: #EEE9DE;

  --garcia-dark: #171E19;
  --garcia-night: #101B15;


  /* TEXTOS */

  --garcia-text: #171E19;
  --garcia-muted: #5B675E;
  --garcia-border: #D9D9CE;
  --garcia-on-dark: #F8F7F1;


  /* TIPOGRAFÍA */

  --garcia-font-body: 'Manrope', Arial, sans-serif;

  --garcia-font-display:
    'DM Serif Display', Georgia, serif;

  --garcia-body-size: 17px;
  --garcia-line-height: 1.7;


  /* ESTRUCTURA */

  --garcia-container-max: 1320px;

  --garcia-container-gutter:
    clamp(20px, 5vw, 84px);

  --garcia-section-space:
    clamp(78px, 8vw, 132px);

  --garcia-header-height: 96px;


  /* BORDES */

  --garcia-radius-sm: 8px;
  --garcia-radius-md: 12px;
  --garcia-radius-lg: 16px;


  /* SOMBRAS */

  --garcia-shadow-soft:
    0 12px 34px rgba(16, 27, 21, .07);

  --garcia-shadow-card:
    0 24px 62px rgba(16, 27, 21, .12);

  --garcia-shadow-lift:
    0 26px 66px rgba(16, 27, 21, .17);


  /* ANIMACIONES */

  --garcia-ease-out:
    cubic-bezier(.22, 1, .36, 1);

  --garcia-ease-in-out:
    cubic-bezier(.76, 0, .24, 1);

  --garcia-motion-fast: 220ms;
  --garcia-motion-medium: 460ms;
  --garcia-motion-slow: 900ms;

  --garcia-page-duration: 560ms;


  /* Z-INDEX GLOBAL */

  --garcia-z-content: 1;
  --garcia-z-header: 100;
  --garcia-z-menu: 800;
  --garcia-z-lightbox: 5000;
  --garcia-z-transition: 10000;

}


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

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

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}


/* ============================================================
   03. BODY
   ============================================================ */

body {

  color: var(--garcia-text);

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

  font-size: var(--garcia-body-size);

  font-weight: 400;

  line-height: var(--garcia-line-height);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

  overflow-x: clip;

  isolation: isolate;


  /* Fondo orgánico mineral */

  background:
    radial-gradient(
      ellipse 58% 55% at 0% 5%,
      rgba(221, 210, 192, .29),
      transparent 76%
    ),

    radial-gradient(
      ellipse 45% 60% at 100% 95%,
      rgba(33, 107, 66, .045),
      transparent 75%
    ),

    var(--garcia-ivory);

}


/* ============================================================
   04. TEXTURA MINERAL
   ============================================================ */

body::before {

  content: '';

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .065;

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

  background-repeat: repeat;

}


/* ============================================================
   05. ELEMENTOS BASE
   ============================================================ */

body > main,
body > footer {
  position: relative;
  z-index: var(--garcia-z-content);
}

main {
  display: block;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

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

address {
  font-style: normal;
}

figure,
blockquote {
  margin: 0;
}


/* ============================================================
   06. TIPOGRAFÍA
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

  margin: 0;

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

  font-weight: 400;

  line-height: 1.09;

  letter-spacing: -.025em;

  text-wrap: balance;

}

h1 {
  font-size: clamp(3rem, 5.8vw, 6.2rem);
}

h2 {
  font-size: clamp(2.4rem, 4vw, 4.55rem);
}

h3 {
  font-size: clamp(1.7rem, 2.3vw, 2.45rem);
}

p {
  margin: 0;
  max-width: 72ch;
}

p + p {
  margin-top: 1em;
}


/* SELECCIÓN DE TEXTO */

::selection {
  background: var(--garcia-green);
  color: var(--garcia-white);
}


/* FOCUS ACCESIBLE */

:focus-visible {
  outline: 3px solid var(--garcia-orange);
  outline-offset: 4px;
}


/* OFFSET PARA NAVEGACIÓN POR ANCLAS */

[id] {
  scroll-margin-top:
    calc(var(--garcia-header-height) + 20px);
}


/* ============================================================
   07. CONTENEDORES
   ============================================================ */

.garcia-container {

  width: min(
    calc(100% - 2 * var(--garcia-container-gutter)),
    var(--garcia-container-max)
  );

  margin-inline: auto;

}

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

.garcia-section--light {
  color: var(--garcia-text);
  background: transparent;
}

.garcia-section--white {
  color: var(--garcia-text);
  background: var(--garcia-surface);
}

.garcia-section--dark {
  color: var(--garcia-on-dark);
  background: var(--garcia-night);
}

.garcia-section--forest {
  color: var(--garcia-on-dark);
  background: var(--garcia-forest);
}


/* ============================================================
   08. SUPERFICIES Y TARJETAS
   ============================================================ */

.garcia-surface {

  background: var(--garcia-surface);

  border: 1px solid var(--garcia-border);

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

  box-shadow: var(--garcia-shadow-soft);

}


/* ============================================================
   09. ETIQUETAS Y ACENTOS
   ============================================================ */

.garcia-overline {

  display: inline-flex;

  align-items: center;

  gap: 13px;

  color: var(--garcia-green);

  font-size: .8rem;

  font-weight: 800;

  letter-spacing: .14em;

  line-height: 1.4;

  text-transform: uppercase;

}

.garcia-overline::before {

  content: '';

  display: block;

  width: 38px;

  height: 2px;

  flex: none;

  background: var(--garcia-clay);

}

.garcia-section--dark .garcia-overline,
.garcia-section--forest .garcia-overline {
  color: var(--garcia-on-dark);
}

.garcia-accent {
  color: var(--garcia-clay);
}

.garcia-section--dark .garcia-accent {
  color: var(--garcia-orange);
}

.garcia-muted {
  color: var(--garcia-muted);
}

.garcia-section--dark .garcia-muted {
  color: rgba(248, 247, 241, .8);
}


/* ============================================================
   10. BOTONES GLOBALES
   ============================================================ */

.garcia-btn {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: 14px;

  min-height: 54px;

  padding: 13px 24px;

  border: 1px solid transparent;

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

  font-size: .94rem;

  font-weight: 800;

  line-height: 1.4;

  text-align: center;

  white-space: normal;

  transition:
    background-color var(--garcia-motion-fast) ease,
    color var(--garcia-motion-fast) ease,
    border-color var(--garcia-motion-fast) ease,
    box-shadow var(--garcia-motion-medium)
      var(--garcia-ease-out),
    transform var(--garcia-motion-medium)
      var(--garcia-ease-out);

}

.garcia-btn svg,
.garcia-btn .garcia-btn__arrow {

  flex: none;

  transition:
    transform var(--garcia-motion-medium)
    var(--garcia-ease-out);

}

.garcia-btn:hover svg:last-child,
.garcia-btn:hover .garcia-btn__arrow {
  transform: translateX(5px);
}


/* BOTÓN PRIMARIO */

.garcia-btn--primary {

  background: var(--garcia-orange-deep);

  color: #fff;

  box-shadow:
    0 12px 28px rgba(188, 71, 18, .2);

}

.garcia-btn--primary:hover {

  background: #A93F10;

  transform: translateY(-3px);

  box-shadow:
    0 16px 34px rgba(188, 71, 18, .28);

}


/* BOTÓN SECUNDARIO */

.garcia-btn--outline {

  color: var(--garcia-forest);

  border-color: var(--garcia-forest);

  background: transparent;

}

.garcia-btn--outline:hover {

  color: #fff;

  background: var(--garcia-forest);

  transform: translateY(-3px);

}


/* BOTÓN SECUNDARIO EN FONDO OSCURO */

.garcia-section--dark .garcia-btn--outline {

  color: #fff;

  border-color: rgba(255, 255, 255, .6);

  background: rgba(10, 20, 13, .18);

}

.garcia-section--dark .garcia-btn--outline:hover {
  background: rgba(255, 255, 255, .15);
}


/* TARJETAS INTERACTIVAS */

.garcia-interactive-card {

  transition:
    transform .65s var(--garcia-ease-out),
    box-shadow .65s var(--garcia-ease-out);

}

.garcia-interactive-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--garcia-shadow-lift);

}


/* ============================================================
   11. ANIMACIONES REVEAL
   ============================================================ */

/* FADE REVEAL */

.garcia-js
[data-garcia-reveal="fade"]:not(.is-visible) {

  opacity: 0;

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

  filter: blur(5px);

}

[data-garcia-reveal="fade"] {

  transition:
    opacity .9s var(--garcia-ease-out),
    transform .9s var(--garcia-ease-out),
    filter .9s ease;

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

}


/* IMAGE REVEAL */

.garcia-js
[data-garcia-reveal="image"]:not(.is-visible) {

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

}

[data-garcia-reveal="image"] {

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

  transition:
    clip-path 1.15s var(--garcia-ease-in-out);

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

}


/* TEXT LINE REVEAL */

.garcia-js
[data-garcia-reveal="line"]:not(.is-visible)
> .garcia-line-inner {

  transform: translateY(110%);

}

[data-garcia-reveal="line"] {
  overflow: hidden;
}

[data-garcia-reveal="line"]
> .garcia-line-inner {

  display: block;

  transition:
    transform 1s var(--garcia-ease-out);

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

}


/* ============================================================
   12. ANIMACIÓN DE ENTRADA DE PÁGINA
   ============================================================ */

.garcia-page-enter {

  animation:
    garcia-page-arrive .62s
    var(--garcia-ease-out) both;

}

@keyframes garcia-page-arrive {

  from {
    opacity: .65;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ============================================================
   13. TRANSICIÓN ENTRE PÁGINAS
   ============================================================ */

.garcia-page-transition {

  position: fixed;

  inset: 0;

  z-index: var(--garcia-z-transition);

  pointer-events: none;

  background: var(--garcia-night);

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

  transition:
    transform var(--garcia-page-duration)
    var(--garcia-ease-in-out);

  visibility: hidden;

}

.garcia-page-transition.is-covering {

  visibility: visible;

  transform: translate3d(0, 0, 0);

}

.garcia-page-transition.is-resetting {

  transition: none !important;

  visibility: hidden !important;

}


/* ACENTO SUPERIOR */

.garcia-page-transition__accent {

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--garcia-forest),
      var(--garcia-orange),
      var(--garcia-leaf)
    );

}


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

.garcia-skip-link {

  position: fixed;

  top: 12px;

  left: 12px;

  z-index: calc(var(--garcia-z-transition) + 1);

  padding: 12px 17px;

  background: var(--garcia-forest);

  color: #fff;

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

  transform: translateY(-160%);

}

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


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

html {

  scrollbar-color:
    var(--garcia-green) #EAE5D9;

  scrollbar-width: thin;

}

::-webkit-scrollbar {

  width: 11px;

  height: 11px;

}

::-webkit-scrollbar-track {
  background: #EAE5D9;
}

::-webkit-scrollbar-thumb {

  background: var(--garcia-green);

  border: 2px solid #EAE5D9;

  border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {
  background: var(--garcia-forest);
}


/* ============================================================
   16. ACCESIBILIDAD
   ============================================================ */

/*
  prefers-reduced-motion se detecta desde JS.
  Así mantenemos exactamente cuatro media queries CSS.
*/

.garcia-reduced-motion *,
.garcia-reduced-motion *::before,
.garcia-reduced-motion *::after {

  animation-duration: .01ms !important;

  animation-iteration-count: 1 !important;

  transition-duration: .01ms !important;

  scroll-behavior: auto !important;

}

.garcia-reduced-motion
[data-garcia-reveal="fade"],

.garcia-reduced-motion
[data-garcia-reveal="image"],

.garcia-reduced-motion
[data-garcia-reveal="line"] > .garcia-line-inner {

  opacity: 1 !important;

  filter: none !important;

  transform: none !important;

  clip-path: none !important;

}


/* ============================================================
   17. RESPONSIVE
   EXACTAMENTE CUATRO MEDIA QUERIES
   ============================================================ */


/* COMPUTADORA >= 1200px */

@media (min-width: 1200px) {

  :root {

    --garcia-body-size: 18px;

    --garcia-header-height: 96px;

    --garcia-section-space: 120px;

  }

}


/* TABLET 768px - 1199px */

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

  :root {

    --garcia-body-size: 17px;

    --garcia-header-height: 82px;

    --garcia-container-gutter: 38px;

    --garcia-section-space: 94px;

  }

  h1 {
    font-size: clamp(3.3rem, 6.4vw, 5.1rem);
  }

  h2 {
    font-size: clamp(2.6rem, 4.8vw, 3.65rem);
  }

}


/* CELULAR 481px - 767px */

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

  :root {

    --garcia-body-size: 16.5px;

    --garcia-header-height: 72px;

    --garcia-container-gutter: 24px;

    --garcia-section-space: 78px;

  }

  h1 {
    font-size: clamp(2.9rem, 8.6vw, 4.3rem);
  }

  h2 {
    font-size: clamp(2.4rem, 7.1vw, 3.3rem);
  }

  .garcia-btn {

    min-height: 52px;

    padding-inline: 20px;

  }

}


/* CELULARES PEQUEÑOS <= 480px */

@media (max-width: 480px) {

  :root {

    --garcia-body-size: 16px;

    --garcia-header-height: 68px;

    --garcia-container-gutter: 19px;

    --garcia-section-space: 66px;

  }

  h1 {
    font-size: clamp(2.55rem, 10.3vw, 3.4rem);
  }

  h2 {
    font-size: clamp(2.1rem, 8.5vw, 2.8rem);
  }

  h3 {
    font-size: 1.6rem;
  }

  .garcia-overline {

    font-size: .77rem;

    letter-spacing: .09em;

    gap: 9px;

  }

  .garcia-overline::before {
    width: 24px;
  }

  .garcia-btn {

    min-height: 50px;

    padding: 12px 17px;

    font-size: .91rem;

  }

  ::-webkit-scrollbar {
    width: 7px;
  }

}





















































/* ============================================================
   02. HEADER / NAVIGATION
   Garcia's Landscaping & Hardscaping LLC

   Cinematic Header
   Fixed Shell + Reserved Slot + Independent Mobile Menu
   ============================================================ */


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

.garcia-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: var(--garcia-header-height);

  z-index: calc(var(--garcia-z-menu) + 1);

  color: var(--garcia-white);

  background: rgba(8, 19, 13, .79);

  border-bottom: 1px solid rgba(255, 255, 255, .13);

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

  transition:
    background-color .42s ease,
    border-color .42s ease,
    box-shadow .42s ease;

  isolation: isolate;
}


/* SCROLLED STATE */

.garcia-header.is-scrolled {
  background: rgba(9, 23, 15, .96);

  border-bottom-color:
    rgba(255, 255, 255, .09);

  box-shadow:
    0 12px 34px rgba(0, 0, 0, .17);
}


/* MENU OPEN STATE */

.garcia-header.is-menu-open {
  background: var(--garcia-night);
  border-bottom-color: rgba(255, 255, 255, .1);
}


/* RESERVED HEADER HEIGHT */

.garcia-header-slot {
  position: relative;

  display: block;

  width: 100%;
  height: var(--garcia-header-height);

  flex: none;

  pointer-events: none;
}


/* INNER LAYOUT */

.garcia-header__inner {
  width: min(
    calc(100% - 2 * var(--garcia-container-gutter)),
    1440px
  );

  height: 100%;
  margin-inline: auto;

  display: grid;

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

  align-items: center;

  column-gap: clamp(20px, 2.5vw, 42px);
}


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

.garcia-header__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: clamp(185px, 18vw, 245px);

  height: 100%;
  min-width: 0;

  flex: none;
}

.garcia-header__brand img {
  width: 100%;
  height: auto;

  max-height:
    calc(var(--garcia-header-height) - 14px);

  object-fit: contain;
  object-position: left center;

  transition:
    transform .5s var(--garcia-ease-out);
}

@media (hover: hover) {
  .garcia-header__brand:hover img {
    transform: scale(1.025);
  }
}


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

.garcia-header__nav {
  display: flex;

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

  gap: clamp(15px, 1.55vw, 28px);

  min-width: 0;
  height: 100%;
}


.garcia-header__nav a {
  position: relative;

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

  height: 100%;

  color: rgba(255, 255, 255, .86);

  font-size: .84rem;
  font-weight: 700;

  letter-spacing: -.012em;
  white-space: nowrap;

  transition:
    color .25s ease;
}


/* NAV INDICATOR */

.garcia-header__nav a::after {
  content: '';

  position: absolute;

  left: 0;
  right: 0;
  bottom: 27%;

  height: 2px;

  background: var(--garcia-orange);

  transform: scaleX(0);
  transform-origin: left center;

  transition:
    transform .42s var(--garcia-ease-out);
}


.garcia-header__nav a:hover,
.garcia-header__nav a[aria-current="page"] {
  color: var(--garcia-white);
}

.garcia-header__nav a:hover::after,
.garcia-header__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}


/* ============================================================
   FREE ESTIMATE BUTTON
   ============================================================ */

.garcia-header__cta {
  position: relative;

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

  gap: 11px;

  min-width: 172px;
  min-height: 52px;

  padding: 13px 18px;

  border: 1px solid rgba(255, 255, 255, .14);

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

  color: var(--garcia-white);

  background: var(--garcia-orange-deep);

  box-shadow:
    0 10px 27px rgba(0, 0, 0, .13),
    inset 0 1px 0 rgba(255, 255, 255, .13);

  font-size: .86rem;
  font-weight: 800;

  white-space: nowrap;
  overflow: hidden;

  transition:
    background-color .3s ease,
    box-shadow .4s ease,
    transform .4s var(--garcia-ease-out);
}


.garcia-header__cta:hover {
  background: #D35517;

  transform: translateY(-2px);

  box-shadow:
    0 15px 31px rgba(0, 0, 0, .2);
}


.garcia-header__cta-icon {
  width: 19px;
  height: 19px;
  flex: none;
}


.garcia-header__cta-arrow {
  width: 16px;
  height: 16px;
  flex: none;

  transition:
    transform .35s var(--garcia-ease-out);
}


.garcia-header__cta:hover
.garcia-header__cta-arrow {
  transform: translateX(4px);
}


/* ============================================================
   MOBILE TOGGLE
   ============================================================ */

.garcia-header__toggle {
  display: none;

  position: relative;

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

  width: 46px;
  height: 46px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--garcia-radius-sm);

  color: #fff;

  background: rgba(255, 255, 255, .065);

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  transition:
    border-color .3s ease,
    background-color .3s ease;
}


.garcia-header__toggle:hover {
  background: rgba(255, 255, 255, .12);

  border-color: rgba(255, 255, 255, .4);
}


.garcia-header__toggle-lines {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 21px;
  height: 20px;

  gap: 5px;
}


.garcia-header__toggle-lines span {
  display: block;

  width: 100%;
  height: 2px;

  border-radius: 2px;
  background: currentColor;

  transform-origin: center;

  transition:
    transform .38s var(--garcia-ease-out),
    opacity .22s ease;
}


/* ANIMATED HAMBURGER TO X */

.garcia-header__toggle[aria-expanded="true"]
.garcia-header__toggle-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.garcia-header__toggle[aria-expanded="true"]
.garcia-header__toggle-lines span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}

.garcia-header__toggle[aria-expanded="true"]
.garcia-header__toggle-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


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

.garcia-mobile-menu {
  position: fixed;
  inset: 0;

  z-index: var(--garcia-z-menu);

  background:
    radial-gradient(
      ellipse at 94% 16%,
      rgba(33, 107, 66, .29),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #111F17,
      #09140E 80%
    );

  color: var(--garcia-white);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .4s ease,
    visibility 0s linear .4s;
}


.garcia-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition:
    opacity .4s ease,
    visibility 0s;
}


/* SUBTLE ORGANIC GLOW */

.garcia-mobile-menu::before {
  content: '';

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .45;

  background:
    radial-gradient(
      ellipse 65% 35% at 12% 96%,
      rgba(199, 99, 49, .11),
      transparent 80%
    );
}


/* SCROLLABLE CONTENT */

.garcia-mobile-menu__scroll {
  position: relative;

  width: 100%;
  height: 100%;
  height: 100dvh;

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

  -webkit-overflow-scrolling: touch;

  padding:
    calc(var(--garcia-header-height) + 28px)
    var(--garcia-container-gutter)
    max(32px, env(safe-area-inset-bottom));
}


.garcia-mobile-menu__content {
  width: min(100%, 660px);

  min-height: 100%;

  margin-inline: auto;

  display: flex;
  flex-direction: column;
}


/* MENU EYEBROW */

.garcia-mobile-menu__eyebrow {
  margin-bottom: 22px;

  font-size: .78rem;
  font-weight: 800;

  letter-spacing: .16em;
  text-transform: uppercase;

  color: #8DBD9B;
}


/* MENU LINKS */

.garcia-mobile-menu__links {
  border-top:
    1px solid rgba(255, 255, 255, .12);
}


.garcia-mobile-menu__links a {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  min-height: 64px;

  padding: 13px 2px;

  border-bottom:
    1px solid rgba(255, 255, 255, .12);

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

  font-size: clamp(1.55rem, 4vw, 2.25rem);

  font-weight: 400;
  line-height: 1.15;

  color: rgba(255, 255, 255, .91);

  opacity: 0;

  transform: translateY(12px);

  transition:
    color .25s ease,
    opacity .5s var(--garcia-ease-out),
    transform .5s var(--garcia-ease-out);
}


.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a {
  opacity: 1;
  transform: translateY(0);
}


.garcia-mobile-menu__links a:hover,
.garcia-mobile-menu__links a[aria-current="page"] {
  color: #FF9459;
}


.garcia-mobile-menu__arrow {
  font-family: var(--garcia-font-body);

  font-size: 1.25rem;

  color: var(--garcia-orange);

  transition:
    transform .35s var(--garcia-ease-out);
}


.garcia-mobile-menu__links a:hover
.garcia-mobile-menu__arrow {
  transform: translate(3px, -3px);
}


/* STAGGERED ENTRANCE */

.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a:nth-child(1) {
  transition-delay: .04s;
}

.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a:nth-child(2) {
  transition-delay: .07s;
}

.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a:nth-child(3) {
  transition-delay: .10s;
}

.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a:nth-child(4) {
  transition-delay: .13s;
}

.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a:nth-child(5) {
  transition-delay: .16s;
}

.garcia-mobile-menu.is-open
.garcia-mobile-menu__links a:nth-child(6) {
  transition-delay: .19s;
}


/* MOBILE CTA */

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

  gap: 14px;

  min-height: 58px;

  margin-top: 27px;
  padding: 15px 20px;

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

  color: #fff;
  background: var(--garcia-orange-deep);

  font-size: .94rem;
  font-weight: 800;

  transition:
    background-color .3s ease,
    transform .3s ease;
}

.garcia-mobile-menu__estimate:hover {
  background: #D35517;
  transform: translateY(-2px);
}


/* MOBILE FOOTER */

.garcia-mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-top: auto;
  padding-top: 35px;

  font-size: .88rem;

  color: rgba(255, 255, 255, .62);
}


.garcia-mobile-menu__footer a {
  width: fit-content;

  color: var(--garcia-white);

  font-size: 1.06rem;
  font-weight: 800;
}


/* ============================================================
   FIRST SCREEN CONTRACT
   ============================================================ */

/*
  Header + Hero <= 100svh

  The next Hero section will use:

  height: var(--garcia-hero-viewport);

  It is not applied here because the Hero
  has not yet been created.
*/

:root {
  --garcia-hero-viewport:
    calc(100svh - var(--garcia-header-height));
}


/* ============================================================
   RESPONSIVE
   FOUR FIXED BREAKPOINTS
   ============================================================ */


/* DESKTOP */

@media (min-width: 1200px) {

  .garcia-header__inner {
    column-gap: clamp(20px, 2.3vw, 38px);
  }

  .garcia-header__toggle,
  .garcia-mobile-menu {
    display: none;
  }

  .garcia-header__nav {
    display: flex;
  }

}


/* TABLET */

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

  .garcia-header__inner {
    display: flex;

    justify-content: space-between;

    position: relative;
  }

  .garcia-header__toggle {
    display: inline-flex;
    z-index: 2;
  }

  .garcia-header__brand {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 190px;
    height: auto;

    justify-content: center;
  }

  .garcia-header__brand img {
    object-position: center;
    max-height: 68px;
  }

  .garcia-header__nav {
    display: none;
  }

  .garcia-header__cta {
    min-width: 162px;
    min-height: 48px;

    padding-inline: 15px;
    z-index: 2;
  }

  .garcia-mobile-menu__content {
    max-width: 660px;
  }

}


/* MOBILE */

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

  .garcia-header__inner {
    display: flex;

    justify-content: space-between;

    position: relative;
  }

  .garcia-header__toggle {
    display: inline-flex;

    width: 44px;
    height: 44px;

    z-index: 2;
  }

  .garcia-header__brand {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 148px;
    height: auto;

    justify-content: center;
  }

  .garcia-header__brand img {
    max-height: 60px;
    object-position: center;
  }

  .garcia-header__nav {
    display: none;
  }

  .garcia-header__cta {
    min-width: 0;
    min-height: 43px;

    gap: 0;

    padding: 11px 15px;

    font-size: .79rem;

    z-index: 2;
  }

  .garcia-header__cta-icon,
  .garcia-header__cta-arrow {
    display: none;
  }

  .garcia-mobile-menu__links a {
    min-height: 62px;
    font-size: clamp(1.65rem, 5.2vw, 2rem);
  }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

  .garcia-header__inner {
    display: flex;

    position: relative;

    justify-content: space-between;

    width: calc(100% - 24px);

    gap: 8px;
  }

  .garcia-header__toggle {
    display: inline-flex;

    width: 42px;
    height: 42px;

    border-radius: 8px;

    z-index: 2;
  }

  .garcia-header__toggle-lines {
    width: 19px;
  }

  .garcia-header__brand {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: clamp(92px, 28vw, 124px);
    height: auto;

    justify-content: center;
  }

  .garcia-header__brand img {
    max-height: 55px;
    object-position: center;
  }

  .garcia-header__nav {
    display: none;
  }

  .garcia-header__cta {
    min-width: 0;
    min-height: 42px;

    padding: 10px 11px;

    gap: 0;

    font-size: clamp(.73rem, 3.45vw, .82rem);
    letter-spacing: -.02em;

    border-radius: 7px;

    z-index: 2;
  }

  .garcia-header__cta-icon,
  .garcia-header__cta-arrow {
    display: none;
  }

  .garcia-mobile-menu__scroll {
    padding-top:
      calc(var(--garcia-header-height) + 24px);
  }

  .garcia-mobile-menu__eyebrow {
    font-size: .76rem;
    margin-bottom: 18px;
  }

  .garcia-mobile-menu__links a {
    min-height: 55px;
    padding-block: 10px;

    font-size: clamp(1.5rem, 7vw, 1.85rem);
  }

  .garcia-mobile-menu__estimate {
    min-height: 53px;
    padding: 12px 15px;
    margin-top: 23px;
  }

  .garcia-mobile-menu__footer {
    padding-top: 28px;
  }

}
























































/* ============================================================
   03. HERO — CORRECCIÓN COMPLETA
   Garcia's Landscaping & Hardscaping LLC
   ============================================================ */


/* ============================================================
   HERO BASE
   ============================================================ */

.garcia-hero {
  position: relative;

  width: 100%;
  height: var(--garcia-hero-viewport);
  min-height: 0;

  overflow: hidden;
  isolation: isolate;

  color: var(--garcia-on-dark);
  background: var(--garcia-night);
}


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

.garcia-hero__bg-wrap,
.garcia-hero__bg,
.garcia-hero__overlay,
.garcia-hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.garcia-hero__bg-wrap {
  z-index: 0;

  background:
    radial-gradient(
      ellipse at 75% 50%,
      #284333,
      #101B15 75%
    );
}

.garcia-hero__bg {
  background-image:
    url("/img/portada.jpg");

  background-size: cover;
  background-position: center 57%;
  background-repeat: no-repeat;

  transform:
    translate3d(
      0,
      var(--garcia-hero-parallax, 0px),
      0
    )
    scale(1.07);

  transform-origin: center;
}


/* DARK CINEMATIC GRADIENT */

.garcia-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 15, 9, .94) 0%,
      rgba(5, 15, 9, .82) 27%,
      rgba(5, 15, 9, .48) 54%,
      rgba(5, 15, 9, .10) 100%
    );
}


/* SUBTLE VIGNETTE */

.garcia-hero__vignette {
  background:
    linear-gradient(
      180deg,
      rgba(5, 12, 8, .15) 0%,
      transparent 34%,
      rgba(4, 10, 6, .25) 100%
    );
}


/* ============================================================
   HERO INNER
   ============================================================ */

.garcia-hero__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  justify-content: space-between;
  align-items: flex-start;

  width: min(
    calc(
      100% - 2 * var(--garcia-container-gutter)
    ),
    var(--garcia-container-max)
  );

  height: 100%;
  min-height: 0;

  margin-inline: auto;

  padding-block:
    clamp(22px, 3.2vh, 38px);

  gap: clamp(18px, 2.4vh, 28px);
}


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

.garcia-hero__content {
  flex: 0 1 auto;

  width: min(100%, 770px);
  max-width: 770px;
  min-width: 0;

  margin-block: auto;
}


/* EYEBROW */

.garcia-hero__eyebrow.garcia-overline {
  display: inline-flex;

  margin-bottom: 19px;

  color: rgba(255, 255, 255, .94);

  font-size:
    clamp(.75rem, .88vw, .88rem);

  letter-spacing: .16em;
}

.garcia-hero__eyebrow.garcia-overline::before {
  background: var(--garcia-orange);
}


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

.garcia-hero__title-group,
.garcia-hero__title {
  width: 100%;
  max-width: none;
}

.garcia-hero__title {
  display: flex;
  flex-direction: column;

  gap: 0;

  color: var(--garcia-white);

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

  font-size:
    clamp(3.65rem, 5vw, 6rem);

  font-weight: 400;

  line-height: 1.015;
  letter-spacing: -.028em;
}


/* ENSURE EACH HEADING LINE REMAINS INTACT */

.garcia-hero__title-line {
  display: block;
  width: 100%;

  overflow: hidden;
}

.garcia-hero__title-line
> .garcia-line-inner {
  display: block;

  white-space: nowrap;
}


/* ORANGE TITLE */

.garcia-hero__title .garcia-accent {
  color: var(--garcia-orange);
}


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

.garcia-hero__copy {
  width: min(100%, 635px);

  margin-top:
    clamp(17px, 2.2vh, 23px);
}

.garcia-hero__copy p {
  max-width: none;

  color: rgba(255, 255, 255, .89);

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

  font-weight: 500;
  line-height: 1.63;
}

.garcia-hero__copy p + p {
  margin-top: 0;
}


/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.garcia-hero__actions {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 16px;

  margin-top:
    clamp(22px, 3vh, 30px);
}

.garcia-hero__actions .garcia-btn {
  display: inline-flex;

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

  gap: 12px;

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

  padding: 13px 22px;

  font-size:
    clamp(.88rem, .92vw, 1rem);

  font-weight: 800;
  line-height: 1.25;

  white-space: nowrap;

  border-radius:
    var(--garcia-radius-sm);
}


/* IMPORTANT SVG FIX */

.garcia-hero__actions .garcia-btn > svg {
  display: block;

  width: 20px;
  height: 20px;

  min-width: 20px;
  max-width: 20px;

  flex: 0 0 20px;
}


/* PRIMARY */

.garcia-hero__primary-btn {
  color: var(--garcia-white);

  background:
    var(--garcia-orange-deep);

  border-color:
    rgba(255, 255, 255, .08);
}


/* SECONDARY */

.garcia-hero__secondary-btn {
  color: var(--garcia-white);

  background:
    rgba(8, 21, 13, .35);

  border:
    1px solid rgba(255, 255, 255, .72);

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, .02);
}

.garcia-hero__secondary-btn:hover {
  color: var(--garcia-white);

  background:
    rgba(255, 255, 255, .13);
}


/* ============================================================
   HIGHLIGHTS PANEL
   ============================================================ */

.garcia-hero__highlights {
  position: relative;

  flex: 0 0 auto;

  display: grid;

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

  width: min(100%, 1010px);
  min-width: 0;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(255, 255, 255, .14);

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

  background:
    rgba(8, 19, 12, .78);

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

  box-shadow:
    0 18px 45px rgba(0, 0, 0, .2);
}


/* INDIVIDUAL HIGHLIGHT */

.garcia-hero__highlight {
  position: relative;

  display: flex;
  flex-direction: column;

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

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

  padding: 16px 14px;

  text-align: center;
  gap: 6px;
}


/* DIVIDERS */

.garcia-hero__highlight:not(:last-child)::after {
  content: '';

  position: absolute;

  right: 0;
  top: 18%;
  bottom: 18%;

  width: 1px;

  background:
    rgba(255, 255, 255, .2);
}


/* ICONS */

.garcia-hero__highlight-icon,
.garcia-hero__highlight-icon svg {
  display: block;

  width: 28px;
  height: 28px;

  flex: none;
}

.garcia-hero__highlight-icon--orange {
  color: var(--garcia-orange);
}

.garcia-hero__highlight-icon--green {
  color: var(--garcia-leaf);
}


/* HIGHLIGHT TEXT */

.garcia-hero__highlight-text {
  display: flex;
  flex-direction: column;

  align-items: center;

  min-width: 0;

  gap: 2px;
}

.garcia-hero__highlight-text strong {
  color: var(--garcia-white);

  font-size: .96rem;
  font-weight: 800;

  line-height: 1.25;
}

.garcia-hero__highlight-text span {
  color: rgba(255, 255, 255, .79);

  font-size: .79rem;
  font-weight: 500;

  line-height: 1.4;
}


/* ============================================================
   SHORT VIEWPORT SAFETY
   Activated by hero.js only if needed
   ============================================================ */

.garcia-hero.garcia-hero--needs-room {
  height: auto;

  min-height:
    var(--garcia-hero-viewport);

  overflow: visible;
}

.garcia-hero--needs-room
.garcia-hero__inner {
  height: auto;

  min-height:
    var(--garcia-hero-viewport);
}


/* ============================================================
   RESPONSIVE
   EXACTLY FOUR BREAKPOINTS
   ============================================================ */


/* DESKTOP >= 1200px */

@media (min-width: 1200px) {

  .garcia-hero__content {
    width: min(100%, 770px);
  }

  .garcia-hero__title {
    font-size:
      clamp(4rem, 4.9vw, 6rem);
  }

}


/* TABLET 768px - 1199px */

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

  .garcia-hero__content {
    width: min(100%, 675px);
  }

  .garcia-hero__title {
    font-size:
      clamp(3.2rem, 5.9vw, 4.5rem);
  }

  .garcia-hero__eyebrow.garcia-overline {
    margin-bottom: 15px;
  }

  .garcia-hero__actions {
    margin-top: 20px;
  }

  .garcia-hero__actions .garcia-btn {
    min-height: 52px;
  }

  .garcia-hero__highlights {
    width: 100%;
  }

  .garcia-hero__highlight {
    min-height: 103px;

    padding: 12px 8px;
  }

  .garcia-hero__highlight-text span {
    font-size: .75rem;
  }

}


/* MOBILE 481px - 767px */

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

  .garcia-hero__inner {
    padding-block: 19px;
    gap: 16px;
  }

  .garcia-hero__bg {
    background-position: 64% center;
  }

  .garcia-hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5, 15, 9, .91),
        rgba(5, 15, 9, .68) 70%,
        rgba(5, 15, 9, .4)
      );
  }

  .garcia-hero__content {
    width: 100%;
  }

  .garcia-hero__eyebrow.garcia-overline {
    margin-bottom: 13px;

    font-size: .72rem;
    letter-spacing: .09em;
  }

  .garcia-hero__title {
    font-size:
      clamp(2.75rem, 7.1vw, 3.65rem);

    line-height: 1.04;
  }

  .garcia-hero__copy {
    margin-top: 14px;
  }

  .garcia-hero__copy p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .garcia-hero__actions {
    margin-top: 18px;
    gap: 11px;
  }

  .garcia-hero__actions .garcia-btn {
    flex: 1 1 195px;

    min-height: 50px;

    padding: 11px 12px;

    font-size: .88rem;
  }

  .garcia-hero__actions .garcia-btn > svg {
    width: 17px;
    height: 17px;

    min-width: 17px;
    max-width: 17px;

    flex-basis: 17px;
  }


  /* HORIZONTAL HIGHLIGHTS */

  .garcia-hero__highlights {
    display: flex;

    width: 100%;
    min-height: 88px;

    overflow-x: auto;

    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
  }

  .garcia-hero__highlights::-webkit-scrollbar {
    display: none;
  }

  .garcia-hero__highlight {
    flex: 0 0 205px;

    min-height: 88px;

    padding: 13px 15px;

    flex-direction: row;
    justify-content: flex-start;

    text-align: left;

    scroll-snap-align: start;
  }

  .garcia-hero__highlight-text {
    align-items: flex-start;
  }

  .garcia-hero__highlight-icon,
  .garcia-hero__highlight-icon svg {
    width: 25px;
    height: 25px;
  }

}


/* SMALL MOBILE <= 480px */

@media (max-width: 480px) {

  .garcia-hero__inner {
    padding-block: 15px;
    gap: 11px;
  }

  .garcia-hero__bg {
    background-position: 64% center;
  }

  .garcia-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(5, 15, 9, .84) 0%,
        rgba(5, 15, 9, .72) 38%,
        rgba(5, 15, 9, .9) 100%
      );
  }

  .garcia-hero__content {
    width: 100%;
  }

  .garcia-hero__eyebrow.garcia-overline {
    margin-bottom: 12px;

    font-size: .69rem;
    letter-spacing: .06em;

    gap: 9px;
  }

  .garcia-hero__eyebrow.garcia-overline::before {
    width: 22px;
  }

  .garcia-hero__title {
    font-size:
      clamp(2.1rem, 9vw, 2.8rem);

    line-height: 1.04;
    letter-spacing: -.035em;
  }

  .garcia-hero__copy {
    margin-top: 12px;
  }

  .garcia-hero__copy p {
    font-size: .94rem;
    line-height: 1.49;
  }

  .garcia-hero__actions {
    flex-direction: column;
    align-items: stretch;

    gap: 9px;
    margin-top: 15px;
  }

  .garcia-hero__actions .garcia-btn {
    width: 100%;

    min-height: 46px;

    padding: 10px 14px;

    font-size: .91rem;
  }

  .garcia-hero__actions .garcia-btn > svg {
    width: 18px;
    height: 18px;

    min-width: 18px;
    max-width: 18px;

    flex-basis: 18px;
  }


  /* COMPACT HIGHLIGHTS */

  .garcia-hero__highlights {
    display: flex;

    width: 100%;
    min-height: 80px;

    overflow-x: auto;

    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
  }

  .garcia-hero__highlights::-webkit-scrollbar {
    display: none;
  }

  .garcia-hero__highlight {
    flex: 0 0 190px;

    flex-direction: row;
    justify-content: flex-start;

    min-height: 80px;

    padding: 10px 13px;

    text-align: left;

    scroll-snap-align: start;
  }

  .garcia-hero__highlight-text {
    align-items: flex-start;
  }

  .garcia-hero__highlight-icon,
  .garcia-hero__highlight-icon svg {
    width: 25px;
    height: 25px;
  }

  .garcia-hero__highlight-text strong {
    font-size: .91rem;
  }

  .garcia-hero__highlight-text span {
    font-size: .76rem;
  }

}



























































/* ============================================================
   05. WHY CHOOSE US
   Garcia's Landscaping & Hardscaping LLC

   Cinematic Editorial / Forest Architecture
   ============================================================ */


/* ============================================================
   SECTION BASE
   ============================================================ */

.garcia-why {
  position: relative;
  isolation: isolate;

  overflow: clip;

  color: var(--garcia-on-dark);

  background:
    radial-gradient(
      ellipse 48% 54% at 0% 95%,
      rgba(45, 186, 89, .095),
      transparent 75%
    ),
    radial-gradient(
      ellipse 45% 45% at 100% 0%,
      rgba(199, 99, 49, .065),
      transparent 80%
    ),
    #10251C;
}


/* SUBTLE MINERAL TEXTURE */

.garcia-why::before {
  content: '';

  position: absolute;
  inset: 0;

  z-index: -1;

  opacity: .075;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E");
}


/* ARCHITECTURAL CURVED DETAIL */

.garcia-why::after {
  content: '';

  position: absolute;

  width: 520px;
  height: 700px;

  top: -410px;
  right: -260px;

  z-index: -1;
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, .055);

  border-radius:
    47% 53% 60% 40% / 44% 58% 42% 56%;

  transform: rotate(27deg);

  box-shadow:
    0 0 0 70px rgba(255, 255, 255, .009),
    0 0 0 145px rgba(255, 255, 255, .007);
}


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

.garcia-why__intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, .8fr);

  align-items: end;

  gap: clamp(35px, 6vw, 95px);

  padding-bottom: clamp(35px, 4.5vw, 60px);

  border-bottom:
    1px solid rgba(255, 255, 255, .13);
}


.garcia-why__intro-main {
  min-width: 0;
}


/* OVERRIDE GLOBAL OVERLINE COLOR */

.garcia-why__eyebrow.garcia-overline {
  color: #B1D7BA;

  font-size: .82rem;
}

.garcia-why__eyebrow.garcia-overline::before {
  background: var(--garcia-orange);
}


/* HEADING */

.garcia-why__title {
  max-width: 830px;

  margin-top: 20px;

  color: var(--garcia-white);

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

  font-size: clamp(3.1rem, 4.7vw, 5.4rem);

  font-weight: 400;

  line-height: 1.075;
  letter-spacing: -.035em;
}


.garcia-why__title span {
  display: block;

  color: var(--garcia-orange);
}


/* INTRO TEXT */

.garcia-why__intro-copy {
  max-width: 455px;

  padding-bottom: 6px;

  color: rgba(248, 247, 241, .8);

  font-size: 1.03rem;
  font-weight: 500;

  line-height: 1.85;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.garcia-why__layout {
  display: grid;

  grid-template-columns:
    minmax(0, .93fr)
    minmax(0, 1.07fr);

  align-items: stretch;

  gap: clamp(36px, 5.5vw, 90px);

  margin-top: clamp(37px, 4.5vw, 62px);
}


/* ============================================================
   VISUAL COLUMN
   ============================================================ */

.garcia-why__visual {
  position: relative;

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

  margin: 0;

  overflow: hidden;
  isolation: isolate;

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

  background:
    linear-gradient(
      145deg,
      #3F6248,
      #142F20 80%
    );

  box-shadow:
    0 25px 60px rgba(0, 0, 0, .23);
}


/* THIN PHOTO BORDER */

.garcia-why__visual::after {
  content: '';

  position: absolute;

  inset: 12px;

  z-index: 3;

  border: 1px solid rgba(255, 255, 255, .13);

  border-radius: 3px;

  pointer-events: none;
}


/* PHOTO CONTAINER */

.garcia-why__photo-frame {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;
}


/* PHOTOGRAPH */

.garcia-why__photo {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  transform:
    translate3d(
      0,
      var(--garcia-why-parallax, 0px),
      0
    )
    scale(1.09);

  transform-origin: center;

  filter:
    saturate(.9)
    contrast(1.04);
}


/* HIDE FAILED IMAGE, KEEP DARK FALLBACK */

.garcia-why__visual.is-image-missing
.garcia-why__photo {
  display: none;
}


/* PHOTOGRAPHIC GRADIENT */

.garcia-why__photo-shade {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(6, 18, 10, .33) 0%,
      transparent 35%,
      rgba(5, 14, 9, .30) 60%,
      rgba(5, 14, 9, .94) 100%
    );
}


/* ============================================================
   PHOTO TOP LABEL
   ============================================================ */

.garcia-why__photo-label {
  position: absolute;

  top: 34px;
  left: 34px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 12px;

  color: var(--garcia-white);

  font-size: .81rem;
  font-weight: 800;

  letter-spacing: .12em;
  line-height: 1.4;

  text-transform: uppercase;
}


.garcia-why__photo-label-line {
  display: block;

  width: 32px;
  height: 2px;

  flex: none;

  background: var(--garcia-orange);
}


/* ============================================================
   EXPERIENCE INFORMATION
   ============================================================ */

.garcia-why__experience {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 4;

  display: flex;
  flex-direction: column;

  gap: 22px;

  padding:
    clamp(28px, 3.5vw, 49px);
}


/* EXPERIENCE ROW */

.garcia-why__experience-main {
  display: flex;
  align-items: center;

  gap: 18px;
}


/* 15 YEARS */

.garcia-why__experience-number {
  color: var(--garcia-white);

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

  font-size: clamp(4.8rem, 7vw, 7.5rem);

  line-height: .92;
  letter-spacing: -.07em;
}


/* LABEL */

.garcia-why__experience-label {
  display: flex;
  flex-direction: column;

  color: rgba(255, 255, 255, .86);

  font-size: 1.03rem;
  font-weight: 500;

  line-height: 1.45;
}


.garcia-why__experience-label strong {
  display: block;

  color: var(--garcia-white);

  font-size: 1.25rem;
  font-weight: 800;
}


/* LICENSED & INSURED */

.garcia-why__experience-bottom {
  display: flex;

  align-items: center;
  gap: 12px;

  padding-top: 19px;

  border-top:
    1px solid rgba(255, 255, 255, .32);

  color: rgba(255, 255, 255, .91);

  font-size: .92rem;
  font-weight: 700;

  letter-spacing: .025em;
}


.garcia-why__experience-bottom svg {
  display: block;

  width: 23px;
  height: 23px;

  flex: none;

  color: #73DF8C;
}


/* ============================================================
   DETAILS COLUMN
   ============================================================ */

.garcia-why__details {
  display: flex;
  flex-direction: column;

  min-width: 0;
  height: 100%;
}


/* DETAILS HEADING */

.garcia-why__details-heading {
  padding-bottom: 26px;
}


.garcia-why__details-overline {
  display: block;

  margin-bottom: 11px;

  color: #A7C9AC;

  font-size: .81rem;
  font-weight: 800;

  letter-spacing: .13em;
  text-transform: uppercase;
}


.garcia-why__details-heading h3 {
  max-width: 520px;

  color: var(--garcia-white);

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

  font-size: clamp(2rem, 2.5vw, 2.9rem);

  font-weight: 400;

  line-height: 1.12;
  letter-spacing: -.025em;
}


/* ============================================================
   VALUES
   ============================================================ */

.garcia-why__values {
  display: flex;
  flex-direction: column;
}


/* SINGLE VALUE ROW */

.garcia-why__value {
  position: relative;

  display: grid;

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

  align-items: start;

  gap: 22px;

  padding: 23px 0;

  border-top:
    1px solid rgba(255, 255, 255, .13);
}


/* ANIMATED TOP ACCENT */

.garcia-why__value::before {
  content: '';

  position: absolute;

  top: -1px;
  left: 0;

  width: 78px;
  height: 2px;

  background: var(--garcia-orange);

  transform: scaleX(0);
  transform-origin: left;

  transition:
    transform .85s var(--garcia-ease-out);
}


.garcia-why__value.is-visible::before {
  transform: scaleX(1);
}


/* ICON */

.garcia-why__value-icon {
  display: flex;

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

  width: 52px;
  height: 52px;

  border:
    1px solid rgba(126, 188, 142, .31);

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

  background:
    rgba(64, 129, 80, .12);

  color: #A0DAB0;

  transition:
    background-color .4s ease,
    color .4s ease,
    border-color .4s ease,
    transform .5s var(--garcia-ease-out);
}


.garcia-why__value-icon svg {
  display: block;

  width: 26px;
  height: 26px;

  flex: none;
}


/* CONTENT */

.garcia-why__value-content {
  min-width: 0;
}


.garcia-why__value-content h4 {
  margin: 0;

  color: var(--garcia-white);

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

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

  line-height: 1.3;

  letter-spacing: -.018em;
}


.garcia-why__value-content p {
  max-width: 510px;

  margin-top: 7px;

  color: rgba(248, 247, 241, .74);

  font-size: .97rem;
  font-weight: 500;

  line-height: 1.72;
}


/* SUBTLE POINTER EFFECT */

.garcia-why__value:hover
.garcia-why__value-icon {
  background: rgba(199, 99, 49, .16);

  border-color: rgba(242, 106, 33, .55);

  color: #FF9A5E;

  transform: translateY(-2px);
}


/* ============================================================
   CLOSING ACTION
   ============================================================ */

.garcia-why__closing {
  display: flex;

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

  flex-wrap: wrap;

  gap: 20px;

  margin-top: auto;

  padding-top: 27px;

  border-top:
    1px solid rgba(255, 255, 255, .15);
}


/* CLOSING TEXT */

.garcia-why__closing-text {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.garcia-why__closing-text span {
  color: #A7C9AC;

  font-size: .86rem;
  font-weight: 600;
}


.garcia-why__closing-text strong {
  color: var(--garcia-white);

  font-size: .99rem;
  font-weight: 800;

  line-height: 1.4;
}


/* ESTIMATE BUTTON */

.garcia-why__cta {
  display: inline-flex;

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

  gap: 12px;

  min-height: 52px;

  padding: 12px 20px;

  white-space: nowrap;
}


.garcia-why__cta svg {
  display: block;

  width: 19px;
  height: 19px;

  min-width: 19px;

  flex: none;
}


/* ============================================================
   REDUCED MOTION
   Controlled by the global main.js class
   ============================================================ */

.garcia-reduced-motion
.garcia-why__photo {
  transform: none !important;
}


.garcia-reduced-motion
.garcia-why__value::before {
  transition: none !important;
  transform: scaleX(1) !important;
}


/* ============================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ============================================================ */


/* DESKTOP >= 1200px */

@media (min-width: 1200px) {

  .garcia-why__visual {
    min-height: 690px;
  }

  .garcia-why__layout {
    gap: clamp(48px, 5vw, 82px);
  }

  .garcia-why__value {
    padding-block: 23px;
  }

}


/* TABLET 768px - 1199px */

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

  .garcia-why__intro {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(250px, .85fr);

    gap: 35px;
  }

  .garcia-why__title {
    font-size: clamp(2.8rem, 4.5vw, 4.3rem);
  }

  .garcia-why__intro-copy {
    font-size: 1rem;
    line-height: 1.75;
  }

  .garcia-why__layout {
    grid-template-columns:
      minmax(0, .87fr)
      minmax(0, 1.13fr);

    gap: 32px;
  }

  .garcia-why__visual {
    min-height: 650px;
  }

  .garcia-why__photo-label {
    top: 24px;
    left: 23px;

    font-size: .75rem;
    letter-spacing: .07em;
  }

  .garcia-why__experience {
    padding: 27px;
  }

  .garcia-why__experience-number {
    font-size: 5.4rem;
  }

  .garcia-why__value {
    grid-template-columns: 44px minmax(0, 1fr);

    gap: 15px;
    padding-block: 18px;
  }

  .garcia-why__value-icon {
    width: 44px;
    height: 44px;
  }

  .garcia-why__value-icon svg {
    width: 23px;
    height: 23px;
  }

  .garcia-why__value-content h4 {
    font-size: 1.07rem;
  }

  .garcia-why__value-content p {
    font-size: .93rem;
    line-height: 1.6;
  }

  .garcia-why__closing {
    margin-top: 20px;
  }

}


/* MOBILE 481px - 767px */

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

  .garcia-why__intro {
    grid-template-columns: 1fr;

    gap: 18px;

    padding-bottom: 30px;
  }

  .garcia-why__title {
    font-size: clamp(2.8rem, 7.4vw, 3.9rem);
  }

  .garcia-why__intro-copy {
    max-width: 570px;

    font-size: 1rem;
    line-height: 1.72;
  }

  .garcia-why__layout {
    grid-template-columns: 1fr;

    gap: 42px;

    margin-top: 35px;
  }

  .garcia-why__visual {
    min-height: 510px;
  }

  .garcia-why__photo {
    object-position: center 52%;
  }

  .garcia-why__experience {
    padding: 32px;
  }

  .garcia-why__experience-number {
    font-size: 6rem;
  }

  .garcia-why__details-heading {
    padding-bottom: 25px;
  }

  .garcia-why__details-heading h3 {
    font-size: 2.5rem;
  }

  .garcia-why__value {
    grid-template-columns: 50px minmax(0, 1fr);
    padding-block: 22px;
  }

  .garcia-why__value-icon {
    width: 50px;
    height: 50px;
  }

  .garcia-why__value-content h4 {
    font-size: 1.12rem;
  }

  .garcia-why__value-content p {
    font-size: .98rem;
  }

  .garcia-why__closing {
    margin-top: 10px;
  }

}


/* SMALL MOBILE <= 480px */

@media (max-width: 480px) {

  .garcia-why__intro {
    grid-template-columns: 1fr;

    gap: 17px;

    padding-bottom: 27px;
  }

  .garcia-why__eyebrow.garcia-overline {
    font-size: .77rem;
  }

  .garcia-why__title {
    margin-top: 16px;

    font-size: clamp(2.45rem, 9.2vw, 3.25rem);

    line-height: 1.1;
  }

  .garcia-why__intro-copy {
    font-size: 1rem;
    line-height: 1.72;
  }

  .garcia-why__layout {
    grid-template-columns: 1fr;

    gap: 36px;

    margin-top: 29px;
  }

  .garcia-why__visual {
    min-height: clamp(370px, 105vw, 475px);
  }

  .garcia-why__photo {
    object-position: center;
  }

  .garcia-why__visual::after {
    inset: 9px;
  }

  .garcia-why__photo-label {
    top: 23px;
    left: 20px;

    font-size: .73rem;
    letter-spacing: .075em;
  }

  .garcia-why__photo-label-line {
    width: 23px;
  }

  .garcia-why__experience {
    gap: 16px;
    padding: 23px;
  }

  .garcia-why__experience-main {
    gap: 14px;
  }

  .garcia-why__experience-number {
    font-size: 5.4rem;
  }

  .garcia-why__experience-label {
    font-size: .98rem;
  }

  .garcia-why__experience-label strong {
    font-size: 1.1rem;
  }

  .garcia-why__experience-bottom {
    padding-top: 16px;

    font-size: .87rem;
  }

  .garcia-why__details-heading {
    padding-bottom: 23px;
  }

  .garcia-why__details-overline {
    font-size: .76rem;
  }

  .garcia-why__details-heading h3 {
    font-size: clamp(2rem, 7.6vw, 2.5rem);
  }

  .garcia-why__value {
    grid-template-columns: 43px minmax(0, 1fr);

    gap: 15px;
    padding-block: 21px;
  }

  .garcia-why__value-icon {
    width: 43px;
    height: 43px;
  }

  .garcia-why__value-icon svg {
    width: 22px;
    height: 22px;
  }

  .garcia-why__value-content h4 {
    font-size: 1.06rem;
  }

  .garcia-why__value-content p {
    margin-top: 6px;

    font-size: .96rem;
    line-height: 1.66;
  }

  .garcia-why__closing {
    align-items: stretch;

    gap: 19px;

    margin-top: 8px;

    padding-top: 23px;
  }

  .garcia-why__closing-text {
    width: 100%;
  }

  .garcia-why__cta {
    width: 100%;
    min-height: 53px;
  }

}
























































/* ============================================================
   06. REVIEWS
   Garcia's Landscaping & Hardscaping LLC

   Warm Mineral / Editorial / Organic Details
   ============================================================ */


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

.garcia-reviews {
  position: relative;
  isolation: isolate;

  overflow: clip;

  background:
    radial-gradient(
      ellipse 50% 40% at 95% 5%,
      rgba(221, 210, 192, .30),
      transparent 80%
    ),
    radial-gradient(
      ellipse 40% 50% at 0% 95%,
      rgba(33, 107, 66, .045),
      transparent 82%
    ),
    var(--garcia-ivory);

  color: var(--garcia-text);
}


/* ORGANIC CONTOUR DECORATION */

.garcia-reviews::before {
  content: '';

  position: absolute;

  width: 570px;
  height: 570px;

  top: -310px;
  left: -310px;

  z-index: -1;
  pointer-events: none;

  border: 1px solid rgba(23, 63, 45, .075);

  border-radius:
    44% 56% 57% 43% / 53% 42% 58% 47%;

  transform: rotate(-24deg);

  box-shadow:
    0 0 0 65px rgba(23, 63, 45, .012),
    0 0 0 125px rgba(23, 63, 45, .009);
}


/* FINE MINERAL GRAIN */

.garcia-reviews::after {
  content: '';

  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  opacity: .045;

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


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

.garcia-reviews__intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(250px, .5fr);

  align-items: center;

  gap: clamp(30px, 6vw, 100px);

  margin-bottom: clamp(36px, 4.8vw, 66px);
}


.garcia-reviews__intro-content {
  position: relative;
  min-width: 0;
}


/* EYEBROW */

.garcia-reviews__eyebrow {
  color: var(--garcia-green);
}


/* HEADING */

.garcia-reviews__title {
  margin-top: 20px;

  max-width: 850px;

  color: var(--garcia-forest);

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

  font-size: clamp(3rem, 4.7vw, 5.3rem);

  font-weight: 400;
  line-height: 1.08;

  letter-spacing: -.035em;
}


.garcia-reviews__title span {
  display: block;

  color: var(--garcia-clay);
}


/* DESCRIPTION */

.garcia-reviews__description {
  max-width: 680px;

  margin-top: 23px;

  color: var(--garcia-muted);

  font-size: 1.04rem;
  font-weight: 500;

  line-height: 1.8;
}


/* ============================================================
   QUOTATION ART
   ============================================================ */

.garcia-reviews__art {
  position: relative;

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

  width: 100%;
  height: 280px;

  pointer-events: none;
}


.garcia-reviews__art-contours {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  stroke: rgba(33, 107, 66, .16);
  stroke-width: 1.2;

  fill: none;
}


/* OVERSIZED QUOTE */

.garcia-reviews__quote-mark {
  position: relative;

  top: 22px;

  color: var(--garcia-forest);

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

  font-size: 13rem;

  font-weight: 400;
  line-height: 1;

  opacity: .86;
}


/* EDITORIAL CAPTION */

.garcia-reviews__art-caption {
  position: absolute;

  bottom: 18px;
  left: 50%;

  width: max-content;
  max-width: 95%;

  transform: translateX(-50%);

  color: var(--garcia-green);

  font-size: .81rem;
  font-weight: 800;

  letter-spacing: .10em;
  line-height: 1.4;

  text-align: center;
  text-transform: uppercase;
}


/* CLAY ACCENT */

.garcia-reviews__art-accent {
  position: absolute;

  right: 12%;
  top: 13%;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: var(--garcia-clay);

  box-shadow:
    0 0 0 8px rgba(199, 99, 49, .08);
}


/* ============================================================
   WIDGET PANEL
   ============================================================ */

.garcia-reviews__panel {
  position: relative;

  width: 100%;

  overflow: hidden;

  border:
    1px solid rgba(23, 63, 45, .12);

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

  background: var(--garcia-surface);

  box-shadow:
    0 24px 65px rgba(23, 63, 45, .09),
    0 4px 16px rgba(23, 63, 45, .025);
}


/* GREEN ARCHITECTURAL ACCENT */

.garcia-reviews__panel::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--garcia-forest) 0%,
      var(--garcia-green) 70%,
      var(--garcia-clay) 100%
    );
}


/* PANEL HEADER */

.garcia-reviews__panel-head {
  display: flex;

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

  gap: 25px;

  padding:
    clamp(23px, 3vw, 36px)
    clamp(24px, 3.6vw, 46px);

  border-bottom:
    1px solid var(--garcia-border);
}


/* BRAND IDENTITY */

.garcia-reviews__panel-identity {
  display: flex;

  align-items: center;

  gap: 17px;

  min-width: 0;
}


.garcia-reviews__identity-icon {
  display: flex;

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

  width: 54px;
  height: 54px;

  flex: none;

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

  background: var(--garcia-forest);

  color: var(--garcia-white);
}


.garcia-reviews__identity-icon svg {
  width: 27px;
  height: 27px;

  display: block;
}


/* PANEL TITLE */

.garcia-reviews__panel-heading {
  min-width: 0;
}


.garcia-reviews__panel-heading h3 {
  margin: 0;

  color: var(--garcia-forest);

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

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

  line-height: 1.35;
  letter-spacing: -.025em;
}


.garcia-reviews__panel-heading p {
  margin-top: 3px;

  color: var(--garcia-muted);

  font-size: .92rem;
  font-weight: 500;

  line-height: 1.5;
}


/* LOCATION */

.garcia-reviews__panel-location {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex: none;

  color: var(--garcia-muted);

  font-size: .87rem;
  font-weight: 700;

  white-space: nowrap;
}


.garcia-reviews__location-dot {
  display: block;

  width: 8px;
  height: 8px;

  flex: none;

  border-radius: 50%;

  background: var(--garcia-green);

  box-shadow:
    0 0 0 4px rgba(33, 107, 66, .09);
}


/* ============================================================
   ELFSIGHT WIDGET AREA
   ============================================================ */

.garcia-reviews__widget-stage {
  position: relative;

  width: 100%;
  min-height: 300px;

  padding:
    clamp(24px, 3.5vw, 48px);

  background:
    radial-gradient(
      ellipse 58% 75% at 50% 48%,
      rgba(221, 210, 192, .10),
      transparent 85%
    ),
    var(--garcia-surface);
}


/*
  Keep Elfsight's original dimensions.
  No iframe transforms, scaling or clipping.
*/

.garcia-reviews__widget-mount {
  width: 100%;
  min-width: 0;
}


/* ENSURE DYNAMIC WIDGET IS NOT OVERSTYLED */

.garcia-reviews__widget-mount > div {
  width: 100%;
}


/* ============================================================
   STATIC PLACEHOLDER
   ============================================================ */

.garcia-reviews__placeholder {
  display: flex;
  flex-direction: column;

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

  gap: 13px;

  min-height: 240px;

  padding: 26px 18px;

  text-align: center;
}


/* HIDE WHEN WIDGET HAS RENDERED */

.garcia-reviews__placeholder[hidden] {
  display: none !important;
}


/* PLACEHOLDER ICON */

.garcia-reviews__placeholder-icon {
  display: flex;

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

  width: 72px;
  height: 72px;

  margin-bottom: 3px;

  color: var(--garcia-green);

  background:
    rgba(33, 107, 66, .055);

  border:
    1px solid rgba(33, 107, 66, .14);

  border-radius: 50%;
}


.garcia-reviews__placeholder-icon svg {
  width: 39px;
  height: 39px;

  display: block;
}


/* PLACEHOLDER TYPOGRAPHY */

.garcia-reviews__placeholder h4 {
  color: var(--garcia-forest);

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

  font-size: 1.8rem;

  font-weight: 400;
  line-height: 1.2;
}


.garcia-reviews__placeholder p {
  max-width: 420px;

  color: var(--garcia-muted);

  font-size: .98rem;
  font-weight: 500;

  line-height: 1.7;
}


/* SMALL DECORATIVE RULE */

.garcia-reviews__placeholder-rule {
  display: block;

  width: 54px;
  height: 2px;

  margin-top: 5px;

  background: var(--garcia-clay);
}


.garcia-reviews__placeholder-caption {
  color: var(--garcia-muted);

  font-size: .85rem;
  font-weight: 600;

  line-height: 1.5;
}


/* ============================================================
   PANEL BASE DECORATION
   ============================================================ */

.garcia-reviews__panel-base {
  display: flex;
  align-items: center;

  gap: 8px;

  height: 16px;

  padding-inline:
    clamp(24px, 3.6vw, 46px);

  border-top:
    1px solid var(--garcia-border);

  background: #F5F1E8;
}


.garcia-reviews__panel-base span:first-child {
  display: block;

  width: 37px;
  height: 3px;

  background: var(--garcia-forest);
}


.garcia-reviews__panel-base span:last-child {
  display: block;

  width: 12px;
  height: 3px;

  background: var(--garcia-clay);
}


/* ============================================================
   BOTTOM DETAIL
   ============================================================ */

.garcia-reviews__bottom {
  display: flex;

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

  gap: 26px;

  margin-top: 35px;

  padding-top: 25px;

  border-top:
    1px solid rgba(23, 63, 45, .16);
}


/* LICENSE / LOCATION */

.garcia-reviews__bottom-note {
  display: flex;
  align-items: center;

  gap: 13px;
}


.garcia-reviews__bottom-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  flex: none;

  border:
    1px solid rgba(33, 107, 66, .19);

  border-radius: 50%;

  color: var(--garcia-green);
}


.garcia-reviews__bottom-icon svg {
  width: 23px;
  height: 23px;
}


.garcia-reviews__bottom-note > span:last-child {
  display: flex;
  flex-direction: column;

  color: var(--garcia-forest);

  font-size: .96rem;
  font-weight: 800;

  line-height: 1.4;
}


.garcia-reviews__bottom-note small {
  color: var(--garcia-muted);

  font-size: .85rem;
  font-weight: 500;

  line-height: 1.5;
}


/* CTA LINK */

.garcia-reviews__bottom-link {
  display: inline-flex;

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

  flex-wrap: wrap;

  gap: 10px;

  color: var(--garcia-forest);

  font-size: .96rem;
  line-height: 1.4;
}


.garcia-reviews__bottom-link > span {
  color: var(--garcia-muted);
  font-weight: 500;
}


.garcia-reviews__bottom-link strong {
  font-weight: 800;
}


.garcia-reviews__bottom-link svg {
  display: block;

  width: 20px;
  height: 20px;

  flex: none;

  color: var(--garcia-clay);

  transition:
    transform .4s var(--garcia-ease-out);
}


.garcia-reviews__bottom-link:hover svg {
  transform: translateX(5px);
}


/* ============================================================
   RESPONSIVE — FOUR MEDIA QUERIES
   ============================================================ */


/* DESKTOP >= 1200px */

@media (min-width: 1200px) {

  .garcia-reviews__intro {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(250px, .5fr);
  }

  .garcia-reviews__art {
    height: 280px;
  }

  .garcia-reviews__widget-stage {
    min-height: 320px;
  }

}


/* TABLET 768px - 1199px */

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

  .garcia-reviews__intro {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(190px, .5fr);

    gap: 30px;
  }

  .garcia-reviews__title {
    font-size: clamp(2.7rem, 4.5vw, 4rem);
  }

  .garcia-reviews__description {
    font-size: 1rem;
  }

  .garcia-reviews__art {
    height: 235px;
  }

  .garcia-reviews__quote-mark {
    font-size: 10rem;
  }

  .garcia-reviews__art-caption {
    font-size: .74rem;
  }

  .garcia-reviews__panel-head {
    padding: 25px 30px;
  }

  .garcia-reviews__widget-stage {
    padding: 30px;
  }

}


/* MOBILE 481px - 767px */

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

  .garcia-reviews__intro {
    grid-template-columns: 1fr;

    gap: 14px;
    margin-bottom: 35px;
  }

  .garcia-reviews__title {
    font-size: clamp(2.65rem, 7.4vw, 3.9rem);
  }

  .garcia-reviews__description {
    font-size: 1rem;
    line-height: 1.72;
  }

  .garcia-reviews__art {
    width: 230px;
    height: 140px;

    justify-self: end;

    margin-top: -12px;
    margin-bottom: -8px;
  }

  .garcia-reviews__quote-mark {
    top: 15px;
    font-size: 8rem;
  }

  .garcia-reviews__art-caption {
    bottom: 2px;
    font-size: .67rem;
    letter-spacing: .05em;
  }

  .garcia-reviews__panel-head {
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 16px;

    padding: 23px 25px;
  }

  .garcia-reviews__widget-stage {
    min-height: 280px;
    padding: 24px;
  }

  .garcia-reviews__bottom {
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 22px;
  }

  .garcia-reviews__bottom-link {
    justify-content: flex-start;
  }

}


/* SMALL MOBILE <= 480px */

@media (max-width: 480px) {

  .garcia-reviews__intro {
    grid-template-columns: 1fr;

    gap: 10px;
    margin-bottom: 27px;
  }

  .garcia-reviews__title {
    margin-top: 16px;

    font-size: clamp(2.25rem, 9vw, 3.15rem);

    line-height: 1.09;
  }

  .garcia-reviews__description {
    margin-top: 18px;

    font-size: 1rem;
    line-height: 1.68;
  }

  .garcia-reviews__art {
    width: 180px;
    height: 112px;

    justify-self: end;

    margin-top: -5px;
  }

  .garcia-reviews__quote-mark {
    top: 13px;
    font-size: 6rem;
  }

  .garcia-reviews__art-caption {
    bottom: 0;

    font-size: .64rem;
    letter-spacing: .025em;
  }

  .garcia-reviews__art-accent {
    width: 7px;
    height: 7px;
  }

  .garcia-reviews__panel {
    border-radius: 9px;
  }

  .garcia-reviews__panel-head {
    flex-direction: column;
    align-items: flex-start;

    gap: 12px;
    padding: 21px 19px;
  }

  .garcia-reviews__panel-identity {
    gap: 12px;
  }

  .garcia-reviews__identity-icon {
    width: 45px;
    height: 45px;
  }

  .garcia-reviews__identity-icon svg {
    width: 23px;
    height: 23px;
  }

  .garcia-reviews__panel-heading h3 {
    font-size: 1.13rem;
  }

  .garcia-reviews__panel-heading p {
    font-size: .86rem;
  }

  .garcia-reviews__panel-location {
    padding-left: 57px;

    font-size: .83rem;
  }

  .garcia-reviews__widget-stage {
    min-height: 260px;
    padding: 19px 14px;
  }

  .garcia-reviews__placeholder {
    min-height: 215px;
    padding: 22px 10px;
  }

  .garcia-reviews__placeholder-icon {
    width: 62px;
    height: 62px;
  }

  .garcia-reviews__placeholder h4 {
    font-size: 1.6rem;
  }

  .garcia-reviews__placeholder p {
    font-size: .95rem;
  }

  .garcia-reviews__panel-base {
    padding-inline: 19px;
  }

  .garcia-reviews__bottom {
    flex-direction: column;
    align-items: stretch;

    gap: 22px;
    margin-top: 27px;
    padding-top: 23px;
  }

  .garcia-reviews__bottom-link {
    justify-content: flex-start;
    gap: 8px;
  }

  .garcia-reviews__bottom-link > span {
    width: 100%;
  }

}
























































/* ============================================================
   08. SERVICE AREAS
   Garcia's Landscaping & Hardscaping LLC

   Forest Editorial + Interactive Leaflet Map
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.garcia-areas {
  position: relative;
  isolation: isolate;

  overflow: clip;

  color: var(--garcia-on-dark);

  background:
    radial-gradient(
      ellipse 55% 60% at 0% 100%,
      rgba(33, 107, 66, .20),
      transparent 80%
    ),
    radial-gradient(
      ellipse 40% 45% at 100% 0%,
      rgba(199, 99, 49, .07),
      transparent 85%
    ),
    #101F17;
}


/* SUBTLE MINERAL GRAIN */

.garcia-areas::before {
  content: '';

  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  opacity: .065;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)' opacity='.36'/%3E%3C/svg%3E");
}


/* ORGANIC CONTOUR DETAIL */

.garcia-areas::after {
  content: '';

  position: absolute;

  width: 560px;
  height: 660px;

  left: -350px;
  top: -380px;

  z-index: -1;
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, .055);

  border-radius:
    46% 54% 60% 40% / 53% 46% 54% 47%;

  transform: rotate(-27deg);

  box-shadow:
    0 0 0 65px rgba(255, 255, 255, .009),
    0 0 0 125px rgba(255, 255, 255, .006);
}


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

.garcia-areas__intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, .8fr);

  align-items: end;

  gap: clamp(35px, 5vw, 85px);

  margin-bottom: clamp(35px, 4vw, 60px);
}


.garcia-areas__intro-main {
  min-width: 0;
}


.garcia-areas__eyebrow.garcia-overline {
  color: #A9D1B4;
}


.garcia-areas__eyebrow.garcia-overline::before {
  background: var(--garcia-orange);
}


.garcia-areas__title {
  max-width: 870px;

  margin-top: 20px;

  color: var(--garcia-white);

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

  font-size: clamp(3rem, 4.65vw, 5.3rem);

  font-weight: 400;

  line-height: 1.075;
  letter-spacing: -.035em;
}


.garcia-areas__title span {
  display: block;

  color: var(--garcia-orange);
}


.garcia-areas__intro-copy {
  max-width: 460px;

  padding-bottom: 6px;

  color: rgba(248, 247, 241, .79);

  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.8;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.garcia-areas__layout {
  display: grid;

  grid-template-columns:
    minmax(300px, .77fr)
    minmax(0, 1.23fr);

  align-items: stretch;

  gap: clamp(24px, 3vw, 45px);
}


/* ============================================================
   INFORMATION PANEL
   ============================================================ */

.garcia-areas__information {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: clamp(26px, 3vw, 42px);

  border: 1px solid rgba(255, 255, 255, .115);
  border-radius: var(--garcia-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(38, 83, 54, .44),
      rgba(12, 29, 19, .78)
    );

  box-shadow:
    0 18px 48px rgba(0, 0, 0, .13);
}


/* LOCATION SYMBOL */

.garcia-areas__symbol {
  display: flex;

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

  width: 53px;
  height: 53px;

  margin-bottom: 24px;

  border: 1px solid rgba(242, 106, 33, .37);
  border-radius: var(--garcia-radius-sm);

  color: #FF9C61;

  background: rgba(199, 99, 49, .11);
}


.garcia-areas__symbol svg {
  display: block;

  width: 26px;
  height: 26px;
}


/* HOME BASE */

.garcia-areas__small-label {
  display: block;

  color: #A6D0AF;

  font-size: .81rem;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


.garcia-areas__home-base h3 {
  margin-top: 11px;

  color: var(--garcia-white);

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

  font-size: clamp(2.1rem, 2.6vw, 3rem);

  font-weight: 400;
  line-height: 1.15;
}


.garcia-areas__home-base p {
  max-width: 430px;

  margin-top: 16px;

  color: rgba(248, 247, 241, .77);

  font-size: .97rem;
  line-height: 1.76;
}


/* REGIONAL META */

.garcia-areas__location-meta {
  display: inline-flex;

  align-items: center;
  gap: 10px;

  width: fit-content;

  margin-top: 19px;

  color: #D7E6D9;

  font-size: .89rem;
  font-weight: 700;
}


.garcia-areas__meta-dot {
  width: 7px;
  height: 7px;

  flex: none;

  border-radius: 50%;

  background: var(--garcia-leaf);
}


/* ============================================================
   MAP VIEW CONTROLS
   ============================================================ */

.garcia-areas__view-panel {
  margin-top: 32px;
  padding-top: 27px;

  border-top: 1px solid rgba(255, 255, 255, .15);
}


.garcia-areas__panel-title {
  display: block;

  margin-bottom: 16px;

  color: var(--garcia-white);

  font-size: .93rem;
  font-weight: 800;
}


.garcia-areas__view-buttons {
  display: grid;
  gap: 10px;
}


/* VIEW BUTTON */

.garcia-areas__view {
  display: flex;

  align-items: center;
  gap: 14px;

  width: 100%;
  min-height: 70px;

  padding: 12px 14px;

  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--garcia-radius-sm);

  color: var(--garcia-white);
  background: rgba(4, 14, 8, .26);

  text-align: left;

  -webkit-tap-highlight-color: transparent;

  transition:
    background-color .3s ease,
    border-color .3s ease,
    transform .4s var(--garcia-ease-out);
}


.garcia-areas__view:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .36);
}


.garcia-areas__view.is-active {
  border-color: rgba(242, 106, 33, .72);

  background:
    linear-gradient(
      90deg,
      rgba(199, 99, 49, .17),
      rgba(33, 107, 66, .16)
    );
}


.garcia-areas__view:focus-visible {
  outline: 3px solid var(--garcia-orange);
  outline-offset: 3px;
}


/* CONTROL ICON */

.garcia-areas__view-icon {
  display: flex;

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

  width: 40px;
  height: 40px;

  flex: none;

  border-radius: 7px;

  background: rgba(255, 255, 255, .08);

  color: #9CD0AB;
}


.garcia-areas__view-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}


.garcia-areas__view.is-active
.garcia-areas__view-icon {
  color: #FFA06B;
}


/* BUTTON LABEL */

.garcia-areas__view-text {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-width: 0;

  gap: 3px;
}


.garcia-areas__view-text strong {
  font-size: .96rem;
  font-weight: 800;
  line-height: 1.35;
}


.garcia-areas__view-text small {
  color: rgba(248, 247, 241, .65);

  font-size: .82rem;
  font-weight: 500;
  line-height: 1.4;
}


.garcia-areas__view-arrow {
  flex: none;

  color: var(--garcia-orange);

  font-size: 1.3rem;

  transition:
    transform .4s var(--garcia-ease-out);
}


.garcia-areas__view:hover
.garcia-areas__view-arrow {
  transform: translate(3px, -3px);
}


/* SCREEN READER / MAP STATUS */

.garcia-areas__map-status {
  margin-top: 13px;

  color: #A6C6AE;

  font-size: .82rem;
  line-height: 1.5;
}


/* ============================================================
   CONTACT BLOCK
   ============================================================ */

.garcia-areas__contact {
  margin-top: auto;
  padding-top: 32px;
}


.garcia-areas__contact p {
  color: rgba(248, 247, 241, .72);

  font-size: .91rem;
  line-height: 1.6;
}


.garcia-areas__contact strong {
  display: block;

  margin-top: 6px;
  margin-bottom: 19px;

  color: var(--garcia-white);

  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.5;
}


.garcia-areas__cta {
  width: 100%;

  min-height: 53px;

  justify-content: space-between;

  gap: 15px;
}


.garcia-areas__cta svg {
  display: block;

  width: 20px;
  height: 20px;

  flex: none;
}


/* ============================================================
   MAP COLUMN
   ============================================================ */

.garcia-areas__map-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


/* IMPORTANT: CONTAIN LEAFLET STACKING CONTEXT */

.garcia-areas__map-shell {
  position: relative;

  isolation: isolate;

  z-index: 1;

  flex: 1;

  min-height: 610px;

  overflow: hidden;

  border: 5px solid rgba(255, 255, 255, .92);

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

  background: #E9E7DD;

  box-shadow:
    0 25px 60px rgba(0, 0, 0, .20);
}


/* LEAFLET CONTAINER */

.garcia-areas__map {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  min-height: 100%;

  background: #E9E7DD;

  z-index: 1;

  cursor: grab;
}


/* SUBTLE MAP COLOR TREATMENT
   Applied only to map tiles, never attribution. */

.garcia-areas__map .leaflet-tile-pane {
  filter:
    saturate(.78)
    contrast(1.02);
}


/* ============================================================
   FLOATING MAP LOCATION LABEL
   ============================================================ */

.garcia-areas__map-label {
  position: absolute;

  top: 23px;
  left: 23px;

  z-index: 600;

  display: flex;

  align-items: center;
  gap: 11px;

  max-width: calc(100% - 120px);

  padding: 13px 16px;

  border: 1px solid rgba(23, 63, 45, .1);
  border-radius: var(--garcia-radius-sm);

  background: rgba(255, 254, 250, .96);

  box-shadow:
    0 8px 27px rgba(16, 27, 21, .11);

  pointer-events: none;
}


.garcia-areas__map-label-dot {
  width: 11px;
  height: 11px;

  flex: none;

  border-radius: 50%;

  background: var(--garcia-orange);

  box-shadow:
    0 0 0 5px rgba(242, 106, 33, .12);
}


.garcia-areas__map-label > span:last-child {
  display: flex;
  flex-direction: column;

  gap: 2px;

  color: var(--garcia-forest);

  font-size: .81rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .06em;
}


.garcia-areas__map-label small {
  color: var(--garcia-muted);

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}


/* ============================================================
   LEAFLET CONTROLS
   ============================================================ */

.garcia-areas__map .leaflet-top.leaflet-right {
  margin-top: 16px;
  margin-right: 16px;
}


.garcia-areas__map .leaflet-control-zoom {
  overflow: hidden;

  border: 1px solid rgba(23, 63, 45, .17);

  border-radius: 8px;

  box-shadow:
    0 8px 24px rgba(16, 27, 21, .12);
}


.garcia-areas__map .leaflet-control-zoom a {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  color: var(--garcia-forest);
  background: #FFFEFA;

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

  font-size: 21px;
  line-height: 1;
}


.garcia-areas__map .leaflet-control-zoom a:hover {
  background: #EEF4EE;
}


.garcia-areas__map .leaflet-control-zoom a:focus-visible {
  outline: 3px solid var(--garcia-orange);
  outline-offset: -3px;
}


/* KEEP MAP ATTRIBUTION VISIBLE */

.garcia-areas__map .leaflet-control-attribution {
  padding: 4px 7px;

  background: rgba(255, 255, 255, .94);

  color: #38463C;

  font-size: 11px;
  line-height: 1.5;
}


/* ============================================================
   CUSTOM EASTON MARKER
   ============================================================ */

.garcia-areas__marker {
  background: transparent;
  border: 0;
}


/* CUSTOM PIN BODY */

.garcia-areas__pin {
  position: relative;

  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;

  border: 3px solid #FFFFFF;
  border-radius: 50%;

  background: var(--garcia-orange);

  box-shadow:
    0 5px 20px rgba(16, 27, 21, .32);
}


/* PIN POINT */

.garcia-areas__pin::after {
  content: '';

  position: absolute;

  bottom: -8px;
  left: 50%;

  width: 14px;
  height: 14px;

  border-right: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;

  border-radius: 1px;

  background: var(--garcia-orange);

  transform: translateX(-50%) rotate(45deg);

  z-index: -1;
}


/* MARKER CENTER */

.garcia-areas__pin svg {
  display: block;

  width: 22px;
  height: 22px;

  color: #FFFFFF;
}


/* ============================================================
   CUSTOM MAP POPUP
   ============================================================ */

.garcia-areas__map .leaflet-popup-content-wrapper {
  border-radius: 10px;

  background: #FFFEFA;

  box-shadow:
    0 12px 35px rgba(16, 27, 21, .18);
}


.garcia-areas__map .leaflet-popup-content {
  margin: 19px 22px;
  min-width: 185px;
}


.garcia-areas__popup-label {
  display: block;

  color: var(--garcia-orange-deep);

  font-size: .78rem;
  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.garcia-areas__popup-title {
  display: block;

  margin-top: 7px;

  color: var(--garcia-forest);

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

  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}


.garcia-areas__popup-copy {
  display: block;

  margin-top: 8px;

  color: var(--garcia-muted);

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

  font-size: .88rem;
  line-height: 1.6;
}


.garcia-areas__map .leaflet-popup-tip {
  background: #FFFEFA;
}


/* ============================================================
   MAP FALLBACK
   ============================================================ */

.garcia-areas__fallback {
  position: absolute;
  inset: 0;

  z-index: 700;

  display: flex;
  flex-direction: column;

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

  padding: 30px;

  background: #EBEEE7;

  color: var(--garcia-forest);

  text-align: center;
}


.garcia-areas__fallback[hidden] {
  display: none !important;
}


.garcia-areas__fallback h3 {
  font-size: 1.9rem;
}


.garcia-areas__fallback p {
  max-width: 310px;

  margin-top: 10px;

  font-size: .98rem;
  line-height: 1.6;
}


.garcia-areas__fallback a {
  margin-top: 20px;

  color: var(--garcia-green);

  font-weight: 800;

  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ============================================================
   MAP FOOTER
   ============================================================ */

.garcia-areas__map-footer {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding-top: 19px;
}


.garcia-areas__map-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  min-width: 0;

  color: rgba(248, 247, 241, .66);

  font-size: .84rem;
  line-height: 1.6;
}


.garcia-areas__map-note svg {
  display: block;

  width: 20px;
  height: 20px;

  flex: none;

  color: #A8D3B3;
}


.garcia-areas__external-link {
  display: inline-flex;

  align-items: center;
  gap: 8px;

  flex: none;

  color: var(--garcia-white);

  font-size: .85rem;
  font-weight: 800;

  white-space: nowrap;
}


.garcia-areas__external-link svg {
  display: block;

  width: 17px;
  height: 17px;

  color: var(--garcia-orange);

  transition:
    transform .4s var(--garcia-ease-out);
}


.garcia-areas__external-link:hover svg {
  transform: translate(3px, -3px);
}


/* ============================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ============================================================ */


/* DESKTOP >= 1200px */

@media (min-width: 1200px) {

  .garcia-areas__map-shell {
    min-height: 630px;
  }

  .garcia-areas__information {
    padding: clamp(30px, 3vw, 44px);
  }

}


/* TABLET 768px - 1199px */

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

  .garcia-areas__intro {
    grid-template-columns: 1.1fr .9fr;

    gap: 34px;
  }

  .garcia-areas__title {
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  }

  .garcia-areas__intro-copy {
    font-size: 1rem;
  }

  .garcia-areas__layout {
    grid-template-columns:
      minmax(275px, .82fr)
      minmax(0, 1.18fr);

    gap: 21px;
  }

  .garcia-areas__information {
    padding: 25px;
  }

  .garcia-areas__home-base h3 {
    font-size: 2.2rem;
  }

  .garcia-areas__map-shell {
    min-height: 610px;
  }

  .garcia-areas__map-footer {
    flex-wrap: wrap;
    gap: 12px;
  }

}


/* MOBILE 481px - 767px */

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

  .garcia-areas__intro {
    grid-template-columns: 1fr;

    gap: 20px;
    margin-bottom: 32px;
  }

  .garcia-areas__title {
    font-size: clamp(2.8rem, 7.4vw, 3.9rem);
  }

  .garcia-areas__intro-copy {
    max-width: 580px;

    font-size: 1rem;
    line-height: 1.72;
  }

  .garcia-areas__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .garcia-areas__information {
    padding: 30px;
  }

  .garcia-areas__view-buttons {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 11px;
  }

  .garcia-areas__view {
    padding: 12px;
    gap: 10px;
  }

  .garcia-areas__view-arrow {
    display: none;
  }

  .garcia-areas__contact {
    margin-top: 26px;
    padding-top: 25px;
  }

  .garcia-areas__map-shell {
    flex: none;
    min-height: 450px;
  }

  .garcia-areas__map-footer {
    flex-wrap: wrap;
    gap: 14px;
  }

}


/* SMALL MOBILE <= 480px */

@media (max-width: 480px) {

  .garcia-areas__intro {
    grid-template-columns: 1fr;

    gap: 17px;
    margin-bottom: 28px;
  }

  .garcia-areas__title {
    margin-top: 16px;

    font-size: clamp(2.4rem, 9vw, 3.15rem);

    line-height: 1.09;
  }

  .garcia-areas__intro-copy {
    font-size: 1rem;
    line-height: 1.68;
  }

  .garcia-areas__layout {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  .garcia-areas__information {
    padding: 23px;
  }

  .garcia-areas__symbol {
    width: 46px;
    height: 46px;

    margin-bottom: 20px;
  }

  .garcia-areas__home-base h3 {
    font-size: 2.25rem;
  }

  .garcia-areas__home-base p {
    font-size: .98rem;
  }

  .garcia-areas__view-panel {
    margin-top: 26px;
    padding-top: 23px;
  }

  .garcia-areas__view {
    min-height: 65px;
  }

  .garcia-areas__view-text strong {
    font-size: .94rem;
  }

  .garcia-areas__view-text small {
    font-size: .81rem;
  }

  .garcia-areas__contact {
    padding-top: 27px;
  }

  .garcia-areas__map-shell {
    flex: none;

    min-height: 390px;

    border-width: 4px;
    border-radius: 9px;
  }

  .garcia-areas__map-label {
    top: 14px;
    left: 13px;

    padding: 10px 12px;
  }

  .garcia-areas__map .leaflet-top.leaflet-right {
    margin-top: 8px;
    margin-right: 8px;
  }

  .garcia-areas__map .leaflet-control-zoom a {
    width: 34px;
    height: 34px;
  }

  .garcia-areas__map-footer {
    flex-direction: column;

    gap: 15px;
    padding-top: 17px;
  }

  .garcia-areas__map-note {
    font-size: .82rem;
  }

}




































































/* ============================================================
   09. FOOTER
   Garcia's Landscaping & Hardscaping LLC

   Cinematic Forest / Architectural Editorial
   ============================================================ */


/* ============================================================
   FOOTER BASE
   ============================================================ */

.garcia-footer {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  padding-top: clamp(70px, 8vw, 118px);

  color: var(--garcia-on-dark);

  background:
    radial-gradient(
      ellipse 46% 56% at 100% 5%,
      rgba(33, 107, 66, .25),
      transparent 80%
    ),
    radial-gradient(
      ellipse 35% 40% at 0% 100%,
      rgba(199, 99, 49, .065),
      transparent 80%
    ),
    var(--garcia-night);
}


/* MINERAL GRAIN */

.garcia-footer::before {
  content: '';

  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  opacity: .055;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)' opacity='.4'/%3E%3C/svg%3E");
}


/* DECORATIVE CONTOURS */

.garcia-footer__art {
  position: absolute;

  top: -125px;
  right: -160px;

  width: 520px;
  height: 560px;

  z-index: -1;

  pointer-events: none;

  opacity: .55;
}

.garcia-footer__art svg {
  width: 100%;
  height: 100%;

  stroke: rgba(153, 196, 158, .15);
  stroke-width: 1.2;
  fill: none;
}


/* MAIN WRAPPER */

.garcia-footer__container {
  position: relative;
  z-index: 1;
}


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

.garcia-footer__lead {
  display: grid;

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

  align-items: end;

  gap: clamp(30px, 5vw, 80px);

  padding-bottom: clamp(52px, 6vw, 84px);

  border-bottom:
    1px solid rgba(255, 255, 255, .17);
}


/* SECTION EYEBROW */

.garcia-footer__eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 22px;

  color: #ADD6B8;

  font-size: .83rem;
  font-weight: 800;

  line-height: 1.4;
  letter-spacing: .14em;

  text-transform: uppercase;
}


.garcia-footer__eyebrow::before {
  content: '';

  display: block;

  width: 34px;
  height: 2px;

  flex: none;

  background: var(--garcia-orange);
}


/* EDITORIAL HEADING */

.garcia-footer__lead h2 {
  max-width: 850px;

  color: var(--garcia-white);

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

  font-size: clamp(3.15rem, 5vw, 5.8rem);

  font-weight: 400;

  line-height: 1.08;
  letter-spacing: -.034em;
}


.garcia-footer__lead h2 em {
  display: block;

  color: var(--garcia-orange);

  font-style: normal;
}


/* DESCRIPTION */

.garcia-footer__lead p {
  max-width: 610px;

  margin-top: 22px;

  color: rgba(248, 247, 241, .73);

  font-size: 1.03rem;
  font-weight: 500;

  line-height: 1.75;
}


/* ============================================================
   MAIN CTA
   ============================================================ */

.garcia-footer__lead-cta {
  display: inline-flex;

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

  gap: 23px;

  min-width: 230px;
  min-height: 60px;

  padding: 15px 21px;

  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--garcia-radius-sm);

  background: var(--garcia-orange-deep);

  color: var(--garcia-white);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .14);

  font-size: .96rem;
  font-weight: 800;
  line-height: 1.3;

  transition:
    background-color .35s ease,
    box-shadow .45s ease,
    transform .45s var(--garcia-ease-out);
}


.garcia-footer__lead-cta svg {
  display: block;

  width: 21px;
  height: 21px;

  flex: none;

  transition:
    transform .4s var(--garcia-ease-out);
}


.garcia-footer__lead-cta:hover {
  background: #D35517;

  box-shadow:
    0 19px 38px rgba(0, 0, 0, .2);

  transform: translateY(-3px);
}


.garcia-footer__lead-cta:hover svg {
  transform: translate(3px, -3px);
}


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

.garcia-footer__main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(0, .72fr)
    minmax(0, 1fr)
    minmax(0, .7fr);

  gap: clamp(26px, 3.6vw, 55px);

  padding-block:
    clamp(52px, 6vw, 82px)
    clamp(55px, 6vw, 84px);
}


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

.garcia-footer__brand-column {
  min-width: 0;
}


.garcia-footer__brand {
  display: inline-flex;

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

  width: min(100%, 250px);

  transition:
    opacity .3s ease;
}


.garcia-footer__brand img {
  display: block;

  width: 100%;
  height: auto;

  max-height: 103px;

  object-fit: contain;
  object-position: left center;
}


.garcia-footer__brand:hover {
  opacity: .84;
}


/* BRAND DESCRIPTION */

.garcia-footer__description {
  max-width: 360px;

  margin-top: 23px;

  color: rgba(248, 247, 241, .72);

  font-size: .95rem;
  font-weight: 500;

  line-height: 1.8;
}


/* ============================================================
   CONTACT
   ============================================================ */

.garcia-footer__contact {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 15px;

  margin-top: 26px;
}


.garcia-footer__contact a {
  display: inline-flex;

  align-items: flex-start;

  gap: 12px;

  max-width: 100%;

  color: rgba(255, 255, 255, .9);

  font-size: .91rem;
  font-weight: 700;

  line-height: 1.6;

  overflow-wrap: anywhere;

  transition:
    color .25s ease;
}


.garcia-footer__contact a:hover {
  color: #FFAA77;
}


.garcia-footer__contact svg {
  display: block;

  width: 19px;
  height: 19px;

  min-width: 19px;

  flex: none;

  margin-top: 3px;

  color: var(--garcia-orange);
}


/* ============================================================
   SHARED COLUMN HEADINGS
   ============================================================ */

.garcia-footer__column {
  min-width: 0;
}


.garcia-footer__column h3 {
  position: relative;

  margin: 0 0 28px;

  padding-bottom: 17px;

  color: var(--garcia-white);

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

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

  line-height: 1.4;

  letter-spacing: -.01em;
}


/* UNDERLINE ACCENT */

.garcia-footer__column h3::after {
  content: '';

  position: absolute;

  bottom: 0;
  left: 0;

  width: 35px;
  height: 2px;

  background: var(--garcia-clay);
}


/* ============================================================
   QUICK LINKS
   ============================================================ */

.garcia-footer__quick-links ul {
  display: flex;
  flex-direction: column;

  gap: 15px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.garcia-footer__quick-links li {
  margin: 0;
  padding: 0;
}


.garcia-footer__quick-links a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: rgba(248, 247, 241, .75);

  font-size: .95rem;
  font-weight: 600;

  line-height: 1.5;

  transition:
    color .3s ease,
    transform .4s var(--garcia-ease-out);
}


.garcia-footer__quick-links a::before {
  content: '';

  width: 0;
  height: 1px;

  background: var(--garcia-orange);

  transition:
    width .35s var(--garcia-ease-out);
}


.garcia-footer__quick-links a:hover {
  color: var(--garcia-white);

  transform: translateX(3px);
}


.garcia-footer__quick-links a:hover::before {
  width: 13px;
}


/* ============================================================
   BUSINESS HOURS
   ============================================================ */

.garcia-footer__schedule {
  display: flex;
  flex-direction: column;

  gap: 19px;
}


.garcia-footer__schedule-row {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 7px;
}


.garcia-footer__schedule-row span {
  color: rgba(248, 247, 241, .7);

  font-size: .95rem;
  font-weight: 500;

  line-height: 1.5;
}


.garcia-footer__schedule-row strong {
  color: var(--garcia-white);

  font-size: .98rem;
  font-weight: 800;

  line-height: 1.5;

  white-space: normal;
}


.garcia-footer__schedule-row
.garcia-footer__closed {
  color: #FFAB7A;
}


/* TIME ZONE LABEL */

.garcia-footer__hours-note {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  margin-top: 27px;
  padding-top: 20px;

  border-top:
    1px solid rgba(255, 255, 255, .13);

  color: rgba(248, 247, 241, .65);

  font-size: .87rem;
  font-weight: 500;

  line-height: 1.5;
}


.garcia-footer__hours-note svg {
  display: block;

  width: 18px;
  height: 18px;

  flex: none;

  margin-top: 1px;

  color: #9FCEAA;
}


/* ============================================================
   SOCIAL — NEXTDOOR ONLY
   ============================================================ */

.garcia-footer__social > p {
  max-width: 215px;

  margin-bottom: 21px;

  color: rgba(248, 247, 241, .72);

  font-size: .94rem;

  line-height: 1.7;
}


/* ICON AND LABEL */

.garcia-footer__social-item {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  width: fit-content;
  max-width: 100%;

  padding: 9px 12px 9px 9px;

  border:
    1px solid rgba(255, 255, 255, .18);

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

  background:
    rgba(255, 255, 255, .045);

  color: var(--garcia-white);

  transition:
    background-color .35s ease,
    border-color .35s ease,
    transform .4s var(--garcia-ease-out);
}


/* ICON BACKGROUND */

.garcia-footer__social-icon {
  display: flex;

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

  width: 43px;
  height: 43px;

  flex: none;

  border-radius: 6px;

  background: #2B7843;
}


.garcia-footer__social-icon img {
  display: block;

  width: 25px;
  height: 25px;

  object-fit: contain;
}


/* SOCIAL LABEL */

.garcia-footer__social-label {
  color: var(--garcia-white);

  font-size: .93rem;
  font-weight: 800;

  line-height: 1.4;
}


.garcia-footer__social-arrow {
  display: block;

  width: 16px;
  height: 16px;

  flex: none;

  color: #A7DAB2;

  transition:
    transform .35s var(--garcia-ease-out);
}


/* HOVER ONLY WHEN LINK IS CONFIGURED */

a.garcia-footer__social-item:hover {
  border-color: rgba(255, 255, 255, .4);

  background:
    rgba(255, 255, 255, .095);

  transform: translateY(-3px);
}


a.garcia-footer__social-item:hover
.garcia-footer__social-arrow {
  transform: translate(3px, -3px);
}


/* ============================================================
   FOOTER BOTTOM
   ============================================================ */

.garcia-footer__bottom {
  display: flex;

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

  gap: 25px;

  min-height: 90px;

  padding-block: 23px;

  border-top:
    1px solid rgba(255, 255, 255, .16);
}


/* COPYRIGHT */

.garcia-footer__copyright {
  max-width: none;

  color: rgba(248, 247, 241, .64);

  font-size: .88rem;
  font-weight: 500;

  line-height: 1.65;
}


/* POWERED BY */

.garcia-footer__powered {
  display: inline-flex;

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

  flex-wrap: wrap;

  column-gap: 7px;
  row-gap: 3px;

  color: rgba(248, 247, 241, .67);

  font-size: .88rem;
  font-weight: 500;

  line-height: 1.5;

  text-align: right;

  transition:
    color .3s ease;
}


.garcia-footer__powered strong {
  color: var(--garcia-white);

  font-weight: 800;

  transition:
    color .3s ease;
}


.garcia-footer__powered svg {
  display: block;

  width: 16px;
  height: 16px;

  flex: none;

  color: var(--garcia-orange);

  transition:
    transform .35s var(--garcia-ease-out);
}


.garcia-footer__powered:hover strong {
  color: #FFAA77;
}


.garcia-footer__powered:hover svg {
  transform: translate(3px, -3px);
}


/* ============================================================
   RESPONSIVE — FOUR MEDIA QUERIES
   ============================================================ */


/* DESKTOP >= 1200px */

@media (min-width: 1200px) {

  .garcia-footer__main {
    grid-template-columns:
      minmax(0, 1.45fr)
      minmax(0, .72fr)
      minmax(0, 1fr)
      minmax(0, .7fr);
  }

  .garcia-footer__lead {
    align-items: end;
  }

}


/* TABLET 768px - 1199px */

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

  .garcia-footer__lead h2 {
    font-size: clamp(3rem, 5vw, 4.8rem);
  }

  .garcia-footer__lead-cta {
    min-width: 205px;
    padding-inline: 17px;
  }

  .garcia-footer__main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 60px;
    row-gap: 49px;
  }

  .garcia-footer__brand-column {
    max-width: 420px;
  }

  .garcia-footer__description {
    max-width: 400px;
  }

  .garcia-footer__bottom {
    align-items: flex-start;
  }

}


/* MOBILE 481px - 767px */

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

  .garcia-footer {
    padding-top: 80px;
  }

  .garcia-footer__lead {
    grid-template-columns: 1fr;

    gap: 30px;
    padding-bottom: 54px;
  }

  .garcia-footer__lead h2 {
    font-size: clamp(3rem, 7vw, 4.2rem);
  }

  .garcia-footer__lead p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .garcia-footer__lead-cta {
    width: fit-content;
    min-height: 56px;
  }

  .garcia-footer__main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 35px;
    row-gap: 44px;

    padding-block: 52px 60px;
  }

  .garcia-footer__brand-column {
    grid-column: 1 / -1;
  }

  .garcia-footer__description {
    max-width: 520px;
  }

  .garcia-footer__contact {
    gap: 13px;
  }

  .garcia-footer__column h3 {
    margin-bottom: 22px;
  }

  .garcia-footer__bottom {
    flex-direction: column;
    align-items: flex-start;

    gap: 12px;

    min-height: 0;
    padding-block: 24px 29px;
  }

  .garcia-footer__powered {
    justify-content: flex-start;
    text-align: left;
  }

}


/* SMALL MOBILE <= 480px */

@media (max-width: 480px) {

  .garcia-footer {
    padding-top: 67px;
  }

  .garcia-footer__art {
    width: 300px;
    height: 350px;

    top: -125px;
    right: -165px;
  }

  .garcia-footer__lead {
    grid-template-columns: 1fr;

    gap: 26px;
    padding-bottom: 43px;
  }

  .garcia-footer__eyebrow {
    margin-bottom: 17px;

    font-size: .78rem;
    letter-spacing: .09em;
  }

  .garcia-footer__eyebrow::before {
    width: 25px;
  }

  .garcia-footer__lead h2 {
    font-size: clamp(2.65rem, 10vw, 3.35rem);

    line-height: 1.1;
  }

  .garcia-footer__lead p {
    margin-top: 18px;

    font-size: 1rem;
    line-height: 1.7;
  }

  .garcia-footer__lead-cta {
    width: 100%;
    min-width: 0;

    min-height: 54px;

    padding: 13px 18px;
  }

  .garcia-footer__main {
    grid-template-columns: 1fr;

    row-gap: 37px;

    padding-block: 45px 51px;
  }

  .garcia-footer__brand {
    width: min(100%, 225px);
  }

  .garcia-footer__brand img {
    max-height: 90px;
  }

  .garcia-footer__description {
    margin-top: 18px;

    font-size: .96rem;
    line-height: 1.75;
  }

  .garcia-footer__contact {
    margin-top: 22px;
    gap: 14px;
  }

  .garcia-footer__contact a {
    font-size: .93rem;
  }

  .garcia-footer__column h3 {
    margin-bottom: 21px;
  }

  .garcia-footer__quick-links ul {
    gap: 13px;
  }

  .garcia-footer__schedule {
    gap: 16px;
  }

  .garcia-footer__hours-note {
    margin-top: 21px;
  }

  .garcia-footer__bottom {
    flex-direction: column;
    align-items: flex-start;

    min-height: 0;

    gap: 15px;

    padding-block: 22px 28px;
  }

  .garcia-footer__copyright {
    font-size: .88rem;
  }

  .garcia-footer__powered {
    justify-content: flex-start;

    font-size: .88rem;
    text-align: left;
  }

}


































































/* ============================================================
   04. SERVICES
   Garcia's Landscaping & Hardscaping LLC

   Natural Architectural Editorial
   Two Image-Covered Service Cards
   ============================================================ */


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

.garcia-services {
  position: relative;
  isolation: isolate;

  overflow: clip;

  color: var(--garcia-text);

  background:
    radial-gradient(
      ellipse 42% 44% at 100% 0%,
      rgba(221, 210, 192, .35),
      transparent 85%
    ),
    radial-gradient(
      ellipse 55% 50% at 0% 100%,
      rgba(33, 107, 66, .045),
      transparent 80%
    ),
    var(--garcia-ivory);
}


/* SUBTLE MINERAL TEXTURE */

.garcia-services::before {
  content: '';

  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  opacity: .065;

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


/* SOFT ORGANIC CONTOUR */

.garcia-services::after {
  content: '';

  position: absolute;

  width: 540px;
  height: 540px;

  top: -290px;
  right: -170px;

  z-index: -1;
  pointer-events: none;

  border: 1px solid rgba(33, 107, 66, .08);

  border-radius:
    45% 55% 53% 47% / 52% 43% 57% 48%;

  transform: rotate(-20deg);

  box-shadow:
    0 0 0 55px rgba(33, 107, 66, .016),
    0 0 0 108px rgba(33, 107, 66, .012);
}


.garcia-services__container {
  position: relative;
  z-index: 1;
}


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

.garcia-services__intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, .65fr);

  align-items: end;

  column-gap: clamp(40px, 6vw, 110px);

  margin-bottom: clamp(36px, 4.2vw, 60px);
}


.garcia-services__heading {
  min-width: 0;
}


.garcia-services__title {
  max-width: 800px;

  margin-top: 19px;

  color: var(--garcia-forest);

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

  font-size: clamp(2.8rem, 4.2vw, 4.75rem);

  font-weight: 400;

  line-height: 1.08;
  letter-spacing: -.035em;
}


.garcia-services__title span {
  display: block;
  color: var(--garcia-clay);
}


.garcia-services__intro-text {
  max-width: 425px;

  margin-bottom: 5px;

  color: var(--garcia-muted);

  font-size: 1.02rem;
  font-weight: 500;

  line-height: 1.85;
}


/* ============================================================
   SERVICE GRID
   ============================================================ */

.garcia-services__grid {
  display: grid;

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

  gap: clamp(19px, 2.3vw, 32px);
}


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

.garcia-services__card {
  --garcia-services-move-x: 0px;
  --garcia-services-move-y: 0px;

  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

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

  padding: clamp(25px, 2.7vw, 40px);

  isolation: isolate;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .12);

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

  background: var(--garcia-night);

  color: var(--garcia-white);

  box-shadow:
    0 20px 48px rgba(23, 63, 45, .13);

  -webkit-tap-highlight-color: transparent;

  transition:
    box-shadow .65s var(--garcia-ease-out),
    border-color .4s ease;
}


/* OUTER HOVER */

.garcia-services__card:hover {
  box-shadow:
    0 29px 64px rgba(23, 63, 45, .20);

  border-color: rgba(255, 255, 255, .3);
}


/* FOCUS FOR KEYBOARD NAVIGATION */

.garcia-services__card:focus-visible {
  outline: 3px solid var(--garcia-orange);
  outline-offset: 5px;
}


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

.garcia-services__photo {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  pointer-events: none;

  filter:
    saturate(.92)
    contrast(1.05);

  transform:
    translate3d(
      var(--garcia-services-move-x),
      var(--garcia-services-move-y),
      0
    )
    scale(1.015);

  transition:
    transform 1s var(--garcia-ease-out),
    filter .8s ease;
}


/* INDIVIDUAL IMAGE POSITIONING */

.garcia-services__card--landscape
.garcia-services__photo {
  object-position: center 47%;
}


.garcia-services__card--hardscape
.garcia-services__photo {
  object-position: center 55%;
}


/* MOUSE AND KEYBOARD INTERACTION */

.garcia-services__card.is-pointer-active
.garcia-services__photo,

.garcia-services__card:focus-visible
.garcia-services__photo {
  transform:
    translate3d(
      var(--garcia-services-move-x),
      var(--garcia-services-move-y),
      0
    )
    scale(1.085);

  filter:
    saturate(1)
    contrast(1.06);
}


/* ============================================================
   PHOTOGRAPHIC OVERLAY
   ============================================================ */

.garcia-services__shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(7, 16, 11, .46) 0%,
      rgba(7, 16, 11, .07) 25%,
      rgba(7, 16, 11, .31) 43%,
      rgba(7, 16, 11, .85) 74%,
      rgba(7, 16, 11, .97) 100%
    ),
    linear-gradient(
      90deg,
      rgba(5, 13, 8, .24),
      transparent 90%
    );

  transition:
    opacity .6s ease;
}


/* SLIGHTLY WARMER HARDSCAPING OVERLAY */

.garcia-services__card--hardscape
.garcia-services__shade {
  background:
    linear-gradient(
      180deg,
      rgba(14, 17, 12, .44) 0%,
      rgba(14, 17, 12, .06) 25%,
      rgba(14, 17, 12, .32) 43%,
      rgba(14, 17, 12, .85) 74%,
      rgba(14, 17, 12, .97) 100%
    ),
    linear-gradient(
      90deg,
      rgba(23, 11, 5, .22),
      transparent 90%
    );
}


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

.garcia-services__card-top {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.garcia-services__category {
  display: inline-flex;

  align-items: center;

  max-width: calc(100% - 68px);
  min-height: 34px;

  padding: 8px 13px;

  border: 1px solid rgba(255, 255, 255, .25);

  border-radius: 5px;

  background: rgba(10, 22, 14, .47);

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

  color: var(--garcia-white);

  font-size: .72rem;
  font-weight: 800;

  line-height: 1.4;
  letter-spacing: .09em;

  text-transform: uppercase;
}


/* TOP ARROW */

.garcia-services__top-arrow {
  display: flex;

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

  width: 46px;
  height: 46px;

  flex: none;

  border: 1px solid rgba(255, 255, 255, .45);

  border-radius: 50%;

  background: rgba(10, 22, 14, .38);

  color: var(--garcia-white);

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

  transition:
    background-color .4s ease,
    border-color .4s ease,
    color .4s ease,
    transform .5s var(--garcia-ease-out);
}


.garcia-services__top-arrow svg {
  width: 21px;
  height: 21px;
}


/* ARROW INTERACTION */

.garcia-services__card:hover
.garcia-services__top-arrow,

.garcia-services__card:focus-visible
.garcia-services__top-arrow {
  background: var(--garcia-orange);

  border-color: var(--garcia-orange);

  transform: rotate(45deg);
}


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

.garcia-services__card-content {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  gap: 22px;

  width: 100%;

  margin-top: 80px;
}


.garcia-services__line {
  display: block;

  width: 46px;
  height: 3px;

  margin-bottom: 17px;

  background: var(--garcia-leaf);
}


.garcia-services__card--hardscape
.garcia-services__line {
  background: var(--garcia-orange);
}


.garcia-services__card-heading h3 {
  font-family: var(--garcia-font-display);

  font-size: clamp(2.6rem, 3.5vw, 4rem);

  font-weight: 400;

  letter-spacing: -.025em;

  line-height: 1.07;

  color: var(--garcia-white);
}


.garcia-services__card-heading p {
  max-width: 430px;

  margin-top: 13px;

  color: rgba(255, 255, 255, .87);

  font-size: .99rem;

  font-weight: 500;

  line-height: 1.7;
}


/* ============================================================
   SERVICE LIST
   ============================================================ */

.garcia-services__list {
  display: grid;

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

  column-gap: 14px;
  row-gap: 11px;

  width: 100%;

  margin: 0;
  padding: 0;

  list-style: none;
}


.garcia-services__list li {
  position: relative;

  padding-left: 15px;

  color: rgba(255, 255, 255, .90);

  font-size: .88rem;
  font-weight: 600;

  line-height: 1.48;

  overflow-wrap: normal;
}


.garcia-services__list li::before {
  content: '';

  position: absolute;

  left: 0;
  top: .6em;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--garcia-leaf);
}


.garcia-services__card--hardscape
.garcia-services__list li::before {
  background: var(--garcia-orange);
}


/* ============================================================
   EXPLORE LABEL
   ============================================================ */

.garcia-services__explore {
  display: flex;

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

  gap: 18px;

  width: 100%;

  padding-top: 19px;

  border-top: 1px solid rgba(255, 255, 255, .23);

  color: var(--garcia-white);

  font-size: .91rem;
  font-weight: 800;

  line-height: 1.4;
}


.garcia-services__explore svg {
  width: 22px;
  height: 22px;

  flex: none;

  color: #6EE18A;

  transition:
    color .3s ease,
    transform .5s var(--garcia-ease-out);
}


.garcia-services__card--hardscape
.garcia-services__explore svg {
  color: #FF9B63;
}


.garcia-services__card:hover
.garcia-services__explore svg,

.garcia-services__card:focus-visible
.garcia-services__explore svg {
  transform: translateX(7px);
  color: var(--garcia-white);
}


/* ============================================================
   ADDITIONAL SERVICES NOTE
   ============================================================ */

.garcia-services__footnote {
  max-width: 900px;

  margin: 30px auto 0;

  color: var(--garcia-muted);

  font-size: .92rem;
  font-weight: 500;

  line-height: 1.7;

  text-align: center;
}


/* ============================================================
   REDUCED MOTION
   Uses global class from main.js
   ============================================================ */

.garcia-reduced-motion
.garcia-services__photo {
  transform: none !important;
  transition: none !important;
}


.garcia-reduced-motion
.garcia-services__top-arrow,

.garcia-reduced-motion
.garcia-services__explore svg {
  transform: none !important;
}


/* ============================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ============================================================ */


/* DESKTOP >= 1200px */

@media (min-width: 1200px) {

  .garcia-services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .garcia-services__card {
    min-height: 610px;
  }

  .garcia-services__card-content {
    gap: 23px;
  }

}


/* TABLET 768px - 1199px */

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

  .garcia-services__intro {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(240px, .9fr);

    column-gap: 28px;

    margin-bottom: 37px;
  }

  .garcia-services__title {
    font-size: clamp(2.65rem, 4.8vw, 3.8rem);
  }

  .garcia-services__intro-text {
    font-size: .99rem;
    line-height: 1.75;
  }

  .garcia-services__grid {
    gap: 18px;
  }

  .garcia-services__card {
    min-height: 585px;
    padding: 25px;
  }

  .garcia-services__card-content {
    gap: 19px;
    margin-top: 68px;
  }

  .garcia-services__card-heading h3 {
    font-size: clamp(2.45rem, 4vw, 3.25rem);
  }

  .garcia-services__card-heading p {
    font-size: .94rem;
  }

  .garcia-services__list {
    column-gap: 10px;
    row-gap: 10px;
  }

  .garcia-services__list li {
    font-size: .83rem;
    padding-left: 12px;
  }

  .garcia-services__category {
    font-size: .68rem;
    letter-spacing: .065em;
  }

}


/* MOBILE 481px - 767px */

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

  .garcia-services__intro {
    grid-template-columns: 1fr;

    gap: 20px;

    margin-bottom: 31px;
  }

  .garcia-services__title {
    max-width: 560px;
    font-size: clamp(2.65rem, 7.5vw, 3.8rem);
  }

  .garcia-services__intro-text {
    max-width: 560px;

    margin-bottom: 0;

    font-size: 1rem;
    line-height: 1.75;
  }

  .garcia-services__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .garcia-services__card {
    min-height: 535px;
    padding: 30px;
  }

  .garcia-services__card-content {
    gap: 20px;
    margin-top: 78px;
  }

  .garcia-services__card-heading h3 {
    font-size: clamp(2.8rem, 7.8vw, 3.8rem);
  }

  .garcia-services__list {
    row-gap: 10px;
    column-gap: 18px;
  }

  .garcia-services__list li {
    font-size: .91rem;
  }

  .garcia-services__photo {
    object-position: center;
  }

  .garcia-services__footnote {
    margin-top: 26px;
    font-size: .91rem;
  }

}


/* SMALL MOBILE <= 480px */

@media (max-width: 480px) {

  .garcia-services__intro {
    grid-template-columns: 1fr;

    gap: 17px;

    margin-bottom: 28px;
  }

  .garcia-services__title {
    margin-top: 15px;

    font-size: clamp(2.3rem, 9vw, 3.1rem);

    line-height: 1.1;
  }

  .garcia-services__intro-text {
    margin-bottom: 0;

    font-size: 1rem;

    line-height: 1.72;
  }

  .garcia-services__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .garcia-services__card {
    min-height: 520px;

    padding: clamp(20px, 5.5vw, 26px);

    border-radius: 10px;
  }

  .garcia-services__category {
    max-width: calc(100% - 57px);

    padding: 8px 10px;

    font-size: .66rem;

    letter-spacing: .045em;
  }

  .garcia-services__top-arrow {
    width: 42px;
    height: 42px;
  }

  .garcia-services__top-arrow svg {
    width: 19px;
    height: 19px;
  }

  .garcia-services__card-content {
    gap: 19px;
    margin-top: 72px;
  }

  .garcia-services__line {
    margin-bottom: 14px;
  }

  .garcia-services__card-heading h3 {
    font-size: clamp(2.4rem, 10vw, 3.15rem);
  }

  .garcia-services__card-heading p {
    margin-top: 11px;

    font-size: .96rem;

    line-height: 1.65;
  }

  .garcia-services__list {
    column-gap: 8px;
    row-gap: 9px;
  }

  .garcia-services__list li {
    padding-left: 12px;

    font-size: .84rem;

    line-height: 1.43;
  }

  .garcia-services__list li::before {
    width: 4px;
    height: 4px;
  }

  .garcia-services__explore {
    padding-top: 17px;
    font-size: .87rem;
  }

  .garcia-services__explore svg {
    width: 20px;
    height: 20px;
  }

  .garcia-services__footnote {
    margin-top: 24px;

    font-size: .91rem;

    text-align: left;
  }

}