/* Homepage-only visual theme inspired by karmod.com: Titillium Web font,
   flat orange CTA accent, bolder stat strip. Scoped to body.home-karmod so
   it never affects any other page (all of which keep the existing theme). */

body.home-karmod {
  --font-body: 'Titillium Web', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading: 'Titillium Web', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --accent: #F57F2B;
  --accent-light: #FF9D5C;
  --accent-dark: #D9631F;
}

body.home-karmod .btn-primary {
  background: var(--accent);
  box-shadow: none;
  border-radius: 6px;
}

body.home-karmod .btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: none;
  transform: translateY(-1px);
}

body.home-karmod .btn {
  border-radius: 6px;
}

body.home-karmod .hero-stats {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-6);
}

body.home-karmod .stat-item {
  padding: 0 var(--space-8) 0 0;
  margin-right: var(--space-8);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

body.home-karmod .stat-item:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

body.home-karmod .stat-number {
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.home-karmod .stat-label {
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  body.home-karmod .hero-stats {
    border-top: none;
    padding-top: 0;
    /* dividers are gone on mobile, so the 2x2 grid needs its own spacing
       instead of relying on the desktop border/padding "dividers" */
    gap: var(--space-4) var(--space-6);
  }
  body.home-karmod .stat-item {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }
}

/* Category slider (sits above the real hero section) */
body.home-karmod .category-slider .swiper {
  position: absolute;
  inset: 0;
}

body.home-karmod .category-slider .swiper,
body.home-karmod .category-slider .swiper-wrapper,
body.home-karmod .category-slider .swiper-slide {
  height: 100%;
}

/* Company stats sit above whichever slide is active, so they stay put as the
   slider rotates (they describe the company, not the individual slide). */
body.home-karmod .category-slider .slider-stats-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--space-8) + 56px);
  z-index: 2;
  width: 100%;
  padding-top: var(--space-10);
}

/* Slide images are now random, so the slide's own overlay (which fades to
   ~65% opacity on one side) can't be trusted to keep this text legible on
   every possible photo. This gives the stats their own guaranteed-dark
   backing, independent of whatever image happens to be behind them. */
body.home-karmod .category-slider .slider-stats-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 60%, rgba(15, 23, 42, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

body.home-karmod .category-slider .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.6;
}

body.home-karmod .category-slider .swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
}

body.home-karmod .category-slider .swiper-button-next,
body.home-karmod .category-slider .swiper-button-prev {
  color: #fff;
}

body.home-karmod .category-slider .swiper-button-next:hover,
body.home-karmod .category-slider .swiper-button-prev:hover {
  color: var(--accent);
}

body.home-karmod .category-slider .swiper-button-next::after,
body.home-karmod .category-slider .swiper-button-prev::after {
  font-size: 1.5rem;
}

/* Mobile: nav arrows crowd/overlap the hero content and are small touch
   targets; rely on pagination dots + swipe gesture instead. */
@media (max-width: 640px) {
  body.home-karmod .category-slider .swiper-button-next,
  body.home-karmod .category-slider .swiper-button-prev {
    display: none;
  }
}

/* On mobile the slide's own content (badge/title/subtitle/buttons) is
   vertically centered by .hero, completely independent of the stats +
   features-strip + pagination block pinned to the bottom. With a two-line
   title/subtitle and the taller stats block (now carrying the features
   strip too), the two can collide. Pin content to the top instead so the
   two regions never compete for the same vertical space. */
@media (max-width: 640px) {
  body.home-karmod .category-slider {
    align-items: flex-start;
  }
  body.home-karmod .category-slider .hero-content {
    padding-top: calc(var(--nav-height) + 20px);
    padding-bottom: 0;
  }
}

/* Features strip, relocated into the slider's dark stats area (sits above
   the pagination dots instead of as its own white section below the hero). */
body.home-karmod .category-slider .features-strip {
  background: transparent;
  border-bottom: none;
  padding: var(--space-5) 0 0;
}

body.home-karmod .category-slider .features-strip-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

body.home-karmod .category-slider .feature-strip-item {
  color: #fff;
}

body.home-karmod .category-slider .feature-strip-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-light);
}

body.home-karmod .category-slider .feature-strip-title {
  color: #fff;
}

body.home-karmod .category-slider .feature-strip-text {
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 900px) {
  body.home-karmod .category-slider .features-strip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 5 full items would either overflow or crush down to illegible
   text, so collapse to icon + short title only, in a swipeable row. */
@media (max-width: 640px) {
  body.home-karmod .category-slider .features-strip {
    padding-top: var(--space-3);
  }

  body.home-karmod .category-slider .features-strip-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: var(--space-3);
    padding-bottom: var(--space-1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.home-karmod .category-slider .features-strip-grid::-webkit-scrollbar {
    display: none;
  }

  body.home-karmod .category-slider .feature-strip-item {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    width: 78px;
  }

  body.home-karmod .category-slider .feature-strip-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  body.home-karmod .category-slider .feature-strip-title {
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }

  body.home-karmod .category-slider .feature-strip-text {
    display: none;
  }
}

/* ===== Packages section: category tabs + image/link-list panels ===== */
body.home-karmod .pkg-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

body.home-karmod .pkg-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 160px;
  max-width: 220px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--grey-600);
  border-bottom: 3px solid transparent;
  transition: var(--transition-fast);
}

body.home-karmod .pkg-tab svg {
  width: 40px;
  height: 40px;
}

body.home-karmod .pkg-tab:hover {
  color: var(--primary);
}

body.home-karmod .pkg-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

body.home-karmod .pkg-panel {
  display: none;
  grid-template-columns: 1fr 1.4fr;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

body.home-karmod .pkg-panel.active {
  display: grid;
}

body.home-karmod .pkg-panel-image {
  min-height: 340px;
}

body.home-karmod .pkg-panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* smooths the swap when hovering a product in the list */
  transition: opacity 0.25s ease;
}

body.home-karmod .pkg-panel-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 0;
}

body.home-karmod .pkg-panel-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.home-karmod .pkg-panel-links li {
  border-bottom: 1px solid var(--grey-100);
}

body.home-karmod .pkg-panel-links li:last-child {
  border-bottom: none;
}

body.home-karmod .pkg-panel-links a {
  display: block;
  padding: var(--space-5) var(--space-6);
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transition-fast);
}

body.home-karmod .pkg-panel-links a:hover {
  color: var(--accent);
  background: var(--off-white);
}

/* Tablet: stack image above links, keep links two-up */
@media (max-width: 900px) {
  body.home-karmod .pkg-panel.active {
    grid-template-columns: 1fr;
  }
  body.home-karmod .pkg-panel-image {
    min-height: 220px;
  }
}

/* Per-row thumbnails exist for touch devices, where hover previews are
   unavailable. Hidden on pointer devices, which use the large panel image. */
body.home-karmod .pkg-thumb {
  display: none;
}

/* Mobile: single-column links, tighter tabs so nothing overflows */
@media (max-width: 640px) {
  body.home-karmod .pkg-tabs {
    gap: var(--space-2);
  }
  body.home-karmod .pkg-tab {
    flex: 1 1 100px;
    font-size: 0.8rem;
    padding: var(--space-3) var(--space-2);
  }
  body.home-karmod .pkg-tab svg {
    width: 30px;
    height: 30px;
  }
  body.home-karmod .pkg-panel-links {
    grid-template-columns: 1fr;
  }
  /* first list's last item needs a divider once stacked */
  body.home-karmod .pkg-panel-links ul:first-child li:last-child {
    border-bottom: 1px solid var(--grey-100);
  }
  /* The large panel image is redundant once every row carries its own
     thumbnail, and it costs a lot of vertical space on a phone. */
  body.home-karmod .pkg-panel-image {
    display: none;
  }
  body.home-karmod .pkg-panel-links a {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  body.home-karmod .pkg-thumb {
    display: block;
    width: 72px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 6px;
  }
}

/* The features strip -> packages section gap was reading as an oversized
   empty gray band (.section's shared padding-top is 6rem, used on 233
   pages sitewide, so trimmed only here rather than touching that class). */
body.home-karmod #properties {
  padding-top: var(--space-10);
}