/* ==========================================================================
   JUST RIGHTS — Full Redesign
   Gold (#d4af37) + Black — Premium Law Firm
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d4af37;
  --gold-hover: #c19b2e;
  --gold-light: #f5e6b8;
  --black: #0a0a0a;
  --dark: #141414;
  --charcoal: #1e1e1e;
  --gray-900: #222;
  --gray-700: #555;
  --gray-500: #888;
  --gray-300: #bbb;
  --gray-200: #ddd;
  --gray-100: #f2f2f2;
  --white: #fff;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, Helvetica Neue, sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all .3s var(--ease); }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--black); }

.jr-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Label / Eyebrow --- */
.jr-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.jr-label--light { color: var(--gold-light); }

.jr-gold-line {
  width: 50px;
  height: 2px;
  background: var(--gold);
  margin-top: 24px;
}

/* --- Buttons --- */
.jr-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .35s var(--ease);
  text-align: center;
}
.jr-btn--gold {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.jr-btn--gold:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,175,55,0.3);
}
.jr-btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.jr-btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.jr-btn--dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.jr-btn--dark:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.jr-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all .4s var(--ease);
}
.jr-nav.scrolled {
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(0,0,0,0.15);
}
.jr-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jr-nav__logo img {
  height: 42px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: opacity .3s;
}
.jr-nav__logo:hover img { opacity: 0.8; }

.jr-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.jr-nav__menu > li > a {
  display: block;
  padding: 10px 18px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  position: relative;
}
.jr-nav__menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 18px; right: 18px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}
.jr-nav__menu > li > a:hover,
.jr-nav__menu > li > a.active { color: var(--white); }
.jr-nav__menu > li > a:hover::after,
.jr-nav__menu > li > a.active::after { transform: scaleX(1); }

/* Dropdown */
.has-dropdown { position: relative; }
.jr-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--white);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .3s var(--ease);
  padding: 12px 0;
  border-top: 2px solid var(--gold);
}
.has-dropdown:hover .jr-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.jr-nav__dropdown li a {
  display: block;
  padding: 10px 24px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 400;
}
.jr-nav__dropdown li a:hover {
  color: var(--gold);
  background: var(--gray-100);
}

/* Language switcher */
.jr-nav__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 20px;
}
.jr-nav__lang a {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border: 1px solid transparent;
  transition: all .3s var(--ease);
}
.jr-nav__lang a:hover { color: rgba(255,255,255,0.8); }
.jr-nav__lang a.active {
  color: var(--gold);
  border-color: rgba(212,175,55,0.3);
}

/* Mobile toggle */
.jr-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.jr-nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all .3s;
}
.jr-nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.jr-nav__toggle.active span:nth-child(2) { opacity: 0; }
.jr-nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.jr-hero {
  position: relative;
  height: 100vh;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.jr-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.jr-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.65) 100%
  );
}
.jr-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 800px;
}
.jr-hero__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.4);
  padding: 8px 24px;
  margin-bottom: 32px;
}
.jr-hero__content h1 {
  font-family: var(--font-serif);
  font-size: 82px;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -1px;
}
.jr-hero__content h1 span {
  color: var(--gold);
  font-style: italic;
}
.jr-hero__content p {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 40px;
  font-weight: 300;
}
.jr-hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.jr-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.jr-hero__scroll span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.jr-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 1; height: 40px; }
  50% { opacity: 0.4; height: 24px; }
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.jr-about {
  padding: 120px 0;
}
.jr-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.jr-about__left h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
}
.jr-about__right p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-700);
  margin-bottom: 20px;
}

/* ==========================================================================
   MISSION SECTION
   ========================================================================== */
.jr-mission {
  padding: 120px 0;
  background: var(--dark);
  color: var(--white);
}
.jr-mission__header {
  text-align: center;
  margin-bottom: 80px;
}
.jr-mission__header h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.jr-mission__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.jr-mission__card {
  padding: 48px 36px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all .4s var(--ease);
  position: relative;
}
.jr-mission__card:hover {
  border-color: rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.04);
}
.jr-mission__number {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.3;
  margin-bottom: 24px;
  line-height: 1;
}
.jr-mission__card h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
}
.jr-mission__card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-500);
}

/* ==========================================================================
   EXPERTISE SECTION
   ========================================================================== */
.jr-expertise {
  padding: 120px 0;
  background: var(--gray-100);
}
.jr-expertise__header {
  text-align: center;
  margin-bottom: 64px;
}
.jr-expertise__header h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--black);
}
.jr-expertise__header .jr-gold-line {
  margin: 24px auto 0;
}
.jr-expertise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.jr-expertise__card {
  background: var(--white);
  padding: 48px 36px;
  display: block;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}
.jr-expertise__card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.jr-expertise__card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  transform: translateY(-4px);
  border-color: var(--gray-200);
}
.jr-expertise__card:hover::before {
  transform: scaleX(1);
}
.jr-expertise__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--gold);
  border: 1px solid var(--gold-light);
  margin-bottom: 28px;
  transition: all .3s var(--ease);
}
.jr-expertise__card:hover .jr-expertise__icon {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.jr-expertise__card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 14px;
  line-height: 1.3;
}
.jr-expertise__card p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
  margin-bottom: 20px;
}
.jr-expertise__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.5px;
  transition: color .3s;
}
.jr-expertise__card:hover .jr-expertise__link { color: var(--gold-hover); }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.jr-cta {
  padding: 100px 0;
  background: var(--white);
}
.jr-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 64px;
  background: var(--gold);
  position: relative;
  overflow: hidden;
}
.jr-cta__inner::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px;
  height: 200px;
  border: 40px solid rgba(255,255,255,0.1);
  border-radius: 50%;
}
.jr-cta__text { position: relative; z-index: 1; }
.jr-cta__text h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 8px;
}
.jr-cta__text p {
  font-size: 16px;
  color: rgba(0,0,0,0.6);
  margin: 0;
}
.jr-cta .jr-btn--dark {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.jr-footer {
  background: var(--black);
  color: var(--gray-500);
  padding-top: 80px;
}
.jr-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.jr-footer__logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
}
.jr-footer__brand p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-500);
}
.jr-footer__links h4,
.jr-footer__contact h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}
.jr-footer__links ul li { margin-bottom: 10px; }
.jr-footer__links ul li a {
  font-size: 14px;
  color: var(--gray-500);
}
.jr-footer__links ul li a:hover { color: var(--gold); }
.jr-footer__contact p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 12px;
}
.jr-footer__contact p i {
  color: var(--gold);
  width: 18px;
  margin-right: 8px;
}
.jr-footer__contact a { color: var(--gray-500); }
.jr-footer__contact a:hover { color: var(--gold); }

.jr-footer__bottom {
  padding: 24px 0;
  text-align: center;
}
.jr-footer__bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.5px;
}

/* ==========================================================================
   PAGE BANNER (Inner pages)
   ========================================================================== */
.jr-page-banner {
  position: relative;
  padding: 180px 0 100px;
  background: var(--dark);
  overflow: hidden;
}
.jr-page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 50%, rgba(212,175,55,0.08) 100%);
}
.jr-page-banner .jr-container { position: relative; z-index: 1; }
.jr-page-banner h1 {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}
.jr-page-banner p {
  font-size: 18px;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  max-width: 600px;
}
.jr-page-banner .jr-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.jr-breadcrumb a { color: var(--gold); }
.jr-breadcrumb a:hover { color: var(--gold-light); }
.jr-breadcrumb span { color: rgba(255,255,255,0.3); }

/* ==========================================================================
   CONTENT SECTION (generic)
   ========================================================================== */
.jr-content {
  padding: 100px 0;
}
.jr-content h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 20px;
}
.jr-content h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 14px;
}
.jr-content p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-700);
  margin-bottom: 20px;
}
.jr-content ul, .jr-content ol {
  margin-bottom: 20px;
  padding-left: 24px;
}
.jr-content ul { list-style: disc; }
.jr-content ol { list-style: decimal; }
.jr-content li {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-700);
  margin-bottom: 8px;
}
.jr-content a.jr-link {
  color: var(--gold);
  font-weight: 500;
  border-bottom: 1px solid rgba(212,175,55,0.3);
}
.jr-content a.jr-link:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

/* ==========================================================================
   TEAM SECTION
   ========================================================================== */
.jr-team-intro {
  padding: 100px 0 60px;
  text-align: center;
}
.jr-team-intro h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 16px;
}
.jr-team-intro p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--gray-700);
  max-width: 640px;
  margin: 0 auto;
}
.jr-team-section {
  padding: 0 0 120px;
}
.jr-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.jr-team-card {
  display: block;
  background: var(--white);
  overflow: hidden;
  transition: all .5s var(--ease);
  position: relative;
  text-decoration: none;
}
.jr-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.12);
}
.jr-team-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.jr-team-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  transition: opacity .4s var(--ease);
}
.jr-team-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: grayscale(15%);
}
.jr-team-card:hover .jr-team-card__img-wrap img {
  transform: scale(1.05);
  filter: grayscale(0%);
}
.jr-team-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 32px 32px;
  z-index: 2;
}
.jr-team-card__overlay h3 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.jr-team-card__overlay .jr-team-card__role {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
}
.jr-team-card__body {
  padding: 28px 32px 32px;
  border: 1px solid var(--gray-200);
  border-top: none;
  transition: border-color .4s var(--ease);
}
.jr-team-card:hover .jr-team-card__body {
  border-color: var(--gold);
}
.jr-team-card__body p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 20px;
}
.jr-team-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: gap .3s var(--ease);
}
.jr-team-card:hover .jr-team-card__link {
  color: var(--gold-hover);
  gap: 12px;
}

/* ==========================================================================
   LAWYER PROFILE
   ========================================================================== */
.jr-profile {
  padding: 100px 0;
}
.jr-profile__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}
.jr-profile__sidebar {
  position: sticky;
  top: 120px;
}
.jr-profile__photo-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.jr-profile__photo-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0.4;
}
.jr-profile__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.jr-profile__info {
  margin-top: 28px;
}
.jr-profile__info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
  color: var(--gray-700);
}
.jr-profile__info-item:last-child { border-bottom: none; }
.jr-profile__info-item i {
  color: var(--gold);
  width: 16px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
.jr-profile__info-item a { color: var(--gray-700); }
.jr-profile__info-item a:hover { color: var(--gold); }

.jr-profile__main {}
.jr-profile__main h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 6px;
}
.jr-profile__main .jr-profile__role {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
  display: block;
}
.jr-profile__main p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-700);
  margin-bottom: 20px;
}

/* Profile highlights row */
.jr-profile__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.jr-profile__highlight {
  text-align: center;
  padding: 28px 16px;
  background: var(--gray-100);
  border-top: 2px solid var(--gold);
}
.jr-profile__highlight-number {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.jr-profile__highlight-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-700);
}

/* Profile CTA card */
.jr-profile__contact-card {
  margin-top: 40px;
  padding: 32px;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.jr-profile__contact-card p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  margin: 0;
}
.jr-profile__contact-card strong {
  display: block;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ==========================================================================
   CASE CARDS
   ========================================================================== */
.jr-cases-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.jr-case-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  padding: 40px;
  transition: all .3s var(--ease);
}
.jr-case-card:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.jr-case-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.jr-case-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
}
.jr-case-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid;
}
.jr-case-card__badge--won {
  color: #2e7d32;
  border-color: #c8e6c9;
  background: #e8f5e9;
}
.jr-case-card__badge--lost {
  color: #c62828;
  border-color: #ffcdd2;
  background: #ffebee;
}
.jr-case-card__badge--pending {
  color: #e65100;
  border-color: #ffe0b2;
  background: #fff3e0;
}
.jr-case-card__badge--settlement {
  color: #1565c0;
  border-color: #bbdefb;
  background: #e3f2fd;
}
.jr-case-card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 16px;
}
.jr-case-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.jr-case-card__link:hover { color: var(--gold-hover); }

/* ==========================================================================
   FEES SECTION
   ========================================================================== */
.jr-fees-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
.jr-fee-card {
  background: var(--gray-100);
  padding: 40px;
  border-left: 3px solid var(--gold);
}
.jr-fee-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 14px;
}
.jr-fee-card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 0;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.jr-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.jr-contact-card {
  text-align: center;
  padding: 48px 32px;
  background: var(--gray-100);
  transition: all .3s var(--ease);
}
.jr-contact-card:hover {
  background: var(--white);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
.jr-contact-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
  color: var(--gold);
  border: 1px solid var(--gold-light);
}
.jr-contact-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 10px;
}
.jr-contact-card p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
}
.jr-contact-card a {
  color: var(--gray-700);
}
.jr-contact-card a:hover {
  color: var(--gold);
}

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

/* --- Mobile nav overlay backdrop --- */
.jr-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.jr-nav__overlay.visible {
  display: block;
  opacity: 1;
}

/* ========== TABLET (max 991px) ========== */
@media (max-width: 991px) {
  .jr-container { padding: 0 20px; }

  /* --- Navigation --- */
  .jr-nav { padding: 14px 0; }
  .jr-nav.scrolled { padding: 10px 0; }
  .jr-nav__toggle { display: flex; }
  .jr-nav__menu {
    position: fixed;
    top: 0; right: -100%;
    width: 300px;
    height: 100vh;
    height: 100dvh;
    background: var(--dark);
    flex-direction: column;
    align-items: stretch;
    padding: 80px 24px 40px;
    gap: 0;
    transition: right .35s var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1001;
  }
  .jr-nav__menu.open { right: 0; }
  .jr-nav__menu > li > a {
    padding: 16px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .jr-nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255,255,255,0.04);
    border-top: none;
    display: none;
    padding: 0;
  }
  .dropdown-open .jr-nav__dropdown { display: block; }
  .jr-nav__dropdown li a {
    color: rgba(255,255,255,0.6);
    padding: 12px 16px;
    font-size: 14px;
  }
  .jr-nav__dropdown li a:hover { color: var(--gold); background: transparent; }
  .jr-nav__lang {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
  }

  /* --- Homepage sections --- */
  .jr-hero__content h1 { font-size: 54px; }
  .jr-about__grid { grid-template-columns: 1fr; gap: 40px; }
  .jr-about__left h2 { font-size: 34px; }
  .jr-mission__grid { grid-template-columns: 1fr; gap: 24px; }
  .jr-mission__header h2 { font-size: 34px; }
  .jr-expertise__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .jr-expertise__header h2 { font-size: 34px; }
  .jr-cta__inner { flex-direction: column; text-align: center; padding: 48px 32px; }
  .jr-cta__text h2 { font-size: 26px; }
  .jr-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* --- Inner pages --- */
  .jr-page-banner { padding: 140px 0 70px; }
  .jr-page-banner h1 { font-size: 38px; }
  .jr-page-banner p { font-size: 16px; }
  .jr-team-intro h2 { font-size: 34px; }
  .jr-team-section { padding: 0 0 80px; }
  .jr-team-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .jr-profile__grid { grid-template-columns: 1fr; gap: 40px; }
  .jr-profile__sidebar { position: static; max-width: 220px; margin: 0 auto; }
  .jr-profile__highlights { grid-template-columns: repeat(3, 1fr); }
  .jr-profile__contact-card { flex-direction: column; text-align: center; }
  .jr-fees-grid { grid-template-columns: 1fr; }
  .jr-contact-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 48px; }
}

/* ========== MOBILE (max 768px) ========== */
@media (max-width: 768px) {
  .jr-container { padding: 0 16px; }

  /* --- Hero --- */
  .jr-hero { min-height: 100vh; min-height: 100dvh; }
  .jr-hero__content h1 { font-size: 40px; }
  .jr-hero__content p { font-size: 15px; margin-bottom: 32px; }
  .jr-hero__badge { font-size: 10px; padding: 6px 16px; letter-spacing: 2px; }
  .jr-hero__actions { flex-direction: column; align-items: center; }
  .jr-hero__scroll { display: none; }
  .jr-btn { padding: 14px 28px; width: 100%; max-width: 300px; font-size: 12px; }

  /* --- Homepage sections --- */
  .jr-about { padding: 64px 0; }
  .jr-about__left h2 { font-size: 28px; }
  .jr-about__right p { font-size: 15px; }
  .jr-mission { padding: 64px 0; }
  .jr-mission__header { margin-bottom: 48px; }
  .jr-mission__header h2 { font-size: 30px; }
  .jr-mission__card { padding: 28px 20px; }
  .jr-mission__number { font-size: 36px; margin-bottom: 16px; }
  .jr-mission__card h3 { font-size: 22px; }
  .jr-mission__card p { font-size: 14px; }
  .jr-expertise { padding: 64px 0; }
  .jr-expertise__grid { grid-template-columns: 1fr; gap: 16px; }
  .jr-expertise__header h2 { font-size: 30px; }
  .jr-expertise__header { margin-bottom: 40px; }
  .jr-expertise__card { padding: 28px 20px; }
  .jr-expertise__icon { width: 52px; height: 52px; font-size: 22px; margin-bottom: 20px; }
  .jr-expertise__card h3 { font-size: 19px; }
  .jr-expertise__card p { font-size: 14px; }
  .jr-cta { padding: 48px 0; }
  .jr-cta__inner { padding: 32px 20px; }
  .jr-cta__text h2 { font-size: 24px; }
  .jr-cta__text p { font-size: 14px; }

  /* --- Footer --- */
  .jr-footer { padding-top: 48px; }
  .jr-footer__top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
  .jr-footer__brand p { font-size: 13px; }
  .jr-footer__links h4,
  .jr-footer__contact h4 { margin-bottom: 12px; font-size: 11px; }
  .jr-footer__links ul li { margin-bottom: 8px; }
  .jr-footer__links ul li a { font-size: 13px; }
  .jr-footer__contact p { font-size: 13px; margin-bottom: 8px; }
  .jr-footer__bottom p { font-size: 12px; }

  /* --- Inner pages --- */
  .jr-page-banner { padding: 120px 0 48px; }
  .jr-page-banner h1 { font-size: 30px; }
  .jr-page-banner p { font-size: 15px; }
  .jr-breadcrumb { font-size: 11px; margin-bottom: 16px; }
  .jr-content { padding: 48px 0; }
  .jr-content h2 { font-size: 28px; }
  .jr-content h3 { font-size: 22px; }
  .jr-content p { font-size: 15px; }

  /* Team */
  .jr-team-intro { padding: 64px 0 40px; }
  .jr-team-intro h2 { font-size: 28px; }
  .jr-team-intro p { font-size: 15px; }
  .jr-team-section { padding: 0 0 64px; }
  .jr-team-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 24px; }
  .jr-team-card__overlay h3 { font-size: 24px; }
  .jr-team-card__overlay .jr-team-card__role { font-size: 11px; letter-spacing: 1.5px; }
  .jr-team-card__body { padding: 20px 24px 24px; }
  .jr-team-card__body p { font-size: 14px; margin-bottom: 16px; }

  /* Profile */
  .jr-profile { padding: 48px 0; }
  .jr-profile__grid { gap: 32px; }
  .jr-profile__photo-wrap { width: 160px; height: 160px; }
  .jr-profile__photo { width: 160px; height: 160px; }
  .jr-profile__main h2 { font-size: 28px; }
  .jr-profile__main p { font-size: 15px; }
  .jr-profile__highlights { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
  .jr-profile__highlight { padding: 20px 12px; }
  .jr-profile__highlight-number { font-size: 28px; }
  .jr-profile__highlight-label { font-size: 10px; }
  .jr-profile__contact-card { padding: 24px; flex-direction: column; text-align: center; gap: 16px; }
  .jr-profile__contact-card strong { font-size: 19px; }
  .jr-profile__contact-card p { font-size: 14px; }

  /* Cases */
  .jr-case-card { padding: 24px; }
  .jr-case-card__header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .jr-case-card h3 { font-size: 19px; }
  .jr-case-card p { font-size: 14px; }
  .jr-case-card__badge { font-size: 10px; padding: 4px 12px; }

  /* Fees */
  .jr-fee-card { padding: 28px 20px; }
  .jr-fee-card h3 { font-size: 19px; }
  .jr-fee-card p { font-size: 14px; }

  /* Contact */
  .jr-contact-card { padding: 32px 20px; }
  .jr-contact-card__icon { width: 52px; height: 52px; font-size: 20px; }
  .jr-contact-card h3 { font-size: 18px; }
  .jr-contact-card p { font-size: 14px; }
}

/* ========== SMALL MOBILE (max 480px) ========== */
@media (max-width: 480px) {
  /* --- Hero --- */
  .jr-hero__content h1 { font-size: 32px; }
  .jr-hero__content p { font-size: 14px; }
  .jr-hero__badge { font-size: 9px; padding: 5px 12px; letter-spacing: 1.5px; margin-bottom: 24px; }
  .jr-hero__content { padding: 0 12px; }

  /* --- Homepage --- */
  .jr-about__left h2 { font-size: 24px; }
  .jr-mission__header h2 { font-size: 26px; }
  .jr-mission__card h3 { font-size: 20px; }
  .jr-expertise__header h2 { font-size: 26px; }
  .jr-cta__text h2 { font-size: 22px; }

  /* --- Inner pages --- */
  .jr-page-banner { padding: 110px 0 40px; }
  .jr-page-banner h1 { font-size: 26px; }
  .jr-page-banner p { font-size: 14px; }
  .jr-content h2 { font-size: 24px; }
  .jr-content h3 { font-size: 20px; }

  /* Profile */
  .jr-profile__photo-wrap { width: 130px; height: 130px; }
  .jr-profile__photo { width: 130px; height: 130px; }
  .jr-profile__main h2 { font-size: 24px; }
  .jr-profile__highlights { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .jr-profile__highlight { padding: 16px 8px; }
  .jr-profile__highlight-number { font-size: 24px; }
  .jr-profile__highlight-label { font-size: 9px; letter-spacing: 0.5px; }

  /* Team */
  .jr-team-intro h2 { font-size: 24px; }
  .jr-team-card__overlay h3 { font-size: 22px; }
  .jr-team-card__overlay { padding: 32px 20px 24px; }

  /* Cases */
  .jr-case-card { padding: 20px 16px; }
  .jr-case-card h3 { font-size: 17px; }

  /* Footer */
  .jr-footer__logo { height: 32px; }
}

/* ========== TOUCH DEVICE IMPROVEMENTS ========== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .jr-nav__menu > li > a { padding: 16px 12px; }
  .jr-nav__dropdown li a { padding: 14px 16px; min-height: 44px; display: flex; align-items: center; }
  .jr-nav__toggle { padding: 12px; min-width: 44px; min-height: 44px; justify-content: center; }
  .jr-btn { min-height: 48px; }
  .jr-footer__links ul li a { padding: 4px 0; min-height: 36px; display: inline-flex; align-items: center; }
  .jr-case-card__link { min-height: 44px; display: inline-flex; align-items: center; }
  .jr-profile__info-item a { min-height: 36px; display: inline-flex; align-items: center; }

  /* Remove hover effects that don't work on touch */
  .jr-team-card:hover { transform: none; box-shadow: none; }
  .jr-expertise__card:hover { transform: none; }
  .jr-team-card:active { transform: scale(0.98); }
  .jr-expertise__card:active { transform: scale(0.98); }
}

/* ========== SAFE AREA (NOTCH) SUPPORT ========== */
@supports (padding: env(safe-area-inset-top)) {
  .jr-nav { padding-top: max(14px, env(safe-area-inset-top)); }
  .jr-nav.scrolled { padding-top: max(10px, env(safe-area-inset-top)); }
  .jr-footer__bottom { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .jr-nav__menu { padding-top: max(80px, calc(60px + env(safe-area-inset-top))); }
}

/* ==========================================================================
   INTERNATIONAL COOPERATION SECTION  (homepage, after Mission)
   ========================================================================== */
.jr-intl {
  padding: 120px 0;
  background: var(--white);
}
.jr-intl__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.jr-intl__header h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.25;
}
.jr-intl__header .jr-gold-line { margin: 24px auto 0; }
.jr-intl__intro {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-700);
}
.jr-intl__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--gray-200);
}
.jr-intl__card {
  position: relative;
  padding: 48px 36px 44px;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: background .4s var(--ease);
}
.jr-intl__card:last-child { border-right: none; }
.jr-intl__card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.jr-intl__card:hover::before { transform: scaleX(1); }
.jr-intl__card--feature {
  background: rgba(212,175,55,0.06);
}
.jr-intl__card--feature::before { transform: scaleX(1); }
.jr-intl__tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.jr-intl__card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  margin: 0 0 24px;
  flex: 1 1 auto;
}
.jr-intl__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--gold);
  border-bottom: 1px solid rgba(212,175,55,0.35);
  padding-bottom: 3px;
  align-self: flex-start;
}
.jr-intl__link:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

/* ==========================================================================
   FOUNDER BAND  (homepage, after Expertise)
   ========================================================================== */
.jr-founder {
  padding: 100px 0;
  background: var(--dark);
  color: var(--white);
}
.jr-founder__inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: center;
}
.jr-founder__photo {
  position: relative;
}
.jr-founder__photo::before {
  content: '';
  position: absolute;
  top: 16px; left: 16px; right: -16px; bottom: -16px;
  border: 1px solid rgba(212,175,55,0.4);
}
.jr-founder__photo img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%);
  transition: filter .4s var(--ease);
}
.jr-founder__inner:hover .jr-founder__photo img { filter: grayscale(0); }
.jr-founder__body h2 {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 12px;
}
.jr-founder__body h2 span { color: var(--gold); display: block; font-size: 20px; margin-top: 6px; }
.jr-founder__body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-500);
  margin-bottom: 28px;
  max-width: 620px;
}
.jr-founder__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.jr-founder__meta span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.jr-founder__meta span strong { color: var(--gold); font-weight: 700; }

/* ==========================================================================
   INSIGHTS  (hub + articles)
   ========================================================================== */
.jr-insights-intro {
  max-width: 780px;
  margin-bottom: 56px;
}
.jr-insights-intro p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--gray-700);
  margin-bottom: 16px;
}
.jr-insights-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--gray-200);
}
.jr-insight-card {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 40px 8px;
  border-bottom: 1px solid var(--gray-200);
  transition: all .35s var(--ease);
}
.jr-insight-card:hover {
  background: var(--gray-100);
  padding-left: 24px;
  padding-right: 24px;
}
.jr-insight-card__num {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  opacity: .45;
  line-height: 1;
  transition: opacity .35s var(--ease);
}
.jr-insight-card:hover .jr-insight-card__num { opacity: 1; }
.jr-insight-card__body h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 8px;
}
.jr-insight-card__body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
}
.jr-insight-card__arrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--gold);
  white-space: nowrap;
}
.jr-insight-card--soon {
  opacity: .55;
  cursor: default;
}
.jr-insight-card--soon:hover { background: transparent; padding-left: 8px; padding-right: 8px; }
.jr-insight-card--soon .jr-insight-card__arrow {
  color: var(--gray-500);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Article */
.jr-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.jr-article__meta .jr-article__num { color: var(--gold); }
.jr-article__dek {
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  line-height: 1.55;
  color: var(--gray-900);
  margin-bottom: 40px;
}
.jr-article {
  max-width: 780px;
}
.jr-article blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.6;
  color: var(--gray-900);
}
.jr-article-more {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 2px solid var(--black);
}
.jr-article-more h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 24px;
}
.jr-article-more ul { display: flex; flex-direction: column; }
.jr-article-more li {
  border-bottom: 1px solid var(--gray-200);
}
.jr-article-more li a,
.jr-article-more li span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--black);
}
.jr-article-more li a:hover { color: var(--gold); padding-left: 8px; }
.jr-article-more li span { color: var(--gray-500); }
.jr-article-more li em {
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-500);
  white-space: nowrap;
}
.jr-note {
  margin-top: 56px;
  padding: 24px 28px;
  background: var(--gray-100);
  border-left: 3px solid var(--gold);
  font-size: 13px;
  line-height: 1.75;
  color: var(--gray-700);
}
.jr-note p { font-size: 13px; margin: 0; }

/* Profile key-experience list (lawyer page) */
.jr-profile__keylist {
  margin: 8px 0 40px;
  padding: 28px 32px;
  background: var(--gray-100);
  border-left: 3px solid var(--gold);
}
.jr-profile__keylist h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 16px;
}
.jr-profile__keylist ul { list-style: none; }
.jr-profile__keylist li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-700);
}
.jr-profile__keylist li:last-child { margin-bottom: 0; }
.jr-profile__keylist li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 1px;
  background: var(--gold);
}
.jr-profile__pullquote {
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--gray-200);
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.55;
  color: var(--gray-900);
}

/* ========== RESPONSIVE — new components ========== */
@media (max-width: 991px) {
  .jr-intl { padding: 80px 0; }
  .jr-intl__header h2 { font-size: 34px; }
  .jr-intl__grid { grid-template-columns: 1fr; }
  .jr-intl__card { border-right: none; border-bottom: 1px solid var(--gray-200); }
  .jr-intl__card:last-child { border-bottom: none; }
  .jr-founder { padding: 72px 0; }
  .jr-founder__inner { grid-template-columns: 200px 1fr; gap: 40px; }
  .jr-founder__body h2 { font-size: 28px; }
  .jr-insight-card { grid-template-columns: 60px 1fr; gap: 20px; }
  .jr-insight-card__arrow { grid-column: 2; }
  .jr-article__dek { font-size: 21px; }
}
@media (max-width: 768px) {
  .jr-intl { padding: 64px 0; }
  .jr-intl__header { margin-bottom: 40px; }
  .jr-intl__header h2 { font-size: 30px; }
  .jr-intl__intro { font-size: 15px; }
  .jr-intl__card { padding: 32px 24px; }
  .jr-intl__tag { font-size: 12px; letter-spacing: 2px; }
  .jr-intl__card p { font-size: 14px; }
  .jr-founder { padding: 56px 0; }
  .jr-founder__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .jr-founder__photo { max-width: 200px; margin: 0 auto; }
  .jr-founder__photo::before { display: none; }
  .jr-founder__body h2 { font-size: 26px; }
  .jr-founder__body h2 span { font-size: 17px; }
  .jr-founder__body p { font-size: 15px; margin-left: auto; margin-right: auto; }
  .jr-founder__meta { justify-content: center; }
  .jr-insights-intro p { font-size: 15px; }
  /* Number beside the text, in one column shared by the whole list (subgrid), so every card's text
     starts at the same place however short it is. Browsers without subgrid keep a per-card auto column. */
  .jr-insights-grid { display: grid; grid-template-columns: auto 1fr; }
  .jr-insight-card { grid-column: 1 / -1; grid-template-columns: auto 1fr; grid-template-columns: subgrid; gap: 10px; padding: 28px 0; }
  .jr-insight-card:hover { padding-left: 0; padding-right: 0; }
  .jr-insight-card__num { font-size: 26px; }
  .jr-insight-card__body h3 { font-size: 21px; }
  .jr-insight-card__body p { font-size: 14px; }
  .jr-article__dek { font-size: 19px; margin-bottom: 28px; }
  .jr-article__meta { font-size: 11px; letter-spacing: 1.5px; gap: 10px; }
  .jr-article blockquote { font-size: 18px; padding-left: 20px; margin: 24px 0; }
  .jr-article-more { margin-top: 48px; }
  .jr-article-more h2 { font-size: 22px; }
  .jr-article-more li a, .jr-article-more li span { font-size: 17px; padding: 14px 0; }
  .jr-profile__keylist { padding: 22px 20px; }
  .jr-profile__keylist h3 { font-size: 19px; }
  .jr-profile__keylist li { font-size: 14px; }
  .jr-profile__pullquote { font-size: 18px; }
}
@media (max-width: 480px) {
  .jr-intl__header h2 { font-size: 26px; }
  .jr-founder__body h2 { font-size: 22px; }
  .jr-insight-card__body h3 { font-size: 19px; }
}

/* ========== NAV: tighter spacing once the menu carries Insights + 3 languages ========== */
@media (min-width: 992px) and (max-width: 1199px) {
  .jr-nav__menu > li > a { padding: 10px 11px; font-size: 12px; letter-spacing: .4px; }
  .jr-nav__menu > li > a::after { left: 11px; right: 11px; }
  .jr-nav__lang { margin-left: 8px; padding-left: 12px; }
  .jr-nav__lang a { padding: 4px 5px; font-size: 11px; letter-spacing: .5px; }
}

/* Profile: practice line + affiliations under the role */
.jr-profile__practice {
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--gray-700) !important;
  margin-bottom: 6px !important;
  line-height: 1.7 !important;
}
.jr-profile__affil {
  font-size: 13px !important;
  color: var(--gray-500) !important;
  margin-bottom: 32px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
  line-height: 1.7 !important;
}
@media (max-width: 768px) {
  .jr-profile__practice, .jr-profile__affil { font-size: 12px !important; }
}

/* Keep nav items and the profile CTA button on one line now that the menu is longer */
.jr-nav__menu > li > a { white-space: nowrap; }
.jr-profile__contact-card .jr-btn { white-space: nowrap; }
@media (max-width: 991px) {
  .jr-nav__menu > li > a { white-space: normal; }
}

/* ==========================================================================
   LIGHT PASS
   The site was built on large blocks of solid black. This pass keeps the
   gold-and-black identity but moves the weight out of the page body: the
   Mission band, the Founder band and the inner-page banners become warm
   light surfaces, hairlines warm up, and the dark tone is reserved for the
   three places that need to anchor it — the hero, the navigation bar and
   the footer.
   ========================================================================== */

:root {
  --cream: #faf9f5;          /* warm off-white — Mission, page banners */
  --sand:  #f2efe7;          /* one step deeper — Expertise            */
  --line:  #e6e2d8;          /* warm hairline                          */
  --gray-100: #f7f5f0;       /* warmed (was #f2f2f2)                   */
  --gray-200: #e6e2d8;       /* warmed hairline (was #ddd)             */
}

/* --- Hero: let more of the photograph through --- */
.jr-hero__overlay {
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%,
                    rgba(10,10,10,0.58) 0%,
                    rgba(10,10,10,0.28) 55%,
                    rgba(10,10,10,0) 100%),
    linear-gradient(to bottom,
                    rgba(10,10,10,0.58) 0%,
                    rgba(10,10,10,0.26) 45%,
                    rgba(10,10,10,0.68) 100%);
}

/* --- Mission: dark band -> warm light band with white cards --- */
.jr-mission {
  background: var(--cream);
  color: var(--gray-700);
}
.jr-mission__header h2 { color: var(--black); }
.jr-mission .jr-label--light { color: var(--gold); }
.jr-mission__card {
  background: var(--white);
  border: 1px solid var(--line);
}
.jr-mission__card:hover {
  border-color: rgba(212,175,55,0.5);
  background: var(--white);
  box-shadow: 0 18px 50px rgba(0,0,0,0.06);
  transform: translateY(-3px);
}
.jr-mission__number { color: var(--gold); opacity: 0.5; }
.jr-mission__card h3 { color: var(--black); }
.jr-mission__card p  { color: var(--gray-700); }

/* --- Expertise: warm neutral --- */
.jr-expertise { background: var(--sand); }
.jr-expertise__card { border-color: var(--line); }

/* --- International cooperation: white, warm rules --- */
.jr-intl__grid { border-color: var(--line); }
.jr-intl__card { border-right-color: var(--line); }
@media (max-width: 991px) {
  .jr-intl__card { border-bottom-color: var(--line); }
}

/* --- Founder: dark band -> white band framed by hairlines --- */
.jr-founder {
  background: var(--white);
  color: var(--gray-700);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.jr-founder__photo::before {
  border-color: var(--gold);
  top: 20px; left: 20px; right: -20px; bottom: -20px;
}
.jr-founder__body h2 { color: var(--black); }
.jr-founder__body h2 span { color: var(--gold-hover); }
.jr-founder__body p { color: var(--gray-700); }
.jr-founder__meta { border-top-color: var(--line); }
.jr-founder__meta span { color: var(--gray-500); }
.jr-founder__meta span strong { color: var(--gold-hover); }

/* --- Inner-page banner: dark slab -> light headland --- */
.jr-page-banner {
  background: var(--cream);
  padding: 172px 0 72px;
  border-bottom: 1px solid var(--line);
}
.jr-page-banner::before { display: none; }   /* the dark gradient slab is gone */
.jr-page-banner h1 { color: var(--black); }
.jr-page-banner p  { color: var(--gray-700); }
.jr-breadcrumb span,
.jr-breadcrumb__current { color: var(--gray-500); }
.jr-breadcrumb a { color: var(--gold-hover); }
.jr-breadcrumb a:hover { color: var(--gold); }

/* --- Profile CTA card: dark slab -> warm panel --- */
.jr-profile__contact-card {
  background: var(--sand);
  border-left: 3px solid var(--gold);
}
.jr-profile__contact-card p { color: var(--gray-700); }
.jr-profile__contact-card strong { color: var(--black); }

/* --- Article furniture --- */
.jr-article-more { border-top: 1px solid var(--line); }
.jr-article-more h2 { position: relative; padding-top: 20px; }
.jr-article-more h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50px; height: 2px;
  background: var(--gold);
}

/* --- Footer: soften pure black by one step --- */
.jr-footer { background: var(--dark); }

@media (max-width: 991px) {
  .jr-page-banner { padding: 120px 0 48px; }
}
@media (max-width: 768px) {
  .jr-page-banner { padding: 104px 0 40px; }
}

/* --- Navigation: light bar once it has a background behind it ---------------
   Over the hero the bar stays transparent with the logo knocked out to white.
   The moment it sits on a page (inner pages, or the homepage after scrolling)
   it becomes a white bar with the logo in its natural black.               */
.jr-nav.scrolled {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,0.05);
}
.jr-nav.scrolled .jr-nav__logo img { filter: none; }
.jr-nav.scrolled .jr-nav__menu > li > a { color: var(--gray-700); }
.jr-nav.scrolled .jr-nav__menu > li > a:hover,
.jr-nav.scrolled .jr-nav__menu > li > a.active { color: var(--black); }
.jr-nav.scrolled .jr-nav__lang { border-left-color: var(--line); }
.jr-nav.scrolled .jr-nav__lang a { color: var(--gray-500); }
.jr-nav.scrolled .jr-nav__lang a:hover { color: var(--black); }
.jr-nav.scrolled .jr-nav__lang a.active {
  color: var(--gold-hover);
  border-color: rgba(212,175,55,0.45);
}
.jr-nav.scrolled .jr-nav__toggle span { background: var(--black); }
.jr-nav__toggle.active span { background: var(--black); }

/* Mobile drawer: light panel, whatever the bar behind it is doing */
@media (max-width: 991px) {
  .jr-nav__menu {
    background: var(--white);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 60px rgba(0,0,0,0.10);
  }
  .jr-nav__menu > li > a {
    color: var(--gray-700);
    border-bottom-color: var(--line);
  }
  .jr-nav__menu > li > a:hover,
  .jr-nav__menu > li > a.active { color: var(--black); }
  .jr-nav__dropdown { background: var(--gray-100); }
  .jr-nav__dropdown li a { color: var(--gray-500); }
  .jr-nav__dropdown li a:hover { color: var(--gold-hover); }
  .jr-nav__lang { border-top-color: var(--line); }
  .jr-nav__lang a { color: var(--gray-500); }
  .jr-nav__lang a:hover { color: var(--black); }
  .jr-nav__lang a.active { color: var(--gold-hover); border-color: rgba(212,175,55,0.45); }
}

/* Mobile drawer polish */
@media (max-width: 991px) {
  .jr-nav__toggle { position: relative; z-index: 1002; }  /* keep the close X above the drawer */
  .jr-nav__menu > li > a::after { display: none; }
  .jr-nav__menu > li > a.active { color: var(--gold-hover); }
  .jr-nav__lang {
    gap: 8px;
    padding-top: 20px;
    margin-top: 12px;
  }
  .jr-nav__lang a {
    padding: 9px 16px;
    border: 1px solid var(--line);
    font-size: 12px;
  }
  .jr-nav__lang a.active { border-color: rgba(212,175,55,0.6); }
}

/* The "more insights" list sits inside .jr-content, which sets list-style: disc — undo it */
.jr-article-more ul { list-style: none; padding-left: 0; margin: 0; }
.jr-article-more li { padding-left: 0; margin-bottom: 0; }

/* Hero: firm specialism line under the tagline */
.jr-hero__specialism {
  display: inline-block;
  margin: -18px 0 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(212,175,55,0.45);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 768px) {
  .jr-hero__specialism { font-size: 10px; letter-spacing: 2px; margin: -14px 0 26px; padding-top: 14px; }
}

/* ---------------------------------------------------------------------------
   Mobile horizontal-overflow fix.
   The drawer was parked off-screen with `right: -100%`, which is a real layout
   box sitting a full viewport-width to the right of the page. That widened the
   document, so .jr-container measured wider than the screen and every line of
   text wrapped too late and was then clipped by body{overflow-x:hidden}.
   Parking it with a transform instead takes it out of layout entirely.        */
@media (max-width: 991px) {
  .jr-nav__menu {
    right: 0;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
  }
  .jr-nav__menu.open { right: 0; transform: translateX(0); }
}

/* Team page with a single profile: centre the card instead of leaving half the grid empty */
.jr-team-grid > .jr-team-card:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 560px;
}

/* ---------------------------------------------------------------------------
   Justified running text, site-wide (client, 14 Sept 2026; extended on
   5 Oct 2026 to every block of running text, centred sections included).
   Paragraphs, lists, quotes and the text of cards, notices and articles are
   justified and hyphenated; each page's <html lang> picks the FR/NL/EN
   hyphenation rules, which keeps word gaps even in narrow cards and on phones.
   In sections centred by design the last line stays centred (text-align-last).
   Headings, buttons, menus, labels, the "more insights" link list and the
   display lines (two taglines, the mission's closing question) keep their own
   alignment.                                                                 */
p,
blockquote,
.jr-content li,
.jr-profile__keylist li,
.jr-hero__claim,
.jr-hero__notice-body {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.jr-hero__claim,
.jr-mission__header p,
.jr-expertise__header p,
.jr-intl__header p,
.jr-team-intro p,
.jr-contact-card p,
.jr-profile__highlight p,
.jr-footer__bottom p {
  text-align-last: center;
}
.jr-article-more p,
.jr-article-more li {
  text-align: inherit;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Article source list (Belgium insights): a quieter reference block after the text */
.jr-article .jr-sources-title {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
  font-size: 21px;
}
.jr-content .jr-sources li { font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
@media (max-width: 991px) {
  .jr-cta__text p,
  .jr-profile__contact-card p { text-align-last: center; }
}
@media (max-width: 768px) {
  .jr-founder__body p { text-align-last: center; }
}

/* ---------------------------------------------------------------------------
   Hero, September 2026: lead line, positioning headline and "Important" notice.
   The hero now carries more copy, so it grows with its content instead of
   being clipped at exactly one viewport height.                             */
.jr-hero {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 150px 0 110px;
}
.jr-hero__content { max-width: 860px; }
.jr-hero__content h1 { margin-bottom: 20px; }
.jr-hero__lead {
  font-family: var(--font-serif);
  font-size: 24px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 8px;
}
.jr-hero__roles {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.9;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.jr-hero__rule {
  width: 72px;
  height: 2px;
  background: var(--gold);
  margin: 28px auto 32px;
}
.jr-hero__headline {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 20px;
}
.jr-hero__headline span { color: var(--gold); }
.jr-hero__claim {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin: 0 auto 36px;
}
.jr-hero__notice {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 22px 26px;
  text-align: left;
  background: rgba(10,18,40,0.55);
  border: 1px solid rgba(212,175,55,0.75);
}
.jr-hero__notice-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}
.jr-hero__notice-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
}
.jr-hero__notice-body > span { display: block; }
.jr-hero__notice-title {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}
.jr-hero__notice-highlight { color: var(--gold); }
.jr-hero__notice-highlight sup { font-size: .7em; line-height: 0; }
@media (max-width: 991px) {
  .jr-hero__headline { font-size: 34px; }
  .jr-hero__claim { font-size: 23px; }
}
@media (max-width: 768px) {
  .jr-hero { padding: 110px 0 64px; }
  .jr-hero__lead { font-size: 20px; }
  .jr-hero__roles { font-size: 10px; letter-spacing: 2px; }
  .jr-hero__rule { margin: 22px auto 24px; }
  .jr-hero__headline { font-size: 27px; }
  .jr-hero__claim { font-size: 20px; margin-bottom: 28px; }
  .jr-hero__notice { gap: 14px; padding: 16px 18px; margin-bottom: 28px; }
  .jr-hero__notice-icon { width: 30px; height: 30px; font-size: 18px; }
  .jr-hero__notice-body { font-size: 14px; }
  .jr-hero__actions .jr-btn { max-width: 360px; }
}
@media (max-width: 480px) {
  .jr-hero__headline { font-size: 23px; }
  .jr-hero__claim { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   Homepage copy of 15 September 2026 (client text): About statement, Vision,
   Mission punch lines and closing question, Expertise as prose, the closing
   "After the Supreme Court. Before Strasbourg." signature band, and a stacked
   link list in the International Cooperation cards.                         */
.jr-about__right .jr-about__statement {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.45;
  color: var(--black);
  padding-left: 24px;
  border-left: 3px solid var(--gold);
  margin: 32px 0;
}

.jr-vision {
  padding: 120px 0;
  background: var(--white);
  border-top: 1px solid var(--line);
}
.jr-vision__inner { max-width: 860px; margin: 0 auto; }
.jr-vision__header { text-align: center; margin-bottom: 48px; }
.jr-vision__header h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
}
.jr-vision__header .jr-gold-line { margin: 24px auto 0; }
.jr-vision__body p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--gray-700);
  margin-bottom: 20px;
}
.jr-vision__body p.jr-vision__emphasis {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.45;
  color: var(--black);
  margin: 40px 0 16px;
}
.jr-vision__tagline {
  margin: 48px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--black);
}
.jr-vision__tagline span { color: var(--gold-hover); }

.jr-mission__card h3 { font-size: 24px; line-height: 1.3; }
.jr-mission__card p + p { margin-top: 14px; }
.jr-mission__card p.jr-mission__punch { color: var(--black); font-weight: 500; }
.jr-mission__closing { margin-top: 72px; text-align: center; }
.jr-mission__closing p {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.45;
  color: var(--gray-700);
}
.jr-mission__closing strong {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--black);
}

.jr-expertise__prose p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray-700);
  margin-bottom: 20px;
}
.jr-expertise__prose p.jr-expertise__statement {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.45;
  color: var(--black);
  padding-left: 24px;
  border-left: 3px solid var(--gold);
  margin: 36px 0 16px;
}

.jr-signature {
  padding: 110px 0;
  background: var(--black);
  text-align: center;
}
.jr-signature__line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--white);
}
.jr-signature__line span { color: var(--gold); }
.jr-signature__rule { width: 60px; height: 2px; background: var(--gold); margin: 32px auto; }
.jr-signature__sub {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.jr-intl__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* display lines keep their own alignment (see "Justified running text" above) */
.jr-vision__tagline,
.jr-mission__closing p,
.jr-signature p {
  text-align: inherit;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.jr-vision__tagline { text-align: center; }

@media (max-width: 991px) {
  .jr-vision, .jr-signature { padding: 80px 0; }
  .jr-vision__header h2 { font-size: 34px; }
  .jr-signature__line { font-size: 40px; }
  .jr-mission__closing { margin-top: 48px; }
  .jr-mission__closing p { font-size: 22px; }
}
@media (max-width: 768px) {
  .jr-vision, .jr-signature { padding: 64px 0; }
  .jr-vision__header h2 { font-size: 28px; }
  .jr-vision__body p { font-size: 15px; }
  .jr-vision__tagline { font-size: 24px; }
  .jr-signature__line { font-size: 32px; }
  .jr-signature__sub { font-size: 10px; letter-spacing: 2px; line-height: 1.9; }
  .jr-about__right .jr-about__statement,
  .jr-expertise__prose p.jr-expertise__statement,
  .jr-vision__body p.jr-vision__emphasis,
  .jr-mission__closing p { font-size: 20px; }
}

/* Links inside the homepage prose blocks: .jr-content's link rule does not reach them
   (the vision text cites the Court's own applicant notice). */
.jr-vision a.jr-link,
.jr-about a.jr-link,
.jr-expertise__prose a.jr-link {
  color: var(--gold);
  font-weight: 500;
  border-bottom: 1px solid rgba(212,175,55,0.3);
}
.jr-vision a.jr-link:hover,
.jr-about a.jr-link:hover,
.jr-expertise__prose a.jr-link:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

/* ---------------------------------------------------------------------------
   Pending cases (ECtHR cases page, September 2026).
   One block per case: name, application number, summary and current status.
   A block may hold several applications by the same applicant, one
   .jr-case-card__part each. The anchors clear the fixed navigation bar.     */
.jr-cases-ongoing {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 2px solid var(--black);
  scroll-margin-top: 110px;
}
.jr-cases-ongoing__intro { max-width: 780px; margin-bottom: 40px; }
.jr-cases-ongoing .jr-case-card { scroll-margin-top: 110px; }
.jr-case-card .jr-case-card__ref {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 14px;
}
.jr-case-card__part + .jr-case-card__part {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
}
.jr-case-card h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gold-hover);
  margin-bottom: 10px;
}
.jr-case-card .jr-case-card__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200);
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-900);
}
.jr-case-card__status strong {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.jr-cases-ongoing .jr-case-card__link { margin-right: 22px; }
.jr-case-card__link + .jr-case-card__status { margin-top: 16px; }
.jr-cases-common {
  padding: 28px 32px;
  background: var(--gray-100);
  border-left: 3px solid var(--gold);
}
.jr-content .jr-cases-common p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--gray-900);
  margin: 0;
  text-align: left;              /* justified serif at this size opens wide gaps */
  -webkit-hyphens: manual;
  hyphens: manual;
}
@media (max-width: 768px) {
  .jr-cases-ongoing { margin-top: 64px; padding-top: 40px; }
  .jr-case-card__part + .jr-case-card__part { margin-top: 22px; padding-top: 22px; }
  .jr-cases-common { padding: 22px 20px; }
  .jr-content .jr-cases-common p { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   Third-party interventions (ECtHR cases page, October 2026).
   Same layout as the pending cases above. The role line states the capacity in
   which Me Chihaoui acted (representative of the intervening NGO, not counsel
   for the applicant); the client asked for it to be clearly visible.        */
.jr-case-card__badge--intervention {
  color: #6a1b9a;
  border-color: #e1bee7;
  background: #f3e5f5;
}
.jr-case-card .jr-case-card__role {
  margin-bottom: 20px;
  padding: 14px 20px;
  background: var(--gray-100);
  border-left: 3px solid var(--gold);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-900);
}
.jr-case-card__role strong { font-weight: 600; color: var(--black); }
/* the reference line is a label in spaced capitals, not running text: justified,
   it opens very wide gaps when it wraps on a phone, so it stays left-aligned */
.jr-case-card .jr-case-card__ref {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
@media (max-width: 768px) {
  .jr-case-card .jr-case-card__role { padding: 12px 16px; font-size: 14px; }
}

/* --- BEGIN Lhermitte article (Insights Belgium 06, October 2026) ---------------
   A long-form paper: the author's introduction first, then the article under an
   h2 with subtitle, byline, abstract box, disclosure and numbered notes with
   back-links. Footnote targets clear the fixed navigation bar.              */
.jr-article .jr-article__dedication {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.jr-article .jr-article__title {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 2px solid var(--black);
  font-size: 34px;
  line-height: 1.25;
}
.jr-article .jr-article__subtitle {
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.55;
  color: var(--gray-700);
  margin-bottom: 18px;
}
.jr-article .jr-article__byline {
  font-size: 14px;
  letter-spacing: .3px;
  color: var(--gray-700);
  margin-bottom: 28px;
}
.jr-article__byline strong { color: var(--black); font-weight: 600; }
.jr-article__abstract {
  margin-bottom: 20px;
  padding: 24px 28px;
  background: var(--gray-100);
  border-left: 3px solid var(--gold);
}
.jr-content .jr-article__abstract p { font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.jr-content .jr-article__abstract p.jr-article__keywords { font-size: 13px; margin-bottom: 0; }
.jr-article__abstract strong,
.jr-article__disclosure strong { color: var(--black); font-weight: 600; }
.jr-article .jr-article__disclosure { font-size: 14px; line-height: 1.7; margin-bottom: 44px; }
.jr-article sup.jr-fn { font-size: .72em; line-height: 0; vertical-align: super; }
.jr-article sup.jr-fn a { padding: 0 2px; font-weight: 600; color: var(--gold-hover); }
.jr-article sup.jr-fn a:hover { color: var(--black); }
.jr-article sup.jr-fn a,
.jr-notes li { scroll-margin-top: 110px; }
.jr-content .jr-notes li {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 10px;
}
.jr-notes li:target { background: var(--gray-100); }
.jr-notes__back { margin-left: 4px; color: var(--gold-hover); }
@media (max-width: 768px) {
  .jr-article .jr-article__title { margin-top: 52px; padding-top: 32px; font-size: 26px; }
  .jr-article .jr-article__subtitle { font-size: 18px; }
  .jr-article .jr-article__dedication { font-size: 17px; }
  .jr-article__abstract { padding: 20px; }
}
/* --- END Lhermitte article --------------------------------------------------- */