/* ==========================================================================
   JIJ Homepage — styles
   Source: Figma "Jerusalem Institute of Justice Ideas" > JIJ - HOMEPAGE NEW
   Prefix every class with .jij- to avoid collisions with the WordPress theme.
   ========================================================================== */

:root {
  --jij-navy: #0f172a;
  --jij-ink: #020617;
  --jij-gold: #f8b10e;
  --jij-blue: #0d6ed2;
  --jij-blue-link: #285ad1;
  --jij-blue-bright: #3b82f6;
  --jij-blue-btn: #1e40af;
  --jij-white: #f8fafc;
  --jij-hero-text: #dce7f7;
  --jij-muted: #94a3b8;
  --jij-muted-2: #64748b;
  --jij-slate: #475569;
  --jij-light: #e5edf5;
  --jij-light-2: #f1f5f9;
  --jij-radius: 12px;

  --jij-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jij-font-display: "Outfit", var(--jij-font-ui);
  --jij-font-body: "Krub", var(--jij-font-ui);
  --jij-font-brand: "Open Sans", var(--jij-font-ui);

  --jij-container: 1480px;
  --jij-gutter: 24px;
}

/* ---------- Reset scoped to the page ---------- */
.jij-page,
.jij-page *,
.jij-page *::before,
.jij-page *::after { box-sizing: border-box; }

.jij-page {
  margin: 0;
  font-family: var(--jij-font-body);
  color: var(--jij-white);
  background: var(--jij-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: clip;
}
:where(.jij-page) img { display: block; max-width: 100%; height: auto; }
:where(.jij-page) a { color: inherit; text-decoration: none; }
:where(.jij-page) :where(h1, h2, h3, h4, p, ul, dl, dd, address) { margin: 0; }
:where(.jij-page) ul { padding: 0; list-style: none; }
:where(.jij-page) button { font: inherit; cursor: pointer; }

.jij-container {
  width: 100%;
  max-width: var(--jij-container);
  margin-inline: auto;
  padding-inline: var(--jij-gutter);
}

.jij-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.jij-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 28px;
  border-radius: var(--jij-radius); border: 1px solid transparent;
  font-family: var(--jij-font-ui); font-weight: 700; font-size: 16px; line-height: 24px;
  white-space: nowrap; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.jij-btn:hover { transform: translateY(-1px); }
.jij-btn:active { transform: translateY(0); }
.jij-btn:focus-visible { outline: 3px solid var(--jij-gold); outline-offset: 3px; }
.jij-btn img { width: 16px; height: 16px; flex: none; }

.jij-btn--gold { background: var(--jij-gold); color: #000; }
.jij-btn--gold:hover { background: #ffc233; }
.jij-btn--blue { background: var(--jij-blue); color: var(--jij-white); }
.jij-btn--blue:hover { background: #1a7fe8; }
.jij-btn--blue-glass {
  background: rgba(13,110,210,.8); color: var(--jij-white);
  border-color: rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.jij-btn--blue-glass:hover { background: rgba(13,110,210,1); }
.jij-btn--glass {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.1);
}
.jij-btn--glass:hover { background: rgba(255,255,255,.18); }

/* Text link with trailing arrow (used on cards and mission panels) */
.jij-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--jij-font-ui); font-weight: 700; font-size: 16px; line-height: 24px;
}
.jij-link img { width: 16px; height: 16px; transition: transform .15s ease; }
.jij-link:hover img { transform: translate(2px, 0); }

/* ---------- Eyebrows / small caps labels ---------- */
.jij-eyebrow {
  font-family: var(--jij-font-ui); font-weight: 700; text-transform: uppercase;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.jij-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.jij-nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 96px;
}
.jij-brand { display: flex; align-items: center; gap: 18px; }
.jij-brand__logo { width: 53px; height: 55px; object-fit: contain; }
.jij-brand__name {
  font-family: var(--jij-font-brand); font-weight: 600; font-size: 20px; line-height: 28px;
  text-transform: uppercase; max-width: 225px; color: var(--jij-white);
}

.jij-nav__menu { display: flex; align-items: center; gap: 40px; }
.jij-nav__item { position: relative; }
.jij-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--jij-font-ui); font-weight: 500; font-size: 18px; line-height: 20px; letter-spacing: .35px;
  text-transform: uppercase; color: var(--jij-white); padding: 12px 0;
  background: none; border: 0;
}
.jij-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--jij-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.jij-nav__link:hover::after, .jij-nav__item.is-open > .jij-nav__link::after { transform: scaleX(1); }
.jij-nav__caret { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }

.jij-nav__sub {
  position: absolute; top: 100%; left: -16px; min-width: 360px;
  background: var(--jij-navy); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 10px; box-shadow: 0 20px 40px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s, transform .15s, visibility .15s;
}
.jij-nav__item.is-open > .jij-nav__sub,
.jij-nav__item:hover > .jij-nav__sub,
.jij-nav__item:focus-within > .jij-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.jij-nav__sub a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-family: var(--jij-font-ui); font-size: 15px; font-weight: 500; color: var(--jij-white);
}
.jij-nav__sub a:hover { background: rgba(255,255,255,.08); color: var(--jij-gold); }
.jij-nav__sub .jij-nav__sub-group { padding: 8px 14px 4px; font-size: 11px; letter-spacing: 1.2px; color: var(--jij-muted); text-transform: uppercase; font-family: var(--jij-font-ui); font-weight: 700; }
.jij-nav__sub .jij-nav__sub-group + a { padding-left: 24px; }
.jij-nav__sub a.jij-nav__sub-group { display: block; border-radius: 8px; }
.jij-nav__sub a.jij-nav__sub-group:hover { color: var(--jij-gold); background: rgba(255,255,255,.05); }
.jij-nav__sub a[aria-current="page"] { color: var(--jij-gold); }
.jij-nav__sub a.is-child { padding-left: 24px; }

.jij-nav__cta { flex: none; }
.jij-nav__cta-mobile { display: none; }

.jij-nav__toggle {
  display: none; width: 48px; height: 48px; border: 0; background: transparent; color: var(--jij-white);
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.jij-nav__toggle span { width: 26px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.jij-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(1056px, 92vh);
  display: flex; align-items: center;
  background: var(--jij-ink);
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
}
.jij-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.jij-hero__bg-overlay {
  position: absolute; inset: 0; z-index: -1;
  /* Figma: linear gradient #020617 → 80% → 0%, at 64% opacity, running left → upper-right */
  background: linear-gradient(107deg, rgba(2,6,23,.64) 0%, rgba(2,6,23,.51) 50%, rgba(2,6,23,0) 100%);
}
.jij-hero__bg-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.25) 0%, rgba(2,6,23,0) 30%, rgba(2,6,23,.35) 100%);
}
.jij-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  padding-block: 120px 96px;
}
.jij-hero__title {
  font-family: var(--jij-font-ui); font-weight: 700;
  font-size: clamp(44px, 4.1vw, 80px)!important; line-height: 1.06; letter-spacing: -0.056em;
  color: var(--jij-white); max-width: 760px;
}
.jij-hero__title em { font-style: italic; font-weight: 600; color: var(--jij-gold); }
.jij-hero__text {
  margin-top: 36px; max-width: 526px;
  font-size: 20px!important; line-height: 30px; color: var(--jij-hero-text);
}
.jij-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* Impact snapshot card */
.jij-snapshot-wrap { position: relative; justify-self: end; width: 100%; max-width: 686px; }
.jij-snapshot-wrap::before {
  /* blue glow blob behind the card */
  content: ""; position: absolute; right: -80px; top: -90px; width: 343px; height: 343px;
  background: rgba(37,99,235,.2); filter: blur(60px); border-radius: 50%; pointer-events: none;
}
.jij-snapshot {
  position: relative;
  background: rgba(15,23,42,.8); border: 1px solid rgba(255,255,255,.05); border-radius: 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 32px 44px 40px;
}
.jij-snapshot__head { display: flex; align-items: center; justify-content: space-between; padding-left: -12px; }
.jij-snapshot__title {
  font-family: var(--jij-font-ui); font-weight: 700; font-size: 24px!important; line-height: 28px; letter-spacing: -.5px;
  margin-left: -12px;
}
.jij-snapshot__icon { width: 55px; height: 55px; }
.jij-snapshot__list { margin-top: 22px; }
.jij-snapshot__row {
  display: grid; grid-template-columns: 179px 1fr; align-items: center; gap: 16px;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1);
}
.jij-snapshot__row:first-child { border-top: 0; }
.jij-snapshot__num {
  font-family: var(--jij-font-ui); font-weight: 700; font-size: 48px; line-height: 40px; color: var(--jij-gold);
}
.jij-snapshot__num--blue { color: var(--jij-blue-bright); }
.jij-snapshot__label {
  font-family: var(--jij-font-ui); font-weight: 400; font-size: clamp(16px, 1.25vw, 24px)!important; line-height: 1.4;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--jij-muted);
}

/* ==========================================================================
   AS SEEN IN
   ========================================================================== */
.jij-press { background: var(--jij-navy); padding-block: 39px; }
.jij-press__inner { display: flex; align-items: center; gap: clamp(32px, 5vw, 96px); }
.jij-press__label {
  flex: none; display: flex; align-items: center;
  font-family: var(--jij-font-display); font-weight: 700; font-size: 37px!important; line-height: 50px; color: #fff;
  padding: 40px 48px 40px 0; border-right: 1px solid rgba(255,255,255,.25);
}
.jij-press__label span { display: block; max-width: 127px; }
.jij-press__logos { row-gap: 24px;
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.jij-press__logo { display: block; opacity: .95; transition: opacity .15s; }
.jij-press__logo:hover { opacity: 1; }
.jij-press__logo img { height: clamp(40px, 3.6vw, 72px); width: auto; max-width: min(210px, 40vw); object-fit: contain; }
.jij-press__name { font-family: var(--jij-font-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 28px)!important; line-height: 1.1; color: #94a3b8; white-space: nowrap; }
.jij-press__name:hover { color: #cbd5e1; }

/* ==========================================================================
   CLIENT STORIES (carousel)
   ========================================================================== */
.jij-stories { background: var(--jij-light); color: var(--jij-navy); padding-block: 104px 88px; }
.jij-stories__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.jij-stories__eyebrow { font-size: 12px!important; letter-spacing: 1.2px; color: var(--jij-blue); }
.jij-stories__title { font-family: var(--jij-font-display); font-weight: 700; font-size: 36px!important; line-height: 40px; margin-top: 10px; }
.jij-carousel__nav { display: flex; gap: 10px; }
.jij-carousel__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(15,23,42,.15); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--jij-navy);
  transition: background .15s, color .15s;
}
.jij-carousel__btn:hover { background: var(--jij-navy); color: #fff; }
.jij-carousel__btn:focus-visible { outline: 3px solid var(--jij-blue); outline-offset: 2px; }
.jij-carousel__btn svg { width: 18px; height: 18px; }

.jij-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 48px) / 3);
  gap: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px; scrollbar-width: none;
}
.jij-carousel::-webkit-scrollbar { display: none; }
.jij-story { scroll-snap-align: start; display: flex; flex-direction: column; }
.jij-story__media {
  aspect-ratio: 378.66 / 213; border-radius: 16px; overflow: hidden; background: var(--jij-light-2);
}
.jij-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.jij-story:hover .jij-story__media img { transform: scale(1.03); }
.jij-story__eyebrow { margin-top: 32px; font-size: 12px!important; line-height: 16px; letter-spacing: 1.2px; color: var(--jij-blue); }
.jij-story__title {
  min-height: 64px; margin-top: 10px; font-family: var(--jij-font-display); font-weight: 700; font-size: 24px!important; line-height: 32px; color: var(--jij-navy);
}
.jij-story__text {
  margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--jij-slate);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jij-story__link { margin-top: auto; padding-top: 24px; color: var(--jij-blue-link); }
.jij-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.jij-carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(15,23,42,.2); padding: 0; transition: background .15s, width .15s; }
.jij-carousel__dot.is-active { background: var(--jij-blue); width: 24px; border-radius: 4px; }

/* ==========================================================================
   TWO BATTLEGROUNDS (mission)
   ========================================================================== */
.jij-mission { background: var(--jij-ink); padding-block: 80px 96px; }
.jij-mission__head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end;
  margin-bottom: 72px;
}
.jij-mission__eyebrow { font-size: 24px!important; line-height: 20px; letter-spacing: 1.4px; color: var(--jij-gold); }
.jij-mission__title { margin-top: 26px; letter-spacing: -1.2px; }
.jij-mission__title .line-1 {
  display: block; font-family: var(--jij-font-ui); font-weight: 500; font-size: clamp(32px, 3vw, 48px)!important; line-height: 1; color: var(--jij-white);
}
.jij-mission__title .line-2 {
  display: block; margin-top: 8px; font-family: var(--jij-font-ui); font-weight: 900; font-style: italic;
  font-size: clamp(40px, 3.8vw, 64px)!important; line-height: 1; color: var(--jij-gold);
}
.jij-mission__intro { font-size: clamp(18px, 1.4vw, 24px); line-height: 1.35; color: var(--jij-muted); max-width: 588px; }

.jij-mission__grid { display: grid; grid-template-columns: 1fr 1fr; }
.jij-panel {
  position: relative; isolation: isolate; overflow: hidden; min-height: 599px;
  border: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 300px 48px 40px;
  --jij-panel-bw: 1px 1px 1px 1px; /* border widths: top right bottom left */
}
/* Gradient border: gold at the top fading into the page background (#020617) at the bottom.
   Drawn as a masked pseudo-element so it follows the rounded corners (border-image can't). */
.jij-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: var(--jij-panel-bw);
  background: linear-gradient(to bottom, var(--jij-gold) 0%, var(--jij-ink) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.jij-panel--left { border-radius: 25px 0 0 24px; --jij-panel-bw: 1px .5px 1px 1px; }
.jij-panel--right { border-radius: 0 25px 24px 0; --jij-panel-bw: 1px 1px 1px .5px; }
.jij-panel__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
}
.jij-panel::before {
  /* Figma gradient: transparent 27% → #020617 67% */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(187deg, rgba(0,0,0,0) 27%, var(--jij-ink) 67%);
}
.jij-panel__icon { width: 97px; height: 100px; object-fit: contain; margin-bottom: 24px; }
.jij-panel__title { font-family: var(--jij-font-ui); font-weight: 700; font-size: 32px!important; line-height: 32px; color: var(--jij-white); }
.jij-panel__tagline { margin-top: 8px; font-size: 20px!important; line-height: 28px; color: var(--jij-gold); }
.jij-panel__rule { width: 38px; height: 1px; background: var(--jij-gold); margin-block: 16px; }
.jij-panel__text { font-size: 20px!important; line-height: 28px; color: var(--jij-muted); max-width: 548px; }
.jij-panel__link { margin-top: 40px; color: var(--jij-gold); align-self: flex-start; position: relative; padding-bottom: 2px; }
.jij-panel__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--jij-gold); }

/* ==========================================================================
   FEATURED CAMPAIGN — Saturday October 7
   ========================================================================== */
.jij-oct7 { position: relative; isolation: isolate; overflow: hidden; background: var(--jij-navy); padding-block: 128px; }
.jij-oct7__shape {
  position: absolute; z-index: -1; top: -10%; bottom: -10%; left: 66%; width: 60%;
  background: var(--jij-blue-link); opacity: .1; transform: skewX(12deg);
}
.jij-oct7__inner { display: grid; grid-template-columns: 448px minmax(0, 1fr); gap: 96px; align-items: center; max-width: 1380px; }
.jij-oct7__poster {
  border: 1px solid #e5e7eb; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); aspect-ratio: 448 / 577.59; overflow: hidden;
}
.jij-oct7__poster img { width: 100%; height: 100%; object-fit: cover; }
.jij-oct7__eyebrow { font-size: 14px!important; line-height: 20px; letter-spacing: 1.4px; color: var(--jij-gold); }
.jij-oct7__title { margin-top: 24px; font-family: var(--jij-font-display); font-weight: 700; font-size: clamp(36px, 3vw, 48px)!important; line-height: 1.25; color: #fff; }
.jij-oct7__title span { color: var(--jij-gold); }
.jij-oct7__text { margin-top: 20px; max-width: 632px; font-size: 18px!important; line-height: 29.25px; color: var(--jij-muted); }
.jij-oct7__list { margin-top: 28px; display: grid; gap: 14px; }
.jij-oct7__list li { display: flex; align-items: center; gap: 20px; font-size: 16px!important; line-height: 24px; color: #cbd5e1; }
.jij-oct7__list img { width: 16px; height: 16px; flex: none; }
.jij-oct7__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }

/* ==========================================================================
   GET INVOLVED (CTA)
   ========================================================================== */
.jij-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--jij-light-2); color: var(--jij-navy); padding-block: 96px; border-top: 1px solid var(--jij-light-2); }
.jij-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .2; }
.jij-cta__shape { position: absolute; z-index: -1; top: -10%; bottom: -10%; left: 2%; width: 34%; background: rgba(12,69,253,.22); opacity: .2; transform: skewX(12deg); }
.jij-cta__inner { text-align: center; max-width: 1090px; }
.jij-cta__title { font-family: var(--jij-font-display); font-weight: 700; font-size: 36px!important; line-height: 40px; }
.jij-cta__text { margin: 28px auto 0; max-width: 1039px; font-size: 20px!important; line-height: 28px; }
.jij-cta__btn {
  margin-top: 40px; min-width: min(423px, 100%); border-radius: 16px; font-size: 19px!important;
  box-shadow: 0 20px 25px -5px #ffedd5, 0 8px 10px -6px #ffedd5;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.jij-footer { background: var(--jij-ink); border-top: 1px solid rgba(241,245,249,.9); padding-block: 72px 0; color: var(--jij-muted-2); }
.jij-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr auto; gap: 40px; align-items: start;
}
.jij-footer__brand { display: flex; align-items: center; gap: 12px; }
.jij-footer__brand img { width: 42px; height: 43px; object-fit: contain; }
.jij-footer__brand span {
  font-family: var(--jij-font-brand); font-weight: 600; font-size: 15px; line-height: 21px; text-transform: uppercase; color: var(--jij-white); max-width: 174px;
}
.jij-footer__tag { margin-top: 20px; font-family: var(--jij-font-ui); font-size: 14px!important; line-height: 22.75px; max-width: 251px; }
.jij-footer__social { display: flex; gap: 16px; margin-top: 24px; }
.jij-footer__social a {
  width: 40px; height: 40px; border-radius: 50%; background: var(--jij-white); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s;
}
.jij-footer__social a:hover { transform: translateY(-2px); background: var(--jij-gold); }
.jij-footer__social img { width: 20px; height: 20px; }
.jij-footer__social a.is-full { background: transparent; }
.jij-footer__social a.is-full img { width: 40px; height: 40px; border-radius: 50%; }
.jij-footer__social a.is-full:hover img { filter: brightness(1.1); }

.jij-footer__h { font-family: var(--jij-font-ui); font-weight: 700; font-size: 16px!important; line-height: 24px; color: #fff; }
.jij-footer__h + .jij-footer__h, .jij-footer__block + .jij-footer__h { margin-top: 28px; }
.jij-footer__list { margin-top: 10px; font-family: var(--jij-font-ui); font-size: 14px!important; line-height: 28px; }
.jij-footer__list a:hover { color: var(--jij-white); }
.jij-footer__block { margin-top: 10px; font-family: var(--jij-font-ui); font-size: 14px!important; line-height: 28px; }
.jij-footer__block a:hover { color: var(--jij-white); }

.jij-footer__note { margin-top: 8px; font-family: var(--jij-font-ui); font-size: 14px!important; line-height: 20px; color: #dbeafe; max-width: 220px; }
.jij-footer__form { margin-top: 20px; display: grid; gap: 16px; max-width: 272px; }
.jij-footer__input {
  height: 50px; width: 100%; border-radius: 12px; border: 1px solid #e2e8f0; background: var(--jij-white);
  padding: 0 16px; font-family: var(--jij-font-ui); font-size: 16px!important; color: var(--jij-navy);
}
.jij-footer__input::placeholder { color: #9ca3af; }
.jij-footer__submit {
  height: 48px; border-radius: 12px; border: 0; background: var(--jij-blue-btn); color: #fff;
  font-family: var(--jij-font-ui); font-weight: 700; font-size: 16px!important; transition: background .15s;
}
.jij-footer__submit:hover { background: #1d4ed8; }
.jij-footer__badges { display: grid; gap: 16px; justify-items: center; }
.jij-footer__badges img { width: 120px; height: auto; }

.jij-footer__bottom {
  margin-top: 64px; padding-block: 32px; border-top: 1px solid rgba(241,245,249,.9);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--jij-font-ui); font-size: 12px!important; line-height: 16px; color: var(--jij-muted);
}
.jij-footer__legal { display: flex; flex-wrap: wrap; gap: 32px; font-weight: 500; }
.jij-footer__legal a:hover { color: var(--jij-white); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1400px) {
  .jij-nav__menu { gap: 28px; }
  .jij-nav__link { font-size: 16px!important; }
  .jij-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr; }
  .jij-footer__badges { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 1180px) {
  .jij-hero__inner { grid-template-columns: 1fr; gap: 56px; padding-block: 88px 72px; }
  .jij-snapshot-wrap { justify-self: stretch; max-width: none; }
  .jij-oct7__inner { grid-template-columns: minmax(280px, 380px) 1fr; gap: 56px; }
  .jij-carousel { grid-auto-columns: calc((100% - 32px) / 2); gap: 32px; }
  .jij-mission__grid { grid-template-columns: 1fr; }
  .jij-panel--left { border-radius: 24px 24px 0 0; --jij-panel-bw: 1px 1px .5px 1px; }
  .jij-panel--right { border-radius: 0 0 24px 24px; --jij-panel-bw: .5px 1px 1px 1px; }
  .jij-panel { min-height: 520px; padding-top: 220px; }
}

@media (max-width: 1024px) {
  .jij-nav__toggle { display: inline-flex; }
  .jij-nav__menu {
    /* absolute (not fixed): backdrop-filter on the header makes it the containing block anyway */
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 96px); height: calc(100dvh - 96px);
    z-index: 40; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--jij-navy); padding: 16px var(--jij-gutter) 32px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .jij-nav.is-open .jij-nav__menu { transform: translateX(0); }
  .jij-nav.is-open .jij-nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .jij-nav.is-open .jij-nav__toggle span:nth-child(2) { opacity: 0; }
  .jij-nav.is-open .jij-nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .jij-nav__item { border-bottom: 1px solid rgba(255,255,255,.08); }
  .jij-nav__link { width: 100%; justify-content: space-between; padding: 18px 0; font-size: 18px!important; }
  .jij-nav__link::after { display: none; }
  .jij-nav__sub {
    position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    background: transparent; padding: 0 0 12px; display: none;
  }
  .jij-nav__item.is-open > .jij-nav__sub { display: block; }
  .jij-nav__item:hover > .jij-nav__sub { display: none; }
  .jij-nav__item.is-open:hover > .jij-nav__sub { display: block; }
  .jij-nav__cta-mobile { display: inline-flex; margin-top: 24px; }
  .jij-nav__cta { display: none; }
  .jij-mission__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .jij-press__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .jij-press__label { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); padding: 0 0 20px; font-size: 28px!important; line-height: 34px; }
  .jij-press__label span { max-width: none; }
  .jij-press__logos { justify-content: center; gap: 24px 40px; }
  .jij-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --jij-gutter: 16px; }
  .jij-nav__inner { min-height: 80px; }
  .jij-nav__menu { height: calc(100vh - 80px); height: calc(100dvh - 80px); }
  .jij-brand__logo { width: 42px; height: 44px; }
  .jij-brand__name { font-size: 15px!important; line-height: 20px; max-width: 170px; }
  .jij-hero { min-height: 0; }
  .jij-hero__title { letter-spacing: -0.04em; }
  .jij-hero__text { font-size: 18px!important; line-height: 28px; margin-top: 24px; }
  .jij-hero__actions .jij-btn { flex: 1 1 auto; }
  .jij-snapshot { padding: 24px 20px 28px; }
  .jij-snapshot__title { margin-left: 0; }
  .jij-snapshot__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .jij-snapshot__num { font-size: 40px!important; }
  .jij-snapshot__label { font-size: 14px!important; letter-spacing: 1px; }
  .jij-stories { padding-block: 64px 56px; }
  .jij-stories__head { align-items: start; flex-direction: column; margin-bottom: 32px; }
  .jij-carousel { grid-auto-columns: 100%; gap: 24px; }
  .jij-mission { padding-block: 56px 64px; }
  .jij-panel { padding: 200px 24px 32px; min-height: 0; }
  .jij-panel__text { font-size: 17px!important; line-height: 26px; }
  .jij-panel__tagline { font-size: 18px!important; line-height: 26px; }
  .jij-panel__title { font-size: 28px!important; line-height: 32px; }
  .jij-panel__icon { width: 72px; height: 74px; }
  .jij-oct7 { padding-block: 64px; }
  .jij-oct7__inner { grid-template-columns: 1fr; gap: 40px; }
  .jij-oct7__poster { max-width: 360px; margin-inline: auto; }
  .jij-oct7__title { font-size: 32px!important; }
  .jij-oct7__text { font-size: 17px!important; line-height: 27px; }
  .jij-oct7__shape { left: 55%; }
  .jij-oct7__actions .jij-btn { width: 100%; }
  .jij-cta { padding-block: 64px; }
  .jij-cta__title { font-size: 30px!important; line-height: 36px; }
  .jij-cta__text { font-size: 18px!important; line-height: 26px; }
  .jij-footer { padding-top: 48px; }
  .jij-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .jij-footer__badges { grid-auto-flow: column; justify-content: start; }
  .jij-footer__bottom { margin-top: 40px; flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .jij-page * { transition: none !important; scroll-behavior: auto !important; }
}