:root
{
  --jks-green-dark: #123b19;
  --jks-green: #2f6d24;
  --jks-green-bright: #78ad20;
  --jks-green-pale: #edf4df;
  --jks-brown: #55310d;
  --jks-cream: #fbf8ec;
  --jks-ink: #172016;
  --jks-muted: #647063;
  --bs-primary: #2f6d24;
  --bs-primary-rgb: 47, 109, 36;
}

body
{
  background: var(--jks-cream);
  color: var(--jks-ink);
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
.navbar-brand strong
{
  color: var(--jks-green-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

h1
{
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: 0.9;
}

h2
{
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1;
}

a
{
  color: var(--jks-green-dark);
}

.skip-link
{
  background: #ffffff;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 1100;
}

.skip-link:focus
{
  top: 1rem;
}

.topbar
{
  background: var(--jks-green-dark);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}

.topbar a
{
  color: #ffffff;
}

.site-header
{
  background: rgb(251 248 236 / 96%);
  border-bottom: 1px solid rgb(18 59 25 / 14%);
  backdrop-filter: blur(10px);
}

.navbar-brand img,
.footer-logo
{
  border-radius: 50%;
  object-fit: cover;
}

.navbar-brand strong,
.navbar-brand small
{
  display: block;
}

.navbar-brand strong
{
  font-size: 1.65rem;
  line-height: 1;
}

.navbar-brand small
{
  color: var(--jks-brown);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-link
{
  border-bottom: 2px solid transparent;
  color: var(--jks-ink);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.5rem 0.55rem;
}

.nav-link:hover,
.nav-link.active
{
  border-bottom-color: var(--jks-green-bright);
  color: var(--jks-green);
}

.btn
{
  border-radius: 0.2rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.btn-primary
{
  --bs-btn-bg: var(--jks-green);
  --bs-btn-border-color: var(--jks-green);
  --bs-btn-hover-bg: var(--jks-green-dark);
  --bs-btn-hover-border-color: var(--jks-green-dark);
}

.btn-accent
{
  background: var(--jks-green-bright);
  color: #10220c;
}

.hero
{
  background: var(--jks-green-dark);
  color: #ffffff;
  overflow: hidden;
}

.hero h1
{
  color: #ffffff;
}

.hero-copy
{
  padding-bottom: 5rem;
  padding-top: 5rem;
}

.hero-image
{
  height: 100%;
  min-height: 34rem;
  object-fit: cover;
  width: 100%;
}

.trust-bar
{
  background: var(--jks-green-bright);
  color: #10220c;
  font-weight: 800;
  text-transform: uppercase;
}

.trust-item svg
{
  fill: none;
  flex: 0 0 1.75rem;
  height: 1.75rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.75rem;
}

.section-space
{
  padding-bottom: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(4rem, 8vw, 7rem);
}

.section-soft
{
  background: var(--jks-green-pale);
}

.service-card,
.reason-card,
.area-card
{
  background: #ffffff;
  border: 1px solid rgb(18 59 25 / 14%);
  border-radius: 0.35rem;
  box-shadow: 0 1rem 2.5rem rgb(18 59 25 / 7%);
}

.service-card
{
  overflow: hidden;
  transition: transform 160ms ease;
}

.service-card:hover
{
  transform: translateY(-0.25rem);
}

.service-card img,
.gallery-card img
{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.home-service-card
{
  overflow: visible;
}

.home-service-card .home-service-image
{
  aspect-ratio: 16 / 9;
  border-radius: 0.35rem 0.35rem 0 0;
  display: block;
  object-fit: cover;
  width: 100%;
}

.home-service-content
{
  min-height: 15rem;
}

.service-media
{
  position: relative;
}

.service-card-title
{
  color: var(--jks-green-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.service-icon
{
  align-items: center;
  background: var(--jks-green-bright);
  border: 5px solid #ffffff;
  border-radius: 1.2rem;
  bottom: -2.25rem;
  color: var(--jks-green-dark);
  display: flex;
  height: 4.5rem;
  justify-content: center;
  left: 1.5rem;
  position: absolute;
  width: 4.5rem;
}

.service-icon svg
{
  fill: none;
  height: 2.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 2.25rem;
}

.before-after img
{
  height: 30rem;
  object-fit: cover;
  width: 100%;
}

.image-label
{
  background: var(--jks-green-dark);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  left: 1rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.65rem;
  position: absolute;
  text-transform: uppercase;
  top: 1rem;
}

.testimonial-panel
{
  background: var(--jks-brown);
  color: #ffffff;
}

.testimonial-panel h2
{
  color: #ffffff;
}

.page-hero
{
  background: linear-gradient(125deg, var(--jks-green-dark), #245c2d);
  color: #ffffff;
}

.page-hero h1
{
  color: #ffffff;
}

.page-hero h1
{
  max-width: 15ch;
}

.service-detail-image
{
  height: min(65vh, 40rem);
  object-fit: cover;
  width: 100%;
}

.check-list
{
  list-style: none;
  padding-left: 0;
}

.check-list li
{
  border-bottom: 1px solid rgb(18 59 25 / 12%);
  padding: 0.75rem 0 0.75rem 1.8rem;
  position: relative;
}

.check-list li::before
{
  color: var(--jks-green);
  content: "✓";
  font-weight: 800;
  left: 0;
  position: absolute;
}

details
{
  background: #ffffff;
}

summary
{
  cursor: pointer;
}

.quote-strip
{
  background: var(--jks-green);
  color: #ffffff;
}

.quote-strip h2
{
  color: #ffffff;
}

.site-footer
{
  background: #0e2812;
  color: #dbe6d8;
}

.site-footer h2,
.site-footer a
{
  color: #ffffff;
}

.footer-links li
{
  margin-bottom: 0.55rem;
}

.footer-bottom
{
  border-color: rgb(255 255 255 / 16%) !important;
  color: #aebdab;
  font-size: 0.82rem;
}

.form-control,
.form-select
{
  border-color: #9ca99a;
  border-radius: 0.2rem;
  min-height: 3rem;
}

.form-trap
{
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

@media (max-width: 991.98px)
{
  .site-header
  {
    position: static !important;
  }

  .site-nav
  {
    border-top: 1px solid rgb(18 59 25 / 14%);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    width: 100%;
  }

  .hero-copy
  {
    padding-bottom: 3.5rem;
    padding-top: 3.5rem;
  }

  .hero-image
  {
    min-height: 22rem;
  }
}

@media (max-width: 575.98px)
{
  .navbar-brand img
  {
    height: 52px;
    width: 52px;
  }

  .site-nav
  {
    justify-content: flex-start !important;
  }

  .nav-link
  {
    font-size: 0.8rem;
    padding: 0.4rem;
  }

  .before-after img
  {
    height: 22rem;
  }
}