/* ================================================================
   SERVICE PARENT — PREVIEW STYLES
   Figma: node 1474:5302 (desktop) · 1700:3554 (mobile)
   Depends on: ../../style.css (design tokens)
   ================================================================ */


/* ── S1 Hero Banner ─────────────────────────────────────────────── */

/* Section wrapper: 20px top · 40px sides · flush bottom */
.sp-hero {
  padding-top: 20px;
  padding-bottom: 0px;
}

/* Rounded gradient card
   Two-layer background:
     1. Dark base  rgba(6,15,32,0.89)            — Rectangle 10
     2. Colour glow via ::before (blurred, 35%)  — Rectangle 11   */
.sp-hero__card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(6, 15, 32, 0.89);
  min-height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
  background-size: cover;
  background-position: center;
  padding: 60px 80px 120px;
}

/* Blurred colour-glow overlay (Rectangle 11 in Figma)
   Extended with negative inset to hide blur fringe at card edges. */
.sp-hero__card::before {
  content: '';
  position: absolute;
  inset: -48px;
  z-index: 0;
  background: linear-gradient(0deg, rgba(7, 29, 73, 0.45) 0%, rgba(7, 29, 73, 0.45) 100%);
}

/* Inner content: eyebrow pill → H1, centred */
.sp-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 800px;
}

/* Eyebrow pill — sage green
   Mirrors hp-pill + hp-pill--sage from homepage.css / services.css.
   Defined here since those template stylesheets aren't loaded in
   this standalone preview. Tokens from style.css used throughout. */
.sp-hero__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--service-accent, #b3cb92);
  color: var(--color-primary, #071d49);
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  text-transform: uppercase;
  white-space: normal;
}

/* H1 heading — Playfair Display SemiBold, white */
.sp-hero__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h1, 54px);
  font-weight: var(--fw-h1, 600);
  line-height: var(--lh-h1, 1.16);
  letter-spacing: var(--ls-h1, 0.02em);
  color: #fff;
  margin: 0;
}


/* ── S2 First Fold ──────────────────────────────────────────────── */

/* Section wrapper: 80px sides · 40px bottom · overlaps hero by 80px */
.sp-fold {
  padding: 0 80px var(--site-py-flush);
  margin-top: -80px;
  position: relative;
  z-index: 1;
}

/* Rounded #e8edf6 card: flex row, inner padding 64px, capped at 1440px */
.sp-fold__card {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-stroke, #e8edf6);
  border-radius: 32px;
  padding: 64px;
  display: flex;
  gap: 32px;
  align-items: stretch;
}

/* ── Left column ────────── */
.sp-fold__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}

/* Eyebrow pill — reuses same spec as sp-hero__pill */
.sp-fold__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--service-accent, #b3cb92);
  color: var(--color-primary, #071d49);
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  text-transform: uppercase;
  white-space: normal;
  align-self: flex-start;
}

/* H2 heading — Playfair SemiBold, navy */
.sp-fold__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.10);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-primary, #071d49);
  margin: 0;
}

/* Body copy — Rubik Light 14px */
.sp-fold__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
}

.sp-fold__body p { margin: 0; }
.sp-fold__body p + p { margin-top: 1em; }

/* CTA button — solid navy pill */
.sp-fold__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-primary, #071d49);
  color: #fff;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: var(--lh-action, 1.00);
  letter-spacing: var(--ls-action, -0.01em);
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}

.sp-fold__cta:hover { opacity: 0.85; }

/* ── Right column ───────── */
.sp-fold__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Grid variant — 4 equal cards, no photos (ACF toggle: sp_fold_layout_grid) */
.sp-fold__right--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Each row: feature card + photo side by side */
.sp-fold__row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex: 1;
}

/* White feature card — fixed 292px, rounded */
.sp-fold__feature-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}

/* Icon container */
.sp-fold__icon-container {
    padding: 10px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-fold__icon {
    width: 32px;
    height: 32px;
    display: block;
    color: var(--service-accent);
}

/* Card heading — Playfair Display Bold 18px */
.sp-fold__card-heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 24px;
  font-weight: 700;
  line-height: var(--lh-h5, 1.10);
  letter-spacing: 0.03em;
  color: var(--color-primary, #071d49);
  margin: 0;
}

/* Card body — Rubik Light 14px */
.sp-fold__card-body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* Photo: fills remaining space in its row, covers with crop */
.sp-fold__photo {
  flex: 1;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}


/* ── S3 Services Grid ───────────────────────────────────────────── */
/* Figma: node 1474:5345                                             */

.sp-services {
  padding-top:    var(--site-py-flush); /* 40px desktop */
  padding-bottom: var(--site-py);       /* 80px desktop */
}

.sp-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 53px;
}

.sp-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.sp-services__eyebrow-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sp-services__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--service-accent, #b3cb92);
  color: var(--color-text, #1e153d);
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  text-transform: uppercase;
  white-space: nowrap;
}

.sp-services__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.10);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text, #1e153d);
  margin: 0;
  text-align: center;
}

.sp-services__intro {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  text-align: center;
  max-width: 598px;
  margin: 0;
}

.sp-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}



.sp-services__card {
  background: var(--color-accent, #fff);
  border-radius: 16px;
  box-shadow: var(--shadow-2, 0 0 28px rgba(0,0,0,0.10));
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  justify-content: space-between;
}

.sp-services__card-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-services__card-title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h4, 32px);
  font-weight: var(--fw-h4, 600);
  line-height: var(--lh-h4, 1.10);
  letter-spacing: var(--ls-h4, 0.03em);
  color: var(--color-text, #1e153d);
  margin: 0;
  width: 100%;
}

.sp-services__card-desc {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
  width: 100%;
}

.sp-services__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: var(--lh-action, 1.00);
  letter-spacing: var(--ls-action, -0.01em);
  color: var(--color-text, #1e153d);
  text-decoration: none;
  width: 100%;
  transition: opacity 0.2s ease;
}

.sp-services__card-link:hover { opacity: 0.65; }

.sp-services__arrow { flex-shrink: 0; }


/* ── S4 Why Support Matters ─────────────────────────────────────── */
/* Figma: node 1474:5309 (desktop) · 1700:3632 (mobile)
   Two sub-rows sharing the same #e8edf6 background as the fold above.
   Top  — full-bleed left photo · text col right
   Bottom — three reason cards in a row                              */

/* Section: no padding — sub-rows own their own spacing */
.sp-why {
  background: var(--color-stroke, #e8edf6);
}

/* ── Top sub-row ───────── */
/* flex row, photo bleeds to left viewport edge, text col padded */
.sp-why__top {
  display: flex;
  align-items: stretch;
  padding: var(--site-py) 0 var(--site-py-flush);
}

/* Left: photo fills its half edge-to-edge */
.sp-why__photo-col {
  flex: 0.5;
  position: relative;
  min-height: 400px; /* holds height when content is short */
  aspect-ratio: 16 / 9;
}

.sp-why__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 32px 32px 0;
  display: block;
}

/* Right: text column, padded from the left and using --site-px on right */
.sp-why__text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
    gap: 24px;
    max-width: 840px;
    justify-content: center;
    padding: var(--site-px);
}

/* Pill + heading group */
.sp-why__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Eyebrow pill — sage green, same spec as sp-fold__pill */
.sp-why__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--service-accent, #b3cb92);
  color: var(--color-primary, #071d49);
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-start;
}

/* H2 — Playfair SemiBold 48px (design-specific, between h1 and h2 tokens) */
.sp-why__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* Body — Rubik Light 18px (full body scale on desktop) */
.sp-why__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body, 300);
  line-height: var(--lh-body, 1.40);
  letter-spacing: var(--ls-body, 0.01em);
  color: var(--color-text, #1e153d);
}

.sp-why__body p { margin: 0; }
.sp-why__body p + p { margin-top: 1em; }

/* CTA row */
.sp-why__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Primary CTA — solid navy pill, mirrors sp-fold__cta */
.sp-why__cta--primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-primary, #071d49);
  color: #fff;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: var(--lh-action, 1.00);
  letter-spacing: var(--ls-action, -0.01em);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sp-why__cta--primary img {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.sp-why__cta--primary:hover { opacity: 0.85; }

/* William CTA — teal-bordered pill with bilateral glow (Figma: Component 2/3) */
.sp-why__cta--william {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px; /* 12px - 2px border = flush with primary height */
  border-radius: 999px;
  border: 2px solid var(--color-teal, #4fbebe);
  background: transparent;
  color: #14181f;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    -6px 0 15px 0 rgba(79, 190, 190, 0.5),
     6px 0 15px 0 rgba(77, 78, 185, 0.4);
  transition: opacity 0.2s ease;
}

.sp-why__cta--william img {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
}

.sp-why__cta--william:hover { opacity: 0.75; }

/* ── Bottom sub-row ────── */
/* Three reason cards, horizontal, constrained by --site-px */
.sp-why__bottom {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--site-py-flush) var(--site-px, 118px) var(--site-py);
}

.sp-why__cards {
  display: flex;
  gap: 24px;
}

/* Each card: white, 16px radius, strong shadow, photo + content */
.sp-why__card {
  flex: 1 0 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
}

/* Photo: 4:3 aspect ratio, cropped to fill */
.sp-why__card-img-wrap {
  aspect-ratio: 400 / 300;
  overflow: hidden;
  flex-shrink: 0;
}

.sp-why__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content: Playfair Bold H4 + Rubik Light body */
.sp-why__card-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
  text-align: center;
}

.sp-why__card-heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h4, 24px);
  font-weight: 700;
  line-height: var(--lh-h4, 1.10);
  letter-spacing: 0.03em;
  color: var(--color-text, #1e153d);
  margin: 0;
}

.sp-why__card-text {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
}


/* ── S5 Accreditations ──────────────────────────────────────────── */
/* Figma: node 1518:702 (desktop) · 1700:3632 (mobile)
   White background — distinct from the #e8edf6 sections above.
   Top  — full-bleed left photo (351px) · text col right
   Bottom — three centred credential cards                          */

.sp-accred {
  background: #fff;
  padding-top: var(--site-py-flush);
  padding-bottom: var(--site-py);
}

.service-business .sp-accred,
.service-property .sp-accred {
  padding-bottom: var(--site-py-flush);
}

/* ── Top sub-row ───────── */
.sp-accred__top {
  display: flex;
  align-items: stretch;
}

/* Photo: left half, fixed 351px height, rounded right corners */
.sp-accred__photo-col {
  flex: 0.5;
  min-height: 350px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.sp-accred__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 32px 32px 0;
  display: block;
}

/* Text: right half, site-px left padding, 80px right padding */
.sp-accred__text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  max-width: 840px;
  padding: var(--site-px);
}

.sp-accred__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Eyebrow pill — sage green, same spec throughout */
.sp-accred__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--service-accent, #b3cb92);
  color: var(--color-primary, #071d49);
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-start;
}

/* H2 — Playfair SemiBold, matches --fs-h2 token (44px) */
.sp-accred__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.10);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* Body — Rubik Light 18px */
.sp-accred__body p{
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* CTA — solid navy pill, same as other sections */
.sp-accred__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-primary, #071d49);
  color: #fff;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: var(--lh-action, 1.00);
  letter-spacing: var(--ls-action, -0.01em);
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}

.sp-accred__cta img { width: 8px; height: 8px; flex-shrink: 0; }
.sp-accred__cta:hover { opacity: 0.85; }

/* ── Bottom sub-row ────── */
.sp-accred__bottom {
  padding-top: var(--site-py);
}

.sp-accred__cards {
  display: flex;
  gap: 24px;
}

/* Card: white, soft shadow, centred content */
.sp-accred__card {
  flex: 1 0 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.10);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Icon container — plain (card 2) or sage-green badge circle (cards 1 & 3) */
.sp-accred__icon-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--service-accent, #b3cb92);
  border-radius: 50%;
}

.sp-accred__icon-wrap--badge {
  border-radius: 999px;
  background: var(--service-accent, #b3cb92);
}

/* Logo mode: image fills wrap edge-to-edge, no coloured background */
.sp-accred__icon-wrap--logo {
  width: 100%;
  height: 175px;
  background: transparent;
  border-radius: 0;
}

.sp-accred__icon-wrap--logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-accred__icon {
  width: 32px;
  height: 32px;
  display: block;
  color: var(--color-primary);
}

/* Card logo mode: remove shadow, lighter border */
.sp-accred__card--logo {
  box-shadow: none;
  border: 1px solid var(--color-stroke, #e8edf6);
  padding: 0px;
}

.sp-accred__card--logo .sp-accred__card-content {
    padding: 24px;
}

.sp-accred__card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card heading — Playfair Bold 24px */
.sp-accred__card-heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h4, 24px);
  font-weight: 700;
  line-height: var(--lh-h4, 1.10);
  letter-spacing: 0.03em;
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* Card text — Rubik Light 14px */
.sp-accred__card-text {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
}


/* ── S6 William CTA ─────────────────────────────────────────────── */
/* Figma: node 1474:5459 (desktop) · 1700:3667 (mobile)             */

/* site-band provides 40px horizontal padding; section adds vertical */
.sp-william {
  padding-top:    var(--site-py);        /* 80px desktop */
  padding-bottom: var(--site-py-flush);  /* 40px desktop */
}

/* Rounded photo card */
.sp-william__card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--shadow-2);
  padding: 120px 80px;
}

/* Background layer — absolutely fills the card */
.sp-william__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sp-william__bg img {
  object-fit: cover;
    object-position: 20% 20%;
    width: 100%;
    height: 100%;
}

/* Photo: covers the card, photo subject anchored right */
.sp-william__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Gradient: blue tint + white mask fades left → transparent right,
   revealing the photo on the right half of the card.              */
.sp-william__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(153, 193, 220, 0.70) 9%, rgba(153, 193, 220, 0) 99%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.83) 12.5%, rgba(255, 255, 255, 0) 64%);
}

/* Content column — left-aligned, sits above the bg */
.sp-william__content {
  position: relative;
  z-index: 1;
  max-width: 1204px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sp-william__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 628px; /* constrains heading + body to readable measure */
}

.sp-william__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.10);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

.sp-william__desc {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.40);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

.sp-william__card .gradient-outline-pill.dark-text {
    background: #ffffff8a;
}

/* ── Ask William button ──────────────────────────────────────────── */
/* Three-layer construction:
   1. .sp-william__btn-glow  — blurred teal+indigo box-shadow, 30% opacity
   2. .sp-william__btn-border — solid teal border
   3. .sp-william__btn-inner  — frosted pill with icon + label            */

.sp-william__btn {
  position: relative;
  display: inline-flex;
  height: 44px;
  align-self: flex-start;
  text-decoration: none;
}

.sp-william__btn-glow {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--color-teal, #4fbebe);
  opacity: 0.3;
  box-shadow:
    -6px 0 15px var(--color-teal, #4fbebe),
     6px 0 15px #4d4eb9;
}

.sp-william__btn-border {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--color-teal, #4fbebe);
}

.sp-william__btn-inner {
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  white-space: nowrap;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: var(--lh-action, 1);
  letter-spacing: var(--ls-action, -0.01em);
  color: var(--color-text, #1e153d);
}

.sp-william__btn-icon { flex-shrink: 0; }

.sp-william__btn:hover .sp-william__btn-inner { background: rgba(255, 255, 255, 0.95); }
.sp-william__btn:hover .sp-william__btn-glow  { opacity: 0.5; }


/* ── S7 FAQ Accordion ───────────────────────────────────────────── */
/* Figma: node 1474:5540                                             */

.sp-faq {
  background: var(--color-stroke, #e8edf6);
  padding-top:    var(--site-py);
  padding-bottom: var(--site-py-flush);
}

/* Business theme: FAQ sits between two white sections (Accreditations
   above, Insights below) so the background switches to white and the
   item borders step down to the lighter stroke colour. Top padding is
   also reduced from 80px to 40px since there is no colour-change break
   above to justify the larger gap. */
body.service-business .sp-faq, body.service-property .sp-faq {
  background: #fff;
  padding-top: var(--site-py-flush);
}

body.service-business .sp-faq__item, body.service-property .sp-faq__item {
  border-color: var(--color-stroke, #e8edf6);
}

body.service-business .sp-faq__item.is-open, body.service-property .sp-faq__item.is-open {
  background: var(--color-stroke, #e8edf6);
  border-color: var(--color-stroke, #e8edf6);
}

body.service-personal .sp-faq--no-team {
  padding-bottom: var(--site-py);
}

body.service-personal .sp-fold--no-services {
  padding-bottom: var(--site-py);
}

.sp-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--site-py-flush);
}

/* ── Header ── */
.sp-faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 778px;
  text-align: center;
}

.sp-faq__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--service-accent, #b3cb92);
  color: var(--color-primary, #071d49);
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  text-transform: uppercase;
  white-space: nowrap;
}

.sp-faq__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-primary, #071d49);
  margin: 0;
}

/* ── Accordion list ── */
.sp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Each item — closed state: bordered row */
.sp-faq__item {
  border: 2px solid #ccd6e8;
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Open state: filled background, border colour blends in */
.sp-faq__item.is-open {
  background: #ccd6e8;
  border-color: #ccd6e8;
}

/* Trigger button: full-width, flex row, question + icon */
.sp-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 24px 40px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.sp-faq__question {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-h5);
  font-weight: var(--fw-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  color: var(--color-text, #1e153d);
}

/* Icon: rotates 45deg when item is open, turning + into x */
.sp-faq__icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.sp-faq__item.is-open .sp-faq__icon {
  transform: rotate(45deg);
}

/* Panel: collapsed by default, animates open via grid trick */
.sp-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.sp-faq__item.is-open .sp-faq__panel {
  grid-template-rows: 1fr;
}

/* Answer paragraph — overflow:hidden required for grid animation.
   min-height:0 overrides the grid item's default min-height:auto,
   which would otherwise use the padding as a minimum row size and
   prevent the 0fr track from fully collapsing.                    */
.sp-faq__answer {
  overflow: hidden;
  min-height: 0;
}
.sp-faq__answer-inner {
  padding: 0 40px 24px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body, 300);
  line-height: var(--lh-body, 1.40);
  color: var(--color-text, #1e153d);
  margin: 0;
}


/* ── S8 Team Banner ─────────────────────────────────────────────── */
/* Figma: node 1518:577 (desktop) · 1700:3739 (mobile)
   Outer band: #e8edf6 · 40px padding.
   Inner card: frosted photo background (white overlay),
   text+CTA left, photos absolutely positioned right.
   Photo coords derived from Figma (right-based for responsive use). */

.sp-team {
  background: var(--color-stroke, #e8edf6);
  padding-top: var(--site-py-flush);
  padding-bottom: var(--site-py);
}

.service-business .sp-team {
  background: #fff;
  padding-bottom: var(--site-py-flush);
}

/* Card: rounded, shadow, overflow hidden to clip photos */
.sp-team__card {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: var(--shadow-2);
  padding: 100px 80px;
  /* min-height ensures the taller portrait (415px - 24px bleed = 391px) is visible */
  min-height: 392px;
}

/* ── Background layers ── */
.sp-team__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sp-team__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Frosted overlay: 60% white + subtle blue tint (matches Figma two-layer gradient) */
.sp-team__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(184, 212, 230, 0.15), rgba(184, 212, 230, 0.15)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.60));
}

/* ── Content (left side) ── */
.sp-team__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--site-px);
}

/* Text block: max 608px to prevent overlap with photos */
.sp-team__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 608px;
}

/* H2 — Playfair SemiBold, matches --fs-h2 token */
.sp-team__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.10);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* Body — Rubik Light 18px (full body scale on desktop) */
.sp-team__body p{
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body, 300);
  line-height: var(--lh-body, 1.40);
  letter-spacing: var(--ls-body, 0.01em);
  color: var(--color-text, #1e153d);
  margin: 0;
}

/* CTA — solid navy pill, consistent with other sections */
.sp-team__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-primary, #071d49);
  color: #fff;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: var(--lh-action, 1.00);
  letter-spacing: var(--ls-action, -0.01em);
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}

.sp-team__cta img { width: 8px; height: 8px; flex-shrink: 0; }
.sp-team__cta:hover { opacity: 0.85; }

/* ── Portrait photos ── */
/* Both absolutely positioned; right values derived from Figma:
   Card ~1360px wide; Iain right edge at 1105px → right: 255px;
   Lucy right edge at 1321px → right: 39px. Lucy sits in front.  */
.sp-team__photo {
  position: absolute;
    object-fit: contain;
    pointer-events: none;
    width: auto;
    height: auto;
    right: -100px;
    top: -45px;
    z-index: -1;
}


/* ================================================================
   MEDIA QUERIES
   ================================================================ */

/* ── Laptop ≤ 1366px ────────────────────────────────────────────── */
@media (max-width: 1366px) {
 .sp-accred__photo-col {
  flex: 1;
  }

  .sp-why__photo-col {
    flex: 1;
}
}
/* ── Tablet ≤ 1023px ────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* ── S1 Hero ── */
  .sp-hero { padding-top: 0;}
  .sp-hero__card { border-radius: 0; padding: 40px var(--site-px) 80px;}
  .sp-services__grid  { grid-template-columns: repeat(2, 1fr); }

  /* ── S2 First Fold ── */
  .sp-fold {padding: 0; margin-top: -80px;}

  .sp-fold__card {
      border-radius: 32px 32px 0 0;
      padding: var(--site-py) var(--site-px);
      flex-direction: column;
      gap: 46px;
    }

    .sp-fold__feature-card {
      justify-content: center;
    }

  /* ── S3 Services Grid ── */
  .sp-services {padding-top: var(--site-py);}


/* ── S4 Why Support Matters ── */
.sp-why {background: #fff;}
.sp-why__top {padding: 0; flex-direction: column;}
.sp-why__photo {border-radius: 0 50px 0 0;}
.sp-why__text-col {padding: var(--site-py) var(--site-px) var(--site-py-flush); background: var(--color-stroke); max-width: 100%;}
.sp-why__bottom {background: var(--color-stroke);}

/* ── William CTA ── */
.sp-william {padding: var(--site-py) var(--site-px);}
.sp-william__card {padding: var(--site-py) var(--site-px);box-shadow: none;}
.sp-william__bg-overlay {background: linear-gradient(90deg, rgba(153, 193, 220, 0.70) 9%, rgba(153, 193, 220, 0) 99%), linear-gradient(90deg, rgba(255, 255, 255, 0.83) 12.5%, rgb(255 255 255 / 50%) 64%);}
.sp-william__text {max-width: 100%; text-align: center; align-items: center;}

/* ── S5 Accreditations ── */
.sp-accred {padding-top: 0;}
.sp-accred__top {flex-direction: column;}
.sp-accred__photo {border-radius: 0 50px 0 0;}
.sp-accred__text-col {padding: var(--site-py) var(--site-px) var(--site-py-flush);}

.sp-accred__bottom {padding-top: var(--site-py-flush);}

/* ── S7 FAQ ── */
.sp-faq {
    padding-bottom: var(--site-py);
}

/* ── S8 Team Banner ── */
.sp-team {padding: 0;}
.sp-team__card {
    border-radius: 0px;
    box-shadow: none;
    padding: var(--site-py) var(--site-px);
    min-height: 0;
}

.sp-insights__header-left{
  padding-right: var(--site-px);
}

.sp-insights .site-container {
    padding-right: 0px;
}

.sp-team__bg-img {object-position: 0%;}
.sp-team__content {padding: 0; text-align: center;}
.sp-team__text {max-width: 100%;}
.sp-team__cta {align-self: center;}

.sp-team__photo {
    position: relative;
    top: unset;
    width: auto;
    height: auto;
    right: 0;
}

.sp-why__photo-col {
  min-height: 280px;
  flex: none;      
  width: 100%;   
}

section.sp-cta.site-band.site-section {
    padding: 0;
}
}

@media (max-width:896px){
  /* ── S4 Why Support Matters ── */
  .sp-why__cards { flex-direction: column;}
  .sp-why__card {flex: 1;}
  .sp-why__card-img-wrap{ max-height: 300px;}
}


/* ── Mobile ≤ 767px ─────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* ── S1 Hero ── */
  /* Figma node 1700:3554: gradient fills section edge-to-edge,
     no rounded card, tighter spacing, smaller type scale.         */

  .sp-hero__card {
    border-radius: 0;
    min-height: 0;
  }

  .sp-hero__inner {
    gap: 8px;
  }


  /* ── S2 First Fold ── */
  /* Figma node 1700:3559: section fills full width, card rounded top,
     columns stack, photos appear above their card content.         */

  .sp-fold {margin-top: -40px;}

  .sp-fold__icon-container {
    width: 32px;
    height: 32px;
    padding: 0;
}

.sp-fold__icon {
  width: 16px;
  height: 16px;
  
}

  .sp-fold__left { padding: 0; }

  /* Grid variant: single column on mobile */
  .sp-fold__right--grid { grid-template-columns: 1fr; }
  .sp-fold__right--grid .sp-fold__feature-card {border-radius: 24px; gap: 0;}

  .sp-fold__cta {
    width: 100%;
    justify-content: center;
    align-self: stretch;
  }

  .sp-fold__row {
    flex-direction: column;
    gap: 0;
  }

  /* Icon sits inline with the heading; body copy spans full width below */
  .sp-fold__feature-card {
    width: auto;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas:
      "icon heading"
      "body body";
    align-items: center;
    column-gap: 13px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.10);
    gap: 0;
  }

  .sp-fold__feature-card .sp-fold__icon-container { grid-area: icon; }
  .sp-fold__feature-card .sp-fold__card-heading   { grid-area: heading; }
  .sp-fold__feature-card .sp-fold__card-body      { grid-area: body; margin-top: 13px; }

  .sp-fold__photo {
    height: 180px;
    flex: none;
    border-radius: 16px 16px 0 0;
    order: -1;
    width: 100%;
  }


  /* ── S3 Services Grid ── */

  .sp-services__inner { gap: 32px; }
  .sp-services__grid  { grid-template-columns: 1fr; }


  /* ── S4 Why Support Matters ── */
  /* Figma node 1700:3632: photo stacks above content, CTAs stack
     vertically, cards stack in a single column.                   */

  .sp-why__top {
    flex-direction: column;
    padding: 0;
  }

  .sp-why__photo-col {
    height: 280px;
    min-height: 0;
    flex: none;
  }

  .sp-why__photo { border-radius: 0 50px 0 0; }

  .sp-why__ctas {
    flex-direction: column;
    align-items: center;
  }

  .sp-why__cta--primary,
  .sp-why__cta--william {
    width: 100%;
    justify-content: center;
  }

  .sp-why__bottom { padding: 0 20px 48px; }

  .sp-why__cards {
    flex-direction: column;
    gap: 24px;
  }

  .sp-why__card-img-wrap {
    aspect-ratio: unset;
    height: 180px;
  }

  .sp-why__card-content {
    padding: 24px;
    gap: 12px;
  }


  /* ── S5 Accreditations ── */

  .sp-accred { padding: 0 0 48px; }

  .sp-accred__top { flex-direction: column; }

  .sp-accred__photo-col {
    height: 280px;
    min-height: 0;
    flex: none;
  }

  .sp-accred__photo { border-radius: 0 50px 0 0; }


  .sp-accred__cta {
    width: 100%;
    justify-content: center;
    align-self: stretch;
  }

  .sp-accred__cards {
    flex-direction: column;
    gap: 16px;
  }

  /* ── S6 William CTA ── */
  /* Figma node 1700:3667: flat full-width section, content centred,
     denser white gradient covers most of the photo.               */

  .sp-william__card {
    box-shadow: none;
    padding: 60px 20px;
  }

  .sp-william__bg-overlay {
    background:
      linear-gradient(rgba(153, 193, 220, 0.26), rgba(153, 193, 220, 0.26)),
      linear-gradient(180.5deg, rgba(255, 255, 255, 0.83) 45%, rgba(255, 255, 255, 0) 117.5%);
  }

  .sp-william__bg img { object-position: 75% 20%;}

  .sp-william__content {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .sp-william__btn { align-self: center; }


  /* ── S7 FAQ ── */

  .sp-faq__heading  { font-size: var(--fs-h2-mob, 32px); }
  .sp-faq__trigger  { padding: 20px 24px; gap: 16px; }
  .sp-faq__answer-inner { padding: 0 24px 20px; }
  .sp-faq__icon     { width: 24px; height: 24px; }


  /* ── S8 Team Banner ── */
  /* Figma node 1700:3739: flat section (no card border-radius),
     content centred, overlay fades top→transparent so photos
     peek in from the bottom of the section.                       */

  .sp-team { padding: 0; }

  .sp-team__bg-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.83) 45%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(90deg, rgba(153, 193, 220, 0.26), rgba(153, 193, 220, 0.26));
  }

  .sp-team__content {
    align-items: center;
    text-align: center;
  }

  .sp-team__text { max-width: none; }

  .sp-team__cta { align-self: auto; }
}


/* ================================================================
   S8 — INSIGHTS CAROUSEL
   Figma: node 1518:444
   ================================================================ */

/* ── Section ──────────────────────────────────────────────────── */

.sp-insights { background: #fff; }

body.service-business .sp-insights,
body.service-property .sp-insights {
  padding-top: var(--site-py-flush);
}

/* ── Header row ───────────────────────────────────────────────── */

.sp-insights__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.sp-insights__header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Eyebrow pill */
.sp-insights__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--service-accent, #b3cb92);
  border-radius: 99px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: var(--lh-overhead, 0.96);
  letter-spacing: var(--ls-overhead, 0.03em);
  color: var(--color-primary, #071D49);
  text-transform: uppercase;
  width: fit-content;
}

/* Section heading */
.sp-insights__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.10);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text, #1E153D);
  margin: 0;
}

/* ── Prev / Next nav buttons ──────────────────────────────────── */

.sp-insights__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.sp-insights__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary, #071D49);
  transition: opacity 0.2s ease;
}

.sp-insights__nav-btn:hover { opacity: 0.5; }

.sp-insights__nav-btn.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── Carousel wrapper overrides ───────────────────────────────── */

/* Let card shadows breathe outside the wrapper */
.sp-insights .insights-carousel-wrapper {
  overflow: visible;
}

/* Swiper still clips the slide track */
.sp-insights .insights-carousel-swiper {
  overflow: hidden;
}

/* Remove the max-height that would clip tall cards */
.sp-insights .insights-carousel-swiper-wrapper {
  max-height: none;
}

/* ── Card style overrides to match Figma ──────────────────────── */

/* 16px radius (Figma) vs existing 12px */
.sp-insights .insights-card {
  border-radius: 16px;
 
}

/* Playfair Display Bold 24px for the article title */
.sp-insights h4.insights-title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h4, 24px);
  font-weight: 700;
  line-height: var(--lh-h4, 1.10);
  letter-spacing: var(--ls-h4, 0.03em);
  color: var(--color-text, #1E153D);
}

/* Rubik Medium for department pills */
.sp-insights .insights-department-pill {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-weight: 500;
}

/* Hide bullet pagination — nav arrows take its role */
.sp-insights .insights-carousel-pagination {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 767px) {
  .sp-insights__header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Hide custom arrows — swipe gesture takes over */
  .sp-insights__nav { display: none; }

  /* Restore bullet pagination on mobile */
  .sp-insights .insights-carousel-pagination {
    display: flex;
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 24px;
    bottom: auto;
    left: auto;
  }

  .sp-why button.ask-william-btn, .sp-why .gradient-outline-pill {
    width: 100%;
}
}


/* ================================================================
   S9 — GET IN TOUCH CTA BANNER
   Figma: node 1474:5124
   ================================================================ */

/* ── Section outer ─────────────────────────────────────────────── */

.sp-cta { background: var(--color-stroke, #E8EDF6); }

/* ── Inner card ────────────────────────────────────────────────── */

.sp-cta__card {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.10);
}

/* ── Background layers ─────────────────────────────────────────── */

.sp-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Solid dark base */
.sp-cta__bg-dark {
  position: absolute;
  inset: 0;
  background: #060f20;
  opacity: 0.89;
}

/* Blurred teal → navy gradient overlay */
.sp-cta__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    129deg,
    var(--color-teal, #4fbebe) 24%,
    var(--color-primary, #071D49) 70%,
    var(--color-text, #1E153D) 94%
  );
  opacity: 0.35;
  filter: blur(37px);
}

/* ── Content ───────────────────────────────────────────────────── */

.sp-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  width: 100%;
}

/* ── Eyebrow pill ──────────────────────────────────────────────── */

.sp-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--color-teal, #4FBEBE);
  border-radius: 99px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: var(--fw-overhead, 500);
  line-height: 1.1;
  letter-spacing: var(--ls-overhead, 0.03em);
  color: var(--color-text, #1E153D);
  text-transform: uppercase;
}

/* ── Text group ────────────────────────────────────────────────── */

.sp-cta__text-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  max-width: 808px;
}

.sp-cta__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: #fff;
  margin: 0;
}

.sp-cta__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--ls-body-s, 0.01em);
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
  max-width: 628px;
}

/* ── Action row ────────────────────────────────────────────────── */

.sp-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* "Book An Appointment" light pill */
.sp-cta__btn-appt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-stroke, #E8EDF6);
  border-radius: 999px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text, #1E153D);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sp-cta__btn-appt:hover { opacity: 0.8; }
.sp-cta__btn-appt svg  { flex-shrink: 0; }

/* "Ask William" — dark card variant (transparent inner) */
.sp-cta__btn-william {
  position: relative;
  width: 161px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.sp-cta__william-glow {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--color-teal, #4FBEBE);
  opacity: 0.3;
  box-shadow:
    -6px 0 15px var(--color-teal, #4FBEBE),
     6px 0 15px #4d4eb9;
}

.sp-cta__william-border {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--color-teal, #4FBEBE);
}

/* Transparent inner so dark card bleeds through */
.sp-cta__william-inner {
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.sp-cta__william-icon {
  flex-shrink: 0;
  width: 18px;
  height: 16px;
}

/* ── Responsive — tablet ≤1024px ───────────────────────────────── */

@media (max-width: 1024px) {
  .sp-cta__card    { padding: 60px 48px; border-radius: 0;}
}

/* ── Responsive — mobile ≤767px ────────────────────────────────── */

@media (max-width: 767px) {
  .sp-cta__card {
    padding: 48px 24px;
    gap: 24px;
  }

  .sp-cta__text-group { gap: 16px; }

  .sp-cta__actions {
    flex-direction: column;
    width: 70%;
    gap: 12px;
  }

  .sp-cta__actions button.ask-william-btn,
  .sp-cta__actions .gradient-outline-pill.white-text{
    width: 100%;
  }

  .sp-cta__btn-appt {
    width: 100%;
    justify-content: center;
  }

  .sp-cta__btn-william {
    width: 100%;
  }

  .sp-cta__william-inner {
    justify-content: center;
  }
}