/* ============================================================================
   Banco MM2H — refinement layer.
   Loaded last, after site.css and upgrade.css. Owns: cursor removal, one type
   scale, one button system, one radius system, eyebrow/subhead hierarchy,
   pathway CTAs, process iconography, filmstrip sizing, footer.
   ========================================================================== */

/* ---- 1 · no bespoke cursor ------------------------------------------- */
.cursor{display:none!important}
body.cursor-on,body.cursor-on *{cursor:auto!important}
body.cursor-on a,body.cursor-on button,body.cursor-on summary,body.cursor-on [data-scroll-to],body.cursor-on .hubx__row{cursor:pointer!important}
body.cursor-on .film__viewport{cursor:grab!important}
body.cursor-on .film__viewport.is-drag{cursor:grabbing!important}

/* ---- 2 · shared tokens ----------------------------------------------- */
:root{--r-card:20px;--r-panel:24px;--body-1:17px;--body-2:15.5px}

/* ---- 3 · eyebrow (preheadline): no rule, larger, gold ---------------- */
.u-eyebrow::before,.eyebrow::before{content:"";display:block!important;width:var(--rule-brass-width,40px);height:var(--rule-brass-height,2px);background:var(--brass,#C3A24F);flex:none;margin-right:12px}
.u-eyebrow,.eyebrow{display:flex;align-items:center;width:fit-content;gap:0;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted,#5C685F);margin:0 0 20px}
.u-eyebrow.on-dark,.eyebrow.on-dark{color:#C3A24F}
.manifesto__ey{margin-bottom:22px}

/* ---- 4 · subheadline: bigger, lighter, visually distinct from body --- */
.tiers__head p,.faqx__head p,.feat__copy>p,.phz__intro p,.ctax__l p,.film__head p{font-family:var(--font-sans);font-size:clamp(1.15rem,0.45vw + 1.05rem,1.35rem);font-weight:400;line-height:1.6;letter-spacing:-0.008em;color:var(--muted);max-width:56ch}
.phz__intro p,.ctax__l p{color:#D6E3DA}

/* ---- 5 · body copy: one larger scale --------------------------------- */
.manifesto__meta div{max-width:34ch}
.manifesto__meta .v{font-size:19px;line-height:1.62;color:var(--body)}
.manifesto__meta .k{font-size:12px;letter-spacing:0.18em}
.hubx__row .body p{font-size:var(--body-1);line-height:1.65;max-width:54ch}
@media (min-width:921px){.hubx__row.is-active .body p{max-height:240px}}
.hubx__row .tags span{font-size:12px}
.phz__cap p{font-size:var(--body-1);line-height:1.6;max-width:48ch}
.ptier__desc{font-size:16.5px;line-height:1.6}
.ptier__hint{font-size:12.5px;line-height:1.5}
.ptier__row{font-size:15px}
.feat__list li{font-size:16.5px;line-height:1.65}
.feat__list li b{font-size:18px}
.proc__step p{font-size:var(--body-1);line-height:1.68;max-width:52ch}
.faqx__list .a p{font-size:var(--body-1);line-height:1.75}
.faqx__list .q{font-size:17px}
.statx__cell .l{font-size:16px;line-height:1.55}
.tiers__note{font-size:14.5px;line-height:1.7}
.film__item .cap{font-size:12px;letter-spacing:0.1em}

/* ---- 6 · one button system ------------------------------------------- */
.btn,.vbtn,.ptier__btn,.vhero .vnav__cta,.phz__cta,.foot__cta{font-family:var(--font-sans);font-weight:700;font-size:15.5px;letter-spacing:-0.006em;border-radius:999px}
.btn{padding:0.95em 1.85em}
.vbtn{padding:15px 30px}
.ptier__btn{padding:16px 24px;margin-top:26px}
.vhero .vnav__cta{padding:11px 22px;font-size:14.5px}
/* primary action is brand green everywhere; gold stays an accent */
.nav .btn--primary,.btn--primary{color:#fff;background:var(--grad)}
.nav .btn--primary::after,.btn--primary::after{background:var(--pine-deep)}
.ptier__btn--gold{color:#fff;background:var(--grad)}
.ptier__btn--gold:hover{background:var(--pine-deep);filter:none}
.btn--ghost.btn--on-dark{border-color:rgba(255,255,255,0.42);color:#EEF2EC}

/* ---- 7 · one radius system ------------------------------------------- */
.ptier,.film__item,.hubx__media,.feat__badge{border-radius:var(--r-card)}
.ctax__band,.phz__panel .media,.feat__frame{border-radius:var(--r-panel)}

/* ---- 8 · navigation consistency -------------------------------------- */
.nav__links{gap:4px}
.nav__links a,.vnav__links a{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-0.006em;padding:9px 15px;border-radius:999px}
.vnav{padding:10px 12px 10px 16px;gap:20px}
.brand__name{font-size:20px;letter-spacing:.05em}
.brand__sub{font-size:10px;letter-spacing:.2em}

/* ---- 9 · scroll cue: a real, visible affordance ---------------------- */
/* bottom-left, clear of the bottom-right wordmark */
.scrollcue{left:var(--gutter);right:auto;bottom:clamp(24px,4.5vh,46px);transform:none;flex-direction:row;align-items:center;gap:13px;padding:12px 20px;border-radius:999px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#EEF2EC;background:rgba(6,26,18,0.46);border:1px solid rgba(195,162,79,0.5);box-shadow:0 12px 34px rgba(0,0,0,0.38);backdrop-filter:blur(9px)}
.scrollcue .line{width:28px;height:1px;background:#C3A24F;border-radius:2px;animation:cueX 2s var(--ease) infinite;transform-origin:left}
@keyframes cueX{0%{transform:scaleX(0)}40%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
@media (prefers-reduced-motion:reduce){.scrollcue .line{animation:none;transform:none}}

/* ---- 10 · hero wordmark: stacked, flush right, no trailing gap ------- */
.jtitle--bottom{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:0.86}
.jtitle--bottom>span{display:block;margin-right:-0.045em}
.jtitle--bottom>span.script{margin-right:-0.015em;letter-spacing:0;margin-top:0.04em}
@media (max-width:820px){.jtitle--bottom{align-items:flex-start;text-align:left}.jtitle--bottom>span{margin-right:0}}

/* ---- 11 · pathways: a distinct CTA per route ------------------------- */
.phz__cap{align-items:flex-end;gap:2.5rem}
.phz__acts{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.phz__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;background:var(--grad);color:#fff;white-space:nowrap;transition:background .3s var(--ease),transform .3s var(--ease)}
.phz__cta:hover{background:var(--pine-deep);transform:translateY(-2px)}
.phz__cta span{transition:transform .35s var(--ease)}
.phz__cta:hover span{transform:translateX(0.25em)}
.phz__note{font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#C3A24F}
@media (max-width:600px){.phz__cap{align-items:flex-start}.phz__acts{align-items:stretch;width:100%}.phz__cta{justify-content:center}}

/* ---- 12 · brand iconography ------------------------------------------ */
.hubx__chip{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.hubx__icon{width:66px;height:66px;filter:drop-shadow(0 8px 18px rgba(14,24,18,0.22))}
.hubx__row .mini{width:52px;height:52px;filter:drop-shadow(0 6px 14px rgba(14,24,18,0.18))}
/* On a 375px screen the 52px icon plus its gutter leaves the body column ~223px.
   That is a workable measure in Latin but only ~13 characters in Chinese, which
   turns every sentence into a tall, choppy stack. Give the copy the room back. */
@media (max-width:600px){
  .hubx__row .mini{width:34px;height:34px}
  .hubx__row{column-gap:14px}
}

/* ---- 13 · filmstrip: one frame size, even gutters -------------------- */
.film__track{align-items:stretch;gap:24px}
.film__item.s-a,.film__item.s-b,.film__item.s-c{width:clamp(250px,23vw,330px);height:clamp(330px,42vh,440px);align-self:stretch;margin:0}
.film__item image-slot{object-fit:cover}

/* ---- 14 · footer ------------------------------------------------------ */
.foot{background:var(--pine-900);color:#D6E3DA;padding-top:clamp(3.5rem,7vh,5.5rem)}
.foot__top{display:grid;grid-template-columns:minmax(280px,1.1fr) 2fr;gap:clamp(2.5rem,5vw,5rem);padding-bottom:clamp(2.5rem,5vh,4rem);border-bottom:1px solid rgba(255,255,255,0.12)}
@media (max-width:900px){.foot__top{grid-template-columns:1fr;gap:2.5rem}}
.foot__logo{display:block;width:min(280px,80%);height:auto;margin:0 0 22px}
.foot__blurb{font-size:15.5px;line-height:1.7;color:#AECBB8;max-width:38ch;margin:0 0 26px}
.foot__cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;background:var(--grad);color:#fff;transition:background .3s var(--ease),transform .3s var(--ease)}
.foot__cta:hover{background:var(--pine-deep);transform:translateY(-2px)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:760px){.foot__cols{grid-template-columns:repeat(2,1fr);gap:2rem}}
.foot__col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot__col h3{margin:0 0 4px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#C3A24F}
.foot__col a,.foot__col span{font-size:15px;line-height:1.4;color:#D6E3DA;transition:color .25s var(--ease)}
.foot__col a:hover{color:#FFFFFF}
.foot__big{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,12vw,10rem);letter-spacing:-0.05em;line-height:0.85;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.16);padding:clamp(1.8rem,4vh,3rem) 0 0;text-align:center}
.foot__row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 0 22px;margin-top:clamp(1.5rem,3vh,2.4rem);border-top:1px solid rgba(255,255,255,0.12);color:#7EA28C;font-size:13.5px}
.foot__row a{transition:color .25s var(--ease)}
.foot__row a:hover{color:#C3A24F}
.foot__credits p{font-size:12.5px;line-height:1.75}

/* ---- 15 · alignment + rhythm ----------------------------------------- */
.hubx__head,.tiers__head,.faqx__head,.film__head>div{max-width:none}
.proc__curtitle{min-height:1.6em}
.ctax__actions{align-items:center;gap:22px;flex-wrap:wrap}
a:hover{color:inherit}
.foot a,.foot__credits a{text-underline-offset:3px}

/* ============================================================================
   v2 — green primaries, floating nav, reworked promise mark, scroll motion
   ========================================================================== */

/* hero: green actions, green accent word */
.vhero .vbtn--solid{background:var(--grad);color:#fff}
.vhero .vbtn--solid:hover{background:var(--pine-deep)}
.vhero .vnav__cta{background:var(--grad);color:#fff}
.vhero .vnav__cta:hover{background:var(--pine-deep)}
.jtitle .script{color:var(--brass,#C3A24F);text-shadow:0 2px 34px rgba(0,0,0,0.55)}

/* nav: floating capsule, hairline rules, underline indicator */
.nav{top:clamp(10px,1.6vh,18px);left:clamp(12px,2.2vw,28px);right:clamp(12px,2.2vw,28px);padding:11px 11px 11px 20px;border-radius:22px;background:rgba(12,21,16,0.32);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,0.14);box-shadow:0 20px 46px -30px rgba(0,0,0,0.75)}
.nav.scrolled{padding:11px 11px 11px 20px;background:rgba(251,250,245,0.9);border:1px solid rgba(14,24,18,0.09);box-shadow:0 18px 42px -28px rgba(14,24,18,0.55)}
.brand__mark{border-radius:11px;box-shadow:0 8px 20px -10px rgba(0,0,0,0.65),inset 0 0 0 1px rgba(255,255,255,0.14)}
.nav__links{gap:2px}
.nav__links a{position:relative;color:#D6E3DA}
.nav__links a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:currentColor;opacity:0.5;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav .nav__links a:hover,.nav.scrolled .nav__links a:hover{background:transparent}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav__right{gap:14px}
.nav__right::before{content:"";width:1px;height:24px;background:rgba(255,255,255,0.2)}
.nav.scrolled .nav__right::before{background:rgba(14,24,18,0.14)}
@media (max-width:860px){.nav__right::before{display:none}.nav.menu-open{border-radius:22px 22px 0 0}.nav.menu-open .nav__links{border-radius:0 0 22px 22px;overflow:hidden}}
.vnav{border-radius:22px;padding:11px 11px 11px 20px}

/* hero nav matches the fixed nav exactly */
.vnav{margin-inline:calc(clamp(12px,2.2vw,28px) - clamp(22px,5vw,64px));margin-top:calc(clamp(10px,1.6vh,18px) - 24px);gap:20px;background:rgba(12,21,16,0.32);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,0.14);box-shadow:0 20px 46px -30px rgba(0,0,0,0.75)}
.vnav__brand .brand__mark{width:38px;height:38px;border-radius:11px;box-shadow:0 8px 20px -10px rgba(0,0,0,0.65),inset 0 0 0 1px rgba(255,255,255,0.14)}
.vnav__brand .brand__name{font-size:20px;letter-spacing:.05em}
.vnav__brand .brand__sub{font-size:10px;letter-spacing:.2em;margin-top:3px}
.vnav__links{gap:2px}
.vnav__links a{position:relative;font-size:15px;font-weight:600;color:#D6E3DA;padding:9px 15px}
.vnav__links a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:currentColor;opacity:0.5;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.vnav__links a:hover{background:transparent}
.vnav__links a:hover::after{transform:scaleX(1)}
.vnav__links::after{content:"";align-self:center;width:1px;height:24px;background:rgba(255,255,255,0.2);margin-inline-start:8px}
.vhero .vnav__cta{display:inline-flex;align-items:center;flex:none;white-space:nowrap;padding:0.95em 1.85em;font-size:15.5px}
/* hero content: single column now the promise mark is gone */
@media (min-width:1024px){.vhero__content{display:flex;grid-template-columns:none}}

/* beat .immersive a{color:inherit} so every primary CTA keeps its white label */
/* one durable rule: every CTA keeps its own label colour past .immersive a{color:inherit} */
.immersive a.foot__cta,.immersive a.phz__cta,.immersive a.ptier__btn--gold,.immersive a.btn--primary,.immersive a.vbtn--solid,.immersive a.vnav__cta{color:#fff}
.immersive a.btn--gold,.immersive a.ptier__btn--solid{color:#060C09}


/* ---- 20 · preheadline: bordered chip, no hairline rule --------------- */
.u-eyebrow::before,.eyebrow::before{display:none!important}
.u-eyebrow,.eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:0;width:fit-content;padding:9px 16px 8px;border:1px solid rgba(22,36,28,.22);border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:var(--ink,#0E1812)}
.u-eyebrow.on-dark,.eyebrow.on-dark{border-color:rgba(195,162,79,.55);color:#C3A24F}
.phz__cap .tag{display:inline-flex;align-items:center;width:fit-content;padding:8px 14px 7px;border:1px solid rgba(195,162,79,.62);border-radius:999px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:#C3A24F}
.phz__cap h3{margin-top:14px}

/* ---- 21 · hero: one column, left aligned, breathing room ------------- */
.vnav{flex-wrap:wrap;row-gap:12px}
.vhero__pad{padding-top:clamp(18px,2.2vh,26px);padding-bottom:clamp(56px,8vh,88px);row-gap:clamp(28px,5vh,64px)}
.vhero__content{align-items:flex-start;justify-content:flex-end;gap:clamp(20px,2.6vh,34px)}
@media (min-width:1024px){.vhero__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;grid-template-columns:none}}
.vhero__main{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2.2vh,26px);max-width:min(960px,76ch)}
.vhero__main .vhead{margin:0;max-width:20ch}
.vhero__main .vsub{margin:0;max-width:50ch}
.vhero__main .vbtns{margin:0;gap:14px}


/* ---- 22 · preheadline: inverse fill for contrast --------------------- */
.u-eyebrow,.eyebrow{background:var(--blackwood,#16241C);border-color:var(--blackwood,#16241C);color:#EEF2EC}
.u-eyebrow.on-dark,.eyebrow.on-dark{background:#EEF2EC;border-color:#EEF2EC;color:#16241C}
.phz__cap .tag{background:#C3A24F;border-color:#C3A24F;color:#16241C}

/* ---- 23 · journey hero: cue clear of the CTA cluster ----------------- */
.scrollcue{left:var(--gutter);right:auto;transform:none;bottom:clamp(20px,3.4vh,36px)}
.jhero__tl{max-width:min(92vw,1280px)}
.jtitle--top{font-size:min(clamp(2.6rem,8.2vw,10rem),15.5vh)}
.jtitle--top span[data-split]{white-space:nowrap}
@media (max-width:520px){.jtitle--top{font-size:min(clamp(2.2rem,7.4vw,10rem),15.5vh)}}
@media (max-height:760px){.jlead__ctas{margin-top:1rem}.scrollcue{display:none}}


/* ---- 24 · hero title weight ------------------------------------------ */
.vhead{font-weight:900;letter-spacing:-0.04em}

/* ---- 25 · main actions: brass keystone, not green -------------------- */
.nav .btn--primary,.btn--primary,.ptier__btn--gold,.phz__cta,.foot__cta,.vhero .vbtn--solid,.vhero .vnav__cta,.vnav__cta{background:#C3A24F}
.nav .btn--primary::after,.btn--primary::after,.vhero .vbtn--solid:hover,.vhero .vnav__cta:hover{background:#A9873D}
.immersive a.foot__cta,.immersive a.phz__cta,.immersive a.ptier__btn--gold,.immersive a.btn--primary,.immersive a.vbtn--solid,.immersive a.vnav__cta{color:#16241C}
.btn--primary .btn__arrow,.phz__cta span{color:inherit}

/* ---- 26 · manifesto: louder keys, licensed-partner copy -------------- */
.manifesto__meta{gap:clamp(1.6rem,3.4vw,3.2rem);align-items:flex-start}
.manifesto__meta div{max-width:32ch}
.manifesto__meta .k{font-family:var(--font-display);font-weight:900;font-size:clamp(1.25rem,1.9vw,1.75rem);letter-spacing:-0.02em;text-transform:none;color:var(--ink);margin-bottom:10px}
.manifesto__meta .v{font-size:16.5px;line-height:1.62}

/* ---- 27 · hub head aligns with the manifesto ------------------------- */
.hubx__head{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.hubx__head .u-eyebrow{margin-bottom:clamp(2rem,5vh,3.5rem)}
.hubx__head h2{margin-top:0}

/* ---- 28 · property: pointers only ------------------------------------ */
#property .feat__list li{padding-block:15px}
#property .feat__list li b{margin-bottom:0;font-size:18px}

/* ---- 29 · marquee: Blackwood band ----------------------------------- */
.marq{background:var(--blackwood,#16241C);border-block-color:#31503E}
.marq__item{color:#EEF2EC}
.marq__item.is-ghost{color:transparent;-webkit-text-stroke:1.2px rgba(238,242,236,.34)}
.marq__item::after{background:#C3A24F}


/* ---- 30 · journey hero: tighter editorial column --------------------- */
.jhero__tl{top:clamp(10vh,12vh,130px)}
.jtitle--top{line-height:0.9}
.jlead{margin-top:clamp(1.1rem,2.8vh,2rem);max-width:33ch;padding-top:clamp(0.9rem,2.2vh,1.5rem);border-top:1px solid rgba(195,162,79,.5)}
.jlead__sub{font-size:clamp(15px,1.15vw,18px);line-height:1.58;color:rgba(238,242,236,.8)}
.jlead__ctas{margin-top:clamp(1.1rem,2.4vh,1.8rem);gap:10px}
.jtitle--bottom{line-height:0.88}
.jside{font-size:10.5px;letter-spacing:.24em;color:rgba(238,242,236,.5)}

/* ---- 31 · manifesto headline: three lines --------------------------- */
.manifesto__h2{line-height:1.02;text-wrap:normal;max-width:26ch}
.manifesto__h2 br{display:block}

/* ---- 32 · 03 · beyond the visa -------------------------------------- */
.supp{position:relative;z-index:2;background:var(--paper);padding-block:var(--u-pad)}
.supp__wrap{position:relative;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.supp__head h2{font-family:var(--font-display);font-weight:900;letter-spacing:-0.035em;line-height:1;color:var(--ink);font-size:var(--step-3);margin:0;max-width:20ch}
.supp__head .u-eyebrow{margin-bottom:clamp(2rem,5vh,3.5rem)}
.supp__head>p{margin:20px 0 0;font-size:17px;line-height:1.7;color:var(--muted);max-width:52ch}
.supp__num{position:absolute;top:0;right:var(--gutter);font-family:var(--font-display);font-weight:900;font-size:clamp(3.4rem,7vw,6.4rem);line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--line-2)}
.supp__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(2.4rem,5vh,3.6rem)}
@media (max-width:1000px){.supp__cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.supp__cards{grid-template-columns:1fr}}
.supp__card{border:1px solid var(--line);border-radius:14px;padding:26px 24px 28px;background:#fff;transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.supp__card:hover{box-shadow:0 1px 2px rgba(14,24,18,.05),0 8px 24px -12px rgba(14,24,18,.28)}
.supp__card img{display:block;margin-bottom:20px}
.supp__card h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.02em;line-height:1.2;color:var(--ink);margin:0}
.supp__card p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.supp__auth{margin-top:clamp(2.6rem,6vh,4.4rem);padding-top:clamp(1.6rem,3.4vh,2.4rem);border-top:1px solid var(--line)}
.supp__authcap{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.supp__authrow{display:flex;align-items:flex-start;gap:clamp(1.8rem,4vw,3.4rem);margin-top:22px;flex-wrap:wrap}
.supp__authrow figure{margin:0;display:flex;align-items:center;gap:14px}
.supp__authrow img{height:64px;width:auto;display:block}
.supp__authrow figcaption{font-family:var(--font-mono);font-size:11.5px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.supp__authnote{margin:0;flex:1 1 320px;max-width:52ch;font-size:14.5px;line-height:1.6;color:var(--muted)}


/* ---- 33 · footer lockup: real mark, Satoshi wordmark ----------------- */
.foot__lockup{display:inline-flex;align-items:center;gap:16px;text-decoration:none}
.foot__mark{width:60px;height:60px;border-radius:17px;display:block;box-shadow:0 10px 26px -14px rgba(0,0,0,.8),inset 0 0 0 1px rgba(238,242,236,.12)}
.foot__wm{display:flex;flex-direction:column;gap:6px}
.foot__wm .n{font-family:var(--font-display);font-weight:900;font-size:29px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#EEF2EC}
.foot__wm .s{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(238,242,236,.5)}
.foot__tag{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(238,242,236,.14);max-width:22ch;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-0.02em;color:#EEF2EC}
.foot__tag span{color:#C3A24F}
.foot__blurb{margin-top:18px}


/* ---- 34 · MM2H programme mark sits on its own Blackwood panel -------- */
.supp__authtile{background:var(--blackwood,#16241C);border-radius:14px;padding:18px 24px;display:flex;align-items:center}
.supp__authtile img{height:52px;width:auto;display:block}
.supp__authrow figure:not(.supp__authtile) img{height:60px}
.foot__row{padding-top:30px;border-top:0}


/* ---- 35 · journey hero: one column, left, earth to the right --------- */
.jhero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}
.jhero::before{content:"";position:absolute;inset:0 auto 0 0;width:min(62%,860px);background:linear-gradient(90deg,rgba(6,12,9,.72),rgba(6,12,9,.42) 46%,rgba(6,12,9,0));pointer-events:none}
.jhero__tl{position:relative;grid-column:1;grid-row:1;top:auto;left:auto;max-width:none;align-self:center;padding:0 clamp(1.2rem,3vw,3.5rem) 0 var(--gutter)}
.jeyebrow{display:inline-flex;align-items:center;padding:8px 15px 7px;margin-bottom:clamp(1.1rem,2.6vh,1.9rem);border:1px solid rgba(195,162,79,.55);border-radius:999px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:#C3A24F}
.jhero__tl .jtitle{position:static;top:auto;right:auto;bottom:auto;display:block;text-align:left;font-size:min(clamp(2.3rem,5.8vw,6.2rem),12.5vh);line-height:0.92;letter-spacing:-0.04em}
.jhero__tl .jtitle--bottom>span{margin-right:0}
.jlead{margin-top:clamp(1.5rem,3.4vh,2.6rem);max-width:36ch;padding-top:clamp(1.1rem,2.6vh,1.8rem);border-top:0;position:relative}
.jlead::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:#C3A24F}
.jside--l{display:none}
.jside--r{right:16px;color:rgba(238,242,236,.44)}
.scrollcue{bottom:clamp(18px,3vh,32px)}
@media (max-width:900px){.jhero{grid-template-columns:1fr}.jhero::before{width:100%;background:linear-gradient(180deg,rgba(6,12,9,.62),rgba(6,12,9,.28) 55%,rgba(6,12,9,.6))}.jhero__tl{padding-right:var(--gutter)}.jside--r{display:none}}
@media (max-width:820px){.jhero__tl .jtitle--bottom{position:static;top:auto;left:auto;right:auto;text-align:left}.jlead{display:block}}
@media (max-height:640px){.jlead__sub{display:none}.jlead{padding-top:clamp(.8rem,2vh,1.2rem)}}

.jhero{grid-template-columns:minmax(min(100%,560px),1.05fr) minmax(0,.95fr)}
.jlead__ctas{flex-wrap:nowrap}
@media (max-width:700px){.jlead__ctas{flex-wrap:wrap}}

.supp__authrow figure:not(.supp__authtile){align-items:center;justify-content:center}
.supp__authrow figure:not(.supp__authtile) img{height:72px}

/* ── Why Banco · values ──────────────────────────────────────────────────────
   Replaces the four counted statistics. Same 4-up grid and hairline rule as
   the figures used, so the dark panel's rhythm is unchanged. */
.statx__grid--vals{align-items:start}
.statx__val{border-top:1px solid rgba(255,255,255,0.18);padding-top:20px}
.statx__val .k{font-family:var(--font-display);font-weight:900;letter-spacing:-0.015em;
  line-height:1.15;font-size:clamp(1.05rem,1.6vw,1.32rem);color:#FFFFFF;text-wrap:balance}
.statx__val .v{font-size:15px;line-height:1.6;color:#AECBB8;margin-top:12px;max-width:34ch}
@media (max-width:760px){.statx__val .v{font-size:14.5px}}

/* ── floating WhatsApp ───────────────────────────────────────────────────────
   Sits under the custom cursor (z-index 95) and the scroll progress bar (90),
   above the fixed header (70). */
.wa{position:fixed;right:clamp(18px,2.4vw,32px);bottom:clamp(18px,2.4vw,32px);z-index:80;
  display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:#25D366;color:#FFFFFF;box-shadow:0 6px 22px rgba(14,24,18,0.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.wa:hover,.wa:focus-visible{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 30px rgba(14,24,18,0.36)}
.wa:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wa svg{display:block;width:36px;height:36px}
@media (max-width:700px){.wa svg{width:31px;height:31px}}
/* label unfurls on hover; hidden from pointer-less/narrow screens */
.wa__tip{position:absolute;right:calc(100% + 12px);white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:0.01em;color:#FFFFFF;
  background:var(--ink);padding:8px 12px;border-radius:8px;
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.wa:hover .wa__tip,.wa:focus-visible .wa__tip{opacity:1;transform:translateX(0)}
@media (max-width:700px){.wa{width:62px;height:62px}.wa__tip{display:none}}
@media (prefers-reduced-motion:reduce){.wa,.wa__tip{transition:none}}

/* WhatsApp CTA in the closing band — .btn__l already lays the glyph inline;
   this only stops it shrinking when the row wraps. */
.ctax__wa svg{flex:none}

/* ══ MOBILE ═══════════════════════════════════════════════════════════════
   Phones open on the Kuala Lumpur hero and skip the Earth descent entirely.
   The descent costs three.js plus four Earth textures (~2 MB) and three
   screens of pinned scrolling before a single word of content — a poor trade
   on a phone and on a mobile connection. index.html also skips loading
   three.js and journey.js at this width, so none of it is fetched.

   The rest tightens the vertical rhythm: at 375px the page ran to roughly
   29 screens, most of it section padding and full-viewport panels. */
@media (max-width: 820px) {
  .journey { display: none; }

  /* the hero no longer overlaps a pinned section above it, so it stands alone */
  .vhero { height: 100svh; margin-top: 0; }
  .vhero__stage { position: relative; opacity: 1; }
  .vhero__veil { opacity: 0; }
  .vhero__clouds { display: none; }   /* the cloud dive only reads out of the descent */
  .vhero__pad { opacity: 1; }

  /* every section carried ~97px top and bottom */
  :root { --u-pad: clamp(2.75rem, 7vh, 4.25rem); }

  /* pathway panels were a full viewport each, three of them */
  .phz__panel { height: auto; padding-block: 1.6rem 2rem; }
  .phz__panel .media { height: 42vh; min-height: 240px; }
  .phz__big { font-size: clamp(3rem, 15vw, 4.5rem); }

  /* pricing was the tallest section on the page: four ~730px cards */
  .ptier { padding: 22px 20px 24px; border-radius: 18px; }
  .ptier__name { font-size: 1.85rem; margin-top: 10px; }
  .ptier__desc { font-size: 14.5px; line-height: 1.5; }
  .ptier__row { padding-block: 9px; }
  .ptier__fee { margin-top: 14px; }
  .ptiers, .tiers__grid { gap: 14px; }

  /* headings and leads: display type set for a 1440px canvas overflows here */
  .tiers__head, .faqx__head, .film__head, .statx__head, .hubx__head, .supp__head { margin-bottom: 1.75rem; }
  .feat__copy > p, .tiers__head p, .faqx__head p, .supp__head p { margin-block: .6rem 0; }

  /* the filmstrip and process rails don't need full-bleed spacing here */
  .proc__step { padding-block: 1.1rem; }
  .supp__cards { gap: 12px; }
  .supp__card { padding: 18px 18px 20px; }
}

/* Below the fold on a phone, the hero's own nav is the only one needed. */
@media (max-width: 700px) {
  .vhead { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1.02; }
  .vsub { font-size: 1rem; line-height: 1.55; }
}

/* Second pass, measured rather than guessed. At 375px the four tallest blocks
   were the pricing cards, the pathway panels, the process rail and the hub
   rows — between them roughly two thirds of the page. upgrade.js already puts
   pathways into .no-pin here, so its panel media has to be overridden through
   that selector, not the bare one. */
@media (max-width: 820px) {
  .phz.no-pin .phz__panel .media { height: 38vh; min-height: 230px; }
  .phz.no-pin .phz__panel { padding-block: 1.5rem 1.9rem; }

  /* pricing card: 665px each, four of them */
  .ptier__desc { font-size: 14px; line-height: 1.45; }
  .ptier__dep { margin-block: 12px; }
  .ptier__row { padding-block: 7px; font-size: 14px; }
  .ptier__btn { padding: 13px 20px; margin-top: 16px; }
  .ptier__hint { font-size: 12px; }

  /* process rail: five steps at 220px */
  .proc__step { padding-block: .85rem; }
  .proc__step p { font-size: 15.5px; line-height: 1.55; }
  .proc__dot { margin-bottom: 8px; }

  /* hub rows: four at 348px */
  .hubx__row { padding-block: 18px; }
  .hubx__row .body p { font-size: 15.5px; line-height: 1.55; }
  .hubx__row .tags { gap: 6px; margin-top: 10px; }

  /* feature blocks (education / property) */
  .feat__list li { font-size: 15.5px; line-height: 1.55; }
  .feat__list li b { font-size: 16.5px; }
  .feat { padding-block: var(--u-pad); }

  /* manifesto + closing band */
  .manifesto__meta .v { font-size: 16.5px; line-height: 1.55; }
  .manifesto__meta { gap: 1.5rem; }
  .ctax__band { padding-block: 2.25rem; }
}

/* The hero's own nav wrapped onto two rows at 375px and repeated the
   "Begin application" button that sits in the hero body a few lines below.
   One row, no duplicate action — the hero keeps the height instead. */
@media (max-width: 820px) {
  .vhero .vnav__cta { display: none; }
  .vnav { padding: 8px 10px 8px 12px; gap: 10px; flex-wrap: nowrap; }
  .vnav .langsw { margin-left: auto; }
  .vnav__brand .brand__mark { width: 30px; height: 30px; }
}

/* ══ MOBILE AUDIT FIXES ═══════════════════════════════════════════════════ */

/* The language switcher moves into the drop-down at this width (upgrade.js),
   so the bar fits and the burger stays on screen. Style it as a menu row. */
@media (max-width: 860px) {
  .nav.menu-open .nav__links .langsw {
    display: flex; margin: 14px 4px 2px; align-self: flex-start;
    border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06);
  }
  .nav.menu-open .nav__links .langsw__opt { font-size: 14px; padding: 10px 16px; color: #EEF2EC; }
  .nav.menu-open .nav__links .langsw__opt.is-on { color: #0C1510; background: var(--gold-soft); }
  /* keep the bar from ever pushing its own controls out of view again */
  .nav__right { min-width: 0; flex-wrap: nowrap; }
  .nav .brand__txt { min-width: 0; }
  .nav .brand__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 760px) {
  /* "Why Banco" values were two columns at 375px, leaving a 157px measure —
     about nine Chinese characters a line, which stacks into a choppy column.
     One value per row instead, the same call refine.css already makes for the
     hub rows. */
  .statx__grid--vals { grid-template-columns: 1fr; gap: 1.5rem; }
  .statx__val .v { max-width: none; }
}

/* Tap targets. The switcher sat at 43x24 on every page, including the
   application form — well under the 44px minimum. */
@media (max-width: 860px) {
  .langsw__opt { min-height: 38px; display: inline-flex; align-items: center; font-size: 12.5px; }
  .app .langsw__opt, .vnav .langsw__opt { min-height: 36px; }
  .foot__col a, .foot__row a { display: inline-block; padding-block: 7px; }
}

/* Two faults the reachable burger exposed.

   1. refine.css's own ".nav.scrolled .nav__links a { color: var(--ink) }"
      loads after site.css's menu-open rule and matches at equal specificity,
      so with the menu open over a scrolled page every link was Blackwood ink
      on the near-black panel — invisible. Raised above it here.
   2. The brand sub-line is 153px wide, which squeezed the CTA to 60px and
      clipped it to "Begin ap". The mark plus BANCO identifies the site well
      enough in a phone bar; the sub-line returns above the breakpoint. */
@media (max-width: 860px) {
  .nav.scrolled.menu-open .nav__links a,
  .nav.menu-open .nav__links a { color: #EEF2EC; }
  .nav.scrolled.menu-open .nav__links a:hover,
  .nav.menu-open .nav__links a:hover { color: var(--gold-soft); }
  .nav.scrolled.menu-open .brand__name { color: #FFFFFF; }

  .nav .brand__sub { display: none; }
  .nav .btn--primary { flex: none; }
}

/* Micro-labels. The brand sets mono eyebrows at 10–11px, which holds up on a
   desktop canvas but sits under the ~12px floor where small text stays
   comfortably legible on a phone. Raised here only — the desktop scale is
   untouched. */
@media (max-width: 860px) {
  .ptier__ey, .ptier__lab, .ptier__flag, .ptier__hint { font-size: 12px; }
  .langsw__opt, .langsw--hero .langsw__opt, .vnav .langsw__opt { font-size: 12.5px; }
  .brand__sub { font-size: 11px; letter-spacing: .16em; }
  .film__item .cap { font-size: 12px; }
}

/* Last of the sub-12px labels on a phone: the feature badge's second line,
   the process step's timing, the filmstrip's drag hint and the footer's
   credits summary. Desktop keeps the smaller setting. */
@media (max-width: 860px) {
  .feat__badge .s { font-size: 12px; }
  .proc__step .when { font-size: 12px; }
  .film__drag { font-size: 12px; }
  .foot__credits summary { font-size: 12.5px; }
}

/* ══ MOBILE · CAROUSEL, DENSER GRIDS, TIGHTER RHYTHM ══════════════════════
   All of this is inside the phone breakpoints; the desktop layout is
   untouched. */

/* 1 · Three routes → a swipeable deck. upgrade.js wraps the panels in
   .phz__carousel at this width; the intro keeps its place above it. Panels sit
   at 82vw so the next one peeks in, which is the affordance that says swipe. */
@media (max-width: 820px) {
  .phz.no-pin.has-carousel .phz__carousel {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }
  .phz.no-pin.has-carousel .phz__carousel::-webkit-scrollbar { display: none; }
  .phz.no-pin.has-carousel .phz__panel {
    flex: 0 0 82vw; width: auto; height: auto;
    scroll-snap-align: center;
    border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-panel);
    padding: 0 0 18px; overflow: hidden;
    background: rgba(255,255,255,0.03);
  }
  .phz.no-pin.has-carousel .phz__panel .media { height: 34vh; min-height: 200px; border-radius: 0; }
  .phz.no-pin.has-carousel .phz__cap { padding: 16px 16px 0; }
  .phz.no-pin.has-carousel .phz__big { font-size: clamp(2.6rem, 13vw, 3.6rem); top: 10px; left: 14px; }
  .phz.no-pin.has-carousel .phz__acts { width: 100%; }
}

/* 2 · Pricing as a 2 x 2 block, and boxes two-up generally. */
@media (max-width: 820px) {
  .ptiers { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .ptier { padding: 16px 13px 18px; border-radius: 14px; }
  .ptier__name { font-size: 1.35rem; margin-top: 8px; }
  .ptier__desc { font-size: 12.5px; line-height: 1.4; }
  .ptier__dep { margin-block: 9px; }
  .ptier__fee { font-size: 1.5rem; }
  .ptier__row { padding-block: 5px; font-size: 12.5px; gap: 6px; }
  .ptier__row .k { font-size: 12px; }
  .ptier__btn { padding: 11px 12px; margin-top: 12px; font-size: 13.5px; }
  .ptier__flag { font-size: 10.5px; padding: 3px 8px; }

  .supp__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .supp__card { padding: 15px 14px 17px; }
  .supp__card h3 { font-size: 15.5px; line-height: 1.3; }
  .supp__card p { font-size: 13.5px; line-height: 1.5; }
  .supp__card img { width: 34px; height: 34px; }
}

/* 3 · The values grid goes back to two-up for density. */
@media (max-width: 760px) {
  .statx__grid--vals { grid-template-columns: repeat(2, 1fr); gap: 1.1rem .9rem; }
  .statx__val .k { font-size: 15px; }
  .statx__val .v { font-size: 13.5px; line-height: 1.5; }
}

/* 4 · General compaction: the section rhythm and the remaining tall blocks. */
@media (max-width: 820px) {
  :root { --u-pad: clamp(2.1rem, 5.5vh, 3.1rem); }
  .manifesto__meta { gap: 1.15rem; }
  .manifesto__meta .v { font-size: 15.5px; line-height: 1.5; }
  .hubx__row { padding-block: 14px; }
  .hubx__row .body p { font-size: 15px; line-height: 1.5; }
  .proc__step { padding-block: .7rem; }
  .proc__step p { font-size: 15px; line-height: 1.5; }
  .feat__list li { font-size: 15px; line-height: 1.5; }
  .feat__list li + li { margin-top: 10px; }
  .faqx__list .a p { font-size: 15.5px; line-height: 1.65; }
  .faqx__list summary { padding-block: 14px; }
  .film__item.s-a, .film__item.s-b, .film__item.s-c { height: clamp(260px, 34vh, 330px); }
  .ctax__band { padding-block: 1.9rem; }
  .foot { padding-top: clamp(2.2rem, 5vh, 3.2rem); }
}

/* Pricing at two-up is a 164px card, where the spec labels were wrapping to
   two lines and the fee block ran to 180px. Tightened rather than trimmed:
   the per-card hint stays because it qualifies Banco's own advisory fee,
   which the note under the grid does not — that one covers the government
   figures. */
@media (max-width: 820px) {
  .ptier__dep { padding-top: 12px; margin-block: 8px; }
  .ptier__lab { font-size: 11px; letter-spacing: .1em; line-height: 1.35; }
  .ptier__fig { font-size: 1.55rem; }
  .ptier__hint { font-size: 11px; line-height: 1.4; }
  .ptier__row { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 4px; }
  .ptier__row .k { font-size: 11px; letter-spacing: .02em; line-height: 1.35; opacity: .8; }
  .ptier__row .v { font-size: 13px; font-weight: 600; line-height: 1.3; }
  .ptier__desc { display: none; }        /* the tier name and fee carry it at this size */
}

/* The pathway intro carries its own 7vw inset from the pinned desktop layout,
   which left the deck below it starting a few pixels further left. Both sit on
   the section gutter now, and the panels snap to the start edge so the deck
   always lines up with the heading above it. */
@media (max-width: 820px) {
  .phz.no-pin .phz__intro { width: auto; padding-inline: var(--gutter); }
  .phz.no-pin.has-carousel .phz__panel { scroll-snap-align: start; }
}

/* .phz__track already spans the full width at this breakpoint, so the
   full-bleed negative margin was cancelling the very padding meant to inset
   the first card. Padding alone lines the deck up with the heading, and the
   trailing padding still lets the last card scroll clear of the edge. */
@media (max-width: 820px) {
  .phz.no-pin.has-carousel .phz__carousel { margin-inline: 0; }
}