/*
Theme Name: Stuff By Two Child
Theme URI: https://stuffbytwo.com
Description: Divi child theme styles for Stuff By Two dark glassmorphism redesign.
Author: Stuff By Two
Author URI: https://stuffbytwo.com
Template: Divi
Version: 1.0.30-home-info-compact-icons
*/

/* =========================================================
   GOOGLE FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================
   STUFF BY TWO — GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
  --sb2-black: #08030d;
  --sb2-deep: #16061d;
  --sb2-plum: #2a0a3a;
  --sb2-purple: #7214a6;
  --sb2-violet: #9625f5;
  --sb2-magenta: #b637f2;
  --sb2-lavender: #c8a5de;
  --sb2-white: #f8f5fb;
  --sb2-muted: #a99caf;
  --sb2-soft: #d9d0df;

  --sb2-glass: rgba(255, 255, 255, 0.055);
  --sb2-glass-strong: rgba(255, 255, 255, 0.085);
  --sb2-glass-border: rgba(216, 180, 255, 0.22);
  --sb2-glass-border-soft: rgba(216, 180, 255, 0.15);

  --sb2-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
  --sb2-shadow-strong: 0 34px 96px rgba(0, 0, 0, 0.38);
  --sb2-glow: 0 0 34px rgba(155, 34, 255, 0.22);

  --sb2-radius-sm: 14px;
  --sb2-radius-md: 22px;
  --sb2-radius-lg: 28px;
  --sb2-radius-xl: 36px;

  --sb2-transition: all 0.25s ease;
}

/* =========================================================
   BASE / BODY / FONT OVERRIDES
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--sb2-black);
  color: var(--sb2-white);
}

/* Body font */
body,
.et_pb_text,
.et_pb_text_inner,
.et_pb_button,
.et_pb_module,
.et_pb_blurb_description,
.et_pb_toggle_content,
.et_pb_contact_field,
input,
textarea,
select {
  font-family: "Inter", Arial, sans-serif !important;
}

/* Heading font */
h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6,
.sb2-hero-heading,
.sb2-page-heading,
.sb2-section-heading {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  color: var(--sb2-white);
  letter-spacing: -0.035em;
}

p,
.et_pb_text p,
.et_pb_blurb_description,
.et_pb_toggle_content,
.et_pb_contact_field_options_title {
  color: var(--sb2-muted);
}

a {
  color: var(--sb2-lavender);
  transition: var(--sb2-transition);
}

a:hover {
  color: var(--sb2-magenta);
}

.et_pb_button::after {
  line-height: inherit !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   GLOBAL BACKGROUND HELPERS
   ========================================================= */

.sb2-bg-main {
  background:
    radial-gradient(circle at 82% 12%, rgba(155, 34, 255, 0.34), transparent 32%),
    radial-gradient(circle at 16% 60%, rgba(193, 60, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 50%, #2a0a3a 100%) !important;
}

.sb2-bg-gradient {
  background-image: linear-gradient(180deg, #16061d 0%, #580b7c 100%) !important;
}

.sb2-bg-dark {
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 34, 255, 0.22), transparent 35%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-bg-soft-glow {
  background:
    radial-gradient(circle at 20% 20%, rgba(193, 60, 255, 0.14), transparent 32%),
    radial-gradient(circle at 80% 60%, rgba(155, 34, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 100%) !important;
}

/* =========================================================
   GLOBAL DIVI ROW WIDTH / COLUMN SPLIT HELPERS
   Apply these classes to the ROW.
   Start with a standard two-column row in Divi.
   ========================================================= */

.sb2-split-55-45,
.sb2-split-58-42,
.sb2-split-52-48,
.sb2-split-60-40,
.sb2-split-70-30,
.sb2-split-45-55 {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 55 / 45 visual split */
.sb2-split-55-45 .et_pb_column:first-child {
  width: 55% !important;
  margin-right: 4% !important;
}

.sb2-split-55-45 .et_pb_column:last-child {
  width: 41% !important;
  margin-right: 0 !important;
}

/* 58 / 42 visual split */
.sb2-split-58-42 .et_pb_column:first-child {
  width: 58% !important;
  margin-right: 4% !important;
}

.sb2-split-58-42 .et_pb_column:last-child {
  width: 38% !important;
  margin-right: 0 !important;
}

/* 52 / 48 visual split */
.sb2-split-52-48 .et_pb_column:first-child {
  width: 52% !important;
  margin-right: 4% !important;
}

.sb2-split-52-48 .et_pb_column:last-child {
  width: 44% !important;
  margin-right: 0 !important;
}

/* 60 / 40 visual split */
.sb2-split-60-40 .et_pb_column:first-child {
  width: 60% !important;
  margin-right: 4% !important;
}

.sb2-split-60-40 .et_pb_column:last-child {
  width: 36% !important;
  margin-right: 0 !important;
}

/* 70 / 30 visual split */
.sb2-split-70-30 .et_pb_column:first-child {
  width: 70% !important;
  margin-right: 4% !important;
}

.sb2-split-70-30 .et_pb_column:last-child {
  width: 26% !important;
  margin-right: 0 !important;
}

/* 45 / 55 reverse visual split */
.sb2-split-45-55 .et_pb_column:first-child {
  width: 41% !important;
  margin-right: 4% !important;
}

.sb2-split-45-55 .et_pb_column:last-child {
  width: 55% !important;
  margin-right: 0 !important;
}

/* =========================================================
   GLOBAL GLASSMORPHISM
   ========================================================= */

.sb2-glass,
.sb2-glass-panel,
.sb2-card,
.sb2-work-card,
.sb2-project-card,
.sb2-pricing-card,
.sb2-service-price-card,
.sb2-feature-card,
.sb2-case-card {
  background: var(--sb2-glass);
  border: 1px solid var(--sb2-glass-border-soft);
  border-radius: var(--sb2-radius-lg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    var(--sb2-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sb2-glass-panel,
.sb2-card {
  padding: clamp(24px, 4vw, 36px);
}

.sb2-card-hover,
.sb2-work-card,
.sb2-project-card,
.sb2-pricing-card,
.sb2-service-price-card,
.sb2-feature-card,
.sb2-case-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sb2-card-hover:hover,
.sb2-work-card:hover,
.sb2-project-card:hover,
.sb2-pricing-card:hover,
.sb2-service-price-card:hover,
.sb2-feature-card:hover,
.sb2-case-card:hover {
  transform: translateY(-7px);
  border-color: rgba(193, 60, 255, 0.52);
  box-shadow:
    var(--sb2-shadow-strong),
    var(--sb2-glow);
}

/* =========================================================
   GLOBAL TYPOGRAPHY HELPERS
   ========================================================= */

.sb2-eyebrow {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: max-content;
  color: #a65cf6 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  padding: 7px 13px !important;
  margin: 0 0 14px 0 !important;
  border: 1px solid rgba(160, 72, 235, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(84, 16, 112, 0.18),
      rgba(28, 7, 39, 0.34)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 0 18px rgba(142, 30, 220, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Decorative dash used by the hero eyebrow in the supplied reference. */
.sb2-hero-section .sb2-eyebrow::after {
  content: "—";
  display: inline-block;
  margin-left: 9px;
  color: var(--sb2-violet);
  opacity: 0.72;
  line-height: 1;
}

/* Divi Text Module support.
   Apply sb2-eyebrow to the Text Module itself. */
.sb2-eyebrow .et_pb_text_inner,
.sb2-eyebrow p,
.et_pb_text.sb2-eyebrow .et_pb_text_inner,
.et_pb_text.sb2-eyebrow p {
  color: #a65cf6 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-gradient-text {
  background: linear-gradient(
    100deg,
    #c43cff 0%,
    #a42cff 48%,
    #7927ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sb2-hero-heading h1,
.sb2-hero-heading {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: clamp(58px, 7.4vw, 112px);
  line-height: 0.93;
  letter-spacing: -0.065em;
  color: var(--sb2-white);
  font-weight: 700;
}

.sb2-page-heading h1,
.sb2-page-heading {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: clamp(46px, 6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.sb2-section-heading h2,
.sb2-section-heading {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 700;
}

.sb2-lead,
.sb2-lead p {
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
  color: var(--sb2-soft);
}

.sb2-small-muted,
.sb2-small-muted p {
  color: var(--sb2-muted);
  font-size: 14px;
}

/* =========================================================
   GLOBAL BUTTONS
   ========================================================= */

.sb2-btn-primary,
.et_pb_button.sb2-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.16),
      transparent 35%
    ),
    linear-gradient(
      110deg,
      #a818ff 0%,
      #b524f2 48%,
      #7819c9 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(208, 107, 255, 0.48) !important;
  border-radius: 11px !important;
  padding: 13px 24px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 26px rgba(130, 22, 218, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(53, 5, 84, 0.35);
  transition: var(--sb2-transition);
  text-decoration: none !important;
}

.sb2-btn-primary:hover,
.et_pb_button.sb2-btn-primary:hover {
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.20),
      transparent 36%
    ),
    linear-gradient(
      110deg,
      #b327ff 0%,
      #c02cff 48%,
      #861dde 100%
    ) !important;
  border-color: rgba(226, 143, 255, 0.62) !important;
  transform: translateY(-2px);
  color: #ffffff !important;
  box-shadow:
    0 12px 34px rgba(145, 28, 230, 0.38),
    0 0 24px rgba(150, 37, 245, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.sb2-btn-secondary,
.et_pb_button.sb2-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  background:
    linear-gradient(
      135deg,
      rgba(39, 11, 52, 0.36),
      rgba(8, 3, 13, 0.42)
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(185, 112, 231, 0.28) !important;
  border-radius: 11px !important;
  padding: 13px 24px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: var(--sb2-transition);
  text-decoration: none !important;
}

.sb2-btn-secondary:hover,
.et_pb_button.sb2-btn-secondary:hover {
  background:
    linear-gradient(
      135deg,
      rgba(76, 18, 102, 0.42),
      rgba(18, 5, 26, 0.52)
    ) !important;
  border-color: rgba(182, 55, 242, 0.48) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 24px rgba(110, 18, 165, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

/* Inline hero button group */
.sb2-button-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.sb2-button-group a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

/* =========================================================
   DIVI HEADER / NAVIGATION
   Divi Theme Builder global header structure:
   Section class: sb2-glass-header
   Row: standard 3-column row — logo / menu / button
   Header button module class: sb2-btn-primary

   Reference behaviour:
   Transparent nav over the hero, no bounding box.
   This section intentionally targets Divi's generated header/button
   classes as well as the reusable SB2 classes.
   ========================================================= */

/* Header wrapper: overlay the hero, do not create a dark band. */
.et-l--header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 9999 !important;
  background: transparent !important;
  pointer-events: none;
}

/* Logged-in WordPress admin bar correction so the logo is not hidden behind it. */
body.admin-bar .et-l--header {
  top: 32px !important;
}

.et-l--header .et_builder_inner_content,
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module {
  background: transparent !important;
}

/* Main transparent header section. */
.sb2-glass-header,
.sb2-glass-header.et_pb_section,
.et_pb_section_0_tb_header.sb2-glass-header,
.et_pb_sticky_module.sb2-glass-header,
.et-l--header .sb2-glass-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  z-index: 9999 !important;
  pointer-events: auto;
}

/* Divi sticky/generated width overrides. */
.sb2-glass-header.et_pb_sticky,
.sb2-glass-header.et_pb_sticky_module,
.sb2-glass-header.et_pb_sticky--top,
.sb2-glass-header.et_pb_sticky_placeholder,
.et_pb_section_0_tb_header.et_pb_sticky_module:not(.et_pb_sticky--editing),
.et-db #et-boc .et-l .sb2-glass-header,
.et-db #et-boc .et-l .sb2-glass-header.et_pb_section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove Divi backgrounds inside the header. */
.sb2-glass-header .et_pb_row,
.sb2-glass-header .et_pb_column,
.sb2-glass-header .et_pb_module,
.sb2-glass-header .et_pb_menu,
.sb2-glass-header .et_pb_menu_inner_container,
.sb2-glass-header .et_pb_menu__wrap,
.sb2-glass-header .et_pb_menu__menu,
.sb2-glass-header nav,
.sb2-glass-header ul,
.sb2-glass-header li {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Main header row: short transparent row spanning the page like the reference. */
.sb2-glass-header .et_pb_row,
.et-db #et-boc .et-l .sb2-glass-header .et_pb_row,
.et-l--header .sb2-glass-header .et_pb_row,
.et-l--header .et_pb_section.sb2-glass-header .et_pb_row {
  width: calc(100% - 128px) !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  background: transparent !important;
}

/* Header columns. */
.sb2-glass-header .et_pb_column {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  min-height: 0 !important;
  height: 44px !important;
}

.sb2-glass-header .et_pb_column:first-child {
  width: 22% !important;
  justify-content: flex-start !important;
}

.sb2-glass-header .et_pb_column:nth-child(2) {
  width: 56% !important;
  justify-content: center !important;
}

.sb2-glass-header .et_pb_column:last-child {
  width: 22% !important;
  justify-content: flex-end !important;
}

/* Logo image module. */
.sb2-glass-header .et_pb_image,
.sb2-glass-header .et_pb_image_wrap,
.sb2-glass-header .et_pb_image a {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
}

.sb2-glass-header .et_pb_image img {
  width: 118px !important;
  max-width: 118px !important;
  height: auto !important;
  display: block !important;
  background: transparent !important;
}

/* Divi menu module. */
.sb2-glass-header .et_pb_menu {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-glass-header .et_pb_menu__wrap {
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.sb2-glass-header .et_pb_menu__menu {
  display: flex !important;
  align-items: center !important;
}

.sb2-glass-header .et_pb_menu__menu > nav > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-glass-header .et_pb_menu__menu > nav > ul > li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-glass-header .et_pb_menu__menu > nav > ul > li > a,
.sb2-glass-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  font-family: "Inter", Arial, sans-serif !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.sb2-glass-header .et_pb_menu__menu > nav > ul > li > a:hover,
.sb2-glass-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a:hover {
  color: var(--sb2-magenta) !important;
}

/* Header button module: forced reference-style CTA.
   This targets the generated Divi module class because the generic
   sb2-btn-primary rules were being blended with Divi's own button styling. */
.sb2-glass-header .et_pb_button_module_wrapper,
.sb2-glass-header .et_pb_button_0_tb_header_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.sb2-glass-header a.et_pb_button_0_tb_header,
.et-l--header a.et_pb_button_0_tb_header,
.et-db #et-boc .et-l .sb2-glass-header a.et_pb_button_0_tb_header,
.et-db #et-boc .et-l .sb2-glass-header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary,
.sb2-glass-header .et_pb_button,
.sb2-glass-header .et_pb_button.sb2-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 111px !important;
  height: 36px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
  background-color: #9b22ff !important;
  background-image:
    radial-gradient(circle at 77% 20%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 43%),
    linear-gradient(135deg, #951cff 0%, #bc31ff 50%, #8d1be8 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(215, 125, 255, 0.66) !important;
  border-radius: 9px !important;
  padding: 0 17px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 36px !important;
  text-decoration: none !important;
  box-shadow:
    0 0 24px rgba(155, 34, 255, 0.56),
    0 10px 24px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(71, 7, 111, 0.38) !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}

.sb2-glass-header a.et_pb_button_0_tb_header:hover,
.et-l--header a.et_pb_button_0_tb_header:hover,
.sb2-glass-header .et_pb_button:hover,
.sb2-glass-header .et_pb_button.sb2-btn-primary:hover {
  background-image:
    radial-gradient(circle at 77% 20%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 24%, transparent 44%),
    linear-gradient(135deg, #a425ff 0%, #c13cff 50%, #9320ef 100%) !important;
  border-color: rgba(226, 153, 255, 0.76) !important;
  box-shadow:
    0 0 30px rgba(193, 60, 255, 0.62),
    0 14px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Prevent Divi from adding a second arrow icon after the text. */
.sb2-glass-header .et_pb_button::after,
.sb2-glass-header .et_pb_button::before,
.sb2-glass-header a.et_pb_button_0_tb_header::after,
.sb2-glass-header a.et_pb_button_0_tb_header::before {
  display: none !important;
  content: none !important;
}

/* Make room for the overlaid header inside hero sections.
   Lower than previous versions to remove the excessive empty band. */
.sb2-hero-section,
.sb2-work-hero,
.sb2-services-hero,
.sb2-about-hero,
.sb2-process-hero,
.sb2-blog-hero,
.sb2-contact-hero,
.sb2-case-hero {
  padding-top: 78px !important;
}

/* Mobile menu. */
.sb2-glass-header .et_pb_menu .et_mobile_nav_menu {
  color: #ffffff;
}

.sb2-glass-header .mobile_menu_bar::before {
  color: #ffffff !important;
}

.sb2-glass-header .et_mobile_menu {
  background: rgba(22, 6, 29, 0.96) !important;
  border: 1px solid rgba(216, 180, 255, 0.18) !important;
  border-radius: 14px !important;
  margin-top: 14px !important;
  padding: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

.sb2-glass-header .et_mobile_menu li a {
  color: rgba(255, 255, 255, 0.86) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(216, 180, 255, 0.12) !important;
}

.sb2-glass-header .et_mobile_menu li a:hover {
  color: var(--sb2-magenta) !important;
  background: transparent !important;
}

@media (max-width: 1180px) {
  .sb2-glass-header .et_pb_row,
  .et-db #et-boc .et-l .sb2-glass-header .et_pb_row,
  .et-l--header .sb2-glass-header .et_pb_row {
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sb2-glass-header .et_pb_menu__menu > nav > ul {
    gap: 26px !important;
  }
}

@media (max-width: 980px) {
  body.admin-bar .et-l--header {
    top: 46px !important;
  }

  .sb2-glass-header,
  .sb2-glass-header.et_pb_section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 14px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .sb2-glass-header .et_pb_row {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  .sb2-glass-header .et_pb_column:first-child {
    width: 50% !important;
    justify-content: flex-start !important;
  }

  .sb2-glass-header .et_pb_column:nth-child(2) {
    width: 50% !important;
    justify-content: flex-end !important;
  }

  .sb2-glass-header .et_pb_column:last-child {
    display: none !important;
  }

  .sb2-glass-header .et_pb_menu__wrap {
    justify-content: flex-end !important;
  }

  .sb2-glass-header .et_mobile_nav_menu {
    display: block !important;
  }

  .sb2-glass-header .et_pb_menu__menu {
    display: none !important;
  }

  .sb2-glass-header .et_pb_image img {
    width: 92px !important;
    max-width: 92px !important;
  }
}


/* =========================================================
   DIVI GENERATED CSS OVERRIDES — LIVE HEADER BUTTON + HEIGHT
   These selectors intentionally target the exact live Divi header
   output because Divi loads generated styles after child theme CSS.
   ========================================================= */

/* Header should sit tightly over the hero, not create a tall bar */
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header,
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l--header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  z-index: 99999 !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.admin-bar.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header,
body.admin-bar.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l--header {
  top: 32px !important;
}

body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_builder_inner_content,
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header {
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_row_0_tb_header.et_pb_row {
  width: calc(100% - 128px) !important;
  max-width: none !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  background: transparent !important;
}

body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_column_0_tb_header,
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_column_1_tb_header,
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_column_2_tb_header {
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reference-sized logo */
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_image_0_tb_header,
body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_image_0_tb_header .et_pb_image_wrap {
  width: 122px !important;
  max-width: 122px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_image_0_tb_header img {
  width: 122px !important;
  max-width: 122px !important;
  height: auto !important;
  display: block !important;
}

/* Exact live header button override. This beats Divi's generated button styles. */
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_column_2_tb_header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light,
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light,
html body #page-container #et-boc .et-l--header a.et_pb_button_0_tb_header.sb2-btn-primary {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;

  background-color: #9f20ff !important;
  background-image:
    linear-gradient(135deg, #9b18ff 0%, #bd39ff 52%, #8f19f2 100%) !important;
  background-clip: padding-box !important;

  border: 1px solid rgba(226, 174, 255, 0.68) !important;
  border-radius: 9px !important;
  outline: 0 !important;

  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 36px !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 10px 26px rgba(155, 34, 255, 0.46),
    0 0 34px rgba(155, 34, 255, 0.34) !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light:hover,
html body #page-container #et-boc .et-l--header a.et_pb_button_0_tb_header.sb2-btn-primary:hover {
  background-color: #b12dff !important;
  background-image:
    linear-gradient(135deg, #a41dff 0%, #c13cff 52%, #9820ff 100%) !important;
  border-color: rgba(238, 202, 255, 0.82) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 12px 30px rgba(193, 60, 255, 0.5),
    0 0 38px rgba(193, 60, 255, 0.36) !important;
  transform: translateY(-1px) !important;
}

html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::before,
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::after,
html body #page-container #et-boc .et-l--header a.et_pb_button_0_tb_header.sb2-btn-primary::before,
html body #page-container #et-boc .et-l--header a.et_pb_button_0_tb_header.sb2-btn-primary::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Beat Divi's page-level hero padding that is printed after the child stylesheet. */
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--post .et_pb_section_0.sb2-hero-section.et_pb_section {
  padding-top: 96px !important;
}

@media (max-width: 980px) {
  body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header,
  body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l--header,
  body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_builder_inner_content,
  body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header,
  body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_row_0_tb_header.et_pb_row {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_row_0_tb_header.et_pb_row {
    width: calc(100% - 40px) !important;
  }
}


/* =========================================================
   FOOTER
   ========================================================= */

.sb2-footer {
  background: #08030d !important;
  border-top: 1px solid rgba(216, 180, 255, 0.14);
}

.sb2-footer h1,
.sb2-footer h2,
.sb2-footer h3,
.sb2-footer h4 {
  color: #ffffff;
}

.sb2-footer p,
.sb2-footer a,
.sb2-footer li {
  color: var(--sb2-muted);
}

.sb2-footer a:hover {
  color: var(--sb2-magenta);
}

/* =========================================================
   HOMEPAGE
   ========================================================= */

.sb2-hero-section {
  min-height: 88vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 80% 12%, rgba(155, 34, 255, 0.34), transparent 32%),
    radial-gradient(circle at 18% 60%, rgba(193, 60, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 48%, #2a0a3a 100%) !important;
  overflow: hidden;
  position: relative;
}

.sb2-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 42%, rgba(155, 34, 255, 0.12) 42%, rgba(155, 34, 255, 0.12) 58%, transparent 58%),
    linear-gradient(45deg, transparent 0%, transparent 62%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.04) 72%, transparent 72%);
  pointer-events: none;
}

.sb2-featured-panel {
  position: relative;
  border-radius: var(--sb2-radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(216, 180, 255, 0.26);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(155, 34, 255, 0.26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: rotate(3deg);
}

.sb2-floating-card {
  background: rgba(42, 10, 58, 0.62);
  border: 1px solid rgba(216, 180, 255, 0.28);
  border-radius: var(--sb2-radius-md);
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sb2-trust-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(214, 195, 225, 0.42);
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.sb2-panel-section {
  background:
    radial-gradient(circle at 20% 20%, rgba(193, 60, 255, 0.14), transparent 32%),
    radial-gradient(circle at 80% 60%, rgba(155, 34, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 100%) !important;
}

.sb2-cta-section {
  background: #08030d !important;
}

.sb2-cta-box {
  background:
    radial-gradient(circle at 15% 50%, rgba(193, 60, 255, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  border: 1px solid rgba(216, 180, 255, 0.24);
  border-radius: 30px;
  padding: clamp(30px, 5vw, 56px);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.36),
    0 0 38px rgba(155, 34, 255, 0.18);
}



/* =========================================================
   HOMEPAGE — FEATURED WORK
   Reference: centred heading + three dark purple project cards.
   The current Divi build has sb2-home-work-card entered as an ID,
   so selectors support both the ID and the intended reusable class.
   ========================================================= */

.et_pb_section.sb2-featured-work-section {
  position: relative;
  overflow: hidden;
  padding: 68px 0 72px !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(137, 28, 211, 0.13), transparent 26%),
    radial-gradient(circle at 7% 76%, rgba(105, 17, 157, 0.08), transparent 28%),
    radial-gradient(circle at 93% 72%, rgba(115, 21, 181, 0.08), transparent 28%),
    linear-gradient(180deg, #09030e 0%, #0b0311 55%, #08030d 100%) !important;
}

.et_pb_section.sb2-featured-work-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(182, 55, 242, 0.018) 50%, transparent 100%);
}

/* Intro row */
.sb2-featured-work-section > .et_pb_row:first-child {
  width: 90% !important;
  max-width: 1400px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  text-align: center !important;
}

/* FEATURED WORK with the fine lines seen in the reference. */
.sb2-featured-work-section .sb2-featured-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  color: #a950ef !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.sb2-featured-work-section .sb2-featured-eyebrow::before,
.sb2-featured-work-section .sb2-featured-eyebrow::after {
  content: "";
  display: block;
  width: clamp(70px, 10vw, 150px);
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(168, 70, 232, 0.30) 45%,
      rgba(168, 70, 232, 0.10) 100%
    );
}

.sb2-featured-work-section .sb2-featured-eyebrow::after {
  transform: scaleX(-1);
}

.sb2-featured-work-section .sb2-featured-eyebrow p,
.sb2-featured-work-section .sb2-featured-eyebrow .et_pb_text_inner {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* The reference heading is deliberately much smaller than the global H2 helper. */
.sb2-featured-work-section .sb2-section-heading,
.sb2-featured-work-section .sb2-section-heading p,
.sb2-featured-work-section .sb2-section-heading h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sb2-white) !important;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: clamp(27px, 2.4vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
}

.sb2-featured-work-section .sb2-small-muted,
.sb2-featured-work-section .sb2-small-muted p {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #93879b !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* Three-card grid */
.sb2-featured-work-grid,
.et_pb_row.sb2-featured-work-grid,
.et-db #et-boc .et-l .et_pb_row.sb2-featured-work-grid {
  width: 90% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 24px !important;
  --horizontal-gap: 24px !important;
}

.sb2-featured-work-grid > .et_pb_column {
  position: relative;
  float: none !important;
  flex: 1 1 0 !important;
  width: calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Project card wrapper. */
.sb2-home-work-card,
[id="sb2-home-work-card"] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 82% 100%, rgba(125, 28, 187, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(22, 7, 31, 0.90) 0%, rgba(31, 8, 44, 0.96) 100%) !important;

  border: 1px solid rgba(166, 59, 226, 0.34) !important;
  border-radius: 17px !important;

  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease !important;
}

/* Slightly stronger middle card, as in the supplied reference. */
.sb2-featured-work-grid > .et_pb_column:nth-child(2) .sb2-home-work-card,
.sb2-featured-work-grid > .et_pb_column:nth-child(2) [id="sb2-home-work-card"] {
  border-color: rgba(184, 67, 245, 0.52) !important;
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(140, 31, 222, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.sb2-home-work-card:hover,
[id="sb2-home-work-card"]:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(190, 79, 247, 0.62) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(150, 39, 229, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Project screenshot */
.sb2-home-work-card > .et_pb_image,
[id="sb2-home-work-card"] > .et_pb_image {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px 16px 12px 12px !important;
  background: #08030d !important;
}

.sb2-home-work-card > .et_pb_image .et_pb_image_wrap,
[id="sb2-home-work-card"] > .et_pb_image .et_pb_image_wrap {
  display: block !important;
  width: 100% !important;
}

.sb2-home-work-card > .et_pb_image img,
[id="sb2-home-work-card"] > .et_pb_image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  object-position: center top !important;
  filter: brightness(0.78) saturate(0.88) contrast(1.04);
  transform: scale(1.001);
  transition: filter 0.3s ease, transform 0.35s ease !important;
}

.sb2-home-work-card:hover > .et_pb_image img,
[id="sb2-home-work-card"]:hover > .et_pb_image img {
  filter: brightness(0.88) saturate(0.98) contrast(1.03);
  transform: scale(1.018);
}

/* First text module after the image = project title. */
.sb2-home-work-card > .et_pb_image + .et_pb_text,
[id="sb2-home-work-card"] > .et_pb_image + .et_pb_text {
  margin: 0 !important;
  padding: 17px 68px 0 20px !important;
}

.sb2-home-work-card > .et_pb_image + .et_pb_text p,
[id="sb2-home-work-card"] > .et_pb_image + .et_pb_text p {
  margin: 0 !important;
  padding: 0 !important;
  color: #f7f3fa !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Second text module = category/meta. */
.sb2-home-work-card > .et_pb_image + .et_pb_text + .et_pb_text,
[id="sb2-home-work-card"] > .et_pb_image + .et_pb_text + .et_pb_text {
  margin: 0 !important;
  padding: 5px 68px 0 20px !important;
}

.sb2-home-work-card > .et_pb_image + .et_pb_text + .et_pb_text p,
[id="sb2-home-work-card"] > .et_pb_image + .et_pb_text + .et_pb_text p {
  margin: 0 !important;
  padding: 0 !important;
  color: #9c8fa6 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Convert the current Divi "Click Here" button into the round arrow control. */
.sb2-home-work-card > .et_pb_button_module_wrapper,
[id="sb2-home-work-card"] > .et_pb_button_module_wrapper {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
}

.sb2-home-work-card .et_pb_button,
[id="sb2-home-work-card"] .et_pb_button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 0 !important;
  line-height: 1 !important;

  color: #ffffff !important;
  background:
    linear-gradient(145deg, rgba(88, 18, 124, 0.58), rgba(24, 6, 34, 0.84)) !important;

  border: 1px solid rgba(181, 66, 239, 0.68) !important;
  border-radius: 50% !important;

  box-shadow:
    0 8px 22px rgba(81, 12, 126, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

  text-decoration: none !important;
  transform: none !important;
}

.sb2-home-work-card .et_pb_button::before,
[id="sb2-home-work-card"] .et_pb_button::before {
  display: none !important;
  content: none !important;
}

.sb2-home-work-card .et_pb_button::after,
[id="sb2-home-work-card"] .et_pb_button::after {
  content: "↗" !important;
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.sb2-home-work-card .et_pb_button:hover,
[id="sb2-home-work-card"] .et_pb_button:hover {
  background:
    linear-gradient(145deg, rgba(126, 26, 180, 0.72), rgba(36, 8, 52, 0.90)) !important;
  border-color: rgba(211, 112, 255, 0.82) !important;
  box-shadow:
    0 10px 28px rgba(103, 18, 158, 0.32),
    0 0 18px rgba(150, 39, 229, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Tablet: two cards per row. */
@media (max-width: 980px) {
  .et_pb_section.sb2-featured-work-section {
    padding: 56px 0 60px !important;
  }

  .sb2-featured-work-grid,
  .et_pb_row.sb2-featured-work-grid,
  .et-db #et-boc .et-l .et_pb_row.sb2-featured-work-grid {
    width: calc(100% - 40px) !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    --horizontal-gap: 20px !important;
  }

  .sb2-featured-work-grid > .et_pb_column {
    flex: 0 0 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  .sb2-featured-work-grid > .et_pb_column:last-child {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone: single column. */
@media (max-width: 640px) {
  .sb2-featured-work-section .sb2-featured-eyebrow {
    gap: 10px !important;
  }

  .sb2-featured-work-section .sb2-featured-eyebrow::before,
  .sb2-featured-work-section .sb2-featured-eyebrow::after {
    width: 42px;
  }

  .sb2-featured-work-grid > .et_pb_column,
  .sb2-featured-work-grid > .et_pb_column:last-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .sb2-home-work-card > .et_pb_image + .et_pb_text,
  [id="sb2-home-work-card"] > .et_pb_image + .et_pb_text {
    padding-top: 15px !important;
  }
}


/* =========================================================
   HOMEPAGE — COMBINED SERVICES / ABOUT / PROCESS PANEL
   Reference: three-column glass panel beneath Featured Work.
   ========================================================= */

.sb2-home-info-section,
.et_pb_section.sb2-home-info-section {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 34px 0 76px !important;
  overflow: visible;
  background:
    radial-gradient(circle at 14% 30%, rgba(193, 60, 255, 0.12), transparent 31%),
    radial-gradient(circle at 86% 48%, rgba(155, 34, 255, 0.13), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #0b0310 100%) !important;
}

.sb2-home-info-panel,
.et_pb_row.sb2-home-info-panel,
.et-db #et-boc .et-l .et_pb_row.sb2-home-info-panel {
  position: relative;
  box-sizing: border-box !important;
  width: 90% !important;
  max-width: 1400px !important;
  min-height: 500px;
  margin: 0 auto !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;

  overflow: hidden !important;

  background:
    radial-gradient(circle at 16% 20%, rgba(193, 60, 255, 0.17), transparent 33%),
    radial-gradient(circle at 54% 38%, rgba(116, 17, 164, 0.10), transparent 38%),
    radial-gradient(circle at 88% 76%, rgba(155, 34, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(34, 8, 48, 0.96) 0%, rgba(22, 5, 32, 0.97) 48%, rgba(28, 6, 40, 0.96) 100%) !important;

  border: 1px solid rgba(193, 60, 255, 0.34) !important;
  border-radius: 18px !important;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(155, 34, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Remove Divi's default column spacing inside the single joined panel. */
.sb2-home-info-panel > .et_pb_column {
  position: relative;
  box-sizing: border-box !important;
  float: none !important;

  flex: 1 1 33.3333% !important;
  width: 33.3333% !important;
  max-width: 33.3333% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 40px 42px 42px !important;

  background: transparent !important;
}

.sb2-home-info-panel > .et_pb_column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(216, 180, 255, 0.13) 10%,
    rgba(193, 60, 255, 0.24) 50%,
    rgba(216, 180, 255, 0.13) 90%,
    transparent 100%
  );
}

/* Home info panel responsive sizing. */
@media (max-width: 1180px) {
  .sb2-home-info-panel,
  .et_pb_row.sb2-home-info-panel,
  .et-db #et-boc .et-l .et_pb_row.sb2-home-info-panel {
    width: calc(100% - 72px) !important;
  }

  .sb2-home-info-panel > .et_pb_column {
    padding: 40px 34px 42px !important;
  }
}

@media (max-width: 980px) {
  .sb2-home-info-section,
  .et_pb_section.sb2-home-info-section {
    padding: 28px 0 58px !important;
  }

  .sb2-home-info-panel,
  .et_pb_row.sb2-home-info-panel,
  .et-db #et-boc .et-l .et_pb_row.sb2-home-info-panel {
    width: calc(100% - 40px) !important;
    min-height: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .sb2-home-info-panel > .et_pb_column {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 28px 36px !important;
  }

  .sb2-home-info-panel > .et_pb_column:not(:last-child)::after {
    top: auto;
    left: 28px;
    right: 28px;
    bottom: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(216, 180, 255, 0.14) 12%,
      rgba(193, 60, 255, 0.26) 50%,
      rgba(216, 180, 255, 0.14) 88%,
      transparent 100%
    );
  }
}

@media (max-width: 480px) {
  .sb2-home-info-panel,
  .et_pb_row.sb2-home-info-panel,
  .et-db #et-boc .et-l .et_pb_row.sb2-home-info-panel {
    width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 15px !important;
  }

  .sb2-home-info-panel > .et_pb_column {
    padding: 28px 22px 32px !important;
  }
}

/* Small plain uppercase labels used inside the three-column home panel. */
.sb2-home-panel-eyebrow,
.et_pb_text.sb2-home-panel-eyebrow {
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.sb2-home-panel-eyebrow .et_pb_text_inner,
.sb2-home-panel-eyebrow p,
.et_pb_text.sb2-home-panel-eyebrow .et_pb_text_inner,
.et_pb_text.sb2-home-panel-eyebrow p {
  margin: 0 !important;
  padding: 0 !important;
  color: #b66cff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.sb2-home-panel-heading,
.et_pb_text.sb2-home-panel-heading {
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.sb2-home-panel-heading h2,
.sb2-home-panel-heading h3,
.sb2-home-panel-heading h4,
.sb2-home-panel-heading .et_pb_text_inner,
.et_pb_text.sb2-home-panel-heading h2,
.et_pb_text.sb2-home-panel-heading h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

/* Services column. */
.sb2-home-services {
  min-width: 0;
}

/* Each service item is a compact icon + copy row. */
.sb2-home-service-item,
.et_pb_row.sb2-home-service-item {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  margin: 0 0 17px !important;
  padding: 0 !important;
  background: transparent !important;
}

.sb2-home-service-item > .et_pb_column {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  background: transparent !important;
}

.sb2-home-service-item > .et_pb_column:first-child {
  flex: 0 0 46px !important;
  width: 46px !important;
  max-width: 46px !important;
}

.sb2-home-service-item > .et_pb_column:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Circular service icons. Works with Divi Icon modules and common icon wrappers. */
.sb2-home-service-icon,
.et_pb_icon.sb2-home-service-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.10), transparent 38%),
    rgba(119, 20, 164, 0.22) !important;
  border: 1px solid rgba(193, 60, 255, 0.68) !important;
  box-shadow:
    0 0 20px rgba(155, 34, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

/*
 * Force Divi's internal icon layers to use the full circle as their
 * alignment box. This prevents the glyph drifting at wide breakpoints.
 */
.sb2-home-service-icon .et_pb_icon_wrap,
.et_pb_icon.sb2-home-service-icon .et_pb_icon_wrap {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

.sb2-home-service-icon .et-pb-icon,
.et_pb_icon.sb2-home-service-icon .et-pb-icon,
.sb2-home-service-icon span,
.sb2-home-service-icon i {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f1ddff !important;
  font-size: 19px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  transform: none !important;
  text-shadow: 0 0 12px rgba(193, 60, 255, 0.28);
}

/* Service title + description. */
.sb2-home-service-copy,
.et_pb_text.sb2-home-service-copy {
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-home-service-copy .et_pb_text_inner {
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-home-service-copy h4,
.sb2-home-service-copy h3,
.et_pb_text.sb2-home-service-copy h4,
.et_pb_text.sb2-home-service-copy h3 {
  margin: 0 0 3px !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.sb2-home-service-copy p,
.et_pb_text.sb2-home-service-copy p {
  margin: 0 !important;
  padding: 0 !important;
  color: #a99ab7 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
}

/* Reusable small text link used at the base of each home panel. */
.sb2-text-link,
.et_pb_text.sb2-text-link {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 8px 0 0 !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid rgba(193, 60, 255, 0.72);
}

.sb2-text-link .et_pb_text_inner,
.sb2-text-link p,
.sb2-text-link a,
.et_pb_text.sb2-text-link .et_pb_text_inner,
.et_pb_text.sb2-text-link p,
.et_pb_text.sb2-text-link a {
  margin: 0 !important;
  padding: 0 !important;
  color: #c664ff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.sb2-text-link:hover,
.sb2-text-link:hover a {
  color: #e0a6ff !important;
  border-color: #e0a6ff;
}

/* Tablet: retain joined panel but allow its columns to stack cleanly. */
@media (max-width: 980px) {
  .sb2-home-info-panel,
  .et_pb_row.sb2-home-info-panel {
    display: block !important;
  }

  .sb2-home-info-panel > .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    padding: 30px 28px !important;
  }

  .sb2-home-info-panel > .et_pb_column:not(:last-child)::after {
    top: auto;
    left: 28px;
    right: 28px;
    bottom: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(193, 60, 255, 0.24), transparent);
  }
}

@media (max-width: 767px) {
  .sb2-home-info-panel > .et_pb_column {
    padding: 27px 22px !important;
  }

  .sb2-home-service-item,
  .et_pb_row.sb2-home-service-item {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .sb2-home-service-item > .et_pb_column:first-child,
  .sb2-home-service-icon,
  .et_pb_icon.sb2-home-service-icon {
    flex-basis: 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* =========================================================
   WORK PAGE
   ========================================================= */

.sb2-work-hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 82% 20%, rgba(155, 34, 255, 0.36), transparent 32%),
    radial-gradient(circle at 15% 62%, rgba(193, 60, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 50%, #2a0a3a 100%) !important;
  overflow: hidden;
  position: relative;
}

.sb2-work-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sb2-work-filter a,
.sb2-work-filter .et_pb_button {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
  border: 1px solid rgba(216, 180, 255, 0.22) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sb2-work-filter a:hover,
.sb2-work-filter .et_pb_button:hover {
  background: rgba(193, 60, 255, 0.16) !important;
  border-color: rgba(193, 60, 255, 0.55) !important;
}

.sb2-featured-work-section,
.sb2-gallery-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 34, 255, 0.2), transparent 35%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-feature-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--sb2-radius-lg);
  padding: 28px;
  min-height: 340px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  border: 1px solid rgba(216, 180, 255, 0.24);
}

.sb2-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 15%, rgba(193, 60, 255, 0.22), transparent 36%);
  pointer-events: none;
}

.sb2-work-card {
  height: 100%;
  overflow: hidden;
}

.sb2-work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sb2-work-card .et_pb_text,
.sb2-work-card .sb2-card-inner {
  padding-left: 22px;
  padding-right: 22px;
}

.sb2-work-card h3 {
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 8px;
}

.sb2-work-card p {
  color: var(--sb2-muted);
  font-size: 15px;
}

.sb2-work-tag,
.sb2-tag {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  background: rgba(193, 60, 255, 0.13);
  border: 1px solid rgba(216, 180, 255, 0.18);
  color: var(--sb2-lavender);
  font-size: 12px;
  font-weight: 700;
}

.sb2-coming-soon-card {
  opacity: 0.72;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px dashed rgba(216, 180, 255, 0.24);
  border-radius: 24px;
  padding: 34px;
  text-align: center;
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

.sb2-services-hero {
  min-height: 76vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 18%, rgba(193, 60, 255, 0.28), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(155, 34, 255, 0.18), transparent 36%),
    linear-gradient(180deg, #08030d 0%, #16061d 52%, #2a0a3a 100%) !important;
}

.sb2-services-overview,
.sb2-pricing-section,
.sb2-faq-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 34, 255, 0.16), transparent 32%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-service-mini-card {
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 180, 255, 0.16);
  border-radius: 22px;
  padding: 24px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: var(--sb2-transition);
}

.sb2-service-mini-card:hover {
  transform: translateY(-5px);
  border-color: rgba(193, 60, 255, 0.46);
}

.sb2-service-mini-card h3 {
  color: #ffffff;
  font-size: 22px;
}

.sb2-service-mini-card p {
  color: var(--sb2-muted);
  font-size: 15px;
}

.sb2-pricing-card {
  height: 100%;
  padding: 34px;
}

.sb2-pricing-card-featured {
  border-color: rgba(193, 60, 255, 0.64);
  background:
    radial-gradient(circle at 80% 0%, rgba(193, 60, 255, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.07);
}

.sb2-pricing-card h3 {
  color: #ffffff;
  font-size: 28px;
}

.sb2-price {
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.04em;
}

.sb2-price-note {
  color: var(--sb2-muted);
  font-size: 14px;
}

.sb2-pricing-card ul {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.sb2-pricing-card li {
  color: var(--sb2-lavender);
  margin-bottom: 11px;
}

.sb2-pricing-card li::before {
  content: "✦";
  color: var(--sb2-magenta);
  margin-right: 8px;
}

.sb2-service-price-card {
  height: 100%;
  padding: 26px;
}

.sb2-service-price-card h3 {
  color: #ffffff;
  font-size: 22px;
}

.sb2-service-price-card p {
  color: var(--sb2-muted);
}

.sb2-service-price-card .sb2-from-price,
.sb2-from-price {
  display: inline-block;
  margin: 10px 0 16px;
  color: #ffffff;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-weight: 700;
  font-size: 24px;
}

.sb2-support-card {
  height: 100%;
  background:
    radial-gradient(circle at 80% 0%, rgba(193, 60, 255, 0.14), transparent 32%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 180, 255, 0.18);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Divi Toggle FAQ styling */
.sb2-faq-section .et_pb_toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(216, 180, 255, 0.16) !important;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 14px;
}

.sb2-faq-section .et_pb_toggle_title {
  color: #ffffff !important;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
}

.sb2-faq-section .et_pb_toggle_content {
  color: var(--sb2-muted) !important;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.sb2-about-hero {
  min-height: 76vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(155, 34, 255, 0.3), transparent 34%),
    radial-gradient(circle at 20% 70%, rgba(193, 60, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 50%, #2a0a3a 100%) !important;
}

.sb2-about-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  border: 1px solid rgba(216, 180, 255, 0.22);
  border-radius: 30px;
  padding: clamp(28px, 4vw, 44px);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--sb2-shadow);
}

.sb2-values-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(193, 60, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-value-card {
  height: 100%;
  padding: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 180, 255, 0.16);
  border-radius: 24px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* =========================================================
   PROCESS PAGE
   ========================================================= */

.sb2-process-hero {
  min-height: 72vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(193, 60, 255, 0.26), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 55%, #2a0a3a 100%) !important;
}

.sb2-process-section {
  background:
    radial-gradient(circle at 18% 20%, rgba(193, 60, 255, 0.13), transparent 32%),
    radial-gradient(circle at 82% 64%, rgba(155, 34, 255, 0.18), transparent 36%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-process-step {
  position: relative;
  padding: 30px;
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(216, 180, 255, 0.18);
  border-radius: 26px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.sb2-step-number {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9b22ff, #c13cff);
  color: #ffffff;
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(155, 34, 255, 0.34);
}

/* =========================================================
   BLOG PAGE / POSTS
   ========================================================= */

.sb2-blog-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 76% 20%, rgba(155, 34, 255, 0.26), transparent 34%),
    linear-gradient(180deg, #08030d 0%, #16061d 55%, #2a0a3a 100%) !important;
}

.sb2-blog-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(193, 60, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

/* Divi Blog Module */
.sb2-blog-section .et_pb_post {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(216, 180, 255, 0.16);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--sb2-shadow);
  transition: var(--sb2-transition);
}

.sb2-blog-section .et_pb_post:hover {
  transform: translateY(-7px);
  border-color: rgba(193, 60, 255, 0.52);
  box-shadow:
    var(--sb2-shadow-strong),
    var(--sb2-glow);
}

.sb2-blog-section .et_pb_post .entry-title,
.sb2-blog-section .et_pb_post .entry-title a {
  color: #ffffff !important;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
}

.sb2-blog-section .et_pb_post .post-meta,
.sb2-blog-section .et_pb_post .post-meta a,
.sb2-blog-section .et_pb_post .post-content,
.sb2-blog-section .et_pb_post p {
  color: var(--sb2-muted) !important;
}

.sb2-blog-section .more-link {
  color: var(--sb2-magenta) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}

/* Single blog posts */
.single-post #main-content {
  background: #08030d;
}

.single-post .entry-title {
  color: #ffffff;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
}

.single-post .post-meta,
.single-post .post-meta a,
.single-post .entry-content p,
.single-post .entry-content li {
  color: var(--sb2-muted);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.sb2-contact-hero {
  min-height: 68vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(193, 60, 255, 0.28), transparent 34%),
    radial-gradient(circle at 16% 70%, rgba(155, 34, 255, 0.16), transparent 36%),
    linear-gradient(180deg, #08030d 0%, #16061d 52%, #2a0a3a 100%) !important;
}

.sb2-contact-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 34, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-contact-card {
  padding: clamp(28px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(216, 180, 255, 0.18);
  border-radius: 30px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--sb2-shadow);
}

/* Divi Contact Form */
.sb2-contact-card .et_pb_contact_field input,
.sb2-contact-card .et_pb_contact_field textarea,
.sb2-contact-card .et_pb_contact_field select {
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid rgba(216, 180, 255, 0.18) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 16px !important;
}

.sb2-contact-card .et_pb_contact_field input::placeholder,
.sb2-contact-card .et_pb_contact_field textarea::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.sb2-contact-card .et_pb_contact_field input:focus,
.sb2-contact-card .et_pb_contact_field textarea:focus,
.sb2-contact-card .et_pb_contact_field select:focus {
  border-color: rgba(193, 60, 255, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(193, 60, 255, 0.12);
}

.sb2-contact-card .et_contact_bottom_container {
  float: none;
  margin-top: 16px;
}

.sb2-contact-card .et_pb_contact_submit {
  background: linear-gradient(135deg, #9b22ff 0%, #c13cff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(216, 180, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* =========================================================
   CASE STUDY TEMPLATE
   ========================================================= */

.sb2-case-hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 18%, rgba(155, 34, 255, 0.32), transparent 34%),
    radial-gradient(circle at 18% 70%, rgba(193, 60, 255, 0.14), transparent 36%),
    linear-gradient(180deg, #08030d 0%, #16061d 52%, #2a0a3a 100%) !important;
}

.sb2-case-overview {
  background:
    radial-gradient(circle at 50% 0%, rgba(193, 60, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #16061d 0%, #08030d 100%) !important;
}

.sb2-case-card {
  padding: clamp(26px, 4vw, 40px);
}

.sb2-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sb2-case-meta span {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(193, 60, 255, 0.13);
  border: 1px solid rgba(216, 180, 255, 0.18);
  color: var(--sb2-lavender);
  font-size: 13px;
  font-weight: 700;
}

.sb2-case-gallery img {
  border-radius: 22px;
  border: 1px solid rgba(216, 180, 255, 0.16);
  box-shadow: var(--sb2-shadow);
}

/* =========================================================
   DIVI MODULE TWEAKS
   ========================================================= */

.sb2-glass-panel .et_pb_blurb_container h4,
.sb2-card .et_pb_blurb_container h4 {
  color: #ffffff;
}

.sb2-glass-panel .et_pb_main_blurb_image .et-pb-icon,
.sb2-card .et_pb_main_blurb_image .et-pb-icon {
  color: var(--sb2-magenta);
}

.sb2-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 255, 0.26), transparent);
}

.sb2-list ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.sb2-list li {
  color: var(--sb2-lavender);
  margin-bottom: 10px;
}

.sb2-list li::before {
  content: "✦";
  color: var(--sb2-magenta);
  margin-right: 8px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */


@media (max-width: 1180px) {
  .sb2-glass-header .et_pb_row,
  .et-db #et-boc .et-l .sb2-glass-header .et_pb_row,
  .et-l--header .sb2-glass-header .et_pb_row {
    width: calc(100% - 72px) !important;
  }

  .sb2-glass-header .et_pb_menu__menu > nav > ul {
    gap: 26px !important;
  }
}

@media (max-width: 980px) {
  .sb2-split-55-45,
  .sb2-split-58-42,
  .sb2-split-52-48,
  .sb2-split-60-40,
  .sb2-split-70-30,
  .sb2-split-45-55 {
    display: block;
  }

  .sb2-split-55-45 .et_pb_column:first-child,
  .sb2-split-55-45 .et_pb_column:last-child,
  .sb2-split-58-42 .et_pb_column:first-child,
  .sb2-split-58-42 .et_pb_column:last-child,
  .sb2-split-52-48 .et_pb_column:first-child,
  .sb2-split-52-48 .et_pb_column:last-child,
  .sb2-split-60-40 .et_pb_column:first-child,
  .sb2-split-60-40 .et_pb_column:last-child,
  .sb2-split-70-30 .et_pb_column:first-child,
  .sb2-split-70-30 .et_pb_column:last-child,
  .sb2-split-45-55 .et_pb_column:first-child,
  .sb2-split-45-55 .et_pb_column:last-child {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .sb2-featured-panel {
    transform: none;
    margin-top: 32px;
  }

  .sb2-hero-heading h1,
  .sb2-hero-heading {
    font-size: clamp(44px, 13vw, 68px);
  }

  .sb2-page-heading h1,
  .sb2-page-heading {
    font-size: clamp(42px, 12vw, 64px);
  }

  .sb2-glass-panel,
  .sb2-project-card,
  .sb2-work-card,
  .sb2-pricing-card,
  .sb2-service-price-card,
  .sb2-feature-card {
    margin-bottom: 24px;
  }

  .sb2-glass-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .sb2-trust-strip {
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .sb2-hero-section,
  .sb2-work-hero,
  .sb2-services-hero,
  .sb2-about-hero,
  .sb2-process-hero,
  .sb2-blog-hero,
  .sb2-contact-hero,
  .sb2-case-hero {
    min-height: auto;
    padding-top: 110px !important;
    padding-bottom: 70px !important;
  }

  .sb2-glass-panel,
  .sb2-card,
  .sb2-work-card,
  .sb2-project-card,
  .sb2-pricing-card,
  .sb2-service-price-card,
  .sb2-feature-card,
  .sb2-contact-card,
  .sb2-about-card,
  .sb2-case-card {
    border-radius: 22px;
  }

  .sb2-btn-primary,
  .et_pb_button.sb2-btn-primary,
  .sb2-btn-secondary,
  .et_pb_button.sb2-btn-secondary {
    width: 100%;
    text-align: center;
  }

  .sb2-button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .sb2-button-group a {
    width: 100%;
  }

  .sb2-work-filter {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }

  .sb2-work-filter a,
  .sb2-work-filter .et_pb_button {
    white-space: nowrap;
  }

  .sb2-price {
    font-size: 38px;
  }
}

/* =========================================================
   FINAL EXACT PREVIEW BUTTON OVERRIDE — HEADER CTA
   Purpose: make the live Divi header button visually match the generated
   reference image, including the darker right-side arrow zone.

   Live button HTML:
   <a class="et_pb_button et_pb_button_0_tb_header sb2-btn-primary et_pb_bg_layout_light">
   ========================================================= */

html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l.et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_column_2_tb_header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light,
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light,
html body #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 114px !important;
  min-width: 114px !important;
  max-width: 114px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;

  /* Hide the real Divi text so the CSS can place the label and arrow exactly. */
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;

  color: transparent !important;
  text-decoration: none !important;
  text-transform: none !important;

  background-color: #7512bd !important;
  background-image:
    linear-gradient(90deg,
      rgba(159, 25, 255, 1) 0%,
      rgba(180, 41, 255, 1) 44%,
      rgba(152, 31, 226, 1) 67%,
      rgba(70, 21, 93, 0.94) 100%
    ) !important;
  background-clip: padding-box !important;

  border: 1px solid rgba(188, 79, 241, 0.72) !important;
  border-right-color: rgba(118, 55, 154, 0.86) !important;
  border-bottom-color: rgba(91, 33, 129, 0.9) !important;
  border-radius: 9px !important;
  outline: 0 !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset -30px 0 28px rgba(25, 7, 42, 0.42),
    0 10px 28px rgba(91, 9, 145, 0.48),
    0 0 28px rgba(160, 30, 255, 0.42) !important;

  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Label: replaces the original anchor text for precise sizing/placement. */
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l.et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_column_2_tb_header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::before,
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::before,
html body #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::before {
  content: "LET'S TALK" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;

  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.24) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Arrow: creates the darker right-side arrow area from the reference. */
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l.et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_column_2_tb_header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::after,
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::after,
html body #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light::after {
  content: "↗" !important;
  position: absolute !important;
  z-index: 3 !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-52%) !important;
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;

  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;

  background: rgba(30, 8, 52, 0.24) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc header.et-l.et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_column_2_tb_header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light:hover,
html body.wp-theme-Divi.wp-child-theme-SB2-NEW #page-container #et-boc .et-l--header .et_pb_section_0_tb_header.sb2-glass-header .et_pb_button_module_wrapper.et_pb_button_0_tb_header_wrapper a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light:hover,
html body #page-container #et-boc .et-l--header a.et_pb_button.et_pb_button_0_tb_header.sb2-btn-primary.et_pb_bg_layout_light:hover {
  background-color: #8617d1 !important;
  background-image:
    linear-gradient(90deg,
      rgba(166, 28, 255, 1) 0%,
      rgba(188, 52, 255, 1) 44%,
      rgba(158, 34, 233, 1) 67%,
      rgba(76, 22, 101, 0.96) 100%
    ) !important;
  border-color: rgba(202, 95, 255, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset -30px 0 28px rgba(25, 7, 42, 0.42),
    0 12px 30px rgba(104, 12, 162, 0.52),
    0 0 34px rgba(177, 44, 255, 0.48) !important;
  transform: translateY(-1px) !important;
  color: transparent !important;
}
/* =========================================================
   REFERENCE FIDELITY PASS
   Consolidated homepage corrections based on visual comparison
   with the supplied Stuff By Two reference.
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL COLOUR SAFETY
   Divi's light-layout rules can otherwise reintroduce black
   headings and dark paragraph text inside the dark homepage.
   --------------------------------------------------------- */

body,
#page-container,
#main-content,
.et-l--post,
.et-l--post .et_builder_inner_content {
  background-color: var(--sb2-black) !important;
}

.sb2-hero-section .et_pb_bg_layout_light,
.sb2-featured-work-section .et_pb_bg_layout_light,
.sb2-home-info-section .et_pb_bg_layout_light {
  color: var(--sb2-muted) !important;
}

.sb2-hero-section h1,
.sb2-hero-section h2,
.sb2-hero-section h3,
.sb2-featured-work-section h1,
.sb2-featured-work-section h2,
.sb2-featured-work-section h3,
.sb2-featured-work-section .sb2-section-heading,
.sb2-featured-work-section .sb2-section-heading p,
.sb2-home-info-section h1,
.sb2-home-info-section h2,
.sb2-home-info-section h3,
.sb2-home-info-section h4 {
  color: var(--sb2-white) !important;
}


/* ---------------------------------------------------------
   HERO BACKGROUND
   Darker left side, restrained geometry, purple illumination
   concentrated toward the artwork side like the reference.
   --------------------------------------------------------- */

.sb2-hero-section,
.et_pb_section.sb2-hero-section {
  position: relative !important;
  display: block !important;
  min-height: 760px !important;
  overflow: hidden !important;
  padding-bottom: 82px !important;

  background:
    radial-gradient(
      ellipse at 86% 24%,
      rgba(145, 29, 207, 0.30) 0%,
      rgba(94, 20, 132, 0.15) 24%,
      rgba(38, 8, 53, 0.07) 42%,
      transparent 61%
    ),
    radial-gradient(
      ellipse at 60% 82%,
      rgba(104, 18, 149, 0.09) 0%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      #08030d 0%,
      #09030e 38%,
      #0e0415 63%,
      #160621 100%
    ) !important;
}

/* Replace the previous oversized crossing bands with finer,
   lower-contrast geometric shapes mostly on the right. */
.sb2-hero-section::before,
.et_pb_section.sb2-hero-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;

  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 62%,
      rgba(116, 26, 158, 0.11) 62%,
      rgba(116, 26, 158, 0.11) 74%,
      transparent 74%,
      transparent 100%
    ),
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 72%,
      rgba(157, 44, 213, 0.065) 72%,
      rgba(157, 44, 213, 0.065) 83%,
      transparent 83%,
      transparent 100%
    ) !important;
}

/* Very soft vertical glow behind the future right-hand artwork. */
.sb2-hero-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4%;
  right: -8%;
  width: 54%;
  height: 90%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(151, 37, 218, 0.13) 0%,
      rgba(91, 18, 129, 0.05) 46%,
      transparent 72%
    );
  filter: blur(3px);
}


/* ---------------------------------------------------------
   HERO LAYOUT AND SPACING
   --------------------------------------------------------- */

html body.wp-theme-Divi.wp-child-theme-SB2-NEW
#page-container #et-boc .et-l--post
.et_pb_section_0.sb2-hero-section.et_pb_section {
  padding-top: 126px !important;
  padding-bottom: 82px !important;
}

.sb2-hero-section > .et_pb_row,
.sb2-hero-section .et_pb_row_0 {
  position: relative !important;
  z-index: 2 !important;
  width: 90% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: center !important;
}

/* Keep the left content generous enough that Built By Two
   stays on one line at standard desktop widths. */
@media (min-width: 1181px) {
  .sb2-hero-section .sb2-split-55-45 .et_pb_column:first-child,
  .sb2-hero-section .et_pb_row_0 .et_pb_column:first-child {
    width: 54% !important;
    max-width: 760px !important;
    margin-right: 4% !important;
  }

  .sb2-hero-section .sb2-split-55-45 .et_pb_column:last-child,
  .sb2-hero-section .et_pb_row_0 .et_pb_column:last-child {
    width: 42% !important;
  }
}

/* Eyebrow */
.sb2-hero-section .sb2-eyebrow {
  min-height: 28px !important;
  padding: 6px 13px !important;
  margin: 0 !important;
  border-radius: 9px !important;

  color: #a76ae8 !important;
  background:
    linear-gradient(
      135deg,
      rgba(67, 14, 88, 0.25),
      rgba(16, 5, 22, 0.48)
    ) !important;
  border: 1px solid rgba(157, 67, 213, 0.19) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 0 18px rgba(118, 25, 168, 0.07) !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
}

.sb2-hero-section .sb2-eyebrow::after {
  content: "—" !important;
  margin-left: 9px !important;
  color: #8f42d3 !important;
  opacity: 0.72 !important;
}

/* Individual hero module spacing, matching the reference rhythm. */
.sb2-hero-section .et_pb_text_0 {
  margin: 0 0 24px !important;
}

.sb2-hero-section .et_pb_text_1 {
  margin: 0 0 26px !important;
}

.sb2-hero-section .et_pb_text_2 {
  margin: 0 0 0 !important;
}

/* Hero heading */
.sb2-hero-section .sb2-hero-heading,
.sb2-hero-section .sb2-hero-heading h1,
html body #page-container #et-boc
.sb2-hero-section .et_pb_text.sb2-hero-heading h1 {
  margin: 0 !important;
  padding: 0 !important;

  color: #f5f2f7 !important;
  font-family: "Space Grotesk", "Inter", Arial, sans-serif !important;
  font-size: clamp(58px, 4.25vw, 78px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.052em !important;
}

/* Force the unwrapped first line to the correct off-white.
   The second line remains the gradient span. */
.sb2-hero-section .sb2-hero-heading h1 {
  -webkit-text-fill-color: #f5f2f7 !important;
}

.sb2-hero-section .sb2-hero-heading .sb2-gradient-text {
  display: inline-block !important;
  white-space: nowrap !important;

  background:
    linear-gradient(
      100deg,
      #bd3cf5 0%,
      #a92cf4 42%,
      #7d29ef 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Hero body copy */
.sb2-hero-section .et_pb_text_2,
.sb2-hero-section .et_pb_text_2 p,
html body #page-container #et-boc
.sb2-hero-section .et_pb_text_2.et_pb_bg_layout_light p {
  max-width: 520px !important;
  color: #aaa0af !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

/* Button row */
.sb2-hero-section .sb2-button-group {
  display: flex !important;
  align-items: center !important;
  gap: 17px !important;
  flex-wrap: wrap !important;
  margin: 30px 0 0 !important;
}

/* Hero buttons get the slightly lower, richer gradient used in
   the reference rather than the brighter global purple treatment. */
.sb2-hero-section .sb2-button-group .sb2-btn-primary {
  min-width: 178px !important;
  min-height: 48px !important;
  padding: 0 22px !important;

  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(255, 255, 255, 0.14),
      transparent 34%
    ),
    linear-gradient(
      105deg,
      #9415ef 0%,
      #aa22eb 50%,
      #6f13a9 100%
    ) !important;

  border: 1px solid rgba(189, 79, 239, 0.52) !important;
  border-radius: 10px !important;

  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.018em !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(46, 4, 69, 0.42),
    0 10px 28px rgba(101, 14, 157, 0.25) !important;
}

.sb2-hero-section .sb2-button-group .sb2-btn-secondary {
  min-width: 196px !important;
  min-height: 48px !important;
  padding: 0 22px !important;

  background:
    linear-gradient(
      135deg,
      rgba(26, 7, 36, 0.54),
      rgba(7, 3, 11, 0.66)
    ) !important;

  border: 1px solid rgba(165, 108, 193, 0.27) !important;
  border-radius: 10px !important;

  color: #f4f0f6 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.018em !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 10px 24px rgba(0, 0, 0, 0.15) !important;
}


/* ---------------------------------------------------------
   TRUSTED BY
   Current HTML only contains three text spans. CSS can match
   the heading, spacing and muted logo-strip feel. Replacing
   those spans with actual logo images remains a later content step.
   --------------------------------------------------------- */

.sb2-hero-section .sb2-trust-strip {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 38px !important;

  max-width: 660px !important;
  margin: 38px 0 0 !important;
  padding: 25px 0 0 !important;

  color: rgba(203, 193, 210, 0.45) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.035em !important;
  text-transform: none !important;
}

.sb2-hero-section .sb2-trust-strip::before {
  content: "TRUSTED BY GREAT BRANDS";
  flex: 0 0 100%;
  display: block;
  margin: 0 0 17px !important;

  color: #8343b7 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.sb2-hero-section .sb2-trust-strip span {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px;
  color: #756e7b !important;
  opacity: 0.75;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

/* Add a restrained mark so the current text labels read more
   like a muted logo strip until the real logo row is built. */
.sb2-hero-section .sb2-trust-strip span::before {
  content: "◆";
  display: inline-block;
  margin-right: 7px;
  color: #77707f;
  font-size: 8px;
  opacity: 0.72;
}


/* ---------------------------------------------------------
   FEATURED WORK HEADING
   --------------------------------------------------------- */

.et_pb_section.sb2-featured-work-section {
  padding-top: 58px !important;
  padding-bottom: 74px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(112, 24, 164, 0.10), transparent 28%),
    linear-gradient(180deg, #09030e 0%, #08030d 100%) !important;
}

/* Force the eyebrow into a three-part grid so the horizontal
   rules cannot collapse under Divi's Text Module markup. */
.sb2-featured-work-section .sb2-featured-eyebrow,
html body #page-container #et-boc
.sb2-featured-work-section .et_pb_text.sb2-featured-eyebrow {
  display: grid !important;
  grid-template-columns: minmax(80px, 150px) auto minmax(80px, 150px) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 18px !important;

  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin: 0 auto 11px !important;
  padding: 0 !important;

  color: #a33ee1 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

.sb2-featured-work-section .sb2-featured-eyebrow::before,
.sb2-featured-work-section .sb2-featured-eyebrow::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(137, 46, 190, 0.12) 18%,
      rgba(160, 55, 219, 0.34) 100%
    ) !important;
}

.sb2-featured-work-section .sb2-featured-eyebrow::after {
  transform: scaleX(-1) !important;
}

.sb2-featured-work-section .sb2-featured-eyebrow .et_pb_text_inner {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sb2-featured-work-section .sb2-featured-eyebrow p {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  color: inherit !important;
}

/* Stronger Divi-specific heading colour override. */
.sb2-featured-work-section .sb2-section-heading,
.sb2-featured-work-section .sb2-section-heading .et_pb_text_inner,
.sb2-featured-work-section .sb2-section-heading p,
html body #page-container #et-boc
.sb2-featured-work-section .et_pb_text.sb2-section-heading,
html body #page-container #et-boc
.sb2-featured-work-section .et_pb_text.sb2-section-heading p {
  color: #f3eff5 !important;
  -webkit-text-fill-color: #f3eff5 !important;
}

.sb2-featured-work-section .sb2-section-heading,
.sb2-featured-work-section .sb2-section-heading p {
  font-size: clamp(26px, 2.0vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.sb2-featured-work-section .sb2-small-muted,
.sb2-featured-work-section .sb2-small-muted p,
html body #page-container #et-boc
.sb2-featured-work-section .sb2-small-muted p {
  color: #958a9c !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Tighten the space between the heading group and cards. */
.sb2-featured-work-section > .et_pb_row:first-child,
.sb2-featured-work-section .et_pb_row_1 {
  margin-bottom: 24px !important;
}


/* ---------------------------------------------------------
   FEATURED WORK CARDS
   This remains a static three-card layout for now. Carousel
   behaviour and angled side cards will be handled separately.
   --------------------------------------------------------- */

.sb2-featured-work-grid,
.et_pb_row.sb2-featured-work-grid {
  width: 90% !important;
  max-width: 1400px !important;
  gap: 24px !important;
}

.sb2-home-work-card,
[id="sb2-home-work-card"] {
  background:
    radial-gradient(circle at 82% 100%, rgba(116, 27, 173, 0.15), transparent 46%),
    linear-gradient(180deg, #100516 0%, #21072d 100%) !important;

  border-color: rgba(151, 48, 205, 0.38) !important;
  border-radius: 17px !important;

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.sb2-featured-work-grid > .et_pb_column:nth-child(2)
.sb2-home-work-card,
.sb2-featured-work-grid > .et_pb_column:nth-child(2)
[id="sb2-home-work-card"] {
  border-color: rgba(182, 57, 235, 0.56) !important;

  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(138, 31, 207, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.sb2-home-work-card > .et_pb_image img,
[id="sb2-home-work-card"] > .et_pb_image img {
  filter: brightness(0.70) saturate(0.78) contrast(1.08) !important;
}

.sb2-home-work-card > .et_pb_image + .et_pb_text p,
[id="sb2-home-work-card"] > .et_pb_image + .et_pb_text p {
  color: #f2eef4 !important;
}

.sb2-home-work-card > .et_pb_image + .et_pb_text + .et_pb_text p,
[id="sb2-home-work-card"] > .et_pb_image + .et_pb_text + .et_pb_text p {
  color: #93869d !important;
}


/* ---------------------------------------------------------
   RESPONSIVE HERO CORRECTIONS
   --------------------------------------------------------- */

@media (max-width: 1180px) {
  .sb2-hero-section .sb2-hero-heading,
  .sb2-hero-section .sb2-hero-heading h1 {
    font-size: clamp(52px, 5.7vw, 68px) !important;
  }

  .sb2-hero-section .sb2-hero-heading .sb2-gradient-text {
    white-space: normal !important;
  }
}

@media (max-width: 980px) {
  html body.wp-theme-Divi.wp-child-theme-SB2-NEW
  #page-container #et-boc .et-l--post
  .et_pb_section_0.sb2-hero-section.et_pb_section {
    min-height: 0 !important;
    padding-top: 102px !important;
    padding-bottom: 68px !important;
  }

  .sb2-hero-section > .et_pb_row,
  .sb2-hero-section .et_pb_row_0 {
    width: calc(100% - 40px) !important;
  }

  .sb2-hero-section .sb2-hero-heading,
  .sb2-hero-section .sb2-hero-heading h1 {
    font-size: clamp(48px, 8vw, 64px) !important;
  }

  .sb2-hero-section .et_pb_text_2,
  .sb2-hero-section .et_pb_text_2 p {
    max-width: 600px !important;
  }

  .sb2-hero-section .sb2-trust-strip {
    gap: 10px 26px !important;
  }
}

@media (max-width: 640px) {
  .sb2-hero-section .et_pb_text_0 {
    margin-bottom: 20px !important;
  }

  .sb2-hero-section .et_pb_text_1 {
    margin-bottom: 22px !important;
  }

  .sb2-hero-section .sb2-hero-heading,
  .sb2-hero-section .sb2-hero-heading h1 {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: 0.98 !important;
  }

  .sb2-hero-section .sb2-hero-heading .sb2-gradient-text {
    white-space: normal !important;
  }

  .sb2-hero-section .et_pb_text_2,
  .sb2-hero-section .et_pb_text_2 p {
    font-size: 14px !important;
  }

  .sb2-hero-section .sb2-button-group {
    margin-top: 26px !important;
    gap: 12px !important;
  }

  .sb2-hero-section .sb2-button-group .sb2-btn-primary,
  .sb2-hero-section .sb2-button-group .sb2-btn-secondary {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sb2-hero-section .sb2-trust-strip {
    margin-top: 32px !important;
  }

  .sb2-featured-work-section .sb2-featured-eyebrow,
  html body #page-container #et-boc
  .sb2-featured-work-section .et_pb_text.sb2-featured-eyebrow {
    grid-template-columns: 44px auto 44px !important;
    column-gap: 10px !important;
    max-width: 270px !important;
  }
}
/* =========================================================
   DESKTOP SCALE PASS
   Increase visual authority on laptop/desktop displays while
   preserving the established reference styling and mobile rules.
   ========================================================= */

@media (min-width: 1181px) {

  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */

  html body.wp-theme-Divi.wp-child-theme-SB2-NEW
  #page-container #et-boc .et-l--post
  .et_pb_section_0.sb2-hero-section.et_pb_section {
    min-height: 820px !important;
    padding-top: 132px !important;
    padding-bottom: 92px !important;
  }

  .sb2-hero-section > .et_pb_row,
  .sb2-hero-section .et_pb_row_0 {
    width: 94% !important;
    max-width: 1600px !important;
  }

  .sb2-hero-section .sb2-split-55-45 .et_pb_column:first-child,
  .sb2-hero-section .et_pb_row_0 .et_pb_column:first-child {
    width: 55% !important;
    max-width: 820px !important;
    margin-right: 4% !important;
  }

  .sb2-hero-section .sb2-split-55-45 .et_pb_column:last-child,
  .sb2-hero-section .et_pb_row_0 .et_pb_column:last-child {
    width: 41% !important;
  }

  .sb2-hero-section .sb2-eyebrow {
    min-height: 30px !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
  }

  .sb2-hero-section .et_pb_text_0 {
    margin-bottom: 27px !important;
  }

  .sb2-hero-section .et_pb_text_1 {
    margin-bottom: 30px !important;
  }

  .sb2-hero-section .sb2-hero-heading,
  .sb2-hero-section .sb2-hero-heading h1,
  html body #page-container #et-boc
  .sb2-hero-section .et_pb_text.sb2-hero-heading h1 {
    font-size: clamp(66px, 4.75vw, 88px) !important;
    line-height: 0.97 !important;
  }

  .sb2-hero-section .et_pb_text_2,
  .sb2-hero-section .et_pb_text_2 p,
  html body #page-container #et-boc
  .sb2-hero-section .et_pb_text_2.et_pb_bg_layout_light p {
    max-width: 580px !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
  }

  .sb2-hero-section .sb2-button-group {
    gap: 18px !important;
    margin-top: 34px !important;
  }

  .sb2-hero-section .sb2-button-group .sb2-btn-primary {
    min-width: 194px !important;
    min-height: 52px !important;
    padding: 0 25px !important;
    font-size: 12px !important;
  }

  .sb2-hero-section .sb2-button-group .sb2-btn-secondary {
    min-width: 216px !important;
    min-height: 52px !important;
    padding: 0 25px !important;
    font-size: 12px !important;
  }

  .sb2-hero-section .sb2-trust-strip {
    max-width: 760px !important;
    margin-top: 44px !important;
    padding-top: 27px !important;
    gap: 0 42px !important;
    font-size: 12px !important;
  }

  .sb2-hero-section .sb2-trust-strip::before {
    margin-bottom: 19px !important;
    font-size: 10px !important;
  }

  .sb2-hero-section .sb2-trust-strip span {
    min-height: 24px !important;
    font-size: 12px !important;
  }


  /* -------------------------------------------------------
     FEATURED WORK
     ------------------------------------------------------- */

  .et_pb_section.sb2-featured-work-section {
    padding-top: 66px !important;
    padding-bottom: 82px !important;
  }

  .sb2-featured-work-section > .et_pb_row:first-child,
  .sb2-featured-work-section .et_pb_row_1 {
    width: 94% !important;
    max-width: 1600px !important;
    margin-bottom: 30px !important;
  }

  .sb2-featured-work-section .sb2-featured-eyebrow,
  html body #page-container #et-boc
  .sb2-featured-work-section .et_pb_text.sb2-featured-eyebrow {
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    grid-template-columns: minmax(100px, 175px) auto minmax(100px, 175px) !important;
    column-gap: 20px !important;
    font-size: 10px !important;
    margin-bottom: 13px !important;
  }

  .sb2-featured-work-section .sb2-section-heading,
  .sb2-featured-work-section .sb2-section-heading p,
  .sb2-featured-work-section .sb2-section-heading h2 {
    font-size: clamp(31px, 2.3vw, 39px) !important;
  }

  .sb2-featured-work-section .sb2-small-muted,
  .sb2-featured-work-section .sb2-small-muted p {
    margin-top: 10px !important;
    font-size: 14px !important;
  }

  .sb2-featured-work-grid,
  .et_pb_row.sb2-featured-work-grid,
  .et-db #et-boc .et-l .et_pb_row.sb2-featured-work-grid {
    width: 94% !important;
    max-width: 1600px !important;
    gap: 26px !important;
    --horizontal-gap: 26px !important;
  }

  .sb2-featured-work-grid > .et_pb_column {
    width: calc((100% - 52px) / 3) !important;
    max-width: calc((100% - 52px) / 3) !important;
  }

  .sb2-home-work-card,
  [id="sb2-home-work-card"] {
    padding-bottom: 24px !important;
    border-radius: 19px !important;
  }

  .sb2-home-work-card > .et_pb_image,
  [id="sb2-home-work-card"] > .et_pb_image {
    border-radius: 18px 18px 13px 13px !important;
  }

  .sb2-home-work-card > .et_pb_image + .et_pb_text,
  [id="sb2-home-work-card"] > .et_pb_image + .et_pb_text {
    padding: 20px 76px 0 23px !important;
  }

  .sb2-home-work-card > .et_pb_image + .et_pb_text p,
  [id="sb2-home-work-card"] > .et_pb_image + .et_pb_text p {
    font-size: 17px !important;
  }

  .sb2-home-work-card > .et_pb_image + .et_pb_text + .et_pb_text,
  [id="sb2-home-work-card"] > .et_pb_image + .et_pb_text + .et_pb_text {
    padding: 6px 76px 0 23px !important;
  }

  .sb2-home-work-card > .et_pb_image + .et_pb_text + .et_pb_text p,
  [id="sb2-home-work-card"] > .et_pb_image + .et_pb_text + .et_pb_text p {
    font-size: 13px !important;
  }

  .sb2-home-work-card > .et_pb_button_module_wrapper,
  [id="sb2-home-work-card"] > .et_pb_button_module_wrapper {
    right: 20px !important;
    bottom: 20px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .sb2-home-work-card .et_pb_button,
  [id="sb2-home-work-card"] .et_pb_button {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  .sb2-home-work-card .et_pb_button::after,
  [id="sb2-home-work-card"] .et_pb_button::after {
    font-size: 18px !important;
  }


  /* -------------------------------------------------------
     HOME INFO PANEL
     ------------------------------------------------------- */

  .sb2-home-info-panel,
  .et_pb_row.sb2-home-info-panel,
  .et-db #et-boc .et-l .et_pb_row.sb2-home-info-panel {
    width: 94% !important;
    max-width: 1600px !important;
    min-height: 520px !important;
  }

  .sb2-home-info-panel > .et_pb_column {
    padding: 42px 44px 44px !important;
  }

  .sb2-home-panel-eyebrow,
  .sb2-home-panel-eyebrow p,
  .sb2-home-panel-eyebrow .et_pb_text_inner {
    font-size: 12px !important;
  }

  .sb2-home-panel-heading,
  .sb2-home-panel-heading h3,
  .sb2-home-panel-heading p {
    font-size: 30px !important;
  }

  .sb2-home-service-item {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .sb2-home-service-item > .et_pb_column:first-child {
    flex: 0 0 48px !important;
    width: 48px !important;
    max-width: 48px !important;
  }

  .sb2-home-service-icon,
  .et_pb_icon.sb2-home-service-icon {
    flex-basis: 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .sb2-home-service-icon .et_pb_icon_wrap,
  .et_pb_icon.sb2-home-service-icon .et_pb_icon_wrap,
  .sb2-home-service-icon .et-pb-icon,
  .et_pb_icon.sb2-home-service-icon .et-pb-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .sb2-home-service-icon .et-pb-icon,
  .et_pb_icon.sb2-home-service-icon .et-pb-icon {
    font-size: 20px !important;
  }

  .sb2-home-service-copy h4 {
    font-size: 17px !important;
  }

  .sb2-home-service-copy p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .sb2-text-link,
  .sb2-text-link p,
  .sb2-text-link a {
    font-size: 13px !important;
  }
}


/* ---------------------------------------------------------
   WIDESCREEN GUARDRAIL
   On very large screens, allow a little extra breathing room
   without making the design feel stretched.
   --------------------------------------------------------- */

@media (min-width: 1600px) {
  .sb2-hero-section > .et_pb_row,
  .sb2-hero-section .et_pb_row_0,
  .sb2-featured-work-section > .et_pb_row:first-child,
  .sb2-featured-work-grid,
  .et_pb_row.sb2-featured-work-grid,
  .sb2-home-info-panel,
  .et_pb_row.sb2-home-info-panel {
    width: 92% !important;
  }
}

/* ==========================================================================
   STUFF BY TWO - FEATURED WORK GROUP CAROUSEL
   Version addition: 1.0.26-featured-carousel-angle-arrows

   Refinements:
   - centre card remains dominant
   - visible side cards get reliable inward angle
   - card silhouettes use rotateZ as well as perspective
   - custom CSS-drawn chevrons for main navigation
   - arrow circles overlap outer card edges more like reference
   - project arrow glyph alignment refined
   ========================================================================== */

.et_pb_row.sb2-featured-carousel-row,
.sb2-featured-carousel-row {
    width: 94% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 6px !important;
    padding-bottom: 26px !important;
    overflow: visible !important;
}

.sb2-featured-carousel-row,
.sb2-featured-carousel-row > .et_pb_column,
.sb2-featured-carousel-row .et_pb_column {
    overflow: visible !important;
}

.sb2-featured-carousel {
    --sb2-carousel-gap: 12px;
    --sb2-side-scale: 0.92;
    --sb2-centre-scale: 1.045;

    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 14px 42px 18px !important;
}

/* Clip Divi's cloned loop slides, but keep arrows outside via outer module. */
.sb2-featured-carousel .et_pb_group_carousel_container {
    position: relative !important;
    overflow: hidden !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.sb2-featured-carousel .et_pb_group_carousel_track {
    overflow: visible !important;
}

.sb2-featured-carousel .et_pb_group_carousel_slide {
    box-sizing: border-box !important;
    padding-left: calc(var(--sb2-carousel-gap) / 2) !important;
    padding-right: calc(var(--sb2-carousel-gap) / 2) !important;
    overflow: visible !important;
    perspective: 1500px !important;
    transform-style: preserve-3d !important;
}

.sb2-featured-carousel .et_pb_group_carousel_slide_bleed_clip_prev,
.sb2-featured-carousel .et_pb_group_carousel_slide_bleed_clip_next {
    clip-path: none !important;
}

.sb2-featured-carousel.et_pb_group_carousel_center_mode .et_pb_group_carousel_track {
    align-items: center !important;
}


/* Soft ambient halo behind each visible card, matching the reference glow. */
.sb2-featured-carousel .et_pb_group_carousel_slide::before {
    content: "" !important;
    position: absolute !important;
    inset: 6% 7% 4% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 22px !important;
    background: radial-gradient(
        ellipse at center,
        rgba(151, 45, 210, 0.15) 0%,
        rgba(118, 29, 170, 0.09) 42%,
        rgba(68, 15, 99, 0.00) 74%
    ) !important;
    filter: blur(24px) !important;
    opacity: 0.72 !important;
    transform: scale(1.04) !important;
}

.sb2-featured-carousel
.et_pb_group_carousel_slide_active::before {
    background: radial-gradient(
        ellipse at center,
        rgba(203, 78, 255, 0.27) 0%,
        rgba(161, 45, 224, 0.17) 38%,
        rgba(94, 22, 137, 0.06) 66%,
        rgba(53, 12, 77, 0.00) 80%
    ) !important;
    filter: blur(28px) !important;
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

.sb2-featured-carousel .et_pb_group_carousel_slide > .et_pb_group {
    position: relative !important;
    z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   PROJECT CARD
   -------------------------------------------------------------------------- */

.sb2-featured-carousel .sb2-carousel-project {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(29, 10, 40, 0.84) 0%,
            rgba(19, 6, 28, 0.95) 70%,
            rgba(14, 5, 21, 0.99) 100%
        ) !important;

    border: 1px solid rgba(174, 69, 224, 0.28) !important;
    border-radius: 16px !important;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(151, 45, 210, 0.13),
        0 0 54px rgba(116, 28, 167, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.035) !important;

    overflow: hidden !important;

    transform:
        translateY(9px)
        scale(var(--sb2-side-scale)) !important;

    transform-origin: center center !important;
    opacity: 0.66 !important;
    filter: brightness(0.78) saturate(0.87) !important;

    transition:
        transform 420ms cubic-bezier(.2,.7,.2,1),
        opacity 320ms ease,
        filter 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease !important;
}

/* Screenshot area */
.sb2-featured-carousel .sb2-carousel-project > .et_pb_image,
.sb2-featured-carousel .sb2-carousel-project .et_pb_image {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 15px 15px 0 0 !important;
}

.sb2-featured-carousel .sb2-carousel-project .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
}

.sb2-featured-carousel .sb2-carousel-project .et_pb_image img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1.58 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    transform: scale(1.001) !important;
    transition:
        transform 500ms cubic-bezier(.2,.7,.2,1),
        filter 320ms ease !important;
}

.sb2-featured-carousel .sb2-carousel-project .et_pb_image:empty {
    min-height: 205px !important;
    background:
        radial-gradient(circle at 72% 24%, rgba(142, 43, 208, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(24, 8, 34, 0.96), rgba(8, 3, 13, 0.98)) !important;
}

/* Compact footer */
.sb2-featured-carousel .sb2-carousel-project-title {
    margin: 0 !important;
    padding: 14px 58px 0 16px !important;
}

.sb2-featured-carousel .sb2-carousel-project-title,
.sb2-featured-carousel .sb2-carousel-project-title .et_pb_text_inner,
.sb2-featured-carousel .sb2-carousel-project-title p,
.sb2-featured-carousel .sb2-carousel-project-title h1,
.sb2-featured-carousel .sb2-carousel-project-title h2,
.sb2-featured-carousel .sb2-carousel-project-title h3,
.sb2-featured-carousel .sb2-carousel-project-title h4,
.sb2-featured-carousel .sb2-carousel-project-title h5,
.sb2-featured-carousel .sb2-carousel-project-title h6 {
    color: #ffffff !important;
}

.sb2-featured-carousel .sb2-carousel-project-title .et_pb_text_inner,
.sb2-featured-carousel .sb2-carousel-project-title p,
.sb2-featured-carousel .sb2-carousel-project-title h1,
.sb2-featured-carousel .sb2-carousel-project-title h2,
.sb2-featured-carousel .sb2-carousel-project-title h3,
.sb2-featured-carousel .sb2-carousel-project-title h4,
.sb2-featured-carousel .sb2-carousel-project-title h5,
.sb2-featured-carousel .sb2-carousel-project-title h6 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(15px, 1.08vw, 17px) !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
    letter-spacing: -0.022em !important;
}

.sb2-featured-carousel .sb2-carousel-project-meta {
    margin: 0 !important;
    padding: 2px 58px 0 16px !important;
}

.sb2-featured-carousel .sb2-carousel-project-meta,
.sb2-featured-carousel .sb2-carousel-project-meta .et_pb_text_inner,
.sb2-featured-carousel .sb2-carousel-project-meta p {
    color: rgba(229, 216, 238, 0.58) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 450 !important;
}

/* --------------------------------------------------------------------------
   PROJECT ARROW BUTTON
   Geometric CSS arrow to avoid Divi/font glyph alignment issues.
   -------------------------------------------------------------------------- */

.sb2-featured-carousel a.sb2-carousel-project-arrow {
    position: absolute !important;
    right: 13px !important;
    bottom: 12px !important;
    z-index: 6 !important;

    display: block !important;

    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(199, 97, 255, 0.52) !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            rgba(154, 48, 222, 0.28),
            rgba(75, 18, 104, 0.20)
        ) !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    text-shadow: none !important;
    overflow: hidden !important;

    box-shadow:
        0 7px 20px rgba(76, 17, 107, 0.20),
        0 0 14px rgba(151, 45, 210, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease !important;
}

/* Remove Divi's normal generated button icon behaviour. */
.sb2-featured-carousel a.sb2-carousel-project-arrow::before,
.sb2-featured-carousel a.sb2-carousel-project-arrow::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    opacity: 1 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Arrow shaft */
.sb2-featured-carousel a.sb2-carousel-project-arrow::before {
    width: 12px !important;
    height: 2px !important;

    top: 50% !important;
    left: 50% !important;

    background: #ffffff !important;
    border: 0 !important;

    transform:
        translate(-50%, -50%)
        rotate(-45deg) !important;

    transform-origin: center center !important;
}

/* Arrow head */
.sb2-featured-carousel a.sb2-carousel-project-arrow::after {
    width: 6px !important;
    height: 6px !important;

    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;

    background: transparent !important;

    border-top: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    transform: none !important;
}

/* Hover */
.sb2-featured-carousel a.sb2-carousel-project-arrow:hover {
    transform: translateY(-1px) scale(1.03) !important;

    border-color: rgba(224, 151, 255, 0.76) !important;

    background:
        linear-gradient(
            135deg,
            rgba(184, 67, 247, 0.42),
            rgba(94, 24, 133, 0.28)
        ) !important;

    box-shadow:
        0 9px 24px rgba(88, 20, 124, 0.26),
        0 0 18px rgba(171, 53, 232, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* --------------------------------------------------------------------------
   DESKTOP CENTRE + ANGLED OUTSIDE CARDS
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {

    /* Centre card */
    .sb2-featured-carousel
    .et_pb_group_carousel_slide_active
    .sb2-carousel-project {
        transform:
            translateY(-8px)
            scale(var(--sb2-centre-scale)) !important;

        transform-origin: center center !important;
        opacity: 1 !important;
        filter: none !important;

        border-color: rgba(198, 82, 255, 0.74) !important;

        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.46),
            0 0 24px rgba(208, 86, 255, 0.34),
            0 0 48px rgba(176, 53, 238, 0.24),
            0 0 84px rgba(128, 31, 181, 0.14),
            inset 0 1px 0 rgba(255,255,255,0.06) !important;

        z-index: 6 !important;
    }

    /*
     * LEFT visible card:
     * select the slide immediately before the active slide.
     * :has() is supported in current desktop browsers and is the most
     * reliable way to target the true left neighbour in Divi's loop markup.
     */
    .sb2-featured-carousel
    .et_pb_group_carousel_slide:has(+ .et_pb_group_carousel_slide_active)
    .sb2-carousel-project {
        transform:
            translateY(10px)
            perspective(1500px)
            rotateY(5deg)
            rotateZ(-1.4deg)
            scale(var(--sb2-side-scale)) !important;

        transform-origin: right center !important;
        opacity: 0.66 !important;
        filter: brightness(0.78) saturate(0.87) !important;

        border-color: rgba(169, 70, 217, 0.25) !important;

        box-shadow:
            0 16px 38px rgba(0, 0, 0, 0.30),
            0 0 22px rgba(151, 45, 210, 0.15),
            0 0 48px rgba(111, 27, 160, 0.09),
            inset 0 1px 0 rgba(255,255,255,0.03) !important;

        z-index: 2 !important;
    }

    /* RIGHT visible card */
    .sb2-featured-carousel
    .et_pb_group_carousel_slide_active
    + .et_pb_group_carousel_slide
    .sb2-carousel-project {
        transform:
            translateY(10px)
            perspective(1500px)
            rotateY(-5deg)
            rotateZ(1.4deg)
            scale(var(--sb2-side-scale)) !important;

        transform-origin: left center !important;
        opacity: 0.66 !important;
        filter: brightness(0.78) saturate(0.87) !important;

        border-color: rgba(169, 70, 217, 0.25) !important;

        box-shadow:
            0 16px 38px rgba(0, 0, 0, 0.30),
            0 0 22px rgba(151, 45, 210, 0.15),
            0 0 48px rgba(111, 27, 160, 0.09),
            inset 0 1px 0 rgba(255,255,255,0.03) !important;

        z-index: 2 !important;
    }

    /* Keep all non-visible clones subdued during transitions. */
    .sb2-featured-carousel
    .et_pb_group_carousel_clone
    .sb2-carousel-project {
        opacity: 0.52 !important;
        filter: brightness(0.68) saturate(0.78) !important;
    }

    .sb2-featured-carousel
    .et_pb_group_carousel_clone.et_pb_group_carousel_slide_active
    .sb2-carousel-project {
        opacity: 1 !important;
        filter: none !important;
    }

    .sb2-featured-carousel .sb2-carousel-project:hover .et_pb_image img {
        transform: scale(1.024) !important;
    }
}

/* --------------------------------------------------------------------------
   MAIN CAROUSEL NAVIGATION
   -------------------------------------------------------------------------- */

.sb2-featured-carousel .et_pb_group_carousel_dots {
    display: none !important;
}

/*
 * Compact circles, positioned to overlap the outside card edge
 * and align to the visual centre of the screenshot area.
 */
.sb2-featured-carousel .et_pb_group_carousel_arrow {
    top: 42% !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(193, 73, 255, 0.78) !important;
    border-radius: 50% !important;

    background: rgba(19, 6, 28, 0.95) !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.34),
        0 0 14px rgba(154, 48, 217, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease !important;
}

/* Hide Divi's icon-font glyph completely. */
.sb2-featured-carousel .et_pb_group_carousel_arrow .et-pb-icon {
    display: none !important;
}

/* Draw clean chevrons ourselves. */
.sb2-featured-carousel .et_pb_group_carousel_arrow::before {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 8px !important;
    height: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-top: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;

    transform-origin: center center !important;
}

.sb2-featured-carousel .et_pb_group_carousel_arrow_prev::before {
    transform: translate(-40%, -50%) rotate(-135deg) !important;
}

.sb2-featured-carousel .et_pb_group_carousel_arrow_next::before {
    transform: translate(-60%, -50%) rotate(45deg) !important;
}

/* Bring the nav buttons in so they hug the outer card edges. */
.sb2-featured-carousel.et_pb_group_carousel_arrows_outside
.et_pb_group_carousel_arrow_prev {
    left: 42px !important;
    transform: translate(-50%, -50%) !important;
}

.sb2-featured-carousel.et_pb_group_carousel_arrows_outside
.et_pb_group_carousel_arrow_next {
    right: 42px !important;
    transform: translate(50%, -50%) !important;
}

.sb2-featured-carousel .et_pb_group_carousel_arrow:hover {
    border-color: rgba(223, 142, 255, 0.86) !important;
    background: rgba(63, 15, 91, 0.95) !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(166, 55, 227, 0.18) !important;
}

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

    .et_pb_row.sb2-featured-carousel-row,
    .sb2-featured-carousel-row {
        width: 94% !important;
    }

    .sb2-featured-carousel {
        --sb2-carousel-gap: 12px;
        padding: 12px 34px 16px !important;
    }

    .sb2-featured-carousel .sb2-carousel-project,
    .sb2-featured-carousel
    .et_pb_group_carousel_slide_active
    .sb2-carousel-project {
        transform: scale(0.98) !important;
        opacity: 0.92 !important;
        filter: none !important;
    }

    .sb2-featured-carousel
    .et_pb_group_carousel_slide_active
    .sb2-carousel-project {
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    .sb2-featured-carousel .et_pb_group_carousel_arrow {
        top: 42% !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .sb2-featured-carousel .et_pb_group_carousel_arrow::before {
        width: 7px !important;
        height: 7px !important;
        border-top-width: 2px !important;
        border-right-width: 2px !important;
    }

    .sb2-featured-carousel.et_pb_group_carousel_arrows_outside
    .et_pb_group_carousel_arrow_prev {
        left: 36px !important;
    }

    .sb2-featured-carousel.et_pb_group_carousel_arrows_outside
    .et_pb_group_carousel_arrow_next {
        right: 36px !important;
    }
}

/* --------------------------------------------------------------------------
   PHONE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .et_pb_row.sb2-featured-carousel-row,
    .sb2-featured-carousel-row {
        width: 100% !important;
        max-width: none !important;
    }

    .sb2-featured-carousel {
        --sb2-carousel-gap: 10px;
        padding: 8px 18px 12px !important;
    }

    .sb2-featured-carousel .et_pb_group_carousel_slide {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .sb2-featured-carousel .sb2-carousel-project,
    .sb2-featured-carousel
    .et_pb_group_carousel_slide_active
    .sb2-carousel-project {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .sb2-featured-carousel .sb2-carousel-project-title {
        padding: 14px 54px 0 14px !important;
    }

    .sb2-featured-carousel .sb2-carousel-project-meta {
        padding: 2px 54px 0 14px !important;
    }

    .sb2-featured-carousel a.sb2-carousel-project-arrow {
        right: 12px !important;
        bottom: 11px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .sb2-featured-carousel .et_pb_group_carousel_arrow {
        top: 41% !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .sb2-featured-carousel .et_pb_group_carousel_arrow::before {
        width: 6px !important;
        height: 6px !important;
    }

    .sb2-featured-carousel.et_pb_group_carousel_arrows_outside
    .et_pb_group_carousel_arrow_prev {
        left: 30px !important;
    }

    .sb2-featured-carousel.et_pb_group_carousel_arrows_outside
    .et_pb_group_carousel_arrow_next {
        right: 30px !important;
    }
}


@media (max-width: 767px) {
    .sb2-featured-carousel a.sb2-carousel-project-arrow::before {
        width: 11px !important;
        height: 2px !important;
    }

    .sb2-featured-carousel a.sb2-carousel-project-arrow::after {
        width: 5px !important;
        height: 5px !important;
        top: 9px !important;
        right: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb2-featured-carousel *,
    .sb2-featured-carousel *::before,
    .sb2-featured-carousel *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}