/* =====================================================================
   FAQ "Still have a question?" card for the service pages (v12)
   Same look as the homepage FAQ card. Left column and questions start
   and end on the same line on desktop; on phones the card follows the
   questions.
   ===================================================================== */
.fh-card { --fh-navy: #0a1f44; position: relative; overflow: hidden; display: grid; gap: 14px; margin-top: 22px; padding: 20px; border-radius: 20px; background: var(--fh-navy); color: rgba(255,255,255,.72); box-shadow: 0 24px 50px -28px rgba(10,31,68,.55); text-align: left; }
.fh-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(34,197,94,.28), transparent); pointer-events: none; }
.fh-head { position: relative; display: flex; align-items: center; gap: 14px; }
.fh-head img { width: 54px !important; height: 54px !important; max-width: none !important; margin: 0 !important; flex: none; border-radius: 50% !important; object-fit: cover; object-position: center 22%; border: 2px solid rgba(255,255,255,.2); box-shadow: none !important; }
.fh-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #4ade80; }
.fh-ico svg { width: 22px; height: 22px; }
.fh-head b { display: block; color: #fff; font-size: 1.08rem; line-height: 1.3; font-weight: 700; }
.fh-head span { display: block; font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.7); }
.fh-acts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fh-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff !important; text-decoration: none !important; transition: background .2s, border-color .2s, transform .2s; }
.fh-act:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); transform: translateY(-2px); color: #fff; }
.fh-act b { display: block; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.fh-act small { display: block; color: rgba(255,255,255,.62); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; }
.fh-act > span:nth-child(2) { min-width: 0; }
.fh-ai { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(96,165,250,.16); color: #93c5fd; }
.fh-ai svg { width: 17px; height: 17px; }
.fh-ai--wa { background: rgba(37,211,102,.16); color: #4ade80; }
.fh-act--main { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 13px 16px; background: linear-gradient(115deg, #1c4ed8 0%, #2563eb 45%, #10b981 100%); border-color: transparent; }
.fh-act--main:hover { background: linear-gradient(115deg, #1c4ed8 0%, #2563eb 45%, #10b981 100%); filter: brightness(1.08); }
.fh-act--main .fh-ai { width: 38px; height: 38px; background: rgba(255,255,255,.18); color: #fff; }
.fh-act--main small { color: rgba(255,255,255,.85); font-size: .8rem; }
.fh-act--main b { font-size: .98rem; }
.fh-go { margin-left: auto; display: grid; transition: transform .2s; }
.fh-go svg { width: 20px; height: 20px; }
.fh-act--main:hover .fh-go { transform: translateX(4px); }

/* desktop: left column = heading + card, card bottom = last question bottom */
@media (min-width: 992px) {
  #faq .faq-grid, #faq .faq-layout { align-items: stretch !important; }
  #faq .faq-grid > div:first-child, #faq .faq-layout > .faq-visual { display: flex !important; flex-direction: column; align-items: stretch; position: static !important; height: auto !important; }
  #faq .faq-grid > .accordion, #faq .faq-layout > .faq-list { align-self: start; }
  #faq .faq-grid > div:first-child > .fh-card, #faq .faq-visual > .fh-card { margin-top: auto; }
  #faq .faq-grid > div:first-child > :not(.fh-card):last-of-type { margin-bottom: 22px; }
}
/* phones / tablets: heading, questions, then the card */
@media (max-width: 991px) {
  #faq .faq-grid, #faq .faq-layout { display: flex !important; flex-direction: column; align-items: stretch !important; }
  #faq .faq-grid > div:first-child, #faq .faq-layout > .faq-visual { display: contents !important; }
  #faq .faq-grid > .accordion, #faq .faq-layout > .faq-list { order: 5; width: 100%; }
  #faq .fh-card { order: 6; margin-top: 18px; }
}
@media (max-width: 420px) {
  .fh-acts { grid-template-columns: 1fr; }
  .fh-act { flex-direction: row; align-items: center; }
}
@media (min-width: 992px) {
  #faq .faq-visual > h2, #faq .faq-visual > h3 { margin-bottom: 22px; }
}