.bp-preview {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: #1c1c1c;
  color: #f5f5f2;
  font-size: 0.875rem;

  a {
    color: inherit;
    text-decoration: underline;
  }
}

.bp-site {
  color: var(--d-text, var(--site-primary, #16324f));
  background: var(--site-bg, #f6f3ee);
  font-size: var(--d-body, 1rem);
  line-height: var(--d-line-height, 1.5);
}

.bp-site--serif,
.bp-site--serif h1,
.bp-site--serif h2,
.bp-site--serif h3 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
}

/* Headings font, for things that look like headings (stats, prices). */
.bp-site { --site-heading-font: inherit; }
.bp-site--serif,
.bp-site--mixed { --site-heading-font: "Iowan Old Style", Palatino, Georgia, serif; }
.bp-site--editorial { --site-heading-font: "Newsreader", "Iowan Old Style", Georgia, serif; }
.bp-site--classic { --site-heading-font: "Fraunces", "Iowan Old Style", Georgia, serif; }

/* Fraunces headings, Inter text; Arabic in IBM Plex Sans Arabic. */
.bp-site--classic {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;

  h1, h2 {
    font-family: var(--site-heading-font);
    font-weight: 400;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 96;
  }

  h3 { font-family: var(--site-heading-font); font-weight: 500; letter-spacing: -0.01em; }
  .bp-em { font-style: italic; }
  [lang="ar"] { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
}

/* Doubled class: wins over the general Arabic fonts further down. */
[dir="rtl"] .bp-site.bp-site--classic,
[dir="rtl"] .bp-site.bp-site--classic h1,
[dir="rtl"] .bp-site.bp-site--classic h2,
[dir="rtl"] .bp-site.bp-site--classic h3 { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }

/* Like heedlight.com: Newsreader headings, Geist text and card titles. */
.bp-site--editorial {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;

  h1, h2 {
    font-family: var(--site-heading-font);
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  h3 { font-family: inherit; font-weight: 600; letter-spacing: -0.01em; }
  .bp-tabs__panel h3, .bp-cta h2 { font-family: var(--site-heading-font); font-weight: 500; }
}

.bp-site--editorial,
.bp-site--classic,
.bp-site--modern {
  .bp-section__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; }
  .bp-feature h3, .bp-step h3, .bp-person h3, .bp-plan h3 { font-size: 1.05rem; }
}

.bp-site--modern {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;

  h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.035em;
  }
}

.bp-site--mixed h1,
.bp-site--mixed h2,
.bp-site--mixed h3,
.bp-site--mixed .bp-hero h1 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.bp-pagehead,
.bp-section,
.bp-hero__overlay,
.bp-quote,
.bp-cta,
.bp-form {
  padding-inline: var(--d-gutter-fluid, 1.5rem);
  padding-block: var(--site-space, 5.5rem);
}

.bp-pagehead {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;

  h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin: 0;
  }

  p {
    margin-top: 1rem;
    color: color-mix(in srgb, var(--site-primary, #16324f) 72%, white);
  }
}

.bp-narrow,
.bp-form {
  max-width: var(--block-width, 42rem);
  margin-inline: auto;
}

.bp-wide {
  max-width: var(--block-width, var(--d-content-width, 72rem));
  margin-inline: auto;
}

.bp-section--muted {
  background: var(--d-soft, color-mix(in srgb, var(--site-primary, #16324f) 5%, var(--site-bg, #f6f3ee)));
}

.bp-section__title,
.bp-form h2,
.bp-prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 1.5rem;
}

.bp-lead,
.bp-prose p,
.bp-card p {
  font-size: 1.05rem;
  line-height: 1.7;
}

.bp-hero {
  /* Shade behind the words, darkest where they sit, so any photo stays readable. */
  --hero-scrim:
    linear-gradient(90deg, rgb(12 22 32 / 0.72) 0%, rgb(12 22 32 / 0.45) 50%, rgb(12 22 32 / 0.08) 85%),
    linear-gradient(180deg, rgb(12 22 32 / 0.1), rgb(12 22 32 / 0.6));
  min-height: 70vh;
  display: grid;
  align-items: end;
  background:
    var(--hero-scrim),
    var(--hero-image, none) center / cover no-repeat,
    var(--site-primary, #16324f);
  color: var(--d-on-dark, #f7f4ef);
}

.bp-hero.bp-align--center { --hero-scrim: linear-gradient(180deg, rgb(12 22 32 / 0.4), rgb(12 22 32 / 0.7)); }
.bp-hero.bp-align--right {
  --hero-scrim:
    linear-gradient(270deg, rgb(12 22 32 / 0.72) 0%, rgb(12 22 32 / 0.45) 50%, rgb(12 22 32 / 0.08) 85%),
    linear-gradient(180deg, rgb(12 22 32 / 0.1), rgb(12 22 32 / 0.6));
}

/* A soft shadow keeps letters crisp where the photo is light or busy. */
.bp-hero .bp-hero__overlay { text-shadow: 0 1px 2px rgb(12 22 32 / 0.35), 0 2px 18px rgb(12 22 32 / 0.35); }
.bp-hero .bp-btn { text-shadow: none; }

.bp-hero__overlay {
  max-width: 52rem;
  padding-bottom: 5rem;

  h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 0.95;
    margin: 0.4rem 0 1.5rem;
    color: var(--d-on-dark, #f7f4ef);
  }
}

.bp-hero__eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0;
}

.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-button-padding, 0.85rem 1.4rem);
  border-radius: var(--site-radius, 6px);
  background: var(--site-button, var(--site-accent, #9a7344));
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  /* Unset (no value given): the text's own size and weight. */
  font-size: var(--d-button-size);
  font-weight: var(--d-button-weight);
}

.bp-btn--light {
  background: transparent;
  color: var(--d-on-dark, #f7f4ef);
  outline: 1px solid rgb(247 244 239 / 0.7);
}

.bp-cards,
.bp-columns {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 800px) {
  .bp-cards {
    grid-template-columns: repeat(3, 1fr);
  }

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

.bp-card,
.bp-column {
  padding: 1.5rem;
  background: var(--d-card, #fff);
  border-radius: var(--d-card-radius, 0);
  border-top: 2px solid var(--site-accent, #9a7344);

  h3 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
  }

  p {
    margin: 0 0 1rem;
  }
}

.bp-column ul,
.bp-list {
  margin: 0;
  padding-inline-start: 1.1rem;

  li + li {
    margin-top: 0.45rem;
  }
}

.bp-text-link,
.bp-phone {
  color: var(--site-accent, #9a7344);
  text-decoration: none;
}

.bp-quote {
  min-height: 22rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--d-on-dark, #f7f4ef);
  background:
    linear-gradient(180deg, rgb(12 22 32 / 0.45), rgb(12 22 32 / 0.72)),
    var(--quote-image, none) center / cover no-repeat,
    var(--site-primary, #16324f);

  blockquote {
    max-width: 44rem;
    margin: 0;
  }

  p {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.35;
    margin: 0;
  }

  footer {
    margin-top: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
  }
}

.bp-split {
  max-width: var(--block-width, var(--d-content-width, 72rem));
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .bp-split {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.bp-portrait {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--d-image-radius, 0);
}

.bp-name {
  font-weight: 600;
  margin-top: 0;
}

.bp-cta {
  text-align: center;
  background: var(--site-primary, #16324f);
  color: var(--d-on-dark, #f7f4ef);

  h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .bp-phone {
    color: inherit;
    font-size: 1.5rem;
  }

  .bp-lead {
    max-width: 38rem;
    margin: 0.5rem auto 1.5rem;
  }
}

.bp-kicker {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.bp-fields {
  display: grid;
  gap: 1rem;

  label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }

  input,
  select,
  textarea {
    width: 100%;
    border: 1px solid var(--d-line, color-mix(in srgb, var(--site-primary, #16324f) 20%, white));
    background: var(--d-input-fill, #fff);
    padding: 0.7rem 0.8rem;
    border-radius: var(--d-input-radius, var(--site-box-radius, 6px));
    font: inherit;
    color: inherit;
  }
}

.bp-header--centered {
  @media (min-width: 1024px) {
    flex-direction: column;
    align-items: center;
    padding-top: 1.25rem;

    .nav-container {
      margin: 0;
      justify-content: center;
    }
  }
}

.bp-header--split .bp-header__phone {
  display: none;
  color: var(--site-primary, #16324f);
  text-decoration: none;
  font-weight: 600;

  @media (min-width: 1024px) {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
  }
}

/* The website's own header button (Site::Chrome) and Client portal beside it as an outline. */
.bp-header .bp-header__button {
  background: var(--site-button, var(--site-accent, #9a7344));
  border-color: var(--site-button, var(--site-accent, #9a7344));
  color: #fff;
}

.bp-header .bp-header__portal {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--site-primary, #16324f);
}

.bp-card address {
  font-style: normal;
}

/* A practice with no logo yet shows its name in the header instead. */
.bp-header__name {
  display: inline-block;
  color: var(--site-primary, #16324f);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 18rem;
}


/* ---- Website builder: shared pieces ---- */

/* *words* in a heading (PublicSiteHelper#site_text). */
.bp-em {
  font-style: italic;
  color: var(--site-accent, #9a7344);
}

.bp-eyebrow {
  margin: 0 0 0.9rem;
  color: var(--site-accent, #9a7344);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bp-head {
  max-width: 46rem;
  margin-bottom: 2.5rem;

  .bp-section__title { margin: 0; }
  .bp-lead { margin: 1rem 0 0; opacity: 0.82; }
}

.bp-section--tight {
  padding-block: calc(var(--site-space, 5.5rem) * 0.6);
}

.bp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.bp-btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}

.bp-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;

  li { display: inline-flex; align-items: center; gap: 0.45rem; }
  svg { flex: none; color: var(--site-accent, #9a7344); }
}

.bp-ticks--stack {
  flex-direction: column;
  margin: 1.25rem 0 1.5rem;
}

/* Backgrounds a block can choose (Site::BlockRegistry::STYLES). */
.bp-bg--plain { background: var(--site-bg, #f6f3ee); color: var(--site-primary, #16324f); }
.bp-bg--soft { background: var(--d-soft, color-mix(in srgb, var(--site-primary, #16324f) 5%, var(--site-bg, #f6f3ee))); color: var(--site-primary, #16324f); }
.bp-bg--glow {
  background:
    radial-gradient(60rem 32rem at 88% -10%, color-mix(in srgb, var(--site-accent, #9a7344) 18%, transparent), transparent 70%),
    var(--site-bg, #f6f3ee);
  color: var(--site-primary, #16324f);
}
.bp-bg--brand { background: var(--site-primary, #16324f); color: var(--d-on-dark, #f7f4ef); }
.bp-bg--dark {
  background:
    radial-gradient(50rem 26rem at 70% -12%, color-mix(in srgb, var(--site-accent, #9a7344) 22%, transparent), transparent 70%),
    var(--d-dark, color-mix(in srgb, var(--site-primary, #16324f) 45%, #05080c));
  color: var(--d-on-dark, #f7f4ef);
}

/* On dark and brand backgrounds, cards are see-through. */
.bp-bg--dark,
.bp-bg--brand {
  .bp-feature, .bp-step, .bp-card, .bp-column, .bp-testimonial {
    color: inherit;
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.12);
  }

  .bp-feature__icon { color: #fff; background: rgb(255 255 255 / 0.1); }
  .bp-step__number { color: var(--site-primary, #16324f); background: var(--d-on-dark, #f7f4ef); }
  .bp-btn--ghost { color: inherit; }
  .bp-btn:not(.bp-btn--ghost, .bp-btn--light, .bp-btn--white) { background: var(--site-accent, #9a7344); }
}

.bp-after { margin-top: 2rem; }
.bp-after:empty { display: none; }
.bp-prose .bp-eyebrow { font-size: 0.75rem; line-height: 1.4; }

.bp-bg--brand,
.bp-bg--dark,
.bp-hero {
  .bp-em,
  .bp-eyebrow,
  .bp-ticks svg { color: color-mix(in srgb, var(--site-accent, #9a7344) 65%, white); }
  .bp-section__title, h2 { color: inherit; }
}
/* On photos the emphasis needs to be lighter still. */
.bp-hero .bp-em { color: color-mix(in srgb, var(--site-accent, #9a7344) 45%, white); }

.bp-bg--plain,
.bp-bg--soft,
.bp-bg--glow {
  .bp-btn--light { color: var(--site-primary, #16324f); outline-color: color-mix(in srgb, var(--site-primary, #16324f) 40%, transparent); }
}

/* Cards stay light on any background. */
.bp-card,
.bp-column,
.bp-feature,
.bp-plan,
.bp-testimonial,
.bp-step { color: var(--site-primary, #16324f); }

.bp-space--none { --site-space: 0rem; }
.bp-space--compact { --site-space: 3rem; }
.bp-space--regular { --site-space: 5.5rem; }
.bp-space--roomy { --site-space: 8rem; }

.bp-width--narrow { --block-width: 42rem; }
.bp-width--regular { --block-width: 60rem; }
.bp-width--wide { --block-width: 84rem; }

.bp-align--left { text-align: start; }
.bp-align--center {
  text-align: center;

  .bp-head { margin-inline: auto; }
  .bp-actions, .bp-ticks { justify-content: center; }
}
.bp-align--right {
  text-align: end;

  .bp-head { margin-inline-start: auto; }
  .bp-actions, .bp-ticks { justify-content: flex-end; }
}

.bp-divider { border-top: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent)); }

/* Sections fade in as they scroll into view (site-reveal controller). */
.site-js .bp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.site-js .bp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-js .bp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Hero layouts ---- */

.bp-hero__lede {
  max-width: 36rem;
  margin: 0 0 2rem;
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.92;
}

.bp-hero-split,
.bp-hero-plain {
  padding: var(--d-hero-space-fluid, calc(var(--site-space, 5.5rem) * 1.1)) var(--d-gutter-fluid, 1.5rem) var(--site-space, 5.5rem);

  h1 {
    margin: 0 0 1.4rem;
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 1;
  }

  .bp-hero__eyebrow { color: var(--site-accent, #9a7344); font-weight: 600; margin-bottom: 1rem; }
}

.bp-hero-split__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
  max-width: var(--block-width, var(--d-content-width, 74rem));
  margin-inline: auto;

  @media (min-width: 900px) { grid-template-columns: 1.05fr 0.95fr; }
}

.bp-hero-split__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--d-image-radius, 18px);
  box-shadow: 0 30px 60px -30px rgb(12 22 32 / 0.45);
}

.bp-hero-plain {
  text-align: center;

  .bp-hero__lede { margin-inline: auto; }
  .bp-actions, .bp-ticks { justify-content: center; }
}

.bp-hero-plain__inner {
  max-width: var(--block-width, 52rem);
  margin-inline: auto;
}

/* Align › Left or Right: the words line up with the sections below
   (72rem, like their headings) instead of a centred column. */
.bp-hero-plain.bp-align--left,
.bp-hero-plain.bp-align--right {
  .bp-hero-plain__inner { max-width: var(--block-width, var(--d-content-width, 72rem)); }
  h1 { max-width: 58rem; }
  .bp-hero__lede { max-width: 48rem; }
}

.bp-hero-plain.bp-align--left {
  text-align: start;

  .bp-hero__lede { margin-inline: 0; }
  .bp-actions, .bp-ticks { justify-content: flex-start; }
}

.bp-hero-plain.bp-align--right {
  text-align: end;

  h1, .bp-hero__lede { margin-inline-start: auto; }
  .bp-actions, .bp-ticks { justify-content: flex-end; }
}

/* ---- Picture beside text, picture on the right ---- */

@media (min-width: 900px) {
  .bp-split--reverse { grid-template-columns: 1.2fr 0.8fr; }
  .bp-split--reverse .bp-split__media { order: 2; }
}

.bp-split .bp-actions { margin-top: 1.5rem; }

/* No picture yet: the text on its own, at reading width. */
.bp-split--text { grid-template-columns: 1fr !important; max-width: var(--block-width, 46rem); }

/* ---- Features ---- */

.bp-features {
  display: grid;
  gap: 1.25rem;

  @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 1000px) {
    &.bp-features--3 { grid-template-columns: repeat(3, 1fr); }
    &.bp-features--4 { grid-template-columns: repeat(4, 1fr); }
  }
}

.bp-feature {
  padding: 1.6rem;
  text-align: start;
  background: var(--d-card, #fff);
  border: 1px solid color-mix(in srgb, var(--site-primary, #16324f) 10%, transparent);
  border-radius: var(--d-card-radius, 14px);

  h3 { margin: 0.9rem 0 0.5rem; font-size: 1.2rem; }
  p { margin: 0 0 0.75rem; line-height: 1.6; opacity: 0.8; }
}

.bp-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--site-accent, #9a7344);
  background: color-mix(in srgb, var(--site-accent, #9a7344) 13%, white);
  border-radius: 12px;
}

/* ---- Steps ---- */

.bp-steps {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;

  @media (min-width: 800px) { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

.bp-step {
  padding: 1.6rem;
  text-align: start;
  background: var(--d-card, #fff);
  border-radius: var(--d-card-radius, 14px);

  h3 { margin: 1rem 0 0.4rem; font-size: 1.2rem; }
  p { margin: 0; line-height: 1.6; opacity: 0.8; }
}

.bp-step__number {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  color: #fff;
  font-weight: 600;
  background: var(--site-primary, #16324f);
  border-radius: 999px;
}

/* ---- Stats ---- */

.bp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2rem;
  margin: 0;
}

.bp-stat {
  display: flex;
  flex-direction: column-reverse;
  padding-inline-start: 1.25rem;
  text-align: start;
  border-inline-start: 2px solid var(--site-accent, #9a7344);

  dd { margin: 0; font-family: var(--site-heading-font); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
  dt { margin-top: 0.5rem; opacity: 0.75; }
}

/* ---- FAQ ---- */

.bp-faq { border-top: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent)); text-align: start; }

.bp-faq__item {
  border-bottom: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));

  summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    font-size: 1.08rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  summary::-webkit-details-marker { display: none; }

  summary::after {
    content: "+";
    color: var(--site-accent, #9a7344);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  &[open] summary::after { transform: rotate(45deg); }
}

.bp-faq__answer {
  padding: 0 0 1.25rem;
  line-height: 1.7;
  opacity: 0.85;

  p { margin: 0 0 0.6rem; }
}

/* ---- Team ---- */

.bp-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2rem;
}

.bp-person {
  text-align: start;

  h3 { margin: 0 0 0.2rem; font-size: 1.2rem; }
  p { margin: 0; line-height: 1.6; opacity: 0.8; }
}

.bp-person__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  object-fit: cover;
  border-radius: var(--d-image-radius, 14px);
}

.bp-person__photo--initials {
  display: grid;
  place-items: center;
  font-family: var(--site-heading-font);
  font-size: 2.4rem;
  color: var(--site-accent, #9a7344);
  background: color-mix(in srgb, var(--site-accent, #9a7344) 12%, var(--site-bg, #f6f3ee));
}

.bp-person__role {
  margin-bottom: 0.6rem !important;
  color: var(--site-accent, #9a7344);
  font-size: 0.9rem;
  opacity: 1 !important;
}

/* ---- Testimonials ---- */

.bp-testimonials {
  display: grid;
  gap: 1.25rem;

  @media (min-width: 800px) { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.bp-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
  padding: 1.75rem;
  text-align: start;
  background: var(--d-card, #fff);
  border: 1px solid color-mix(in srgb, var(--site-primary, #16324f) 8%, transparent);
  border-radius: var(--d-card-radius, 14px);

  blockquote {
    margin: 0;
    font-family: var(--site-heading-font);
    font-size: 1.3rem;
    line-height: 1.4;
  }

  blockquote::before {
    content: "\201C";
    display: block;
    margin-bottom: 0.6rem;
    color: var(--site-accent, #9a7344);
    font-size: 3rem;
    line-height: 0.6;
  }

  figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; }
}

.bp-testimonial__photo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 999px;
}

/* ---- Logo strip ---- */

.bp-logos__title {
  margin: 0 0 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.7;
}

.bp-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;

  img { max-height: 44px; width: auto; filter: grayscale(1); opacity: 0.75; }
  span { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; }
  a { color: inherit; text-decoration: none; }
}

/* ---- Fees ---- */

.bp-plans {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;

  @media (min-width: 900px) { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.bp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  text-align: start;
  background: var(--d-card, #fff);
  border: 1px solid color-mix(in srgb, var(--site-primary, #16324f) 12%, transparent);
  border-radius: var(--d-card-radius, 16px);

  h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
  p { margin: 0; line-height: 1.6; }
  .bp-btn { margin-top: auto; }
  .bp-btn--ghost { color: var(--site-primary, #16324f); }

  &.is-featured {
    border-color: var(--site-accent, #9a7344);
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--site-primary, #16324f) 50%, transparent);
  }
}

.bp-plan__badge {
  position: absolute;
  top: -0.75rem;
  inset-inline-start: 1.75rem;
  padding: 0.25rem 0.7rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--site-accent, #9a7344);
  border-radius: 999px;
}

.bp-plan__price {
  margin: 0 0 0.75rem !important;
  font-family: var(--site-heading-font);
  font-size: 2.4rem;
  line-height: 1.1 !important;

  span { font-size: 0.95rem; opacity: 0.7; }
}

/* ---- Hero background video ---- */

.bp-hero { position: relative; overflow: hidden; }
.bp-hero .bp-hero__overlay { position: relative; z-index: 1; }

.bp-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-hero:has(.bp-hero__video)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-scrim);
}

.bp-hero:has(.bp-hero__video) .bp-hero__overlay { z-index: 2; }

.bp-hero-split__media video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--d-image-radius, 18px);
}

/* ---- Tabs ---- */

.bp-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.bp-align--center .bp-tabs__list { justify-content: center; }
.bp-align--right .bp-tabs__list { justify-content: flex-end; }

.bp-tabs__tab {
  padding: 0.6rem 1.1rem;
  color: inherit;
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  cursor: pointer;

  &[aria-selected="true"] {
    color: #fff;
    background: var(--site-primary, #16324f);
    border-color: var(--site-primary, #16324f);
  }
}

.bp-bg--brand .bp-tabs__tab[aria-selected="true"],
.bp-bg--dark .bp-tabs__tab[aria-selected="true"] {
  color: var(--site-primary, #16324f);
  background: var(--d-on-dark, #f7f4ef);
  border-color: var(--d-on-dark, #f7f4ef);
}

.bp-tabs__panel {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem;
  text-align: start;
  color: var(--site-primary, #16324f);
  background: var(--d-card, #fff);
  border-radius: var(--d-panel-radius, 16px);

  &[hidden] { display: none; }
  h3 { margin: 0 0 0.75rem; font-size: 1.6rem; }

  @media (min-width: 900px) {
    &.has-picture { grid-template-columns: 1.1fr 0.9fr; }
  }
}

.bp-tabs__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--d-image-radius, 12px);
}

/* ---- Gallery ---- */

.bp-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;

  @media (min-width: 900px) {
    &.bp-gallery--3 { grid-template-columns: repeat(3, 1fr); }
    &.bp-gallery--4 { grid-template-columns: repeat(4, 1fr); }
  }
}

.bp-gallery__item {
  margin: 0;

  img, .bp-gallery__empty {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--d-image-radius, 12px);
  }

  figcaption { margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.75; }
}

.bp-gallery__empty {
  display: grid !important;
  place-items: center;
  color: var(--site-accent, #9a7344);
  background: color-mix(in srgb, var(--site-accent, #9a7344) 10%, var(--site-bg, #f6f3ee));
  border: 1px dashed color-mix(in srgb, var(--site-accent, #9a7344) 45%, transparent);
}

/* ---- Video and map ---- */

.bp-video { margin: 0; }

.bp-video__frame,
.bp-map {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-primary, #16324f) 8%, var(--site-bg, #f6f3ee));
  border-radius: var(--d-panel-radius, 16px);

  iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
}

.bp-video__frame { aspect-ratio: 16 / 9; }
.bp-video figcaption { margin-top: 0.75rem; font-size: 0.9rem; opacity: 0.75; }

.bp-video__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-size: 0.95rem;
  text-align: center;
  opacity: 0.7;
}

.bp-map--short { height: 18rem; }
.bp-map--regular { height: 26rem; }
.bp-map--tall { height: 36rem; }

.bp-map__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0;

  svg { color: var(--site-accent, #9a7344); }
}

/* ---- Language switcher (Site::Languages) ---- */

.bp-languages {
  display: inline-flex;
  gap: 0.15rem;
  margin-inline-end: 1rem;
  padding: 0.2rem;
  font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--site-primary, #16324f) 18%, transparent);
  border-radius: 999px;
}

.bp-languages__link {
  padding: 0.2rem 0.6rem;
  color: var(--site-primary, #16324f);
  text-decoration: none;
  border-radius: 999px;

  &.is-on { color: #fff; background: var(--site-primary, #16324f); }
}

/* Arabic: right to left, and a font with Arabic letters. */
[dir="rtl"] .bp-site,
[dir="rtl"] .top-nav { font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; }
[dir="rtl"] .bp-site h1,
[dir="rtl"] .bp-site h2,
[dir="rtl"] .bp-site h3 { font-family: "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif; letter-spacing: 0; }
[dir="rtl"] .bp-em { font-style: normal; }
[dir="rtl"] .bp-eyebrow, [dir="rtl"] .bp-hero__eyebrow { letter-spacing: 0; }

/* ---- Form block ---- */

.bp-form .bp-lead { margin: 0.5rem 0 1.75rem; }
/* The form's heading spaces as it did before it had a header of its own. */
.bp-form .bp-form__head { max-width: none; margin-bottom: 0; }

.bp-fields label,
.bp-fields legend { color: inherit; }

.bp-fields input[type="radio"],
.bp-fields input[type="checkbox"] {
  appearance: auto;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: initial;
}

.bp-question fieldset { margin: 0; padding: 0; border: 0; }
.bp-question legend { margin-bottom: 0.35rem; font-size: 0.9rem; }

.bp-fields .bp-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem 0;
  font-size: 1rem;

  input { width: auto; accent-color: var(--site-primary, #16324f); }
}

.bp-fields input[type="file"] { padding: 0.55rem; background: var(--d-input-fill, #fff); }

.bp-question__hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.bp-form__errors {
  padding: 0.75rem 1rem;
  color: #8a1c1c;
  background: #fdecec;
  border-radius: var(--site-box-radius, 6px);
}

.bp-form__thanks {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.25rem 1.4rem;
  font-size: 1.1rem;
  background: var(--d-card, #fff);
  border-radius: var(--d-card-radius, 14px);

  svg { flex: none; margin-top: 0.2rem; color: var(--site-accent, #9a7344); }
}

/* ---- News ---- */

.bp-posts {
  display: grid;
  gap: 1.25rem;

  @media (min-width: 800px) { grid-template-columns: repeat(3, 1fr); }
}

.bp-post-card {
  overflow: hidden;
  color: var(--site-primary, #16324f);
  background: var(--d-card, #fff);
  border-radius: var(--d-card-radius, 14px);
}

.bp-post-card__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.bp-post-card__cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bp-post-card__text { padding: 1.25rem 1.4rem 1.5rem; text-align: start; }
.bp-post-card time { font-size: 0.8rem; opacity: 0.65; }
.bp-post-card h3 { margin: 0.35rem 0 0.5rem; font-size: 1.2rem; }
.bp-post-card p { margin: 0 0 0.9rem; line-height: 1.55; opacity: 0.82; }

.bp-post__head { padding-bottom: 2rem; }
.bp-post__cover { max-width: 64rem; margin: 0 auto; padding-inline: var(--d-gutter-fluid, 1.5rem); }
.bp-post__cover img { display: block; width: 100%; border-radius: var(--d-image-radius, 16px); }
.bp-post__body { font-size: 1.08rem; line-height: 1.75; }
.bp-post__body img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---- Reviews ---- */

.bp-rating { display: flex; align-items: center; gap: 0.6rem; margin: -1rem 0 1.75rem; font-weight: 600; }
.bp-align--center .bp-rating { justify-content: center; }
.bp-align--right .bp-rating { justify-content: flex-end; }
.bp-rating__stars { color: var(--site-accent, #9a7344); font-size: 1.15rem; letter-spacing: 0.1em; }
.bp-testimonial .bp-rating__stars { margin-bottom: -0.5rem; }

.bp-stars { margin: 0; padding: 0; border: 0; }

.bp-stars__row {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.25rem;

  input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  label { color: color-mix(in srgb, var(--site-primary, #16324f) 22%, white); cursor: pointer; }
  label svg { fill: currentColor; }
  input:checked ~ label, label:hover, label:hover ~ label { color: var(--site-accent, #9a7344); }
  input:focus-visible + label { outline: 2px solid var(--site-accent, #9a7344); outline-offset: 2px; border-radius: 4px; }
}

/* ---- Deadlines ---- */

.bp-deadlines {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;

  li {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.25rem;
    color: var(--site-primary, #16324f);
    background: var(--d-card, #fff);
    border-radius: var(--d-card-radius, 14px);
  }

  time {
    display: grid;
    flex: none;
    place-items: center;
    width: 3.6rem;
    padding: 0.4rem 0;
    color: #fff;
    line-height: 1.05;
    background: var(--site-accent, #9a7344);
    border-radius: 10px;

    span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
    strong { font-family: var(--site-heading-font); font-size: 1.5rem; font-weight: 500; }
  }

  h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
  p { margin: 0; font-size: 0.92rem; opacity: 0.75; }
}

/* ---- Booking from the website (SiteBookingsController) ---- */

.bp-booking { max-width: 46rem; margin-inline: auto; }
.bp-booking .bp-section__title { margin: 0 0 0.5rem; }
.bp-booking__times { margin: 1rem 0 0.5rem; padding: 0; border: 0; }
.bp-booking__day { border-bottom: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent)); }
.bp-booking__day summary { display: flex; align-items: baseline; justify-content: space-between; padding: 0.9rem 0; font-weight: 600; cursor: pointer; }
.bp-booking__day[open] summary { padding-bottom: 0.6rem; }
.bp-booking__day[open] .bp-booking__slots { padding-bottom: 1rem; }
.bp-booking__slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-booking__empty { position: static; padding: 2rem; border: 1px dashed currentColor; border-radius: 12px; }

.bp-slot {
  input { position: absolute; opacity: 0; width: 1px; height: 1px; }

  span {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
    background: var(--d-card, #fff);
    border: 1px solid color-mix(in srgb, var(--site-primary, #16324f) 20%, white);
    border-radius: var(--site-radius, 6px);
    cursor: pointer;
  }

  input:checked + span { color: #fff; background: var(--site-primary, #16324f); border-color: var(--site-primary, #16324f); }
  input:focus-visible + span { outline: 2px solid var(--site-accent, #9a7344); outline-offset: 2px; }
}

.bp-feature .bp-btn { margin-top: 0.5rem; }

/* ---- Announcement bar (Site::Chrome) ---- */

.bp-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.6rem 1.25rem;
  font-size: var(--d-bar-size, 0.9rem);
  text-align: center;
  color: var(--d-bar-text, #fff);
  background: var(--site-accent, #9a7344);

  .bp-em { color: inherit; }
}

.bp-bar--brand { background: var(--site-primary, #16324f); }
.bp-bar--dark { background: var(--d-dark, color-mix(in srgb, var(--site-primary, #16324f) 45%, #05080c)); }

/* With text at the far end (a phone number): the announcement on the left. */
.bp-bar--sided {
  @media (min-width: 768px) { justify-content: flex-start; text-align: start; }
}

.bp-bar__side {
  color: #fff;
  font-weight: var(--d-bar-side-weight, 600);
  text-decoration: none;

  @media (min-width: 768px) { margin-inline-start: auto; }
}

/* A phone number inside Arabic words (PublicSiteHelper#site_words) stays on one line. */
.bp-number {
  white-space: nowrap;
}

.bp-bar__link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Footer the practice wrote ---- */

.bp-footer {
  color: var(--d-footer-text, #e9e5de);
  background: var(--d-dark, color-mix(in srgb, var(--site-primary, #16324f) 45%, #05080c));

  a { color: var(--d-footer-link, inherit); text-decoration: none; }
  a:hover { color: #fff; text-decoration: underline; }
}

/* As wide as the page's content, the side margins outside it (as sections have them). */
.bp-footer__inner {
  display: grid;
  gap: 2.5rem;
  max-width: calc(var(--d-content-width, 72rem) + 2 * var(--d-gutter-fluid, 1.5rem));
  margin-inline: auto;
  padding: var(--d-footer-space, 4rem) var(--d-gutter-fluid, 1.5rem) 2.5rem;

  /* The brand wider, then one column each, however many there are (an
     auto-fit repeat can't sit beside an fr track: browsers drop the rule). */
  @media (min-width: 800px) { grid-auto-flow: column; grid-template-columns: 1.6fr; grid-auto-columns: 1fr; }
}

.bp-footer__brand p {
  max-width: 24rem;
  margin: 1rem 0 0;
  line-height: 1.6;
  opacity: 0.8;
}

.bp-footer__logo {
  max-height: 48px;
  width: auto;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px;
}

.bp-footer__name { font-size: 1.2rem; }

.bp-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;

  a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 999px;
  }
}

.bp-footer__text {
  margin: 0 0 0.75rem;
  white-space: pre-line;
  line-height: 1.6;
}

.bp-footer__column {
  h2 {
    margin: 0 0 0.9rem;
    font-family: inherit;
    font-size: var(--d-footer-heading-size, 0.75rem);
    font-weight: var(--d-footer-heading-weight, 600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-footer-heading, inherit);
    opacity: 0.65;
  }

  ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
}

.bp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  max-width: calc(var(--d-content-width, 72rem) + 2 * var(--d-gutter-fluid, 1.5rem));
  margin-inline: auto;
  padding: 1.25rem var(--d-gutter-fluid, 1.5rem) 2rem;
  font-size: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  opacity: 0.75;
}

/* ---- The editor's preview: click a block to edit it ---- */

.bp-site--editing [data-block-index] {
  cursor: pointer;
  outline-offset: -3px;
}

.bp-site--editing [data-block-index]:hover { outline: 2px dashed rgb(109 93 252 / 0.55); }
.bp-site--editing [data-block-index].is-editing { outline: 3px solid #6d5dfc; }

/* ---- Hero with a card (layout "card") ---- */

.bp-hero-card__card {
  padding: 2rem;
  border-radius: var(--d-panel-radius, calc(var(--site-box-radius, 6px) * 2 + 4px));
  background: var(--site-primary, #16324f);
  color: var(--d-on-dark, #f7f4ef);
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--site-primary, #16324f) 70%, transparent);

  p { margin: 0.5rem 0 0; color: color-mix(in srgb, var(--d-on-dark, #f7f4ef) 80%, transparent); }
}

.bp-hero-card__title {
  margin: 0;
  font-family: var(--site-heading-font);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}

.bp-hero-card__phones { display: grid; gap: 0.7rem; margin: 1.25rem 0 1.5rem; }

.bp-hero-card__phone {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;

  span { display: block; font-size: 0.78rem; font-weight: 400; opacity: 0.7; }
}

.bp-hero-card .bp-hero-card__button { background: #fff; color: var(--site-primary, #16324f); }

.bp-hero-card__next {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);

  small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--site-accent, #9a7344) 55%, #fff); }
  p { margin: 0.35rem 0 0; font-family: var(--site-heading-font); font-size: 1.2rem; color: #fff; }
}

/* ---- Cards with a list ---- */

.bp-card__list { margin: 0.75rem 0 1rem; font-size: 0.95rem; }

/* ---- Picture and text: caption, pull quote, tags, numbers ---- */

.bp-figure {
  margin: 0;

  figcaption { margin-top: 0.85rem; display: grid; gap: 0.15rem; }
  figcaption strong { font-family: var(--site-heading-font); font-size: 1.2rem; font-weight: 500; }
  figcaption span { font-size: 0.9rem; opacity: 0.7; }
}

.bp-name__role { display: block; font-weight: 400; opacity: 0.7; }

.bp-pull {
  margin: 0.5rem 0 1.25rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--site-accent, #9a7344);

  p { margin: 0; font-family: var(--site-heading-font); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; }
  cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.9rem; opacity: 0.7; }
}

.bp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.bp-tag {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 0.85rem;

  &.is-on { background: var(--site-primary, #16324f); border-color: transparent; color: #fff; }
}

.bp-mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));

  div { display: flex; flex-direction: column-reverse; gap: 0.35rem; }
  dd { margin: 0; font-family: var(--site-heading-font); font-size: clamp(2rem, 3.5vw, 2.6rem); line-height: 1; }
  dt { font-size: 0.88rem; opacity: 0.75; }
}

/* ---- Call to action with phone numbers ---- */

.bp-cta--phones .bp-cta__inner {
  @media (min-width: 900px) {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 3rem;
    align-items: center;
    text-align: start;

    > * { max-width: none; }
    .bp-lead { margin-inline: 0; }
  }
}

.bp-cta__copy { max-width: 46rem; margin-inline: auto; }

.bp-cta__phones { display: grid; gap: 1rem; margin-top: 1.5rem; }

.bp-cta__phone {
  color: inherit;
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;

  small { display: block; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
}

/* ---- Text and panel ---- */

.bp-panel {
  display: grid;
  gap: 2.5rem;
  align-items: center;

  @media (min-width: 900px) { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.bp-panel__card {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--d-panel-radius, calc(var(--site-box-radius, 6px) * 2 + 4px));

  h3 { margin: 0 0 0.75rem; font-family: var(--site-heading-font); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; }
  p { margin: 0 0 1.5rem; line-height: 1.7; }
}

.bp-panel__card--brand { background: var(--site-primary, #16324f); color: var(--d-on-dark, #f7f4ef); }
.bp-panel__card--accent { background: var(--site-accent, #9a7344); color: #fff; }
.bp-panel__card--soft { background: var(--d-soft, color-mix(in srgb, var(--site-primary, #16324f) 7%, var(--site-bg, #f6f3ee))); color: var(--site-primary, #16324f); }

.bp-panel__card--brand .bp-panel__button,
.bp-panel__card--accent .bp-panel__button { background: #fff; color: var(--site-primary, #16324f); }

.bp-panel__card[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; }
.bp-panel__card[lang="ar"] h3 { font-family: inherit; font-weight: 600; letter-spacing: 0; }

/* An English or French panel on an Arabic page: the site's own fonts, not
   the Arabic ones the page's dir="rtl" sets (including the classic font's
   doubled-class rule above). */
[dir="rtl"] .bp-site .bp-panel__card[dir="ltr"] { font-family: ui-sans-serif, system-ui, sans-serif; letter-spacing: normal; }
[dir="rtl"] .bp-site.bp-site--serif .bp-panel__card[dir="ltr"] { font-family: "Iowan Old Style", Palatino, Georgia, serif; }
[dir="rtl"] .bp-site.bp-site--editorial .bp-panel__card[dir="ltr"] { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; }
[dir="rtl"] .bp-site.bp-site--classic .bp-panel__card[dir="ltr"] { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
[dir="rtl"] .bp-site .bp-panel__card[dir="ltr"] h3 { font-family: var(--site-heading-font); letter-spacing: -0.01em; }
[dir="rtl"] .bp-site.bp-site--editorial .bp-panel__card[dir="ltr"] h3 { font-family: inherit; }

/* ---- Exact look (Site::Design, Website › Look › Advanced look) ----
   Each rule here is for a value the site has set: the page gets a
   bp-site--d-<name> class for it (PublicSiteHelper#site_frame_class),
   so a site that sets nothing looks as before. Doubled classes win over the
   font presets above. */

.bp-site.bp-site--d-body-font { font-family: var(--d-body-font); }
.bp-site.bp-site--d-heading-font { --site-heading-font: var(--d-heading-font); }
.bp-site.bp-site--d-heading-font :is(h1, h2, h3) { font-family: var(--d-heading-font); }
.bp-site.bp-site--d-heading-weight :is(h1, h2, h3) { font-weight: var(--d-heading-weight); }
.bp-site.bp-site--d-heading-line-height :is(h1, h2, h3) { line-height: var(--d-heading-line-height); }
.bp-site.bp-site--d-heading-tracking :is(h1, h2, h3) { letter-spacing: var(--d-heading-tracking); }

.bp-site.bp-site--d-h1 h1 { font-size: var(--d-h1-fluid); }
.bp-site.bp-site--d-h2 :is(.bp-section__title, .bp-cta h2, .bp-form h2, .bp-prose h2, .bp-booking h2) { font-size: var(--d-h2-fluid); }
.bp-site.bp-site--d-h3 :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-person, .bp-plan,
  .bp-tabs__panel, .bp-deadlines, .bp-post-card, .bp-panel__card) h3 { font-size: var(--d-h3); }

.bp-site.bp-site--d-lead :is(.bp-lead, .bp-hero__lede) { font-size: var(--d-lead); }
.bp-site.bp-site--d-body :is(.bp-prose p, .bp-card p) { font-size: var(--d-body); }
.bp-site.bp-site--d-line-height :is(.bp-lead, .bp-hero__lede, .bp-prose p, .bp-card p,
  .bp-feature p, .bp-step p, .bp-person p, .bp-faq__answer, .bp-panel__card p) { line-height: var(--d-line-height); }
.bp-site.bp-site--d-eyebrow :is(.bp-eyebrow, .bp-hero__eyebrow) { font-size: var(--d-eyebrow); }
.bp-site.bp-site--d-eyebrow-tracking :is(.bp-eyebrow, .bp-hero__eyebrow) { letter-spacing: var(--d-eyebrow-tracking); }

/* Text colours. Sections and cards that set the brand colour as text take
   the text colour; dark and brand ones keep their light text. */
.bp-site.bp-site--d-text :is(.bp-bg--plain, .bp-bg--soft, .bp-bg--glow, .bp-card, .bp-column,
  .bp-feature, .bp-plan, .bp-testimonial, .bp-step, .bp-tabs__panel, .bp-deadlines li, .bp-post-card,
  .bp-panel__card--soft) { color: var(--d-text); }
.bp-site.bp-site--d-text :is(.bp-bg--brand, .bp-bg--dark) :is(.bp-card, .bp-column, .bp-feature,
  .bp-plan, .bp-testimonial, .bp-step) { color: inherit; }

.bp-site.bp-site--d-heading :is(h1, h2, h3) { color: var(--d-heading); }
.bp-site.bp-site--d-heading :is(.bp-bg--brand, .bp-bg--dark, .bp-hero, .bp-hero-card__card,
  .bp-panel__card--brand, .bp-panel__card--accent) :is(h1, h2, h3) { color: inherit; }
.bp-site.bp-site--d-heading :is(.bp-bg--brand, .bp-bg--dark) :is(.bp-card, .bp-feature, .bp-step, .bp-testimonial) :is(h1, h2, h3) { color: inherit; }
.bp-site.bp-site--d-heading .bp-hero-card__title { color: #fff; }

/* Secondary text: intros, card text, notes. A colour replaces the faded look. */
.bp-site.bp-site--d-muted :is(.bp-lead, .bp-hero__lede, .bp-feature p, .bp-step p, .bp-person p,
  .bp-faq__answer, .bp-deadlines p, .bp-post-card p, .bp-card p, .bp-stat dt, .bp-mini-stats dt,
  .bp-figure figcaption span, .bp-pull cite, .bp-name__role, .bp-ticks) { color: var(--d-muted); opacity: 1; }
.bp-site.bp-site--d-muted :is(.bp-bg--brand, .bp-bg--dark, .bp-hero, .bp-hero-card__card, .bp-panel__card--brand,
  .bp-panel__card--accent) :is(.bp-lead, .bp-hero__lede, .bp-feature p, .bp-step p, .bp-person p,
  .bp-faq__answer, .bp-deadlines p, .bp-card p, .bp-stat dt, .bp-mini-stats dt, .bp-pull cite, .bp-ticks) {
  color: var(--d-on-dark-muted, currentColor);
  opacity: var(--d-on-dark-muted-opacity, 0.8);
}
.bp-site.bp-site--d-on-dark-muted :is(.bp-bg--brand, .bp-bg--dark, .bp-hero, .bp-hero-card__card, .bp-panel__card--brand)
  :is(.bp-lead, .bp-hero__lede, .bp-feature p, .bp-step p, .bp-card p, .bp-cta__phone small, .bp-hero-card__phone span,
  .bp-stat dt, .bp-mini-stats dt, .bp-pull cite) { color: var(--d-on-dark-muted); opacity: 1; }
.bp-site.bp-site--d-on-dark-muted .bp-hero-card__card p { color: var(--d-on-dark-muted); }

/* Lines stay faint on dark backgrounds whatever the light ones use. */
:is(.bp-bg--brand, .bp-bg--dark, .bp-footer, .bp-hero-card__card) { --d-line: color-mix(in srgb, currentColor 14%, transparent); }

.bp-site--card-border :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan,
  .bp-deadlines li, .bp-post-card, .bp-tabs__panel) { border: var(--d-card-border); }
.bp-site--card-shadow :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan,
  .bp-deadlines li, .bp-post-card, .bp-tabs__panel) { box-shadow: var(--d-card-shadow); }

/* ---- The header, top bar and footer in the website's own fonts and buttons ---- */

.top-nav.bp-header,
.bp-bar,
.bp-footer { font-family: var(--site-font); }

[dir="rtl"] .top-nav.bp-header,
[dir="rtl"] .bp-bar,
[dir="rtl"] .bp-footer { font-family: var(--site-arabic-font, "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif); }

.bp-header .btn.bp-header__button,
.bp-header .btn.bp-header__portal {
  border-radius: var(--site-radius, 6px);
  font-size: var(--d-header-button-size, var(--d-button-size, 14px));
  font-weight: var(--d-header-button-weight, var(--d-button-weight, 600));
}

/* ---- Header, top bar and footer: Advanced look's exact values ---- */

/* Sized by their padding (a button's own height is fixed), without the app's faint inset line. */
.bp-header--d-header-button-padding-y .btn:is(.bp-header__button, .bp-header__portal) {
  height: auto;
  padding-block: var(--d-header-button-padding-y);
  line-height: var(--d-line-height, 1.5);
  box-shadow: none;
}
.bp-header--d-header-button-padding-x .btn:is(.bp-header__button, .bp-header__portal) { padding-inline: var(--d-header-button-padding-x); }

@media (min-width: 1024px) {
  /* The menu's area is the header's: no background of its own on wide screens. */
  .top-nav.bp-header .nav-container { background: transparent; }

  /* Lined up with the page's content instead of edge to edge (Header width). */
  .top-nav.bp-header--width-content { padding-inline: max(var(--d-gutter-fluid, 32px), calc((100% - var(--d-content-width, 72rem)) / 2)); }
  .top-nav.bp-header--width-content .nav-container { margin-inline-end: 0; }

  /* Space between menu links, measured between their words (each has 4px either side). */
  .top-nav.bp-header.bp-header--d-menu-gap .nav-container > nav:first-child { gap: calc(var(--d-menu-gap) - 8px); }
}

.bp-bar--width-content { padding-inline: max(var(--d-gutter-fluid, 1.25rem), calc((100% - var(--d-content-width, 72rem)) / 2)); }
.bp-bar--d-height { min-height: var(--d-bar-height); padding-block: 0; }
.bp-bar.bp-bar--start { justify-content: flex-start; text-align: start; }

.bp-footer--d-footer-size .bp-footer__inner,
.bp-footer--d-footer-size .bp-footer__legal { font-size: var(--d-footer-size); }
.bp-footer--d-footer-link-weight .bp-footer__inner a { font-weight: var(--d-footer-link-weight); }
/* Colours given exactly aren't faded. */
.bp-footer--d-footer-heading .bp-footer__column h2,
.bp-footer--d-footer-text :is(.bp-footer__brand p, .bp-footer__legal) { opacity: 1; }

.top-nav.bp-header { min-height: var(--d-header-height, auto); }
.top-nav.bp-header .logo a img.trustbp-logo { height: var(--d-logo-height, 3.5rem); }
@media (min-width: 1024px) {
  .top-nav.bp-header .logo a img.trustbp-logo { height: var(--d-logo-height, 4.5rem); }
  .top-nav.bp-header--d-logo-height .logo { padding-block: 0; }
}

.top-nav.bp-header .nav-container > nav:first-child a { font-size: var(--d-menu-size, 14px); }
.top-nav.bp-header .nav-container > nav:first-child a:not(.active) { color: var(--d-text, var(--base-text)); }
.top-nav.bp-header--d-menu-weight .nav-container > nav:first-child a { font-weight: var(--d-menu-weight); }
.top-nav.bp-header .nav-container > nav:first-child a:hover { color: var(--site-accent, #9a7344); }

@media (min-width: 1024px) {
  .top-nav.bp-header--menu-right .nav-container { justify-content: flex-end; gap: 28px; }
  .top-nav.bp-header--menu-right .nav-container > nav:first-child { gap: 28px; }
  .top-nav.bp-header--menu-center .nav-container > nav:first-child { margin-inline: auto; }
  .top-nav.bp-header--menu-left .nav-container { justify-content: flex-start; }
  .top-nav.bp-header--menu-left .nav-container > nav:last-child { margin-inline-start: auto; }

  /* The current page in the accent colour instead of underlined. */
  .top-nav.bp-header--active-colour .nav-container > nav:first-child a.active {
    color: var(--site-accent, #9a7344);
    background: none;
    box-shadow: none;
  }
}

/* The practice's name (and a line under it) beside the logo (Site::Chrome header wordmark). */
.bp-header__brand { display: flex; align-items: center; gap: 12px; }
.bp-header__wordmark { display: grid; color: var(--d-heading, var(--site-primary, #16324f)); line-height: 1.2; }
.bp-header__wordmark strong { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.16em; }
.bp-header__wordmark small { margin-top: 4px; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-muted, color-mix(in srgb, currentColor 70%, transparent)); }
[dir="rtl"] .bp-header__wordmark :is(strong, small) { letter-spacing: 0; }

/* An Arabic font of the site's own choosing (Advanced look › Arabic font). */
[dir="rtl"] .bp-site.bp-site.bp-site--d-arabic-font,
[dir="rtl"] .bp-site.bp-site.bp-site--d-arabic-font :is(h1, h2, h3),
.bp-site.bp-site--d-arabic-font [lang="ar"] { font-family: var(--d-arabic-font); }

/* ---- Heading beside the content (Look › Heading › Beside) ----
   The heading and intro in a column on the left, the questions, form,
   cards or list on the right; one above the other on phones. A narrow block
   (FAQ, form, deadlines) widens to the content width for it. */

@media (min-width: 900px) {
  .bp-head-beside :is(.bp-narrow, .bp-wide, .bp-form) {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
    max-width: var(--block-width, var(--d-content-width, 72rem));
    text-align: start;

    > * { grid-column: 2; }
    > .bp-head { grid-column: 1; grid-row: 1 / span 20; max-width: none; margin: 0; }
  }

  .bp-head-beside .bp-form > .bp-form__head { grid-column: 1; grid-row: 1 / span 20; }
}

.bp-head-above .bp-head { margin-inline: 0; }

/* ---- Cards (Look › Cards) ---- */

.bp-cards-plain :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan,
  .bp-deadlines li, .bp-post-card, .bp-tabs__panel) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
}

.bp-cards-bordered :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan,
  .bp-deadlines li, .bp-post-card, .bp-tabs__panel, .bp-form__card) {
  background: var(--d-card, #fff);
  border: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: var(--d-card-radius, 14px);
  box-shadow: none;
}

.bp-cards-raised :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan,
  .bp-deadlines li, .bp-post-card, .bp-tabs__panel, .bp-form__card) {
  background: var(--d-card, #fff);
  border: 0;
  border-radius: var(--d-card-radius, 14px);
  box-shadow: 0 1px 2px rgb(12 22 32 / 0.06), 0 12px 32px -16px rgb(12 22 32 / 0.25);
}

.bp-cards-rule :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan,
  .bp-deadlines li, .bp-post-card) {
  border: 0;
  border-top: 2px solid var(--site-accent, #9a7344);
  border-radius: 0;
  box-shadow: none;
}

/* One panel, the cards side by side with a line between them. */
.bp-cards-joined :is(.bp-cards, .bp-columns, .bp-features, .bp-steps, .bp-testimonials, .bp-plans) {
  gap: 0;
  overflow: hidden;
  background: var(--d-card, #fff);
  border: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: var(--d-panel-radius, 20px);
}

.bp-cards-joined :is(.bp-card, .bp-column, .bp-feature, .bp-step, .bp-testimonial, .bp-plan) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.bp-cards-joined :is(.bp-cards, .bp-columns, .bp-features, .bp-steps, .bp-testimonials, .bp-plans) > * + * {
  border-top: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));

  @media (min-width: 800px) {
    border-top: 0;
    border-inline-start: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));
  }
}

/* A form in a card of its own (Cards: bordered or raised). */
:is(.bp-cards-bordered, .bp-cards-raised) .bp-form__card { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--d-panel-radius, 16px); }

/* ---- Lists (Look › Lists) ---- */

:is(.bp-lists-bullets, .bp-lists-ticks, .bp-lists-dots, .bp-lists-lines, .bp-lists-dots-lines)
  :is(.bp-list, .bp-column ul, .bp-ticks--stack) {
  display: block;
  margin-block: 0.9rem 1.1rem;
  padding: 0;
  list-style: none;

  li { position: relative; display: block; margin: 0; padding-block: 0.3rem; padding-inline-start: 1.6rem; }
  li + li { margin-top: 0; }
  li > svg { display: none; }
  li::before { position: absolute; inset-inline-start: 0; }
}

.bp-lists-bullets :is(.bp-list, .bp-column ul, .bp-ticks--stack) li::before {
  content: "";
  top: 0.95em;
  width: 0.38rem;
  height: 0.38rem;
  margin-inline-start: 0.3rem;
  border-radius: 999px;
  background: currentColor;
}

.bp-lists-ticks :is(.bp-list, .bp-column ul, .bp-ticks--stack) li::before {
  content: "✓";
  top: 0.3rem;
  color: var(--site-accent, #9a7344);
  font-weight: 700;
}

:is(.bp-lists-dots, .bp-lists-dots-lines) :is(.bp-list, .bp-column ul, .bp-ticks--stack) li::before {
  content: "";
  top: calc(0.3rem + 0.75em - 9px);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--d-soft, color-mix(in srgb, var(--site-accent, #9a7344) 14%, white));
  box-shadow: inset 0 0 0 5px var(--site-accent, #9a7344);
}

:is(.bp-lists-dots, .bp-lists-dots-lines) :is(.bp-list, .bp-column ul, .bp-ticks--stack) li { padding-inline-start: 2rem; }

:is(.bp-lists-lines, .bp-lists-dots-lines) :is(.bp-list, .bp-column ul, .bp-ticks--stack) li {
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));
}

.bp-lists-lines :is(.bp-list, .bp-column ul, .bp-ticks--stack) li { padding-inline-start: 0; }
.bp-lists-lines :is(.bp-list, .bp-column ul, .bp-ticks--stack) li::before { content: none; }
:is(.bp-lists-lines, .bp-lists-dots-lines) :is(.bp-list, .bp-column ul, .bp-ticks--stack) li:last-child { border-bottom: 0; }
.bp-lists-dots-lines :is(.bp-list, .bp-column ul, .bp-ticks--stack) li::before { top: calc(0.65rem + 0.75em - 9px); }

/* ---- Form: two short fields to a row, choices as chips, contact cards beside ---- */

@media (min-width: 640px) {
  .bp-fields--paired {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;

    > * { grid-column: auto; }
    > :is(.bp-field--wide, button, p, .bp-form__errors), > div:has(> [name*="captcha"], > input[type="hidden"]) { grid-column: 1 / -1; }
    > button { justify-self: start; }
  }
}

.bp-fields--chips .bp-question fieldset { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-fields--chips .bp-question legend { width: 100%; }

.bp-fields--chips .bp-option {
  margin: 0;
  padding: 0.45rem 0.9rem;
  font-size: 0.92rem;
  background: var(--d-input-fill, #fff);
  border: 1px solid var(--d-line, color-mix(in srgb, var(--site-primary, #16324f) 20%, white));
  border-radius: 999px;
  cursor: pointer;

  &:has(input:checked) {
    border-color: var(--site-accent, #9a7344);
    box-shadow: inset 0 0 0 1px var(--site-accent, #9a7344);
  }

  input { accent-color: var(--site-accent, #9a7344); }
}

/* Contact cards on the left, the form in its card on the right. */
.bp-form--side {
  display: grid;
  gap: 2rem;
  max-width: var(--block-width, var(--d-content-width, 72rem));

  @media (min-width: 900px) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }
}

.bp-form--side .bp-form__head { margin-bottom: 1.25rem; }
.bp-form--side .bp-form__head h2 { margin-bottom: 0.5rem; font-size: clamp(1.3rem, 2.2vw, 1.5rem); }
.bp-form--side .bp-form__head .bp-lead { margin: 0; font-size: 0.95rem; }

.bp-form__main.bp-form__card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--d-card, #fff);
  border: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: var(--d-panel-radius, 16px);
}

.bp-form__side { display: grid; gap: 0.9rem; }

.bp-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  color: inherit;
  text-decoration: none;
  background: var(--d-card, #fff);
  border: 1px solid var(--d-line, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: var(--d-card-radius, 14px);

  small { display: block; margin-bottom: 0.15rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted, inherit); opacity: var(--d-muted-opacity, 0.7); }
  strong { display: block; font-weight: 600; }
  .bp-text-link { display: inline-block; margin-top: 0.4rem; font-size: 0.9rem; font-weight: 600; }
}

.bp-contact-card__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--site-accent, #9a7344);
  background: var(--d-soft, color-mix(in srgb, var(--site-accent, #9a7344) 13%, white));
  border-radius: 12px;
}

[dir="rtl"] .bp-contact-card small { letter-spacing: 0; }

/* ---- Call to action: at the content width, as a band or a card ---- */

.bp-cta__inner {
  position: relative;
  max-width: var(--block-width, var(--d-content-width, 72rem));
  margin-inline: auto;
}

.bp-cta--card .bp-cta__inner {
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: start;
  border-radius: var(--d-panel-radius, 24px);

  .bp-lead { margin-inline: 0; }
  .bp-cta__copy { margin-inline: 0; }
}

.bp-btn--white { color: var(--site-primary, #16324f); background: #fff; }

/* A large faint copy of the logo in the corner (logo_shape). */
.bp-cta__inner--logo::after {
  content: "";
  position: absolute;
  inset-inline-end: -3rem;
  bottom: -4rem;
  width: min(24rem, 45%);
  aspect-ratio: 1;
  pointer-events: none;
  background: currentColor;
  opacity: 0.08;
  mask: var(--cta-logo) no-repeat center / contain;
}

.bp-cta__inner > * { position: relative; z-index: 1; }

/* The phone labels as written, softer than the numbers. */
.bp-cta__phone small { text-transform: none; letter-spacing: 0; }

/* ---- Steps with large numerals ---- */

.bp-step__numeral {
  display: block;
  font-family: var(--site-heading-font);
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--site-accent, #9a7344);
}

:is(.bp-bg--brand, .bp-bg--dark) .bp-step__numeral { color: color-mix(in srgb, var(--site-accent, #9a7344) 60%, white); }
.bp-steps--numerals .bp-step h3 { margin-top: 1.1rem; }

/* ---- Deadlines as cards ---- */

.bp-deadline-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;

  li {
    padding: 1.4rem;
    color: var(--d-text, var(--site-primary, #16324f));
    background: var(--d-card, #fff);
    border: 1px solid var(--d-line, color-mix(in srgb, currentColor 12%, transparent));
    border-radius: var(--d-card-radius, 14px);
  }

  time { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
  time strong { font-family: var(--site-heading-font); font-size: 2.1rem; font-weight: 500; line-height: 1; color: var(--d-heading, inherit); }
  time span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-accent, #9a7344); }
  h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; font-family: inherit; }
  p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--d-muted, inherit); opacity: var(--d-muted-opacity, 0.78); }
}

[dir="rtl"] .bp-deadline-cards time span { letter-spacing: 0; }

/* ---- Picture framing (Site::BlockRegistry::PICTURE_FRAME) ---- */

.bp-frame--original :is(img, video) { aspect-ratio: auto; height: auto; object-fit: contain; }
.bp-frame--portrait :is(img, video) { aspect-ratio: 4 / 5; }
.bp-frame--square :is(img, video) { aspect-ratio: 1; }
.bp-frame--landscape :is(img, video) { aspect-ratio: 4 / 3; }
.bp-frame--wide :is(img, video) { aspect-ratio: 16 / 9; }
.bp-frame--banner :is(img, video) { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .bp-frame--banner :is(img, video) { aspect-ratio: 29 / 10; } }

:is(.bp-frame--portrait, .bp-frame--square, .bp-frame--landscape, .bp-frame--wide, .bp-frame--banner) :is(img, video) {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--frame-focus, 50% 50%);
}

/* The name and role on a dark strip over the foot of the picture. */
.bp-figure--over {
  position: relative;
  overflow: hidden;
  border-radius: var(--d-image-radius, 0);

  img { border-radius: 0; }

  figcaption {
    position: absolute;
    inset: auto 1rem 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    color: #fff;
    background: color-mix(in srgb, var(--d-dark, #10223a) 86%, transparent);
    border-radius: 12px;
    backdrop-filter: blur(6px);
  }

  figcaption strong { font-family: inherit; font-size: 0.95rem; font-weight: 600; }
  figcaption span { color: rgb(255 255 255 / 0.78); opacity: 1; font-size: 0.8rem; }
}

/* ---- Hero: a wider column for the words, a picture below them ---- */

@media (min-width: 900px) {
  .bp-hero-split__inner--wider { grid-template-columns: 1.25fr 0.9fr; gap: clamp(3rem, 5vw, 4rem); }
}

.bp-hero-below__media {
  max-width: var(--block-width, var(--d-content-width, 72rem));
  margin: clamp(2rem, 4vw, 3rem) auto 0;

  :is(img, video) { display: block; width: 100%; border-radius: var(--d-image-radius, 18px); }
}

/* Words above a picture line up with it. */
.bp-hero-below:not(.bp-align--center) .bp-hero-plain__inner { max-width: var(--block-width, var(--d-content-width, 72rem)); }

/* On phones: only the far-end text (a phone number), or only the announcement. */
@media (max-width: 767px) {
  .bp-bar--phone-side > :not(.bp-bar__side) { display: none; }
  .bp-bar--phone-text > .bp-bar__side { display: none; }
}

/* A website page has its own side margins: the app's on <main> would double them on phones. */
main:has(> .bp-site) { padding-inline: 0; }

/* A dropdown question shows that it opens. */
.bp-fields select {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6573' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
[dir="rtl"] .bp-fields select { background-position: left 0.9rem center; }

/* ---- Header: languages as links, staying at the top; footer logo ---- */

/* Only the other languages, as plain menu links (Advanced look › Language switch). */
.bp-header--languages-links .bp-languages { padding: 0; border: 0; margin-inline-end: 1.25rem; font-size: var(--d-menu-size, 14px); }
.bp-header--languages-links .bp-languages__link { padding: 0; color: var(--d-text, var(--site-primary, #16324f)); background: none; border-radius: 0; font-weight: var(--d-menu-weight, 500); }
.bp-header--languages-links .bp-languages__link.is-on { display: none; }
.bp-header--languages-links .bp-languages__link:hover { color: var(--site-accent, #9a7344); }

/* Stays at the top as the page scrolls, the page showing faintly through. */
.top-nav.bp-header--sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--site-bg, #f6f3ee) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-line, color-mix(in srgb, currentColor 10%, transparent));
}

/* The footer's logo: on its white chip (as before), as it is, or in white. */
.bp-footer--logo-plain .bp-footer__logo,
.bp-footer--logo-white .bp-footer__logo { padding: 0; background: none; border-radius: 0; }
.bp-footer--logo-white .bp-footer__logo { filter: brightness(0) invert(1); }
.bp-footer__mark { display: inline-flex; align-items: center; gap: 12px; }
.bp-footer__mark .bp-footer__logo { max-height: var(--d-logo-height, 48px); }
.bp-footer .bp-header__wordmark { color: #fff; }
.bp-footer .bp-header__wordmark small { color: color-mix(in srgb, currentColor 65%, transparent); }

/* An inner page's title, and Arabic pages' own weight and line spacing (Advanced look). */
.bp-site.bp-site--d-page-title :is(.bp-hero-plain) h1 { font-size: var(--d-page-title-fluid); }
[dir="rtl"] .bp-site.bp-site--d-arabic-heading-weight :is(h1, h2, h3) { font-weight: var(--d-arabic-heading-weight); }
[dir="rtl"] .bp-site.bp-site--d-arabic-heading-line-height :is(h1, h2, h3) { line-height: var(--d-arabic-heading-line-height); }
[dir="rtl"] .bp-site.bp-site--d-arabic-line-height { line-height: var(--d-arabic-line-height); }
[dir="rtl"] .bp-site.bp-site--d-arabic-line-height :is(.bp-lead, .bp-hero__lede, .bp-prose p, .bp-card p,
  .bp-feature p, .bp-step p, .bp-faq__answer) { line-height: var(--d-arabic-line-height); }

/* A hint beside its question's label (Form › Hints › Beside the label). */
.bp-question__hint--label { display: inline; margin: 0; font-weight: 400; }

/* The footer's note at the far end of the bottom row. */
.bp-footer__legal .bp-footer__note { margin-inline-start: auto; }

/* A language's own name in its own letters' font. */
.bp-languages__link[lang="ar"] { font-family: var(--site-arabic-font, "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif); }