/* contact.css — a useful contact page in the home/about language.
   Tokens only: container/gutter, theme colours, radius, springs. No new tokens. */

.contact {
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--nav-h, 88px) + clamp(44px, 9vh, 96px))
           var(--gutter)
           clamp(64px, 12vh, 130px);
}

/* ---- header ---- */
.contact__eyebrow { display: block; font-size: 14px; letter-spacing: .02em; color: var(--text-muted); margin-bottom: 18px; }
.contact__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; margin: 0; color: var(--text-primary);
}
.contact__lead { margin: 18px 0 0; max-width: 54ch; color: var(--text-secondary); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.6; }

/* ---- layout ---- */
.contact__grid {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---- form ---- */
.contact__form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary); }
.field input,
.field textarea,
.field select {
  width: 100%; font: inherit; color: var(--text-primary);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px); padding: 13px 15px;
  transition: border-color var(--t-base, .25s) var(--ease-out, ease),
              box-shadow var(--t-base, .25s) var(--ease-out, ease);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
/* custom select chevron */
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.select svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }

.contact__send {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  margin-top: 4px; padding: 13px 22px; font: inherit; font-weight: 600;
  color: #fff; background: var(--blue); border: 0; border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: background var(--t-base, .25s) var(--ease-out, ease),
              transform var(--t-fast, .15s) var(--ease-out, ease);
}
.contact__send svg { width: 18px; height: 18px; transition: transform var(--t-base, .25s) var(--ease-spring, ease); }
@media (hover: hover) and (pointer: fine) {
  .contact__send:hover { background: var(--blue-dark); }
  .contact__send:hover svg { transform: translateX(4px); }
}
.contact__send:active { transform: scale(.98); }
.contact__hint { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.contact__hint a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ---- aside ---- */
.contact__aside { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); }
.contact__card { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--border); border-radius: var(--radius-md, 14px); background: var(--bg-elevated); }
.contact__card-title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.contact__channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.contact__channels a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--text-primary); transition: color var(--t-base, .25s) var(--ease-out, ease); }
.contact__channels svg { width: 20px; height: 20px; color: var(--text-muted); flex: none; transition: color var(--t-base, .25s) var(--ease-out, ease); }
@media (hover: hover) and (pointer: fine) { .contact__channels a:hover, .contact__channels a:hover svg { color: var(--blue); } }
.contact__help { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact__help li { position: relative; padding-left: 22px; color: var(--text-secondary); line-height: 1.5; }
.contact__help li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* ---- map (no pin) ---- */
.contact__map { margin: 0; }
.contact__map iframe {
  display: block; width: 100%; height: 240px; border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px); filter: grayscale(1) contrast(1.04);
  transition: filter .5s var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) { .contact__map:hover iframe { filter: grayscale(0) contrast(1); } }
.contact__map figcaption { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* ---- reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-spring, ease); }
[data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---- submission states ---- */
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__error { margin: 0; color: #b42318; font-size: 14px; }
.contact__hint.is-error { color: #b42318; }
.contact__sent {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  background: var(--bg-elevated);
  line-height: 1.6;
}
.contact__sent strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--text-primary); margin-bottom: 6px; }
.contact__sent span { color: var(--text-secondary); }