/* ============================================================
   HOW WE HELP — PAGE-SPECIFIC STYLES
   ============================================================ */

/* ─────────────────────────────────────────
   HERO SLIDER SECTION
───────────────────────────────────────── */

.hwh-hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - clamp(60px, 8vw, 85px));
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
}

/* Slider Track — fixed height so all absolute slides stack */
.hwh-slider-track {
  position: relative;
  width: 100%;
  /* height is determined by the one visible (relative) slide */
  min-height: calc(80vh - clamp(60px, 8vw, 85px) - 60px);
}

/* All slides absolutely positioned, hidden by default */
.hwh-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* no CSS transition — GSAP handles transitions */
}

/* The active slide sits on top */
.hwh-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Slide inner grid */
.hwh-slide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 0vw, 6rem);
  width: 100%;
  max-width: clamp(1200px, 90vw, 1500px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(4rem, 8vw, 8rem);
}

/* ── Content Side ── */
.hwh-slide-content {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 2rem);
}

.hwh-hero-headline {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.hwh-hero-headline span {
  display: block;
}

.hwh-hero-desc {
  font-size: clamp(0.85rem, 1vw + 0.3rem, 1.05rem);
  color: #94a3b8;
  line-height: 1.75;
  max-width: 480px;
}

/* ── Media Side ── */
.hwh-slide-media {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hwh-circle-wrap {
  position: relative;
  width: clamp(260px, 38vw, 440px);
  height: clamp(260px, 38vw, 440px);
  border-radius: 50%;
  border: clamp(8px, 1.2vw, 18px) solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 158, 255, 0.15);
  overflow: hidden;
  flex-shrink: 0;
}

.hwh-circle-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  transition: transform 0.8s ease;
}

.hwh-circle-wrap:hover img {
  transform: scale(1.12);
}

/* Floating Spheres */
.hwh-sphere {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #00d2ff 0%, #005bc4 60%, #002e7a 100%);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.5),
    inset -6px -6px 18px rgba(0, 0, 0, 0.6),
    inset 6px 6px 12px rgba(255, 255, 255, 0.35);
  animation: hwh-float 6s ease-in-out infinite alternate;
  z-index: 10;
}

.hwh-sphere-lg {
  width: clamp(60px, 10vw, 100px);
  height: clamp(60px, 10vw, 100px);
  bottom: 80%;
  right: 10%;
  animation-delay: 0s;
}

.hwh-sphere-md {
  width: clamp(38px, 6vw, 64px);
  height: clamp(38px, 6vw, 64px);
  bottom: -2%;
  right: 12%;
  animation-delay: 2s;
}

.hwh-sphere-sm {
  width: clamp(24px, 4vw, 40px);
  height: clamp(24px, 4vw, 40px);
  bottom: -5%;
  right: 30%;
  animation-delay: 1s;
}

@keyframes hwh-float {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-14px) scale(1.04); }
}

/* ─────────────────────────────────────────
   SLIDER DOTS
───────────────────────────────────────── */
.hwh-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-block: 1.5rem 2rem;
  position: relative;
  z-index: 5;
}

.hwh-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px !important; /* overrides global responsive.css min-height: 44px on buttons */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
  line-height: 0;
  font-size: 0;
  display: inline-block;
}

.hwh-dot.is-active,
.hwh-dot:hover {
  background: #009eff;
  border-color: #009eff;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(0, 158, 255, 0.6);
}


/* ─────────────────────────────────────────
   SERVICES SECTION
───────────────────────────────────────── */
.hwh-services {
  padding-block: clamp(4rem, 8vw, 10rem);
  position: relative;
  overflow: hidden;
}

.hwh-services-inner {
  max-width: clamp(1200px, 90vw, 1500px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Hexagon Grid Layout */
/*
  Design layout (5 hexagons):
  Row 1: hex1 (col-start), gap, hex2 (col-end)
  Row 2: (offset) hex3 (center)
  Row 3: hex4 (col-start), gap, hex5 (col-end)
  Plus empty "ghost" hexagons shown in the design
*/

.hwh-hex-grid {
  display: grid;
  /* 6 equal columns to allow hexagon offset placement */
  grid-template-columns: repeat(6, 1fr);
  row-gap: clamp(-20px, -2vw, -10px); /* negative gap for hex overlap */
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

/* Each hexagon cell */
.hwh-hex-cell {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-block: clamp(10px, 2vw, 20px);
}

/* Offset row — shift right by 1 column */
.hwh-hex-cell.offset-right {
  grid-column-start: 2;
  grid-column-end: span 2;
}

.hwh-hex-cell.offset-right-full {
  grid-column-start: 3;
  grid-column-end: span 2;
}

/* Ghost / empty hexagons (visible as outlines in the design) */
.hwh-hex-cell.ghost {
  pointer-events: none;
}

/* ── Hexagon Shape ── */
.hwh-hexagon {
  position: relative;
  width: clamp(150px, 18vw, 230px);
  /* height via clip path, use aspect ratio */
  aspect-ratio: 1 / 1.1547; /* exact hexagon ratio */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.3s ease;
}

/* Glowing border effect via pseudo element (sits outside clip-path) */
.hwh-hexagon-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.hwh-hexagon-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, rgba(0, 158, 255, 0.6) 0%, rgba(0, 60, 180, 0.3) 100%);
  z-index: 0;
  transition: opacity 0.3s ease;
}

.hwh-hexagon-wrap.ghost::before {
  background: rgba(0, 80, 200, 0.12);
}

/* Background image or gradient fill */
.hwh-hexagon-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #08162e 0%, #0a1e45 50%, #051225 100%);
  z-index: 1;
  transition: filter 0.4s ease;
}

.hwh-hexagon-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(5,15,40,0.72) 0%, rgba(8,25,65,0.65) 100%);
  z-index: 1;
}

.hwh-hexagon-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.18;
  transition: opacity 0.4s ease;
  position: relative;
  z-index: 0;
}

/* Inner border/glow ring */
.hwh-hexagon-ring {
  position: absolute;
  inset: 4px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1.5px solid rgba(0, 158, 255, 0.35);
  z-index: 3;
  pointer-events: none;
}

/* Content overlay */
.hwh-hexagon-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(0.6rem, 1.5vw, 1.2rem);
  height: 100%;
  width: 100%;
  gap: 0;
}

.hwh-hex-title {
  font-size: clamp(0.65rem, 1vw + 0.2rem, 0.95rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.01em;
  transition: all 0.35s ease;
}

.hwh-hex-desc {
  font-size: clamp(0.65rem, 0.9vw, 0.85rem);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  text-align: left;
  margin-top: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.35s ease;
  max-width: 95%;
}

.hwh-hex-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hwh-hex-desc li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 2px;
}

.hwh-hex-desc li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #009eff;
}

/* Hover Dark Overlay */
.hwh-hexagon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 3;
  transition: background 0.35s ease;
  pointer-events: none;
}

/* ── Hover state ── */
.hwh-hexagon-wrap:not(.ghost):hover .hwh-hexagon-bg {
  filter: brightness(0.65);
}

.hwh-hexagon-wrap:not(.ghost):hover .hwh-hexagon-bg img {
  opacity: 0.32;
}

.hwh-hexagon-wrap:not(.ghost):hover .hwh-hexagon-overlay {
  background: rgba(0, 20, 60, 0.65);
}

.hwh-hexagon-wrap:not(.ghost):hover .hwh-hex-desc {
  opacity: 1;
  transform: translateY(0);
}

.hwh-hexagon-wrap:not(.ghost):hover .hwh-hexagon-wrap::before {
  opacity: 1;
}

/* Touch active state for mobile */
.hwh-hexagon-wrap.touch-active .hwh-hexagon-bg {
  filter: brightness(0.65);
}

.hwh-hexagon-wrap.touch-active .hwh-hexagon-bg img {
  opacity: 0.32;
}

.hwh-hexagon-wrap.touch-active .hwh-hexagon-overlay {
  background: rgba(0, 20, 60, 0.65);
}

.hwh-hexagon-wrap.touch-active .hwh-hex-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Ghost / empty hexagons */
.hwh-hexagon-wrap.ghost .hwh-hexagon-bg {
  background: linear-gradient(135deg, rgba(5, 15, 40, 0.6) 0%, rgba(10, 25, 60, 0.4) 100%);
}

.hwh-hexagon-wrap.ghost .hwh-hexagon-content {
  display: none;
}

/* ── Glow effect on active card ── */
.hwh-hexagon-wrap:not(.ghost):hover {
  filter: drop-shadow(0 0 14px rgba(0, 158, 255, 0.45));
}


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .hwh-slide-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  /* Hero: stack vertically */
  .hwh-slide-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
    padding-block: 3rem 2rem;
  }

  .hwh-slide-media {
    order: -1;
    justify-content: center;
  }

  .hwh-circle-wrap {
    width: clamp(200px, 60vw, 320px);
    height: clamp(200px, 60vw, 320px);
  }

  .hwh-hero-desc {
    max-width: 100%;
    margin-inline: auto;
  }

  .hwh-sphere-lg {
    right: 2%;
    bottom: 8%;
  }

  .hwh-sphere-md {
    right: 18%;
    bottom: -4%;
  }

  .hwh-sphere-sm {
    right: 34%;
    bottom: 2%;
  }

  /* Services: simpler grid on mobile */
  .hwh-hex-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    max-width: 480px;
  }

  .hwh-hex-cell {
    grid-column: span 1;
    padding-block: 0.5rem;
  }

  .hwh-hex-cell.offset-right,
  .hwh-hex-cell.offset-right-full {
    grid-column: span 1;
    grid-column-start: auto;
    grid-column-end: auto;
  }

  .hwh-hexagon {
    width: clamp(130px, 40vw, 180px);
  }
}

@media (max-width: 480px) {
  .hwh-hex-grid {
    grid-template-columns: 1fr;
    max-width: 220px;
  }

  .hwh-hexagon {
    width: clamp(150px, 55vw, 200px);
  }
}