— and BOTH rendered tight, because the
paragraphs had margin-bottom:0. So multi-sentence answers looked like a
mistake either way. This gives every multi-line answer a real paragraph gap.
Note: styling the
itself does NOT work — the browser accepts
display:block and margin on it but ignores them for layout. The
answers
are split into real paragraphs by the "FAQ category dropdown (mobile)"
Custom Code snippet, which then inherit this margin. */
.e-n-accordion-item .elementor-widget-text-editor p{
margin-bottom:14px !important;
}
.e-n-accordion-item .elementor-widget-text-editor p:last-child{
margin-bottom:0 !important;
}
/* FAQ answer typography standardised (2026-09-11, retuned 2026-09-13).
41 of the 114 answers carried their own per-widget Elementor typography
(15px / weight 200) while the other 73 were unstyled and fell through to the
theme. These pages' editors will not open, so it is normalised here.
2026-09-13: originally normalised onto the unstyled majority at 16px/400, which
left the FAQ as a third body tier. Corrected to 15px / 200 / 24.8px — the site
body standard, and what those 41 explicitly-styled answers already used.
THIS IS THE BODY TEXT STANDARD. Anything measuring 14.592px has no typography
of its own and is inheriting Astra's 0.912em default — treat that as a bug. */
.e-n-accordion-item .elementor-widget-text-editor,
.e-n-accordion-item .elementor-widget-text-editor p,
.e-n-accordion-item .elementor-widget-text-editor li{
font-family:"DM Sans", sans-serif !important;
font-size:15px !important;
font-weight:200 !important;
color:rgba(0,0,0,0.75) !important;
line-height:24.8px !important;
}
/* Homepage hero carousel, mobile first fold (2026-09-11).
The hero is 100vh but the 91px header sits ABOVE it in normal flow, so the
hero's bottom 91px is never visible on first paint — usable fold is 753px on
a 844px phone. Content used justify-content:flex-start with small stacked
margins, so all three blocks bunched into the top 429px and left ~324px of
visible dead space. Now distributed with space-between.
padding-bottom 231px = the 91px that falls below the fold + 140px of clear
space so the buttons never land on the busiest part of the illustration.
Because it is space-between rather than fixed gaps, it adapts to viewport
height (verified 375x667 through 390x932) and to the longest slide copy.
The two CTAs keep their own 20px gap — they sit in their own flex container,
so they stay paired rather than being spread apart.
Scoped to the hero carousel widget b493d1a and to mobile only: desktop and
tablet layout are deliberately untouched. Slide container IDs differ per
slide, hence the structural .elementor-kit-5591. */
@media (max-width:767px){
.elementor-element-b493d1a .swiper-slide > .e-con > .e-con{
justify-content:space-between !important;
padding-top:56px !important;
padding-bottom:72px !important;
}
.elementor-element-b493d1a .swiper-slide > .e-con > .e-con > .elementor-widget-text-editor,
.elementor-element-b493d1a .swiper-slide > .e-con > .e-con > .e-con{
margin-top:0 !important;
margin-bottom:0 !important;
}
}
/* ===== TABLET FIXES 2026-09-11 (768-1024px) =====
Found during a full-page tablet review after Sam reported the homepage was a
mess at tablet width. Desktop and mobile were fine; only this band was wrong.
1. Homepage FAQ column 26f16f2 was rendering at EXACTLY 50% (398px of 795px)
despite being the ONLY child of its row — an old-style Elementor
section/column, not a flex container. That squeezed the tab widget to half
width, so the 9 category pills stacked into 9 rows down the left, which is
the original complaint from the start of this project, and the accordion
sat in the left half with the right half empty. A lone column should be
100%, so this is a straight bug fix, safe because it has no sibling.
2. Hero carousel arrows are position:absolute at left/right 0 with a FIXED
94px width, while the slide's side padding is a fixed 87.552px. 94 > 87.55,
so the prev arrow overlapped the copy by 6px at every width where the
container is not capped — it clipped the first character of every line
('Offer' -> 'ffer'). Above ~1100px the 1024px container cap centres the
content and the arrows clear, which is why desktop looked fine.
118px padding = 94px arrow + 24px gap. */
/* 2026-09-13: the SAME 50%-lone-column fault was still live on the FAQ page
(09b99d8) and Contact (f7ef757) — the identical three pages that carried the
stray 66.5% width. Both measured 398px of 795px at 820, squeezing the FAQ tab
widget to half width with an empty right half. Swept all 13 pages at 820 to
confirm these were the only two left. */
@media (max-width:1024px){
.elementor-element-26f16f2,
.elementor-element-09b99d8,
.elementor-element-f7ef757{width:100% !important;}
}
@media (min-width:768px) and (max-width:1024px){
.elementor-element-b493d1a .swiper-slide > .e-con > .e-con{
padding-left:118px !important;
padding-right:118px !important;
}
}
/* Accreditations row, tablet/mobile layout (2026-09-11).
Block 63d39c0 carried elementor-hidden-tablet + elementor-hidden-mobile, so the
three award/accreditation logos vanished below 1024px while the heading
'Accreditations and Recognitions' above them stayed visible — a title over an
empty band. The visibility flags were cleared in the page data (5649), not
overridden here. This rule only handles the layout: the columns are old-style
Elementor percentage columns which wrap 2+1 once a gap is added, so they are
flexed to share the row evenly, then stacked one-per-row below 600px. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-63d39c0 > .elementor-container{
display:flex !important;
flex-wrap:nowrap !important;
gap:16px;
align-items:flex-start;
}
.elementor-element-63d39c0 > .elementor-container > .elementor-column{
width:auto !important;
flex:1 1 0 !important;
min-width:0 !important;
}
}
/* Trust points row, tablet/mobile layout (2026-09-11).
Block 09437ec ('20+ Years Experience / CeMAP Qualified Advisers /
Whole-of-Market FCA-Regulated / Access to Ultra-Competitive rates') carried
elementor-hidden-tablet + elementor-hidden-mobile, so these trust signals
disappeared entirely below 1024px. Same defect class as the accreditations
row. Visibility flags cleared in the page data (5649); this only handles
layout — the four old-style percentage columns are flexed to their natural
widths and allowed to wrap, centred. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-09437ec > .elementor-container{
display:flex !important;
flex-wrap:wrap !important;
gap:12px 20px;
justify-content:center;
}
.elementor-element-09437ec > .elementor-container > .elementor-column{
width:auto !important;
flex:1 1 0 !important;
max-width:none !important;
min-width:0 !important;
}
}
/* Award / accreditation logo wells, tablet + mobile (2026-09-13).
The three logos have very different aspect ratios (300x71, 300x212, 300x118),
so once width-constrained by the column they rendered 39px, 112px and 65px
tall — visually unbalanced. Logos cannot be normalised by width; the standard
treatment is a uniform well with each logo centred and scaled to fit inside
it. Wells now measure equal (184px) with every logo capped at 92px tall. */
@media (max-width:1024px){
.elementor-element-63d39c0 .elementor-widget-image,
.elementor-element-91b5fa9 .elementor-widget-image,
.elementor-element-ac94c75 .elementor-widget-image{
display:flex !important;
align-items:center;
justify-content:center;
min-height:110px;
}
.elementor-element-63d39c0 .elementor-widget-image img,
.elementor-element-91b5fa9 .elementor-widget-image img,
.elementor-element-ac94c75 .elementor-widget-image img{
max-height:92px !important;
width:auto !important;
max-width:100% !important;
object-fit:contain;
}
}
/* ===== ROUND 2 2026-09-13 — issues Sam listed from the tablet screenshot ===== */
/* 1. Lone columns stuck at 50%. Identical defect to the FAQ column 26f16f2: an
old-style Elementor section whose ONLY column renders at 50% width, so the
heading centred inside it reads as left-aligned on the page. Sam: "Left
alignment for Accreditations and Recognitions - why? same for Featured in".
Swept every .elementor-container with exactly one column rendering under
90% — these three were the only remaining instances. */
@media (max-width:1024px){
.elementor-element-e7849ac,
.elementor-element-4f745f1,
.elementor-element-012a61d{
width:100% !important;
}
}
/* 2. White strip through the middle of the cream band. Sam: "The Why Portway
Finance Section with the white gap in the middle - why?" 2c8e76f7 carries
margin-bottom:80px and 9869d33 margin-top:80px. They are adjacent siblings
and BOTH #F8F6F0, so the collapsed 80px margin let the white page
background show through as a band. Converted to padding: identical spacing,
continuous cream. */
/* (superseded by the TABLET BAND RHYTHM block below) */
.elementor-element-2c8e76f7{margin-bottom:0 !important;}
.elementor-element-9869d33{margin-top:0 !important;}
.elementor-element-9d668bd{margin-bottom:0 !important;}
/* 3. "Our Services" card buttons aligned across each row. Sam: "Our Services is
completely unaligned and looks terrible". The six cards are equal height
(358px) but each is an Elementor Call-to-Action widget whose .cta__content
is flex-row/wrap, so the button sits immediately under the description —
the middle card's shorter title left its button 24px higher than its
neighbours in both rows. Column flow plus an auto top margin pins every
button to the bottom edge of its card. */
.elementor-element-351c8b4 .elementor-cta__content{flex-direction:column !important;}
.elementor-element-351c8b4 .elementor-cta__button-wrapper{margin-top:auto !important;}
/* 4. Case-study card figures stack label-over-value below 1024px. The block is a
2-column grid with grid-auto-flow:column, so at narrow card widths
"Property or Project Value" wrapped to two lines and threw the pairs out of
line. Desktop deliberately keeps the side-by-side layout — Sam: "that was
just for Tablet / Mobile. it looks great on Desktop". */
@media (max-width:1024px){
.elementor-element-f7f464b{
grid-template-columns:1fr !important;
grid-auto-flow:row !important;
row-gap:0 !important;
column-gap:0 !important;
}
.elementor-element-f7f464b > .elementor-element,
.elementor-element-f7f464b > .elementor-element p{text-align:center !important;}
.elementor-element-f7f464b > .elementor-element:nth-child(2){margin-bottom:14px !important;}
}
/* ===== ROUND 2b 2026-09-13 — two corrections to the fixes above =====
a) Trust points were set to a flat 50%: 398px + 398px + the container's 20px
column-gap = 816px in a 795px row, so they stacked ONE per row (4 rows)
instead of 2x2. Width now subtracts half the gap. Verified 2x2 at 820px.
b) "Our Services" buttons aligned at desktop but NOT at tablet. The cards are
equal height (373px) but .elementor-cta__content only wraps its own content
(324px vs 351px), so margin-top:auto had no free space to push into. The
CTA chain now stretches to the full card height, which is what makes the
auto margin bite. Verified: tablet 820px buttons at 3680/3680/3680 and
4053/4053/4053; desktop 1440px unchanged at 3144 and 3446. */
.elementor-element-351c8b4 .elementor-widget-call-to-action,
.elementor-element-351c8b4 .elementor-cta,
.elementor-element-351c8b4 .elementor-cta__bg-wrapper,
.elementor-element-351c8b4 .elementor-cta__content{height:100% !important;}
/* ===== ROUND 2c 2026-09-13 — corrections to my own round-2 fixes =====
Sam: "you know this looks terrible".
a) MARGIN COLLAPSE. 2c8e76f7 and 9869d33 each had margin 80px; as adjacent
siblings those COLLAPSE to 80px total. I replaced both with 80px padding —
padding does NOT collapse — so the gap silently doubled to 160px and the
band read as a huge void. Spacing now lives on ONE side only (64px on the
lower section) and the cream stays continuous.
Rule: when converting margin to padding between sections, halve it or put
it on one side, or you double the gap.
b) 2x2 TRUST POINTS WERE WORSE. At 1024px a 2x2 gives 490px columns with a
small icon centred in each, so the four items sat marooned in the corners.
They now share one row (flex:1 1 0, four equal ~235px columns at 1024) —
same arrangement as desktop, labels wrap to two lines. No orphan, no voids.
c) 'Featured In' heading 9d668bd had margin-bottom:80px above its own cream
logo band 02d1c5c — the same white stripe, one section further down, which
I missed the first time. The band's own 70px top padding now does the work. */
/* ===== TABLET BAND RHYTHM 2026-09-13 =====
Sam: "how is the padding / spacing on here anything like on desktop or mobile?
... if it's easier for this section to stack Why Portway on top, do that.
same for Featured In: there's no space at the top. same for FAQs at the top.
Case Studies is actually fine."
Root cause: these bands are old-style Elementor sections that carry NO internal
padding at tablet and relied entirely on 80px MARGINS for their spacing. When I
removed those margins to stop the white stripe cutting through the cream, the
content was left butted against the section edges — no space at the top of
Featured In, of the FAQ, or above the Why Portway copy.
Case Studies (19229755) is the band Sam says is right, and it uses padding
100/100 with NO margins. Every band below now follows that model: margins off,
spacing from padding, so the rhythm is consistent AND adjacent same-colour
bands stay continuous. Heading+content pairs share one block: heading takes the
top padding, content takes the bottom.
Also stacks Why Portway (heading above copy, full width) at tablet, per Sam.
Scoped to 768-1024 only: mobile keeps its own 48px band rhythm from
mobile-audit-round5, desktop is untouched. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-2c8e76f7,.elementor-element-9869d33,
.elementor-element-6f2140b,.elementor-element-db95f98,
.elementor-element-9d668bd,.elementor-element-02d1c5c,
.elementor-element-64345cf{margin-top:0 !important;margin-bottom:0 !important;}
/* one scale, matching desktop exactly: heading band 100/0, content band 50/100,
standalone band 100/100. Sam approved the Case Studies band (100/100) as
correct, and that is the desktop scale, so tablet now uses the same numbers
rather than a separate 72px scale. Mobile keeps its established 48px scale
from mobile-audit-round5 — same structure, smaller numbers. */
.elementor-element-2c8e76f7,
.elementor-element-6f2140b,
.elementor-element-9d668bd{padding-top:100px !important;padding-bottom:0 !important;}
.elementor-element-9869d33,
.elementor-element-db95f98,
.elementor-element-02d1c5c{padding-top:50px !important;padding-bottom:100px !important;}
.elementor-element-64345cf{padding-top:100px !important;padding-bottom:100px !important;}
.elementor-element-2c8e76f7 > .elementor-container{flex-wrap:wrap !important;}
.elementor-element-2c8e76f7 > .elementor-container > .elementor-column{width:100% !important;}
.elementor-element-2c8e76f7 > .elementor-container > .elementor-column:first-child{margin-bottom:24px !important;}
}
/* ===== SITE-WIDE TABLET BAND RHYTHM 2026-09-13 =====
Swept every page for the two defect classes already fixed on the homepage.
Nine pages were clean (testimonials, services hub, case studies, insights,
guides, video library, introducer network, privacy notice, contact). The same
faults appeared on About, Meet the Team and the six service pages — all of
them TABLET-ONLY: desktop already renders the correct 100/50/100 rhythm with
full-width columns and zero margins, so nothing here touches desktop.
a) Lone columns forced to 50% at tablet, so their centred headings read as
left-aligned. On the service pages this squeezed the whole 'Why Portway
Finance' block (heading + four trust points) into half the page width.
b) Bands with padding 0/0 and 80px margins — no internal spacing, and the
white page background cutting through adjacent same-colour sections. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-828584a,.elementor-element-728a972,
.elementor-element-fb20b04,.elementor-element-18209f0,
.elementor-element-f494b2a{width:100% !important;}
.elementor-element-b38b9c8,.elementor-element-ea35284,
.elementor-element-832609b,.elementor-element-4b5ab79,
.elementor-element-498243e,.elementor-element-28b145e,
.elementor-element-e9476df,.elementor-element-0c0f836,
.elementor-element-898443f{margin-top:0 !important;margin-bottom:0 !important;}
.elementor-element-b38b9c8,.elementor-element-832609b,
.elementor-element-498243e,.elementor-element-e9476df{padding-top:100px !important;padding-bottom:0 !important;}
.elementor-element-ea35284,.elementor-element-4b5ab79,
.elementor-element-28b145e,.elementor-element-0c0f836{padding-top:50px !important;padding-bottom:100px !important;}
.elementor-element-898443f{padding-top:100px !important;padding-bottom:100px !important;}
}
/* (superseded by the ALTERNATING BAND COLOURS block below) */
/* ===== ALTERNATING BAND COLOURS 2026-09-13 =====
Sam: "I just want alternate colours by section".
Rule: on every page the breadcrumb/hero band is white, then each content BLOCK
alternates white -> cream -> white -> cream. A heading band and the content
band beneath it are ONE block and share a colour. Cream is #F8F6F0.
Exception: a band taller than ~2000px stays white — a full-screen expanse of
cream reads as a background change rather than a band. That applies to the
Meet the Team profile grid, the Case Studies grid, the Guides grid and the
Video Library grid, so those pages alternate around them.
The homepage and the six service pages already alternated correctly and are
untouched. This replaces the earlier fixed rule (Accreditations always white,
Featured In always cream) — position on the page decides the colour now, not
the section's content. */
/* About — Our Mission */
.elementor-element-c829084{background-color:#F8F6F0 !important;}
/* Meet the Team — Accreditations block cream, Featured In block white */
.elementor-element-498243e,
.elementor-element-28b145e{background-color:#F8F6F0 !important;}
.elementor-element-e9476df,
.elementor-element-0c0f836{background-color:#FFFFFF !important;}
/* About — Featured In block stays cream (its logo band was transparent) */
.elementor-element-4b5ab79{background-color:#F8F6F0 !important;}
/* Testimonials — Trustpilot block */
.elementor-element-33b200c,
.elementor-element-fc9717c{background-color:#F8F6F0 !important;}
/* Services hub — stays all white (Sam, 2026-09-13). The two card rows read as
one block, so tinting only the first row looked like a mistake, not a rhythm. */
/* Insights — card grid */
.elementor-element-db99b3e{background-color:#F8F6F0 !important;}
/* Guides — ALL BANDS WHITE (Sam, 2026-09-14). Deliberate exception to the
alternating white/cream standard: the guide rows are one continuous card set,
so a tinted middle row read as a fault rather than a rhythm. Do not re-add. */
/* Our Introducer Network — alternate its six equal bands */
.elementor-element-b08f832,
.elementor-element-4a25224,
.elementor-element-b5dc5ab{background-color:#F8F6F0 !important;}
/* ===== ADIEU FONT (note, 2026-09-13) =====
The face is now served woff2-first (26KB) with the ttf (74KB) as fallback — set on
the Elementor custom font post 5730, not here. A duplicate @font-face was tried here
to pin font-display:swap and was REMOVED: Elementor re-emits its own face AFTER the
kit CSS in the same inline stylesheet, so a kit declaration can never win.
font-display is therefore Elementor's default 'auto'. With a 26KB woff2 that is fine
(measured 283ms), but if headings ever need 'swap' it has to be changed in
Elementor's global Font Display setting, not in this file. */
/* ===== OLD-STYLE ACCORDION TYPOGRAPHY 2026-09-13 =====
Sam: "are the bullet points the right font?" Right family, wrong size and weight.
The "Who We Work With" accordion (4024f17 on About) carries no typography of its own,
so all 38 list items inherit Astra's defaults: DM Sans 14.592px/400, and the panel
titles DM Sans 14.592px/700. Site body copy is DM Sans 15px/200/24.8px, and titles
are Adieu at the 18px card tier (same as the service cards).
Scoped to the widget class so any other old-style accordion inherits the fix.
Font-size is set on the title text only, so the +/- icon keeps its size. */
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-accordion .elementor-tab-content p,
.elementor-widget-accordion .elementor-tab-content li{
font-family:"DM Sans", sans-serif !important;
font-size:15px !important;
font-weight:200 !important;
line-height:24.8px !important;
color:rgba(0,0,0,0.75) !important;
}
.elementor-widget-accordion .elementor-accordion-title{
font-family:"Adieu Bold","DM Sans",sans-serif !important;
font-size:18px !important;
font-weight:400 !important;
}
/* ===== FOOTER WIDTH + HORIZONTAL RHYTHM 2026-09-13 =====
Sam: "can the width / horizontal spacing be looked at for desktop and mobile".
Measured at 1440: columns are 34% + 16.5% + 16.5% + 16.5% = 83.5%, so the last
column's text ended at x=1048 inside a content grid running to x=1300 — a 252px
dead gutter on the right, while the logo sat correctly flush left at x=140 (same as
body copy). The footer read as left-heavy against every other band on the page.
At 820 the tablet widths (30/20/25/25 + gaps) overflowed and wrapped, dropping the
Insights column onto its own full-width row — the lone-column fault again.
At 375 the footer is already right (text gutters 29px vs the body's 27px); only the
copyright bar was wrong, its 50px side padding wrapping one line of text into two.
Grid gap is 10px, so tablet columns are calc(50% - 5px). */
/* Desktop: the three link columns share whatever the address column leaves, so the
row fills the 1200 grid and its right edge lines up with the page above. */
@media (min-width:1025px){
.elementor-element-fa01616 > .elementor-element-7062aab,
.elementor-element-fa01616 > .elementor-element-71aa38b,
.elementor-element-fa01616 > .elementor-element-d7e99d1{
flex:1 1 0 !important;
width:auto !important;
}
}
/* Tablet: contact block on its own full-width row, then the three link groups as a
single 3-across row beneath it. REVISED 2026-09-14 — Sam: "the footer looks messy
like this ... can we make the portway logo, social icons, location, phone email by
one row/column, and then below split about, services, insights into 3 columns on
one row?"
The previous 2x2 put the contact block beside About and pushed Services and Insights
onto a second row, so the two halves of the footer read as four unrelated blocks.
The earlier note said four across cannot fit at 768 — that was FOUR columns
(140px each, every service name wrapping). Three is a different sum: at 768 the row
is 728px inside the 20px padding, giving 236px columns against a 155px longest link
("Our Introducer Network" / "Commercial Mortgages"), so nothing wraps. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-fa01616{
flex-wrap:wrap !important;
padding-left:20px !important;
padding-right:20px !important;
}
.elementor-element-fa01616 > .elementor-element-89128a8{
width:100% !important;
flex:0 0 100% !important;
margin-bottom:20px !important;
}
.elementor-element-fa01616 > .elementor-element-7062aab,
.elementor-element-fa01616 > .elementor-element-71aa38b,
.elementor-element-fa01616 > .elementor-element-d7e99d1{
width:calc(33.333% - 7px) !important;
flex:0 0 calc(33.333% - 7px) !important;
}
}
/* Tablet contact block: smaller, centred logo and centred contact rows.
Sam: "tablet logo needs to be smaller - and centre align it ... otherwise can the
desktop layout work on tablet if smaller?"
Answer to the second half is no, and it was measured rather than guessed. The
desktop 4-across needs the address column squeezed to make room: at 24% the
"Our Introducer Network" link wraps; at 28% four service names wrap; and at 20%,
the only width where no link wraps, the address itself wraps to four lines (124px
tall against 74px). Shrinking the type to force it would break the site's one body
scale. So tablet keeps its own two-row layout, and the contact block is centred
inside it instead.
Logo is capped at 220px: full width it was rendering at 66% of a 780px row. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-fa01616 > .elementor-element-89128a8{
align-items:center !important;
text-align:center !important;
}
.elementor-element-fa01616 > .elementor-element-89128a8 > .elementor-element{
width:100% !important;
}
.elementor-element-fa01616 > .elementor-element-89128a8 .elementor-element-d870d69{
text-align:center !important;
}
.elementor-element-fa01616 > .elementor-element-89128a8 .elementor-element-d870d69 img{
max-width:160px !important;
width:160px !important;
height:auto !important;
}
.elementor-element-fa01616 > .elementor-element-89128a8 .elementor-icon-list-items,
.elementor-element-fa01616 > .elementor-element-89128a8 .elementor-icon-list-item{
justify-content:center !important;
}
}
/* Tablet footer top padding. Sam: "and less top padding for the footer there".
The wrapper and the column grid each carried 50px, so there were 100px of empty
gold above the logo before the contact column's own 10px. Halved to 40 + 30. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-5177f766{padding-top:40px !important;}
.elementor-element-fa01616{padding-top:30px !important;}
}
/* Mobile: the copyright line fits on one line at 20px padding, not at 50px. */
@media (max-width:767px){
.elementor-element-f2fbf50{
padding-left:20px !important;
padding-right:20px !important;
}
}
/* Below 768 the footer row MUST be a single column. 2026-09-14 — Sam sent a
screenshot of the footer at roughly 632px: the contact block, About and Services
sat in a row of three 203px columns with Insights orphaned on a fourth row, and
because the link groups collapse to 35px accordion toggles at this width while the
contact block is 428px tall, About and Services floated in the middle of an
otherwise empty band. "this footer does not work at all".
Cause: the grid is flex-wrap:wrap with children at flex:1 1 200px, so as soon as
the viewport can fit two 200px columns it stops being a stack. That is every width
from about 430 up to 767 — a band that was never tested, because the mobile audits
all ran at 375/390 (where only one column fits, so it looked fine) and the tablet
work all ran at 768+. Same defect class as the tablet audit of 2026-09-11.
Forcing column direction makes the whole sub-768 range behave like 390 does. */
@media (max-width:767px){
.elementor-element-fa01616{
flex-direction:column !important;
flex-wrap:nowrap !important;
}
.elementor-element-fa01616 > .elementor-element{
flex:0 0 auto !important;
width:100% !important;
}
}
/* ===== ABOUT + INTRODUCER NETWORK RHYTHM AND COLOUR 2026-09-14 =====
Sam: "About has inconsistent alternate colour backgrounds" and "the Introducer
Network Page has inconsistent spacing compared to the rest of the pages".
COLOUR — the real fault was cross-page, not within About. Accreditations and
Featured In are the same two blocks on About and on Meet the Team, and they were
rendering in OPPOSITE colours (About: white then cream; Meet the Team: cream then
white). Two sibling pages showing the same section in different colours reads as a
bug. Accreditations is now cream and Featured In white on BOTH.
Within About that forces one more change: Our Mission and Our Journey were both
cream, so 791px of unbroken cream swallowed two separate blocks. Our Journey is
now white, which restores a true alternation and makes the block sizes even:
hero white -> Mission cream -> Journey white -> Accreditations cream
-> Featured In white -> Who We Work With cream
SPACING — single-band blocks take 100 top / 100 bottom, so consecutive blocks sit
200px apart, matching the Accreditations/Featured In pair that was already correct
(see band-rhythm). About had Our Mission at 50/50 and Who We Work With ending at
20px. Introducer Network had never been touched at all: its seven bands measured
30/10, 20/70, 0/30, 10/10, 10/10, 10/10 and 10/70, which is why the photo carousel
and the headings below it looked cramped against every other page. */
/* --- About: colours --- */
.elementor-element-58bd7d12{background-color:#FFFFFF !important;} /* Our Journey */
.elementor-element-b38b9c8,
.elementor-element-ea35284{background-color:#F8F6F0 !important;} /* Accreditations */
.elementor-element-832609b,
.elementor-element-4b5ab79{background-color:#FFFFFF !important;} /* Featured In */
.elementor-element-a2712a9{background-color:#F8F6F0 !important;} /* Who We Work With */
/* --- About: spacing --- */
.elementor-element-8c8d82f{padding-top:0 !important;padding-bottom:100px !important;}
.elementor-element-c829084{padding-top:100px !important;padding-bottom:100px !important;}
.elementor-element-a2712a9{padding-top:100px !important;padding-bottom:100px !important;}
/* --- About: mobile band scale (48px per band-rhythm standard). The 100px
block above is desktop/tablet; on mobile 100+100 between adjacent bands
left a 200px void above the Mission/Values cards. --- */
@media (max-width:767px){
.elementor-element-8c8d82f{padding-bottom:48px !important;}
.elementor-element-c829084{padding-top:48px !important;padding-bottom:48px !important;}
.elementor-element-a2712a9{padding-top:48px !important;padding-bottom:48px !important;}
.elementor-element-58bd7d12{padding-block:48px !important;}
}
/* --- About: breadcrumb column had 0 padding where every other page has 10px,
which put the crumb at x=120/y=139 instead of x=130/y=149 --- */
.elementor-element-2d864bb > .elementor-widget-wrap{padding:10px !important;}
/* --- Introducer Network: spacing (breadcrumb band keeps the site-standard 30/10) --- */
.elementor-element-64f2d55{padding-top:0 !important;padding-bottom:100px !important;}
.elementor-element-b08f832,
.elementor-element-3afa055,
.elementor-element-4a25224,
.elementor-element-2402a50,
.elementor-element-b5dc5ab{padding-top:100px !important;padding-bottom:100px !important;}
/* ===== ABOUT TIMELINE BODY TEXT 2026-09-14 =====
Sam: "Timeline font or weight is different to text in Our Mission and Our Values".
Measured: the timeline's milestone paragraphs were DM Sans 15px / weight 500 /
line-height 24px. Site body copy, including Our Mission and Our Values directly
above it, is DM Sans 15px / weight 200 / 24.8px. The 500 made it read heavier.
NOTE: the rest of the timeline's styling lives in the carousel widget's own
Custom CSS (502c8e71), NOT here — see about-timeline. This one declaration is in
the kit because the weight has to beat the per-widget rule. If you are changing
timeline type, look in BOTH places.
line-height is 'inherit', NOT a fixed px value: the site's body line-height is
responsive (27.2px at desktop, 24.8px below), so pinning a number here would make
the timeline correct at one width and wrong at the other. */
.elementor-element-58bd7d12 .elementor-widget-text-editor,
.elementor-element-58bd7d12 .elementor-widget-text-editor p,
.elementor-element-58bd7d12 p{
font-weight:200 !important;
font-size:15px !important;
line-height:inherit !important;
}
/* ===== ABOUT TIMELINE CAROUSEL CLIPPING 2026-09-14 =====
Sam: "MoneyFacts is also cut off at the bottom" — the text, not the logo.
The nested carousel (.e-n-carousel inside 502c8e71) is overflow:hidden and sizes
itself 6px shorter than its tallest slide, so the last line of the 2026 milestone
— "Commended award at Business MoneyFacts Awards 2026" — had its descenders sliced.
Measured: clientHeight 307 vs scrollHeight 313 at 1440, and 299 vs 305 at 820.
Mobile stacks and does not clip.
10px of bottom padding inside the clipping box makes the content fit at every width
(verified 1440, 820, 375). NOT caused by the H6->H3 heading change: the carousel's
own Custom CSS already pins the icon-box title to 20px !important, so the tag change
did not alter any size. */
.elementor-element-502c8e71 .e-n-carousel{
padding-bottom:10px !important;
}
/* ===== BAND BACKGROUND OVERLAYS 2026-09-14 =====
Sam kept seeing "Featured In" on white with its logos on cream on About, and I kept
measuring both bands as white and telling him it was fine. I was reading the wrong
property. Elementor paints a SEPARATE background layer over a section:
- old-style sections: a child div.elementor-background-overlay
- flex containers: a ::before pseudo-element with content:""
getComputedStyle(el).backgroundColor does NOT see either of them, so a band can
report #FFFFFF and render cream.
About's Featured In logo band 4b5ab79 had ::before painting
var(--e-global-color-accent) = #F8F6F0 straight over the white I had set.
Its heading band 832609b had no overlay, hence the split.
About's Our Mission c829084 also carries a white overlay at 0.5 opacity over cream,
so it was rendering a washed-out cream rather than matching the other cream bands.
⚠️ WHEN RECOLOURING ANY BAND, CHECK ALL THREE LAYERS:
getComputedStyle(el).backgroundColor
getComputedStyle(el,'::before').backgroundColor (only if .content !== 'none')
el.querySelector(':scope > .elementor-background-overlay')
Meet the Team and the homepage were checked and are clean. */
.elementor-element-4b5ab79::before{background-color:#FFFFFF !important;}
.elementor-element-c829084 > .elementor-background-overlay{display:none !important;}
/* ===== ACCREDITATION TILES — TESTIMONIALS 2026-09-14 =====
Sam: "if on white, make all the accreditations sections look like this through
the site. it's not on Testimonials, for example."
Home (63d39c0), About (91b5fa9) and Meet the Team (ac94c75) each carry the white
card treatment as PAGE-level CSS on their own three award logos. The Testimonials
band (fcd2747) was built later and was never added to any of those .elementor-kit-5591 lists,
so its logos sat bare on white while the identical logos sit in cards everywhere
else. Values copied exactly from the other three: 184px well, 16px radius, 1px
hairline, soft shadow, 112px logo cap, 14px side margins.
Scoped to the SECTION rather than the three widget ids, so a fourth accreditation
dropped into this band picks the treatment up on its own — that widget-id coupling
is what let this page drift in the first place. */
.elementor-element-fcd2747 .elementor-widget-image{
background:#fff !important;
border:1px solid rgba(15,23,42,.10) !important;
border-radius:16px !important;
box-shadow:0 14px 34px rgba(15,23,42,.10) !important;
height:184px !important;
padding:32px 30px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin-left:14px !important;
margin-right:14px !important;
}
.elementor-element-fcd2747 .elementor-widget-image img{
max-height:112px !important;
width:auto !important;
max-width:100% !important;
object-fit:contain !important;
}
@media (max-width:1024px){
.elementor-element-fcd2747 .elementor-widget-image img{max-height:92px !important;}
}
@media (max-width:767px){
.elementor-element-fcd2747 .elementor-widget-image{
height:150px !important;
padding:26px !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ===== TESTIMONIALS CAROUSEL ARROWS 2026-09-14 =====
Sam: "is there a way to put arrows to the left and right of the testimonials
for pagination?"
Two faults. (1) The prev/next buttons are absolutely positioned against the
WIDGET at left:0 / right:0, so they sat on top of the first and last card
rather than beside them. (2) Elementor's default arrow colour here is
rgba(238,238,238,.9) — near-white on a cream band, so they were effectively
invisible; that is why the carousel read as dots-only.
Fix: above 1400 the band is full-bleed with a 1200 boxed inner, so there are
real gutters and the buttons simply step out into them — the cards keep the
full grid. Between 768 and 1399 there is no gutter to borrow, so the swiper is
inset 46px instead and the buttons keep the widget edge. Below 768 the
carousel is one card per view and the native pattern is swipe + dots; an arrow
there would cost a fifth of the card width, so they are hidden and the dots
remain. Colour is the brand gold #b19251.
SCOPED TO A CLASS, not a widget id: set "pf-testimonial-carousel" in the
widget's Advanced > CSS Classes. The same carousel now runs on Testimonials
(92919ce) and the homepage (056e124) and will likely land on a third page.
Id-scoped rules are exactly what left the Testimonials accreditation logos
behind when that page was built, so this one does not repeat it. */
.pf-testimonial-carousel .elementor-swiper-button,
.pf-testimonial-carousel .elementor-swiper-button svg{
color:#b19251 !important;
fill:#b19251 !important;
font-size:32px !important;
width:32px !important;
height:32px !important;
transition:opacity .2s ease;
}
.pf-testimonial-carousel .elementor-swiper-button:hover,
.pf-testimonial-carousel .elementor-swiper-button:hover svg{
color:#8f7540 !important;
fill:#8f7540 !important;
}
@media (min-width:1400px){
.pf-testimonial-carousel .elementor-swiper-button-prev{left:-56px !important;}
.pf-testimonial-carousel .elementor-swiper-button-next{right:-56px !important;}
}
@media (min-width:768px) and (max-width:1399px){
.pf-testimonial-carousel .e-n-carousel{
margin-left:46px !important;
margin-right:46px !important;
}
}
@media (max-width:767px){
.pf-testimonial-carousel .e-n-carousel{
margin-left:0 !important;
margin-right:0 !important;
}
.pf-testimonial-carousel .elementor-swiper-button{display:none !important;}
}
/* ===== TESTIMONIAL CARD TYPOGRAPHY 2026-09-14 =====
Sam: "check the text font". Two things were off, on BOTH pages — the homepage
carousel is a clone, so it inherited them rather than introducing them.
1. The attribution name and date render in MANROPE, which is not a site font.
It is an Elementor icon-box default that was never remapped when the global
fonts were set. Name is now Adieu Bold 18/400 (the site's sub-title tier,
same as the accordion titles), date is DM Sans 15/200 like all body copy.
2. The quote body was rgb(159,159,159), a light grey. Site body copy is
rgba(0,0,0,.75) at DM Sans 15/200 — measured against the intro paragraph on
the same page. The cards were visibly washed out next to it.
Date keeps a lighter .55 so it reads as secondary to the name without dropping
to the old grey. */
.pf-testimonial-carousel .elementor-widget-text-editor,
.pf-testimonial-carousel .elementor-widget-text-editor p{
font-family:"DM Sans", sans-serif !important;
color:rgba(0,0,0,0.75) !important;
}
.pf-testimonial-carousel .elementor-icon-box-title,
.pf-testimonial-carousel .elementor-icon-box-title span{
font-family:"Adieu Bold","DM Sans",sans-serif !important;
font-size:18px !important;
font-weight:400 !important;
line-height:1.3 !important;
color:#000000 !important;
}
.pf-testimonial-carousel .elementor-icon-box-description{
font-family:"DM Sans", sans-serif !important;
font-size:15px !important;
font-weight:200 !important;
color:rgba(0,0,0,0.55) !important;
}
/* ===== FEATURED IN LOGO SCALING 2026-09-14 =====
Sam asked whether the padding was right on the homepage Featured In band. It is —
100/0 then 50/100, identical to the Accreditations and Our Services bands either
side of it, and 48/8/48 at mobile like the rest of that page. The band padding was
never the problem.
What IS wrong is the logos. Every image in the marquee had max-height:none and a
pinned 300px width, so each one rendered at whatever its own aspect ratio produced:
at 1440 that ran from 31px (Bridging and Commercial, a wide wordmark) to 187px
(IFA Magazine) — a SIX-fold range in a row that is supposed to read as one strip.
Same treatment as the accreditation tiles: a uniform well with each logo scaled to
fit inside it. Capped at 70px in a 90px well; range is now 31 to 70, and the band
drops from 357px to 260px. The two wide wordmarks stay short because they are
limited by the slide width, not the height — that is as even as it gets without
re-cropping the source files.
All four Featured In bands: Home, About, Meet the Team, Testimonials. */
.elementor-element-02d1c5c .swiper-slide,
.elementor-element-4b5ab79 .swiper-slide,
.elementor-element-0c0f836 .swiper-slide,
.elementor-element-11237b5 .swiper-slide{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:90px !important;
}
.elementor-element-02d1c5c .swiper-slide img,
.elementor-element-4b5ab79 .swiper-slide img,
.elementor-element-0c0f836 .swiper-slide img,
.elementor-element-11237b5 .swiper-slide img{
max-height:70px !important;
width:auto !important;
max-width:100% !important;
object-fit:contain !important;
margin:0 auto !important;
display:block !important;
}
@media (max-width:767px){
.elementor-element-02d1c5c .swiper-slide,
.elementor-element-4b5ab79 .swiper-slide,
.elementor-element-0c0f836 .swiper-slide,
.elementor-element-11237b5 .swiper-slide{min-height:70px !important;}
.elementor-element-02d1c5c .swiper-slide img,
.elementor-element-4b5ab79 .swiper-slide img,
.elementor-element-0c0f836 .swiper-slide img,
.elementor-element-11237b5 .swiper-slide img{max-height:56px !important;}
}
/* ===== MEET THE TEAM GRID, TABLET AND MOBILE 2026-09-14 =====
Sam: "it's 2/2/1/2/2/1 — can it not be 5 rows of 2?"
The ten profiles are TWO separate inner sections of five percentage columns. Wrapping
each section independently at 2-up therefore gives 2+2+1 twice, not 5 clean rows —
the orphan is structural, not a width problem.
Fix without restructuring the page: make the shared .elementor-widget-wrap the grid,
and set both inner sections AND their .elementor-container to display:contents so
all ten columns become direct grid items of one grid. Ten then divides cleanly.
Two per row at BOTH tablet and mobile, deliberately: ten only divides by 2 and 5,
and five across at 768 gives 136px cards, which is cramped. Three across looked
better but leaves a single orphan on the last row.
Measured: 5 rows of 2 at 390 (172px cards, page 7,392px down to 4,783px) and at
820 (353px cards). The modal's Custom HTML widget is the third child of that wrap
and is spanned across both columns so it does not take a grid cell. */
@media (max-width:1024px){
.elementor-element-7b0b3712 > .elementor-widget-wrap{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
align-items:start !important;
}.elementor-element-7b0b3712 > .elementor-widget-wrap > .elementor-section, .elementor-element-7b0b3712 > .elementor-widget-wrap > .elementor-section > .elementor-container{display:contents !important;}.elementor-element-7b0b3712 > .elementor-widget-wrap > .elementor-section > .elementor-container > .elementor-column{ width:auto !important; flex:initial !important; max-width:none !important; }
.elementor-element-7b0b3712 > .elementor-widget-wrap > .elementor-element-cdd648c{grid-column:1 / -1 !important;}
}
@media (min-width:768px) and (max-width:1024px){
.elementor-element-7b0b3712 > .elementor-widget-wrap{gap:36px 24px !important;}
}
@media (max-width:767px){
.elementor-element-7b0b3712 > .elementor-widget-wrap{gap:24px 16px !important;}
}
/* ===== TESTIMONIALS BAND RHYTHM 2026-09-14 =====
Sam: "The background need fixing". The colours were already right and already match
the homepage (Accreditations white, Featured In cream) — the fault was padding.
The testimonials block had ZERO top and bottom padding, so the cream band butted
straight against the intro above and the Trustpilot line below, and the Trustpilot
line itself sat at 10/30 rather than the site scale.
Applying the standard: opening block closes with 100, the testimonials block runs
100 top / 0, its trailing Trustpilot line 50 top / 100 bottom. See band-rhythm. */
.elementor-element-f8c6d0e{padding-top:0 !important;padding-bottom:50px !important;}
.elementor-element-8f77fbd{padding-top:50px !important;padding-bottom:0 !important;}
.elementor-element-33b200c{padding-top:50px !important;padding-bottom:100px !important;}
/* REVISED 2026-09-14, second pass. Sam: "I don't like the shadow at the top of the
Testimonials - and it looks like the padding is a lot?" then "vertical spacing is
definitely off here on Testimonials".
Two separate faults.
(a) The shadow. Container 8f77fbd carried Elementor's default container shadow,
rgba(0,0,0,.5) 0 0 10px — a hard grey rule across the full 1440 where the white
band meets the cream one. Nothing else on this site paints a band shadow.
(b) The gap. The intro copy ends "Read their reviews Trustpilot below", so the
intro and the carousel are ONE block, not two bands — and the standard 100 bottom
+ 100 top put 200px of empty cream between a sentence and the thing it points at.
Halved to 50 + 50. The Trustpilot line below keeps 50/100, so the block reads
50 / 50 / 100 as a unit. */
/* The box-shadow override that used to sit here has been removed. It was an
id-scoped patch over Elementor's default container shadow, and the moment this
band was cloned to the homepage the copy brought the shadow with it and the patch
did not follow. Cleared at SOURCE instead: box_shadow_box_shadow_type is now ''
on the Testimonials band 8f77fbd AND the homepage copy 9d04af5. */
/* ===== TESTIMONIALS MOBILE RHYTHM 2026-09-14 =====
Measured against About at 390, which is the reference: heading to first tile 58px,
caption to next tile 40px. Testimonials came out 130px and 0px — the captions
physically touched the next logo tile.
Cause: these three sections carry 80px top AND bottom margins (from the mobile
audit rounds) where About uses padding. Adjacent margins collapse to 80, and on a
heading-plus-content PAIR that 80 is the wrong gap — the pair should read as one
block. Zeroing both sides of each pair leaves the sections' own 50/70 offsets,
which lands where About does.
The column gap is separate: fcd2747's columns have no bottom padding at all, so
each caption ran straight into the tile below it. */
@media (max-width:767px){
.elementor-element-f8c6d0e{padding-bottom:40px !important;}
.elementor-element-8f77fbd{padding-top:40px !important;}
.elementor-element-fbd1419{margin-bottom:0 !important;}
.elementor-element-719f0e6{margin-top:0 !important;}
.elementor-element-c9309de{margin-bottom:0 !important;}
.elementor-element-11237b5{margin-top:0 !important;}
/* Accreditation columns, stacked view. Below 768 the three logo columns stack, and
Home (63d39c0), Meet the Team (ac94c75) and Testimonials (fcd2747) gave them no
bottom gap at all, so each caption ran straight into the tile below it — 0px.
About (91b5fa9) is the reference at 40px and already gets it from its own page CSS,
as a widget margin rather than column padding, so it is deliberately NOT in this
list: adding column padding there would double the gap to 80.
Sam saw this on Home at ~620px. Note it is invisible at 375/390 on some pages and
only shows once the columns stack with captions present, which is why the mobile
audits missed it. */
.elementor-element-63d39c0 .elementor-column:not(:last-child),
.elementor-element-ac94c75 .elementor-column:not(:last-child),
.elementor-element-fcd2747 .elementor-column:not(:last-child){padding-bottom:40px !important;}
}
/* ── Photo carousel arrows (introducer events). Scoped to the CLASS so it survives a copy. ── */
.pf-photo-carousel .elementor-swiper-button,
.pf-photo-carousel .elementor-swiper-button svg{
color:#b19251 !important;fill:#b19251 !important;
font-size:34px !important;width:34px !important;height:34px !important;
opacity:1 !important;transition:opacity .2s ease,color .2s ease;}
.pf-photo-carousel .elementor-swiper-button:hover,
.pf-photo-carousel .elementor-swiper-button:hover svg{color:#8f7540 !important;fill:#8f7540 !important;}
/* Wide only: park the arrows OUTSIDE the track, in the page gutter.
1320 is the first width where the gutter ((V-1180)/2) clears the 58px offset.
Going lower pushes the arrow past the viewport edge and gives the PAGE a
horizontal scrollbar — body overflow-x:hidden does not stop it. */
@media (min-width:1320px){
.pf-photo-carousel .elementor-swiper-button-prev{left:-58px !important;right:auto !important;}
.pf-photo-carousel .elementor-swiper-button-next{right:-58px !important;left:auto !important;}
}
/* Mid: no gutter to borrow. Inset the TRACK and sit the arrows in that margin at a
POSITIVE offset, so everything stays inside the widget box. Never use a negative
offset here — the widget already runs to the viewport edge at tablet. */
@media (min-width:768px) and (max-width:1319px){
.pf-photo-carousel .elementor-image-carousel-wrapper{margin-left:46px !important;margin-right:46px !important;}
.pf-photo-carousel .elementor-swiper-button-prev{left:0 !important;right:auto !important;}
.pf-photo-carousel .elementor-swiper-button-next{right:0 !important;left:auto !important;}
}
/* Phone: arrows would cover too much of a small photo — swipe + dots only. */
@media (max-width:767px){
.pf-photo-carousel .elementor-swiper-button{display:none !important;}
}
/* Heading links must keep the heading's font (2026-09-15).
The global link rule was forcing DM Sans 700 onto any inside a heading,
so linked card titles rendered in body type while unlinked ones stayed Adieu.
Visible on the Insights hub: "Case Studies" and "FAQ" vs the other three. */
.elementor-widget-heading .elementor-heading-title a{font-family:inherit !important;font-weight:inherit !important;}
/* Insights hub cards (page 6377) — put the five buttons on one baseline (2026-09-15).
Cards are already equal height; the widget-wrap is switched to a column so the
button can take margin-top:auto, and the buttons get a common min-height so the
one- and two-line labels match top and bottom. */
.elementor-element-f83fe2e > .elementor-widget-wrap,
.elementor-element-7c80a7f > .elementor-widget-wrap,
.elementor-element-04fe2fc > .elementor-widget-wrap,
.elementor-element-84efe5f > .elementor-widget-wrap,
.elementor-element-339073d > .elementor-widget-wrap,
.elementor-element-pfdoc01 > .elementor-widget-wrap,
.elementor-element-pfsdc01 > .elementor-widget-wrap{flex-direction:column !important;flex-wrap:nowrap !important;align-content:stretch !important;}
.elementor-element-f83fe2e > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-7c80a7f > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-04fe2fc > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-84efe5f > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-339073d > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-pfdoc01 > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-pfsdc01 > .elementor-widget-wrap > .elementor-widget-button{margin-top:auto !important;}
@media (min-width:768px){
.elementor-element-f83fe2e .elementor-button,
.elementor-element-7c80a7f .elementor-button,
.elementor-element-04fe2fc .elementor-button,
.elementor-element-84efe5f .elementor-button,
.elementor-element-339073d .elementor-button,
.elementor-element-pfdoc01 .elementor-button,
.elementor-element-pfsdc01 .elementor-button{min-height:62px;display:flex !important;align-items:center;justify-content:center;}
}
/* Related Guides bands on the six service pages — 2026-09-15.
Guide titles run to one or two lines, so the Download button is pinned to the
bottom of its column and every card in a row shares one baseline.
Scoped by INNER-SECTION id, not a css class: Elementor's own custom-class
control (_css_classes) is saved into the data on this install but never
emitted into the markup, so a class-scoped rule silently does nothing.
Ids: 6131 bdeae23 / 6164 6991fc6 / 6165 1fbd39b / 6166 d8e2417 / 6167 de28d95 / 6168 aa9a4eb.
Rebuild a band and its new id must be added here. */
.elementor-element-bdeae23 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-6991fc6 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-1fbd39b > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-d8e2417 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-de28d95 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-aa9a4eb > .elementor-container > .elementor-column > .elementor-widget-wrap{flex-direction:column !important;flex-wrap:nowrap !important;align-content:stretch !important;}
.elementor-element-bdeae23 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-6991fc6 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-1fbd39b > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-d8e2417 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-de28d95 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button,
.elementor-element-aa9a4eb > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-button{margin-top:auto !important;}
/* Specialist Finance carries a single related guide — centre it rather than leaving it hard left. */
.elementor-element-aa9a4eb > .elementor-container{justify-content:center !important;}
/* pf-introducer-measure — Introducer Network (6323) body-copy measure, 2026-09-17.
The four single-column content bands ran left-aligned across the full 1180px
container. Everywhere else the site either centres single-column copy (Home,
About) or constrains left-aligned copy to a ~620px column (service pages).
Constrain these to the same 780px measure the intro paragraph on this page
already uses and centre the block; text stays left-aligned inside so the
bulleted lists still read correctly. Headings centred via native settings. */
.elementor-element-3afa055 .elementor-widget-text-editor,
.elementor-element-4a25224 .elementor-widget-text-editor,
.elementor-element-2402a50 .elementor-widget-text-editor,
.elementor-element-b5dc5ab .elementor-widget-text-editor{max-width:780px;margin-left:auto;margin-right:auto;}
/* Join Our Network: centre the two CTA buttons under the centred copy. */
.elementor-element-0072f49{justify-content:center;}
/* pf-introducer-rhythm — Introducer Network (6323) band rhythm, 2026-09-17.
Four short heading-plus-paragraph bands run back to back. At 100/100 that
puts 110px below one paragraph and 110px above the next heading: 220px of
dead space between small blocks, four times over. Home gets 150px between
consecutive blocks (100/0 heading band then 50/100 content band). 70/70
plus the 20px of column padding gives 160px, so this matches Home's rhythm.
Applied at all widths: mobile at 100 while desktop sat at 70 would be
backwards. Overrides the earlier 100/100 rule for these four only; the
carousel band b08f832 is deliberately left at 100/100. */
.elementor-element-3afa055,
.elementor-element-4a25224,
.elementor-element-2402a50,
.elementor-element-b5dc5ab{padding-top:70px !important;padding-bottom:70px !important;}
/* pf-home-cta-blurb — Home (5649) Our Services cards, 2026-09-17.
All six card descriptions are coloured with the global
--e-global-color-9806251, which is #00000000 (fully transparent), and only
turn black on :hover. Touch devices have no hover, so the service copy was
invisible on every phone and tablet. Below 1025px show it at rest in the
site body colour. Desktop keeps the hover reveal exactly as built. */
@media (max-width:1024px){
.elementor-element-1df73d6 .elementor-cta__description,
.elementor-element-d389415 .elementor-cta__description,
.elementor-element-cfe6795 .elementor-cta__description,
.elementor-element-47fbd77 .elementor-cta__description,
.elementor-element-36a0ed6 .elementor-cta__description,
.elementor-element-069b4c4 .elementor-cta__description{color:rgba(0,0,0,0.75) !important;}
}
/* pf-home-cta-overlap — Home (5649) Our Services, 2026-09-17. HEADINGS BUG.
Each card column holds a heading widget plus a call-to-action widget. The
Elementor .elementor-widget-wrap (display:flex; flex-wrap:wrap;
align-content:flex-start) computes its auto height as top padding plus the
CTA only and omits the heading's height and margin entirely: measured
offsetHeight 350 against scrollHeight 388 at 1440. Column overflow is
visible, so every card painted 35-38px past its own column and covered the
heading of the card that follows. Result: at desktop the three second-row
headings (Bridging, Development, Specialist) were hidden, and on mobile
every heading except Residential Mortgages was hidden.
Adding bottom padding is the one lever that works, because the mis-computed
height still honours padding. 60px absorbs the overflow at every width and
leaves roughly 12-15px below each card. Cards keep their height, so nothing
else about the section changes.
Alternative if this ever needs revisiting: display:block on those columns
fixes the root cause but shrinks each card from 330px to its natural 282px. */
.elementor-element-351c8b4 .elementor-inner-section .elementor-widget-wrap{padding-bottom:60px !important;}
/* pf-home-cta-overlap-tablet — 2026-09-17. In the 768-1024 band the card
headings wrap to two lines (50px instead of 25px), so the omitted height
grows and 60px no longer covers it: measured 10-11px of residual overflow
at 768 and 820. 85px covers a two-line heading with margin to spare. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-351c8b4 .elementor-inner-section .elementor-widget-wrap{padding-bottom:85px !important;}
}
/* pf-team-uniform-cards */
@media (min-width:1025px){
.elementor-element-7b0b3712 > .elementor-widget-wrap > .elementor-section > .elementor-container{justify-content:center !important;}
.elementor-element-7b0b3712 > .elementor-widget-wrap > .elementor-section > .elementor-container > .elementor-column{width:25% !important;max-width:25% !important;flex:0 0 25% !important;}
}
/* pf-video-landscape */
/* Landscape videos (the Valuations series) keep their own 16:9 shape inside the portrait grid.
Driven by the video_topic term, so any future landscape video just needs that topic. */
.e-loop-item.video_topic-valuations .elementor-widget-video .elementor-wrapper{--video-aspect-ratio:1.7777 !important;}
/* On phones the 2-up grid left the landscape videos 150px wide, too small to read.
Give them the full row there; the portrait cards stay 2-up. (2026-09-22) */
@media (max-width:767px){
.elementor-6579 .e-loop-item.video_topic-valuations{grid-column:1 / -1 !important;}
}
/* Tablet is 3-up and 20 portrait videos do not divide by 3, so the first landscape
video was sharing a row with two portrait ones. Start the landscape run on a
fresh row. (2026-09-22) */
@media (min-width:768px) and (max-width:1024px){
.elementor-6579 .e-loop-item:not(.video_topic-valuations) + .e-loop-item.video_topic-valuations{grid-column-start:1 !important;}
}
/* pf-card-title (2026-09-22) — the short gold rule under Our Mission / Our Values, echoing
the divider already used under the page intro. The cards themselves are real column
settings (white background, 16px radius, hairline border, soft shadow, padding), not CSS,
so they travel if the section is cloned.
⚠ Custom CSS classes do NOT render on legacy sections or columns on this install — only on
widgets. That is why the card is settings-driven and only this rule is class-scoped. */
.pf-card-title .elementor-heading-title::after{content:"";display:block;width:44px;height:3px;background:#B19251;margin:16px auto 6px;}
/* pf-service-card (2026-09-22) — the six Our Services cards on the homepage are Call to
Action widgets whose body copy sat directly on the line illustration; at mobile the drawing
ran straight through the text and it was hard to read. The widget now carries a white
overlay at 82% so the text reads and the drawing still shows through, plus tile padding.
These two lines give the inner .elementor-cta the same 16px corner as the accreditation
tiles - the widget-level radius sits on the wrapper, which the CTA background paints over,
so it has to be rounded and clipped here. */
.elementor-widget-call-to-action .elementor-cta{border-radius:16px;overflow:hidden;}
/* Elementor ships the CTA overlay at z-index 2 and the content at 1, so a visible overlay
paints OVER the text. Raise the CONTENT instead (below) and keep the overlay ABOVE the
artwork at 2 - at 0 it sits behind the image and the white wash does nothing. */
.elementor-widget-call-to-action .elementor-cta__bg-overlay{z-index:2 !important;}
.elementor-widget-call-to-action .elementor-cta__content{z-index:3 !important;}
/* On a phone the card is narrow, so the background is cropped into the densest part of the
drawing and 82% white was not enough to keep the copy clean. Lift it there only. */
@media (max-width:767px){
.elementor-widget-call-to-action .elementor-cta:not(:hover) .elementor-cta__bg-overlay{background-color:rgba(255,255,255,0.68) !important;}
/* and anchor the drawing to the bottom of the card so its dense middle sits under the
copy rather than through it */
.elementor-widget-call-to-action .elementor-cta__bg{background-position:center bottom !important;}
}
/* pf-case-card (2026-09-22) — case-study cards were a bare image and text block running
edge to edge, most obviously on the homepage at mobile. Same card language as the
accreditation tiles and the Our Mission / Our Values pair: white ground, 16px corner,
hairline border, soft shadow, and overflow clipped so the photo takes the corner too.
Scoped to loop template 6041, so it covers the homepage, the Case Studies index and the
six service pages from one rule. */
/* CORRECTED 2026-09-22: this was on > *:first-child, which is the card BODY only.
The Learn More button is a second child, so the hairline border stopped above the
card’s own button and the button sat outside the outline. The loop item itself already
carries the white ground, shadow and overflow clip, so the border and radius belong
there too. */
.elementor-6041.e-loop-item{border:1px solid rgba(15,23,42,0.1) !important;border-radius:16px !important;box-shadow:0 14px 34px 0 rgba(15,23,42,0.1) !important;}
/* Insights hub — 7 cards wrap 4 + 3 at desktop and 3 + 3 + 1 at tablet.
Centre the short final row so it does not sit left-aligned under a full row. */
.elementor-element-db99b3e > .elementor-container{justify-content:center;}
@media (min-width:1025px){
.elementor-element-db99b3e > .elementor-container{flex-wrap:wrap;}
.elementor-element-db99b3e > .elementor-container > .elementor-column{width:25%;}
}
/* Case study single: mobile measure (2026-09-22). Template 5600 stacked three side paddings at 390 -
Astra ~15px + section 25px + container 24px = 64px each side, so the H1 wrapped
to seven lines in a 262px measure while every other page runs ~10-24px. */
@media (max-width:767px){
.elementor-5600 .elementor-element.elementor-element-5521dcf5{padding-left:0 !important;padding-right:0 !important;}
.elementor-5600 .elementor-section .elementor-container{padding-left:0 !important;padding-right:0 !important;}
}
/* Introducer Network: mobile band scale (2026-09-22). The 100px block above is desktop/tablet and had no
mobile value, so at 390 the event-photo band was 425px tall around 175px photos.
48px is the mobile scale from band-rhythm. */
@media (max-width:767px){
.elementor-element-b08f832,
.elementor-element-3afa055,
.elementor-element-4a25224,
.elementor-element-2402a50,
.elementor-element-b5dc5ab{padding-top:48px !important;padding-bottom:48px !important;}
}
/* Legacy 80px section margins: zeroed at tablet and mobile (2026-09-22).
band-rhythm bans margins on section bands: adjacent 80px margins collapse
unpredictably and cut the page background through cream blocks. Earlier passes
zeroed margin-TOP on some of these and left margin-BOTTOM, which is how the
Contact page ended up with an 80px dead band above the footer. One rule now
covers every section that still carries the legacy value. */
@media (max-width:1024px){
.elementor-element-fbd1419,
.elementor-element-719f0e6,
.elementor-element-c9309de,
.elementor-element-b38b9c8,
.elementor-element-ea35284,
.elementor-element-832609b,
.elementor-element-6e8ecab,
.elementor-element-898443f,
.elementor-element-d14a267,
.elementor-element-a7b8771,
.elementor-element-90c33fe,
.elementor-element-1ba8399,
.elementor-element-e2e842d,
.elementor-element-58ac417,
.elementor-element-12d77e2,
.elementor-element-fa2d827,
.elementor-element-976e88d,
.elementor-element-9fe39dc,
.elementor-element-41ac9db,
.elementor-element-c2dd219,
.elementor-element-ab6e786,
.elementor-element-bbf6651,
.elementor-element-2c8e76f7,
.elementor-element-9869d33,
.elementor-element-6f2140b,
.elementor-element-db95f98,
.elementor-element-9d668bd,
.elementor-element-64345cf,
.elementor-element-c2b2499,
.elementor-element-498243e,
.elementor-element-28b145e{margin-top:0 !important;margin-bottom:0 !important;}
}
/* Our Journey timeline: carousel nav only where it is needed (2026-09-22).
Desktop shows all four milestones and mobile stacks them as a vertical timeline,
so arrows and dots are clutter there. At 768-1024 only two of four fit and there
was nothing to say the rest existed - the company history appeared to stop at 2023. */
@media (max-width:767px),(min-width:1025px){
.elementor-element-502c8e71 .elementor-swiper-button,
.elementor-element-502c8e71 .swiper-pagination{display:none !important;}
}
/* Jetpack infinite-scroll footer credit (2026-09-22). Jetpack prints #infinite-footer on archive and search
templates, carrying "Proudly powered by WordPress / Theme: Astra" below the real
Portway footer. Not wanted on a client site. */
#infinite-footer{display:none !important;}
/* ============================================================
Round-2 pre-launch pass (2026-09-22)
============================================================ */
/* Related Guides: the band is hand-built columns, so a page with 1 or 2 guides
stretched the covers to 580px against 380px on a 3-guide page. Columns are now
col-33 everywhere (page data); centre the row so short sets sit in the middle. */
.elementor-element-bdeae23 > .elementor-container,
.elementor-element-6991fc6 > .elementor-container,
.elementor-element-1fbd39b > .elementor-container,
.elementor-element-d8e2417 > .elementor-container,
.elementor-element-de28d95 > .elementor-container,
.elementor-element-aa9a4eb > .elementor-container{justify-content:center;}
/* Document Library: five cards over two rows. The empty third column on row 2 was
deleted in the page data; centre what is left. */
.elementor-element-1lof9tb > .elementor-container{justify-content:center;}
/* Video Library poster shapes: reverted 2026-09-23. The three landscape
"Valuations with Callum" thumbnails keep their own 16:9 shape — that was settled with
Sam previously and I should not have re-opened it. The pf-video-landscape rules below
are the accommodation. */
/* Privacy Notice: 10px gutters at tablet and mobile put body copy on the screen edge,
and the desktop measure ran to roughly 100 characters a line. */
@media (min-width:1025px){
.elementor-1903 .elementor-element-6c264c0{max-width:680px !important;}
}
/* (superseded: the Privacy Notice sections now carry their own 25/20 tablet and mobile gutters) */
/* Header: the hamburger/close control computed to 20x20, well under the 44px minimum
tap target. */
@media (max-width:1024px){
header button.e-n-menu-toggle,
.elementor-location-header button.e-n-menu-toggle{min-width:44px;min-height:44px;padding:0;box-sizing:border-box;}
}
/* Case study single: the content column is 67% of a 1200px container, so paragraphs ran
to roughly 100 characters a line at desktop. Cap the measure; the sidebar is unaffected. */
@media (min-width:1025px){
.elementor-5600 .elementor-element-2dceee6 .elementor-widget-theme-post-content{max-width:720px;}
}
/* Service hero CTAs: at 820 the pair sat on one row on Bridging and Specialist (short
labels) and wrapped to two rows with mismatched widths on the other four. Same hero,
two layouts, purely because of label length. Stack them at tablet and mobile at one
shared width so all six pages read the same. */
@media (max-width:1024px){
.elementor-element-pfbtnrw > .elementor-widget{flex:0 0 100% !important;max-width:340px !important;}
.elementor-element-pfbtnrw .elementor-button{width:100%;justify-content:center;}
}
/* Related Guides at tablet: col-33 was still flex-growing, so a 2-guide page rendered
365px covers against 237px on the 1- and 3-guide pages. Pin the column width. */
@media (min-width:768px) and (max-width:1024px){
.elementor-element-bdeae23 > .elementor-container > .elementor-column,
.elementor-element-6991fc6 > .elementor-container > .elementor-column,
.elementor-element-1fbd39b > .elementor-container > .elementor-column,
.elementor-element-d8e2417 > .elementor-container > .elementor-column,
.elementor-element-de28d95 > .elementor-container > .elementor-column,
.elementor-element-aa9a4eb > .elementor-container > .elementor-column{
width:33.333% !important;max-width:33.333% !important;flex:0 0 33.333% !important;}
}
/* Case study single: "More case studies" dropped to 2 columns at tablet, so three
related items left an orphan on its own row. Three across. */
/* Case study single: at tablet the horizontal "thumb left / text right" post skin was
squeezed into 204px columns with 18-character lines. One per row reads properly. */
@media (min-width:768px) and (max-width:1024px){
.elementor-5600 .elementor-element-32be4122 .elementor-posts{
grid-template-columns:1fr !important;}
}
/* Privacy Notice: the opening paragraph sat 820px wide above a 680px body column. */
@media (min-width:1025px){
.elementor-1903 .elementor-element-0ddb1af .elementor-widget-text-editor{max-width:680px;}
}
/* Privacy Notice: the intro paragraph was 820px wide above a 680px body column, and at
tablet the body ran nearly edge to edge. One measure at every width. */
.elementor-1903 .pf-measure,
.elementor-1903 .pf-measure > .elementor-widget-container{max-width:680px !important;}
@media (min-width:768px) and (max-width:1024px){
.elementor-1903 .elementor-element-6c264c0,
.elementor-1903 .pf-measure{max-width:680px !important;}
}
/* FAQ and Contact accordions: the panel's bottom padding was set at desktop only, so the
last item sat 10px off the footer at tablet and mobile. */
@media (max-width:1024px){
.e-n-tabs-content > .e-active{padding-bottom:60px !important;}
}
/* Homepage "Client Testimonials": a legacy one-sided padding-left:20px on the widget wrap
stacked on the new section padding, so a centred heading sat 45px from the left and
25px from the right. */
/* (the off-centre "Client Testimonials" heading was a one-sided padding_tablet on column
7ba3b7be, now cleared in the page data rather than overridden here) */
/* Privacy Notice is built on legacy elementor-section markup, so the section padding
never reached the body column: the only inset was Elementor's default 10px widget wrap. */
@media (max-width:1024px){
.elementor-1903 .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated{
padding-left:0 !important;padding-right:0 !important;}
}
/* Case studies filter and pagination now swap the grid over AJAX instead of reloading the
whole page (the loop grid's Pagination > Load Type was never set, so every pill click was
a full page load: 3.8s to first byte, 8s to finish). Elementor draws an .e-loading-overlay
during the request; give it a visible brand treatment so a slow response reads as "loading"
rather than "nothing happened". (2026-09-23) */
/* Elementor puts .e-loading-overlay on the loop-grid widget itself and empties the grid
while the request is in flight, so without this the whole band collapses to ~80px and the
page jumps. Hold a height and show a brand spinner instead. */
.elementor-widget-loop-grid.e-loading-overlay{
position:relative;min-height:420px;}
.elementor-widget-loop-grid.e-loading-overlay > *{opacity:.35;transition:opacity .15s;}
.elementor-widget-loop-grid.e-loading-overlay::after{
content:"";position:absolute;top:160px;left:50%;margin-left:-18px;
width:36px;height:36px;border-radius:50%;z-index:5;
border:3px solid rgba(177,146,81,0.25);border-top-color:#B19251;
animation:pf-spin .8s linear infinite;}
@keyframes pf-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
.elementor-widget-loop-grid.e-loading-overlay::after{animation:none;border-top-color:rgba(177,146,81,0.6);}
}
/* Home trust tiles top-align (2026-09-23). A 1-line label sat 10px lower than a 2-line one
because the column wrap is align-content:center. The column setting content_position
is already 'top' in page 5649's data; this rule exists only because Home cannot be
opened in the Elementor editor to regenerate its CSS (it freezes the tab).
Delete this once Home can be republished from the editor. */
.elementor-element-1fc867f > .elementor-widget-wrap,
.elementor-element-b070912 > .elementor-widget-wrap,
.elementor-element-5464ea2 > .elementor-widget-wrap,
.elementor-element-7a524f9 > .elementor-widget-wrap{align-content:flex-start!important;align-items:flex-start!important;}
/* Homepage hero backgrounds, responsive sizes (2026-09-23).
The six hero slides are CSS backgrounds, so WordPress responsive images skip them
and every device was downloading the 2400px original: about 3.2MB to paint a phone.
Photon resizes on demand, so no new media is needed and the originals stay for desktop.
Page 5649 cannot be republished from the Elementor editor (it freezes), which is why
this lives in the kit rather than in each widget background setting. */
@media (max-width:767px){
.elementor-5649 .elementor-element.elementor-element-a98f5f5:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-a98f5f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/residential-mortgages-2400.webp?resize=800%2C800&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-86b814a:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-86b814a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/buytolet-2400.webp?resize=800%2C800&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-d562bdc:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-d562bdc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/commercial-2400.webp?resize=800%2C800&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-6277716:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-6277716 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/portway-bridging-finance-2026-09.webp?resize=800%2C800&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-077a5c8:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-077a5c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/development-2400.webp?resize=800%2C800&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-9e247d0:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-9e247d0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/specialist-finance-2400.webp?resize=800%2C800&ssl=1")!important;}
}
@media (min-width:768px) and (max-width:1024px){
.elementor-5649 .elementor-element.elementor-element-a98f5f5:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-a98f5f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/residential-mortgages-2400.webp?resize=1200%2C1200&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-86b814a:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-86b814a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/buytolet-2400.webp?resize=1200%2C1200&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-d562bdc:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-d562bdc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/commercial-2400.webp?resize=1200%2C1200&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-6277716:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-6277716 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/portway-bridging-finance-2026-09.webp?resize=1200%2C1200&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-077a5c8:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-077a5c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/development-2400.webp?resize=1200%2C1200&ssl=1")!important;}
.elementor-5649 .elementor-element.elementor-element-9e247d0:not(.elementor-motion-effects-element-type-background),
.elementor-5649 .elementor-element.elementor-element-9e247d0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/specialist-finance-2400.webp?resize=1200%2C1200&ssl=1")!important;}
}
/* Featured In logo strip: continuous glide (2026-09-23).
Swiper eases each transition by default, so with the widget's 4000ms animation speed
the strip surged then crawled and looked frozen. Linear timing plus a 1ms autoplay
delay turns it into a constant-speed marquee. Both numbers are on the widget; this
rule only supplies the timing function, which Elementor does not expose. */
/* Our Services cards: right-size the card backgrounds (2026-09-23).
The six cards render 300px wide and were served the 1200px original (1536px for
bridging), about 460KB below the fold on a phone. 600px keeps them crisp on retina.
Photon generates the derivative, so no new media. */
@media (max-width:1024px){
.elementor-5649 .elementor-element-1df73d6 .elementor-cta__bg{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/07/Residential.webp?resize=600%2C600&ssl=1")!important;}
.elementor-5649 .elementor-element-d389415 .elementor-cta__bg{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/07/BTL.webp?resize=600%2C600&ssl=1")!important;}
.elementor-5649 .elementor-element-cfe6795 .elementor-cta__bg{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/07/Commercial.webp?resize=600%2C600&ssl=1")!important;}
.elementor-5649 .elementor-element-47fbd77 .elementor-cta__bg{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/09/portway-bridging-finance-2026-09.webp?resize=600%2C600&ssl=1")!important;}
.elementor-5649 .elementor-element-36a0ed6 .elementor-cta__bg{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/07/Development.webp?resize=600%2C600&ssl=1")!important;}
.elementor-5649 .elementor-element-069b4c4 .elementor-cta__bg{background-image:url("https://i0.wp.com/portway-finance.co.uk/wp-content/uploads/2026/07/Specialist.webp?resize=600%2C600&ssl=1")!important;}
}
/* --- Home hero: end at the fold on mobile (2026-09-23) --- */
@media (max-width:767px){
.elementor-5649 .elementor-element-2c563d9,
.elementor-element-b493d1a .swiper-slide > .e-con,
.elementor-element-b493d1a .swiper-slide > .e-con > .e-con{
--min-height:min(175vw,calc(100svh - 91px)) !important;
min-height:min(175vw,calc(100svh - 91px)) !important;
}
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Adieu Bold';
font-style: normal;
font-weight: bold;
font-display: auto;
src: url('https://portway-finance.co.uk/wp-content/uploads/2026/05/Adieu-Bold.woff2') format('woff2'),
url('https://portway-finance.co.uk/wp-content/uploads/2026/05/Adieu-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */