/* A single, quiet illustration per topic; transparent assets share the page palette. */
.visual-hero-layout{row-gap:1.75rem}
.visual-hero{width:min(76vw,20rem);margin:0 auto;justify-self:center}
.visual-hero img,.visual-intro-figure img,.visual-conversation img,.visual-location img{display:block;width:100%;height:auto}
.visual-intro{position:relative;display:grid;align-items:center;gap:1rem;max-width:64rem;margin-inline:auto}
.visual-intro-copy{min-width:0;text-align:center}
.visual-intro-figure{width:min(64vw,14rem);margin:0 auto;justify-self:center}
.visual-conversation{width:7.5rem;margin:-1rem auto 1rem}
.visual-location{width:9rem;margin:-1rem 0 .25rem}
@media(min-width:640px){
  .visual-hero{width:23rem}
  .visual-intro-figure{width:16rem}
  .visual-conversation{width:8.5rem}
  .visual-location{width:10rem}
}
@media(min-width:900px){
  .visual-intro{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:2.5rem}
  .visual-intro-copy{text-align:right}
  .visual-intro-copy>.flex{justify-content:flex-start}
  .visual-intro-figure{width:100%;max-width:23rem}
  .visual-intro--reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}
  .visual-intro--reverse .visual-intro-copy{grid-column:2;grid-row:1}
  .visual-intro--reverse .visual-intro-figure{grid-column:1;grid-row:1}
}
@media(min-width:1024px){
  .visual-hero{width:100%;max-width:32rem}
}
/* One entrance per visit; gentle ambient loops run while their images are visible. */
@media(prefers-reduced-motion:no-preference){
  html.js .visual-reveal{opacity:0;transform:translateY(32px) scale(.97);transition:opacity .95s ease,transform .95s cubic-bezier(.19,.7,.2,1);will-change:auto}
  html.js .visual-reveal.in{opacity:1;transform:none}
  /* Keep the priority hero image paintable while its entrance starts. */
  html.js .visual-hero.visual-reveal{opacity:1}
  html.js .visual-reveal.in[data-visual-motion]>img{animation:visual-float var(--visual-duration,6s) ease-in-out .65s infinite both;animation-play-state:paused;transform-origin:50% 60%}
  html.js .visual-reveal.in[data-visual-motion="tilt"]>img{animation-name:visual-tilt}
  html.js .visual-reveal.in.motion-active[data-visual-motion]>img{animation-play-state:running}
  .visual-hero{--visual-lift:-12px}
  .visual-conversation{--visual-lift:-6px;--visual-duration:6.8s}
  .visual-intro-figure{--visual-lift:-6px;--visual-duration:7s}
  @keyframes visual-float{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--visual-lift,-8px))}}
  @keyframes visual-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.8deg)}70%{transform:rotate(.9deg)}}
}
html.js.motion-paused .reveal{opacity:1;transition:none;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .visual-reveal{opacity:1;transition:none;transform:none}
  .visual-reveal>img{animation:none;transform:none}
}