/* The final open horizon carries the invitation and every direct contact. */
.contact-scene { position: relative; isolation: isolate; overflow-x: clip; overflow-anchor: none; scroll-margin-top: 0; --contact-copy: 1; --contact-art: 1; }
/* This scene already includes room for the header in its own composition. */
section.contact-scene { scroll-margin-top: 0; }
html:has(.contact-scene:target) { scroll-padding-top: 0; }
.contact-scene:focus { outline: none; }
.contact-frame { position: relative; min-height: max(680px,100svh); padding: clamp(102px,12svh,136px) var(--pad) 38px; max-width: 1600px; margin: auto; display: grid; grid-template-rows: auto 1fr; gap: 26px; }
.contact-frame::before { content: ''; position: absolute; inset: 3% -8% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 48%,#a3c9b00d,transparent 50%),radial-gradient(ellipse at 20% 60%,#bd977307,transparent 35%),radial-gradient(ellipse at 82% 60%,#baa3d20a,transparent 35%); }
.contact-topline { display: flex; justify-content: space-between; align-items: center; opacity: var(--contact-copy); }
.contact-topline > .eyebrow { font-size: 8px; color: #9db8a5; letter-spacing: .15em; }
.contact-signature { font-size: 8px; letter-spacing: .12em; color: #789080; }
.contact-composition { position: relative; display: grid; grid-template-rows: minmax(300px,1fr) auto auto; row-gap: 30px; }
.contact-heading { position: relative; z-index: 1; text-align: center; align-self: center; opacity: var(--contact-copy); translate: 0 var(--contact-lift,0px); }
.contact-heading h2 { font: 400 clamp(70px,7.8vw,116px)/.91 var(--display); letter-spacing: -.045em; }
.contact-heading h2 span { background: linear-gradient(105deg,#b9d6b5 8%,#abded0 45%,#cbbadc 85%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.contact-note { color: #a2b4a7; font-size: 13px; line-height: 1.7; margin: 25px auto 0; max-width: 440px; }
.contact-horizon { position: absolute; inset: -7% calc(var(--pad) * -1.8) 9%; pointer-events: none; perspective: 1200px; mask-image: linear-gradient(180deg,#000 57%,transparent 95%); }
.contact-material { position: absolute; inset: 0; transform-origin: 50% 68%; opacity: var(--contact-art); transform: rotateX(var(--contact-tilt,0deg)) scale(var(--contact-scale,1)) scaleX(var(--contact-spread,1)); }
.contact-silk { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.contact-threads { opacity: .58; }
.contact-connections { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9%; width: 100%; max-width: 1030px; margin: auto; opacity: var(--contact-copy); }
.contact-option { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 20px; padding: 20px 0 23px; color: #d9e4d7; --channel-tone: #ddbb9e; }
.contact-option::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg,#9db5a335,transparent); transition: opacity .35s; }
.contact-option::after { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg,var(--channel-tone),transparent); opacity: 0; transition: opacity .35s; }
.contact-option[data-contact-channel="telegram"] { --channel-tone: #b7d9d4; }
.contact-kind { grid-column: 1 / -1; color: #8fa596; font-size: 8px; letter-spacing: .13em; }
.contact-destination { font-size: clamp(23px,2.7vw,38px); line-height: 1.2; letter-spacing: -.045em; white-space: nowrap; transition: color .35s; }
.contact-glyph { align-self: center; font-size: 25px; line-height: 1; color: #a7c5b3; transition: translate .35s,color .35s; }
.contact-detail { grid-column: 1 / -1; color: #879d8d; font-size: 11px; line-height: 1.6; }
.contact-option:hover::after,.contact-option:focus-visible::after { opacity: 1; }
.contact-option:hover .contact-destination,.contact-option:focus-visible .contact-destination { color: var(--channel-tone); }
.contact-option:hover .contact-glyph,.contact-option:focus-visible .contact-glyph { translate: 3px -3px; color: var(--channel-tone); }
.contact-option:focus-visible { outline: 1px solid var(--channel-tone); outline-offset: 7px; }
.contact-calls { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 30px; opacity: var(--contact-copy); }
.contact-calls > span { font-size: 8px; letter-spacing: .1em; color: #718d7a; }
.contact-calls > div { display: flex; gap: 28px; }
.contact-calls a { color: #a9bcac; font-size: 12px; white-space: nowrap; transition: color .3s; }
.contact-calls a:hover { color: #dce7d9; }
.contact-calls a:focus-visible { outline: 1px solid #bdd8c6; outline-offset: 6px; }
.contact-scene[data-contact-active] .contact-frame { translate: 0 var(--contact-offset,0px); }
.contact-scene[data-contact-active]:not([data-contact-readable]) { pointer-events: none; }
[data-contact-departure] > .process-frame { opacity: var(--contact-depart,1); transform: scale(var(--contact-retreat,1)); transform-origin: 50% 45%; }
@media (prefers-reduced-motion: no-preference) {
  .contact-scene.is-awake .contact-silk { animation: contact-breathe 15s ease-in-out infinite; }
}
@keyframes contact-breathe { 0%,100% { translate: 0 4px; scale: 1; } 50% { translate: 0 -5px; scale: 1.025 1.015; } }
html[data-motion-static] .contact-scene * { animation: none!important; transition: none!important; }
@media (max-width: 1000px) {
  .contact-frame { padding-top: 140px; }
  .contact-heading h2 { font-size: clamp(62px,8.5vw,82px); }
  .contact-connections { gap: 7%; }
  .contact-destination { font-size: clamp(21px,3.1vw,30px); }
  .contact-glyph { font-size: 22px; }
}
@media (max-width: 600px) {
  .contact-frame { min-height: max(720px,100svh); padding: 132px var(--pad) 30px; gap: 25px; }
  .contact-topline > .eyebrow,.contact-signature { font-size: 7px; }
  .contact-signature { letter-spacing: .04em; }
  .contact-composition { grid-template-rows: minmax(200px,1fr) auto auto; row-gap: 22px; }
  .contact-heading h2 { font-size: clamp(42px,12.5vw,62px); white-space: nowrap; }
  .contact-note { font-size: 12px; line-height: 1.7; margin-top: 22px; max-width: 285px; }
  .contact-horizon { inset: -1% -85% 20%; }
  .contact-connections { grid-template-columns: 1fr; gap: 0; }
  .contact-option { padding: 18px 0; gap: 9px 18px; }
  .contact-destination { font-size: clamp(24px,6.7vw,31px); }
  .contact-kind { font-size: 7px; }
  .contact-detail { font-size: 11px; }
  .contact-calls { display: grid; gap: 11px; justify-content: start; }
  .contact-calls > span { font-size: 7px; }
  .contact-calls > div { gap: 20px; }
  .contact-calls a { font-size: 11px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .contact-frame { min-height: 100svh; padding: 124px var(--pad) 24px; gap: 20px; }
  .contact-composition { grid-template-rows: minmax(90px,1fr) auto auto; row-gap: 18px; }
  .contact-heading h2 { font-size: 40px; }
  .contact-note { display: none; }
  .contact-option { padding: 14px 0; gap: 7px 18px; }
  .contact-destination { font-size: 23px; }
  .contact-detail { font-size: 10px; }
  .contact-calls { gap: 9px; }
  .contact-horizon { inset: -5% -100% 16%; }
}