/* ---------------------------------------------------------------------------
   Jennifer Vaughan Maanavi — shared base.

   Everything here is page-agnostic: the fonts, the design tokens, the reset,
   and the chrome that header.php and footer.php render on every template.
   Section layout for the home page stays on its own inline styles.

   The three families are variable fonts. Google serves one file per weight,
   but each file carries the whole wght axis, so a single file per family is
   declared across a weight range instead.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/archivo-narrow.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/space-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens ------------------------------------------------------------- */

:root {
  --jm-ink: #1B1A18;
  --jm-ink-deep: #151412;
  --jm-paper: #F8F7F5;
  --jm-sand: #D8D1C4;
  --jm-ember: #E0682E;
  --jm-ember-soft: #F0A85E;

  --jm-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --jm-ui: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --jm-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --jm-gutter: 48px;
  --jm-max: 1640px;
  --jm-measure: 640px;
  --jm-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 640px) {
  :root { --jm-gutter: 22px; }
}

/* --- reset -------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--jm-paper);
  color: var(--jm-ink);
  font-family: var(--jm-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a,
a:where(:visited) { color: var(--jm-ember); text-decoration: none; }
a:hover { color: var(--jm-ink); }
img { display: block; max-width: 100%; }
::selection { background: var(--jm-ember); color: var(--jm-paper); }
:focus-visible { outline: 2px solid var(--jm-ember); outline-offset: 3px; border-radius: 4px; }

.jm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 14px 22px;
  background: var(--jm-ink);
  color: var(--jm-paper);
  font-family: var(--jm-ui);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.jm-skip:focus { left: 12px; top: 12px; }

/* Everything below the loader lives in here. The decorative glows and the
   marquee deliberately overhang the viewport, so the overhang is clipped.
   `clip` rather than `hidden`: hidden would make this a scroll container and
   kill the position:sticky the pinned sections depend on.
   position:relative makes this the containing block for absolute glows whose
   section is unpositioned (#about's): without it they resolve against the
   root, escape the clip, and mobile browsers widen the layout viewport. */
.jm-shell { position: relative; overflow-x: clip; }

/* --- keyframes ---------------------------------------------------------- */

@keyframes jm-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - min(4.5vw, 45px))); } }
@keyframes jmSpin { to { transform: rotate(360deg); } }
@keyframes jmMarqBand { to { transform: translateX(-50%); } }
@keyframes jmPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes jmEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes jmPulseSoft { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  [data-anim] * { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
@media (hover: hover) and (pointer: fine) {
  body[data-jm-cursor], body[data-jm-cursor] * { cursor: none !important; }
}

/* --- intro loader ------------------------------------------------------- */

#jm-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--jm-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}
#jm-loader-mark {
  height: min(20vw, 110px);
  width: auto;
  filter: invert(1) brightness(.95);
  transform: translateY(112%);
  transition: transform .9s var(--jm-ease);
}
.jm-loader-mask { overflow: hidden; padding: 4px 8px; }
.jm-loader-rail {
  width: min(42vw, 220px);
  height: 1px;
  background: rgba(248, 247, 245, .16);
  margin-top: 28px;
  overflow: hidden;
}
#jm-loader-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--jm-sand), var(--jm-paper));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.15s cubic-bezier(.4, 0, .2, 1);
}
.jm-loader-note {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .55);
}
.jm-loader-note.is-top { top: clamp(18px, 3.5vw, 44px); }
.jm-loader-note.is-bottom { bottom: clamp(18px, 3.5vw, 44px); }
#jm-loader-count {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(14px, 3vw, 36px);
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--jm-sand);
  font-variant-numeric: tabular-nums;
}

/* --- scroll progress + cursor spark ------------------------------------- */

.jm-progress-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 110;
  pointer-events: none;
}
#jm-progress {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--jm-ember-soft), var(--jm-ember));
}
#jm-cursor {
  position: fixed;
  top: -200px;
  left: -200px;
  width: 18px;
  height: 18px;
  z-index: 121;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--jm-ease), opacity .3s ease;
  filter: drop-shadow(0 1px 5px rgba(27, 26, 24, .4));
}
#jm-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* --- masthead ----------------------------------------------------------- */

#jm-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px var(--jm-gutter);
  background: transparent;
  border-bottom: 1px solid rgba(27, 26, 24, 0);
  transition: background .5s ease, padding .5s ease, box-shadow .5s ease, border-color .5s ease;
}
#jm-nav.is-scrolled {
  padding: 9px var(--jm-gutter);
  background: rgba(248, 247, 245, .86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(27, 26, 24, .1);
  box-shadow: 0 10px 30px -20px rgba(27, 26, 24, .5);
}
.jm-nav-home { display: flex; align-items: center; flex-shrink: 0; transition: opacity .3s ease; }
.jm-nav-home:hover { opacity: .75; }
#jm-nav-logo { height: 54px; width: auto; transition: height .5s ease; }
#jm-nav.is-scrolled #jm-nav-logo { height: 42px; }

#jm-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-nav-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jm-ink);
  padding-bottom: 4px;
  transition: color .3s ease;
}
.jm-nav-link:hover,
.jm-nav-link.is-current { color: var(--jm-ember); }
.jm-nav-ul {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--jm-ember);
  transition: width .35s var(--jm-ease);
}
.jm-nav-link:hover .jm-nav-ul,
.jm-nav-link.is-current .jm-nav-ul { width: 100%; }

.jm-nav-end { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
#jm-clock {
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(27, 26, 24, .55);
  font-variant-numeric: tabular-nums;
}
.jm-nav-rule { width: 1px; height: 15px; background: rgba(27, 26, 24, .2); }
.jm-nav-cta { font-weight: 600; gap: 9px; align-items: center; }
.jm-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jm-ember); flex-shrink: 0; }

#jm-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
#jm-burger span { display: block; width: 24px; height: 2px; background: var(--jm-ink); }

#jm-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--jm-paper);
  border-top: 1px solid rgba(27, 26, 24, .1);
  padding: 14px 20px 22px;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  list-style: none;
  box-shadow: 0 24px 44px -24px rgba(27, 26, 24, .5);
}
#jm-menu.is-open { display: flex; }
.jm-menu-link {
  display: block;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jm-ink);
  padding: 12px 4px;
  border-bottom: 1px solid rgba(27, 26, 24, .08);
}
.jm-menu-link.is-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 16px;
  letter-spacing: .08em;
  color: var(--jm-paper);
  background: var(--jm-ink);
  padding: 14px 20px;
  border-radius: 100px;
  border-bottom: 0;
}

/* The masthead collapses to a burger before the links would start to crowd
   the logo; the home page script no longer touches these. */
@media (max-width: 900px) {
  #jm-nav-links { display: none; }
  .jm-hide-mobnav { display: none !important; }
  #jm-burger { display: flex; }
}
@media (max-width: 640px) {
  #jm-nav-logo { height: 44px; }
  #jm-nav.is-scrolled #jm-nav-logo { height: 36px; }
}

/* Clear the fixed masthead. The home page's hero has its own top padding, so
   only the other templates take this. */
.jm-internal #jm-main { padding-top: clamp(96px, 11vh, 132px); }

/* --- buttons ------------------------------------------------------------ */

/* Shape and type only. The home page styles its own buttons inline, and three
   of them are underline links that set a dark colour and no background -- a
   filled ground here painted them dark-on-dark. The fill belongs to the
   standalone pages, which carry .jm-internal on the body. */
.jm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .25s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}
.jm-internal .jm-btn {
  color: var(--jm-paper);
  background: var(--jm-ink);
  padding: 16px 28px;
  border-radius: 100px;
}
.jm-internal .jm-btn:hover { color: var(--jm-paper); }
.jm-arrow { transition: transform .35s var(--jm-ease); }
.jm-btn:hover .jm-arrow { transform: translateX(5px); }

/* --- world map ---------------------------------------------------------- */

/* The band sits in normal flow and plays its reveal once, as it comes into
   view. It used to pin for 170vh while the pins revealed on scroll: that budget
   was read as the map loading slowly rather than as an animation, so the sticky
   box and the scroll distance behind it are gone. The band's own shape is set
   on .jm-band below and never depended on them.

   The bottom margin restores the breathing room the pinned box used to leave;
   with the section's own 40px it matches the 96px above. */
.jm-map-band { position: relative; margin: 48px 0 56px; }
.jm-map-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--jm-ink);
  width: 100%;
}
/* max-height wins over aspect-ratio, so a short window gets a shallower band
   rather than a map cropped by the sticky box. <jm-map> fills whatever shape
   it is handed, so widening past 20:9 costs nothing.

   width must be stated: left to `auto`, the box resolves its width back through
   the ratio as soon as max-height bites, and the band narrows instead of
   flattening -- which is the letterboxing this was meant to remove. */
.jm-band {
  width: 100%;
  aspect-ratio: 20 / 9;
  max-height: calc(100vh - 120px);
}
.jm-band jm-map { display: block; width: 100%; height: 100%; }
.jm-map-caption {
  position: absolute;
  top: 24px;
  left: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .75);
}
.jm-map-caption span[aria-hidden] { width: 34px; height: 1px; background: var(--jm-ember); }

@media (max-width: 900px) {
  .jm-band { aspect-ratio: 16 / 9; }
}
/* On a phone the caption wraps to two lines, and overlaid that covers a third
   of a 195px-tall map. It moves into the frame above the band instead, where
   the frame's own dark ground still carries it. */
@media (max-width: 640px) {
  .jm-map-band { margin: 32px 0 32px; }
  /* order:-1 lifts the caption above the band without moving it in the markup,
     where the desktop overlay wants it after. */
  .jm-map-frame { display: flex; flex-direction: column; padding-top: 14px; }
  .jm-map-caption {
    position: static;
    order: -1;
    padding: 0 16px 12px;
    font-size: 11px;
    letter-spacing: .18em;
    gap: 8px;
  }
  .jm-map-caption span[aria-hidden] { width: 20px; flex-shrink: 0; }
}

/* --- page components ----------------------------------------------------
   The vocabulary the standalone pages are built from. The type scale, colours
   and cell treatment are lifted from the home page's inline styles so the two
   read as one site; the home sections keep their own inline styles.
------------------------------------------------------------------------- */

.jm-section {
  max-width: var(--jm-max);
  margin: 0 auto;
  padding: clamp(48px, 5.5vw, 84px) var(--jm-gutter);
}
.jm-section--tight { padding-top: 0; }
/* Full-bleed ground, content still on the page's measure. The inset is done
   with padding rather than `margin-inline:auto` on the children: auto margins
   would centre any child narrower than the measure, which pushed body copy off
   the column the rest of the page is aligned to. */
.jm-section--dark {
  max-width: none;
  background: var(--jm-ink);
  color: var(--jm-paper);
  padding-inline: max(var(--jm-gutter), calc((100% - var(--jm-max)) / 2 + var(--jm-gutter)));
  padding-block: clamp(44px, 5vw, 72px);
}

.jm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jm-ink);
}
.jm-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--jm-ember);
  flex-shrink: 0;
}
.jm-section--dark .jm-eyebrow,
.jm-cta-band .jm-eyebrow { color: rgba(248, 247, 245, .8); }

.jm-display {
  margin: 0;
  font-family: var(--jm-display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: .98;
  letter-spacing: -.015em;
  color: inherit;
}
.jm-display--sm { font-size: clamp(30px, 3.4vw, 52px); }

.jm-headline {
  margin: 0;
  font-family: var(--jm-ui);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: inherit;
}

/* The ember italic that carries the emphasis in every headline on the site. */
.jm-accent {
  font-family: var(--jm-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--jm-ember);
}

.jm-lead {
  margin: 26px 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(27, 26, 24, .8);
}
.jm-section--dark .jm-lead,
.jm-cta-band .jm-lead { color: rgba(248, 247, 245, .82); }

/* One centred column. Two columns filled the width but made the reader
   track back and forth across a wide screen for a short run of text. */
.jm-prose { margin: 26px auto 0; max-width: var(--jm-measure); }
.jm-prose p {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.68;
  color: rgba(27, 26, 24, .78);
}
/* The paragraph that opens a page, set a size above the body. */
.jm-prose--lead { max-width: 30ch; margin-inline: 0; }
.jm-prose--lead p {
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.42;
  color: rgba(27, 26, 24, .9);
}
.jm-section--dark .jm-prose--lead p { color: rgba(248, 247, 245, .92); }
.jm-prose p:last-child { margin-bottom: 0; }
.jm-section--dark .jm-prose p,
.jm-cta-band .jm-prose p { color: rgba(248, 247, 245, .74); }
.jm-prose--2col { columns: 2; column-gap: clamp(32px, 4vw, 64px); max-width: 1120px; }
.jm-prose--2col p { break-inside: avoid; }
@media (max-width: 760px) {
  .jm-prose--2col { columns: 1; }
}

.jm-quote {
  margin: clamp(32px, 4vw, 56px) auto;
  padding-left: clamp(18px, 2.4vw, 32px);
  border-left: 2px solid var(--jm-ember);
  max-width: var(--jm-measure);
  font-family: var(--jm-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--jm-ink);
}
.jm-section--dark .jm-quote,
.jm-cta-band .jm-quote { color: var(--jm-paper); }
.jm-section--dark a,
.jm-section--dark a:where(:visited),
.jm-cta-band a,
.jm-cta-band a:where(:visited) { color: var(--jm-ember); }
.jm-section--dark a:hover,
.jm-cta-band a:hover { color: var(--jm-paper); }
.jm-section--dark .jm-prose a,
.jm-prose a { text-underline-offset: .22em; text-decoration: underline; text-decoration-thickness: 1px; }
.jm-prose a:hover { text-decoration-color: currentColor; }

/* Bordered cells: milestones, sample talks, service summaries. */
.jm-cells {
  display: grid;
  grid-template-columns: repeat(var(--jm-cols, 3), 1fr);
  gap: 0 40px;
  margin-top: 36px;
}
.jm-cell {
  border-top: 2px solid var(--jm-ink);
  padding: 18px 26px 28px 0;
  transition: border-color .4s ease;
}
.jm-cell:hover { border-top-color: var(--jm-ember); }
.jm-cell h3 {
  margin: 0 0 10px;
  font-family: var(--jm-ui);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: inherit;
}
.jm-cell p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(27, 26, 24, .72);
}
.jm-cell .jm-cell-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jm-ember);
}
.jm-section--dark .jm-cell,
.jm-cta-band .jm-cell,
.jm-slab .jm-cell { border-top-color: rgba(248, 247, 245, .35); }
.jm-section--dark .jm-cell p,
.jm-cta-band .jm-cell p,
.jm-slab .jm-cell p { color: rgba(248, 247, 245, .72); }
.jm-slab .jm-display,
.jm-slab .jm-headline { color: var(--jm-paper); }
.jm-slab .jm-lead { color: rgba(248, 247, 245, .82); }

@media (max-width: 1000px) {
  .jm-cells { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
}
@media (max-width: 640px) {
  .jm-cells { grid-template-columns: 1fr; }
  .jm-cell { padding-right: 0; }
}

/* Page opener: copy beside a portrait. */
.jm-page-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  max-width: var(--jm-max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--jm-gutter) clamp(40px, 5vw, 72px);
  position: relative;
}
.jm-page-hero::before {
  content: "";
  position: absolute;
  width: min(520px, 46vw);
  aspect-ratio: 1;
  top: -6%;
  right: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 104, 46, .34), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.jm-page-hero > * { position: relative; z-index: 1; }
.jm-page-hero-figure {
  border-radius: 24px;
  overflow: hidden;
  background: #EFEBE3;
  box-shadow: 0 44px 84px -40px rgba(27, 26, 24, .5);
}
.jm-page-hero-figure {
  max-height: min(66vh, 620px);
  align-self: stretch;
}
.jm-page-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 1.1s var(--jm-ease);
}
/* Pages with no photography of their own open on type alone rather than on a
   stock image; the headline takes the width the portrait would have had. */
.jm-page-hero--text { grid-template-columns: 1fr; align-items: start; }
/* The opener shares the centre axis the prose below it sits on, so a page made
   only of text reads as one column rather than two misaligned ones. The
   headline gets a wider column than the body measure so it does not stack up
   into a narrow stack of short lines. */
.jm-page-hero--text > div {
  max-width: var(--jm-measure);
  margin-inline: auto;
  width: 100%;
}
.jm-page-hero--text .jm-display { font-size: clamp(32px, 3.6vw, 56px); }
.jm-page-hero--text .jm-lead { max-width: none; margin-top: 28px; }

/* A smaller source file stays sharp by taking a narrower column rather than
   being stretched to the standard one. */
.jm-page-hero--narrowpic { grid-template-columns: 1.45fr .55fr; }
@media (max-width: 900px) {
  .jm-page-hero--narrowpic { grid-template-columns: 1fr; }
}

/* For pages whose body is grids rather than prose: the opener keeps the page
   gutter so it lines up with the rows beneath it, instead of sitting on the
   narrower reading column. */
.jm-page-hero--wide { grid-template-columns: 1fr; align-items: start; }
.jm-page-hero--wide > div { max-width: none; }
.jm-page-hero--wide .jm-display { max-width: 22ch; font-size: clamp(32px, 3.8vw, 60px); }
.jm-page-hero--wide .jm-lead { max-width: 58ch; margin-inline: 0; }

@media (max-width: 900px) {
  .jm-page-hero { grid-template-columns: 1fr; }
  .jm-page-hero-figure { order: -1; max-height: 58vh; }
}

/* A light section already ends on whitespace, so the closing band only needs a
   real gap when it follows another dark block. */
.jm-section + .jm-cta-band { margin-top: clamp(8px, 1.5vw, 24px); }
.jm-section--dark + .jm-cta-band { margin-top: clamp(56px, 7vw, 104px); }

/* Closing call to action, the dark band every page ends on. */
.jm-cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--jm-ink);
  color: var(--jm-paper);
  padding: clamp(40px, 5vw, 76px);
  /* Inset from the page edges on the same gutter as the content above it,
     rather than running full bleed to the window. */
  max-width: calc(var(--jm-max) + var(--jm-gutter) * 2);
  width: calc(100% - var(--jm-gutter) * 2);
  margin: clamp(56px, 7vw, 104px) auto clamp(48px, 6vw, 88px);
}
.jm-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(224, 104, 46, .46), transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(240, 168, 94, .16), transparent 70%);
  pointer-events: none;
}
.jm-cta-band > * { position: relative; z-index: 1; }
.jm-cta-band .jm-display { max-width: 26ch; }
.jm-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* The closing line is the call to action itself, so it carries the link rather
   than a button with copy that is not the client's. */
/* Scoped past `.jm-cta-band a`, which would otherwise paint the whole closing
   sentence ember instead of just its accent. */
.jm-cta-band .jm-cta-link,
.jm-cta-band .jm-cta-link:where(:visited),
.jm-cta-band .jm-cta-link:hover { color: var(--jm-paper); display: inline; }
.jm-cta-band .jm-cta-link .jm-accent { color: var(--jm-ember); }
.jm-cta-link .jm-arrow {
  display: inline-block;
  color: var(--jm-ember);
  transition: transform .35s var(--jm-ease);
}
.jm-cta-link:hover .jm-arrow { transform: translateX(8px); }

/* Press logo row, shared by About, Speaking and Media. */
.jm-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
  margin-top: 28px;
}
.jm-logos img {
  height: 30px;
  width: auto;
  opacity: .62;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}
.jm-logos img:hover { opacity: 1; filter: grayscale(0); }
.jm-logos .jm-logos-word {
  font-family: var(--jm-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--jm-ink);
  opacity: .62;
}

/* --- statement block ----------------------------------------------------
   The opener's gradient circle, offered as a section for use inside a page
   rather than at the top of it: the headers now lead on a photograph.
------------------------------------------------------------------------- */

.jm-statement {
  position: relative;
  max-width: var(--jm-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--jm-gutter);
}
.jm-statement::before {
  content: "";
  position: absolute;
  width: min(520px, 46vw);
  aspect-ratio: 1;
  top: -14%;
  left: 52%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 104, 46, .34), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.jm-statement > * { position: relative; z-index: 1; }
.jm-statement-inner { max-width: 940px; }
.jm-statement .jm-display,
.jm-statement .jm-headline { max-width: 20ch; }
.jm-statement .jm-lead { margin-top: 26px; }
/* A quote set as the statement drops its rule and takes the headline's size. */
.jm-statement .jm-quote {
  margin: 0;
  padding-left: 0;
  border-left: 0;
  max-width: 22ch;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.08;
}

@media (max-width: 760px) {
  .jm-statement::before { left: 34%; top: -8%; }
}

/* --- dark slab + ember panel -------------------------------------------
   The home page's Advisory section is a dark slab with a rounded top edge, an
   ember hairline and a glow, and it closes on an ember-gradient card. The
   standalone pages borrow that vocabulary so they read as the same site.
------------------------------------------------------------------------- */

.jm-slab {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: clamp(32px, 5vw, 72px) auto clamp(48px, 6vw, 88px);
  max-width: calc(var(--jm-max) + var(--jm-gutter) * 2);
  width: calc(100% - var(--jm-gutter) * 2);
  padding: clamp(56px, 7vw, 96px) clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px);
  background: linear-gradient(180deg, #1F1E1B, #1B1A18 30%);
  color: var(--jm-paper);
  border-radius: 44px;
  box-shadow: 0 -30px 60px -40px rgba(27, 26, 24, .4);
}
.jm-slab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(224, 104, 46, .7), transparent);
}
.jm-slab::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 360px;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 104, 46, .28), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.jm-slab > * { position: relative; z-index: 4; }
.jm-slab-inner { max-width: var(--jm-max); margin: 0 auto; }
.jm-slab-inner--narrow { max-width: 720px; }

.jm-slab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.jm-slab .jm-prose { margin-inline: 0; max-width: none; }
/* A two-up that follows a heading needs its own space above it. */
.jm-headline + .jm-slab-grid,
.jm-display + .jm-slab-grid { margin-top: clamp(28px, 3.4vw, 48px); }
.jm-slab .jm-prose p { color: rgba(248, 247, 245, .76); }
.jm-slab .jm-eyebrow { color: rgba(248, 247, 245, .8); }
.jm-slab a,
.jm-slab a:where(:visited) { color: var(--jm-ember); }
.jm-slab a:hover { color: var(--jm-paper); }

/* A card whose ground is one of the design's photographs, blurred and darkened
   the way the home page uses them -- never shown as a sharp picture. */
.jm-figcard {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 3vw, 40px);
  background: var(--jm-ink);
  transition: transform .5s var(--jm-ease);
}
.jm-figcard:hover { transform: translateY(-8px); }
/* Blurred hard enough that the photograph reads as ground rather than as a
   picture: the stock shot behind this card is a pair of hands, and at a gentle
   blur the client was left asking what they were pointing at. The negative
   inset has to clear the blur radius, or the fade shows at the card's edge. */
.jm-figcard-bg {
  position: absolute;
  inset: -10%;
  filter: blur(16px);
  overflow: hidden;
}
.jm-figcard-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) sepia(.12) contrast(1.03);
  transition: transform 1s var(--jm-ease);
}
.jm-figcard-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(27, 26, 24, .66), rgba(27, 26, 24, .92) 62%);
}
.jm-figcard > .jm-quote {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: none;
  color: var(--jm-paper);
}

/* The closing statement, on the ember card the home page uses for its second
   advisory route. */
.jm-ember-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin: clamp(28px, 3.4vw, 56px) 0 0;
  padding: clamp(32px, 4vw, 56px);
  background: linear-gradient(150deg, #E0682E, #F0A85E);
  color: var(--jm-ink);
}
.jm-ember-panel .jm-lead {
  margin: 0;
  max-width: 52ch;
  color: rgba(27, 26, 24, .92);
}
.jm-ember-panel .jm-eyebrow { color: rgba(27, 26, 24, .78); }
.jm-ember-panel .jm-eyebrow::before { background: rgba(27, 26, 24, .5); }
.jm-ember-panel .jm-btn { background: var(--jm-ink); color: var(--jm-paper); }
.jm-ember-panel .jm-btn:hover { box-shadow: 0 18px 34px -14px rgba(27, 26, 24, .55); }

/* The two-up stacks before its columns get too narrow to hold a line of press
   marks or a readable measure. */
@media (max-width: 1060px) {
  .jm-slab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .jm-slab { border-radius: 24px; }
  .jm-figcard { min-height: 320px; }
}

/* A rule across the slab, for pages whose copy carries more than one heading. */
.jm-slab-rule {
  height: 1px;
  border: 0;
  margin: clamp(48px, 6vw, 88px) 0 clamp(28px, 3.4vw, 48px);
  background: linear-gradient(90deg, rgba(248, 247, 245, .22), rgba(248, 247, 245, .04));
}

/* Placeholder for footage that does not exist yet. Deliberately styled rather
   than left blank, so the gap reads as "not filmed yet" instead of "broken". */
.jm-reel {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  border: 1px dashed rgba(248, 247, 245, .22);
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(224, 104, 46, .16), transparent 60%),
    rgba(248, 247, 245, .03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}
.jm-reel-glyph {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(224, 104, 46, .55);
  display: grid;
  place-items: center;
  color: var(--jm-ember);
  font-size: 15px;
}
.jm-reel-note {
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .6);
}

/* Press marks on a dark ground. */
/* Half-column width, so the marks run a size down to keep to one line. */
.jm-slab .jm-logos { gap: clamp(14px, 1.8vw, 24px); margin-top: 22px; }
.jm-slab .jm-logos img { height: 22px; opacity: .72; filter: grayscale(1) invert(1) brightness(1.6); }
.jm-slab .jm-logos img:hover { opacity: 1; filter: grayscale(0) invert(1) brightness(1.6); }
.jm-slab .jm-logos .jm-logos-word { color: var(--jm-paper); opacity: .72; }

/* The closing action on its own, without a paragraph to carry. */
.jm-ember-panel--bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 34px) clamp(28px, 3.4vw, 44px);
}
.jm-ember-panel--bar .jm-actions { margin-top: 0; }

/* --- Formidable forms ---------------------------------------------------
   Formidable's own stylesheet is switched off site-wide (Formidable > Global
   Settings > Manage Styles > Load form styling: never), so everything the
   plugin used to paint is painted here instead. Nothing below leans on the
   plugin's custom properties: those were only ever read by its stylesheet, so
   setting them now would style nothing.

   The markup is still the plugin's, so these hook its class names:
     .frm_forms > form > .frm_form_fields > fieldset > .frm_fields_container
       .frm_form_field          one field, widthed by .frm_half / .frm_full
       .frm_primary_label       the label, with .frm_required inside it
       .frm_description         the hint under a field ("First", "Last")
       .frm_hidden_container    a field whose label is meant to be invisible
       .frm_submit              the button wrapper
------------------------------------------------------------------------- */

.jm-form .frm_forms,
.jm-form .frm-show-form,
.jm-form .frm_form_fields { width: 100%; }

/* A browser's default fieldset carries a border, padding and a visible legend.
   All three are normally the plugin's to suppress, and all three reappeared the
   moment its stylesheet went away. */
.jm-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.jm-form legend.frm_screen_reader,
.jm-form .frm_screen_reader {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fields flow in a row and wrap. .frm_half is the plugin's own half-width
   class, and it is what puts the name pair side by side. */
.jm-form .frm_fields_container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}
.jm-form .frm_form_field { flex: 1 1 100%; min-width: 0; margin: 0 0 18px; }
.jm-form .frm_half { flex: 1 1 calc(50% - 9px); }
.jm-form .frm_third { flex: 1 1 calc(33.333% - 12px); }
.jm-form .frm_fourth { flex: 1 1 calc(25% - 14px); }

/* Formidable's twelve-column grid, which is what the Subscribe form uses:
   frm6 + frm6 puts the email field and the button on one line. Each basis is
   its share of the row less its share of the 18px gap. */
.jm-form .frm1 { flex: 1 1 calc(8.333% - 16.5px); }
.jm-form .frm2 { flex: 1 1 calc(16.666% - 15px); }
.jm-form .frm3 { flex: 1 1 calc(25% - 13.5px); }
.jm-form .frm4 { flex: 1 1 calc(33.333% - 12px); }
.jm-form .frm5 { flex: 1 1 calc(41.666% - 10.5px); }
.jm-form .frm6 { flex: 1 1 calc(50% - 9px); }
.jm-form .frm7 { flex: 1 1 calc(58.333% - 7.5px); }
.jm-form .frm8 { flex: 1 1 calc(66.666% - 6px); }
.jm-form .frm9 { flex: 1 1 calc(75% - 4.5px); }
.jm-form .frm10 { flex: 1 1 calc(83.333% - 3px); }
.jm-form .frm11 { flex: 1 1 calc(91.666% - 1.5px); }
.jm-form .frm12 { flex: 1 1 100%; }

/* The spam trap: an unclassed wrapper around a field the plugin hides with
   inline styles. Left in the flow it still claims a column gap. */
.jm-form .frm_fields_container > div:not([class]),
.jm-form .frm_verify { display: none; }

.jm-form .frm_primary_label {
  display: block;
  padding: 0 0 7px;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(27, 26, 24, .7);
}
.jm-form .frm_required { color: var(--jm-ember); font-weight: 600; }

/* A paired field, such as the second half of a name: its label is meant to be
   invisible but still hold its line, so the two inputs stay level. */
.jm-form .frm_hidden_container > .frm_primary_label { visibility: hidden; }

.jm-form input[type="text"],
.jm-form input[type="email"],
.jm-form input[type="tel"],
.jm-form input[type="url"],
.jm-form input[type="number"],
.jm-form input[type="password"],
.jm-form input[type="date"],
.jm-form select,
.jm-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--jm-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--jm-ink);
  background: #FFFFFF;
  border: 1px solid rgba(27, 26, 24, .18);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.jm-form input[type="text"],
.jm-form input[type="email"],
.jm-form input[type="tel"],
.jm-form input[type="url"],
.jm-form input[type="number"],
.jm-form input[type="password"],
.jm-form input[type="date"],
.jm-form select { height: 52px; }
.jm-form textarea { min-height: 150px; resize: vertical; }
.jm-form ::placeholder { color: rgba(27, 26, 24, .42); }
.jm-form input:focus,
.jm-form select:focus,
.jm-form textarea:focus {
  outline: none;
  border-color: var(--jm-ember);
  box-shadow: 0 0 0 3px rgba(224, 104, 46, .16);
}

.jm-form .frm_description,
.jm-form .frm_form_field .frm_description {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(27, 26, 24, .55);
}

.jm-form .frm_submit { margin: 0; }
.jm-form .frm_submit.frm_flex { display: flex; }
.jm-form .frm_submit button.frm_button_submit,
.jm-form .frm_submit input[type="submit"],
.jm-form .frm_submit input[type="button"] {
  display: inline-flex;
  align-items: center;
  width: auto;
  cursor: pointer;
  background: var(--jm-ink);
  border: 1px solid var(--jm-ink);
  color: var(--jm-paper);
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 16px 28px;
  height: auto;
  line-height: normal;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.jm-form .frm_submit button.frm_button_submit:hover,
.jm-form .frm_submit input[type="submit"]:hover,
.jm-form .frm_submit input[type="button"]:hover {
  background: var(--jm-ember);
  border-color: var(--jm-ember);
  color: var(--jm-paper);
  box-shadow: 0 18px 34px -14px rgba(224, 104, 46, .55);
}

/* Validation and confirmation, which the plugin also used to paint. */
.jm-form .frm_error {
  margin-top: 6px;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  color: #B3391B;
}
.jm-form .frm_blank_field input,
.jm-form .frm_blank_field select,
.jm-form .frm_blank_field textarea { border-color: rgba(224, 104, 46, .65); }
.jm-form .frm_error_style,
.jm-form .frm_message {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.jm-form .frm_error_style {
  color: #B3391B;
  background: rgba(224, 104, 46, .08);
  border: 1px solid rgba(224, 104, 46, .45);
}
.jm-form .frm_message {
  color: var(--jm-ink);
  background: rgba(224, 104, 46, .1);
  border: 1px solid rgba(224, 104, 46, .4);
}

/* A form given its own card on the page. */
.jm-form-card {
  max-width: 720px;
  margin: clamp(28px, 3.4vw, 48px) auto 0;
  padding: clamp(26px, 3vw, 40px);
  background: #FFFFFF;
  border: 1px solid rgba(27, 26, 24, .1);
  border-radius: 20px;
  box-shadow: 0 30px 60px -44px rgba(27, 26, 24, .45);
}

/* The same form on a dark ground. */
.jm-form--dark .frm_primary_label { color: rgba(248, 247, 245, .7); }
.jm-form--dark .frm_description,
.jm-form--dark .frm_form_field .frm_description { color: rgba(248, 247, 245, .55); }
.jm-form--dark input[type="text"],
.jm-form--dark input[type="email"],
.jm-form--dark input[type="tel"],
.jm-form--dark input[type="url"],
.jm-form--dark input[type="number"],
.jm-form--dark select,
.jm-form--dark textarea {
  color: var(--jm-paper);
  background: rgba(248, 247, 245, .06);
  border-color: rgba(248, 247, 245, .22);
}
.jm-form--dark ::placeholder { color: rgba(248, 247, 245, .4); }
.jm-form--dark input:focus,
.jm-form--dark select:focus,
.jm-form--dark textarea:focus {
  background: rgba(248, 247, 245, .1);
  border-color: var(--jm-ember);
}
.jm-form--dark .frm_submit button.frm_button_submit,
.jm-form--dark .frm_submit input[type="submit"] {
  background: var(--jm-ember);
  border-color: var(--jm-ember);
  color: var(--jm-paper);
}
.jm-form--dark .frm_submit button.frm_button_submit:hover,
.jm-form--dark .frm_submit input[type="submit"]:hover {
  background: var(--jm-paper);
  border-color: var(--jm-paper);
  color: var(--jm-ink);
  box-shadow: 0 18px 34px -14px rgba(248, 247, 245, .35);
}
.jm-form--dark .frm_message { color: var(--jm-paper); }

/* Subscribe sits closer to its last field than the page rhythm wants, but only
   where the form is not already stacked tight on a phone. */
@media (min-width: 641px) {
  .jm-form--dark .frm_submit button.frm_button_submit,
  .jm-form--dark .frm_submit input[type="submit"] { margin-top: 26px; }
}

/* Side by side is too tight for a phone. */
@media (max-width: 560px) {
  .jm-form .frm_half,
  .jm-form .frm_third,
  .jm-form .frm_fourth,
  .jm-form .frm1,
  .jm-form .frm2,
  .jm-form .frm3,
  .jm-form .frm4,
  .jm-form .frm5,
  .jm-form .frm6,
  .jm-form .frm7,
  .jm-form .frm8,
  .jm-form .frm9,
  .jm-form .frm10,
  .jm-form .frm11 { flex: 1 1 100%; }
  /* the button then has no field beside it to line up with */
  .jm-form--dark .frm_submit button.frm_button_submit { margin-top: 0; }
}

/* --- media page ---------------------------------------------------------
   Two of the four blocks the copy calls for have no content yet, so they are
   built as stated empty states rather than left out: the shape of what goes
   there is visible, and swapping in real entries is a markup change only.
------------------------------------------------------------------------- */

/* The outlets the copy lists, set under their marks. */
.jm-press-line {
  margin: 18px 0 0;
  max-width: none;
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(27, 26, 24, .55);
}
.jm-headline--spaced { margin-top: clamp(56px, 7vw, 96px); }

.jm-podcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(24px, 3vw, 40px);
}
.jm-podcard {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(27, 26, 24, .1);
  transition: transform .5s var(--jm-ease), border-color .35s ease, box-shadow .45s ease;
}
.jm-podcard:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 104, 46, .5);
  box-shadow: 0 26px 50px -32px rgba(27, 26, 24, .45);
}
.jm-podcard-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #EFEBE3;
  overflow: hidden;
}
.jm-podcard-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--jm-ease);
}
.jm-podcard:hover .jm-podcard-frame img { transform: scale(1.05); }
/* No artwork yet: the show's initial stands in, so a row of cards awaiting
   thumbnails still reads as a set of distinct shows. */
.jm-podcard-frame.is-empty {
  display: grid;
  place-items: center;
  border-bottom: 1px dashed rgba(27, 26, 24, .16);
  background:
    radial-gradient(80% 90% at 30% 15%, rgba(224, 104, 46, .13), transparent 62%),
    #EFEBE3;
}
.jm-podcard-initial {
  font-family: var(--jm-display);
  font-weight: 400;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  color: rgba(27, 26, 24, .17);
  transition: color .4s ease;
}
.jm-podcard:hover .jm-podcard-initial { color: rgba(224, 104, 46, .38); }
.jm-podcard-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.jm-podcard-show {
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jm-ember);
}
.jm-podcard-title {
  margin: 0;
  font-family: var(--jm-ui);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--jm-ink);
}
.jm-podcard-go {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1;
  color: rgba(27, 26, 24, .45);
  transition: color .3s ease, transform .35s var(--jm-ease);
}
.jm-podcard:hover .jm-podcard-go { transform: translate(4px, -4px); }
.jm-podcard:hover .jm-podcard-go { color: var(--jm-ember); }

/* Empty state for the chronological list: the three fields the copy names,
   as a skeleton, so the shape is legible before there is anything to list. */
.jm-listskel {
  margin-top: clamp(22px, 2.6vw, 36px);
  border-top: 1px solid rgba(248, 247, 245, .18);
}
.jm-listskel-row {
  display: grid;
  grid-template-columns: 1.4fr .6fr 1.6fr;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(248, 247, 245, .1);
}
.jm-listskel-head {
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .45);
  padding-bottom: 12px;
  border-bottom-color: rgba(248, 247, 245, .18);
}
.jm-listskel-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(248, 247, 245, .07);
}
.jm-listskel-bar:nth-child(2) { width: 60%; }
@media (max-width: 760px) {
  .jm-listskel-row { grid-template-columns: 1fr; gap: 10px; }
  .jm-listskel-head { display: none; }
}

.jm-clipgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(22px, 2.6vw, 36px);
}

/* --- keyword landing pages ----------------------------------------------
   Six search landing pages share one layout, held in template-parts/landing.php.
   Most of what they need already exists above: the page hero, sections, the
   statement block, the dark slab, cells and the CTA band are the same
   components the other internal pages are built from, so the six designs only
   needed the pieces below.

   Rules that could reach an existing page are scoped to .jm-landing. The rest
   are classes that appear nowhere else in the theme.
------------------------------------------------------------------------- */

/* Heading beside its prose rather than above it. */
.jm-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}
.jm-two .jm-prose { padding-top: 6px; }
.jm-two .jm-headline { max-width: none; font-size: clamp(28px, 3.3vw, 48px); }

.jm-headline--sm { font-size: clamp(25px, 2.8vw, 40px); }

/* The hero's second, quieter action. Scoped past `.jm-internal .jm-btn`, which
   fills every button on an internal page; a bare .jm-btn--ghost would tie with
   it on specificity and be settled by source order. */
.jm-internal .jm-btn.jm-btn--ghost {
  color: var(--jm-ink);
  background: transparent;
  border: 1px solid rgba(27, 26, 24, .28);
}
.jm-internal .jm-btn.jm-btn--ghost:hover {
  color: var(--jm-ink);
  background: transparent;
  border-color: var(--jm-ink);
}

/* The closing band is ink and so is the internal button fill, so the button is
   inverted here or it sinks into the panel. */
.jm-internal .jm-cta-band .jm-btn { color: var(--jm-ink); background: var(--jm-paper); }
.jm-internal .jm-cta-band .jm-btn:hover { color: var(--jm-paper); background: var(--jm-ember); }

/* The operating method drawn out: its six stages, then what they produce. */
.jm-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; margin-top: 8px; }
.jm-chain-step {
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jm-paper);
  padding: 13px 20px;
  border: 1px solid rgba(248, 247, 245, .3);
  border-radius: 100px;
}
.jm-chain-step.is-growth {
  background: linear-gradient(150deg, var(--jm-ember), var(--jm-ember-soft));
  border-color: transparent;
  color: var(--jm-ink);
}
.jm-chain-arrow { color: var(--jm-ember); font-size: 18px; line-height: 1; }
.jm-chain-note {
  margin-top: 26px;
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .5);
}

/* Questions and answers, ruled like a table. */
.jm-qa { margin-top: 36px; border-top: 2px solid var(--jm-ink); }
.jm-qa-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(12px, 3vw, 48px);
  padding: 30px 0;
  border-bottom: 1px solid rgba(27, 26, 24, .16);
}
.jm-qa-row h3 {
  margin: 0;
  font-family: var(--jm-ui);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.jm-qa-row p {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: rgba(27, 26, 24, .78);
}

/* A row inside the ember panel: copy on the left, the action on the right.
   The panel itself stays a plain block, because the home page and the other
   internal pages stack their panels, and because the Advisory panel puts a
   second row of links underneath this one. */
.jm-ember-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.jm-ember-row .jm-lead { margin: 0; max-width: 52ch; color: rgba(27, 26, 24, .92); }
.jm-ember-row .jm-actions { margin-top: 0; justify-content: flex-end; }

/* The links off the Advisory panel into the landing pages, ruled off from the
   row above them. */
.jm-ember-links {
  margin-top: clamp(26px, 3vw, 42px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(27, 26, 24, .22);
}
.jm-ember-links-head {
  margin-bottom: 16px;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(27, 26, 24, .66);
}
.jm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Scoped to the panel so it outranks `a, a:where(:visited)`, which would paint
   these ember on an ember ground and leave them unreadable. */
.jm-ember-panel .jm-chip,
.jm-ember-panel .jm-chip:where(:visited) {
  display: inline-flex;
  align-items: center;
  font-family: var(--jm-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jm-ink);
  border: 1px solid rgba(27, 26, 24, .34);
  border-radius: 100px;
  padding: 11px 18px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.jm-ember-panel .jm-chip:hover {
  color: var(--jm-paper);
  background: var(--jm-ink);
  border-color: var(--jm-ink);
}

/* Inside a cell the quote is a lead-in line, not a pull quote, so the ember
   rule and the outer margins the base .jm-quote gives it come back off. */
.jm-landing .jm-cell .jm-quote {
  margin: 0 0 14px;
  padding-left: 0;
  border-left: 0;
  max-width: none;
  font-size: clamp(20px, 2vw, 26px);
}

/* Here the slab's grid sits under a heading; on the other pages it opens the
   slab and wants no space above it. */
.jm-landing .jm-slab-grid { margin-top: clamp(28px, 3.4vw, 48px); }

/* Copy that comes as several paragraphs: a run of leads reads as one passage,
   and a cell's second paragraph sits close under its first. */
.jm-landing .jm-lead + .jm-lead { margin-top: 16px; }
.jm-landing .jm-cell p + p { margin-top: 12px; }
/* The method's scoped deliverables: the lead-in, the list, and the closing
   line keep the slab's rhythm rather than butting against the grid. */
.jm-landing .jm-slab-grid + .jm-lead { margin-top: clamp(40px, 4.6vw, 64px); }
.jm-landing .jm-cells + .jm-lead { margin-top: 30px; }
/* A single lesson keeps a reading measure rather than spanning the page. */
.jm-landing .jm-cells--single { max-width: 760px; }

@media (max-width: 900px) {
  .jm-two { grid-template-columns: 1fr; }
  .jm-qa-row { grid-template-columns: 1fr; }
  .jm-ember-row { grid-template-columns: 1fr; }
  .jm-ember-row .jm-actions { justify-content: flex-start; }
}

/* --- editorial placeholder ---------------------------------------------- */

.jm-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFEBE3;
  border: 1px dashed rgba(27, 26, 24, .16);
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(27, 26, 24, .38);
}

/* --- colophon ----------------------------------------------------------- */

.jm-footer {
  position: relative;
  margin-top: 70px;
  overflow: hidden;
  background: var(--jm-ink-deep);
  color: var(--jm-paper);
  padding: 64px var(--jm-gutter) 44px;
}
.jm-footer-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(224, 104, 46, .3), transparent 55%),
    radial-gradient(60% 60% at 88% 30%, rgba(240, 168, 94, .14), transparent 70%),
    linear-gradient(180deg, #1B1A18, #151412 60%, #100F0E);
}
.jm-footer-hair {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 104, 46, .7), transparent);
}
.jm-footer-ghost {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  font-family: var(--jm-ui);
  font-weight: 700;
  font-size: clamp(120px, 26vw, 420px);
  line-height: .7;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248, 247, 245, .06);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
.jm-footer-inner { max-width: var(--jm-max); margin: 0 auto; position: relative; z-index: 2; }
.jm-footer-mark {
  text-align: center;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(248, 247, 245, .14);
}
.jm-footer-mark > div { height: clamp(90px, 10vw, 140px); max-width: 400px; margin: 0 auto; }
.jm-footer-mark jm-logo3d { display: block; width: 100%; height: 100%; }

.jm-grid-foot { display: grid; grid-template-columns: 1.5fr 2fr 1fr; gap: 44px; padding: 52px 0; }
.jm-foot-head {
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .5);
  margin-bottom: 18px;
}
.jm-foot-list { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.jm-foot-list.is-contact { gap: 14px; }
.jm-foot-list.is-explore{display: grid!important; grid-template-columns: 1fr 1fr;}
.jm-foot-link { font-size: 15px; color: rgba(248, 247, 245, .78); transition: color .3s ease; }
.jm-foot-link:hover { color: var(--jm-ember); }
/* Matched on both classes so it keeps its light ground against
   `.jm-internal .jm-btn`, which is otherwise the heavier selector. */
.jm-btn.jm-foot-btn {
  color: var(--jm-ink);
  background: var(--jm-paper);
  font-size: 14px;
  letter-spacing: .08em;
  padding: 15px 26px;
  border-radius: 100px;
}
.jm-btn.jm-foot-btn:hover { background: var(--jm-ember); color: var(--jm-paper); box-shadow: 0 18px 34px -14px rgba(224, 104, 46, .55); }
.jm-foot-underline {
  font-family: var(--jm-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(248, 247, 245, .7);
  border-bottom: 1px solid rgba(248, 247, 245, .25);
  padding-bottom: 3px;
  transition: color .3s ease, border-color .3s ease;
}
.jm-foot-underline:hover { color: var(--jm-ember); border-color: var(--jm-ember); }
.jm-footer-legal {
  padding-top: 26px;
  border-top: 1px solid rgba(248, 247, 245, .14);
  font-size: 13px;
  color: rgba(248, 247, 245, .5);
}

@media (max-width: 1000px) {
  .jm-grid-foot { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .jm-grid-foot { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
}