/*!
 * fbb-blocks.css — compiled Block Builder block styles (committed artifact, no deploy build).
 * Source: resources/sass/blocks/*. Theme-agnostic: every themeable colour/font is read from a
 * --fbb-* token with a neutral fallback (ADR-0011). The Theme adapter (slice 02) overrides the
 * tokens at :root; with the theme doing nothing these fallbacks render correct, neutral blocks.
 */

/* ============================== fbb-hero-banner ============================== */
.fbb-hero-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 640px;
  padding: 160px 0 90px;
  background-color: var(--fbb-hero-bg-color, var(--fbb-secondary, #f1f3f5));
  background-image: var(--fbb-hero-bg-image, none);
  background-size: cover;
  background-position: center;
  font-family: var(--fbb-body-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--fbb-text-color, #4a4a5e);
}

.fbb-hero-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fbb-hero-overlay, transparent);
}

.fbb-hero-banner .fbb-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

.fbb-hero-banner__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.fbb-hero-banner__col {
  flex: 1 1 100%;
}

.fbb-hero-banner__subtitle {
  display: block;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--fbb-primary, #3b5bdb);
}

.fbb-hero-banner__title {
  margin: 0 0 20px;
  font-family: var(--fbb-heading-font, var(--fbb-body-font, system-ui, sans-serif));
  font-size: clamp(42px, 6vw, 60px);
  line-height: 1.1;
  text-transform: capitalize;
  color: var(--fbb-heading-color, #16161d);
}

.fbb-hero-banner__title span {
  color: var(--fbb-primary, #3b5bdb);
}

.fbb-hero-banner__description {
  width: 90%;
  margin: 0 0 30px;
  color: var(--fbb-text-color, #4a4a5e);
}

.fbb-btn.fbb-hero-banner__btn {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: var(--fbb-radius, 10px);
  background: var(--fbb-primary, #3b5bdb);
  color: var(--fbb-on-primary, #ffffff);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fbb-btn.fbb-hero-banner__btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.fbb-hero-banner__media {
  position: relative;
}

.fbb-hero-banner__media img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fbb-radius, 10px);
}

.fbb-hero-banner__media img:nth-child(2) {
  position: absolute;
  left: 6%;
  top: 18%;
  width: 45%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 11px 10px 0 0 rgba(0, 0, 0, 0.1);
}

.fbb-hero-banner__scroll {
  position: absolute;
  right: 4%;
  bottom: 8%;
}

.fbb-hero-banner__scroll-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--fbb-heading-color, #16161d);
  font-family: var(--fbb-heading-font, var(--fbb-body-font, system-ui, sans-serif));
}

.fbb-hero-banner__scroll-link:hover {
  color: var(--fbb-primary, #3b5bdb);
}

[dir="rtl"] .fbb-hero-banner__media img:nth-child(2) {
  left: auto;
  right: 6%;
}

@media (min-width: 992px) {
  .fbb-hero-banner {
    min-height: 780px;
    padding: 200px 0 100px;
  }
  .fbb-hero-banner--has-media .fbb-hero-banner__col {
    flex: 1 1 0;
  }
}

@media (max-width: 991px) {
  .fbb-hero-banner__description {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .fbb-hero-banner__scroll {
    display: none;
  }
}

/* ============================== fbb-testimonials ============================== */
.fbb-testimonials {
  padding: 80px 0;
  background-color: var(--fbb-testimonials-bg, var(--fbb-secondary, #f1f3f5));
  font-family: var(--fbb-body-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--fbb-text-color, #4a4a5e);
}
.fbb-testimonials .fbb-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
.fbb-testimonials__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.fbb-testimonials__subtitle {
  display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--fbb-primary, #3b5bdb);
}
.fbb-testimonials__title {
  margin: 0 0 12px; font-family: var(--fbb-heading-font, var(--fbb-body-font, system-ui, sans-serif));
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: var(--fbb-heading-color, #16161d);
}
.fbb-testimonials__description { margin: 0; }
.fbb-testimonials__slider { position: relative; padding-bottom: 48px; }

.fbb-testimonial-card {
  height: 100%; margin: 0; box-sizing: border-box; padding: 28px;
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--fbb-radius, 10px); box-shadow: 0 8px 24px rgba(16,22,29,.06);
}
.fbb-testimonial-card__quote { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--fbb-text-color, #4a4a5e); }
.fbb-testimonial-card__quote::before { content: "\201C"; color: var(--fbb-primary, #3b5bdb); font-size: 40px; line-height: 0; vertical-align: -12px; margin-inline-end: 4px; }
.fbb-testimonial-card__person { display: flex; align-items: center; gap: 12px; }
.fbb-testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.fbb-testimonial-card__meta { display: flex; flex-direction: column; }
.fbb-testimonial-card__name { font-weight: 700; color: var(--fbb-heading-color, #16161d); }
.fbb-testimonial-card__role { font-size: 13px; color: var(--fbb-text-color, #4a4a5e); opacity: .8; }

.fbb-testimonials--style-2 .fbb-testimonials__slider { max-width: 760px; margin-inline: auto; text-align: center; }
.fbb-testimonials--style-2 .fbb-testimonial-card { padding: 36px; text-align: center; }
.fbb-testimonials--style-2 .fbb-testimonial-card__quote { font-size: 20px; }
.fbb-testimonials--style-2 .fbb-testimonial-card__person { justify-content: center; }

.fbb-testimonials .swiper-pagination { position: absolute; bottom: 12px; left: 0; right: 0; }
.fbb-testimonials .swiper-pagination-bullet-active { background: var(--fbb-primary, #3b5bdb); }
.fbb-swiper-nav {
  position: absolute; top: 40%; z-index: 5; width: 40px; height: 40px; border: 0; cursor: pointer;
  border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(16,22,29,.12);
  color: var(--fbb-heading-color, #16161d); font-size: 22px; line-height: 1;
}
.fbb-swiper-prev { inset-inline-start: -6px; }
.fbb-swiper-next { inset-inline-end: -6px; }
.fbb-swiper-nav.swiper-button-disabled { opacity: .35; cursor: default; }

/* ============================== shared catalogue base ============================== */
.fbb-block { box-sizing: border-box; }
.fbb-block *, .fbb-block *::before, .fbb-block *::after { box-sizing: border-box; }
.fbb-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.fbb-sec-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.fbb-sec-subtitle { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--fbb-primary, #3b5bdb); }
.fbb-sec-title { margin: 0 0 12px; font-family: var(--fbb-heading-font, var(--fbb-body-font, system-ui, sans-serif)); font-size: clamp(28px, 4vw, 42px); line-height: 1.15; color: var(--fbb-heading-color, #16161d); }
.fbb-sec-title span { color: var(--fbb-primary, #3b5bdb); }
.fbb-sec-description { margin: 0; color: var(--fbb-text-color, #4a4a5e); }
.fbb-btn { display: inline-block; padding: 14px 30px; border: 1px solid transparent; border-radius: var(--fbb-radius, 10px); background: var(--fbb-primary, #3b5bdb); color: var(--fbb-on-primary, #fff); font-weight: 600; line-height: 1; text-decoration: none; transition: opacity .25s, transform .25s; }
.fbb-btn:hover { opacity: .9; transform: translateY(-2px); }
.fbb-btn--ghost { background: transparent; border-color: currentColor; color: var(--fbb-heading-color, #16161d); }

/* ============================== fbb-cta ============================== */
.fbb-cta { position: relative; z-index: 1; padding: 72px 0; overflow: hidden; background-color: var(--fbb-cta-bg-color, var(--fbb-primary, #3b5bdb)); background-image: var(--fbb-cta-bg-image, none); background-size: cover; background-position: center; color: #fff; font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-cta__overlay { position: absolute; inset: 0; z-index: -1; background: var(--fbb-cta-overlay, rgba(0,0,0,0)); }
.fbb-cta--image .fbb-cta__overlay { background: var(--fbb-cta-overlay, rgba(16,22,29,.5)); }
.fbb-cta__inner { text-align: center; }
.fbb-cta .fbb-sec-subtitle { color: rgba(255,255,255,.85); }
.fbb-cta .fbb-sec-title, .fbb-cta .fbb-sec-description { color: #fff; }
.fbb-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.fbb-cta .fbb-cta__btn { background: #fff; color: var(--fbb-primary, #3b5bdb); }
.fbb-cta .fbb-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }

/* ============================== fbb-services ============================== */
.fbb-services { padding: 80px 0; background-color: var(--fbb-services-bg, transparent); font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 991px) { .fbb-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .fbb-services__grid { grid-template-columns: 1fr; } }
.fbb-service-card { display: block; padding: 30px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--fbb-radius, 10px); box-shadow: 0 8px 24px rgba(16,22,29,.05); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.fbb-service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16,22,29,.1); }
.fbb-service-card__icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 50%; background: color-mix(in srgb, var(--fbb-primary, #3b5bdb) 12%, transparent); }
.fbb-service-card__icon img { width: 30px; height: 30px; object-fit: contain; }
.fbb-service-card__title { margin: 0 0 8px; font-size: 20px; color: var(--fbb-heading-color, #16161d); font-family: var(--fbb-heading-font, var(--fbb-body-font, system-ui, sans-serif)); }
.fbb-service-card__text { margin: 0; color: var(--fbb-text-color, #4a4a5e); }
.fbb-services--style-2 .fbb-service-card { text-align: center; }
.fbb-services--style-2 .fbb-service-card__icon { margin-inline: auto; }
.fbb-services--style-3 .fbb-service-card { border: 0; background: color-mix(in srgb, var(--fbb-primary, #3b5bdb) 6%, #fff); }

/* ============================== fbb-pricing ============================== */
.fbb-pricing { padding: 80px 0; background-color: var(--fbb-pricing-bg, transparent); font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 991px) { .fbb-pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.fbb-price-card { display: flex; flex-direction: column; padding: 32px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--fbb-radius, 10px); }
.fbb-price-card--featured { border-color: var(--fbb-primary, #3b5bdb); box-shadow: 0 16px 40px rgba(59,91,219,.16); transform: translateY(-6px); }
.fbb-price-card__name { margin: 0 0 12px; font-size: 18px; text-transform: uppercase; letter-spacing: .5px; color: var(--fbb-heading-color, #16161d); }
.fbb-price-card__price { margin-bottom: 20px; }
.fbb-price-card__amount { font-size: 42px; font-weight: 700; color: var(--fbb-heading-color, #16161d); }
.fbb-price-card__period { color: var(--fbb-text-color, #4a4a5e); }
.fbb-price-card__features { list-style: none; padding: 0; margin: 0 0 24px; }
.fbb-price-card__features li { padding: 8px 0 8px 26px; position: relative; color: var(--fbb-text-color, #4a4a5e); border-bottom: 1px solid rgba(0,0,0,.05); }
.fbb-price-card__features li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--fbb-primary, #3b5bdb); font-weight: 700; }
.fbb-price-card__btn { margin-top: auto; text-align: center; }
.fbb-pricing--style-2 .fbb-price-card { text-align: center; }
.fbb-pricing--style-2 .fbb-price-card__features li { padding-inline-start: 0; }
.fbb-pricing--style-2 .fbb-price-card__features li::before { content: none; }

/* ============================== fbb-faqs ============================== */
.fbb-faqs { padding: 80px 0; background-color: var(--fbb-faqs-bg, transparent); font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-faqs__inner { max-width: 820px; }
.fbb-faq { border: 1px solid rgba(0,0,0,.1); border-radius: var(--fbb-radius, 10px); margin-bottom: 12px; background: #fff; overflow: hidden; }
.fbb-faq__q { padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--fbb-heading-color, #16161d); list-style: none; position: relative; }
.fbb-faq__q::-webkit-details-marker { display: none; }
.fbb-faq__q::after { content: "+"; position: absolute; inset-inline-end: 22px; color: var(--fbb-primary, #3b5bdb); font-size: 20px; }
.fbb-faq[open] .fbb-faq__q::after { content: "\2013"; }
.fbb-faq__a { padding: 0 22px 20px; color: var(--fbb-text-color, #4a4a5e); }

/* ============================== fbb-contact-block ============================== */
.fbb-contact-block { padding: 80px 0; background-color: var(--fbb-contact-bg, var(--fbb-secondary, #f1f3f5)); font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-contact-block__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 767px) { .fbb-contact-block__inner { grid-template-columns: 1fr; } }
.fbb-contact-block .fbb-sec-head { text-align: start; margin: 0 0 24px; }
.fbb-contact-block__details { list-style: none; padding: 0; margin: 0; }
.fbb-contact-block__details li { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.fbb-contact-block__details a, .fbb-contact-block__details span { color: var(--fbb-heading-color, #16161d); text-decoration: none; }
.fbb-contact-block__label { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--fbb-primary, #3b5bdb); margin-bottom: 4px; }
.fbb-contact-block--style-2 .fbb-contact-block__inner { grid-template-columns: 1fr; text-align: center; }
.fbb-contact-block--style-2 .fbb-sec-head { text-align: center; }
.fbb-contact-block--style-3 { background: var(--fbb-contact-bg, var(--fbb-heading-color, #16161d)); color: #fff; }
.fbb-contact-block--style-3 .fbb-sec-title, .fbb-contact-block--style-3 .fbb-contact-block__details a, .fbb-contact-block--style-3 .fbb-contact-block__details span { color: #fff; }

/* ============================== fbb-about-us-information (16 variants) ============================== */
.fbb-about { padding: 88px 0; background-color: var(--fbb-about-bg, transparent); font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 767px) { .fbb-about__inner { grid-template-columns: 1fr; } }
.fbb-about__media { position: relative; }
.fbb-about__img { width: 100%; height: auto; border-radius: var(--fbb-radius, 10px); display: block; }
.fbb-about__img--2 { position: absolute; width: 46%; inset-inline-start: -8%; bottom: -8%; border: 6px solid #fff; box-shadow: 0 12px 30px rgba(16,22,29,.14); }
.fbb-about__experience { position: absolute; inset-inline-end: -6%; top: 8%; background: var(--fbb-primary, #3b5bdb); color: var(--fbb-on-primary, #fff); padding: 16px 20px; border-radius: var(--fbb-radius, 10px); text-align: center; box-shadow: 0 10px 26px rgba(59,91,219,.3); }
.fbb-about__experience-num { display: block; font-size: 32px; font-weight: 700; line-height: 1; }
.fbb-about__experience-label { font-size: 12px; }
.fbb-about .fbb-sec-head { text-align: start; margin: 0 0 22px; }
.fbb-about__content { min-width: 0; }
/* variant matrix: image side, text alignment, image shape, badge, accents */
.fbb-about--style-2 .fbb-about__inner, .fbb-about--style-6 .fbb-about__inner, .fbb-about--style-10 .fbb-about__inner, .fbb-about--style-14 .fbb-about__inner { direction: rtl; }
.fbb-about--style-2 .fbb-about__content, .fbb-about--style-6 .fbb-about__content, .fbb-about--style-10 .fbb-about__content, .fbb-about--style-14 .fbb-about__content { direction: ltr; }
.fbb-about--style-3 .fbb-about__img, .fbb-about--style-7 .fbb-about__img, .fbb-about--style-11 .fbb-about__img, .fbb-about--style-15 .fbb-about__img { border-radius: 50% / 8%; }
.fbb-about--style-4 .fbb-about__img, .fbb-about--style-8 .fbb-about__img, .fbb-about--style-12 .fbb-about__img, .fbb-about--style-16 .fbb-about__img { border-radius: 0; }
.fbb-about--style-5 .fbb-about__inner, .fbb-about--style-6 .fbb-about__inner, .fbb-about--style-7 .fbb-about__inner, .fbb-about--style-8 .fbb-about__inner { gap: 80px; }
.fbb-about--style-9, .fbb-about--style-10, .fbb-about--style-11, .fbb-about--style-12 { background-color: var(--fbb-about-bg, var(--fbb-secondary, #f1f3f5)); }
.fbb-about--style-9 .fbb-sec-head, .fbb-about--style-10 .fbb-sec-head, .fbb-about--style-11 .fbb-sec-head, .fbb-about--style-12 .fbb-sec-head { text-align: center; }
.fbb-about--style-13 .fbb-about__experience, .fbb-about--style-14 .fbb-about__experience, .fbb-about--style-15 .fbb-about__experience, .fbb-about--style-16 .fbb-about__experience { inset-inline-end: auto; inset-inline-start: -6%; top: auto; bottom: 8%; border-radius: 50%; width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ============================== phase 2: team ============================== */
.fbb-team { padding: 80px 0; background-color: var(--fbb-team-bg, transparent); font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-team__slider { position: relative; padding-bottom: 44px; }
.fbb-team-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--fbb-radius, 10px); overflow: hidden; }
.fbb-team-card__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.fbb-team-card__body { padding: 18px; text-align: center; }
.fbb-team-card__name { margin: 0 0 4px; font-size: 18px; color: var(--fbb-heading-color, #16161d); }
.fbb-team-card__role { font-size: 13px; color: var(--fbb-primary, #3b5bdb); }

/* ============================== phase 2: hero slider ============================== */
.fbb-hero-slider__swiper { position: relative; }
.fbb-hero-slide { position: relative; min-height: 520px; display: flex; align-items: center; background-color: var(--fbb-secondary, #f1f3f5); background-image: var(--fbb-hero-bg-image, none); background-size: cover; background-position: center; color: var(--fbb-text-color, #4a4a5e); }
.fbb-hero-slide--image { color: #fff; }
.fbb-hero-slide__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); }
.fbb-hero-slide--image .fbb-hero-slide__overlay { background: rgba(16,22,29,.45); }
.fbb-hero-slide__inner { position: relative; z-index: 2; }
.fbb-hero-slide--image .fbb-hero-banner__title, .fbb-hero-slide--image .fbb-hero-banner__description { color: #fff; }

/* ============================== phase 2: brands ============================== */
.fbb-brands { padding: 48px 0; background-color: var(--fbb-brands-bg, transparent); }
.fbb-brands__title { text-align: center; color: var(--fbb-text-color, #4a4a5e); margin: 0 0 24px; }
.fbb-brand { display: flex; align-items: center; justify-content: center; height: 60px; opacity: .7; transition: opacity .2s; }
.fbb-brand:hover { opacity: 1; }
.fbb-brand img { max-height: 100%; max-width: 100%; object-fit: contain; filter: grayscale(1); }
.fbb-brand:hover img { filter: none; }

/* ============================== phase 2: site statistics ============================== */
.fbb-stats { padding: 72px 0; background-color: var(--fbb-stats-bg, var(--fbb-primary, #3b5bdb)); color: #fff; font-family: var(--fbb-body-font, system-ui, sans-serif); }
.fbb-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 767px) { .fbb-stats__grid { grid-template-columns: repeat(2, 1fr); } }
.fbb-stat__num { display: block; font-size: 48px; font-weight: 700; line-height: 1; }
.fbb-stat__label { font-size: 15px; opacity: .85; }
.fbb-stats--style-2 { background-color: var(--fbb-stats-bg, transparent); color: var(--fbb-heading-color, #16161d); }
.fbb-stats--style-2 .fbb-stat__num { color: var(--fbb-primary, #3b5bdb); }

/* ============================== phase 2: projects ============================== */
.fbb-projects { padding: 80px 0; background-color: var(--fbb-projects-bg, transparent); }
.fbb-projects__slider { position: relative; padding-bottom: 44px; }
.fbb-project-card { display: block; position: relative; border-radius: var(--fbb-radius, 10px); overflow: hidden; text-decoration: none; color: #fff; }
.fbb-project-card__img { display: block; aspect-ratio: 4/3; background-size: cover; background-position: center; }
.fbb-project-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: 20px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(transparent, rgba(16,22,29,.8)); }
.fbb-project-card__cat { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.85); }
.fbb-project-card__title { font-size: 18px; font-weight: 600; }

/* ============================== phase 2: services tab ============================== */
.fbb-services-tab { padding: 80px 0; background-color: var(--fbb-services-tab-bg, transparent); }
.fbb-tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.fbb-tab-btn { padding: 10px 22px; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; background: #fff; cursor: pointer; color: var(--fbb-heading-color, #16161d); font-weight: 600; }
.fbb-tab-btn.is-active { background: var(--fbb-primary, #3b5bdb); border-color: var(--fbb-primary, #3b5bdb); color: var(--fbb-on-primary, #fff); }
.fbb-tab-panel { display: none; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fbb-tab-panel.is-active { display: grid; }
@media (max-width: 767px) { .fbb-tab-panel.is-active { grid-template-columns: 1fr; } }
.fbb-tab-panel__media img { width: 100%; border-radius: var(--fbb-radius, 10px); }
.fbb-tab-panel__heading { margin: 0 0 12px; font-size: 26px; color: var(--fbb-heading-color, #16161d); }
.fbb-tab-panel__text { color: var(--fbb-text-color, #4a4a5e); }

/* ============================== phase 2: service categories ============================== */
.fbb-svccat { padding: 80px 0; background-color: var(--fbb-svccat-bg, transparent); }
.fbb-svccat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 767px) { .fbb-svccat__grid { grid-template-columns: 1fr; } }
.fbb-svccat-card { display: flex; align-items: center; gap: 16px; padding: 22px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--fbb-radius, 10px); text-decoration: none; color: var(--fbb-heading-color, #16161d); transition: transform .2s; }
.fbb-svccat-card:hover { transform: translateY(-3px); }
.fbb-svccat-card__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--fbb-primary, #3b5bdb) 12%, transparent); }
.fbb-svccat-card__icon img { width: 26px; height: 26px; object-fit: contain; }
.fbb-svccat-card__title { font-weight: 600; }
.fbb-svccat--style-2 .fbb-svccat-card { flex-direction: column; text-align: center; }
.fbb-svccat--style-3 .fbb-svccat-card { background: color-mix(in srgb, var(--fbb-primary, #3b5bdb) 6%, #fff); border: 0; }

/* ============================== phase 2: content quote ============================== */
.fbb-quote { padding: 72px 0; background-color: var(--fbb-quote-bg, var(--fbb-secondary, #f1f3f5)); }
.fbb-quote__inner { max-width: 820px; text-align: center; }
.fbb-quote__text { margin: 0 0 20px; font-family: var(--fbb-heading-font, var(--fbb-body-font, system-ui, sans-serif)); font-size: clamp(22px, 3vw, 30px); line-height: 1.4; color: var(--fbb-heading-color, #16161d); }
.fbb-quote__text::before { content: "\201C"; color: var(--fbb-primary, #3b5bdb); }
.fbb-quote__cite { font-style: normal; display: inline-flex; flex-direction: column; gap: 2px; }
.fbb-quote__author { font-weight: 700; color: var(--fbb-heading-color, #16161d); }
.fbb-quote__role { font-size: 13px; color: var(--fbb-primary, #3b5bdb); }

/* ============================== phase 2: content featured / consulting (split) ============================== */
.fbb-featured, .fbb-consulting { padding: 80px 0; background-color: var(--fbb-featured-bg, var(--fbb-consulting-bg, transparent)); }
.fbb-featured__inner, .fbb-consulting__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 767px) { .fbb-featured__inner, .fbb-consulting__inner { grid-template-columns: 1fr; } }
.fbb-featured--reverse .fbb-featured__media { order: 2; }
.fbb-featured__media img, .fbb-consulting__media img { width: 100%; border-radius: var(--fbb-radius, 10px); }
.fbb-featured .fbb-sec-head, .fbb-consulting .fbb-sec-head { text-align: start; margin: 0 0 20px; }

/* ============================== phase 2: content feature list ============================== */
.fbb-featurelist { padding: 80px 0; background-color: var(--fbb-featurelist-bg, transparent); }
.fbb-featurelist__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 767px) { .fbb-featurelist__inner { grid-template-columns: 1fr; } }
.fbb-featurelist__media img { width: 100%; border-radius: var(--fbb-radius, 10px); }
.fbb-featurelist .fbb-sec-head { text-align: start; margin: 0 0 20px; }
.fbb-featurelist__items { list-style: none; padding: 0; margin: 0; }
.fbb-featurelist__items li { position: relative; padding: 10px 0 10px 30px; color: var(--fbb-text-color, #4a4a5e); }
.fbb-featurelist__items li::before { content: "\2713"; position: absolute; inset-inline-start: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--fbb-primary, #3b5bdb); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ============================== phase 2: instruction steps ============================== */
.fbb-steps { padding: 80px 0; background-color: var(--fbb-steps-bg, transparent); }
.fbb-steps__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 991px) { .fbb-steps__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .fbb-steps__list { grid-template-columns: 1fr; } }
.fbb-step__num { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 50%; background: color-mix(in srgb, var(--fbb-primary, #3b5bdb) 14%, transparent); color: var(--fbb-primary, #3b5bdb); font-weight: 700; }
.fbb-step__title { margin: 0 0 8px; font-size: 18px; color: var(--fbb-heading-color, #16161d); }
.fbb-step__text { margin: 0; color: var(--fbb-text-color, #4a4a5e); }

/* ============================== phase 2: newsletter ============================== */
.fbb-newsletter { padding: 64px 0; background-color: var(--fbb-newsletter-bg, var(--fbb-primary, #3b5bdb)); color: #fff; }
.fbb-newsletter__inner { text-align: center; max-width: 680px; }
.fbb-newsletter .fbb-sec-title, .fbb-newsletter .fbb-sec-description { color: #fff; }
.fbb-newsletter__form { display: flex; gap: 10px; margin-top: 20px; }
@media (max-width: 575px) { .fbb-newsletter__form { flex-direction: column; } }
.fbb-newsletter__input { flex: 1; padding: 14px 18px; border: 0; border-radius: var(--fbb-radius, 10px); font-size: 15px; }
.fbb-newsletter__btn { background: #fff; color: var(--fbb-primary, #3b5bdb); }

/* ============================== phase 2: blog posts ============================== */
.fbb-posts { padding: 80px 0; background-color: var(--fbb-posts-bg, transparent); }
.fbb-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 991px) { .fbb-posts__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.fbb-post-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--fbb-radius, 10px); overflow: hidden; }
.fbb-post-card__img { display: block; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.fbb-post-card__body { padding: 22px; }
.fbb-post-card__meta { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--fbb-primary, #3b5bdb); }
.fbb-post-card__title { margin: 8px 0; font-size: 20px; }
.fbb-post-card__title a { color: var(--fbb-heading-color, #16161d); text-decoration: none; }
.fbb-post-card__excerpt { margin: 0; color: var(--fbb-text-color, #4a4a5e); }
.fbb-posts--style-2 .fbb-posts__grid { grid-template-columns: repeat(2, 1fr); }

/* ============================== phase 2: contact map ============================== */
.fbb-contactmap { padding: 0; background-color: var(--fbb-contactmap-bg, transparent); }
.fbb-contactmap__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; align-items: stretch; min-height: 460px; padding: 0; max-width: none; }
@media (max-width: 767px) { .fbb-contactmap__inner { grid-template-columns: 1fr; } }
.fbb-contactmap__card { padding: 56px; align-self: center; max-width: 560px; margin-inline-start: auto; }
.fbb-contactmap__details { list-style: none; padding: 0; margin: 0; }
.fbb-contactmap__details li { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.fbb-contactmap__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--fbb-primary, #3b5bdb); margin-bottom: 4px; }
.fbb-contactmap__map, .fbb-contactmap__map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }
.fbb-contactmap__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 360px; background: var(--fbb-secondary, #f1f3f5); color: var(--fbb-text-color, #4a4a5e); padding: 24px; text-align: center; }

/* ============================== phase 2: products ============================== */
.fbb-products { padding: 80px 0; background-color: var(--fbb-products-bg, transparent); }
.fbb-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 991px) { .fbb-products__grid { grid-template-columns: repeat(2, 1fr); } }
.fbb-product-card { display: block; text-decoration: none; color: var(--fbb-heading-color, #16161d); background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--fbb-radius, 10px); overflow: hidden; }
.fbb-product-card__img { display: block; aspect-ratio: 1/1; background-size: cover; background-position: center; }
.fbb-product-card__name { display: block; padding: 14px 16px 2px; font-weight: 600; }
.fbb-product-card__price { display: block; padding: 0 16px 16px; color: var(--fbb-primary, #3b5bdb); font-weight: 700; }