/* =========================================================================
   ZXVERA — Contact page
   Builds on style.css (tokens, header, footer, reveals) and forms.css (controls and states).
   Imagery: real photography framed with the shared .photo-frame component; the form is a message composer.
   ========================================================================= */

/* ---------- Hero ---------- */
.chero {
  position: relative;
  padding: calc(var(--header-h) + clamp(16px, 2.5vw, 36px)) 0 clamp(28px, 3vw, 40px);
  color: var(--white);
  background: radial-gradient(100% 80% at 78% 30%, #0D2142 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  overflow: hidden;
  isolation: isolate;
}
.chero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.chero__glow { width: 44vw; height: 44vw; max-width: 680px; max-height: 680px; right: -6vw; top: -10vw; background: radial-gradient(circle, rgba(40, 216, 255, 0.24), transparent 65%); animation: drift-a 26s ease-in-out infinite alternate; }

.chero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.chero__badge { margin-bottom: 20px; }
.chero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 8.4vw, 7.6rem); line-height: 0.92; letter-spacing: -0.05em; margin-bottom: 30px; }
.chero__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.05em; }
.chero__line > span { display: inline-block; }
.chero__line:nth-child(2) { padding-left: clamp(0px, 4vw, 64px); }
.chero__title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chero__title i { font-style: normal; color: var(--cyan); }
.chero__intro { max-width: 46ch; }
.chero__lede { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.4; padding-left: 18px; border-left: 2px solid var(--cyan); }
.chero__intro p + p { margin-top: 12px; color: var(--steel); font-size: 1.04rem; }
.chero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }


/* Hero entrance (released by .hero-go from main.js) */
.js:not(.hero-go) .chero__line > span { transform: translateY(110%); }
.js:not(.hero-go) .chero .crumbs,
.js:not(.hero-go) .chero__badge,
.js:not(.hero-go) .chero__intro,
.js:not(.hero-go) .chero__actions { opacity: 0; transform: translateY(20px); }
.chero__line > span { transition: transform 1.1s var(--ease-out); }
.chero__line:nth-child(2) > span { transition-delay: 0.1s; }
.chero .crumbs, .chero__badge, .chero__intro, .chero__actions { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.chero__intro { transition-delay: 0.28s; }
.chero__actions { transition-delay: 0.4s; }

/* ---------- How can we help ---------- */
.help { padding: var(--section-y) 0; background: var(--white); color: var(--ink); overflow-x: clip; }
.help__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.help__head { position: sticky; top: 110px; }
.help__head .h2 { margin-bottom: 20px; }
.help__text { max-width: 46ch; color: var(--ink-2); font-size: 1.05rem; }
.help__note { margin-top: 20px; padding-top: 18px; max-width: 46ch; font-size: 0.92rem; color: var(--ink-2); border-top: 1px solid var(--line-light); }
.help__note a { color: var(--blue-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.topics { border-top: 1px solid var(--line-light); }
.topics li { border-bottom: 1px solid var(--line-light); }
.topic {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  gap: 18px;
  align-items: center;
  padding: 20px 8px 20px 4px;
  color: var(--ink);
  transition: padding 0.4s var(--ease-out), background-color 0.3s var(--ease);
}
.topic::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-brand); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease-out); }
.topic__num { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(10, 22, 40, 0.3); transition: -webkit-text-stroke-color 0.3s var(--ease), color 0.3s var(--ease); }
.topic__body { display: flex; flex-direction: column; gap: 3px; }
.topic__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.32rem); letter-spacing: -0.01em; }
.topic__desc { font-size: 0.92rem; color: var(--ink-2); }
.topic__arrow { width: 22px; height: 22px; color: var(--blue); transition: transform 0.4s var(--ease-out); }
.topic:hover, .topic:focus-visible { padding-left: 16px; background: linear-gradient(90deg, rgba(23, 107, 255, 0.06), transparent 70%); }
.topic:hover::before, .topic:focus-visible::before { transform: scaleY(1); }
.topic:hover .topic__num, .topic:focus-visible .topic__num { -webkit-text-stroke-color: var(--blue); color: var(--blue); }
.topic:hover .topic__arrow, .topic:focus-visible .topic__arrow { transform: translateX(6px); }
.topic:focus-visible { outline-offset: -2px; }

/* ---------- Compose (contact form) ---------- */
.compose {
  position: relative;
  padding: var(--section-y) 0;
  color: var(--white);
  background: radial-gradient(60% 50% at 50% 0%, rgba(23, 107, 255, 0.28), transparent 70%), linear-gradient(180deg, var(--navy-900), var(--navy-950));
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: 50px;
}
.compose__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.compose__wrap { max-width: calc(900px + var(--gutter) * 2); }
.compose__head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.compose__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 14px; }
.compose__text { max-width: 58ch; color: var(--steel-2); font-size: 1.05rem; }

.composer {
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.composer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(20px, 3.5vw, 40px); background: var(--off); border-bottom: 1px solid var(--line-light); font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.composer__bar-title { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.composer__dot { width: 8px; height: 8px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.15); }
.composer__to { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-light); color: var(--ink); }
.composer__to img { width: 20px; height: 20px; border-radius: 6px; }

.composer__form { padding: clamp(22px, 3.5vw, 40px); }
.composer__subject { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line-light); }
.composer__subject .field { margin-bottom: 0; }
.composer__subject select { min-height: 58px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }

.composer__details { margin: 0 0 6px; padding: 0; border: 0; min-width: 0; }
.composer__details legend { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; width: 100%; padding: 0; margin-bottom: 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.composer__legend-note { font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--ink-2); }
.composer__legend-note span[aria-hidden] { color: var(--blue); font-weight: 800; }
.composer__message textarea { min-height: 190px; }

.composer__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 32px;
  align-items: center;
  margin: 8px calc(clamp(22px, 3.5vw, 40px) * -1) calc(clamp(22px, 3.5vw, 40px) * -1);
  padding: 22px clamp(22px, 3.5vw, 40px);
  background: var(--off);
  border-top: 1px solid var(--line-light);
}
.composer__footer .field--check { margin: 0; }
.composer__send { min-width: 220px; }
.composer__success { padding: clamp(36px, 6vw, 64px) clamp(22px, 4vw, 48px); }

/* ---------- Direct contact (verified, owner-supplied details) ---------- */
.direct { margin-top: clamp(24px, 2.6vw, 36px); }
.direct__title { margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--white); }
.direct__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.direct__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(13, 27, 48, 0.7);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  transition: box-shadow 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.direct__list li:hover, .direct__list li:focus-within { box-shadow: inset 0 0 0 1px rgba(40, 216, 255, 0.4); transform: translateY(-2px); }
.direct__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--white); background: var(--grad-brand); }
.direct__icon .icon { width: 20px; height: 20px; }
.direct__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-dim); }
.direct__value { font-weight: 700; color: var(--white); overflow-wrap: anywhere; }
a.direct__value { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease); }
a.direct__value:hover, a.direct__value:focus-visible { color: var(--cyan); text-decoration-color: var(--cyan); }

@media (max-width: 860px) {
  .direct__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Closing ---------- */
.cclose { padding: clamp(32px, 3.2vw, 44px) 0; background: var(--off); color: var(--ink); border-top: 1px solid var(--line-light); }
.cclose__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cclose__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; margin-bottom: 8px; }
.cclose__copy p { max-width: 60ch; color: var(--ink-2); }
.cclose__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .chero.is-offscreen .aurora { animation-play-state: paused; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .chero__inner { grid-template-columns: minmax(0, 1fr); }
  .help__grid { grid-template-columns: minmax(0, 1fr); }
  .help__head { position: static; }
}

@media (max-width: 640px) {
  .chero__title { font-size: min(19vw, 4.6rem); }
  .chero__actions .btn { flex: 1 1 100%; }

  .topic { grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 12px; padding: 16px 4px; }
  .topic__num { font-size: 1.25rem; }

  .composer { border-radius: var(--radius); }
  .composer__bar { padding: 12px 16px; font-size: 0.8rem; }
  .composer__form { padding: 20px 16px; }
  .composer__footer { grid-template-columns: minmax(0, 1fr); margin: 8px -16px -20px; padding: 20px 16px; }
  .composer__send { width: 100%; min-width: 0; }

  .cclose__actions, .cclose__actions .btn { width: 100%; }
}