/* ============================================================
   UK Broker Support — Section layout & colour
   ============================================================ */

.ukbs-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* --- Hero (Section 1, cream) --- */
.ukbs-hero {
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
  background: var(--cream);
}
.ukbs-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
.ukbs-hero-h1 {
  font-size: clamp(2.75rem, 5.5vw, var(--text-6xl));
  line-height: var(--leading-tight);
  color: var(--charcoal);
  max-width: 16ch;
}
.ukbs-hero-h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  max-width: 40ch;
  margin-top: var(--space-5);
}
.ukbs-hero-cta { margin-top: var(--space-6); }

.ukbs-hero-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 380 / 470;
  margin: 0 auto;
}
.ukbs-hero-colour-block {
  position: absolute;
  right: -6px;
  bottom: -16px;
  width: 76%;
  height: 70%;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 38px);
}
.ukbs-hero-accent-bar {
  position: absolute;
  left: 2%;
  top: 20%;
  width: 4%;
  height: 34%;
  background: var(--charcoal);
}
.ukbs-hero-portrait {
  position: absolute;
  left: 8%;
  top: 2%;
  width: 82%;
  height: 96%;
  border-radius: 999px 999px 8px 8px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ukbs-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ukbs-hero-credential {
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--charcoal-80);
}

@media (max-width: 900px) {
  .ukbs-hero-grid { grid-template-columns: 1fr; }
  .ukbs-hero-portrait-frame { order: -1; max-width: 280px; }
}

/* --- The Problem (Section 2, charcoal — dark structural section) --- */
.ukbs-problem {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--charcoal);
}
.ukbs-problem-hook {
  font-size: clamp(1.75rem, 3.4vw, var(--text-3xl));
  line-height: var(--leading-tight);
  color: var(--cream);
  text-align: center;
  max-width: 24ch;
  margin: 0 auto;
}
.ukbs-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.ukbs-problem-col-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--orange-on-dark-text);
  margin-bottom: var(--space-3);
}
.ukbs-problem-col p {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 1.125rem;
  line-height: var(--leading-normal);
  color: var(--cream);
  margin: 0;
}

@media (max-width: 780px) {
  .ukbs-problem-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --- Generic cream section wrapper (Who This Is For, Services) --- */
.ukbs-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--cream);
}
.ukbs-section-heading {
  font-size: clamp(1.75rem, 3.2vw, var(--text-3xl));
  line-height: var(--leading-snug);
  color: var(--charcoal);
  margin-top: var(--space-4);
  max-width: 20ch;
}
.ukbs-section-subhead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  max-width: 60ch;
  margin-top: var(--space-4);
  margin-bottom: var(--space-7);
}

/* --- Grid-aligned section divider: hanging eyebrow, hairline rule,
     indented headline (Who This Is For, Services, How It Works,
     Why Me, Pricing, Contact) --- */
.ukbs-eyebrow--hung { margin: 0 0 var(--space-2); }
.ukbs-section-rule {
  border-top: 1px solid var(--ink-hairline);
  margin: 0;
}
.ukbs-section-rule--on-feature { border-top-color: var(--border-on-feature); }
.ukbs-section-heading--indent {
  margin-top: var(--space-7);
  margin-left: var(--space-8);
}
.ukbs-section-heading--cream { color: var(--cream); }
.ukbs-section-heading--sentence {
  font-size: var(--text-2xl);
  max-width: 46ch;
}
.ukbs-section-subhead--indent { margin-left: var(--space-8); }

@media (max-width: 900px) {
  .ukbs-section-heading--indent,
  .ukbs-section-subhead--indent {
    margin-left: 0;
  }
}

/* --- Visually hidden (accessible but not shown) --- */
.ukbs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Why Me (Section 5, split cream/charcoal) --- */
.ukbs-whyme {
  background: var(--cream);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.ukbs-whyme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.ukbs-whyme-left { padding-right: var(--space-8); }
.ukbs-whyme-left p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  margin: 0 0 var(--space-4);
}
/* Higher-specificity overrides: .ukbs-whyme-left p (class+element) otherwise
   beats the single-class eyebrow/heading rules below and silently reverts
   them to body-copy styling. */
.ukbs-whyme-left .ukbs-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--charcoal);
}
.ukbs-whyme-left .ukbs-eyebrow--hung { margin: 0 0 var(--space-2); }
.ukbs-whyme-opening-lead {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-2xl) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight);
  color: var(--charcoal) !important;
}
.ukbs-whyme-bio-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-2xl);
  color: var(--charcoal);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}
.ukbs-whyme-credentials {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cream-line);
}
.ukbs-whyme-credentials-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--charcoal);
  margin: 0 0 var(--space-2);
}
.ukbs-whyme-credentials-line {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--charcoal-60);
  margin: 0 0 var(--space-4);
}
.ukbs-whyme-employers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--charcoal-60);
  letter-spacing: 0.02em;
}
.ukbs-whyme-right {
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-left: var(--space-8);
  display: flex;
  flex-direction: column;
  align-self: start;
  position: sticky;
  /* Sticks just below the 78px sticky nav bar, then travels down with the
     viewport until it hits the bottom of the (taller) bio column next to it. */
  top: calc(78px + var(--space-5));
}
.ukbs-whyme-quotes-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: start;
  overflow: hidden;
  transition: height 0.4s ease-out;
}
.ukbs-whyme-quotes-container .ukbs-quote {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s ease-out;
  transform: translateY(10px);
}
.ukbs-whyme-quotes-container .ukbs-quote.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ukbs-quote { margin: 0; border-left: var(--border-frame) solid var(--orange); padding-left: var(--space-5); }
.ukbs-quote p {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 var(--space-3);
}
.ukbs-quote cite {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aqua);
  font-style: normal;
}
.ukbs-solo-strength {
  background: var(--cream-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-top: var(--space-8);
}
.ukbs-solo-strength h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-2xl);
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}
.ukbs-solo-strength p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  margin: 0 0 var(--space-3);
}
.ukbs-solo-strength p:last-child { margin-bottom: 0; }

.ukbs-trust-strip[hidden] { display: none; }
.ukbs-trust-strip {
  margin-top: var(--space-8);
}
.ukbs-trust-strip h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-2xl);
  color: var(--charcoal);
  margin-bottom: var(--space-5);
}
.ukbs-trust-strip dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: 0;
}
.ukbs-trust-strip dt {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--orange-on-cream-text);
  margin-bottom: var(--space-2);
}
.ukbs-trust-strip dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  margin: 0;
}

@media (max-width: 900px) {
  .ukbs-whyme-grid { grid-template-columns: 1fr; }
  .ukbs-whyme-left { padding-right: 0; }
  .ukbs-whyme-right { margin-left: 0; margin-top: var(--space-7); position: static; }
  .ukbs-trust-strip dl { grid-template-columns: 1fr 1fr; }
}

/* --- How It Works (Section 6, cream) --- */
.ukbs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-8);
}
.ukbs-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
.ukbs-step h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-stretch: 125%;
  font-size: var(--text-xl);
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}
.ukbs-step p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  margin: 0;
}

@media (max-width: 900px) {
  .ukbs-steps { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --- Pricing (Section 7, cream) --- */
.ukbs-pricing-table-wrap { overflow-x: auto; }
.ukbs-pricing-table { width: 100%; border-collapse: collapse; }
.ukbs-pricing-table th,
.ukbs-pricing-table td {
  text-align: left;
  padding: var(--space-4);
  border-bottom: 1px solid var(--cream-line);
  vertical-align: top;
}
.ukbs-pricing-table thead th {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--charcoal-60);
  border-bottom: 2px solid var(--charcoal);
}
.ukbs-pricing-table tbody th[scope="row"] {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
  color: var(--charcoal);
  white-space: nowrap;
}
.ukbs-pricing-rate {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  color: var(--orange);
  white-space: nowrap;
}
.ukbs-pricing-rate span {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--charcoal-60);
}
.ukbs-pricing-table td:last-child {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  max-width: 420px;
}
.ukbs-pricing-below {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--charcoal-80);
  max-width: 60ch;
  margin: var(--space-7) 0 var(--space-6);
}

@media (max-width: 900px) {
  .ukbs-pricing-table thead { display: none; }
  .ukbs-pricing-table,
  .ukbs-pricing-table tbody,
  .ukbs-pricing-table tr,
  .ukbs-pricing-table th,
  .ukbs-pricing-table td {
    display: block;
    width: auto;
  }
  .ukbs-pricing-table tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--cream-line);
  }
  .ukbs-pricing-table th,
  .ukbs-pricing-table td {
    padding: 0;
    border-bottom: none;
  }
  .ukbs-pricing-table tbody th[scope="row"] { margin-bottom: var(--space-2); }
  .ukbs-pricing-rate { margin-bottom: var(--space-2); }
  .ukbs-pricing-table td:last-child { max-width: none; }
}

/* --- Blog teaser (Section 8, aqua-tint wash) --- */
.ukbs-blog-teaser {
  background: var(--aqua-tint);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.ukbs-blog-teaser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.ukbs-blog-teaser-link {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
  margin-bottom: var(--space-2);
}
.ukbs-blog-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.ukbs-blog-teaser-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  text-decoration: none;
}
.ukbs-blog-teaser-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.ukbs-blog-teaser-date {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--charcoal-60);
}
.ukbs-blog-teaser-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--charcoal);
  margin: 0;
}
.ukbs-blog-teaser-card:hover h3 { color: var(--text-link); }

@media (max-width: 900px) {
  .ukbs-blog-teaser-grid { grid-template-columns: 1fr; }
}

/* --- Contact (Section 8, burnt orange full-bleed feature) --- */
.ukbs-contact {
  background: var(--orange-dark);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.ukbs-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.ukbs-eyebrow--cream { color: var(--cream); }
.ukbs-contact-copy {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--cream);
  margin: var(--space-4) 0 0;
  max-width: 46ch;
}
.ukbs-contact-copy a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.ukbs-contact-form {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.ukbs-form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ukbs-form-field label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  color: var(--charcoal);
}
.ukbs-form-field input,
.ukbs-form-field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: var(--hit-min);
}
.ukbs-form-field textarea { min-height: 100px; resize: vertical; }
.ukbs-form-submit { margin-top: var(--space-2); }

@media (max-width: 900px) {
  .ukbs-contact-grid { grid-template-columns: 1fr; }
}

/* --- Footer (Section 9, charcoal) --- */
.ukbs-footer {
  background: var(--charcoal);
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}
.ukbs-footer-brand img { margin-bottom: var(--space-4); }
.ukbs-footer-name {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
  color: var(--cream);
  margin: 0 0 var(--space-2);
}
.ukbs-footer-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(246, 241, 232, 0.75);
  margin: 0 0 var(--space-4);
  max-width: 40ch;
}
.ukbs-footer-links { font-family: var(--font-body); font-size: var(--text-sm); margin: 0; }
.ukbs-footer-links a { color: var(--aqua); }
.ukbs-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--charcoal-line);
}
.ukbs-footer-nav a { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--cream); }
.ukbs-footer-legal-nav { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
.ukbs-footer-legal-nav a { font-family: var(--font-body); font-size: var(--text-xs); color: rgba(246, 241, 232, 0.55); }
.ukbs-footer-compliance {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  color: rgba(246, 241, 232, 0.55);
  margin-top: var(--space-6);
  max-width: 70ch;
}