/* ROS Mortgages — site-wide additions (27 Sep 2026), loaded after ros.css.

   WHITE HEADER ONCE SCROLLED. Sonu: the solid navy bar that pins to the top
   while reading is "out of fashion". At the very top of a page the header is
   unchanged (it sits on the navy hero with the white logo). As soon as the
   page scrolls it becomes a clean white bar with a soft shadow, the SOLID
   BLUE logo block, and navy menu text. The open phone menu is left navy —
   that is a full-screen navy panel, not the bar. */
/* 27 Sep 2026, later: FROSTED GLASS instead of solid white (Sonu asked for
   "pure transparent"; fully clear let page text run behind the logo, so the
   see-through-with-blur version was chosen). */
.hdr.is-stuck:not(.is-open){background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(6,42,99,.08) !important}
.hdr.is-stuck:not(.is-open) .hdr__logo{display:inline-flex; align-items:center;
  background:#004CBE; padding:5px 11px; border-radius:6px}
.hdr.is-stuck:not(.is-open) .hdr__logo img{height:38px}
.hdr.is-stuck:not(.is-open) .nav__top,
.hdr.is-stuck:not(.is-open) .hdr__tel{color:#062A63 !important}
.hdr.is-stuck:not(.is-open) .hdr__tel:hover{color:#004CBE !important}
.hdr.is-stuck:not(.is-open) .burger span,
.hdr.is-stuck:not(.is-open) .burger span::before,
.hdr.is-stuck:not(.is-open) .burger span::after{background:#062A63 !important}

/* PHONE ACTION BAR (27 Sep 2026). Call · WhatsApp · Call me back, always in
   reach of the thumb on phones. It replaces the floating WhatsApp bubble on
   phones only (laptops keep the bubble). Hidden while the phone menu is open;
   the cookie banner (z-index 300) sits above it until a choice is made. */
.pbar{display:none}
@media (max-width:620px){
  .pbar{display:grid; grid-template-columns:1fr 1.15fr 1.3fr; gap:8px; position:fixed; left:0; right:0; bottom:0;
    z-index:120; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 -6px 20px rgba(6,42,99,.12); border-top:1px solid rgba(6,42,99,.08)}
  .pbar__b{display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:0 6px;
    border-radius:12px; font-weight:600; font-size:15px; line-height:1; text-decoration:none; white-space:nowrap;
    color:#062A63; background:#EEF2F9}
  .pbar__b:active{transform:scale(.97)}
  .pbar__b--wa{background:#25D366; color:#fff}
  .pbar__b--cb{background:#F7A800; color:#062A63}
  .wa{display:none !important}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  body:has(.hdr.is-open) .pbar{display:none}
}

/* ONE ROUNDED STYLE (27 Sep 2026). The older sections — "What we arrange",
   "How we work", "Who we are best for", the guides grid and the facts panels —
   take the same soft rounded card look as the tiles, advisers and calculator
   box added the same day. Each keeps its own gold accent. Style only: no text,
   no layout order and no links change. */
.card--box,
.card--link:not(.card--bar):not(.card--box),
.card--bar{border-radius:16px; background:#fff;
  box-shadow:0 1px 2px rgba(6,42,99,.06), 0 8px 22px rgba(6,42,99,.08)}
.card--box{border:1px solid rgba(6,42,99,.06); border-top:3px solid var(--gold)}
.card--link:not(.card--bar):not(.card--box){border:1px solid rgba(6,42,99,.06); border-top:3px solid var(--gold)}
.card--bar{border:1px solid rgba(6,42,99,.06); border-left:4px solid var(--gold); padding:22px 22px 22px 22px}
.card--bar:hover{border-left-width:4px; padding-left:22px; transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(6,42,99,.08), 0 14px 30px rgba(6,42,99,.14)}
.card--bar.card--link:hover{border-left-width:4px; padding-left:22px}
.card--box:hover,.card--link:hover{box-shadow:0 2px 4px rgba(6,42,99,.08), 0 14px 30px rgba(6,42,99,.14)}

/* guides index: separate rounded cards instead of a ruled grid */
.gd{gap:18px; background:none}
.gd__c{border-radius:16px; border:1px solid rgba(6,42,99,.06);
  box-shadow:0 1px 2px rgba(6,42,99,.06), 0 8px 22px rgba(6,42,99,.08)}
.gd__c:hover{background:#fff; box-shadow:0 2px 4px rgba(6,42,99,.08), 0 14px 30px rgba(6,42,99,.14)}

/* facts panels (contact details, key figures) */
.facts{border-radius:16px; box-shadow:0 1px 2px rgba(6,42,99,.06), 0 8px 22px rgba(6,42,99,.08)}

@media (prefers-reduced-motion:reduce){ .card--bar:hover{transform:none} }

/* Fix (27 Sep 2026): the plain top-level "Contact" link has no class, so it
   stayed white on the frosted header once scrolled. */
.hdr.is-stuck:not(.is-open) .nav > li > a{color:#062A63 !important}

/* Trust strip under the hero (27 Sep 2026). Four confirmed facts only:
   Google rating (links to the reviews page), no client fee, appointment
   hours, principal firm. Two-by-two on phones, one row from 700px. */
.tstrip{background:#fff; border-bottom:1px solid rgba(6,42,99,.08)}
.tstrip__row{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; padding-top:14px; padding-bottom:14px}
.tstrip__i{display:flex; align-items:center; gap:8px; color:#33445F; font-size:14px; line-height:1.3; text-decoration:none}
.tstrip__i b{color:#062A63; font-weight:600; white-space:nowrap}
.tstrip__i svg{flex:none; width:18px; height:18px; fill:none; stroke:#F7A800; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.tstrip__stars{color:#F7A800; letter-spacing:1px; font-size:13px; flex:none}
a.tstrip__i:hover span:last-child{text-decoration:underline}
@media (min-width:700px){ .tstrip__row{grid-template-columns:repeat(4,auto); justify-content:center; gap:10px 28px} }
@media (min-width:1000px){ .tstrip__row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; padding-top:16px; padding-bottom:16px} .tstrip__i{font-size:15px} }