/* cwaf-hero-cine-head */
/* Hidden from the very first paint, not from DOMContentLoaded. Gated on
   .cwaf-js so that a browser without JavaScript — which will never get the
   cinematic treatment — keeps the image instead of an empty column. */
.cwaf-js .hero-photo-col{ display:none!important; }
/* cwaf-scrollfix-css */
html{scroll-behavior:auto !important}
/* cwaf-trustbar-css */
.cwaf-trustbar{background:#0e2117;color:#dfe6df;font-family:"Public Sans",sans-serif;font-size:13px;border-bottom:1px solid rgba(224,167,46,.22);position:relative;z-index:5;}.cwaf-trustbar-inner{max-width:1320px;margin:0 auto;padding:8px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;}.cwaf-trustbar .tb-pts{display:flex;gap:24px;flex-wrap:wrap;align-items:center;}.cwaf-trustbar .tb-pts span{white-space:nowrap;letter-spacing:.01em;}.cwaf-trustbar .tb-pts i{color:#e0a72e;font-style:normal;font-weight:900;margin-right:6px;}.cwaf-trustbar .tb-tel{color:#fff;text-decoration:none;white-space:nowrap;font-weight:600;}.cwaf-trustbar .tb-tel strong{color:#e0a72e;margin-left:4px;}@media(max-width:1024px){.cwaf-trustbar .tb-pts span:nth-child(n+3){display:none;}}@media(max-width:640px){.cwaf-trustbar-inner{padding:7px 16px;font-size:12px;gap:10px;}.cwaf-trustbar .tb-pts span:nth-child(n+2){display:none;}.cwaf-trustbar .tb-pts{gap:0;}}@media(max-width:560px){.cwaf-trustbar .tb-pts{display:none;}.cwaf-trustbar-inner{justify-content:center;gap:0;min-width:0;}.cwaf-trustbar .tb-tel{min-width:0;}}.trust-marquee{overflow:hidden;max-width:100%;}
/* cwaf-about2-css */
.elementor-element-6a5a2931576d8,.meet-conor-section{display:none !important;}#cwaf-about2{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;background:#f5f7f6;padding:70px 20px 76px;box-sizing:border-box;}#cwaf-about2 .in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:0.92fr 1.08fr;gap:52px;align-items:center;}#cwaf-about2 .media{position:relative;}#cwaf-about2 .vwrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(6,17,11,.28);aspect-ratio:4/5;background:#0e2117;}#cwaf-about2 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}#cwaf-about2 .play{position:absolute;inset:0;margin:auto;width:82px;height:82px;border:none;border-radius:50%;background:rgba(224,167,46,.96);color:#0e2117;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .15s,background .15s;z-index:3;}#cwaf-about2 .play:hover{transform:scale(1.07);background:#f0b93e;}#cwaf-about2 .play svg{width:30px;height:30px;margin-left:5px;}#cwaf-about2 .badge{position:absolute;left:18px;bottom:18px;z-index:3;background:rgba(6,17,11,.72);backdrop-filter:blur(3px);color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;padding:9px 15px;border-radius:30px;}#cwaf-about2 .badge b{color:#e7b53c;}#cwaf-about2 .eyebrow{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#a97b12;margin-bottom:14px;}#cwaf-about2 h2{font-family:Montserrat,sans-serif;font-weight:800;font-size:34px;line-height:1.15;color:#0e2117;margin:0 0 18px;}#cwaf-about2 .lead{font-family:"Public Sans",sans-serif;font-size:16.5px;line-height:1.7;color:#44514a;margin:0 0 22px;}#cwaf-about2 blockquote{margin:0 0 24px;padding:2px 0 2px 22px;border-left:3px solid #e0a72e;font-family:"Public Sans",sans-serif;font-style:italic;font-size:16px;line-height:1.65;color:#26332c;}#cwaf-about2 .facts{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px;}#cwaf-about2 .facts li{position:relative;padding-left:30px;font-family:"Public Sans",sans-serif;font-size:15px;line-height:1.5;color:#33403a;}#cwaf-about2 .facts li:before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#175E38;}#cwaf-about2 .facts li:after{content:"";position:absolute;left:7px;top:8px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}#cwaf-about2 .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}#cwaf-about2 .btn-g{display:inline-block;background:#e0a72e;color:#0e2117;font-family:Montserrat,sans-serif;font-weight:800;font-size:14.5px;text-decoration:none;padding:15px 28px;border-radius:10px;transition:background .15s,transform .15s;}#cwaf-about2 .btn-g:hover{background:#f0b93e;transform:translateY(-2px);}#cwaf-about2 .tel{font-family:Montserrat,sans-serif;font-weight:800;font-size:16px;color:#143024;text-decoration:none;}#cwaf-about2 .tel span{display:block;font-family:"Public Sans",sans-serif;font-weight:400;font-size:12px;color:#6a766f;letter-spacing:.02em;}@media(max-width:900px){#cwaf-about2{padding:50px 18px 54px;}#cwaf-about2 .in{grid-template-columns:1fr;gap:34px;}#cwaf-about2 .vwrap{aspect-ratio:16/11;max-width:520px;margin:0 auto;}#cwaf-about2 h2{font-size:27px;}}
/* cwaf-auclink-css */
.cwaf-auclink{max-width:860px;margin:36px auto;padding:18px 22px;background:#F4F7F5;
 border:1px solid #e3eae6;border-left:4px solid #E0A72E;border-radius:6px}
.cwaf-auclink p{margin:0;line-height:1.55}
.cwaf-auclink strong{color:#143024}
.cwaf-auclink-go{margin-top:8px!important}
.cwaf-auclink-go a{font-weight:700;color:#85620E;text-decoration:none}
.cwaf-auclink-go a:hover{text-decoration:underline}
@media(max-width:560px){.cwaf-auclink{margin:26px 14px;padding:16px 18px}}
/* cwaf-fidx-css */
.cwaf-fidx{background:#0e2117;color:#9aa6bd;padding:52px 0 46px;font-family:'Public Sans',system-ui,sans-serif;border-top:1px solid rgba(255,255,255,.07)}
.cwaf-fidx .fidx-wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.cwaf-fidx .fidx-title{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#e0a72e;margin:0 0 30px}
/* 5 columns x 9 groups = 2 rows. Three columns would give even rows too, but it
   forces THREE rows and made the block taller than the version Conor complained
   about — the wrong direction. Row height is set by the tallest group in the
   row, so fewer rows is what actually shortens this. */
.cwaf-fidx .fidx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px;align-items:start}
.cwaf-fidx .fidx-col{border-bottom:1px solid rgba(255,255,255,.08)}
.cwaf-fidx .fidx-col summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 26px 13px 0;position:relative}
.cwaf-fidx .fidx-col summary::-webkit-details-marker{display:none}
.cwaf-fidx .fidx-col summary::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;border-right:2px solid #7c8aa3;border-bottom:2px solid #7c8aa3;transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.cwaf-fidx .fidx-col[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.cwaf-fidx .fidx-col summary:hover .fidx-h{color:#e0a72e}
.cwaf-fidx .fidx-h{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#9aa6bd;line-height:1.35;transition:color .15s}
.cwaf-fidx .fidx-n{font-size:10.5px;font-weight:700;color:#5f6c82;background:rgba(255,255,255,.06);border-radius:999px;padding:2px 7px;line-height:1.5}
.cwaf-fidx .fidx-col[open] .fidx-h{color:#e0a72e}
.cwaf-fidx .fidx-col ul{padding-bottom:14px}
/* min-height + bottom alignment so a heading that wraps to two lines ("Trucks,
   bus & specialist vehicles") keeps its rule and its first link level with the
   columns either side. Without it that one column sat ~16px lower than the rest. */

.cwaf-fidx .fidx-col ul{list-style:none;padding:0;margin:0}
.cwaf-fidx .fidx-col li{margin:0 0 7px;line-height:1.4}
.cwaf-fidx .fidx-col a{color:#9aa6bd;text-decoration:none;font-size:13px}
.cwaf-fidx .fidx-col a:hover{color:#e0a72e;text-decoration:underline}
.cwaf-fidx .fidx-col span[aria-current]{color:#e0a72e;font-size:13px;font-weight:600}
@media(max-width:1180px){.cwaf-fidx .fidx-grid{grid-template-columns:repeat(2,1fr);gap:8px 24px}}
@media(max-width:760px){.cwaf-fidx .fidx-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:520px){.cwaf-fidx{padding:40px 0 34px}}
/* cwaf-calcpos-css */
.cwaf-calcmoved.cwaf-calcmoved{ margin-top:0!important; }
.cwaf-calcmoved.cwaf-calcmoved::before{ background:#0e2117!important; }
.cwaf-calcmoved.cwaf-calcmoved::after { background:#163527!important; }
/* The two decorative arrow spans flanking the heading are hidden at ALL widths,
 * not just where they broke the wrap. They carry no information, they are the
 * only dated element in an otherwise clean section, and pointing arrows at your
 * own heading reads as shouting — which undercuts the credibility a regulated
 * broker is trying to project. The heading carries itself. */
.cwaf-calcmoved h2 > span:first-child,
.cwaf-calcmoved h2 > span:last-child{ display:none!important; }
.cwaf-calcmoved h2{ text-wrap:balance; }
/* cwaf-mobile-cta-css */
.cwaf-mcta{display:none;}
@media (max-width:900px){
	.cwaf-mcta{
		display:flex;position:fixed;left:0;right:0;bottom:0;z-index:998;
		background:#0e2117;border-top:1px solid rgba(255,255,255,.14);
		box-shadow:0 -6px 24px rgba(0,0,0,.28);
		font-family:'Public Sans',system-ui,-apple-system,sans-serif;
		padding-bottom:env(safe-area-inset-bottom);
	}
	.cwaf-mcta.is-hidden{display:none;}
	.cwaf-mcta a{
		flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:8px;
		padding:15px 10px;font-size:15px;font-weight:700;line-height:1;
		text-decoration:none;letter-spacing:.01em;
	}
	.cwaf-mcta .mcta-call{color:#fff;}
	.cwaf-mcta .mcta-call:active{background:rgba(255,255,255,.08);}
	.cwaf-mcta .mcta-quote{background:#e0a72e;color:#0e2117;}
	.cwaf-mcta .mcta-quote:active{background:#c9942a;}
	.cwaf-mcta i{font-style:normal;font-size:16px;line-height:1;}
	body{padding-bottom:62px;}
}
/* cwaf-cvf-css */
.cwaf-cvf-enquire{background:#0e2117;padding:56px 20px;}
.cwaf-cvf-wrap{max-width:760px;margin:0 auto;}
.cwaf-cvf-h2{color:#fff;font-size:30px;line-height:1.2;margin:0 0 10px;}
.cwaf-cvf-sub{color:#c7d2c9;font-size:16px;line-height:1.6;margin:0 0 26px;}
.cwaf-cvf-panel{background:#fff;border-radius:10px;padding:26px;}
.cwaf-cvf-elig{background:#f6f7f5;border:1px solid #e3e7e2;border-radius:10px;padding:24px;margin:34px 0;}
.cwaf-cvf-elig h3{margin:6px 0 4px;font-size:22px;}
.cwaf-cvf-elig-lbl{display:block;margin:14px 0 5px;font-size:14px;font-weight:600;}
.cwaf-cvf-elig select{width:100%;padding:11px 12px;border:1px solid #c9d0c9;border-radius:7px;background:#fff;font-size:15px;}
.cwaf-cvf-elig button{margin-top:18px;background:#e0a72e;color:#0e2117;border:0;border-radius:7px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;}
.cwaf-cvf-elig button:hover{background:#c9942a;}
.cwaf-cvf-elig [data-elig-result]{margin-top:18px;padding:16px 18px;background:#fff;border-left:4px solid #e0a72e;border-radius:0 7px 7px 0;font-size:15px;line-height:1.6;}
.cwaf-cvf-elig-cta{display:inline-block;margin-top:10px;font-weight:700;color:#0e2117;}
.cwaf-cvf-elig button:focus-visible,.cwaf-cvf-elig select:focus-visible{outline:3px solid #0e2117;outline-offset:2px;}
@media (max-width:600px){.cwaf-cvf-h2{font-size:24px;}.cwaf-cvf-panel{padding:18px;}}
/* cwaf-search-css */
.cwaf-srch{position:relative;font-family:'Public Sans',system-ui,sans-serif}
/* padding is !important because the theme's global input rule overrode
   padding-left:34px down to 15px, which put the placeholder text directly
   underneath the magnifier icon on mobile. Everything else here can lose a
   specificity fight harmlessly; this one cannot. */
.cwaf-srch-i{width:100%;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:1.4;
 padding:9px 12px 9px 34px!important;border:1px solid #cfdad2;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6560' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px 50%/15px 15px;color:#16261e}
.cwaf-srch-i:focus{outline:2px solid #e0a72e;outline-offset:1px;border-color:#e0a72e}
.cwaf-srch-r{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:10000;background:#fff;
 border:1px solid #dde5df;border-radius:10px;box-shadow:0 16px 38px rgba(20,48,31,.16);overflow:hidden;max-height:60vh;overflow-y:auto}
.cwaf-srch-a{display:flex;flex-direction:column;gap:2px;padding:9px 13px;text-decoration:none;border-bottom:1px solid #eef2ef}
.cwaf-srch-a:last-child{border-bottom:0}
.cwaf-srch-a:hover,.cwaf-srch-a.on,.cwaf-srch-a:focus{background:#f4f7f5;outline:none}
.cwaf-srch-t{font-size:14.5px;font-weight:600;color:#16261e;line-height:1.3}
.cwaf-srch-k{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a9690}
.cwaf-srch-none{margin:0;padding:13px;font-size:13.5px;color:#5a6560;line-height:1.5}
.cwaf-srch-none a{color:#8a6a1c}

/* Desktop: a compact field that grows when you use it.
   At 210px fixed it pushed the "Apply online" CTA 41px past the right edge of a
   1440px viewport and made the whole document scroll sideways -- the nav items
   fitted, the header row did not. It now sits narrow and expands on focus, so
   it costs the header almost nothing until someone actually searches. */
.cwaf-srch-desk{display:flex;align-items:center}
.cwaf-srch-desk .cwaf-srch{width:150px}
/* The field does NOT resize on focus. Growing it in flow pushed "Apply online"
   151px off the viewport; overlaying it with right:0 on a 150px container made
   it grow leftward straight across the CW Asset Finance logo. A 150px field is
   perfectly usable when the suggestions below it are full width -- which is
   where the reading actually happens. */
.cwaf-srch-desk .cwaf-srch-i{font-size:13.5px;padding:8px 10px 8px 31px!important;text-overflow:ellipsis}
.cwaf-srch-desk .cwaf-srch-r{width:380px;left:0;right:auto}
/* Below 1340px the header runs out of room before the nav does, so the field
   collapses to its icon and opens on focus. */
/* Below 1340px the header runs out of room before the nav does. The field
   keeps its place but loses the placeholder text, leaving the magnifier. */
@media(max-width:1340px){
  .cwaf-srch-desk .cwaf-srch{width:112px}
  .cwaf-srch-desk .cwaf-srch-i{padding-right:6px!important}
}

/* Mobile: a full-width bar under the header. The theme hides .site-nav below
   its own breakpoint, so the desktop field disappears there and this replaces
   it rather than duplicating it. */
.cwaf-srch-mob{display:none;padding:10px 16px;background:#fff;border-bottom:1px solid #e6ece7}
@media(max-width:1100px){
  .cwaf-srch-desk{display:none}
  .cwaf-srch-mob{display:block}
}
/* cwaf-cl-css */
a.cwaf-cl{color:inherit;text-decoration:underline;text-decoration-color:rgba(224,167,46,.55);text-underline-offset:3px;text-decoration-thickness:1.5px}a.cwaf-cl:hover{color:#1d6b45;text-decoration-color:#e0a72e}
/* cwaf-lq-css */
/* NO LAYOUT HERE. These fields are real .wpforms-field elements now, so the
 * form's own stylesheet sizes and places them -- see the comment in the JS.
 * Anything this file sets about width, columns or spacing would be a second
 * opinion competing with the form's, which is how the last two versions went
 * wrong. Only the two things the form has no opinion about are set: the
 * "optional" hint, and the reassurance line.
 */
.cwaf-lq-opt{font-weight:400;color:#8a9690;font-size:.85em}
/* NO INHERITED ICON. These fields clone .wpforms-field-text so that the form
   lays them out -- but on this form the text field IS the Phone field, so the
   theme drew a telephone icon inside "Deposit or part-exchange". The layout is
   worth inheriting; the iconography is not, because it is keyed to whatever the
   cloned field happens to be rather than to what these are. */
/* Targeted by ID, not class, and that is deliberate. The competing rule is
   `.cwaf .cwaf-form-panel .wpforms-field-text input` in cwaf-design-css --
   three classes and an element (0,3,1), also !important. A class-based selector
   here (0,2,0) lost to it silently: the declaration was in the stylesheet, it
   simply never applied, and the icon stayed. An ID is (1,0,0) and settles it.
   14px is the native horizontal padding with the icon's 38px indent removed. */
#cwaf-lq-hist,#cwaf-lq-dep{background-image:none!important;padding-left:14px!important}
.cwaf-lq-noterow{width:100%;flex-basis:100%;grid-column:1/-1}
.cwaf-lq-note{grid-column:1/-1;margin:0;font-size:0;line-height:0;color:#33403a;transition:font-size .12s ease}
.cwaf-lq-note.on{font-size:14px;line-height:1.55;padding:10px 12px;background:#f4f7f5;
 border-left:3px solid #e0a72e;border-radius:0 6px 6px 0}
/* cwaf-ca-css */
[data-calc] [data-calc-rate]{display:flex!important;flex-direction:column;align-items:center;gap:2px;
 padding:9px 0!important;line-height:1.2}
[data-calc] .cwaf-ca-tier{font-size:12px;font-weight:700;letter-spacing:.02em;opacity:.78}
[data-calc] .cwaf-ca-pc{font-size:16px;font-weight:800;line-height:1}
[data-calc] .cwaf-ca-pc small{font-size:11px;font-weight:700;opacity:.8}
[data-calc] .cwaf-ca-apr{font-size:11.5px;font-weight:700;opacity:.72}
/* cwaf-rd */
/* The brand gradient, not a flat fill. Lit from the upper left with two low
   gold blooms so the section reads as depth rather than a dark box. */
.rd-section.rd-section{position:relative;padding:66px 0 54px;overflow:hidden;
 background-color:#0e2117;
 background-image:
  radial-gradient(54% 32% at 13% 16%, rgba(224,167,46,.11) 0%, rgba(224,167,46,0) 100%),
  radial-gradient(46% 34% at 88% 88%, rgba(224,167,46,.075) 0%, rgba(224,167,46,0) 100%),
  radial-gradient(125% 95% at 20% 28%, #1c4632 0%, #163826 32%, #112a1d 60%, #0c1d14 82%, #08130d 100%)}
/* Gold hairline top and bottom, brightest in the middle. */
.rd-section::before,.rd-section::after{content:"";position:absolute;left:0;right:0;height:1px;z-index:3}
.rd-section::before{top:0;background:linear-gradient(90deg,rgba(224,167,46,0),rgba(224,167,46,.5),rgba(224,167,46,0))}
.rd-section::after{bottom:0;background:linear-gradient(90deg,rgba(224,167,46,0),rgba(224,167,46,.22),rgba(224,167,46,0))}
.rd-head{max-width:1180px;margin:0 auto 28px;padding:0 26px;text-align:center;position:relative;z-index:2}
.rd-eyebrow.rd-eyebrow{color:#e8b64a!important;font:700 12px/1 Montserrat,sans-serif;
 letter-spacing:1.6px;text-transform:uppercase;margin:0 0 10px}
.rd-title{font:800 30px/1.2 Montserrat,sans-serif;color:#fff;margin:0;text-wrap:balance}
/* Full-width window. The mask fades both edges to transparent, so it is correct
   over the gradient — a painted fade would need a flat colour behind it. */
.rd-viewport{position:relative;width:100%;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
         mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.rd-marquee{display:flex;width:max-content}
.rd-track{display:flex;gap:18px;margin:0;padding:0 9px;list-style:none;
 animation:rd-scroll 61s linear infinite}
.rd-viewport:hover .rd-track,.rd-track:focus-within{animation-play-state:paused}
@keyframes rd-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Cards must be equal height. A two-line caption ("John Deere 2653B greens
   mower") otherwise makes its card taller than its neighbours and the row of
   gold borders stops lining up. The li stretches, the link fills it, and the
   caption reserves two lines whether it needs them or not. */
.rd-item{flex:0 0 232px;display:flex}
.rd-link{display:flex;flex-direction:column;width:100%;border-radius:12px;overflow:hidden;text-decoration:none;
 background:linear-gradient(180deg,#1a3a27 0%,#142c1e 100%);
 border:1px solid rgba(224,167,46,.22);
 box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.28);
 transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.rd-link:hover,.rd-link:focus-visible{transform:translateY(-4px);
 border-color:rgba(224,167,46,.75);
 box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 12px 26px rgba(0,0,0,.42), 0 0 0 1px rgba(224,167,46,.18)}
.rd-link:focus-visible{outline:2px solid #e0a72e;outline-offset:3px}
.rd-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#1f4632}
.rd-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.rd-link:hover .rd-media img{transform:scale(1.045)}
.rd-body{display:block;padding:13px 15px 15px;position:relative;flex:1 0 auto}
/* Gold rule under the image so the amount sits on an edge rather than floating. */
.rd-body::before{content:"";position:absolute;top:0;left:15px;right:15px;height:1px;
 background:linear-gradient(90deg,rgba(224,167,46,.55),rgba(224,167,46,.05))}
.rd-amt{display:block;font:800 20px/1 Montserrat,sans-serif;color:#efc264;margin-bottom:5px;
 font-variant-numeric:tabular-nums;letter-spacing:.2px}
.rd-cap{display:block;font:400 13px/1.4 system-ui,sans-serif;color:#cfdad3;min-height:2.8em}
.rd-note{max-width:1180px;margin:28px auto 0;padding:0 26px;text-align:center;position:relative;z-index:2;
 font:400 12px/1.6 system-ui,sans-serif;color:#8ba193}
.rd-all{color:#e8b64a;font-weight:700;text-decoration:none;white-space:nowrap}
.rd-all:hover,.rd-all:focus-visible{text-decoration:underline}
/* The edge fade is 4%, which is ~50px on a 1240px desktop viewport and hides the
   cut cleanly. On a 390px phone the same 4% is 16px, so cards were chopped
   mid-word at both edges -- a price reading as "3,000", a label as "o 7 plug-in
   hybrid". It looked broken rather than like a marquee. 14% is ~55px at 390px,
   restoring the desktop effect. */
@media(max-width:700px){.rd-title{font-size:23px}.rd-item{flex-basis:186px}
 .rd-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){
 .rd-track{animation:none}
 .rd-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .rd-marquee{width:auto}
 .rd-track[aria-hidden="true"]{display:none}
 .rd-link{transition:none}
 .rd-link:hover{transform:none}
 .rd-link:hover .rd-media img{transform:none}}
/* cwaf-hdr-nav-css */
.site-nav{display:flex;align-items:center;gap:4px !important}
.site-nav .nav-item{position:relative;display:flex;align-items:center}
.site-nav .nav-secondary{margin-left:6px}
.site-nav .nav-mega.nav-mega-sm{width:min(600px,94vw);left:auto;right:0;transform:translateX(0) translateY(6px)}
.site-nav .nav-has-menu:hover .nav-mega.nav-mega-sm,.site-nav .nav-has-menu:focus-within .nav-mega.nav-mega-sm{transform:translateX(0) translateY(2px)}
.site-nav .nav-mega-sm .nav-mega-inner{grid-template-columns:1fr 1fr;gap:26px}
.site-nav .nav-secondary a.nav-top{display:inline-flex;align-items:center;gap:5px}
.site-nav .nav-secondary a.nav-top{color:#5a6b60;border:1px solid #d7e0da}
.site-nav .nav-secondary a.nav-top:hover{color:#143024;border-color:#143024}
.site-nav a.nav-top{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:14.5px;font-weight:600;color:#143024;text-decoration:none;padding:10px 12px;border-radius:7px}
.site-nav a.nav-top:hover,.site-nav a.nav-top:focus-visible{color:#8a6a1c;background:rgba(20,48,31,.045)}
.site-nav a.nav-top[aria-current]{color:#8a6a1c}
.site-nav .nav-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65;margin-top:1px}

/* mega-menu: CSS-only, opens on hover and on keyboard focus */
.site-nav{position:relative}
/* The panel is centred on .site-nav, not on the individual nav item. The item
   is 133px wide, so once the menu grew from 3 columns to 5 (940px -> 1240px)
   centring on it hung 211px off the left edge of the screen. Making the item
   static hands the containing block to .site-nav, which is wide enough and
   central enough for the panel to fit. */
.site-nav .nav-has-menu{position:static}
.site-nav .nav-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);width:min(1240px,96vw);background:#fff;border:1px solid #dde5df;border-radius:14px;box-shadow:0 18px 44px rgba(20,48,31,.14);padding:26px 28px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:9999}
.site-nav .nav-has-menu:hover .nav-mega,.site-nav .nav-has-menu:focus-within .nav-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(2px)}
.site-nav .nav-mega-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
/* What we fund now mirrors the hub page: 7 groups, 58 links, longer labels
   ("Medical, Dental & Veterinary Equipment"). Seven columns inside 1240px is
   169px each, which wraps those labels to four lines. Four columns at ~285px
   sets them on one or two lines instead, over two rows. The empty bottom-right
   cell is deliberate -- it is where the eye exits toward the CTA strip. */
/* Reading from the pillar registry puts the menu back to 28 links over five
   columns, so it uses the shared 5-column grid again. The 4-column, tightened
   variant that lived here was for the 58-link curated list and measured 806px
   tall -- 20px below the fold at 1440x912, clipping the CTA. Kept only the
   height guard, which costs nothing and protects short laptop screens. */
.site-nav .nav-mega-wwf{max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}

/* Asset depth per pillar, counted from cwaf_eq_items(). Muted and tabular so
   the numbers line up and read as metadata rather than as part of the link. */
.site-nav .nav-mega-n{display:inline-block;margin-left:5px;font-size:11px;
  font-weight:600;color:#8a9690;font-variant-numeric:tabular-nums}
.site-nav .nav-mega-col a:hover .nav-mega-n,
.site-nav .nav-mega-col a:focus-visible .nav-mega-n{color:#8a6a1c}
.site-nav .nav-mega-col h3{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5a6560;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #e6ece7;display:flex;align-items:flex-end;min-height:34px;box-sizing:border-box;line-height:1.3}
.site-nav .nav-mega-col ul{list-style:none;padding:0;margin:0}
.site-nav .nav-mega-col li{margin:0 0 8px}
.site-nav .nav-mega-col a{display:block;font-size:13.5px;line-height:1.45;color:#2b3833;text-decoration:none;font-weight:400;white-space:normal;padding:1px 0}
.site-nav .nav-mega-col a:hover,.site-nav .nav-mega-col a:focus-visible{color:#8a6a1c;text-decoration:underline}
.site-nav .nav-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:18px;border-top:1px solid #e6ece7}
.site-nav .nav-mega-foot p{font-size:13.5px;line-height:1.5;color:#5a6560;margin:0}
.site-nav .nav-mega-also{margin-left:auto!important;padding-left:22px;white-space:nowrap}
.site-nav .nav-mega-also a{color:#8a6a1c;font-weight:700;text-decoration:none}
.site-nav .nav-mega-also a:hover,.site-nav .nav-mega-also a:focus-visible{text-decoration:underline}
.site-nav a.nav-mega-cta{display:inline-block;flex:0 0 auto;background:#14301f;color:#fff;font-size:13px;font-weight:700;text-decoration:none;padding:11px 18px;border-radius:7px;line-height:1.3;white-space:nowrap}
.site-nav a.nav-mega-cta:hover{background:#1d4430;color:#fff;text-decoration:none}

@media(max-width:1100px){
  .site-nav .nav-mega{width:min(980px,96vw)}
  .site-nav .nav-mega-inner{grid-template-columns:repeat(3,1fr);gap:22px}
}
/* below the theme's desktop-nav breakpoint the whole .site-nav is already
   hidden by the theme, so the mega-menu never needs a mobile layout */
@media(max-width:860px){
  .site-nav .nav-mega{display:none}
}
/* cwaf-gold-polish */
/* =============================================== the process section */
.how-section.how-section.how-section{position:relative;overflow:hidden;
 background-color:#0e2117!important;
 background-image:
  radial-gradient(46% 30% at 12% 12%, rgba(224,167,46,.14) 0%, rgba(224,167,46,0) 100%),
  radial-gradient(125% 95% at 22% 26%, #1d4a34 0%, #163826 34%, #112a1d 62%, #0b1b13 84%, #08130d 100%)!important;
 padding-top:74px!important;padding-bottom:26px!important}
.how-section.how-section.how-section > .elementor-background-overlay{display:none!important}
.how-section.how-section.how-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;
 background:linear-gradient(90deg,rgba(224,167,46,0),rgba(224,167,46,.55),rgba(224,167,46,0))}
.how-section.how-section.how-section::after{display:none}

.how-section.how-section.how-section .how-eyebrow,
.how-section.how-section.how-section .eyebrow{color:#e8b64a!important;letter-spacing:2px;font-weight:800!important}
.how-section.how-section.how-section.how-section h2,
.how-section.how-section.how-section .elementor-heading-title{color:#fff!important;text-wrap:balance;letter-spacing:-.4px}
.how-section.how-section.how-section p,
.how-section.how-section.how-section .elementor-widget-text-editor{color:#b9cbc0!important}

/* ------------------------------------------- the steps (next section) */
.how-section.how-section.how-section + .elementor-top-section,
.elementor-top-section:has(.step-box){position:relative;
 background-color:#0a1810!important;
 background-image:
  radial-gradient(70% 120% at 50% -10%, rgba(224,167,46,.09) 0%, rgba(224,167,46,0) 70%),
  linear-gradient(180deg,#0b1b13 0%,#091610 60%,#08130d 100%)!important;
 padding-top:16px!important;padding-bottom:64px!important}
.elementor-top-section:has(.step-box) > .elementor-background-overlay{display:none!important}

/* THE RAIL IS REMOVED.
   The section ships its own ::before dashed connector, painted #e6d6a6 for the
   white background this section used to have. It was recoloured gold for a
   while, but the steps read perfectly well as a sequence from the STEP chips
   and the card order — the line added nothing and cut across the card faces.
   Hidden rather than restyled. Delete this block to bring it back. */
.elementor-top-section:has(.step-box)::before{display:none!important}

/* Each step becomes a panel with weight, not floating text. */
.elementor-top-section:has(.step-box) .step-box{position:relative;z-index:1;
 /* Two layers, and the lower one is OPAQUE on purpose. With only the
    translucent white the rail behind showed straight through each card,
    reading as a strike-through across the face rather than a line connecting
    the discs. The solid layer blocks it, so the rail shows only in the gaps. */
 background:linear-gradient(180deg,rgba(255,255,255,.062) 0%,rgba(255,255,255,.018) 100%),
            linear-gradient(180deg,#0f2418 0%,#0b1b13 100%);
 border:1px solid rgba(224,167,46,.2);border-radius:18px;
 padding:30px 20px 26px!important;margin:0 8px;
 box-shadow:0 10px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
 transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease,opacity .6s ease}
.elementor-top-section:has(.step-box) .step-box::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;
 border-radius:2px;background:linear-gradient(90deg,transparent,#e0a72e,transparent);
 opacity:.8;transition:opacity .3s ease,left .3s ease,right .3s ease}
.elementor-top-section:has(.step-box) .step-box:hover{transform:translateY(-6px);
 border-color:rgba(224,167,46,.6);
 box-shadow:0 18px 42px rgba(0,0,0,.46), 0 0 0 1px rgba(224,167,46,.16), inset 0 1px 0 rgba(255,255,255,.08)}
.elementor-top-section:has(.step-box) .step-box:hover::before{opacity:1;left:10%;right:10%}

/* STEP n chip, lifted out of the heading by the script below. */
.elementor-top-section:has(.step-box) .step-box[data-step]::after{content:"STEP " attr(data-step);
 position:absolute;top:14px;left:20px;z-index:2;
 font:800 9.5px/1 Montserrat,sans-serif;letter-spacing:1.6px;color:#e0a72e;opacity:.9}

/* Solid gold disc. An outlined disc disappears on this ground. */
.elementor-top-section:has(.step-box) .step-box .elementor-icon{
 width:64px!important;height:64px!important;border-radius:50%!important;
 display:inline-flex!important;align-items:center;justify-content:center;
 color:#12301f!important;border:0!important;
 background:linear-gradient(158deg,#f2c45f 0%,#e5ae38 38%,#cf9420 72%,#b57d0c 100%)!important;
 box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 0 7px rgba(224,167,46,.09),
            inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(0,0,0,.18);
 transition:box-shadow .3s ease}
/* THE WHITE DISC WAS THE <svg> ITSELF.
   Existing site CSS gives the SVG background:#fff, a 2px gold border and a 50%
   radius — it was drawing a white circle on top of the gold .elementor-icon,
   which is why the disc read as white however hard the parent was styled.
   Strip that back so the SVG is just the glyph and the parent is the disc. */
/* The existing rule also sets display:flex and a 44px box on the SVG root.
   An <svg> as a flex container stops painting its own children, so stripping the
   white disc without fixing display left four gold discs with no glyph. Match on
   the icon class too (five classes) to beat the site rule on size, and force
   display:block. The path is targeted directly — a fill on the root does not
   always reach it. */
.elementor-top-section:has(.step-box) .step-box .elementor-icon svg.e-font-icon-svg,
.elementor-top-section:has(.step-box) .step-box .elementor-icon svg{
 display:block!important;
 background:none!important;background-color:transparent!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 padding:0!important;margin:0!important;
 width:25px!important;height:25px!important;min-width:0!important;min-height:0!important;
 overflow:visible!important;fill:#12301f!important}
.elementor-top-section:has(.step-box) .step-box .elementor-icon svg path{fill:#12301f!important}
.elementor-top-section:has(.step-box) .step-box .elementor-icon i{
 background:none!important;border:0!important;font-size:24px!important;color:#12301f!important}
.elementor-top-section:has(.step-box) .step-box:hover .elementor-icon{
 box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 0 10px rgba(224,167,46,.14),
            inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(0,0,0,.18)}

.elementor-top-section:has(.step-box) .elementor-icon-box-title,
.elementor-top-section:has(.step-box) .elementor-icon-box-title *{color:#fff!important;font-weight:800!important;
 font-size:16.5px!important;line-height:1.3!important;letter-spacing:-.1px}
.elementor-top-section:has(.step-box) .elementor-icon-box-description,
.elementor-top-section:has(.step-box) p{color:#aabfb1!important;font-size:13.5px!important;line-height:1.55!important}

/* Reveal. Active only once the script marks the row ready. */
.steps-ready .step-box{opacity:0;transform:translateY(20px)}
.steps-ready .step-box.is-in{opacity:1;transform:none}
.steps-ready .step-box.is-in:hover{transform:translateY(-6px)}

/* ------------------------------------------- the CTA (third section) */
.elementor-top-section:has(.step-box) + .elementor-top-section{position:relative;
 background-color:#08130d!important;background-image:none!important;
 padding-top:0!important;padding-bottom:62px!important}
.elementor-top-section:has(.step-box) + .elementor-top-section .elementor-widget-wrap,
.elementor-top-section:has(.step-box) + .elementor-top-section .elementor-container,
.elementor-top-section:has(.step-box) + .elementor-top-section .elementor-column,
.elementor-top-section:has(.step-box) + .elementor-top-section .elementor-widget{
 background:transparent!important;box-shadow:none!important;border:0!important}
.elementor-top-section:has(.step-box) + .elementor-top-section::after{content:"";position:absolute;
 left:0;right:0;bottom:0;height:1px;z-index:3;
 background:linear-gradient(90deg,rgba(224,167,46,0),rgba(224,167,46,.22),rgba(224,167,46,0))}

/* ============================== the trust strip under the hero */
/* Hero, strip and calculator ran together as three dark bands. A light band
   here separates them and gives the credibility line somewhere to sit.
   Near-white with a faint green bias rather than a default grey, so it belongs
   to this palette; gold hairlines tie it to the brand without spending gold on
   a whole band, which would compete with the CTAs.

   THE LIGHT FILL IS ON .trust-marquee, NOT ONLY ON THE SECTION.
   The section inherits the site's `.cwaf` hero gradient from a rule this module
   cannot see or outrank reliably — on dev the text rules applied while the
   background rule lost, leaving dark green text on dark green. Painting the
   band on the inner element too means the text can never end up on the wrong
   ground: if the section rule wins, the two agree; if it loses, the marquee is
   still light. Belt and braces on purpose. */
.trust-strip.trust-strip.trust-strip,
section.trust-strip.trust-strip.trust-strip.trust-strip,
.cwaf.trust-strip.trust-strip.trust-strip,
.elementor-section.trust-strip.trust-strip.trust-strip{position:relative;z-index:2;
 /* A green warmed toward brass rather than a gold band. The gold sits as a
    translucent wash over the green — strongest at the top edge where it catches
    the hero above, falling away through the middle so the text stays readable,
    and lifting again at the base. Painting the bar gold outright would compete
    with the CTAs, which are the only other gold this high up the page. */
 background-color:#22482f!important;
 background-image:
  linear-gradient(180deg, rgba(224,167,46,.22) 0%, rgba(224,167,46,.06) 48%, rgba(224,167,46,.15) 100%),
  linear-gradient(180deg,#27563c 0%,#1d4029 100%)!important;
 padding-top:0!important;padding-bottom:0!important}
.trust-strip.trust-strip.trust-strip > .elementor-background-overlay{display:none!important}

.trust-strip.trust-strip .trust-marquee{
 /* A green warmed toward brass rather than a gold band. The gold sits as a
    translucent wash over the green — strongest at the top edge where it catches
    the hero above, falling away through the middle so the text stays readable,
    and lifting again at the base. Painting the bar gold outright would compete
    with the CTAs, which are the only other gold this high up the page. */
 background-color:#22482f!important;
 background-image:
  linear-gradient(180deg, rgba(224,167,46,.22) 0%, rgba(224,167,46,.06) 48%, rgba(224,167,46,.15) 100%),
  linear-gradient(180deg,#27563c 0%,#1d4029 100%)!important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
         mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
/* Any edge fade painted in the old dark colour would smear across a light band;
   the mask above replaces it. */
.trust-strip.trust-strip .trust-marquee::before,
.trust-strip.trust-strip .trust-marquee::after{display:none!important}
.trust-strip.trust-strip .t-item{color:#eaf2ec!important;font-weight:600!important}
.trust-strip.trust-strip .t-arrow{color:#e8b64a!important;margin-right:7px}

/* The bar at the very top of every page carried a 1px gold underline
   (border-bottom: rgba(224,167,46,.22)). Removed along with the strip's edges —
   the dark bar against the white header is already a clear boundary. */
.cwaf-trustbar.cwaf-trustbar.cwaf-trustbar{border-bottom:0!important}

/* ===================================================== the buttons */
.btn-gold.btn-gold,
.elementor-button.elementor-button,
.wpforms-submit.wpforms-submit,
.cwg-btn.cwg-btn{
 background-color:#e0a72e!important;
 background-image:linear-gradient(180deg,#f7d489 0%,#eab947 38%,#e0a72e 62%,#c68e1c 100%)!important;
 color:#12301f!important;font-weight:800!important;border-color:transparent!important;
 box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -1px 0 rgba(0,0,0,.12) inset, 0 8px 20px rgba(224,167,46,.24);
 transition:background-image .2s ease,box-shadow .2s ease,transform .2s ease}
.btn-gold.btn-gold:hover,.btn-gold.btn-gold:focus-visible,
.elementor-button.elementor-button:hover,.elementor-button.elementor-button:focus-visible,
.wpforms-submit.wpforms-submit:hover,.wpforms-submit.wpforms-submit:focus-visible,
.cwg-btn.cwg-btn:hover,.cwg-btn.cwg-btn:focus-visible{
 background-image:linear-gradient(180deg,#ffe3a6 0%,#f5c65a 38%,#eab63c 62%,#d09a22 100%)!important;
 color:#12301f!important;transform:translateY(-2px);
 box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 12px 28px rgba(224,167,46,.38)}
.btn-gold.btn-gold:focus-visible,.elementor-button.elementor-button:focus-visible,
.wpforms-submit.wpforms-submit:focus-visible,.cwg-btn.cwg-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wpforms-submit.wpforms-submit[disabled],.btn-gold.btn-gold[disabled]{opacity:.6;transform:none;box-shadow:none}

@media(max-width:1024px){
 .elementor-top-section:has(.step-box) .step-box{margin:0 0 14px}}
@media(prefers-reduced-motion:reduce){
 .steps-ready .step-box{opacity:1!important;transform:none!important}
 .elementor-top-section:has(.step-box) .step-box,
 .btn-gold.btn-gold,.elementor-button.elementor-button,
 .wpforms-submit.wpforms-submit,.cwg-btn.cwg-btn{transition:none}
 .elementor-top-section:has(.step-box) .step-box:hover,
 .btn-gold.btn-gold:hover,.elementor-button.elementor-button:hover,
 .wpforms-submit.wpforms-submit:hover,.cwg-btn.cwg-btn:hover{transform:none}}
/* cwaf-calc-skin */
/* ------------------------------------------------------------------
   CALCULATOR, RESTYLED TO MATCH THE HOMEPAGE

   Conor's note, 26 Sep: the sector calculator is a white card on grey and
   looks nothing like the homepage one, which is a dark two-column panel with
   a big gold figure. Values copied from the homepage's own inline styles
   rather than eyeballed: grid 1.15fr/.85fr, gap 44px, panel #0e2117 with a
   rgba(224,167,46,.25) border, figure Montserrat 900 at 52px in #e0a72e,
   labels #c4cde0, muted #9aa6bd, slider accent #e0a72e.

   CSS ONLY, and page-scoped. The markup and the maths stay exactly as
   site-core emits them -- the flat-rate model Conor asked for, the three
   options, the equivalent-APR line and the representative example are all
   untouched. Only the skin changes, and only on this page: the 605 asset
   pages and every other sector page are unaffected because this stylesheet
   is printed nowhere else.

   The right-hand panel is two elements (.usx-calc-out and .usx-calc-sum),
   not one, so they are placed in column 2 with row-gap:0 and matching
   backgrounds -- meeting edge to edge they read as a single panel, without
   needing JavaScript to wrap them and risking a flash of the old layout.
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   THE 605 ASSET PAGES WRAP THE CALCULATOR DIFFERENTLY

   Sector pages emit <section class="usx-band usx-calc-band">. The asset
   pages do not: live-equipment-pages.php lifts the calculator out of the
   sector page and re-wraps it in <div class="cwaf-eq-calc">, so the
   section-level background below never applied there.

   That left the restyle half-applied on 605 pages -- the dark results panel
   rendered, but the left column kept the light-page background while the
   labels and values had already been recoloured for dark. "£25,000" and
   "48 months" came out white on white and the slider tracks vanished.
   Caught by looking at an asset page rather than trusting that a sector
   page and an asset page render the same markup. They do not.

   Giving the asset wrapper the same dark ground fixes both halves at once.
------------------------------------------------------------------ */
.cwaf-eq-calc{
	border-radius:18px;
	padding:30px 24px 26px;
	margin:0 0 30px;

	/* WIDTH: the calculator breaks out of the text column.
	   .cwaf-eq-wrap is capped at 780px because it is a reading measure -- right
	   for prose, wrong for a two-column widget. Squeezed into it the results
	   panel fell to 236px and "Amount financed" wrapped onto two lines, so the
	   same component looked considerably worse here than on the homepage, which
	   gives it ~1100px. Since Conor's "this is the calculator we will use
	   throughout the whole site", looking different per page is the one thing it
	   must not do.
	   Centred by margin rather than by transform: a transform would make this a
	   containing block for anything fixed inside it, and this band already
	   carries sticky CTAs elsewhere on the page. */
	width:min(1120px, calc(100vw - 52px));
	max-width:none;
	margin-left:calc(50% - min(560px, (100vw - 52px) / 2));
}

/* The component's grid is a fixed two columns declared inline, so it cannot
   respond on its own. Below 820px the results panel has nowhere to go and the
   sliders lose their labels to wrapping, so it stacks. */
@media (max-width: 820px){
	[data-calc] .g-2{grid-template-columns:1fr!important;gap:26px!important;padding:26px!important}
	.cwaf-eq-calc{width:auto;margin-left:0;padding:22px 16px}
}
.cwaf-eq-calc .usx-calc{
	max-width:100%!important;
	padding:0!important;
	background:transparent!important;
	border:0!important;
}
.cwaf-eq-calc .usx-calc-note{color:#c4cde0!important;margin:0 0 24px!important;text-align:left}
.cwaf-eq-calc .usx-calc-terms{color:#aab5ae!important}
.cwaf-eq-calc .usx-calc-terms strong{color:#dfe7e2!important}

/* The exact gradient the homepage calculator sits on, lifted from its computed
   style on the live page rather than approximated. It is THREE layers -- a gold
   glow, a darkening wash and the green base -- which is why a single 160deg
   two-stop linear never looked like it. */
.usx-calc-band,
.cwaf-eq-calc{
	background-color:#0e2117!important;
	background-image:
		radial-gradient(46% 26% at 17% 76%, rgba(224,167,46,.12) 0%, rgba(224,167,46,0) 100%),
		linear-gradient(rgba(8,19,13,0) 74%, rgba(8,19,13,.4) 100%),
		radial-gradient(110% 46% at 19% 74%, #1f4c36 0%, #173828 25%, #122b1f 50%, #0d2017 75%, #09150f 100%)!important;
}
.usx-calc-band .usx-h2,
.usx-calc-band h2{color:#fff!important}
.usx-calc-note{color:#c4cde0!important;max-width:720px;margin:-14px auto 34px!important}

.usx-calc{
	max-width:1040px!important;
	background:rgba(255,255,255,.04)!important;
	border:1px solid rgba(255,255,255,.10)!important;
	border-radius:18px!important;
	box-shadow:none!important;
	padding:38px!important;
	display:grid!important;
	grid-template-columns:1.15fr .85fr;
	/* ROWS ARE DECLARED, and the right-hand panel is positioned off the END of
	   the grid rather than off fixed numbers.
	   This used to read grid-row:1/span 2 for the results panel and grid-row:3
	   for the summary -- numbers that silently encoded "there are exactly two
	   sliders". Adding a third (Deposit) broke it: the summary is the tallest
	   thing in the card, so row 3 stretched to its height with only the short
	   Deposit slider beside it, opening a ~250px hole in the middle of the left
	   column and dropping the rate buttons into an orphaned fourth row.
	   One row per left-column child -- Amount, Term, Deposit, rate buttons --
	   and the panel halves anchor to -2/-1, so the summary always sits beside
	   the LAST row whatever that row turns out to be. Adding another control
	   now means adding one `auto` here and nothing else. */
	grid-template-rows:auto auto auto auto;
	column-gap:44px;
	row-gap:0;
	align-items:start;
}

/* ---- left column: sliders and rate buttons */
.usx-calc-row{grid-column:1;margin-bottom:26px!important}
.usx-calc-row label{color:#c4cde0!important;font-size:14px!important;font-weight:600!important}
.usx-calc-row label b{color:#fff!important;font-size:23px!important;font-weight:800}
/* SLIDERS: go back to the NATIVE control, which is what the homepage uses.
   The homepage range is appearance:auto with accent-color:#e0a72e, so the
   browser paints the gold filled portion to the left of the thumb and a small
   gold thumb. site-core sets -webkit-appearance:none with a custom 24px thumb,
   which kills the fill and gives a fat dot. That was the single most visible
   difference between the two calculators and a property-by-property colour
   check never caught it, because every colour matched. */
.usx-calc input[type=range]{
	-webkit-appearance:auto!important;
	appearance:auto!important;
	accent-color:#e0a72e!important;
	background:#fff!important;
	height:6px!important;
	border-radius:0!important;
}
.usx-calc input[type=range]::-webkit-slider-thumb{
	-webkit-appearance:auto!important;
	width:auto!important;height:auto!important;
	background:initial!important;border-radius:initial!important;box-shadow:none!important;
}
.usx-calc input[type=range]::-moz-range-thumb{
	width:auto!important;height:auto!important;
	background:initial!important;border:initial!important;border-radius:initial!important;
}

/* CTA: the homepage's notched gold button, values copied from its computed
   style -- clip-path cuts 16px off the bottom-right corner to make the arrow. */
.usx-calc-out .usx-btn,
.usx-calc-out a[class*="btn"],
.usx-calc-sum .usx-btn,
.usx-calc-sum a[class*="btn"],
.cwaf-calc-cta-moved{
	background-color:#ffc233!important;
	background-image:linear-gradient(180deg,#ffd15c 0%,#ffc233 46%,#f0a91a 100%)!important;
	color:#0e2117!important;
	border:0!important;
	border-radius:0!important;
	padding:14px 22px 14px 16px!important;
	font-size:14px!important;
	font-weight:800!important;
	clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
	box-shadow:none!important;
}
.usx-calc-rates{grid-column:1;margin:0!important}

/* THE NAMED RATE BANDS, restyled for the dark panel.
   site-core styles this calculator for a WHITE card. This file re-skins it onto
   the dark green band, and anything site-core adds in its own light palette
   arrives here unreadable unless it is restated. The tier key landed at
   #3d4d45 on #0e2117 -- measured 1.88:1, against a 4.5:1 AA floor. That is the
   same white-on-white failure this file was created to stop, reproduced by
   adding one paragraph upstream, so the rule is: nothing new goes into the
   calculator markup without a matching line here.
   #9aa6bd is not a fresh choice -- it is what .usx-calc-sum span already uses
   on this exact background, where it measures comfortably past AA. */
.usx-calc-tierkey{color:#9aa6bd!important;font-size:12.5px!important;line-height:1.65!important}

/* ---- BAND STATE, STATED ONCE AND UNAMBIGUOUSLY -------------------------
   The selected band was painting the WRONG button. Whichever band was gold at
   page load stayed gold after the selection moved, and the genuinely selected
   one went translucent -- so on the tractor page "Standard" sat gold while
   "Specialist" was the live choice. On a calculator whose entire job is to show
   a price, the highlight pointing at a rate you are not being quoted is not a
   cosmetic bug.
   Part of it was live-brand-gradient.php tagging the initially-gold button
   cwg-btn and never removing it (fixed at source there). The rest was four
   stylesheets each having an opinion about .usx-calc-rate with mixed
   !important, where the winner depended on load order rather than on state.
   These two rules end the argument: both are keyed on :not(.is-on)/.is-on so
   they can only ever describe the real state, and the repeated class raises
   specificity above every other opinion without resorting to an id.
   background-image is reset explicitly -- the shorthand alone left a stale
   gradient behind on a button that had been selected earlier. */
.usx-calc .usx-calc-rate.usx-calc-rate.usx-calc-rate:not(.is-on){
	background:rgba(255,255,255,.04)!important;background-image:none!important;
	border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;
}
.usx-calc .usx-calc-rate.usx-calc-rate.usx-calc-rate.is-on{
	background:#e0a72e!important;
	background-image:linear-gradient(#ffd15c 0%,#ffc233 46%,#f0b021 100%)!important;
	border:1px solid #e0a72e!important;color:#0e2117!important;
}

/* ---- THE SMALL PRINT, ALIGNED ------------------------------------------
   Measured on an asset page before this: the general disclaimer rendered 499px
   wide flush against the card's left edge, while the representative example
   below it was 760px and started 155px further right -- two widths, two left
   edges, both centre-aligned, under a card 1070px wide. It read as two stray
   paragraphs rather than the footer of the thing above them.

   The 499px was not a choice: .cwaf-eq-wrap sets `p{max-width:66ch}` for body
   prose, and these two inherited it. So the width is stated here rather than
   left to whatever measure the surrounding page happens to use.

   Left-aligned, not centred. Centred text is fine for one line and poor for
   eight -- every line starts in a different place, which is exactly the thing
   that looked wrong. Both blocks now share one measure and one edge, and the
   representative example leads: it is the regulated figure, it is brighter and
   a size larger, and live-calc-repex.php now inserts it ABOVE the general
   small print rather than below. */
[data-calc] > p,
[data-calc] > p.cwaf-repex{
	max-width:880px!important;
	margin-left:auto!important;margin-right:auto!important;
	text-align:left!important;
}
[data-calc] > p.cwaf-repex{
	margin-top:22px!important;
	font-size:13px!important;line-height:1.65!important;
	color:rgba(255,255,255,.82)!important;
}
/* The general disclaimer sits under it, quieter. */
[data-calc] > p.cwaf-repex + p{
	margin-top:12px!important;
	font-size:12px!important;line-height:1.6!important;
	color:rgba(255,255,255,.55)!important;
}
@media (max-width:820px){
	[data-calc] > p,[data-calc] > p.cwaf-repex{max-width:none!important}
}

/* ---- THE FIGURES READ AS FIGURES ---------------------------------------
   Conor, 28 Sep: "the text on the numbers should be bright white."
   Every number in this widget is now pure #fff rather than the bluish greys
   inherited from the panel's label palette, and tabular-nums stops the digits
   jumping width as the sliders move -- £1,111 and £8,888 now occupy exactly the
   same space, so the column stops twitching. Labels stay grey on purpose: the
   contrast between a grey label and a white figure is what makes the figure
   read first. */
.usx-calc-row label b{color:#fff!important;font-variant-numeric:tabular-nums}
.usx-calc-sum b{color:#fff!important;font-size:16.5px!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.usx-calc-big{font-variant-numeric:tabular-nums}
.usx-calc-tier{opacity:.88!important}
.usx-calc-eqapr{opacity:.82!important;font-variant-numeric:tabular-nums}
.usx-calc-pc{font-variant-numeric:tabular-nums}
/* The unit and the APR equivalent on each band button. Same reasoning as the
   tier key above: site-core styles these for a white card, so without a line
   here they arrive on the dark band in a colour chosen for the wrong
   background. They inherit the button's own colour, which is already proven
   against both the translucent and the gold states. */
.usx-calc-pc small{color:inherit!important;opacity:.8}
.usx-calc-eqapr{color:inherit!important;opacity:.72;font-size:11.5px!important}
.usx-calc-rate .usx-calc-tier{color:inherit!important;opacity:.78}
.usx-calc-rate.is-on .usx-calc-tier{opacity:.82}
.usx-calc-lbl{color:#c4cde0!important;font-size:14px!important;font-weight:600!important}
.usx-calc-btns{gap:10px!important}
.usx-calc-rate{
	background:rgba(255,255,255,.04)!important;
	border:1px solid rgba(255,255,255,.18)!important;
	color:#fff!important;padding:12px 0!important;
}
.usx-calc-rate:hover{border-color:#e0a72e!important}
.usx-calc-rate.usx-calc-rate.is-on{
	background:linear-gradient(180deg,#ffd15c 0%,#ffc233 46%,#f0a91a 100%)!important;
	border-color:#d9a01a!important;color:#0e2117!important;
}
/* the stale-gold class from live-brand-gradient must not fight this */
.usx-calc-rate.usx-calc-rate.cwg-btn:not(.is-on),
.usx-calc-rate.usx-calc-rate.cwg-chip:not(.is-on){
	background:rgba(255,255,255,.04)!important;background-image:none!important;
	border-color:rgba(255,255,255,.18)!important;color:#fff!important;
}

/* ---- right column: the dark results panel, in two meeting halves */
.usx-calc-out{
	grid-column:2;grid-row:1/-2;
	/* align-items:start on the grid means this stops at its content height.
	   That was fine while the button was inside it; once the button moved to
	   the bottom half this shrank and opened a visible gap between the two
	   halves of what is meant to read as one panel. Stretch closes it. */
	align-self:stretch!important;
	display:flex!important;flex-direction:column;justify-content:center;
	text-align:center;
	background:#0e2117;border:1px solid rgba(224,167,46,.25);border-bottom:0;
	border-radius:14px 14px 0 0;padding:32px 32px 18px!important;margin:0!important;
}
.usx-calc-out .usx-calc-lbl{color:#9aa6bd!important;font-size:13.5px!important;margin-bottom:6px}
.usx-calc-big{
	font-size:52px!important;font-weight:900!important;letter-spacing:-1.5px;
	color:#e0a72e!important;line-height:1;display:block;margin-bottom:14px;
}
.usx-calc-out .btn-gold,.usx-calc-out a,.usx-calc-out button{margin-top:6px}

.usx-calc-sum{
	grid-column:2;grid-row:-2/-1;
	grid-template-columns:1fr!important;gap:0!important;
	background:#0e2117;border:1px solid rgba(224,167,46,.25);border-top:0;
	border-radius:0 0 14px 14px;margin:0!important;
	padding:6px 32px 26px!important;border-top:0!important;
}
.usx-calc-sum div{
	flex-direction:row!important;justify-content:space-between;align-items:baseline;
	padding:11px 0;border-top:1px solid rgba(255,255,255,.09);
}
.usx-calc-sum span{color:#9aa6bd!important;font-size:13.5px!important}
.usx-calc-sum b{color:#fff!important;font-size:16px!important}
.cwaf-calc-cta-moved{
	display:block!important;width:100%;text-align:center;
	margin:18px 0 4px!important;
}
.usx-calc-sum div:last-of-type{border-bottom:0}

/* The representative example measures 5.32:1 against the dark band, which
   passes WCAG AA for small text -- it was NOT failing. Lifted anyway: it is
   11.5px regulated disclosure and there is no cost to making it comfortable
   rather than merely compliant. Measured, not guessed. */
.usx-calc-terms{color:#aab5ae!important}
.usx-calc-terms strong{color:#dfe7e2!important}

@media(max-width:900px){
	.usx-calc{grid-template-columns:1fr;grid-template-rows:none!important;row-gap:0;padding:26px 20px!important}
	.usx-calc-row,.usx-calc-rates{grid-column:1}
	.usx-calc-out{grid-column:1;grid-row:auto;margin-top:26px!important}
	.usx-calc-sum{grid-column:1;grid-row:auto}
}

.cwaf-auc{padding:0}
.cwaf-auc section{margin:0 0 56px}
.cwaf-auc h2{font-size:clamp(1.45rem,2.6vw,1.95rem);color:#143024;margin:0 0 10px;
 padding-top:14px;border-top:3px solid #E0A72E;display:inline-block}
.cwaf-auc h3{font-size:1.06rem;margin:26px 0 10px;color:#143024}
.cwaf-auc-intro{max-width:70ch;line-height:1.6;margin:0 0 20px}
.cwaf-auc-count{font-weight:400;color:#6b7c73;font-size:.9rem}
.cwaf-auc-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cwaf-auc-card{border:1px solid #e3eae6;border-radius:8px;padding:16px 18px;background:#fff}
.cwaf-auc-card h3{margin:0 0 4px;font-size:1.02rem}
.cwaf-auc-card p{margin:0 0 6px;font-size:.93rem;line-height:1.5}
.cwaf-auc-where{color:#85620E;font-weight:600;font-size:.86rem!important}
/* cwaf-footer-merge */
.site-footer,.site-footer-legal{background:#0e2117 !important}.site-footer{padding-bottom:18px !important}.cwaf-fidx{border-top:0 !important;padding-top:8px !important}.cwaf-fidx .fidx-title{opacity:.75;letter-spacing:1px}.site-footer-legal{padding-top:14px !important;border-top:1px solid rgba(255,255,255,.07)}
/* cwaf-cfx-rate-state */
.usx-calc-rate.usx-calc-rate.cwg-btn:not(.is-on),
.usx-calc-rate.usx-calc-rate.cwg-chip:not(.is-on){
	background:#fff!important;
	background-image:none!important;
	border-color:#dbe3dd!important;
	color:#3d4d45!important;
}
.usx-calc-rate.usx-calc-rate.is-on{
	background:#E0A72E!important;
	background-image:none!important;
	border-color:#E0A72E!important;
	color:#0e2117!important;
}
/* cwaf-header-mobile-fix */
@media (max-width:430px){.cwaf header .btn-gold,.cwaf .site-header .btn-gold{padding:9px 11px !important;font-size:11.5px !important;letter-spacing:0 !important;}.cwaf header .max-w,.cwaf .site-header .max-w{padding-left:12px !important;padding-right:12px !important;gap:8px !important;}}
/* cwaf-fund-grid-css */
.cwaf-bento-wrap{max-width:1220px;margin:2px auto 0;}.cwaf-bento-sub{text-align:center;font-family:"Public Sans",sans-serif;font-size:16px;color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 28px;line-height:1.6;}.cwaf-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:158px;gap:14px;}.cwaf-bento .tile{position:relative;border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.26);z-index:1;transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s ease;}.cwaf-bento .tile.big{grid-column:span 2;grid-row:span 2;}.cwaf-bento .tile.wide{grid-column:span 2;}.cwaf-bento .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}.cwaf-bento .tile:hover{transform:scale(1.045);z-index:5;box-shadow:0 24px 52px rgba(0,0,0,.44);}.cwaf-bento .tile:hover img{transform:scale(1.05);}.cwaf-bento .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,17,11,.92) 4%,rgba(6,17,11,.4) 46%,rgba(6,17,11,.05) 100%);}.cwaf-bento .body{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 18px;}.cwaf-bento .ttl{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:16px;color:#fff;line-height:1.18;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,.45);}.cwaf-bento .tile.big .ttl{font-size:26px;margin-bottom:8px;}.cwaf-bento .desc{display:block;font-family:"Public Sans",sans-serif;font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease,margin .35s ease;}.cwaf-bento .tile.big .desc{max-height:60px;opacity:1;margin-bottom:12px;}.cwaf-bento .tile:hover .desc{max-height:60px;opacity:1;margin-bottom:10px;}.cwaf-bento .lnk{display:inline-flex;align-items:center;gap:6px;font-family:Montserrat,sans-serif;font-weight:800;font-size:12px;letter-spacing:.02em;color:#e7b53c;}.cwaf-bento .tile:hover .lnk{color:#fff;}@media(max-width:900px){.cwaf-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:158px;gap:12px;}.cwaf-bento .tile.big,.cwaf-bento .tile.wide{grid-column:span 1;grid-row:span 1;}.cwaf-bento .tile.big .ttl{font-size:16px;margin-bottom:4px;}.cwaf-bento .desc{max-height:60px;opacity:1;margin-bottom:8px;}}@media(max-width:560px){.cwaf-bento{grid-auto-rows:140px;gap:10px;}.cwaf-bento .ttl,.cwaf-bento .tile.big .ttl{font-size:14.5px;}.cwaf-bento .desc{display:none;}.cwaf-bento .body{padding:14px 14px 13px;}}
/* cwaf-fund-tools-css */
.cwaf-tools{max-width:1220px;margin:34px auto 0;}.cwaf-tools-head{font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#e0a72e;text-align:center;margin:0 0 6px;}.cwaf-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:132px;gap:14px;}@media(max-width:900px){.cwaf-tools-grid{grid-template-columns:1fr;grid-auto-rows:118px;gap:12px;}}
/* cwaf-hero-convert */
/* The location pill above the headline is removed. It read
   "ASSET FINANCE BROKER · TADCASTER, NORTH YORKSHIRE" and was the first thing
   in the hero, pushing the headline down and wrapping to two lines on mobile.
   Tadcaster is not lost — it is in Conor's caption below the CTA, the footer,
   the contact page and the local landing pages, so the local signal survives
   without an all-caps banner opening the page. */
.hero-badge-row{display:none!important}

/* HERO VERTICAL RHYTHM.
   Measured on dev the gaps ran 66, 12, 34, 12, 16, 16, 66 — no system, and two
   real faults: 12px under a 165px headline made the sub-headline read as part
   of it, and 12px above the CTA jammed the primary action against the bottom
   of the bullet list, where it looked like a fifth bullet.

   The scale below groups what belongs together and separates what does not:
   heading and sub are one unit (18), the bullets are a block of their own (30
   above, 30 below), and the CTA gets air so it reads as the next step. The
   reassurance line and name badge stay close to the button because they are
   notes about it, not separate claims. */
   A flat 12px between every hero widget comes from
   `.cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .elementor-element`
   with margin-bottom:12px!important — FIVE classes, in a stylesheet that loads
   after this one. Two earlier attempts at two and four classes both lost
   silently. These use seven. */
.cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .hero-h1.hero-h1.hero-h1{margin-bottom:18px!important}
/* The headline gap also needs the INNER h1: the site sets
   `.cwaf-cine.cwaf-cine.cwaf-cine .hero-h1 h1{margin-bottom:10px!important}`,
   and that margin collapses with the widget's, so raising only the widget left
   the gap at 12px while the sub and bullets moved correctly. */
.cwaf-cine.cwaf-cine.cwaf-cine .hero-h1.hero-h1 h1{margin-bottom:18px!important}
.cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .hero-sub.hero-sub.hero-sub{margin-bottom:30px!important}
.cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .hero-ticks.hero-ticks.hero-ticks{margin-bottom:30px!important}
/* Mobile keeps its own tighter rhythm — the site drops to 6px there, which is
   too tight for the CTA but 30px would push the fold down too far. */
@media(max-width:700px){
 .cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .hero-h1.hero-h1.hero-h1{margin-bottom:12px!important}
 .cwaf-cine.cwaf-cine.cwaf-cine .hero-h1.hero-h1 h1{margin-bottom:12px!important}
 .cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .hero-sub.hero-sub.hero-sub{margin-bottom:20px!important}
 .cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .hero-ticks.hero-ticks.hero-ticks{margin-bottom:20px!important}}

.cwaf-hc{margin:16px 0 0;max-width:560px}
.cwaf-hc-sub.cwaf-hc-sub{color:#c6d6cb!important;opacity:1!important}
/* Small, quiet text — no tick. The four bullets above already use gold ticks,
   so a fifth read as a stray bullet rather than a note about the button; and
   this is a footnote to the CTA, not a claim competing with it. */
.cwaf-hc-re{margin:0 0 16px;font:400 12px/1.45 system-ui,sans-serif;color:#9fb3a6}

/* The face. A ring rather than a hard border so it sits on the video without a
   cut-out edge. */
.cwaf-hc-who{display:flex;align-items:center;gap:13px;margin:0 0 18px}
/* That 18px separated the name badge from the figures row. The figures moved
   into the lender card, so when the badge is last in the column the margin is
   just trailing space — it made the gap below the hero copy 84px against 66px
   above the headline. :last-child rather than a flat zero, so the spacing
   returns if anything is ever added back beneath it. */
.cwaf-hc-who:last-child{margin-bottom:0}
/* !important throughout: the theme sets img{height:auto} and a global
   border-radius, which flattened this to a rectangle on dev. */
.cwaf-hc-face{width:56px!important;height:56px!important;flex:0 0 56px;
 min-width:56px!important;max-width:56px!important;
 border-radius:50%!important;object-fit:cover!important;object-position:50% 18%!important;
 display:block!important;padding:0!important;border:0!important;
 box-shadow:0 0 0 2px #e0a72e, 0 0 0 6px rgba(224,167,46,.2), 0 8px 18px rgba(0,0,0,.4)}
.cwaf-hc-who-t{margin:0;font:400 13px/1.45 system-ui,sans-serif;color:#b9cbc0}
.cwaf-hc-who-t strong{display:block;color:#fff;font-weight:700;font-size:14px;margin-bottom:2px}

/* Stats first, stars second — the numbers that are actually impressive. */
.cwaf-hc-stats{display:flex;gap:26px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.cwaf-hc-stats li{display:flex;flex-direction:column;gap:2px}
.cwaf-hc-stats strong{font:800 21px/1 Montserrat,sans-serif;color:#efc264;font-variant-numeric:tabular-nums}
.cwaf-hc-stats span{font:400 11.5px/1.3 system-ui,sans-serif;color:#9fb3a6;white-space:nowrap}

/* Demote the second CTA so the gold one carries the decision. Scoped to
   .cwaf-hc-on so a failed script cannot leave a weakened button behind. */
/* The second CTA is hidden, not restyled — see the script. */
.cwaf-hc-2nd.cwaf-hc-2nd{display:none!important}

/* ---- hero media -------------------------------------------------------
   I first wrote this to lift `.hero-photo-col` out of the flow and cover the
   section, on the assumption the hero was a 48/52 split with flat green on the
   left. IT IS NOT. `.cwaf-cine-vid` is already absolute at full section width
   with `.cwaf-cine-scrim` over it — the footage has always been full-bleed, and
   what reads as a seam is the scrim's falloff.

   So the fix is not a second scrim (that just double-darkened everything, the
   same error as drawing a second rail in the steps section). It is to soften
   the existing one: hold it dense behind the words, then clear it faster across
   the right so more of the field and the telehandler survive. `.hero-photo-col`
   is a 0x0 vestigial column — left alone. */
/* Horizontal only. A vertical fade to the band colour was tried first and then
   removed: it and a visible diagonal edge cannot both exist. Fading the video
   into #0e2117 makes the band's angled top edge invisible, because both sides
   of the cut end up the same colour. The angle needs a hard boundary to read
   against, so the footage runs to the edge and the diagonal does the work. */
.hero-section.hero-section .cwaf-cine-scrim{
 background:
  linear-gradient(90deg,
   #0b1c13 0%,
   rgba(11,28,19,.94) 22%,
   rgba(11,28,19,.72) 42%,
   rgba(11,28,19,.34) 62%,
   rgba(11,28,19,.10) 80%,
   rgba(11,28,19,.02) 100%)!important}
/* MOBILE: let the footage through.
   The old ramp ran .62 to .90 to solid, which turned the best asset on the site
   into a flat green wash on the device most visitors use. The type sits fully
   over the video here rather than beside it, so some darkening is needed — but
   .55 behind large white headline text clears contrast comfortably, and the
   ramp only deepens where the smaller print and the name badge sit. */
@media(max-width:900px){
 .hero-section.hero-section .cwaf-cine-scrim{
  background:linear-gradient(180deg,
    rgba(11,28,19,.40) 0%,
    rgba(11,28,19,.55) 30%,
    rgba(11,28,19,.74) 62%,
    rgba(11,28,19,.90) 88%,
    #0b1c13 100%)!important}}

/* ---- the bridging card ------------------------------------------------- */
/* The band's top edge is a shallow diagonal cutting across the footage, and the
   card breaks across it — the Lovey device, where cards straddle the boundary
   between two backgrounds rather than sitting inside one.
   1.4deg, not more: a steep angle on a finance site reads as a template, and
   the point is that the card looks lifted off the page, not that the edge is
   dramatic. margin-top is tuned so the card crosses the SHALLOW side of the
   diagonal — cross it at the deep side and the card looks like it is falling
   off. */
/* THE ANGLE IS A BACKGROUND LAYER, NOT THE CONTAINER.
   clip-path on the band itself clips its descendants, which sliced the top off
   the card — the figures row simply disappeared. The diagonal therefore lives
   on a ::before behind the card, so the card can break across it instead of
   being cut by it. That is the whole point of the device. */
.cwaf-hb-band{background:transparent;padding:34px 0 24px;position:relative;z-index:5;
 margin-top:-30px}
/* The band extends 70px PAST its own box and dissolves over that overlap.
   Both sections are #0e2117 underneath, but the calculator paints a radial
   gradient on top of its base, so its top edge is a shade lighter than the
   band's flat fill and the join showed as a hard horizontal line. Matching the
   colour would mean guessing at a gradient stop; fading out instead blends into
   whatever is actually below, which cannot drift if that section is restyled. */
.cwaf-hb-band::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-70px;z-index:0;
 -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 70px),rgba(0,0,0,0) 100%);
         mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 70px),rgba(0,0,0,0) 100%);
 background:#0e2117;
 -webkit-clip-path:polygon(0 30px, 100% 0, 100% 100%, 0 100%);
         clip-path:polygon(0 30px, 100% 0, 100% 100%, 0 100%)}
/* Close the void under the card. The section below carries 80px of its own top
   padding, which was fine when the trust strip sat in that space — with the
   strip gone it left roughly 110px of empty dark between the lender card and
   "Try our finance calculator". Scoped to .cwaf-hb-on so the original spacing
   returns if the card is ever not built. */
.cwaf-hb-on .cwaf-calcmoved{padding-top:40px!important}
.cwaf-hb{position:relative;z-index:6;max-width:1180px;margin:-58px auto 0;
 padding:20px 28px 18px;border-radius:16px;
 background:linear-gradient(180deg,#14301f 0%,#0f2418 100%);
 border:1px solid rgba(224,167,46,.3);
 box-shadow:0 26px 60px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.05) inset}
/* Row one: the figures and the rating, lifted out of the hero column. */
/* Figures left, rating right. Left-aligned because row two's label starts hard
   left and a centred row one would fight it — and because the hero's headline,
   bullets and CTA all share that left edge, so the card continues the line
   rather than floating free. space-between then stops row one filling only the
   left 45% of a 1180px card while row two runs nearly full width, which was
   what made the card look unresolved. */
/* 25 Sep: was justify-content:space-between with margin-left:auto on the right
   group, which threw the two clusters to opposite ends of an 1122px row and left
   roughly 390px of dead space in the middle -- heavy gold on the left, small grey
   text on the right. The lenders row underneath flows left-to-right, so the two
   rows disagreed with each other. Row one now flows the same way: one continuous
   line of proof rather than two islands. */
.cwaf-hb-proof{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
 justify-content:flex-start;
 padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.cwaf-hb-proof .cwaf-hc-stats{flex:0 1 auto}
.cwaf-hb-proof .cwaf-grb{margin-left:0!important}
/* credentials + rating travel together on the right */
.cwaf-hb-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cwaf-hb-creds{display:flex;align-items:center;gap:16px;margin:0;padding:0}
.cwaf-hb-creds span{display:flex;align-items:center;gap:7px;white-space:nowrap;
 font:600 13px/1 system-ui,sans-serif;color:#cfdcd3}
.cwaf-hb-creds span::before{content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;
 background:rgba(224,167,46,.16) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0a72e' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/10px no-repeat}
.cwaf-hb-proof:empty{display:none}
.cwaf-hb-proof .cwaf-hc-stats{margin:0}
.cwaf-hb-proof .cwaf-grb{margin:0!important;transform:none!important;opacity:1!important}
/* GOLD, NOT BRASS.
   A site utility rule — .cwg-light.cwg-light{color:#85620E!important} — was
   landing on this card's text and dragging every gold to a dull olive-brown.
   Computed colour was rgb(133,98,14) where #efc264 was set. Something applies
   the cwg-light class after insertion, so the fix is specificity plus
   !important rather than hoping to avoid the class. Three classes beats its
   two; scoped inside .cwaf-hb so nothing else on the site is affected. */
.cwaf-hb .cwaf-hb-k.cwaf-hb-k{color:#e8b64a!important}
.cwaf-hb .cwaf-hb-a.cwaf-hb-a{color:#e8b64a!important}
.cwaf-hb .cwaf-hc-stats strong,
.cwaf-hb .cwaf-hb-proof .cwaf-hc-stats strong{color:#efc264!important}
.cwaf-hb .cwaf-hc-stats span{color:#9fb3a6!important}
.cwaf-hb .cwaf-hb-l li{color:#dfe9e1!important}
.cwaf-hb .cwaf-grb-star{color:#e8b64a!important}
.cwaf-hb .cwaf-grb-link,.cwaf-hb .cwaf-grb-link strong{color:#dfe9e1!important}
/* the rule under the figures row was picking up a brass border colour too */
.cwaf-hb .cwaf-hb-proof{border-bottom-color:rgba(224,167,46,.28)!important}

/* Row two: who funds them. */
.cwaf-hb-lend{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cwaf-hb-k{margin:0;font:800 11px/1 Montserrat,sans-serif;letter-spacing:1.5px;
 text-transform:uppercase;color:#e8b64a;white-space:nowrap}
.cwaf-hb-l{display:flex;gap:22px;margin:0;padding:0;list-style:none;flex-wrap:wrap;justify-content:center}
.cwaf-hb-l li{font:700 15px/1 Montserrat,sans-serif;color:#dfe9e1;white-space:nowrap;opacity:.92}
.cwaf-hb-a{font:600 12.5px/1 system-ui,sans-serif;color:#e8b64a;text-decoration:none;white-space:nowrap}
.cwaf-hb-a:hover{text-decoration:underline}
/* THE SCROLLING STRIP GOES WHEN THE CARD IS PRESENT.
   Two full-width horizontal bars stacked at near-identical height read as one
   doubled element, and they were competing on content as well as shape: the
   strip claimed "£5 million+ funding secured" — which the hero stats already
   print — alongside self-descriptions like "Independent, personal service" and
   "Both a broker and your advocate". The card says Barclays and Lombard. Third
   party proof beats self-claim, so the card stays and the strip goes.

   Scoped to .cwaf-hb-on: if the card is not built, the strip is left in place
   rather than removing one and getting neither. */
.cwaf-hb-on .trust-strip{display:none!important}

@media(max-width:900px){
 .cwaf-hb-band{padding-bottom:18px}
 .cwaf-hb-on .cwaf-calcmoved{padding-top:30px!important}
 .cwaf-hb-band{margin-top:-18px;padding-top:24px}
 .cwaf-hb-band::before{-webkit-clip-path:polygon(0 16px,100% 0,100% 100%,0 100%);
  clip-path:polygon(0 16px,100% 0,100% 100%,0 100%)}
 .cwaf-hb{margin:-34px 16px 0;padding:16px 18px;gap:12px}
 .cwaf-hb-l{gap:14px}
 .cwaf-hb-l li{font-size:13px}}

@media(max-width:700px){
 .cwaf-hc-stats{gap:18px}
 .cwaf-hc-stats strong{font-size:18px}
 .cwaf-hc-face{width:48px!important;height:48px!important;flex-basis:48px;
  min-width:48px!important;max-width:48px!important}
 /* centred lender names leave an orphan on its own line ("BNP Paribas") */
 .cwaf-hb-l{justify-content:flex-start;gap:12px 16px}
 /* Lender names are hidden on mobile. Seven of them wrap to three lines on a
    414px screen and push the fold down without earning it — the figures and the
    regulatory marks carry the card on their own at this width. They are still
    there on desktop, and still on the lenders panel further down the page.
    display:none rather than removing them from the markup, so the desktop
    layout and the panel-matching logic are untouched. */
 .cwaf-hb-lend{display:none!important}
 /* the divider was separating row one from row two; with row two gone it is a
    line under nothing */
 .cwaf-hb-proof{gap:14px;padding-bottom:0!important;margin-bottom:0!important;
  border-bottom:0!important;justify-content:flex-start}
 .cwaf-hb-proof .cwaf-grb{margin-left:0!important}
 .cwaf-hb-right{margin-left:0;gap:12px}
 .cwaf-hb-creds{margin-left:0;gap:12px;flex-wrap:wrap}
 .cwaf-hb-lend{gap:10px}
}
/* cwaf-gr-css */
/* --- the hero badge, directly under the CTAs --------------------------- */
.cwaf-grb{
	display:flex!important; align-items:center; gap:9px;
	margin:16px 0 0!important; padding:0;
	font-size:14.5px; line-height:1.2;
}
.cwaf-grb-stars{ display:inline-flex; gap:1px; }
.cwaf-grb-star{ color:#ffc233; font-size:15px; line-height:1; }
.cwaf-grb-link{
	color:#cfe0d5!important; text-decoration:none;
	border-bottom:1px solid rgba(207,224,213,.35);
	padding-bottom:1px;
}
.cwaf-grb-link strong{ color:#fff; font-weight:700; }
.cwaf-grb-link:hover{ color:#ffc233!important; border-bottom-color:#ffc233; }
.cwaf-grb-link:focus-visible{ outline:3px solid #ffc233; outline-offset:3px; border-bottom-color:transparent; }
@media (max-width:899px){
	.cwaf-grb{ margin-top:12px!important; font-size:13.5px; }
	.cwaf-grb-star{ font-size:14px; }
}

/* --- the full strip, further down the page ---------------------------- */
.cwaf-gr{ background:#0e2117; padding:72px 0 78px; }
.cwaf-gr-in{ max-width:1240px; margin:0 auto; padding:0 32px; }
.cwaf-gr-head{ text-align:center; margin-bottom:38px; }
.cwaf-gr-score{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 10px; }
.cwaf-gr-num{ font-size:38px; font-weight:700; color:#ffc233; line-height:1; }
.cwaf-gr-stars{ display:inline-flex; gap:2px; }
.cwaf-gr-star{ color:#ffc233; font-size:22px; line-height:1; }
.cwaf-gr-stars-sm .cwaf-gr-star{ font-size:15px; }
.cwaf-gr-title{ font-size:25px; line-height:1.25; color:#fff; margin:0 0 8px; font-weight:650; text-wrap:balance; }
.cwaf-gr-sub{ margin:0; font-size:15px; }
.cwaf-gr-sub a{ color:#9fd3b4; text-decoration:underline; text-underline-offset:3px; }
.cwaf-gr-sub a:hover{ color:#ffc233; }

.cwaf-gr-list{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
}
.cwaf-gr-item{
	background:#143024; border:1px solid #1f4630; border-radius:10px;
	padding:22px 22px 20px; margin:0;
}
.cwaf-gr-item .cwaf-gr-stars{ margin:0 0 12px; }
.cwaf-gr-quote{
	margin:0 0 14px; padding:0; border:0; quotes:none;
	font-size:15.5px; line-height:1.62; color:#e8efe9;
}
.cwaf-gr-name{ margin:0; font-size:13.5px; color:#9db3a6; font-weight:600; }

.cwaf-gr-cta{ text-align:center; margin:34px 0 0; }
.cwaf-gr-btn{
	display:inline-block; padding:13px 26px; border-radius:6px;
	background:#ffc233; color:#0e2117!important; font-weight:700; font-size:15px;
	text-decoration:none;
}
.cwaf-gr-btn:hover{ background:#ffd15c; }
.cwaf-gr-btn:focus-visible,
.cwaf-gr-sub a:focus-visible{ outline:3px solid #ffc233; outline-offset:3px; }

@media (max-width:640px){
	.cwaf-gr{ padding:54px 0 58px; }
	.cwaf-gr-in{ padding:0 20px; }
	.cwaf-gr-title{ font-size:21px; }
}
/* cwaf-hero-cine-css */
/* The hero section itself becomes the stage. */
.cwaf-cine.cwaf-cine{
	position:relative!important;
	min-height:clamp(520px,78vh,760px)!important;
	display:flex!important;
	align-items:center!important;
	overflow:hidden!important;
	background-color:#0e2117!important;
	background-image:none!important;
}

/* Layer 1 — the still. First paint, and the LCP element. */
.cwaf-cine .cwaf-cine-still,
.cwaf-cine .cwaf-cine-vid{
	position:absolute!important;inset:0!important;
	width:100%!important;height:100%!important;
	object-fit:cover!important;
	z-index:0!important;
	margin:0!important;border-radius:0!important;
	clip-path:none!important;
}
/* Layer 2 — video, only once it can actually play.
 * Opacity is driven inline by the crossfade looper, so the transition duration
 * lives in a custom property both sides can agree on. */
.cwaf-cine .cwaf-cine-vid{
	opacity:0;
	transition:opacity var(--cwaf-fade,1000ms) linear;
}

/* Layer 3 — the panel. THIS IS NOT A SCRIM ANY MORE.
 *
 * The earlier version tinted the ENTIRE hero so that white text stayed legible
 * wherever it fell. That worked, but it cost the footage: every frame was seen
 * through 40-94% of green, so the video read as murky no matter how good it
 * was. Conor asked for the Portman treatment — copy on solid colour, the clip
 * itself clear — and that is strictly better for both jobs:
 *
 *   LEGIBILITY. Text now sits on SOLID #0e2117, which measures 16.43:1 against
 *   white. The previous full-width scrim bottomed out at 4.77:1 and had to be
 *   tuned against worst-case footage. A solid panel cannot be broken by any
 *   clip that is ever swapped in, so that whole class of bug is gone.
 *
 *   THE FOOTAGE. Past ~74% the overlay is fully transparent, so the right of
 *   frame — where the machinery is — is shown undimmed at full contrast.
 *
 * The 100deg angle (rather than 90deg) is what makes it read as a designed
 * panel instead of a fade: the boundary leans off vertical, echoing the angled
 * wedges already used between sections elsewhere on the site.
 *
 * The bottom-right vignette that used to live here has been removed. It existed
 * to hide Gemini's burned-in sparkle watermark, which is now stripped from the
 * source files with ffmpeg `delogo` instead — fixed properly rather than
 * covered up. */
.cwaf-cine .cwaf-cine-scrim{
	position:absolute!important;inset:0!important;z-index:1!important;

	/* WHERE THE SOLID GREEN ENDS — and why this is not a percentage.
	 *
	 * A percentage stop is measured against the VIEWPORT, but the copy sits in a
	 * CENTRED 1290px container, so the copy's right edge as a percentage moves as
	 * the window widens: 45.0% at 1440px, 45.7% at 1904px, 46.4% at 2560px. A
	 * fixed 46% stop therefore contains the copy on a laptop and lets the
	 * headline spill onto the footage on a wide monitor. Measured, not guessed —
	 * at 1904px the margin was already down to 5px.
	 *
	 * So the stop is derived from the same geometry the container uses:
	 *   50%           - centre of the viewport
	 *   - 45px        - back to just past the copy column's right edge
	 * and max(...620px) holds it out far enough on narrow screens, where the
	 * container is full-width and 50% lands left of the copy.
	 *
	 * This tracks the copy at every width instead of at one. */
	--cwaf-solid: max(calc(50% - 45px), 620px);

	background:linear-gradient(100deg,
		#0e2117            0,
		#0e2117            var(--cwaf-solid),
		rgba(14,33,23,.88) calc(var(--cwaf-solid) + 70px),
		rgba(14,33,23,.52) calc(var(--cwaf-solid) + 140px),
		rgba(14,33,23,.20) calc(var(--cwaf-solid) + 210px),
		rgba(14,33,23,0)   calc(var(--cwaf-solid) + 290px));
	pointer-events:none;
}

/* Layer 4 — the copy, lifted above everything.
   Making the hero a flex parent turns its container into a flex item, which
   shrinks it to content — that pulled the copy 200px inward and left it floating
   mid-page instead of aligned with the header. Restoring the theme's own
   container width puts the headline back in line with the logo above it. */
.cwaf-cine .elementor-container{ position:relative!important; z-index:2!important; }
.cwaf-cine > .elementor-container{
	width:100%!important;
	max-width:1290px!important;
	margin-left:auto!important;
	margin-right:auto!important;
	padding-left:32px!important;
	padding-right:32px!important;
}

/* The old media column is now the background, so hide the panel it sat in. */
.cwaf-cine .cwaf-cine-hidecol{ display:none!important; }
/* The copy column is narrowed to 520px — down from 760px — for one reason:
 * every word of it has to land inside the solid part of the panel above. At
 * 1440px the solid region ends at 46% = 662px and the column starts at 128px,
 * so 520px leaves a 14px margin. Wider than that and the headline runs out onto
 * the gradient, which is exactly the compromise the panel was meant to remove.
 *
 * The headline wraps to three lines at this width instead of two. That is the
 * intended look, not a side effect — it is what gives the left panel its
 * vertical weight against the clip. */
.cwaf-cine .cwaf-cine-wide{
	width:100%!important;max-width:520px!important;flex:0 0 auto!important;
}

/* No media query is needed for the 900-1200px band: the max(...620px) term in
 * --cwaf-solid already holds the solid region out past the copy there. One
 * expression covering every width beats two rules that can disagree. */

/* MOBILE.
 * Two things had to change, both found by measuring in a 410px frame rather
 * than assuming:
 *
 * 1. The hero ran to 1146px on an 816px viewport and pushed the primary CTA to
 *    1054px — below the fold, so the main conversion action was invisible
 *    without scrolling. Tightening the headline and the vertical rhythm brings
 *    the hero to 844px and the CTA to 742px, inside the first screen.
 *
 * 2. The headline needed THREE repeated classes to win. `design.css` sets
 *    `.cwaf h1{font-size:34px!important}` and a `.hero-h1 h1` rule overrides
 *    even that at 52px; a single `.cwaf-cine h1` rule matched but lost the
 *    cascade, and the size silently stayed at 52px while everything else
 *    appeared to work. Specificity here is load-bearing, not stylistic.
 *
 * No background video is attached below 900px — see the JS. That is the same
 * choice Portman make, and for the same reasons: data, battery, and iOS
 * autoplay behaviour. The still carries the hero at this size and looks
 * identical. */
/* SHORT DESKTOP VIEWPORTS (laptops at 900px tall and under).
 * The headline runs to three lines at 52px, which put the Google review badge
 * below the fold on a 1440x900 laptop — CTAs visible, social proof not.
 * Measured: badge bottom 931px against a 900px viewport. Tightening the proof
 * list and the section padding here recovers it without touching the larger
 * desktop layout, where there is plenty of room. */
@media (min-width:900px) and (max-height:920px){
	.cwaf-cine.cwaf-cine.cwaf-cine{
		padding-top:44px!important;
		padding-bottom:44px!important;
	}
	.cwaf-cine.cwaf-cine.cwaf-cine .elementor-icon-list-item{ margin-bottom:3px!important; }
	.cwaf-cine.cwaf-cine.cwaf-cine .elementor-widget-wrap > .elementor-element{
		margin-bottom:12px!important;
	}
}

@media (max-width:899px){
	.cwaf-cine.cwaf-cine{ min-height:0!important; }

	/* The section's own padding is 76px top and 92px bottom — 168px of the
	   946px hero on a 390x844 phone, and it was never reduced for small
	   screens. With it, the primary CTA lands at 938px: 94px BELOW the fold,
	   so the main conversion action is invisible without scrolling. Measured,
	   not assumed. Cutting it to 30/34 recovers 104px and puts the CTA back
	   inside the first screen. */
	.cwaf-cine.cwaf-cine.cwaf-cine{
		padding-top:30px!important;
		padding-bottom:34px!important;
	}
	.cwaf-cine > .elementor-container{
		padding-left:20px!important; padding-right:20px!important;
	}
	.cwaf-cine.cwaf-cine.cwaf-cine h1,
	.cwaf-cine.cwaf-cine.cwaf-cine .hero-h1 h1{
		font-size:32px!important; line-height:1.12!important; margin-bottom:10px!important;
	}
	/* The four proof points were 231px — 58px per item, which is generous for a
	   phone. Tightened to recover the last of the space needed to bring the CTA
	   inside the fold. The header above the hero takes ~50px, so the hero
	   fitting the viewport is not sufficient on its own: the CTA has to clear
	   844px measured from the top of the PAGE, not the top of the section. */
	.cwaf-cine.cwaf-cine.cwaf-cine .elementor-icon-list-item{ margin-bottom:1px!important; }
	.cwaf-cine.cwaf-cine.cwaf-cine .elementor-icon-list-text{
		font-size:14px!important; line-height:1.34!important;
	}
	.cwaf-cine.cwaf-cine .elementor-widget-wrap > .elementor-element{ margin-bottom:6px!important; }
	.cwaf-cine .cwaf-cine-scrim{
		background:linear-gradient(180deg, rgba(14,33,23,.80) 0%, rgba(16,38,26,.90) 60%,
		                                   rgba(14,33,23,.95) 100%);
	}
}
@media (prefers-reduced-motion:reduce){
	.cwaf-cine .cwaf-cine-vid{ display:none!important; }
}
/* cwaf-brand-depth-css */
/* HERO — the worklight. Two layers: a warm gold bloom at the light's core over
   a green ramp. Anchored at 16-20% across and ~72-76% down, which is where the
   primary CTA sits. */
.cwd-hero.cwd-hero.cwd-hero{
	background-color:#143024!important;
	background-image:
		radial-gradient(52% 62% at 20% 76%,
			rgba(224,167,46,.13) 0%,
			rgba(224,167,46,.04) 45%,
			rgba(224,167,46,0) 70%),
		radial-gradient(95% 125% at 16% 72%,
			#21482f 0%,
			#1a3b29 40%,
			#143024 70%,
			#0f2519 100%)!important;
	background-repeat:no-repeat!important;
	background-size:cover!important;
}

/* BANDS — flat, quiet, with the plate rule at the top edge. Flat is deliberate:
   it is what removes the seam between adjacent sections. */
.cwd-band.cwd-band.cwd-band{
	background-color:#163527!important;
	background-image:none!important;
	box-shadow:inset 0 1px 0 rgba(224,167,46,.30)!important;
}
.cwd-deep.cwd-deep.cwd-deep{
	background-color:#0e2117!important;
	background-image:none!important;
	box-shadow:inset 0 1px 0 rgba(224,167,46,.18)!important;
}

/* FIGURES — align like a schedule, not like marketing copy. */
body{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------------
 * GOLD
 *
 * The site was running FIVE different golds — #e0a72e, #e7b53c, #a97b12,
 * #c0a038 and #8a6a1c — applied inconsistently. The problem was never that gold
 * was absent, it was that it was muddled, and two of the five were muddy enough
 * to look like a printing fault rather than a brand colour.
 *
 * Replaced with a two-value system, because gold has to do two different jobs:
 *
 *   ON DARK  #f0b32b   contrast 7.57 on #143024, 7.11 on the band, 8.96 on the
 *                      deep green. Brighter and more saturated than the old
 *                      #e0a72e (6.59) while staying metallic rather than lemon.
 *   ACTIONS  #ffc233   buttons, chips AND text. Originally text sat one step
 *                      back at #f0b32b so the CTA would stay dominant. That was
 *                      wrong: a button's prominence comes from being a filled
 *                      block with a sheen, not from its hue, so holding the text
 *                      back bought no hierarchy and just made 52 elements per
 *                      page look flat. Unified 19 Sep 2026. #ffc233 also has
 *                      BETTER contrast on the brand greens than #f0b32b
 *                      (8.81 vs 7.57), so this is a free accessibility gain.
 *
 * NOTE FOR ANYONE MATCHING PRINT: the York poster's gold is MORE muted than any
 * of these (~#d4a843 mustard-ochre). Going brighter on screen was a deliberate
 * departure, not a match. If the two ever need to agree, this is the value to
 * change, and the poster is the fixed point.
 *   ON LIGHT #85620e   contrast 5.40 on the site's near-white. One step deeper
 *                      than #8a6a1c (4.87) because the 12.5px `.eyebrow` sat at
 *                      4.49 against its own slightly tinted panel — fractionally
 *                      under AA. Measured on the rendered page, not assumed.
 *
 * THE ON-LIGHT VALUE FIXES A REAL ACCESSIBILITY FAILURE. #a97b12 was being used
 * for gold text on light backgrounds at 3.67:1, which is below WCAG AA's 4.5
 * for body text. #8a6a1c was already in the site's palette, so this is
 * consistency rather than invention.
 *
 * A single hex swap could not do this: #a97b12 appeared 66 times on dark
 * backgrounds and 14 times on light ones. The same colour, two contexts, two
 * correct answers. So the script below resolves each element's EFFECTIVE
 * background by walking up the tree until it finds an opaque one, and picks the
 * gold that belongs there.
 *
 * BUTTONS get a vertical sheen — lighter at the top edge, deeper at the bottom.
 * That is what makes gold read as brass or a machined plate rather than as flat
 * yellow, and it is the same vernacular as the hero worklight above. Dark text
 * on the fill measures 8.96:1.
 *
 * Small gold elements (tick circles, chips, arrows) get the flat bright gold and
 * NOT the sheen: a vertical gradient across a 20px circle reads as a rendering
 * artefact, not as metal. The split is on rendered width, at 90px.
 *
 * WHAT THIS DELIBERATELY DOES NOT TOUCH
 * -------------------------------------
 * #9aa6bd, the slate used on footer links. It is not gold so the detector
 * cannot match it, and that is important: live-faq-cta.php uses
 * `style="color:#9aa6bd;"` as its scoping needle to find the footer town links.
 * Changing that colour would silently break the footer fix that took three
 * attempts to land on 15 Sep 2026. Left alone on purpose.
 * ------------------------------------------------------------------------- */
.cwg-dark.cwg-dark{ color:#ffc233!important; }
.cwg-light.cwg-light{ color:#85620e!important; }
/* Buttons run one step brighter than gold text, deliberately. The brightest
 * thing on the page should be the thing you want clicked; if all ~60 gold text
 * instances matched the buttons, gold would stop being an accent and the CTAs
 * would lose their relative pull. Dark text on this fill measures 10.42:1. */
.cwg-btn.cwg-btn.cwg-btn{
	background-color:#ffc233!important;
	background-image:linear-gradient(180deg,#ffd15c 0%,#ffc233 46%,#f0a91a 100%)!important;
	color:#0e2117!important;
	border-color:#d9a01a!important;
}
.cwg-chip.cwg-chip.cwg-chip{ background-color:#ffc233!important; }
/* cwaf-heroflow-css */
/* The shared ramp. Sized and offset per section by the JS below, so all three
   show consecutive slices of one gradient. Deliberately subtle: it should read
   as depth, not as a colour change. */
.cwaf-flow.cwaf-flow.cwaf-flow.cwaf-flow{
	/* FOUR repeated classes, and the count is load-bearing.
	   live-brand-gradient.php (an earlier module of ours) sets
	       .cwd-band.cwd-band.cwd-band { background-image:none !important }
	   at 0,3,0 — and the calculator section carries .cwd-band. A single
	   .cwaf-flow at 0,1,0 loses that fight silently: the gradient simply does
	   not paint on the calculator, which is exactly where the light pool is
	   meant to be. Measured with a rule-matching sweep, not guessed. */
	background-color:#0e2117!important;
	/* A RADIAL, NOT A LINEAR FADE.
	   The first attempt here was a flat vertical ramp. Rendered and compared
	   side by side it read as a dull wash with no depth — and it did not match
	   the site's own language: the brand hero gradient in live-brand-gradient.php
	   is a radial lit from the lower left. This is the same idea extended across
	   all three sections, so the hero, trust strip and calculator sit on one lit
	   surface rather than a fade.

	   The light pool is placed at 19%/74% — low and left — which puts it behind
	   the calculator, and its size and falloff were solved numerically against
	   one hard constraint: the hero's scrim is opaque #0e2117 down its left
	   side, so whatever the gradient does at the hero/strip boundary it must
	   arrive at #0e2117 or the join shows a step. At these values it lands on
	   rgb(15,36,26) against the scrim's rgb(14,33,23) — within a few units per
	   channel, which is invisible — while still reaching rgb(27,67,48) at the
	   calculator, which is a pool you can actually see.

	   The intermediate stops approximate a 0.75 falloff; CSS interpolates
	   linearly, so without them the pool would bleed too far and flatten out. */
	background-image:
		/* gold warmth, low-left, matching the brand's own wash */
		radial-gradient(46% 26% at 17% 76%,
			rgba(224,167,46,.12) 0%, rgba(224,167,46,0) 100%),
		/* grounding: deepen toward the base so the section below joins cleanly */
		linear-gradient(180deg,
			rgba(8,19,13,0) 74%, rgba(8,19,13,.40) 100%),
		/* the lit surface */
		radial-gradient(110% 46% at 19% 74%,
			#1f4c36   0%,
			#173828  25%,
			#122b1f  50%,
			#0d2017  75%,
			#09150f 100%)!important;
	background-repeat:no-repeat!important;
	background-size:100% var(--cwaf-flow-h,1860px)!important;
	background-position:0 calc(-1 * var(--cwaf-flow-y,0px))!important;
}

/* The gold wash is folded into the background stack above rather than painted
   by a pseudo-element. Because background-size spans the whole run and each
   section is offset into it, that single declaration produces ONE wash across
   all three — not one per section. */

/* The wedges are what made the seams visible. Off between these three.
   The box-shadow matters just as much: live-brand-gradient.php puts
   `box-shadow: inset 0 1px 0 rgba(224,167,46,.30)` on .cwd-band, which renders
   as a 1px gold hairline across the full width at exactly the join this change
   exists to erase. Hiding the wedge without killing the shadow leaves the seam
   sharper than before. Four classes to clear brand-gradient's (0,3,0). */
.cwaf-flow::before,
.cwaf-flow::after{
	display:none!important;
}
.cwaf-flow.cwaf-flow.cwaf-flow.cwaf-flow{
	box-shadow:none!important;
}
.cwaf-flow{ position:relative; }
.cwaf-flow > *{ position:relative; z-index:1; }

/* Scroll reveal. Transform and opacity only — nothing that reflows. */
.cwaf-reveal{
	opacity:0;
	transform:translateY(26px);
	transition:opacity .75s cubic-bezier(.22,.61,.36,1),
	           transform .75s cubic-bezier(.22,.61,.36,1);
	will-change:opacity, transform;
}
.cwaf-reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
	.cwaf-reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}