/* A quiet rhythm for the artwork, and a visible journey from ideas to futures. */
.connection-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:7%;align-items:center;padding-block:25px 100px}
.connection-copy h2{font-size:clamp(36px,3.7vw,49px);line-height:1.08;margin-bottom:25px}
.connection-copy>p:not(.eyebrow){max-width:355px;font-size:15px;color:var(--muted)}
.connection-copy .text-link{margin-top:10px}
.connection-figure{margin:0;min-width:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:19px}
.connection-topline{display:flex;align-items:center;justify-content:space-between;color:#82725b;font-size:8px;letter-spacing:.15em}
.connection-topline>span:last-child{font-size:22px;letter-spacing:0;line-height:1}
.connection-map{width:100%;height:auto;overflow:visible}
.connection-map text{font-family:Georgia,"Times New Roman",serif;fill:var(--ink);font-size:26px;letter-spacing:-.025em}
.connection-map .flow-small{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:0;fill:#7d715e}
.flow-traces{stroke:#9e8767;stroke-width:1.1;stroke-linecap:round}
.flow-traces .flow-echo{stroke-width:3.2;opacity:.1}
.flow-endpoints{fill:var(--paper);stroke:#9e8767;stroke-width:1.2}
.flow-core{fill:#37352e;stroke:#37352e;stroke-width:1}
.flow-centre>path{stroke:#e7d8c0;stroke-width:1.3;fill:none;stroke-linejoin:round}
.flow-aura{fill:none;stroke:#ab8b63;stroke-width:.8;opacity:.35;transform-origin:320px 210px}
.connection-map .flow-build{font-size:34px;font-style:italic;fill:var(--bronze)}
.connection-map .flow-process{font-family:"Helvetica Neue",Arial,sans-serif;font-size:8px;letter-spacing:1.3px;fill:#8a7a62}
.flow-signals{display:none;fill:#946c48}
.connection-figure figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:16px;color:#7d715e;font-size:10px}
.motion-toggle{border:0;border-bottom:1px solid #b6a68c;background:transparent;color:#675b47;cursor:pointer;padding:5px 0;font-size:9px;font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.02em;line-height:1.4;white-space:nowrap}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{color:var(--ink);border-bottom-color:var(--bronze)}
.hero-bottom-label{align-items:center}
.hero-bottom-label .motion-toggle{margin-left:auto;margin-right:26px}
.motion-enabled .hero-art{animation:hero-breathe 24s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:70% 55%}
.motion-enabled .art-hero.motion-live .hero-art{animation-play-state:running}
.motion-enabled .flow-signals{display:inline}
.motion-enabled .flow-aura{animation:connection-breathe 5.5s ease-in-out infinite;animation-play-state:paused}
.motion-enabled .connection-map.motion-live .flow-aura{animation-play-state:running}
.motion-paused .hero-art,.motion-paused .flow-aura,.motion-tab-hidden .hero-art,.motion-tab-hidden .flow-aura{animation-play-state:paused!important}
.motion-paused *{transition:none!important}
.motion-paused [data-reveal],.motion-paused [data-reveal-pending]{opacity:1!important;transform:none!important}
@keyframes hero-breathe{from{transform:scale(1.002) translate3d(0,0,0)}to{transform:scale(1.022) translate3d(-.35%,.2%,0)}}
@keyframes connection-breathe{0%,100%{opacity:.2;transform:scale(.94)}50%{opacity:.55;transform:scale(1.08)}}
/* Content is visible without JavaScript. Pending is set only after observation succeeds. */
@media(prefers-reduced-motion:no-preference){
  [data-reveal]{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
  [data-reveal-pending]{opacity:0;transform:translate3d(0,19px,0)}
  [data-reveal]:focus-within{opacity:1;transform:none}
  #main-nav>a:not(.button){background-image:linear-gradient(var(--bronze),var(--bronze));background-repeat:no-repeat;background-size:0 1px;background-position:0 calc(100% - 6px);transition:background-size .25s ease}
  #main-nav>a:not(.button):hover{background-size:100% 1px}
  .text-link>span,.contact-link>span:last-child{transition:transform .25s ease}
  .text-link:hover>span,.contact-link:hover>span:last-child{transform:translate3d(3px,-2px,0)}
}
@media(max-width:1100px){.connection-section{gap:4%;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr)}.connection-copy h2{font-size:39px}.connection-copy>p:not(.eyebrow){font-size:14px}}
@media(max-width:800px){.connection-section{grid-template-columns:1fr;gap:32px;padding-block:0 64px}.connection-copy h2{font-size:42px}.connection-copy>p:not(.eyebrow){max-width:480px;font-size:15px}.connection-figure{width:100%}.connection-map .flow-small{display:none}.connection-map .flow-process{font-size:9px;letter-spacing:1px}.connection-map{margin-block:0}.hero-bottom-label .motion-toggle{margin-right:0;font-size:9px}.connection-figure figcaption{padding-block:12px}}
@media(max-width:420px){.connection-copy h2{font-size:37px}.connection-map .flow-input-labels>text:not(.flow-small),.connection-map .flow-output-labels text{font-size:27px}.connection-figure figcaption{font-size:9px;gap:10px}.connection-topline{font-size:7px}.motion-toggle{font-size:9px;padding-block:8px}}
@media(prefers-reduced-motion:reduce){
  .hero-art,.flow-aura{animation:none!important;transform:none!important}
  .flow-signals{display:none!important}
  [data-reveal],[data-reveal-pending]{opacity:1!important;transform:none!important;transition:none!important}
  .motion-toggle{display:none!important}
}