/* ════════════════════════════════════════════════════════════════════════
   Conversion — cinematic scroll-snap pages (Views/conversion.php,
   content/conversion-beats.php): Contact, Investors, Careers. The shared
   scroll-snap scaffold lives in app.css (.cine-*), applied alongside the
   .conversion-* hooks initCineFilm('conversion') queries. This file keeps only
   conversion-specific structure: a slightly darker grade (every beat has a still
   behind it), the form-beat two-column layout + intake panel, the persistent
   secondary link row, and the contact-details block. The accent is the cyan
   thread via [data-accent] (tokens.css). ═══════════════════════════════════════ */

/* Grade sits a shade darker than the .cine- default (every beat is backed by a
   still); the grade element deliberately omits .cine-grade so this base wins. */
.conversion-grade{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 16% 100%, rgba(0,0,0,.55), transparent 55%),
             linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.58) 45%, rgba(10,11,13,.2) 100%);}
/* The form beat keeps its calm backdrop but needs an even, legible scrim. */
.conversion-grade--form{
  background:linear-gradient(180deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.72) 100%);}

/* Persistent secondary links (e.g. Investors → "Ongoing projects") sit tighter
   under the primary CTA / body so they read as a quiet, always-there shortcut. */
.conversion-ctas--secondary{margin-top:var(--s-4);}

/* ── Form beat — text left, the real intake form in a panel right ─────────── */
.conversion-beat-inner--form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:center;}
.conversion-beat-inner--form .conversion-content{grid-column:1;}
.conversion-formwrap{grid-column:2;position:relative;
  background:color-mix(in srgb, var(--ink-900) 78%, transparent);
  border:var(--b-hairline) solid var(--ink-700);border-radius:var(--r-md);
  padding:clamp(20px,2.6vw,32px);box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(6px);}
/* On the form beat the heading/sub belong with the form column on wide screens,
   so pull the intro above the panel rather than beside it. */
.conversion-beat--form .conversion-h2{max-width:24ch;}

/* ── Contact details (Contact page form beat) — address · email · social.
   Sits under the heading, above the intake form; one accountable point. ──── */
.conversion-contact{display:flex;flex-direction:column;gap:var(--s-4);
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:var(--b-hairline) solid var(--ink-700);max-width:48ch;}
.conversion-contact-item{display:flex;align-items:flex-start;gap:var(--s-3);
  color:var(--on-ink-mid);font-size:var(--t-body);line-height:1.5;}
.conversion-contact-item .icon{color:var(--accent);margin-top:.15em;width:1.25em;height:1.25em;}
.conversion-contact-item a{color:var(--on-ink-hi);text-decoration:none;}
.conversion-contact-item a:hover{color:var(--accent);}
.conversion-contact-address{font-style:normal;display:grid;gap:2px;}
.conversion-contact-social{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-1);}
.conversion-contact-label{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-mid);}

/* ── Responsive — form beat stacks ──────────────────────────────────────── */
@media (max-width:880px){
  .conversion-beat-inner--form{grid-template-columns:1fr;gap:var(--s-6);}
  .conversion-beat-inner--form .conversion-content,.conversion-formwrap{grid-column:1;}
}