.contact-stage { position: relative; isolation: isolate; display: flex; flex: 1; flex-direction: column; align-items: center; min-height: 690px; padding: 34px clamp(22px, 5vw, 88px) 72px; }
.contact-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.contact-halo { position: absolute; left: 50%; top: 56%; width: min(750px, 75vw); aspect-ratio: 1; border-radius: 50%; background: var(--circle); opacity: .4; transform: translate(-50%, -50%); }
.contact-orbit { position: absolute; left: 50%; top: 55%; width: min(850px, 83vw); height: 540px; border: 1px dashed var(--sand); border-radius: 50%; opacity: .7; transform: translate(-50%, -50%) rotate(-13deg); }
.contact-spark { position: absolute; color: var(--sand); font-size: 44px; animation: turn 38s linear infinite; }
.contact-spark-one { left: 8%; top: 36%; }
.contact-spark-two { right: 10%; bottom: 17%; font-size: 32px; }
.contact-doodle { position: absolute; right: 8%; top: 22%; width: 75px; stroke: var(--ink); stroke-width: 2; animation: float-doodle 7s ease-in-out infinite; }
.contact-heading { position: relative; z-index: 1; width: min(860px, 100%); text-align: center; }
.contact-heading .hero-kicker { margin: 0 0 8px; font: 500 14px/1.3 'Barlow Condensed', sans-serif; letter-spacing: 2px; }
.contact-heading h1 { white-space: normal; font-size: clamp(48px, 6.5vw, 88px); letter-spacing: -.035em; }
.contact-intro { max-width: 650px; margin: 18px auto 0; font: 800 clamp(16px, 1.65vw, 20px)/1.55 var(--heading-font); }
.contact-panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(230px, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 68px); width: min(920px, 100%); margin: 48px auto 0; padding: clamp(28px, 4.5vw, 54px); border: 1px solid rgb(17 73 0 / 20%); border-radius: 12px; background: linear-gradient(135deg, rgb(251 245 204 / 78%), rgb(255 255 255 / 92%)); box-shadow: 0 20px 55px rgb(17 73 0 / 8%); }
.contact-art { position: relative; display: grid; min-height: 250px; place-items: center; overflow: hidden; border: 1px solid rgb(17 73 0 / 14%); border-radius: 8px; background: rgb(255 255 255 / 56%); }
.contact-art-orbit { position: absolute; width: 210px; aspect-ratio: 1; border: 1px solid rgb(122 152 112 / 46%); border-radius: 50%; transform: rotate(-18deg) scaleY(.72); }
.contact-envelope { position: relative; z-index: 1; width: min(190px, 80%); height: auto; filter: drop-shadow(0 9px 0 rgb(17 73 0 / 7%)); animation: contact-float 5s ease-in-out infinite; }
.contact-art-caption { position: absolute; bottom: 17px; left: 18px; font: 500 10px/1 'Barlow Condensed', sans-serif; letter-spacing: 1.8px; }
.contact-details { min-width: 0; }
.contact-label { margin: 0 0 13px; font: 500 12px/1 'Barlow Condensed', sans-serif; letter-spacing: 2px; }
.contact-details h2 { max-width: 480px; margin: 0 0 20px; font: 800 clamp(27px, 3.4vw, 42px)/1.08 var(--heading-font); letter-spacing: -.025em; }
.contact-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font: 800 clamp(18px, 2.3vw, 26px)/1.3 var(--heading-font); text-decoration: underline; text-decoration-color: rgb(17 73 0 / 28%); text-underline-offset: 5px; }
.contact-email:hover { text-decoration-color: var(--ink); }
.contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(360px, 100%); margin-top: 26px; padding: 15px 18px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 500 15px/1.2 'Barlow Condensed', sans-serif; letter-spacing: 1.3px; text-transform: uppercase; transition: background .2s, transform .2s; }
.contact-cta span:last-child { font: 20px/1 Arial, sans-serif; transition: transform .2s; }
.contact-cta:hover { background: #1b5d08; transform: translateY(-2px); }
.contact-cta:hover span:last-child { transform: translate(3px, -3px); }
@keyframes contact-float { 0%, 100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@media (max-width: 800px) {
  .contact-stage { min-height: 0; padding: 30px 28px 52px; }
  .contact-panel { grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); gap: 28px; }
  .contact-art { min-height: 220px; }
}
@media (max-width: 700px) {
  .contact-stage { padding: 18px 18px 40px; }
  .contact-heading .hero-kicker { font-size: 12px; }
  .contact-heading h1 { font-size: clamp(43px, 12vw, 64px); line-height: 1; }
  .contact-intro { margin-top: 13px; font-size: 16px; }
  .contact-panel { grid-template-columns: 1fr; gap: 25px; width: min(460px, 100%); margin-top: 30px; padding: 20px; }
  .contact-art { min-height: 190px; }
  .contact-envelope { width: 155px; }
  .contact-art-orbit { width: 178px; }
  .contact-details h2 { font-size: 31px; }
  .contact-email { font-size: clamp(18px, 5vw, 23px); }
  .contact-cta { margin-top: 22px; }
  .contact-spark-one { left: 2%; top: 31%; font-size: 30px; }
  .contact-spark-two { right: 3%; bottom: 9%; font-size: 25px; }
  .contact-doodle { right: 3%; top: 17%; width: 48px; }
}
@media (prefers-reduced-motion: reduce) { .contact-envelope { animation: none; } }