/* =============================================================================

   Karst TREE SERVICE   Main Stylesheet

   Child theme of Twenty Twenty-Four

   ============================================================================= */

/* Empira Demi Bold  place font files in assets/fonts/                          */

/* Required: Empira-DemiBold.woff2  and  Empira-DemiBold.woff                   */

@font-face {
  font-family: "Poppins";

  src: url("../fonts/Poppins%20Regular.woff2") format("woff2");

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Poppins";

  src: url("../fonts/Poppins%20SemiBold.woff2") format("woff2");

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

:root {
  /*  Karst TREE SERVICE  Brand Palette  */

  /* #1c1c1c  Almost Black  text, headings                  */

  /* #DD9300  Burnt Orange  accent: buttons, icons, badges  */

  /* #666b6e  Steel Gray    secondary text, borders         */

  /* #ffffff  White         base background                  */

  /* Main brand colors */

  --kts-primary: #ea6d00; /* Orange  CTAs, links, badges */

  --kts-secondary: #666b6e; /* Steel Gray  hover, borders */

  --kts-dark-brand: #1c1c1c; /* Almost Black  headings, nav text */

  --kts-darkest: #1c1c1c; /* Darkest  overlays */

  --kts-light-bg: #ffffff; /* White  page background */

  --kts-cream: #fdf8f6; /* Warm off-white  cards, subtle bg */

  /* Button colors */

  --kts-button: #ea6d00; /* Orange  buttons */

  --kts-button-hover: #9f6a1a; /* Darker orange  button hover */

  /* Legacy color aliases (mapped to new palette) */

  --kts-green: #ea6d00; /*  Orange accent */

  --kts-green-dark: #1c1c1c; /*  Almost Black */

  --kts-green-mid: #666b6e; /*  Steel Gray */

  --kts-green-light: #ea6d00; /*  Orange accent */

  --kts-green-pale: #fdf0eb; /*  Very light orange tint (backgrounds) */

  --kts-green-faint: #fdf8f6; /*  Warm near-white */

  --kts-brown: #ea6d00; /*  Orange */

  --kts-gold: #ea6d00;

  --kts-star: #ff9d00; /*  Orange */

  --kts-gold-dark: #8a3d1f; /*  Darker orange */

  /* Neutrals */

  --kts-dark: #1c1c1c;

  --kts-gray-800: #1c1c1c;

  --kts-gray-600: #666b6e;

  --kts-gray-400: #9a9fa2;

  --kts-gray-200: #e1e5e9;

  --kts-gray-100: #f5f5f5;

  --kts-white: #ffffff;

  --kts-bg: #ffffff; /* White page background */

  /* Typography */

  --font-heading: "Poppins", sans-serif;

  --font-body: "Poppins", sans-serif;

  /* Spacing */

  --section-py: 100px;

  --section-py-sm: 64px;

  --container-max: 1280px;

  --container-px: 24px;

  /* Shadows  warm neutral */

  --shadow-xs: 0 1px 3px rgba(28, 28, 28, 0.07);

  --shadow-sm: 0 2px 10px rgba(28, 28, 28, 0.08);

  --shadow-md: 0 4px 24px rgba(28, 28, 28, 0.1);

  --shadow-lg: 0 8px 40px rgba(28, 28, 28, 0.13);

  --shadow-xl: 0 16px 60px rgba(28, 28, 28, 0.17);

  /* Radii */

  --radius-sm: 6px;

  --radius-md: 12px;

  --radius-lg: 20px;

  --radius-xl: 32px;

  --radius-full: 9999px;

  /* Transition */

  --ease: all 0.3s ease;

  --ease-fast: all 0.18s ease;

  /* Premium Accents */

  --glass-bg: rgba(169, 79, 42, 0.08);

  --glass-border: rgba(169, 79, 42, 0.15);

  --glass-blur: blur(12px);
}

/*  Reset / Base  */

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

  margin: 0;

  padding: 0;
}

html {
  font-size: 16px;

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

body,
.site {
  overflow-x: hidden;

  width: 100%;

  position: relative;
}

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

  font-size: 1rem;

  line-height: 1.7;

  color: var(--kts-gray-800);

  background-color: var(--kts-bg);
}

body.admin-bar {
  scroll-padding-top: 92px;
}

img,
video {
  max-width: 100%;

  height: auto;

  display: block;
}

a {
  color: var(--kts-green);

  text-decoration: none;

  transition: var(--ease-fast);
}

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

a:focus-visible {
  outline: 3px solid var(--kts-gold);

  outline-offset: 3px;

  border-radius: 2px;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select,
button {
  font-family: inherit;

  font-size: inherit;
}

button {
  cursor: pointer;

  border: none;

  background: none;
}

/* WordPress alignment */

.alignleft {
  float: left;

  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;

  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  margin: 0 auto 1rem;

  display: block;
}

/*  Container  */

.container {
  width: 100%;

  max-width: var(--container-max);

  margin-inline: auto;

  padding-inline: var(--container-px);
}

/*  Buttons  */

.btn {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 28px;

  border-radius: 0;

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

  font-weight: 600;

  font-size: 0.9375rem;

  line-height: 1.2;

  transition: var(--ease);

  cursor: pointer;

  text-decoration: none;

  white-space: nowrap;

  border: 2px solid transparent;
}

/* Header Free Quote button - add 10px gap for icon */

.header-actions .btn {
  gap: 10px;
}

.btn:focus-visible {
  outline: 3px solid var(--kts-button);

  outline-offset: 3px;
}

.btn-primary {
  background: var(--kts-green);

  color: var(--kts-white);

  border-color: var(--kts-green);
}

.btn-primary:hover {
  background: var(--kts-green-dark);

  border-color: var(--kts-green-dark);

  color: var(--kts-white);

  transform: translateY(-2px);

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

.btn-outline {
  background: transparent;

  color: var(--kts-green);

  border-color: var(--kts-green);
}

.btn-outline:hover {
  background: var(--kts-green);

  color: var(--kts-white);

  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;

  color: var(--kts-gray-600);

  border: none;

  padding: 0;

  font-weight: 600;

  text-decoration: underline;

  text-decoration-color: var(--kts-primary);

  text-underline-offset: 4px;

  box-shadow: none;
}

.btn-ghost:hover {
  background: transparent;

  color: var(--kts-primary);

  transform: none;

  text-decoration-color: var(--kts-primary);
}

/* About section outline button - black */

.about-section .btn-outline {
  color: #1c1c1c !important;

  border-color: #1c1c1c !important;
}

.about-section .btn-outline:hover {
  background: #1c1c1c !important;

  color: #ffffff !important;
}

.btn-hero-outline {
  background: rgba(255, 255, 255, 0.1);

  color: var(--kts-white);

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

  backdrop-filter: blur(4px);
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.25);

  color: var(--kts-white);

  transform: translateY(-2px);
}

.btn-white {
  background: var(--kts-white);

  color: var(--kts-green-dark);

  border-color: var(--kts-white);
}

.btn-white:hover {
  background: var(--kts-green-pale);

  transform: translateY(-2px);
}

.btn-lg {
  padding: 16px 36px;

  font-size: 1.0625rem;
}

.btn-sm {
  padding: 9px 20px;

  font-size: 0.875rem;
}

.btn-block {
  width: 100%;

  justify-content: center;
}

/*  Typography & Base Reversion  */

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

  color: var(--kts-gray-800);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);

  color: var(--kts-dark);

  font-weight: 600;
}

p,
li {
  font-family: var(--font-body);
}

/*  Container Fix  */

.container {
  max-width: var(--container-max);
}

/*  Section Shared Styles  */

.section-label {
  display: inline-block !important;

  font-size: 0.8125rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.12em !important;

  text-transform: uppercase !important;

  color: var(--kts-green-mid) !important;

  margin-bottom: 12px !important;
}

.section-title {
  font-family: var(--font-heading) !important;

  font-size: clamp(1.75rem, 3.5vw, 3.8rem) !important;

  margin-bottom: 12px !important;
}

.section-desc {
  font-size: 1.02rem;

  color: var(--kts-gray-600);

  max-width: 640px;
  margin-bottom: 48px;
}

.section-header {
  margin-bottom: 64px;
}

.section-header--center {
  text-align: center;
}

.section-header--light .section-label,
.section-header--light .section-title,
.section-header--light .section-desc,
.section-header--light .rating-text {
  color: var(--kts-white) !important;
}

.section-header--light .rating-stars svg {
  color: var(--kts-gold) !important;
}

.section-header--center .section-desc {
  margin-inline: auto;
}

.section-header--split {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  flex-wrap: wrap;
}

.section-header--light .section-title,
.section-header--light .section-label {
  color: var(--kts-white);
}

.section-header--light .section-label {
  color: var(--kts-green-light);
}

/*  Reveal Animations  */

.reveal-item {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal-item.is-visible {
  opacity: 1;

  transform: translateY(0);
}

/* Wipe Reveal Right - Triggered by parent is-visible */

.reveal-wipe-right {
  clip-path: inset(0 100% 0 0);

  transition: clip-path 5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row-v2.is-visible .reveal-wipe-right,
.reveal-section.is-visible .reveal-wipe-right {
  clip-path: inset(0 0 0 0);
}

/* Slide from left animation */

.reveal-from-left {
  opacity: 0;

  transform: translateX(-40px) scale(0.98);

  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-from-left.is-visible {
  opacity: 1;

  transform: translateX(0) scale(1);
}

/* Slide from right animation */

.reveal-from-right {
  opacity: 0;

  transform: translateX(40px) scale(0.98);

  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-from-right.is-visible {
  opacity: 1;

  transform: translateX(0) scale(1);
}

/* Butter Smooth Fade-in from Right (Pure CSS, triggers on load) */

.fade-in-right-smooth {
  opacity: 0;

  transform: translateX(30px);

  animation: fadeInRightSmooth 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  animation-delay: 0.6s;
}

@keyframes fadeInRightSmooth {
  0% {
    opacity: 0;

    transform: translateX(30px);
  }

  100% {
    opacity: 1;

    transform: translateX(0);
  }
}

.reveal-from-top {
  opacity: 0;

  transform: translateY(-40px) scale(0.98);

  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-from-top.is-visible {
  opacity: 1;

  transform: translateY(0) scale(1);
}

/* Slide from bottom animation */

.reveal-from-bottom {
  opacity: 0;

  transform: translateY(40px) scale(0.98);

  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-from-bottom.is-visible {
  opacity: 1;

  transform: translateY(0) scale(1);
}

/*  Hero-specific stagger delays  */

/* Left content: fires first */

.hero-left.reveal-from-left {
  transition-delay: 0.1s;
}

/* Form card: fires 0.25s after left content */

.hero-form-card.reveal-from-top {
  transition-delay: 0.35s;
}

/* Info bar: fires last, after both above */

.hero-info-bar-wrap.reveal-from-bottom {
  transition-delay: 0.6s;
}

.reveal-item:nth-child(2) {
  transition-delay: 0.1s;
}

.reveal-item:nth-child(3) {
  transition-delay: 0.2s;
}

.kts-header {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 10000;

  pointer-events: none;

  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease;
}

/* Removed @keyframes headerSlideDown as it is no longer needed */

.header-top-bar {
  display: none; /* Removed for clean pill design */
}

.header-main {
  margin: 0; /* Full width - no side paddings */

  background: transparent;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  border-radius: 0; /* No corner radius */

  transition:
    margin 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  border: 1px solid transparent;

  pointer-events: auto;

  display: flex;

  justify-content: stretch;
}

.header-inner {
  position: relative; /* Required for absolute centered nav */

  display: flex;

  align-items: center;

  justify-content: space-between; /* Pushes items to corners */

  height: 60px; /* Same as scrolled height */

  padding: 0 32px; /* Adjusted padding for corner alignment */

  width: 100%;

  max-width: none; /* Removed max-width to allow full pill span */

  margin: 0;
}

/* Correct Flex Layout for Items */

.site-branding {
  flex: 0 0 auto; /* Natural width */

  display: flex;

  align-items: center;

  margin-left: 10px; /* Move logo slightly toward center */
}

.header-nav {
  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 10;
}

@media (min-width: 1025px) {
  .header-nav {
    position: absolute; /* Center nav independently of corners */

    left: 50%;

    transform: translateX(-50%);

    width: auto;
  }
}

.header-actions {
  flex: 0 0 auto; /* Natural width */

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 16px;

  margin-right: 10px; /* Move free quote button slightly toward center */
}

/* Nav menu color - always dark since background is white */

.nav-menu > li > a {
  color: var(--kts-gray-800) !important;

  font-size: 16px !important;
}

.kts-header .site-name {
  color: var(--kts-green-dark) !important;
}

.kts-header .site-name-link {
  color: var(--kts-green-dark) !important;
}

.kts-header .site-tagline {
  color: var(--kts-gray-600) !important;
}

.kts-header .btn-primary {
  background: var(--kts-green);

  border: none;

  color: #ffffff;

  border-radius: 0;

  padding: 10px 24px;

  font-weight: 600;
}

.kts-header .hamburger-bar {
  background: var(--kts-green-dark);
}

/* Navbar always white */

.header-main {
  background: #ffffff !important;

  backdrop-filter: blur(10px);

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

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Remove logo invert effect when mobile nav is open */

.header-nav.is-open ~ .header-inner .site-branding img,
.header-nav.is-open ~ .header-inner .site-branding .custom-logo,
.header-nav.is-open ~ .header-inner .site-branding .site-logo,
.header-nav.is-open + .header-inner .site-branding img,
.header-nav.is-open + .header-inner .site-branding .custom-logo,
.header-nav.is-open + .header-inner .site-branding .site-logo {
  filter: none !important;
}

/* Also target when header has open nav class */

.kts-header.nav-open .site-branding img,
.kts-header.nav-open .site-branding .custom-logo,
.kts-header.nav-open .site-branding .site-logo {
  filter: none !important;
}

/*  MOBILE NAVIGATION OVERRIDE  */

@media (max-width: 1024px) {
  .kts-header {
    top: 0 !important;

    margin-top: 0 !important;

    position: fixed !important;

    pointer-events: auto;

    background: #ffffff !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;

    transform: none !important;

    transition: none !important;

    z-index: 999999 !important; /* Extra high */
  }

  /* Remove Admin Bar offset for now to see if it fixes the gap */

  .admin-bar .kts-header {
    top: 0 !important;

    margin-top: 0 !important;
  }

  .header-main {
    margin: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    backdrop-filter: none !important;

    box-shadow: none !important;

    border: none !important;

    width: 100% !important;
  }

  .header-inner {
    height: 60px !important;

    padding: 0 16px !important;

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    max-width: none !important;
  }

  .site-branding .custom-logo,
  .site-branding .site-logo {
    max-height: 40px !important;
  }

  .site-branding {
    position: relative !important;

    z-index: 100001 !important;
  }

  .header-actions {
    display: flex !important;

    margin-left: auto !important;

    position: relative !important;

    z-index: 100001 !important;
  }

  .header-actions .btn {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    padding: 0 !important;

    width: 28px !important;

    height: 28px !important;

    gap: 4px !important;
  }

  .hamburger-bar {
    background: var(--kts-green-dark) !important;

    height: 2px !important;

    width: 100% !important;
  }

  /* Full Screen Overlay - Solid White */

  .header-nav {
    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100vh !important;

    height: 100dvh !important;

    background: #ffffff !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transition: opacity 0.3s ease !important;

    z-index: 100000 !important;

    transform: none !important;

    pointer-events: none !important;
  }

  .header-nav.is-open {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
  }

  .nav-menu {
    flex-direction: column !important;

    gap: 32px !important;

    text-align: center !important;

    width: 100% !important;

    padding: 0 !important;

    transform: none !important;
  }
}

/*  Admin Bar Support  */

.admin-bar .kts-header {
  top: 32px !important; /* Admin Bar offset when not scrolled */
}

.admin-bar .kts-header.is-scrolled {
  top: 32px !important; /* Keep admin bar offset when scrolled */
}

@media (max-width: 782px) {
  .admin-bar .kts-header {
    top: 0 !important; /* Mobile: flush to top, no admin bar offset */
  }
}

/* Scrolled State - Scroll-based animation to top: 0 */

.kts-header.is-scrolled {
  top: 0 !important; /* Moves to top on scroll */
}

.kts-header.is-scrolled .header-main {
  margin-top: 0;

  margin: 0; /* Full width - no side paddings */

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

  backdrop-filter: blur(15px);

  border-radius: 0; /* No corner radius */
}

.kts-header.is-scrolled .header-inner {
  height: 60px; /* Reduced from 72px */
}

.kts-header.is-scrolled .nav-menu > li > a {
  color: var(--kts-gray-800) !important;

  font-size: 16px !important;
}

.kts-header.is-scrolled .site-name {
  color: var(--kts-green-dark) !important;
}

.kts-header.is-scrolled .site-name-link {
  color: var(--kts-green-dark) !important;
}

.kts-header.is-scrolled .btn-primary {
  background: var(--kts-green) !important;

  color: var(--kts-white) !important;
}

.kts-header .btn-primary:hover,
.kts-header.is-scrolled .btn-primary:hover {
  background: #1c1c1c !important;

  color: #ffffff !important;
}

/* Logo back to normal when scrolled */

.kts-header.is-scrolled .site-branding img,
.kts-header.is-scrolled .site-branding .custom-logo,
.kts-header.is-scrolled .site-branding .site-logo {
  filter: none !important;

  transition: filter 0.4s ease !important;
}

@media (max-width: 1024px) {
  .header-main {
    margin: 0 20px;
  }
}

.reveal-item:nth-child(4) {
  transition-delay: 0.3s;
}

.reveal-item:nth-child(5) {
  transition-delay: 0.4s;
}

.reveal-item:nth-child(6) {
  transition-delay: 0.5s;
}

/*  Floating Call Button  */

.floating-call-btn {
  display: none; /* Hidden - replaced by kts-floating-actions */
}

/* Site Branding */

.site-branding {
  flex-shrink: 0;
}

.site-name-link {
  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;
}

.site-name-icon {
  font-size: 1.75rem;

  line-height: 1;
}

.site-name-text {
  display: flex;

  flex-direction: column;
}

.site-name {
  font-family: var(--font-heading);

  font-size: 1.1875rem;

  font-weight: 600;

  color: var(--kts-green-dark) !important; /* Default color with !important */

  line-height: 1.1;
}

.site-tagline {
  font-size: 0.7rem;

  color: var(--kts-gray-400);

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.site-branding .custom-logo,
.site-branding .site-logo {
  max-height: 45px;

  width: auto;

  display: block;
}

.logo-hero {
  display: none !important;
}

.logo-scrolled {
  display: block !important;
}

@media (max-width: 1024px) {
  .logo-hero {
    display: none !important;
  }

  .logo-scrolled {
    display: block !important;
  }
}

/* Navigation */

/* Removed redundant header-nav definition */

.nav-menu {
  display: flex;

  align-items: center;

  gap: 16px; /* Increased gap between links */

  list-style: none;

  margin: 0;

  padding: 0 10px;
}

.nav-menu > li > a {
  display: block;

  padding: 8px 12px;

  font-size: 16px;

  font-weight: 400;

  color: #1c1c1c !important; /* Explicit dark color */

  transition: var(--ease-fast);

  position: relative;

  text-decoration: none;
}

.nav-menu > li > a::after {
  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--kts-green-dark);

  transition: width 0.3s ease;
}

.nav-menu > li > a:hover::after,
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current_page_item > a::after {
  width: 100%;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
  color: var(--kts-green-dark);
}

/* Header Actions */

.header-actions {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}

/* Mobile Toggle */

.mobile-toggle {
  display: none;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  width: 40px;

  height: 40px;

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

  padding: 8px;
}

.hamburger-bar {
  display: block;

  width: 100%;

  height: 2px;

  background: var(--kts-gray-800);

  border-radius: 2px;

  transition: var(--ease-fast);
}

.mobile-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);

  background: var(--kts-green-dark);
}

.mobile-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.mobile-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);

  background: var(--kts-green-dark);
}

/* Mobile Nav Overlay */

@media (max-width: 768px) {
  .header-nav {
    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    height: 100dvh;

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

    backdrop-filter: blur(20px);

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

    display: flex !important;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 999;

    transform: scale(1.05);

    pointer-events: none;
  }

  .header-nav.is-open {
    opacity: 1;

    visibility: visible;

    transform: scale(1);

    pointer-events: auto;
  }

  .nav-menu {
    flex-direction: column;

    gap: 32px;

    text-align: center;

    width: 100%;
  }

  .nav-menu > li {
    opacity: 0;

    transform: translateY(20px);

    transition: all 0.4s ease;

    transition-delay: calc(var(--item-index, 0) * 0.1s);
  }

  .header-nav.is-open .nav-menu > li {
    opacity: 1;

    transform: translateY(0);
  }

  .nav-menu > li > a {
    font-size: 2.25rem;

    font-weight: 600;

    color: #1c1c1c !important;

    font-family: var(--font-heading);

    padding: 10px;

    margin: 0;
  }

  /* Ensure mobile nav links are always visible */

  .header-nav.is-open .nav-menu > li > a {
    color: #1c1c1c !important;
  }

  .nav-menu > li > a::after {
    display: none; /* Hide underline on mobile */
  }

  .mobile-toggle {
    display: flex;

    z-index: 1001; /* Above overlay */

    position: relative;
  }

  .hamburger-bar {
    background: var(--kts-green-dark) !important;
  }
}

/* Sticky header logic - Simplified for pill */

.kts-header.is-scrolled .header-main {
  box-shadow: var(--shadow-lg);
}

/* Offset for floating header */

.site-content,
#content,
#main-content,
main {
  overflow-x: hidden;

  width: 100%;

  position: relative;
}

.site-content {
  padding-top: 0; /* Since it's floating, let the content sit under it or adjust if needed */
}

.kts-header.is-scrolled {
  transform: translateY(0);
}

/*  HERO SECTION (Split Layout)  */

/*  Center all section titles on mobile  */

@media (max-width: 768px) {
  .section-title {
    text-align: center !important;
  }

  .section-header {
    text-align: center !important;
  }

  .section-header--split {
    flex-direction: column;

    align-items: center !important;
  }
}

/*  Prevent Testimonials rating stacking bug  */

@media (max-width: 768px) {
  .testimonials-rating-summary {
    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;
  }

  .rating-stars {
    margin-bottom: 8px !important;
  }

  .about-grid {
    grid-template-columns: 1fr !important;

    gap: 40px !important;
  }

  .about-content-col {
    order: 2 !important;
  }

  .about-image-col {
    order: 1 !important;
  }
}

/*  Shared Background Wrapper (Hero + About + Trust Bar)  */

.hero-bg-wrap {
  position: relative;

  display: flex;

  flex-direction: column;

  overflow: hidden; /* Prevent background elements from causing horizontal overflow */
}

/* Full-height background image layer */

.hbw-bg {
  position: absolute;

  top: -2px; /* Slight offset to prevent sub-pixel gaps at the top */

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 0;

  overflow: hidden;
}

.hbw-bg-img {
  width: 100%;

  height: 100%; /* Reset from 125% as parallax is removed */

  object-fit: cover;

  object-position: center top;

  display: block;

  will-change: transform;

  transform-origin: center top;

  transform: none; /* Removed parallax transform */
}

/* Unified dark gradient overlay for text readability across all 3 sections */

.hbw-bg-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    to bottom,

    rgba(0, 0, 0, 0.65) 0%,

    rgba(0, 0, 0, 0.5) 35%,

    rgba(0, 0, 0, 0.55) 65%,

    rgba(0, 0, 0, 0.7) 100%
  );

  z-index: 1;

  pointer-events: none;
}

.hero-bg-wrap > *:not(.hbw-bg) {
  position: relative;

  z-index: 2;
}

/* Section wrapper */

/* ============================================================

   HERO SECTION V4 (Refined Two-Column Layout)

   ============================================================ */

.hero-section-v4 {
  position: sticky;

  top: 0;

  width: 100%;

  min-height: 97vh;

  min-height: 97svh;

  background: #ffffff;

  overflow: hidden;

  display: flex;

  align-items: stretch;

  padding-top: 80px; /* Header space */

  padding-bottom: 0 !important;

  margin-bottom: 0 !important;

  z-index: 1;
}

/* Central Background Image Layer */

.hero-main-bg {
  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0; /* Slight overlap to prevent gap */

  z-index: 1;

  pointer-events: none;

  display: flex;

  justify-content: center;

  align-items: flex-end;
}

.bg-workers-img {
  height: 92%; /* Fill the section */

  width: auto;

  max-width: none;

  object-fit: contain;

  opacity: 1;

  transform: translateX(18%);
}

/* Reduced max-width container */

.hero-container-v4 {
  position: relative;

  z-index: 10;

  max-width: 1500px;

  margin-inline: auto;

  width: 100%;

  padding-inline: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 60px;
}

/* Columns */

.hero-col-left {
  flex: 1;

  max-width: 950px;

  text-align: left;

  margin-top: -100px;
}

.hero-col-right {
  flex: 0 0 240px;

  display: flex;

  justify-content: flex-end;

  align-self: flex-end;

  margin-bottom: 0;
}

/* Content Styles */

.hero-eyebrow-v4 {
  display: block;

  font-size: 1rem;

  font-weight: 600;

  color: #1c1c1c;

  margin-bottom: 24px;

  text-transform: uppercase;
}

.hero-heading-v4 {
  font-size: clamp(2.9rem, 6.4vw, 4rem);

  font-weight: 550;

  line-height: 1.15;

  color: #000000;

  margin-bottom: 24px;
}

.hero-heading-v4 .text-orange {
  color: #ea6d00;
}

.hero-desc-v4 {
  font-size: 1.0625rem;

  line-height: 1.7;

  color: #666b6e;

  margin-bottom: 40px;

  max-width: 550px;
}

/* Buttons */

.hero-btns-v4 {
  display: flex;

  gap: 10px;

  margin-bottom: 48px;
}

.btn-hero-solid,
.btn-hero-outline {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 13px 32px;

  font-size: 0.9375rem;

  font-weight: 600;

  transition: all 0.3s ease;

  text-decoration: none;

  white-space: nowrap;
}

.btn-hero-solid {
  background: #ea6d00;

  color: #ffffff;
}

.btn-hero-solid:hover {
  background: #000000;

  color: #ffffff;

  transform: translateY(-2px);
}

.btn-hero-outline {
  background: transparent;

  color: #000000;

  border: 2px solid #000000;
}

.btn-hero-outline:hover {
  background: #000000;

  color: #ffffff;

  transform: translateY(-2px);
}

/* Reviews */

.hero-reviews-v4 {
  display: flex;

  align-items: center;

  gap: 15px;
}

.review-avatars {
  display: flex;
}

.review-avatars img {
  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 2px solid #ffffff;

  margin-left: -12px;

  object-fit: cover;

  background: #eee;
}

.review-avatars img:first-child {
  margin-left: 0;
}

.review-text {
  font-size: 0.9375rem;

  font-weight: 600;

  color: #1c1c1c;
}

/* Card */

.hero-card-v4 {
  width: 270px;

  padding: 16px;

  margin-bottom: 30px;

  background: transparent;

  backdrop-filter: blur(16px);

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

  border-radius: 16px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-card-v4:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.hero-card-v4 .card-img-wrap {
  width: 100%;

  height: 110px;

  border-radius: 10px;

  overflow: hidden;

  margin-bottom: 16px;
}

.hero-card-v4 .card-img-wrap img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.hero-card-v4 .card-title {
  font-size: 0.875rem;

  font-weight: 600;

  color: #1c1c1c;

  margin-bottom: 8px;
}

.hero-card-v4 .card-desc {
  font-size: 0.8rem;

  line-height: 1.6;

  text-align: justify;

  color: #666b6e;

  margin-bottom: 16px;
}

.hero-card-v4 .card-link {
  font-size: 0.85rem;

  font-weight: 600;

  color: #ea6d00;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 3px;
}

.hero-card-v4 .card-link::after {
  content: "";

  transition: transform 0.2s ease;
}

.hero-card-v4 .card-link:hover::after {
  transform: translateX(4px);
}

/* Responsive */

@media (max-width: 1024px) {
  .hero-container-v4 {
    flex-direction: column;

    text-align: center;

    padding-top: 40px; /* Reduced from 60px */

    padding-bottom: 60px;

    gap: 40px;
  }

  .hero-col-left {
    max-width: 100%;

    text-align: center;

    margin-top: 0;
  }

  .hero-col-right {
    flex: none;

    width: 100%;

    max-width: 280px;

    justify-content: center;

    align-self: center;

    margin-bottom: 0;
  }

  .hero-card-v4 {
    display: none;
  }

  .hero-btns-v4 {
    justify-content: center;
  }

  .hero-reviews-v4 {
    justify-content: center;
  }

  .bg-workers-img {
    height: 80%;

    opacity: 0.2; /* Fade for readability */

    transform: none;
  }

  .hero-heading-v4 {
    font-size: 3.2rem;
  }
}

@media (max-width: 600px) {
  .hero-section-v4 {
    padding-top: 40px; /* Reduced from 80px */
  }

  .hero-container-v4 {
    padding-top: 20px; /* Reduced from 60px */
    padding-bottom: 40px;
  }

  .hero-btns-v4 {
    flex-direction: column;

    gap: 12px;
  }

  .btn-hero-solid,
  .btn-hero-outline {
    width: 100%;
  }

  .hero-card-v4 {
    display: none;
  }
}

/*  ABOUT SECTION V2  */

/*  SERVICES SECTION  */

/* Responsive */

.stats-section-v5 {
  padding: 120px 0;

  background: #0a0a0a;

  position: relative;

  overflow: hidden;
}

.stats-dot-grid {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 80%;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.15) 1.5px,
    transparent 1.5px
  );

  background-size: 32px 32px;

  -webkit-mask-image: linear-gradient(to bottom, black, transparent);

  mask-image: linear-gradient(to bottom, black, transparent);

  opacity: 1;

  pointer-events: none;
}

.stats-header-v5 {
  text-align: center;

  max-width: 1000px;

  margin: 0 auto 80px;

  position: relative;

  z-index: 2;
}

.stats-eyebrow-v5 {
  display: block;

  font-size: 0.85rem;

  font-weight: 600;

  color: #ffffff;

  letter-spacing: 0.15em;

  margin-bottom: 20px;
}

.stats-heading-v5 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);

  font-weight: 400;

  color: #ffffff;

  margin-bottom: 24px;

  line-height: 1.1;

  font-family: var(--font-heading);
}

.stats-desc-v5 {
  font-size: 1.1rem;

  color: #888;

  line-height: 1.6;

  max-width: 700px;

  margin-inline: auto;
}

.stats-grid-v5 {
  display: grid;

  max-width: 1600px;

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

  gap: 12px;

  position: relative;

  z-index: 2;
}

/* Custom Reveal Animations */

.custom-reveal-item {
  opacity: 0;

  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform, opacity;
}

/* Initial States */

.custom-reveal-item[data-reveal-type="fade-zoom-in"] {
  transform: scale(0.6);
}

.custom-reveal-item[data-reveal-type="fade-down"] {
  transform: translateY(-50px);
}

.custom-reveal-item[data-reveal-type="fade-up"] {
  transform: translateY(50px);
}

/* Revealed State */

.custom-reveal-item.revealed {
  opacity: 1 !important;

  transform: translate(0) scale(1) !important;
}

.stat-box-v5 {
  aspect-ratio: 1 / 1;

  border-radius: 15px;

  overflow: hidden;

  position: relative;

  display: flex;

  flex-direction: column;

  cursor: pointer;
}

/* Image Boxes */

.stat-box-v5.img-box .stat-img-wrap {
  width: 100%;

  height: 100%;

  position: relative;
}

.stat-box-v5.img-box .stat-img-wrap::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(234, 109, 0, 0.15);

  z-index: 2;

  pointer-events: none;

  transition: opacity 0.4s ease;
}

.stat-box-v5.img-box:hover .stat-img-wrap::before {
  opacity: 0;
}

.stat-box-v5.img-box .stat-img-wrap::after {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.45);

  transition: background 0.4s ease;

  z-index: 1;
}

.stat-box-v5.img-box:hover .stat-img-wrap::after {
  background: rgba(0, 0, 0, 0.35);
}

/* Hover Info Box */

.stat-hover-info {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding: 24px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  z-index: 5;

  opacity: 0;

  transform: translateY(15px);

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;
}

.stat-box-v5.img-box:hover .stat-hover-info {
  opacity: 1;

  transform: translateY(0);
}

.stat-hover-title {
  color: #ffffff;

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 10px;

  font-family: var(--font-heading);
}

.stat-hover-desc {
  color: rgba(255, 255, 255, 0.8);

  font-size: 0.95rem;

  line-height: 1.5;

  font-weight: 400;
}

.stat-box-v5.img-box img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(100%) contrast(1.1);

  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}

.stat-box-v5.img-box:hover img {
  transform: scale(1.08);

  filter: grayscale(0%) contrast(1);
}

/* Text Boxes */

.stat-box-v5.text-box {
  padding: 30px 24px 8px;
}

.stat-content-v5 {
  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

  width: 100%;
}

.stat-box-v5.white-box {
  background-color: #ffffff;

  color: #000000;
}

.stat-box-v5.orange-box {
  background-color: #ea6d00;

  color: #ffffff;
}

.stat-box-v5.cream-box {
  background-color: #f7e6d5;

  color: #000000;
}

.stat-box-v5.cream-box .stat-number-wrap-v5 {
  margin-bottom: 5px;
}

.stat-label-v5 {
  font-size: 1.15rem;

  font-weight: 400;

  line-height: 1.2;

  opacity: 0.9;
}

.stat-number-wrap-v5 {
  display: flex;

  align-items: center;

  margin-top: auto;

  margin-left: -5px;
}

.stat-value-v5 {
  font-size: clamp(3rem, 6vw, 6.5rem);

  font-weight: 200;

  line-height: 0.8;

  letter-spacing: -0.04em;

  font-family: var(--font-heading);
}

.stat-suffix-v5 {
  font-size: clamp(2rem, 5.5vw, 6.5rem);

  font-weight: 400;

  margin-left: 4px;
}

.box-dot-icon {
  position: absolute;

  top: 40px;

  right: 40px;

  display: grid;

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

  gap: 12px;
}

.box-dot-icon span {
  width: 5px;

  height: 5px;

  background-color: rgba(255, 255, 255, 0.8);

  border-radius: 50%;
}

.white-box .box-dot-icon span,
.cream-box .box-dot-icon span {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Checkerboard Logic for 2 Columns (Zigzag) */

@media (max-width: 1200px) {
  .stats-grid-v5 {
    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    max-width: 900px;

    margin-inline: auto;
  }

  .stat-box-v5:nth-child(3) {
    order: 4;
  }

  .stat-box-v5:nth-child(4) {
    order: 3;
  }

  .stat-box-v5:nth-child(5) {
    order: 6;
  }

  .stat-box-v5:nth-child(6) {
    order: 5;
  }
}

@media (max-width: 768px) {
  .stats-grid-v5 {
    max-width: 600px;

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

    gap: 12px;
  }

  .stat-value-v5 {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .stat-label-v5 {
    font-size: 1rem;
  }

  /* True zig-zag: Image-Text, Text-Image, Image-Text, Text-Image */

  .stat-box-v5:nth-child(1) {
    order: 1;
  } /* Image - row 1 left */

  .stat-box-v5:nth-child(2) {
    order: 2;
  } /* Stat - row 1 right */

  .stat-box-v5:nth-child(7) {
    order: 3;
  } /* Stat - row 2 left */

  .stat-box-v5:nth-child(8) {
    order: 4;
  } /* Image - row 2 right */

  .stat-box-v5:nth-child(3) {
    order: 5;
  } /* Image - row 3 left */

  .stat-box-v5:nth-child(4) {
    order: 6;
  } /* Stat - row 3 right */

  .stat-box-v5:nth-child(5) {
    order: 7;
  } /* Stat - row 4 left */

  .stat-box-v5:nth-child(6) {
    order: 8;
  } /* Image - row 4 right */
}

@media (max-width: 480px) {
  .stats-grid-v5 {
    gap: 10px;

    max-width: 100%;

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

  .stat-box-v5 {
    padding: 20px 15px;
  }

  .stat-box-v5.text-box {
    padding: 20px 15px;
  }

  .stat-value-v5 {
    font-size: 3rem;
  }

  /* True zig-zag: Image-Text, Text-Image, Image-Text, Text-Image */

  .stat-box-v5:nth-child(1) {
    order: 1;
  } /* Image - row 1 left */

  .stat-box-v5:nth-child(2) {
    order: 2;
  } /* Stat - row 1 right */

  .stat-box-v5:nth-child(7) {
    order: 3;
  } /* Stat - row 2 left */

  .stat-box-v5:nth-child(8) {
    order: 4;
  } /* Image - row 2 right */

  .stat-box-v5:nth-child(3) {
    order: 5;
  } /* Image - row 3 left */

  .stat-box-v5:nth-child(4) {
    order: 6;
  } /* Stat - row 3 right */

  .stat-box-v5:nth-child(5) {
    order: 7;
  } /* Stat - row 4 left */

  .stat-box-v5:nth-child(6) {
    order: 8;
  } /* Image - row 4 right */
}

/*  GALLERY SECTION  */

/*  GALLERY SECTION  */

/*  GALLERY HIGHLIGHTS SECTION  */

/*  PIXEL PERFECT TESTIMONIALS  */

.testimonials-section-v2 {
  position: relative;

  padding: 80px 0 160px; /* Reduced top padding from 180px */

  overflow: hidden;

  background: #ffffff;
}

.testimonials-bg-overlay {
  position: absolute;

  bottom: 0; /* Anchor to bottom */

  top: 300px;

  left: 0;

  width: 100%;

  height: 100%; /* Image at bottom */

  background-image: url("http://karsttreeservicesoneidany.com/wp-content/uploads/2026/05/dasdasd.png");

  background-size: cover;

  background-position: center bottom;

  z-index: 0;
}

/* Decorative Dots - Exactly as in image */

.testimonials-decor-dots {
  position: absolute;

  top: 180px;

  left: 45%;

  width: 220px;

  height: 220px;

  z-index: 1;

  pointer-events: none;

  opacity: 0.3;

  background-image: radial-gradient(#d1d5db 2px, transparent 2px);

  background-size: 24px 24px;
}

.testimonials-section-v2 .container {
  position: relative;

  z-index: 2;

  max-width: 1440px; /* Increased from 1280px */
}

.testimonials-grid-v2 {
  display: grid;

  grid-template-columns: 50% 50%;

  gap: 60px;

  align-items: flex-start; /* Changed from center to align to top */

  padding-top: 40px;
}

/* Left Side */

.testimonials-content-v2 {
  max-width: 650px;

  margin-top: -30px; /* Pull it up further */
}

.testimonials-eyebrow-v2 {
  display: block;

  font-size: 1rem;

  font-weight: 600;

  color: #111;

  margin-bottom: 24px;
}

.testimonials-heading-v2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);

  line-height: 1.05;

  font-weight: 600;

  color: #111;

  margin-bottom: 20px;

  letter-spacing: -1.5px;
}

.testimonials-desc-v2 {
  font-size: 1.125rem;

  color: #4b5563;

  margin-bottom: 44px;

  line-height: 1.5;

  max-width: 500px; /* Increased from 320px */
}

.testimonials-actions-v2 {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}

.btn-pixel {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 16px 36px;

  font-weight: 600;

  font-size: 1.0625rem;

  transition: all 0.3s ease;

  text-decoration: none;

  min-width: 170px;
}

.btn-primary-pixel {
  background: #ea6d00;

  color: #ffffff;

  border: none;
}

.btn-primary-pixel:hover {
  background: #1c1c1c;

  color: #ffffff;

  transform: scale(1.02);
}

.btn-outline-pixel {
  background: transparent;

  color: #111;

  border: 2px solid #111;
}

.btn-outline-pixel:hover {
  transform: scale(1.02);
}

/* GMB Review Button */

.testimonials-gmb-wrap {
  display: inline-block;
}

.btn-gmb-review {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  padding: 14px 28px;

  background: #ffffff;

  border: 1px solid #e8e8e8;

  border-radius: 100px;

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.btn-gmb-review:hover {
  border-color: #4285f4;

  box-shadow: 0 12px 30px rgba(66, 133, 244, 0.12);

  transform: translateY(-4px);
}

.btn-gmb-review .g-logo {
  width: 22px;

  height: 22px;
}

.btn-gmb-review span {
  font-size: 1rem;

  font-weight: 600;

  color: #1a1a1a;
}

.btn-gmb-review .g-stars {
  color: #fbbc05;

  letter-spacing: 2px;

  font-size: 1.125rem;

  margin-left: 8px;
}

/* Right Side: Visual Marquee */

.testimonials-visual-v2 {
  display: flex;

  gap: 20px;

  height: 800px; /* Increased from 720px to match taller section */

  overflow: hidden;

  position: relative;

  /* Top and Bottom Fades */

  mask-image: linear-gradient(
    to bottom,

    transparent 0%,

    black 10%,

    black 90%,

    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to bottom,

    transparent 0%,

    black 10%,

    black 90%,

    transparent 100%
  );
}

.vertical-marquee-col {
  flex: 1;

  display: flex;

  flex-direction: column;
}

.vertical-marquee-track {
  display: flex;

  flex-direction: column;

  gap: 20px;

  animation-duration: 45s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;
}

.track-up .vertical-marquee-track {
  animation-name: scrollUpPixel;
}

.track-down .vertical-marquee-track {
  animation-name: scrollDownPixel;
}

@keyframes scrollUpPixel {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDownPixel {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

/* Testimonial Card - Two Tone Design */

.testimonial-card-pixel {
  background: #ffffff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);

  display: flex;

  flex-direction: column;

  width: 100%;
}

.card-top {
  padding: 30px;

  background: #ffffff;

  flex: 1;
}

.card-rating {
  display: flex;

  align-items: center;

  gap: 6px;

  font-weight: 600;

  font-size: 0.875rem;

  margin-bottom: 24px;
}

.rating-num {
  color: #111;
}

.rating-star {
  color: #f08c35;
  font-size: 1.1rem;
}

.rating-label {
  color: #9ca3af;
  font-weight: 600;
}

.card-quote p {
  font-size: 1.125rem;

  line-height: 1.5;

  color: #111;

  font-weight: 600; /* Reduced from 700 */

  margin: 0;
}

.card-bottom {
  background: #f3f4f6; /* Greyish bottom part */

  padding: 20px 30px;
}

.card-author {
  display: flex;

  align-items: center;

  gap: 12px;
}

.card-avatar {
  width: 44px;

  height: 44px;

  border-radius: 50%;

  overflow: hidden;

  border: 1px solid #fff;
}

.card-avatar img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.card-info {
  display: flex;

  flex-direction: column;
}

.author-name {
  font-size: 0.9375rem;

  font-weight: 600;

  color: #111;

  margin: 0;
}

.author-role {
  font-size: 0.8125rem;

  color: #6b7280;

  margin: 0;
}

/* Responsive Fixes */

@media (max-width: 1200px) {
  .testimonials-section-v2 {
    padding: 140px 0;
  }

  .testimonials-grid-v2 {
    gap: 50px;
  }

  .testimonials-visual-v2 {
    height: 700px;
  }
}

@media (max-width: 1024px) {
  .testimonials-section-v2 {
    padding: 120px 0;
  }

  .testimonials-grid-v2 {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .testimonials-content-v2 {
    max-width: 100%;

    text-align: center;

    margin-inline: auto;
  }

  .testimonials-actions-v2 {
    justify-content: center;
  }

  .testimonials-desc-v2 {
    max-width: 100%;
  }

  .testimonials-visual-v2 {
    height: 500px;

    max-width: 600px;

    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .testimonials-section-v2 {
    padding: 100px 0;
  }

  .testimonials-grid-v2 {
    gap: 40px;
  }

  .testimonials-content-v2 {
    margin-top: 0;
  }

  .testimonials-eyebrow-v2 {
    font-size: 0.9375rem;

    margin-bottom: 16px;
  }

  .testimonials-heading-v2 {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .testimonials-desc-v2 {
    font-size: 1rem;

    margin-bottom: 32px;
  }

  .testimonials-visual-v2 {
    height: 450px;

    max-width: 500px;
  }

  .vertical-marquee-track {
    gap: 16px;
  }

  .card-top {
    padding: 24px;
  }

  .card-bottom {
    padding: 16px 24px;
  }

  .card-rating {
    font-size: 0.8125rem;

    margin-bottom: 16px;
  }

  .card-quote p {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .testimonials-section-v2 {
    padding: 80px 0;
  }

  .testimonials-grid-v2 {
    gap: 32px;
  }

  .testimonials-decor-dots {
    width: 150px;

    height: 150px;

    top: 120px;

    left: 50%;

    transform: translateX(-50%);
  }

  .testimonials-actions-v2 {
    flex-direction: column;

    align-items: stretch;

    gap: 16px;

    width: 100%;
  }

  .btn-pixel,
  .testimonials-gmb-wrap,
  .btn-gmb-review {
    width: 100% !important;

    min-width: unset !important;

    border-radius: 0 !important;

    justify-content: center;
  }

  .btn-gmb-review {
    padding: 16px 20px;

    border-width: 1.5px;
  }

  .btn-pixel {
    font-size: 1rem;
  }

  .testimonials-visual-v2 {
    height: 400px;

    max-width: 100%;
  }

  .vertical-marquee-col {
    gap: 16px;
  }

  .testimonial-card-pixel {
    border-radius: 16px;
  }

  .card-avatar {
    width: 40px;

    height: 40px;
  }

  .author-name {
    font-size: 0.875rem;
  }

  .author-role {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .testimonials-section-v2 {
    padding: 60px 0;
  }

  .testimonials-grid-v2 {
    gap: 24px;
  }

  .testimonials-eyebrow-v2 {
    font-size: 0.875rem;
  }

  .testimonials-heading-v2 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .testimonials-desc-v2 {
    font-size: 0.9375rem;

    margin-bottom: 24px;
  }

  .testimonials-visual-v2 {
    height: 350px;
  }

  .card-top {
    padding: 20px;
  }

  .card-bottom {
    padding: 14px 20px;
  }

  .card-rating {
    font-size: 0.75rem;

    margin-bottom: 12px;
  }

  .rating-star {
    font-size: 1rem;
  }

  .card-quote p {
    font-size: 0.9375rem;
  }

  .card-avatar {
    width: 36px;

    height: 36px;
  }

  .author-name {
    font-size: 0.8125rem;
  }

  .author-role {
    font-size: 0.6875rem;
  }
}

@media (max-width: 640px) {
  .testimonials-cta-buttons {
    flex-direction: column;

    width: 100%;
  }

  .testimonials-cta-buttons .testimonials-btn-primary,
  .testimonials-cta-buttons .testimonials-btn-outline {
    width: 100%;

    justify-content: center;
  }
}

/*  BLOG LISTING & SINGLE POST  */

/* Archive Hero */

.page-hero--blog {
  position: relative;

  padding: 140px 0 100px;

  background: var(--kts-dark);

  overflow: hidden;

  color: #ffffff;
}

.page-hero-bg {
  position: absolute;

  inset: 0;

  z-index: 0;
}

.page-hero-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.6;
}

.page-hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(to top, var(--kts-dark) 0%, transparent 100%);
}

.page-hero-title {
  font-family: var(--font-heading);

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

  font-weight: 600;

  margin-bottom: 20px;

  line-height: 1.1;
}

.page-hero-desc {
  font-size: 1.125rem;

  opacity: 0.85;

  max-width: 600px;

  margin-inline: auto;
}

/* Layout */

.blog-listing-section,
.post-content-section {
  padding: 100px 0;

  background: #ffffff;
}

.blog-layout,
.post-layout {
  display: grid;

  grid-template-columns: 1fr 340px;

  gap: 60px;

  align-items: start;
}

/* Post Cards */

.posts-grid {
  display: grid;

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

  gap: 32px;
}

.posts-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.post-card {
  background: #ffffff;

  border-radius: 20px;

  overflow: hidden;

  border: 1px solid var(--kts-gray-100);

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  display: flex;

  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

  border-color: var(--kts-primary);
}

.post-card-thumb {
  position: relative;

  aspect-ratio: 16/10;

  overflow: hidden;
}

.post-card-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;
}

.post-card:hover .post-card-img {
  transform: scale(1.08);
}

.post-card-cat-badge {
  position: absolute;

  top: 15px;

  left: 15px;

  background: var(--kts-primary);

  color: #ffffff;

  font-size: 0.7rem;

  font-weight: 600;

  text-transform: uppercase;

  padding: 4px 12px;

  border-radius: 50px;

  letter-spacing: 0.05em;
}

.post-card-body {
  padding: 30px;

  display: flex;

  flex-direction: column;

  flex: 1;
}

.post-card-meta {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.75rem;

  color: var(--kts-gray-400);

  margin-bottom: 15px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

.post-card-title {
  font-family: var(--font-heading);

  font-size: 1.25rem;

  font-weight: 600;

  margin-bottom: 12px;

  line-height: 1.3;
}

.post-card-title a {
  color: var(--kts-dark);

  text-decoration: none;

  transition: color 0.3s ease;
}

.post-card-title a:hover {
  color: var(--kts-primary);
}

.post-card-excerpt {
  font-size: 0.9375rem;

  color: var(--kts-gray-600);

  line-height: 1.6;

  margin-bottom: 24px;

  flex: 1;
}

/* Sidebar Widgets */

.sidebar-widget {
  background: var(--kts-cream);

  padding: 32px;

  border-radius: 20px;

  margin-bottom: 30px;

  border: 1px solid var(--kts-gray-100);
}

.widget-title {
  font-family: var(--font-heading);

  font-size: 1.125rem;

  font-weight: 600;

  margin-bottom: 24px;

  color: var(--kts-dark);

  position: relative;

  padding-bottom: 12px;
}

.widget-title::after {
  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 40px;

  height: 2px;

  background: var(--kts-primary);
}

/* Sidebar Search */

.search-field-wrap {
  position: relative;
}

.search-field {
  width: 100%;

  padding: 14px 50px 14px 20px;

  border-radius: 50px;

  border: 1px solid var(--kts-gray-200);

  background: #ffffff;

  font-size: 0.9375rem;

  transition: border-color 0.3s ease;
}

.search-field:focus {
  border-color: var(--kts-primary);

  outline: none;
}

.search-submit {
  position: absolute;

  right: 6px;

  top: 50%;

  transform: translateY(-50%);

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--kts-primary);

  color: #ffffff;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.3s ease;
}

.search-submit svg {
  width: 18px;

  height: 18px;

  stroke: #ffffff;

  fill: none;

  stroke-width: 2.5;
}

.search-submit:hover {
  background: var(--kts-dark);
}

.search-submit:hover svg {
  stroke: #ffffff;
}

/* Side Post Links */

.side-post-link {
  display: flex;

  gap: 16px;

  margin-bottom: 20px;

  text-decoration: none;

  align-items: center;
}

.side-post-thumb {
  width: 64px;

  height: 64px;

  border-radius: 12px;

  overflow: hidden;

  background: var(--kts-gray-100);

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;
}

.side-post-thumb img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.side-post-title {
  font-family: var(--font-heading);

  font-size: 0.9375rem;

  font-weight: 600;

  color: var(--kts-dark);

  line-height: 1.3;

  margin: 0 0 4px 0;

  transition: color 0.3s ease;
}

.side-post-link:hover .side-post-title {
  color: var(--kts-primary);
}

.side-post-date {
  font-size: 0.75rem;

  color: var(--kts-gray-400);
}

/* Side Cats */

.side-cats-list {
  list-style: none;

  padding: 0;

  margin: 0;
}

.side-cats-list li {
  margin-bottom: 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.side-cats-list li a {
  color: var(--kts-gray-600);

  text-decoration: none;

  font-size: 0.9375rem;

  font-weight: 600;

  transition: color 0.3s ease;
}

.side-cats-list li a:hover {
  color: var(--kts-primary);
}

.side-cats-list .count {
  font-size: 0.75rem;

  background: #ffffff;

  padding: 2px 8px;

  border-radius: 10px;

  color: var(--kts-gray-400);

  font-weight: 600;
}

/*Single Post Article */

.post-hero {
  position: relative;

  padding: 180px 0 100px;

  min-height: 500px;

  display: flex;

  align-items: flex-end;

  color: #ffffff;

  background: var(--kts-dark);
}

.post-hero-bg {
  position: absolute;

  inset: 0;

  z-index: 0;
}

.post-hero-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.5;
}

.post-hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,

    rgba(17, 17, 17, 0.9) 0%,

    transparent 100%
  );
}

.post-cats {
  margin-bottom: 20px;
}

.post-cats a {
  background: var(--kts-primary);

  color: #ffffff;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  padding: 4px 14px;

  border-radius: 50px;

  text-decoration: none;

  letter-spacing: 0.05em;
}

.post-title {
  font-family: var(--font-heading);

  font-size: clamp(2rem, 5vw, 3.5rem);

  font-weight: 600;

  margin-bottom: 24px;

  line-height: 1.1;
}

.post-meta {
  display: flex;

  align-items: center;

  gap: 24px;

  font-size: 0.875rem;

  opacity: 0.8;

  font-weight: 600;
}

.post-meta-item {
  display: flex;

  align-items: center;

  gap: 8px;
}

/* Content Typography */

.entry-content {
  font-size: 1.125rem;

  line-height: 1.8;

  color: var(--kts-gray-800);
}

.entry-content h2,
.entry-content h3 {
  font-family: var(--font-heading);

  color: var(--kts-dark);

  margin: 40px 0 20px;
}

.entry-content p {
  margin-bottom: 28px;
}

.entry-content blockquote {
  padding: 40px;

  background: var(--kts-cream);

  border-left: 4px solid var(--kts-primary);

  border-radius: 0 20px 20px 0;

  font-style: italic;

  font-size: 1.25rem;

  margin: 40px 0;

  color: var(--kts-dark);
}

/* Post Footer */

.post-footer {
  margin-top: 60px;

  padding-top: 40px;

  border-top: 1px solid var(--kts-gray-100);

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.post-tags a {
  display: inline-block;

  padding: 4px 12px;

  background: var(--kts-gray-100);

  color: var(--kts-gray-600);

  font-size: 0.8125rem;

  border-radius: 6px;

  text-decoration: none;

  margin-right: 6px;

  transition: all 0.3s ease;
}

.post-tags a:hover {
  background: var(--kts-primary);

  color: #ffffff;
}

.post-share {
  display: flex;

  align-items: center;

  gap: 12px;
}

.share-links {
  display: flex;

  gap: 8px;
}

.share-icon {
  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  transition: transform 0.3s ease;
}

.share-icon.fb {
  background: #3b5998;
}

.share-icon.tw {
  background: #1da1f2;
}

.share-icon:hover {
  transform: translateY(-3px);
}

/* Sidebar CTA Card */

.sidebar-cta-card {
  background: var(--kts-dark);

  color: #ffffff;

  padding: 40px 30px;

  border-radius: 24px;

  text-align: center;

  margin-bottom: 30px;

  background-image: url("http://karsttreeservice.com/wp-content/uploads/2026/04/Tree-img-copy.webp");

  background-size: cover;

  background-position: center;

  position: relative;

  overflow: hidden;
}

.sidebar-cta-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background: rgba(17, 17, 17, 0.85);
}

.sidebar-cta-card > * {
  position: relative;

  z-index: 1;
}

.cta-card-title {
  font-family: var(--font-heading);

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 16px;

  color: #ffffff;
}

.sidebar-cta-card p {
  font-size: 0.9375rem;

  opacity: 0.8;

  margin-bottom: 24px;
}

/* Responsive Blog */

@media (max-width: 1024px) {
  .blog-layout,
  .post-layout {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .blog-sidebar,
  .post-sidebar {
    order: 2;
  }
}

@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }

  .page-hero--blog,
  .post-hero {
    padding: 120px 0 60px;

    text-align: center;
  }

  .post-meta {
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;
  }
}

.post-card-title a {
  color: var(--kts-dark);
}

.post-card-title a:hover {
  color: var(--kts-green);
}

.post-card-excerpt {
  color: var(--kts-gray-600);

  font-size: 0.9rem;

  line-height: 1.65;

  margin-bottom: 20px;

  flex: 1;
}

/*  BLOG POST CARD PREMUM  */

.post-card {
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease !important;
}

.post-card:hover {
  transform: translateY(-8px) scale(1.01) !important;

  box-shadow: var(--shadow-xl) !important;
}

/*  BLOG PAGE REDESIGN  */

.page-hero--blog {
  padding: 160px 0 100px !important;

  text-align: left !important;
}

.blog-hero-eyebrow {
  margin-bottom: 24px;
}

.posts-grid--blog {
  display: grid;

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

  gap: 40px;
}

.blog-layout {
  display: grid;

  grid-template-columns: 1fr 340px;

  gap: 60px;

  padding: 80px 0;
}

/* Post Card Redesign */

.post-card {
  height: 100%;
}

.post-card-inner {
  background: var(--kts-white);

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

  overflow: hidden;

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

  border: 1px solid var(--kts-gray-100);

  transition: var(--ease);

  height: 100%;

  display: flex;

  flex-direction: column;
}

.post-card-inner:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-xl);

  border-color: var(--kts-primary-pale);
}

.post-card-thumb-wrap {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;
}

.post-card-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: var(--ease-slow);
}

.post-card-inner:hover .post-card-img {
  scale: 1.05;
}

.post-card-cat {
  position: absolute;

  top: 20px;

  left: 20px;

  background: var(--kts-primary);

  color: var(--kts-white);

  padding: 6px 14px;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  border-radius: 100px;

  z-index: 2;
}

.post-card-content {
  padding: 32px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;
}

.post-card-meta-v2 {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  font-size: 0.8125rem;

  color: var(--kts-gray-500);

  font-weight: 600;
}

.meta-dot {
  width: 4px;

  height: 4px;

  background: var(--kts-gray-300);

  border-radius: 50%;
}

.post-card-title-v2 {
  font-size: 1.5rem;

  line-height: 1.3;

  margin-bottom: 16px;

  color: var(--kts-dark);

  font-family: var(--font-heading);
}

.post-card-excerpt-v2 {
  font-size: 1rem;

  line-height: 1.6;

  color: var(--kts-gray-600);

  margin-bottom: 24px;
}

.post-card-footer-v2 {
  margin-top: auto;

  padding-top: 20px;

  border-top: 1px solid var(--kts-gray-100);
}

.post-card-link-v2 {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-weight: 600;

  color: var(--kts-primary);

  font-size: 0.875rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  transition: var(--ease-fast);
}

.link-arrow-v2 {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border: 1.5px solid var(--kts-primary);

  border-radius: 50%;

  transition: var(--ease);
}

.post-card-inner:hover .link-arrow-v2 {
  background: var(--kts-primary);

  color: var(--kts-white);

  transform: translateX(4px);
}

/* Sidebar Redesign */

.sidebar-widget-premium {
  background: var(--kts-white);

  padding: 32px;

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

  border: 1px solid var(--kts-gray-100);

  margin-bottom: 40px;

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

.widget-title-v2 {
  font-size: 1.125rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--kts-dark);

  margin-bottom: 24px;

  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;
}

.widget-title-v2::after {
  content: "";

  height: 2px;

  flex-grow: 1;

  background: var(--kts-gray-100);
}

/* Search v2 */

.search-field-wrap-v2 {
  position: relative;
}

.search-field-v2 {
  width: 100%;

  background: var(--kts-gray-50);

  border: 1px solid var(--kts-gray-200);

  padding: 14px 50px 14px 20px;

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

  font-size: 0.9375rem;

  transition: var(--ease-fast);
}

.search-field-v2:focus {
  background: var(--kts-white);

  border-color: var(--kts-primary);

  outline: none;
}

.search-submit-v2 {
  position: absolute;

  right: 12px;

  top: 50%;

  translate: 0 -50%;

  background: none;

  border: none;

  color: var(--kts-gray-400);

  transition: var(--ease);
}

.search-field-v2:focus + .search-submit-v2 {
  color: var(--kts-primary);
}

/* Side Posts list v2 */

.side-posts-list-v2 {
  display: flex;

  flex-direction: column;

  gap: 20px;
}

.side-post-card-v2 {
  display: flex;

  gap: 16px;

  align-items: center;

  transition: var(--ease);
}

.side-post-card-v2:hover {
  transform: translateX(5px);
}

.side-post-thumb-v2 {
  width: 70px;

  height: 70px;

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

  overflow: hidden;

  flex-shrink: 0;

  background: var(--kts-gray-100);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;
}

.side-post-thumb-v2 img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.side-post-title-v2 {
  font-size: 0.9375rem;

  font-weight: 600;

  line-height: 1.4;

  margin-bottom: 4px;

  color: var(--kts-dark);
}

.side-post-date-v2 {
  font-size: 0.75rem;

  color: var(--kts-gray-500);
}

/* Side Cats v2 */

.side-cats-list-v2 {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.side-cat-link-v2 {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 16px;

  background: var(--kts-gray-50);

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

  transition: var(--ease);
}

.side-cat-link-v2:hover {
  background: var(--kts-primary-pale);

  color: var(--kts-primary);
}

.cat-name-v2 {
  font-weight: 600;

  font-size: 0.9375rem;
}

.cat-count-v2 {
  font-size: 0.75rem;

  background: var(--kts-white);

  padding: 2px 8px;

  border-radius: 100px;

  font-weight: 600;

  color: var(--kts-gray-500);
}

/*  SECONDARY HERO (BLOG/CONTACT)  */

.page-hero {
  background: var(--kts-green-dark) !important;

  padding: 120px 0 80px !important;

  position: relative !important;

  overflow: hidden !important;

  text-align: center !important;
}

/* Page hero variants inherit from .page-hero */

.page-hero-bg {
  position: absolute !important;

  inset: 0 !important;

  background-image: url("../images/hero-bg.png") !important;

  background-size: cover !important;

  background-position: center !important;

  opacity: 0.2 !important;

  z-index: 0 !important;
}

.page-hero-inner {
  position: relative !important;

  z-index: 1 !important;
}

.page-hero-title {
  color: var(--kts-white) !important;

  font-size: clamp(2.5rem, 5vw, 4rem) !important;

  margin-bottom: 20px !important;

  font-weight: 800 !important;
}

.page-hero-desc {
  color: rgba(255, 255, 255, 0.85) !important;

  max-width: 700px !important;

  margin-inline: auto !important;

  font-size: 1.125rem !important;
}

/*  REPLY / COMMENTS SECTION  */

.comments-area {
  margin-top: 80px !important;

  padding-top: 60px !important;

  border-top: 1px solid var(--kts-gray-200) !important;

  background: var(--kts-bg) !important;
}

.comments-title {
  font-family: var(--font-heading) !important;

  font-size: 2rem !important;

  margin-bottom: 40px !important;

  text-align: center !important;
}

.comment-list {
  max-width: 800px !important;

  margin-inline: auto !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;
}

.comment-body {
  background: var(--kts-white) !important;

  padding: 32px !important;

  border-radius: var(--radius-lg) !important;

  box-shadow: var(--shadow-sm) !important;

  border: 1px solid var(--kts-gray-200) !important;
}

.comment-meta {
  display: flex !important;

  align-items: center !important;

  gap: 16px !important;

  margin-bottom: 20px !important;
}

.comment-author img {
  border-radius: 0 !important;
}

.comment-metadata a {
  color: var(--kts-gray-400) !important;

  font-size: 0.85rem !important;
}

.comment-content {
  color: var(--kts-gray-600) !important;

  line-height: 1.7 !important;
}

.reply {
  margin-top: 16px !important;
}

.comment-reply-link {
  font-weight: 700 !important;

  color: var(--kts-green-mid) !important;

  font-size: 0.9rem !important;
}

/* Comment Form */

.comment-respond {
  max-width: 800px !important;

  margin: 60px auto 0 !important;

  background: var(--kts-white) !important;

  padding: 48px !important;

  border-radius: var(--radius-xl) !important;

  box-shadow: var(--shadow-xl) !important;

  border: 1px solid var(--kts-green-pale) !important;
}

.comment-reply-title {
  font-family: var(--font-heading) !important;

  font-size: 1.75rem !important;

  margin-bottom: 32px !important;

  display: block !important;
}

.comment-form p {
  margin-bottom: 24px !important;
}

.comment-form label {
  display: block !important;

  font-weight: 600 !important;

  color: var(--kts-dark) !important;

  margin-bottom: 8px !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100% !important;

  padding: 14px 20px !important;

  border: 1.5px solid var(--kts-gray-200) !important;

  border-radius: var(--radius-md) !important;

  background: var(--kts-bg) !important;

  transition: var(--ease-fast) !important;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--kts-green) !important;

  background: var(--kts-white) !important;

  outline: none !important;

  box-shadow: 0 0 0 4px rgba(118, 89, 47, 0.1) !important;
}

.form-submit {
  margin-top: 32px !important;
}

.submit {
  background: var(--kts-green) !important;

  color: var(--kts-white) !important;

  padding: 16px 40px !important;

  border-radius: 0 !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.05em !important;

  border: none !important;

  width: 100% !important;

  cursor: pointer !important;

  transition: var(--ease) !important;
}

.submit:hover {
  background: var(--kts-green-dark) !important;

  transform: translateY(-2px) !important;

  box-shadow: var(--shadow-lg) !important;
}

/*  CONTACT SECTION REDESIGN  */

/*  CONTACT SECTION V3 (High-Fidelity Redesign)  */

.contact-section-v3 {
  padding: 120px 0;

  background: #ffffff;

  position: relative;

  overflow: hidden;
}

.contact-section-v3 .relative-z {
  display: flow-root;
}

.contact-bg-glow {
  position: absolute;

  top: 50%;

  left: 50%;

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

  width: 800px;

  height: 800px;

  background: radial-gradient(
    circle,
    rgba(234, 109, 0, 0.03) 0%,

    transparent 70%
  );

  z-index: 0;

  pointer-events: none;
}

.contact-section-v3 .section-header {
  margin-bottom: 0;
}

.contact-section-v3 .section-desc {
  margin-bottom: 0;
}

.contact-grid-v3 {
  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 80px;

  align-items: flex-start;

  margin-top: 56px;

  clear: both;
}

/* LEFT COLUMN: Info Stack */

.contact-info-stack {
  display: flex;

  flex-direction: column;

  gap: 32px;
}

.info-glass-card {
  display: flex;

  gap: 24px;

  padding: 32px;

  background: #fdfdfd;

  border: 1px solid #f1f1f1;

  border-radius: 20px;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.info-glass-card:hover {
  transform: translateX(10px);

  border-color: var(--kts-primary);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.card-icon-wrap {
  width: 56px;

  height: 56px;

  background: #fff4e8;

  color: var(--kts-primary);

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;
}

.info-glass-card .card-title {
  font-size: 1.25rem;

  font-weight: 600;

  color: var(--kts-dark);

  margin-bottom: 8px;
}

.info-glass-card .card-link {
  display: block;

  font-size: 1.125rem;

  font-weight: 600;

  color: var(--kts-primary);

  margin-bottom: 4px;
}

.info-glass-card .card-meta {
  font-size: 0.875rem;

  color: var(--kts-gray-400);
}

/* Emergency Banner */

.emergency-modern-banner {
  margin-top: 20px;

  background: #1c1c1c;

  border-radius: 24px;

  padding: 40px;

  color: #ffffff;

  position: relative;

  overflow: hidden;
}

.emergency-modern-banner::before {
  content: "";

  position: absolute;

  top: 0;

  right: 0;

  width: 200px;

  height: 200px;

  background: radial-gradient(
    circle,
    rgba(234, 109, 0, 0.1) 0%,

    transparent 70%
  );

  pointer-events: none;
}

.banner-inner {
  display: flex;

  gap: 24px;

  position: relative;

  z-index: 1;
}

.pulse-indicator {
  width: 12px;

  height: 12px;

  background: #ff4d4d;

  border-radius: 50%;

  margin-top: 6px;

  flex-shrink: 0;

  position: relative;
}

.pulse-indicator::after {
  content: "";

  position: absolute;

  inset: -4px;

  background: inherit;

  border-radius: inherit;

  opacity: 0.4;

  animation: kts-pulse 2s infinite;
}

@keyframes kts-pulse {
  0% {
    transform: scale(1);

    opacity: 0.4;
  }

  100% {
    transform: scale(2.5);

    opacity: 0;
  }
}

.banner-tag {
  display: block;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  color: var(--kts-primary);

  margin-bottom: 12px;
}

.banner-title {
  font-size: 1.5rem;

  font-weight: 600;

  color: #ffffff;

  margin-bottom: 24px;
}

.banner-btn {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  background: var(--kts-primary);

  color: #ffffff;

  padding: 14px 28px;

  border-radius: 12px;

  font-weight: 600;

  transition: all 0.3s ease;
}

.banner-btn:hover {
  background: #ff7f11;

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(234, 109, 0, 0.3);
}

/* RIGHT COLUMN: Form V3 */

.form-wrapper-v3 {
  background: #ffffff;

  padding: 50px;

  border-radius: 32px;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);

  border: 1px solid #f5f5f5;
}

.contact-form-v3 .form-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

  margin-bottom: 32px;
}

.contact-form-v3 .form-group {
  position: relative;
}

.contact-form-v3 .full-width {
  grid-column: span 2;
}

.form-input-v3 {
  width: 100%;

  padding: 16px 0;

  background: transparent;

  border: none;

  border-bottom: 1px solid #e0e0e0;

  font-size: 1.0625rem;

  color: var(--kts-dark);

  transition: border-color 0.3s ease;

  outline: none;
}

.form-label-v3 {
  position: absolute;

  top: 16px;

  left: 0;

  font-size: 1.0625rem;

  color: var(--kts-gray-400);

  pointer-events: none;

  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.input-focus-line {
  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--kts-primary);

  transition: width 0.4s ease;
}

.form-input-v3:focus ~ .form-label-v3,
.form-input-v3:not(:placeholder-shown) ~ .form-label-v3 {
  top: -12px;

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--kts-primary);

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

.form-input-v3:focus ~ .input-focus-line {
  width: 100%;
}

.form-select-v3 {
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ea6d00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 0 center;

  background-size: 18px;
}

.form-textarea-v3 {
  min-height: 120px;

  resize: none;
}

.form-footer-v3 {
  margin-top: 40px;

  display: flex;

  align-items: center;

  gap: 30px;
}

.btn-submit-v3 {
  display: inline-flex;

  align-items: center;

  background: var(--kts-dark);

  color: #ffffff;

  border: none;

  border-radius: 16px;

  overflow: hidden;

  padding: 0;

  cursor: pointer;

  transition: transform 0.3s ease;
}

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

.btn-submit-v3 .btn-text {
  padding: 20px 32px;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 0.02em;
}

.btn-submit-v3 .btn-icon {
  background: var(--kts-primary);

  padding: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.3s ease;
}

.btn-submit-v3:hover .btn-icon {
  background: #ff7f11;
}

.form-response {
  font-size: 0.9375rem;

  font-weight: 500;

  margin-top: 10px;

  transition: all 0.3s ease;
}

.form-response.is-success {
  color: #2d6a4f;
}

.form-response.is-error {
  color: #d90429;
}

/* Responsive V3 */

@media (max-width: 1024px) {
  .contact-grid-v3 {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .contact-col-info {
    order: 2;
  }

  .contact-col-form {
    order: 1;
  }
}

@media (max-width: 768px) {
  .contact-section-v3 {
    padding: 60px 0;
  }

  .contact-section-v3 .relative-z {
    padding-inline: 20px;
  }

  .contact-grid-v3 {
    gap: 40px;

    margin-top: 40px;
  }

  .info-glass-card {
    padding: 24px;
  }

  .emergency-modern-banner {
    padding: 28px 24px;
  }

  .contact-form-v3 .form-grid {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .form-wrapper-v3 {
    padding: 30px;

    border-radius: 24px;
  }

  .form-footer-v3 {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .btn-submit-v3 {
    width: 100%;

    justify-content: space-between;
  }

  .btn-submit-v3 .btn-text {
    flex: 1;

    text-align: center;
  }
}

/*  FOOTER  */

.kts-footer {
  position: relative;

  background: #0d0d0d;

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

  padding-top: 100px;

  overflow: hidden;
}

/* Dotted pattern overlay at top of footer */

.kts-footer::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);

  background-size: 24px 24px;

  -webkit-mask-image: linear-gradient(to bottom, transparent, black 400px);

  mask-image: linear-gradient(to bottom, transparent, black 400px);

  z-index: 0;

  pointer-events: none;
}

.footer-bg-overlay {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&q=80&w=2560");

  background-size: cover;

  background-position: center;

  opacity: 0.08;

  mix-blend-mode: luminosity;

  z-index: 0;
}

.kts-footer .footer-main {
  position: relative;

  z-index: 1;

  padding: 0 0 80px;
}

.footer-grid {
  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;

  gap: 60px;
}

.footer-logo-text {
  font-family: var(--font-heading);

  font-size: 1.5rem;

  font-weight: 600;

  color: #ffffff;

  display: block;

  margin-bottom: 24px;

  text-decoration: none;
}

.footer-tagline {
  font-size: 0.95rem;

  line-height: 1.8;

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

  margin-bottom: 30px;

  max-width: 320px;
}

.footer-certifications {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.cert-badge {
  font-size: 0.75rem;

  font-weight: 600;

  color: #ea6d00;

  background: rgba(221, 147, 0, 0.08);

  border: 1px solid rgba(221, 147, 0, 0.2);

  padding: 6px 14px;

  border-radius: 50px;
}

.footer-heading {
  font-size: 1.125rem;

  font-weight: 600;

  color: #ffffff;

  margin-bottom: 30px;

  position: relative;
}

.footer-heading::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -10px;

  width: 30px;

  height: 2px;

  background: #ea6d00;
}

.footer-links {
  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 14px;
}

.footer-links li a {
  color: rgba(255, 255, 255, 0.55);

  text-decoration: none;

  font-size: 0.95rem;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-block;
}

/* -- Minimap -- */

.footer-minimap {
  margin-top: 30px;
  height: 180px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  filter: grayscale(100%) invert(90%) contrast(90%);
  opacity: 0.8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-minimap:hover {
  filter: grayscale(0%) invert(0%) contrast(100%);
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.footer-minimap iframe {
  display: block;
}

.footer-links li a:hover {
  color: #ffffff;

  transform: translateX(6px);
}

.footer-contact-list {
  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 18px;

  margin-bottom: 30px;
}

.footer-contact-list li {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  font-size: 0.95rem;
}

.footer-contact-list svg {
  color: #ea6d00;

  flex-shrink: 0;

  margin-top: 3px;
}

.footer-contact-list a {
  color: inherit;

  text-decoration: none;

  transition: color 0.3s ease;
}

.footer-contact-list a:hover {
  color: #ffffff;
}

.footer-cta {
  display: inline-flex;

  align-items: center;

  padding: 12px 28px;

  background: #ea6d00;

  color: #ffffff;

  border-radius: 50px;

  font-weight: 600;

  font-size: 0.9rem;

  text-decoration: none;

  transition: all 0.3s ease;
}

.footer-cta:hover {
  background: #ffffff;

  color: #1c1c1c;

  transform: translateY(-2px);

  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

.footer-bottom {
  position: relative;

  z-index: 1;

  padding: 30px 0;

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

.footer-copyright {
  font-size: 0.875rem;

  color: rgba(255, 255, 255, 0.35);
}

.footer-copyright a {
  color: inherit;

  text-decoration: none;
}

.footer-copyright a:hover {
  color: #ffffff;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;

    gap: 40px;
  }
}

@media (max-width: 640px) {
  .kts-footer {
    padding-top: 60px;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .footer-logo-text {
    font-size: 1.25rem;
  }
}

/*  BLOG PAGE  */

.kts-blog-main .site-content,
.kts-single-main .site-content {
  padding-top: 0;
}

.page-hero {
  position: relative;

  padding: 100px 0 80px;

  text-align: center;

  overflow: hidden;

  background: var(--kts-green-dark);
}

@media (max-width: 768px) {
  .page-hero {
    padding: 80px 0 60px;
  }

  .page-hero .container {
    padding-inline: 20px;
  }

  .page-hero-desc {
    max-width: 100%;
  }
}
.page-hero-bg {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    135deg,
    var(--kts-green-dark) 0%,

    var(--kts-green) 100%
  );
}

.page-hero-inner {
  position: relative;

  z-index: 1;
}

.page-hero-title {
  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 600;

  color: var(--kts-white);

  margin-bottom: 16px;
}

.page-hero-desc {
  font-size: 1.0625rem;

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

  max-width: 560px;

  margin: 0 auto;
}

.page-hero .section-label {
  color: var(--kts-green-light);
}

/* Blog Layout */

.blog-content-section {
  padding: 80px 0;
}

.blog-layout {
  display: grid;

  grid-template-columns: 1fr 340px;

  gap: 60px;

  align-items: start;
}

.posts-grid--blog {
  grid-template-columns: repeat(2, 1fr);
}

.posts-grid--featured {
  grid-template-columns: repeat(2, 1fr);

  margin-bottom: 40px;
}

/* Horizontal Scroll Section */

.blog-horizontal-section {
  margin-top: 40px;

  padding-top: 32px;

  border-top: 2px solid var(--kts-gray-200);
}

.blog-horizontal-title {
  font-family: var(--font-heading);

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--kts-dark);

  margin-bottom: 20px;
}

.blog-horizontal-scroll {
  display: flex;

  gap: 20px;

  overflow-x: auto;

  padding-bottom: 20px;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;
}

.blog-horizontal-scroll::-webkit-scrollbar {
  height: 6px;
}

.blog-horizontal-scroll::-webkit-scrollbar-track {
  background: var(--kts-gray-100);

  border-radius: 3px;
}

.blog-horizontal-scroll::-webkit-scrollbar-thumb {
  background: var(--kts-green);

  border-radius: 3px;
}

.blog-horizontal-item {
  flex: 0 0 280px;

  scroll-snap-align: start;

  background: var(--kts-white);

  border: 1.5px solid var(--kts-gray-200);

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

  overflow: hidden;

  transition: var(--ease);
}

.blog-horizontal-item:hover {
  border-color: var(--kts-green);

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

.blog-horizontal-thumb {
  display: block;

  width: 100%;

  height: 160px;

  overflow: hidden;
}

.blog-horizontal-thumb img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;
}

.blog-horizontal-item:hover .blog-horizontal-thumb img {
  transform: scale(1.05);
}

.blog-horizontal-content {
  padding: 16px;
}

.blog-horizontal-title-item {
  font-size: 1rem;

  font-weight: 600;

  margin: 0 0 8px 0;

  line-height: 1.4;
}

.blog-horizontal-title-item a {
  color: var(--kts-dark);

  text-decoration: none;

  transition: color 0.2s ease;
}

.blog-horizontal-title-item a:hover {
  color: var(--kts-green);
}

.blog-horizontal-date {
  font-size: 0.8125rem;

  color: var(--kts-gray-500);
}

/* Sidebar */

.blog-sidebar {
  position: sticky;

  top: 100px;

  display: flex;

  flex-direction: column;

  gap: 28px;
}

.sidebar-widget {
  background: var(--kts-white);

  border: 1.5px solid var(--kts-gray-200);

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

  padding: 28px;
}

.widget-title {
  font-family: var(--font-heading);

  font-size: 1.0625rem;

  font-weight: 600;

  color: var(--kts-dark);

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 2px solid var(--kts-green-pale);
}

.search-input-wrap {
  position: relative;
}

.search-field {
  width: 100%;

  padding: 10px 44px 10px 14px;

  border: 1.5px solid var(--kts-gray-200);

  border-radius: 0;

  font-size: 0.9rem;
}

.search-field:focus {
  outline: none;

  border-color: var(--kts-green);
}

.search-submit {
  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--kts-green);

  padding: 0;

  background: none;

  border: none;

  cursor: pointer;
}

.search-submit svg {
  width: 18px;

  height: 18px;

  stroke: var(--kts-green);

  fill: none;

  stroke-width: 2.5;
}

.search-submit:hover svg {
  stroke: var(--kts-dark);
}

.recent-posts-list {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

.recent-post-item {
  display: flex;

  gap: 12px;

  align-items: flex-start;
}

.recent-post-thumb {
  flex-shrink: 0;
}

.recent-post-thumb img {
  width: 64px;

  height: 64px;

  object-fit: cover;

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

.recent-post-title {
  display: block;

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--kts-dark);

  line-height: 1.4;

  margin-bottom: 4px;
}

.recent-post-title:hover {
  color: var(--kts-green);
}

.recent-post-date {
  font-size: 0.75rem;

  color: var(--kts-gray-400);
}

.categories-list {
  list-style: none;
}

.categories-list li a {
  display: flex;

  justify-content: space-between;

  padding: 8px 0;

  font-size: 0.9rem;

  color: var(--kts-gray-600);

  border-bottom: 1px solid var(--kts-gray-100);
}

.categories-list li a:hover {
  color: var(--kts-green);
}

.sidebar-cta {
  background: var(--kts-green-dark);

  border-color: transparent;
}

.sidebar-cta-inner {
  text-align: center;
}

.sidebar-cta-icon {
  font-size: 2.5rem;

  display: block;

  margin-bottom: 12px;
}

.sidebar-cta h3 {
  font-family: var(--font-heading);

  font-size: 1.125rem;

  color: var(--kts-white);

  margin-bottom: 8px;
}

.sidebar-cta p {
  font-size: 0.875rem;

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

  margin-bottom: 16px;
}

.sidebar-cta-features {
  list-style: none;

  padding: 0;

  margin: 0 0 20px 0;

  text-align: left;
}

.sidebar-cta-features li {
  font-size: 0.875rem;

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

  padding: 6px 0;

  display: flex;

  align-items: center;

  gap: 8px;
}

.sidebar-cta-features li::before {
  content: "";

  display: none;
}

.sidebar-cta .btn-primary {
  width: 100%;

  justify-content: center;

  margin-bottom: 10px;
}

.sidebar-cta .btn-outline {
  width: 100%;

  justify-content: center;

  color: var(--kts-white);

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

.sidebar-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);

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

/* No Posts */

.no-posts-message {
  text-align: center;

  padding: 80px 40px;

  background: var(--kts-white);

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

  border: 1.5px solid var(--kts-gray-200);
}

.no-posts-icon {
  font-size: 3rem;

  margin-bottom: 16px;
}

.no-posts-message h2 {
  font-family: var(--font-heading);

  font-size: 1.5rem;

  margin-bottom: 12px;
}

.no-posts-message p {
  color: var(--kts-gray-600);

  margin-bottom: 24px;
}

/* Pagination */

.kts-pagination {
  margin-top: 48px;
}

.kts-pagination ul {
  display: flex;

  gap: 8px;

  list-style: none;

  justify-content: center;

  flex-wrap: wrap;
}

.kts-pagination .page-numbers {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

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

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--kts-gray-600);

  border: 1.5px solid var(--kts-gray-200);

  background: var(--kts-white);

  transition: var(--ease-fast);
}

.kts-pagination .page-numbers:hover,
.kts-pagination .page-numbers.current {
  background: var(--kts-green);

  border-color: var(--kts-green);

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

.kts-pagination .prev,
.kts-pagination .next {
  width: auto;

  padding: 0 16px;
}

/*  SINGLE POST PAGE  */

.post-hero {
  position: relative;

  min-height: 480px;

  display: flex;

  align-items: flex-end;
}

.post-hero-image {
  position: absolute;

  inset: 0;

  background: var(--kts-green-dark);
}

.post-hero-img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.post-hero-image--no-thumb {
  background: linear-gradient(135deg, var(--kts-green-dark), var(--kts-green));
}

.post-hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,

    rgba(71, 55, 32, 0.95) 0%,

    rgba(71, 55, 32, 0.5) 60%,

    transparent 100%
  );
}

.post-hero-content {
  position: relative;

  z-index: 1;

  width: 100%;

  padding: 48px 0 56px;
}

.post-breadcrumb {
  font-size: 0.8125rem;

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

  margin-bottom: 16px;
}

.post-breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
}

.post-breadcrumb a:hover {
  color: var(--kts-white);
}

.post-breadcrumb span[aria-current] {
  color: rgba(255, 255, 255, 0.5);
}

.post-cats {
  margin-bottom: 12px;
}

.post-cats a {
  display: inline-block;

  background: var(--kts-green);

  color: var(--kts-white);

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 3px 12px;

  border-radius: 0;

  margin-right: 6px;
}

.post-title {
  font-family: var(--font-heading);

  font-size: clamp(1.75rem, 4vw, 2.875rem);

  font-weight: 600;

  color: var(--kts-white);

  line-height: 1.2;

  max-width: 840px;

  margin-bottom: 20px;
}

.post-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 16px;
}

.post-meta-item {
  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 0.875rem;

  color: rgba(255, 255, 255, 0.65);
}

.post-meta-item svg {
  color: var(--kts-green-light);
}

.post-meta-item a {
  color: rgba(255, 255, 255, 0.65);
}

.post-meta-item a:hover {
  color: var(--kts-white);
}

/* Post Body */

.post-body-wrapper {
  padding: 72px 0;
}

.post-body-layout {
  display: grid;

  grid-template-columns: 1fr 340px;

  gap: 64px;

  align-items: start;
}

.post-content-col {
  min-width: 0;
}

/* Post Content Typography */

.post-content,
.entry-content {
  font-size: 1.0625rem;

  line-height: 1.8;

  color: var(--kts-gray-800);

  word-wrap: break-word;

  overflow-wrap: break-word;

  word-break: break-word;
}

.post-content h2,
.entry-content h2 {
  font-family: var(--font-heading);

  font-size: 1.625rem;

  font-weight: 600;

  color: var(--kts-dark);

  margin: 40px 0 16px;

  padding-top: 12px;

  border-top: 2px solid var(--kts-green-pale);
}

.post-content h3,
.entry-content h3 {
  font-family: var(--font-heading);

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--kts-dark);

  margin: 32px 0 12px;
}

.post-content p,
.entry-content p {
  margin-bottom: 20px;
}

.post-content ul,
.entry-content ul,
.post-content ol,
.entry-content ol {
  margin-bottom: 20px;

  padding-left: 20px;
}

.post-content li,
.entry-content li {
  margin-bottom: 8px;
}

.post-content ul li {
  list-style: disc;
}

.post-content ol li {
  list-style: decimal;
}

.post-content blockquote,
.entry-content blockquote {
  border-left: 4px solid var(--kts-green);

  padding: 16px 20px;

  margin: 24px 0;

  background: var(--kts-green-faint);

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

  font-style: italic;

  color: var(--kts-gray-600);
}

.post-content img,
.entry-content img {
  border-radius: var(--radius-md);

  margin: 24px 0;
}

.post-content a,
.entry-content a {
  color: var(--kts-green);

  text-decoration: underline;

  text-decoration-color: var(--kts-green-pale);
}

.post-content a:hover,
.entry-content a:hover {
  color: var(--kts-green-dark);
}

/* Post Tags */

.post-tags {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-top: 40px;

  padding-top: 24px;

  border-top: 1px solid var(--kts-gray-200);
}

.post-tags-label {
  font-size: 0.875rem;

  font-weight: 600;

  color: var(--kts-gray-600);
}

.post-tags a {
  font-size: 0.8125rem;

  padding: 4px 12px;

  border: 1.5px solid var(--kts-gray-200);

  border-radius: 0;

  color: var(--kts-gray-600);

  text-decoration: none;

  transition: var(--ease-fast);
}

.post-tags a:hover {
  background: var(--kts-green);

  border-color: var(--kts-green);

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

/* Share */

.post-share {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 28px;

  flex-wrap: wrap;
}

.post-share-label {
  font-size: 0.875rem;

  font-weight: 600;

  color: var(--kts-gray-600);
}

.post-share-buttons {
  display: flex;

  gap: 8px;
}

.share-btn {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 16px;

  border-radius: 0;

  font-size: 0.8125rem;

  font-weight: 600;

  transition: var(--ease-fast);

  text-decoration: none;
}

.share-btn--facebook {
  background: #1877f2;

  color: white;
}

.share-btn--facebook:hover {
  background: #0d65d8;

  color: white;
}

.share-btn--twitter {
  background: #000;

  color: white;
}

.share-btn--twitter:hover {
  background: #333;

  color: white;
}

.share-btn--linkedin {
  background: #0a66c2;

  color: white;
}

.share-btn--linkedin:hover {
  background: #084d9b;

  color: white;
}

/* Post Navigation */

.post-navigation {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-top: 40px;

  padding-top: 24px;

  border-top: 1px solid var(--kts-gray-200);
}

.post-nav-link {
  display: flex;

  flex-direction: column;

  padding: 16px 20px;

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

  border: 1.5px solid var(--kts-gray-200);

  transition: var(--ease-fast);
}

.post-nav-link:hover {
  border-color: var(--kts-green);

  background: var(--kts-green-faint);
}

.post-nav-link--next {
  text-align: right;
}

.post-nav-direction {
  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--kts-green);

  margin-bottom: 4px;
}

.post-nav-title {
  font-size: 0.9rem;

  font-weight: 600;

  color: var(--kts-dark);

  line-height: 1.3;
}

/* Author Bio */

.author-bio {
  display: flex;

  gap: 20px;

  align-items: flex-start;

  background: var(--kts-gray-100);

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

  padding: 28px;

  margin-top: 40px;
}

.author-bio-avatar img {
  border-radius: 0;
}

.author-bio-label {
  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.08em;

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

.author-bio-name {
  font-family: var(--font-heading);

  font-size: 1.125rem;

  font-weight: 600;

  color: var(--kts-dark);

  margin: 4px 0 8px;
}

.author-bio-desc {
  font-size: 0.9rem;

  color: var(--kts-gray-600);
}

/* Post Sidebar Sticky CTA */

.post-sidebar {
  position: sticky;

  top: 100px;

  display: flex;

  flex-direction: column;

  gap: 24px;
}

.post-sidebar-cta-inner {
  background: var(--kts-green-dark);

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

  padding: 32px;

  text-align: center;
}

.post-sidebar-cta-icon {
  font-size: 2.5rem;

  display: block;

  margin-bottom: 12px;
}

.post-sidebar-cta-inner h3 {
  font-family: var(--font-heading);

  font-size: 1.1rem;

  color: var(--kts-white);

  margin-bottom: 10px;
}

.post-sidebar-cta-inner p {
  font-size: 0.875rem;

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

  margin-bottom: 16px;
}

.post-sidebar-cta-inner .btn-primary {
  width: 100%;

  justify-content: center;

  margin-bottom: 10px;
}

.post-sidebar-cta-inner .btn-outline {
  width: 100%;

  justify-content: center;

  color: var(--kts-white);

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

.post-sidebar-cta-inner .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);

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

.post-sidebar-related {
  background: var(--kts-white);

  border: 1.5px solid var(--kts-gray-200);

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

  padding: 28px;
}

.related-posts-list {
  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 14px;
}

.related-post-item {
  display: flex;

  gap: 12px;

  align-items: flex-start;
}

.related-post-thumb img {
  width: 64px;

  height: 64px;

  object-fit: cover;

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

.related-post-title {
  display: block;

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--kts-dark);

  line-height: 1.4;

  margin-bottom: 4px;
}

.related-post-title:hover {
  color: var(--kts-green);
}

.related-post-date {
  font-size: 0.75rem;

  color: var(--kts-gray-400);
}

/* More Posts Section */

.more-posts-section {
  padding: 80px 0;

  background: var(--kts-bg);

  border-top: 1px solid var(--kts-gray-200);
}

.more-posts-cta {
  text-align: center;

  margin-top: 48px;
}

/*  PAGE TEMPLATE  */

.page-hero--has-thumb .page-hero-bg-img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.page-content-section {
  padding: 72px 0;
}

.page-content-inner {
  max-width: 820px;

  margin: 0 auto;
}

/*  404 PAGE  */

.kts-404-main {
  background: var(--kts-bg);
}

.error-404-section {
  padding: 120px 0;
}

.error-404-inner {
  text-align: center;

  max-width: 560px;

  margin: 0 auto;
}

.error-404-visual {
  font-size: 4rem;

  margin-bottom: 12px;
}

.error-404-title {
  font-family: var(--font-heading);

  font-size: clamp(4rem, 10vw, 7rem);

  font-weight: 600;

  color: var(--kts-green-pale);

  line-height: 1;

  margin-bottom: 4px;
}

.error-404-subtitle {
  font-family: var(--font-heading);

  font-size: 1.75rem;

  color: var(--kts-dark);

  margin-bottom: 16px;
}

.error-404-desc {
  color: var(--kts-gray-600);

  margin-bottom: 32px;
}

.error-404-actions {
  display: flex;

  gap: 12px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 40px;
}

.error-404-search p {
  font-size: 0.9rem;

  color: var(--kts-gray-400);

  margin-bottom: 12px;
}

.error-404-search .search-form {
  display: flex;

  gap: 10px;
}

.error-404-search input[type="search"] {
  flex: 1;

  padding: 10px 16px;

  border: 1.5px solid var(--kts-gray-200);

  border-radius: 0;

  font-size: 0.9rem;
}

.error-404-search button {
  padding: 10px 20px;

  background: var(--kts-green);

  color: white;

  border-radius: 0;

  font-weight: 600;

  border: none;

  cursor: pointer;
}

/*  RESPONSIVE  */

/*  TRUST BAR SECTION  */

/*  TRUST BAR SECTION V2  */

.trust-bar-v2 {
  padding: 100px 0 200px;

  position: relative;

  z-index: 10;

  text-align: center;

  background: transparent;

  overflow: hidden;
}

.trust-container-v2 {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 48px;
}

.trust-top-row {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #ffffff;

  font-size: 0.95rem;

  opacity: 0.85;
}

.trust-bracket {
  font-size: 2rem;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.4);
}

.trust-top-text {
  font-size: 1.5rem;
}

/* Marquee Row */

.trust-main-row {
  width: 100%;

  max-width: 100%;

  overflow: hidden;

  position: relative;

  mask-image: linear-gradient(
    to right,

    transparent,
    black 15%,

    black 85%,

    transparent
  );

  -webkit-mask-image: linear-gradient(
    to right,

    transparent,
    black 15%,

    black 85%,

    transparent
  );
}

.trust-marquee-track-v2 {
  display: flex;

  align-items: center;

  gap: 40px;

  width: max-content;

  animation: trustMarqueeV2 40s linear infinite;

  padding: 10px 0;
}

.trust-marquee-item {
  color: #ffffff;

  font-size: clamp(1.1rem, 2vw, 1.45rem);

  font-weight: 400;

  white-space: nowrap;

  letter-spacing: 0.015em;
}

.trust-marquee-dot {
  color: rgba(255, 255, 255, 0.4);

  font-size: 1.25rem;
}

@keyframes trustMarqueeV2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.trust-bottom-row {
  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  gap: 16px;

  margin-top: 10px;
}

.trust-stars {
  display: flex;

  gap: 8px;

  color: var(--kts-primary);
}

.star-outline-icon {
  width: 22px;

  height: 22px;
}

.trust-rating-text {
  color: #ffffff;

  font-size: 0.875rem;

  opacity: 0.75;

  font-weight: 400;
}

/* Responsive */

@media (max-width: 1024px) {
  .trust-bar-v2 {
    padding: 120px 0 100px;
  }

  .trust-container-v2 {
    padding: 0 24px;

    gap: 40px;
  }

  .trust-top-text {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .trust-bar-v2 {
    padding: 80px 0;
  }

  .trust-container-v2 {
    gap: 32px;
  }

  .trust-top-text {
    font-size: 1.1rem;

    line-height: 1.4;

    max-width: 280px;
  }

  .trust-bracket {
    font-size: 1.5rem;
  }

  .trust-bottom-row {
    flex-direction: column;

    gap: 12px;
  }

  .trust-marquee-track-v2 {
    animation-duration: 30s; /* Slightly faster on small screens */
  }
}

@media (max-width: 480px) {
  .trust-bar-v2 {
    padding: 60px 0;
  }

  .trust-container-v2 {
    padding: 0 20px;
  }

  .trust-top-row {
    gap: 8px;
  }

  .trust-top-text {
    font-size: 1rem;
  }

  .trust-rating-text {
    font-size: 0.8125rem;

    text-align: center;

    max-width: 240px;
  }
}

/*  FAQ SECTION  */

.faq-section {
  margin-bottom: 120px;
}

/*  SERVICES SECTION  */ /*  FAQ SECTION  */

.faq-section {
  margin-bottom: 120px;
}

.faq-header {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  margin-bottom: 80px;
}

.faq-eyebrow {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-bottom: 24px;

  color: #333;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.faq-heading {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);

  line-height: 1.1;

  font-weight: 600;

  color: #111;

  margin: 0;

  letter-spacing: -0.02em;
}

.faq-section .container {
  max-width: 1400px;

  position: relative;

  z-index: 1;
}

/* Responsive FAQ decorative image */

@media (max-width: 1024px) {
  .faq-bg-deco {
    width: 20%;

    opacity: 0.5;
  }
}

@media (max-width: 1024px) {
  .faq-section {
    padding-left: 20px;

    padding-right: 20px;
  }

  .faq-bg-deco {
    width: 20%;

    opacity: 0.5;
  }

  .faq-question {
    font-size: 1.15rem;

    padding: 28px 0;
  }

  .faq-answer-inner {
    font-size: 1.05rem;
  }
}

@media (max-width: 768px) {
  .faq-question {
    padding: 22px 0;

    font-size: 1.05rem;
  }

  .faq-answer-inner {
    padding: 0 0 22px 0;

    font-size: 0.95rem;
  }
}

.faq-answer-inner {
  padding: 0 15px 24px 15px;

  max-width: 100%;

  font-size: 1rem;
}

.faq-grid {
  max-width: 1100px;

  margin-inline: auto;

  display: flex;

  flex-direction: column;

  gap: 0;
}

.faq-item {
  background: transparent;

  border: none;

  border-bottom: 1.5px solid #f2f2f2;

  border-radius: 0;

  overflow: hidden;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item:first-child {
  border-top: 1.5px solid #f2f2f2;
}

.faq-item.is-active {
  background: #fdfdfd;

  border-bottom-color: transparent;
}

.faq-question {
  width: 100%;

  padding: 32px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  text-align: left;

  background: none;

  border: none;

  font-size: 1.25rem;

  font-weight: 600;

  color: #111;

  cursor: pointer;

  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--kts-primary);
}

.faq-icon {
  width: 44px;

  height: 44px;

  background: #ffffff;

  color: #111;

  border: 1.5px solid #e5e5e5;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  flex-shrink: 0;

  margin-left: 20px;
}

.faq-item.is-active .faq-icon {
  transform: rotate(135deg);

  background: var(--kts-primary);

  color: #ffffff;

  border-color: var(--kts-primary);

  box-shadow: 0 10px 20px rgba(208, 89, 41, 0.2);
}

.faq-answer {
  max-height: 0;

  overflow: hidden;

  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-active .faq-answer {
  max-height: 800px;
}

.faq-answer-inner {
  padding: 0 0 32px 0;

  color: #555;

  line-height: 1.7;

  font-size: 1.1rem;

  max-width: 90%;
}

.faq-footer {
  display: flex;

  justify-content: center;

  margin-top: 60px;
}

.faq-btn-primary {
  display: inline-flex;

  align-items: center;

  gap: 15px;

  padding: 18px 36px;

  background: #111;

  color: #ffffff;

  border-radius: 100px;

  font-size: 1rem;

  font-weight: 600;

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-btn-primary:hover {
  background: var(--kts-primary);

  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(208, 89, 41, 0.3);
}

.faq-btn-primary .btn-arrow-circle {
  width: 32px;

  height: 32px;

  border: 1.5px solid currentColor;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-btn-primary:hover .btn-arrow-circle {
  transform: translateX(4px);
}

/*  PREMIUM OVERRIDES & HARDENING  */

.btn {
  border-radius: 0 !important;

  font-weight: 600 !important;
}

.hero-quick-card {
  background: rgba(255, 255, 255, 0.94) !important;

  backdrop-filter: blur(16px) !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.kts-header.is-scrolled .header-main {
  background: rgba(255, 255, 255, 0.9) !important;

  backdrop-filter: blur(8px) !important;
}

.section-title {
  color: var(--kts-dark) !important;
}

.section-label {
  color: var(--kts-green-mid) !important;
}

/* Responsive fixes */

@media (max-width: 900px) {
  .contact-grid,
  .about-grid {
    grid-template-columns: 1fr !important;

    gap: 48px !important;
  }

  .hero-quick-form--horizontal .form-row-horizontal {
    flex-direction: column;
  }

  .hero-quick-form--horizontal .form-group {
    width: 100%;

    min-width: auto;
  }

  .hero-quick-form--horizontal .form-group--submit {
    width: 100%;
  }

  .hero-quick-form--horizontal .form-group--submit .btn {
    width: 100%;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr !important;

    gap: 0 !important;
  }

  .contact-form-card {
    padding: 32px 20px !important;
  }

  .posts-grid--blog {
    grid-template-columns: 1fr !important;

    gap: 30px !important;
  }

  .blog-layout {
    grid-template-columns: 1fr !important;

    gap: 50px !important;

    padding: 60px 0 !important;
  }

  .page-hero--blog {
    padding: 120px 0 60px !important;
  }
}

/* Large tablets */

@media (max-width: 1100px) {
  .hero-container {
    max-width: 100%;

    padding: 0 20px;
  }

  .about-grid {
    gap: 48px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;

    gap: 40px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    position: static;
  }

  .posts-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-layout {
    grid-template-columns: 1fr 300px;

    gap: 40px;
  }
}

/* Tablets */

@media (max-width: 900px) {
  :root {
    --section-py: 72px;
  }

  .header-nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .header-nav.is-open {
    display: flex;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--kts-white);

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

    padding: 16px;

    z-index: 100;
  }

  .header-nav.is-open .nav-menu {
    flex-direction: column;

    width: 100%;

    align-items: stretch;

    gap: 4px;
  }

  .header-nav.is-open .nav-menu > li > a {
    padding: 12px 16px;
  }

  .header-main {
    position: relative;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-image-col {
    order: 2;
  }

  .about-content-col {
    order: 1;
  }

  .about-badge--experience {
    right: 0;

    bottom: -16px;
  }

  .about-badge--certified {
    left: 0;

    top: 16px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid .gallery-item:first-child {
    grid-column: span 2;
  }

  .post-body-layout {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
  }

  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }
}

/* Mobile */

@media (max-width: 640px) {
  :root {
    --section-py: 56px;

    --container-px: 16px;
  }

  .header-top-bar {
    display: none;
  }

  .site-content {
    padding-top: 72px;
  }

  .hero-section {
    padding: 80px 0 60px;

    min-height: 65vh;

    min-height: 65svh;
  }

  .hero-actions-row {
    justify-content: center;
  }

  .hero-ctas {
    flex-direction: column;

    align-items: center;
  }

  .hero-reviews {
    justify-content: center;
  }

  .hero-trust {
    flex-direction: column;

    gap: 10px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
  }

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

    grid-auto-rows: 220px;
  }

  .gallery-grid .gallery-item:first-child {
    grid-column: span 1;

    grid-row: span 1;
  }

  .testimonials-track {
    grid-template-columns: 1fr;
  }

  .testimonials-controls {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 32px;
  }

  .footer-bottom-inner {
    flex-direction: column;

    text-align: center;
  }

  .contact-form-card {
    padding: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .posts-grid--blog,
  .posts-grid--3 {
    grid-template-columns: 1fr;
  }

  .post-title {
    font-size: 1.625rem;
  }

  .post-navigation {
    grid-template-columns: 1fr;
  }

  .author-bio {
    flex-direction: column;
  }

  .section-header--split {
    flex-direction: column;

    align-items: flex-start;
  }
}

/*  HELPER CLASSES  */

.relative-z {
  position: relative !important;

  z-index: 5 !important;
}

/*  SIDEBAR POLISH  */

.sidebar-widget {
  background: var(--kts-white) !important;

  padding: 24px !important;

  border-radius: var(--radius-lg) !important;

  box-shadow: var(--shadow-sm) !important;

  margin-bottom: 24px !important;

  border: 1px solid var(--kts-gray-200) !important;
}

.widget-title {
  font-size: 1.125rem !important;

  margin-bottom: 20px !important;

  padding-bottom: 12px !important;

  border-bottom: 2px solid var(--kts-green-pale) !important;
}

.categories-list li {
  display: flex !important;

  justify-content: space-between !important;

  padding: 8px 0 !important;

  border-bottom: 1px solid var(--kts-gray-100) !important;
}

.categories-list li:last-child {
  border-bottom: none !important;
}

/*  UTILITIES  */

.text-center {
  text-align: center !important;
}

.mt-12 {
  margin-top: 48px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

/*  FAQ FOOTER  */

.faq-footer {
  margin-top: 60px;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  gap: 24px;
}

.faq-footer-text {
  font-size: 1.125rem;

  color: var(--kts-gray-600);

  margin: 0;

  font-weight: 600;
}

@media (max-width: 640px) {
  .faq-footer {
    flex-direction: column;

    gap: 16px;

    text-align: center;
  }
}

/*  Blog Preview  */

@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/*  Footer Section  */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 48px;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .footer-bottom-inner {
    flex-direction: column;

    gap: 20px;

    text-align: center;
  }
}

/*  FLOATING ACTION BUTTONS  */

.kts-floating-actions {
  position: fixed;

  bottom: 32px;

  right: 32px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  transform: translateY(20px);

  transition: all 0.4s ease;
}

.kts-floating-actions.is-visible {
  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);
}

.kts-fab {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 8px 30px rgba(0, 0, 0, 0.1);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  text-decoration: none;

  cursor: pointer;
}

.kts-fab:hover {
  transform: scale(1.1) translateY(-5px);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.fab-phone {
  background: var(--kts-green-dark);

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

.fab-phone:hover svg {
  color: var(--kts-primary) !important;

  stroke: var(--kts-primary) !important;
}

.fab-contact {
  background: var(--kts-white);

  color: var(--kts-green-dark);
}

.kts-fab svg {
  width: 24px;

  height: 24px;

  transition: transform 0.3s ease;
}

.kts-fab:hover svg {
  transform: scale(1.1);
}

/* Responsive adjustment */

@media (max-width: 768px) {
  .kts-floating-actions {
    bottom: 24px;

    right: 24px;

    gap: 12px;
  }

  .kts-fab {
    width: 52px;

    height: 52px;
  }
}

/*  Stats Redesign Section  */

/*  BLOG PREVIEW SECTION  */

.blog-preview-section {
  padding: 120px 0;

  background: transparent;
}

.blog-preview-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-bottom: 80px;
}

.blog-preview-header-left {
  max-width: 800px;
}

.blog-eyebrow {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

  color: #333;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.blog-heading {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);

  line-height: 1.1;

  font-weight: 600;

  color: #ea0808da;

  margin: 0;

  letter-spacing: -0.02em;
}

.blog-preview-header-right {
  text-align: right;
}

.blog-btn-outline {
  display: inline-flex;

  align-items: center;

  gap: 15px;

  padding: 18px 36px;

  background: transparent;

  color: #ffffff;

  border: 1.5px solid #e5e5e5;

  border-radius: 100px;

  font-size: 1rem;

  font-weight: 600;

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-btn-outline:hover {
  background: #111;

  color: #ffffff;

  border-color: #111;

  transform: translateY(-4px);
}

.blog-btn-outline .btn-arrow-circle {
  width: 32px;

  height: 32px;

  border: 1.5px solid currentColor;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-btn-outline:hover .btn-arrow-circle {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .blog-preview-header {
    flex-direction: column;

    align-items: flex-start;

    gap: 30px;

    margin-bottom: 50px;
  }

  .blog-preview-header-right {
    text-align: left;
  }
}

/*  SHARED FOOTER/BLOG BACKGROUND  */

.footer-shared-bg-wrap {
  position: relative;

  z-index: 10;

  overflow: hidden;

  background: #0a0a0a;
}

.footer-shared-bg-wrap > *:not(.hbw-bg) {
  position: relative;

  z-index: 2;
}

.footer-shared-bg-wrap .hbw-bg-overlay {
  background: linear-gradient(
    to bottom,

    rgba(0, 0, 0, 0.7) 0%,

    rgba(0, 0, 0, 0.85) 40%,

    rgba(0, 0, 0, 1) 100%
  );
}

/* White text for blog preview when inside shared dark background */

.footer-shared-bg-wrap .blog-heading {
  color: #ffffff;
}

.footer-shared-bg-wrap .blog-eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

.footer-shared-bg-wrap .eyebrow-bracket {
  color: rgba(255, 255, 255, 0.3);
}

.footer-shared-bg-wrap .blog-btn-outline {
  color: #ffffff;

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

.footer-shared-bg-wrap .blog-btn-outline:hover {
  background: #ffffff;

  color: #111;

  border-color: #ffffff;
}

.footer-shared-bg-wrap .post-card {
  background: rgba(255, 255, 255, 0.05);

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

  backdrop-filter: blur(12px);
}

.footer-shared-bg-wrap .post-card:hover {
  background: rgba(255, 255, 255, 0.08);

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

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.footer-shared-bg-wrap .post-card-title {
  color: #ffffff;
}

.footer-shared-bg-wrap .post-card-title a {
  color: #ffffff;
}

.footer-shared-bg-wrap .post-card-title a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.footer-shared-bg-wrap .post-card-excerpt {
  color: rgba(255, 255, 255, 0.6);
}

.footer-shared-bg-wrap .post-card-link {
  color: #ffffff;
}

.footer-shared-bg-wrap .svc-card-arrow-circle {
  border-color: rgba(255, 255, 255, 0.2);
}

.footer-shared-bg-wrap .post-card-link:hover .svc-card-arrow-circle {
  background: #ffffff;

  color: #111;

  border-color: #ffffff;
}

.footer-shared-bg-wrap .blog-preview-section {
  background: transparent !important;

  padding-bottom: 60px;
}

.footer-shared-bg-wrap .kts-footer {
  background: transparent !important;

  padding-top: 60px;
}

.services-header-v3 {
  margin-bottom: 80px;
}

.services-eyebrow-v3 {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #111;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 0.02em;
}

.eyebrow-bracket {
  color: #999;

  font-weight: 400;

  font-size: 2rem;
}

.eyebrow-text {
  font-size: 1rem;
}

.services-grid-v3 {
  display: grid;

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

  gap: 30px;
}

.service-card-v3 {
  background: #f8f8f8;

  border-radius: 24px;

  padding: 40px;

  min-height: 480px;

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

  transition:
    background 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  border: 1px solid transparent;

  cursor: pointer;
}

.service-card-inner-v3 {
  display: flex;

  flex-direction: column;

  height: 100%;

  position: relative;

  z-index: 2;
}

.service-card-img-v3 {
  width: 100%;

  aspect-ratio: 1.5 / 1;

  border-radius: 16px;

  overflow: hidden;

  margin-bottom: auto; /* Pushes content to bottom */

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card-img-v3 img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card-content-v3 {
  margin-top: 30px;

  display: flex;

  flex-direction: column;
}

.service-card-title-v3 {
  font-size: 1.75rem;

  font-weight: 600;

  color: #111;

  margin: 0;

  line-height: 1.2;
}

.service-card-desc-v3 {
  font-size: 1rem;

  color: #555;

  line-height: 1.6;

  margin-top: 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(15px);

  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);

  max-height: 0;

  overflow: hidden;
}

/* Hover Effects */

.service-card-v3:hover {
  background: #ffffff;

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);

  border-color: rgba(0, 0, 0, 0.05);
}

.service-card-v3:hover .service-card-img-v3 {
  transform: scale(0.96);
}

.service-card-v3:hover .service-card-img-v3 img {
  transform: scale(1.1);
}

.service-card-v3:hover .service-card-desc-v3 {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  max-height: 200px;

  margin-top: 20px;
}

/* Responsive */

@media (max-width: 1200px) {
  .services-grid-v3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-section {
    padding: 80px 0;
  }

  .services-grid-v3 {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .service-card-v3 {
    min-height: 400px;

    padding: 30px;
  }
}

/* Add background colors to sections that were previously on a shared background */

/* ==========================================================================

   ABOUT SECTION V7 (Solar-Inspired Redesign)

   ========================================================================== */

.about-section-v7 {
  position: relative;

  background-color: #ffffff;

  padding: 60px 0 20px;

  overflow: hidden;
}

.about-container-v7 {
  max-width: 1400px;

  margin-inline: auto;

  padding-inline: 24px;
}

/* Header Part */

.about-header-v7 {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 60px;

  margin-bottom: 80px;
}

.header-left-v7 {
  max-width: 700px;
}

.about-eyebrow-v7 {
  display: block;

  font-size: 0.85rem;

  font-weight: 600;

  color: #777;

  margin-bottom: 20px;
}

.about-heading-v7 {
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);

  font-weight: 600;

  line-height: 1.15;

  color: #1a1b3a; /* Dark navy-ish like the image */

  margin-bottom: 25px;
}

.about-heading-v7 .text-orange {
  color: #ea6d00;
}

.about-desc-v7 {
  font-size: 1.05rem;

  line-height: 1.6;

  color: #666;

  font-family: var(--font-heading);
}

.btn-explore-v7 {
  display: inline-block;

  background-color: #ea6d00;

  color: #ffffff;

  padding: 16px 45px;

  font-weight: 600;

  font-size: 1rem;

  transition: all 0.3s ease;

  white-space: nowrap;
}

.btn-explore-v7:hover {
  background-color: #1c1c1c;

  color: #ffffff;

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Image Grid Part */

.about-grid-v7 {
  display: grid;

  grid-template-columns: 0.85fr 1.15fr; /* Proportions from image */

  gap: 10px;

  align-items: flex-start;
}

.small-img-wrap-v7,
.large-img-wrap-v7 {
  border-radius: 20px;

  overflow: hidden;

  position: relative;
}

.about-img-small {
  width: 100%;

  height: 380px;

  object-fit: cover;

  display: block;
}

.about-img-large {
  width: 100%;

  height: 520px;

  object-fit: cover;

  display: block;
}

/* Trust Indicator (Avatars) */

.about-trust-v7 {
  margin-top: -40px;

  margin-left: 0;
}

.trust-avatars-v7 {
  display: flex;

  margin-bottom: 12px;
}

.trust-avatars-v7 img {
  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: 3px solid #ffffff;

  margin-right: -12px;

  object-fit: cover;
}

.trust-text-v7 {
  font-size: 1rem;

  font-weight: 600;

  color: #333;

  line-height: 1.4;

  max-width: 250px;
}

.trust-text-v7 .text-orange {
  color: #ea6d00;
}

/* Floating Stat Card */

.about-multi-stat-v7 {
  position: absolute;

  bottom: 30px;

  right: 30px;

  background: #ffffff00;

  backdrop-filter: blur(10px);

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

  padding: 35px 45px;

  border-radius: 20px;

  border: 2px solid #ffffff52;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);

  z-index: 10;
}

.stat-inner-v7 {
  display: flex;

  align-items: center;

  gap: 40px;
}

.stat-box-v7 {
  display: flex;

  flex-direction: column;
}

.stat-val-v7 {
  font-size: 2.2rem;

  font-weight: 600;

  color: #ffffff;

  line-height: 1;

  margin-bottom: 8px;
}

.stat-lab-v7 {
  font-size: 0.9rem;

  font-weight: 600;

  color: #ffffff;

  margin-bottom: 2px;
}

.stat-sub-v7 {
  font-size: 0.8rem;

  color: #e2e1e1;

  font-weight: 600;
}

.stat-divider-v7 {
  width: 1px;

  height: 70px;

  background-color: #eee;
}

/* Responsive */

@media (max-width: 1024px) {
  .about-header-v7 {
    flex-direction: column;

    align-items: flex-start;

    gap: 30px;
  }

  .about-grid-v7 {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .about-img-small,
  .about-img-large {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .about-header-v7 {
    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 30px;
  }

  .header-left-v7 {
    max-width: 100%;

    text-align: center;
  }

  .header-right-v7 {
    width: 100%;

    display: flex;

    justify-content: center;
  }

  .about-eyebrow-v7,
  .about-heading-v7,
  .about-desc-v7 {
    text-align: center;
  }

  .about-img-small {
    height: 250px;
  }

  .about-trust-v7 {
    margin-top: 30px;

    margin-bottom: 0;

    text-align: center;
  }

  .trust-avatars-v7 {
    justify-content: center;
  }

  .trust-text-v7 {
    max-width: 100%;

    margin: 0 auto;
  }

  .about-multi-stat-v7 {
    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

    margin-top: 0;

    padding: 12px 20px;

    z-index: 10;

    max-width: 280px;

    width: auto;
  }

  .stat-inner-v7 {
    gap: 8px;
  }

  .stat-val-v7 {
    font-size: 1.2rem;

    margin-bottom: 2px;
  }

  .stat-lab-v7 {
    font-size: 0.65rem;

    margin-bottom: 0;
  }

  .stat-sub-v7 {
    font-size: 0.55rem;
  }

  .stat-divider-v7 {
    height: 35px;

    width: 1px;
  }
}

/* ==========================================================================

   TRUST BAR V3 (Slanted Marquees)

   ========================================================================== */

/* ==========================================================================

   TRUST BAR V3 (Slanted Marquees)

   ========================================================================== */

/* ==========================================================================

   TRUST BAR V3 (Slanted Marquees)

   ========================================================================== */

/* ==========================================================================

   TRUST BAR V3 (Slanted Marquees)

   ========================================================================== */

.trust-section-v3 {
  position: relative;

  width: 100%;

  height: 260px;

  background-color: transparent;

  margin-top: -20px;

  margin-bottom: 0px;

  overflow: hidden;

  z-index: 10;
}

.trust-bars-wrapper {
  position: absolute;

  top: 50%;

  left: 50%;

  width: 120%;

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

.trust-bar-black {
  height: 85px;

  display: flex;

  margin-top: 15px;

  align-items: center;

  position: relative;

  transform: rotate(3deg);

  overflow: hidden;
}

.trust-bar-orange {
  height: 85px;

  display: flex;

  align-items: center;

  position: relative;

  transform: rotate(-3deg);

  overflow: hidden;
}

.trust-bar-black {
  background-color: #000000;

  z-index: 1;

  margin-top: 20px;

  width: 110%;

  left: -5%;
}

.trust-bar-orange {
  background-color: #ea6d00;

  z-index: 2;

  width: 115%;

  left: -7.5%;

  margin-top: -80px; /* Stack overlap */
}

.trust-marquee-slow,
.trust-marquee-fast {
  display: flex;

  white-space: nowrap;

  width: 100%;
}

.marquee-content {
  display: flex;

  align-items: center;

  flex-shrink: 0;

  will-change: transform;
}

.trust-marquee-slow .marquee-content {
  animation: scrollSlowReverse 120s linear infinite;
}

.trust-marquee-fast .marquee-content {
  animation: scrollFast 45s linear infinite;
}

@keyframes scrollSlowReverse {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes scrollFast {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.dot-separator {
  margin-inline: 40px;

  font-size: 1.5rem;

  color: inherit;

  opacity: 0.5;
}

.outline-text {
  font-size: 2.2rem;

  font-weight: 600;

  color: transparent;

  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.3);

  letter-spacing: 3px;

  font-family: var(--font-heading);
}

.trust-item {
  font-size: 1.4rem;

  font-weight: 600;

  color: #ffffff;

  text-transform: uppercase;

  font-family: var(--font-heading);
}

/* Responsive */

@media (max-width: 1024px) {
  .trust-section-v3 {
    height: 220px;
  }

  .about-heading-v3 {
    font-size: 1.8rem;
  }

  .trust-bar-black,
  .trust-bar-orange {
    transform: none;
  }
}

@media (max-width: 768px) {
  .trust-section-v3 {
    height: 180px;
  }

  .trust-bar-black {
    height: 60px;

    transform: none;

    margin-top: 20px;
  }

  .trust-bar-orange {
    height: 60px;

    transform: none;

    margin-top: 0;
  }

  .outline-text {
    font-size: 1.4rem;

    margin-bottom: 4px;
  }

  .trust-item {
    font-size: 1rem;
  }
}

/* ==========================================================================

   GALLERY SECTION V2 (Reference Image Redesign)

   ========================================================================== */

/* Shared wrapper for red blur overlap */

.services-gallery-wrap {
  position: relative;

  overflow: visible;
}

.red-blur-decor {
  position: absolute;

  top: 50%;

  left: -80px;

  width: 320px;

  height: auto;

  transform: translateY(-50%);

  z-index: 10;

  pointer-events: none;

  user-select: none;

  opacity: 0.9;
}

/* ==========================================================================

   DECORATIVE SECTION BLUR

   ========================================================================== */

.section-decor-blur {
  position: relative;

  z-index: 5;

  height: 0;

  overflow: visible;
}

.blur-img-decor {
  position: absolute;

  top: -150px;

  left: -50px;

  width: 250px;

  opacity: 0.8;

  pointer-events: none;
}

/* ==========================================================================

   GALLERY SECTION V4 (Dual Marquee Edition)

   ========================================================================== */

.gallery-section-v4 {
  background-color: #ffffff;

  padding: 100px 0 140px;

  position: relative;

  overflow: hidden;
}

.gallery-container-v4 {
  width: 100%;
}

.gallery-header-v4 {
  max-width: 800px;

  margin: 0 auto 80px;

  text-align: center;
}

.gallery-eyebrow-v4 {
  display: block;

  font-size: 0.9rem;

  font-weight: 400;

  color: #777;

  letter-spacing: 0.02em;

  margin-bottom: 24px;

  font-family: "Poppins", sans-serif;
}

.gallery-heading-v4 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);

  font-weight: 600;

  line-height: 1.1;

  color: #1a1a1a;

  margin-bottom: 30px;

  font-family: "Poppins", sans-serif;
}

.gallery-heading-v4 .text-orange {
  color: #ea6d00;
}

.gallery-desc-v4 {
  font-size: 1.15rem;

  line-height: 1.7;

  color: #555;

  font-family: "Poppins", sans-serif;
}

/* Marquee Layout */

.gallery-marquee-v4 {
  overflow: hidden;

  display: flex;

  margin-bottom: 10px;
}

.marquee-track-v4 {
  display: flex;

  width: max-content;

  gap: 10px;
}

.gallery-img-card-v4 {
  width: 450px;

  height: 300px;

  border-radius: 10px;

  overflow: hidden;

  flex-shrink: 0;

  position: relative; /* For overlay */
}

.gallery-img-card-v4 img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end; /* Align to bottom */

  justify-content: flex-start; /* Align to left */

  padding: 30px;

  opacity: 0;

  transition: opacity 0.4s ease;

  backdrop-filter: blur(3px);

  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
}

.overlay-inner {
  transform: translateY(20px);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-img-card-v4:hover .gallery-card-overlay {
  opacity: 1;
}

.gallery-img-card-v4:hover .overlay-inner {
  transform: translateY(0);
}

.gallery-img-card-v4:hover img {
  transform: scale(1.1);
}

.card-title {
  color: #ffffff;

  font-size: 1.5rem;

  text-align: left;

  font-weight: 600;

  margin-bottom: 12px;

  font-family: "Poppins", sans-serif;
}

.card-desc {
  color: rgba(255, 255, 255, 0.85);

  font-size: 1rem;

  text-align: left;

  line-height: 1.5;

  font-family: "Poppins", sans-serif;
}

/* Scroll Animations */

.marquee-ltr .marquee-track-v4 {
  animation: scrollLTR 40s linear infinite;
}

.marquee-rtl .marquee-track-v4 {
  animation: scrollRTL 40s linear infinite;
}

@keyframes scrollLTR {
  0% {
    transform: translateX(calc(-50% - 10px));
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scrollRTL {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 10px));
  }
}

/* Pause on hover for interactivity */

.gallery-marquee-v4:hover .marquee-track-v4 {
  animation-play-state: paused;
}

/* Offset for row 2 to create interlock look */

.marquee-rtl {
  margin-left: -50px;
}

/* Gallery CTAs */

.gallery-ctas-v4 {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  margin-top: 40px;

  flex-wrap: wrap;
}

.gallery-section-v4 {
  margin-top: 80px; /* Reduced from 150px */

  padding: 100px 0 60px; /* Reduced bottom padding from 100px */

  overflow: hidden;
}

@media (max-width: 1200px) {
  .gallery-section-v4 {
    margin-top: 100px;
  }

  .gallery-img-card-v4 {
    width: 350px;

    height: 240px;
  }
}

@media (max-width: 991px) {
  .gallery-section-v4 {
    margin-top: 80px;

    padding: 80px 0;
  }

  .gallery-header-v4 {
    margin-bottom: 50px;

    padding: 0 20px;
  }

  .gallery-card-overlay {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .gallery-section-v4 {
    margin-top: 60px;

    padding: 60px 0;
  }

  .gallery-img-card-v4 {
    width: 280px;

    height: 200px;
  }

  .gallery-card-overlay {
    opacity: 0;

    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.2) 100%
    );

    padding: 20px;
  }

  .overlay-inner {
    transform: translateY(0);
  }

  .card-title {
    font-size: 1.25rem;

    margin-bottom: 6px;
  }

  .card-desc {
    font-size: 0.85rem;
  }

  .gallery-ctas-v4 {
    margin-top: 40px;

    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .gallery-section-v4 {
    margin-top: 40px;

    padding: 40px 0;
  }

  .gallery-header-v4 {
    margin-bottom: 40px;
  }

  .gallery-heading-v4 {
    font-size: 2.2rem;
  }

  .gallery-desc-v4 {
    font-size: 1rem;
  }

  .gallery-img-card-v4 {
    width: 240px;

    height: 180px;
  }
}

/* ==========================================================================

   FAQ SECTION

   ========================================================================== */

.faq-section {
  padding: 120px 0;

  background-color: #eeeeee;

  position: relative;

  overflow: hidden;
}

/* Subtle decorative background pattern */

.faq-section::before {
  content: "";

  position: absolute;

  top: -120px;

  right: -120px;

  width: 480px;

  height: 480px;

  background: radial-gradient(
    circle,
    rgba(221, 147, 0, 0.06) 0%,
    transparent 70%
  );

  pointer-events: none;

  border-radius: 50%;
}

.faq-section::after {
  content: "";

  position: absolute;

  bottom: -80px;

  left: -80px;

  width: 320px;

  height: 320px;

  background: radial-gradient(
    circle,
    rgba(221, 147, 0, 0.05) 0%,
    transparent 70%
  );

  pointer-events: none;

  border-radius: 50%;
}

/* -- Section header -- */

.faq-section .section-header {
  margin-bottom: 80px;
}

.faq-section .section-label {
  color: var(--kts-primary) !important;

  letter-spacing: 0.14em !important;
}

.faq-section .section-title {
  color: var(--kts-dark) !important;
}

.faq-section .section-desc {
  color: var(--kts-gray-600);

  margin-bottom: 20px;
}

/* -- FAQ Grid (single column, max constrained) -- */

.faq-grid {
  max-width: 820px;

  margin: 0 auto;

  margin-top: 30px;

  display: flex;

  flex-direction: column;

  gap: 0;
}

/* -- Individual FAQ item -- */

.faq-item {
  background: #ffffff;

  border: 1px solid var(--kts-gray-200);

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

  margin-bottom: 12px;

  overflow: hidden;

  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;

  position: relative;
}

.faq-item:last-child {
  margin-bottom: 0;
}

/* Left accent bar */

.faq-item::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 4px;

  height: 100%;

  background: var(--kts-primary);
  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  border-radius: 0 2px 2px 0;
}

.faq-item:hover {
  box-shadow: var(--shadow-md);

  border-color: rgba(221, 147, 0, 0.25);

  transform: translateY(-2px);
}

.faq-item.is-active {
  box-shadow: var(--shadow-lg);

  border-color: rgba(221, 147, 0, 0.35);
}

.faq-item.is-active::before {
  transform: scaleY(1);
}

/* -- FAQ Question button -- */

.faq-question {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 24px 28px;

  background: transparent;

  border: none;

  cursor: pointer;

  text-align: left;

  font-family: var(--font-heading);

  font-size: 1.0625rem;

  font-weight: 600;

  color: var(--kts-dark);

  line-height: 1.4;

  transition:
    color 0.2s ease,
    padding-left 0.3s ease;
}

.faq-question:hover {
  color: var(--kts-primary);
}

.faq-item.is-active .faq-question {
  color: var(--kts-primary);

  padding-left: 32px; /* nudge right when open (accounts for accent bar) */
}

.faq-question:focus-visible {
  outline: 3px solid var(--kts-primary);

  outline-offset: -3px;

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

/* -- Chevron icon -- */

.faq-icon {
  flex-shrink: 0;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: var(--kts-gray-100);

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    background 0.3s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  color: var(--kts-dark);
}

.faq-icon svg {
  display: block;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rotate chevron path to point downward by default */

.faq-icon svg path {
  d: path("m6 9 6 6 6-6");
}

.faq-item:hover .faq-icon {
  background: rgba(221, 147, 0, 0.1);

  color: var(--kts-primary);
}

.faq-item.is-active .faq-icon {
  background: var(--kts-primary);

  color: #ffffff;

  transform: rotate(180deg);
}

/* -- FAQ Answer -- */

.faq-answer {
  max-height: 0;

  overflow: hidden;

  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-active .faq-answer {
  max-height: 400px; /* generous cap  animates to content height */
}

.faq-answer-inner {
  padding: 0 28px 26px 28px;

  border-top: 1px solid var(--kts-gray-200);

  padding-top: 20px;
}

.faq-item.is-active .faq-answer-inner {
  border-top-color: rgba(221, 147, 0, 0.15);
}

.faq-answer-inner p {
  font-family: var(--font-body);

  font-size: 0.9875rem;

  line-height: 1.75;

  color: var(--kts-gray-600);

  margin: 0;
}

/* -- FAQ Footer CTA -- */

.faq-footer {
  text-align: center;

  margin-top: 64px;

  padding: 48px 40px;

  background: linear-gradient(135deg, var(--kts-dark) 0%, #2d2d2d 100%);

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

  position: relative;

  overflow: hidden;

  max-width: 820px;

  margin-left: auto;

  margin-right: auto;
}

.faq-footer::before {
  content: "";

  position: absolute;

  top: -60px;

  right: -60px;

  width: 200px;

  height: 200px;

  background: radial-gradient(
    circle,
    rgba(221, 147, 0, 0.15) 0%,
    transparent 70%
  );

  border-radius: 50%;

  pointer-events: none;
}

.faq-footer::after {
  content: "";

  position: absolute;

  bottom: -40px;

  left: -40px;

  width: 160px;

  height: 160px;

  background: radial-gradient(
    circle,
    rgba(221, 147, 0, 0.1) 0%,
    transparent 70%
  );

  border-radius: 50%;

  pointer-events: none;
}

.faq-footer-text {
  font-family: var(--font-heading);

  font-size: 1.3125rem;

  font-weight: 600;

  color: #ffffff;

  margin-bottom: 24px;

  position: relative;

  z-index: 1;
}

.faq-footer .btn-primary {
  position: relative;

  z-index: 1;

  padding: 14px 36px;

  font-size: 0.9375rem;
}

/* -- Staggered reveal for faq-items -- */

.faq-item.reveal-item:nth-child(1) {
  transition-delay: 0.05s;
}

.faq-item.reveal-item:nth-child(2) {
  transition-delay: 0.12s;
}

.faq-item.reveal-item:nth-child(3) {
  transition-delay: 0.19s;
}

.faq-item.reveal-item:nth-child(4) {
  transition-delay: 0.26s;
}

.faq-item.reveal-item:nth-child(5) {
  transition-delay: 0.33s;
}

/* -- Responsive -- */

@media (max-width: 1200px) {
  .faq-section {
    padding: 100px 0;
  }

  .faq-section .section-header {
    margin-bottom: 60px;
  }

  .faq-grid {
    max-width: 720px;
  }

  .faq-footer {
    max-width: 720px;
  }
}

@media (max-width: 1024px) {
  .faq-section {
    padding: 90px 0;
  }

  .faq-section .section-header {
    margin-bottom: 56px;
  }

  .faq-grid {
    max-width: 680px;
  }

  .faq-footer {
    max-width: 680px;
  }

  .faq-footer-text {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: 80px 0;
  }

  .faq-section .section-header {
    margin-bottom: 48px;
  }

  .faq-section .section-label {
    font-size: 0.875rem;
  }

  .faq-section .section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .faq-section .section-desc {
    font-size: 1rem;

    margin-bottom: 16px;
  }

  .faq-grid {
    max-width: 100%;

    margin-top: 24px;
  }

  .faq-item {
    margin-bottom: 10px;
  }

  .faq-question {
    padding: 20px 20px;

    font-size: 1rem;
  }

  .faq-item.is-active .faq-question {
    padding-left: 24px;
  }

  .faq-answer-inner {
    padding: 0 20px 22px 20px;

    padding-top: 16px;
  }

  .faq-answer-inner p {
    font-size: 0.9375rem;
  }

  .faq-icon {
    width: 32px;

    height: 32px;
  }

  .faq-footer {
    margin-top: 48px;

    padding: 36px 24px;

    max-width: 100%;
  }

  .faq-footer-text {
    font-size: 1.125rem;
  }

  .faq-footer .btn-primary {
    padding: 12px 28px;

    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-section .section-header {
    margin-bottom: 32px;
  }

  .faq-section .section-label {
    font-size: 0.8125rem;
  }

  .faq-section .section-desc {
    font-size: 0.9375rem;

    margin-bottom: 14px;
  }

  .faq-item {
    margin-bottom: 8px;
  }

  .faq-grid {
    margin-top: 20px;
  }

  .faq-question {
    padding: 18px 16px;

    font-size: 0.9375rem;
  }

  .faq-item.is-active .faq-question {
    padding-left: 20px;
  }

  .faq-answer-inner {
    padding: 0 16px 18px 16px;

    padding-top: 14px;
  }

  .faq-answer-inner p {
    font-size: 0.875rem;
  }

  .faq-icon {
    width: 30px;

    height: 30px;
  }

  .faq-footer {
    margin-top: 40px;

    padding: 32px 20px;
  }

  .faq-footer-text {
    font-size: 1rem;
  }

  .faq-footer .btn-primary {
    padding: 12px 24px;

    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 48px 0;
  }

  .faq-section::before {
    width: 300px;

    height: 300px;

    top: -80px;

    right: -80px;
  }

  .faq-section::after {
    width: 200px;

    height: 200px;

    bottom: -50px;

    left: -50px;
  }

  .faq-section .section-header {
    margin-bottom: 24px;
  }

  .faq-section .section-label {
    font-size: 0.75rem;
  }

  .faq-section .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .faq-section .section-desc {
    font-size: 0.875rem;

    margin-bottom: 12px;
  }

  .faq-item {
    margin-bottom: 6px;
  }

  .faq-grid {
    margin-top: 16px;
  }

  .faq-question {
    padding: 16px 14px;

    font-size: 0.875rem;
  }

  .faq-item.is-active .faq-question {
    padding-left: 18px;
  }

  .faq-answer-inner {
    padding: 0 14px 16px 14px;

    padding-top: 12px;
  }

  .faq-answer-inner p {
    font-size: 0.8125rem;
  }

  .faq-icon {
    width: 28px;

    height: 28px;
  }

  .faq-footer {
    margin-top: 32px;

    padding: 28px 16px;
  }

  .faq-footer::before {
    width: 150px;

    height: 150px;

    top: -40px;

    right: -40px;
  }

  .faq-footer::after {
    width: 120px;

    height: 120px;

    bottom: -30px;

    left: -30px;
  }

  .faq-footer-text {
    font-size: 0.9375rem;
  }

  .faq-footer .btn-primary {
    padding: 10px 20px;

    font-size: 0.75rem;
  }
}

/* ==========================================================================

   SERVICES SECTION V4 (Bento Grid Edition)

   ========================================================================== */

/* ==========================================================================

   SERVICES SECTION 3D (Rotating Center Slider)

   ========================================================================== */

/* ==========================================================================

   SCROLL STACK SERVICES

   ========================================================================== */

.services-stack-section {
  padding: 120px 0;
  margin-bottom: 200px;

  background-color: var(--kts-white);

  overflow: visible;
}

/* Sticky Header Logic */

.services-stack-section .section-header {
  position: -webkit-sticky;

  position: sticky;

  top: 60px;

  z-index: 1000;

  pointer-events: none;

  margin-bottom: 80px;

  background: linear-gradient(to bottom, var(--kts-white) 95%, transparent);

  padding-bottom: 60px;

  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.services-stack-section .section-header > * {
  pointer-events: auto;
}

.scroll-stack-scroller {
  position: relative;

  width: 100%;

  overflow: visible;

  padding-bottom: 20vh;
}

.scroll-stack-inner {
  padding: 0;

  max-width: 100%;

  width: 100%;

  margin: 0;

  position: relative;
}

.scroll-stack-card {
  position: relative;

  width: 100%;

  height: 650px;

  border-radius: 0;

  margin-bottom: 0;

  padding: 0;

  color: #ffffff;

  overflow: hidden;

  display: flex;

  align-items: center;

  box-shadow: none;

  border-radius: 20px;

  transform-origin: top center;

  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  image-rendering: -webkit-optimize-contrast;
  contain: layout paint;
}

.card-bg-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;
}

.card-bg-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.15;

  filter: grayscale(100%) contrast(120%);
}

.card-content-grid {
  position: relative;

  z-index: 10;

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 80px;

  width: 100%;

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 var(--container-px);

  align-items: center;
}

.card-number {
  display: block;

  font-size: 1.25rem;

  font-weight: 600;

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

  margin-bottom: 20px;

  font-family: var(--font-heading);
}

.card-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);

  line-height: 1.1;

  color: #ffffff !important;

  margin-bottom: 24px;
}

.card-desc {
  font-size: 1.125rem;

  line-height: 1.7;

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

  max-width: 480px;

  margin-bottom: 40px;
}

.card-features {
  display: flex;

  gap: 32px;

  margin-bottom: 48px;
}

.feature-item {
  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 0.9375rem;

  font-weight: 600;

  color: #ffffff;
}

.feature-item svg {
  color: var(--kts-primary);
}

.scroll-stack-card[style*="var(--kts-primary)"] .feature-item svg {
  color: #ffffff;
}

.card-visual {
  position: relative;
}

.visual-img-wrap {
  width: 100%;

  aspect-ratio: 1;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);

  transform: rotate(2deg);

  transition: transform 0.6s ease;
}

.scroll-stack-card:hover .visual-img-wrap {
  transform: rotate(0deg) scale(1.02);
}

.visual-img-wrap img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.scroll-stack-end {
  height: 1px;

  width: 100%;
}

/* Responsive */

@media (max-width: 1200px) {
  .scroll-stack-card {
    height: auto;

    min-height: 500px;

    padding: 80px 0;
  }
}

@media (max-width: 991px) {
  .card-content-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .card-visual {
    display: none;
  }

  .card-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .scroll-stack-card {
    border-radius: 16px;

    margin-bottom: 0;
  }

  .card-text {
    text-align: center;
  }

  .card-title {
    font-size: 2rem;

    margin-left: auto;

    margin-right: auto;
  }

  .card-title-mobile {
    text-align: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

    width: 100% !important;

    display: block !important;
  }

  .card-desc {
    margin-left: auto;

    margin-right: auto;
  }

  .card-desc-mobile {
    text-align: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

    width: 100% !important;

    max-width: 100% !important;

    display: block !important;
  }

  .card-features {
    flex-direction: column;

    gap: 16px;

    align-items: center;
  }

  .card-features .btn {
    justify-content: center;
  }
}

/* ============================================================
   UNIFIED MOBILE SECTION TITLE SIZES
   Normalizes all non-hero section titles to one consistent
   size on mobile screens for visual harmony.
   ============================================================ */

@media (max-width: 768px) {

  /* Global section-title used by: Services, Testimonials,
     Contact, Gallery, About, FAQ */
  .section-title {
    font-size: 1.75rem !important;

    line-height: 1.2 !important;
  }

  /* Stats section heading */
  .stats-heading-v5 {
    font-size: 1.75rem !important;

    line-height: 1.2 !important;
  }

  /* About section heading (if using a standalone class) */
  .about-title,
  .about-heading {
    font-size: 1.75rem !important;

    line-height: 1.2 !important;
  }

  /* FAQ section heading override (already had its own override) */
  .faq-section .section-title {
    font-size: 1.75rem !important;

    line-height: 1.2 !important;
  }

  /* Page-level contact/blog hero titles (not the main hero) */
  .page-hero-title {
    font-size: 1.75rem !important;

    line-height: 1.2 !important;
  }
}


/* =============================================================================
   PRE-FOOTER CTA SECTION
   ============================================================================= */

.pfc-section {
  position: relative;
  background: var(--kts-dark-brand);
  overflow: hidden;
  padding: 100px 0;
  text-align: center;
}

.pfc-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.132) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  opacity: 1;
}

.pfc-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.18;
}

.pfc-shape-1 {
  width: 520px;
  height: 520px;
  background: var(--kts-primary);
  top: -180px;
  left: -160px;
}

.pfc-shape-2 {
  width: 400px;
  height: 400px;
  background: var(--kts-primary);
  bottom: -140px;
  right: -100px;
}

.pfc-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pfc-eyebrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kts-primary);
  background: rgba(234, 109, 0, 0.12);
  border: 1px solid rgba(234, 109, 0, 0.3);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  margin: 0 auto 28px; /* Added margin auto for centering */
}

.pfc-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kts-white);
  max-width: 780px;
  margin: 0 auto 24px;
}

.pfc-heading .text-orange {
  color: var(--kts-primary);
}

.pfc-desc {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 620px;
  line-height: 1.75;
  margin: 0 auto 36px;
}

.pfc-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 52px;
}

.pfc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  transition: var(--ease);
}

.pfc-tag svg {
  color: var(--kts-primary);
  flex-shrink: 0;
}

.pfc-tag:hover {
  background: rgba(234, 109, 0, 0.15);
  border-color: rgba(234, 109, 0, 0.4);
  color: #fff;
}

.pfc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.pfc-sub-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.pfc-sub-line svg {
  color: var(--kts-primary);
  flex-shrink: 0;
}

.pfc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--kts-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px 44px;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 32px rgba(234, 109, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.pfc-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pfc-btn:hover::before {
  opacity: 1;
}

.pfc-btn:hover {
  background: #c55d00;
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(234, 109, 0, 0.5);
  color: #fff;
}

.pfc-btn svg {
  transition: transform 0.25s ease;
}

.pfc-btn:hover svg {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .pfc-section {
    padding: 80px 0 90px;
  }
  .pfc-heading {
    font-size: clamp(1.65rem, 6vw, 2.25rem);
  }
  .pfc-tags {
    gap: 10px;
    margin-bottom: 40px;
  }
  .pfc-btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    padding: 18px 28px;
  }
}

@media (max-width: 480px) {
  .pfc-section {
    padding: 64px 0 72px;
  }
  .pfc-eyebrow {
    font-size: 0.7rem;
  }
  .pfc-tag {
    font-size: 0.8125rem;
    padding: 7px 14px;
  }
}

/* =============================================================================
   WHY HOMEOWNERS CHOOSE US SECTION
   ============================================================================= */

.wcu-section {
  position: relative;
  background: var(--kts-cream);
  padding: 100px 0;
  overflow: hidden;
}

/* Dot grid � matches stats section */
.wcu-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(28,28,28,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}

.wcu-container {
  position: relative;
  z-index: 2;
}

/* -- Section header (split layout like stats) -- */
.wcu-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: flex-end;
  margin-bottom: 56px;
}

.wcu-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 18px;
}

.wcu-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kts-dark);
  max-width: 620px;
  margin: 0;
}

.wcu-header-desc {
  font-size: 1rem;
  color: var(--kts-gray-600);
  line-height: 1.7;
  margin-bottom: 24px;
  margin-left: 150px;
  max-width: 420px;
  text-align: right;
}

.wcu-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wcu-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kts-dark);
  background: #fff;
  border: 1px solid var(--kts-gray-200);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
}

.wcu-trust-badge svg {
  color: var(--kts-primary);
  flex-shrink: 0;
}

/* -- Checkerboard grid -- */
.wcu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 3px;
}

/* Card spanning 2 columns */
.wcu-card.span-2 {
  grid-column: span 2;
}

/* -- Base card styles -- */
.wcu-card {
  position: relative;
  overflow: hidden;
  padding: 44px 40px;
  border-radius: 10px;
  min-height: 240px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  cursor: default;
}

.wcu-card:hover {
  transform: scale(1.015);
  z-index: 2;
  box-shadow: 0 12px 40px rgba(28,28,28,0.18);
}

.wcu-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* -- Box color variants -- */
.wcu-card.dark-box {
  background: var(--kts-dark-brand);
}

.wcu-card.dark-box .wcu-icon-wrap svg,
.wcu-card.dark-box .wcu-card-title,
.wcu-card.dark-box .wcu-card-desc {
  color: #fff;
}

.wcu-card.dark-box .wcu-icon-wrap {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.wcu-card.orange-box {
  background: var(--kts-primary);
}

.wcu-card.orange-box .wcu-icon-wrap svg,
.wcu-card.orange-box .wcu-card-title,
.wcu-card.orange-box .wcu-card-desc {
  color: #fff;
}

.wcu-card.orange-box .wcu-icon-wrap {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
}

.wcu-card.cream-box {
  background: var(--kts-green-pale);
}

.wcu-card.cream-box .wcu-icon-wrap svg,
.wcu-card.cream-box .wcu-card-title {
  color: var(--kts-dark);
}

.wcu-card.cream-box .wcu-card-desc {
  color: var(--kts-gray-600);
}

.wcu-card.cream-box .wcu-icon-wrap {
  background: rgba(234,109,0,0.1);
  border-color: rgba(234,109,0,0.2);
}

.wcu-card.white-box {
  background: #ffffff;
}

.wcu-card.white-box .wcu-icon-wrap svg,
.wcu-card.white-box .wcu-card-title {
  color: var(--kts-dark);
}

.wcu-card.white-box .wcu-card-desc {
  color: var(--kts-gray-600);
}

.wcu-card.white-box .wcu-icon-wrap {
  background: var(--kts-green-pale);
  border-color: rgba(234,109,0,0.15);
}

.wcu-card.orange-dark-box {
  background: #2a1a0a; /* very dark warm brown */
}

.wcu-card.orange-dark-box .wcu-icon-wrap svg,
.wcu-card.orange-dark-box .wcu-card-title {
  color: var(--kts-primary);
}

.wcu-card.orange-dark-box .wcu-card-desc {
  color: rgba(255,255,255,0.65);
}

.wcu-card.orange-dark-box .wcu-icon-wrap {
  background: rgba(234,109,0,0.15);
  border-color: rgba(234,109,0,0.25);
}

/* -- Icon wrap -- */
.wcu-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.wcu-card:hover .wcu-icon-wrap {
  transform: rotate(-6deg) scale(1.08);
}

/* -- Card typography -- */
.wcu-card-title {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.wcu-card-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* -- Dot accent for span-2 card -- */
.wcu-card-accent-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 52px;
  margin-top: auto;
  padding-top: 12px;
}

.wcu-card-accent-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(234,109,0,0.4);
  display: block;
}

/* -- Responsive -- */
@media (max-width: 1024px) {
  .wcu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wcu-card.span-2 {
    grid-column: span 2;
  }

  .wcu-header {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    align-items: center;
  }

  .wcu-header-left, .wcu-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wcu-heading {
    margin: 0 auto;
    max-width: 100%;
  }

  .wcu-header-desc {
    margin: 0 auto 24px !important;
    text-align: center;
    max-width: 600px;
  }

  .wcu-trust-row {
    justify-content: center;
  }

  .wcu-card-inner {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .wcu-section {
    padding: 80px 0;
  }

  .wcu-grid {
    grid-template-columns: 1fr;
    gap: 12px; /* Slightly larger gap for mobile spacing */
  }

  .wcu-card.span-2 {
    grid-column: span 1;
  }

  .wcu-card {
    padding: 40px 24px;
    min-height: auto; /* Allow height to fit content */
    text-align: center;
  }

  .wcu-heading {
    font-size: 2.2rem;
  }

  .wcu-card-accent-dots {
    margin: 20px auto 0;
  }
}

@media (max-width: 480px) {
  .wcu-section {
    padding: 60px 0;
  }
  .wcu-heading {
    font-size: 1.8rem;
  }
}

/* WCU cards: ensure full visibility once is-visible is added (and as fallback) */
.wcu-card.reveal-from-bottom.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Safety net: if JS never fires, show cards after 3s via animation */
@keyframes wcuFadeIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wcu-card.reveal-from-bottom {
  animation: wcuFadeIn 0.6s ease forwards;
  animation-delay: 3s;
}
.wcu-card.reveal-from-bottom.is-visible {
  animation: none;
}

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

.process-section {
  position: relative;
  background: #ffffff;
  padding: 110px 0 100px;
  overflow: hidden;
}

/* Dot grid */
.process-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(234,109,0,0.12) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  opacity: 0.6;
}

.process-container-wide {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 40px;
  position: relative;
  z-index: 2;
}

/* -- Header split layout -- */
.process-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: flex-end;
  margin-bottom: 72px;
}

.process-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kts-primary);
  margin-bottom: 16px;
}

.process-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kts-dark);
  max-width: 520px;
  margin: 0;
}

.process-heading .text-orange {
  color: var(--kts-primary);
}

.process-subhead {
  font-size: 1rem;
  color: var(--kts-gray-600);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 400px;
}

/* CTA button in header */
.process-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--kts-dark-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(28,28,28,0.2);
}

.process-cta-btn:hover {
  background: var(--kts-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(234,109,0,0.35);
  color: #fff;
}

.process-cta-btn svg {
  transition: transform 0.25s ease;
}

.process-cta-btn:hover svg {
  transform: translateX(4px);
}

/* -- Steps grid -- */
.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* Horizontal connector line */
.process-connector {
  position: absolute;
  top: 36px; /* aligns with center of badge */
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 0;
  pointer-events: none;
}

.process-connector-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    var(--kts-primary) 0%,
    rgba(234,109,0,0.5) 50%,
    rgba(234,109,0,0.2) 100%
  );
}

/* -- Single step -- */
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}

/* Number badge on the line */
.process-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--kts-dark-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(28,28,28,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover .process-badge {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(28,28,28,0.3);
}

.process-badge-num {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

/* Highlight step (step 03) � orange badge */
.process-step--highlight .process-badge {
  background: var(--kts-primary);
  box-shadow: 0 4px 24px rgba(234,109,0,0.45);
}

.process-step--highlight .process-badge-num {
  color: #fff;
}

/* Card below badge */
.process-card {
  background: var(--kts-cream);
  border: 1px solid var(--kts-gray-200);
  border-top: 3px solid transparent;
  padding: 28px 24px;
  border-radius: 10px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.process-step:hover .process-card {
  border-color: var(--kts-primary);
  box-shadow: 0 8px 32px rgba(234,109,0,0.12);
  transform: translateY(-4px);
}

/* Highlight step card (dynamic) */
.process-step.is-active .process-card {
  background: var(--kts-dark-brand);
  border-color: var(--kts-primary);
}

.process-step.is-active .process-card .process-card-title,
.process-step.is-active .process-card .process-card-desc,
.process-step.is-active .process-card .process-icon {
  color: #fff;
}

.process-step.is-active .process-card .process-icon {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

/* Icon circle */
.process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(234,109,0,0.1);
  border: 1px solid rgba(234,109,0,0.2);
  color: var(--kts-primary);
  transition: transform 0.3s ease;
  align-self: flex-start;
}

.process-step:hover .process-icon {
  transform: rotate(-8deg) scale(1.08);
}

/* Card text */
.process-card-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kts-dark);
  margin: 0;
  text-align: left;
}

.process-card-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--kts-gray-600);
  margin: 0;
  text-align: left;
}

/* -- Responsive -- */
@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .process-connector {
    display: none;
  }

  .process-header {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    justify-content: center;
  }

  .process-heading {
    margin: 0 auto;
  }

  .process-card {
    align-items: center;
    text-align: center;
  }

  .process-card-title, .process-card-desc {
    text-align: center;
  }

  .process-icon {
    align-self: center;
  }
}

@media (max-width: 600px) {
  .process-section {
    padding: 64px 0;
  }

  .process-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .process-step {
    padding: 0;
  }

  .process-card {
    padding: 32px 20px;
  }
}

/* Process section � reduced vertical spacing */
.process-section {
  padding: 64px 0 60px;
}

.process-header {
  margin-bottom: 48px;
}

@media (max-width: 600px) {
  .process-section {
    padding: 48px 0;
  }
}

/* Dynamic Process Animation Overrides */
.process-step.is-active .process-badge {
  background: var(--kts-primary) !important;
  box-shadow: 0 4px 24px rgba(234,109,0,0.45) !important;
  transform: scale(1.1);
}

.process-step.is-active .process-badge-num {
  color: #fff !important;
}

.process-step.is-active .process-card {
  background: var(--kts-dark-brand) !important;
  border-color: var(--kts-primary) !important;
  box-shadow: 0 8px 32px rgba(234,109,0,0.12) !important;
  transform: translateY(-4px);
}

.process-step.is-active .process-card .process-card-title,
.process-step.is-active .process-card .process-card-desc,
.process-step.is-active .process-card .process-icon {
  color: #fff !important;
}

.process-step.is-active .process-card .process-icon {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

.process-container-wide {
  width: 100%;
  max-width: 1600px !important;
  margin-inline: auto;
  padding-inline: 40px !important;
}

/* Refining Process Container for max width and minimal side padding */
.process-container-wide {
  max-width: 95% !important;
  padding-inline: 15px !important;
}

@media (max-width: 768px) {
  .process-container-wide {
    max-width: 100% !important;
    padding-inline: 10px !important;
  }
}

/* Reverting side padding and width for Process Section to default container specs */
.process-container-wide {
  max-width: var(--container-max) !important;
  padding-inline: var(--container-px) !important;
}

/* =============================================================================
   TREE PROBLEMS SECTION
   ============================================================================= */

.problems-section {
  position: relative;
  padding: 100px 0;
  background: var(--kts-light-bg);
  overflow: hidden;
}

.problems-container {
  position: relative;
  z-index: 2;
}

.problems-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: flex-start;
}

/* -- Content (Left) -- */
.problems-content {
  position: sticky;
  top: 120px;
}

.problems-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--kts-primary);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.problems-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kts-dark);
  margin-bottom: 24px;
}

.problems-subtext {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--kts-gray-600);
  margin-bottom: 40px;
}

.problems-cta-box {
  background: var(--kts-cream);
  padding: 32px;
  border-left: 4px solid var(--kts-primary);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.problems-cta-box p {
  margin: 0;
  font-weight: 600;
  color: var(--kts-dark);
  font-size: 1rem;
}

/* -- Problem List (Right) -- */
.problems-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.problem-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--kts-gray-200);
  padding: 20px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.problem-card:hover {
  transform: translateX(10px);
  box-shadow: var(--shadow-lg);
  border-color: var(--kts-primary);
}

.problem-img-wrap {
  position: relative;
  height: 140px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.problem-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.problem-card:hover .problem-img {
  transform: scale(1.1);
}

.problem-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: var(--kts-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.125rem;
  box-shadow: 0 4px 10px rgba(234,109,0,0.3);
}

.problem-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.problem-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kts-dark);
  margin: 0 0 10px;
}

.problem-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--kts-gray-600);
  margin: 0;
}

/* -- Responsive -- */
/* =============================================================================
   TREE PROBLEMS SECTION V3 (REFINED SPACING & PADDING)
   ============================================================================= */

.problems-section-v3 {
  position: relative;
  padding: 120px 0; /* More vertical breathing room */
  background: #ffffff;
  overflow: hidden;
}

.problems-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(234, 109, 0, 0.08) 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  opacity: 0.4;
  pointer-events: none;
}

.problems-container-v3 {
  position: relative;
  z-index: 2;
  max-width: 1320px !important; /* Slightly wider than standard for better 4-col balance */
  margin: 0 auto;
  padding: 0 24px;
}

/* Centered Header */
.problems-header-v3 {
  max-width: 800px;
  margin: 0 auto 80px;
  text-align: center;
}

.problems-eyebrow-v3 {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--kts-primary);
  margin-bottom: 24px;
  text-transform: uppercase;
}

.problems-heading-v3 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--kts-dark);
  margin-bottom: 30px;
}

.problems-desc-v3 {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--kts-gray-600);
  max-width: 680px;
  margin: 0 auto;
}

/* 4-Column Balanced Grid */
.problems-grid-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px; /* Increased gap */
  margin-bottom: 80px;
}

.problem-card-v3 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kts-gray-200);
  border-bottom: 6px solid transparent; /* Thicker accent */
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden; /* Ensure image and content stay in bounds */
}

.problem-card-v3:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 60px rgba(28, 28, 28, 0.12);
  border-bottom-color: var(--kts-primary);
}

/* Image Part (Vertical) */
.problem-img-part {
  position: relative;
  aspect-ratio: 1 / 1.1; /* Slightly taller aspect for better presence */
  overflow: hidden;
}

.problem-img-part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.problem-card-v3:hover .problem-img-part img {
  transform: scale(1.15);
}

.problem-icon-tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: var(--kts-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(234, 109, 0, 0.3);
  z-index: 2;
  transition: transform 0.4s ease, background 0.4s ease;
}

.problem-icon-tag svg {
  width: 22px;
  height: 22px;
  display: block;
}

.problem-card-v3:hover .problem-icon-tag {
  transform: scale(1.1);
}

/* Content Part */
.problem-content-part {
  padding: 40px 32px; /* Significantly more internal padding */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.problem-card-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--kts-dark);
  margin-bottom: 16px;
  line-height: 1.3;
}

.problem-card-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kts-gray-600);
  margin: 0;
}

/* Accent Decorations */
.card-dots-accent {
  margin-top: 30px;
  display: flex;
  gap: 6px;
}

.card-dots-accent span {
  width: 6px;
  height: 6px;
  background: var(--kts-primary);
  border-radius: 50%;
  opacity: 0.5;
}

/* Color Themes for Cards - FIXED */
.problem-card-v3.dark-box { 
  background: var(--kts-dark-brand); 
  border-color: var(--kts-dark-brand); 
}
.problem-card-v3.dark-box .problem-card-title,
.problem-card-v3.dark-box .problem-card-desc { 
  color: #fff !important; 
}

.problem-card-v3.orange-box { 
  background: var(--kts-primary); 
  border-color: var(--kts-primary); 
}
.problem-card-v3.orange-box .problem-card-title,
.problem-card-v3.orange-box .problem-card-desc { 
  color: #fff !important; 
}
.problem-card-v3.orange-box .card-dots-accent span { 
  background: #fff !important; 
  opacity: 0.8;
}

.problem-card-v3.cream-box { 
  background: var(--kts-cream); 
  border-color: #f0e6e0;
}


.cta-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--kts-dark);
  letter-spacing: -0.01em;
}

/* Responsive */
@media (max-width: 1280px) {
  .problems-grid-v3 {
    gap: 20px;
  }
  .problem-content-part {
    padding: 30px 24px;
  }
}

@media (max-width: 1024px) {
  .problems-grid-v3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .problems-section-v3 {
    padding: 80px 0;
  }
  .problems-grid-v3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .problem-content-part {
    padding: 24px 20px;
  }
  .problem-card-title {
    font-size: 1.15rem;
  }
  .problem-card-desc {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .problems-grid-v3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .problems-heading-v3 {
    font-size: 2rem;
  }
  .problem-content-part {
    padding: 20px 15px;
  }
}

/* =============================================================================
   STUMP SECTION (CTA)
   ============================================================================= */

/* =============================================================================
   STUMP SECTION (DARK & COMPACT)
   ============================================================================= */

/* =============================================================================
   Stump Section - Redesign (Centered Parallax)
   ============================================================================= */

.stump-parallax-section {
  position: relative;
  padding: 140px 0;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--kts-dark-brand);
}

.stump-parallax-bg {
  position: absolute;
  top: -10%; /* Center the 120% height */
  left: 0;
  width: 100%;
  height: 120%; 
  background-size: cover;
  background-position: center;
  z-index: 1;
  will-change: transform;
}

/* On mobile/tablet, disable JS parallax movement and use standard background */
@media (max-width: 1024px) {
  .stump-parallax-bg {
    top: 0;
    height: 100%;
    transform: none !important;
  }
}

.stump-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(28, 28, 28, 0.7),
    rgba(28, 28, 28, 0.85)
  );
  z-index: 2;
}

.stump-centered-container {
  position: relative;
  z-index: 3;
  text-align: center;
}

.stump-content-center {
  max-width: 900px;
  margin: 0 auto;
}

.stump-eyebrow-alt {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--kts-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.stump-heading-alt {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
}

.stump-description-alt {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 48px;
  line-height: 1.6;
}

.stump-reasons-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 56px;
}

.reason-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--ease);
}

.reason-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
  border-color: var(--kts-primary);
}

.reason-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kts-primary);
  flex-shrink: 0;
}

.reason-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.reason-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.stump-cta-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 768px) {
  .stump-parallax-section {
    padding: 100px 0;
  }
  .stump-cta-group {
    flex-direction: column;
    align-items: stretch;
    max-width: 300px;
    margin: 0 auto;
  }
  .stump-reasons-flex {
    gap: 12px;
  }
  .reason-item {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   Emergency CTA Section
   ============================================================================= */

.emergency-cta-section {
  padding: 100px 0;
  background: #ffffff; /* Warm cream background */
}

.emergency-cta-card {
  background: linear-gradient(135deg, #ea6d00 0%, #c54e00 100%);
  border-radius: var(--radius-xl);
  padding: 80px 60px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Decorative background elements */
.emergency-cta-card::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  z-index: 1;
}

.emergency-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  animation: pulse-ring 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.33); opacity: 0.8; }
  80%, 100% { transform: scale(3); opacity: 0; }
}

.emergency-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.1;
  color: #fff;
  position: relative;
  z-index: 2;
}

.emergency-text {
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto 48px;
  opacity: 0.9;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.btn-emergency {
  background: #fff;
  color: #ea6d00;
  padding: 20px 40px;
  font-size: 1.125rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: var(--ease);
}

.btn-emergency:hover {
  background: var(--kts-dark-brand);
  color: #fff;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   Service Area Section
   ============================================================================= */

.service-areas-section {
  padding: 60px 0;
  background: #fff;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 20px;
}

.location-card {
  background: #fdf8f6;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--ease);
  border: 1px solid var(--kts-gray-200);
}

.location-card:hover {
  background: #fff;
  border-color: var(--kts-primary);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.location-icon {
  width: 56px;
  height: 56px;
  background: #fff;
  color: var(--kts-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--ease);
}

.location-card:hover .location-icon {
  background: var(--kts-primary);
  color: #fff;
  transform: rotateY(180deg);
}

.location-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--kts-dark-brand);
  margin: 0;
}

.location-card--plus {
  background: var(--kts-dark-brand);
  border-color: var(--kts-dark-brand);
}

.location-card--plus .location-name {
  color: #fff;
}

.location-card--plus .location-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 1024px) {
  .locations-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .emergency-cta-card { padding: 60px 40px; }
}

@media (max-width: 768px) {
  .locations-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .location-card { padding: 24px 16px; }
  .location-icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .location-icon svg { width: 18px; height: 18px; }
  .location-name { font-size: 1rem; }
  .emergency-title { font-size: 2.25rem; }
  .emergency-text { font-size: 1.125rem; }
}

@media (max-width: 480px) {
  .locations-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .location-card { padding: 16px 12px; }
  .location-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .location-icon svg { width: 16px; height: 16px; }
  .location-name { font-size: 0.9375rem; }
  .emergency-cta-card { padding: 48px 24px; }
}