/* ============================================================
   Hearthstone Mortgages — modal system
   Shared by the booking, calculator and adviser-bio modals.
   Markup contract in main.js: .hm-modal > .hm-modal__overlay +
   .hm-modal__dialog[role=dialog]. .is-open toggles visibility.
   ============================================================ */

.hm-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.hm-modal[hidden] { display: none; }
.hm-modal.is-open { opacity: 1; }
.hm-modal__overlay {
  position: absolute; inset: 0; background: rgba(6,34,60,0.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: none; cursor: pointer;
}
.hm-modal__dialog {
  position: relative; background: var(--hm-white); border-radius: 1.75rem;
  width: 100%; max-width: 520px; max-height: 92vh; overflow: auto;
  box-shadow: 0 32px 80px rgba(6,34,60,0.4);
  transform: translateY(12px) scale(0.99); transition: transform var(--dur-base) var(--ease-out);
}
.hm-modal.is-open .hm-modal__dialog { transform: none; }
.hm-modal__close {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  background: var(--hm-blue-50); border: none; border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--hm-slate-600);
}
.hm-modal__close:hover { background: var(--hm-blue-100); }

@media (prefers-reduced-motion: reduce) {
  .hm-modal, .hm-modal__dialog { transition: none; }
  .hm-modal__dialog { transform: none; }
}

/* ---------------------- Adviser bio modal ---------------------- */
.hm-adviser-modal { max-width: 760px; display: grid; grid-template-columns: minmax(0,260px) 1fr; padding: 0; }
.hm-adviser-modal__photo { background: var(--hm-blue-100); min-height: 280px; }
.hm-adviser-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hm-adviser-modal__content { padding: 2rem 2rem 1.75rem; }
.hm-adviser-modal__name { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.5rem; color: var(--hm-ink); margin: 0 0 0.25rem; line-height: 1.05; }
.hm-adviser-modal__role { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--hm-blue-600); margin: 0 0 0.9rem; }
.hm-adviser-modal__creds { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.1rem; }
.hm-adviser-modal__bio { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.65; color: var(--hm-slate-700); margin: 0 0 0.85rem; }
.hm-adviser-modal__verify { background: var(--hm-blue-50); border: 1px solid var(--hm-blue-100); border-radius: 1rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; }
.hm-adviser-modal__verify-row { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--hm-blue-600); }
.hm-adviser-modal__verify-row svg { margin-top: 0.1rem; flex-shrink: 0; }
.hm-adviser-modal__verify-label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; color: var(--hm-slate-500); }
.hm-adviser-modal__verify-link { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--hm-blue-700); text-decoration: none; }
.hm-adviser-modal__verify-link:hover { text-decoration: underline; }
.hm-adviser-modal__verify-text { font-family: var(--font-body); font-size: 0.86rem; color: var(--hm-slate-700); line-height: 1.5; }
.hm-adviser-modal__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hm-adviser-modal__profile { display: inline-block; margin-top: 0.9rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; color: var(--hm-blue-600); text-decoration: none; }
.hm-adviser-modal__profile:hover { color: var(--hm-blue-800); text-decoration: underline; }

@media (max-width: 620px) {
  .hm-adviser-modal { grid-template-columns: 1fr; }
  .hm-adviser-modal__photo { min-height: 220px; max-height: 280px; }
}

/* ---------------------- Booking modal ---------------------- */
.hm-booking { padding: 2.25rem; }
.hm-booking__sub { font-family: var(--font-body); font-size: 0.84rem; color: var(--hm-slate-600); margin: 0 0 1.1rem; }
.hm-booking__trust { background: var(--hm-blue-50); border: 1px solid var(--hm-blue-100); border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.hm-booking__trust-row { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.7rem; }
.hm-booking__rating { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-body); font-size: 0.9rem; color: var(--hm-ink); }
.hm-booking__stars { display: inline-flex; gap: 1px; color: var(--hm-gold-500); }
.hm-booking__rating-sub { font-family: var(--font-body); font-size: 0.74rem; line-height: 1.25; color: var(--hm-slate-600); display: block; }
.hm-booking__ticks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; border-top: 1px solid var(--hm-blue-100); padding-top: 0.7rem; }
.hm-booking__tick { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; color: var(--hm-slate-700); }
.hm-booking__tick-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--hm-blue-600); color: #fff; }
.hm-booking__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.45rem; color: var(--hm-ink); margin: 0 0 0.3rem; }
.hm-booking__form { display: flex; flex-direction: column; gap: 1rem; }
.hm-booking__foot { text-align: center; border-top: 1px solid var(--hm-blue-100); padding-top: 1rem; }
.hm-booking__foot p { margin: 0 0 0.3rem; font-family: var(--font-body); }
.hm-booking__foot p:first-child { font-size: 0.73rem; color: var(--hm-slate-400); }
.hm-booking__foot p:last-child { font-size: 0.76rem; color: var(--hm-slate-500); margin: 0; }
.hm-booking__foot a { color: var(--hm-blue-600); font-weight: 600; text-decoration: none; }
.hm-booking__success { text-align: center; padding: 2.5rem 1.5rem; }
.hm-booking__success-ico { width: 54px; height: 54px; border-radius: 50%; background: var(--hm-blue-50); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--hm-blue-600); }
.hm-booking__success-body { font-family: var(--font-body); font-size: 0.93rem; line-height: 1.65; color: var(--hm-slate-600); margin: 0; }
.hm-booking__success-body a { color: var(--hm-blue-600); font-weight: 600; }

/* Best-time segmented control */
.hm-segment { display: flex; gap: 0.5rem; }
.hm-segment__btn {
  flex: 1; padding: 0.55rem; font-family: var(--font-heading); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem;
  border: 1.5px solid var(--hm-slate-200); border-radius: var(--radius-md);
  background: var(--hm-white); color: var(--hm-slate-600); cursor: pointer;
  /* Only static props transition — bg/colour snap (var-toggle caveat). */
  transition: border-color 140ms var(--ease-out);
}
.hm-segment__btn.is-active { border-color: var(--hm-blue-600); background: var(--hm-blue-50); color: var(--hm-blue-700); }

/* ---------------------- Calculator modal ---------------------- */
.hm-calc { max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.hm-calc__inputs { padding: 2rem 1.9rem; }
.hm-calc__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.3rem; color: var(--hm-ink); margin: 0 0 0.4rem; line-height: 1.1; }
.hm-calc__sub { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.55; color: var(--hm-slate-600); margin: 0 0 1.4rem; }
.hm-calc__fields { display: flex; flex-direction: column; gap: 1rem; }
.hm-calc__toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-family: var(--font-body); font-size: 0.88rem; color: var(--hm-slate-800); font-weight: 600; }
.hm-calc__toggle input { width: 18px; height: 18px; accent-color: var(--hm-blue-600); }
.hm-calc__note { font-family: var(--font-body); font-size: 0.72rem; line-height: 1.5; color: var(--hm-slate-400); margin: 1.25rem 0 0; }
.hm-calc__fulllink { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--hm-blue-600); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; }
.hm-calc__results { background: var(--hm-gradient-mid); padding: 2rem 1.9rem; position: relative; overflow: hidden; }
.hm-calc__results-inner { position: relative; }
.hm-calc__figure { margin-bottom: 0.9rem; }
.hm-calc__figure.is-big { margin-bottom: 1.25rem; }
.hm-calc__figure-label { font-family: var(--font-body); font-size: 0.74rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.hm-calc__figure-value { font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.01em; color: #fff; font-size: 1.1rem; line-height: 1.05; }
.hm-calc__figure.is-big .hm-calc__figure-value { color: var(--hm-gold-500); font-size: clamp(1.6rem,3vw,2.1rem); }
.hm-calc__capture { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 1.4rem; padding-top: 1.3rem; }
.hm-calc__capture-label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: #fff; display: block; margin-bottom: 0.5rem; }
.hm-calc__capture-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hm-calc__capture-row input { flex: 1 1 160px; border: none; border-radius: var(--radius-pill); padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.9rem; outline: none; min-width: 0; }
.hm-calc__capture-note { font-family: var(--font-body); font-size: 0.68rem; color: rgba(255,255,255,0.55); margin: 0.6rem 0 0; line-height: 1.5; }
.hm-calc__sent-head { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem; color: var(--hm-gold-500); margin: 0 0 0.6rem; }
.hm-calc__sent-body { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 1rem; }
@media (max-width: 720px) {
  .hm-calc { grid-template-columns: 1fr; }
}

/* ---------------------- WhatsApp widget ---------------------- */
.hm-whatsapp__fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 95;
  width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff;
  border: none; box-shadow: 0 12px 32px rgba(37,211,102,0.45); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out);
}
.hm-whatsapp__fab:hover { transform: scale(1.08); }
/* Keep the glyph perfectly round — never let layout squash the SVG. */
.hm-whatsapp__fab svg { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.hm-whatsapp__head-ico svg { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.hm-whatsapp__send svg { width: 18px; height: 18px; flex-shrink: 0; }
.hm-whatsapp__panel { position: fixed; inset: 0; z-index: 96; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1.5rem; }
.hm-whatsapp__panel[hidden] { display: none; }
.hm-whatsapp__overlay { position: absolute; inset: 0; background: rgba(6,34,60,0.5); backdrop-filter: blur(4px); }
.hm-whatsapp__card { position: relative; background: var(--hm-white); border-radius: 1.5rem; width: 100%; max-width: 380px; box-shadow: 0 32px 80px rgba(6,34,60,0.4); overflow: hidden; margin-bottom: 5.5rem; }
.hm-whatsapp__head { background: #075E54; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 0.85rem; }
.hm-whatsapp__head-ico { width: 44px; height: 44px; border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-whatsapp__head-text { flex: 1; }
.hm-whatsapp__head-title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.95rem; color: #fff; margin: 0; }
.hm-whatsapp__head-sub { font-family: var(--font-body); font-size: 0.76rem; color: rgba(255,255,255,0.8); margin: 0.15rem 0 0; }
.hm-whatsapp__head-close { background: rgba(255,255,255,0.15); border: none; border-radius: 50%; width: 30px; height: 30px; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-whatsapp__body { padding: 1.35rem 1.5rem 1.5rem; }
.hm-whatsapp__intro { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.6; color: var(--hm-slate-600); margin: 0 0 0.9rem; }
.hm-whatsapp__presets { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.hm-whatsapp__preset { font-family: var(--font-body); font-size: 0.74rem; text-align: left; line-height: 1.4; color: var(--hm-blue-700); background: var(--hm-blue-50); border: 1px solid var(--hm-blue-100); border-radius: 0.75rem; padding: 0.5rem 0.7rem; cursor: pointer; transition: border-color 140ms var(--ease-out); }
.hm-whatsapp__preset.is-active { color: #fff; background: var(--hm-blue-600); border-color: var(--hm-blue-600); }
.hm-whatsapp__textarea { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; color: var(--hm-ink); background: var(--hm-warm-white); border: 1px solid var(--hm-slate-200); border-radius: 0.85rem; padding: 0.75rem 0.9rem; resize: vertical; margin-bottom: 0.9rem; }
.hm-whatsapp__send { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; color: #fff; background: #25D366; border: none; border-radius: var(--radius-pill); padding: 0.95rem 1.4rem; cursor: pointer; }

/* ---------------------- Sticky bottom pill ---------------------- */
.hm-sticky {
  position: fixed; left: 50%; bottom: -120px; transform: translateX(-50%);
  z-index: 90; width: min(500px, calc(100vw - 2rem)); pointer-events: none;
  transition: bottom 300ms var(--ease-out);
}
.hm-sticky.is-visible { bottom: 1.25rem; pointer-events: auto; }
.hm-sticky__pill { display: flex; align-items: center; gap: 0.5rem; background: var(--hm-white); border-radius: var(--radius-pill); box-shadow: 0 16px 44px rgba(6,34,60,0.28); padding: 0.4rem 0.4rem 0.4rem 0.5rem; border: 1px solid var(--hm-slate-200); }
.hm-sticky__toggle { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--hm-ink); background: none; border: none; cursor: pointer; padding: 0.7rem 1.1rem; border-radius: var(--radius-pill); }
.hm-sticky__cta { flex: 1 1 auto; padding: 0.85rem 1.4rem; box-shadow: none; }
.hm-sticky__pop { position: relative; background: var(--hm-white); border-radius: 1.5rem; box-shadow: 0 28px 70px rgba(6,34,60,0.34); border: 1px solid var(--hm-slate-200); padding: 1.5rem; margin-bottom: 0.75rem; max-height: 70vh; overflow: auto; display: none; }
.hm-sticky.pop-open .hm-sticky__pop { display: block; }
.hm-sticky__pop-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--hm-blue-50); color: var(--hm-blue-700); transition: background-color 150ms var(--ease-out); }
.hm-sticky__pop-close:hover { background: var(--hm-blue-100); }
.hm-sticky__pop-title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; color: var(--hm-ink); margin: 0 0 1rem; }
.hm-sticky__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.hm-sticky__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border: 1px solid var(--hm-slate-200); border-radius: 0.85rem; background: var(--hm-white); cursor: pointer; text-align: left; text-decoration: none; transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.hm-sticky__link:hover { background: var(--hm-blue-50); border-color: var(--hm-blue-300); }
.hm-sticky__link-ico { color: var(--hm-blue-600); display: inline-flex; }
.hm-sticky__link span:last-child { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.78rem; color: var(--hm-ink); }
.hm-sticky__call { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.85rem; padding: 0.95rem; border-radius: 0.85rem; background: var(--hm-blue-50); color: var(--hm-blue-700); text-decoration: none; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .hm-sticky, .hm-whatsapp__fab { transition: none; } }
@media (max-width: 560px) {
  .hm-sticky__toggle span, .hm-sticky__toggle { font-size: 0.72rem; padding: 0.7rem 0.8rem; }
  .hm-sticky__links { grid-template-columns: 1fr; }
}

/* -------------------- Cookie consent banner -------------------- */
.hm-cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1200; background: var(--hm-white); border: 1px solid var(--hm-slate-200); border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(6,34,60,0.28); }
.hm-cookie[hidden] { display: none; }
.hm-cookie__inner { max-width: var(--container-lg); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 1.4rem; }
.hm-cookie__title { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; color: var(--hm-ink); margin: 0 0 0.3rem; }
.hm-cookie__body { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.55; color: var(--hm-slate-600); margin: 0; }
.hm-cookie__body a { color: var(--hm-blue-700); }
.hm-cookie__actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
@media (max-width: 720px) {
  .hm-cookie__inner { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .hm-cookie__actions { justify-content: stretch; }
  .hm-cookie__actions .hm-btn { flex: 1; justify-content: center; }
}

/* Trust row: let the avatar stack and rating wrap instead of crowding (7 advisers) */
.hm-booking__trust-row { flex-wrap: wrap; }
.hm-booking__trust-row > .hm-avatars { flex-shrink: 0; }
.hm-booking__trust-row > div { min-width: 0; }