/* ==========================================================================
   Janak Global — design tokens
   Single source of truth. Everything downstream reads these variables, so a
   rebrand is a change to this block and nothing else.
   ========================================================================== */

:root {
  /* --- Primary: engineering navy. Trust, infrastructure, load-bearing. --- */
  --jg-primary-50:  #EEF4FB;
  --jg-primary-100: #D6E4F5;
  --jg-primary-200: #AEC8E8;
  --jg-primary-300: #7FA5D6;
  --jg-primary-400: #4E7DBE;
  --jg-primary-500: #2C5B9E;
  --jg-primary-600: #1B4380;
  --jg-primary-700: #143467;
  --jg-primary-800: #0F294F;
  --jg-primary-900: #0A1C38;
  --jg-primary-950: #061224;
  --jg-primary: var(--jg-primary-600);

  /* --- Accent 1: solar / ecological green. Energy and vitality. --- */
  --jg-green-50:  #ECFDF5;
  --jg-green-100: #D1FAE5;
  --jg-green-200: #A7F3D0;
  --jg-green-300: #6EE7B7;
  --jg-green-400: #34D399;
  --jg-green-500: #10B981;
  --jg-green-600: #059669;
  --jg-green-700: #047857;
  --jg-green-800: #065F46;
  --jg-green-900: #064E3B;
  --jg-green: var(--jg-green-500);

  /* --- Accent 2: amber. Reserved for calls to action. --- */
  --jg-amber-50:  #FFFBEB;
  --jg-amber-100: #FEF3C7;
  --jg-amber-200: #FDE68A;
  --jg-amber-300: #FCD34D;
  --jg-amber-400: #FBBF24;
  --jg-amber-500: #F59E0B;
  --jg-amber-600: #D97706;
  --jg-amber-700: #B45309;
  --jg-amber: var(--jg-amber-500);

  /* --- Neutrals --- */
  --jg-white:     #FFFFFF;
  --jg-slate-50:  #F8FAFC;
  --jg-slate-100: #F1F5F9;
  --jg-slate-200: #E2E8F0;
  --jg-slate-300: #CBD5E1;
  --jg-slate-400: #94A3B8;
  --jg-slate-500: #64748B;
  --jg-slate-600: #475569;
  --jg-slate-700: #334155;
  --jg-slate-800: #1E293B;
  --jg-slate-900: #0F172A;

  /* --- Semantic roles --- */
  --jg-bg:            var(--jg-white);
  --jg-bg-alt:        var(--jg-slate-50);
  --jg-bg-invert:     var(--jg-primary-900);
  --jg-text:          var(--jg-slate-800);
  --jg-text-muted:    var(--jg-slate-500);
  --jg-text-invert:   var(--jg-slate-50);
  --jg-border:        var(--jg-slate-200);
  --jg-border-strong: var(--jg-slate-300);
  --jg-link:          var(--jg-primary-600);
  --jg-link-hover:    var(--jg-primary-700);
  --jg-success:       var(--jg-green-600);
  --jg-warning:       var(--jg-amber-600);
  --jg-danger:        #DC2626;
  --jg-focus:         var(--jg-amber-400);

  /* --- Per-pillar identity. Each pillar owns one hue. --- */
  --jg-pillar-energy:    var(--jg-green-500);
  --jg-pillar-energy-dk: var(--jg-green-700);
  --jg-pillar-logistics:    var(--jg-primary-500);
  --jg-pillar-logistics-dk: var(--jg-primary-700);
  --jg-pillar-property:    var(--jg-amber-500);
  --jg-pillar-property-dk: var(--jg-amber-700);
  --jg-pillar-health:    #0EA5A4;
  --jg-pillar-health-dk: #0F766E;

  /* --- Typography --- */
  --jg-font-heading: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --jg-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --jg-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Fluid type scale. clamp() means no breakpoint jumps between 380px–1440px. */
  --jg-text-xs:   0.75rem;    /* 12 */
  --jg-text-sm:   0.875rem;   /* 14 */
  --jg-text-base: 1rem;       /* 16 */
  --jg-text-lg:   1.125rem;   /* 18 */
  --jg-text-xl:   clamp(1.25rem, 0.5vw + 1.13rem, 1.375rem);
  --jg-text-2xl:  clamp(1.5rem, 0.9vw + 1.3rem, 1.75rem);
  --jg-text-3xl:  clamp(1.75rem, 1.4vw + 1.45rem, 2.25rem);
  --jg-text-4xl:  clamp(2.125rem, 2.2vw + 1.6rem, 3rem);
  --jg-text-5xl:  clamp(2.5rem, 3.4vw + 1.7rem, 4rem);
  --jg-text-6xl:  clamp(2.875rem, 4.6vw + 1.8rem, 4.75rem);

  --jg-leading-tight:   1.12;
  --jg-leading-snug:    1.28;
  --jg-leading-normal:  1.6;
  --jg-leading-relaxed: 1.75;

  --jg-tracking-tight:  -0.022em;
  --jg-tracking-snug:   -0.012em;
  --jg-tracking-normal: 0;
  --jg-tracking-wide:   0.08em;

  --jg-weight-normal:   400;
  --jg-weight-medium:   500;
  --jg-weight-semibold: 600;
  --jg-weight-bold:     700;
  --jg-weight-black:    800;

  /* --- Spacing. 4px base, doubling at the top for section rhythm. --- */
  --jg-space-1:  0.25rem;
  --jg-space-2:  0.5rem;
  --jg-space-3:  0.75rem;
  --jg-space-4:  1rem;
  --jg-space-5:  1.25rem;
  --jg-space-6:  1.5rem;
  --jg-space-8:  2rem;
  --jg-space-10: 2.5rem;
  --jg-space-12: 3rem;
  --jg-space-16: 4rem;
  --jg-space-20: 5rem;
  --jg-space-24: 6rem;
  --jg-space-32: 8rem;
  --jg-section-y: clamp(3.5rem, 6vw, 7rem);

  /* --- Layout --- */
  --jg-container:      1240px;
  --jg-container-wide: 1440px;
  --jg-container-nar:  760px;
  --jg-gutter:         clamp(1.25rem, 4vw, 2.5rem);
  --jg-header-h:       84px;
  --jg-header-h-sticky: 68px;

  /* --- Radii --- */
  --jg-radius-sm:   6px;
  --jg-radius:      10px;
  --jg-radius-md:   14px;
  --jg-radius-lg:   20px;
  --jg-radius-xl:   28px;
  --jg-radius-full: 999px;

  /* --- Elevation. Navy-tinted so shadows sit in the palette. --- */
  --jg-shadow-xs: 0 1px 2px rgba(10, 28, 56, 0.06);
  --jg-shadow-sm: 0 2px 6px rgba(10, 28, 56, 0.07);
  --jg-shadow:    0 6px 20px rgba(10, 28, 56, 0.08);
  --jg-shadow-md: 0 12px 32px rgba(10, 28, 56, 0.10);
  --jg-shadow-lg: 0 24px 56px rgba(10, 28, 56, 0.14);
  --jg-shadow-cta: 0 10px 28px rgba(245, 158, 11, 0.32);

  /* --- Motion --- */
  --jg-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --jg-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --jg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --jg-dur-fast:   140ms;
  --jg-dur:        240ms;
  --jg-dur-slow:   420ms;

  --jg-z-header:  900;
  --jg-z-drawer:  1000;
  --jg-z-overlay: 1100;
}

/* Anyone who has asked their OS to stop animations gets a still page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Fonts — served from the theme, not a third party. No external request, no
   IP handed to Google, no flash of fallback text on a slow Abuja connection.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--jg-header-h-sticky) + 1.5rem);
}

body {
  margin: 0;
  background: var(--jg-bg);
  color: var(--jg-text);
  font-family: var(--jg-font-body);
  font-size: var(--jg-text-base);
  line-height: var(--jg-leading-normal);
  font-weight: var(--jg-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.jg-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jg-font-heading);
  color: var(--jg-primary-900);
  font-weight: var(--jg-weight-bold);
  line-height: var(--jg-leading-tight);
  letter-spacing: var(--jg-tracking-tight);
  margin: 0 0 var(--jg-space-4);
  text-wrap: balance;
}

h1 { font-size: var(--jg-text-5xl); }
h2 { font-size: var(--jg-text-4xl); }
h3 { font-size: var(--jg-text-2xl); }
h4 { font-size: var(--jg-text-xl); }
h5 { font-size: var(--jg-text-lg); }
h6 { font-size: var(--jg-text-base); letter-spacing: var(--jg-tracking-wide); text-transform: uppercase; }

p { margin: 0 0 var(--jg-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--jg-link);
  text-decoration-color: color-mix(in srgb, var(--jg-link) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--jg-dur-fast) var(--jg-ease), text-decoration-color var(--jg-dur-fast) var(--jg-ease);
}
a:hover { color: var(--jg-link-hover); text-decoration-color: currentColor; }

img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 var(--jg-space-6); }

ul, ol { margin: 0 0 var(--jg-space-4); padding-left: 1.35rem; }
li { margin-bottom: var(--jg-space-2); }

blockquote {
  margin: var(--jg-space-8) 0;
  padding: var(--jg-space-6) var(--jg-space-8);
  border-left: 4px solid var(--jg-green);
  background: var(--jg-slate-50);
  border-radius: 0 var(--jg-radius-md) var(--jg-radius-md) 0;
  font-size: var(--jg-text-lg);
  color: var(--jg-slate-700);
}
blockquote cite { display: block; margin-top: var(--jg-space-3); font-size: var(--jg-text-sm); font-style: normal; color: var(--jg-text-muted); }

code, kbd, pre { font-family: var(--jg-font-mono); font-size: 0.92em; }
code { background: var(--jg-slate-100); padding: 0.15em 0.4em; border-radius: var(--jg-radius-sm); }
pre { background: var(--jg-primary-950); color: var(--jg-slate-100); padding: var(--jg-space-5); border-radius: var(--jg-radius-md); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }

hr { border: 0; border-top: 1px solid var(--jg-border); margin: var(--jg-space-12) 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: var(--jg-space-6); font-size: var(--jg-text-sm); }
th, td { padding: var(--jg-space-3) var(--jg-space-4); border-bottom: 1px solid var(--jg-border); text-align: left; }
th { font-family: var(--jg-font-heading); font-weight: var(--jg-weight-semibold); color: var(--jg-primary-800); background: var(--jg-slate-50); }

:focus-visible {
  outline: 3px solid var(--jg-focus);
  outline-offset: 2px;
  border-radius: var(--jg-radius-sm);
}

::selection { background: var(--jg-green-200); color: var(--jg-primary-900); }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; margin: 0; padding: var(--jg-space-3) var(--jg-space-5);
  background: var(--jg-white); color: var(--jg-primary-700); z-index: var(--jg-z-overlay);
  top: var(--jg-space-4); left: var(--jg-space-4); border-radius: var(--jg-radius);
  box-shadow: var(--jg-shadow-md); font-weight: var(--jg-weight-semibold);
}

.jg-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--jg-z-overlay);
  background: var(--jg-primary-700); color: #fff; padding: var(--jg-space-3) var(--jg-space-5);
  border-radius: 0 0 var(--jg-radius) 0; font-weight: var(--jg-weight-semibold);
}
.jg-skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.jg-container { width: 100%; max-width: var(--jg-container); margin-inline: auto; padding-inline: var(--jg-gutter); }
.jg-container--wide { max-width: var(--jg-container-wide); }
.jg-container--narrow { max-width: var(--jg-container-nar); }

.jg-section { padding-block: var(--jg-section-y); position: relative; }
.jg-section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.jg-section--alt { background: var(--jg-bg-alt); }
.jg-section--invert { background: var(--jg-bg-invert); color: var(--jg-text-invert); }
.jg-section--invert h1, .jg-section--invert h2, .jg-section--invert h3, .jg-section--invert h4 { color: #fff; }
.jg-section--invert p { color: color-mix(in srgb, #fff 78%, transparent); }

.jg-grid { display: grid; gap: var(--jg-space-6); }
.jg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.jg-stack > * + * { margin-top: var(--jg-space-4); }

/* Section heading cluster */
.jg-heading { max-width: 62ch; margin-bottom: var(--jg-space-12); }
.jg-heading--center { margin-inline: auto; text-align: center; }
.jg-heading p { color: var(--jg-text-muted); font-size: var(--jg-text-lg); margin-top: var(--jg-space-4); }

.jg-eyebrow {
  display: inline-flex; align-items: center; gap: var(--jg-space-2);
  font-family: var(--jg-font-heading);
  font-size: var(--jg-text-xs); font-weight: var(--jg-weight-bold);
  letter-spacing: var(--jg-tracking-wide); text-transform: uppercase;
  color: var(--jg-green-700); margin-bottom: var(--jg-space-4);
}
.jg-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--jg-green); border-radius: 2px; }
.jg-heading--center .jg-eyebrow::before { display: none; }
.jg-section--invert .jg-eyebrow { color: var(--jg-green-300); }

/* ==========================================================================
   Buttons
   Amber is the money button. It appears once per screen region, never twice.
   ========================================================================== */

.jg-btn {
  --btn-bg: var(--jg-primary-600);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jg-space-2);
  padding: 0.875rem 1.75rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--jg-radius-full);
  font-family: var(--jg-font-heading);
  font-size: var(--jg-text-base); font-weight: var(--jg-weight-semibold);
  letter-spacing: var(--jg-tracking-snug);
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform var(--jg-dur) var(--jg-ease-out),
              box-shadow var(--jg-dur) var(--jg-ease-out),
              background-color var(--jg-dur-fast) var(--jg-ease),
              color var(--jg-dur-fast) var(--jg-ease);
  position: relative; overflow: hidden; isolation: isolate;
  -webkit-appearance: none; appearance: none;
}

/* The sheen: a light band crosses the button once on hover. */
.jg-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--jg-dur-slow) var(--jg-ease-out);
}
.jg-btn:hover::after { transform: translateX(120%); }

.jg-btn:hover { transform: translateY(-2px); box-shadow: var(--jg-shadow-md); color: var(--btn-fg); }
.jg-btn:active { transform: translateY(0); box-shadow: var(--jg-shadow-sm); }

.jg-btn--primary   { --btn-bg: var(--jg-primary-600); }
.jg-btn--primary:hover { --btn-bg: var(--jg-primary-700); }

.jg-btn--cta { --btn-bg: var(--jg-amber-500); --btn-fg: var(--jg-primary-950); box-shadow: var(--jg-shadow-cta); font-weight: var(--jg-weight-bold); }
.jg-btn--cta:hover { --btn-bg: var(--jg-amber-400); box-shadow: 0 16px 36px rgba(245, 158, 11, 0.42); }

.jg-btn--green { --btn-bg: var(--jg-green-500); --btn-fg: var(--jg-primary-950); }
.jg-btn--green:hover { --btn-bg: var(--jg-green-400); }

.jg-btn--ghost { --btn-bg: transparent; --btn-fg: var(--jg-primary-700); --btn-bd: var(--jg-border-strong); }
.jg-btn--ghost:hover { --btn-bg: var(--jg-primary-50); --btn-bd: var(--jg-primary-300); --btn-fg: var(--jg-primary-800); }

.jg-btn--on-dark { --btn-bg: rgba(255,255,255,0.08); --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.28); backdrop-filter: blur(8px); }
.jg-btn--on-dark:hover { --btn-bg: rgba(255,255,255,0.16); --btn-bd: rgba(255,255,255,0.5); }

.jg-btn--sm { padding: 0.625rem 1.25rem; font-size: var(--jg-text-sm); }
.jg-btn--lg { padding: 1.0625rem 2.25rem; font-size: var(--jg-text-lg); }
.jg-btn--block { width: 100%; }
.jg-btn[disabled], .jg-btn.is-busy { opacity: 0.6; pointer-events: none; }

/* Arrow nudges forward on hover. */
.jg-btn .jg-btn__arrow { transition: transform var(--jg-dur) var(--jg-ease-spring); }
.jg-btn:hover .jg-btn__arrow { transform: translateX(4px); }

/* Text link that grows an underline from the left. */
.jg-link-arrow {
  display: inline-flex; align-items: center; gap: var(--jg-space-2);
  font-family: var(--jg-font-heading); font-weight: var(--jg-weight-semibold);
  font-size: var(--jg-text-sm); text-decoration: none; color: var(--jg-primary-600);
  position: relative; padding-bottom: 2px;
}
.jg-link-arrow::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--jg-dur) var(--jg-ease-out);
}
.jg-link-arrow:hover::after { transform: scaleX(1); }
.jg-link-arrow svg { transition: transform var(--jg-dur) var(--jg-ease-spring); }
.jg-link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Badges, chips, pills
   ========================================================================== */

.jg-badge {
  display: inline-flex; align-items: center; gap: var(--jg-space-2);
  padding: 0.375rem 0.875rem; border-radius: var(--jg-radius-full);
  background: var(--jg-slate-100); color: var(--jg-slate-700);
  font-size: var(--jg-text-xs); font-weight: var(--jg-weight-semibold);
  font-family: var(--jg-font-heading); letter-spacing: 0.01em;
}
.jg-badge--green  { background: var(--jg-green-100); color: var(--jg-green-800); }
.jg-badge--amber  { background: var(--jg-amber-100); color: var(--jg-amber-700); }
.jg-badge--navy   { background: var(--jg-primary-100); color: var(--jg-primary-800); }
.jg-badge--glass  { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); }

.jg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jg-green-400); flex: none; }
.jg-dot--pulse { animation: jg-pulse 2.4s var(--jg-ease) infinite; }
@keyframes jg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.jg-card {
  background: var(--jg-white);
  border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius-lg);
  padding: var(--jg-space-8);
  position: relative; overflow: hidden;
  transition: transform var(--jg-dur) var(--jg-ease-out),
              box-shadow var(--jg-dur) var(--jg-ease-out),
              border-color var(--jg-dur) var(--jg-ease);
}
.jg-card:hover { transform: translateY(-4px); box-shadow: var(--jg-shadow-md); border-color: var(--jg-border-strong); }

.jg-card__icon {
  width: 56px; height: 56px; border-radius: var(--jg-radius-md);
  display: grid; place-items: center; margin-bottom: var(--jg-space-5);
  background: var(--jg-primary-50); color: var(--jg-primary-600);
  transition: transform var(--jg-dur) var(--jg-ease-spring), background-color var(--jg-dur) var(--jg-ease);
}
.jg-card:hover .jg-card__icon { transform: scale(1.08) rotate(-4deg); }
.jg-card__icon svg { width: 28px; height: 28px; }

.jg-card h3 { margin-bottom: var(--jg-space-3); font-size: var(--jg-text-xl); }
.jg-card p { color: var(--jg-text-muted); font-size: var(--jg-text-sm); line-height: var(--jg-leading-relaxed); }
.jg-card__foot { margin-top: var(--jg-space-6); }

/* ==========================================================================
   Topbar + header
   ========================================================================== */

.jg-topbar {
  background: var(--jg-primary-900); color: rgba(255,255,255,0.82);
  font-size: var(--jg-text-xs); padding-block: var(--jg-space-2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.jg-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--jg-space-6); flex-wrap: wrap; }
.jg-topbar__group { display: flex; align-items: center; gap: var(--jg-space-5); flex-wrap: wrap; }
.jg-topbar__item { display: inline-flex; align-items: center; gap: var(--jg-space-2); color: inherit; text-decoration: none; }
.jg-topbar__item svg { width: 14px; height: 14px; color: var(--jg-green-400); flex: none; }
.jg-topbar__item:hover { color: #fff; }

.jg-header {
  position: sticky; top: 0; z-index: var(--jg-z-header);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--jg-dur) var(--jg-ease),
              border-color var(--jg-dur) var(--jg-ease),
              background-color var(--jg-dur) var(--jg-ease);
}
.jg-header.is-stuck { box-shadow: var(--jg-shadow-sm); border-bottom-color: var(--jg-border); background: rgba(255,255,255,0.97); }

.jg-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--jg-space-6);
  min-height: var(--jg-header-h);
  transition: min-height var(--jg-dur) var(--jg-ease);
}
.jg-header.is-stuck .jg-header__inner { min-height: var(--jg-header-h-sticky); }

.jg-brand { display: inline-flex; align-items: center; gap: var(--jg-space-3); text-decoration: none; flex: none; }
.jg-brand img { max-height: 52px; width: auto; transition: max-height var(--jg-dur) var(--jg-ease); }
.jg-header.is-stuck .jg-brand img { max-height: 42px; }
.jg-brand__mark { width: 44px; height: 44px; flex: none; }
.jg-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.jg-brand__name {
  font-family: var(--jg-font-heading); font-weight: var(--jg-weight-black);
  font-size: 1.1875rem; color: var(--jg-primary-800); letter-spacing: var(--jg-tracking-tight);
}
.jg-brand__tag { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jg-green-600); font-weight: var(--jg-weight-semibold); }

/* --- Primary navigation --- */
.jg-nav { display: flex; align-items: center; gap: var(--jg-space-1); }
.jg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--jg-space-1); }
.jg-nav li { margin: 0; position: relative; }

.jg-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.625rem 0.875rem; border-radius: var(--jg-radius);
  font-family: var(--jg-font-heading); font-size: 0.9375rem; font-weight: var(--jg-weight-medium);
  color: var(--jg-slate-700); text-decoration: none; white-space: nowrap;
  transition: color var(--jg-dur-fast) var(--jg-ease), background-color var(--jg-dur-fast) var(--jg-ease);
}
.jg-nav > ul > li > a:hover,
.jg-nav > ul > li.is-open > a { color: var(--jg-primary-700); background: var(--jg-primary-50); }

.jg-nav > ul > li.current-menu-item > a,
.jg-nav > ul > li.current_page_item > a,
.jg-nav > ul > li.current-menu-ancestor > a { color: var(--jg-primary-700); font-weight: var(--jg-weight-semibold); }

/* Underline that grows from centre on the active item. */
.jg-nav > ul > li > a::after {
  content: ''; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.25rem; height: 2px;
  background: var(--jg-green); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--jg-dur) var(--jg-ease-out);
}
.jg-nav > ul > li.current-menu-item > a::after,
.jg-nav > ul > li.current-menu-ancestor > a::after,
.jg-nav > ul > li > a:hover::after { transform: scaleX(1); }

.jg-nav__caret { width: 12px; height: 12px; transition: transform var(--jg-dur) var(--jg-ease); }
.jg-nav li.is-open > a .jg-nav__caret { transform: rotate(180deg); }

/* --- Standard dropdown --- */
.jg-nav .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px;
  flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--jg-white); border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius-md); box-shadow: var(--jg-shadow-lg);
  padding: var(--jg-space-2); z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--jg-dur) var(--jg-ease-out),
              transform var(--jg-dur) var(--jg-ease-out),
              visibility var(--jg-dur);
}
.jg-nav li:hover > .sub-menu,
.jg-nav li.is-open > .sub-menu,
.jg-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.jg-nav .sub-menu a {
  display: block; padding: 0.625rem 0.875rem; border-radius: var(--jg-radius-sm);
  font-size: 0.9375rem; color: var(--jg-slate-700); text-decoration: none;
  transition: background-color var(--jg-dur-fast) var(--jg-ease), color var(--jg-dur-fast) var(--jg-ease), padding-left var(--jg-dur-fast) var(--jg-ease);
}
.jg-nav .sub-menu a:hover { background: var(--jg-primary-50); color: var(--jg-primary-700); padding-left: 1.125rem; }
.jg-nav .sub-menu .sub-menu { top: -0.5rem; left: 100%; }

/* --- Mega menu: the four pillars --- */
.jg-mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -8px);
  width: min(1080px, calc(100vw - 3rem));
  background: var(--jg-white); border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius-lg); box-shadow: var(--jg-shadow-lg);
  padding: var(--jg-space-8); z-index: 20;
  opacity: 0; visibility: hidden;
  transition: opacity var(--jg-dur) var(--jg-ease-out), transform var(--jg-dur) var(--jg-ease-out), visibility var(--jg-dur);
}
.jg-nav li.is-open > .jg-mega,
.jg-nav li:hover > .jg-mega,
.jg-nav li:focus-within > .jg-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.jg-mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jg-space-5); }
.jg-mega__card {
  display: block; padding: var(--jg-space-5); border-radius: var(--jg-radius-md);
  border: 1px solid transparent; text-decoration: none;
  transition: background-color var(--jg-dur) var(--jg-ease), border-color var(--jg-dur) var(--jg-ease), transform var(--jg-dur) var(--jg-ease-out);
}
.jg-mega__card:hover { background: var(--jg-slate-50); border-color: var(--jg-border); transform: translateY(-3px); }
.jg-mega__card i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--jg-radius); margin-bottom: var(--jg-space-3); background: var(--jg-slate-100); color: var(--jg-primary-600); }
.jg-mega__card i svg { width: 22px; height: 22px; }
.jg-mega__card strong { display: block; font-family: var(--jg-font-heading); font-size: 1rem; color: var(--jg-primary-800); margin-bottom: 0.25rem; }
.jg-mega__card span { display: block; font-size: var(--jg-text-sm); color: var(--jg-text-muted); line-height: 1.5; }

.jg-mega__card[data-pillar="energy"] i     { background: var(--jg-green-100);  color: var(--jg-pillar-energy-dk); }
.jg-mega__card[data-pillar="logistics"] i  { background: var(--jg-primary-100); color: var(--jg-pillar-logistics-dk); }
.jg-mega__card[data-pillar="property"] i   { background: var(--jg-amber-100);  color: var(--jg-pillar-property-dk); }
.jg-mega__card[data-pillar="healthcare"] i { background: #CCFBF1; color: var(--jg-pillar-health-dk); }

.jg-mega__foot {
  margin-top: var(--jg-space-6); padding-top: var(--jg-space-5); border-top: 1px solid var(--jg-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--jg-space-4); flex-wrap: wrap;
}
.jg-mega__foot p { font-size: var(--jg-text-sm); color: var(--jg-text-muted); margin: 0; }

/* --- Header actions --- */
.jg-header__actions { display: flex; align-items: center; gap: var(--jg-space-3); flex: none; }
.jg-header__call { display: inline-flex; align-items: center; gap: var(--jg-space-3); text-decoration: none; }
.jg-header__call i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--jg-green-100); color: var(--jg-green-700); flex: none; transition: transform var(--jg-dur) var(--jg-ease-spring); }
.jg-header__call:hover i { transform: scale(1.08); }
.jg-header__call i svg { width: 20px; height: 20px; }
.jg-header__call span { display: flex; flex-direction: column; line-height: 1.2; }
.jg-header__call small { font-size: 0.6875rem; color: var(--jg-text-muted); }
.jg-header__call strong { font-family: var(--jg-font-heading); font-size: 0.9375rem; color: var(--jg-primary-800); }

/* --- Burger --- */
.jg-burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius); background: var(--jg-white); cursor: pointer;
  padding: 0; place-items: center; flex: none;
}
.jg-burger span { display: block; width: 20px; height: 2px; background: var(--jg-primary-700); border-radius: 2px; position: relative; transition: background-color var(--jg-dur-fast) var(--jg-ease); }
.jg-burger span::before, .jg-burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--jg-primary-700); border-radius: 2px;
  transition: transform var(--jg-dur) var(--jg-ease-out), top var(--jg-dur) var(--jg-ease);
}
.jg-burger span::before { top: -6px; }
.jg-burger span::after  { top: 6px; }
.jg-burger[aria-expanded="true"] span { background: transparent; }
.jg-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.jg-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- Mobile drawer --- */
.jg-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw);
  background: var(--jg-white); z-index: var(--jg-z-drawer);
  transform: translateX(100%); transition: transform var(--jg-dur-slow) var(--jg-ease-out);
  display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: var(--jg-shadow-lg);
}
.jg-drawer.is-open { transform: translateX(0); }
.jg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--jg-space-5) var(--jg-space-6); border-bottom: 1px solid var(--jg-border); }
.jg-drawer__close { width: 42px; height: 42px; border: 1px solid var(--jg-border); background: none; border-radius: var(--jg-radius); cursor: pointer; display: grid; place-items: center; color: var(--jg-slate-600); font-size: 1.5rem; line-height: 1; }
.jg-drawer__close:hover { background: var(--jg-slate-50); color: var(--jg-primary-700); }
.jg-drawer__body { padding: var(--jg-space-5) var(--jg-space-6); flex: 1; }
.jg-drawer__foot { padding: var(--jg-space-6); border-top: 1px solid var(--jg-border); background: var(--jg-slate-50); display: grid; gap: var(--jg-space-3); }

.jg-drawer ul { list-style: none; margin: 0; padding: 0; }
.jg-drawer li { margin: 0; border-bottom: 1px solid var(--jg-slate-100); }
.jg-drawer a { display: block; padding: 0.875rem 0; font-family: var(--jg-font-heading); font-weight: var(--jg-weight-medium); color: var(--jg-slate-700); text-decoration: none; }
.jg-drawer a:hover { color: var(--jg-primary-700); }
.jg-drawer .sub-menu { padding-left: var(--jg-space-4); display: none; }
.jg-drawer li.is-open > .sub-menu { display: block; }
.jg-drawer .sub-menu a { font-size: var(--jg-text-sm); font-weight: var(--jg-weight-normal); padding: 0.625rem 0; }
.jg-drawer__toggle {
  position: absolute; right: 0; top: 0.5rem; width: 34px; height: 34px;
  border: 1px solid var(--jg-border); background: var(--jg-white); border-radius: var(--jg-radius-sm);
  cursor: pointer; display: grid; place-items: center; color: var(--jg-slate-600);
}
.jg-drawer li { position: relative; }
.jg-drawer li.is-open > .jg-drawer__toggle { background: var(--jg-primary-50); color: var(--jg-primary-700); transform: rotate(180deg); }

.jg-overlay {
  position: fixed; inset: 0; background: rgba(6, 18, 36, 0.55);
  backdrop-filter: blur(3px); z-index: 999;
  opacity: 0; visibility: hidden; transition: opacity var(--jg-dur) var(--jg-ease), visibility var(--jg-dur);
}
.jg-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero — split screen. Copy left, live pillar panel right.
   ========================================================================== */

.jg-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--jg-primary-950) 0%, var(--jg-primary-800) 45%, var(--jg-primary-700) 100%);
  color: #fff; padding-block: clamp(3.5rem, 7vw, 6.5rem);
  isolation: isolate;
}
/* Grid lines: a survey drawing under the copy. */
.jg-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2; opacity: 0.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 30%, transparent 78%);
}
/* Two soft light sources, green and amber. */
.jg-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 88% 12%, rgba(16, 185, 129, 0.24), transparent 65%),
    radial-gradient(520px 380px at 6% 92%, rgba(245, 158, 11, 0.16), transparent 62%);
}

.jg-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}

.jg-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--jg-space-2);
  padding: 0.4375rem 0.9375rem; border-radius: var(--jg-radius-full);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  font-size: var(--jg-text-xs); font-weight: var(--jg-weight-semibold);
  letter-spacing: 0.04em; color: rgba(255,255,255,0.92); margin-bottom: var(--jg-space-6);
  backdrop-filter: blur(8px);
}

.jg-hero h1 {
  font-size: var(--jg-text-6xl); color: #fff; margin-bottom: var(--jg-space-5);
  letter-spacing: -0.03em; line-height: 1.04; font-weight: var(--jg-weight-black);
}
/* The four verbs. Each takes its pillar's colour. */
.jg-hero h1 .jg-verb { display: inline-block; position: relative; }
.jg-hero h1 .jg-verb--power  { color: var(--jg-green-400); }
.jg-hero h1 .jg-verb--move   { color: #93C5FD; }
.jg-hero h1 .jg-verb--manage { color: var(--jg-amber-400); }
.jg-hero h1 .jg-verb--heal   { color: #5EEAD4; }

.jg-hero__lede {
  font-size: var(--jg-text-lg); line-height: var(--jg-leading-relaxed);
  color: rgba(255,255,255,0.78); max-width: 56ch; margin-bottom: var(--jg-space-8);
}
.jg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--jg-space-4); margin-bottom: var(--jg-space-10); }

.jg-hero__proof { display: flex; flex-wrap: wrap; gap: var(--jg-space-8); padding-top: var(--jg-space-6); border-top: 1px solid rgba(255,255,255,0.12); }
.jg-hero__proof div strong { display: block; font-family: var(--jg-font-heading); font-size: var(--jg-text-3xl); color: #fff; line-height: 1; font-weight: var(--jg-weight-bold); }
.jg-hero__proof div span { font-size: var(--jg-text-xs); color: rgba(255,255,255,0.62); letter-spacing: 0.04em; text-transform: uppercase; }

/* --- Hero panel: four stacked pillar rows --- */
.jg-hero__panel {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--jg-radius-xl); padding: var(--jg-space-6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.28);
}
.jg-hero__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--jg-space-5); }
.jg-hero__panel-head h2 { font-size: var(--jg-text-sm); color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; font-weight: var(--jg-weight-semibold); }

.jg-pillar-row {
  display: flex; align-items: center; gap: var(--jg-space-4);
  padding: var(--jg-space-4); border-radius: var(--jg-radius-md);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none; color: #fff; margin-bottom: var(--jg-space-3);
  transition: background-color var(--jg-dur) var(--jg-ease), transform var(--jg-dur) var(--jg-ease-out), border-color var(--jg-dur) var(--jg-ease);
}
.jg-pillar-row:last-child { margin-bottom: 0; }
.jg-pillar-row:hover { background: rgba(255,255,255,0.1); transform: translateX(6px); border-color: rgba(255,255,255,0.2); color: #fff; }
.jg-pillar-row i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--jg-radius); flex: none; background: rgba(255,255,255,0.1); }
.jg-pillar-row i svg { width: 24px; height: 24px; }
.jg-pillar-row div { flex: 1; min-width: 0; }
.jg-pillar-row strong { display: block; font-family: var(--jg-font-heading); font-size: 0.9375rem; margin-bottom: 2px; }
.jg-pillar-row small { color: rgba(255,255,255,0.6); font-size: var(--jg-text-xs); }
.jg-pillar-row .jg-pillar-row__go { color: rgba(255,255,255,0.4); transition: transform var(--jg-dur) var(--jg-ease-spring), color var(--jg-dur) var(--jg-ease); }
.jg-pillar-row:hover .jg-pillar-row__go { transform: translateX(4px); color: #fff; }

.jg-pillar-row[data-pillar="energy"] i     { background: rgba(16,185,129,0.2);  color: var(--jg-green-300); }
.jg-pillar-row[data-pillar="logistics"] i  { background: rgba(147,197,253,0.18); color: #BFDBFE; }
.jg-pillar-row[data-pillar="property"] i   { background: rgba(245,158,11,0.2);  color: var(--jg-amber-300); }
.jg-pillar-row[data-pillar="healthcare"] i { background: rgba(45,212,191,0.2);  color: #5EEAD4; }

/* ==========================================================================
   Bento grid — asymmetric on desktop, honest stack on mobile
   ========================================================================== */

.jg-bento {
  display: grid; gap: var(--jg-space-5);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
}
.jg-bento__item {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--jg-radius-lg); padding: var(--jg-space-8);
  background: var(--jg-white); border: 1px solid var(--jg-border);
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: inherit;
  transition: transform var(--jg-dur) var(--jg-ease-out), box-shadow var(--jg-dur) var(--jg-ease-out);
}
.jg-bento__item:hover { transform: translateY(-5px); box-shadow: var(--jg-shadow-lg); }

/* Accent wash that deepens on hover. */
.jg-bento__item::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--tint, var(--jg-slate-50)) 0%, transparent 70%);
  opacity: 0.85; transition: opacity var(--jg-dur) var(--jg-ease);
}
.jg-bento__item:hover::before { opacity: 1; }

/* Corner glow follows the pointer. Set by JS. */
.jg-bento__item::after {
  content: ''; position: absolute; z-index: -1; width: 320px; height: 320px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow, rgba(27,67,128,0.10)), transparent 62%);
  opacity: 0; transition: opacity var(--jg-dur) var(--jg-ease);
  pointer-events: none;
}
.jg-bento__item:hover::after { opacity: 1; }

.jg-bento__item--lg { grid-column: span 4; grid-row: span 2; }
.jg-bento__item--md { grid-column: span 2; }
.jg-bento__item--sm { grid-column: span 2; }
.jg-bento__item--wide { grid-column: span 3; }

.jg-bento__icon { width: 52px; height: 52px; border-radius: var(--jg-radius-md); display: grid; place-items: center; margin-bottom: auto; background: var(--jg-white); box-shadow: var(--jg-shadow-sm); color: var(--jg-primary-600); transition: transform var(--jg-dur) var(--jg-ease-spring); }
.jg-bento__item:hover .jg-bento__icon { transform: scale(1.1) rotate(-5deg); }
.jg-bento__icon svg { width: 26px; height: 26px; }
.jg-bento__item h3 { margin: var(--jg-space-6) 0 var(--jg-space-2); font-size: var(--jg-text-2xl); }
.jg-bento__item--lg h3 { font-size: var(--jg-text-3xl); }
.jg-bento__item p { color: var(--jg-slate-600); font-size: var(--jg-text-sm); line-height: var(--jg-leading-relaxed); margin-bottom: var(--jg-space-5); max-width: 46ch; }
.jg-bento__tags { display: flex; flex-wrap: wrap; gap: var(--jg-space-2); margin-bottom: var(--jg-space-5); }
.jg-bento__more { display: inline-flex; align-items: center; gap: var(--jg-space-2); font-family: var(--jg-font-heading); font-weight: var(--jg-weight-semibold); font-size: var(--jg-text-sm); color: var(--jg-primary-700); }
.jg-bento__item:hover .jg-bento__more svg { transform: translateX(4px); }
.jg-bento__more svg { transition: transform var(--jg-dur) var(--jg-ease-spring); }

.jg-bento__item[data-pillar="energy"]     { --tint: var(--jg-green-50);  --glow: rgba(16,185,129,0.16); }
.jg-bento__item[data-pillar="energy"] .jg-bento__icon     { color: var(--jg-pillar-energy-dk); }
.jg-bento__item[data-pillar="logistics"]  { --tint: var(--jg-primary-50); --glow: rgba(27,67,128,0.14); }
.jg-bento__item[data-pillar="logistics"] .jg-bento__icon  { color: var(--jg-pillar-logistics-dk); }
.jg-bento__item[data-pillar="property"]   { --tint: var(--jg-amber-50);  --glow: rgba(245,158,11,0.16); }
.jg-bento__item[data-pillar="property"] .jg-bento__icon   { color: var(--jg-pillar-property-dk); }
.jg-bento__item[data-pillar="healthcare"] { --tint: #F0FDFA; --glow: rgba(14,165,164,0.16); }
.jg-bento__item[data-pillar="healthcare"] .jg-bento__icon { color: var(--jg-pillar-health-dk); }

/* ==========================================================================
   Tabbed pillar switcher
   Panels crossfade and lift. The indicator slides between tabs rather than
   redrawing, so the eye can follow it.
   ========================================================================== */

.jg-tabs__nav {
  position: relative; display: flex; gap: var(--jg-space-1);
  background: var(--jg-white); border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius-full); padding: 0.375rem;
  margin-bottom: var(--jg-space-10); overflow-x: auto;
  scrollbar-width: none; box-shadow: var(--jg-shadow-xs);
}
.jg-tabs__nav::-webkit-scrollbar { display: none; }

.jg-tabs__indicator {
  position: absolute; top: 0.375rem; bottom: 0.375rem; left: 0; width: 0;
  border-radius: var(--jg-radius-full); background: var(--jg-primary-600);
  transition: transform var(--jg-dur-slow) var(--jg-ease-out), width var(--jg-dur-slow) var(--jg-ease-out), background-color var(--jg-dur) var(--jg-ease);
  z-index: 0; pointer-events: none;
}
.jg-tabs__nav[data-active-pillar="energy"]     .jg-tabs__indicator { background: var(--jg-pillar-energy-dk); }
.jg-tabs__nav[data-active-pillar="logistics"]  .jg-tabs__indicator { background: var(--jg-pillar-logistics-dk); }
.jg-tabs__nav[data-active-pillar="property"]   .jg-tabs__indicator { background: var(--jg-pillar-property-dk); }
.jg-tabs__nav[data-active-pillar="healthcare"] .jg-tabs__indicator { background: var(--jg-pillar-health-dk); }

.jg-tab {
  position: relative; z-index: 1; flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jg-space-2);
  padding: 0.8125rem 1.5rem; border: 0; background: none; cursor: pointer;
  border-radius: var(--jg-radius-full); white-space: nowrap;
  font-family: var(--jg-font-heading); font-size: 0.9375rem; font-weight: var(--jg-weight-semibold);
  color: var(--jg-slate-600);
  transition: color var(--jg-dur) var(--jg-ease);
}
.jg-tab svg { width: 18px; height: 18px; transition: transform var(--jg-dur) var(--jg-ease-spring); }
.jg-tab:hover { color: var(--jg-primary-700); }
.jg-tab:hover svg { transform: scale(1.12); }
.jg-tab[aria-selected="true"] { color: #fff; }
.jg-tab[aria-selected="true"]:hover { color: #fff; }

.jg-tabs__panel { display: none; }
.jg-tabs__panel.is-active { display: block; animation: jg-panel-in var(--jg-dur-slow) var(--jg-ease-out); }
@keyframes jg-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jg-panel__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.jg-panel__media { position: relative; border-radius: var(--jg-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--jg-slate-100); }
.jg-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jg-dur-slow) var(--jg-ease-out); }
.jg-panel__media:hover img { transform: scale(1.04); }
.jg-panel__media-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(150deg, var(--jg-primary-800), var(--jg-primary-600)); color: rgba(255,255,255,0.35); }
.jg-panel__media-fallback svg { width: 88px; height: 88px; }
.jg-panel__badge { position: absolute; left: var(--jg-space-5); bottom: var(--jg-space-5); }

.jg-panel__body h3 { font-size: var(--jg-text-3xl); margin-bottom: var(--jg-space-4); }
.jg-panel__body > p { color: var(--jg-slate-600); font-size: var(--jg-text-lg); line-height: var(--jg-leading-relaxed); margin-bottom: var(--jg-space-6); }

.jg-checklist { list-style: none; margin: 0 0 var(--jg-space-8); padding: 0; display: grid; gap: var(--jg-space-3); }
.jg-checklist li { display: flex; align-items: flex-start; gap: var(--jg-space-3); margin: 0; font-size: 0.9375rem; color: var(--jg-slate-700); }
.jg-checklist li svg { width: 20px; height: 20px; flex: none; color: var(--jg-green-600); margin-top: 1px; }
.jg-checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   Stats and trust
   ========================================================================== */

.jg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jg-space-6); }
.jg-stat {
  padding: var(--jg-space-8) var(--jg-space-6); border-radius: var(--jg-radius-lg);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  text-align: center; transition: transform var(--jg-dur) var(--jg-ease-out), background-color var(--jg-dur) var(--jg-ease);
}
.jg-stat:hover { transform: translateY(-4px); background: rgba(255,255,255,0.09); }
.jg-stat__num {
  font-family: var(--jg-font-heading); font-size: var(--jg-text-5xl); font-weight: var(--jg-weight-black);
  color: var(--jg-green-400); line-height: 1; display: block; margin-bottom: var(--jg-space-3);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.jg-stat__label { font-size: 0.9375rem; color: #fff; font-weight: var(--jg-weight-semibold); display: block; margin-bottom: var(--jg-space-2); font-family: var(--jg-font-heading); }
.jg-stat__note { font-size: var(--jg-text-xs); color: rgba(255,255,255,0.55); line-height: 1.5; }

.jg-stats--light .jg-stat { background: var(--jg-white); border-color: var(--jg-border); box-shadow: var(--jg-shadow-xs); }
.jg-stats--light .jg-stat:hover { box-shadow: var(--jg-shadow-md); }
.jg-stats--light .jg-stat__num { color: var(--jg-primary-600); }
.jg-stats--light .jg-stat__label { color: var(--jg-primary-900); }
.jg-stats--light .jg-stat__note { color: var(--jg-text-muted); }

.jg-compliance { display: flex; flex-wrap: wrap; gap: var(--jg-space-4); justify-content: center; }
.jg-compliance__item {
  display: flex; align-items: center; gap: var(--jg-space-3);
  padding: var(--jg-space-4) var(--jg-space-5); border-radius: var(--jg-radius-md);
  background: var(--jg-white); border: 1px solid var(--jg-border);
  transition: transform var(--jg-dur) var(--jg-ease-out), border-color var(--jg-dur) var(--jg-ease), box-shadow var(--jg-dur) var(--jg-ease);
}
.jg-compliance__item:hover { transform: translateY(-3px); border-color: var(--jg-green-300); box-shadow: var(--jg-shadow-sm); }
.jg-compliance__item i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--jg-radius-sm); background: var(--jg-green-50); color: var(--jg-green-700); flex: none; }
.jg-compliance__item i svg { width: 22px; height: 22px; }
.jg-compliance__item strong { display: block; font-family: var(--jg-font-heading); font-size: 0.875rem; color: var(--jg-primary-800); }
.jg-compliance__item span { font-size: var(--jg-text-xs); color: var(--jg-text-muted); }

/* Verified marker for clinical figures. */
.jg-verified { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--jg-text-xs); color: var(--jg-green-400); font-weight: var(--jg-weight-semibold); }
.jg-verified svg { width: 14px; height: 14px; }
.jg-stats--light .jg-verified { color: var(--jg-green-700); }

/* ==========================================================================
   Process, testimonials, team, projects, FAQ
   ========================================================================== */

.jg-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jg-space-8); counter-reset: step; }
.jg-process__step { position: relative; counter-increment: step; }
.jg-process__step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--jg-font-heading); font-size: var(--jg-text-4xl); font-weight: var(--jg-weight-black);
  color: var(--jg-primary-100); line-height: 1; display: block; margin-bottom: var(--jg-space-4);
  transition: color var(--jg-dur) var(--jg-ease);
}
.jg-process__step:hover::before { color: var(--jg-green-300); }
/* Connector line between steps. */
.jg-process__step:not(:last-child)::after {
  content: ''; position: absolute; top: 1.35rem; left: 3.5rem; right: -2rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--jg-border-strong) 0 6px, transparent 6px 12px);
}
.jg-process__step h4 { margin-bottom: var(--jg-space-2); }
.jg-process__step p { font-size: var(--jg-text-sm); color: var(--jg-text-muted); }

.jg-quote {
  background: var(--jg-white); border: 1px solid var(--jg-border); border-radius: var(--jg-radius-lg);
  padding: var(--jg-space-8); position: relative;
  transition: transform var(--jg-dur) var(--jg-ease-out), box-shadow var(--jg-dur) var(--jg-ease-out);
}
.jg-quote:hover { transform: translateY(-4px); box-shadow: var(--jg-shadow-md); }
.jg-quote__mark { font-family: var(--jg-font-heading); font-size: 4rem; line-height: 0.7; color: var(--jg-green-200); margin-bottom: var(--jg-space-3); display: block; }
.jg-quote p { font-size: 1.0625rem; color: var(--jg-slate-700); line-height: var(--jg-leading-relaxed); margin-bottom: var(--jg-space-6); }
.jg-quote__who { display: flex; align-items: center; gap: var(--jg-space-3); }
.jg-quote__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.jg-quote__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--jg-primary-100); color: var(--jg-primary-700); font-family: var(--jg-font-heading); font-weight: var(--jg-weight-bold); flex: none; }
.jg-quote__who strong { display: block; font-family: var(--jg-font-heading); font-size: 0.9375rem; color: var(--jg-primary-900); }
.jg-quote__who span { font-size: var(--jg-text-xs); color: var(--jg-text-muted); }

.jg-person { text-align: center; }
.jg-person__photo { aspect-ratio: 1; border-radius: var(--jg-radius-lg); overflow: hidden; margin-bottom: var(--jg-space-4); background: var(--jg-slate-100); position: relative; }
.jg-person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jg-dur-slow) var(--jg-ease-out); }
.jg-person:hover .jg-person__photo img { transform: scale(1.05); }
.jg-person h4 { margin-bottom: 0.25rem; font-size: var(--jg-text-lg); }
.jg-person__role { font-size: var(--jg-text-sm); color: var(--jg-green-700); font-weight: var(--jg-weight-medium); }

.jg-project {
  display: block; text-decoration: none; color: inherit; border-radius: var(--jg-radius-lg);
  overflow: hidden; border: 1px solid var(--jg-border); background: var(--jg-white);
  transition: transform var(--jg-dur) var(--jg-ease-out), box-shadow var(--jg-dur) var(--jg-ease-out);
}
.jg-project:hover { transform: translateY(-5px); box-shadow: var(--jg-shadow-md); }
.jg-project__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--jg-slate-100); position: relative; }
.jg-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jg-dur-slow) var(--jg-ease-out); }
.jg-project:hover .jg-project__media img { transform: scale(1.06); }
.jg-project__badge { position: absolute; top: var(--jg-space-4); left: var(--jg-space-4); }
.jg-project__body { padding: var(--jg-space-6); }
.jg-project__body h3 { font-size: var(--jg-text-lg); margin-bottom: var(--jg-space-2); }
.jg-project__meta { display: flex; gap: var(--jg-space-4); font-size: var(--jg-text-xs); color: var(--jg-text-muted); margin-bottom: var(--jg-space-3); }
.jg-project__meta span { display: inline-flex; align-items: center; gap: 0.375rem; }

.jg-faq { border: 1px solid var(--jg-border); border-radius: var(--jg-radius-md); background: var(--jg-white); margin-bottom: var(--jg-space-3); overflow: hidden; transition: border-color var(--jg-dur) var(--jg-ease), box-shadow var(--jg-dur) var(--jg-ease); }
.jg-faq.is-open { border-color: var(--jg-green-300); box-shadow: var(--jg-shadow-sm); }
.jg-faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--jg-space-5) var(--jg-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--jg-space-4);
  font-family: var(--jg-font-heading); font-size: 1.0625rem; font-weight: var(--jg-weight-semibold); color: var(--jg-primary-900);
}
.jg-faq__q:hover { background: var(--jg-slate-50); }
.jg-faq__q i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--jg-slate-100); color: var(--jg-primary-700); transition: transform var(--jg-dur) var(--jg-ease-out), background-color var(--jg-dur) var(--jg-ease); }
.jg-faq.is-open .jg-faq__q i { transform: rotate(45deg); background: var(--jg-green-500); color: #fff; }
.jg-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--jg-dur-slow) var(--jg-ease-out); }
.jg-faq.is-open .jg-faq__a { grid-template-rows: 1fr; }
.jg-faq__a > div { overflow: hidden; }
.jg-faq__a p { padding: 0 var(--jg-space-6) var(--jg-space-5); color: var(--jg-slate-600); font-size: 0.9375rem; line-height: var(--jg-leading-relaxed); }

/* ==========================================================================
   Forms
   ========================================================================== */

.jg-field { margin-bottom: var(--jg-space-5); }
.jg-field label { display: block; font-family: var(--jg-font-heading); font-size: var(--jg-text-sm); font-weight: var(--jg-weight-semibold); color: var(--jg-primary-800); margin-bottom: var(--jg-space-2); }
.jg-field label .req { color: var(--jg-danger); }

.jg-input, .jg-select, .jg-textarea,
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"], input[type="date"], textarea, select {
  width: 100%; padding: 0.8125rem 1rem;
  border: 1.5px solid var(--jg-border-strong); border-radius: var(--jg-radius);
  background: var(--jg-white); color: var(--jg-text);
  font-family: var(--jg-font-body); font-size: 0.9375rem; line-height: 1.5;
  transition: border-color var(--jg-dur-fast) var(--jg-ease), box-shadow var(--jg-dur-fast) var(--jg-ease), background-color var(--jg-dur-fast) var(--jg-ease);
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 148px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem;
}
.jg-input:focus, .jg-select:focus, .jg-textarea:focus,
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--jg-green-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
  background: var(--jg-white);
}
input::placeholder, textarea::placeholder { color: var(--jg-slate-400); }
.jg-field.has-error .jg-input, .jg-field.has-error textarea, .jg-field.has-error select { border-color: var(--jg-danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }
.jg-field__error { display: block; margin-top: var(--jg-space-2); font-size: var(--jg-text-xs); color: var(--jg-danger); }
.jg-field__hint { display: block; margin-top: var(--jg-space-2); font-size: var(--jg-text-xs); color: var(--jg-text-muted); }

.jg-check { display: flex; align-items: flex-start; gap: var(--jg-space-3); font-size: var(--jg-text-sm); color: var(--jg-slate-600); }
.jg-check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--jg-green-600); }

.jg-form__note { display: flex; align-items: center; gap: var(--jg-space-2); font-size: var(--jg-text-xs); color: var(--jg-text-muted); margin-top: var(--jg-space-4); }

.jg-alert { padding: var(--jg-space-4) var(--jg-space-5); border-radius: var(--jg-radius); font-size: 0.9375rem; margin-bottom: var(--jg-space-5); display: flex; align-items: flex-start; gap: var(--jg-space-3); }
.jg-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.jg-alert--ok   { background: var(--jg-green-50); color: var(--jg-green-800); border: 1px solid var(--jg-green-200); }
.jg-alert--bad  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.jg-alert--info { background: var(--jg-primary-50); color: var(--jg-primary-800); border: 1px solid var(--jg-primary-200); }

/* Honeypot. Hidden from people, visible to bots that fill everything. */
.jg-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Spinner on a submitting button */
.jg-btn.is-busy::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: jg-spin 0.7s linear infinite; margin-right: 0.5rem;
}
@keyframes jg-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */

.jg-pagehero {
  background: linear-gradient(150deg, var(--jg-primary-900), var(--jg-primary-700));
  color: #fff; padding-block: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden;
}
.jg-pagehero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 340px at 82% 18%, rgba(16,185,129,0.2), transparent 66%);
}
.jg-pagehero > * { position: relative; z-index: 1; }
.jg-pagehero h1 { color: #fff; margin-bottom: var(--jg-space-4); }
.jg-pagehero p { color: rgba(255,255,255,0.76); font-size: var(--jg-text-lg); max-width: 62ch; }

.jg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jg-space-2); font-size: var(--jg-text-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--jg-space-5); }
.jg-crumbs a { color: rgba(255,255,255,0.82); text-decoration: none; }
.jg-crumbs a:hover { color: #fff; text-decoration: underline; }
.jg-crumbs__sep { opacity: 0.45; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.jg-ctaband {
  border-radius: var(--jg-radius-xl); padding: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(135deg, var(--jg-primary-800), var(--jg-primary-600));
  color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.jg-ctaband::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(480px 300px at 88% 0%, rgba(245,158,11,0.24), transparent 62%),
              radial-gradient(420px 300px at 4% 100%, rgba(16,185,129,0.22), transparent 62%);
}
.jg-ctaband__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--jg-space-10); align-items: center; }
.jg-ctaband h2 { color: #fff; margin-bottom: var(--jg-space-3); }
.jg-ctaband p { color: rgba(255,255,255,0.8); font-size: var(--jg-text-lg); margin: 0; }
.jg-ctaband__actions { display: flex; flex-direction: column; gap: var(--jg-space-3); }

/* ==========================================================================
   Footer
   ========================================================================== */

.jg-footer { background: var(--jg-primary-950); color: rgba(255,255,255,0.68); font-size: 0.9375rem; }

.jg-footer__news {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--jg-space-12);
}
.jg-footer__news-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--jg-space-10); align-items: center; }
.jg-footer__news h3 { color: #fff; font-size: var(--jg-text-2xl); margin-bottom: var(--jg-space-2); }
.jg-footer__news p { color: rgba(255,255,255,0.6); font-size: var(--jg-text-sm); margin: 0; }
.jg-newsletter { display: flex; gap: var(--jg-space-3); }
.jg-newsletter input[type="email"] {
  flex: 1; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fff;
  border-radius: var(--jg-radius-full); padding-inline: 1.25rem;
}
.jg-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.jg-newsletter input[type="email"]:focus { background: rgba(255,255,255,0.1); border-color: var(--jg-green-400); box-shadow: 0 0 0 4px rgba(16,185,129,0.16); }

.jg-footer__main { padding-block: var(--jg-space-16); }
.jg-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr; gap: var(--jg-space-10); }
.jg-footer h4 {
  color: #fff; font-size: var(--jg-text-sm); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--jg-space-5); font-weight: var(--jg-weight-semibold);
}
.jg-footer ul { list-style: none; margin: 0; padding: 0; }
.jg-footer li { margin-bottom: var(--jg-space-3); }
.jg-footer a { color: rgba(255,255,255,0.68); text-decoration: none; transition: color var(--jg-dur-fast) var(--jg-ease), padding-left var(--jg-dur-fast) var(--jg-ease); display: inline-block; }
.jg-footer a:hover { color: var(--jg-green-400); padding-left: 4px; }

.jg-footer__about p { line-height: var(--jg-leading-relaxed); color: rgba(255,255,255,0.6); margin-bottom: var(--jg-space-5); }
.jg-footer__brand { display: flex; align-items: center; gap: var(--jg-space-3); margin-bottom: var(--jg-space-5); }
.jg-footer__brand .jg-brand__name { color: #fff; }
.jg-footer__brand img { max-height: 54px; width: auto; }

.jg-footer__contact li { display: flex; gap: var(--jg-space-3); align-items: flex-start; margin-bottom: var(--jg-space-4); line-height: 1.55; }
.jg-footer__contact svg { width: 17px; height: 17px; color: var(--jg-green-400); flex: none; margin-top: 3px; }
.jg-footer__contact a:hover { padding-left: 0; }

.jg-hours { display: grid; gap: var(--jg-space-2); font-size: var(--jg-text-sm); }
.jg-hours div { display: flex; justify-content: space-between; gap: var(--jg-space-4); padding-bottom: var(--jg-space-2); border-bottom: 1px dashed rgba(255,255,255,0.1); }
.jg-hours span:last-child { color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; }
.jg-hours .is-closed span:last-child { color: rgba(255,255,255,0.45); }

.jg-social { display: flex; gap: var(--jg-space-3); }
.jg-social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
  transition: transform var(--jg-dur) var(--jg-ease-spring), background-color var(--jg-dur) var(--jg-ease), color var(--jg-dur) var(--jg-ease);
}
.jg-social a:hover { background: var(--jg-green-500); border-color: var(--jg-green-500); color: var(--jg-primary-950); transform: translateY(-3px); padding-left: 0; }
.jg-social svg { width: 18px; height: 18px; }

.jg-footer__bar {
  border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--jg-space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--jg-space-5); flex-wrap: wrap;
  font-size: var(--jg-text-xs); color: rgba(255,255,255,0.5);
}
.jg-footer__bar a { color: rgba(255,255,255,0.62); }
.jg-footer__legal { display: flex; gap: var(--jg-space-5); flex-wrap: wrap; }
.jg-credit a { color: var(--jg-green-400); }
.jg-credit a:hover { color: var(--jg-green-300); padding-left: 0; }

/* ==========================================================================
   Floating actions
   ========================================================================== */

.jg-float { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 880; display: grid; gap: var(--jg-space-3); justify-items: end; }

.jg-whatsapp {
  display: inline-flex; align-items: center; gap: var(--jg-space-3);
  height: 58px; padding: 0 1.125rem; border-radius: var(--jg-radius-full);
  background: #25D366; color: #06241A; text-decoration: none;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4);
  font-family: var(--jg-font-heading); font-weight: var(--jg-weight-bold); font-size: 0.9375rem;
  transition: transform var(--jg-dur) var(--jg-ease-spring), box-shadow var(--jg-dur) var(--jg-ease);
  max-width: 58px; overflow: hidden; white-space: nowrap;
}
.jg-whatsapp svg { width: 30px; height: 30px; flex: none; margin-left: -0.0625rem; }
.jg-whatsapp:hover { max-width: 300px; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5); color: #06241A; }
@media (max-width: 640px) { .jg-whatsapp:hover { max-width: 58px; } }

.jg-totop {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--jg-border);
  background: var(--jg-white); color: var(--jg-primary-700); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--jg-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--jg-dur) var(--jg-ease), transform var(--jg-dur) var(--jg-ease-out), visibility var(--jg-dur), background-color var(--jg-dur-fast) var(--jg-ease);
}
.jg-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.jg-totop:hover { background: var(--jg-primary-600); color: #fff; }

/* Reading progress bar under the sticky header. */
.jg-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--jg-green-500), var(--jg-amber-500)); z-index: calc(var(--jg-z-header) + 1); transition: width 90ms linear; }

/* ==========================================================================
   Blog, archives, single, comments
   ========================================================================== */

.jg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.jg-layout--full { grid-template-columns: minmax(0, 1fr); }

.jg-post-card {
  background: var(--jg-white); border: 1px solid var(--jg-border); border-radius: var(--jg-radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--jg-dur) var(--jg-ease-out), box-shadow var(--jg-dur) var(--jg-ease-out);
}
.jg-post-card:hover { transform: translateY(-4px); box-shadow: var(--jg-shadow-md); }
.jg-post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--jg-slate-100); display: block; }
.jg-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jg-dur-slow) var(--jg-ease-out); }
.jg-post-card:hover .jg-post-card__media img { transform: scale(1.05); }
.jg-post-card__body { padding: var(--jg-space-6); flex: 1; display: flex; flex-direction: column; }
.jg-post-card__body h3 { font-size: var(--jg-text-xl); margin-bottom: var(--jg-space-3); }
.jg-post-card__body h3 a { color: inherit; text-decoration: none; }
.jg-post-card__body h3 a:hover { color: var(--jg-primary-600); }
.jg-post-card__body p { color: var(--jg-text-muted); font-size: var(--jg-text-sm); flex: 1; }
.jg-post-card__foot { margin-top: var(--jg-space-5); padding-top: var(--jg-space-4); border-top: 1px solid var(--jg-border); }

.jg-meta { display: flex; flex-wrap: wrap; gap: var(--jg-space-4); font-size: var(--jg-text-xs); color: var(--jg-text-muted); margin-bottom: var(--jg-space-3); }
.jg-meta span, .jg-meta a { display: inline-flex; align-items: center; gap: 0.375rem; color: inherit; text-decoration: none; }
.jg-meta a:hover { color: var(--jg-primary-600); }
.jg-meta svg { width: 14px; height: 14px; opacity: 0.7; }

.jg-entry { font-size: 1.0625rem; line-height: var(--jg-leading-relaxed); color: var(--jg-slate-700); }
.jg-entry > * + * { margin-top: var(--jg-space-5); }
.jg-entry h2 { font-size: var(--jg-text-3xl); margin-top: var(--jg-space-12); }
.jg-entry h3 { font-size: var(--jg-text-2xl); margin-top: var(--jg-space-10); }
.jg-entry img, .jg-entry figure { border-radius: var(--jg-radius-md); }
.jg-entry ul li::marker, .jg-entry ol li::marker { color: var(--jg-green-600); }
.jg-entry .alignwide { width: min(100vw - 3rem, 1100px); margin-inline: auto; }
.jg-entry .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.alignleft { float: left; margin: 0 var(--jg-space-6) var(--jg-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--jg-space-4) var(--jg-space-6); }
.aligncenter { margin-inline: auto; display: block; }
.wp-caption-text, .wp-element-caption { font-size: var(--jg-text-xs); color: var(--jg-text-muted); text-align: center; margin-top: var(--jg-space-2); }
.sticky .jg-post-card { border-color: var(--jg-amber-300); }
.bypostauthor > .comment-body { border-left: 3px solid var(--jg-green-400); }

.jg-share { display: flex; align-items: center; gap: var(--jg-space-3); flex-wrap: wrap; padding-block: var(--jg-space-6); border-block: 1px solid var(--jg-border); margin-block: var(--jg-space-10); }
.jg-share strong { font-family: var(--jg-font-heading); font-size: var(--jg-text-sm); color: var(--jg-primary-800); }
.jg-share a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--jg-border); color: var(--jg-slate-600); transition: transform var(--jg-dur) var(--jg-ease-spring), background-color var(--jg-dur) var(--jg-ease), color var(--jg-dur) var(--jg-ease); }
.jg-share a:hover { background: var(--jg-primary-600); border-color: var(--jg-primary-600); color: #fff; transform: translateY(-2px); }
.jg-share svg { width: 17px; height: 17px; }

.jg-widget { background: var(--jg-white); border: 1px solid var(--jg-border); border-radius: var(--jg-radius-lg); padding: var(--jg-space-6); margin-bottom: var(--jg-space-6); }
.jg-widget h3, .jg-widget .widget-title { font-size: var(--jg-text-lg); margin-bottom: var(--jg-space-4); padding-bottom: var(--jg-space-3); border-bottom: 2px solid var(--jg-green-200); }
.jg-widget ul { list-style: none; padding: 0; margin: 0; }
.jg-widget li { padding: var(--jg-space-2) 0; border-bottom: 1px solid var(--jg-slate-100); font-size: 0.9375rem; }
.jg-widget li:last-child { border-bottom: 0; }
.jg-widget a { color: var(--jg-slate-700); text-decoration: none; }
.jg-widget a:hover { color: var(--jg-primary-600); }
.jg-widget--dark { background: var(--jg-primary-900); border-color: var(--jg-primary-800); color: rgba(255,255,255,0.75); }
.jg-widget--dark h3 { color: #fff; border-bottom-color: rgba(16,185,129,0.4); }

.jg-pagination { display: flex; justify-content: center; gap: var(--jg-space-2); margin-top: var(--jg-space-12); flex-wrap: wrap; }
.jg-pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 var(--jg-space-3); display: inline-grid; place-items: center;
  border: 1px solid var(--jg-border); border-radius: var(--jg-radius); background: var(--jg-white);
  color: var(--jg-slate-700); text-decoration: none; font-family: var(--jg-font-heading); font-weight: var(--jg-weight-semibold); font-size: 0.9375rem;
  transition: background-color var(--jg-dur-fast) var(--jg-ease), color var(--jg-dur-fast) var(--jg-ease), transform var(--jg-dur-fast) var(--jg-ease-out), border-color var(--jg-dur-fast) var(--jg-ease);
}
.jg-pagination .page-numbers:hover { background: var(--jg-primary-50); border-color: var(--jg-primary-300); transform: translateY(-2px); }
.jg-pagination .page-numbers.current { background: var(--jg-primary-600); border-color: var(--jg-primary-600); color: #fff; }
.jg-pagination .dots { border-color: transparent; background: none; }

.jg-comments { margin-top: var(--jg-space-16); }
.jg-comments .comment-list { list-style: none; padding: 0; margin: 0 0 var(--jg-space-10); }
.jg-comments .comment-list ol.children { list-style: none; padding-left: clamp(1rem, 4vw, 3rem); }
.jg-comments .comment-body { background: var(--jg-white); border: 1px solid var(--jg-border); border-radius: var(--jg-radius-md); padding: var(--jg-space-6); margin-bottom: var(--jg-space-4); }
.jg-comments .comment-author { display: flex; align-items: center; gap: var(--jg-space-3); margin-bottom: var(--jg-space-3); }
.jg-comments .comment-author img { border-radius: 50%; }
.jg-comments .comment-author .fn { font-family: var(--jg-font-heading); font-weight: var(--jg-weight-semibold); color: var(--jg-primary-900); font-style: normal; }
.jg-comments .comment-metadata { font-size: var(--jg-text-xs); color: var(--jg-text-muted); margin-bottom: var(--jg-space-3); }
.jg-comments .comment-metadata a { color: inherit; text-decoration: none; }
.jg-comments .reply a { font-size: var(--jg-text-xs); font-weight: var(--jg-weight-semibold); text-decoration: none; color: var(--jg-primary-600); }
.jg-comments .comment-respond { background: var(--jg-slate-50); border: 1px solid var(--jg-border); border-radius: var(--jg-radius-lg); padding: var(--jg-space-8); }
.jg-comments .comment-reply-title { font-size: var(--jg-text-2xl); margin-bottom: var(--jg-space-5); }
.jg-comments .comment-form label { display: block; font-family: var(--jg-font-heading); font-size: var(--jg-text-sm); font-weight: var(--jg-weight-semibold); color: var(--jg-primary-800); margin-bottom: var(--jg-space-2); }
.jg-comments .comment-form p { margin-bottom: var(--jg-space-4); }
.jg-comments .comment-form .submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.875rem 1.75rem; background: var(--jg-primary-600); color: #fff; border: 0;
  border-radius: var(--jg-radius-full); font-family: var(--jg-font-heading); font-weight: var(--jg-weight-semibold); cursor: pointer;
  transition: background-color var(--jg-dur-fast) var(--jg-ease), transform var(--jg-dur) var(--jg-ease-out);
  width: auto;
}
.jg-comments .comment-form .submit:hover { background: var(--jg-primary-700); transform: translateY(-2px); }

.jg-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.jg-404__code { font-family: var(--jg-font-heading); font-size: clamp(6rem, 18vw, 12rem); font-weight: var(--jg-weight-black); line-height: 0.85; letter-spacing: -0.05em; background: linear-gradient(135deg, var(--jg-primary-600), var(--jg-green-500)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--jg-space-6); }
.jg-404 p { max-width: 52ch; margin-inline: auto; color: var(--jg-text-muted); font-size: var(--jg-text-lg); margin-bottom: var(--jg-space-8); }

.jg-empty { text-align: center; padding: var(--jg-space-16) var(--jg-space-6); border: 2px dashed var(--jg-border-strong); border-radius: var(--jg-radius-lg); color: var(--jg-text-muted); }
.jg-empty svg { width: 48px; height: 48px; color: var(--jg-slate-300); margin: 0 auto var(--jg-space-4); }

/* ==========================================================================
   Scroll reveal
   Elements start slightly low and faded. JS adds .is-in when they cross the
   viewport. Without JS the .jg-reveal class is never applied, so content
   stays visible — no blank page if a script fails to load.
   ========================================================================== */

.jg-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--jg-dur-slow) var(--jg-ease-out), transform var(--jg-dur-slow) var(--jg-ease-out); }
.jg-reveal.is-in { opacity: 1; transform: none; }
.jg-reveal[data-delay="1"] { transition-delay: 80ms; }
.jg-reveal[data-delay="2"] { transition-delay: 160ms; }
.jg-reveal[data-delay="3"] { transition-delay: 240ms; }
.jg-reveal[data-delay="4"] { transition-delay: 320ms; }
.jg-reveal[data-delay="5"] { transition-delay: 400ms; }
.jg-reveal[data-delay="6"] { transition-delay: 480ms; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.jg-mt-0 { margin-top: 0 !important; }
.jg-mb-0 { margin-bottom: 0 !important; }
.jg-mb-4 { margin-bottom: var(--jg-space-4); }
.jg-mb-6 { margin-bottom: var(--jg-space-6); }
.jg-mb-8 { margin-bottom: var(--jg-space-8); }
.jg-mb-12 { margin-bottom: var(--jg-space-12); }
.jg-mt-8 { margin-top: var(--jg-space-8); }
.jg-mt-12 { margin-top: var(--jg-space-12); }
.jg-text-center { text-align: center; }
.jg-text-muted { color: var(--jg-text-muted); }
.jg-text-sm { font-size: var(--jg-text-sm); }
.jg-text-lg { font-size: var(--jg-text-lg); }
.jg-flex { display: flex; }
.jg-flex-wrap { flex-wrap: wrap; }
.jg-items-center { align-items: center; }
.jg-justify-center { justify-content: center; }
.jg-justify-between { justify-content: space-between; }
.jg-gap-2 { gap: var(--jg-space-2); }
.jg-gap-3 { gap: var(--jg-space-3); }
.jg-gap-4 { gap: var(--jg-space-4); }
.jg-gap-6 { gap: var(--jg-space-6); }
.jg-hide { display: none !important; }
.jg-relative { position: relative; }

/* ==========================================================================
   Breakpoints
   Desktop first past 1100, then the layout collapses in three honest steps.
   ========================================================================== */

@media (max-width: 1180px) {
  .jg-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jg-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .jg-nav, .jg-header__call { display: none; }
  .jg-burger { display: grid; }
  .jg-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jg-space-10); }
  .jg-hero__panel { order: 2; }
  .jg-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jg-bento__item--lg { grid-column: span 4; grid-row: span 1; }
  .jg-bento__item--md, .jg-bento__item--sm, .jg-bento__item--wide { grid-column: span 2; }
  .jg-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .jg-panel__media { order: 2; aspect-ratio: 16 / 9; }
  .jg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jg-process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jg-space-8) var(--jg-space-6); }
  .jg-process__step:not(:last-child)::after { display: none; }
  .jg-layout { grid-template-columns: minmax(0, 1fr); }
  .jg-ctaband__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jg-space-8); }
  .jg-footer__news-grid { grid-template-columns: minmax(0, 1fr); gap: var(--jg-space-6); }
  .jg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  :root { --jg-header-h: 72px; --jg-header-h-sticky: 64px; }
  .jg-topbar__group:last-child { display: none; }
  .jg-grid--3, .jg-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .jg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jg-checklist--2col { grid-template-columns: minmax(0, 1fr); }
  .jg-hero__proof { gap: var(--jg-space-6); }
  .jg-tab { flex: 0 0 auto; padding-inline: 1.125rem; }
  .jg-entry .alignfull, .jg-entry .alignwide { width: auto; margin-left: 0; transform: none; }
  .alignleft, .alignright { float: none; margin: 0 0 var(--jg-space-4); }
}

@media (max-width: 600px) {
  .jg-bento { grid-template-columns: minmax(0, 1fr); }
  .jg-bento__item, .jg-bento__item--lg, .jg-bento__item--md, .jg-bento__item--sm, .jg-bento__item--wide { grid-column: span 1; }
  .jg-stats, .jg-process, .jg-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .jg-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--jg-space-8); }
  .jg-newsletter { flex-direction: column; }
  .jg-hero__cta { flex-direction: column; align-items: stretch; }
  .jg-hero__cta .jg-btn { width: 100%; }
  .jg-card, .jg-bento__item, .jg-quote { padding: var(--jg-space-6); }
  .jg-footer__bar { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Print — strip the furniture, keep the words.
   ========================================================================== */

@media print {
  .jg-header, .jg-topbar, .jg-footer, .jg-float, .jg-totop, .jg-drawer,
  .jg-overlay, .jg-progress, .jg-share, .jg-comments, .jg-ctaband { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .jg-section { padding-block: 1rem; }
  a { text-decoration: underline; color: #000; }
  .jg-entry a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* Icon defaults and the two rotations pagination uses. */
.jg-icon { flex: none; }
.jg-rot-90  { transform: rotate(90deg); }
.jg-rot-270 { transform: rotate(-90deg); }
.jg-pagination .page-numbers { gap: 0.375rem; grid-auto-flow: column; }

/* ==========================================================================
   Block styles registered in inc/blocks.php
   ========================================================================== */

.wp-block-group.is-style-janak-card {
  background: var(--jg-white); border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius-lg); padding: var(--jg-space-8);
  box-shadow: var(--jg-shadow-xs);
}
.wp-block-group.is-style-janak-panel {
  background: var(--jg-slate-50); border-radius: var(--jg-radius-lg);
  padding: var(--jg-space-8); border: 1px solid var(--jg-border);
}
.wp-block-image.is-style-janak-rounded img { border-radius: var(--jg-radius-lg); }

.wp-block-list.is-style-janak-checks { list-style: none; padding-left: 0; }
.wp-block-list.is-style-janak-checks li {
  position: relative; padding-left: 2rem; margin-bottom: var(--jg-space-3);
}
.wp-block-list.is-style-janak-checks li::before {
  content: ''; position: absolute; left: 0; top: 0.3em; width: 1.25rem; height: 1.25rem;
  background: var(--jg-green-100); border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.75rem; background-position: center; background-repeat: no-repeat;
}

.wp-block-quote.is-style-janak-testimonial {
  border-left: 0; background: var(--jg-white); border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius-lg); padding: var(--jg-space-8); position: relative;
}
.wp-block-quote.is-style-janak-testimonial::before {
  content: '"'; font-family: var(--jg-font-heading); font-size: 3.5rem;
  color: var(--jg-green-200); line-height: 0.7; display: block; margin-bottom: var(--jg-space-3);
}

.wp-block-separator.is-style-janak-dotted {
  border: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--jg-border-strong) 0 6px, transparent 6px 12px);
}

.wp-block-heading.is-style-janak-underlined { position: relative; padding-bottom: var(--jg-space-4); }
.wp-block-heading.is-style-janak-underlined::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px;
  background: var(--jg-green-500); border-radius: 3px;
}

/* ==========================================================================
   Odds and ends used by the templates
   ========================================================================== */

.jg-sidebar { position: sticky; top: calc(var(--jg-header-h-sticky) + 1.5rem); }
@media (max-width: 1024px) { .jg-sidebar { position: static; } }

.jg-text-xs { font-size: var(--jg-text-xs); }
.jg-mb-2 { margin-bottom: var(--jg-space-2); }

.jg-searchform input[type="search"] { flex: 1; }
.jg-searchform .jg-btn { flex: none; padding-inline: 1.25rem; }

/* Form-wide alert injected by the script above the contact form. */
.jg-form__alert { margin-bottom: var(--jg-space-6); }

/* Newsletter result line, under the footer sign-up. */
.jg-newsletter__note { margin: var(--jg-space-3) 0 0; font-size: var(--jg-text-sm); }
.jg-newsletter__note.is-ok  { color: var(--jg-green-400); }
.jg-newsletter__note.is-bad { color: #FCA5A5; }

/* Tag list on a single post. */
.jg-entry .tag-cloud-link,
.jg-entry a[rel~="tag"] {
  display: inline-block; padding: 0.375rem 0.875rem; border-radius: var(--jg-radius-full);
  background: var(--jg-slate-100); color: var(--jg-slate-700); font-size: var(--jg-text-xs);
  text-decoration: none; font-weight: var(--jg-weight-semibold);
  transition: background-color var(--jg-dur-fast) var(--jg-ease), color var(--jg-dur-fast) var(--jg-ease);
}
.jg-entry a[rel~="tag"]:hover { background: var(--jg-primary-600); color: #fff; }

/* Footer widget areas, when a client uses widgets instead of menus. */
.jg-footer-widget { margin-bottom: var(--jg-space-6); }
.jg-footer-widget ul { list-style: none; padding: 0; margin: 0; }

/* The block editor's own alignment helper, used inside .jg-entry. */
.jg-entry > .alignfull:first-child { margin-top: 0; }