/* ==========================================================================
   Jestech Industrial — standalone theme
   ========================================================================== */

:root{
  --bg: #FFFFFF;
  --bg-alt: #F7F5F0;
  --ink: oklch(15% .01 20);
  --ink-muted: oklch(45% .01 20);
  --line: oklch(88% .006 60);
  --maroon: oklch(38% .13 25);
  --maroon-soft: oklch(45% .15 25);
  --maroon-deep: #17181A;
  --cream: #FFFFFF;
  --radius: 8px;
  --shadow-soft: 0 10px 24px -16px rgba(20,14,10,.35);
  --max-width: 1240px;
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
}

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

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{ margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
.display{ font-family: var(--font-display); font-weight: 700; }
p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
img{ max-width: 100%; display: block; }

.ji-service-icon svg, .ji-overlap-ic svg, .ji-feature-ic svg, .ji-market-ic svg,
.ji-markets-strip-ic svg, .ji-trust-ic svg, .ji-icon-btn svg, .ji-play-btn svg,
.ji-hero-arrow svg, .ji-topbar-ic svg{
  width: 100%; height: 100%; display: block;
}

.wrap{ max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  color: var(--maroon);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 12px;
}
.eyebrow::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 3px;
  background: var(--maroon);
  border-radius: 2px;
}
.ji-section-head .eyebrow::after{ left: 50%; transform: translateX(-50%); }
.ji-cta .eyebrow::after{ background: var(--maroon-soft); }

.ji-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.ji-btn-primary{ background: var(--maroon); color: var(--cream); }
.ji-btn-primary:hover{ background: var(--maroon-soft); }
.ji-btn-outline{ background: transparent; color: var(--cream); border: 1px solid rgba(245,237,232,.4); }
.ji-btn-outline:hover{ border-color: var(--cream); }
.ji-btn-dark-outline{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ji-btn-dark-outline:hover{ border-color: var(--maroon); color: var(--maroon); }

/* ---------- Header ---------- */
.ji-header{ position: relative; background: var(--bg); }
.ji-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 20px;
}
.ji-header svg{ width: 100%; height: 100%; }
.ji-header-trust{ display: flex; gap: 24px; margin-left: auto; margin-right: 24px; }
.ji-trust-chip{ display: flex; align-items: center; gap: 10px; }
.ji-trust-ic{ width: 26px; height: 26px; padding: 5px; color: var(--maroon); flex-shrink: 0; }
.ji-trust-chip strong{ display: block; font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.ji-trust-chip small{ display: block; font-size: 11px; color: var(--ink-muted); }
@media (max-width: 1080px){ .ji-header-trust{ display: none; } }
.ji-logo, .ji-logo-wrap a{ font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); }
.ji-logo-wrap{ display: flex; align-items: center; }
.ji-logo-wrap img, .ji-logo-wrap .custom-logo{ max-height: 52px; width: auto; display: block; }
.ji-logo .dot{ color: var(--maroon); }

/* Floating nav row — detached rounded card, stays pinned on scroll */
.ji-navbar{ position: sticky; top: 20px; z-index: 100; background: transparent; }
.ji-navbar-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--bg);
  border-radius: 999px;
  box-shadow: 0 16px 40px -16px rgba(20,14,10,.4);
  border: 1px solid var(--line);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.ji-nav-toggle{ order: 0; }
.ji-primary-nav{ order: 1; }
.ji-navbar-icons{ order: 2; }
.ji-nav-links{ display: flex; gap: 30px; }
.ji-nav-links li{ position: relative; }
.ji-nav-links a{ color: var(--ink-muted); font-size: 13.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.ji-nav-links a:hover{ color: var(--maroon); }
.ji-nav-links li.current-menu-item > a{ color: var(--maroon); }
.ji-nav-links li.current-menu-item > a::after{
  content: '';
  position: absolute;
  left: 2px; bottom: -10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--maroon);
  box-shadow: 10px 0 0 var(--maroon);
}
.ji-navbar-icons{ display: flex; align-items: center; gap: 10px; }
.ji-social-links{ display: flex; align-items: center; gap: 12px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.ji-social-links a{ width: 15px; height: 15px; color: var(--ink-muted); display: inline-flex; }
.ji-social-links a:hover{ color: var(--maroon); }
.ji-social-links a svg{ width: 100%; height: 100%; }
@media (max-width: 640px){ .ji-social-links{ display: none; } }
.ji-icon-btn{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.ji-icon-btn:hover{ border-color: var(--maroon); color: var(--maroon); }
.ji-nav-toggle{ display: none; flex-direction: column; gap: 5px; width: 30px; background: none; border: none; cursor: pointer; }
.ji-nav-toggle span{ height: 2px; background: var(--ink); display: block; }


/* ---------- Featured Projects slider ---------- */
.ji-featured-projects{ padding: 20px 10px ; }
.ji-fp-slider{ position: relative; border-radius: var(--radius); overflow: hidden; }
.ji-fp-slide{ display: none; position: relative; min-height: 420px; overflow: hidden; }
.ji-fp-slide.is-active{ display: block; }
.ji-fp-slide img{
  width: 100%; height: 420px; object-fit: cover; display: block;
  transition: transform .5s ease;
  transform-origin: center center;
  will-change: transform;
}
.ji-fp-slide:hover img{ transform: scale(1.12); }
.ji-fp-num{
  position: absolute; top: 28px; left: 32px;
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  color: rgba(255,255,255,.85);
  z-index: 3;
}
.ji-fp-card{
  position: absolute;
  top: 60px;
  left: 32px;
  background: rgba(122, 27, 27, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 32px 28px;
  width: 300px;
  z-index: 2;
}
.ji-fp-card h3{ font-size: 20px; margin-bottom: 16px; color: var(--ink); }
.ji-fp-label{ display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.ji-fp-card p{ font-size: 13.5px; color: rgba(20,14,10,.75); margin-bottom: 16px; }
.ji-fp-link{ font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.ji-fp-nav{ position: absolute; bottom: 0; right: 0; z-index: 3; background: var(--maroon-soft); display: flex; align-items: center; gap: 16px; padding: 14px 24px; }
.ji-fp-nav button{ background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.ji-fp-divider{ width: 1px; height: 14px; background: rgba(20,14,10,.3); }
@media (max-width: 640px){ .ji-fp-card{ width: calc(100% - 64px); } }

.ji-featured-projects .wrap {
  max-width: 900px;
}

.ji-fp-slider {
  max-width:800px;
  margin: 0 auto;
}

/* ---------- Hero — Version B: full-bleed photo with dark scrim gradient ---------- */
.ji-hero{
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  padding-bottom: 90px;
  margin-top: -30px;
}
.ji-hero-slides{ position: absolute; inset: 0; }
.ji-hero-slide{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.2s ease;
  /* no mask — photo now covers the full hero section */
}
.ji-hero-slide.is-active{ opacity: 1; animation: jiKenBurns 8s ease-out forwards; }
@keyframes jiKenBurns{ from{ transform: scale(1); } to{ transform: scale(1.08); } }

.ji-hero-scrim{
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20,14,10,.72) 0%,
    rgba(20,14,10,.55) 35%,
    rgba(20,14,10,.25) 65%,
    rgba(20,14,10,.08) 100%
  );
  z-index: 1;
}

.ji-hero-inner{
  position: relative;
  z-index: 2;
  padding: 80px 0 60px;
  margin: 0;
  width: 100%;
  max-width: var(--max-width);
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.ji-hero-copy-wrap{ position: relative; }
.ji-hero-copy{
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
  max-width: 580px;
    margin-left: 40px;
}
.ji-hero-copy.is-active{
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}
@media (max-width: 900px){ .ji-hero-copy{ max-width: 100%; } }

.ji-hero-eyebrow{
  display: block;
  color: rgba(255,255,255,.92);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
}
.ji-hero h1{
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  color: #FFFFFF;
  font-weight: 700;
  margin-bottom: 20px;
}
.ji-hero h1 .ji-hero-rest{ display: inline; font-style: italic; color: #FFFFFF; font-weight: 500; }
.ji-hero h1.ji-hero-h1{ display: flex; flex-direction: column; gap: 2px; }
.ji-hero h1 .ji-hero-line{ display: block; color: #FFFFFF; }
.ji-hero h1 .ji-hero-line-accent{ font-style: italic; font-weight: 500; }
.ji-hero-sub{ color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.6; max-width: 460px; margin-bottom: 32px; }
.ji-hero-actions{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ji-hero-phone{ font-size: 14px; color: #FFFFFF; font-weight: 600; }

.ji-hero-arrows{
  display: none; /* arrows removed — dots still handle slide navigation */
}
.ji-hero-arrow{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 11px;
  cursor: pointer;
  pointer-events: all;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px -12px rgba(20,14,10,.3);
}
.ji-hero-arrow:hover{ background: var(--maroon); color: var(--cream); border-color: var(--maroon); }

.ji-hero-scale{ position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 26px; z-index: 1; }
.ji-hero-scale .ji-tick{ display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,.5); }
.ji-hero-scale .ji-tick .ji-tick-line{ width: 24px; height: 1px; background: currentColor; }
.ji-hero-scale .ji-tick.is-active{ color: #FFFFFF; font-weight: 600; }
@media (max-width: 900px){ .ji-hero-scale{ display: none; } }

.ji-hero-dots{ position: absolute; bottom: 32px; right: 40px; z-index: 3; display: flex; gap: 10px; }
.ji-hero-dot{ width: 30px; height: 3px; background: var(--line); border: none; cursor: pointer; transition: background .3s ease; }
.ji-hero-dot.is-active{ background: var(--maroon); }

.ji-stat-num{ transition: transform .2s ease; }
/* ---------- Working Process ---------- */
.ji-process{ position: relative; padding: 100px 0; }
.ji-process-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.ji-process-step{ position: relative; }
.ji-process-icwrap{
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.ji-process-num{
  position: absolute;
  top: -8px; left: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--cream);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ji-process-ic{ width: 28px; height: 28px; color: var(--maroon); }
.ji-process-arrow{
  position: absolute;
  top: 32px; left: calc(100% - 12px);
  width: 40px; height: 20px;
  color: var(--line);
  z-index: 1;
}
@media (max-width: 980px){ .ji-process-arrow{ display: none; } }
.ji-process-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: left;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ji-process-card:hover{ transform: translateY(-4px); border-color: var(--maroon); box-shadow: var(--shadow-soft); }
.ji-process-card h3{ font-size: 17px; margin-bottom: 6px; }
.ji-process-tag{ display: block; font-size: 12px; font-weight: 700; color: var(--maroon); margin-bottom: 12px; }
.ji-process-card p{ font-size: 13.5px; color: var(--ink-muted); margin: 0; }
@media (max-width: 980px){ .ji-process-track{ grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 640px){ .ji-process-track{ grid-template-columns: 1fr; } }

.ji-process-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

/* Zigzag stagger — even steps pushed down */
.ji-process-step:nth-child(even){
  margin-top: 40px;
}
@media (max-width: 980px){
  .ji-process-step:nth-child(even){ margin-top: 0; } /* disable stagger on smaller grids */
}

.ji-process-icwrap{
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, border-color .3s ease;
}
.ji-process-step:hover .ji-process-icwrap{
  background: var(--maroon);
  border-color: var(--maroon);
}

.ji-process-ic{
  width: 28px; height: 28px;
  color: var(--maroon);
  transition: color .3s ease;
}
.ji-process-step:hover .ji-process-ic{
  color: var(--cream);   /* icon turns white/cream when circle fills maroon */
}

/* ---------- Testimonials ---------- */
.ji-testimonials{ position: relative; padding: 100px 0 0; overflow: hidden; }
.ji-testimonials-watermark{
  position: absolute;
  top: 20px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(50px, 9vw, 130px);
  font-weight: 700;
  color: var(--bg-alt);
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.ji-testimonials-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.ji-testimonial-card{
  position: relative;
  background: var(--bg-alt);
  overflow: hidden;
  min-height: 300px;
  border-right: 1px solid var(--bg);
}
.ji-testimonial-card:last-child{ border-right: none; }
.ji-testimonial-card img{
  width: 100%; height: 300px;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s ease, opacity .4s ease;
}
.ji-testimonial-card:hover img{
  transform: scale(1.05);
  opacity: .18;   /* image fades back so the quote text is readable on hover */
}
.ji-testimonial-quote-ic{
  position: absolute; top: 24px; left: 24px;
  width: 32px; height: 32px;
  color: var(--maroon-soft);
  z-index: 2;
}
.ji-testimonial-meta{
  position: absolute; bottom: 24px; left: 24px;
  z-index: 2;
  transition: opacity .3s ease, transform .3s ease;
}
.ji-testimonial-loc{
  display: block;
  color: var(--maroon);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.ji-testimonial-meta strong{ font-size: 17px; color: var(--ink); }

.ji-testimonial-content{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 24px 28px 70px;
  z-index: 2;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.ji-testimonial-content p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}
.ji-testimonial-card:hover .ji-testimonial-content{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px){
  .ji-testimonials-grid{ grid-template-columns: 1fr; }
  .ji-testimonial-card{ border-right: none; border-bottom: 1px solid var(--bg); }
}

/* ---------- Hero overlap cards ---------- */
.ji-hero-overlap{ position: relative; z-index: 3; margin-top: -70px; padding-bottom: 70px; }
.ji-overlap-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(20,14,10,.35);
}
.ji-overlap-card{ background: var(--bg); padding: 32px 30px; }
.ji-overlap-ic{ width: 34px; height: 34px; color: var(--maroon); margin-bottom: 18px; }
.ji-overlap-card h3{  font-family: var(--font-display); font-size: 17px; margin-bottom: 10px; }
.ji-overlap-card p{ color: var(--ink-muted); font-size: 13.5px; margin: 0 0 14px; }
.ji-overlap-link{ color: var(--maroon); font-size: 13px; font-weight: 700; }
@media (max-width: 900px){ .ji-overlap-grid{ grid-template-columns: 1fr; } .ji-hero-overlap{ margin-top: -40px; } }

/* ---------- Markets We Serve slider ---------- */
.ji-markets-strip{ padding: 90px 0 40px; }
.ji-markets-strip .ji-section-head{ max-width: 640px; margin: 0 auto 48px; text-align: center; }
.ji-markets-strip .ji-section-head h2{ font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.ji-markets-strip .eyebrow{ display: inline-block; margin: 0 auto 20px; }
.ji-markets-strip .ji-section-head p:last-child{ color: var(--ink-muted); font-size: 15px; }
.ji-markets-strip-grid{ display: none; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ji-markets-strip-grid.is-active{ display: grid; }
.ji-markets-strip-card{ border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.ji-markets-strip-card img{ width: 100%; height: 220px; object-fit: cover; object-position: top center;display: block; transition: transform .5s ease; }
.ji-markets-strip-card:hover img{ transform: scale(1.05); }
.ji-markets-strip-body{ display: flex; align-items: flex-start; gap: 14px; padding: 24px 20px; }
.ji-markets-strip-ic{ width: 32px; height: 32px; flex-shrink: 0; color: var(--ink); padding-right: 14px; border-right: 2px solid var(--maroon); }
.ji-markets-strip-body h3{ font-size: 17px; margin-bottom: 8px; }
.ji-markets-strip-body p{ color: var(--ink-muted); font-size: 14px; margin: 0; line-height: 1.5; }
.ji-markets-strip-dots{ display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.ji-markets-strip-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; padding: 0; }
.ji-markets-strip-dot.is-active{ background: var(--maroon); width: 22px; border-radius: 4px; }
@media (max-width: 900px){ .ji-markets-strip-grid.is-active{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .ji-markets-strip-grid.is-active{ grid-template-columns: 1fr; } }

/* ---------- Stats counter bar ---------- */
.ji-stats{ background: var(--maroon); padding: 0; }
.ji-stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
.ji-stat{ padding: 40px 24px; border-left: 1px solid rgba(245,237,232,.18); text-align: center; }
.ji-stat:first-child{ border-left: none; }
.ji-stat-num{ font-family: var(--font-display); font-size: 42px; color: var(--cream); line-height: 1; }
.ji-stat-label{ color: rgba(245,237,232,.7); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }

/* ---------- Icon service grid ---------- */
.ji-services{ padding: 100px 0; }
.ji-section-head{ max-width: 640px; margin: 0 auto 56px; text-align: center; }
.ji-section-head h2{ font-size: clamp(28px, 4vw, 42px); }
.ji-section-head p{ color: var(--ink-muted); font-size: 16px; }
.ji-service-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ji-service-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ji-service-card:hover{ transform: translateY(-4px); border-color: var(--maroon); box-shadow: var(--shadow-soft); }
.ji-service-icon{ width: 46px; height: 46px; padding: 11px; border-radius: 10px; background: rgba(230,164,23,.12); color: var(--maroon); margin-bottom: 20px; }
.ji-service-card h3{ font-size: 18px; margin-bottom: 10px; }
.ji-service-card p{ color: var(--ink-muted); font-size: 14px; margin: 0; }

/* ---------- Project grid ---------- */
.ji-projects{ padding: 100px 0; background: var(--bg-alt); }
.ji-project-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ji-project-card{ position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; }
.ji-project-card img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .5s ease; }
.ji-project-card:hover img{ transform: scale(1.06); }
.ji-project-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,8,8,.85) 0%, rgba(10,8,8,.1) 60%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
}
.ji-project-overlay .eyebrow{ color: var(--maroon-soft); margin-bottom: 8px; padding-bottom: 0; }
.ji-project-overlay .eyebrow::after{ display: none; }
.ji-project-overlay h3{ color: var(--cream); font-size: 20px; margin: 0; }

/* ---------- CTA banner ---------- */
.ji-cta{ position: relative; background: var(--maroon-deep); padding: 30px 0; overflow: hidden; }
.ji-cta-bg{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .25; }
.ji-cta-inner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ji-cta h2{ color: var(--cream); font-size: clamp(26px, 3.5vw, 40px); max-width: 560px; margin: 0; }
.ji-cta .eyebrow{ color: var(--maroon-soft); }

/* ---------- About intro ---------- */
.ji-about{ padding: 100px 0; }
.ji-about-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; margin-bottom: 64px; }
.ji-about-media{ position: relative; min-height: 380px; border-radius: var(--radius); overflow: hidden; }
.ji-about-media img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ji-play-btn{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; padding: 20px; border-radius: 50%;
  background: var(--maroon); color: var(--cream); border: 4px solid rgba(245,237,232,.35);
  cursor: pointer; z-index: 2; transition: transform .3s ease;
}
.ji-play-btn:hover{ transform: translate(-50%,-50%) scale(1.08); }
.ji-about-copy p{ color: var(--ink-muted); font-size: 15px; }
.ji-about-copy h2{ font-size: clamp(28px, 3.5vw, 38px); }
.ji-feature-strip{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ji-feature-card{
  padding: 22px 18px; border-radius: var(--radius); border: 1px solid var(--line);
  text-align: center; font-size: 13px; font-weight: 600;
  transition: box-shadow .3s ease, transform .3s ease;
}
.ji-feature-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.ji-feature-card .ji-feature-ic{ width: 26px; height: 26px; margin: 0 auto 12px; color: var(--maroon); }
.ji-feature-card.is-highlight{ background: var(--maroon); color: var(--cream); border-color: var(--maroon); }
.ji-feature-card.is-highlight .ji-feature-ic{ color: var(--cream); }

/* ---------- Why Choosing Us ---------- */
.ji-why{ padding: 100px 0; }
.ji-why-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.ji-why-media{ position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; }
.ji-why-media img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ji-why-card{
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 22px;
  width: 230px;
  box-shadow: var(--shadow-soft);
}
.ji-why-card-title{ font-weight: 700; font-size: 13px; margin: 0 0 16px; color: var(--ink); }
.ji-why-bar-row{ margin-bottom: 12px; }
.ji-why-bar-row:last-child{ margin-bottom: 0; }
.ji-why-bar-label{ display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; color: var(--ink-muted); }
.ji-why-bar-track{ height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ji-why-bar-fill{ height: 100%; background: var(--maroon); border-radius: 999px; width: 0; transition: width 1.2s ease; }
.ji-why-copy h2{ font-size: clamp(26px, 3.5vw, 36px); }
.ji-why-copy p{ color: var(--ink-muted); font-size: 15px; margin-bottom: 24px; }
.ji-why-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 28px; }
.ji-why-list li{ display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.ji-why-list li::before{
  content: ''; width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; background: var(--maroon);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ji-why-video-row{ display: flex; align-items: center; gap: 14px; }
.ji-play-btn-sm{ width: 44px; height: 44px; padding: 13px; border-width: 2px; position: static; transform: none; flex-shrink: 0; }
.ji-why-video-row strong{ display: block; font-size: 14px; }
.ji-why-video-row span{ font-size: 12.5px; color: var(--ink-muted); }

/* ---------- Footer v2 — flatten to plain equal columns ---------- */
.ji-footer-top-v2{
  grid-template-columns: repeat(4, 1fr);
}

.ji-footer-services{
 color: FFFFFF;
  border-radius: 0;
  padding: 0;
  text-align: left;
}
.ji-footer-services h4{ color: var(--cream); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.ji-footer-services ul{
  align-items: flex-start;
}
.ji-footer-services a{
  font-weight: 400;
  font-size: 14px;
}

.ji-btn-footer-cta{
  background: var(--maroon-soft);
  color: var(--cream);
}
.ji-btn-footer-cta:hover{
  background: var(--maroon);
}
.ji-footer-social a{
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  background: rgba(245,237,232,.1);
  color: var(--cream);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 9px;
  box-sizing: border-box;
  transition: background .25s ease;
  overflow: hidden;
}
.ji-footer-social a svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 980px){
  .ji-footer-top-v2{ grid-template-columns: 1fr 1fr; }
  .ji-footer-services{ border-radius: var(--radius); padding: 30px 24px; grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .ji-footer-top-v2{ grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .ji-service-grid{ grid-template-columns: repeat(2, 1fr); }
  .ji-stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .ji-stat:nth-child(2n+1){ border-left: none; }
  .ji-footer-top{ grid-template-columns: 1fr 1fr; }
  .ji-about-grid, .ji-why-grid{ grid-template-columns: 1fr; }
  .ji-feature-strip{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .ji-nav-toggle{ display: flex; }
  .ji-primary-nav{ display: none; }
  .ji-service-grid, .ji-project-grid{ grid-template-columns: 1fr; }
  .ji-stats-grid{ grid-template-columns: 1fr; }
  .ji-stat{ border-left: none; border-top: 1px solid rgba(245,237,232,.18); }
  .ji-stat:first-child{ border-top: none; }
  .ji-footer-top{ grid-template-columns: 1fr; padding: 50px 24px; }
  .ji-cta-inner{ flex-direction: column; align-items: flex-start; }
  .ji-feature-strip{ grid-template-columns: 1fr 1fr; }
  .ji-why-card{ position: static; width: 100%; margin-top: 16px; }
  .ji-why-list{ grid-template-columns: 1fr; }
}
/* ---------- Footer (redesigned) ---------- */
.ji-footer{ background: #3B1116; color: rgba(245,237,232,.75); }
.ji-footer-top{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 70px 24px 50px; }
.ji-footer-brand h3{ color: var(--cream); font-size: 22px; line-height: 1.35; margin-bottom: 24px; }
.ji-footer-contact{ font-size: 14px; margin-bottom: 16px; }
.ji-footer-contact strong{ display: block; color: var(--cream); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ji-footer-contact a{ color: rgba(245,237,232,.8); }
.ji-footer-follow{ font-size: 13px; margin-top: 20px; }
.ji-footer-follow span{ display: block; color: var(--cream); font-weight: 600; margin-bottom: 6px; }
.ji-footer-col h4{ color: var(--cream); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.ji-footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
.ji-footer-col a{ font-size: 14px; }
.ji-footer-col a:hover{ color: var(--cream); }
.ji-footer-col li strong{ display: block; color: var(--cream); font-size: 14px; }
.ji-footer-col li span{ font-size: 13px; }
.ji-footer-bottom{ border-top: 1px solid rgba(245,237,232,.12); }
.ji-footer-bottom-inner{ display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 12px; flex-wrap: wrap; gap: 10px; }
.ji-footer-legal a{ color: rgba(245,237,232,.75); }
.ji-footer-legal a:hover{ color: var(--cream); }

/* ---------- Blog / Industry Updates ---------- */
.ji-blog{ padding: 100px 0; background: var(--bg-alt); }
.ji-blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ji-blog-card{ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.ji-blog-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.ji-blog-thumb{ height: 180px; background: linear-gradient(135deg, #d8d4cc, #b8b2a6); display: block; overflow: hidden; }
.ji-blog-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ji-blog-body{ padding: 22px 20px; }
.ji-blog-meta{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); margin-bottom: 14px; }
.ji-blog-avatar{ width: 20px; height: 20px; border-radius: 50%; background: var(--line); display: inline-block; overflow: hidden; }
.ji-blog-avatar img{ width: 100%; height: 100%; display: block; }
.ji-blog-body h3{ font-size: 16px; margin-bottom: 10px; line-height: 1.4; }
.ji-blog-body h3 a{ color: var(--ink); text-decoration: none; }
.ji-blog-body h3 a:hover{ color: var(--maroon); }
.ji-blog-body p{ font-size: 13px; color: var(--ink-muted); margin-bottom: 14px; }
.ji-blog-link{ font-size: 12px; font-weight: 700; color: var(--maroon); }
@media (max-width: 900px){ .ji-footer-top{ grid-template-columns: 1fr 1fr; } .ji-blog-grid{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .ji-footer-top{ grid-template-columns: 1fr; } .ji-footer-bottom-inner{ flex-direction: column; align-items: flex-start; } }

/* ---------- Page Banner (used on About Us, Services, Contact Us, etc.) ---------- */
.ji-page-banner{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #3a2e26, #5c4a3a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: #fff;
  margin-top: -30px;
}
.ji-page-banner-inner{ position: relative; z-index: 2; }
.ji-page-banner .eyebrow{ color: rgba(255,255,255,.92); text-align: center; }
.ji-page-banner .eyebrow::after{ left: 50%; transform: translateX(-50%); }
.ji-page-banner h1{ color: #fff; font-size: clamp(30px, 4vw, 40px); }
.ji-breadcrumb{ font-size: 13px; color: rgba(255,255,255,.75); }
.ji-breadcrumb a{ color: #fff; }

/* ---------- Mission / Vision / Values ---------- */
.ji-values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ji-value-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
}
.ji-value-ic{ width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: rgba(92,35,32,.1); color: var(--maroon); margin-bottom: 18px; }
.ji-value-card h3{ font-size: 18px; }
.ji-value-card p{ color: var(--ink-muted); font-size: 13.5px; margin: 0; }
@media (max-width: 900px){ .ji-values-grid{ grid-template-columns: 1fr; } }

/* ---------- Team grid ---------- */
.ji-team{ padding: 100px 0; }
.ji-about-extra{ padding: 110px 0 100px; }
.ji-team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ji-team-card{ text-align: center; }
.ji-team-photo{ height: 260px; border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; background: var(--bg-alt); }
.ji-team-photo img{ width: 100%; height: 100%; object-fit: cover; }
.ji-team-card h3{ font-size: 16px; margin-bottom: 2px; }
.ji-team-role{ display: block; color: var(--maroon); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 980px){ .ji-team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .ji-team-grid{ grid-template-columns: 1fr; } }

/* ---------- Contact Us page ---------- */
.ji-contact-info{ padding: 70px 0 0; }
.ji-info-strip{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ji-info-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}
.ji-info-ic{
  width: 44px; height: 44px; padding: 10px;
  border-radius: 50%;
  background: rgba(92,35,32,.1);
  color: var(--maroon);
  margin: 0 auto 16px;
}
.ji-info-card h3{ font-size: 15px; margin-bottom: 6px; }
.ji-info-card p{ font-size: 13.5px; color: var(--ink-muted); margin: 0; }
@media (max-width: 900px){ .ji-info-strip{ grid-template-columns: 1fr; } }

.ji-contact-form-section{ padding: 100px 0; }
.ji-contact-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: stretch; }
.ji-contact-form{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
}
.ji-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ji-form-field{ display: flex; flex-direction: column; gap: 6px; }
.ji-form-field-full{ grid-column: 1 / -1; }
.ji-form-field label{ font-size: 12px; font-weight: 700; color: var(--ink); }
.ji-form-field input,
.ji-form-field select,
.ji-form-field textarea{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.ji-form-field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B645C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 36px;
}
.ji-form-field input:focus,
.ji-form-field select:focus,
.ji-form-field textarea:focus{
  outline: none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(92,35,32,.1);
}
.ji-form-field textarea{ resize: vertical; min-height: 120px; }
.ji-contact-form .ji-btn{ width: auto; }
.ji-contact-map-card{
  background: var(--maroon);
  border-radius: var(--radius);
  overflow: hidden;
  color: rgba(255,255,255,.85);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.ji-map-card-photo{
  width: 100%;
  height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}
.ji-map-card-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ji-map-card-body{
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ji-map-card-ic{
  width: 48px; height: 48px; padding: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  margin-bottom: 20px;
}
.ji-contact-map-card h3{ color: #fff; font-size: 19px; margin-top: 0; margin-bottom: 6px; }
.ji-contact-map-card p{ font-size: 14px; margin-bottom: 0; line-height: 1.6; }
.ji-map-card-divider{ height: 1px; background: rgba(255,255,255,.15); margin: 24px 0; }
.ji-map-card-hours{ margin-bottom: 28px !important; }
.ji-map-card-hours strong{ display: block; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ji-contact-map-card .ji-btn{ margin-top: auto; align-self: flex-start; color: #fff; border-color: rgba(255,255,255,.4); }
.ji-contact-map-card .ji-btn:hover{ border-color: #fff; }
.ji-form-success{
  background: rgba(92,35,32,.08);
  border: 1px solid var(--maroon);
  color: var(--maroon);
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}
@media (max-width: 900px){
  .ji-contact-grid{ grid-template-columns: 1fr; }
  .ji-form-row{ grid-template-columns: 1fr; }
}

/* ---------- Locations ---------- */
.ji-locations{ padding: 100px 0; background: var(--bg-alt); }
.ji-locations-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ji-location-card{
  background: var(--bg);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--line);
}
.ji-location-tag{ display: block; color: var(--maroon); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.ji-location-card h3{ font-size: 18px; margin-bottom: 6px; }
.ji-location-card p{ font-size: 13.5px; color: var(--ink-muted); margin-bottom: 6px; }
@media (max-width: 900px){ .ji-locations-grid{ grid-template-columns: 1fr; } }

/* ---------- Coming Soon page ---------- */
.ji-coming-soon{ padding: 120px 0; text-align: center; }
.ji-coming-soon-inner{ max-width: 560px; margin: 0 auto; }
.ji-coming-soon .eyebrow{ justify-content: center; text-align: center; }
.ji-coming-soon .eyebrow::after{ left: 50%; transform: translateX(-50%); }
.ji-coming-soon h2{ font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.ji-coming-soon p{ color: var(--ink-muted); font-size: 15px; margin-bottom: 32px; }
.ji-coming-soon-actions{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Quote Modal ---------- */
.ji-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,14,10,.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.ji-modal-overlay.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
.ji-modal{
  background: var(--bg);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 36px;
  position: relative;
  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.ji-modal-overlay.is-open .ji-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.ji-modal-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.ji-modal-close:hover{ border-color: var(--maroon); color: var(--maroon); }
.ji-modal .eyebrow{ margin-bottom: 10px; }
.ji-modal h3{ font-size: 24px; margin-bottom: 8px; }
.ji-modal-sub{ color: var(--ink-muted); font-size: 14px; margin-bottom: 24px; }
.ji-modal-form .ji-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ji-modal-form .ji-form-field{ display: flex; flex-direction: column; gap: 6px; }
.ji-modal-form .ji-form-field-full{ grid-column: 1 / -1; }
.ji-modal-form label{ font-size: 12px; font-weight: 700; color: var(--ink); }
.ji-modal-form input,
.ji-modal-form select,
.ji-modal-form textarea{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 13px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.ji-modal-form input:focus,
.ji-modal-form select:focus,
.ji-modal-form textarea:focus{
  outline: none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(92,35,32,.1);
}
.ji-modal-form textarea{ resize: vertical; min-height: 90px; }
.ji-modal-form .ji-btn{ width: 100%; justify-content: center; margin-top: 6px; }
.ji-modal-success{
  background: rgba(92,35,32,.08);
  border: 1px solid var(--maroon);
  color: var(--maroon);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 18px;
}
body.ji-modal-open{ overflow: hidden; }
@media (max-width: 560px){
  .ji-modal-form .ji-form-row{ grid-template-columns: 1fr; }
  .ji-modal{ padding: 32px 24px; }
}

/* ---------- Services page — detailed service cards ---------- */
.ji-services-detail{ padding: 100px 0 60px; }
.ji-service-detail-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ji-service-detail-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.ji-service-detail-ic{
  width: 48px; height: 48px; padding: 11px;
  border-radius: 10px;
  background: rgba(92,35,32,.1);
  color: var(--maroon);
  margin-bottom: 18px;
}
.ji-service-detail-card h3{ font-size: 19px; }
.ji-service-detail-card p{ color: var(--ink-muted); font-size: 14px; margin-bottom: 16px; }
.ji-service-detail-list{ list-style: none; padding: 0; margin: 0 0 6px; }
.ji-service-detail-list li{ display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.ji-service-detail-list li::before{
  content: ''; width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; background: var(--maroon);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ji-service-detail-link{ color: var(--maroon); font-size: 13px; font-weight: 700; margin-top: 14px; display: inline-block; }
@media (max-width: 900px){ .ji-service-detail-grid{ grid-template-columns: 1fr; } }

/* ---------- Services page: tabbed interface ---------- */
.ji-service-tabs-wrap{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 48px;
}
.ji-service-lift-shaft{
  position: relative;
  flex: 0 0 32px;
  width: 32px;
}
.ji-service-lift-track{
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 4px;
  margin-left: -2px;
  background: var(--line);
  border-radius: 999px;
}
.ji-service-lift-cab{
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: auto;
  transform: translateX(-50%);
  transition: top 0.45s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
@media (max-width: 860px){
  .ji-service-lift-shaft{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .ji-service-lift-cab{ transition: none; }
}
.ji-service-tab-list{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 300px;
}
.ji-service-tab-indicator{
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 14px;
  background: var(--maroon);
  z-index: 0;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), height 0.35s cubic-bezier(.4,0,.2,1);
}
.ji-service-tab{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--line);
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.ji-service-tab-ic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.ji-service-tab-ic svg{ width: 20px; height: 20px; }
.ji-service-tab:hover{ background: var(--maroon-soft); color: var(--maroon); }
.ji-service-tab.is-active{ background: transparent; color: var(--cream); }
.ji-service-tab.is-active:hover{ background: transparent; color: var(--cream); }

.ji-service-tab-panels{ flex: 1 1 440px; min-width: 0; position: relative; }
.ji-service-tab-panel{
  display: none;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 44px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ji-service-tab-panel.is-active{ display: block; }
.ji-service-tab-panel.is-active.is-shown{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .ji-service-tab-indicator,
  .ji-service-tab,
  .ji-service-tab-ic,
  .ji-service-tab-panel{ transition: none; }
}
.ji-service-tab-panel-ic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--maroon);
  margin-bottom: 18px;
}
.ji-service-tab-panel-ic svg{ width: 38px; height: 38px; }
.ji-service-tab-panel h3{ font-size: 26px; margin: 0 0 14px; }
.ji-service-tab-panel p{ color: var(--ink-muted); margin: 0 0 20px; }
.ji-service-tab-panel .ji-service-detail-list{ margin-bottom: 10px; }
.ji-service-tab-panel .ji-service-detail-list li{ font-size: 14px; }
.ji-service-tab-panel .ji-service-detail-link{ font-size: 14px; margin-top: 18px; }

@media (max-width: 860px){
  .ji-service-tabs-wrap{ flex-direction: column; }
  .ji-service-tab-list{ flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; gap: 8px; }
  .ji-service-tab-indicator{ display: none; }
  .ji-service-tab{ width: auto; padding: 10px 16px; }
  .ji-service-tab.is-active{ background: var(--maroon); }
  .ji-service-tab-panel{ padding: 28px; }
}

/* ---------- Process — flat row variant (Services page, no zigzag, no icon svg) ---------- */
.ji-process-track-flat .ji-process-step{ margin-top: 0 !important; }
.ji-process-track-flat .ji-process-icwrap{ background: var(--maroon); border-color: var(--maroon); }
.ji-process-track-flat .ji-process-num{ background: var(--cream); color: var(--maroon); }
.ji-process-track-flat .ji-process-ic{ color: var(--cream) !important; }

.ji-process-track-flat .ji-process-icwrap{
  position: relative;
}
.ji-process-track-flat .ji-process-icwrap::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--maroon);
  opacity: 0;
  animation: ji-pulse-ring 2.6s ease-out infinite;
  pointer-events: none;
}
.ji-process-track-flat .ji-process-step:nth-child(2) .ji-process-icwrap::after{ animation-delay: .4s; }
.ji-process-track-flat .ji-process-step:nth-child(3) .ji-process-icwrap::after{ animation-delay: .8s; }
.ji-process-track-flat .ji-process-step:nth-child(4) .ji-process-icwrap::after{ animation-delay: 1.2s; }

@keyframes ji-pulse-ring{
  0%{ transform: scale(1); opacity: .55; }
  100%{ transform: scale(1.6); opacity: 0; }
}
/* ---------- Feature band (maroon strip reused on Services page) ---------- */
.ji-feature-band{ background: var(--maroon); padding: 0; }
.ji-feature-band .ji-feature-strip{ padding: 44px 24px; }
.ji-feature-band .ji-feature-card{ background: transparent; border: none; color: var(--cream); box-shadow: none !important; transform: none !important; }
.ji-feature-band .ji-feature-ic{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 14px !important;
  color: var(--cream) !important;
}
.ji-feature-band .ji-feature-ic svg{  width: 100% !important;
  height: 100% !important; }

/* ---------- Industries We Serve chips ---------- */
.ji-industries{ padding: 90px 0 100px; }
.ji-industries-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ji-industry-chip{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 12px;
  text-align: center;
  transition: border-color .3s ease, transform .3s ease;
}

.ji-process-num-flat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #fff;
}
.ji-process-num-flat svg{
  width: 100%;
  height: 100%;
}

/* scroll reveal */
.ji-process-step-flat{
  opacity: 0;
  transform: translateY(24px) scale(.92);
  transition: opacity .6s ease, transform .6s ease;
}
.ji-process-step-flat.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ji-process-step-flat:nth-child(1).is-visible{ transition-delay: .05s; }
.ji-process-step-flat:nth-child(2).is-visible{ transition-delay: .15s; }
.ji-process-step-flat:nth-child(3).is-visible{ transition-delay: .25s; }
.ji-process-step-flat:nth-child(4).is-visible{ transition-delay: .35s; }

.ji-process-step-flat.is-visible .ji-process-num-flat{
  animation: ji-pop .5s ease .1s backwards;
}
@keyframes ji-pop{
  0%{ transform: scale(0); }
  70%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}

/* hover */
.ji-process-step-flat .ji-process-num-flat{
  transition: transform .3s ease;
}
.ji-process-step-flat:hover .ji-process-num-flat{
  transform: scale(1.12) rotate(-6deg);
}
.ji-industry-chip:hover{ border-color: var(--maroon); transform: translateY(-3px); }
.ji-industry-ic{ width: 28px; height: 28px; margin: 0 auto 10px; color: var(--maroon); }
.ji-industry-chip span{ font-size: 12.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 980px){ .ji-industries-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .ji-industries-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Projects page ---------- */
.ji-projects-page{ padding: 100px 0; }
.ji-project-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.ji-filter-chip{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ji-filter-chip:hover{ border-color: var(--maroon); color: var(--maroon); }
.ji-filter-chip.is-active{ background: var(--maroon); border-color: var(--maroon); color: var(--cream); }

.ji-project-grid-3{ grid-template-columns: repeat(3, 1fr); }
.ji-project-placeholder{
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #d8d4cc, #b8b2a6);
}
.ji-project-card{ transition: opacity .3s ease, transform .3s ease; }
.ji-project-card.is-hidden{ display: none; }

/* ---------- Project Lightbox ---------- */
.ji-project-lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,14,10,.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.ji-project-lightbox-overlay.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
.ji-project-lightbox{
  background: var(--bg);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.ji-project-lightbox-overlay.is-open .ji-project-lightbox{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.ji-project-lightbox-media{ width: 100%; height: 320px; overflow: hidden; }
.ji-project-lightbox-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ji-project-lightbox-body{ padding: 28px 32px 32px; }
.ji-project-lightbox-body h3{ font-size: 22px; margin-bottom: 8px; }
.ji-project-lightbox-body p:not(.eyebrow){ color: var(--ink-muted); font-size: 14.5px; line-height: 1.7; margin: 0; }
.ji-project-card{ cursor: pointer; }
@media (max-width: 640px){
  .ji-project-lightbox-media{ height: 220px; }
  .ji-project-lightbox-body{ padding: 22px 20px 26px; }
}

@media (max-width: 980px){ .ji-project-grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .ji-project-grid-3{ grid-template-columns: 1fr; } }
/* ---------- Process (homepage): click-driven slider ---------- */
/* Scoped to :not(.ji-process-track-flat) so the Services page pulse-ring variant is untouched */
.ji-process-slider{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ji-process-viewport{
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.ji-process-track:not(.ji-process-track-flat){
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  transition: transform .5s ease;
  will-change: transform;
}
.ji-process-track:not(.ji-process-track-flat) .ji-process-step{
  flex: 0 0 auto;
  width: 260px;
  margin-top: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}
.ji-process-track:not(.ji-process-track-flat) .ji-process-card{
  width: 260px;
}
.ji-process-track:not(.ji-process-track-flat) .ji-process-arrow{
  display: none; /* the little connecting arrow icons between cards — not the slider nav */
}

.ji-process-nav{
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ji-process-nav svg{ width: 20px; height: 20px; }
.ji-process-nav:hover:not(:disabled){ border-color: var(--maroon); color: var(--maroon); }
.ji-process-nav:disabled{ opacity: .35; cursor: default; }

@media (max-width: 640px){
  .ji-process-nav{ width: 40px; height: 40px; }
  .ji-process-track:not(.ji-process-track-flat) .ji-process-step,
  .ji-process-track:not(.ji-process-track-flat) .ji-process-card{ width: 220px; }
}

/* ---------- Below the 3 overlap cards: long beam spanning the card row's width,
   with a pulley wheel in the middle that spins as you scroll or move the mouse.
   The lift + counterweight themselves live in the full-page rail below, so this
   is just the beam/wheel graphic — kept short since it no longer needs travel room. ---------- */
.ji-pulleyfx{
  margin-top: -70px; /* cancels .ji-hero-overlap's own padding-bottom so the beam sits flush against the card row */
  padding: 0 0 20px;
}
/* Used on pages other than the homepage (e.g. About Us), where the section above
   is a plain .ji-page-banner rather than .ji-hero-overlap — no negative margin
   to cancel here, so the beam just sits directly under the banner. */
.ji-pulleyfx--page{
  margin-top: 0;
}
.ji-pulley-scrollfx{
  position: relative;
  height: 110px;
  opacity: .9;
  pointer-events: none;
}
.ji-pulley-bracket{
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: translateX(-50%);
}
/* wheel sits at the bracket's axle point; JS rotates it as you scroll */
.ji-pulley-wheel{
  position: absolute;
  left: 50%;
  top: 82px;
  width: 60px;
  height: auto;
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform;
}

@media (max-width: 980px){
  .ji-pulleyfx{ display: none; }
}

/* ---------- Global fixed rail: a separate, independent indicator that travels the
   FULL page from top to the footer as you scroll — position:fixed, so it never
   affects document flow or pushes any section down. Distinct from the compact
   beam/wheel graphic above, which stays put under the 3 cards. ---------- */
.ji-pulley-rail{
  position: fixed;
  top: 110px;
  bottom: 110px;
  width: 2px;
  background: var(--line);
  opacity: .4;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 40;
}
.ji-pulley-rail-left{ left: 60px; }
.ji-pulley-rail-right{ right: 60px; }

.ji-pulley-rail-icon{
  position: fixed;
  top: 110px;
  width: 38px;
  opacity: .85;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 41;
  will-change: top;
}
.ji-pulley-rail-icon img{ width: 100%; height: auto; display: block; }
.ji-pulley-rail-cab{ left: 60px; transform: translateX(-50%); }
.ji-pulley-rail-weight{ right: 60px; width: 28px; transform: translateX(50%); }

@media (max-width: 980px){
  .ji-pulley-rail,
  .ji-pulley-rail-icon{ display: none; }
}

/* ---------- Single Blog Post ----------
   Layout borrowed from the "service detail" Figma design: a wide content
   column, a sidebar (recent posts + a CTA card) next to it, and a tabbed
   strip of related/popular/recent posts underneath. */
.ji-blog-banner{ min-height: 360px; background-size: cover; background-position: center; }
.ji-blog-banner .ji-breadcrumb a{ color: inherit; text-decoration: none; }
.ji-blog-banner .ji-breadcrumb a:hover{ text-decoration: underline; }

.ji-blog-single{ padding: 64px 0; }
.ji-blog-single-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px){
  .ji-blog-single-grid{ grid-template-columns: 1fr; }
}

.ji-blog-featured-img{
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
}
.ji-blog-featured-img img{ width: 100%; height: auto; display: block; }

.ji-blog-content{ color: var(--ink); font-size: 16px; line-height: 1.8; }
.ji-blog-content p{ margin-bottom: 1.4em; }
.ji-blog-content h2,
.ji-blog-content h3{ margin-top: 1.4em; }
.ji-blog-content img{ max-width: 100%; height: auto; border-radius: var(--radius); }

.ji-blog-tags{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.ji-blog-tag{
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}
.ji-blog-tag:hover{ color: var(--maroon); }

/* Sidebar */
.ji-sidebar-card{
  background: var(--bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.ji-sidebar-card-title{
  margin: 0;
  padding: 20px 24px;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.ji-sidebar-list{ list-style: none; margin: 0; padding: 0; }
.ji-sidebar-list-item{ border-bottom: 1px solid var(--line); }
.ji-sidebar-list-item:last-child{ border-bottom: none; }
.ji-sidebar-list-item a{
  display: block;
  padding: 16px 24px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.ji-sidebar-list-item a:hover{ color: var(--maroon); }
.ji-sidebar-list-empty{ padding: 16px 24px; color: var(--ink-muted); font-size: 13px; }

.ji-sidebar-cta{
  background: var(--maroon);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.ji-sidebar-cta h3{ color: var(--cream); font-size: 18px; margin-bottom: 16px; }
.ji-sidebar-cta-btn{ width: 100%; justify-content: center; background: var(--maroon-deep); }
.ji-sidebar-cta-btn:hover{ background: #000; }
.ji-sidebar-cta-contact{ margin-top: 20px; font-size: 13px; line-height: 1.7; }
.ji-sidebar-cta-contact strong{ display: block; margin-bottom: 4px; }

/* More From the Blog */
.ji-blog-more{ padding: 0 0 72px; }
.ji-blog-more-title{ font-size: 26px; margin-bottom: 24px; }

.ji-blog-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}
.ji-blog-tab{
  background: none;
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.ji-blog-tab:hover{ color: var(--maroon); }
.ji-blog-tab.is-active{ background: var(--maroon); color: var(--cream); }
.ji-blog-tab.is-active:hover{ color: var(--cream); }

.ji-blog-tab-panel{
  display: none;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ji-blog-tab-panel.is-active{ display: block; }
.ji-blog-tab-panel.is-active.is-shown{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .ji-blog-tab,
  .ji-blog-tab-panel{ transition: none; }
}

.ji-blog-post-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px){
  .ji-blog-post-grid{ grid-template-columns: 1fr; }
}
.ji-blog-post-card{
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-soft);
}
.ji-blog-post-card-img{ aspect-ratio: 16/9; overflow: hidden; }
.ji-blog-post-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ji-blog-post-card-img-placeholder{ background: var(--line); }
.ji-blog-post-card-body{ padding: 18px 20px; }
.ji-blog-post-card-body .eyebrow{ margin-bottom: 8px; font-size: 11px; }
.ji-blog-post-card-body h3{ font-size: 16px; margin: 0; }
.ji-blog-tab-empty{ color: var(--ink-muted); font-size: 14px; }

/* ---------- Blog listing page ---------- */
.ji-blog-listing{ padding: 64px 0 72px; }

.ji-blog-cat-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.ji-blog-cat-filters .ji-filter-chip{ text-decoration: none; }

.ji-blog-listing-grid{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .ji-blog-listing-grid{ grid-template-columns: 1fr; }
}
.ji-blog-post-card-excerpt{
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.ji-blog-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.ji-blog-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.ji-blog-pagination .page-numbers:hover{ border-color: var(--maroon); color: var(--maroon); }
.ji-blog-pagination .page-numbers.current{ background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.ji-blog-pagination .page-numbers.dots{ border: none; }

/* Generic scroll-reveal utility — fade + rise into view, reusable on any page */
.ji-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ji-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.ji-reveal-delay-1.is-visible{ transition-delay: 0.1s; }
.ji-reveal-delay-2.is-visible{ transition-delay: 0.2s; }
.ji-reveal-delay-3.is-visible{ transition-delay: 0.3s; }
.ji-reveal-delay-4.is-visible{ transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce){
  .ji-reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Legal pages & site map ---------- */
.ji-legal{ padding: 80px 0 96px; }
.ji-legal-inner{ max-width: 820px; }
.ji-legal-updated{ color: var(--ink-muted); font-size: 13px; margin-bottom: 28px; }
.ji-legal h2{ font-size: 22px; margin: 36px 0 12px; }
.ji-legal p{ margin: 0 0 14px; line-height: 1.75; }
.ji-legal ul{ margin: 0 0 14px; padding-left: 20px; }
.ji-legal li{ margin-bottom: 8px; line-height: 1.7; }
.ji-legal a{ color: var(--maroon); font-weight: 600; }
.ji-legal a:hover{ text-decoration: underline; }

.ji-sitemap-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.ji-sitemap-col h2{ font-size: 20px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--maroon); }
.ji-sitemap-col ul{ list-style: none; margin: 0; padding: 0; }
.ji-sitemap-col li{ margin-bottom: 10px; }
.ji-sitemap-col a{ color: var(--ink); text-decoration: none; }
.ji-sitemap-col a:hover{ color: var(--maroon); }
.ji-sitemap-col-wide{ grid-column: 1 / -1; }
.ji-sitemap-col-wide ul{ columns: 2; column-gap: 48px; }
@media (max-width: 900px){
  .ji-sitemap-grid{ grid-template-columns: 1fr; }
  .ji-sitemap-col-wide ul{ columns: 1; }
}

/* ---------- Blog search ---------- */
.ji-navbar .ji-search-panel{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(600px, 92vw);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 50px -18px rgba(20,14,10,.45);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.ji-navbar .ji-search-panel.is-open{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.ji-search-form{ display: flex; gap: 10px; align-items: center; }
.ji-search-input{
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.ji-search-input:focus{ outline: none; border-color: var(--maroon); }
.ji-search-submit{ height: 46px; padding: 0 26px; border: none; cursor: pointer; }
.ji-search-form-page{ max-width: 640px; margin: 0 auto 36px; }
.ji-search-count{ color: var(--ink-muted); font-size: 14px; margin: 0 0 24px; text-align: center; }
.ji-search-empty{ text-align: center; padding: 40px 0 20px; }
.ji-search-empty h2{ font-size: 24px; margin-bottom: 10px; }
.ji-search-empty p{ color: var(--ink-muted); margin-bottom: 22px; }
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce){
  .ji-navbar .ji-search-panel{ transition: none; }
}


/* ---------- Contact Us hero (dark maroon, left-aligned) ---------- */
.ji-contact-hero{
  position: relative;
  margin-top: -30px;
  padding: 90px 0 80px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(38,6,4,.96) 0%, rgba(92,16,10,.94) 55%, rgba(110,20,12,.96) 100%),
    var(--hero-img, none) center/cover no-repeat,
    #4a0e0a;
  overflow: hidden;
}
.ji-contact-hero-inner{ position: relative; z-index: 2; max-width: 1180px; }
.ji-hero-crumb{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 26px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
}
.ji-hero-crumb a{ color: #fff; text-decoration: none; }
.ji-hero-crumb a:hover{ text-decoration: underline; }
.ji-hero-crumb .sep{ color: rgba(255,255,255,.45); }
.ji-hero-crumb .current{ color: #e7c9a4; }
.ji-contact-hero h1{
  max-width: 560px; margin: 0 0 18px;
  color: #fff; text-align: left;
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; font-weight: 700;
}
.ji-contact-hero p{
  max-width: 440px; margin: 0;
  color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.7; text-align: left;
}
@media (max-width: 640px){ .ji-contact-hero{ padding: 64px 0 56px; } }