/* =========================================================================
   Home · 2. Who we are
   Everything here is the resting state; assets/js/who-we-are.js and
   motion.js add the entrances. Type sizes come only from the --fs-* tokens.
   Lime is only ever a fill or sits on forest.
   ========================================================================= */
.jd-who { position: relative; overflow: clip; background: var(--surface); color: var(--ink); padding-block: clamp(64px, 7vw, 104px); }
.jd-who > .jd-container { position: relative; z-index: 1; }

/* ---- Intro: title, belief and caption beside the diagram ---- */
.jd-who__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.jd-who__intro-text { display: grid; justify-items: start; gap: var(--space-5); max-width: 36rem; }
.jd-who__title { margin: 0 0 var(--space-2); font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.jd-who__title em { font-style: normal; color: var(--forest); }
.jd-who__lead { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
.jd-who__lead strong { font-weight: 500; color: var(--forest); }
.jd-who__caption { margin: var(--space-2) 0 0; max-width: 36ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-muted); }
.jd-who__caption::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: var(--space-4); border-radius: 2px; background: var(--forest); }

/* ---- The three circles ---- */
.jd-venn { width: 100%; max-width: 540px; justify-self: center; perspective: 1100px; }
.jd-venn__svg { width: 100%; height: auto; overflow: visible; transform-style: preserve-3d; }
.jd-venn__fill { fill: var(--forest-tint); transition: fill var(--dur-slow) var(--ease-out); }
.jd-venn__fill:hover { fill: rgba(229, 253, 74, .35); }
.jd-venn__lens { fill: rgba(35, 56, 49, .22); pointer-events: none; }
.jd-venn__triple { fill: var(--forest); pointer-events: none; }
.jd-venn__stroke { fill: none; stroke: var(--forest); stroke-width: 2.5; stroke-dasharray: 1; pointer-events: none; }
.jd-venn__labels, .jd-venn__centre { pointer-events: none; }
.jd-venn__sub { font: 600 12px var(--font-sans); fill: var(--ink-subtle); letter-spacing: .16em; }
.jd-venn__label { font: 600 24px var(--font-sans); fill: var(--ink); letter-spacing: -.02em; }
.jd-venn__core { fill: var(--lime); }
.jd-venn__core-text { font: 600 19px var(--font-sans); fill: var(--forest); }
.jd-venn__ripple { fill: none; stroke: var(--forest); stroke-width: 2; opacity: 0; }

/* ---- Bento: photos and colour blocks ---- */
.jd-who__bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.jd-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.jd-tile img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; }
.jd-tile p { margin: 0; }
.jd-tile--photo-a { grid-column: 1 / span 5; grid-row: 1 / span 2; min-height: 480px; background: var(--forest-tint); }
.jd-tile--lime { grid-column: 6 / span 7; grid-row: 1; display: grid; align-content: space-between; gap: var(--space-6); min-height: 240px; padding: clamp(24px, 2.6vw, 40px); background: var(--lime); color: var(--forest); }
.jd-tile--lime p { max-width: 52ch; font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; }
.jd-tile--photo-b { grid-column: 6 / span 3; grid-row: 2; min-height: 260px; background: var(--forest-tint); }
.jd-tile--dark { grid-column: 9 / span 4; grid-row: 2; display: grid; align-content: space-between; gap: var(--space-6); padding: clamp(24px, 2.4vw, 36px); background: var(--forest-deep); color: var(--on-forest); }
.jd-tile--dark p { font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .9); }

/* Three-step mark, echoing the stepped blocks in the logo */
.jd-tile__mark { display: flex; gap: 6px; }
.jd-tile__mark i { width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .9; }
.jd-tile__mark i:nth-child(2) { opacity: .55; }
.jd-tile__mark i:nth-child(3) { opacity: .25; }
.jd-tile--dark .jd-tile__mark { color: var(--lime); }

/* ---- Purpose: the bento's closing full-width tile ---- */
.jd-who__purpose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: end; margin-top: var(--space-4); padding: clamp(28px, 3.4vw, 48px); border-radius: var(--radius-lg); background: var(--forest-tint); }
.jd-who__purpose-text { margin: var(--space-4) 0 0; max-width: 44ch; font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.jd-who__purpose-text em { font-style: normal; color: var(--forest); }

@media (max-width: 1023px) {
  .jd-who__intro, .jd-who__purpose { grid-template-columns: minmax(0, 1fr); }
  .jd-who__intro { gap: var(--space-7); }
  .jd-who__purpose { justify-items: start; }
  .jd-who__bento > * { grid-column: 1 / -1; grid-row: auto; }
  .jd-venn { justify-self: center; }
  .jd-tile--photo-a { min-height: 320px; }
  .jd-tile--photo-b { min-height: 240px; }
}

/* SVG text scales with the drawing; on phones lift it back to a readable size */
@media (max-width: 599px) {
  .jd-venn__label { font-size: 30px; }
  .jd-venn__sub { font-size: 16px; letter-spacing: .12em; }
  .jd-venn__core-text { font-size: 24px; }
}