/* =========================================
   hero.css - Premium Parallax Wipe Slider
   ========================================= */

.jh-hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  background-color: var(--color-gray-900);
  overflow: hidden;
}

/* --- Slide Architecture --- */
.jh-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  visibility: hidden;
  /* The Wipe Setup: Starts clipped to the bottom */
  clip-path: inset(100% 0 0 0); 
  transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 1.4s;
}

.jh-slide.is-active {
  z-index: 2;
  visibility: visible;
  /* Expands to fill the screen */
  clip-path: inset(0 0 0 0);
}

.jh-slide.is-prev {
  z-index: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0); /* Stays full screen underneath while next sweeps over it */
}

/* --- Parallax Image Layer --- */
.jh-slide-parallax {
  width: 100%;
  height: 100%;
  position: relative;
  /* Starts pulled up to create opposite motion against the clip-path */
  transform: translateY(-30%);
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.jh-slide.is-active .jh-slide-parallax {
  transform: translateY(0); /* Settles to center */
}

/* Subtle continuous zoom for the background image */
.jh-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 7s linear;
}

.jh-slide.is-active .jh-slide-bg {
  transform: scale(1.08);
}

/* Premium Gradient Overlay to ensure text pops */
.jh-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(18,18,18,0.9) 0%, rgba(18,18,18,0.4) 50%, rgba(18,18,18,0.1) 100%);
  z-index: 2;
}

/* --- Content & Typography --- */
.jh-slide-content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 0 var(--space-xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
  right: 0;
}

/* Text Masking for the "Rise Up" effect */
.jh-text-mask {
  overflow: hidden;
  position: relative;
}

.jh-caption {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: var(--space-s);
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.jh-title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--h1-size); /* Uses your fluid clamp from root.css */
  line-height: 1.1;
  margin: 0;
  text-transform: none;
  transform: translateY(100%) rotate(3deg); /* Slight editorial tilt during reveal */
  transform-origin: bottom left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-title i {
  font-weight: 400;
  font-style: italic;
  color: var(--color-white);
}

.mt-4 { margin-top: var(--space-m); }

/* The Hero Button Reveal */
.jh-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 12px 12px 12px 28px;
  border-radius: var(--border-radius-pill);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: var(--text-xs);
  transform: translateY(100%);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-hero-btn .btn-arrow {
  width: 36px;
  height: 36px;
  background-color: var(--color-primary); /* Red accent */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, background-color 0.4s ease;
}

.jh-hero-btn svg {
  width: 16px;
  height: 16px;
}

.jh-hero-btn:hover {
  border-color: var(--color-primary);
}

.jh-hero-btn:hover .btn-arrow {
  transform: translateX(4px);
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Staggered Active State Execution */
.jh-slide.is-active .jh-caption {
  transform: translateY(0);
  transition-delay: 0.6s; /* Waits for slide wipe to begin */
}

.jh-slide.is-active .jh-text-mask:nth-child(2) .jh-title {
  transform: translateY(0) rotate(0);
  transition-delay: 0.7s;
}

.jh-slide.is-active .jh-text-mask:nth-child(3) .jh-title {
  transform: translateY(0) rotate(0);
  transition-delay: 0.8s;
}

.jh-slide.is-active .jh-hero-btn {
  transform: translateY(0);
  transition-delay: 0.95s;
}

/* --- Vertical Accent Text --- */
.jh-vertical-accent {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  z-index: 10;
}

/* --- Innovative Slider Controls --- */
.jh-slider-controls {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  padding: 0 var(--space-xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* Left Counter */
.jh-slide-counter {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--h6-size);
}

.counter-line {
  width: 60px;
  height: 2px;
  background-color: var(--color-primary); /* Jawed Habib Red */
}

/* Right SVG Auto-Progress Button */
.jh-progress-btn {
  all: unset;
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-text {
  position: absolute;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  z-index: 2;
  transition: transform 0.3s ease;
}

.jh-progress-btn:hover .progress-text {
  transform: scale(1.1);
  color: var(--color-primary);
}

.progress-ring {
  transform: rotate(-90deg); /* Starts fill from the top */
}

.ring-bg {
  fill: rgba(0,0,0,0.3);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
}

.ring-fill {
  fill: transparent;
  stroke: var(--color-primary); /* Fills with red */
  stroke-width: 3;
  stroke-dasharray: 239; /* 2 * pi * r (38) */
  stroke-dashoffset: 239; /* Starts empty */
  transition: stroke-dashoffset 0.1s linear; /* Smooth fill */
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .jh-slide-content { padding: 0 var(--space-m); }
  .jh-slider-controls { padding: 0 var(--space-m); bottom: 30px; }
  .desktop-only { display: none; }
  .counter-line { width: 40px; }
  .jh-progress-btn { width: 60px; height: 60px; }
  .progress-ring { width: 60px; height: 60px; }
  .ring-bg, .ring-fill { cx: 30; cy: 30; r: 28; }
  .ring-fill { stroke-dasharray: 176; stroke-dashoffset: 176; }
}

/* =========================================
   services-lookbook.css - Minimalist & Image-Heavy
   ========================================= */

.jh-services-lookbook {
  background-color: var(--color-gray-100); 
  padding: var(--space-3xl) 0;
}

.jh-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Section Header --- */
.text-center {
  text-align: center;
}

.jh-section-header {
  margin-bottom: var(--space-2xl);
}

.jh-section-subtitle {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-xs);
}

.jh-section-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  margin: 0;
}

.jh-section-title i {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

/* --- Editorial Grid Layout --- */
.jh-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl) var(--space-m);
}

/* --- The Lookbook Card --- */
.jh-lookbook-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  /* Lift the entire item slightly on hover */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-lookbook-card:hover {
  transform: translateY(-8px);
}

/* --- The Visual (Image Dominance) --- */
.jh-lookbook-visual {
  width: 100%;
  aspect-ratio: 4 / 5; /* Tall portrait ratio forces the image to be the focal point */
  border-radius: var(--border-radius-md);
  overflow: hidden;
  position: relative;
  background-color: var(--color-gray-200); /* Loading placeholder color */
  margin-bottom: var(--space-s);
  /* A soft, luxurious shadow only on the image */
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.jh-lookbook-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image zoom effect on hover */
.jh-lookbook-card:hover .jh-lookbook-img {
  transform: scale(1.06);
}

/* Subtle Badge Overlay */
.jh-lookbook-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  border-radius: var(--border-radius-pill);
}

/* --- The Meta Information (Compact & Clean) --- */
.jh-lookbook-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--space-3xs);
}

.jh-meta-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jh-lookbook-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--h5-size);
  margin: 0;
  transition: color var(--transition-fast);
}

.jh-lookbook-price {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Hover color shift on title */
.jh-lookbook-card:hover .jh-lookbook-title {
  color: var(--color-primary);
}

/* Minimalist Arrow Interaction */
.jh-lookbook-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-lookbook-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Arrow floods with red and pushes right on hover */
.jh-lookbook-card:hover .jh-lookbook-arrow {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.jh-lookbook-card:hover .jh-lookbook-arrow svg {
  transform: translateX(2px) scale(1.1);
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
  .jh-lookbook-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .jh-lookbook-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl); /* More space between stacked items */
  }
  
  .jh-services-lookbook {
    padding: var(--space-2xl) 0;
  }
  
  .jh-lookbook-visual {
    /* Slightly shorter on mobile so it doesn't consume the entire screen */
    aspect-ratio: 4 / 4.5;
  }
}

/* =========================================
   bespoke-experience.css - Fully Updated & Fixed
   ========================================= */

.jh-bespoke-section {
  background-color: var(--color-white);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =========================================
   TOP: The 3 True Square Cards Layout
   ========================================= */
.jh-triptych-frame {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr; /* Center area proportioned */
  width: 100%;
  /* max-width: var(--container-max-width); */
  margin: 0 auto;
  padding-top: var(--space-3xl);
  position: relative;
  z-index: 2;
  /* gap: var(--space-m); */
}

/* --- True Square Cards (Aspect Ratio 1:1) --- */
.jh-triptych-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  background-color: var(--color-gray-900);
  aspect-ratio: 1 / 1; /* Forces strict square layout */
  border-radius: var(--border-radius-sm);
}

.jh-triptych-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-triptych-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.65);
  transition: background-color 0.6s ease;
  z-index: 1;
}

.jh-triptych-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}

.jh-triptych-title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  margin: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-triptych-link {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-triptych-link svg {
  width: 14px;
  height: 14px;
}

.jh-triptych-card:hover .jh-triptych-bg { transform: scale(1.08); }
.jh-triptych-card:hover .jh-triptych-overlay { background-color: rgba(10, 10, 10, 0.3); }
.jh-triptych-card:hover .jh-triptych-title { transform: translateY(-10px); }
.jh-triptych-card:hover .jh-triptych-link { opacity: 1; transform: translateY(0); }


/* --- The Center Pillar (True Square + 30% Top Header Image) --- */
.jh-flowing-pillar {
  background-color: var(--color-white); 
  aspect-ratio: 1 / 1; /* Locked to strict square matching the side cards */
  /* border-radius: var(--border-radius-sm); */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* box-shadow: 0 10px 40px rgba(0,0,0,0.06); */
  z-index: 3; 
  /* border: 1px solid rgba(0,0,0,0.04); */
}

/* 30% Height Top Banner Image */
.jh-pillar-banner {
  width: 100%;
  height: 30%;
  background-size: cover;
  background-position: center;
}

/* 70% Height Content Body */
.jh-pillar-body {
  height: 70%;
  padding: var(--space-m) var(--space-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.jh-pillar-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

.jh-pillar-title i {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

.jh-pillar-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-xs);
}
.jh-pillar-divider .dot {
  width: 4px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 50%;
  opacity: 0.5;
}
.jh-pillar-divider .dot.center { width: 6px; height: 6px; opacity: 1; }

.jh-pillar-text {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  max-width: 380px;
  margin-bottom: var(--space-s);
}

.jh-signature {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-black);
  margin-bottom: var(--space-s);
}

.jh-btn-outline-dark {
  border: 1px solid var(--color-gray-800);
  padding: 6px 18px;
  border-radius: var(--border-radius-pill);
  color: var(--color-black);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all 0.4s ease;
}
.jh-btn-outline-dark:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}


/* =========================================
   BOTTOM: Seamless Merged Experience Section
   ========================================= */
.jh-experience-container {
  position: relative;
  background-color: var(--color-white); 
  padding: 0 var(--container-padding) var(--space-3xl) var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

/* Giant Background Watermark */
.jh-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 14vw;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.02);
  white-space: nowrap;
  pointer-events: none;
}

/* Grid Layout */
.jh-experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
  max-width: var(--container-max-width);
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Individual Icon Card Block */
.jh-exp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* background-color: var(--color-white); */
  padding: var(--space-xl) var(--space-m);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(0,0,0,0.05);
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.03); */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.jh-exp-block:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Square Housing with Rotational Hover Physics */
.jh-exp-icon {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(0,0,0,0.04); 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-m);
  background-color: var(--color-gray-100);
  border-radius: var(--border-radius-sm);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-exp-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-black);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-exp-block:hover .jh-exp-icon {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  transform: translateY(-8px) rotate(45deg);
  box-shadow: 0 15px 30px rgba(196, 18, 26, 0.15);
}

.jh-exp-block:hover .jh-exp-icon svg {
  color: var(--color-white);
  transform: scale(1.1) rotate(-45deg);
}

.jh-exp-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--h6-size);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  transition: color var(--transition-fast);
}

.jh-exp-block:hover .jh-exp-title {
  color: var(--color-primary);
}

.jh-exp-desc {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 220px;
}

/* =========================================
   RESPONSIVE LAYOUTS
   ========================================= */
@media (max-width: 991px) {
  .jh-triptych-frame {
    grid-template-columns: 1fr;
  }
  
  .jh-flowing-pillar {
    order: -1; 
  }
  
  .jh-triptych-card, .jh-flowing-pillar {
    aspect-ratio: auto;
    height: 450px;
  }

  .jh-experience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }
}

@media (max-width: 767px) {
  .jh-experience-grid {
    grid-template-columns: 1fr;
  }
  .jh-watermark {
    font-size: 20vw;
  }
}

/* =========================================
   counter.css - Premium Parallax (High Visibility)
   ========================================= */

.jh-counter-section {
  /* Reduced overlay to 45% dark to let the image's true colors pop */
  background-image: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.45)), url('https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=1974&auto=format&fit=crop');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  
  padding: var(--space-2xl) 0; 
  position: relative;
  overflow: hidden;
}

.jh-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.jh-counter-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-m) 0;
}

/* Elegant fading red dividers between the blocks */
.jh-counter-block:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(to bottom, rgba(196, 18, 26, 0), rgba(196, 18, 26, 0.6), rgba(196, 18, 26, 0));
}

.jh-counter-number {
  color: var(--color-white); /* Pure white text for maximum contrast against the image */
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  line-height: 1;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* Soft shadow guarantees text is readable even if the background image has bright spots */
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.jh-count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums; 
}

.jh-suffix {
  color: var(--color-primary); /* Jawed Habib Red */
  font-size: var(--h4-size);
  font-weight: 500;
  margin-left: 2px;
  text-shadow: 0 4px 15px rgba(196, 18, 26, 0.3); /* Slight red glow */
}

.jh-counter-label {
  color: rgba(255, 255, 255, 0.85); /* Slightly muted white */
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* =========================================
   RESPONSIVE LOGIC
   ========================================= */

@media (max-width: 991px) {
  .jh-counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l) 0;
  }
  
  .jh-counter-block:nth-child(2)::after {
    display: none;
  }
  
  /* iOS Safari doesn't support fixed background well, switch to scroll */
  @supports (-webkit-touch-callout: none) {
    .jh-counter-section {
      background-attachment: scroll;
    }
  }
}

@media (max-width: 767px) {
  .jh-counter-section {
    padding: var(--space-3xl) 0; 
  }
  
  .jh-counter-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl) 0;
  }
  
  .jh-counter-block::after {
    display: none;
  }
}

/* =========================================
   what-we-do.css - Light Theme Checkerboard
   ========================================= */

.jh-what-we-do {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Light Header Area --- */
.jh-wwd-header {
  background-color: var(--color-gray-100); /* Premium light background[cite: 17] */
  padding: var(--space-3xl) var(--space-m);
  text-align: center;
}

.jh-wwd-header .jh-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jh-wwd-title {
  color: var(--color-black); /* Dark text for light theme[cite: 17] */
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  margin-bottom: var(--space-s);
}

.jh-wwd-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-l);
}

.jh-wwd-divider .dot {
  width: 4px;
  height: 4px;
  background-color: var(--color-primary); /* Keeps the signature red accent[cite: 17] */
  border-radius: 50%;
  opacity: 0.5;
}

.jh-wwd-divider .dot.center {
  width: 6px;
  height: 6px;
  opacity: 1;
}

.jh-wwd-desc {
  color: var(--text-muted); /* Softer gray text[cite: 17] */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin: 0;
}

/* --- The Checkerboard Grid --- */
.jh-wwd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

/* Image Block */
.jh-wwd-img-block {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-gray-200); /* Lighter placeholder */
}

.jh-wwd-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-wwd-img-block:hover .jh-wwd-img {
  transform: scale(1.08); 
}

/* Text Block */
.jh-wwd-text-block {
  background-color: var(--color-white);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl);
  aspect-ratio: 1 / 1;
  transition: background-color 0.4s ease;
}

.jh-wwd-service {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--h4-size);
  line-height: 1.3;
  margin-bottom: var(--space-s);
  max-width: 80%;
  transition: color 0.3s ease;
}

.jh-wwd-details {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-l);
}

.jh-wwd-link {
  color: var(--color-accent); 
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.jh-wwd-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

/* Text Block Hover Physics */
.jh-wwd-text-block:hover .jh-wwd-service {
  color: var(--color-primary);
}
.jh-wwd-text-block:hover .jh-wwd-link {
  color: var(--color-primary);
}
.jh-wwd-text-block:hover .jh-wwd-link svg {
  transform: translateX(4px);
}

/* --- Directional Pointers (CSS Triangles) --- */
/* Left pointing arrow (matches block background) */
.jh-wwd-text-block.arrow-left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px; 
  transform: translateY(-50%);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid var(--color-white); /* Points left, colored white */
  z-index: 2;
}

/* Right pointing arrow */
.jh-wwd-text-block.arrow-right::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px; 
  transform: translateY(-50%);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid var(--color-white); /* Points right, colored white */
  z-index: 2;
}

/* =========================================
   RESPONSIVE LOGIC
   ========================================= */

@media (max-width: 1199px) {
  .jh-wwd-text-block { padding: var(--space-l); }
}

@media (max-width: 991px) {
  /* Shifts seamlessly into a 2-column grid */
  .jh-wwd-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  /* Stack vertically for mobile */
  .jh-wwd-grid {
    grid-template-columns: 1fr;
  }
  
  /* Disable the aspect ratio so text can flow freely */
  .jh-wwd-img-block {
    aspect-ratio: auto;
    height: 350px;
  }
  
  .jh-wwd-text-block {
    aspect-ratio: auto;
    padding: var(--space-xl) var(--space-m);
  }
  
  /* Hide the side-pointing arrows on mobile as the layout is stacked */
  .jh-wwd-text-block::before {
    display: none; 
  }
}

/* =========================================
   manifesto.css - Pure Editorial Minimalism
   ========================================= */

.jh-manifesto-section {
  background-color: var(--color-white); /* Pure white for maximum contrast and cleanliness */
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.jh-manifesto-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Left: The Visual --- */
.jh-manifesto-visual {
  width: 45%;
  position: relative;
}

/* A very classy architectural touch: a soft gray offset block behind the image */
.jh-manifesto-visual::before {
  content: '';
  position: absolute;
  top: 40px;
  left: -40px;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-100);
  z-index: 1;
  transition: transform 0.6s ease;
}

.jh-manifesto-img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 3 / 4; /* Tall editorial portrait ratio */
  object-fit: cover;
  /* Very subtle, slow zoom on hover */
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover Physics: Image zooms slightly, background block shifts away slightly */
.jh-manifesto-visual:hover .jh-manifesto-img {
  transform: scale(1.03);
}
.jh-manifesto-visual:hover::before {
  transform: translate(-10px, 10px);
}

/* --- Right: The Typography --- */
.jh-manifesto-content {
  width: 47%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Delicate Red Accent Line */
.jh-accent-line {
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
  margin-bottom: var(--space-m);
}

.jh-manifesto-subtitle {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: var(--space-xs);
}

.jh-manifesto-title {
  color: var(--color-black);
  font-family: var(--font-heading);
  /* Uses a massive fluid font size for a bold statement */
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1.1;
  margin: 0 0 var(--space-l) 0;
}

.jh-manifesto-title i {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

.jh-manifesto-text {
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  max-width: 90%;
  margin-bottom: var(--space-2xl);
}

.jh-signature-large {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  font-style: italic;
  color: var(--color-black);
  opacity: 0.85;
}

/* =========================================
   RESPONSIVE LOGIC
   ========================================= */

@media (max-width: 991px) {
  .jh-manifesto-layout {
    flex-direction: column;
    gap: var(--space-2xl);
  }
  
  .jh-manifesto-visual, 
  .jh-manifesto-content {
    width: 100%;
  }
  
  /* Shrink the offset block slightly on mobile so it doesn't break the screen width */
  .jh-manifesto-visual::before {
    top: 20px;
    left: -20px;
  }
  
  .jh-manifesto-text {
    max-width: 100%;
  }
}

/* =========================================
   services.css - Light Theme Scroll-Spy
   ========================================= */

.jh-services-showcase {
  display: flex;
  position: relative;
  width: 100%;
  background-color: var(--color-white); /* Pure white background */
  color: var(--color-black);
  /* The padding-bottom allows the final block to scroll into view */
  padding-bottom: 20vh;
}

/* =========================================
   LEFT SIDE: Sticky Visuals
   ========================================= */
.jh-showcase-visuals {
  position: sticky;
  top: 0; 
  left: 0;
  width: 50%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.jh-visual-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.jh-visual-layer.is-active {
  z-index: 2;
  clip-path: inset(0 0 0 0);
}

.jh-visual-layer.is-prev {
  z-index: 1;
  clip-path: inset(0 0 0 0); 
}

.jh-visual-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.15);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.jh-visual-layer.is-active .jh-visual-bg {
  transform: scale(1);
}

/* Smooth white gradient fade pushed to the very edge */
.jh-visual-overlay {
  position: absolute;
  inset: 0;
  /* Keeps the image 100% clear until the 70% mark, then fades to white at the very edge */
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.8) 95%, rgba(255,255,255,1) 100%);
  z-index: 2;
}

/* =========================================
   RIGHT SIDE: Scrolling Content
   ========================================= */
.jh-showcase-content {
  width: 50%;
  padding: 15vh 8% 10vh 5%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Header Text */
.jh-showcase-header {
  margin-bottom: 15vh;
}

.jh-section-subtitle {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
}

.jh-section-title {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  color: var(--color-black);
  line-height: 1.2;
  margin: 0;
}

.jh-section-title i {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

/* Service Blocks */
.jh-service-block {
  min-height: 70vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.2;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: var(--space-3xl);
}

.jh-service-block.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.jh-service-num {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 700;
  color: transparent;
  /* Light theme idle stroke */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
  margin-bottom: var(--space-xs);
  transition: color 0.4s ease, -webkit-text-stroke 0.4s ease;
}

.jh-service-block.is-in-view .jh-service-num {
  /* Light theme active stroke (Red outline, faint red fill) */
  color: rgba(196, 18, 26, 0.05);
  -webkit-text-stroke: 1px var(--color-primary);
}

.jh-service-name {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  margin-bottom: var(--space-s);
}

.jh-service-desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: var(--space-m);
  line-height: 1.7;
}

/* Features List */
.jh-service-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-l) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.jh-service-features li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--color-gray-800);
  font-family: var(--font-body);
}

.jh-service-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

/* Interactive Explore Link */
.jh-service-explore {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  width: fit-content;
  cursor: pointer;
}

.explore-text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-black);
  transition: color var(--transition-fast);
}

.explore-line {
  width: 40px;
  height: 1px;
  background-color: var(--color-black);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-fast);
}

.jh-service-explore:hover .explore-text {
  color: var(--color-primary);
}

.jh-service-explore:hover .explore-line {
  width: 80px;
  background-color: var(--color-primary);
}


/* =========================================
   RESPONSIVE: Tablet & Mobile
   ========================================= */
@media (max-width: 991px) {
  .jh-services-showcase {
    flex-direction: column;
    padding-bottom: 5vh;
  }

  .jh-showcase-visuals {
    position: sticky;
    top: 40px; 
    width: 100%;
    height: 45vh;
    z-index: 1;
  }

  /* Fade image into white from the bottom up on mobile */
  .jh-visual-overlay {
    /* Keeps the top 65% of the image perfectly clear on mobile */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 65%, rgba(255,255,255,1) 100%);
  }

  .jh-showcase-content {
    width: 80%;
    padding: 0 var(--space-m) var(--space-xl) var(--space-m);
    margin-top: -5vh; 
    z-index: 2;
  }

  .jh-showcase-header {
    margin-top: 5vh;
    margin-bottom: 10vh;
  }

  .jh-service-block {
    min-height: auto;
    margin-bottom: 15vh;
    padding-top: 5vh;
  }
}