.elementor-kit-5{--e-global-color-primary:#EDEAE3;--e-global-color-secondary:#8A93A3;--e-global-color-text:#EDEAE3;--e-global-color-accent:#F5D142;--e-global-color-afa8285:#0B0F17;--e-global-color-2dee441:#11161F;--e-global-color-5c01e8c:#161C27;--e-global-color-376603f:#EDEAE3;--e-global-color-06e491a:#8A93A3;--e-global-color-6c8524c:#4A5160;--e-global-color-fe8d655:#F5D142;--e-global-typography-primary-font-family:"Geist";--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:0.98;--e-global-typography-secondary-font-family:"Geist";--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.02px;--e-global-typography-secondary-letter-spacing:-0.03px;--e-global-typography-text-font-family:"Geist";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6px;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Geist";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1px;--e-global-typography-ea63ff4-font-family:"Geist";--e-global-typography-ea63ff4-font-weight:500;--e-global-typography-ea63ff4-line-height:0.95px;--e-global-typography-ea63ff4-letter-spacing:-0.05em;--e-global-typography-fddf998-font-family:"Geist";--e-global-typography-fddf998-font-weight:500;--e-global-typography-fddf998-line-height:0.98px;--e-global-typography-fddf998-letter-spacing:-0.04em;--e-global-typography-1b4901e-font-family:"Geist";--e-global-typography-1b4901e-font-weight:500;--e-global-typography-5837267-font-family:"Geist";--e-global-typography-5837267-font-weight:500;--e-global-typography-5837267-line-height:1.05px;--e-global-typography-da4abe4-font-family:"Geist";--e-global-typography-da4abe4-font-weight:500;--e-global-typography-da4abe4-line-height:1.25px;--e-global-typography-da4abe4-letter-spacing:-0.3px;--e-global-typography-76e2e02-font-family:"Geist";--e-global-typography-76e2e02-font-weight:400;--e-global-typography-76e2e02-line-height:1.6px;--e-global-typography-76e2e02-letter-spacing:0px;--e-global-typography-4ec5a79-font-family:"Geist";--e-global-typography-4ec5a79-font-weight:400;--e-global-typography-4ec5a79-line-height:1.55px;--e-global-typography-4ec5a79-letter-spacing:-0.1px;--e-global-typography-a02e5f3-font-family:"JetBrains Mono";--e-global-typography-a02e5f3-font-weight:500;--e-global-typography-a02e5f3-line-height:1.4px;--e-global-typography-a02e5f3-letter-spacing:0.8px;--e-global-typography-87c6cf0-font-family:"JetBrains Mono";--e-global-typography-87c6cf0-font-weight:500;--e-global-typography-87c6cf0-line-height:1.4px;--e-global-typography-87c6cf0-letter-spacing:0.4px;--e-global-typography-1679df1-font-family:"Geist";--e-global-typography-1679df1-font-weight:500;--e-global-typography-1679df1-line-height:1px;--e-global-typography-1679df1-letter-spacing:0px;background-color:var( --e-global-color-afa8285 );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ================================================================
   BLACKFLOW.DESIGN — GLOBAL CUSTOM CSS
   v1.4 — 18 Apr 2026
   ================================================================ */


/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --ink: #0B0F17;
  --deep: #11161F;
  --paper: #161C27;
  --bone: #EDEAE3;
  --stone: #8A93A3;
  --fog: #4A5160;
  --signal: #F5D142;

  --border: rgba(237, 234, 227, 0.08);
  --border-hover: rgba(237, 234, 227, 0.14);
  --surface-02: rgba(237, 234, 227, 0.03);
  --surface-06: rgba(237, 234, 227, 0.06);

  --font-sans: 'Geist', Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---------- 2. BASE RESET ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto !important;
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  overflow-y: auto !important;
}

.elementor-widget-text-editor * { color: inherit; }


/* ---------- 3. UTILITY CLASSES ---------- */

/* Mono — apply to any widget to switch to mono font */
.bf-mono,
.bf-mono * {
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" !important;
}

/* Eyebrow label — 12px mono uppercase + 20px signal hairline */
.bf-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--stone) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.bf-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--signal);
}

/* Chapter marker — bottom right of each section */
.bf-chapter {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--stone) !important;
  font-variant-numeric: tabular-nums !important;
}


/* ---------- 4. ELEMENTOR BUTTON DEFAULTS ---------- */
.elementor-button {
  transition: transform 180ms var(--ease-state),
              filter 180ms var(--ease-state),
              background-color 180ms var(--ease-state),
              border-color 180ms var(--ease-state) !important;
  box-shadow: none !important;
}
.elementor-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}


/* ---------- 5. HERO BOTTOM META ROW ---------- */
.bf-hero-meta {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-direction: row !important;
  padding-top: 32px !important;
  margin-top: auto !important;
  border-top: 0.5px solid var(--border) !important;
}
.bf-hero-meta > span {
  flex-shrink: 0;
}


/* ---------- 6. INDEX MENU CLOSE BUTTON — NO PINK HOVER ---------- */
.bf-menu button,
.bf-menu button:hover,
.bf-menu button:focus,
.bf-menu button:active,
.bf-menu button:visited,
.bf-menu a,
.bf-menu a:hover,
.bf-menu a:focus,
.bf-menu a:active,
.bf-menu a:visited,
#bfMenuClose,
#bfMenuClose:hover,
#bfMenuClose:focus,
#bfMenuClose:active,
#bfMenuClose:visited,
.bf-menu-close,
.bf-menu-close:hover,
.bf-menu-close:focus,
.bf-menu-close:active,
.bf-menu-close:visited {
  color: var(--bone) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--bone) !important;
}

#bfMenuClose:hover,
.bf-menu-close:hover {
  color: var(--signal) !important;
  -webkit-text-fill-color: var(--signal) !important;
  cursor: pointer;
}


/* ---------- 7. LENIS SCROLL INTEGRATION ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis-smooth {
  scroll-behavior: auto !important;
}

html.lenis-smooth body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.elementor,
.elementor-inner,
.page-content,
main.site-main,
#page,
#content {
  overflow: visible !important;
}


/* ---------- 8. WORK WALL — LET GSAP PIN WORK THROUGH ELEMENTOR ---------- */

/* No parent wrapper can have a transform, filter, or clip */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
.elementor-widget-html,
.elementor-widget-wrap {
  transform: none !important;
  filter: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* The widget + container holding the wall must allow overflow */
.elementor-widget-html:has(#bfw),
.e-con:has(#bfw),
.elementor-element:has(#bfw) {
  overflow: visible !important;
  contain: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ---------- 9. FOOTER OVERRIDES (until real footer built) ---------- */
/* Temporary — remove when Step 7 (Footer section) is built */
.site-footer:not(.bf-footer),
footer.site-footer:not(.bf-footer),
#colophon {
  display: none !important;
}



/* ---------- Services bullet lists ---------- */
.bf-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bf-bullets li {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  padding-left: 24px;
  position: relative;
  line-height: 1.4;
}
.bf-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--stone);
  font-family: var(--font-mono);
}







/* ---------- Services card meta + price ---------- */
.bf-meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.bf-meta-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--bone);
  line-height: 1.2;
}
.bf-price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1;
  text-align: right;
}
.bf-price .unit {
  font-size: 16px;
  color: var(--stone);
  font-weight: 400;
  margin-left: 4px;
}





/* ---------- Services card CTA link ---------- */
.bf-svc-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 4px;
  width: fit-content;
  display: inline-block;
  transition: color 200ms ease, transform 200ms ease;
  margin-top: 20px;
}
.bf-svc-cta:hover {
  color: var(--signal);
  transform: translateX(4px);
}






/* ================================================================
   PROOF SECTION (Step 5)
================================================================ */

.bf-proof {
  position: relative;
}

/* Screenshot frame — reusable for case studies + later sections */
.bf-shot-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 900;
  background: var(--paper);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background-image:
    linear-gradient(135deg, transparent 48%, rgba(237, 234, 227, 0.02) 48%, rgba(237, 234, 227, 0.02) 52%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(237, 234, 227, 0.02) 48%, rgba(237, 234, 227, 0.02) 52%, transparent 52%);
  background-size: 48px 48px;
  transition: border-color 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bf-shot-frame:hover {
  border-color: var(--border-hover);
}
.bf-shot-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  background: rgba(11, 15, 23, 0.6);
  padding: 4px 8px;
  border-radius: 3px;
  border: 0.5px solid var(--border);
}

/* Case study title */
.bf-case-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 12px 0 0 0;
}

/* Case study meta row — industry · location · year */
.bf-case-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 12px 0 0 0;
  line-height: 1.4;
}

/* Case study description */
.bf-case-desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.004em;
  color: var(--stone);
  max-width: 460px;
  margin: 24px 0 0 0;
}

/* Outcome block */
.bf-case-outcome {
  border-top: 0.5px solid var(--border);
  padding-top: 20px;
  margin-top: 32px;
}
.bf-case-outcome-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.bf-case-outcome-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 420px;
}

/* Read the case link */
.bf-case-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 4px;
  margin-top: 28px;
  transition: color 200ms ease, transform 200ms ease;
}
.bf-case-cta:hover {
  color: var(--signal);
  transform: translateX(4px);
}

/* Browse all projects link — bottom of section */
.bf-browse-all {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 200ms ease, transform 200ms ease;
}
.bf-browse-all:hover {
  color: var(--signal);
  transform: translateX(4px);
}

/* Responsive: stack on mobile */
@media (max-width: 1023px) {
  .bf-case-row {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .bf-case-row .bf-case-shot,
  .bf-case-row .bf-case-text {
    width: 100% !important;
  }
  .bf-case-title {
    font-size: 36px;
  }
  .bf-case-outcome-value {
    font-size: 18px;
  }
}




/* ================================================================
   WHY BLACKFLOW SECTION (Step 6) — FIXED LAYOUT
================================================================ */

.bf-why {
  position: relative;
}

.bf-why-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--stone);
  max-width: 760px;
  margin: 32px 0 0 0;
}
.bf-why-lead strong {
  color: var(--bone);
  font-weight: 500;
}

.bf-belief-num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fog);
  margin: 0;
}

.bf-belief-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0;
}

.bf-belief-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.004em;
  color: var(--stone);
  max-width: 600px;
  margin: 24px 0 0 0;
}
.bf-belief-body strong {
  color: var(--bone);
  font-weight: 500;
}

.bf-belief-divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  border: none;
  display: block;
  margin: 64px 0;
}

/* ============================================================
   NUCLEAR LAYOUT FIX FOR BELIEF ROWS
   Forces correct widths regardless of Elementor container settings
============================================================ */

.bf-belief-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 64px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Left column (contains the big number) — fixed 200px */
.bf-belief-row > .e-con:nth-child(1),
.bf-belief-row > .elementor-element:nth-child(1) {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  flex: 0 0 200px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Right column (title + body) — takes remaining space */
.bf-belief-row > .e-con:nth-child(2),
.bf-belief-row > .elementor-element:nth-child(2) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 900px !important;
  width: auto !important;
}

/* Responsive */
@media (max-width: 1023px) {
  .bf-belief-row {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .bf-belief-row > .e-con:nth-child(1),
  .bf-belief-row > .elementor-element:nth-child(1),
  .bf-belief-row > .e-con:nth-child(2),
  .bf-belief-row > .elementor-element:nth-child(2) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  .bf-belief-num {
    font-size: 72px;
  }
  .bf-belief-title {
    font-size: 36px;
  }
  .bf-belief-body {
    font-size: 16px;
  }
  .bf-why-lead {
    font-size: 18px;
  }
}




/* ================================================================
   FINAL CTA SECTION (Step 7A)
================================================================ */

.bf-cta {
  position: relative;
}

/* Massive "Ready when you are." headline */
.bf-cta-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 180px;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--bone);
  margin: 24px 0 0 0;
  max-width: 11ch;
}

/* CTA description */
.bf-cta-desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.004em;
  color: var(--stone);
  max-width: 500px;
  margin: 0;
}

/* Response card — right column group */
.bf-resp-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bf-resp-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}

.bf-resp-block-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.bf-resp-channels {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--bone);
}
.bf-resp-channels .sep {
  color: var(--fog);
  margin: 0 8px;
}

/* Industries strip */
.bf-cta-industries {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.6;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.bf-cta-industries .sep {
  color: var(--fog);
  margin: 0 8px;
}

/* CTA primary button */
.bf-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: var(--signal);
  border: none;
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter 180ms ease, transform 180ms ease;
}
.bf-cta-btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* CTA ghost button (email) */
.bf-cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--bone);
  background: transparent;
  border: 0.5px solid var(--border-hover);
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.bf-cta-btn-ghost:hover {
  border-color: var(--bone);
  background: rgba(237, 234, 227, 0.04);
}

/* Responsive */
@media (max-width: 1199px) {
  .bf-cta-headline {
    font-size: 120px;
  }
}
@media (max-width: 1023px) {
  .bf-cta-row {
    flex-direction: column !important;
    gap: 48px !important;
  }
  .bf-cta-headline {
    font-size: 72px;
  }
  .bf-resp-block-value {
    font-size: 18px;
  }
}
@media (max-width: 560px) {
  .bf-cta-headline {
    font-size: 56px;
  }
  .bf-cta-industries {
    font-size: 10px;
  }
}








/* ================================================================
   FOOTER SECTION (Step 7B)
================================================================ */

.bf-footer {
  position: relative;
}

/* Footer brand column */
.bf-foot-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.045em;
  color: var(--bone);
  line-height: 1;
  display: inline-block;
  margin-bottom: 24px;
}
.bf-foot-wordmark .dot {
  color: var(--signal);
}

.bf-foot-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--stone);
  max-width: 260px;
  margin: 0 0 32px 0;
}

.bf-foot-location {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
}

.bf-foot-time {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

/* Footer nav columns */
.bf-foot-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 24px;
}

.bf-foot-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bf-foot-links li a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--bone);
  text-decoration: none;
  transition: color 180ms ease;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.bf-foot-links li a:hover {
  color: var(--signal);
}
.bf-foot-links li .price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--stone);
  letter-spacing: 0.04em;
}

/* Footer divider */
.bf-foot-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 64px 0 32px 0;
  display: block;
}

/* Footer bottom row */
.bf-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.4;
}
.bf-foot-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--signal);
}

.bf-foot-top-link {
  color: var(--bone);
  text-decoration: none;
  transition: color 180ms ease;
}
.bf-foot-top-link:hover {
  color: var(--signal);
}

/* Responsive — footer stacks */
@media (max-width: 1023px) {
  .bf-foot-top-row {
    flex-direction: column !important;
    gap: 48px !important;
  }
  .bf-foot-col {
    width: 100% !important;
  }
  .bf-foot-bottom {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
  }
}



/* ================================================================
   GET IN TOUCH PAGE
================================================================ */

.bf-contact {
  position: relative;
}

/* Page hero headline */
.bf-contact-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 120px;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--bone);
  margin: 24px 0 0 0;
}

/* Page subhead */
.bf-contact-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--stone);
  max-width: 480px;
  margin: 20px 0 0 0;
}

/* ============================================================
   CONTACT FORM
============================================================ */

.bf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.bf-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bf-form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

.bf-form input,
.bf-form textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--bone);
  background: rgba(237, 234, 227, 0.03);
  border: 0.5px solid rgba(237, 234, 227, 0.12);
  border-radius: 8px;
  padding: 14px 18px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 200ms ease;
  outline: none;
  -webkit-appearance: none;
}

.bf-form input::placeholder,
.bf-form textarea::placeholder {
  color: var(--fog);
}

.bf-form input:focus,
.bf-form textarea:focus {
  border-color: var(--signal);
}

.bf-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

.bf-form-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: var(--signal);
  border: none;
  padding: 14px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease;
  width: fit-content;
  margin-top: 8px;
}
.bf-form-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.bf-form-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Success / error states */
.bf-form-msg {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 8px;
}
.bf-form-msg.success {
  display: block;
  background: rgba(245, 209, 66, 0.08);
  border: 0.5px solid rgba(245, 209, 66, 0.3);
  color: var(--signal);
}
.bf-form-msg.error {
  display: block;
  background: rgba(198, 86, 58, 0.08);
  border: 0.5px solid rgba(198, 86, 58, 0.3);
  color: #C6563A;
}

/* ============================================================
   RESPONSE BLOCK (below form)
============================================================ */

.bf-contact-resp {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 28px;
  border-top: 0.5px solid var(--border);
}

.bf-contact-resp-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 4px;
}

.bf-contact-resp-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--bone);
  line-height: 1.3;
}

.bf-contact-resp-channels {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--bone);
}
.bf-contact-resp-channels a {
  color: var(--bone);
  text-decoration: none;
  transition: color 180ms ease;
}
.bf-contact-resp-channels a:hover {
  color: var(--signal);
}
.bf-contact-resp-channels .sep {
  color: var(--fog);
  margin: 0 8px;
}

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

@media (max-width: 1199px) {
  .bf-contact-headline {
    font-size: 80px;
  }
}
@media (max-width: 1023px) {
  .bf-contact-row {
    flex-direction: column !important;
    gap: 64px !important;
  }
  .bf-contact-headline {
    font-size: 60px;
  }
  .bf-contact-left,
  .bf-contact-right {
    width: 100% !important;
  }
}
@media (max-width: 560px) {
  .bf-contact-headline {
    font-size: 48px;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('http://blackflow.space/wp-content/uploads/2026/04/Geist-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('http://blackflow.space/wp-content/uploads/2026/04/Geist-Medium.woff2') format('woff2');
}
/* End Custom Fonts CSS */