/* ============================================================
   RobinsFire — v2 enhancements
   Cinematic hero, summon modal + FAB, realistic FRA finding,
   award strip.
   ============================================================ */

/* ---------------- HERO: shell + atmosphere ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 150px 0 84px;
}
.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.16; filter: saturate(0.82) contrast(1.04);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,22,0.62) 0%, rgba(8,12,22,0.88) 55%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,12,22,0.85) 0%, rgba(8,12,22,0.2) 60%);
}
.hero-aurora {
  position: absolute; left: -10%; right: -10%; top: -25%; height: 90%;
  background:
    radial-gradient(46% 60% at 74% 28%, var(--amber-glow), transparent 62%),
    radial-gradient(38% 52% at 18% 12%, rgba(106,166,224,0.10), transparent 60%);
  filter: blur(18px);
}
body.motion .hero-aurora { animation: auroraDrift 16s ease-in-out infinite alternate; }
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}
.hero-embers { position: absolute; inset: 0; overflow: hidden; }
.ember {
  position: absolute; bottom: -12px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px 1px var(--amber-glow);
  opacity: 0;
}
body.motion .ember { animation: emberRise linear infinite; }
@keyframes emberRise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  12%  { opacity: 0.6; }
  100% { transform: translateY(-86vh) scale(0.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion .ember { animation: none; }
  body.motion .hero-aurora { animation: none; }
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  gap: 52px;
  width: 100%;
  /* align-items: start so the hero copy doesn't shift downward when the
     quote panel grows taller (e.g. chat-first form expanding on result). */
  align-items: start;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "copy quote";
}
.hero-copy { max-width: 560px; grid-area: copy; }
.hero .quote { grid-area: quote; }

.hero h1 { font-size: clamp(40px, 5.6vw, 66px); font-weight: 600; letter-spacing: -0.035em; }
.hero h1 .amber { color: var(--amber); }
.hero-sub { margin-top: 22px; font-size: clamp(18px, 2.1vw, 20px); color: var(--ink-dim); max-width: 46ch; }
.hero-trust { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-call {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: var(--ink-dim);
}
.hero-call:hover { color: var(--amber-soft); }
.hero-call svg { color: var(--amber); }

/* Halo behind the lit quote panel */
.hero .quote { position: relative; }
.hero .quote::before {
  content: ""; position: absolute; inset: -28px; z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, var(--amber-glow), transparent 70%);
  filter: blur(8px); opacity: 0.9;
}

/* ---------------- SUMMON MODAL ---------------- */
.qmodal { position: fixed; inset: 0; z-index: 120; display: none; }
.qmodal.open { display: block; }
.qmodal-scrim {
  position: absolute; inset: 0;
  background: rgba(5, 8, 15, 0.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: scrimIn 0.25s ease;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.qmodal-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  overflow: visible;
  display: flex; flex-direction: column;
}
/* On mobile, anchor the modal near the top instead of vertically centring it.
   With centring, taller steps pushed the question up and shorter steps let
   it drop — users had to scroll to chase it. Top-anchoring keeps the
   question in the same place; only the bottom of the panel grows/shrinks
   and the body scrolls internally if needed. */
@media (max-width: 640px) {
  .qmodal-panel {
    top: 12px;
    transform: translate(-50%, 0);
    max-height: calc(100vh - 24px);
  }
}
.qmodal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-radius: var(--radius-lg); }
#qmodal-body .quote-badge { display: none; }
.qmodal-panel .quote { width: 100%; }
.qmodal-panel .quote::before { display: none; }
.qmodal-close {
  position: absolute; top: 13px; right: 13px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--q-border);
  color: var(--q-ink); font-size: 21px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.qmodal-close:hover { background: #f1f4f9; }

/* ---------------- FLOATING SUMMON BUTTON ---------------- */
.qfab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 22px 14px 18px;
  border: none; cursor: pointer; border-radius: 100px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: #2a1605;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  box-shadow: 0 12px 34px -8px rgba(240,145,62,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  opacity: 0; transform: translateY(24px) scale(0.96); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.qfab.show { opacity: 1; transform: none; pointer-events: auto; }
.qfab:hover { transform: translateY(-2px); }
.qfab svg { position: relative; z-index: 2; }
.qfab-glow {
  position: absolute; inset: 0; border-radius: 100px; z-index: 0;
  box-shadow: 0 0 0 0 rgba(240,145,62,0.5);
}
body.motion .qfab.show .qfab-glow { animation: fabPulse 2.6s ease-out infinite; }
@keyframes fabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,145,62,0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(240,145,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,145,62,0); }
}
@media (prefers-reduced-motion: reduce) { body.motion .qfab-glow { animation: none; } }
@media (max-width: 640px) {
  /* On mobile the topbar's "Get your price" button is always visible
     (topbar is fixed). The floating button just duplicates it and at
     narrow widths the text strips to an icon that reads like a chat
     bubble. Hide it on mobile — desktop keeps it where there's room. */
  .qfab { display: none !important; }
}
@media (max-width: 560px) {
  .qfab { right: 14px; bottom: 14px; padding: 13px 18px; font-size: 15px; }
}

/* ---------------- FRA FINDING (realistic, dark) ---------------- */
.fra {
  display: grid; grid-template-columns: 132px 1fr;
  overflow: hidden; border-radius: var(--radius);
  box-shadow: 0 40px 90px -34px rgba(0,0,0,0.8);
}
.fra-rail {
  background: rgba(0,0,0,0.28);
  border-right: 1px solid var(--panel-border);
  padding: 22px 16px; display: grid; gap: 20px; align-content: start;
}
.fra-rail-item { display: grid; gap: 5px; justify-items: start; }
.fra-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--amber-glow); color: var(--amber); margin-bottom: 3px;
}
.fra-ico.prio { background: rgba(232,112,92,0.16); color: var(--red); }
.fra-lbl {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.fra-val {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--ink);
  background: rgba(255,255,255,0.05); border: 1px solid var(--panel-border);
  padding: 4px 9px; border-radius: 7px;
}
.fra-val.high { color: #ff8a76; background: rgba(232,112,92,0.14); border-color: rgba(232,112,92,0.3); }

.fra-main { padding: 22px 24px; }
.fra-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--panel-border);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.fra-ref { color: var(--amber); font-weight: 700; letter-spacing: 0.1em; }
.fra-block { margin-top: 16px; }
.fra-block-h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 9px;
}
.fra-bico {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--amber); color: #2a1605; flex-shrink: 0;
}
.fra-bico.ok { background: var(--green); color: #06281a; }
.fra-block p { font-size: 14px; color: var(--ink-dim); line-height: 1.55; }
.fra-block.action {
  background: rgba(240,145,62,0.05);
  border: 1px solid rgba(240,145,62,0.2);
  border-radius: var(--radius-sm); padding: 16px;
}
.fra-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fra-photos img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--panel-border);
}
.fra-foot {
  display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--panel-border);
}
.fra-foot > div { display: grid; gap: 2px; }
.fra-foot-lbl {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.fra-foot > div > span:last-child { font-size: 13px; color: var(--ink); font-weight: 500; }

/* ---------------- TEAM STRIP ---------------- */
.team-strip {
  display: flex; flex-direction: column;
  gap: 26px;
  padding: 28px 32px; margin-top: 22px;
}
.team-head .eyebrow { display: inline-flex; margin-bottom: 8px; }
.team-head h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.team-people {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.team-person {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 26px;
  align-items: center;
}
.team-person-photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--panel-border-2);
  background: rgba(255,255,255,0.04);
}
/* Marco's photo is pre-cropped (tight on him + the award) so centre-crop is fine. */
.team-person-photo-marco { object-position: 50% 50%; }
.team-person-body { min-width: 0; }
.team-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  color: var(--ink); margin-bottom: 4px;
  line-height: 1.3;
}
.team-role {
  font-weight: 500; color: var(--ink-dim);
  font-size: 14px;
}
.team-person-body p {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .hero { min-height: 0; padding: 116px 0 56px; }
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "quote";
    gap: 34px;
  }
  .fra { grid-template-columns: 1fr; }
  .fra-rail {
    grid-template-columns: repeat(4, 1fr);
    border-right: none; border-bottom: 1px solid var(--panel-border);
    gap: 12px;
  }
  .team-person { grid-template-columns: 96px 1fr; gap: 18px; }
  .team-person-photo { width: 96px; height: 96px; }
}
@media (max-width: 560px) {
  .team-person { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .team-person-photo { width: 110px; height: 110px; }
}
@media (max-width: 560px) {
  /* Tighter hero padding + gap so the quote tool sits closer to the fold. */
  .hero { padding: 88px 0 40px; }
  .hero-inner { gap: 24px; }
  .hero h1 { font-size: 33px; line-height: 1.08; }
  .hero-sub { margin-top: 16px; font-size: 16.5px; }
  .hero-trust { margin-top: 20px; gap: 8px; }
  .hero-call { margin-top: 16px; font-size: 14px; }
  /* Compact rail on mobile: single wrapping row of small chips (icon + value)
     instead of a 2x2 grid of stacked icon/label/value blocks. The full PDF
     report puts these on the left side; on a narrow screen the chip strip
     reads as "metadata", letting Description + Photos be the visual focus. */
  .fra-rail {
    display: flex; flex-wrap: wrap; gap: 6px;
    grid-template-columns: none;
    padding: 12px 14px;
  }
  .fra-rail-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    gap: 7px;
  }
  .fra-rail-item .fra-ico {
    width: 22px; height: 22px; border-radius: 6px; margin: 0;
  }
  .fra-rail-item .fra-ico svg { width: 12px; height: 12px; }
  .fra-rail-item .fra-lbl { display: none; }
  .fra-rail-item .fra-val {
    padding: 0; background: transparent; border: none;
    font-size: 12.5px;
  }
  .fra-rail-item .fra-val.high { background: transparent; border: none; padding: 0; }
  /* photos stay side-by-side at all widths — keeping them as a 2-up grid
     means each shrinks proportionally rather than going huge stacked */
  .fra-photos { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 420px) {
  .topbar .wrap { height: 64px; }
  .topbar-cta { gap: 12px; }
  .topbar .btn-amber { padding: 11px 16px; font-size: 14.5px; }
  .topbar-phone svg { width: 18px; height: 18px; }
  .qfab { font-size: 0; gap: 0; padding: 15px; }
  .qfab svg { width: 22px; height: 22px; }
  .hero { padding: 76px 0 32px; }
  .hero h1 { font-size: 30px; }
  .hero-trust .pill { font-size: 12.5px; padding: 6px 11px; }
  .hero-call { display: none; } /* topbar already has the phone */
}