/* =========================================================
   02. GALLERY HERO
   GARCIA'S LAWN MOWER
========================================================= */

.glm-gallery-hero {
  position: relative;

  width: 100%;

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

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

  overflow: hidden;

  background:
    linear-gradient(
      120deg,
      #FAF9F3 0%,
      var(--glm-ivory-100) 52%,
      #EEF4E8 100%
    );

  isolation: isolate;
}


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

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

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-gallery-hero__orbit {
  position: absolute;

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

  border-radius: 50%;
}


.glm-gallery-hero__orbit--one {
  width: 760px;
  height: 390px;

  right: -230px;
  top: -95px;

  transform:
    rotate(-13deg);
}


.glm-gallery-hero__orbit--two {
  width: 610px;
  height: 300px;

  right: -130px;
  top: -30px;

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

  transform:
    rotate(-13deg);
}


/* lawn-pass inspired lines */

.glm-gallery-hero__stripe {
  position: absolute;

  width: 520px;
  height: 130px;

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

  border-radius: 50%;
}


.glm-gallery-hero__stripe--one {
  left: -220px;
  bottom: 5%;

  transform:
    rotate(13deg);
}


.glm-gallery-hero__stripe--two {
  left: -150px;
  bottom: 9%;

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


.glm-gallery-hero__leaf {
  position: absolute;

  width: 290px;
  height: 165px;

  left: 40%;
  bottom: -95px;

  border-radius:
    100% 0 100% 0;

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

  transform:
    rotate(-18deg);
}


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

.glm-gallery-hero__container {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(0, 1.12fr);

  align-items: center;

  gap:
    clamp(3rem, 5.5vw, 6.5rem);

  height: 100%;
}


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

.glm-gallery-hero__content {
  position: relative;

  z-index: 5;

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

  min-width: 0;

  height: 100%;

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


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

.glm-gallery-hero__intro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    0.75rem;

  margin-bottom:
    clamp(1rem, 1.8vh, 1.45rem);
}


.glm-gallery-hero__brand,
.glm-gallery-hero__section-label {
  font-size:
    clamp(0.72rem, 0.76vw, 0.84rem);

  font-weight: 800;

  letter-spacing:
    0.18em;

  line-height: 1;

  text-transform:
    uppercase;
}


.glm-gallery-hero__brand {
  color:
    var(--glm-green-800);
}


.glm-gallery-hero__brand-line {
  width: 42px;
  height: 1px;

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


.glm-gallery-hero__section-label {
  color:
    var(--glm-navy-950);
}


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

.glm-gallery-hero__title {
  max-width: 760px;

  margin: 0;

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

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

  font-size:
    clamp(
      3.4rem,
      min(5.4vw, 8.5vh),
      6.4rem
    );

  font-weight: 400;

  line-height:
    0.91;

  letter-spacing:
    -0.048em;
}


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

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


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

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

  margin:
    clamp(1.1rem, 2vh, 1.6rem)
    0
    0;

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

  font-size:
    clamp(
      1rem,
      min(1.06vw, 1.9vh),
      1.13rem
    );

  line-height:
    1.65;
}


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

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

  gap:
    0.8rem;

  margin-top:
    clamp(1.2rem, 2.2vh, 1.8rem);
}


.glm-gallery-hero__button {
  position: relative;

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

  gap:
    0.7rem;

  min-height:
    54px;

  padding:
    0.85rem 1.35rem;

  overflow: hidden;

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

  font-size:
    0.92rem;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

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

    background
    350ms
    ease,

    border-color
    350ms
    ease,

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


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


/* primary */

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

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

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


.glm-gallery-hero__button--primary:hover {
  background:
    var(--glm-orange-600);

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


/* secondary */

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

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

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

  backdrop-filter:
    blur(12px);

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


.glm-gallery-hero__button--secondary:hover {
  background:
    var(--glm-green-050);

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


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


.glm-gallery-hero__button--primary:hover
.glm-gallery-hero__button-arrow {
  transform:
    translateY(4px);
}


.glm-gallery-hero__button--secondary:hover
.glm-gallery-hero__button-arrow {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   CONTEXT
========================================================= */

.glm-gallery-hero__context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    0.7rem 1.5rem;

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


.glm-gallery-hero__context-item {
  display: flex;
  align-items: center;

  gap:
    0.6rem;

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

  font-size:
    0.78rem;

  font-weight:
    700;
}


.glm-gallery-hero__context-dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  border-radius: 50%;

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

  box-shadow:
    0 0 0 5px
    rgba(85, 157, 72, 0.09);
}


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

.glm-gallery-hero__visual {
  --glm-gallery-main-x: 0px;
  --glm-gallery-main-y: 0px;

  --glm-gallery-detail-x: 0px;
  --glm-gallery-detail-y: 0px;

  --glm-gallery-care-x: 0px;
  --glm-gallery-care-y: 0px;

  --glm-gallery-backdrop-x: 0px;
  --glm-gallery-backdrop-y: 0px;

  position: relative;

  width: 100%;

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

  min-height: 0;

  align-self: center;
}


/* =========================================================
   VISUAL BACKDROP
========================================================= */

.glm-gallery-hero__visual-backdrop {
  position: absolute;

  width: 79%;
  height: 82%;

  right: 2%;
  top: 8%;

  z-index: 0;

  border-radius:
    43% 57% 57% 43% /
    55% 41% 59% 45%;

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

  transform:
    translate(
      var(--glm-gallery-backdrop-x),
      var(--glm-gallery-backdrop-y)
    )
    rotate(-5deg);

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


/* =========================================================
   FIGURES
========================================================= */

.glm-gallery-hero__figure {
  position: absolute;

  margin: 0;

  overflow: hidden;

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

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


.glm-gallery-hero__figure img {
  width: 100%;
  height: 100%;

  object-fit: cover;

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


/* main */

.glm-gallery-hero__figure--main {
  left: 13%;
  top: 2%;

  z-index: 2;

  width: 70%;
  height: 94%;

  border-radius:
    34px 34px 34px 110px;

  transform:
    translate(
      var(--glm-gallery-main-x),
      var(--glm-gallery-main-y)
    );
}


.glm-gallery-hero__figure--main img {
  transform:
    scale(1.025);
}


/* detail */

.glm-gallery-hero__figure--detail {
  left: 0;
  top: 12%;

  z-index: 4;

  width: 30%;
  height: 31%;

  border:
    7px solid
    var(--glm-ivory-100);

  border-radius:
    22px;

  box-shadow:
    0 22px 48px
    rgba(6,24,47,0.16);

  transform:
    translate(
      var(--glm-gallery-detail-x),
      var(--glm-gallery-detail-y)
    );
}


/* care */

.glm-gallery-hero__figure--care {
  right: 0;
  bottom: 6%;

  z-index: 4;

  width: 32%;
  height: 34%;

  border:
    7px solid
    var(--glm-ivory-100);

  border-radius:
    22px;

  box-shadow:
    0 22px 48px
    rgba(6,24,47,0.16);

  transform:
    translate(
      var(--glm-gallery-care-x),
      var(--glm-gallery-care-y)
    );
}


/* image hover */

html.has-fine-pointer
.glm-gallery-hero__visual:hover
.glm-gallery-hero__figure--main img {
  transform:
    scale(1.055);
}


html.has-fine-pointer
.glm-gallery-hero__visual:hover
.glm-gallery-hero__figure--detail img,
html.has-fine-pointer
.glm-gallery-hero__visual:hover
.glm-gallery-hero__figure--care img {
  transform:
    scale(1.045);
}


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

.glm-gallery-hero__image-shade {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(6, 24, 47, 0.01) 30%,
      rgba(6, 24, 47, 0.04) 62%,
      rgba(6, 24, 47, 0.28) 100%
    );
}


/* =========================================================
   VISUAL LABEL
========================================================= */

.glm-gallery-hero__visual-label {
  position: absolute;

  left: 16%;
  bottom: 7%;

  z-index: 5;

  display: flex;
  align-items: flex-start;

  gap:
    0.85rem;

  max-width:
    250px;

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

  font-size:
    0.76rem;

  line-height:
    1.4;
}


.glm-gallery-hero__visual-label-line {
  width: 32px;
  height: 2px;

  margin-top:
    0.5rem;

  flex:
    0 0 32px;

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


.glm-gallery-hero__visual-label strong {
  display: block;

  color:
    var(--glm-white);

  font-weight: 700;
}


/* =========================================================
   CAPTION
========================================================= */

.glm-gallery-hero__caption {
  position: absolute;

  right: 7%;
  top: 3%;

  z-index: 5;

  display: flex;
  flex-direction: column;

  padding:
    0.8rem 0.95rem;

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

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

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

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

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

  backdrop-filter:
    blur(12px);

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


.glm-gallery-hero__caption span {
  color:
    var(--glm-text-muted);

  font-size:
    0.65rem;

  font-weight: 700;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.glm-gallery-hero__caption strong {
  margin-top:
    0.12rem;

  font-size:
    0.8rem;
}


/* =========================================================
   SAFE REVEAL

   Nothing depends on JavaScript to be visible.
========================================================= */

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

  visibility: visible;

  transform: none;

  filter: none;
}


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

html.is-reduced-motion
.glm-gallery-hero__button,
html.is-reduced-motion
.glm-gallery-hero__button-arrow,
html.is-reduced-motion
.glm-gallery-hero__figure,
html.is-reduced-motion
.glm-gallery-hero__figure img,
html.is-reduced-motion
.glm-gallery-hero__visual-backdrop {
  transition-duration:
    0.01ms !important;

  transform: none !important;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-gallery-hero__content {
    max-width:
      760px;
  }


  .glm-gallery-hero__visual {
    max-width:
      850px;

    justify-self:
      end;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

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

  .glm-gallery-hero__container {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.05fr);

    gap:
      2rem;
  }


  .glm-gallery-hero__title {
    font-size:
      clamp(
        2.8rem,
        min(5.8vw, 7.8vh),
        4.4rem
      );
  }


  .glm-gallery-hero__description {
    font-size:
      0.95rem;
  }


  .glm-gallery-hero__button {
    min-height:
      49px;

    padding-inline:
      1rem;

    font-size:
      0.8rem;
  }


  .glm-gallery-hero__context {
    gap:
      0.6rem 1rem;
  }


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


  .glm-gallery-hero__figure--main {
    left:
      10%;

    width:
      74%;

    border-radius:
      28px 28px 28px 80px;
  }


  .glm-gallery-hero__figure--detail {
    width:
      32%;

    height:
      27%;
  }


  .glm-gallery-hero__figure--care {
    width:
      34%;

    height:
      29%;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

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

  .glm-gallery-hero__container {
    grid-template-columns:
      1fr;

    grid-template-rows:
      minmax(0, 1fr)
      clamp(190px, 30svh, 235px);

    align-items:
      stretch;

    gap:
      0.7rem;

    padding-top:
      0.85rem;

    padding-bottom:
      0.7rem;
  }


  .glm-gallery-hero__content {
    height:
      auto;

    padding:
      0;

    justify-content:
      flex-start;
  }


  .glm-gallery-hero__intro {
    margin-bottom:
      0.45rem;

    gap:
      0.55rem;
  }


  .glm-gallery-hero__brand,
  .glm-gallery-hero__section-label {
    font-size:
      0.61rem;
  }


  .glm-gallery-hero__brand-line {
    width:
      28px;
  }


  .glm-gallery-hero__title {
    max-width:
      570px;

    font-size:
      clamp(
        2.45rem,
        8.7vw,
        3.5rem
      );

    line-height:
      0.92;
  }


  .glm-gallery-hero__description {
    max-width:
      560px;

    margin-top:
      0.55rem;

    font-size:
      0.87rem;

    line-height:
      1.48;
  }


  .glm-gallery-hero__actions {
    margin-top:
      0.7rem;

    gap:
      0.5rem;
  }


  .glm-gallery-hero__button {
    min-height:
      44px;

    padding:
      0.65rem 0.85rem;

    font-size:
      0.74rem;

    border-radius:
      12px;
  }


  .glm-gallery-hero__context {
    margin-top:
      0.65rem;

    gap:
      0.5rem 1rem;
  }


  .glm-gallery-hero__context-item {
    font-size:
      0.68rem;
  }


  .glm-gallery-hero__visual {
    grid-row:
      2;

    width:
      100%;

    height:
      100%;
  }


  .glm-gallery-hero__figure--main {
    left:
      11%;

    top:
      0;

    width:
      76%;

    height:
      100%;

    border-radius:
      20px 20px 20px 52px;
  }


  .glm-gallery-hero__figure--detail {
    left:
      0;

    top:
      12%;

    width:
      25%;

    height:
      40%;

    border-width:
      5px;

    border-radius:
      15px;
  }


  .glm-gallery-hero__figure--care {
    right:
      0;

    bottom:
      8%;

    width:
      27%;

    height:
      43%;

    border-width:
      5px;

    border-radius:
      15px;
  }


  .glm-gallery-hero__caption {
    right:
      5%;

    top:
      4%;

    padding:
      0.55rem 0.65rem;
  }


  .glm-gallery-hero__caption span {
    font-size:
      0.53rem;
  }


  .glm-gallery-hero__caption strong {
    font-size:
      0.65rem;
  }


  .glm-gallery-hero__visual-label {
    left:
      14%;

    bottom:
      7%;

    max-width:
      190px;

    font-size:
      0.63rem;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-gallery-hero__container {
    grid-template-columns:
      1fr;

    grid-template-rows:
      minmax(0, 1fr)
      clamp(145px, 23svh, 180px);

    gap:
      0.45rem;

    padding-top:
      0.6rem;

    padding-bottom:
      0.5rem;
  }


  .glm-gallery-hero__content {
    height:
      auto;

    padding:
      0;
  }


  .glm-gallery-hero__intro {
    margin-bottom:
      0.35rem;

    gap:
      0.45rem;
  }


  .glm-gallery-hero__brand,
  .glm-gallery-hero__section-label {
    font-size:
      0.55rem;

    letter-spacing:
      0.15em;
  }


  .glm-gallery-hero__brand-line {
    width:
      22px;
  }


  .glm-gallery-hero__title {
    font-size:
      clamp(
        2rem,
        10vw,
        2.8rem
      );

    line-height:
      0.92;
  }


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

    font-size:
      0.78rem;

    line-height:
      1.4;
  }


  .glm-gallery-hero__actions {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      0.4rem;

    margin-top:
      0.55rem;
  }


  .glm-gallery-hero__button {
    min-width:
      0;

    min-height:
      40px;

    padding:
      0.5rem;

    font-size:
      0.64rem;
  }


  .glm-gallery-hero__context {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      0.35rem;

    margin-top:
      0.5rem;
  }


  .glm-gallery-hero__context-item {
    gap:
      0.4rem;

    font-size:
      0.58rem;
  }


  .glm-gallery-hero__context-dot {
    width:
      5px;

    height:
      5px;

    flex-basis:
      5px;

    box-shadow:
      0 0 0 3px
      rgba(85,157,72,0.08);
  }


  .glm-gallery-hero__visual {
    grid-row:
      2;

    height:
      100%;
  }


  .glm-gallery-hero__visual-backdrop {
    width:
      82%;

    height:
      88%;

    right:
      2%;

    top:
      6%;
  }


  .glm-gallery-hero__figure--main {
    left:
      9%;

    top:
      0;

    width:
      80%;

    height:
      100%;

    border-radius:
      16px 16px 16px 42px;
  }


  .glm-gallery-hero__figure--detail {
    left:
      0;

    top:
      13%;

    width:
      24%;

    height:
      42%;

    border-width:
      4px;

    border-radius:
      12px;
  }


  .glm-gallery-hero__figure--care {
    right:
      0;

    bottom:
      8%;

    width:
      26%;

    height:
      43%;

    border-width:
      4px;

    border-radius:
      12px;
  }


  .glm-gallery-hero__caption {
    display:
      none;
  }


  .glm-gallery-hero__visual-label {
    left:
      12%;

    bottom:
      7%;

    max-width:
      165px;

    gap:
      0.5rem;

    font-size:
      0.55rem;
  }


  .glm-gallery-hero__visual-label-line {
    width:
      23px;

    flex-basis:
      23px;
  }

}






























































/* =========================================================
   03. SERVICE NAVIGATION
   GARCIA'S LAWN MOWER
========================================================= */

.glm-gallery-nav {
  position: relative;

  padding:
    clamp(2.5rem, 4vw, 4rem)
    0;

  overflow: hidden;

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

  isolation: isolate;
}


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

.glm-gallery-nav__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-gallery-nav__orbit {
  position: absolute;

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

  border-radius: 50%;
}


.glm-gallery-nav__orbit--one {
  width: 590px;
  height: 230px;

  right: -220px;
  top: -75px;

  transform:
    rotate(-14deg);
}


.glm-gallery-nav__orbit--two {
  width: 460px;
  height: 170px;

  right: -145px;
  top: -25px;

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

  transform:
    rotate(-14deg);
}


.glm-gallery-nav__leaf {
  position: absolute;

  border-radius:
    100% 0 100% 0;

  background:
    rgba(145, 203, 113, 0.055);
}


.glm-gallery-nav__leaf--one {
  width: 220px;
  height: 120px;

  left: -80px;
  bottom: -30px;

  transform:
    rotate(-18deg);
}


.glm-gallery-nav__leaf--two {
  width: 140px;
  height: 80px;

  left: 45px;
  bottom: -25px;

  opacity: 0.55;

  transform:
    rotate(15deg);
}


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

.glm-gallery-nav__shell {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(250px, 0.38fr)
    minmax(0, 1.62fr);

  align-items: stretch;

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

  padding:
    clamp(1.7rem, 2.8vw, 2.8rem);

  overflow: hidden;

  color:
    var(--glm-white);

  background:
    linear-gradient(
      145deg,
      var(--glm-navy-950) 0%,
      #082A3B 58%,
      #0A3A31 100%
    );

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

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

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


.glm-gallery-nav__shell::before {
  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  right: -180px;
  bottom: -210px;

  border:
    1px solid
    rgba(145, 203, 113, 0.13);

  border-radius: 50%;

  pointer-events: none;
}


.glm-gallery-nav__shell::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -135px;
  bottom: -170px;

  border:
    1px solid
    rgba(243, 106, 22, 0.08);

  border-radius: 50%;

  pointer-events: none;
}


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

.glm-gallery-nav__intro {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  justify-content: center;

  min-width: 0;
}


.glm-gallery-nav__eyebrow {
  display: inline-block;

  margin-bottom:
    0.75rem;

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

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.glm-gallery-nav__title {
  max-width:
    360px;

  margin: 0;

  color:
    var(--glm-white);

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

  font-size:
    clamp(
      1.9rem,
      2.6vw,
      3.1rem
    );

  font-weight:
    400;

  line-height:
    1.02;

  letter-spacing:
    -0.03em;
}


.glm-gallery-nav__title span {
  display: block;

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


.glm-gallery-nav__intro p {
  max-width:
    320px;

  margin:
    1rem 0 0;

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

  font-size:
    0.88rem;

  line-height:
    1.55;
}


/* =========================================================
   SCROLLER
========================================================= */

.glm-gallery-nav__scroller {
  position: relative;

  z-index: 2;

  min-width: 0;
}


/* =========================================================
   LINKS GRID
========================================================= */

.glm-gallery-nav__links {
  display: grid;

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

  gap:
    0.55rem;
}


/* =========================================================
   SERVICE LINK
========================================================= */

.glm-gallery-nav__link {
  position: relative;

  display: grid;

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

  align-items: center;

  gap:
    0.7rem;

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

  padding:
    0.85rem 0.9rem;

  overflow: hidden;

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

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

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

  border-radius:
    13px;

  transition:
    color
    300ms
    ease,

    background
    300ms
    ease,

    border-color
    300ms
    ease,

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

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


.glm-gallery-nav__link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

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

  transform:
    scaleX(0);

  transform-origin:
    left center;

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


/* =========================================================
   DOT
========================================================= */

.glm-gallery-nav__link-dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  border-radius: 50%;

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

  box-shadow:
    0 0 0 4px
    rgba(115, 184, 90, 0.09);

  transition:
    background
    300ms
    ease,

    box-shadow
    300ms
    ease;
}


/* =========================================================
   NAME
========================================================= */

.glm-gallery-nav__link-name {
  overflow: hidden;

  font-size:
    0.87rem;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;
}


/* =========================================================
   ARROW
========================================================= */

.glm-gallery-nav__link-arrow {
  color:
    var(--glm-green-400);

  opacity: 0.55;

  transition:
    opacity
    300ms
    ease,

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


/* =========================================================
   HOVER
========================================================= */

html.has-fine-pointer
.glm-gallery-nav__link:hover {
  color:
    var(--glm-white);

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

  border-color:
    rgba(145, 203, 113, 0.16);

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.10);
}


html.has-fine-pointer
.glm-gallery-nav__link:hover::after {
  transform:
    scaleX(1);
}


html.has-fine-pointer
.glm-gallery-nav__link:hover
.glm-gallery-nav__link-arrow {
  opacity: 1;

  transform:
    translate(3px, 3px);
}


/* =========================================================
   ACTIVE
========================================================= */

.glm-gallery-nav__link.is-active {
  color:
    var(--glm-white);

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

  border-color:
    rgba(145, 203, 113, 0.20);
}


.glm-gallery-nav__link.is-active::after {
  transform:
    scaleX(1);
}


.glm-gallery-nav__link.is-active
.glm-gallery-nav__link-dot {
  background:
    var(--glm-orange-400);

  box-shadow:
    0 0 0 5px
    rgba(243, 106, 22, 0.12);
}


.glm-gallery-nav__link.is-active
.glm-gallery-nav__link-arrow {
  opacity: 1;
}


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

html.is-reduced-motion
.glm-gallery-nav__link,
html.is-reduced-motion
.glm-gallery-nav__link::after,
html.is-reduced-motion
.glm-gallery-nav__link-dot,
html.is-reduced-motion
.glm-gallery-nav__link-arrow {
  transition-duration:
    0.01ms !important;

  transform:
    none !important;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-gallery-nav__links {
    align-content: center;
  }


  .glm-gallery-nav__link {
    min-height:
      64px;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

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

  .glm-gallery-nav__shell {
    grid-template-columns:
      220px minmax(0, 1fr);

    gap:
      2rem;

    padding:
      1.7rem;
  }


  .glm-gallery-nav__links {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .glm-gallery-nav__link {
    min-height:
      58px;

    padding:
      0.75rem;
  }


  .glm-gallery-nav__link-name {
    font-size:
      0.8rem;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

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

  .glm-gallery-nav {
    padding:
      2.5rem 0;
  }


  .glm-gallery-nav__shell {
    display: block;

    padding:
      1.5rem;

    border-radius:
      22px;
  }


  .glm-gallery-nav__intro {
    max-width:
      520px;

    margin-bottom:
      1.5rem;
  }


  .glm-gallery-nav__title {
    max-width:
      500px;
  }


  .glm-gallery-nav__scroller {
    width:
      calc(100% + 1.5rem);

    overflow-x:
      auto;

    overflow-y:
      hidden;

    margin-right:
      -1.5rem;

    padding-right:
      1.5rem;

    padding-bottom:
      0.5rem;

    scrollbar-width:
      none;

    overscroll-behavior-inline:
      contain;

    scroll-snap-type:
      x proximity;
  }


  .glm-gallery-nav__scroller::-webkit-scrollbar {
    display: none;
  }


  .glm-gallery-nav__links {
    display: flex;

    width:
      max-content;

    gap:
      0.55rem;
  }


  .glm-gallery-nav__link {
    width:
      auto;

    min-width:
      175px;

    min-height:
      58px;

    scroll-snap-align:
      start;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-gallery-nav {
    padding:
      2rem 0;
  }


  .glm-gallery-nav__shell {
    display: block;

    padding:
      1.2rem;

    border-radius:
      18px;
  }


  .glm-gallery-nav__intro {
    margin-bottom:
      1.25rem;
  }


  .glm-gallery-nav__eyebrow {
    margin-bottom:
      0.55rem;

    font-size:
      0.62rem;
  }


  .glm-gallery-nav__title {
    font-size:
      1.9rem;
  }


  .glm-gallery-nav__intro p {
    margin-top:
      0.65rem;

    font-size:
      0.82rem;
  }


  .glm-gallery-nav__scroller {
    width:
      calc(100% + 1.2rem);

    overflow-x:
      auto;

    overflow-y:
      hidden;

    margin-right:
      -1.2rem;

    padding-right:
      1.2rem;

    padding-bottom:
      0.4rem;

    scrollbar-width:
      none;

    overscroll-behavior-inline:
      contain;

    scroll-snap-type:
      x proximity;
  }


  .glm-gallery-nav__scroller::-webkit-scrollbar {
    display: none;
  }


  .glm-gallery-nav__links {
    display: flex;

    width:
      max-content;

    gap:
      0.45rem;
  }


  .glm-gallery-nav__link {
    min-width:
      155px;

    min-height:
      55px;

    padding:
      0.7rem;

    scroll-snap-align:
      start;
  }


  .glm-gallery-nav__link-name {
    font-size:
      0.78rem;
  }

}






























































/* =========================================================
   04. GALLERY INTRODUCTION
   GARCIA'S LAWN MOWER
========================================================= */

.glm-gallery-intro {
  position: relative;

  overflow: hidden;

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

  isolation: isolate;
}


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

.glm-gallery-intro__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-gallery-intro__curve {
  position: absolute;

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

  border-radius: 50%;
}


.glm-gallery-intro__curve--one {
  width: 760px;
  height: 270px;

  left: -280px;
  top: 5%;

  transform:
    rotate(13deg);
}


.glm-gallery-intro__curve--two {
  width: 610px;
  height: 210px;

  left: -190px;
  top: 11%;

  transform:
    rotate(13deg);
}


.glm-gallery-intro__leaf {
  position: absolute;

  border-radius:
    100% 0 100% 0;

  background:
    rgba(145, 203, 113, 0.065);
}


.glm-gallery-intro__leaf--one {
  width: 280px;
  height: 155px;

  right: -85px;
  bottom: -40px;

  transform:
    rotate(18deg);
}


.glm-gallery-intro__leaf--two {
  width: 175px;
  height: 100px;

  right: 70px;
  bottom: -35px;

  opacity: 0.5;

  transform:
    rotate(-14deg);
}


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

.glm-gallery-intro__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, 0.72fr);

  align-items: center;

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


/* =========================================================
   HEADING
========================================================= */

.glm-gallery-intro__heading {
  max-width:
    900px;
}


.glm-gallery-intro__title {
  margin: 0;

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

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

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

  font-weight: 400;

  line-height:
    0.98;

  letter-spacing:
    -0.045em;
}


.glm-gallery-intro__title span {
  display: block;

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


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

.glm-gallery-intro__content {
  position: relative;

  padding:
    clamp(1.7rem, 2.8vw, 2.6rem);

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

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

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

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

  backdrop-filter:
    blur(12px);

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


.glm-gallery-intro__content::before {
  content: "";

  position: absolute;

  left: 0;
  top: 2rem;

  width: 3px;
  height: 68px;

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

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


.glm-gallery-intro__lead {
  margin: 0;

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

  font-size:
    1rem;

  line-height:
    1.7;
}


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

.glm-gallery-intro__details {
  display: grid;

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

  gap:
    0.8rem;

  margin-top:
    1.8rem;
}


.glm-gallery-intro__detail {
  display: flex;
  align-items: center;

  gap:
    0.7rem;

  min-width: 0;

  padding:
    0.85rem;

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

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

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


.glm-gallery-intro__detail-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  flex:
    0 0 40px;

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

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

  border-radius: 50%;
}


.glm-gallery-intro__detail-icon svg {
  width: 20px;
  height: 20px;

  fill: currentColor;
}


.glm-gallery-intro__detail
> span:last-child {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 0.1rem;
}


.glm-gallery-intro__detail small {
  color:
    var(--glm-text-muted);

  font-size:
    0.6rem;

  font-weight: 800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.glm-gallery-intro__detail strong {
  color:
    var(--glm-navy-950);

  font-size:
    0.77rem;

  line-height:
    1.3;
}


/* =========================================================
   BOTTOM ACTIONS
========================================================= */

.glm-gallery-intro__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    1rem;

  margin-top:
    1.6rem;

  padding-top:
    1.3rem;

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


/* =========================================================
   START LINK
========================================================= */

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

  gap:
    0.55rem;

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

  font-size:
    0.8rem;

  font-weight:
    800;
}


.glm-gallery-intro__start-arrow {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  color:
    var(--glm-white);

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

  border-radius: 50%;

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


html.has-fine-pointer
.glm-gallery-intro__start:hover
.glm-gallery-intro__start-arrow {
  transform:
    translateY(4px);
}


/* =========================================================
   ESTIMATE LINK
========================================================= */

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

  gap:
    0.45rem;

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

  font-size:
    0.75rem;

  font-weight:
    800;

  transition:
    color
    300ms
    ease;
}


html.has-fine-pointer
.glm-gallery-intro__estimate:hover {
  color:
    var(--glm-orange-600);
}


/* =========================================================
   FOOTER LINE
========================================================= */

.glm-gallery-intro__footer {
  display: grid;

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

  align-items: center;

  gap:
    1.2rem;

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


.glm-gallery-intro__footer-line {
  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(52, 123, 55, 0.06),
      rgba(52, 123, 55, 0.26)
    );
}


.glm-gallery-intro__footer p {
  margin: 0;

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

  font-size:
    0.76rem;

  font-weight:
    650;
}


.glm-gallery-intro__footer-mark {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

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

  background:
    rgba(243, 106, 22, 0.08);

  border-radius: 50%;
}


/* =========================================================
   SAFE REVEAL
========================================================= */

.glm-gallery-intro
[data-gallery-intro-reveal] {
  opacity: 1;

  visibility: visible;

  transform: none;

  filter: none;
}


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

html.is-reduced-motion
.glm-gallery-intro__start-arrow,
html.is-reduced-motion
.glm-gallery-intro__estimate {
  transition-duration:
    0.01ms !important;

  transform:
    none !important;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-gallery-intro__content {
    max-width:
      540px;

    justify-self:
      end;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

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

  .glm-gallery-intro__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(290px, 0.75fr);

    gap:
      3rem;
  }


  .glm-gallery-intro__title {
    font-size:
      clamp(
        2.7rem,
        5vw,
        4.2rem
      );
  }


  .glm-gallery-intro__details {
    grid-template-columns:
      1fr;
  }


  .glm-gallery-intro__bottom {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

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

  .glm-gallery-intro__layout {
    grid-template-columns:
      1fr;

    gap:
      2.4rem;
  }


  .glm-gallery-intro__heading {
    max-width:
      620px;
  }


  .glm-gallery-intro__title {
    font-size:
      clamp(
        2.6rem,
        8.5vw,
        4rem
      );
  }


  .glm-gallery-intro__content {
    max-width:
      620px;
  }


  .glm-gallery-intro__footer {
    grid-template-columns:
      50px 1fr auto;

    margin-top:
      3rem;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-gallery-intro__layout {
    grid-template-columns:
      1fr;

    gap:
      2rem;
  }


  .glm-gallery-intro__title {
    font-size:
      clamp(
        2.25rem,
        11.5vw,
        3.2rem
      );
  }


  .glm-gallery-intro__content {
    padding:
      1.25rem;

    border-radius:
      18px;
  }


  .glm-gallery-intro__lead {
    font-size:
      0.9rem;
  }


  .glm-gallery-intro__details {
    grid-template-columns:
      1fr;

    gap:
      0.6rem;

    margin-top:
      1.3rem;
  }


  .glm-gallery-intro__detail {
    padding:
      0.75rem;
  }


  .glm-gallery-intro__bottom {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0.9rem;
  }


  .glm-gallery-intro__start {
    justify-content:
      space-between;

    min-height:
      44px;
  }


  .glm-gallery-intro__estimate {
    justify-content:
      space-between;

    min-height:
      42px;

    padding-top:
      0.75rem;

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


  .glm-gallery-intro__footer {
    grid-template-columns:
      30px minmax(0, 1fr);

    gap:
      0.75rem;

    margin-top:
      2.5rem;
  }


  .glm-gallery-intro__footer p {
    font-size:
      0.7rem;
  }


  .glm-gallery-intro__footer-mark {
    display:
      none;
  }

}






























































/* =========================================================
   GENERAL GALLERY EXPERIENCE
   GARCIA'S LAWN MOWER
========================================================= */

.glm-gallery-experience {
  position: relative;

  overflow: hidden;

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

  isolation: isolate;
}


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

.glm-gallery-experience__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-gallery-experience__blob {
  position: absolute;

  border-radius:
    46% 54% 63% 37% /
    54% 43% 57% 46%;

  background:
    rgba(145, 203, 113, 0.09);
}


.glm-gallery-experience__blob--one {
  width:
    clamp(420px, 46vw, 850px);

  height:
    clamp(340px, 38vw, 690px);

  right:
    -12%;

  top:
    2%;

  transform:
    rotate(-10deg);
}


.glm-gallery-experience__blob--two {
  width:
    clamp(330px, 35vw, 650px);

  height:
    clamp(250px, 28vw, 510px);

  left:
    -16%;

  bottom:
    3%;

  opacity:
    0.6;

  transform:
    rotate(19deg);
}


.glm-gallery-experience__orbit {
  position: absolute;

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

  border-radius:
    50%;
}


.glm-gallery-experience__orbit--one {
  width:
    740px;

  height:
    270px;

  right:
    -260px;

  top:
    9%;

  transform:
    rotate(-14deg);
}


.glm-gallery-experience__orbit--two {
  width:
    590px;

  height:
    210px;

  right:
    -170px;

  top:
    calc(9% + 55px);

  transform:
    rotate(-14deg);
}


.glm-gallery-experience__leaf {
  position: absolute;

  border-radius:
    100% 0 100% 0;

  background:
    rgba(52, 123, 55, 0.075);
}


.glm-gallery-experience__leaf--one {
  width:
    110px;

  height:
    62px;

  left:
    39%;

  top:
    6%;

  transform:
    rotate(28deg);
}


.glm-gallery-experience__leaf--two {
  width:
    150px;

  height:
    82px;

  right:
    3%;

  bottom:
    7%;

  transform:
    rotate(-24deg);
}


/* =========================================================
   TOP LAYOUT
========================================================= */

.glm-gallery-experience__top {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);

  align-items: center;

  gap:
    clamp(3rem, 6vw, 7rem);
}


/* =========================================================
   COPY
========================================================= */

.glm-gallery-experience__copy {
  position: relative;

  z-index: 5;

  max-width:
    590px;
}


.glm-gallery-experience__title {
  margin:
    0;

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

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

  font-size:
    clamp(
      3.2rem,
      5.2vw,
      6.15rem
    );

  font-weight:
    400;

  line-height:
    0.93;

  letter-spacing:
    -0.047em;
}


.glm-gallery-experience__title span {
  display:
    block;

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


.glm-gallery-experience__description {
  max-width:
    530px;

  margin:
    1.5rem 0 0;

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

  font-size:
    1rem;

  line-height:
    1.72;
}


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

.glm-gallery-experience__actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  gap:
    0.7rem;

  margin-top:
    2rem;
}


/* =========================================================
   OPEN BUTTON
========================================================= */

.glm-gallery-experience__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap:
    0.7rem;

  min-height:
    58px;

  padding:
    0.8rem 1.25rem;

  color:
    var(--glm-white);

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

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

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

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

  font-size:
    0.84rem;

  font-weight:
    800;

  cursor:
    pointer;

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

    background
    300ms
    ease,

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


.glm-gallery-experience__open-icon {
  display:
    grid;

  place-items:
    center;
}


.glm-gallery-experience__open-icon svg {
  width:
    20px;

  height:
    20px;

  fill:
    currentColor;
}


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


html.has-fine-pointer
.glm-gallery-experience__open:hover {
  background:
    var(--glm-orange-600);

  transform:
    translateY(-3px);

  box-shadow:
    0 19px 40px
    rgba(243, 106, 22, 0.25);
}


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


/* =========================================================
   PHOTO COUNT
========================================================= */

.glm-gallery-experience__count {
  display: flex;
  align-items: center;

  gap:
    0.7rem;

  min-height:
    58px;

  padding:
    0.7rem 1rem;

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

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

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

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


.glm-gallery-experience__count-icon {
  display:
    grid;

  place-items:
    center;

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


.glm-gallery-experience__count-icon svg {
  width:
    22px;

  height:
    22px;

  fill:
    currentColor;
}


.glm-gallery-experience__count
> span:last-child {
  display: flex;
  flex-direction: column;

  gap:
    0.06rem;
}


.glm-gallery-experience__count strong {
  font-size:
    0.88rem;
}


.glm-gallery-experience__count small {
  color:
    var(--glm-text-muted);

  font-size:
    0.64rem;
}


/* =========================================================
   STATUS
========================================================= */

.glm-gallery-experience__status {
  display: flex;
  align-items: flex-start;

  gap:
    0.8rem;

  margin-top:
    1.8rem;
}


.glm-gallery-experience__status-line {
  width:
    42px;

  height:
    2px;

  margin-top:
    0.7rem;

  flex:
    0 0 42px;

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


.glm-gallery-experience__status
> span:last-child {
  display: flex;
  flex-direction: column;

  gap:
    0.1rem;
}


.glm-gallery-experience__status small {
  color:
    var(--glm-text-muted);

  font-size:
    0.62rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.glm-gallery-experience__status strong {
  color:
    var(--glm-navy-950);

  font-size:
    0.85rem;
}


/* =========================================================
   STAGE
========================================================= */

.glm-gallery-stage {
  position: relative;

  width:
    100%;

  min-width:
    0;

  height:
    clamp(500px, 48vw, 720px);
}


/* =========================================================
   BACKDROP
========================================================= */

.glm-gallery-stage__backdrop {
  position: absolute;

  z-index:
    0;

  width:
    78%;

  height:
    84%;

  right:
    2%;

  top:
    8%;

  border-radius:
    47% 53% 62% 38% /
    54% 42% 58% 46%;

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

  transform:
    rotate(-5deg);
}


/* =========================================================
   GENERAL IMAGE FOUNDATION
========================================================= */

.glm-gallery-media {
  position: relative;

  overflow: hidden;

  padding:
    0;

  border:
    0;

  font: inherit;

  cursor:
    pointer;

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


.glm-gallery-media img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* error state */

.glm-gallery-media.is-image-error::after {
  content:
    "Image unavailable";

  position: absolute;
  inset: 0;

  z-index: 10;

  display: grid;
  place-items: center;

  padding:
    1rem;

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

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

  font-size:
    0.75rem;

  font-weight:
    700;

  text-align:
    center;
}


/* =========================================================
   MAIN PHOTO
========================================================= */

.glm-gallery-stage__main {
  position: absolute;

  z-index:
    2;

  left:
    4%;

  top:
    6%;

  width:
    78%;

  height:
    84%;

  border:
    6px solid
    rgba(255,255,255,0.88);

  border-radius:
    32px;

  box-shadow:
    0 30px 80px
    rgba(6,24,47,0.15);
}


.glm-gallery-stage__main img {
  transform:
    scale(1.015);

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


html.has-fine-pointer
.glm-gallery-stage__main:hover img {
  transform:
    scale(1.045);
}


/* =========================================================
   MAIN SHADE
========================================================= */

.glm-gallery-stage__shade {
  position: absolute;
  inset: 0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(6,24,47,0.30) 100%
    );
}


/* =========================================================
   MAIN META
========================================================= */

.glm-gallery-stage__main-meta {
  position: absolute;

  z-index:
    3;

  left:
    1.25rem;

  bottom:
    1.2rem;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap:
    0.1rem;

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


.glm-gallery-stage__main-meta small {
  color:
    rgba(255,255,255,0.68);

  font-size:
    0.61rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.glm-gallery-stage__main-meta strong {
  font-size:
    0.88rem;
}


/* =========================================================
   EXPAND
========================================================= */

.glm-gallery-stage__expand {
  position: absolute;

  z-index:
    3;

  right:
    1.15rem;

  bottom:
    1.15rem;

  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

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

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

  border-radius:
    50%;

  backdrop-filter:
    blur(12px);

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

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


.glm-gallery-stage__expand svg {
  width:
    20px;

  height:
    20px;

  fill:
    currentColor;
}


html.has-fine-pointer
.glm-gallery-stage__main:hover
.glm-gallery-stage__expand {
  transform:
    scale(1.08);
}


/* =========================================================
   FLOATING PHOTOS
========================================================= */

.glm-gallery-stage__float {
  position: absolute;

  z-index:
    4;

  border:
    5px solid
    rgba(255,255,255,0.94);

  border-radius:
    22px;

  box-shadow:
    0 22px 55px
    rgba(6,24,47,0.16);

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

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


.glm-gallery-stage__float--one {
  width:
    31%;

  height:
    34%;

  right:
    0;

  top:
    2%;

  transform:
    rotate(2.5deg);
}


.glm-gallery-stage__float--two {
  width:
    34%;

  height:
    31%;

  right:
    -1%;

  bottom:
    3%;

  transform:
    rotate(-2deg);
}


.glm-gallery-stage__float img {
  transition:
    transform
    850ms
    var(--glm-ease-expo);
}


html.has-fine-pointer
.glm-gallery-stage__float:hover {
  z-index:
    6;

  box-shadow:
    0 30px 65px
    rgba(6,24,47,0.20);
}


html.has-fine-pointer
.glm-gallery-stage__float--one:hover {
  transform:
    rotate(0)
    translateY(-5px);
}


html.has-fine-pointer
.glm-gallery-stage__float--two:hover {
  transform:
    rotate(0)
    translateY(-5px);
}


html.has-fine-pointer
.glm-gallery-stage__float:hover img {
  transform:
    scale(1.045);
}


/* =========================================================
   FLOATING IMAGE DETAILS
========================================================= */

.glm-gallery-stage__float-shade {
  position: absolute;
  inset: 0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(6,24,47,0.22)
    );
}


.glm-gallery-stage__float-label {
  position: absolute;

  left:
    0.7rem;

  bottom:
    0.7rem;

  padding:
    0.4rem 0.6rem;

  color:
    var(--glm-white);

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

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

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

  backdrop-filter:
    blur(9px);

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

  font-size:
    0.58rem;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


/* =========================================================
   STAGE NAVIGATION
========================================================= */

.glm-gallery-stage__navigation {
  position: absolute;

  z-index:
    7;

  left:
    0;

  bottom:
    1%;

  display: flex;

  gap:
    0.45rem;
}


.glm-gallery-stage__nav-button {
  display: grid;
  place-items: center;

  width:
    48px;

  height:
    48px;

  padding:
    0;

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

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

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

  border-radius:
    50%;

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

  cursor:
    pointer;

  transition:
    color
    300ms
    ease,

    background
    300ms
    ease,

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


.glm-gallery-stage__nav-button svg {
  width:
    22px;

  height:
    22px;

  fill:
    currentColor;
}


html.has-fine-pointer
.glm-gallery-stage__nav-button:hover {
  color:
    var(--glm-white);

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

  transform:
    translateY(-2px);
}


/* =========================================================
   RIBBON
========================================================= */

.glm-gallery-ribbon {
  position: relative;

  margin-top:
    clamp(3.5rem, 6vw, 6rem);

  padding:
    clamp(1.8rem, 3vw, 2.8rem)
    clamp(1rem, 2.3vw, 2rem)
    1.4rem;

  isolation:
    isolate;
}


.glm-gallery-ribbon::before {
  content: "";

  position: absolute;

  z-index:
    -1;

  inset:
    6% -8% 3%;

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

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

  border-radius:
    48% 52% 12% 12% /
    11% 13% 12% 13%;

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


/* =========================================================
   RIBBON TOP
========================================================= */

.glm-gallery-ribbon__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap:
    2rem;

  margin-bottom:
    1.9rem;
}


.glm-gallery-ribbon__eyebrow {
  color:
    var(--glm-green-800);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.glm-gallery-ribbon__top p {
  margin:
    0.4rem 0 0;

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

  font-size:
    0.82rem;
}


.glm-gallery-ribbon__hint {
  color:
    var(--glm-text-muted);

  font-size:
    0.68rem;

  font-weight:
    700;
}


/* =========================================================
   RIBBON VIEWPORT
========================================================= */

.glm-gallery-ribbon__viewport {
  position: relative;

  width:
    100%;

  padding:
    1rem 0 1.6rem;

  overflow:
    hidden;

  touch-action:
    pan-y;
}


/* =========================================================
   RIBBON TRACK
========================================================= */

.glm-gallery-ribbon__track {
  display: grid;

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

  align-items: center;

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


/* =========================================================
   THUMB
========================================================= */

.glm-gallery-thumb {
  position: relative;

  width:
    100%;

  height:
    clamp(190px, 18vw, 290px);

  border:
    4px solid
    rgba(255,255,255,0.92);

  border-radius:
    20px;

  box-shadow:
    0 17px 38px
    rgba(6,24,47,0.10);

  transform-origin:
    center;

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

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

    border-color
    350ms
    ease,

    opacity
    350ms
    ease;
}


/* curved composition */

.glm-gallery-thumb:nth-child(1) {
  transform:
    translateY(21px)
    rotate(-4deg)
    scale(0.93);
}


.glm-gallery-thumb:nth-child(2) {
  transform:
    translateY(7px)
    rotate(-1.7deg)
    scale(0.98);
}


.glm-gallery-thumb:nth-child(3) {
  transform:
    translateY(-7px)
    scale(1.045);
}


.glm-gallery-thumb:nth-child(4) {
  transform:
    translateY(7px)
    rotate(1.7deg)
    scale(0.98);
}


.glm-gallery-thumb:nth-child(5) {
  transform:
    translateY(21px)
    rotate(4deg)
    scale(0.93);
}


.glm-gallery-thumb:not(.is-active) {
  opacity:
    0.86;
}


.glm-gallery-thumb.is-active {
  z-index:
    3;

  border-color:
    rgba(85,157,72,0.75);

  box-shadow:
    0 22px 50px
    rgba(6,24,47,0.15);
}


.glm-gallery-thumb img {
  transition:
    transform
    800ms
    var(--glm-ease-expo);
}


html.has-fine-pointer
.glm-gallery-thumb:hover {
  z-index:
    4;

  opacity:
    1;

  transform:
    translateY(-10px)
    rotate(0)
    scale(1.03);
}


html.has-fine-pointer
.glm-gallery-thumb:hover img {
  transform:
    scale(1.05);
}


/* =========================================================
   THUMB NUMBER
========================================================= */

.glm-gallery-thumb__number {
  position: absolute;

  right:
    0.65rem;

  bottom:
    0.65rem;

  z-index:
    3;

  display: grid;
  place-items: center;

  min-width:
    34px;

  height:
    29px;

  padding-inline:
    0.5rem;

  color:
    var(--glm-white);

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

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

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

  backdrop-filter:
    blur(8px);

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

  font-size:
    0.62rem;

  font-weight:
    800;
}


/* =========================================================
   RIBBON FOOTER / PROGRESS
========================================================= */

.glm-gallery-ribbon__footer {
  display: grid;

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

  align-items: center;

  gap:
    0.9rem;

  max-width:
    580px;

  margin:
    1.4rem auto 0;
}


.glm-gallery-ribbon__footer
> span {
  display: inline-flex;
  align-items: baseline;

  gap:
    0.15rem;

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

  font-size:
    0.68rem;

  font-weight:
    700;
}


.glm-gallery-ribbon__footer strong {
  color:
    var(--glm-green-800);

  font-size:
    0.82rem;
}


.glm-gallery-ribbon__footer small {
  font-size:
    0.62rem;
}


.glm-gallery-ribbon__progress {
  position: relative;

  width:
    100%;

  height:
    4px;

  overflow: hidden;

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

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


.glm-gallery-ribbon__progress span {
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width:
    0;

  background:
    linear-gradient(
      90deg,
      var(--glm-green-600),
      var(--glm-green-800)
    );

  border-radius:
    inherit;

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


/* =========================================================
   FULLSCREEN VIEWER
   Inserted directly into body by JavaScript.
========================================================= */

.glm-gallery-viewer {
  position: fixed;
  inset: 0;

  z-index:
    50000;

  display: grid;

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

  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));

  color:
    var(--glm-white);

  background:
    rgba(4, 15, 28, 0.96);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity
    350ms
    ease,

    visibility
    350ms
    ease;
}


.glm-gallery-viewer.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


/* =========================================================
   VIEWER TOP
========================================================= */

.glm-gallery-viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    1rem;

  min-height:
    56px;
}


.glm-gallery-viewer__brand {
  display: flex;
  flex-direction: column;

  gap:
    0.05rem;
}


.glm-gallery-viewer__brand small {
  color:
    rgba(255,255,255,0.48);

  font-size:
    0.58rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.glm-gallery-viewer__brand strong {
  color:
    var(--glm-white);

  font-size:
    0.82rem;
}


/* =========================================================
   VIEWER BUTTONS
========================================================= */

.glm-gallery-viewer__close,
.glm-gallery-viewer__nav {
  display: grid;
  place-items: center;

  padding: 0;

  color:
    var(--glm-white);

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

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

  border-radius:
    50%;

  cursor:
    pointer;
}


.glm-gallery-viewer__close {
  width:
    46px;

  height:
    46px;
}


.glm-gallery-viewer__nav {
  position: absolute;

  z-index:
    4;

  top:
    50%;

  width:
    52px;

  height:
    52px;

  transform:
    translateY(-50%);
}


.glm-gallery-viewer__nav--prev {
  left:
    1rem;
}


.glm-gallery-viewer__nav--next {
  right:
    1rem;
}


.glm-gallery-viewer__close svg,
.glm-gallery-viewer__nav svg {
  width:
    21px;

  height:
    21px;

  fill:
    currentColor;
}


/* =========================================================
   VIEWER STAGE
========================================================= */

.glm-gallery-viewer__stage {
  position: relative;

  display: grid;
  place-items: center;

  min-height: 0;

  overflow: hidden;
}


.glm-gallery-viewer__image {
  display: block;

  max-width:
    min(92vw, 1500px);

  max-height:
    calc(100svh - 150px);

  width:
    auto;

  height:
    auto;

  object-fit:
    contain;

  border-radius:
    14px;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,0.35);
}


/* =========================================================
   VIEWER FOOTER
========================================================= */

.glm-gallery-viewer__footer {
  display: flex;
  justify-content: center;

  padding-top:
    0.75rem;

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

  font-size:
    0.72rem;

  font-weight:
    700;
}


/* =========================================================
   SAFE REVEAL
========================================================= */

.glm-gallery-experience
[data-gallery-reveal] {
  opacity:
    1;

  visibility:
    visible;

  transform:
    none;

  filter:
    none;
}


/* =========================================================
   REDUCED MOTION
   No fifth media query.
========================================================= */

html.is-reduced-motion
.glm-gallery-stage__main img,
html.is-reduced-motion
.glm-gallery-stage__float,
html.is-reduced-motion
.glm-gallery-stage__float img,
html.is-reduced-motion
.glm-gallery-stage__expand,
html.is-reduced-motion
.glm-gallery-thumb,
html.is-reduced-motion
.glm-gallery-thumb img,
html.is-reduced-motion
.glm-gallery-ribbon__progress span,
html.is-reduced-motion
.glm-gallery-experience__open,
html.is-reduced-motion
.glm-gallery-experience__open-arrow,
html.is-reduced-motion
.glm-gallery-stage__nav-button,
html.is-reduced-motion
.glm-gallery-viewer {
  transition-duration:
    0.01ms !important;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-gallery-experience__top {
    min-height:
      720px;
  }


  .glm-gallery-stage {
    justify-self:
      end;

    max-width:
      900px;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

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

  .glm-gallery-experience__top {
    grid-template-columns:
      minmax(280px, 0.78fr)
      minmax(0, 1.22fr);

    gap:
      2.5rem;
  }


  .glm-gallery-experience__title {
    font-size:
      clamp(
        2.8rem,
        5.6vw,
        4.5rem
      );
  }


  .glm-gallery-experience__description {
    font-size:
      0.92rem;
  }


  .glm-gallery-experience__actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .glm-gallery-experience__open,
  .glm-gallery-experience__count {
    width:
      100%;
  }


  .glm-gallery-stage {
    height:
      570px;
  }


  .glm-gallery-stage__main {
    left:
      1%;

    width:
      82%;
  }


  .glm-gallery-stage__float--one {
    width:
      34%;
  }


  .glm-gallery-stage__float--two {
    width:
      36%;
  }


  .glm-gallery-thumb {
    height:
      210px;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

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

  .glm-gallery-experience__top {
    grid-template-columns:
      1fr;

    gap:
      2.5rem;
  }


  .glm-gallery-experience__copy {
    max-width:
      620px;
  }


  .glm-gallery-experience__title {
    font-size:
      clamp(
        2.8rem,
        9vw,
        4.2rem
      );
  }


  .glm-gallery-stage {
    height:
      520px;
  }


  .glm-gallery-stage__main {
    left:
      0;

    top:
      5%;

    width:
      82%;

    height:
      84%;

    border-radius:
      24px;
  }


  .glm-gallery-stage__float--one {
    width:
      32%;

    height:
      32%;
  }


  .glm-gallery-stage__float--two {
    width:
      35%;

    height:
      30%;
  }


  .glm-gallery-ribbon {
    padding-inline:
      0;
  }


  .glm-gallery-ribbon::before {
    inset-inline:
      -12%;
  }


  .glm-gallery-ribbon__viewport {
    overflow-x:
      auto;

    overflow-y:
      hidden;

    padding:
      1rem var(--glm-gutter) 1.6rem;

    margin-inline:
      calc(var(--glm-gutter) * -1);

    width:
      calc(100% + (var(--glm-gutter) * 2));

    scrollbar-width:
      none;

    overscroll-behavior-inline:
      contain;

    scroll-snap-type:
      x proximity;
  }


  .glm-gallery-ribbon__viewport::-webkit-scrollbar {
    display:
      none;
  }


  .glm-gallery-ribbon__track {
    display:
      flex;

    width:
      max-content;

    gap:
      0.7rem;
  }


  .glm-gallery-thumb,
  .glm-gallery-thumb:nth-child(1),
  .glm-gallery-thumb:nth-child(2),
  .glm-gallery-thumb:nth-child(3),
  .glm-gallery-thumb:nth-child(4),
  .glm-gallery-thumb:nth-child(5) {
    width:
      min(44vw, 290px);

    height:
      250px;

    flex:
      0 0 min(44vw, 290px);

    transform:
      none;

    scroll-snap-align:
      center;
  }


  .glm-gallery-thumb.is-active {
    transform:
      translateY(-5px);
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-gallery-experience__top {
    grid-template-columns:
      1fr;

    gap:
      2rem;
  }


  .glm-gallery-experience__title {
    font-size:
      clamp(
        2.35rem,
        12vw,
        3.3rem
      );
  }


  .glm-gallery-experience__description {
    margin-top:
      1rem;

    font-size:
      0.9rem;
  }


  .glm-gallery-experience__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      0.55rem;

    margin-top:
      1.4rem;
  }


  .glm-gallery-experience__open,
  .glm-gallery-experience__count {
    width:
      100%;
  }


  .glm-gallery-experience__status {
    margin-top:
      1.25rem;
  }


  .glm-gallery-stage {
    height:
      410px;
  }


  .glm-gallery-stage__backdrop {
    width:
      84%;

    right:
      0;
  }


  .glm-gallery-stage__main {
    left:
      0;

    top:
      6%;

    width:
      84%;

    height:
      79%;

    border-width:
      4px;

    border-radius:
      19px;
  }


  .glm-gallery-stage__float {
    border-width:
      4px;

    border-radius:
      15px;
  }


  .glm-gallery-stage__float--one {
    width:
      36%;

    height:
      30%;

    right:
      0;
  }


  .glm-gallery-stage__float--two {
    width:
      38%;

    height:
      28%;

    right:
      0;

    bottom:
      5%;
  }


  .glm-gallery-stage__float-label {
    display:
      none;
  }


  .glm-gallery-stage__main-meta {
    left:
      0.8rem;

    bottom:
      0.8rem;
  }


  .glm-gallery-stage__expand {
    right:
      0.75rem;

    bottom:
      0.75rem;

    width:
      40px;

    height:
      40px;
  }


  .glm-gallery-stage__navigation {
    left:
      0;

    bottom:
      -1%;
  }


  .glm-gallery-stage__nav-button {
    width:
      44px;

    height:
      44px;
  }


  .glm-gallery-ribbon {
    margin-top:
      3rem;

    padding-inline:
      0;
  }


  .glm-gallery-ribbon__top {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      0.45rem;

    margin-bottom:
      1rem;
  }


  .glm-gallery-ribbon__hint {
    display:
      none;
  }


  .glm-gallery-ribbon__viewport {
    width:
      calc(100% + (var(--glm-gutter) * 2));

    margin-inline:
      calc(var(--glm-gutter) * -1);

    padding:
      0.8rem var(--glm-gutter) 1.4rem;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scrollbar-width:
      none;

    overscroll-behavior-inline:
      contain;

    scroll-snap-type:
      x mandatory;
  }


  .glm-gallery-ribbon__viewport::-webkit-scrollbar {
    display:
      none;
  }


  .glm-gallery-ribbon__track {
    display:
      flex;

    width:
      max-content;

    gap:
      0.55rem;
  }


 .glm-gallery-thumb,
.glm-gallery-thumb:nth-child(1),
.glm-gallery-thumb:nth-child(2),
.glm-gallery-thumb:nth-child(3),
.glm-gallery-thumb:nth-child(4),
.glm-gallery-thumb:nth-child(5) {
  width: 67vw;
  max-width: 280px;

  height: 230px;

  flex: 0 0 67vw;

  transform: none;

  border-width: 3px;
  border-radius: 16px;

  scroll-snap-align: center;
}


  .glm-gallery-thumb.is-active {
    transform:
      translateY(-4px);
  }


  .glm-gallery-ribbon__footer {
    margin-top:
      0.8rem;
  }


  .glm-gallery-viewer {
    padding:
      max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }


  .glm-gallery-viewer__nav {
    width:
      44px;

    height:
      44px;
  }


  .glm-gallery-viewer__nav--prev {
    left:
      0.35rem;
  }


  .glm-gallery-viewer__nav--next {
    right:
      0.35rem;
  }


  .glm-gallery-viewer__image {
    max-width:
      96vw;

    max-height:
      calc(100svh - 135px);

    border-radius:
      10px;
  }

}























































/* =========================================================
   04. FINAL ESTIMATE CTA
   GARCIA'S LAWN MOWER
========================================================= */

.glm-gallery-cta {
  position: relative;

  padding:
    clamp(5rem, 8vw, 8rem)
    0;

  overflow: hidden;

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

  isolation: isolate;
}


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

.glm-gallery-cta__ambient {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;
}


.glm-gallery-cta__glow {
  position: absolute;

  border-radius: 50%;

  filter:
    blur(10px);
}


.glm-gallery-cta__glow--one {
  width:
    420px;

  height:
    420px;

  right:
    -120px;

  top:
    -130px;

  background:
    rgba(145,203,113,0.10);
}


.glm-gallery-cta__glow--two {
  width:
    330px;

  height:
    330px;

  left:
    -130px;

  bottom:
    -150px;

  background:
    rgba(175,226,234,0.07);
}


/* =========================================================
   ORBITS
========================================================= */

.glm-gallery-cta__orbit {
  position: absolute;

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

  border-radius: 50%;
}


.glm-gallery-cta__orbit--one {
  width:
    700px;

  height:
    260px;

  left:
    -280px;

  top:
    14%;

  transform:
    rotate(14deg);
}


.glm-gallery-cta__orbit--two {
  width:
    550px;

  height:
    205px;

  left:
    -190px;

  top:
    calc(14% + 55px);

  transform:
    rotate(14deg);
}


/* =========================================================
   LAWN LINES
========================================================= */

.glm-gallery-cta__lawn-line {
  position: absolute;

  width:
    640px;

  height:
    210px;

  right:
    -250px;

  bottom:
    -65px;

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

  border-radius:
    50%;
}


.glm-gallery-cta__lawn-line--one {
  transform:
    rotate(-12deg);
}


.glm-gallery-cta__lawn-line--two {
  right:
    -190px;

  bottom:
    -20px;

  transform:
    rotate(-12deg)
    scale(0.88);
}


.glm-gallery-cta__lawn-line--three {
  right:
    -115px;

  bottom:
    15px;

  transform:
    rotate(-12deg)
    scale(0.72);
}


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

.glm-gallery-cta__shell {
  --glm-cta-x: 0px;
  --glm-cta-y: 0px;

  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(330px, 0.85fr);

  align-items: stretch;

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

  min-height:
    560px;

  padding:
    clamp(2rem, 4vw, 4.5rem);

  overflow: hidden;

  color:
    var(--glm-white);

  background:
    linear-gradient(
      135deg,
      var(--glm-navy-950) 0%,
      #092C3A 52%,
      #0B4435 100%
    );

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

  border-radius:
    clamp(
      26px,
      3vw,
      44px
    );

  box-shadow:
    0 34px 90px
    rgba(6,24,47,0.17);

  isolation: isolate;
}


.glm-gallery-cta__shell::before {
  content: "";

  position: absolute;

  width:
    560px;

  height:
    560px;

  right:
    -250px;

  top:
    -230px;

  z-index:
    -1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(145,203,113,0.14) 0%,
      rgba(145,203,113,0.03) 52%,
      transparent 70%
    );
}


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

.glm-gallery-cta__content {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;

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

  max-width:
    770px;
}


/* =========================================================
   EYEBROW
========================================================= */

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

  gap:
    0.8rem;

  margin-bottom:
    1.2rem;

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

  font-size:
    0.74rem;

  font-weight:
    800;

  letter-spacing:
    0.19em;

  text-transform:
    uppercase;
}


.glm-gallery-cta__eyebrow::after {
  content: "";

  width:
    46px;

  height:
    1px;

  background:
    currentColor;
}


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

.glm-gallery-cta__title {
  max-width:
    760px;

  margin: 0;

  color:
    var(--glm-white);

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

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

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.045em;
}


.glm-gallery-cta__title span {
  display: block;

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


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

.glm-gallery-cta__description {
  max-width:
    590px;

  margin:
    1.5rem 0 0;

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

  font-size:
    1rem;

  line-height:
    1.68;
}


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

.glm-gallery-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    0.75rem;

  margin-top:
    2rem;
}


/* =========================================================
   BUTTON
========================================================= */

.glm-gallery-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap:
    0.7rem;

  min-height:
    58px;

  padding:
    0.85rem 1.3rem;

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

  font-size:
    0.88rem;

  font-weight:
    800;

  line-height:
    1;

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

    color
    300ms
    ease,

    background
    300ms
    ease,

    border-color
    300ms
    ease,

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


/* primary */

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

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

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


/* secondary */

.glm-gallery-cta__button--secondary {
  color:
    var(--glm-white);

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

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

  backdrop-filter:
    blur(10px);

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


/* =========================================================
   BUTTON ICON
========================================================= */

.glm-gallery-cta__button-icon {
  display: grid;
  place-items: center;
}


.glm-gallery-cta__button-icon svg {
  width:
    20px;

  height:
    20px;

  fill:
    currentColor;
}


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


/* =========================================================
   BUTTON HOVER
========================================================= */

html.has-fine-pointer
.glm-gallery-cta__button:hover {
  transform:
    translateY(-3px);
}


html.has-fine-pointer
.glm-gallery-cta__button--primary:hover {
  background:
    var(--glm-orange-600);

  box-shadow:
    0 21px 45px
    rgba(243,106,22,0.28);
}


html.has-fine-pointer
.glm-gallery-cta__button--secondary:hover {
  background:
    rgba(255,255,255,0.105);

  border-color:
    rgba(145,203,113,0.30);
}


html.has-fine-pointer
.glm-gallery-cta__button--primary:hover
.glm-gallery-cta__button-arrow {
  transform:
    translateX(4px);
}


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

.glm-gallery-cta__panel {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding:
    clamp(1.5rem, 2.5vw, 2.3rem);

  overflow: hidden;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,0.095),
      rgba(255,255,255,0.045)
    );

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

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

  backdrop-filter:
    blur(18px);

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

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,0.06);

  transform:
    translate3d(
      var(--glm-cta-x),
      var(--glm-cta-y),
      0
    );

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


/* =========================================================
   PANEL ORBIT
========================================================= */

.glm-gallery-cta__panel-orbit {
  position: absolute;

  right:
    -155px;

  top:
    -145px;

  width:
    390px;

  height:
    390px;

  pointer-events: none;
}


.glm-gallery-cta__panel-orbit span {
  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(145,203,113,0.12);

  border-radius: 50%;
}


.glm-gallery-cta__panel-orbit
span:nth-child(2) {
  inset:
    42px;
}


.glm-gallery-cta__panel-orbit
span:nth-child(3) {
  inset:
    84px;

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


/* =========================================================
   PANEL TOP
========================================================= */

.glm-gallery-cta__panel-top {
  position: relative;

  z-index: 2;

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

  gap:
    1rem;
}


.glm-gallery-cta__panel-label {
  color:
    var(--glm-green-400);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.glm-gallery-cta__panel-leaf {
  display: grid;
  place-items: center;

  width:
    52px;

  height:
    52px;

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

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

  border:
    1px solid
    rgba(145,203,113,0.12);

  border-radius: 50%;
}


.glm-gallery-cta__panel-leaf svg {
  width:
    27px;

  height:
    27px;

  fill:
    currentColor;
}


/* =========================================================
   PANEL COPY
========================================================= */

.glm-gallery-cta__panel-copy {
  position: relative;

  z-index: 2;

  display: grid;

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

  align-items: start;

  gap:
    0.9rem;

  margin-top:
    auto;

  padding-top:
    clamp(3rem, 7vw, 6rem);
}


.glm-gallery-cta__panel-line {
  width:
    42px;

  height:
    2px;

  margin-top:
    0.8rem;

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


.glm-gallery-cta__panel-copy p {
  max-width:
    410px;

  margin: 0;

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

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

  font-size:
    clamp(
      1.55rem,
      2.2vw,
      2.45rem
    );

  line-height:
    1.12;
}


.glm-gallery-cta__panel-copy strong {
  display: block;

  margin-top:
    0.15rem;

  color:
    var(--glm-white);

  font-weight:
    400;
}


/* =========================================================
   INFO
========================================================= */

.glm-gallery-cta__info {
  position: relative;

  z-index: 2;

  display: grid;

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

  gap:
    0.65rem;

  margin-top:
    2rem;
}


.glm-gallery-cta__info-item {
  display: flex;
  align-items: center;

  gap:
    0.65rem;

  min-width: 0;

  padding:
    0.8rem;

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

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

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


.glm-gallery-cta__info-icon {
  display: grid;
  place-items: center;

  width:
    37px;

  height:
    37px;

  flex:
    0 0 37px;

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

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

  border-radius:
    50%;
}


.glm-gallery-cta__info-icon svg {
  width:
    18px;

  height:
    18px;

  fill:
    currentColor;
}


.glm-gallery-cta__info-item
> span:last-child {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap:
    0.08rem;
}


.glm-gallery-cta__info-item small {
  color:
    rgba(255,255,255,0.42);

  font-size:
    0.58rem;

  font-weight:
    700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.glm-gallery-cta__info-item strong {
  overflow: hidden;

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

  font-size:
    0.72rem;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DECORATIVE GRASS
========================================================= */

.glm-gallery-cta__panel-bottom {
  position: absolute;

  left:
    -10px;

  right:
    -10px;

  bottom:
    -5px;

  height:
    48px;

  pointer-events:
    none;
}


.glm-gallery-cta__grass {
  position: absolute;

  bottom:
    -8px;

  width:
    2px;

  border-radius:
    50% 50% 0 0;

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

  transform-origin:
    bottom center;
}


.glm-gallery-cta__grass--one {
  left:
    15%;

  height:
    39px;

  transform:
    rotate(-16deg);
}


.glm-gallery-cta__grass--two {
  left:
    19%;

  height:
    31px;

  transform:
    rotate(11deg);
}


.glm-gallery-cta__grass--three {
  right:
    18%;

  height:
    42px;

  transform:
    rotate(15deg);
}


.glm-gallery-cta__grass--four {
  right:
    23%;

  height:
    30px;

  transform:
    rotate(-13deg);
}


/* =========================================================
   SAFE REVEAL
========================================================= */

.glm-gallery-cta
[data-gallery-cta-reveal] {
  opacity: 1;

  visibility: visible;

  transform: none;

  filter: none;
}


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

html.is-reduced-motion
.glm-gallery-cta__button,
html.is-reduced-motion
.glm-gallery-cta__button-arrow,
html.is-reduced-motion
.glm-gallery-cta__panel {
  transition-duration:
    0.01ms !important;

  transform:
    none !important;
}


/* =========================================================
   01 — COMPUTER
========================================================= */

@media (min-width: 1025px) {

  .glm-gallery-cta__content {
    padding-right:
      1rem;
  }


  .glm-gallery-cta__panel {
    min-height:
      420px;
  }

}


/* =========================================================
   02 — TABLET
========================================================= */

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

  .glm-gallery-cta__shell {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.8fr);

    gap:
      2rem;

    min-height:
      520px;

    padding:
      2.4rem;
  }


  .glm-gallery-cta__title {
    font-size:
      clamp(
        2.8rem,
        5.7vw,
        4.5rem
      );
  }


  .glm-gallery-cta__actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .glm-gallery-cta__button {
    width:
      100%;
  }


  .glm-gallery-cta__info {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   03 — MOBILE
========================================================= */

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

  .glm-gallery-cta {
    padding:
      4.5rem 0;
  }


  .glm-gallery-cta__shell {
    grid-template-columns:
      1fr;

    gap:
      2.5rem;

    min-height:
      0;

    padding:
      2rem;

    border-radius:
      26px;
  }


  .glm-gallery-cta__content {
    max-width:
      600px;
  }


  .glm-gallery-cta__title {
    font-size:
      clamp(
        2.8rem,
        8.5vw,
        4rem
      );
  }


  .glm-gallery-cta__panel {
    min-height:
      330px;
  }


  .glm-gallery-cta__panel-copy {
    padding-top:
      3.5rem;
  }

}


/* =========================================================
   04 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .glm-gallery-cta {
    padding:
      4rem 0;
  }


  .glm-gallery-cta__shell {
    grid-template-columns:
      1fr;

    gap:
      1.8rem;

    min-height:
      0;

    padding:
      1.25rem;

    border-radius:
      20px;
  }


  .glm-gallery-cta__eyebrow {
    margin-bottom:
      0.85rem;

    font-size:
      0.63rem;
  }


  .glm-gallery-cta__eyebrow::after {
    width:
      32px;
  }


  .glm-gallery-cta__title {
    font-size:
      clamp(
        2.3rem,
        11.5vw,
        3.2rem
      );
  }


  .glm-gallery-cta__description {
    margin-top:
      1rem;

    font-size:
      0.88rem;

    line-height:
      1.6;
  }


  .glm-gallery-cta__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      0.55rem;

    margin-top:
      1.4rem;
  }


  .glm-gallery-cta__button {
    width:
      100%;

    min-height:
      52px;

    padding:
      0.75rem 0.9rem;

    font-size:
      0.8rem;
  }


  .glm-gallery-cta__panel {
    min-height:
      320px;

    padding:
      1.2rem;

    border-radius:
      17px;
  }


  .glm-gallery-cta__panel-leaf {
    width:
      44px;

    height:
      44px;
  }


  .glm-gallery-cta__panel-leaf svg {
    width:
      23px;

    height:
      23px;
  }


  .glm-gallery-cta__panel-copy {
    grid-template-columns:
      30px minmax(0, 1fr);

    gap:
      0.65rem;

    padding-top:
      3rem;
  }


  .glm-gallery-cta__panel-line {
    width:
      30px;
  }


  .glm-gallery-cta__panel-copy p {
    font-size:
      1.45rem;
  }


  .glm-gallery-cta__info {
    grid-template-columns:
      1fr;

    gap:
      0.5rem;

    margin-top:
      1.4rem;
  }

}