/* ============================================================
   Octaria Dark Theme Override — v2 "Apple-bold"
   Key fixes: text contrast, card visibility, section separation
   ============================================================ */

:root {
  --oc-black:        #09090f;
  --oc-surface:      #0f0f1a;
  --oc-surface-2:    #131320;
  --oc-card:         #16162a;
  --oc-card-hover:   #1c1c34;
  --oc-border:       rgba(255,255,255,0.08);
  --oc-border-hover: rgba(250,127,68,0.5);
  --oc-orange:       #fa7f44;
  --oc-orange-dim:   rgba(250,127,68,0.12);
  --oc-white:        #ffffff;
  --oc-text-1:       #eeeef5;   /* headings */
  --oc-text-2:       #b0b0c8;   /* body copy — raised contrast */
  --oc-text-3:       #6e6e88;   /* muted / labels */
}

/* ── Global ── */
html, body {
  background-color: var(--oc-black) !important;
  color: var(--oc-text-2) !important;
}

/* ── All headings ── */
h1, h2, h3, h4, h5,
.brix---heading-h1-size-5,
.brix---heading-h1-size-6,
.brix---heading-h1-size-7,
.brix---heading-h2-size-11,
.brix---heading-h2-size-12,
.brix---heading-h2-size-13,
.brix---heading-h3-size-6,
.brix---heading-h3-size-7,
.brix---heading-h5-size {
  color: var(--oc-text-1) !important;
}

/* ── Body / paragraph copy ── */
.brix---paragraph-default-13,
.brix---paragraph-default-14,
.brix---paragraph-default-15,
p {
  color: var(--oc-text-2) !important;
  line-height: 1.7 !important;
}

/* ── Nav ── */
.brix---header-wrapper-3,
.w-nav {
  background-color: rgba(9,9,15,0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--oc-border) !important;
  box-shadow: none !important;
}

/* Mobile nav drawer */
.brix---header-menu-wrapper-3,
.w-nav-menu {
  background-color: var(--oc-surface) !important;
  border-top: 1px solid var(--oc-border) !important;
  border-bottom: 1px solid var(--oc-border) !important;
}

/* Mobile nav links */
.brix---header-menu-wrapper-3 .uui-navbar07_link,
.brix---header-menu-wrapper-3 .uui-navbar07_dropdown-toggle,
.brix---header-menu-wrapper-3 .text-block-25,
.brix---header-menu-wrapper-3 .text-block-26 {
  color: var(--oc-text-1) !important;
}

/* Mobile dropdown list */
.brix---header-menu-wrapper-3 .uui-navbar07_dropdown-list,
.brix---header-menu-wrapper-3 .w-dropdown-list {
  background-color: var(--oc-surface-2) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.uui-navbar07_link,
.text-block-25,
.text-block-26,
.brix---header-nav-menu-list-3 a {
  color: var(--oc-text-1) !important;
  font-weight: 500 !important;
}

.uui-navbar07_link:hover,
.text-block-25:hover {
  color: var(--oc-orange) !important;
}

/* Nav dropdown */
.uui-navbar07_dropdown-list,
.w-dropdown-list {
  background-color: var(--oc-surface-2) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
}

.uui-navbar07_dropdown-link {
  color: var(--oc-text-1) !important;
  border-radius: 8px !important;
}

.uui-navbar07_dropdown-link:hover {
  background-color: var(--oc-card) !important;
}

.uui-navbar07_item-heading {
  color: var(--oc-text-1) !important;
  font-weight: 600 !important;
}

.brix---heading-h5-size.nav-dropdown-sub-title {
  color: var(--oc-text-3) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
}

/* ── Hero ── */
.brix---section-hero-v4 {
  background: linear-gradient(160deg, #0a081a 0%, #09090f 60%) !important;
  min-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Homepage hero — tighten top spacing on desktop */
@media (min-width: 768px) {
  .brix---section-hero-v4.managed-engineering-teams {
    padding-top: 30px !important;
  }
}

/* Radial glow */
.brix---section-hero-v4::after {
  content: '';
  position: absolute;
  top: -100px;
  left: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(40,28,165,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Orange glow */
.brix---section-hero-v4 .brix---color-neutral-843 {
  position: relative;
  z-index: 1;
}

/* Hero H1 */
.brix---heading-h1-size-5 {
  font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  color: var(--oc-white) !important;
}

/* Orange span */
.text-span-10 {
  color: var(--oc-orange) !important;
}

/* Hero italic lines → normal weight, brighter */
.italic-text-2 {
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--oc-text-2) !important;
  font-size: 1.1rem !important;
}

.italic-text-3 {
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--oc-text-2) !important;
}

/* Key line */
.brix---paragraph-default-14.key-line {
  font-size: 1rem !important;
  color: var(--oc-text-2) !important;
  font-weight: 400 !important;
}

/* ── Buttons ── */
.brix---btn-primary-6 {
  background-color: var(--oc-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border: none !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
  box-shadow: 0 2px 20px rgba(250,127,68,0.25) !important;
  letter-spacing: 0.01em !important;
}

.brix---btn-primary-6:hover {
  background-color: #f26c2c !important;
  box-shadow: 0 4px 32px rgba(250,127,68,0.45) !important;
  transform: translateY(-1px) !important;
}

.brix---btn-secondary-4 {
  color: var(--oc-text-1) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: border-color 0.18s, color 0.18s, background 0.18s !important;
}

.brix---btn-secondary-4:hover {
  border-color: var(--oc-orange) !important;
  color: var(--oc-orange) !important;
  background: var(--oc-orange-dim) !important;
}

/* ── Section base ── */
.brix---section-10,
.brix---section-11,
.brix---section-position-relative-3 {
  background-color: var(--oc-black) !important;
}

/* Alternating surface */
.brix---section-10:nth-of-type(even),
.brix---section-11.mod-1 {
  background-color: var(--oc-surface) !important;
  border-top: 1px solid var(--oc-border) !important;
  border-bottom: 1px solid var(--oc-border) !important;
}

/* ── Stats / Fast Facts ── */
.brix---subtitle-8 {
  color: var(--oc-orange) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.brix---heading-h1-size-6 {
  font-size: 3.4rem !important;
  font-weight: 800 !important;
  color: var(--oc-white) !important;
  letter-spacing: -0.03em !important;
}

.brix---color-accent-5 {
  color: var(--oc-orange) !important;
}

/* Clutch badge card */
.brix---image-wrapper-br-24px-shadow-3 {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
}

/* ── Service cards ── */
.brix---card-link.mod-1 {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
}

.brix---card-link.mod-1:hover {
  border-color: var(--oc-orange) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(250,127,68,0.12) !important;
}


.brix---content-inside-card-2 {
  background-color: var(--oc-card) !important;
}

.brix---content-inside-card-2.mod-1 {
  background-color: var(--oc-card) !important;
}

/* Card description text — needs higher contrast */
.brix---paragraph-default-15 {
  color: var(--oc-text-2) !important;
}

.brix---color-neutral-862 p,
.brix---color-neutral-862 div {
  color: var(--oc-text-2) !important;
}

.fake-button {
  background-color: rgba(255,255,255,0.04) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 12px 24px !important;
}

.text-block-24 {
  color: var(--oc-orange) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

/* ── Industry section ── */
/* Override white industry cards to dark */
.brix---icon-list-item-3 {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s !important;
}

.brix---icon-list-item-3:hover {
  border-color: var(--oc-orange) !important;
  background-color: var(--oc-card-hover) !important;
}

.brix---heading-h3-size-6.mod-2 {
  color: var(--oc-text-1) !important;
}

/* ── Testimonials ── */
.brix---card-testimonial-border-2 {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
}

/* Testimonial quote text */
.brix---card-testimonial-border-2 p,
.brix---card-testimonial-border-2 .brix---paragraph-default-15 {
  color: var(--oc-text-2) !important;
}

/* Slider dots */
#Slider-1 .w-slider-dot { background-color: rgba(255,255,255,0.2) !important; }
#Slider-1 .w-slider-dot.w-active { background-color: var(--oc-orange) !important; }

/* ── Final CTA ── */
.brix---section-10.mod-1 {
  background: linear-gradient(160deg, #100c22 0%, var(--oc-black) 100%) !important;
  border-top: 1px solid var(--oc-border) !important;
  border-bottom: 1px solid var(--oc-border) !important;
}

/* ── Contact section ── */
.brix---section-position-relative-3 {
  background-color: var(--oc-surface) !important;
  border-top: 1px solid var(--oc-border) !important;
}

.w-input, .w-select, textarea.w-input {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--oc-text-1) !important;
  border-radius: 8px !important;
}

.w-input:focus, .w-select:focus, textarea.w-input:focus {
  border-color: var(--oc-orange) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(250,127,68,0.15) !important;
}

.w-input::placeholder, textarea.w-input::placeholder {
  color: var(--oc-text-3) !important;
}

/* Form labels */
label, .brix---text-300-bold-2 {
  color: var(--oc-text-1) !important;
  font-weight: 600 !important;
}

/* ── Footer ── */
.brix---footer-wrapper-2,
footer {
  background-color: var(--oc-surface) !important;
  border-top: 1px solid var(--oc-border) !important;
}

.brix---footer-link-2,
.brix---footer-text-2,
.brix---footer-wrapper-2 a,
.brix---footer-wrapper-2 p,
.brix---footer-wrapper-2 div {
  color: var(--oc-text-3) !important;
}

.brix---footer-link-2:hover,
.brix---footer-wrapper-2 a:hover {
  color: var(--oc-orange) !important;
}

/* ── Link arrows ── */
.brix---color-accent-6 .brix---text-200-bold-7 {
  color: var(--oc-orange) !important;
}

/* ── Nav CTA pill button ── */
.brix---btn-primary-small-5,
.brix---btn-primary-small-6,
a.brix---btn-primary-small-6 {
  background-color: var(--oc-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: background-color 0.18s !important;
}

.brix---btn-primary-small-6:hover {
  background-color: #f26c2c !important;
}

/* ── Mobile nav ── */
.w-nav-button { color: var(--oc-text-1) !important; }
.w-icon-nav-menu { color: var(--oc-text-1) !important; }

/* ── Section labels ── */
.brix---subtitle-9 {
  color: var(--oc-orange) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}

/* ── "How it Works" steps (new section) ── */
.oc-how-it-works {
  background-color: var(--oc-surface);
  border-top: 1px solid var(--oc-border);
  border-bottom: 1px solid var(--oc-border);
  padding: 88px 0;
}

.oc-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oc-orange);
  margin-bottom: 14px;
}

.oc-section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--oc-white);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.oc-section-sub {
  font-size: 1.05rem;
  color: var(--oc-text-2);
  margin-top: 14px;
  line-height: 1.6;
}

.oc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 52px auto 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  overflow: hidden;
  max-width: 980px;
}

.oc-step {
  padding: 44px 36px;
  background-color: var(--oc-card);
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.oc-step:last-child { border-right: none; }

.oc-step-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oc-orange);
  margin-bottom: 18px;
  display: block;
}

.oc-step h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oc-white) !important;
  margin: 0 0 12px;
  line-height: 1.3;
}

.oc-step p {
  font-size: 0.94rem;
  color: var(--oc-text-2) !important;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 768px) {
  .oc-steps {
    grid-template-columns: 1fr;
  }
  .oc-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .oc-step:last-child { border-bottom: none; }
}

/* ── Dividers / subtle separators ── */
.brix---divider-2px {
  background-color: var(--oc-border) !important;
}

/* ── Process / "Not Just Devs" section ── */
.brix---process-step-wrapper-2 {
  border-left: 2px solid var(--oc-orange) !important;
}

/* ── Stat dividers ── */
.brix---grid-3-columns-6 {
  border-top: 1px solid var(--oc-border) !important;
  padding-top: 40px !important;
}

/* Fix any remaining white backgrounds */
.brix---color-neutral-800,
.brix---color-neutral-843,
.brix---color-neutral-846,
.brix---color-neutral-847,
.brix---color-neutral-848,
.brix---color-neutral-849,
.brix---color-neutral-856,
.brix---color-neutral-857,
.brix---color-neutral-858,
.brix---color-neutral-862 {
  color: inherit !important;
}

/* Ensure text inside colored wrappers stays readable */
.brix---color-neutral-800 *,
.brix---color-neutral-846 *,
.brix---color-neutral-847 *,
.brix---color-neutral-848 * {
  color: inherit !important;
}

/* ── Industry cards (brix---card-4) ── */
.brix---card-4 {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

.brix---card-4:hover {
  border-color: var(--oc-orange) !important;
  background-color: var(--oc-card-hover) !important;
}

.brix---content-inside-card-v14-2 h3,
.brix---content-inside-card-v14-2 .brix---heading-h3-size-6 {
  color: var(--oc-text-1) !important;
}

.brix---icon-left---content-right-2 .brix---square-icon-4 {
  filter: brightness(1.4) !important;
}

/* ── Testimonial cards ── */
.brix---card-testimonial-twitter {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

.brix---card-testimonial-twitter:hover {
  border-color: rgba(255,255,255,0.18) !important;
}

/* Testimonial name + text */
.brix---card-testimonial-twitter p,
.brix---card-testimonial-twitter .brix---paragraph-default-14,
.brix---card-testimonial-twitter .brix---paragraph-default-15 {
  color: var(--oc-text-2) !important;
}

.brix---card-testimonial-twitter .brix---text-100-bold-testimonials,
.brix---card-testimonial-twitter strong,
.brix---card-testimonial-twitter h3 {
  color: var(--oc-text-1) !important;
}

/* Role/company below name */
.brix---card-testimonial-twitter .brix---subtitle-8 {
  color: var(--oc-orange) !important;
}

/* Talk to sales button */
.brix---btn-secondary-5 {
  color: var(--oc-text-1) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.brix---btn-secondary-5:hover {
  border-color: var(--oc-orange) !important;
  color: var(--oc-orange) !important;
}

/* ── Primary-7 button (industries section) ── */
.brix---btn-primary-7 {
  background-color: var(--oc-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  border: none !important;
}

.brix---btn-primary-7:hover {
  background-color: #f26c2c !important;
}

/* ── Contact info cards ── */
.brix---card-link-icon-wrapper {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
  color: var(--oc-text-2) !important;
}

.brix---card-link-icon-wrapper:hover {
  border-color: var(--oc-orange) !important;
  background-color: var(--oc-card-hover) !important;
}

.brix---text-202, .brix---text-202.mod-1 {
  color: var(--oc-text-3) !important;
}

/* ── Service card illustration area — dark background ── */
/* Override the light illustration container in service cards */

/* Make illustrations blend on dark bg - try brightness + slight invert for SVG icons */

/* ── HubSpot chat widget — tame the orange blob ── */
#hubspot-messages-iframe-container {
  filter: none !important;
}

/* The HS widget has its own shadow DOM so we can't target it directly.
   We hide any stray hs-beacon overlays at page level if they break layout */
.hs-beacon, #hs-beacon {
  opacity: 0.9 !important;
}

/* ── reCAPTCHA error — hide it gracefully ── */
.grecaptcha-error-message,
.w-form-fail {
  color: #ff6b6b !important;
  background-color: rgba(255,107,107,0.1) !important;
  border: 1px solid rgba(255,107,107,0.3) !important;
  border-radius: 8px !important;
}

/* ── Hero illustration — soften the white circle ── */
.landing-hero-col-2.octaria-pods,
.img-octaria-pods {
  filter: brightness(0.9) !important;
}

/* ── Fix any rogue white backgrounds in forms ── */
.w-form {
  background: transparent !important;
}

.brix---grid-contact-v1 {
  background: transparent !important;
}

/* ── Fix icon SVG colors for dark bg ── */
.brix---square-icon-4 {
  filter: brightness(0) invert(1) opacity(0.7) !important;
}

/* ── Ensure brix color wrappers don't impose white ── */
.brix---color-neutral-856,
.brix---color-neutral-857,
.brix---color-neutral-858,
.brix---color-neutral-849,
.brix---color-neutral-848,
.brix---color-neutral-847 {
  color: inherit !important;
}

/* ── Fix any remaining section backgrounds that might be white ── */
.managed-engineering-teams {
  background-color: var(--oc-black) !important;
}

/* ── Fix the orange half-background decoration ── */
/* This is a Webflow decorative element that creates an orange right-panel.
   On the dark theme it looks like a layout break. Replace with subtle gradient. */
.brix---half-bg-right---width-36 {
  background-color: var(--oc-surface) !important;
  background-image: none !important;
  border-left: 1px solid var(--oc-border) !important;
}

/* ── Form inputs — visible borders on dark background ── */
.brix---input-2 {
  background-color: var(--oc-card) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--oc-text-1) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.brix---input-2:hover {
  border-color: rgba(255,255,255,0.35) !important;
  box-shadow: none !important;
}

.brix---input-2:focus {
  border-color: var(--oc-orange) !important;
  box-shadow: 0 0 0 3px rgba(250,127,68,0.15) !important;
  color: var(--oc-text-1) !important;
}

.brix---input-2::placeholder {
  color: var(--oc-text-3) !important;
}

.brix---input-label-2 {
  color: var(--oc-text-1) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

/* ── Stats descriptor text — bump size ── */
.brix---subtitle-8:not(.brix---section-hero-v4 .brix---subtitle-8) {
  font-size: 0.8rem !important;
}

/* Stat number labels (the descriptor lines under big numbers) */
.brix---color-accent-5 + p,
.brix---heading-h1-size-6 + .brix---paragraph-default-14,
.brix---heading-h1-size-6 + .brix---color-neutral-846 p {
  font-size: 0.9rem !important;
  color: var(--oc-text-2) !important;
}

/* ── Who We Work With — pill & tab visibility fixes ── */
/* "Custom Engagement" outlined pill — make border visible */
.wwww-pill.custom {
  border-color: #f5a623 !important;
  color: #f5a623 !important;
  background: rgba(245,166,35,0.08) !important;
}

.wwww-pill.launchpad {
  background: rgba(91,124,250,0.08) !important;
}

.wwww-pill.automate {
  background: rgba(124,245,176,0.08) !important;
}

/* Anchor nav tab active/inactive contrast */
.wwww-anchor-nav a {
  border-color: rgba(255,255,255,0.25) !important;
  color: var(--oc-text-2) !important;
}

.wwww-anchor-nav a:hover,
.wwww-anchor-nav a.active {
  border-color: var(--oc-orange) !important;
  color: var(--oc-orange) !important;
  background: rgba(250,127,68,0.07) !important;
}

/* ── Form submit button ── */
.brix---btn-primary-8 {
  background-color: var(--oc-orange) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.18s !important;
}

.brix---btn-primary-8:hover {
  background-color: #f26c2c !important;
}

/* ── Form success message ── */
.brix---success-message-2 {
  background-color: rgba(250,127,68,0.15) !important;
  border: 1px solid rgba(250,127,68,0.4) !important;
  border-radius: 12px !important;
  color: var(--oc-text-1) !important;
}

/* ── Small primary button variant ── */
.brix---btn-primary-small-3 {
  background-color: var(--oc-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* ── Hide reCAPTCHA error on dev domain (expected — site key bound to octaria.com) ── */
.w-form-fail,
.grecaptcha-badge,
.g-recaptcha-error {
  display: none !important;
}

/* ── Fix Webflow scroll-animation blank sections ──
   Webflow sets opacity:0 + translate3d offset as the initial state for
   scroll-triggered entrance animations. If JS is slow or the page is
   rendered without scroll events (e.g. server screenshot, slow load),
   sections appear as blank black voids.

   Fix: override the inline style opacity so all elements are visible.
   The transform transition still plays when Webflow fires — visual
   "slide in" motion is preserved. Only the invisible-until-scroll
   behavior is removed.
── */
[data-w-id] {
  opacity: 1 !important;
}

/* ── Service card illustration headers — deeper dark ── */

/* Make SVG illustrations lighter so they're visible on dark bg */

/* ── Service card illustration headers — consolidated fix ── */
.brix---image-wrapper---br-top-2 {
  background: #0d0b20 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  min-height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* SVG illustrations have white baked-in background.
   Use mix-blend-mode: screen on a near-black container
   so white = transparent, colors stay visible */
.brix---image-width-100-2 {
  mix-blend-mode: screen !important;
  filter: saturate(1.3) brightness(1.2) !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  max-height: 160px !important;
  width: auto !important;
}

/* Who We Are — removed infographic, single column full-width */
.who-we-are-single-col {
  grid-template-columns: 1fr !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Persona cards — stack on mobile */
@media (max-width: 767px) {
  .persona-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* CTA button rows — strip inline margins on mobile so stacked buttons align flush */
@media (max-width: 767px) {
  .brix---buttons-row-5 .w-button,
  .brix---button-row-left-5 .w-button,
  .brix---buttons-row-center .w-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}