/* /contact (agent C2): the mist form on the left shore, the deep right shore with the mooring post photograph,
   the lantern scene and the support lines. The page's text hover is the glow. */
.contact { padding-top: clamp(28px, 3.4vw, 56px); }
.contact__h1 { margin-bottom: clamp(24px, 3vw, 48px); }
.contact__shores { --shore-gap: clamp(24px, 3vw, 64px); }
.contact__form-shore { padding-right: clamp(8px, 2vw, 48px); align-self: start; }
.contact-form { max-width: none; }
.contact-form .field textarea { min-height: 180px; }
.contact__success { font-size: clamp(1.25rem, 1.7vw, 1.75rem); font-family: var(--font-head); font-weight: 500; line-height: 1.3; }

/* the deep shore: photograph edge to centre, the lantern, the support text */
.contact__deep { background: var(--deep); color: var(--mist); --rule: var(--rule-deep); display: grid; grid-template-rows: auto auto 1fr; min-height: 100%; }
.contact__deep .caption, .contact__deep .muted { color: var(--muted-deep); }
.contact__deep .link, .contact__deep .link:hover, .contact__deep .link:focus-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2 C 2 0, 4 0, 6 2 S 10 4, 12 2' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); }
.contact__deep .link:hover, .contact__deep .link:focus-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 3 H12' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); }
.contact__deep [data-hover="glow"]::before { background: radial-gradient(closest-side, rgba(181, 107, 255, .45), transparent); }
.contact__deep a:focus-visible { outline-color: var(--glow); }
.contact__photo { position: relative; overflow: hidden; height: clamp(300px, 34vw, 560px); }
.contact__photo > picture { position: absolute; left: 0; width: 100%; top: -7%; height: 114%; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.contact__photo > .haze { position: absolute; left: 0; right: 0; bottom: -10%; height: 45%; pointer-events: none; background: linear-gradient(to top, rgba(14, 24, 38, .85), rgba(14, 24, 38, 0)); }
.lantern { position: relative; margin-top: -1px; height: clamp(150px, 14vw, 230px); overflow: visible; }
.lantern__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lantern__unit { transform-origin: 180px 200px; }
.lantern__halo { transform-origin: 180px 46px; }
.lantern__flame, .lantern__core { animation: ct-breathe 6s var(--ease-swell) infinite; transform-origin: 180px 47px; }
.lantern.is-blink .lantern__halo, .lantern.is-blink .lantern__flame, .lantern.is-blink .lantern__core, .lantern.is-blink .lantern__reflection { animation: ct-blink .5s steps(2, jump-none) 1; }
@keyframes ct-breathe { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes ct-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.contact__support { padding: clamp(18px, 2.4vw, 40px) clamp(20px, 3vw, 56px) clamp(28px, 3.4vw, 56px) clamp(20px, 2.6vw, 48px); align-self: end; }
.contact__para { margin: 0 0 clamp(18px, 2.2vw, 32px); max-width: none; font-size: clamp(1.0625rem, 1.2vw, 1.3125rem); }
.contact__lines { margin: 0; display: grid; }
.contact__lines div { display: grid; grid-template-columns: minmax(84px, 14%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-deep); align-items: baseline; }
.contact__lines div:first-child { border-top: 1px solid var(--rule-deep); }
.contact__lines dt { font-family: var(--font-head); font-weight: 500; }
.contact__lines dd { margin: 0; }
.contact__lines .fig { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .lantern__flame, .lantern__core { animation: none; } .lantern__unit { transform: none !important; } }
html.rc-reduced .lantern__flame, html.rc-reduced .lantern__core { animation: none; }
@media (max-width: 899.98px) {
  .contact__form-shore { padding-right: 0; }
  .contact__deep { margin-inline: calc(-1 * var(--gutter)); }
  .contact__photo { height: 64vw; }
  .contact__support { padding-inline: var(--gutter); }
  .contact__lines div { grid-template-columns: 84px 1fr; }
}