/* Page 5: satin, silver balloons and green light, in her original composition. */
#contact { background: var(--black); color: var(--white); }
#contact .contact-reasons, #contact .contact-details { position: relative; isolation: isolate; overflow: clip; }
#contact .contact-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#contact .contact-satin-drift { position: absolute; inset: calc(-1 * var(--shift)) 0; --shift: calc(8 * var(--u)); }
#contact .contact-satin img { position: absolute; width: 100%; max-width: none; height: calc(1829.25 * var(--u)); top: calc(-230.73218 * var(--u) + var(--shift)); object-fit: fill; }
#contact .contact-reasons-frame { height: calc(1368 * var(--u)); }
#contact .contact-question { position: absolute; top: calc(98 * var(--u)); left: calc(-2 * var(--u)); width: 100%; font-family: var(--font-display); font-size: calc(80.1126 * var(--u)); font-weight: 400; line-height: .776; text-transform: uppercase; text-align: center; letter-spacing: -.05em; }
#contact .contact-question-line { display: block; white-space: nowrap; }
#contact .contact-but, #contact .contact-why, #contact .contact-dots, #contact .contact-dots > span { display: inline-block; }
#contact .contact-but { --step: 100ms; }
#contact .contact-question-line { --step: 70ms; }
#contact .contact-quality { position: absolute; inset: 0; }
#contact .contact-balloon { position: absolute; --float: calc(100 * var(--u)); }
#contact .contact-balloon-crop { position: relative; width: 100%; height: 100%; overflow: hidden; }
#contact .contact-balloon-bob { width: 100%; height: 100%; }
#contact .contact-balloon img { position: absolute; max-width: none; }
#contact .contact-quality-copy { position: absolute; text-align: center; }
#contact .contact-quality h3 { position: relative; top: calc(2 * var(--u)); font: 400 calc(37.92104 * var(--u))/.776 var(--font-display); text-transform: uppercase; letter-spacing: -.05em; }
#contact .contact-quality p { margin-top: calc(7 * var(--u)); font-size: max(15px, calc(24.6375 * var(--u))); font-weight: 700; line-height: calc(29.25 * var(--u)); letter-spacing: 0; }
#contact .contact-quality-1 .contact-balloon { left: calc(60.25748 * var(--u)); top: calc(330.72906 * var(--u)); width: calc(139.5 * var(--u)); height: calc(248.25 * var(--u)); }
#contact .contact-quality-1 img { inset: 0; width: 100%; height: 100%; }
#contact .contact-quality-1 .contact-quality-copy { left: calc(178 * var(--u)); top: calc(358 * var(--u)); width: calc(315 * var(--u)); }
#contact .contact-quality-1 h3 { position: relative; left: calc(-3.6 * var(--u)); }
#contact .contact-quality-2 .contact-balloon { left: calc(533.40991 * var(--u)); top: calc(364.07919 * var(--u)); width: calc(135.75 * var(--u)); height: calc(181.5 * var(--u)); }
#contact .contact-quality-2 img { left: calc(-46.15668 * var(--u)); top: calc(-60.1838 * var(--u)); width: calc(227.25 * var(--u)); height: calc(403.5 * var(--u)); }
#contact .contact-quality-2 .contact-quality-copy { left: calc(678 * var(--u)); top: calc(352.6 * var(--u)); width: calc(315 * var(--u)); }
#contact .contact-quality-2 h3 { position: relative; left: calc(-10.7 * var(--u)); }
#contact .contact-quality-3 .contact-balloon { left: calc(73.98434 * var(--u)); top: calc(667.09741 * var(--u)); width: calc(126 * var(--u)); height: calc(223.5 * var(--u)); }
#contact .contact-quality-3 img { inset: 0; width: 100%; height: 100%; }
#contact .contact-quality-3 .contact-quality-copy { left: calc(212 * var(--u)); top: calc(691.7 * var(--u)); width: calc(245 * var(--u)); }
#contact .contact-quality-3 p { margin-top: calc(11 * var(--u)); }
#contact .contact-quality-4 .contact-balloon { left: calc(541.55566 * var(--u)); top: calc(665.03064 * var(--u)); width: calc(148.5 * var(--u)); height: calc(216 * var(--u)); }
#contact .contact-quality-4 img { left: 0; top: calc(-47.35364 * var(--u)); width: calc(154.5 * var(--u)); height: calc(300.75 * var(--u)); }
#contact .contact-quality-4 .contact-quality-copy { left: calc(704 * var(--u)); top: calc(688.4 * var(--u)); width: calc(241 * var(--u)); }
#contact .contact-quality-4 p { margin-top: calc(7 * var(--u)); }
#contact .contact-quality-5 .contact-balloon { left: calc(87.82522 * var(--u)); top: calc(1015.88391 * var(--u)); width: calc(154.5 * var(--u)); height: calc(207.75 * var(--u)); }
#contact .contact-quality-5 img { left: calc(-37.21389 * var(--u)); top: calc(-12.46448 * var(--u)); width: calc(231.75 * var(--u)); height: calc(231.75 * var(--u)); }
#contact .contact-quality-5 .contact-quality-copy { left: calc(259 * var(--u)); top: calc(1030.3 * var(--u)); width: calc(253 * var(--u)); }
#contact .contact-quality-5 p { margin-top: calc(13 * var(--u)); }
/* The sixth balloon is a padded 2x cutout from Aditi's updated Canva page. */
#contact .contact-quality-6 .contact-balloon { left: calc(537.5 * var(--u)); top: calc(995 * var(--u)); width: calc(164 * var(--u)); height: calc(246 * var(--u)); }
#contact .contact-quality-6 img { inset: 0; width: 100%; height: 100%; }
#contact .contact-quality-6 .contact-quality-copy { left: calc(714 * var(--u)); top: calc(1001.15 * var(--u)); width: calc(260 * var(--u)); }
#contact .contact-quality-6 h3 { left: calc(-9 * var(--u)); }
#contact .contact-quality-6 p { margin-top: calc(13 * var(--u)); }
#contact .contact-details-frame { height: calc(595.5 * var(--u)); }
#contact .contact-green-drift { position: absolute; inset: calc(-1 * var(--shift)) 0; --shift: calc(5 * var(--u)); }
#contact .contact-green img { position: absolute; max-width: none; object-fit: fill; transform-origin: 0 0; transform: rotate(-90deg); }
#contact .contact-green-back { width: calc(691.5 * var(--u)); height: calc(1234.5 * var(--u)); left: calc(50% - 722.31897 * var(--u)); top: calc(691.49756 * var(--u) + var(--shift)); }
#contact .contact-green-front { width: calc(606.75 * var(--u)); height: calc(1078.5 * var(--u)); left: calc(50% - 538.91895 * var(--u)); top: calc(601.03101 * var(--u) + var(--shift)); }
#contact .contact-details h2 { position: absolute; top: calc(147 * var(--u)); left: calc(-3.5 * var(--u)); width: 100%; text-align: center; font: 400 calc(122.85024 * var(--u))/1 var(--font-display); text-transform: uppercase; letter-spacing: -.05em; }
#contact .contact-links { position: absolute; top: calc(316 * var(--u)); left: calc(265 * var(--u)); width: calc(550 * var(--u)); font-size: calc(37.3725 * var(--u)); font-weight: 800; font-style: normal; letter-spacing: -.02em; line-height: calc(44.25 * var(--u)); text-align: center; }
#contact .contact-links a { display: flex; justify-content: center; align-items: center; width: fit-content; min-height: 44px; margin-inline: auto; text-decoration: none; white-space: nowrap; }
#contact .contact-links svg { flex: 0 0 auto; width: calc(27.75 * var(--u)); height: calc(27.75 * var(--u)); margin-right: calc(8 * var(--u)); }
#contact .contact-links a > span:not(.sr-only) { background: linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0% 2px; transition: background-size 200ms var(--ease-out); }
#contact .contact-links .contact-linkedin > span:not(.sr-only), #contact .contact-links .contact-instagram > span:not(.sr-only) { background-size: 100% 2px; }
#contact .contact-email { letter-spacing: .012em; }
#contact .contact-phone { letter-spacing: -.028em; }
#contact .contact-linkedin, #contact .contact-instagram { position: relative; left: calc(-26 * var(--u)); letter-spacing: -.01em; }
#contact .contact-links a:focus-visible > span:not(.sr-only) { background-size: 100% 2px; }
@media (hover: hover) and (pointer: fine) {
  #contact .contact-links a:hover > span:not(.sr-only) { background-size: 100% 2px; }
  #contact .contact-links .contact-linkedin:hover > span:not(.sr-only), #contact .contact-links .contact-instagram:hover > span:not(.sr-only) { background-size: 100% 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  #contact .contact-balloon.has-floated .contact-balloon-bob { animation-name: contact-balloon-bob; animation-duration: var(--bob-duration, 4s); animation-timing-function: var(--ease-in-out); animation-delay: calc(1600ms + var(--d, 0ms)); animation-iteration-count: infinite; animation-direction: alternate; }
  #contact .contact-quality-2 { --bob-duration: 3.6s; --bob-direction: -1; }
  #contact .contact-quality-3 { --bob-duration: 4.6s; --bob-direction: 1; }
  #contact .contact-quality-4 { --bob-duration: 3.9s; --bob-direction: -1; }
  #contact .contact-quality-5 { --bob-duration: 4.3s; --bob-direction: 1; }
  #contact .contact-quality-6 { --bob-duration: 4.1s; --bob-direction: -1; }
  @keyframes contact-balloon-bob { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -8px; rotate: calc(2deg * var(--bob-direction, 1)); } }
}
@media (max-width: 699px) {
  #contact .contact-reasons-frame { height: auto; padding: calc(76 * var(--m)) max(16px, env(safe-area-inset-right, 0px)) calc(72 * var(--m)) max(16px, env(safe-area-inset-left, 0px)); }
  #contact .contact-satin img { top: 0; height: 100%; min-height: 100%; object-fit: cover; object-position: 48% center; }
  #contact .contact-question { position: relative; top: auto; left: auto; font-size: calc(48 * var(--m)); line-height: .87; text-align: left; margin-bottom: calc(60 * var(--m)); }
  #contact .contact-question-line:first-child { white-space: normal; }
  #contact .contact-why { display: block; }
  #contact .contact-question-line:nth-child(2) { white-space: normal; max-width: calc(320 * var(--m)); }
  #contact .contact-qualities { display: grid; gap: calc(52 * var(--m)); }
  #contact .contact-quality { position: relative; inset: auto; display: grid; grid-template-columns: calc(90 * var(--m)) minmax(0,1fr); column-gap: calc(18 * var(--m)); align-items: center; }
  #contact .contact-quality .contact-balloon { position: relative; left: auto; top: auto; width: calc(85 * var(--m)); height: calc(136 * var(--m)); justify-self: center; --float: 70px; }
  #contact .contact-quality .contact-quality-copy { position: relative; inset: auto; width: auto; text-align: left; }
  #contact .contact-quality h3 { font-size: calc(29 * var(--m)); line-height: .84; left: auto; }
  #contact .contact-quality h3 br { display: none; }
  #contact .contact-quality-1 h3 { max-width: calc(180 * var(--m)); }
  #contact .contact-quality-2 h3 { max-width: calc(160 * var(--m)); }
  #contact .contact-quality-4 h3 { max-width: calc(210 * var(--m)); }
  #contact .contact-quality p { margin-top: calc(13 * var(--m)); font-size: max(16px,calc(17 * var(--m))); line-height: 1.4; letter-spacing: -.025em; }
  #contact .contact-desktop-break { display: none; }
  #contact .contact-quality-1 img { left: calc(-2 * var(--m)); top: calc(-10 * var(--m)); width: calc(90 * var(--m)); height: calc(160 * var(--m)); }
  #contact .contact-quality-2 img { left: calc(-28.9 * var(--m)); top: calc(-33.6 * var(--m)); width: calc(142.3 * var(--m)); height: calc(252.6 * var(--m)); }
  #contact .contact-quality-3 img { left: calc(-3 * var(--m)); top: calc(-13 * var(--m)); width: calc(90 * var(--m)); height: calc(159.6 * var(--m)); }
  #contact .contact-quality-4 img { left: calc(-1 * var(--m)); top: calc(-24 * var(--m)); width: calc(88 * var(--m)); height: calc(171.3 * var(--m)); }
  #contact .contact-quality-5 img { left: calc(-22 * var(--m)); top: calc(0 * var(--m)); width: calc(132 * var(--m)); height: calc(132 * var(--m)); }
  #contact .contact-quality-6 img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
  #contact .contact-quality-6 h3 { left: auto; }
  #contact .contact-quality-6 h3 br { display: block; }
  #contact .contact-details-frame { height: auto; min-height: calc(420 * var(--m)); padding: calc(72 * var(--m)) max(16px,env(safe-area-inset-right,0px)) calc(80 * var(--m)) max(16px,env(safe-area-inset-left,0px)); }
  #contact .contact-green-front { width: calc(430 * var(--m)); height: calc(765 * var(--m)); left: calc(-40 * var(--m)); top: calc(425 * var(--m) + var(--shift)); }
  #contact .contact-green-back { width: calc(520 * var(--m)); height: calc(926 * var(--m)); left: calc(-80 * var(--m)); top: calc(520 * var(--m) + var(--shift)); }
  #contact .contact-details h2 { position: relative; inset: auto; font-size: calc(67 * var(--m)); text-align: left; }
  #contact .contact-links { position: relative; inset: auto; width: 100%; margin-top: calc(35 * var(--m)); font-size: calc(23 * var(--m)); line-height: 1.5; letter-spacing: -.02em; text-align: left; }
  #contact .contact-linkedin, #contact .contact-instagram { left: auto; }
  #contact .contact-links a { justify-content: flex-start; margin-inline: 0; min-height: 46px; max-width: 100%; }
  #contact .contact-links svg { width: calc(22 * var(--m)); height: calc(22 * var(--m)); margin-right: calc(9 * var(--m)); }
}

/* WCAG AA: white CONTACT over the green light's brightest patches measured 2.5 to 3.0:1.
   A soft dark glow keeps it at 3:1 or better without changing her colors. */
#contact-details-title { text-shadow: 0 0 max(10px, calc(22 * var(--u))) rgb(0 0 0 / .5), 0 max(1px, calc(2 * var(--u))) max(4px, calc(8 * var(--u))) rgb(0 0 0 / .35); }

/* Round 2: each layer owns one motion, preserving the original float and crop. */
#contact .contact-quality { pointer-events: none; }
#contact .contact-quality-copy, #contact .contact-balloon { pointer-events: auto; }
#contact .contact-balloon-scroll,
#contact .contact-balloon-drag,
#contact .contact-balloon-wobble { position: relative; width: 100%; height: 100%; }
#contact .contact-balloon-wobble { transform-origin: 50% 80%; }
#contact .contact-balloon.is-held { z-index: 4; }
#contact .contact-balloon.is-held .contact-balloon-bob { animation-play-state: paused; }
#contact .contact-balloon-drag.is-grabbable { cursor: grab; user-select: none; }
#contact .contact-balloon.is-held .contact-balloon-drag { cursor: grabbing; }
#contact .contact-ripple-source { position: relative; display: inline-block; }
#contact .contact-letter { position: absolute; top: 0; pointer-events: none; text-align: left; text-shadow: none; }
#contact .contact-letter-float, #contact .contact-ripple-piece { display: block; }
#contact .has-letters .contact-word-measure { color: transparent; }

/* Round 4: sunlight and letters drift independently of their parallax and ripple. */
#contact .contact-light-back, #contact .contact-light-front, #contact .contact-dust { position: absolute; inset: 0; }
#contact .contact-dust { display: none; pointer-events: none; mask-image: radial-gradient(ellipse at 20% 12%, var(--black), transparent 55%), radial-gradient(ellipse at 68% 78%, var(--black), transparent 65%); }
#contact .contact-dust i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle, var(--white), transparent 72%); opacity: 0; }
#contact .contact-dust i:nth-child(3n) { width: 4px; height: 4px; }
#contact .contact-email, #contact .contact-phone { position: relative; }
#contact .contact-copy-feedback { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; padding: 7px 11px; border: 1px solid rgb(255 255 255 / .24); border-radius: 8px; background: var(--forest); color: var(--white); box-shadow: 0 3px 12px rgb(0 0 0 / .18); font: 700 13px/1.3 var(--font-body); letter-spacing: 0; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
#contact .contact-copy-feedback.is-shown { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  #contact .contact-light-back { animation: contact-light-back 11s ease-in-out infinite alternate; }
  #contact .contact-light-front { animation: contact-light-front 10s ease-in-out infinite alternate; }
  #contact .contact-dust { display: block; }
  #contact .contact-dust i { animation: contact-dust var(--flight) linear var(--phase) infinite; }
  #contact .has-rippled .contact-letter-float { animation: contact-letter-float var(--float-cycle) ease-in-out var(--float-phase) infinite; }
  #contact .contact-details .idle { animation-play-state: paused; }
  #contact.is-visible .contact-details.is-lit .idle { animation-play-state: running; }
  @keyframes contact-letter-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3.5px) rotate(var(--float-tilt)); } }
  @keyframes contact-light-front { from { opacity: 1; transform: scale(1) translate(0, 0); } to { opacity: .66; transform: scale(1.035) translate(2px, -2px); } }
  @keyframes contact-light-back { from { opacity: .88; transform: scale(1); } to { opacity: 1; transform: scale(1.03); } }
  @keyframes contact-dust { 0%, 100% { opacity: 0; transform: translate(0, 28px); } 18% { opacity: .22; } 78% { opacity: .16; } 99% { opacity: 0; transform: translate(var(--drift), -64px); } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  #contact .contact-links svg { transition: transform 200ms var(--ease-out); }
  #contact .contact-links a:is(:hover, :focus-visible) svg { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  #contact .contact-links a > span:not(.sr-only) { transition: none; }
}