/* Connect Mobile Media — /quote/ landing pages.
   Loads after styles.css and only adds what the landing page needs:
   a two-column hero with the form on the first screen, a logo strip,
   and a sticky call/quote bar on phones. */

.quote-page .nav-inner { height: 64px; }
.quote-page .nav .q-call { padding: 9px 16px; font-size: .86rem; white-space: nowrap; }

/* Hero */
.q-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); }
.q-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr;
  column-gap: 44px; row-gap: 26px; align-items: start;
}
.q-hero-copy { grid-column: 1; grid-row: 1; }
.q-hero-extra { grid-column: 1; grid-row: 2; }
.q-hero-form { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 84px; }
.q-hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; margin: 14px 0 14px; }
.q-hero h1 em { color: var(--neon); font-style: normal; text-shadow: 0 0 24px rgba(0,212,255,.45); }
.q-hero .lede { color: var(--w70); font-size: 1.1rem; max-width: 560px; }

.q-proof { list-style: none; display: grid; gap: 10px; margin: 0 0 22px; }
.q-proof li { color: var(--w70); font-size: .95rem; padding-left: 22px; position: relative; }
.q-proof li::before { content: "◆"; color: var(--neon); position: absolute; left: 0; top: 0; font-size: .8rem; }
.q-proof b { color: var(--white); font-family: 'Space Grotesk'; }
.q-hero-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.q-media { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* Form */
.q-form { padding: 26px; }
.q-form h3 { font-size: 1.25rem; margin-bottom: 4px; }
.q-form-sub { color: var(--w50); font-size: .88rem; margin-bottom: 4px; }
.q-form label { margin-top: 12px; }
.q-form .btn { margin-top: 18px; }
.q-form .form-note a { color: var(--w70); text-decoration: underline; }
.q-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--w50) 50%), linear-gradient(135deg, var(--w50) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

/* Logo strip + three photos */
.q-logos { padding: 50px 0; }
.q-logos-label { text-align: center; color: var(--w50); text-transform: uppercase; letter-spacing: .18em; font-size: .76rem; font-weight: 600; margin-bottom: 16px; }
.q-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin-bottom: 30px; }
.q-logo-row span { font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.25rem; color: var(--w70); letter-spacing: .01em; }
.q-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.q-gallery figure { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin: 0; }
.q-gallery img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.q-gallery figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 14px 12px; font-size: .82rem; color: var(--w70); background: linear-gradient(transparent, rgba(10,10,15,.9)); }

/* How / FAQ / bottom form */
.q-how { padding: 70px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.q-steps { grid-template-columns: repeat(3, 1fr); }
.q-faq { padding: 70px 0; }
.q-bottom { padding: 70px 0 80px; border-top: 1px solid var(--border); }
.q-bottom-form { max-width: 640px; margin: 0 auto; }

/* Footer */
.q-footer { border-top: 1px solid var(--border); background: var(--navy); padding: 26px 0; text-align: center; }
.q-footer p { color: var(--w50); font-size: .85rem; margin: 4px 0; }
.q-footer strong { color: var(--white); }
.q-footer a { color: var(--w70); }

/* Sticky bar — phones only */
.q-sticky { display: none; }

@media (max-width: 980px) {
  .q-hero-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .q-hero-copy, .q-hero-form, .q-hero-extra { grid-column: 1; grid-row: auto; }
  .q-hero-form { position: static; }
  .q-gallery { grid-template-columns: repeat(2, 1fr); }
  .q-gallery figure:first-child { grid-column: span 2; }
  .q-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .quote-page .logo { font-size: .95rem; }
  .quote-page .logo img { width: 30px; height: 30px; }
  .quote-page .nav .q-call { padding: 8px 12px; font-size: .8rem; }
  .q-hero { padding: 34px 0 30px; }
  .q-hero h1 { font-size: 1.9rem; }
  .q-hero .lede { font-size: 1rem; }
  .q-form { padding: 20px 16px; }
  .q-gallery { grid-template-columns: 1fr; }
  .q-gallery figure:first-child { grid-column: span 1; }
  .q-how, .q-faq, .q-bottom { padding: 50px 0; }
  body.quote-page { padding-bottom: 72px; }
  .q-sticky {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10,10,15,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--border);
  }
  .q-sticky .btn { text-align: center; padding: 13px 10px; }
}