/* ==========================================================================
   Property hub (/buying-property-abroad): the bands in
   inc/property-guide/render-hub.php, layered on property-lp.css.
   Figma "Property pages" > "Property Page - Hub": frames 1440w, 992w, 768w,
   600w and 375w, one per snap point, as on the country pages:
     <= 599 | 600 - 767 | 768 - 991 | 992 - 1199 | >= 1200
   Mobile first, every rule under .plp. Scope: this file loads only on pages
   with lp_hub_* bands (functions.php enqueues it when pg_has_hub_sections()),
   so the Spain, Israel and Dubai pages never receive it. Rules here on .plp
   itself and on the shared components (.plp-qa, .plp-review, .plp-steps,
   .plp-callback, the forms) are hub-only by construction: no :has() guards or
   extra classes are needed, and the country pages' own CSS is untouched.

   The steps, Q&A, review and callback bands are the country pages' own
   components ("100% same element, same styles", design review 9 Oct 2026):
   where the hub frames redraw them (the steps vertical at 768, a 64px person
   photo, the chat button under the person, quote padding) property-lp.css
   stands. Changed here: the spacing at their edges (the bands around them
   differ), the review's 'card' variant, the steps footer and the 48px it
   hangs from, the callback form's two columns at 992 - 1199 (six fields;
   the hub's 992 frame), and the callback note's 36.8px bottom margin, which
   stood in for the country form's empty last grid row (this form has none).

   Figma artefacts not copied, as on the country pages: the photos the frames
   stretch or squash (hero backdrop, carousel, holiday card, review) are drawn
   undistorted on the same focal point, and the copy colour that changes at
   768 in the calculator band follows the frames as drawn.
   ========================================================================== */

.plp {
  --plp-page: #f0f2f3;
  /* the frames' Tone/600 #7a92a8 is 3:1 on white and fails AA for the text it colours
     (stat labels, card blurbs, the calculator band's copy): the family's muted grey
     stands in, as the 2026 nav's contrast hardening did. Flagged to the designer. */
  --plp-quiet: #5c6f7e;
  --plp-edge: #adbcc9;
  --plp-mist: #f7f7f7;
  --plp-icon: #111418;
  background: var(--plp-page);
}

/* --- shared parts ------------------------------------------------------------ */
/* the hub's dark buttons: ink, square-cornered like every .plp-btn (--ink keeps the why band's 15px) */
.plp .plp-btn--dark { border-color: var(--plp-ink); background: var(--plp-ink); color: #fff; }
.plp .plp-btn--dark:hover, .plp .plp-btn--dark:focus { border-color: #22375f; background: #22375f; color: #fff; }
.plp .plp-btn--outline-dark { height: 52px; border-color: var(--plp-ink); color: var(--plp-ink); }
/* hover and focus fill as Get Started does (the dark button's hover) */
.plp .plp-btn--outline-dark:hover, .plp .plp-btn--outline-dark:focus { border-color: #22375f; background: #22375f; color: #fff; }

.plp .plp-pill--white { background: #fff; color: var(--plp-ink); }
.plp .plp-pill--solid { background: var(--plp-blue); color: #fff; }

/* <picture> is display: contents in property-lp.css, so its empty <source> would be a flex or grid item
   (a site-wide picture source[type] rule sets it to block) */
.plp picture source[type], .plp picture source { display: none; }

/* read by screen readers, not shown */
.plp .plp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* UI glyphs from the design's icon set, drawn in currentColor so one file serves every colour */
.plp-hub-ico { display: inline-block; flex: 0 0 auto; width: 32px; height: 32px; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.plp-hub-ico--arrow { -webkit-mask-image: url('../images/property-lp/hub-ico-arrow-right-dark.svg'); mask-image: url('../images/property-lp/hub-ico-arrow-right-dark.svg'); }
.plp-hub-ico--chevron { -webkit-mask-image: url('../images/property-lp/hub-ico-chevron-right.svg'); mask-image: url('../images/property-lp/hub-ico-chevron-right.svg'); }
.plp-hub-ico--globe { -webkit-mask-image: url('../images/property-lp/hub-ico-currencies-pin.svg'); mask-image: url('../images/property-lp/hub-ico-currencies-pin.svg'); }

/* Excellent 4.8 out of 5, Trustpilot: the review band's rating, on its own */
/* Matched to the drawn line's ink (the frames paste the widget, set in another face): a
   regular-weight score, a lighter "out of 5" (#767676, the AA limit, where the paste is
   paler), 12-13px of ink after "Excellent" and 11 before the star. The logo is the site's
   lockup, unaltered, sized so its wordmark is the drawn 84px (75 on phones); the score's
   negative margin pulls it in, so a wrapped row (below 360px) still starts flush; the
   logo's margins keep the row 35px tall with the wordmark on the text's baseline. */
.plp .plp-hub-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 10.8px; color: #222; white-space: nowrap; }
.plp .plp-hub-rating:hover { color: #222; }
.plp .plp-hub-rating:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: 3px; }
.plp-hub-rating__label { font-size: 20.7px; line-height: 31.55px; }
.plp-hub-rating__score { margin-right: -2.1px; font-size: 18px; line-height: 31.55px; color: #767676; }
.plp-hub-rating__score strong { font-weight: 400; color: #363636; }
.plp .plp-hub-rating__logo { width: 102.6px; height: 33.3px; margin: -2.2px 0 .45px -1.2px; }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.plp-hub-hero__stage { position: relative; overflow: hidden; padding-top: 32px; }
.plp-hub-hero .plp-wrap { position: relative; z-index: 1; padding: 0 16px; }
/* the same photo as the card, blurred and faded behind the frame */
.plp-hub-hero__backdrop { position: absolute; inset: 0; z-index: 0; opacity: .3; pointer-events: none; }
.plp .plp-hub-hero__blur { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 38%; filter: blur(5px); transform: scale(1.06); }
.plp-hub-hero__frame { padding: 16px 16px 0; border-radius: 48px 48px 0 0; background: #fff; }
.plp-hub-hero__card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; height: 400px; overflow: hidden; padding: 24px; border-radius: 32px; background: #025092; }
/* The photo is drawn by height, as in each frame: cover in a box that is a
   share of the card's height, offset from its top, so it keeps its
   proportions at every width; object-position is the frame's crop. The
   placements are the asset manifest's measurements (ASSETS.md, section 2).
   Below 768 the photo starts under the H1: the card's own #025092 fills the
   band above it and the frames' wash blends the photo's top edge into it. */
.plp .plp-hub-hero__photo { position: absolute; z-index: -2; left: 0; top: 14.25%; width: 100%; height: 85.75%; max-width: none; object-fit: cover; object-position: 68.3% 0; }
.plp-hub-hero__card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(-.379deg, rgba(0, 80, 147, 0) 53.945%, #005093 74.955%, #025092 98.496%); pointer-events: none; }
/* 28px below 360, 30 from 360 and the 375 frame's 32 from 375 (the queries before 600), so
   "So is the payment." keeps its own line; whole sizes, as fractional ones set wider on some screens */
.plp .plp-hub-hero__title { font-size: 28px; line-height: 1.1875; font-weight: 400; letter-spacing: 0; color: #fff; text-align: left; }
.plp-hub-hero__line, .plp-hub-hero__part { display: block; }

/* the white frame's lower half: the actions and the rating */
.plp-hub-hero__bar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: 0 0 16px 16px; background: #fff; }
.plp-hub-hero__actions { display: flex; flex-direction: column; gap: 8px; }
.plp .plp-hub-hero__actions .plp-btn { width: 100%; }
.plp .plp-hub-hero__bar .plp-hub-rating { align-self: flex-start; }

/* ==========================================================================
   2. Figures
   ========================================================================== */
.plp-hub-stats { padding-top: 12px; }
.plp-hub-stats .plp-wrap { padding: 0 16px; }
.plp-hub-stats__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.plp .plp-hub-stat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 12px; border-radius: 43px; background: rgba(255, 255, 255, .8); }
.plp-hub-stat__name { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; font-size: 16px; line-height: 19px; font-weight: 700; text-transform: uppercase; color: var(--plp-quiet); }
.plp .plp-hub-stat__icon { flex: 0 0 32px; width: 32px; height: 32px; }
.plp-hub-stat__value { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4.04px; height: 40px; padding: 4.04px 16.16px; border-radius: 99.99px; background: var(--plp-pale); color: var(--plp-blue); font-size: 20px; line-height: 24px; font-weight: 900; letter-spacing: 2.4px; white-space: nowrap; }
.plp-hub-stat__plus { font-size: 25px; letter-spacing: 3px; }
.plp .plp-hub-stats__note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--plp-tone); }
.plp .plp-hub-stats__shield { flex: 0 0 32px; width: 32px; height: 32px; }

/* ==========================================================================
   3. Today's rate: copy, calculator, link cards, Get Started
   ========================================================================== */
.plp-hub-calc { padding-top: 84px; }
.plp-hub-calc .plp-wrap { padding: 0 16px; }
.plp-hub-calc__grid { display: flex; flex-direction: column; align-items: center; }
.plp-hub-calc__copy, .plp-hub-calc__tool, .plp-hub-calc__cta { width: 100%; max-width: 536px; }
.plp-hub-calc__copy { display: flex; flex-direction: column; gap: 32px; }
.plp .plp-hub-calc__copy .plp-h2 { line-height: 35.84px; letter-spacing: -.64px; color: var(--plp-navy); }
.plp .plp-hub-calc__copy p { font-size: 20px; line-height: 31px; color: var(--plp-navy); }
.plp-hub-calc__tool { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
.plp-hub-calc__cta { margin-top: 10px; }
.plp .plp-hub-calc__cta .plp-btn { width: 100%; }

/* the calculator card */
.plp-hub-calc__card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 12px 16px; border: 2px solid var(--plp-blue); border-radius: 16px; background: var(--plp-pale); }
.plp .plp-hub-calc__pill { position: absolute; left: 24px; top: -14.6px; }
.plp .plp-hub-calc__title { font-size: 20px; line-height: 27px; font-weight: 700; letter-spacing: 0; color: var(--plp-blue); }
/* The two rows, as the app's selector: the row the visitor works in (.is-active: the send row
   until the script moves it) is white with a 2px blue border and a solid blue chip; the other is
   pale grey with a hairline, a grey label and a clear chip, and still takes typing and picking.
   Both borders are drawn over the rows (::after), so each chip fills its row to the very edge (no
   sliver at any zoom) and the active border never resizes a row; the rows overlap by the 2px they
   share, where the active border covers the other's hairline. The active border is the focus
   indicator too, so there is no second ring; without the script a focused row takes the active look. */
.plp-hub-calc__pair { display: flex; flex-direction: column; }
.plp-hub-calc__row { position: relative; display: flex; align-items: stretch; background: var(--plp-mist); transition: background-color .15s ease; }
.plp-hub-calc__row::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--plp-rule); border-radius: inherit; pointer-events: none; transition: border-color .15s ease; }
.plp-hub-calc__row--send { border-radius: 7px 7px 0 0; }
.plp-hub-calc__row--receive { margin-top: -2px; border-radius: 0 0 7px 7px; }
.plp-hub-calc__row.is-active, .plp-hub-calc__row:focus-within { background: #fff; }
.plp-hub-calc__row.is-active::after, .plp-hub-calc__row:focus-within::after { z-index: 3; border: 2px solid var(--plp-blue); }
/* 18px in from the row's edge: the 2px band the borders use, then 16 */
.plp-hub-calc__amount { position: relative; overflow: hidden; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 18px 16px 18px 18px; cursor: text; }
.plp .plp-hub-calc__label { display: block; margin: 0; font-size: 16px; line-height: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--plp-quiet); cursor: text; transition: color .15s ease; }
.plp .plp-hub-calc__row.is-active .plp-hub-calc__label, .plp .plp-hub-calc__row:focus-within .plp-hub-calc__label { color: var(--plp-blue); }
.plp .plp-hub-calc__input {
  display: block;
  width: 100%;
  height: 28.8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--plp-text);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.plp .plp-hub-calc__input:focus { outline: none; }
/* A figure being recomputed: dimmed at once (it is still the last indicative figure, and still
   legible). While its rate is on the way, a soft band of light sweeps across the whole cell over
   the dimmed figure (the card-processing sheen), 60% of the cell wide and leaning 18deg; it is
   drawn inside the cell and moved by transform alone, so nothing else moves. The answer then
   counts in (the script) and the figure brightens. With reduced motion, the dim alone. */
.plp-hub-calc__row--send .plp-hub-calc__amount { border-top-left-radius: 7px; }
.plp-hub-calc__row--receive .plp-hub-calc__amount { border-bottom-left-radius: 7px; }
.plp-hub-calc__amount.is-stale .plp-hub-calc__input { opacity: .4; }
.plp-hub-calc__amount::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--plp-sheen-edge) 30%, var(--plp-sheen-core) 50%, var(--plp-sheen-edge) 70%, rgba(255, 255, 255, 0)); opacity: 0; pointer-events: none; transform: translateX(calc(-100% - 24px)) skewX(-18deg); }
.plp-hub-calc__amount.is-loading::after { opacity: 1; will-change: transform; animation: plp-hub-calc-sheen 1.1s cubic-bezier(.45, .05, .35, 1) infinite; }
@keyframes plp-hub-calc-sheen { from { transform: translateX(calc(-100% - 24px)) skewX(-18deg); } to { transform: translateX(calc(167% + 24px)) skewX(-18deg); } }
/* the light, tuned to each row: a white core with pale-blue edges on the grey row; pale blue on
   the white row, where white light would not show */
.plp-hub-calc__amount { --plp-sheen-core: rgba(255, 255, 255, .8); --plp-sheen-edge: rgba(21, 149, 202, .13); }
.plp-hub-calc__row.is-active .plp-hub-calc__amount, .plp-hub-calc__row:focus-within .plp-hub-calc__amount { --plp-sheen-core: rgba(21, 149, 202, .17); --plp-sheen-edge: rgba(21, 149, 202, .07); }
.plp .plp-hub-calc__input.is-settling { animation: plp-hub-calc-settle .18s ease-out; }
@keyframes plp-hub-calc-settle { from { opacity: .4; } to { opacity: 1; } }
/* the currency chip: flag, code and chevron, with the real <select> laid over them; clear on the
   pale row, solid blue on the active one, and out to the row's corner under the border */
.plp-hub-calc__ccy { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 18px 0 16px; color: var(--plp-text); transition: background-color .15s ease, color .15s ease; }
.plp-hub-calc__row--send .plp-hub-calc__ccy { border-top-right-radius: 7px; }
.plp-hub-calc__row--receive .plp-hub-calc__ccy { border-bottom-right-radius: 7px; }
.plp-hub-calc__row.is-active .plp-hub-calc__ccy, .plp-hub-calc__row:focus-within .plp-hub-calc__ccy { background: var(--plp-blue); color: #fff; }
.plp-hub-calc__ccy:focus-within { outline: 2px solid #fff !important; outline-offset: -6px; }
.plp .plp-hub-calc__flag { display: none; flex: 0 0 auto; width: 30px; height: 20px; margin-right: -2px; }
.plp-hub-calc__code { min-width: 43px; font-size: 18px; line-height: 21.6px; font-weight: 700; letter-spacing: .036px; }
.plp-hub-calc__chev { flex: 0 0 auto; width: 18px; height: 10px; background-color: currentColor; color: var(--plp-quiet); transition: color .15s ease; -webkit-mask: url('../images/property-lp/hub-ico-chevron-down.svg') no-repeat center / 18px 10px; mask: url('../images/property-lp/hub-ico-chevron-down.svg') no-repeat center / 18px 10px; }
.plp-hub-calc__row.is-active .plp-hub-calc__chev, .plp-hub-calc__row:focus-within .plp-hub-calc__chev { color: #fff; }
.plp .plp-hub-calc__select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; -webkit-appearance: none; appearance: none; }

/* With the script the chip is a button that opens the app's picker below the row; the select
   stays, out of sight and out of the tab order, as the value the rest of the script reads. The
   chevron turns into a magnifier while the picker is open. */
.plp-hub-calc__card.is-picker .plp-hub-calc__ccy { padding: 0; }
.plp-hub-calc__card.is-picker .plp-hub-calc__ccy:focus-within { outline: 0 !important; }
.plp .plp-hub-calc__card.is-picker .plp-hub-calc__select { inset: auto; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none; }
/* align-self: stretch, against the segment's align-items: center: the button fills the whole
   coloured area, so a click lands anywhere on it, not only on the flag, code or chevron */
.plp .plp-hub-calc__pick { display: flex; flex: 1 0 auto; align-self: stretch; align-items: center; gap: 8px; height: auto; min-height: 0; margin: 0; padding: 0 18px 0 16px; border: 0; border-radius: inherit; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.plp .plp-hub-calc__pick:focus { outline: 0; }
.plp .plp-hub-calc__pick:focus-visible { outline: 2px solid #fff !important; outline-offset: -6px; }
.plp-hub-calc__ccy.is-open .plp-hub-calc__chev { height: 18px; -webkit-mask-image: url('../images/property-lp/hub-ico-search.svg'); mask-image: url('../images/property-lp/hub-ico-search.svg'); -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }

/* the picker: a white panel under the row, as wide as the row (the card's width on a phone), with
   the search on top, the list (flag, then "EUR - Euro") and a link out at the foot */
.plp-hub-pick { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--plp-rule); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(13, 54, 74, .16); color: var(--plp-ink); text-align: left; animation: plp-hub-pick-in .15s ease-out; }
.plp-hub-pick[hidden], .plp .plp-hub-pick__opt[hidden], .plp .plp-hub-pick__empty[hidden] { display: none; }
@keyframes plp-hub-pick-in { from { opacity: 0; transform: translateY(-4px); } }
.plp-hub-pick__search { display: flex; flex: 0 0 auto; align-items: center; gap: 17px; padding: 0 16px 0 25px; border-bottom: 1px solid var(--plp-rule); }
.plp-hub-pick__search:focus-within { box-shadow: inset 0 -2px 0 var(--plp-blue); }
.plp-hub-pick__mag { flex: 0 0 20px; width: 20px; height: 20px; background-color: var(--plp-placeholder); -webkit-mask: url('../images/property-lp/hub-ico-search.svg') no-repeat center / 20px 20px; mask: url('../images/property-lp/hub-ico-search.svg') no-repeat center / 20px 20px; }
.plp .plp-hub-pick__input { display: block; flex: 1 1 auto; width: auto; min-width: 0; height: 52px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--plp-ink); font-family: inherit; line-height: 52px; -webkit-appearance: none; appearance: none; }
.plp .plp-hub-pick__input::placeholder { color: var(--plp-muted); font-style: italic; opacity: 1; }
.plp .plp-hub-pick__input:focus { outline: 0; box-shadow: none; }
.plp .plp-hub-pick__list { position: relative; flex: 0 1 auto; max-height: 360px; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.plp .plp-hub-pick__opt { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 8px 16px 8px 20px; font-size: 16px; line-height: 20px; color: var(--plp-ink); cursor: pointer; }
.plp .plp-hub-pick__opt.is-active { background: var(--plp-mist); }
.plp .plp-hub-pick__flag { flex: 0 0 30px; width: 30px; height: 20px; }
.plp-hub-pick__text { min-width: 0; }
.plp-hub-pick__code { font-weight: 700; }
.plp .plp-hub-pick__empty { margin: 0; padding: 14px 20px; font-size: 16px; line-height: 22px; color: var(--plp-muted); }
.plp .plp-hub-pick__foot { display: block; flex: 0 0 auto; padding: 12px 16px 13px; border-top: 1px solid var(--plp-rule); color: var(--plp-blue-dark); font-size: 16px; line-height: 20px; text-align: center; text-decoration: none; }
.plp .plp-hub-pick__foot:hover { color: var(--plp-blue-dark); text-decoration: underline; }
.plp .plp-hub-pick__foot:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: -3px; }
/* the select's optgroups as headed sections (the form's "Popular currencies", "All currencies") */
.plp .plp-hub-pick__group[hidden] { display: none; }
.plp .plp-hub-pick__group-label { margin: 0; padding: 12px 20px 4px; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--plp-muted); }
.plp .plp-hub-pick__group:not([hidden]) ~ .plp-hub-pick__group:not([hidden]) { margin-top: 4px; border-top: 1px solid var(--plp-rule); }
/* no single flag (a currency shared by several countries): a neutral marker in the flag's place, so rows line up */
.plp .plp-hub-pick__flag--none, .plp .plp-pick-field__flag--none { display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: #f1f4f7; box-shadow: inset 0 0 0 1px var(--plp-rule); }
.plp .plp-hub-pick__flag--none::before, .plp .plp-pick-field__flag--none::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--plp-a); }

/* The form's currency fields with the script: the field box is a button (the field control's own
   styles, so the focus, invalid border and error line apply as they did to the select) showing the
   choice or the placeholder; the select stays out of sight as the posted value. The chevron turns
   into a magnifier while the picker is open, as on the calculator's chips. */
.plp .plp-field__select.is-picker select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.plp .plp-pick-field { display: flex; align-items: center; text-align: left; letter-spacing: normal; text-transform: none; cursor: pointer; }
.plp-pick-field__value { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plp-pick-field__placeholder { color: var(--plp-placeholder); }
.plp .plp-pick-field__flag { flex: 0 0 auto; width: 24px; height: 16px; }
.plp-pick-field__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plp-pick-field__code { font-weight: 700; }
/* opening upward, where the page would cut the panel off below */
.plp-hub-pick.is-above { top: auto; bottom: calc(100% + 4px); animation-name: plp-hub-pick-up; }
@keyframes plp-hub-pick-up { from { opacity: 0; transform: translateY(4px); } }
.plp-field__select.is-open::after { width: 16px; height: 16px; margin-top: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='6.5' stroke='%230D364A' stroke-width='2'/%3E%3Cpath d='M13.4 13.4L18 18' stroke='%230D364A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
/* the locked amount field (no currency needed yet): its select takes no pointer events, so the field
   catches the click (and shows it can be clicked) and opens the "currency you need" picker */
.plp .plp-field.is-locked select { pointer-events: none; }
.plp .plp-field.is-locked .plp-field__select, .plp .plp-field.is-locked .plp-field__label { cursor: pointer; }
/* the "currency you need" field, cued from there: one soft brand-blue pulse */
.plp .plp-pick-field.is-cued { animation: plp-hub-cue .6s ease-out 1; }
@keyframes plp-hub-cue { 0% { border-color: var(--plp-blue); box-shadow: 0 0 0 0 rgba(21, 149, 202, .45); } 100% { box-shadow: 0 0 0 10px rgba(21, 149, 202, 0); } }
/* after a pick by pointer the refocused trigger shows no keyboard ring (the next key brings it back) */
.plp .plp-hub-calc__pick[data-plp-quiet-focus]:focus-visible { outline: 0 !important; }
.plp .plp-field__control[data-plp-quiet-focus]:focus { border-color: var(--plp-rule) !important; box-shadow: none !important; }
.plp .plp-field.is-invalid .plp-field__control[data-plp-quiet-focus]:focus { border-color: var(--plp-error) !important; box-shadow: none !important; }
.plp .plp-hub-calc__callback { width: 100%; }
.plp .plp-hub-calc__note { font-size: 15px; line-height: 22px; color: var(--plp-tone); }

/* the two link cards under the calculator */
.plp-hub-calc__links { display: flex; flex-direction: column; gap: 10px; }
.plp .plp-hub-link { display: flex; align-items: center; gap: 16px; padding: 16px 8px 16px 16px; border-radius: 16px; background: #fff; color: var(--plp-ink); transition: box-shadow .2s ease; }
.plp .plp-hub-link:hover { box-shadow: 0 8px 24px rgba(13, 54, 74, .1); color: var(--plp-ink); }
.plp .plp-hub-link:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: 3px; }
.plp-hub-link__icon { display: flex; flex: 0 0 auto; }
.plp .plp-hub-link__icon img { width: 32px; height: 32px; }
.plp-hub-link__text { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; }
.plp-hub-link__title { font-size: 15px; line-height: 18px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--plp-ink); }
.plp-hub-link__sub { font-size: 16px; line-height: 22px; color: var(--plp-quiet); }
.plp-hub-link .plp-hub-ico--chevron { color: var(--plp-icon); }

/* ==========================================================================
   4. Where you can buy
   ========================================================================== */
/* Below 992: one card per country, scrolled sideways between snap points. The
   track's side padding centres a slide (536 wide at most) and leaves the next
   one peeking: 8px at 375, 16px at 600, 100px at 768. The photo row is at
   least the frames' 274px (a headline that wraps shorter than Figma's would
   shrink it) and takes any extra height, so every card sits at the same y. */
.plp-hub-countries { padding: 84px 0; }
.plp-hub-countries .plp-wrap { padding: 0; }
.plp-hub-countries__panel { position: relative; }
.plp .plp-hub-countries__track { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 max(16px, calc((100% - 536px) / 2)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.plp-hub-countries__track::-webkit-scrollbar { display: none; }
.plp .plp-hub-countries__slide { position: relative; isolation: isolate; display: grid; flex: 0 0 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(274px, 1fr) auto; overflow: hidden; border-radius: 32px; background: var(--plp-ink); scroll-snap-align: center; }
.plp-hub-countries__media { position: relative; grid-area: 1 / 1; overflow: hidden; }
.plp .plp-hub-countries__photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.plp .plp-hub-countries__slide--spain .plp-hub-countries__photo { height: 137.75%; object-position: 65.5% 0; }
.plp .plp-hub-countries__slide--dubai .plp-hub-countries__photo { height: 128.83%; object-position: 77.6% 0; }
.plp-hub-countries__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 31, 61, .25) 0%, rgba(15, 31, 61, .25) 100%), linear-gradient(180deg, rgba(15, 31, 61, 0) 50.118%, var(--plp-ink) 100%); }
.plp .plp-hub-countries__headline { position: relative; z-index: 1; grid-area: 1 / 1; padding: 32px 24px 164px; font-size: 20px; line-height: 26px; color: #fff; }
.plp-hub-countries__headline--wide { display: none; }
.plp .plp-hub-countries__card { position: relative; z-index: 1; display: grid; grid-area: 2 / 1; grid-template-columns: minmax(0, 1fr) 32px; column-gap: 16px; row-gap: 8px; align-items: end; margin: 0 15px 16px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .3); color: var(--plp-ink); }
.plp .plp-hub-countries__card:hover { color: var(--plp-ink); }
.plp .plp-hub-countries__card:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
.plp-hub-countries__name { display: flex; grid-column: 1; align-items: center; gap: 8px; font-size: 15px; line-height: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.plp .plp-hub-countries__flag { flex: 0 0 28px; width: 28px; height: 28px; }
.plp-hub-countries__blurb { grid-column: 1; font-size: 16px; line-height: 22px; color: var(--plp-quiet); }
.plp-hub-countries__card .plp-hub-ico--arrow { grid-column: 2; grid-row: 1 / span 2; align-self: end; color: var(--plp-icon); }
/* position dots under the cards (decorative: the slides scroll by hand) */
.plp-hub-countries__dots { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.plp-hub-countries__dot { width: 24px; height: 4px; border-radius: 16px; background: var(--plp-ink); opacity: .3; }
.plp-hub-countries__dot.is-active { width: 50px; opacity: 1; }
.plp .plp-hub-countries__more { display: flex; align-items: center; gap: 16px; margin: 0 16px; padding: 12px 32px 12px 16px; font-size: 20px; line-height: 20px; font-weight: 700; color: var(--plp-blue); }
.plp .plp-hub-countries__more:hover { color: var(--plp-blue-dark); }
.plp .plp-hub-countries__more:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: 2px; }
.plp-hub-countries__more .plp-hub-ico--globe { display: none; }
.plp-hub-countries__more-label { white-space: nowrap; }

/* ==========================================================================
   5. Why buyers use CurrencyTransfer
   ========================================================================== */
/* the phone runs off the left edge and down to the app strip's rule, so the band clips it */
.plp-hub-why { overflow: hidden; }
.plp-hub-why .plp-wrap { padding: 0 24px; }
.plp-hub-why__head { padding-bottom: 64px; }
.plp .plp-hub-why .plp-h2 { line-height: 35.84px; letter-spacing: -.64px; }
.plp .plp-hub-why .plp-lead { color: var(--plp-text); }
.plp .plp-hub-why__list { display: flex; flex-direction: column; gap: 48px; padding-bottom: 16px; }
.plp .plp-hub-why__more { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--plp-blue); }
.plp .plp-hub-why__more:hover { color: var(--plp-blue-dark); }
.plp .plp-hub-why__more:focus-visible { outline: 2px solid var(--plp-blue) !important; outline-offset: 2px; }
.plp-hub-why__more .plp-hub-ico { width: 28px; height: 28px; }
/* points 3 and 4: title and text 8 apart (the country items' rule), Learn More 4 under the text */
.plp .plp-why__item:nth-child(n+3) .plp-hub-why__more { margin-top: -4px; }
/* the phone: the 781 x 651 image box of the frames, with the image's own 105.75% crop clipped at the rule */
.plp-hub-why__media { position: relative; height: 676px; }
.plp .plp-hub-why__phone { position: absolute; left: calc(50% - 562px); bottom: -37.4px; width: 740.7px; height: 688.4px; max-width: none; }

/* ==========================================================================
   6. Get the app
   ========================================================================== */
.plp-hub-qr { padding: 48px 0 84px; border-top: 1px solid var(--plp-rule); }
.plp-hub-qr .plp-wrap { padding: 0 16px; }
.plp-hub-qr__card { position: relative; display: flex; align-items: stretch; justify-content: space-between; padding: 16px; border-radius: 16px; background: #fff; }
.plp .plp-hub-qr__pill { position: absolute; left: 24px; top: -13px; margin: 0; }
.plp-hub-qr__body { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding-top: 16px; }
.plp .plp-hub-qr__text { font-size: 16px; line-height: 24px; color: var(--plp-muted); }
.plp-hub-qr__text--wide { display: none; }
.plp .plp-hub-qr__stores { display: flex; flex-wrap: wrap; gap: 8px; }
.plp .plp-hub-qr__store { display: block; border-radius: 8px; }
.plp .plp-hub-qr__store:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: 2px; }
.plp .plp-hub-qr__store img { width: 150px; height: 44.531px; }
/* the QR code is for scanning from a computer: phones get the badges only */
.plp-hub-qr__scan { display: none; }

/* ==========================================================================
   7. How it works (property-lp.css) and its footer
   ========================================================================== */
.plp .plp-steps__inner { padding-top: 0; }
/* the why band's footer below 600: text, then the compact button */
.plp-steps__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--plp-rule); }
.plp .plp-steps__foot p { order: -1; font-size: 18px; line-height: 24px; color: var(--plp-muted); }
.plp .plp-steps__foot .plp-btn { width: 100%; } /* full width on phones, as the hero's CTA (Stevan, 10 Oct 2026); auto from 600 */

/* the Q&A sits 84 under the footer (property-lp.css: 48 between bands) */
.plp .plp-steps + .plp-qa { margin-top: 84px; }

/* ==========================================================================
   8. Buyer stories
   ========================================================================== */
.plp-hub-reasons { padding-bottom: 32px; }
.plp-hub-reasons .plp-wrap { padding: 0 24px; }
.plp-hub-reasons__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.plp .plp-hub-reason { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 425px; overflow: hidden; padding: 32px 24px 12px; border-radius: 32px; background: var(--plp-ink); color: #fff; }
.plp .plp-hub-reason__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.plp-hub-reason::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.plp-hub-reason__text { display: flex; flex-direction: column; gap: 12px; }
.plp .plp-hub-reason__title { font-size: 15px; line-height: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.plp .plp-hub-reason__text p { font-size: 18px; line-height: 24px; color: #fff; }
/* Each photo's box is the frame's own drawing, measured by template-matching the photos
   into the five frames: top-aligned, and taller than the card where the frame draws it so
   (on phones the frame also squeezes holiday and retire sideways; the height is kept and
   the photo is not distorted). Each has its own scrim: the frames' gradients, the angle
   following the card's shape. */
.plp .plp-hub-reason--holiday .plp-hub-reason__photo { height: 110.6%; object-position: 0 0; }
.plp-hub-reason--holiday::before { background: linear-gradient(180deg, rgba(15, 31, 61, 0) 50.118%, rgba(15, 31, 61, .4) 100%); }
.plp .plp-hub-reason--retire .plp-hub-reason__photo { height: 112%; object-position: 0 0; }
.plp-hub-reason--retire::before { background: linear-gradient(-10.095deg, rgba(15, 31, 61, 0) 32.118%, rgba(15, 31, 61, .67) 94.274%); }
.plp-hub-reason--invest::before { background: linear-gradient(-8.753deg, rgba(15, 31, 61, 0) 14.416%, #837976 88.501%); }

/* ==========================================================================
   9. Client review, 'card' variant: a solid white card on a photo that
   fills the band at every width (property-lp.css: the photo sits under a
   band of sky colour below 992), and no figure pills under it
   ========================================================================== */
.plp .plp-review--card { padding-bottom: 164px; }
.plp .plp-review--card .plp-review__bg { top: 0; height: auto; }
.plp .plp-review--card .plp-review__img { object-position: 83.2% 50%; }
.plp .plp-review--card .plp-review__card { padding: 32px 24px 24px; background: #fff; }
.plp .plp-review--card .plp-review__quote p { padding-left: 0; }
/* the hub's frames show the rating from 768 only; the same metrics as the hero's */
.plp .plp-review--card .plp-review__rating { display: none; gap: 0 12px; color: #222; }
.plp .plp-review--card .plp-review__rating:hover { color: #222; }
.plp .plp-review--card .plp-review__score { margin-right: -4px; color: #767676; }
.plp .plp-review--card .plp-review__score strong { font-weight: 400; color: #363636; }
.plp .plp-review--card .plp-review__tp { width: 115.6px; height: 37.5px; margin: -3px 0 .5px -1.3px; }

/* ==========================================================================
   10. Callback: no empty row under this form, so no space for one
   ========================================================================== */
.plp .plp-form--callback .plp-form__note { margin-bottom: 0; }
/* the band edge: the copy column's own 20px (property-lp.css) plus this put the pill where the frames do */
.plp-callback { padding-top: 10px; }

/* ==========================================================================
   360 and 375: the hero title steps up to the 375 frame's 32px
   ========================================================================== */
@media (min-width: 360px) {
  .plp .plp-hub-hero__title { font-size: 30px; }
}
@media (min-width: 375px) {
  .plp .plp-hub-hero__title { font-size: 32px; }
}

/* ==========================================================================
   600 - 767
   ========================================================================== */
@media (min-width: 600px) {
  /* the form's currency panel: at least 320px wide beside a narrow column (the right column's opens leftward) */
  .plp .plp-field__select .plp-hub-pick { right: auto; width: 320px; width: max(100%, 320px); }
  .plp .plp-field__select.is-end .plp-hub-pick { left: auto; right: 0; }

  .plp .plp-hub-rating { flex-wrap: nowrap; gap: 0 12px; }
  .plp-hub-rating__label { font-size: 23px; line-height: 35px; }
  .plp-hub-rating__score { margin-right: -4px; font-size: 20px; line-height: 35px; }
  .plp .plp-hub-rating__logo { width: 115.6px; height: 37.5px; margin: -3px 0 .5px -1.3px; }

  .plp-hub-hero .plp-wrap, .plp-hub-stats .plp-wrap, .plp-hub-calc .plp-wrap, .plp-hub-qr .plp-wrap { padding: 0 32px; }
  .plp .plp-hub-hero__photo { top: 4%; height: 107.25%; object-position: 59.4% 0; }
  .plp .plp-hub-hero__title { font-size: 42px; line-height: 52px; }
  .plp-hub-hero__actions { flex-direction: row; }
  .plp .plp-hub-hero__actions .plp-btn { flex: 1 1 auto; width: auto; }

  .plp .plp-hub-calc__flag { display: block; }
  .plp-hub-link__title { line-height: 18px; }

  .plp .plp-hub-countries__track { gap: 16px; padding: 0 max(32px, calc((100% - 536px) / 2)); }
  .plp .plp-hub-countries__headline { padding: 32px 32px 164px; }
  .plp .plp-hub-countries__more { justify-content: center; margin: 0 32px; }

  .plp-hub-qr__body { padding-top: 16px; }
  .plp .plp-hub-qr__stores { gap: 16px; }
  .plp .plp-hub-qr__store img { width: 175px; height: 51.953px; }

  /* the footer becomes a row: the button (the hub's square corners and size), then the text */
  .plp-steps__foot { flex-direction: row; align-items: center; justify-content: center; padding-top: 32px; }
  .plp .plp-steps__foot p { order: 0; flex: 1 1 0; }
  .plp .plp-steps__foot .plp-btn { flex: 0 0 auto; width: auto; max-width: none; padding: 0 28px; border-radius: 8px; font-size: 16px; letter-spacing: 1px; }

  .plp .plp-hub-reason--holiday .plp-hub-reason__photo { height: 100%; object-position: 50% 37.9%; }
  .plp .plp-hub-reason--retire .plp-hub-reason__photo { height: 100%; object-position: 50% 50%; }
  .plp-hub-reason--retire::before { background: linear-gradient(-6.02deg, rgba(15, 31, 61, 0) 32.118%, rgba(15, 31, 61, .67) 94.274%); }
  .plp .plp-hub-reason--invest .plp-hub-reason__photo { object-position: 50% 32.9%; }
  .plp-hub-reason--invest::before { background: linear-gradient(-5.21deg, rgba(15, 31, 61, 0) 14.416%, #837976 88.501%); }

  .plp .plp-review--card .plp-review__card { padding: 32px 32px 24px; }
  .plp .plp-review--card .plp-review__quote p { padding-left: 8px; }

  .plp-callback { padding-top: 28px; }
}

/* ==========================================================================
   768 - 991
   ========================================================================== */
@media (min-width: 768px) {
  .plp-hub-hero__stage { padding-top: 64px; }
  .plp-hub-hero__card { height: 450px; }
  /* from 768 the photo fills the card; the wash is not drawn */
  .plp .plp-hub-hero__photo { top: -8%; height: 116.89%; object-position: 64.6% 0; }
  .plp-hub-hero__card::before { content: none; }
  .plp .plp-hub-hero__title { font-size: 55px; line-height: 64px; }
  .plp-hub-hero__part { display: inline; }
  .plp-hub-hero__bar { gap: 16px; }
  .plp-hub-hero__actions { gap: 16px; }
  .plp .plp-hub-hero__actions .plp-btn { flex: 0 0 auto; }

  .plp-hub-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .plp .plp-hub-calc__copy p { color: var(--plp-quiet); }
  .plp-hub-calc__card { padding: 32px; }
  /* the icon sits in an 8px box and the text starts at 17% of the row, as drawn */
  .plp-hub-link__icon { padding: 8px; }
  .plp-hub-link__text { margin-left: 15px; }
  .plp-hub-link__title { line-height: 13px; }

  .plp-hub-why .plp-wrap { padding: 0 32px; }
  .plp .plp-hub-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding-bottom: 0; }
  .plp-hub-why__list .plp-why__item { align-self: start; }
  .plp-hub-why__media { height: 400px; margin-top: 48px; }
  .plp .plp-hub-why__phone { left: calc(50% - 386px); bottom: -92.8px; width: 573px; height: 532.6px; }

  .plp-hub-qr__card { max-width: 600px; margin: 0 auto; padding: 16px 16px 16px 24px; }
  .plp-hub-qr__body { padding: 16px 32px 8px 0; }
  .plp-hub-qr__text--wide { display: block; }
  .plp-hub-qr__text--small { display: none; }
  /* the code is the card's inner height in the frames (140): fixed, so the badges keep their row */
  .plp-hub-qr__scan { display: flex; flex: 0 0 140px; align-self: center; width: 140px; height: 140px; }
  .plp-hub-qr__code { display: block; width: 100%; height: 100%; }

  /* the footer hangs on the steps' rule (property-lp.css draws it from 768): 48 under the text, as drawn */
  .plp .plp-steps__body, .plp .plp-steps__item:last-child .plp-steps__body { padding-bottom: 48px; }
  .plp-steps__foot { max-width: 600px; margin: 0 auto; border-top: 0; }

  .plp-hub-reasons { padding-top: 52px; }
  .plp-hub-reasons .plp-wrap { padding: 0 32px; }
  .plp-hub-reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd card out spans the row (the frame's third card) */
  .plp-hub-reason:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plp .plp-hub-reason--holiday .plp-hub-reason__photo { height: 112.9%; object-position: 40% 0; }
  .plp-hub-reason--retire::before { background: linear-gradient(-9.606deg, rgba(15, 31, 61, 0) 32.118%, rgba(15, 31, 61, .67) 94.274%); }
  .plp .plp-hub-reason--retire .plp-hub-reason__photo { height: 114.1%; object-position: 22% 0; }
  .plp .plp-hub-reason--invest .plp-hub-reason__photo { object-position: 50% 50%; }
  .plp-hub-reason--invest::before { background: linear-gradient(-4.09deg, rgba(15, 31, 61, 0) 14.416%, #837976 88.501%); }

  .plp .plp-review--card { min-height: 0; }
  .plp .plp-review--card .plp-review__rating { display: inline-flex; }
  .plp .plp-review--card .plp-review__img { object-position: 80% 50%; }

  /* the copy column has its own 20px on top (property-lp.css): the card and copy start 80 down, as drawn */
  .plp-callback { padding-top: 60px; }
}

/* ==========================================================================
   992 - 1199
   ========================================================================== */
@media (min-width: 992px) {
  .plp-hub-hero__card { padding: 32px; }
  .plp .plp-hub-hero__photo { top: -7.33%; height: 107.33%; object-position: 76.2% 0; }
  .plp-hub-hero__bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .plp .plp-hub-hero__bar .plp-hub-rating { align-self: center; }

  /* one row of pills; the optional one (countries) steps out until 1200 */
  .plp-hub-stats__list { display: flex; }
  .plp .plp-hub-stat { flex: 1 1 0; }
  .plp .plp-hub-stat--optional { display: none; }
  .plp .plp-hub-stats__note { padding: 0 12px; }

  /* the calculator on the left, the copy and button centred beside it */
  .plp-hub-calc__grid { display: grid; grid-template-columns: 485px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "tool ." "tool copy" "tool cta" "tool ."; column-gap: 48px; align-items: start; }
  .plp-hub-calc__copy { grid-area: copy; max-width: 680.65px; }
  .plp-hub-calc__tool { grid-area: tool; max-width: none; margin-top: 0; }
  .plp-hub-calc__cta { grid-area: cta; max-width: none; margin-top: 22px; }
  .plp .plp-hub-calc__cta .plp-btn { width: auto; }
  .plp-hub-link__text { margin-left: 6px; }

  /* The panel: the slides' photos fill a navy box (only the active one shows,
     sliding in from the right), its headline top left, the three cards along
     the bottom with their position bars over them, and the notch under the
     box's square bottom-right corner. The slides are display: contents, so
     their photos, headlines and cards are the box's own grid items. */
  .plp-hub-countries { padding: 84px 0; }
  .plp-hub-countries .plp-wrap { padding: 0 32px; }
  .plp-hub-countries__panel { overflow: hidden; padding-bottom: 56px; border-radius: 32px; }
  .plp .plp-hub-countries__track { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 0 16px; height: 423px; overflow: hidden; padding: 32px 24px 24px; border-radius: 32px 32px 0 32px; background: var(--plp-ink); scroll-snap-type: none; }
  .plp .plp-hub-countries__slide { display: contents; }
  /* grid-area auto: an absolute grid item placed in a cell would take that cell as its box */
  .plp-hub-countries__media { position: absolute; inset: 0; z-index: -1; grid-area: auto; transform: translateX(100%); transition: none; }
  .plp .plp-hub-countries__slide--spain .plp-hub-countries__photo, .plp .plp-hub-countries__slide--dubai .plp-hub-countries__photo { height: 100%; object-position: 50% 50%; }
  .plp-hub-countries__media::after { background: linear-gradient(180deg, rgba(15, 31, 61, 0) 50.118%, var(--plp-ink) 100%); }
  .plp-hub-countries__slide--dubai .plp-hub-countries__media::after { background: linear-gradient(174.47deg, rgba(15, 31, 61, .3) 20.774%, rgba(15, 31, 61, 0) 50.13%), linear-gradient(180deg, rgba(15, 31, 61, 0) 50.118%, var(--plp-ink) 100%); }
  .plp .plp-hub-countries__headline { grid-row: 1; grid-column: 1 / -1; align-self: start; max-width: calc((100% - 16px) / 2 + 16px); padding: 0 8px; font-size: 28px; line-height: 32px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
  .plp-hub-countries__headline--wide { display: block; }
  .plp-hub-countries__headline--small { display: none; }
  .plp .plp-hub-countries__card { grid-row: 2; grid-column: auto; align-self: stretch; margin: 0; }
  /* the position bar over each card */
  .plp-hub-countries__card::before { content: ''; position: absolute; left: 50%; top: -12px; width: 100px; height: 4px; margin-left: -50px; border-radius: 16px; background: #fff; opacity: .3; transition: opacity .35s ease; }
  .is-active > .plp-hub-countries__media { transform: none; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .is-leaving > .plp-hub-countries__media { transform: translateX(-100%); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .plp .is-active > .plp-hub-countries__headline { opacity: 1; visibility: visible; transition: opacity .35s ease .2s, visibility 0s; }
  .is-active > .plp-hub-countries__card::before { opacity: 1; }
  /* a hovered or focused card shows its slide at once */
  .plp-hub-countries__track.is-instant .plp-hub-countries__media,
  .plp-hub-countries__track.is-instant .plp-hub-countries__headline,
  .plp-hub-countries__track.is-instant .plp-hub-countries__card::before { transition: none; }
  .plp-hub-countries__dots { display: none; }
  /* the notch: a tab under the box's corner, shouldered by the design's curve */
  .plp .plp-hub-countries__more { position: absolute; right: 0; bottom: 0; justify-content: flex-start; width: 424px; height: 56px; margin: 0; padding: 8px 39px 16px 8px; border-radius: 0 0 16px 0; background: var(--plp-ink); font-size: 20px; line-height: 16px; letter-spacing: 1px; color: #fff; }
  .plp .plp-hub-countries__more:hover { color: #fff; }
  .plp .plp-hub-countries__more:hover .plp-hub-countries__more-label { text-decoration: underline; text-underline-offset: 4px; }
  .plp .plp-hub-countries__more:focus-visible { outline: 3px solid var(--plp-blue) !important; outline-offset: -3px; }
  .plp-hub-countries__more::before { content: ''; position: absolute; top: 0; right: 100%; width: 79px; height: 55.852px; background: url('../images/property-lp/hub-notch.svg') no-repeat 0 0 / 79px 55.852px; transform: scaleY(-1); }
  .plp-hub-countries__more .plp-hub-ico--globe { display: inline-block; }
  .plp-hub-countries__more-label { flex: 1 1 auto; }

  .plp-hub-why__head { width: 810px; max-width: 100%; margin: 0 auto; }
  .plp-hub-why__row { display: grid; grid-template-columns: minmax(0, 1fr) 530px; column-gap: 48px; align-items: end; }
  .plp .plp-hub-why__list { display: flex; grid-column: 2; grid-row: 1; padding-bottom: 64px; }
  .plp-hub-why__media { grid-column: 1; grid-row: 1; align-self: stretch; height: auto; margin-top: 0; }
  .plp .plp-hub-why__phone { left: auto; right: 2.3px; bottom: -37.4px; width: 740.7px; height: 688.4px; }

  .plp-steps__foot { max-width: none; padding: 32px 0; }
  .plp .plp-steps__foot .plp-btn { min-width: 207px; }
  .plp .plp-steps__foot p { flex: 0 1 585px; }

  .plp-hub-reasons { padding-bottom: 64px; }
  .plp-hub-reasons__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plp-hub-reason:last-child:nth-child(odd) { grid-column: auto; }
  .plp .plp-hub-reason--holiday .plp-hub-reason__photo { object-position: 42% 0; }
  .plp .plp-hub-reason--retire .plp-hub-reason__photo { height: 124.2%; object-position: 8.3% 0; }
  .plp-hub-reason--retire::before { background: linear-gradient(-11.03deg, rgba(15, 31, 61, 0) 32.118%, rgba(15, 31, 61, .67) 94.274%); }
  .plp-hub-reason--invest::before { background: linear-gradient(-9.568deg, rgba(15, 31, 61, 0) 14.416%, #837976 88.501%); }

  .plp .plp-review--card { padding: 104px 0 164px; }
  .plp .plp-review--card .plp-review__img { object-position: 50% 50%; }

  /* Q&A: the hub's 992 frame keeps the centred 790px column (property-lp.css starts it at 1200) */
  .plp-qa__inner { max-width: 790px; margin: 0 auto; }

  /* the callback form keeps two columns here, as the hub's 992 frame draws it: with six fields
     the country form's single column would leave the card about 190px taller than the copy;
     the card starts 80 down, with the frame's 16 above the button and 12 above the note */
  .plp-form__fields--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plp-field--full { grid-column: 1 / -1; }
  .plp-callback { padding-top: 80px; }
  .plp .plp-form--callback .plp-form__submit { margin-top: 16px; }
  .plp .plp-form--callback .plp-form__note { margin-top: 12px; }
}

/* ==========================================================================
   >= 1200
   ========================================================================== */
@media (min-width: 1200px) {
  .plp .plp-hub-hero__photo { top: -17.56%; height: 126.44%; object-position: 26.4% 0; }
  .plp .plp-hub-hero__title { font-size: 74px; line-height: 75px; }

  .plp .plp-hub-stat--optional { display: flex; }

  .plp-hub-calc__grid { max-width: 950px; margin: 0 auto; column-gap: 64px; }

  .plp-hub-countries { padding-bottom: 56px; }

  /* the frame's row is the full 1200 here (no gutter), so the points start where the 1440 frame has them */
  .plp-hub-why .plp-wrap { padding: 0; }
  .plp-hub-why__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plp .plp-hub-why__phone { right: .3px; }

  .plp .plp-steps__inner { padding-top: 32px; }

  /* the 1200 frame's spacing round the button (property-lp.css's own), over the 992 trim above */
  .plp .plp-form--callback .plp-form__submit { margin-top: 20px; }
  .plp .plp-form--callback .plp-form__note { margin-top: 16px; }

  /* the hub's answers run the full column, as its 1440 frame sets them (the balance suits the country copy) */
  .plp .plp-qa__text { text-wrap: wrap; }

  .plp-hub-reasons .plp-wrap { padding: 0 20px; }
  /* each photo at the card's width, top-aligned (measured on the 1440 frame) */
  .plp .plp-hub-reason__photo, .plp .plp-hub-reason--holiday .plp-hub-reason__photo, .plp .plp-hub-reason--retire .plp-hub-reason__photo { height: 100%; object-position: 50% 0; }
  .plp-hub-reason--retire::before { background: linear-gradient(-8.8deg, rgba(15, 31, 61, 0) 32.118%, rgba(15, 31, 61, .67) 94.274%); }
  .plp-hub-reason--invest::before { background: linear-gradient(-7.626deg, rgba(15, 31, 61, 0) 14.416%, #837976 88.501%); }
}

@media (prefers-reduced-motion: reduce) {
  .plp-hub-calc__row, .plp-hub-calc__row::after, .plp-hub-calc__ccy, .plp .plp-hub-calc__label, .plp-hub-calc__chev { transition: none; }
  .plp-hub-pick { animation: none; }
  .plp .plp-pick-field.is-cued { animation: none; }
  .plp-hub-calc__amount::after { display: none; }
  .plp .plp-hub-calc__input.is-settling { animation: none; }
  .plp .plp-hub-link, .plp-hub-countries__media, .plp .plp-hub-countries__headline, .plp-hub-countries__card::before,
  .is-active > .plp-hub-countries__media, .is-leaving > .plp-hub-countries__media, .plp .is-active > .plp-hub-countries__headline { transition: none; }
}