/* ============================================================
   Sanctuary Insurance: quote.html page-scoped layer
   Inherits the locked system (styles.css). Adds only the quote
   hero VARIANT (a compact split band, NOT the home parallax scene),
   the steps strip, and small quote-page affordances.
   All rules scoped under .page-quote. No em/en dashes. 375-first.
   ============================================================ */

/* ---------- Hero variant: compact split band (copy + framed photo) ---------- */
/* Reads as SECONDARY to the home hero: shorter, no layered parallax scene,
   a single framed photo in the rounded-mask grammar instead of cutout layers. */
.page-quote .quote-hero {
  position: relative;
  background:
    radial-gradient(120% 80% at 85% 6%, rgba(237,206,104,.30) 0%, rgba(237,206,104,0) 46%),
    radial-gradient(120% 90% at 8% 100%, rgba(238,29,35,.16) 0%, rgba(238,29,35,0) 44%),
    var(--canvas);
  color: var(--ink-inverse);
  overflow: clip;
  padding-block: clamp(2.2rem, 1.5rem + 4vw, 4rem);
}
.page-quote .qh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 1rem + 4vw, 3rem);
  align-items: center;
}
.page-quote .qh-copy .eyebrow {
  color: var(--warm); font-weight: 600; font-size: var(--fs-small); margin-bottom: .6rem;
}
.page-quote .qh-copy h1 { color: var(--ink-inverse); max-width: 16ch; }
.page-quote .qh-copy .lede {
  color: var(--ink-inverse-soft);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  max-width: 40ch; margin-top: 1rem;
}
.page-quote .qh-steps {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .55rem;
}
.page-quote .qh-steps .qh-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);
  border-radius: 999px; padding: .45rem .85rem;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-inverse);
}
.page-quote .qh-steps .qh-pill .n {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--accent-deep); color: #fff;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
}
.page-quote .qh-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.page-quote .qh-actions .btn-link { color: var(--ink-inverse); }

/* framed photo (rounded-mask grammar, single image, no layered scene) */
.page-quote .qh-media { position: relative; }
.page-quote .qh-media .frame {
  position: relative; border-radius: var(--radius-lg); overflow: clip;
  box-shadow: var(--shadow-float);
  aspect-ratio: 4 / 3;
}
.page-quote .qh-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.page-quote .qh-media .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(32,38,43,0) 55%, rgba(32,38,43,.45) 100%);
}
/* small floating reassurance badge on the photo */
.page-quote .qh-media .qh-badge {
  position: absolute; left: -.6rem; bottom: 1rem; z-index: 2;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: .7rem .9rem;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: .6rem; max-width: 17rem;
}
.page-quote .qh-media .qh-badge .b-mark {
  width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 8px;
  background: #FDECEC; display: grid; place-items: center; color: var(--accent);
}
.page-quote .qh-media .qh-badge .b-mark svg { width: 18px; height: 18px; }
.page-quote .qh-media .qh-badge b { font-size: var(--fs-small); display: block; }
.page-quote .qh-media .qh-badge span { font-size: var(--fs-xs); color: var(--ink-soft); }

/* ---------- Quote band: drop the home's extra qb-points spacing tweak only ---------- */
/* (the quote-tool + quote-result components are inherited verbatim from styles.css) */
.page-quote .quote-band .qb-intro h2 { max-width: 20ch; }

/* ---------- "What happens next" steps strip (keys photo) ---------- */
.page-quote .nextsteps { position: relative; overflow: clip; }
.page-quote .nextsteps .ns-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 1rem + 3vw, 2.6rem);
  align-items: center;
}
.page-quote .nextsteps .ns-media {
  border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 2;
}
.page-quote .nextsteps .ns-media img { width: 100%; height: 100%; object-fit: cover; }
.page-quote .nextsteps .ns-list { display: grid; gap: 1rem; margin-top: 1.4rem; }
.page-quote .nextsteps .ns-item { display: flex; gap: .9rem; align-items: flex-start; }
.page-quote .nextsteps .ns-item .ns-n {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent-deep); color: #fff; font-weight: 700; font-size: var(--fs-small);
  display: grid; place-items: center;
}
.page-quote .nextsteps .ns-item h3 { font-size: var(--fs-h3); margin-bottom: .2rem; }
.page-quote .nextsteps .ns-item p { font-size: var(--fs-small); color: var(--ink-soft); max-width: 42ch; }

/* ---------- Trust footnote under the tool ---------- */
.page-quote .quote-disclaimer {
  margin-top: 1.4rem; display: flex; gap: .6rem; align-items: flex-start;
  background: rgba(255,255,255,.55); border-radius: var(--radius);
  padding: .9rem 1.1rem; color: #6b5d2f; font-size: var(--fs-small);
}
.page-quote .quote-disclaimer .tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-deep); }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .page-quote .nextsteps .ns-grid { grid-template-columns: 1.1fr 1fr; }
}
@media (min-width: 980px) {
  .page-quote .qh-grid { grid-template-columns: 1.05fr .95fr; }
  .page-quote .qh-copy h1 { max-width: 15ch; }
}