/* ROS Mortgages — site stylesheet
   Brand: blue #004CBE · ink #062A63 · gold #F7A800 · ivory #F7F5F0 · Poppins */

:root{
  /* Brand colours are fixed. Opt out of Android Chrome "Auto Dark Theme",
     which re-tints gold and blue into muddy reds/browns on phones. */
  color-scheme: only light;
  --ink:#062A63; --blue:#004CBE; --blue-lt:#2E7BFF; --hero:#00256A;
  --gold:#F7A800; --gold-hi:#FFBE33; --gold-dk:#A66F00; --ivory:#F7F5F0;
  --grey:#6B7A90; --grey-l:#8A97AB; --grey-d:#57677E; --gold-txt:#8A5C00; --line:#E1E6EE; --pale:#D4E2FA;
  --pad: clamp(20px, 5vw, 88px);
  --sec: clamp(52px, 7vw, 92px);
  --max: 1264px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  /* A two-finger sideways swipe on a trackpad moves between pages. Without
     this the browser also takes it as "go back", and you get both. */
  overscroll-behavior-x:contain;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:300; line-height:1.6; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-weight:400; margin:0; line-height:1.18; letter-spacing:-0.4px}
p{margin:0; text-wrap:pretty}
a{color:var(--blue); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--blue-lt)}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.sec--ivory{background:var(--ivory)}
.dots{background-image:radial-gradient(circle,rgba(6,42,99,.07) 1px,transparent 1px); background-size:26px 26px}

.label{font-size:11px; letter-spacing:2.6px; text-transform:uppercase; font-weight:600}
.rule{width:72px; height:2px; background:var(--gold)}
.h1{font-size:clamp(32px,5.2vw,62px); line-height:1.12; letter-spacing:-.8px}
.h2{font-size:clamp(26px,3.4vw,40px)}
.h3{font-size:clamp(19px,2vw,23px); font-weight:400}
.lead{font-size:clamp(16px,1.5vw,20px); line-height:1.65; color:var(--grey)}
.muted{color:var(--grey)}
.small{font-size:15px; line-height:1.8; color:var(--grey)}
.fine{font-size:14px; line-height:1.75; color:var(--grey-l)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; font-size:16px; font-weight:600; text-align:center;
  transition:background .2s ease, color .2s ease, transform .16s ease, box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold); color:var(--ink); transition:background .2s}
.btn--gold:hover{background:var(--gold-hi); color:var(--ink); box-shadow:0 10px 26px rgba(247,168,0,.32)}
.btn--ghost{border:1px solid rgba(255,255,255,.75); background:rgba(2,22,62,.45); color:#fff; font-weight:300}
.btn--ghost:hover{color:#fff; background:rgba(2,22,62,.65)}
.btn--out{border:1px solid var(--blue); color:var(--blue); font-weight:400}
.btn--out:hover{background:var(--blue); color:#fff}

/* ---------- header ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:100; background:transparent;
  transition:background .28s ease, box-shadow .28s ease, padding .25s ease}
.hdr.is-stuck,.hdr.is-open{background:var(--ink)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:32px;
  max-width:var(--max); margin:0 auto; padding:18px var(--pad)}
/* 52px, not 44. The compact lockup drops the strapline, and the height that
   freed goes into the two lines that are left — MORTGAGES was rendering at
   7.3px and is the line that carries the firm's name. */
.hdr__logo img{height:52px; width:auto}
.nav{display:flex; align-items:center; gap:clamp(16px,2vw,30px)}
.nav a,.nav>li>span{color:#fff; font-size:15px; font-weight:400}
/* 16 Sep 2026: "Guides & tools" — the one two-word nav label — was wrapping
   onto a second line just above the 1040px burger breakpoint, where the row
   is tight but not yet tight enough to switch to the menu. Nothing here
   stopped ordinary text wrap; nowrap keeps every label on one line, same as
   a burger menu takes over anyway a few pixels narrower. */
.nav>li>a,.nav__top{white-space:nowrap}
.nav>li>a,.nav__top{position:relative; transition:color .18s ease}
.nav>li>a::after,.nav__top::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.nav>li>a:hover::after,.nav__item:hover .nav__top::after{transform:scaleX(1)}
.nav>li>a:hover,.nav__item:hover .nav__top{color:#fff}
.nav__item{position:relative}
.nav__top{display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:15px;
  padding-bottom:3px; background:none; border:0}
.nav__item:hover .nav__top,.nav__top[aria-expanded="true"]{color:var(--gold-hi)}
.nav__item.is-here>.nav__top,.nav a.is-here{font-weight:500; border-bottom:2px solid var(--gold); padding-bottom:3px}
.nav__item.is-here>.nav__top::after,.nav a.is-here::after{display:none}
.nav__drop{position:absolute; top:100%; left:-26px; padding-top:22px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:opacity .17s,transform .17s,visibility .17s; z-index:120}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1; visibility:visible; transform:none}
.nav__card{background:#fff; border-top:3px solid var(--gold); box-shadow:0 20px 48px rgba(6,42,99,.24);
  padding:10px 0; min-width:336px}
.nav__link{display:block; padding:12px 26px; border-left:3px solid transparent;
  transition:background .16s ease, border-color .16s ease, padding-left .16s ease}
.nav__link:hover{background:var(--ivory); border-left-color:var(--gold); padding-left:29px}
.nav__link b{display:block; color:var(--ink); font-size:15px; font-weight:500}
.nav__link span{display:block; color:var(--grey-l); font-size:13px; margin-top:3px; line-height:1.5}
.hdr__tel{color:#fff; font-size:15px; font-weight:500; white-space:nowrap; transition:color .18s ease}
.hdr__tel:hover{color:var(--gold-hi)}
.hdr__logo img{transition:opacity .18s ease}
.hdr__logo:hover img{opacity:.82}
.hdr__cta{padding:13px 24px; font-size:15px}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center}
.burger span{display:block; width:24px; height:2px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:24px; height:2px; background:#fff}
.burger span::before{top:-7px} .burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ---------- mobile menu ---------- */
.mnav{display:none; background:var(--ink); border-top:1px solid rgba(255,255,255,.14);
  max-height:calc(100vh - 78px); overflow-y:auto}
.mnav.is-open{display:block}
.mnav__in{padding:8px var(--pad) 28px}
.mnav a,.mnav button{display:block; width:100%; text-align:left; color:#fff; font-size:17px; padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.mnav__par{display:flex; align-items:center; justify-content:space-between}
.mnav__par svg{transition:transform .2s}
.mnav__par[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__sub{display:none; padding-left:16px; border-left:2px solid var(--gold); margin:4px 0 10px}
.mnav__sub.is-open{display:block}
.mnav__sub a{font-size:15.5px; color:var(--pale); padding:11px 0; border-bottom:0}
.mnav__cta{margin-top:22px; display:grid; gap:12px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--hero)}
/* ---------- THE SPLIT HERO ----------
   Words on solid ink, photograph clean beside them. This replaced the veil on
   16 Sep 2026 — see hero() in build.py for why.

   The one structural idea: .hero__in is the GRID, and it is the same element
   that already capped the content at --max and centred it. So the words stay
   exactly where every other section's words start, and the photograph is the
   second cell. Nothing is absolutely positioned across the whole hero any
   more, which is what made the old one so hard to reason about.

   The photograph BLEEDS to the right edge of the screen while the words keep
   the page's normal gutter. A picture that stopped at --max would leave a
   strip of ink beyond it on a wide monitor and read as a mistake; the words
   lining up with the rest of the page is what makes the split look intended
   rather than like a broken two-column layout. */
.hero__img{width:100%; height:100%; object-fit:cover;
  /* --fx / --fy come from FOCAL and FOCAL_Y in build.py. They matter MORE
     here, not less: the photograph now fills a tall column instead of a wide
     band, so the browser crops it sideways hard and these decide what
     survives. What they no longer have anything to do with is legibility. */
  object-position:var(--fx,50%) var(--fy,26%); display:block}
.hero__side{position:relative}
.hero__side picture{display:block; position:absolute; inset:0}

/* a soft scrim under the floating header so the logo and nav always read */
.hero::before{content:''; position:absolute; top:0; left:0; right:0; height:170px; z-index:1;
  background-image:linear-gradient(180deg,rgba(0,26,74,.58) 0%,rgba(0,26,74,.22) 58%,transparent 100%);
  pointer-events:none}
.hero__in{position:relative; z-index:2; max-width:var(--max); margin:0 auto;
  padding:clamp(136px,13vw,196px) var(--pad) clamp(58px,8vw,106px)}
.hero__body{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px); max-width:720px}
/* The veil is lighter than it was, so the type carries a little shadow of its
   own. Invisible against the dark left-hand side; it earns its keep where a
   line runs on towards the brighter part of the picture. */
.hero h1{color:#fff; text-shadow:0 1px 2px rgba(0,18,52,.42), 0 2px 30px rgba(0,18,52,.55)}
/* 600px rather than 640: the last words of a long line were reaching into the
   part of the frame the veil has let go, and a shorter measure reads better
   anyway. The heading keeps the full 720px — it is large enough to carry it. */
.hero p{color:var(--pale); font-size:clamp(16px,1.6vw,20px); line-height:1.65; max-width:600px;
  text-shadow:0 1px 2px rgba(0,18,52,.5), 0 2px 22px rgba(0,18,52,.6)}
.hero .label{text-shadow:0 1px 3px rgba(0,18,52,.5)}
/* A typographic hero has no photograph under it, so it needs none of that. */
.hero--flat h1,.hero--flat p,.hero--flat .label{text-shadow:none}
.hero__acts{display:flex; flex-wrap:wrap; gap:16px; padding-top:6px}
.hero__marks{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding-top:14px;
  color:#fff; font-size:15px}
.hero__marks .sep{color:rgba(255,255,255,.35)}

/* ---------- the call-back card in the hero ----------
   One card in the document at every width; only its position changes. The
   default here is the STACKED arrangement, which is what tablets and phones
   get, and the two-column version is switched on above 1040px further down
   this file. Written that way round deliberately: the stacked form is the one
   that has to work on the smallest screen, so it is the one that is not
   conditional on a media query being understood.

   The card is opaque, so nothing inside it is sitting on the photograph and
   none of the hero's contrast rules apply to it. That is the point of making
   it a card rather than fields floating on the picture — white type in a text
   field over a moving photograph is unreadable and unfixable. */
.hero__card{background:#fff; border-radius:4px; padding:clamp(22px,2.2vw,30px);
  box-shadow:0 18px 50px rgba(0,18,52,.30), 0 2px 8px rgba(0,18,52,.18);
  border-top:3px solid var(--gold); margin-top:clamp(30px,4vw,44px); max-width:460px}
/* EVERY paragraph in the card, reset in ONE rule, and the selector is
   `.hero .hero__card p` deliberately.

   `.hero p` further up this file sets pale-blue type with a double
   text-shadow. That is right for white words lying on a photograph, and it was
   landing on the card as well — a class plus an element (0,1,1) beats a class
   on its own (0,1,0), so `.hero__card-p` lost and the card's own text rendered
   pale blue with a glow, on white, unreadable. Two classes plus the element
   settles it outright instead of relying on which rule happens to come last. */
.hero .hero__card p{color:var(--grey); text-shadow:none; max-width:none;
  font-size:14.5px; line-height:1.6}
.hero__card-h{font-size:clamp(20px,2vw,23px); line-height:1.25; color:var(--ink);
  font-weight:500; margin:0}
.hero .hero__card .hero__card-p{margin:7px 0 0}
.hero__card .form{gap:11px; margin-top:17px}
.hero__card .form input,.hero__card .form select{padding:10px 13px; font-size:15.5px}
.hero__card .form label{font-size:11.5px}
.hero__card .form .field{gap:5px}
.hero .hero__card .hero__card-fine{font-size:12px; line-height:1.55;
  color:var(--grey-l); margin:2px 0 0}
.hero__card-fine a{color:var(--blue); text-decoration:underline}
.btn--full{width:100%; justify-content:center}

/* Under 620px the optional email is dropped. It is the field nobody completes
   on a phone, it is optional, and the contact page asks for it properly for
   anyone who wants to give it. A three-field card is answerable at a bus stop.

   `.hero__card .form .field--wide` and not `.hero__card .field--wide`: the
   latter is (0,2,0), exactly the same weight as `.form .field{display:grid}`
   further down this file, which therefore won on document order and left the
   field visible on every phone. Three classes settles it. Specificity ties are
   decided by position, and position is not something to depend on.

   It is HIDDEN, not removed, so it is still posted — empty. The validation in
   ros.js only checks an email that has something in it, so a field nobody can
   see can never block a submit. */
@media (max-width:620px){
  .hero__card{max-width:none; margin-top:26px}
  .hero__card .form .field--wide{display:none}
  /* The gold button says "Arrange a conversation" and the card directly under
     it does exactly that. On a laptop they sit side by side and read as two
     ways in; stacked on a phone they read as the same offer twice, and cost a
     screen of height before the form. Keep the one the card cannot replace —
     the call. */
  .hero--form .hero__acts .btn--gold{display:none}
}
.hero__marks .star{display:inline-flex; align-items:center; gap:8px}

/* ---------- grids ---------- */
.grid{display:grid; gap:clamp(28px,3.6vw,56px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--2u{grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,80px)}
.sechead{display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,46px)}
.card{display:flex; flex-direction:column; gap:11px; transition:transform .22s ease}

/* a card that leads somewhere behaves like a button: whole tile clickable, visible on hover */
.card--link{position:relative; cursor:pointer;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease}
/* plain cards become boxed tiles; bar and box cards keep the look they already have.
   Gold top border is always on, not just on hover (16 Sep 2026, Sonu: the
   Mortgages/Protection/Insurance cards read as plain text and were easy to
   scroll past) — the gold line now marks these out as tiles at rest. */
.card--link:not(.card--bar):not(.card--box){padding:26px 26px 28px; background:#fff;
  border:1px solid var(--line); border-top:3px solid var(--gold)}
.card--link:hover{box-shadow:0 18px 40px rgba(6,42,99,.13); transform:translateY(-4px)}
.card--bar.card--link:hover{border-left-width:5px; padding-left:25px; box-shadow:none;
  transform:translateY(-2px)}
.card--link:focus-within{border-top-color:var(--gold); box-shadow:0 0 0 3px rgba(0,76,190,.28)}
.card--link:active{transform:translateY(-1px)}
.card--link .card__go{margin-top:auto}
.sec--ivory .card--link{background:#fff}
.card__go{display:inline-flex; align-items:center; gap:9px;
  color:var(--blue); font-size:15px; font-weight:500; padding-top:6px;
  transition:color .18s ease, gap .18s ease}
.card__go svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.card--link:hover .card__go{color:var(--blue-lt)}
.card--link:hover .card__go svg{transform:translateX(5px)}
.card--link:hover .h3{color:var(--blue)}
.card--link .h3{transition:color .2s ease}
/* the link stretches over the whole tile, so anywhere on the card is clickable */
.card--link .card__go::after{content:''; position:absolute; inset:0; z-index:1}
.card--bar{border-left:2px solid var(--gold); padding-left:22px; transition:border-left-width .22s ease,padding-left .22s ease}
.card--bar:hover{border-left-width:5px; padding-left:25px}
.card--line{border-left:2px solid var(--line); padding-left:22px; transition:border-color .22s ease}
.card--line:hover{border-color:var(--gold)}
.card--box{background:#fff; padding:28px 28px 32px;
  transition:transform .22s ease, box-shadow .22s ease}
.card--box:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(6,42,99,.12)}
.card a{transition:color .18s ease}
.card:hover .num{color:var(--gold-hi)}
.num{transition:color .22s ease}
.num{font-size:clamp(26px,3vw,34px); font-weight:300; color:var(--gold); line-height:1}

/* ---------- facts panel ---------- */
.facts{background:#fff; padding:8px 30px 14px}
.facts .row{display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line); font-size:16px}
.facts .row:last-child{border-bottom:0}
.facts .row span:last-child{color:var(--grey); text-align:right}

/* ---------- quotes ---------- */
.quote{display:flex; flex-direction:column; gap:14px; background:#fff; padding:32px 30px}
.quote__mark{font-size:44px; line-height:.6; color:var(--gold)}
.quote p{font-size:17px; line-height:1.8}
.quote cite{font-style:normal; font-size:14px; color:var(--grey-l)}

/* ---------- forms ---------- */
.form{display:grid; gap:16px}
.form label{font-size:13px; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color:var(--grey)}
.form input,.form select,.form textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:0; padding:14px 16px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.form textarea{min-height:96px; resize:vertical}
.form .field{display:grid; gap:7px}
.form .pair{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form__acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:4px}


/* ---------- form states ---------- */
.hp{position:absolute!important; left:-9999px!important; width:1px!important;
  height:1px!important; opacity:0!important; pointer-events:none}
.opt{font-weight:400; text-transform:none; letter-spacing:0; color:var(--grey-l); font-size:12px}
.err{display:none; color:#B3261E; font-size:13.5px; line-height:1.5}
.field.is-bad .err{display:block}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#B3261E}
.field.is-bad input:focus{outline-color:#B3261E}
.form__note{padding:14px 18px; font-size:15px; line-height:1.65; border-left:3px solid var(--gold);
  background:var(--ivory)}
.form__note[hidden]{display:none}
.form__note.is-bad{border-left-color:#B3261E; background:#FCF1F0; color:#7A1C16}
.form__note.is-good{border-left-color:#1E7B45; background:#F0F8F3; color:#14532D}
.btn.is-busy{opacity:.75; pointer-events:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:#fff}
.ftr__in{max-width:var(--max); margin:0 auto; padding:clamp(48px,6vw,76px) var(--pad) 34px}
.ftr__cols{display:grid; grid-template-columns:1.1fr 1fr 1fr 1.4fr; gap:clamp(28px,3.4vw,56px)}
.ftr h2{font-size:11px; letter-spacing:2.6px; text-transform:uppercase; font-weight:600; color:var(--gold); margin-bottom:16px}
.ftr li{margin-bottom:11px}
.ftr a{color:#D8E2F4; font-size:14.5px; transition:color .18s ease, padding-left .18s ease}
.ftr li a:hover{color:var(--gold-hi); padding-left:5px}
.ftr a:hover{color:var(--gold-hi)}
.ftr .co{color:#9FB6DC; font-size:14px; line-height:1.75}
.ftr .co strong{display:block; color:#fff; font-weight:500; margin-bottom:6px}
.ftr__legal{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16)}
.ftr__reg{max-width:var(--max); margin:0 auto; padding:0 var(--pad) 40px}
.ftr__reg p{padding-right:96px}
.warn{padding-right:96px}
.ftr__reg p{color:#9FB6DC; font-size:13px; line-height:1.8; max-width:1000px}
.ftr__reg p+p{margin-top:10px}

/* ---------- WhatsApp — small, fixed, always there ---------- */
.host{position:relative}
.wa{position:fixed; right:clamp(16px,2.2vw,28px); bottom:clamp(16px,2.2vw,28px); z-index:150;
  display:flex; align-items:center; gap:12px}
.wa__label{background:#fff; color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap;
  padding:9px 15px; box-shadow:0 8px 24px rgba(6,42,99,.18); border-left:3px solid var(--gold);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease}
.wa:hover .wa__label{opacity:1; transform:none}
.wa__btn{position:relative; display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%; background:var(--gold); color:var(--ink);
  box-shadow:0 10px 28px rgba(6,42,99,.32);
  transition:background .2s ease, transform .18s ease, box-shadow .2s ease}
.wa__btn:hover{background:var(--gold-hi); color:var(--ink); transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(6,42,99,.4)}
.wa__btn::before{content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--gold); animation:wa-pulse 2.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes wa-pulse{
  0%{transform:scale(1); opacity:.85}
  70%{transform:scale(1.55); opacity:0}
  100%{transform:scale(1.55); opacity:0}
}


/* ---------- movement: entrance and scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(20px);
  transition:opacity .66s cubic-bezier(.2,.7,.3,1), transform .66s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}

@keyframes rise{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
@keyframes draw{from{width:0} to{width:72px}}
.hero .label{animation:rise .85s cubic-bezier(.2,.7,.3,1) both .08s}
.hero h1{animation:rise .85s cubic-bezier(.2,.7,.3,1) both .2s}
.hero .rule{animation:draw .85s cubic-bezier(.2,.7,.3,1) both .5s}
.hero p{animation:rise .85s cubic-bezier(.2,.7,.3,1) both .32s}
.hero__acts{animation:rise .85s cubic-bezier(.2,.7,.3,1) both .44s}
.hero__marks{animation:rise .85s cubic-bezier(.2,.7,.3,1) both .56s}
.hero__img{animation:zoom 12s ease-out both}
@keyframes zoom{from{transform:scale(1.06)} to{transform:none}}
/* The phone's version of the same idea, with enough travel to be felt on a
   small screen. `translate` is left free for the scroll drift in ros.js —
   it is a separate property from `transform`, so the two do not fight. */
@keyframes pull{from{transform:scale(1.13)} to{transform:none}}

/* ---------- the living hero ----------
   The home page instead of a stock video. `zoom` above is an ARRIVAL: it
   settles in twelve seconds and then the picture is dead still for as long as
   anyone looks at it, which is what made the page feel pasted on.

   So hand over to a drift that never stops. The handover is seamless because
   drift's 0% frame is `scale(1) translate3d(0,0,0)` — numerically identical to
   where `zoom` finishes — and it starts at exactly the delay zoom ends. It is
   seamless again at the loop point because 100% repeats 0%, so `infinite`
   never jumps.

   SIXTY SECONDS is the number that matters. Half a cycle is thirty seconds of
   travel for 6% of scale: about a fifth of one percent per second, well under
   what the eye reads as movement in peripheral vision while someone is reading
   the headline. Any faster and it becomes a pulse — the thing that makes a
   slideshow feel cheap. The drift carries a little sideways travel as well as
   scale, because pure scale reads as breathing and a scale-plus-pan reads as a
   camera.

   It stays on the compositor (transform only, never width/height/position), so
   it costs no layout and no repaint. ros.js PAUSES it once the hero leaves the
   viewport rather than removing the class: removing it would restart the whole
   shorthand on the way back, replaying the twelve-second arrival and snapping
   the picture to 1.06 in front of someone who had simply scrolled up. Pausing
   holds the frame and resumes from it. And the global prefers-reduced-motion
   rule near the end of this file
   collapses every animation duration to nothing, which parks this one at its
   0% frame — the untouched photograph. Nothing extra is needed for that. */
/* ---------- the film ----------
   Sits exactly where the photograph sits, in front of it, and takes the SAME
   --fx/--fy: object-position governs a <video> just as it governs an <img>, so
   the focal tables reach the film and there is nothing to keep in step by hand.

   It starts invisible and fades up over a second and a half once the browser
   says it can play through. That matters more than it looks: the photograph is
   already painted and already legible, so there is never a black rectangle, a
   flash, or a moment where the headline has nothing behind it. If the film
   never arrives — slow line, blocked autoplay, a phone in low power mode — the
   page simply stays as it is, which is a page that was finished before anyone
   thought about film.

   It is inert: no audio track in the file at all, aria-hidden and tabindex -1
   so it is not an object anyone can land on, and no controls. */
.hero__vid{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--fx,50%) var(--fy,26%);
  opacity:0; transition:opacity 1.5s ease; pointer-events:none}
.hero__vid.is-on{opacity:1}
.hero--live.is-live .hero__img{
  animation:zoom 12s ease-out both, drift 60s ease-in-out 12s infinite;
  will-change:transform}
.hero--live.is-paused .hero__img{animation-play-state:paused}
@keyframes drift{
  0%  {transform:scale(1)    translate3d(0,0,0)}
  50% {transform:scale(1.06) translate3d(-1.2%,-0.8%,0)}
  100%{transform:scale(1)    translate3d(0,0,0)}}

/* header settles once you scroll */
.hdr.is-stuck{box-shadow:0 6px 24px rgba(6,42,99,.28)}
/* The header floats above the page, so anything an in-page link jumps to has to
   stop short of it — otherwise a glossary term lands underneath the nav bar. */
[id]{scroll-margin-top:104px}
@media (max-width:1040px){ [id]{scroll-margin-top:90px} }
.hdr.is-stuck .hdr__in{padding-block:12px}
.hdr__in{transition:padding-block .25s ease}
.hdr.is-stuck .hdr__logo img{height:44px}
.hdr__logo img{transition:height .25s ease, opacity .18s ease}

/* ---------- map and directions ---------- */
.map{position:relative; width:100%; aspect-ratio:16/10; background:#EFEDE6;
  border:1px solid var(--line); overflow:hidden}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2}
/* our own street-grid pattern, so the resting state looks deliberate rather than empty */
.map__grid{position:absolute; inset:0; background:#EDEAE1;
  background-image:
    repeating-linear-gradient(90deg, rgba(6,42,99,.13) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(0deg,  rgba(6,42,99,.13) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(0deg,  rgba(6,42,99,.22) 0 5px, transparent 5px 174px),
    repeating-linear-gradient(64deg,  rgba(6,42,99,.20) 0 6px, transparent 6px 240px),
    radial-gradient(circle at 20% 76%, rgba(0,76,190,.16) 0 54px, transparent 55px),
    radial-gradient(circle at 78% 22%, rgba(0,76,190,.10) 0 72px, transparent 73px)}
.map__panel{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:24px; gap:2px;
  background:radial-gradient(ellipse 62% 70% at center, rgba(247,245,240,.96) 0 42%, rgba(247,245,240,.55) 100%)}
.map__pin{display:block; margin-bottom:10px; animation:pindrop .7s cubic-bezier(.2,.9,.3,1) both}
@keyframes pindrop{from{transform:translateY(-14px); opacity:0} to{transform:none; opacity:1}}
.map.is-live .map__panel,.map.is-live .map__grid{display:none}
.dir{display:grid; gap:18px}
.dir__row{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start}
.dir__ico{width:44px; height:44px; background:var(--ivory); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:background .2s ease, border-color .2s ease}
.dir__row:hover .dir__ico{background:#fff; border-color:var(--gold)}
@media (max-width:620px){ .map{aspect-ratio:4/3} }

/* ---------- cookie banner ---------- */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:300; background:#fff;
  box-shadow:0 -8px 34px rgba(6,42,99,.2); border-top:3px solid var(--gold)}
.cookie[hidden]{display:none}
.cookie__in{max-width:var(--max); margin:0 auto; padding:22px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px}
.cookie__acts{display:flex; flex-wrap:wrap; gap:12px}
.cookie .btn{padding:13px 24px; font-size:15px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:400; background:var(--gold); color:var(--ink);
  padding:16px 24px; font-weight:500}

/* ---------- keyboard focus ----------
   Somebody navigating by keyboard has to be able to see where they are. This
   ring appears only for keyboard focus (:focus-visible), so a mouse click on a
   button does not leave an outline behind it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:2px}
/* On the ink and brand-blue grounds the gold ring can sit close to the
   background, so those get a white halo behind it. */
.hdr a:focus-visible,.hdr button:focus-visible,.hero a:focus-visible,
.ftr a:focus-visible,.mnav a:focus-visible,.mnav button:focus-visible,
.totop:focus-visible{outline-color:#fff; box-shadow:0 0 0 6px rgba(247,168,0,.55)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- glossary ---------- */
.gl__search{position:relative; display:flex; align-items:center; max-width:560px;
  border:1px solid var(--line); background:#fff; padding:0 16px;
  transition:border-color .2s ease, box-shadow .2s ease}
.gl__search:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,76,190,.09)}
.gl__search svg{flex:none}
.gl__search input{flex:1; border:0; outline:0; padding:16px 12px; font:inherit; font-size:16px;
  color:var(--ink); background:transparent; min-width:0}
.gl__search input::-webkit-search-cancel-button{display:none}
.gl__search button{border:0; background:transparent; color:var(--grey); font-size:24px;
  line-height:1; cursor:pointer; padding:4px 6px}
.gl__search button:hover{color:var(--ink)}
.gl__count{margin-top:12px; font-size:14px; color:var(--grey); min-height:21px}
.az{display:flex; flex-wrap:wrap; gap:4px; margin:22px 0 8px; padding-bottom:22px;
  border-bottom:1px solid var(--line)}
.az__l{display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  font-size:14px; font-weight:500; color:var(--blue); background:var(--ivory);
  transition:background .16s ease, color .16s ease, transform .16s ease}
.az__l:hover{background:var(--blue); color:#fff; transform:translateY(-2px)}
/* ---------------------------------------------------------------------------
   The rail across the top of a phone screen.

   It carries the whole set the page belongs to — every sibling one tap away,
   the one you are on marked — plus a hairline that fills as you read. At the
   top rather than the foot for two reasons: the foot is where the WhatsApp
   button lives, and a phone's own browser chrome is down there too.

   Hidden on a laptop, where the top menu already does all of this on hover.
--------------------------------------------------------------------------- */
/* It runs at EVERY width. It began as a phone control, but a visitor on a
 laptop gains the same three things — where they are, what else is in the
 set, and a way out to the calculators — so Sonu asked for it there too:
 "all the development we bring in the mobile version should come in the
 desktop varient also". On a wide screen the strip is centred in the page
 rather than run edge to edge. */
.sx{display:block; position:fixed; left:0; right:0; top:var(--hdrh,62px); z-index:95;
  background:rgba(6,42,99,.97); backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 26px rgba(6,42,99,.24);
  border-bottom:1px solid rgba(255,255,255,.1);
  transform:translateY(-130%); opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.25,1), opacity .2s ease}
.sx.is-up{transform:none; opacity:1; pointer-events:auto}

  /* how far through THIS page you are */
.sx__read{display:block; height:2px; background:rgba(255,255,255,.14)}
.sx__read i{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi,#FFC24D));
  transition:width .12s linear}

.sx__row{display:flex; align-items:stretch; gap:0; height:44px}
.sx__hub{display:flex; align-items:center; gap:6px; flex:none;
  padding:0 11px 0 13px; color:#fff; font-size:12px; text-decoration:none;
  border-right:1px solid rgba(255,255,255,.14)}
.sx__hub b{font-weight:600; letter-spacing:.2px; white-space:nowrap}
.sx__hub svg{opacity:.75}

  /* The pills scroll sideways on their own. The swipe handler knows to leave
   a container like this alone, so dragging the rail never changes page. */
.sx__pills{display:flex; align-items:center; gap:7px; flex:1 1 auto;
  min-width:0; overflow-x:auto; overflow-y:hidden; padding:0 12px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity}
.sx__pills::-webkit-scrollbar{display:none}
.sx__p{flex:none; scroll-snap-align:center;
  padding:6px 13px; border-radius:999px; white-space:nowrap;
  font-size:12.5px; font-weight:500; letter-spacing:.1px; text-decoration:none;
  color:#CFDDF4; background:rgba(255,255,255,.09);
  border:1px solid transparent; transition:background .16s ease, color .16s ease}
.sx__p:active{background:rgba(255,255,255,.2)}
.sx__p.is-on{background:var(--gold); color:var(--ink); font-weight:600;
  box-shadow:0 3px 12px rgba(247,168,0,.36)}
  /* The cross-section shortcuts at the end of the rail, kept visibly apart
   from the pages of the set you are actually in. */
.sx__sep{flex:none; width:1px; height:20px; margin:0 3px;
  background:rgba(255,255,255,.22)}
.sx__p--go{background:transparent; border-color:rgba(255,255,255,.28);
  color:#A9C0E4; font-weight:400}
.sx__p--go:active{background:rgba(255,255,255,.14); color:#fff}

/* Nothing may sit under the rail while it is showing. */
body.has-sx.sx-open .hdr.is-stuck{box-shadow:none}

/* On a wide screen the strip is centred on the page's own measure, with a
   little more room to breathe, rather than running the full width. */
@media (min-width:1041px){
  .sx__row{max-width:var(--max); margin:0 auto; padding-inline:var(--pad);
    height:48px}
  .sx__hub{font-size:13px; padding-left:0}
  .sx__p{font-size:13px; padding:7px 15px}
  .sx__pills{padding:0 16px}
  .sx__p:hover{background:rgba(255,255,255,.2); color:#fff}
  .sx__p.is-on:hover{background:var(--gold-hi); color:var(--ink)}
  .sx__p--go:hover{background:rgba(255,255,255,.16); color:#fff}
  .sx__hub:hover{color:var(--gold-hi)}
}

/* ---------------------------------------------------------------------------
   The welcome. A few seconds of hello under the header when somebody first
   arrives — nothing to answer, nothing to close, and once a visit only.
--------------------------------------------------------------------------- */
.wl{position:fixed; left:50%; top:calc(var(--hdrh,62px) + 14px); z-index:120;
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; justify-content:center;
  max-width:calc(100vw - 32px); padding:11px 20px; border-radius:999px;
  background:#fff; box-shadow:0 16px 40px rgba(6,42,99,.26);
  border-left:3px solid var(--gold);
  opacity:0; transform:translateX(-50%) translateY(-10px); pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.25,1)}
.wl.is-in{opacity:1; transform:translateX(-50%)}
.wl__g{color:var(--ink); font-size:14.5px; font-weight:600; white-space:nowrap}
.wl__t{color:var(--grey); font-size:14px}
@media (max-width:400px){ .wl{padding:10px 16px} .wl__g,.wl__t{font-size:13px} }

/* The one-time hint that the pages can be swiped. Bottom centre, clear of the
   WhatsApp button in the corner, gone after a few seconds and never shown
   twice in a visit. */
.sw{display:flex; position:fixed; left:50%; bottom:92px; z-index:130;
  align-items:center; gap:9px; padding:10px 17px; border-radius:999px;
  background:rgba(6,42,99,.95); backdrop-filter:blur(8px);
  color:#fff; font-size:13.5px; font-weight:500; white-space:nowrap;
  box-shadow:0 14px 34px rgba(6,42,99,.36);
  opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.25,1)}
.sw.is-in{opacity:1; transform:translateX(-50%)}
.sw__hand{display:block; color:var(--gold);
  animation:sw-slide 1.6s ease-in-out infinite}
@keyframes sw-slide{
  0%,100%{transform:translateX(8px)}
  50%{transform:translateX(-8px)}
}
/* On a laptop there is no swipe, so the hint says what there IS — the arrow
   keys, which move between pages exactly the same way. The script swaps the
   wording and hides the hand. */
@media (min-width:1041px){ .sw__hand{display:none} }
@media (max-width:360px){ .sw{font-size:12.5px; padding:9px 14px} }
@media (prefers-reduced-motion: reduce){ .sw__hand{animation:none} }

/* ---------------------------------------------------------------------------
   The card that slides in part-way down a page: either "How can we help you
   today?" with the products on this page as WhatsApp taps, or one true thing
   with a link to where the rest of it is. One per page, dismissible, and it
   never covers the WhatsApp button.
--------------------------------------------------------------------------- */
.nx{position:fixed; z-index:140; left:clamp(16px,2.2vw,28px); bottom:clamp(16px,2.2vw,28px);
  width:min(370px,calc(100vw - 32px));
  background:#fff; border-radius:16px; border-left:4px solid var(--gold);
  box-shadow:0 24px 60px rgba(6,42,99,.28), 0 2px 8px rgba(6,42,99,.12);
  padding:16px 40px 16px 18px;
  transform:translateY(18px) scale(.97); opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .26s ease}
.nx.is-in{transform:none; opacity:1}
.nx__x{position:absolute; top:9px; right:9px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:#7E8CA6; cursor:pointer; border-radius:50%}
.nx__x:hover{background:var(--ivory); color:var(--ink)}
.nx__lab{display:block; font-size:11px; font-weight:600; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--gold-dk,#B87C00)}
/* The offer, said once and said warmly, under the greeting. */
.nx__hi{margin-top:5px; color:var(--ink); font-size:17px; font-weight:600;
  line-height:1.35; letter-spacing:-.1px}
.nx__t{margin-top:9px; color:#5A6B85; font-size:14px; line-height:1.5}
.nx__go{display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  color:var(--blue); font-size:14px; font-weight:600; text-decoration:none}
.nx__go:hover{color:var(--ink)}
.nx__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:13px}
/* EVERY chip has to read as live. The first version made the plain ones
   ivory on a pale border, and beside the outlined WhatsApp ones they looked
   switched off — Sonu: "mortgage protection cover are all in a colour that
   user think it is disabled". So both kinds now carry full contrast and the
   same weight; only what happens next is different, and the mark on the chip
   says which. */
.nx__chip{display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--blue); background:#fff; border:1.5px solid var(--blue);
  text-decoration:none; cursor:pointer; font-family:inherit; line-height:1.2;
  transition:background .16s ease, border-color .16s ease, color .16s ease}
.nx__chip:hover,.nx__chip:active{background:var(--blue); border-color:var(--blue); color:#fff}
/* A chip that asks the next question carries a chevron. */
.nx__chip:not(.nx__chip--wa)::after{content:'\203A'; font-size:16px; line-height:1;
  opacity:.7; margin-top:-2px}
/* A chip that opens WhatsApp is gold — the colour this site uses for the
   thing it actually wants you to do — and carries the WhatsApp mark. */
.nx__chip--wa{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.nx__chip--wa:hover,.nx__chip--wa:active{background:var(--gold-hi);
  border-color:var(--gold-hi); color:var(--ink)}
.nx__chip--wa::after{content:''; display:inline-block; width:14px; height:14px;
  flex:none; background:currentColor;
  -webkit-mask:var(--wa-mask) center/contain no-repeat; mask:var(--wa-mask) center/contain no-repeat}
:root{--wa-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm5.5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.3-3.8c-.3-.5-.7-1.1-.7-1.8s.3-1.1.5-1.3l.5-.3h.4c.1 0 .3 0 .5.4l.7 1.6c0 .2 0 .3-.1.4l-.3.4-.2.2c-.1.1-.2.2-.1.4.2.4.7 1.1 1.4 1.7.8.7 1.5 1 1.9 1.1.2.1.4 0 .5-.1l.7-.8c.1-.2.3-.2.4-.1l1.6.8c.2.1.3.2.3.3z'/%3E%3C/svg%3E")}
/* The quieter of the two asks on the review card. Deliberately second:
   somebody who is happy leaves the review, somebody who is not tells us why,
   and the second one is worth more. */
.nx__alt{display:block; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line); color:#7E8CA6; font-size:13px}
.nx__alt:hover{color:var(--blue)}
.nx__fine{margin-top:13px; padding-top:11px; border-top:1px solid var(--line);
  color:#7E8CA6; font-size:12.5px; line-height:1.5}
.nx__back{margin-top:12px; padding:0; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; color:#7E8CA6}
.nx__back:hover{color:var(--blue)}
.nx__step[hidden]{display:none}
@media (max-width:620px){
  .nx{left:12px; right:12px; width:auto; bottom:12px; padding:15px 38px 15px 16px}
  .nx__t{font-size:14px}
}
/* The card and the WhatsApp button both want the bottom of the screen, and on
   a phone there is only room for one. The card wins while it is open — it is
   the same conversation, with the first line already written — and the button
   comes back the moment the card is closed. */
.wa{transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.25,1)}
body.nx-open .wa{opacity:0; transform:scale(.7); pointer-events:none}

/* ---------------------------------------------------------------------------
   The wave.

   Somebody who closed the card may still have the question they came with.
   So a little later the WhatsApp button waves once and says what it is for,
   then goes quiet again. Twice a visit at the very most, never while the card
   is open, and never again once they have used it — a button that keeps
   tapping you on the shoulder is worse than one that says nothing.
--------------------------------------------------------------------------- */
@keyframes wa-wave{
  0%,62%,100%{transform:none}
  8%{transform:rotate(-13deg) scale(1.07)}
  18%{transform:rotate(11deg) scale(1.07)}
  28%{transform:rotate(-9deg) scale(1.05)}
  38%{transform:rotate(7deg) scale(1.04)}
  50%{transform:rotate(-4deg) scale(1.02)}
}
.wa.is-wave .wa__btn{animation:wa-wave 1.7s ease-in-out 2}
.wa.is-wave .wa__label{opacity:1; transform:none}
/* The label is hidden on a phone because there is no hover there — but during
   a wave it is the whole point, so bring it back for those few seconds. */
@media (max-width:620px){
  .wa.is-wave .wa__label{display:block; font-size:13px; padding:8px 13px;
    max-width:calc(100vw - 96px); box-shadow:0 10px 30px rgba(6,42,99,.26)}
}
@media (prefers-reduced-motion: reduce){
  .wa.is-wave .wa__btn{animation:none}
}
@media (prefers-reduced-motion: reduce){
  .nx{transition:opacity .01ms}
  .sx{transition:opacity .01ms}
}

.az__l.is-off{opacity:.3; pointer-events:none}

/* ---------------------------------------------------------------------------
   The contents list on the legal pages. Sticky beside the text on a laptop;
   an ordinary block that scrolls away on a phone, where the columns stack and
   a pinned 450px box would sit over the words for the whole page.
--------------------------------------------------------------------------- */
.lgl__toc{position:sticky; top:24px}
@media (max-width:1040px){
  .lgl__toc{position:static; padding-bottom:8px; border-bottom:1px solid var(--line)}
}
/* the selected letter stays lit, so it is obvious what you are looking at
   and obvious what to tap again to come back to the whole list */
.az__l.is-on{background:var(--blue); color:#fff; font-weight:600}
.gl__grp{padding-top:34px}
.gl__grp[hidden]{display:none}
.gl__L{font-size:13px; letter-spacing:3px; font-weight:600; color:var(--gold);
  text-transform:uppercase; padding-bottom:10px; border-bottom:2px solid var(--ivory)}
.gl__rows{display:grid; gap:2px; margin-top:18px}
.gl__row{padding:18px 22px; border-left:2px solid var(--line); background:#fff;
  transition:border-color .2s ease, background .2s ease, padding-left .2s ease}
.gl__row:hover,.gl__row:target,.gl__row.is-hit{border-left-color:var(--gold);
  background:var(--ivory); padding-left:26px}
.gl__row.is-hit{border-left-width:3px; box-shadow:0 6px 22px rgba(6,42,99,.09)}
.gl__row[hidden]{display:none}
.gl__t{font-size:17px; font-weight:500; line-height:1.4}
.gl__d{font-size:15.5px; line-height:1.75; color:#31456B; margin-top:7px; max-width:82ch}
.gl__see{font-size:13.5px; color:var(--grey); margin-top:9px}
.gl__see a{color:var(--blue); border-bottom:1px solid rgba(0,76,190,.28)}
.gl__see a:hover{border-bottom-color:var(--blue)}
.gl__none{padding:34px 0; font-size:16px; color:var(--grey)}
.gl__none[hidden]{display:none}
mark{background:rgba(247,168,0,.34); color:inherit; padding:0 1px}

/* ==========================================================================
   GUIDE PAGES  (body.p-gd — the twelve guides and the guides index)
   ==========================================================================
   The guides are the one part of the site that is not selling anything, and
   they used to wear the same navy slab as the product pages, so every page on
   the site read the same. These are articles: ivory ground, ink type, the
   guide number sitting behind the headline, and a contents rail that stays
   beside you as you read.

   The FIRST rule below is load-bearing. The site header is fixed, transparent
   and white until you scroll. Over an ivory hero that is white on cream — the
   navigation disappears completely. This is the same fault the split hero had.
   Do not remove it, and do not swap it for a scrim.
   ========================================================================== */
body.p-gd .hdr{background:var(--ink)}
body.p-gd .hdr__in{padding-block:14px}
body.p-gd .hdr__logo img{height:46px}

/* ---- the editorial hero ---- */
.gh{position:relative; overflow:hidden; background:var(--ivory);
  border-bottom:1px solid var(--line);
  padding:calc(80px + clamp(34px,4.6vw,62px)) 0 clamp(38px,4.6vw,60px)}
.gh__n{position:absolute; right:clamp(-18px,1vw,36px); top:52%; transform:translateY(-50%);
  font-size:clamp(190px,26vw,350px); font-weight:600; line-height:.78; letter-spacing:-14px;
  color:rgba(6,42,99,.055); pointer-events:none; user-select:none}
.gh__in{position:relative; max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}
.gh__crumb{font-size:13px; color:var(--grey-d); margin-bottom:24px}
.gh__crumb a{color:var(--grey-d)}
.gh__crumb a:hover{color:var(--blue)}
.gh__crumb i{font-style:normal; padding:0 9px; color:var(--grey-d)}
.gh__lab{display:block; font-size:11px; letter-spacing:2.8px; text-transform:uppercase;
  font-weight:600; color:var(--gold-txt)}
.gh__h1{font-size:clamp(30px,4.4vw,55px); line-height:1.1; letter-spacing:-.9px;
  color:var(--ink); max-width:20ch; margin-top:15px; font-weight:400}
.gh__rule{width:64px; height:2px; background:var(--gold); margin:24px 0 22px}
.gh__lead{font-size:clamp(16.5px,1.5vw,21px); line-height:1.6; color:#3C4C66; max-width:56ch}
.gh__acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
/* the ghost button is written for a photograph behind it; on cream it needs a line */
.gh .btn--ghost{border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:400}
.gh .btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.gh__meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; padding-top:22px;
  border-top:1px solid var(--line); font-size:13px; color:var(--grey-d)}
.gh__meta span{display:inline-flex; align-items:center}
.gh__meta span+span::before{content:''; width:3px; height:3px; border-radius:50%;
  background:var(--line); margin-right:22px}

/* ---- the article and its contents rail ---- */
.gw{display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(28px,4.4vw,70px);
  align-items:start}
/* No max-width here. The rail already takes 230px off the measure, which
   leaves the article at about 790px — right for reading, and it lets the wide
   blocks inside a guide (the step cards, the comparison tables) use the whole
   column instead of being squeezed into a paragraph's width. The paragraphs
   carry their own 78ch cap. */
.gart{display:flex; flex-direction:column; gap:clamp(22px,2.6vw,34px);
  /* a flex item's floor is its content, so a wide table inside a guide
     would push the whole page sideways on a phone without this */
  min-width:0}
.gart>*{min-width:0; max-width:100%}
.gart .small{font-size:17px; line-height:1.85; color:#3C4C66}
/* An id'd heading is a jump target, and the rail is a second fixed bar that
   slides in under the header as you read. Both the sticky rail and the jump
   targets have to clear whichever of them is on screen, or the first item in
   the contents list ends up hidden behind the pills. --hdrh is set by the
   script from the header's real height. */
.gart .h2{scroll-margin-top:calc(var(--hdrh,62px) + 26px)}
body.sx-open .gart .h2{scroll-margin-top:calc(var(--hdrh,62px) + 76px)}
.toc{position:sticky; top:calc(var(--hdrh,62px) + 26px); transition:top .3s ease}
body.sx-open .toc{top:calc(var(--hdrh,62px) + 76px)}
.toc__h{font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--grey-d);
  font-weight:600; margin-bottom:16px}
.toc__nav a{display:block; font-size:14px; line-height:1.45; color:var(--grey-d);
  padding:8px 0 8px 15px; border-left:2px solid var(--line);
  transition:color .18s ease, border-color .18s ease}
.toc__nav a:hover{color:var(--ink); border-color:var(--grey-l)}
.toc__nav a.is-on{color:var(--ink); border-color:var(--gold); font-weight:500}
.toc__cta{margin-top:26px; padding:20px; background:var(--ivory); border:1px solid var(--line)}
.toc__cta p{font-size:13.6px; line-height:1.6; color:#3C4C66}
.toc__cta a{display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:14px; font-weight:600; color:var(--blue)}

/* The rail needs a column of its own. Below that it would squeeze the article,
   so it folds into a box above the text that opens and shuts. */
@media (max-width:980px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track is floored at its content's
     own width, and one wide table then drags the page sideways. */
  .gw{grid-template-columns:minmax(0,1fr); gap:26px}
  .toc{position:static; border:1px solid var(--line); padding:18px 20px; background:#fff}
  .toc__h{margin-bottom:0; cursor:pointer; display:flex; justify-content:space-between;
    align-items:center; color:var(--ink); font-size:11.5px}
  .toc__h::after{content:''; width:8px; height:8px; border-right:2px solid var(--grey);
    border-bottom:2px solid var(--grey); transform:rotate(45deg) translateY(-2px);
    transition:transform .22s ease}
  .toc.is-open .toc__h::after{transform:rotate(-135deg) translateY(-2px)}
  .toc__nav{display:none; margin-top:14px}
  .toc.is-open .toc__nav{display:block}
  .toc__cta{display:none}
  .gart{max-width:none}
}
@media (max-width:620px){
  .gh__n{font-size:150px; right:-14px; letter-spacing:-8px}
  .gh__acts .btn{flex:1 1 100%}
  .gh__meta{flex-direction:column; gap:7px}
  .gh__meta span+span::before{display:none}
  .gart .small{font-size:16px}
}

/* ---------- guides ---------- */
.gd{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:var(--line)}
.gd__c{position:relative; display:flex; flex-direction:column; gap:11px; background:#fff;
  padding:30px 28px 26px; transition:background .22s ease, transform .22s ease}
.gd__c:hover{background:var(--ivory); transform:translateY(-3px)}
.gd__n{font-size:12px; letter-spacing:2.4px; font-weight:600; color:var(--gold)}
.gd__c h3{font-size:19px; font-weight:500; line-height:1.35; color:var(--ink)}
.gd__c p{font-size:14.8px; line-height:1.7; color:var(--grey); flex:1}
.gd__t{font-size:12.5px; color:var(--blue); font-weight:400; display:flex; align-items:center; gap:8px}
.gd__c::after{content:''; position:absolute; inset:0}
.gd__c::before{content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--gold); transition:width .22s ease}
.gd__c:hover::before{width:3px}
.steps{counter-reset:s; display:grid; gap:2px; background:var(--line)}
.steps li{counter-increment:s; position:relative; background:#fff; padding:24px 28px 24px 78px;
  list-style:none; transition:background .2s ease}
.steps li:hover{background:var(--ivory)}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:28px; top:24px;
  font-size:13px; font-weight:600; color:var(--gold); letter-spacing:1px}
.steps b{display:block; font-weight:500; font-size:16.5px; margin-bottom:6px}
.steps p{font-size:14.8px; line-height:1.72; color:var(--grey-d); margin:0}
.keyline{border-left:3px solid var(--gold); background:var(--ivory); padding:24px 28px;
  font-size:16px; line-height:1.72; max-width:920px}
.keyline b{font-weight:500}
.gd__meta{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13.5px; color:var(--grey-l);
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:8px}
/* ---------- back to top ----------
   A thin rule above the footer rather than a floating circle: the bottom-right
   corner already belongs to the WhatsApp button, and two round buttons stacked
   on top of each other is clutter. */
.totop{display:flex; align-items:center; justify-content:flex-end; gap:10px;
  width:100%; border:0; border-top:1px solid var(--line); background:transparent;
  font-family:inherit; cursor:pointer;
  max-width:var(--max); margin:0 auto; padding:20px var(--pad);
  font-size:12px; letter-spacing:2.4px; font-weight:600; text-transform:uppercase;
  color:var(--grey); border-top:1px solid var(--line);
  transition:color .2s ease, gap .2s ease}
.totop:hover{color:var(--blue); gap:14px}
.totop svg{transition:transform .2s ease}
.totop:hover svg{transform:translateY(-3px)}

/* ---------- foot-of-page navigation ---------- */
.sec--tight{padding-block:clamp(30px,4vw,48px)}
.pg{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); margin-top:16px}
.pg__a{position:relative; background:#fff; padding:24px 28px; display:flex; flex-direction:column;
  gap:7px; transition:background .2s ease}
.pg__a:hover{background:var(--ivory)}
.pg__a span{display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:2.4px;
  font-weight:600; color:var(--gold); text-transform:uppercase}
.pg__a b{font-size:17px; font-weight:500; color:var(--ink); line-height:1.4}
.pg__a--next{text-align:right; align-items:flex-end}
.pg__a--next span{flex-direction:row-reverse}
.pg__a--empty{background:#FBFBF9}
.pg__a::before{content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--gold); transition:width .2s ease}
.pg__a--next::before{left:auto; right:0}
.pg__a:hover::before{width:3px}
.gd--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gd__next{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line)}
.gd__next a{background:#fff; padding:26px 28px; display:flex; flex-direction:column; gap:7px;
  transition:background .2s ease}
.gd__next a:hover{background:var(--ivory)}
.gd__next span{font-size:12px; letter-spacing:2.4px; font-weight:600; color:var(--gold)}
.gd__next b{font-size:17px; font-weight:500; color:var(--ink); line-height:1.4}

/* ---------- calculators ---------- */
.calc{border:1px solid var(--line); background:#fff}
.calc__hd{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px 20px; padding:24px 28px; border-bottom:1px solid var(--line); background:var(--ivory)}
.calc__hd h3{font-size:20px; font-weight:500}
.calc__hd span{font-size:13.5px; color:var(--grey)}
.calc__bd{display:grid; grid-template-columns:1fr 1fr; gap:0}
.calc__in{padding:28px; display:flex; flex-direction:column; gap:18px}
.calc__out{padding:28px; background:var(--ink); color:#fff; display:flex; flex-direction:column;
  gap:16px; justify-content:center}
.calc__big{font-size:clamp(30px,4vw,42px); font-weight:300; line-height:1.15; color:#fff;
  letter-spacing:-.5px}
.calc__big small{display:block; font-size:12px; letter-spacing:2.6px; font-weight:600;
  color:var(--gold); margin-bottom:10px; text-transform:uppercase}
.calc__rows{display:grid; gap:0; border-top:1px solid rgba(255,255,255,.17)}
.calc__rows .row{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px; color:#BFD1EE}
.calc__rows .row b{font-weight:400; color:#fff; text-align:right}
.calc__note{font-size:13px; line-height:1.7; color:#9FB6DC}
.fld{display:flex; flex-direction:column; gap:7px}
.fld label{font-size:13.5px; font-weight:400; color:var(--ink)}
.fld .hint{font-size:12.5px; color:var(--grey-l)}
.fld input,.fld select{border:1px solid var(--line); background:#fff; padding:13px 15px;
  font:inherit; font-size:16px; color:var(--ink); outline:0; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease}
.fld input:focus,.fld select:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,76,190,.09)}
.fld.pfx{position:relative}
.fld.pfx input{padding-left:32px}
.fld.pfx .cur{position:absolute; left:15px; bottom:14px; color:var(--grey); font-size:16px;
  pointer-events:none}
.seg{display:flex; border:1px solid var(--line); overflow:hidden}
.seg button{flex:1; border:0; background:#fff; padding:12px 10px; font:inherit; font-size:14px;
  color:var(--grey); cursor:pointer; transition:background .18s ease, color .18s ease}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--blue); color:#fff; font-weight:400}
.seg button:hover:not([aria-pressed="true"]){background:var(--ivory); color:var(--ink)}
.calc__tabs{display:flex; flex-wrap:wrap; gap:2px; background:var(--line); margin-bottom:2px}
.calc__tabs button{flex:1 1 auto; border:0; background:#fff; padding:15px 20px; font:inherit;
  font-size:14.5px; color:var(--grey); cursor:pointer; position:relative; white-space:nowrap;
  transition:background .18s, color .18s}
.calc__tabs button[aria-selected="true"]{background:var(--ink); color:#fff}
.calc__tabs button[aria-selected="true"]::after{content:''; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--gold)}
.calc__tabs button:hover:not([aria-selected="true"]){background:var(--ivory); color:var(--ink)}
.calc__panel[hidden]{display:none}
.bar{height:9px; background:rgba(255,255,255,.16); overflow:hidden; display:flex}
.bar i{display:block; height:100%; transition:width .35s ease}
.bar i.a{background:var(--gold)}
.bar i.b{background:var(--blue-lt)}
.key{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:#BFD1EE}
.key span{display:flex; align-items:center; gap:7px}
.key i{width:10px; height:10px; display:block}

/* =======================================================
   Breakpoints
   ======================================================= */
@media (max-width:1180px){
  .hdr__tel{display:none}
}
@media (max-width:1040px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .hdr__in{justify-content:space-between}
  /* Below this width the words no longer sit BESIDE the picture, they sit
     UNDER it. The side-to-side gradient only works while the screen is a good
     deal wider than the column of text — on a tablet the text fills the frame,
     so a gradient that clears on the right leaves half of every line with
     nothing behind it. Here the veil runs top to bottom instead: almost clear
     across the top, where the faces are, building to solid further down where
     the headline starts. The photograph stays a photograph and the type still
     has a proper ground under it. */
  /* A typographic hero has no photograph to clear, so all that padding was
     simply a screenful of empty ink before anything appeared — which is why
     the glossary looked blank on a phone: its A-Z and its 96 terms were both
     pushed below the fold. Clear the floating header and start. */
  .hero--flat .hero__in{padding-top:clamp(104px,26vw,138px)}
  .hero p{max-width:none}
}
@media (max-width:620px){
  /* On a phone the hero is about nine hundred pixels tall, and a picture
     stretched to fill a box that tall gets cropped to a narrow vertical strip
     of itself — on the home page that left one face out of four in frame.

     So on a phone the photograph gets a band of its own at the top, of a shape
     close to the picture's own, and the words sit on plain ink below it. The
     family is seen properly, and the type has a perfect ground under it rather
     than a compromise between the two.

     The band runs from the very top of the page, not from below the header.
     An earlier version started it at 88px, leaving a strip of flat navy above
     the picture — and a horizontal edge between navy and photograph reads as a
     photo pasted into a blue box. Now the photograph is simply the top of the
     page, as it is on a laptop, with the header floating on it and the picture
     dissolving into the ink further down. There is no edge to see. */
  /* How much picture there is before the words start. Kept small enough that
     the whole hero — picture, headline, and the button — fits one phone
     screen, with the next section arriving at the fold. At 46vh it did not:
     every photographic page opened on a screenful of hero and nothing else. */
  :root{--band:clamp(280px,34vh,360px)}
  /* The WORDS do not animate on a phone. On a laptop the hero has room and
     the lines rising in reads as polish; on a phone the hero IS the screen,
     so the same animation shows an empty gap filling in piece by piece, which
     is what Sonu saw. The words simply arrive, finished. */
  .hero .label, .hero h1, .hero .rule, .hero p,
  .hero__acts, .hero__marks{animation:none !important}
  .hero .rule{width:72px}

  /* The PHOTOGRAPH does move, and more than it does on a laptop. It starts
     close and pulls back over eight seconds, so the room opens out around the
     people as you read the headline. 6% is invisible on a small screen — this
     is 13%, slow enough never to be a distraction and just enough that the
     picture feels alive rather than pasted on. */
  .hero__img{animation:pull 8s cubic-bezier(.16,.68,.3,1) both !important;
    will-change:transform}

  /* ---------- made for a thumb ----------
     Footer links were about twenty pixels tall — a fiddly target on a phone,
     and there are a lot of them. Padding rather than bigger type keeps the
     footer looking the same while making every link comfortably hittable. */
  .ftr li{margin-bottom:2px}
  .ftr li a{display:inline-block; padding:10px 0}
  .ftr__legal{gap:2px 26px}
  .ftr__legal a{display:inline-block; padding:9px 0}
  /* the phone number and email in the footer company block are links too */
  .ftr .co a{display:inline-block; padding:8px 0}
  /* The small uppercase labels are set at eleven pixels, which is fine on a
     laptop and mean on a phone. */
  .label{font-size:12px; letter-spacing:2.2px}
  .totop{padding-block:14px}
}
@media (max-width:820px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gd{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid--2u{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .calc__bd{grid-template-columns:1fr}
}
@media (max-width:620px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .gd,.gd__next,.gd--2{grid-template-columns:1fr}
  .pg{grid-template-columns:1fr}
  .pg__a--next{text-align:left; align-items:flex-start}
  .pg__a--next span{flex-direction:row}
  .pg__a--empty{display:none}
  .steps li{padding:22px 22px 22px 22px}
  .steps li::before{position:static; display:block; margin-bottom:8px}
  .gl__row{padding:16px 18px}
  .gl__d{font-size:15px}
  .calc__in,.calc__out,.calc__hd{padding:22px}
  .calc__tabs button{padding:13px 12px; font-size:13.5px; white-space:normal}
  .ftr__cols{grid-template-columns:1fr}
  .form .pair{grid-template-columns:1fr}
  .hero__acts .btn,.form__acts .btn{width:100%}
  .wa__label{display:none}
  .wa__btn{width:52px; height:52px}
  .ftr__reg{padding-bottom:92px}
  .warn,.ftr__reg p{padding-right:76px}
  .facts{padding-inline:20px}
  .facts .row{flex-direction:column; align-items:flex-start; gap:4px}
  .facts .row span:last-child{text-align:left}
  .cookie__in{flex-direction:column; align-items:stretch}
  .cookie__acts .btn{flex:1}
}
@media (hover:none){
  .card--box:hover,.wa__btn:hover,.card--link:hover{transform:none}
  .card--link:hover{box-shadow:none}
  .wa__label{display:none}
  .card--bar:hover{border-left-width:2px; padding-left:22px}
  .nav__link:hover{padding-left:26px}
  .ftr li a:hover{padding-left:0}
  .gl__row:hover{padding-left:22px; background:#fff; border-left-color:var(--line)}
  .gd__c:hover,.az__l:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .wa__btn::before{display:none}
  .reveal{opacity:1; transform:none}
}

/* ---------------------------------------------------------------------------
   .tlx — proportional timeline for the guides.
   One row per stage, positioned from percentages the renderer works out, so the
   graphic can never drift out of step with the figures in the copy.
   --------------------------------------------------------------------------- */
.tlx{--lane-x:210px; margin:34px 0 8px; padding:26px 26px 20px; background:var(--ivory);
  border:1px solid var(--line); border-radius:16px}

.tlx__ruler{position:relative; height:22px; margin-left:var(--lane-x);
  border-bottom:1px solid var(--line)}
.tlx__unit{position:absolute; left:-54px; bottom:5px; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey-l)}
.tlx__tick{position:absolute; bottom:5px; transform:translateX(-50%);
  font-size:12px; font-weight:600; color:var(--grey)}
.tlx__tick::after{content:''; position:absolute; left:50%; bottom:-7px; width:1px;
  height:6px; background:var(--line)}

.tlx__grp{margin:18px 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-txt)}
.tlx__row{display:flex; align-items:center; min-height:30px}
.tlx__lab{width:var(--lane-x); flex:none; padding-right:18px}
.tlx__lab b{display:block; font-size:14px; font-weight:600; color:var(--ink);
  line-height:1.25}
.tlx__lab i{display:block; font-style:normal; font-size:11.5px; color:var(--grey-l);
  margin-top:1px}
.tlx__lane{position:relative; flex:1; height:30px}
.tlx__lane::before{content:''; position:absolute; left:0; right:0; top:14px; height:1px;
  background:var(--line)}
.tlx__bar{position:absolute; top:7px; height:16px; border-radius:8px; min-width:8px}
.tlx__bar--blue{background:var(--blue)}
.tlx__bar--ink{background:var(--ink)}

.tlx__pins{position:relative; height:74px; margin-left:var(--lane-x); margin-top:14px;
  border-top:1px dashed var(--line); padding-top:12px}
.tlx__pin{position:absolute; top:12px; transform:translateX(-50%); width:92px;
  text-align:center}
.tlx__pin.is-low{top:48px}
.tlx__pin::before{content:''; display:block; width:10px; height:10px; margin:0 auto 5px;
  border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px var(--ivory), 0 0 0 4px var(--gold)}
.tlx__pin.is-low::before{margin-top:-30px; margin-bottom:29px}
.tlx__pin b{display:block; font-size:11.5px; font-weight:600; color:var(--ink);
  line-height:1.3}
.tlx__pin.is-first{transform:none; text-align:left}
.tlx__pin.is-first::before{margin-left:0}
.tlx__pin.is-last{transform:translateX(-100%); text-align:right}
.tlx__pin.is-last::before{margin-right:0}
.tlx__cap{margin-top:6px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.65; color:var(--grey)}

@media (max-width:760px){
  .tlx{--lane-x:0; padding:20px 16px 16px}
  .tlx__ruler{margin-left:0}
  .tlx__unit{display:none}
  .tlx__row{display:block; min-height:0; margin-bottom:13px}
  .tlx__lab{width:auto; padding:0 0 5px; display:flex; align-items:baseline; gap:8px}
  .tlx__lab b{font-size:13.5px}
  .tlx__lab i{margin-top:0}
  .tlx__lane{display:block; width:100%; height:22px}
  .tlx__lane::before{top:10px}
  .tlx__bar{top:3px; height:16px}
  .tlx__pins{margin-left:0; height:80px}
  .tlx__pin{width:76px}
  .tlx__pin b{font-size:10.5px}
}

/* ---------------------------------------------------------------------------
   Guide devices: .mx comparison table, .ts numbered tests, .ck checklist.
   All three carry content that already exists in the guide copy — they change
   how it is read, never what it says.
   --------------------------------------------------------------------------- */
.mx{margin:30px 0 8px}
.mx__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:14px; background:#fff}
.mx__t{display:grid; grid-template-columns:minmax(126px,.8fr) repeat(var(--cols),minmax(190px,1fr));
  min-width:min-content}
.mx__ch{background:var(--ink); color:#fff; font-size:13.5px; font-weight:600;
  padding:13px 15px; line-height:1.3; position:sticky; top:0}
.mx__rh{font-size:12.5px; font-weight:600; color:var(--ink); padding:14px 15px;
  background:var(--ivory); border-top:1px solid var(--line); line-height:1.35}
.mx__rh--top{background:var(--ink); border:0}
.mx__c{font-size:14px; line-height:1.6; color:var(--grey); padding:14px 15px;
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.mx__cap{margin-top:11px; font-size:13px; line-height:1.65; color:var(--grey)}

.ts{list-style:none; margin:28px 0 8px; padding:0;
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.ts__i{position:relative; padding:20px 20px 18px; background:#fff;
  border:1px solid var(--line); border-radius:14px}
.ts__n{display:block; font-size:30px; font-weight:700; line-height:1;
  color:var(--gold); letter-spacing:-.02em; margin-bottom:9px}
.ts__t{display:block; font-size:16px; font-weight:600; color:var(--ink);
  line-height:1.3; margin-bottom:6px}
.ts__p{font-size:14.5px; line-height:1.65; color:var(--grey-d); margin:0}

.ck{margin:28px 0 8px; display:grid; gap:16px; align-items:start;
  grid-template-columns:1fr}
@media (min-width:761px){.ck{grid-template-columns:1fr 1fr}}
.ck__g{padding:18px 20px 16px; background:var(--ivory);
  border:1px solid var(--line); border-radius:14px}
.ck__h{margin:0 0 10px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-dk)}
.ck__l{list-style:none; margin:0; padding:0}
.ck__i{position:relative; padding:0 0 9px 27px; font-size:14.5px; line-height:1.6;
  color:var(--ink)}
.ck__i::before{content:''; position:absolute; left:0; top:4px; width:15px; height:15px;
  border:1.5px solid var(--blue); border-radius:4px; background:#fff}
.ck__i::after{content:''; position:absolute; left:4.5px; top:7.5px; width:6px; height:3px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}

@media (max-width:760px){
  .mx__ch{font-size:12.5px; padding:11px 12px}
  .mx__rh{font-size:11.5px; padding:12px 12px}
  .mx__c{font-size:13.5px; padding:12px 12px}
  .ts{gap:11px}
  .ts__i{padding:16px 17px 15px}
  .ts__n{font-size:26px}
}
.ck__i b{display:block; font-weight:600; color:var(--ink)}
.ck__w{display:block; margin-top:2px; font-size:13.5px; line-height:1.55; color:var(--grey)}

/* Display mode. The bar is the only thing that shows, so anyone watching
   can see the screen is on a rotation rather than stuck. */
.tv{position:fixed; left:0; right:0; bottom:0; height:4px; z-index:120;
  background:rgba(6,42,99,.14); pointer-events:none}
.tv i{display:block; height:100%; width:0; background:var(--gold)}
html.is-tv #cookie, body.is-tv #cookie{display:none}
html.is-tv .wl, html.is-tv .nx, html.is-tv .sw{display:none!important}

/* ---------------------------------------------------------------------------
   .bd — the mid-page band.
   One sentence, at a size nothing else on the page uses, on ink or on a
   photograph. It exists to change the shape of a page halfway down, because
   every page on this site had an identical rhythm and users said so.
   --------------------------------------------------------------------------- */
.bd{position:relative; margin:0; padding:clamp(52px,7vw,86px) 0;
  background:var(--hero); overflow:hidden; isolation:isolate}
.bd__pic{position:absolute; inset:0; z-index:-2}
.bd__pic img{width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,70%) var(--fy,42%)}
.bd--pic::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,42,99,.92) 0%, rgba(6,42,99,.82) 42%,
    rgba(6,42,99,.44) 78%, rgba(6,42,99,.28) 100%)}
.bd__in{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}
.bd__rule{display:block; width:64px; height:3px; background:var(--gold); margin-bottom:22px}
.bd__l{max-width:23ch; margin:0; color:#fff; font-weight:600;
  font-size:clamp(26px,4.2vw,44px); line-height:1.16; letter-spacing:-.02em;
  text-wrap:balance}
.bd__s{max-width:52ch; margin:16px 0 0; color:#C7D6EE; font-size:16px; line-height:1.65}

/* The quiet treatment, for pages that will never carry a band photograph.
   Same device, half the voice — so the ink slab does not itself become the
   new thing every page has in common.
   The ground is a pale blue rather than ivory: on several pages the band lands
   between two ivory sections, and an ivory pull-quote there simply disappears.
   This is a third surface, so it reads as a break whatever it lands next to. */
.bd--quiet{background:#EDF3FC; border-block:1px solid #D7E4F7;
  padding:clamp(40px,5.2vw,64px) 0}
.bd--quiet .bd__l{color:var(--ink); font-weight:400; max-width:26ch;
  font-size:clamp(23px,3.4vw,36px)}
.bd--quiet .bd__rule{width:52px; height:2px; margin-bottom:18px}

@media (max-width:620px){
  .bd{padding:44px 0}
  .bd--quiet{padding:34px 0}
  .bd__l{max-width:18ch}
  .bd--quiet .bd__l{max-width:22ch}
  /* 16 Sep 2026: this used to hardcode the vertical position to 40%, which
     silently overrode --fy on every band that set one — the desktop face-crop
     fix for buy-to-let/first-time-buyers/mortgages never reached phones
     because of this one line. --fy is now respected here too, same as --fx
     already was; 40% stays only as the fallback for bands with no --fy. */
  .bd__pic img{object-position:var(--fx,68%) var(--fy,40%)}
  .bd--pic::after{background:linear-gradient(160deg, rgba(6,42,99,.9) 0%,
    rgba(6,42,99,.8) 55%, rgba(6,42,99,.5) 100%)}
}


/* ===========================================================================
   A — THE VEIL HERO.  EVERY PHOTOGRAPHIC HERO ON THE SITE.

   16 Sep 2026: the wash was pulled in favour of a text-stroke outline (see
   the previous git-less history in HANDOVER.md for the full reasoning and
   the worst-case contrast maths — it measured fine on headless screenshots).
   Sonu then viewed the deployed mortgages.html hero in his real browser and
   said flatly "no body can read this" against that photo's bright window
   light and busy cardboard-box pattern — real subpixel/anti-aliasing
   rendering of a ~1.7px outline did not hold up the way the flat screenshot
   did. Shown three rendered alternatives (heavier outline, blur-behind,
   feathered dark pool); his answer was simpler than any of them: "go back
   to the previous style" — the navy wash this section carried before.

   So the wash is back, with the earlier "keep the top clean, not blue"
   instruction folded in: the gradient stops (--tstart/--tend on desktop,
   the top-to-bottom ramp on tablet/phone) already keep the header's own
   170px/132px scrim as the ONLY dark ground near the nav — the wash proper
   only builds up behind the words themselves. base .hero h1/p/.label
   (further up this file) already carry the old plain white/pale colour and
   soft text-shadow, so nothing here needs its own text rule any more — it
   only needs the veil element switched back on.
   =========================================================================== */
.hero--veil .hero__img{position:absolute; inset:0}
.hero--veil picture{display:block}
.hero--veil .hero__veil{display:block; position:absolute; inset:0;
  --gut: max((100vw - var(--max)) / 2, 0px);
  --tstart: calc(var(--gut) + var(--pad));
  --tend: calc(var(--tstart) + 720px);
  background-image:linear-gradient(90deg,
    rgba(0,37,106,.46) 0px,
    rgba(0,37,106,.90) var(--tstart),
    rgba(0,37,106,.80) calc(var(--tend) * .76),
    rgba(0,37,106,.32) calc(var(--tend) + 60px),
    rgba(0,37,106,.05) calc(var(--tend) + 175px),
    rgba(0,37,106,0)   calc(var(--tend) + 255px))}

/* the veil hero's phone/tablet treatment: the wash is back here too, so the
   extra clearance it needs before the words is restored alongside it. */
@media (max-width:620px){
  .hero--veil .hero__in{padding-top:clamp(176px,44vw,256px)}
  .hero--veil-port .hero__in{padding-top:clamp(196px,48vw,272px)}
}

@media (max-width:1040px){
  /* --band is also declared further down, inside :root, but ONLY inside the
     max-width:620px block below — so between 621 and 1040px it was undefined.
     calc() with an undefined custom property makes the whole declaration
     invalid, so .hero--veil picture's height rule was silently dropped at
     this width: an absolutely-positioned <img> does not contribute to its
     parent's auto height, so the picture collapsed to 0px and only the
     hero's own solid background showed — found on 16 Sep 2026 when removing
     the wash made a bug that used to be camouflaged (the old gradient made
     this band nearly solid ink anyway, so a missing photograph looked the
     same as a present one). Redeclared here so this breakpoint has its own
     value regardless of what 620px does with it. */
  :root{--band:clamp(280px,34vh,360px)}
  /* hero--pic is a hero with a photograph. The typographic ones carry
     hero--flat instead and none of this touches them. */
  /* The wash and the picture share one clipped box, not a picture with a
     separate blue box floating under it. The gradient is painted on the
     same element the picture is clipped to (see below), so the photograph
     runs to exactly where the wash starts and there is no seam to notice. */
  /* THE PICTURE IS CLIPPED TO ITS BOX. The opening animation draws the
     photograph 13% larger and lets it settle, which means that for those
     eight seconds it is painted 34px BELOW the ink that is supposed to be
     hiding its bottom edge — a strip of photograph under the blue, slowly
     retracting. That is what Sonu kept seeing and calling a separation, and
     it survived every previous fix because the fixes were all about the
     gradient. The <picture> is now the box and it clips; the image can be
     any size it likes inside it and nothing can ever show below the ink. */
  .hero--veil picture{display:block; position:absolute; left:0; right:0; top:0;
    height:calc(var(--band) + 260px); overflow:hidden}
  /* Under 620px the browser is serving the UPRIGHT frame, which phonecrops.py
     already centred on the people — so it keeps its middle and ignores --fx,
     which belongs to the landscape frame served above this width. */
  .hero--veil .hero__img{position:absolute; inset:0; top:0; bottom:0;
    width:100%; height:100%;
    object-position:50% var(--fy,26%)}
  /* The wash is clipped to the same band as the picture, for the same
     reason: it needs to end exactly where the photograph ends, not run on
     as a flat colour below it. Top-to-bottom rather than the desktop's
     side-to-side, because the band is short and wide, not tall — a
     side-to-side gradient would leave half of every line with nothing
     behind it. */
  /* Sonu, 16 Sep 2026, on the first version of this: the "MORTGAGES"-style
     label was still barely readable — the label sits at roughly a third of
     the way down this band (hero__in's padding-top is --band*.58, and the
     veil is taller than --band), which the original stops left too light.
     Kept the top ~15% clean for the header, then ramp hard so the label's
     own position is already well past AA rather than caught mid-fade. */
  .hero--veil .hero__veil{top:0; height:calc(var(--band) + 260px); bottom:auto;
    background-image:linear-gradient(180deg,
      rgba(0,37,106,.20) 0%,
      rgba(0,37,106,.14) 15%,
      rgba(0,37,106,.62) 30%,
      rgba(0,37,106,.86) 45%,
      rgba(0,37,106,.96) 60%,
      rgba(0,37,106,1) 80%)}
  .hero--veil .hero__in,
  .hero--veil.hero--veil-port .hero__in{padding-top:calc(var(--band) * .58)}
  /* the header still needs its own soft scrim, since it now sits on the
     photograph again rather than on flat ink */
  .hero--veil::before{display:block; height:132px;
    background-image:linear-gradient(180deg,rgba(0,26,74,.60) 0%,rgba(0,26,74,.22) 58%,transparent 100%)}

}

/* A deeper hero band for pages whose photograph needs it — see HERO_DEEP in
   build.py. On a wide screen the standard band shows only about 64% of the
   image height; where the point of the picture is near the bottom of the frame
   (someone working at a desk) that band never reaches it. Only above 1040px,
   because on a phone the picture already has its own full-height band. */
@media (min-width:1041px){
  .hero--veil-deep .hero__in{padding-top:clamp(196px,17vw,300px);
                        padding-bottom:clamp(120px,14vw,260px)}

  /* ---------- the hero goes two-column where there is room ----------
     Words left, card right. Below this width the same markup stacks, which is
     the default written where .hero__card is defined.

     The text column is capped at 620px, not the usual 720. The card takes
     420px and the gap 56, so at 1280 — the narrowest screen this rule applies
     to, minus gutters — 620 is what is left. Letting the headline keep 720
     would work at 1920 and collide at 1280, and a hero that only holds
     together on a big monitor is not finished.

     THE VEIL IS UNCHANGED, and that is on purpose. Its stops are anchored to
     --tstart and --tend, which measure from where the TEXT starts and ends,
     and the text has not moved — it has only stopped short sooner. The card is
     opaque and sits over whatever the veil has let go on the right, so the
     part of the photograph it covers was never doing any work. Contrast was
     re-measured at 1920/1680/1440/1280 after this went in rather than assumed
     from that reasoning. */
  .hero--veil-form .hero__in{display:grid; grid-template-columns:minmax(0,1fr) 420px;
    gap:56px; align-items:center}
  .hero--veil-form .hero__body{max-width:620px}
  .hero--veil-form .hero__card{margin-top:0; max-width:none; align-self:center}
  /* The card is tall, so the hero needs more height than a words-only one or
     the card's shadow runs into the section below. */
  .hero--veil-form .hero__in{padding-top:clamp(150px,12vw,186px);
                        padding-bottom:clamp(64px,7vw,92px)}
}

/* Between 621 and 1040 the hero is one column and the card follows the
   buttons. Give it the full measure there — a 460px card floating in a 900px
   column looks like something failed to load. */
@media (min-width:621px) and (max-width:1040px){
  .hero--veil-form .hero__card{max-width:560px}
}


/* ===========================================================================
   B — THE SPLIT HERO.  EVERY PHOTOGRAPHIC PAGE EXCEPT THE HOME PAGE.
   Words on solid ink, photograph clean beside them. See section A above for
   why the home page is deliberately different.
   =========================================================================== */
/* ---------- the split hero, laid out ----------

   THE DEFAULT IS STACKED, and the split is the enhancement. Written that way
   round because the stacked version is what a phone gets, and a phone is
   where most of these visitors are: the layout that has to work is not the
   one that is conditional on a media query being understood.

   Stacked order is PHOTOGRAPH FIRST. It is the order the site already used on
   a phone, so nothing about the phone experience changes except that the blue
   wash is gone; and a picture at the top gives an immediate read while the
   headline and the buttons land at the fold, where a thumb is.

   The photograph gets a FIXED HEIGHT when stacked, never a share of the
   column. On a phone the words are the long part, and a proportional split
   would push the headline off the bottom of a small handset. */
.hero--split{background:var(--ink)}
.hero--split .hero__in{display:grid; grid-template-columns:1fr; gap:0;
  padding:0; max-width:none}
.hero--split .hero__body{
  padding:clamp(34px,6vw,52px) var(--pad) clamp(40px,7vw,58px);
  max-width:none; gap:clamp(16px,2.4vw,22px)}
.hero--split .hero__side{order:-1; height:clamp(240px,42vw,330px)}

/* The words are on flat ink now, so every trick that existed to make white
   type survive a photograph is not just unnecessary but actively wrong — a
   text-shadow on a solid ground is a smudge. */
.hero--split h1,
.hero--split p,
.hero--split .label{text-shadow:none}
.hero--split p{max-width:52ch}

/* Full-width stacked buttons when there is one column: easier for a thumb
   than the two side-by-side ones, and they stop wrapping raggedly. */
@media (max-width:859px){
  .hero--split .hero__acts{flex-direction:column; align-items:stretch}
  .hero--split .hero__acts .btn{justify-content:center}
}

/* THE SPLIT ITSELF, from 860px up.
   1.06fr against 1fr rather than a straight half: the words need a touch more
   room than the picture at the narrow end of this range, and at 1920 the
   difference is invisible.

   The right column bleeds to the screen edge. The left keeps the page gutter
   AND lines its text up with --max, which is what `padding-left:max(...)`
   does — it takes the page's own centred gutter whenever the screen is wider
   than --max, and the plain --pad when it is not. */
@media (min-width:860px){
  .hero--split .hero__in{grid-template-columns:1.06fr 1fr; align-items:stretch;
    min-height:clamp(500px,58vh,620px)}
  .hero--split .hero__body{
    justify-content:center;
    padding:clamp(122px,10vw,150px) clamp(38px,4vw,64px)
            clamp(54px,6vw,78px) max((100vw - var(--max)) / 2 + var(--pad), var(--pad));
    max-width:none}
  .hero--split .hero__side{order:0; height:auto}

  /* THE HEADLINE IS CAPPED SMALLER HERE THAN ANYWHERE ELSE, and the reason is
     not typographic — it is about the photograph.

     The picture now fills a TALL column, and object-fit:cover scales it to
     whichever edge is short. At 1440 the column is about 700 wide; if the hero
     is 1035 tall the image scales to 1552 wide and only 45% of its width
     survives, which on the remortgage frame cut a man in half at the edge. Drop
     the hero to ~600 and the same column keeps about 78% of the width — nearly
     the whole picture.

     What was making the hero 1035 tall was the headline: 62px in a 700px
     measure wraps to five lines. So capping it at 46px is what lets the
     photographs be seen whole, which is the entire point of this layout. The
     full 62px still applies to the typographic heroes, which have no picture to
     protect and a much wider measure. */
  .hero--split h1.h1{font-size:clamp(33px,3.3vw,46px); letter-spacing:-.9px}
  .hero--split .hero__body p{font-size:clamp(15.5px,1.25vw,17.5px)}
  /* The buttons keep their own words on one line and WRAP AS WHOLE BUTTONS if
     the column cannot hold both. nowrap on the row was tried first and was
     worse: it kept them side by side by squashing them, so "Review my
     mortgage" broke across two lines inside the button. A button that wraps
     its label looks broken; a row that wraps looks intended. */
  .hero--split .hero__acts .btn{white-space:nowrap}

  /* THE PHOTOGRAPH STARTS BELOW THE HEADER, and the ink runs full width behind
     it. This is the one thing about the split that had to be solved rather
     than chosen.

     The header floats on the hero, so it crosses both columns. Over the ink it
     is fine; over a photograph the white nav lands on whatever happens to be
     there — on the protection frame that is a bright sky and a rainbow kite,
     and "The firm" measured 2.00 against a floor of 4.50. Unreadable, and
     measured rather than guessed.

     A scrim over the top of the picture was the obvious fix and is the wrong
     one: a dark wash across the top of every photograph is precisely the blue
     smoke this layout exists to get rid of. So the picture simply begins
     underneath the header instead. The nav gets flat ink to sit on, the
     photograph gets a clean top edge, and nothing is painted over it at all.

     The offset is the measured header height — 88px, and 110 at 1920 where the
     logo and padding grow — plus a little air so the picture does not touch
     the nav. */
  .hero--split::before{display:none}
  .hero--split .hero__side{margin-top:104px}
}
@media (min-width:1600px){
  .hero--split .hero__side{margin-top:126px}
}

/* ---------- the home page: the form takes the picture's column ----------
   A form the visitor can act on earns that half more than a photograph does,
   and the page still has its mid-page band picture, so it does not go
   pictureless. The card loses the shadow and the white ground it needed when
   it floated on a photograph: on ink it is simply the second column. */
.hero--formcol .hero__side{order:0; height:auto;
  background:#fff;
  padding:clamp(28px,3.4vw,44px) var(--pad)}
.hero--formcol .hero__card{margin:0; max-width:520px; box-shadow:none;
  border-top:0; padding:0; background:transparent}
@media (min-width:860px){
  .hero--formcol .hero__side{display:flex; align-items:center;
    padding:clamp(140px,12vw,178px) clamp(38px,4vw,60px) clamp(64px,7vw,92px)}
  .hero--formcol .hero__card{max-width:440px}
  /* No photograph under the header on this page, so no scrim over it — the
     card's column is white and the nav never crosses it. */
  .hero--formcol .hero__side::before{display:none}
}

/* ---------------------------------------------------------------------------
   .bo — "what could you borrow", the home page's one interactive band.

   Deep ink, so it reads as a different KIND of thing from the white and ivory
   sections either side of it. That contrast is half the reason it is here: the
   fault it was built to fix is that every band on the page had the same shape
   and the same ground, so nothing ever asked to be stopped at.

   The output panel keeps its height whether or not there is a figure in it, so
   typing a number does not shove the page around underneath the reader.
   --------------------------------------------------------------------------- */
.bo{background:var(--ink); color:#fff}
.bo__grid{display:grid; grid-template-columns:1fr; gap:34px}
.bo__lead{color:var(--pale); font-size:16.5px; line-height:1.7; max-width:46ch; margin:0 0 26px}
.bo__fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px}
.bo__fields .field{display:grid; gap:7px}
.bo__fields label{font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  font-weight:600; color:#B9C9E4}
.bo__fields .opt{color:#7E93B8}
.bo__fields input{width:100%; padding:12px 14px; font:inherit; font-size:16.5px; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius:3px}
.bo__fields input::placeholder{color:rgba(255,255,255,.34)}
.bo__fields input:focus{outline:2px solid var(--gold); outline-offset:1px;
  border-color:var(--gold); background:rgba(255,255,255,.11)}

/* 16 Sep 2026, Sonu: "let the figure come here without any rectangle or
   'Put a figure in...' " — the boxed placeholder read as an empty form
   field waiting to be filled in, which is the opposite of what a live
   result should feel like. No border, no fill, no panel: the min-height
   is kept (invisible) purely so the figure appearing does not shove the
   page around underneath the reader, and the box stays empty — not a
   placeholder sentence — until a number is typed. */
.bo__out{padding:clamp(22px,2.4vw,30px) 0; min-height:232px;
  display:flex; flex-direction:column; justify-content:center}
.bo__lab{font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin:0 0 8px}
.bo__big{font-size:clamp(27px,3.4vw,40px); line-height:1.12; color:#fff; font-weight:500;
  letter-spacing:-.5px; margin:0}
.bo__rows{margin-top:20px; display:grid; gap:0}
.bo__rows .row{display:flex; justify-content:space-between; gap:20px; padding:11px 0;
  border-top:1px solid rgba(255,255,255,.12); font-size:15px; color:var(--pale)}
.bo__rows .row b{font-weight:500; color:#fff; text-align:right; white-space:nowrap}

.bo__fine{margin:34px 0 0; font-size:13.5px; line-height:1.72; color:#A9BCD8;
  border-left:2px solid rgba(255,255,255,.2); padding-left:20px; max-width:1000px}
.bo__fine strong{color:#fff}
.bo__acts{display:flex; flex-wrap:wrap; gap:16px; margin-top:28px}
/* "All five calculators" was a translucent outline on flat navy — next to
   invisible, and the calculators page it points to was one of the "hard to
   find" features Sonu flagged 16 Sep 2026. Solid white with navy text gives
   it real weight as a second, clearly-different action beside the gold CTA. */
.bo .btn--ghost{background:#fff; border-color:#fff; color:var(--ink); font-weight:500}
.bo .btn--ghost:hover{background:#E9EEF7; color:var(--ink)}

@media (min-width:901px){
  .bo__grid{grid-template-columns:1.08fr 1fr; gap:clamp(40px,5vw,70px); align-items:start}
}