/* ==========================================================================
   JMCL — Home sections + inner page blocks
   ========================================================================== */

/* ---------- Hero ---------- */
.jm-hero { position: relative; background: var(--jm-dark); color: #fff; overflow: hidden; padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(5rem, 3rem + 8vw, 8rem); isolation: isolate; }
/* Room at the foot for the slider controls, only when a slider is present. */
.jm-hero:has(.jm-hero__controls) { padding-bottom: clamp(6.5rem, 4rem + 9vw, 9.5rem); }
.jm-hero__bg { position: absolute; inset: 0; z-index: -1; }
.jm-hero__glow { position: absolute; width: 780px; height: 780px; border-radius: 50%; filter: blur(90px); opacity: .40; }
.jm-hero__glow--a { background: var(--jm-accent); top: -38%; inset-inline-end: -16%; }
.jm-hero__glow--b { background: var(--jm-primary); bottom: -48%; inset-inline-start: -14%; opacity: .5; }
.jm-hero__pattern { position: absolute; inset: 0; opacity: .30; background-image: var(--jm-pattern); background-repeat: repeat; background-size: 190px 190px; }

/* ---------- Hero background slider ----------
   The photograph is the point of this section, so nothing sits on top of it
   that does not have to. The brand glow and leaf pattern are the no-photo
   fallback and are switched off whenever a slider is present. What is left is
   a scrim shaped to the text alone, so the picture is untouched everywhere no
   words cross it. */
.jm-hero__slider { position: absolute; inset: 0; overflow: hidden; }
.jm-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1200ms var(--jm-ease);
  will-change: opacity;
}
.jm-hero__slide.is-active { opacity: 1; }

/* The drift is run from JavaScript (Web Animations API) so it can be cancelled
   and replayed deterministically when a slide is revisited; CSS supplies only
   the resting state, which is what shows if scripting never runs. The filter
   is a small lift, not a look: phone-shot indoor event photographs come back
   flat, and this restores the separation the scrim would otherwise eat. */
.jm-hero__slide-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.03);
  transform-origin: center;
  will-change: transform;
}

/* With a photograph behind it the decoration is pure haze, so it goes. This is
   the single biggest reason the hero looked milky on a phone: the leaf pattern
   alone laid a 30% wash over every slide, with two blurred colour blobs on top
   of that. */
.jm-hero:has(.jm-hero__slider) .jm-hero__glow,
.jm-hero:has(.jm-hero__slider) .jm-hero__pattern { display: none; }

/* White text on an unknown photograph cannot be left unprotected — a bright
   wall or sky behind the headline drops it to unreadable — but the protection
   only has to exist where the words are. So this is no longer a veil across
   the picture: it is a gradient anchored to the text column that reaches full
   transparency well before the far edge, leaving that part of the frame
   exactly as the camera took it. */
.jm-hero__veil {
  position: absolute; inset: 0;
  background:
    /* Shaped to the text column. Measured against all six photographs, the
       first attempt let go too early — the gradient was down to 34% by the
       halfway mark while the paragraph runs to 50%, and the body copy fell to
       2.1:1 on a bright slide. It now holds across the column and releases
       after it. */
    linear-gradient(
      96deg,
      rgba(4,24,40,.80) 0%,
      rgba(4,24,40,.72) 38%,
      rgba(4,24,40,.54) 54%,
      rgba(4,24,40,.10) 72%,
      rgba(4,24,40,0)   86%
    ),
    /* A light, even floor over the whole frame. At 26% the photograph still
       reads as a photograph — this is a quarter of the old flat veil, and the
       pattern and glow that used to sit on top of it are gone entirely. */
    rgba(4,24,40,.26);
}
@media (max-width: 1023px) {
  /* Single column: the copy runs the full width, so the gradient runs
     top-to-bottom instead and clears across the lower third, which is the part
     of the frame a phone actually reads as a picture. */
  .jm-hero__veil {
    background: linear-gradient(
      180deg,
      rgba(4,24,40,.84) 0%,
      rgba(4,24,40,.76) 46%,
      rgba(4,24,40,.34) 76%,
      rgba(4,24,40,.10) 92%,
      rgba(4,24,40,0)   100%
    );
  }
}

/* The shadow is what pays for the lighter scrim: it holds the letterforms
   against whatever detail survives the gradient, so the photograph can stay
   bright without the headline ever landing on bad contrast. */
.jm-hero__slider ~ .jm-hero__veil { z-index: 0; }
.jm-hero:has(.jm-hero__slider) h1,
.jm-hero:has(.jm-hero__slider) .jm-hero__text,
.jm-hero:has(.jm-hero__slider) .jm-hero__mini b,
.jm-hero:has(.jm-hero__slider) .jm-hero__mini span {
  text-shadow: 0 1px 2px rgba(2,14,24,.60), 0 2px 16px rgba(2,14,24,.45);
}
.jm-hero:has(.jm-hero__slider) .jm-hero__badge {
  background: rgba(4,24,40,.52);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Under reduced motion nothing moves: no cross-fade, no drift, and the script
   holds the first frame. */
@media (prefers-reduced-motion: reduce) {
  .jm-hero__slide { transition: none; }
  .jm-hero__slide-img { animation: none; transform: none; }
}

/* The help card used to lean on the veil for its contrast: it is a pane of
   white at 9% opacity, which brightens whatever is behind it. That was already
   marginal, and with the veil no longer reaching this side of the frame the
   small print inside it measured 3.3:1 over a bright photograph — below AA. So
   on a slider hero the card carries its own dark ground instead of borrowing
   one, which is also the honest reading of the design: a panel sitting on the
   picture, not a wash over it. */
.jm-hero:has(.jm-hero__slider) .jm-hero__card {
  background: rgba(5,28,46,.66);
  border-color: rgba(255,255,255,.18);
}
.jm-hero:has(.jm-hero__slider) .jm-hero__list a { background: rgba(6,34,56,.42); }
.jm-hero:has(.jm-hero__slider) .jm-hero__list a:hover { background: rgba(9,48,78,.62); }
.jm-hero:has(.jm-hero__slider) .jm-hero__card h2,
.jm-hero:has(.jm-hero__slider) .jm-hero__list small { color: rgba(255,255,255,.82); }

/* The small caption under each statistic is 62% white by default, which is a
   hierarchy the flat dark section could afford and a photograph cannot: it
   measured 1.8:1 over a bright slide. On a slider hero it is lifted. */
.jm-hero:has(.jm-hero__slider) .jm-hero__mini span { color: rgba(255,255,255,.84); }

/* ---------- Slider controls ---------- */
.jm-hero__controls {
  position: absolute; inset-inline: 0; bottom: clamp(1rem, 2vw, 1.75rem);
  display: flex; align-items: center; gap: var(--jm-s4);
  z-index: 2;
}
.jm-hero__playpause {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid var(--jm-on-dark-line);
  transition: background var(--jm-t) var(--jm-ease);
}
.jm-hero__playpause:hover { background: rgba(255,255,255,.28); }
.jm-hero__playpause svg { width: 17px; height: 17px; }

.jm-hero__dots { display: flex; gap: .5rem; align-items: center; }
.jm-hero__dot {
  /* 10px of ink, but a 44px hit area — the WCAG target size without the dots
     turning into big visible blobs. */
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.40); transition: background var(--jm-t) var(--jm-ease), width var(--jm-t) var(--jm-ease);
}
.jm-hero__dot::before { content: ""; position: absolute; inset: -17px; }
.jm-hero__dot:hover { background: rgba(255,255,255,.75); }
.jm-hero__dot.is-active { background: #fff; width: 26px; border-radius: var(--jm-r-pill); }

/* With the veil gone the controls sit on bare photograph, where a white dot on
   a white wall is simply not there. A drop shadow on the whole row outlines
   every control against whatever is behind it — it follows the actual shapes,
   so it costs nothing visually on a dark slide — and the pause button carries
   its own dark ground instead of a translucent white one, which only brightens
   what it sits on. */
.jm-hero:has(.jm-hero__slider) .jm-hero__controls {
  filter: drop-shadow(0 1px 2px rgba(2,14,24,.85)) drop-shadow(0 4px 12px rgba(2,14,24,.55));
}
.jm-hero:has(.jm-hero__slider) .jm-hero__playpause {
  background: rgba(4,24,40,.62); border-color: rgba(255,255,255,.34);
}
.jm-hero:has(.jm-hero__slider) .jm-hero__playpause:hover { background: rgba(9,48,78,.82); }
.jm-hero:has(.jm-hero__slider) .jm-hero__dot { background: rgba(255,255,255,.62); }

@media (max-width: 560px) {
  .jm-hero__controls { justify-content: center; }
}
.jm-hero__grid { display: grid; gap: var(--jm-s10); align-items: center; }
@media (min-width: 1024px) { .jm-hero__grid { grid-template-columns: 1.08fr .92fr; gap: var(--jm-s16); } }
.jm-hero h1 { color: #fff; margin-bottom: var(--jm-s5); }
.jm-hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: var(--jm-r-pill); background: var(--jm-on-dark-fill); border: 1px solid var(--jm-on-dark-line); color: #fff; font-size: var(--jm-fs-xs); font-weight: 600; font-family: var(--jm-font-head); margin-bottom: var(--jm-s5); }
.jm-hero__badge svg { width: 16px; height: 16px; color: #5FD996; flex: none; }
.jm-hero__text { color: var(--jm-on-dark-soft); font-size: var(--jm-fs-md); max-width: 60ch; margin-bottom: var(--jm-s8); }
.jm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--jm-s3); margin-bottom: var(--jm-s10); }
.jm-hero__mini { display: flex; flex-wrap: wrap; gap: var(--jm-s5) var(--jm-s8); padding-top: var(--jm-s6); border-top: 1px solid var(--jm-on-dark-line); }
.jm-hero__mini div { display: grid; gap: .1rem; }
.jm-hero__mini b { font-family: var(--jm-font-head); font-size: var(--jm-fs-xl); color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.jm-hero__mini span { font-size: var(--jm-fs-xs); color: var(--jm-on-dark-mute); }

.jm-hero__card { background: rgba(255,255,255,.09); border: 1px solid var(--jm-on-dark-line); border-radius: var(--jm-r-xl); padding: var(--jm-s6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--jm-e4); }
.jm-hero__card h2 { font-size: var(--jm-fs-xs); text-transform: uppercase; color: var(--jm-on-dark-mute); margin-bottom: var(--jm-s4); }
.jm-hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.jm-hero__list a { display: grid; grid-template-columns: 46px 1fr 20px; gap: var(--jm-s4); align-items: center; padding: var(--jm-s3); min-height: 64px; border-radius: var(--jm-r); background: rgba(255,255,255,.05); border: 1px solid transparent; color: #fff; transition: background var(--jm-t) var(--jm-ease), border-color var(--jm-t) var(--jm-ease), transform var(--jm-t) var(--jm-ease); }
.jm-hero__list a:hover { background: rgba(255,255,255,.14); border-color: var(--jm-on-dark-line); text-decoration: none; transform: translateX(3px); }
.jm-hero__list .jm-icon-badge { width: 46px; height: 46px; background: rgba(255,255,255,.12); color: #fff; }
.jm-hero__list b { display: block; font-family: var(--jm-font-head); font-size: var(--jm-fs-sm); font-weight: 600; }
.jm-hero__list small { display: block; color: var(--jm-on-dark-mute); font-size: var(--jm-fs-xs); }
.jm-hero__list .jm-arrow { width: 20px; height: 20px; color: var(--jm-on-dark-mute); }

/* ---------- Stats strip (overlaps hero) ---------- */
.jm-stats { position: relative; margin-top: calc(-1 * clamp(2.5rem, 4vw, 4rem)); z-index: 2; }
.jm-stats__inner { background: #fff; border: 1px solid var(--jm-border); border-radius: var(--jm-r-xl); box-shadow: var(--jm-e3); padding: var(--jm-s8) var(--jm-s6); display: grid; gap: var(--jm-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.jm-stat { text-align: center; padding-inline: var(--jm-s3); position: relative; }
.jm-stat + .jm-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 10%; height: 80%; width: 1px; background: var(--jm-border); }
@media (max-width: 767px) { .jm-stat + .jm-stat::before { display: none; } .jm-stat + .jm-stat { border-top: 1px solid var(--jm-border); padding-top: var(--jm-s6); } }
.jm-stat__value { display: block; font-family: var(--jm-font-head); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; color: var(--jm-heading); line-height: 1.1; }
.jm-stat__label { display: block; font-size: var(--jm-fs-sm); color: var(--jm-muted); margin-top: .25rem; }
.jm-stat__icon { width: 34px; height: 34px; margin: 0 auto var(--jm-s3); color: var(--jm-accent-ink); }
.jm-stats__note { text-align: center; font-size: var(--jm-fs-xs); color: var(--jm-muted); margin-top: var(--jm-s4); }

/* ---------- About ---------- */
.jm-about__aside { display: grid; gap: var(--jm-s6); }
.jm-years-card { background: var(--jm-dark); color: #fff; border-radius: var(--jm-r-xl); padding: var(--jm-s8); position: relative; overflow: hidden; }
.jm-years-card::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--jm-accent); opacity: .18; filter: blur(50px); bottom: -40%; inset-inline-end: -20%; }
.jm-years-card__badge { display: inline-flex; align-items: baseline; gap: .4rem; background: var(--jm-cta-ink); color: #fff; padding: .4rem 1rem; border-radius: var(--jm-r-pill); font-family: var(--jm-font-head); font-weight: 700; font-size: var(--jm-fs-sm); margin-bottom: var(--jm-s5); position: relative; }
.jm-years-card h3 { color: #fff; margin-bottom: var(--jm-s3); position: relative; }
.jm-years-card p { color: var(--jm-on-dark-soft); margin: 0; position: relative; }
.jm-years-card .jm-chip { margin-top: var(--jm-s5); position: relative; }
.jm-vvv { display: grid; gap: var(--jm-s6); margin-top: var(--jm-s12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.jm-vvv .jm-card__body { gap: var(--jm-s4); }
.jm-vvv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--jm-fs-sm); color: var(--jm-muted); }
.jm-vvv ul li { display: grid; grid-template-columns: 8px 1fr; gap: var(--jm-s3); align-items: baseline; }
.jm-vvv ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jm-accent); transform: translateY(-2px); }

/* ---------- Service cards ---------- */
.jm-service-card .jm-card__body { gap: var(--jm-s4); }
.jm-service-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: var(--jm-fs-sm); color: var(--jm-muted); }
.jm-service-card ul li { display: grid; grid-template-columns: 16px 1fr; gap: .5rem; align-items: start; }
.jm-service-card ul svg { width: 16px; height: 16px; color: var(--jm-accent-ink); margin-top: 5px; }
.jm-service-card__rate { font-family: var(--jm-font-head); font-weight: 700; color: var(--jm-accent-ink); font-size: var(--jm-fs-lg); font-variant-numeric: tabular-nums; }

/* ---------- Leadership messages ---------- */
.jm-leader { display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (min-width: 560px) { .jm-leader { grid-template-columns: 200px 1fr; } }
.jm-leader__photo { position: relative; min-height: 220px; background: var(--jm-tint-2); }
.jm-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.jm-leader__photo figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: var(--jm-s6) var(--jm-s4) var(--jm-s3); background: linear-gradient(to top, rgba(7,44,70,.94), rgba(7,44,70,0)); color: #fff; }
.jm-leader__photo b { display: block; font-family: var(--jm-font-head); font-size: var(--jm-fs-sm); }
.jm-leader__photo small { color: var(--jm-on-dark-soft); font-size: var(--jm-fs-xs); }
.jm-leader__body { padding: var(--jm-s6); display: flex; flex-direction: column; gap: var(--jm-s3); }
.jm-leader__quote { width: 30px; height: 30px; color: var(--jm-cta); opacity: .9; }
.jm-leader__excerpt { color: var(--jm-muted); font-size: var(--jm-fs-sm); display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

/* ---------- Why choose us ---------- */
.jm-why { display: grid; gap: var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.jm-why__item { background: #fff; border: 1px solid var(--jm-border); border-radius: var(--jm-r-lg); padding: var(--jm-s6); display: grid; gap: var(--jm-s3); transition: box-shadow var(--jm-t) var(--jm-ease), transform var(--jm-t) var(--jm-ease); }
.jm-why__item:hover { box-shadow: var(--jm-e3); transform: translateY(-4px); }
.jm-why__item h3 { font-size: var(--jm-fs-base); margin: 0; }
.jm-why__item p { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin: 0; }

/* ---------- Timeline ---------- */
/* An <ol> for the semantics — the milestones are a sequence — but the browser's
   own "1. 2. 3." markers sat right next to the year and read as a second,
   conflicting set of numbers. The visual order is carried by the rail. */
.jm-timeline { position: relative; display: grid; gap: var(--jm-s8); padding-inline-start: var(--jm-s8); max-width: 820px; margin-inline: auto; list-style: none; }
.jm-timeline::before { content: ""; position: absolute; inset-inline-start: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--jm-primary), var(--jm-accent)); }
.jm-timeline__item { position: relative; }
.jm-timeline__item::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--jm-s8) + 1px); top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--jm-primary); box-shadow: 0 0 0 4px var(--jm-tint); }
.jm-timeline__item--last::before { border-color: var(--jm-cta-ink); }
.jm-timeline__year { display: inline-block; font-family: var(--jm-font-head); font-weight: 700; font-size: var(--jm-fs-sm); color: var(--jm-cta-ink); margin-bottom: .25rem; }
/* A milestone whose year the office has not confirmed yet: the marker is
   drawn as pending rather than as a real date, so a placeholder can never be
   mistaken for data. */
.jm-timeline__item--tbc .jm-timeline__year {
  color: var(--jm-muted); font-weight: 600;
  background: var(--jm-tint-2); border-radius: var(--jm-r-pill);
  padding: .1rem .6rem;
}
.jm-timeline__item--tbc::before { border-color: var(--jm-border-strong); border-style: dashed; }
.jm-timeline__item h3 { font-size: var(--jm-fs-lg); margin-bottom: .35rem; }
.jm-timeline__item p { color: var(--jm-muted); font-size: var(--jm-fs-sm); margin: 0; }

/* ---------- Cooperative principles (dark) ---------- */
.jm-principles { display: grid; gap: var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.jm-principle { background: var(--jm-on-dark-fill); border: 1px solid var(--jm-on-dark-line); border-inline-start: 4px solid var(--jm-cta); border-radius: var(--jm-r); padding: var(--jm-s5); display: grid; grid-template-columns: 26px 1fr; gap: var(--jm-s4); align-items: start; }
.jm-principle svg { width: 26px; height: 26px; color: #5FD996; }
.jm-principle b { font-family: var(--jm-font-head); font-size: var(--jm-fs-sm); font-weight: 600; color: #fff; display: block; }
.jm-principle span { display: block; font-size: var(--jm-fs-xs); color: var(--jm-on-dark-mute); margin-top: .2rem; }

/* ---------- Benefits list ---------- */
.jm-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jm-s3); }
.jm-benefits li { display: grid; grid-template-columns: 34px 1fr; gap: var(--jm-s3); align-items: center; background: #fff; border: 1px solid var(--jm-border); border-radius: var(--jm-r); padding: var(--jm-s3) var(--jm-s4); min-height: 56px; font-size: var(--jm-fs-sm); }
.jm-benefits .jm-icon-badge { width: 34px; height: 34px; border-radius: var(--jm-r-sm); }
.jm-benefits .jm-icon-badge svg { width: 18px; height: 18px; }

/* ---------- Report / download rows ---------- */
.jm-filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jm-s3); }
.jm-file {
  display: grid; grid-template-columns: 42px 1fr auto; gap: var(--jm-s4); align-items: center;
  background: #fff; border: 1px solid var(--jm-border); border-radius: var(--jm-r); padding: var(--jm-s3) var(--jm-s4); min-height: 64px;
  transition: border-color var(--jm-t) var(--jm-ease), box-shadow var(--jm-t) var(--jm-ease);
}
.jm-file:hover { border-color: var(--jm-primary); box-shadow: var(--jm-e2); }
.jm-file__icon { width: 42px; height: 42px; border-radius: var(--jm-r-sm); display: grid; place-items: center; background: #FDEAEA; color: var(--jm-cta-ink); }
.jm-file__icon svg { width: 22px; height: 22px; }
.jm-file__main { min-width: 0; }
.jm-file__name { display: block; font-family: var(--jm-font-head); font-weight: 600; font-size: var(--jm-fs-sm); color: var(--jm-heading); overflow-wrap: anywhere; }
.jm-file__name:hover { color: var(--jm-primary); }
.jm-file__meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: var(--jm-fs-xs); color: var(--jm-muted); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.jm-file__actions { display: flex; gap: .4rem; flex: none; }
@media (max-width: 560px) { .jm-file { grid-template-columns: 42px 1fr; } .jm-file__actions { grid-column: 1 / -1; } }

/* ---------- Gallery ---------- */
.jm-albums { display: grid; gap: var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.jm-album { position: relative; aspect-ratio: 4 / 3; border-radius: var(--jm-r-lg); overflow: hidden; display: block; background: var(--jm-tint-2); }
.jm-album img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jm-t-slow) var(--jm-ease); }
.jm-album:hover img { transform: scale(1.06); }
.jm-album__cap { position: absolute; inset-inline: 0; bottom: 0; padding: var(--jm-s8) var(--jm-s5) var(--jm-s4); background: linear-gradient(to top, rgba(7,44,70,.95), rgba(7,44,70,0)); color: #fff; }
.jm-album__cap b { display: block; font-family: var(--jm-font-head); font-size: var(--jm-fs-base); }
.jm-album__cap small { color: var(--jm-on-dark-soft); font-size: var(--jm-fs-xs); }
.jm-photos { display: grid; gap: var(--jm-s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.jm-photos button { aspect-ratio: 1; border-radius: var(--jm-r); overflow: hidden; background: var(--jm-tint-2); display: block; width: 100%; }
.jm-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jm-t-slow) var(--jm-ease); }
.jm-photos button:hover img { transform: scale(1.07); }

/* ---------- Tools ---------- */
.jm-tools { display: grid; gap: var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.jm-tool { display: grid; gap: var(--jm-s3); padding: var(--jm-s6); border-radius: var(--jm-r-lg); border: 1px solid var(--jm-border); background: #fff; transition: box-shadow var(--jm-t) var(--jm-ease), transform var(--jm-t) var(--jm-ease); }
.jm-tool:hover { box-shadow: var(--jm-e3); transform: translateY(-4px); text-decoration: none; }
.jm-tool h3 { margin: 0; font-size: var(--jm-fs-base); }
.jm-tool p { margin: 0; color: var(--jm-muted); font-size: var(--jm-fs-sm); }
.jm-logostrip { display: flex; flex-wrap: wrap; gap: var(--jm-s4); align-items: stretch; justify-content: center; margin-top: var(--jm-s10); }
.jm-logostrip a { flex: 1 1 190px; max-width: 250px; display: grid; gap: var(--jm-s3); justify-items: center; text-align: center; padding: var(--jm-s5) var(--jm-s4); border: 1px solid var(--jm-border); border-radius: var(--jm-r); background: #fff; font-size: var(--jm-fs-xs); color: var(--jm-muted); font-weight: 600; transition: border-color var(--jm-t) var(--jm-ease), box-shadow var(--jm-t) var(--jm-ease); }
.jm-logostrip a:hover { border-color: var(--jm-primary); box-shadow: var(--jm-e2); color: var(--jm-primary-700); text-decoration: none; }
.jm-logostrip img { height: 44px; width: auto; object-fit: contain; }
.jm-logostrip .jm-icon-badge { width: 44px; height: 44px; }

/* ---------- CTA banner ---------- */
.jm-cta-band { background: linear-gradient(120deg, var(--jm-dark), var(--jm-primary-700)); color: #fff; text-align: center; position: relative; overflow: hidden; }
.jm-cta-band::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; background: var(--jm-accent); opacity: .16; filter: blur(80px); top: -60%; inset-inline-start: 50%; transform: translateX(-50%); }
.jm-cta-band > * { position: relative; }
.jm-cta-band h2 { color: #fff; }
.jm-cta-band p { color: var(--jm-on-dark-soft); max-width: 56ch; margin-inline: auto; }
.jm-cta-band .jm-cluster { justify-content: center; margin-top: var(--jm-s8); }

/* ---------- Contact ---------- */
.jm-contact-card { background: var(--jm-dark); color: #fff; border-radius: var(--jm-r-xl); padding: var(--jm-s8); display: grid; gap: var(--jm-s6); align-content: start; }
.jm-contact-card h3 { color: #fff; margin: 0; }
.jm-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jm-s5); }
.jm-contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--jm-s4); align-items: start; }
.jm-contact-list .jm-icon-badge { width: 44px; height: 44px; background: var(--jm-on-dark-fill); color: #5FD996; }
.jm-contact-list .jm-icon-badge svg { width: 21px; height: 21px; }
.jm-contact-list b { display: block; font-family: var(--jm-font-head); font-size: var(--jm-fs-xs); text-transform: uppercase; color: var(--jm-on-dark-mute); }
.jm-contact-list a, .jm-contact-list span { color: #fff; font-size: var(--jm-fs-sm); }
.jm-map { border-radius: var(--jm-r-xl); overflow: hidden; border: 1px solid var(--jm-border); background: var(--jm-tint-2); min-height: 380px; height: 100%; }
.jm-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.jm-map__placeholder { display: grid; place-items: center; text-align: center; padding: var(--jm-s10); min-height: 380px; color: var(--jm-muted); gap: var(--jm-s3); }
.jm-contact-tiles { display: grid; gap: var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.jm-contact-tile { background: #fff; border: 1px solid var(--jm-border); border-radius: var(--jm-r-lg); padding: var(--jm-s6); display: grid; gap: var(--jm-s3); }
.jm-contact-tile h3 { font-size: var(--jm-fs-base); margin: 0; }
.jm-contact-tile p, .jm-contact-tile a { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin: 0; }

/* ---------- Page hero (inner pages) ---------- */
.jm-pagehero { background: var(--jm-dark); color: #fff; padding-block: clamp(2.5rem, 2rem + 3.5vw, 4.5rem); position: relative; overflow: hidden; isolation: isolate; }
.jm-pagehero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .30; background-image: var(--jm-pattern); background-repeat: repeat; background-size: 190px 190px; }
.jm-pagehero::after { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: var(--jm-primary); opacity: .34; filter: blur(80px); top: -60%; inset-inline-end: -10%; z-index: -1; }
.jm-pagehero h1 { color: #fff; margin-bottom: var(--jm-s3); max-width: 24ch; }
.jm-pagehero p { color: var(--jm-on-dark-soft); max-width: 62ch; margin: 0 0 var(--jm-s5); }
.jm-pagehero .jm-breadcrumbs { color: var(--jm-on-dark-mute); }
.jm-pagehero .jm-breadcrumbs a:hover { color: #fff; }

/* ---------- Article / prose ---------- */
.jm-prose { max-width: 72ch; }
.jm-prose > * + * { margin-top: var(--jm-s5); }
.jm-prose h2 { margin-top: var(--jm-s10); }
.jm-prose h3 { margin-top: var(--jm-s8); }
.jm-prose img { border-radius: var(--jm-r); }
.jm-prose blockquote { margin: 0; padding: var(--jm-s5) var(--jm-s6); border-inline-start: 4px solid var(--jm-cta); background: var(--jm-tint); border-radius: 0 var(--jm-r) var(--jm-r) 0; color: var(--jm-heading); font-size: var(--jm-fs-md); }
.jm-prose ul, .jm-prose ol { padding-inline-start: 1.35rem; }
.jm-prose li + li { margin-top: .4rem; }
.jm-prose table { margin-block: var(--jm-s6); }
.jm-prose figcaption { font-size: var(--jm-fs-xs); color: var(--jm-muted); margin-top: .5rem; }

/* ---------- People: organisation chart ----------
   The head of a committee sits alone on the first row; everyone else follows
   four to a row. Flexbox rather than grid, because an incomplete final row
   should stay centred — a three-person sub-committee left-aligned under a
   four-column grid reads as a mistake. */
.jm-chart { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }

.jm-chart__head { display: flex; justify-content: center; }

.jm-chart__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--jm-s8);
}
/* 240px basis yields four per row inside the 1200px container and steps down
   to 3 / 2 / 1 on its own as the viewport narrows. */
.jm-chart__row .jm-person { flex: 0 1 240px; max-width: 260px; }

/* No connector line: the reference design relies on the red ring and the
   isolated top row to carry the hierarchy. To draw one, give
   .jm-chart__row--linked a ::before rule — the class is already applied
   whenever a head is present. */
.jm-chart__row--linked { position: relative; }

.jm-person { text-align: center; }

.jm-person__photo {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  width: clamp(112px, 9vw + 60px, 136px);
  margin: 0 auto var(--jm-s5);
  background: linear-gradient(160deg, #F3F8FC, #E4EEF6);
  border: 4px solid #fff;
  /* Soft, wide shadow so the circles float rather than sit in boxes. */
  box-shadow: 0 10px 28px rgba(11,58,91,.10), 0 2px 6px rgba(11,58,91,.06);
  transition: transform var(--jm-t) var(--jm-ease), box-shadow var(--jm-t) var(--jm-ease);
}
.jm-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.jm-person__photo .jm-placeholder { background: none; }
.jm-person__photo .jm-placeholder svg {
  width: 46%; max-width: none; opacity: 1;
  color: #7FA8C6; stroke-width: 1.6;
}
.jm-person:hover .jm-person__photo,
.jm-person:focus-within .jm-person__photo {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11,58,91,.16), 0 3px 8px rgba(11,58,91,.08);
}

.jm-person__name {
  font-size: var(--jm-fs-base); font-weight: 700; color: var(--jm-heading);
  margin: 0 0 .3rem; line-height: 1.4; text-wrap: balance;
}
.jm-person__trigger {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; border-radius: 4px;
}
.jm-person__trigger:hover { color: var(--jm-primary); text-decoration: underline; text-underline-offset: 3px; }

.jm-person__role {
  font-size: var(--jm-fs-sm); color: var(--jm-cta-ink); font-weight: 600; margin: 0;
}

/* The head: larger, and ringed in the CTA colour. */
.jm-person--lead .jm-person__photo {
  width: clamp(148px, 12vw + 72px, 182px);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--jm-cta), 0 14px 34px rgba(11,58,91,.14);
}
.jm-person--lead:hover .jm-person__photo,
.jm-person--lead:focus-within .jm-person__photo {
  box-shadow: 0 0 0 3px var(--jm-cta), 0 20px 42px rgba(11,58,91,.20);
}
.jm-person--lead .jm-person__name { font-size: var(--jm-fs-lg); }
.jm-person--lead .jm-person__role { font-size: var(--jm-fs-base); }

/* Kept for any older markup still using the plain grid. */
.jm-people { display: grid; gap: var(--jm-s8) var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

/* ---------- Multi-step form ---------- */
.jm-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--jm-s8); counter-reset: step; }
.jm-step { flex: 1 1 130px; display: grid; gap: .4rem; }
.jm-step__bar { height: 5px; border-radius: 3px; background: var(--jm-border); overflow: hidden; }
.jm-step__bar i { display: block; height: 100%; width: 0; background: var(--jm-accent-ink); transition: width var(--jm-t-slow) var(--jm-ease); }
.jm-step.is-done .jm-step__bar i, .jm-step.is-active .jm-step__bar i { width: 100%; }
.jm-step.is-active .jm-step__bar i { background: var(--jm-primary); }
.jm-step__label { font-size: var(--jm-fs-xs); color: var(--jm-muted); font-family: var(--jm-font-head); font-weight: 600; }
.jm-step.is-active .jm-step__label { color: var(--jm-primary); }
.jm-step.is-done .jm-step__label { color: var(--jm-accent-ink); }
.jm-step-panel[hidden] { display: none; }
.jm-step-nav { display: flex; flex-wrap: wrap; gap: var(--jm-s3); justify-content: space-between; margin-top: var(--jm-s8); padding-top: var(--jm-s6); border-top: 1px solid var(--jm-border); }
.jm-review dl { display: grid; gap: .5rem var(--jm-s5); grid-template-columns: minmax(140px, auto) 1fr; margin: 0; font-size: var(--jm-fs-sm); }
.jm-review dt { color: var(--jm-muted); }
.jm-review dd { margin: 0; font-weight: 600; color: var(--jm-heading); overflow-wrap: anywhere; }

/* ---------- EMI calculator ---------- */
.jm-emi { display: grid; gap: var(--jm-s8); }
@media (min-width: 900px) { .jm-emi { grid-template-columns: minmax(300px, .9fr) 1.1fr; align-items: start; } }
.jm-emi__result { background: var(--jm-dark); color: #fff; border-radius: var(--jm-r-xl); padding: var(--jm-s8); display: grid; gap: var(--jm-s5); }
.jm-emi__headline { display: grid; gap: .25rem; padding-bottom: var(--jm-s5); border-bottom: 1px solid var(--jm-on-dark-line); }
/* Child combinator, not a descendant one. This rule is for the little label
   above the figure, but `.jm-emi__headline span` also matched the span the
   script writes the instalment into — so the amount rendered at 13px,
   uppercase and 62% white next to a 43px `रु.`, which is the misalignment
   in the headline. */
.jm-emi__headline > span { font-size: var(--jm-fs-xs); text-transform: uppercase; color: var(--jm-on-dark-mute); }
.jm-emi__value { font-family: var(--jm-font-head); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); font-weight: 700; color: #fff; line-height: 1.1; }
.jm-emi__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jm-s3); }
.jm-emi__rows li { display: flex; justify-content: space-between; gap: var(--jm-s4); font-size: var(--jm-fs-sm); }
/* Same trap one level down: the amounts live in a span inside the <b>, so the
   row label's colour was dimming the figure while the `रु.` beside it stayed
   white. */
.jm-emi__rows > li > span { color: var(--jm-on-dark-soft); }
.jm-emi__rows b { font-variant-numeric: tabular-nums; color: #fff; }
.jm-range { width: 100%; accent-color: var(--jm-primary); height: 44px; }

/* ---------- Date converter ---------- */
.jm-dc { display: grid; gap: var(--jm-s6); }
@media (min-width: 760px) { .jm-dc { grid-template-columns: 1fr auto 1fr; align-items: end; } }
.jm-dc__swap { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--jm-primary); color: #fff; margin-inline: auto; }
.jm-dc__swap:hover { background: var(--jm-primary-700); }
.jm-dc__swap svg { width: 24px; height: 24px; }
.jm-dc__out { background: var(--jm-tint); border: 1px solid var(--jm-border); border-radius: var(--jm-r-lg); padding: var(--jm-s6); text-align: center; margin-top: var(--jm-s6); }
.jm-dc__out b { display: block; font-family: var(--jm-font-head); font-size: var(--jm-fs-xl); color: var(--jm-heading); }
.jm-dc__out span { font-size: var(--jm-fs-sm); color: var(--jm-muted); }

/* ---------- Plans (membership) ---------- */
.jm-plans { display: grid; gap: var(--jm-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.jm-plan { display: flex; flex-direction: column; }
.jm-plan--featured { border-color: var(--jm-cta); box-shadow: var(--jm-e3); }
.jm-plan__head { padding: var(--jm-s6); border-bottom: 1px solid var(--jm-border); background: var(--jm-tint); }
.jm-plan__price { font-family: var(--jm-font-head); font-size: var(--jm-fs-xl); font-weight: 700; color: var(--jm-heading); font-variant-numeric: tabular-nums; }
.jm-steps-how { display: grid; gap: var(--jm-s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: how; }
.jm-how { position: relative; padding: var(--jm-s6); background: #fff; border: 1px solid var(--jm-border); border-radius: var(--jm-r-lg); display: grid; gap: var(--jm-s3); }
.jm-how::before { counter-increment: how; content: counter(how); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--jm-cta-ink); color: #fff; font-family: var(--jm-font-head); font-weight: 700; }
.jm-how h3 { font-size: var(--jm-fs-base); margin: 0; }
.jm-how p { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin: 0; }

/* ---------- Search results ---------- */
.jm-result { padding-block: var(--jm-s6); border-bottom: 1px solid var(--jm-border); display: grid; gap: .4rem; }
.jm-result:last-child { border-bottom: 0; }
.jm-result h3 { margin: 0; font-size: var(--jm-fs-lg); }
.jm-result p { margin: 0; color: var(--jm-muted); font-size: var(--jm-fs-sm); }

/* ---------- 404 ---------- */
.jm-404 { text-align: center; padding-block: var(--jm-s20); }
.jm-404__code { font-family: var(--jm-font-head); font-size: clamp(4rem, 3rem + 8vw, 9rem); font-weight: 700; line-height: 1; color: var(--jm-tint-2); }
.jm-404 form { max-width: 460px; margin: var(--jm-s8) auto; display: flex; gap: var(--jm-s3); }

/* ---------- Archive filter bar (tabs + scoped search) ---------- */
.jm-archive-bar {
  display: flex; flex-wrap: wrap; gap: var(--jm-s5); align-items: center; justify-content: space-between;
  padding-bottom: var(--jm-s5); margin-bottom: var(--jm-s8); border-bottom: 1px solid var(--jm-border);
}
.jm-archive-search { display: flex; gap: .5rem; flex: 0 1 320px; min-width: 0; }
.jm-archive-search .jm-input { min-height: 44px; }
.jm-archive-search .jm-btn { flex: none; min-height: 44px; padding-inline: .9rem; }
@media (max-width: 640px) {
  .jm-archive-bar { flex-direction: column; align-items: stretch; }
  .jm-archive-search { flex: 1 1 auto; }
}

/* ---------- Previous / next post navigation ---------- */
.jm-postnav {
  display: grid; gap: var(--jm-s4); margin-top: var(--jm-s10);
  padding-top: var(--jm-s6); border-top: 1px solid var(--jm-border);
}
@media (min-width: 640px) { .jm-postnav { grid-template-columns: 1fr 1fr; } }
.jm-postnav__link {
  display: grid; gap: .3rem; padding: var(--jm-s4) var(--jm-s5);
  border: 1px solid var(--jm-border); border-radius: var(--jm-r); background: #fff;
  transition: border-color var(--jm-t) var(--jm-ease), box-shadow var(--jm-t) var(--jm-ease);
}
.jm-postnav__link:hover { border-color: var(--jm-primary); box-shadow: var(--jm-e2); text-decoration: none; }
.jm-postnav__link--next { text-align: right; }
.jm-postnav__label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--jm-font-head); font-size: var(--jm-fs-xs); font-weight: 600;
  text-transform: uppercase; color: var(--jm-cta-ink);
}
.jm-postnav__link--next .jm-postnav__label { justify-content: flex-end; }
.jm-postnav__label svg { width: 14px; height: 14px; }
.jm-postnav__title { font-family: var(--jm-font-head); font-weight: 600; font-size: var(--jm-fs-sm); color: var(--jm-heading); }

/* ---------- Inline PDF preview ---------- */
.jm-pdf-frame {
  border: 1px solid var(--jm-border); border-radius: var(--jm-r-lg); overflow: hidden;
  background: var(--jm-tint-2); height: clamp(420px, 70vh, 780px);
}
.jm-pdf-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Sidebar widgets ---------- */
.jm-widget + .jm-widget { margin-top: var(--jm-s6); }
.jm-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--jm-fs-sm); }
.jm-widget a { color: var(--jm-heading); }
.jm-widget a:hover { color: var(--jm-primary); }

/* ---------- Document card (downloads and reports) ---------- */
.jm-doccard { display: flex; align-items: center; gap: var(--jm-s5); flex-wrap: wrap; }
.jm-doccard__icon { width: 64px; height: 64px; border-radius: var(--jm-r); flex: none; }
.jm-doccard__main { flex: 1; min-width: 0; }
.jm-doccard__title { margin: 0 0 .35rem; font-size: var(--jm-fs-lg); }

/* ---------- Report period grid (other months in a year) ---------- */
.jm-periods { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.jm-period {
  display: grid; gap: .1rem; padding: .625rem .875rem; min-height: 56px;
  border: 1px solid var(--jm-border); border-radius: var(--jm-r-sm); background: #fff;
  transition: border-color var(--jm-t) var(--jm-ease), box-shadow var(--jm-t) var(--jm-ease);
}
.jm-period:hover { border-color: var(--jm-primary); box-shadow: var(--jm-e2); text-decoration: none; }
.jm-period[aria-current="page"] { border-color: var(--jm-cta); background: #FDEAEA; }
.jm-period b { font-family: var(--jm-font-head); font-size: var(--jm-fs-sm); color: var(--jm-heading); }
.jm-period span { font-size: var(--jm-fs-xs); color: var(--jm-muted); font-variant-numeric: tabular-nums; }
.jm-period--empty { opacity: .5; background: var(--jm-tint); border-style: dashed; }

/* ---------- Scanned document (reports that are photographs of paper) ---------- */
.jm-scan { margin: 0; }
.jm-scan a { display: block; border: 1px solid var(--jm-border); border-radius: var(--jm-r-lg); overflow: hidden; background: var(--jm-tint); }
.jm-scan a:hover { border-color: var(--jm-primary); box-shadow: var(--jm-e2); }
.jm-scan img { width: 100%; height: auto; display: block; }
.jm-scan figcaption { display: flex; align-items: center; gap: .4rem; justify-content: center; margin-top: var(--jm-s3); }
.jm-scan figcaption svg { width: 15px; height: 15px; }