/* ========================================
   SERVICE TEMPLATE STYLES
   Product pages (7 broker + 9 borrower) — every value below is measured
   from the live Elementor template at 1696px (see README "Product template").
   ======================================== */

/* ---- HERO ---- */
.svc-hero {
  background: linear-gradient(141deg, #56317D 0%, #56317D 100%);
  padding: 131px 0 130px;   /* live: 150px inside a section that starts 19px above the document top */
  position: relative;
  overflow: hidden;
}

/* Decorative arrow (Elementor ::before on the hero container): 62% of the hero width, at 800px 32px */
.svc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../brand/Symbols & Graphics/Purp-Arrow-Icon copy.svg') no-repeat 800px 32px / 62% auto;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.svc-hero-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.svc-hero-content {
  flex: 0 0 52.65%;   /* live text column: 737px of the 1400px container */
  max-width: 52.65%;
}

.svc-hero-label {
  display: block;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
  margin-bottom: 20px;
  color: #fff;
}

.svc-hero h1 {
  font-size: 72px;
  line-height: 72px;
  font-weight: 800;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 20px;
}

.svc-hero p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: #fff;
  margin-bottom: 14.4px;
}

.svc-hero-actions {
  display: flex;
  gap: 20px;
  margin-top: 34.4px;   /* 20px widget gap after the last paragraph's 14.4px margin (margins collapse) */
}

.svc-hero-actions .btn {
  padding: 18px 25px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
  gap: 5px;
  border: 2px solid transparent;
}

.svc-hero-actions .btn--primary {
  background: #67EEBC;
  color: #000;
  border-color: #69ECBC;
  border-radius: 50px;
}

.svc-hero-actions .btn--outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
  border-radius: 1000px;
}

/* Bottom divider: 35px white asymmetrical curve, 150% wide (Elementor shape divider) */
.svc-hero .intro-shape { z-index: 1; }
.svc-hero .intro-shape--bottom svg { width: calc(150% + 1.3px); height: 35px; }

/* Legacy curve markup still used by a few one-off pages */
.svc-hero-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
}

.svc-hero-curve svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* Live content width is 1400px with 10px gutters (Elementor boxed containers) */
.svc-hero .container,
.svc-hero + .trustpilot-section .container,
.svc-clever .container,
.svc-criteria .container,
.svc-process .container,
.svc-ready .container,
.svc-faq .container {
  max-width: 1420px;
  padding: 0 10px;
}

/* ---- TRUSTPILOT ---- */
.svc-hero + .trustpilot-section {
  background: #ffffff;
  padding: 50px 0 25px;
  max-height: none;
}

/* ---- CLEVER SECTION ---- */
.svc-clever {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Faded logo icon behind the section (Elementor ::before, 28% wide at 130px 44px, 50% opacity) */
.svc-clever::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/borrower-home/Logo-Icon.webp') no-repeat 130px 44px / 28% auto;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.svc-clever--no-bg::before { display: none; }

.svc-clever-inner {
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 1;
}

.svc-clever-image {
  flex: 0 0 calc(50% - 40px);
  max-width: calc(50% - 40px);
  border-radius: 0;
  overflow: visible;
}

.svc-clever-image img {
  width: 90%;   /* live broker template: max-width 90%, centred */
  height: auto;
  display: block;
  margin: 0 auto;
}

.svc-clever-content {
  flex: 0 0 calc(50% - 40px);
  max-width: calc(50% - 40px);
}

.svc-clever-content h2 {
  font-size: 62px;
  line-height: 62px;
  font-weight: 900;
  margin-bottom: 30px;
  color: #000;
}

.svc-clever-content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #000;
  margin-bottom: 14.4px;
}

/* ---- CRITERIA SECTION ---- */
.svc-criteria {
  padding: 100px 0;
  background: #ffffff;
}

.svc-criteria h2 {
  font-size: 62px;
  line-height: 62px;
  font-weight: 900;
  margin-bottom: 10px;
  color: #000;
}

.svc-criteria-inner {
  display: flex;
  gap: 60px;
  align-items: center;
}

.svc-criteria-list {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.svc-criteria-list h2 {
  margin-bottom: 10px;
}

.svc-criteria-grids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.svc-criteria-grid {
  background: #F5F5F5;
  border-radius: 20px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svc-criteria-item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 3.5px 4px 3.5px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}

.svc-criteria-item:first-child { padding-top: 0; }
.svc-criteria-item:last-child { padding-bottom: 0; }

/* 15px "dot-circle" icon (Elementor icon list) */
.svc-criteria-item::before {
  content: '';
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 5px;
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--color-purple);
  border: 1.5px solid currentColor;
  background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px);
}

.svc-criteria-image {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
  border-radius: 0;
  overflow: visible;
  border: none;
}

.svc-criteria-image img {
  width: 80%;   /* live: max-width 80%, centred in the column */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---- PROCESS SECTION ---- */
.svc-process {
  background: #56317D;
  padding: 120px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* White asymmetrical curves top (75px, 155% wide) and bottom (49px, 150% wide) */
.svc-process .intro-shape--top svg { width: calc(155% + 1.3px); height: 75px; }
.svc-process .intro-shape--bottom svg { width: calc(150% + 1.3px); height: 49px; }

.svc-process > .container {
  position: relative;
  z-index: 1;
}

.svc-process h2 {
  font-size: 52px;
  line-height: 52px;
  font-weight: 900;
  text-transform: capitalize;
  margin-bottom: 20px;
  color: #fff;
  text-align: left;
}

.svc-process-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #fff;
  text-align: left;
  max-width: 80%;
  margin: 0 0 34.4px;
}

.svc-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

.svc-process-step {
  background: #4B2870;
  border-radius: 15px;
  padding: 25px;
  text-align: left;
}

.svc-process-icon {
  width: 80px;
  height: 80px;
  margin: 0 0 13px;
  color: #fff;
}

.svc-process-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #fff;
}

.svc-process-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.svc-process-step h3 {
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 700;
  margin: 0 0 5px;
  color: #fff;
}

.svc-process-step p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}

/* Legacy process curve markup (one-off pages) */
.svc-process-curve {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 0;
}

.svc-process-curve--top { margin-bottom: -1px; }
.svc-process-curve--bottom { margin-top: -1px; }

/* ---- WHAT TO HAVE READY ---- */
.svc-ready {
  padding: 100px 0;
}

.svc-ready h2 {
  font-size: 52px;
  line-height: 52px;
  font-weight: 900;
  margin-bottom: 30px;
  color: #000;
}

.svc-ready-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 0 0 34.4px;
  line-height: 27px;
  max-width: 60%;
}

.svc-ready-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.svc-ready-col {
  background: #EAD5FF;
  border: none;
  border-radius: 30px;
  padding: 30px;
}

.svc-ready-col h3 {
  font-size: 42px;
  line-height: 42px;
  font-weight: 900;
  margin-bottom: 30px;
  color: #000;
}

.svc-ready-col ul {
  list-style: disc;
  padding-left: 40px;
  margin: 0;
}

.svc-ready-col ul li {
  display: list-item;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #000;
}

.svc-ready-col ul li::before { content: none; }

/* ---- ENQUIRY (CTA + form) SECTION ---- */
.svc-enquiry {
  padding: 0;
  background: #56317D;
  position: relative;
  overflow: hidden;
}

/* White asymmetrical curves: top 24px (110% wide), bottom 29px (131% wide) */
.svc-enquiry .intro-shape--top svg { width: calc(110% + 1.3px); height: 24px; }
.svc-enquiry .intro-shape--bottom svg { width: calc(131% + 1.3px); height: 29px; }

.svc-enquiry-inner {
  background: transparent;
  padding: 110px 0 120px;   /* live: 100px + the 10px flex gap left by an empty first widget */
  color: #fff;
  position: relative;
  z-index: 1;
}

.svc-enquiry-inner .container {
  max-width: 1200px;
  padding: 0 60px 0 0;   /* live: 1200px inner, 95% (1140px) content column, left-aligned */
}

.svc-enquiry-inner h2 {
  font-size: 62px;
  line-height: 62px;
  font-weight: 900;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;   /* 10px widget margin + 10px container gap */
}

.svc-enquiry-desc {
  text-align: center;
  max-width: 100%;
  margin: 0 auto 14.4px;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 30px;
}

.svc-enquiry-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 24.4px 0 0;   /* 10px gap after the 14.4px paragraph margin */
}

.svc-enquiry-actions .btn {
  padding: 18px 25px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
  gap: 5px;
  border: 2px solid transparent;
}

.svc-enquiry-actions .btn--outline {
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
  border-radius: 1000px;
}

.svc-enquiry-actions .btn--primary {
  background: #67EEBC;
  color: #000;
  border-color: #67EEBC;
  border-radius: 50px;
}

.svc-enquiry-form {
  max-width: 100%;
  margin: 60px auto 0;   /* 10px column gap + 50px wrapper margin */
  background: #fff;
  border-radius: 25px;
  padding: 40px;
}

.svc-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 15px;
  margin: 0;
}

.svc-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.svc-form-group--full {
  grid-column: 1 / -1;
}

.svc-form-group label {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #000;
}

.svc-form-group input,
.svc-form-group textarea {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  height: 40px;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  background: #F5F5F5;
  transition: background 0.2s;
}

.svc-form-group input::placeholder,
.svc-form-group textarea::placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #999;
}

.svc-form-group input:focus,
.svc-form-group textarea:focus {
  outline: none;
  background: #eee;
}

.svc-form-group textarea {
  height: 94px;
  resize: vertical;
}

.svc-form-submit {
  margin-top: 0;
}

.svc-form-submit .btn {
  width: 205px;
  height: 48px;
  padding: 15px 30px;
  border-radius: 25px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
  border: none;
}

.svc-form-trustpilot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  color: #666;
}

.svc-form-trustpilot strong {
  color: #000;
}

/* Legacy enquiry curve markup (one-off pages) */
.svc-enquiry-curve {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 0;
}

.svc-enquiry-curve--top { margin-bottom: -1px; }
.svc-enquiry-curve--bottom { margin-top: -1px; }

/* ---- FAQ SECTION ---- */
.svc-faq {
  padding: 100px 0 125px;
  position: relative;
}

/* Borrower pages: the FAQ block ends with a 34px mint curve into the CTA */
.svc-faq .intro-shape--bottom svg { width: calc(150% + 1.3px); height: 34px; }
.svc-faq > .container { position: relative; z-index: 1; }

.svc-faq h2 {
  font-size: 52px;
  line-height: 52px;
  font-weight: 900;
  margin-bottom: 50px;
  color: #000;
}

.svc-faq .faq-item {
  border-bottom: none;
  margin-bottom: 25px;
  overflow: hidden;
}

.svc-faq .faq-item:last-child {
  margin-bottom: 0;
}

.svc-faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
  text-align: left;
  text-transform: capitalize;   /* live renders every question in Title Case via CSS */
  cursor: pointer;
  color: #000;
  background: none;
  border: none;
  font-family: inherit;
  transition: color 0.2s;
}

.svc-faq .faq-question:hover {
  color: var(--color-purple);
}

/* 19px chevron (UAEL accordion icon) */
.svc-faq .faq-question::after {
  content: '';
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-left: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23333333' fill-rule='evenodd' d='M3.293 6.707a1 1 0 0 1 1.414 0L12 14l7.293-7.293a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.415l-8.353 8.353a1.5 1.5 0 0 1-2.122 0L2.586 8.83a1 1 0 0 1 0-1.415z'/></svg>") no-repeat center / contain;
  transition: transform 0.2s;
}

.svc-faq .faq-item.active .faq-question::after {
  transform: rotate(180deg);
}

.svc-faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

.svc-faq .faq-item.active .faq-answer {
  max-height: 1200px; /* ported FAQ answers are long and some hold lists/tables */
}

.svc-faq .faq-answer-inner {
  padding: 10px 20px 20px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}

/* Lists / tables inside long FAQ answers (ported from live) */
.svc-faq .faq-answer-inner ul,
.svc-faq .faq-answer-inner ol {
  list-style: disc;
  padding-left: 22px;
  margin: 10px 0;
}
.svc-faq .faq-answer-inner ol { list-style: decimal; }
.svc-faq .faq-answer-inner li { margin-bottom: 6px; }
.svc-faq .faq-answer-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 15px;
}
.svc-faq .faq-answer-inner th,
.svc-faq .faq-answer-inner td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
}
.svc-faq .faq-answer-inner th { font-weight: 700; }

/* Cross-link paragraph after the FAQ list ("…answered in our broker FAQs") */
.svc-faq .faq-outro {
  margin-top: 40px;
  margin-bottom: 14.4px;
  font-size: 18px;
  line-height: 27px;
  color: #000;
}
.svc-faq .faq-outro a {
  color: #583181;
  font-weight: 600;
  text-decoration: none;
}
.svc-faq .faq-outro a:hover {
  text-decoration: underline;
}


/* ---- CALCULATOR PAGES (body.calc-page) — sizes measured from live ----
   Live: widget spans the full container (no 720px cap) and has no title heading;
   content h2 62px/900, h3 28px/500, body copy 18px/1.4. These out-rank the
   per-page inline rules the calculator builders added. */
body.calc-page .blc-calc, body.calc-page .clc-calc, body.calc-page .sdc-calc,
body.calc-page .ryc-calc, body.calc-page .smc-calc, body.calc-page .moc-calc,
body.calc-page .erc-calc, body.calc-page .rmc-calc, body.calc-page .sbc-calc,
body.calc-page .bsc-calc {
  max-width: none;
  /* span the container's full box (live: 1400px) — cancel .container's side padding */
  margin-left: -40px;
  margin-right: -40px;
}
body.calc-page .blc-calc > h2, body.calc-page .clc-calc > h2, body.calc-page .sdc-calc > h2,
body.calc-page .ryc-calc > h2, body.calc-page .smc-calc > h2, body.calc-page .moc-calc > h2,
body.calc-page .erc-calc > h2, body.calc-page .rmc-calc > h2, body.calc-page .sbc-calc > h2,
body.calc-page .bsc-calc > h2 {
  display: none; /* live widgets open with the subtitle; no title heading */
}
body.calc-page .svc-clever--no-bg h2 {
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 24px;
}
body.calc-page .svc-clever--no-bg h3 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  margin: 28px 0 16px;
}
body.calc-page .svc-clever--no-bg p {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  body.calc-page .blc-calc, body.calc-page .clc-calc, body.calc-page .sdc-calc,
  body.calc-page .ryc-calc, body.calc-page .smc-calc, body.calc-page .moc-calc,
  body.calc-page .erc-calc, body.calc-page .rmc-calc, body.calc-page .sbc-calc,
  body.calc-page .bsc-calc { margin-left: -22px; margin-right: -22px; }
  body.calc-page .svc-clever--no-bg h2 { font-size: 40px; line-height: 1.05; }
  body.calc-page .svc-clever--no-bg h3 { font-size: 24px; }
}

/* ---- FAQ hub CTA: live uses the bordered enquiry treatment (black outlines + offset shadows) ---- */
.svc-enquiry--bordered .svc-enquiry-desc { font-size: 18px; max-width: 1140px; }
.broker .svc-enquiry--bordered .svc-enquiry-desc a { color: #67EEBC; text-decoration: underline; font-weight: 600; }
.borrower .svc-enquiry--bordered .svc-enquiry-desc a { color: var(--color-purple); text-decoration: underline; font-weight: 600; }
.svc-enquiry--bordered .svc-enquiry-actions .btn { border: 2px solid #000; }
.svc-enquiry--bordered .svc-enquiry-actions .btn--outline { background: #fff; color: #000; box-shadow: 5px 5px 0 #000; }
.svc-enquiry--bordered .svc-enquiry-actions .btn--primary { box-shadow: 3px 4px 0 #000; }
.svc-enquiry--bordered .svc-enquiry-form { border: 3px solid #000; box-shadow: 5px 5px 0 #000; border-radius: 25px; }
.svc-enquiry--bordered .svc-form-group input,
.svc-enquiry--bordered .svc-form-group textarea { border: 2px solid #000; background: #fff; }
.svc-enquiry--bordered .svc-form-group label { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 5px; }
.svc-enquiry--bordered .svc-form-group input { height: 42px; }
.svc-enquiry--bordered .svc-form-group textarea { height: 99px; }
.svc-enquiry--bordered .svc-form-submit .btn { height: 53px; border: 2px solid #000; }

/* ---- ABOUT PAGE OVERRIDES ---- */
.page-about .svc-clever-content h2 {
  font-size: 52px;
}

.page-about .pledge-card {
  background: #F8F8F8;
}

.page-about .svc-clever-image {
  position: relative;
}


.page-about .svc-clever-image img {
  position: relative;
  z-index: 1;
}

.page-about .svc-clever {
  background: #F8F8F8;
}

.page-about .section--team {
  background: #F8F8F8;
  position: relative;
  padding-bottom: calc(var(--space-3xl) + 60px);
}

.page-about .team-section-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

.page-about .team-section-curve svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* ---- ABOUT PAGE TEAM ---- */
.about-team-heading {
  font-size: 52px;
  font-weight: 900;
  text-align: left;
  margin-bottom: var(--space-2xl);
  color: #000;
}

.team-card {
  text-align: left;
}

.team-card-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  border-top: 5px solid #000;
  border-left: 5px solid #000;
  border-right: 12px solid #000;
  border-bottom: 12px solid #000;
  margin-bottom: var(--space-md);
  /* override any inherited circle styles */
  border-radius: 12px !important;
}

.team-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.team-card h3 {
  font-size: 32px;
  font-weight: 800;
  color: #000;
  margin-bottom: 4px;
}

.team-card .team-role {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
  margin-bottom: var(--space-sm);
  display: block;
}

.team-card p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .svc-hero-inner {
    flex-direction: column;
  }

  .svc-hero-content {
    flex: none;
    max-width: 100%;
  }

  .svc-hero-image {
    width: 300px;
  }

  .svc-criteria-inner {
    flex-direction: column;
  }

  .svc-criteria-list,
  .svc-criteria-image {
    flex: none;
    max-width: 100%;
  }

  .svc-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile values measured from live at 375px */
@media (max-width: 768px) {

  /* ---- HERO MOBILE ---- */
  .svc-hero {
    padding: 102px 0 90px;   /* live label sits 102px from the top; bottom = 50px + the 40px flex gap left by the hidden side column */
  }

  .svc-hero::after {
    background-position: -47px 671px;
    background-size: 150% auto;
  }

  .svc-hero-label {
    font-size: 18px;
  }

  .svc-hero h1 {
    font-size: 42px;
    line-height: 42px;
  }

  .svc-hero-actions {
    flex-wrap: wrap;
    gap: 10px;
  }

  .svc-hero-actions .btn {
    padding: 15px;
  }

  .svc-hero .container,
  .svc-hero + .trustpilot-section .container,
  .svc-clever .container,
  .svc-criteria .container,
  .svc-process .container,
  .svc-ready .container,
  .svc-enquiry-inner .container,
  .svc-faq .container {
    padding: 0 20px;
  }

  /* ---- TRUSTPILOT MOBILE ---- */
  .svc-hero + .trustpilot-section {
    padding: 50px 0;
  }

  /* ---- CLEVER SECTION MOBILE ---- */
  .svc-clever {
    padding: 0 0 50px;
  }

  .svc-clever::before {
    background-position: 133px 419px;
    background-size: 77% auto;
  }

  .svc-clever-inner {
    flex-direction: column;
    gap: 20px;
    text-align: left;
  }

  .svc-clever-image,
  .svc-clever-content {
    flex: none;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .svc-clever-image { order: 2; }
  .svc-clever-content { order: 1; }

  .svc-clever-content h2 {
    font-size: 38px;
    line-height: 38px;
  }

  /* ---- CRITERIA MOBILE ---- */
  .svc-criteria {
    padding: 50px 0;
    overflow: visible;
  }

  .svc-criteria h2 {
    font-size: 38px;
    line-height: 38px;
  }

  .svc-criteria-inner {
    flex-direction: column;
    gap: 20px;
  }

  .svc-criteria-list,
  .svc-criteria-image {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .svc-criteria-grids {
    grid-template-columns: 1fr;
  }

  .svc-criteria-image {
    margin: 0;
  }

  .svc-criteria-image img {
    width: 100%;
    margin: 0;
  }

  /* ---- PROCESS MOBILE ---- */
  .svc-process {
    padding: 75px 0 50px;
  }

  .svc-process-curve {
    height: 30px;
  }

  .svc-process h2 {
    font-size: 38px;
    line-height: 38px;
  }

  .svc-process-subtitle {
    max-width: 100%;
  }

  .svc-process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-process-icon {
    width: 60px;
    height: 60px;
  }

  .svc-process-step h3 {
    line-height: 24px;
    margin: 0 0 10px;
  }

  /* ---- READY MOBILE ---- */
  .svc-ready {
    padding: 50px 0;
  }

  .svc-ready h2 {
    font-size: 38px;
    line-height: 38px;
  }

  .svc-ready-subtitle {
    max-width: 100%;
  }

  .svc-ready-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-ready-col h3 {
    font-size: 32px;
    line-height: 32px;
  }

  /* ---- ENQUIRY MOBILE ---- */
  .svc-enquiry-curve {
    height: 30px;
  }

  .svc-enquiry-inner {
    padding: 50px 0;
  }

  .svc-enquiry-inner h2 {
    font-size: 38px;
    line-height: 38px;
  }

  .svc-enquiry-desc {
    font-size: 18px;
    line-height: 27px;
  }

  .svc-enquiry-actions {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .svc-enquiry-actions .btn {
    padding: 15px;
    width: auto;
  }

  .svc-enquiry-form {
    margin: 40px 0 10px;
    padding: 30px;
  }

  .svc-form-row {
    grid-template-columns: 1fr;
  }

  /* ---- FAQ MOBILE ---- */
  .svc-faq {
    padding: 75px 0;
  }

  .svc-faq h2 {
    font-size: 38px;
    line-height: 38px;
    margin-bottom: 30px;
  }

  .svc-faq .faq-question {
    font-size: 20px;
    line-height: 30px;
  }

  .svc-faq .faq-question::after {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .svc-faq .faq-outro {
    margin-top: 20px;
  }
}


/* ========================================
   INTRODUCER PAGE  (mirrors live /brokers/introducer/)
   ======================================== */
.intro-wrap {
  width: 100%;
  max-width: calc(var(--container-max) + 20px);   /* 1400px of content + the 10px side gutters */
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}
.intro-wrap--20 { padding: 0 20px; max-width: calc(var(--container-max) + 40px); }

.intro-hero, .intro-lead, .intro-options-sec, .intro-band, .intro-commit, .intro-cta { position: relative; }

/* Elementor-style shape dividers (curve / curve-negative) */
.intro-shape {
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  direction: ltr;
  pointer-events: none;
  z-index: 0;
}
.intro-shape--top { top: -1px; }
.intro-shape--bottom { bottom: -1px; }
.intro-shape--bottom:not(.intro-shape--neg) { transform: rotate(180deg); }
.intro-shape--neg.intro-shape--top { transform: rotate(180deg); }
.intro-shape--above { z-index: 2; }
.intro-shape svg {
  display: block;
  width: calc(100% + 1.3px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.intro-shape--flip svg { transform: translateX(-50%) rotateY(180deg); }

/* Hero: dot-pattern background, single centred H1 */
.intro-hero {
  background: #EBD9FE url('../images/intro/Broker-Background.webp') no-repeat center / cover;
  min-height: 481px;
  padding: 121px 0 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
/* Live darkens the dot pattern with a purple overlay (Elementor background overlay, darken blend) */
.intro-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #56317D;
  opacity: 0.85;
  mix-blend-mode: darken;
  z-index: 0;
  pointer-events: none;
}
.intro-hero h1 {
  font-size: 98px;
  line-height: 98px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.05em;   /* live: -5px at 98px, -2.9px at 58px */
  max-width: 840px;
  margin: 0 auto;
  text-transform: none;
}
.intro-hero .intro-shape--bottom svg { width: calc(105% + 1.3px); height: 22px; }

/* Lead paragraphs */
.intro-lead { background: #F8F8F8; padding: 100px 0 75px; }
.intro-lead p {
  font-size: 25px;
  line-height: 1.5;
  font-weight: 600;
  color: #000;
  text-align: center;
  max-width: 75%;
  margin: 0 auto 14px;
}
.intro-lead .intro-shape--bottom svg { width: calc(106% + 1.3px); height: 31px; }

/* Shared section typography */
.intro-h2 {
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  color: #000;
  text-align: center;
  margin: 0 0 20px;
  text-transform: none;
}
.intro-p {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin: 0 0 14px;
}

/* Grey rounded cards */
.intro-card { background: #F8F8F8; border-radius: 20px; padding: 25px; }
.intro-card h4 {
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
  color: #000;
  margin: 0 0 10px;
  text-transform: none;
}
.intro-card p { font-size: 16px; line-height: 1.5; font-weight: 400; color: #000; margin: 0 0 14px; }

/* Stop Binning Leads: two option cards with illustration */
.intro-options-sec { padding: 125px 0 100px; }
.intro-options-sec .intro-shape--top svg { height: 50px; }
.intro-options { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 54px; }
.intro-option { display: flex; gap: 20px; padding-bottom: 0; }
.intro-option-text { flex: 0 0 calc(65% - 13px); max-width: calc(65% - 13px); }
.intro-option-image {
  flex: 0 0 calc(35% - 7px);
  min-width: 0;                 /* the 250px illustration overflows its 214px column on live */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}
.intro-option-image img { display: block; flex-shrink: 0; max-width: none; height: auto; }
.intro-option-image .intro-img--partner { margin-left: auto; }   /* live right-aligns the smaller illustration */

/* Light-purple band */
.intro-band { background: #EAD8FD; padding: 120px 0; }
.intro-band .intro-shape--top svg { width: calc(155% + 1.3px); height: 75px; }
.intro-band .intro-shape--bottom svg { width: calc(150% + 1.3px); height: 49px; }
.intro-band-inner { max-width: 1000px; margin: 0 auto; }
.intro-band .intro-p { font-size: 24px; line-height: 1.5; margin-bottom: 14px; }

/* We Play It Straight: three commitment cards */
.intro-commit { padding: 100px 0; }
.intro-commit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }

/* The Bottom Line / Be CLEVER today: bordered boxes on light purple */
.intro-cta { background: #EAD8FD; padding: 120px 0; }
.intro-cta .intro-shape--top svg { width: calc(155% + 1.3px); height: 75px; }
.intro-cta-inner { max-width: 1000px; margin: 0 auto; }
.intro-box {
  background: #fff;
  border: 3px solid #000;
  border-radius: 20px;
  box-shadow: 5px 5px 0 #000;
  padding: 35px;
}
.intro-box .intro-p { margin-bottom: 34px; }
.intro-box .intro-p:last-child { margin-bottom: 14px; }
.intro-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 45px; }
.intro-contact-card { text-align: left; }
.intro-contact-icon { display: block; width: 80px; height: 80px; margin-bottom: 23px; }
.intro-contact-icon img { display: block; width: 80px; height: 80px; }
.intro-contact-card h3 {
  font-size: 42px;
  line-height: 1.2;
  font-weight: 900;
  color: #000;
  margin: 0 0 10px;
  text-transform: capitalize;
}
.intro-contact-card h3 a,
.intro-contact-card p a { color: inherit; text-decoration: none; }
.intro-contact-card p { font-size: 16px; line-height: 1.5; color: #000; margin: 0; }

@media (max-width: 1024px) {
  .intro-hero h1 { font-size: 72px; line-height: 1; }
  .intro-h2 { font-size: 42px; }
  .intro-commit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .intro-hero { min-height: 377px; padding: 77px 0 100px; }
  .intro-hero h1 { font-size: 58px; line-height: 58px; }
  .intro-lead { padding: 50px 0 25px; }
  .intro-lead p { font-size: 16px; max-width: none; }
  .intro-h2 { font-size: 32px; line-height: 1; }
  .intro-options-sec .intro-p { font-size: 18px; }   /* the commitment and bottom-line copy stays 20px on live mobile */
  .intro-card h4 { font-size: 28px; }
  .intro-card p { line-height: 1.2; }
  .intro-options-sec { padding: 75px 0 50px; }
  .intro-options { grid-template-columns: 1fr; gap: 20px; }
  .intro-option { flex-direction: column; gap: 0; padding-bottom: 25px; }
  .intro-option-text, .intro-option-image { flex: none; max-width: none; }
  .intro-option-image { justify-content: flex-start; min-height: 0; }
  .intro-option-image .intro-img--partner { width: 100px; margin-left: 0; }
  .intro-option-image .intro-img--investment { width: 150px; }
  .intro-band { padding: 75px 0 50px; }
  .intro-band .intro-p { font-size: 18px; }
  .intro-commit { padding: 75px 0; }
  .intro-cta { padding: 75px 0 50px; }
  .intro-box { padding: 25px; }
  .intro-contact { grid-template-columns: 1fr; gap: 30px; }
  .intro-contact-card h3 { font-size: 24px; }
  .intro-contact-icon, .intro-contact-icon img { width: 66px; height: 66px; }
}

/* ========================================
   BLOG LISTING + BLOG POST  (mirrors live /blogs/ and the single post template)
   ======================================== */
/* --- listing hero: the standard purple arrow hero, 1140px content, 35px curve --- */
.svc-hero--blog { padding: 131px 0 130px; }
.svc-hero--blog::after { background-size: 50% auto; background-position: 1000px 32px; opacity: 1; }
.svc-hero--blog .container { max-width: 1180px; padding: 0 20px; }
.svc-hero--blog .svc-hero-content { flex: 0 0 844px; max-width: 844px; }
.svc-hero--blog .svc-hero-label { line-height: 18px; margin-bottom: 20px; }
.svc-hero--blog h1 { font-size: 72px; line-height: 72px; font-weight: 800; margin: 0; }
.svc-hero .intro-shape { z-index: 1; }
.svc-hero--blog .intro-shape--bottom svg,
.svc-hero--post .intro-shape--bottom svg { width: calc(150% + 1.3px); height: 35px; }

.blog-list-section { padding: 100px 0; }
.blog-list-section .container { max-width: 1180px; padding: 0 20px; }
.blog-list { display: flex; flex-direction: column; gap: 40px; }

/* --- post card (listing rows and carousel slides) --- */
.blog-card {
  background: #F5F5F5;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #000;
}
.blog-card-title { font-size: 28px; line-height: 28px; font-weight: 700; color: #000; margin: 0 0 10px; text-transform: none; }
.blog-meta { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.blog-meta-item { display: inline-flex; align-items: center; font-size: 16px; line-height: 24px; font-weight: 500; color: #000; margin: 0 8px; }
.blog-meta-item:first-child { margin-left: 0; }
.blog-meta-item:last-child { margin-right: 0; }
.blog-icon { display: inline-block; width: 16px; height: 16px; fill: #67EEBC; flex-shrink: 0; }
.blog-meta-item time, .blog-meta-author a span { padding-left: 5px; }
.blog-meta-author a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.blog-meta-avatar { width: 16px; height: 16px; border-radius: 100%; object-fit: cover; flex-shrink: 0; }
.blog-meta-role::before { content: '\2022'; margin-right: 0; }
.blog-card-excerpt { font-size: 16px; line-height: 24px; font-weight: 400; color: #000; margin: 0 0 14.4px; }
.blog-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #56317D; color: #fff;
  font-size: 14px; line-height: 14px; font-weight: 500;
  padding: 12px 20px; border-radius: 50px;
  text-decoration: none; transition: background .2s ease;
}
.blog-card-btn:hover { background: #4a2373; color: #fff; }

/* --- reading progress bar --- */
.post-progress { position: fixed; top: 0; left: 0; width: 100%; height: 10px; background: #56317D; z-index: 1001; }
.post-progress-bar { height: 100%; width: 0; background: #67EEBC; }

/* --- post hero --- */
.svc-hero--post { padding: 160px 0 120px; }
.svc-hero--post::after { background-size: 50% auto; background-position: 1000px 32px; opacity: 1; }
.svc-hero--post .container { max-width: 1440px; padding: 0 20px; }
.svc-hero--post .svc-hero-content { flex: 0 0 100%; max-width: 100%; }
.svc-hero--post .post-hero-cats { font-size: 18px; line-height: 18px; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0 0 20px; }
.post-hero-cats a { color: #fff; text-decoration: none; }
.svc-hero--post h1 { font-size: 57px; line-height: 57px; font-weight: 800; color: #fff; margin: 0 0 20px; }
.post-hero-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.post-hero-meta li { display: inline-flex; align-items: center; font-size: 16px; line-height: 24px; font-weight: 400; color: #fff; }
.post-hero-meta .blog-icon--calendar { width: 13px; height: 13px; }
.post-hero-meta li span, .post-hero-meta li time { padding-left: 4px; }
.post-hero-author { display: flex; flex-wrap: wrap; align-items: center; margin-top: 5px; font-size: 18px; line-height: 27px; color: #fff; }
.post-hero-author-link { display: inline-flex; align-items: center; color: #fff; text-decoration: none; margin-right: 16px; }
.post-hero-avatar { width: 40px; height: 40px; border-radius: 100%; object-fit: cover; }
.post-hero-author-link span { padding-left: 4px; }
.post-hero-role::before { content: '\2022'; margin-right: 8px; }
.svc-hero--post .post-hero-bio { flex: 0 0 100%; margin: 0; padding-left: 4px; font-size: 18px; line-height: 27px; font-weight: 400; color: #fff; }
/* Live blog posts use the wider (1400px) CTA band: 1330px copy width and form, 25px radius, 40px padding */
.blog-post .svc-enquiry-inner .container { max-width: 1400px; padding: 0 35px; }
.blog-post .svc-enquiry-form { border-radius: 25px; padding: 40px; }

/* --- post body: contents sidebar + article --- */
.post-body { padding: 80px 0; }
.post-body .container { max-width: 1440px; padding: 0 20px; }
.post-layout { display: grid; grid-template-columns: 367px minmax(0, 1fr); gap: 40px; align-items: start; }
.post-toc-col { padding: 0 10px; position: sticky; top: 100px; }
.post-article-col { padding: 1px 10px 10px; min-width: 0; }
.post-toc-header { display: flex; align-items: center; justify-content: space-between; font-size: 14px; line-height: 1.4; font-weight: 600; color: #54595f; cursor: pointer; }
.post-toc-toggle { background: none; border: 0; padding: 0; width: 14px; height: 14px; display: inline-flex; cursor: pointer; }
.post-toc-toggle .blog-icon { width: 14px; height: 14px; fill: #000; }
.post-toc-toggle .blog-icon--chevron-down { display: none; }
.post-toc.is-collapsed .post-toc-toggle .blog-icon--chevron-down { display: inline-block; }
.post-toc.is-collapsed .post-toc-toggle .blog-icon--chevron-up { display: none; }
.post-toc.is-collapsed .post-toc-list { display: none; }
.post-toc-list { list-style: none; margin: 20px 0 0; padding: 0; }
.post-toc-item { border-left: 2px solid #d2d2d2; padding-left: 10px; margin: 20px 0; font-size: 16px; line-height: 24px; }
.post-toc-item:first-child { margin-top: 0; }
.post-toc-item a { color: #747474; text-decoration: none; }
.post-toc-item.is-active { border-left-color: #67EEBC; }
.post-toc-item.is-active a { color: #67EEBC; }

.post-article { font-size: 16px; line-height: 24px; color: #000; }
.post-article p { font-size: 16px; line-height: 24px; color: #000; margin: 0 0 14.4px; }
.post-article h2 { font-size: 32px; line-height: 1.2; font-weight: 600; color: #000; margin: 8px 0 16px; text-transform: none; }
.post-article h3 { font-size: 28px; line-height: 1.2; font-weight: 600; color: #000; margin: 8px 0 16px; text-transform: none; }
.post-article h4 { font-size: 22px; line-height: 1.2; font-weight: 600; color: #000; margin: 8px 0 16px; }
.post-article a { color: #67EEBC; text-decoration: none; font-weight: 400; }
.post-article ul, .post-article ol { margin: 0 0 14.4px; padding-left: 24px; }
.post-article li { font-size: 16px; line-height: 24px; margin-bottom: 6px; }
.post-article strong { font-weight: 700; }
.post-article img { max-width: 100%; height: auto; }
.post-article p.cl-last-updated { font-size: 14px; line-height: 1.5; color: #54595f; margin: 0 0 24px; padding: 8px 0; border-bottom: 1px solid #eaeaea; }

/* FAQ block used inside migrated post content (styles copied from live) */
/* Brand purple. Not --e-global-color-primary: that global is left at
		   Elementor's default blue on this site, which is not the brand. */
		.cl-faqs{--cl-faq-accent:#583181;--cl-faq-line:#e3e6ea;margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--cl-faq-line)}
		.cl-faqs__title{margin:0 0 1.25rem}
		.cl-faqs__item{border-bottom:1px solid var(--cl-faq-line)}
		.cl-faqs__q{margin:0;font-size:inherit;font-weight:inherit}
		/* The theme's reset.css styles every button pink (#cc3366), and paints a
		   solid pink bar on :hover/:focus. !important because the winning rule
		   lives in a stylesheet we cannot override on specificity alone. */
		.cl-faqs .cl-faqs__trigger,
		.cl-faqs .cl-faqs__trigger:hover,
		.cl-faqs .cl-faqs__trigger:focus,
		.cl-faqs .cl-faqs__trigger:active{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
			padding:1.1rem 0;background:none !important;border:0 !important;border-radius:0;cursor:pointer;text-align:left;
			font:inherit;font-weight:600;color:#1a1a1a !important;line-height:1.4;text-decoration:none}
		.cl-faqs .cl-faqs__trigger:hover .cl-faqs__text{color:var(--cl-faq-accent)}
		.cl-faqs .cl-faqs__trigger:focus-visible{outline:2px solid var(--cl-faq-accent);outline-offset:3px}
		.cl-faqs__icon{position:relative;flex:0 0 16px;height:16px}
		.cl-faqs__icon::before,.cl-faqs__icon::after{content:"";position:absolute;top:50%;left:0;width:16px;height:2px;
			background:var(--cl-faq-accent);transform:translateY(-50%);transition:transform .2s ease}
		.cl-faqs__icon::after{transform:translateY(-50%) rotate(90deg)}
		.cl-faqs__trigger[aria-expanded="true"] .cl-faqs__icon::after{transform:translateY(-50%) rotate(0)}
		.cl-faqs__a-inner{padding:0 0 1.25rem}
		.cl-faqs__a-inner > :first-child{margin-top:0}
		.cl-faqs__a-inner > :last-child{margin-bottom:0}

/* --- More News & Blogs carousel --- */
.post-more { padding: 50px 0 100px; }
.post-more .container { max-width: 1440px; padding: 0 20px; }
.post-more > .container > h2 { font-size: 52px; line-height: 52px; font-weight: 800; color: #000; text-align: left; margin: 0 0 20px; text-transform: none; }
.post-more-track {
  display: flex; gap: 25px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; user-select: none;
}
.post-more-track::-webkit-scrollbar { display: none; }
.post-more-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.post-more-slide { flex: 0 0 calc((100% - 50px) / 3); scroll-snap-align: start; display: flex; }
.post-more-slide .blog-card { width: 100%; }
.post-more-dots { display: flex; justify-content: center; gap: 12px; margin-top: 25px; min-height: 10px; }
.post-more-dot { width: 10px; height: 10px; border-radius: 50%; background: #56317D; opacity: .2; border: 0; padding: 0; cursor: pointer; }
.post-more-dot.is-active { opacity: 1; }

@media (max-width: 1024px) {
  .svc-hero--blog .svc-hero-content { flex: none; max-width: 100%; }
  .post-layout { grid-template-columns: 1fr; }
  .post-toc-col { position: static; }
  .post-more-slide { flex-basis: calc((100% - 20px) / 2); }
  .post-more-track { gap: 20px; }
}

@media (max-width: 767px) {
  .svc-hero--blog { padding: 77px 0 66px; }
  .svc-hero--blog .svc-hero-label { font-size: 18px; }
  .svc-hero--blog h1 { font-size: 42px; line-height: 42px; }
  .blog-list-section { padding: 50px 0 100px; }
  .svc-hero--post { padding: 100px 0 75px; }
  .svc-hero--post .post-hero-cats { font-size: 16px; line-height: 1.3; }
  .blog-post .svc-enquiry-inner .container { padding: 0 20px; }
  .blog-post .svc-enquiry-form { padding: 30px; }
  .svc-hero--post h1 { font-size: 30px; line-height: 39px; }
  .post-toc-col { display: none; }
  .post-article h2, .post-article h3 { font-size: 26px; line-height: 1.2; }
  .post-more { padding: 50px 0 90px; }
  .post-more > .container > h2 { font-size: 38px; line-height: 38px; }
  .post-more-slide { flex-basis: 100%; }
}

/* Blog post: the related-posts block ends with a 27px curve in the CTA colour (live: non-negative asymmetrical shape, 125% wide) */
.post-more { position: relative; }
.post-more .post-more-shape svg { width: calc(125% + 1.3px); height: 27px; }

/* ---- CALCULATOR PAGES — live parity (measured on /bridging-loans-calculator-uk/ at 1696px / 375px) ---- */
body.calc-page .svc-hero { padding-bottom: 100px; }
body.calc-page .calc-section { padding: 120px 0; }
body.calc-page .calc-section > .container { max-width: 1420px; padding: 0 10px; }
body.calc-page .blc-calc, body.calc-page .clc-calc, body.calc-page .sdc-calc,
body.calc-page .ryc-calc, body.calc-page .smc-calc, body.calc-page .moc-calc,
body.calc-page .erc-calc, body.calc-page .rmc-calc, body.calc-page .sbc-calc,
body.calc-page .bsc-calc { margin-left: 0; margin-right: 0; }
body.calc-page .svc-clever--no-bg { padding: 100px 0; }
body.calc-page .svc-clever--no-bg::before { display: none; }
body.calc-page .calc-section + .svc-clever--no-bg::before { display: block; background-position: 130px 150px; }
body.calc-page .svc-clever-image img { width: 100%; }
body.calc-page .svc-clever--no-bg h2 { font-size: 62px; line-height: 62px; font-weight: 900; text-transform: none; margin: 0 0 30px; }   /* 10px widget margin + 20px container gap */
body.calc-page .svc-clever--no-bg h3 { font-size: 28px; line-height: 33.6px; font-weight: 500; margin: 8px 0 16px; }
body.calc-page .svc-clever--no-bg p { font-size: 18px; line-height: 27px; margin: 0 0 14.4px; }
body.calc-page .svc-clever--no-bg ul, body.calc-page .svc-clever--no-bg ol { padding-left: 40px; margin: 0 0 14.4px; }
body.calc-page .svc-clever--no-bg li { font-size: 18px; line-height: 27px; }
body.calc-page .svc-enquiry-inner h2 { text-transform: none; }
body.calc-page .svc-faq { background: #F5F5F5; }
@media (max-width: 768px) {
  body.calc-page .svc-hero { padding: 77px 0 90px; }
  body.calc-page .svc-hero::after { background-position: -47px 514px; }
  body.calc-page .calc-section { padding: 100px 0 50px; }
  body.calc-page .calc-section > .container { padding: 0 20px; }
  body.calc-page .blc-calc, body.calc-page .clc-calc, body.calc-page .sdc-calc,
  body.calc-page .ryc-calc, body.calc-page .smc-calc, body.calc-page .moc-calc,
  body.calc-page .erc-calc, body.calc-page .rmc-calc, body.calc-page .sbc-calc,
  body.calc-page .bsc-calc { margin-left: 0; margin-right: 0; padding: 20px; }
  body.calc-page .svc-clever--no-bg { padding: 0 0 50px; }
  body.calc-page .calc-section + .svc-clever--no-bg::before { background-size: 280px auto; background-position: 73px 1000px; }
  body.calc-page .svc-clever--no-bg h2 { font-size: 38px; line-height: 38px; }
}

/* ---- MOBILE PARITY PASS (measured against live at 375px, 2026-10-30) ---- */
.svc-hero h1 + .svc-hero-actions { margin-top: 20px; }   /* no paragraph before the buttons: only the 20px container gap */
.join-working-text ul, .criteria-raw ul, body.calc-page .svc-clever--no-bg ul, body.calc-page .svc-clever--no-bg ol { margin: 0; }   /* live text-editor lists carry no margin */
body.calc-page .svc-clever--no-bg li { margin: 0; padding: 0; }
.svc-form-trustpilot-link { margin: 20px 0 0; font-size: 16px; line-height: 24px; text-align: left; }
.svc-form-trustpilot-link a { color: #67EEBC; text-decoration: none; font-weight: 400; }
.svc-hero h1:last-child { margin-bottom: 0; }   /* hub heroes: nothing follows the title, so no 20px widget margin */
@media (max-width: 768px) {
  .svc-hero-content { width: 100%; }
  .svc-faq .faq-question::after { flex-basis: 19px; width: 19px; height: 19px; margin-left: -2px; }   /* live: 7px icon box (19px svg overflowing) + 10px gap → 318px question width */
  .svc-enquiry-form { margin: 40px 7px 10px 1px; }   /* live form container: padding 10px 7px 0 1px */
  .svc-form-trustpilot { height: 24px; overflow: hidden; white-space: nowrap; justify-content: flex-start; }   /* live: 24px Trustpilot micro widget */
  .svc-form-trustpilot span:nth-of-type(2) { display: none; }
  .svc-hero--vh { min-height: calc(70vh - 23px); display: flex; flex-direction: column; justify-content: center; }   /* live: min-height 70vh, content centred */
  .borrower-svc .svc-hero--vh { min-height: 70vh; }
  .hub-page .svc-hero, .case-studies-page .svc-hero { padding-bottom: 50px; }   /* no hidden side column → no 40px flex gap */
  .svc-enquiry-inner { padding-top: 60px; }   /* live: an empty first widget leaves a 10px flex gap above the heading */
  body.calc-page .svc-clever--no-bg .svc-clever-inner { flex-direction: column-reverse; }
  body.calc-page .svc-clever--no-bg .svc-clever-image, body.calc-page .svc-clever--no-bg .svc-clever-content { order: 0; }
}

/* ========================================
   RESOURCE CALCULATOR PAGES (resources/*.html) — same layout system as live.
   Sections are flex stacks with Elementor's 20px gap, so paragraph margins do not collapse.
   ======================================== */
body.calc-page .calc-section--clc { padding: 80px 0; }
.calc-hero-html { margin-top: 34.4px; }   /* 14.4px paragraph margin + 20px gap */
.calc-sec { position: relative; overflow: hidden; }
.calc-sec > .container { max-width: 1420px; padding: 0 10px; position: relative; z-index: 1; }
.calc-sec--p80 { padding: 80px 0; }
.calc-sec--p100 { padding: 100px 0; }
.calc-sec--p120 { padding: 120px 0; }
.calc-sec--white { background: #fff; }
.calc-sec--purple { background: #56317D; color: #fff; }
.calc-sec--purple .intro-shape--top svg { width: calc(155% + 1.3px); height: 75px; }
.calc-sec--purple .intro-shape--bottom svg { width: calc(150% + 1.3px); height: 49px; }
.calc-logo--a::before, .calc-logo--b::before, .calc-logo--c::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/borrower-home/Logo-Icon.webp') no-repeat;
  background-size: 28% auto;
  opacity: .5;
  pointer-events: none;
}
.calc-logo--a::before { background-position: 130px 150px; }
.calc-logo--b::before { background-position: 1000px 44px; }
.calc-logo--c::before { background-position: 130px 44px; }
.calc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.calc-col--center { justify-content: center; }
.calc-row { display: flex; gap: var(--gap, 20px); }
.calc-row--rev { flex-direction: row-reverse; }
.calc-row > * { flex: var(--f, 1) var(--f, 1) 0; min-width: 0; }
.calc-h { font-weight: 900; text-transform: none; color: #000; margin: 0; }
.calc-sec--purple .calc-h { color: #fff; }
.calc-h62 { font-size: 62px; line-height: 62px; }
.calc-h52 { font-size: 52px; line-height: 52px; }
.calc-h42 { font-size: 42px; line-height: 42px; }
.calc-mb10 { margin-bottom: 10px; }
.calc-mb25 { margin-bottom: 25px; }
.calc-w80 { width: 80%; }
.calc-w60 { width: 60%; }
.calc-text { color: #000; }
.calc-sec--purple .calc-text { color: #fff; }
.calc-text p { font-size: 18px; line-height: 27px; color: inherit; margin: 0 0 14.4px; }
.calc-text ul, .calc-text ol { padding-left: 40px; margin: 0; }
.calc-text ul { list-style: disc; }
.calc-text ol { list-style: decimal; }
.calc-text li { font-size: 18px; line-height: 27px; color: inherit; margin: 0; }
.calc-text h2, .calc-text h3 { font-size: 28px; line-height: 33.6px; font-weight: 500; color: inherit; text-transform: none; margin: 8px 0 16px; }
.calc-text a { color: #67EEBC; text-decoration: none; }
.calc-card--grey { background: #F5F5F5; padding: 25px; border-radius: 20px; }
.calc-card--lilac { background: #EAD5FF; padding: 30px; border-radius: 30px; }
.calc-img img { display: block; width: 100%; height: auto; }
.calc-img--70 img { width: 70%; margin: 0 auto; }
.calc-grid { display: grid; gap: 20px; grid-auto-rows: 1fr; }
.calc-grid--1 { grid-template-columns: 1fr; grid-auto-rows: auto; }
.calc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.calc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.calc-grid--5 { grid-template-columns: repeat(5, 1fr); }
.calc-ibox { background: #4B2870; padding: 25px; border-radius: 15px; color: #fff; }
.calc-ibox h3 { font-size: 24px; line-height: 36px; font-weight: 700; color: #fff; text-transform: none; margin: 0 0 5px; }
.calc-ibox p { font-size: 16px; line-height: 24px; color: #fff; margin: 0; }
.calc-ibox--icon { display: flex; flex-direction: column; gap: 5px; }
.calc-ibox--icon h3 { line-height: 28.8px; margin: 8px 0 0; }
.calc-ibox-icon { width: 80px; height: 80px; }
.calc-ibox-icon svg { width: 100%; height: 100%; display: block; fill: #fff; }
.calc-ibox-icon svg path { fill: #fff; }
body.calc-page .svc-enquiry .intro-shape--bottom svg { width: calc(127% + 1.3px); height: 29px; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; }
body.calc-links .calc-text a { color: #56317D; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }   /* live page CSS: the mint link colour is unreadable on white */
body.calc-links .calc-text a:hover, body.calc-links .calc-text a:focus { color: #3F2460; }
body.calc-page .svc-faq--gap { padding-bottom: 165px; }   /* live: a zero-height widget after the FAQ still adds the 40px gap */
/* Live theme defaults the calculator widgets rely on (same specificity as the theme, so widget CSS still wins) */
:where(.calc-section--clc) label { line-height: 1; }
:where(.calc-section--clc) button { white-space: nowrap; }
body.calc-page .svc-form-group label { margin-bottom: 5px; }
body.calc-page .svc-form-trustpilot { height: 24px; overflow: hidden; white-space: nowrap; }
:where(.calc-section--clc) input, :where(.calc-section--clc) select, :where(.calc-section--clc) textarea, :where(.calc-section--clc) button { line-height: 1.5; }
:where(.calc-html) table, :where(.calc-section--clc) table { width: 100%; margin: 0 0 15px; border-collapse: collapse; border-spacing: 0; }
:where(.calc-html) table td, :where(.calc-html) table th, :where(.calc-section--clc) table td, :where(.calc-section--clc) table th { vertical-align: top; border: 1px solid rgba(128, 128, 128, .5); }
:where(.calc-html) table tbody > tr:nth-child(odd) > td, :where(.calc-html) table tbody > tr:nth-child(odd) > th { background-color: rgba(128, 128, 128, .07); }
@media (max-width: 768px) {
  body.calc-page .calc-section--clc { padding: 50px 0; }
  .calc-sec > .container { padding: 0 20px; }
  .calc-sec--p80, .calc-sec--p100, .calc-sec--p120 { padding: 50px 0; }
  .calc-sec--first { padding: 0 0 50px; }
  body.calc-page .svc-faq--gap { padding-bottom: 95px; }
  .calc-sec--purple { padding: 75px 0 50px; }
  .calc-logo--a::before { background-size: 280px auto; background-position: 73px 1000px; }
  .calc-logo--b::before, .calc-logo--c::before { background-size: 280px auto; background-position: 65px 850px; }
  .calc-row, .calc-row--rev { flex-direction: column; gap: 20px; }
  .calc-row--two { flex-direction: column-reverse; }
  .calc-row--sec { gap: 40px; }
  .calc-row > * { flex: none; width: 100%; }
  .calc-h62, .calc-h52 { font-size: 38px; line-height: 38px; }
  .calc-h42 { font-size: 28px; line-height: 28px; }
  .calc-w80, .calc-w60 { width: 100%; }
  .calc-img--70 img { width: 100%; }
  .calc-grid--3, .calc-grid--4, .calc-grid--5 { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .calc-ibox h3 { line-height: 24px; margin-bottom: 10px; }
  .calc-ibox-icon { width: 60px; height: 60px; }
  .calc-ibox--icon h3 { line-height: 24px; margin: 8px 0 5px; }
  .calc-card--lilac.calc-col { gap: 10px; }
  .calc-card--lilac .calc-text p { line-height: 25.2px; }
}

/* ---- CASE STUDY POSTS ---- */
.svc-hero--case { padding: 131px 0 130px; }
.svc-hero--case .container { max-width: 1140px; padding: 0; }
.svc-hero--case .svc-hero-content { flex: 1 1 100%; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.svc-hero--case .post-hero-cats { font-size: 18px; line-height: 18px; font-weight: 700; letter-spacing: normal; text-transform: uppercase; color: #fff; margin: 0; }
.svc-hero--case .post-hero-cats a { color: inherit; text-decoration: none; }
.svc-hero--case h1 { font-size: 62px; line-height: 62px; font-weight: 800; text-transform: none; color: #fff; margin: 0; }
.svc-hero--case .cl-last-updated { font-size: 14px; line-height: 21px; color: #54595F; margin: 0 0 24px; padding: 8px 0; border-bottom: 1px solid #EAEAEA; }
.svc-hero--case .cl-last-updated strong, .svc-hero--case .cl-last-updated time { font-size: 14px; line-height: 21px; color: #54595F; }
.svc-hero--case .cs-hero-date { display: inline-flex; align-items: center; align-self: flex-start; font-size: 18px; line-height: 27px; color: #fff; text-decoration: none; }
.svc-hero--case .cs-hero-date .blog-icon { width: 22px; height: 22px; fill: #67EEBC; flex-shrink: 0; }
.svc-hero--case .cs-hero-date time { padding-left: 10px; font-size: 18px; line-height: 27px; color: #fff; }
.case-study-body { padding: 100px 0; }
.case-study-body .container { max-width: 1140px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.case-study-block { display: flex; flex-direction: column; gap: 20px; }
.case-study-block h2 { font-size: 38px; line-height: 38px; font-weight: 600; color: #000; margin: 0; }
.case-study-text p { font-size: 18px; line-height: 27px; color: #000; margin: 0; }
.case-study-text p + p { margin-top: 14.4px; }
@media (max-width: 1200px) {
  .svc-hero--case .container, .case-study-body .container { padding: 0 20px; }
}
@media (max-width: 767px) {
  .svc-hero--case { padding: 109px 0 50px; }
  .svc-hero--case h1 { font-size: 38px; line-height: 38px; }
  .case-study-body { padding: 50px 0; }
  .case-study-block h2 { font-size: 28px; line-height: 28px; }
  .case-study-text p { font-size: 16px; line-height: 24px; }
}

/* ---- POST FAQ ACCORDION (same values as the block on live posts) ---- */
.cl-faqs { --cl-faq-accent: #583181; --cl-faq-line: #e3e6ea; margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--cl-faq-line); }
.cl-faqs__title { margin: 0 0 1.25rem; }
.cl-faqs__item { border-bottom: 1px solid var(--cl-faq-line); }
.post-article .cl-faqs__q { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.post-article .cl-faqs__title { margin: 0 0 1.25rem; }
.cl-faqs .cl-faqs__trigger,
.cl-faqs .cl-faqs__trigger:hover,
.cl-faqs .cl-faqs__trigger:focus,
.cl-faqs .cl-faqs__trigger:active { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; background: none !important; border: 0 !important; border-radius: 0; cursor: pointer; text-align: left; font: inherit; font-weight: 600; color: #1a1a1a !important; line-height: 1.4; text-decoration: none; }
.cl-faqs .cl-faqs__trigger:hover .cl-faqs__text { color: var(--cl-faq-accent); }
.cl-faqs .cl-faqs__trigger:focus-visible { outline: 2px solid var(--cl-faq-accent); outline-offset: 3px; }
.cl-faqs__icon { position: relative; flex: 0 0 16px; height: 16px; }
.cl-faqs__icon::before, .cl-faqs__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 2px; background: var(--cl-faq-accent); transform: translateY(-50%); transition: transform .2s ease; }
.cl-faqs__icon::after { transform: translateY(-50%) rotate(90deg); }
.cl-faqs__trigger[aria-expanded="true"] .cl-faqs__icon::after { transform: translateY(-50%) rotate(0); }
.cl-faqs__a-inner { padding: 0 0 1.25rem; }
.cl-faqs__a-inner > :first-child { margin-top: 0; }
.cl-faqs__a-inner > :last-child { margin-bottom: 0; }

/* Enquiry block on single posts sits tighter to the top than on product pages */
body.blog-post .svc-enquiry-inner { padding-top: 85px; }
@media (max-width: 767px) {
  body.blog-post .svc-enquiry-inner { padding-top: 54px; }
  .post-article-col { padding-top: 11px; }
}

/* ---- NEWS CARDS (server-rendered, same spacing as the live loop grid) ---- */
.news-section--live > .container > h2 { margin-bottom: 20px; }
.news-section--live .news-card p { margin-top: 0; }
.blog-meta-item, .blog-meta-author a { color: #333; }

/* ---- PER-PAGE DETAILS FROM LIVE ---- */
.svc-criteria-list { align-self: flex-start; }
@media (min-width: 768px) {
  .svc-criteria-image--90 img { width: 90%; }
  .svc-enquiry--tall .svc-enquiry-inner { padding-bottom: 220px; }
}
.svc-criteria-image--73 img { width: 73%; }
.svc-criteria-grids--one { grid-template-columns: 1fr; }
.svc-process-subtitle--first { margin-bottom: 14.4px; }
.svc-ready--wide h2 { margin-bottom: 20px; }
.svc-ready--wide .svc-ready-subtitle { max-width: 100%; }

/* ---- MOBILE DETAILS FROM LIVE ---- */
@media (max-width: 767px) {
  .svc-clever-image img { width: 100%; }
  .svc-ready-col ul li { line-height: 25.2px; }
}

.svc-hero--short { padding-bottom: 115px; }
@media (max-width: 767px) {
  .svc-hero--short { padding-bottom: 75px; }
  .svc-ready-subtitle--small { font-size: 16px; line-height: 22.4px; }
}
@media (min-width: 1025px) {
  .svc-process-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.svc-form-trustpilot a { color: inherit; text-decoration: none; display: contents; }