/* CLEOWebsites.ca — page-scoped composition for the "contact" page.
 * Lifted verbatim from the approved J2 prototype (contact.html), which kept each
 * page's own composition in a page <style> block. Kept per-page rather than
 * merged into system.css on purpose: #open and #close are each used by three
 * different pages with different rules, and merging would silently cross them.
 * Everything shared lives in system.css. */

#talk .scene__body{align-items:center;gap:clamp(30px,4vw,80px);padding-top:104px;padding-bottom:72px}
  .talk__l{flex:1 1 44%;max-width:440px}
  .talk__r{flex:1 1 52%;display:flex;justify-content:flex-end}
  #after .scene__body{align-items:center;gap:clamp(30px,4vw,80px);padding-top:96px;padding-bottom:88px}
  .after__l{flex:1 1 46%;max-width:440px}
  .after__r{flex:1 1 46%;display:flex;justify-content:flex-end}
  @media (max-width:820px){
    #talk .scene__body,#after .scene__body{flex-direction:column;align-items:flex-start;
      gap:24px;padding-top:96px;padding-bottom:56px}
    .talk__l,.talk__r,.after__l,.after__r{flex:none;width:100%;max-width:100%;justify-content:flex-start}
  }