/* =================== QuickChoice • services.css =================== */

/* tighten hero and section spacing slightly */
.hero .hero__script{ font-size:44px; }
.section{ padding-top:24px; }

/* Make the “standout” subhead bigger and bolder on this page */
.hero .hero__sub,
.hero__sub.hero__sub--big{
  font-weight:800;
  font-size:clamp(18px, 1.9vw, 24px);
  line-height:1.35;
  color:#0c2c41;
  max-width:900px;
  margin:10px auto 0;
}

/* photo blocks keep a consistent visual height */
.feature__media.photo img{
  width:100%; height:100%; object-fit:cover; border-radius:20px;
}

/* =================== QuickChoice • services.css =================== */

/* How-it-works */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:980px;margin:0 auto}
.how__item{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:10px 12px; color:#0c2c41; box-shadow:var(--lift)
}
.how__num{
  display:inline-grid;place-items:center;
  width:28px;height:28px;border-radius:999px;
  background:linear-gradient(180deg,#fff9ec,#ffe7c1);
  border:1.5px solid var(--rim); font-weight:800; color:#1a4c74
}
@media(max-width:720px){.how{grid-template-columns:1fr}}

/* Controls */
.controls{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;max-width:1100px;margin:0 auto 12px}
@media(max-width:820px){.controls{grid-template-columns:1fr;justify-items:stretch}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  appearance:none;border:1px solid var(--line);background:#fff;color:#1a4c74;
  font-weight:800;border-radius:999px;padding:8px 12px;cursor:pointer
}
.chip.is-active{border-color:var(--rim);box-shadow:var(--lift);background:linear-gradient(180deg,#fff9ec,#ffe7c1)}
.search{position:relative;display:inline-block}
.search input{
  width:280px;max-width:100%;padding:10px 36px 10px 12px;border-radius:12px;border:1px solid var(--line);outline:none
}
.search svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:#6b7a88}

/* Grid */
.grid{
  --thumb:86px;
  --gap:12px;
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(6,minmax(0,1fr));
  max-width:1100px;margin:0 auto;
}
@media(max-width:1280px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:980px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));--thumb:78px}}
@media(max-width:420px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));--thumb:72px}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--lift);
  padding:10px;display:grid;gap:8px;justify-items:center;cursor:pointer;user-select:none;transition:transform .06s ease
}
.card:hover{transform:translateY(-2px)}
.card.is-selected{outline:2px solid #1a4c74; box-shadow:0 0 0 3px rgba(26,76,116,.15), var(--lift)}
.thumb{
  width:var(--thumb);height:var(--thumb);
  border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden
}
.thumb img{ width:100%;height:100%;object-fit:contain; }
.label{font-weight:800;color:#0c2c41;text-align:center;font-size:13px;line-height:1.2}
.sub{color:var(--muted);font-size:12px;text-align:center}

/* Sticky bar */
.sticky{
  position:sticky;bottom:10px;left:0;right:0;
  max-width:1100px;margin:16px auto 0;display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--lift);padding:10px 12px
}
.sticky__left{font-weight:800;color:#1a4c74}
.sticky__right{display:flex;gap:8px;align-items:center}
.disclaimer{
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 24px;
  text-align: center;
}
.missing-item {
  margin: 18px 0 12px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.missing-btn {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffffff, #f3f7fb);
  border: 1px solid var(--brand-blue);
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  box-shadow: var(--lift);
  transition: 0.25s ease;
}

.missing-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}