/* ============================================================
   Hearthstone Mortgages — mid-page sections
   Trust strip (4), How it works (7), Why use a broker (8),
   Real story (9), Case studies (10), Honest about money (11),
   HNW (12). Appended as each section lands.
   ============================================================ */

/* -------------------- Trust strip (section 4) -------------------- */
.hm-trustbar { background: var(--hm-white); padding: 1.5rem var(--section-padding-x); border-bottom: 1px solid var(--hm-slate-200); }
.hm-trustbar__inner { max-width: var(--container-xl); margin-inline: auto; display: flex; align-items: stretch; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.hm-trustbar__item { position: relative; display: flex; align-items: center; gap: 0.55rem; flex: 1 1 auto; justify-content: center; padding: 0.35rem 0.45rem; border-right: 1px solid var(--hm-slate-200); text-decoration: none; color: inherit; }
.hm-trustbar__item:last-child { border-right: none; }
.hm-trustbar__chip { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hm-blue-50); color: var(--hm-blue-600); flex-shrink: 0; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.hm-trustbar__label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.68rem; color: var(--hm-ink); line-height: 1.2; white-space: nowrap; }
.hm-trustbar__item--link:hover .hm-trustbar__chip { background: var(--hm-blue-600); color: #fff; }
.hm-trustbar__item--link:hover .hm-trustbar__label { color: var(--hm-blue-700); }
.hm-trustbar__item--tip { cursor: help; }
.hm-trustbar__item--link.hm-trustbar__item--tip { cursor: pointer; }
.hm-trustbar__tipdot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--hm-slate-200); color: var(--hm-slate-600); font-family: var(--font-body); font-weight: 700; font-size: 0.6rem; }
/* Tooltip bubble */
.hm-trustbar__item--tip::after { content: attr(data-hm-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 240px; background: var(--hm-blue-950); color: #fff; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.78rem; line-height: 1.45; border-radius: var(--radius-md); padding: 0.65rem 0.85rem; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); z-index: 20; pointer-events: none; }
.hm-trustbar__item--tip::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--hm-blue-950); opacity: 0; visibility: hidden; transition: opacity 150ms var(--ease-out); z-index: 20; }
.hm-trustbar__item--tip:hover::after, .hm-trustbar__item--tip:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hm-trustbar__item--tip:hover::before, .hm-trustbar__item--tip:focus-visible::before { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hm-trustbar__chip, .hm-trustbar__item--tip::after { transition: none; } }

@media (max-width: 760px) {
  .hm-trustbar__item { flex: 1 1 45%; border-right: none; justify-content: flex-start; }
}

/* -------------------- How it works (section 7) -------------------- */
.hm-process__inner { max-width: 1100px; margin-inline: auto; }
.hm-process__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.hm-process__step { background: var(--hm-white); border-radius: var(--radius-xl); padding: 2rem 1.85rem 2.1rem; position: relative; box-shadow: var(--shadow-md); }
.hm-process__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.hm-process__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 1rem; background: var(--hm-gradient-mid); color: #fff; flex-shrink: 0; }
.hm-process__num { font-family: var(--font-heading); font-weight: 900; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; color: var(--hm-blue-100); }
.hm-process__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.15rem; color: var(--hm-ink); margin: 0 0 0.7rem; line-height: 1.15; }
.hm-process__body { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.68; color: var(--hm-slate-600); margin: 0; }
/* Circular arrow connector between cards */
.hm-process__arrow { position: absolute; top: 50%; right: -24px; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--hm-gold-500); color: var(--hm-blue-950); border: 3px solid var(--hm-white); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
@media (max-width: 820px) {
  .hm-process__grid { grid-template-columns: 1fr; gap: 28px; }
  .hm-process__arrow { top: auto; bottom: -26px; right: 50%; transform: translateX(50%) rotate(90deg); }
}

/* -------------------- Why use a broker (section 8) -------------------- */
.hm-why__inner { max-width: 1100px; margin-inline: auto; }
.hm-why__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; margin-bottom: 2.25rem; align-items: stretch; }

/* "Through a bank alone" — muted but legible, not washed out */
.hm-why__direct { background: var(--hm-white); border: 1px solid var(--hm-slate-200); border-radius: var(--radius-xl); padding: 2rem 1.9rem; align-self: center; }
.hm-why__direct-label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--hm-slate-600); margin: 0 0 1.35rem; }
.hm-why__list { display: flex; flex-direction: column; gap: 1rem; }
.hm-why__row { display: flex; align-items: flex-start; gap: 0.7rem; }
.hm-why__cross { flex-shrink: 0; margin-top: 0.05rem; width: 22px; height: 22px; border-radius: 50%; background: var(--hm-slate-200); display: inline-flex; align-items: center; justify-content: center; color: var(--hm-slate-600); }
.hm-why__direct-text { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--hm-slate-700); }

/* "With Hearthstone" — prominent, but spacious and easy to read */
.hm-why__hs { background: var(--hm-gradient-mid); border-radius: var(--radius-xl); padding: clamp(1.85rem,2.6vw,2.5rem); position: relative; overflow: hidden; border-top: 5px solid var(--hm-gold-500); box-shadow: var(--shadow-lg); }
.hm-why__hs-dots { display: none; }
.hm-why__hs > *:not(.hm-why__hs-dots) { position: relative; }
.hm-why__hs-label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--hm-gold-500); margin: 0 0 0.6rem; }
.hm-why__hs-title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.4rem,2.4vw,1.9rem); color: #fff; margin: 0 0 1.5rem; line-height: 1.02; }
.hm-why__hs-grid { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.85rem; }
.hm-why__tick { flex-shrink: 0; margin-top: 0.05rem; width: 26px; height: 26px; border-radius: 50%; background: rgba(243,179,50,0.22); display: inline-flex; align-items: center; justify-content: center; color: var(--hm-gold-500); }
.hm-why__hs-text { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: #fff; }
.hm-why__warn { font-family: var(--font-body); font-size: 0.78rem; color: var(--hm-slate-500); text-align: center; }

@media (max-width: 820px) {
  .hm-why__grid { grid-template-columns: 1fr; }
}

/* -------------------- Real story (section 9) -------------------- */
.hm-story__inner { max-width: 1100px; margin-inline: auto; }
.hm-story__head { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.hm-story__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--hm-h2); color: var(--hm-ink); margin: 0 0 1.25rem; line-height: 1.05; text-wrap: balance; }
.hm-story__lead { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.6; color: var(--hm-slate-600); margin: 0; }
.hm-story__grid { display: grid; grid-template-columns: 1fr 400px; gap: clamp(2rem,4vw,4rem); align-items: center; }
.hm-story__block { margin-bottom: 1.75rem; }
.hm-story__block-heading { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.78rem; color: var(--hm-blue-600); margin: 0 0 0.5rem; }
.hm-story__block-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--hm-slate-700); margin: 0; }
.hm-story__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 2rem; }
/* Branded navy panel (not a plain white card) so the section has impact */
.hm-story__numbers { background: var(--hm-gradient-mid); border-radius: 1.75rem; box-shadow: var(--shadow-lg); border-top: 5px solid var(--hm-gold-500); padding: 2rem 2rem 1.75rem; color: #fff; }
.hm-story__numbers-title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; color: var(--hm-gold-500); margin: 0 0 1.25rem; }
.hm-story__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.hm-story__row:last-child { border-bottom: none; padding-bottom: 0.2rem; }
.hm-story__row-label { font-family: var(--font-body); font-size: 0.92rem; color: rgba(255,255,255,0.72); }
.hm-story__row-val { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
.hm-story__adviser { display: flex; align-items: center; gap: 0.85rem; margin: 0.9rem 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15); }
.hm-story__adviser img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.35); }
.hm-story__adviser-name { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; font-size: 0.88rem; color: #fff; }
.hm-story__adviser-role { font-family: var(--font-body); font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 0.1rem; }
.hm-story__disclaimer { font-family: var(--font-body); font-size: 0.74rem; color: var(--hm-slate-400); margin: 2rem auto 0; line-height: 1.5; text-align: center; max-width: 108ch; text-wrap: balance; }
@media (max-width: 860px) { .hm-story__grid { grid-template-columns: 1fr; } }

/* -------------------- Case studies (section 10) -------------------- */
.hm-cases__inner { max-width: 1200px; margin-inline: auto; }
.hm-cases__lead { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--hm-slate-600); text-align: center; max-width: 62ch; margin: -1.5rem auto 2.75rem; }
.hm-cases__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.hm-case { background: var(--hm-white); border: 1px solid var(--hm-slate-200); border-radius: 1.5rem; box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; }
.hm-case__body { padding: 1.6rem 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.hm-case__tag { align-self: flex-start; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.62rem; border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; background: var(--hm-blue-100); color: var(--hm-blue-700); }
.hm-case--gold .hm-case__tag { background: var(--hm-gold-100); color: var(--hm-gold-800); }
.hm-case--navy .hm-case__tag { background: var(--hm-blue-100); color: var(--hm-blue-800); }
.hm-case__headline { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.2rem; color: var(--hm-ink); margin: 0; line-height: 1.15; }
.hm-case__label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.64rem; margin: 0 0 0.3rem; }
.hm-case__label--muted { color: var(--hm-slate-500); }
.hm-case__label--blue { color: var(--hm-blue-600); }
.hm-case__text { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.6; color: var(--hm-slate-700); margin: 0; }
.hm-case__numbers { background: var(--hm-blue-50); border-top: 1px solid var(--hm-blue-100); padding: 1rem 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.hm-case__num-val { font-family: var(--font-heading); font-weight: 800; font-size: 0.92rem; color: var(--hm-blue-700); letter-spacing: -0.01em; }
.hm-case__num-label { font-family: var(--font-body); font-size: 0.68rem; color: var(--hm-slate-500); text-transform: uppercase; letter-spacing: 0.04em; }
.hm-case__adviser { padding: 0.9rem 1.6rem; display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--hm-slate-200); font-family: var(--font-body); font-size: 0.76rem; color: var(--hm-slate-500); }
.hm-case__adviser strong { font-weight: 600; color: var(--hm-slate-700); }
.hm-case__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hm-gold-500); flex-shrink: 0; }
.hm-case__link { display: block; padding: 0.9rem 1.6rem 1.2rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.68rem; color: var(--hm-blue-700); text-decoration: none; }
.hm-case__link:hover { color: var(--hm-gold-600); }
.hm-cases__warn { font-family: var(--font-body); font-size: 0.74rem; color: var(--hm-slate-400); margin-top: 1.75rem; text-align: center; }

/* -------------------- Honest about money (section 11) -------------------- */
.hm-fees__inner { max-width: 940px; margin-inline: auto; }
.hm-fees__lead { font-family: var(--font-body); font-size: 1.03rem; line-height: 1.72; color: var(--hm-slate-600); text-align: center; max-width: 58ch; margin: -1.5rem auto 2.5rem; }
.hm-fees__table { background: var(--hm-white); border-radius: var(--radius-xl); border: 1px solid var(--hm-slate-200); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 2rem; }
.hm-fees__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 1.75rem; border-bottom: 1px solid var(--hm-slate-200); align-items: center; }
.hm-fees__row:nth-child(even) { background: var(--hm-blue-50); }
.hm-fees__row:last-child { border-bottom: none; }
.hm-fees__sit { font-family: var(--font-body); font-size: 0.9rem; color: var(--hm-slate-700); }
.hm-fees__fee { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.76rem; color: var(--hm-blue-700); background: var(--hm-blue-100); border-radius: var(--radius-pill); padding: 0.3rem 0.85rem; white-space: nowrap; }
.hm-fees__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.hm-fees__card { background: var(--hm-white); border: 1px solid var(--hm-slate-200); border-radius: var(--radius-xl); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: var(--shadow-sm); }
.hm-fees__card-ico { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--hm-blue-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hm-fees__card-title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.88rem; color: var(--hm-ink); margin: 0; }
.hm-fees__card-body { font-family: var(--font-body); font-size: 0.83rem; line-height: 1.6; color: var(--hm-slate-600); margin: 0; }
@media (max-width: 720px) {
  .hm-fees__cards { grid-template-columns: 1fr; }
  .hm-fees__fee { font-size: 0.7rem; }
}

/* -------------------- High net worth (section 12) -------------------- */
.hm-hnw { background: var(--hm-blue-950); position: relative; overflow: hidden; color: #fff; }
.hm-hnw__dots { display: none; }
.hm-hnw__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--hm-gradient-gold); }
.hm-hnw__inner { max-width: 1200px; margin-inline: auto; position: relative; display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: center; }
.hm-hnw__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--hm-gold-500); background: rgba(243,179,50,0.15); border-radius: var(--radius-pill); padding: 0.4rem 1rem; margin-bottom: 1.25rem; }
.hm-hnw__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; font-size: var(--hm-h2); color: #fff; margin: 0 0 1rem; line-height: 0.97; }
.hm-hnw__accent { color: var(--hm-gold-500); }
.hm-hnw__copy { font-family: var(--font-body); font-size: 1rem; line-height: 1.72; color: rgba(255,255,255,0.65); max-width: 52ch; margin: 0 0 1.75rem; }
.hm-hnw__features { list-style: none; margin: 0 0 2.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.hm-hnw__features li { display: flex; gap: 0.7rem; align-items: flex-start; }
.hm-hnw__tick { flex-shrink: 0; margin-top: 0.1rem; width: 22px; height: 22px; border-radius: 50%; background: rgba(243,179,50,0.2); display: inline-flex; align-items: center; justify-content: center; color: var(--hm-gold-500); }
.hm-hnw__features span:last-child { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
.hm-hnw__aside { display: flex; flex-direction: column; gap: 14px; }
.hm-hnw__card { border-radius: var(--radius-xl); overflow: hidden; border: 2px solid rgba(243,179,50,0.3); }
.hm-hnw__photo { width: 100%; height: 400px; object-fit: cover; object-position: center top; display: block; }
.hm-hnw__card-foot { background: rgba(6,34,60,0.9); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hm-hnw__card-name { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; font-size: 0.88rem; color: #fff; }
.hm-hnw__card-role { font-family: var(--font-body); font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 0.1rem; }
.hm-hnw__creds { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.hm-hnw__cred { font-family: var(--font-heading); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--hm-gold-500); color: var(--hm-ink); border-radius: var(--radius-pill); padding: 0.2rem 0.55rem; }
.hm-hnw__stat { background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; }
.hm-hnw__stat-val { font-family: var(--font-heading); font-weight: 900; font-size: 1.35rem; color: var(--hm-gold-500); letter-spacing: -0.02em; flex-shrink: 0; }
.hm-hnw__stat-label { font-family: var(--font-body); font-size: 0.78rem; color: rgba(255,255,255,0.5); }
@media (max-width: 880px) { .hm-hnw__inner { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Honest-money fee footnote */
.hm-fees__note { max-width: 760px; margin: 1.25rem auto 0; font-family: var(--font-body); font-size: 0.82rem; line-height: 1.6; color: var(--hm-slate-500); text-align: center; }

/* "View all case studies" link under the homepage case grid */
.hm-cases__more { text-align: center; margin: 1.75rem 0 0; }

/* --- Home intro: "Local mortgage advice" -------------------------------
   Sits between the trust strip and reviews. Single centred column so the
   opening statement of what the firm is reads as a statement, not a
   marketing block. */
.hm-intro__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hm-intro__bar { display: inline-block; width: 26px; height: 2px; background: var(--hm-gold-500); }
/* Matches the shared .hm-sh__title scale so it sits at the same size as
   every other H2 on the page. */
.hm-intro__title {
  font-family: var(--font-heading); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.025em; font-size: var(--hm-h2); line-height: 1.05;
  color: var(--hm-ink); margin: 0 0 1rem; text-wrap: balance;
}
.hm-intro__lead { font-size: 1.06rem; line-height: 1.65; color: var(--hm-slate-700); margin: 0 0 0.9rem; }
.hm-intro__lead strong { color: var(--hm-blue-900); font-weight: 700; }
.hm-intro__copy { color: var(--hm-slate-600); line-height: 1.7; margin: 0 0 1.5rem; }


.hm-intro__note { font-size: 0.9rem; color: var(--hm-slate-600); margin: 0 0 1.5rem; }
.hm-intro__note a { color: var(--hm-blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hm-intro__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

@media (max-width: 640px) {
  .hm-intro__inner { text-align: left; }
  .hm-intro__cta { justify-content: flex-start; }
  .hm-intro__title { line-height: 1.1; }
}