/* Shared editable photo/art modules: calm surfaces, readable headings and responsive images. */
footer { padding-bottom: 140px; }
.hero-caption { width: fit-content; padding: 8px 16px; border-radius: 8px; background: #f8f6efed; color: #244d40; }
.visual-stories { display: grid; gap: 32px; margin-top: 40px; margin-bottom: 56px; }
.visual-story { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; border-radius: 24px; background: var(--story-bg); color: #253b35; border: 1px solid #d7ded7; }
.tone-sand { --story-bg: #f4eddf; --story-heading: #65502d; }
.tone-sage { --story-bg: #e8eee5; --story-heading: #345540; }
.tone-sky { --story-bg: #e8eff3; --story-heading: #35556b; }
.tone-clay { --story-bg: #f2e8e0; --story-heading: #794a38; }
.visual-story figure { margin: 0; min-width: 0; display: flex; flex-direction: column; background: #fffdf7; }
.visual-story img { display: block; width: 100%; height: 340px; object-fit: cover; }
.visual-story figcaption { padding: 12px 18px; font-size: .8rem; line-height: 1.6; color: #45584f; }
.visual-story figcaption a { color: #35556b; text-decoration: underline; }
.visual-copy { align-self: center; padding: 36px; }
.visual-copy h2 { margin: 10px 0 18px; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.18; color: var(--story-heading); }
.visual-copy p { line-height: 1.75; }
.visual-copy .eyebrow { color: var(--story-heading); }
.visual-copy > a { display: inline-block; padding: 12px 0; color: #244d40; font-weight: 600; text-decoration: underline; }
.visual-story:nth-child(even) { grid-template-columns: 1fr 1.25fr; }
.visual-story:nth-child(even) figure { order: 2; }
.visual-story:nth-child(even) img { object-position: right center; }
@media (max-width: 760px) {
  .visual-story, .visual-story:nth-child(even) { grid-template-columns: 1fr; }
  .visual-story:nth-child(even) figure { order: 0; }
  .visual-story img { height: 260px; }
  .visual-copy { padding: 24px; }
  .visual-stories { gap: 24px; margin-bottom: 36px; }
}
@media (max-width: 450px) {
  .visual-story { border-radius: 18px; }
  .visual-story img { height: 230px; }
  .visual-copy { padding: 22px; }
}
@media (max-width: 620px) {
  .contact-dock { display: flex; align-items: center; gap: 8px; }
  .contact-shortcuts { margin-bottom: 0; }
  .contact-dock summary { min-height: 44px; }
  .hero-note { max-width: 100%; }
  .hero-caption { max-width: calc(100% - 48px); bottom: 4rem; }
}