/* Connected pathways retain the site's paper, lilac and charcoal palette. */
#idee { padding-block: 84px 92px; border-bottom: 1px solid var(--line); }
#idee .section-kicker { align-items: center; }
#idee .idea-mark { width: 64px; }
#idee .idea-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr); gap: 56px; align-items: center; margin-top: 34px; }
#idee .idea-copy { min-width: 0; }
#idee h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -.055em; max-width: 820px; margin: 0; text-wrap: balance; }
#idee .idea-intro { max-width: 570px; margin-top: 24px; font-size: 16px; line-height: 1.65; color: var(--muted); }
#idee .idea-pathways { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 36px 0 30px; }
#idee .idea-pathways::before { content: ''; position: absolute; top: 25px; left: 25px; right: calc(33.333% - 25px); height: 1px; background: var(--line); }
#idee .idea-pathways li { min-width: 0; }
#idee .idea-pathways a { position: relative; display: grid; gap: 7px; align-content: start; text-decoration: none; min-height: 148px; }
#idee .idea-path-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--accent); margin-bottom: 10px; transition: background-color .2s, transform .2s; }
#idee .idea-pathways strong { font-size: 17px; font-weight: 600; line-height: 1.3; padding-right: 20px; }
#idee .idea-path-detail { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 180px; }
#idee .idea-path-arrow { position: absolute; top: 67px; right: 1px; color: var(--accent); }
#idee .idea-pathways a:hover .idea-path-icon, #idee .idea-pathways a:focus-visible .idea-path-icon { background: var(--lilac); transform: translateY(-3px); }
#idee .idea-pathways a:focus-visible, #idee .idea-overview:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
#idee .idea-overview { display: inline-flex; align-items: center; gap: 20px; font-size: 18px; font-weight: 500; line-height: 1.5; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
#idee .idea-overview > span { flex: 0 0 auto; }
#idee .idea-still-life { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 350px; }
#idee .idea-cup-floor { position: absolute; width: 100%; height: 150px; bottom: 17%; border-radius: 50%; background: radial-gradient(ellipse, var(--tint), transparent 70%); opacity: .8; }
#idee .cup-art { width: min(100%, 340px); margin: 0; position: relative; filter: drop-shadow(0 18px 12px #473b7012); }
@media (max-width: 1100px) {
  #idee .idea-layout { gap: 28px; grid-template-columns: minmax(0, 1fr) 220px; }
  #idee .idea-pathways { gap: 18px; }
  #idee .idea-overview { font-size: 16px; }
}
@media (max-width: 767px) {
  #idee { padding-block: 54px 56px; }
  #idee .idea-mark { width: 43px; }
  #idee .idea-layout { display: block; margin-top: 27px; position: relative; }
  #idee h2 { font-size: clamp(34px, 8.5vw, 52px); line-height: 1.12; padding-right: 32px; }
  #idee .idea-intro { font-size: 14px; margin-top: 20px; }
  #idee .idea-pathways { gap: 14px; margin-top: 29px; margin-bottom: 24px; }
  #idee .idea-pathways a { min-height: 154px; }
  #idee .idea-pathways strong { font-size: 14px; padding-right: 0; }
  #idee .idea-path-detail { font-size: 12px; }
  #idee .idea-path-arrow { display: none; }
  #idee .idea-overview { font-size: 15px; gap: 10px; padding-right: 0; max-width: calc(100% - 90px); }
  #idee .idea-still-life { position: absolute; bottom: -10px; right: 0; width: 80px; min-height: 0; pointer-events: none; }
  #idee .idea-cup-floor { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  #idee .idea-path-icon { transition: none; }
  #idee .idea-pathways a:hover .idea-path-icon, #idee .idea-pathways a:focus-visible .idea-path-icon { transform: none; }
}