/* A touch-friendly contact reveal, kept separate from the page's motion effects. */
.contact-console { width: min(100%, 880px); margin: 2.75rem auto 0; }
.contact-slider { --contact-knob: 92px; --contact-inset: 12px; --slide-x: 0px; position: relative; isolation: isolate; display: block; width: 100%; height: 120px; padding: 0; border: 1px solid rgba(0,46,94,0.17); border-radius: 999px; overflow: hidden; color: var(--ink); background: linear-gradient(115deg, rgba(255,255,255,0.85), rgba(235,251,248,0.68) 52%, rgba(229,225,246,0.8)); box-shadow: inset 0 1px 1px #fff, 0 18px 50px rgba(0,46,94,0.07); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.contact-slider::before { content: ""; position: absolute; z-index: 2; inset: 6px; border: 1px solid rgba(255,255,255,0.8); border-radius: inherit; pointer-events: none; }
.contact-slider::after { content: ""; position: absolute; z-index: -1; inset: 0; width: 35%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.85), transparent); transform: translateX(-160%) skewX(-18deg); pointer-events: none; }
.contact-slider:hover::after, .contact-slider:focus-visible::after { animation: contact-light-pass 1400ms var(--ease) both; }
.contact-slider:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.contact-slider-energy { position: absolute; z-index: -1; inset: 0 auto 0 0; width: calc(var(--slide-x) + var(--contact-knob) + var(--contact-inset)); border-radius: inherit; background: linear-gradient(105deg, rgba(147,229,222,0.72), rgba(195,187,239,0.72)); transition: width 550ms var(--ease); }
.contact-slider-thumb { position: absolute; z-index: 3; left: var(--contact-inset); top: 50%; display: grid; place-items: center; width: var(--contact-knob); height: var(--contact-knob); border: 1px solid rgba(255,255,255,0.95); border-radius: 50%; background: linear-gradient(140deg, #f4fffc, #c7e8e9 48%, #ccc7ed); box-shadow: inset 0 2px 6px #fff, inset 0 -3px 9px rgba(0,46,94,0.08), 0 5px 18px rgba(0,46,94,0.12); transform: translate(var(--slide-x), -50%); transition: transform 550ms var(--ease), box-shadow 300ms; }
.contact-slider-thumb::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(0,46,94,0.13); border-radius: inherit; }
.contact-slider-thumb svg { width: 28px; height: 28px; }
.contact-slide-check { display: none; }
.contact-slider-copy { position: absolute; inset: 0 80px 0 calc(var(--contact-knob) + 32px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; pointer-events: none; transition: opacity 220ms, left 550ms var(--ease), right 550ms var(--ease); }
.contact-slider-title { font-size: clamp(1rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -0.035em; }
.contact-slider-meta { color: #496176; font-size: 0.57rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.5; }
.contact-slider-end { position: absolute; right: 28px; top: 50%; color: #607c8d; transform: translateY(-50%); transition: opacity 250ms; }
.contact-slider.is-dragging { cursor: grabbing; }
.contact-slider.is-dragging .contact-slider-thumb, .contact-slider.is-dragging .contact-slider-energy, .contact-slider.is-dragging .contact-slider-copy { transition: none; }
.contact-slider.is-dragging .contact-slider-copy { opacity: var(--contact-copy-opacity, 1); }
.contact-slider.is-dragging .contact-slider-thumb { box-shadow: inset 0 2px 6px #fff, 0 0 0 7px rgba(145,223,219,0.22), 0 8px 28px rgba(0,46,94,0.16); }
.contact-console.is-revealed .contact-slider-copy { left: 40px; right: calc(var(--contact-knob) + 32px); }
.contact-console.is-revealed .contact-slider-end, .contact-console.is-revealed .contact-slide-arrow { display: none; }
.contact-console.is-revealed .contact-slide-check { display: block; }
.contact-details { position: relative; margin-top: 1.5rem; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid rgba(255,255,255,0.85); border-radius: 30px; background: linear-gradient(130deg, rgba(255,255,255,0.74), rgba(245,251,250,0.55) 55%, rgba(236,232,250,0.6)); box-shadow: 0 25px 65px rgba(0,46,94,0.06); }
.contact-console.is-revealed .contact-details { animation: contact-panel-open 600ms var(--ease) both; }
.contact-panel-label { margin: 0 0 0.85rem; color: var(--ink-soft); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.6; }
.contact-details .contact-email { margin: 0; max-width: 100%; border-bottom: 0; font-size: clamp(1.4rem, 3.2vw, 2.6rem); font-weight: 500; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.contact-details .contact-email .icon-arrow { width: 24px; height: 24px; margin-left: 0.3rem; }
.contact-details .contact-email:hover { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.contact-channels { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.contact-channels .contact-social { flex-basis: auto; gap: 0.65rem; min-height: 54px; padding: 0.9rem 1.4rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; }
.contact-details .contact-note { max-width: 29rem; margin: 1.1rem auto 0; }
@keyframes contact-light-pass { to { transform: translateX(400%) skewX(-18deg); } }
@keyframes contact-panel-open { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (max-width: 540px) {
  .contact-console { margin-top: 2rem; }
  .contact-slider { --contact-knob: 64px; --contact-inset: 12px; height: 92px; }
  .contact-slider-copy { left: 86px; right: 43px; gap: 0.4rem; }
  .contact-slider-title { font-size: 1rem; }
  .contact-slider-meta { font-size: 0.48rem; letter-spacing: 0.055em; }
  .contact-slider-end { right: 14px; }
  .contact-slider-end svg { width: 22px; height: 22px; }
  .contact-console.is-revealed .contact-slider-copy { left: 24px; right: 88px; }
  .contact-details { padding: 1.6rem 1rem; border-radius: 24px; }
  .contact-details .contact-email { font-size: clamp(1.2rem, 5.6vw, 1.7rem); gap: 0.2rem; }
  .contact-details .contact-email .icon-arrow { width: 18px; height: 18px; margin-left: 0; }
  .contact-channels { gap: 0.6rem; margin-top: 1.3rem; }
  .contact-channels .contact-social { min-height: 50px; padding: 0.9rem 1rem; font-size: 0.72rem; }
}
.motion-paused .contact-slider::after, .motion-paused .contact-details { animation: none !important; }
.motion-paused .contact-slider *, .motion-paused .contact-slider *::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .contact-slider::after, .contact-details { animation: none !important; }
  .contact-slider *, .contact-slider *::before { transition: none !important; }
}