.elementor-923 .elementor-element.elementor-element-a9f0364{--display:flex;}.elementor-923 .elementor-element.elementor-element-2bde079{--display:flex;}.elementor-923 .elementor-element.elementor-element-6258c94{--display:flex;}/* Start custom CSS for html, class: .elementor-element-a6820d7 *//* ==========================================================================
   BLACK 7 — V2 HEADER STYLES (rail + top bar only)
   Split from black7-v2-complete-styles.css so this can be attached
   directly to a header Theme Builder template, separate from body/footer.
   Self-contained — includes the base reset so it works loaded on its own.
   Scoped under .b7v2-wrap. Requires: Inter Google Font (300-800)
   ========================================================================== */

/* html/body background intentionally NOT set here — it is owned
   solely by black7-v2-body-only-styles.css (which includes the actual
   background image). If this file also set a plain background:#1a1a1c,
   loading after the body file would silently wipe out the image, since
   the background shorthand resets every sub-property not restated. */
.b7v2-wrap, .b7v2-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.b7v2-wrap { background: rgba(26,26,28,0.72); color: #fff; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* rail — FIXED to the viewport, not sized via flexbox. This matters
   because header/body/footer are now three separate .b7v2-wrap divs
   (three separate Theme Builder templates) rather than one shared flex
   container spanning the whole page. A flex-sized "height:100vh" rail
   would only stretch the header's own small box to fill the viewport;
   position:fixed instead pins it directly to the browser viewport,
   correctly overlaying the full page regardless of which template
   section it happens to be markup-wise defined within. */
.b7v2-wrap .b7v2-rail { position: fixed; top: 0; left: 0; width: 72px; height: 100vh; z-index: 100; border-right: 1px solid rgba(255,255,255,0.08); background: #1a1a1c; display: flex; flex-direction: column; justify-content: space-between; }
.b7v2-wrap .b7v2-rail-top { width: 100%; padding: 32px 0; display: flex; justify-content: center; background: #2b2b2d; border-bottom: 1px solid rgba(255,255,255,0.08); }
.b7v2-wrap .b7v2-menu-toggle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.b7v2-wrap .b7v2-menu-toggle span { display: block; width: 18px; height: 2px; background: #fff; transition: background .15s ease; }
.b7v2-wrap .b7v2-menu-toggle:hover span { background: #b0b0b8; }
.b7v2-wrap .b7v2-rail-icons { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 32px 0; }
.b7v2-wrap .b7v2-rail-icon { color: #6a6a72; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: color .15s ease; }
.b7v2-wrap .b7v2-rail-icon svg { width: 100%; height: 100%; }
.b7v2-wrap .b7v2-rail-icon:hover { color: #ffffff; }

/* main (padding context needed here so the topbar sits correctly).
   margin-left reserves space for the now-fixed rail (72px) since fixed
   elements don't push sibling content via flexbox anymore. */
.b7v2-wrap .b7v2-main { margin-left: 72px; position: relative; padding: 32px 40px; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .b7v2-wrap .b7v2-main { padding: 40px 64px; } }

/* topbar */
.b7v2-wrap .b7v2-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 72px; }
.b7v2-wrap .b7v2-logo { font-size: 24px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.02em; }
.b7v2-wrap .b7v2-logo span.b7v2-seven { color:#9e866d; }
.b7v2-wrap .b7v2-nav { display: none; gap: 32px; }
@media (min-width: 900px) { .b7v2-wrap .b7v2-nav { display: flex; } }
.b7v2-wrap .b7v2-nav a { color: #7a7a7c; text-decoration: none; font-size: 14px; font-weight: 500; padding-bottom: 6px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.b7v2-wrap .b7v2-nav a:hover { color: #fff; }
.b7v2-wrap .b7v2-nav a.b7v2-nav-active { color: #fff; border-bottom-color: #9e866d; }
.b7v2-wrap .b7v2-topbar-right { display: flex; align-items: center; gap: 24px; }
.b7v2-wrap .b7v2-contact-link { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:2px; }
.b7v2-wrap .b7v2-contact-link.b7v2-nav-active { border-bottom-color: #9e866d; }
.b7v2-wrap .b7v2-search-btn { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity:.8; }

/* mobile rail transform */
/* mobile rail transform — also fixed, but pinned across the TOP of the
   viewport as a horizontal bar instead of down the left side. */
@media (max-width: 900px) {
  .b7v2-wrap .b7v2-rail { width: 100%; height: auto; top: 0; left: 0; flex-direction: row; justify-content: space-between; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .b7v2-wrap .b7v2-rail-top { width: 72px; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); }
  .b7v2-wrap .b7v2-rail-icons { flex-direction: row; padding: 0 20px; gap: 20px; }
  /* Reserve top space (roughly the mobile rail bar's height) instead of
     left space, since the rail is now a horizontal bar up top. */
  .b7v2-wrap .b7v2-main { margin-left: 0; margin-top: 88px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-897c89e *//* ==========================================================================
   BLACK 7 — V2 BODY STYLES (everything between header and footer)
   Split from black7-v2-complete-styles.css. Covers hero, jobs preview,
   stats, all inner-page sections (Agency/Roster/Industries/Open Roles/
   Contact), and the plugin-compatible Contact form styling.
   Self-contained — includes the base reset so it works loaded on its own.
   Scoped under .b7v2-wrap. Requires: Inter Google Font (300-800)
   ========================================================================== */

/* Background image set directly on html's own background — NOT a
   position:fixed div. That approach broke: DevTools showed the fixed
   element's box collapsing to 1853x73px instead of the full viewport,
   meaning an Elementor wrapper ancestor (outside our control) has a
   transform/filter/contain property that traps position:fixed elements
   inside itself instead of the real browser viewport. background-
   attachment:fixed is a different CSS mechanism (a paint-time property
   of the element's own background, not a positioning scheme) and isn't
   affected by that same issue.

   Deliberately ONE image layer only. A previous version stacked a
   linear-gradient on top of the photo, which silently hid it:
   background-size applies to ALL layers, so "cover" made the gradient
   fill the whole area as a near-opaque wash over the image — and
   background-blend-mode:luminosity then crushed what little showed
   through. The darkening is now done by .b7v2-wrap's semi-transparent
   overlay below instead, which is far more predictable. */
html {
  background-color: #1a1a1c;
  background-image: url('https://www.black7.co.za/wp-content/uploads/2026/07/black7-3-scaled.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body { background: transparent; }
.b7v2-wrap, .b7v2-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
/* Semi-transparent dark overlay — this is what darkens/mutes the photo
   behind the content, replacing the old (broken) gradient layer. */
.b7v2-wrap { background: rgba(26,26,28,0.72); color: #fff; font-family: 'Inter', sans-serif; display: flex; -webkit-font-smoothing: antialiased; }
/* margin-left reserves space for the header's fixed rail (72px), since
   the rail is position:fixed to the viewport and spans every section
   of the page, not just the header's own box. */
.b7v2-wrap .b7v2-main { margin-left: 72px; flex: 1; position: relative; padding: 32px 40px; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .b7v2-wrap .b7v2-main { padding: 40px 64px; } }
@media (max-width: 900px) { .b7v2-wrap .b7v2-main { margin-left: 0; } }

/* -------------------- hero (homepage) -------------------- */
.b7v2-wrap .b7v2-hero { display: grid; grid-template-columns: 1fr; gap: 40px; flex: 1; padding: 32px; }
/* Background photo treatment moved to .b7v2-main (see near the top of
   this file) so it shows continuously behind the whole page instead of
   being boxed into just the hero strip. */
@media (min-width: 900px) { .b7v2-wrap .b7v2-hero { grid-template-columns: 220px 1fr 380px; gap: 48px; } }
.b7v2-wrap .b7v2-hero-side { padding-top: 4px; }
.b7v2-wrap .b7v2-eyebrow { font-size: 12px; color: #6a6a72; font-weight: 600; margin-bottom: 14px; letter-spacing:.08em; }
.b7v2-wrap .b7v2-side-heading { display: block; text-decoration: none; font-size: 14px; font-weight: 700; color: #fff; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.b7v2-wrap .b7v2-side-link { display: block; color: #8a8a92; text-decoration: none; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.b7v2-wrap .b7v2-side-link:hover { color: #ffffff; }
.b7v2-wrap .b7v2-headline { font-size: 14vw; font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; color: #fff; margin-bottom: 20px; }
@media (min-width: 640px) { .b7v2-wrap .b7v2-headline { font-size: 8vw; } }
@media (min-width: 1280px) { .b7v2-wrap .b7v2-headline { font-size: 92px; } }
.b7v2-wrap .b7v2-sub-red { font-size: 11px; letter-spacing:.18em; color:#9e866d; font-weight:700; margin-bottom:18px; }
.b7v2-wrap .b7v2-subtext { font-size: 16px; line-height: 1.6; color: #7a7a7c; max-width: 460px; margin-bottom: 32px; font-weight: 400; }
.b7v2-wrap .b7v2-cta { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; padding-bottom: 6px; border-bottom: 2px solid #9e866d; width: fit-content; margin-bottom:32px; }
.b7v2-wrap .b7v2-cta:hover { color: #b0b0b8; }
.b7v2-wrap .b7v2-badges { display:flex; gap:8px; flex-wrap:wrap; }
.b7v2-wrap .b7v2-badge { font-size:11px; font-weight:600; letter-spacing:.06em; padding:8px 12px; border:1px solid rgba(255,255,255,0.12); color:#8a8a92; }
.b7v2-wrap .b7v2-badge--red { color:#9e866d; border-color: rgba(158,134,109,0.35); background: rgba(158,134,109,0.06); }

/* -------------------- jobs side -------------------- */
.b7v2-wrap .b7v2-jobs-side { padding-top: 6px; }
.b7v2-wrap .b7v2-now-hiring { font-size:11px; letter-spacing:.14em; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:12px; margin-bottom:20px; text-align:right; }
.b7v2-wrap .b7v2-jobs-list { display:flex; flex-direction:column; gap:1px; background: rgba(255,255,255,0.08); }
.b7v2-wrap .b7v2-job-card { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:20px 18px; transition: background .15s; }
.b7v2-wrap .b7v2-job-card:hover { background: rgba(30,30,36,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.b7v2-wrap .b7v2-job-title { font-size:13px; font-weight:700; letter-spacing:.02em; line-height:1.3; margin-bottom:6px; color:#fff; }
.b7v2-wrap .b7v2-job-subtitle { font-weight:400; color:#7a7a7c; font-size:12px; }
.b7v2-wrap .b7v2-job-loc { font-size:12px; color:#6a6a72; margin-bottom:8px; }
.b7v2-wrap .b7v2-job-skills { font-size:11px; line-height:1.5; color:#8a8a92; }

/* -------------------- stats -------------------- */
.b7v2-wrap .b7v2-stats { display:flex; gap:32px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08); }
.b7v2-wrap .b7v2-stat-num { font-size:28px; font-weight:800; line-height:1; margin-bottom:6px; }
.b7v2-wrap .b7v2-stat-num--red { color:#9e866d; }
.b7v2-wrap .b7v2-stat-num--white { color:#fff; }
.b7v2-wrap .b7v2-stat-label { font-size:10px; letter-spacing:.08em; color:#6a6a72; line-height:1.3; font-weight:600; }

/* -------------------- homepage sections (e.g. Roster preview) -------------------- */
.b7v2-wrap .b7v2-section { margin-top: 96px; padding-bottom: 20px; }
.b7v2-wrap .b7v2-section-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.b7v2-wrap .b7v2-section-title { font-size: 24px; font-weight: 700; color: #fff; }
.b7v2-wrap .b7v2-section-title a { color: inherit; text-decoration: none; }
.b7v2-wrap .b7v2-section-link { color: #7a7a7c; text-decoration: none; font-size: 14px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.b7v2-wrap .b7v2-section-link:hover { color: #fff; border-bottom-color: #fff; }
.b7v2-wrap .b7v2-roster-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.08); }
@media (min-width: 700px) { .b7v2-wrap .b7v2-roster-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .b7v2-wrap .b7v2-roster-grid { grid-template-columns: 1fr 1fr 1fr; } }
.b7v2-wrap .b7v2-candidate-card { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding: 28px 24px; transition: background .15s ease; }
.b7v2-wrap .b7v2-candidate-card:hover { background: rgba(30,30,36,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.b7v2-wrap .b7v2-candidate-avatar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: #6a6a72; margin-bottom: 16px; }
.b7v2-wrap .b7v2-candidate-avatar svg { width: 22px; height: 22px; }
.b7v2-wrap .b7v2-candidate-id { font-size: 11px; color: #6a6a72; font-weight: 600; margin-bottom: 10px; letter-spacing: .08em; }
.b7v2-wrap .b7v2-candidate-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 10px; }
.b7v2-wrap .b7v2-candidate-meta { font-size: 12px; color: #8a8a92; font-weight: 400; }

/* -------------------- sub-page hero (Agency/Roster/Industries/Open Roles/Contact) -------------------- */
.b7v2-wrap .b7v2-page-hero { margin-bottom: 48px; padding: 32px; }
.b7v2-wrap .b7v2-page-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 16px; }
.b7v2-wrap .b7v2-page-title span.red { color:#9e866d; }
.b7v2-wrap .b7v2-page-sub { font-size: 16px; line-height: 1.5; color: #7a7a7c; margin-bottom: 12px; max-width: 700px; }
.b7v2-wrap .b7v2-page-tagline { font-size: 12px; letter-spacing:.08em; color:#6a6a72; font-weight:600; }

/* -------------------- quote -------------------- */
.b7v2-wrap .b7v2-quote { border:1px solid rgba(255,255,255,0.12); background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:28px 24px; margin-bottom:56px; max-width: 900px; }
.b7v2-wrap .b7v2-quote-heading { font-size:16px; font-weight:700; margin-bottom:10px; color:#fff; }
.b7v2-wrap .b7v2-quote-body { font-size:14px; line-height:1.6; color:#7a7a7c; }

/* -------------------- roster page (detailed candidate grid) -------------------- */
.b7v2-wrap .b7v2-candidate-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.08); margin-bottom:64px; }
@media (min-width: 800px) { .b7v2-wrap .b7v2-candidate-grid { grid-template-columns: 1fr 1fr; } }
.b7v2-wrap .b7v2-candidate-card-detailed { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:28px 24px; display:flex; flex-direction:column; gap:18px; transition: background .15s; }
.b7v2-wrap .b7v2-candidate-card-detailed:hover { background: rgba(30,30,36,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.b7v2-wrap .b7v2-candidate-fields { display:flex; flex-direction:column; gap:12px; }
.b7v2-wrap .b7v2-field { display:flex; flex-direction:column; gap:4px; }
.b7v2-wrap .b7v2-field-label { font-size:10px; letter-spacing:.1em; font-weight:700; color:#6a6a72; text-transform:uppercase; }
.b7v2-wrap .b7v2-field-value { font-size:13px; line-height:1.5; color:#7a7a7c; }
.b7v2-wrap .b7v2-availability { font-size:11px; font-weight:600; color:#8a8a92; border-top:1px solid rgba(255,255,255,0.08); padding-top:14px; margin-top:auto; }

/* verification */
.b7v2-wrap .b7v2-verification-heading { font-size:12px; letter-spacing:.1em; font-weight:700; color:#fff; margin-bottom:20px; }
.b7v2-wrap .b7v2-verification-row { display:flex; flex-wrap:wrap; gap:8px; }

/* -------------------- industries -------------------- */
.b7v2-wrap .b7v2-industry-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.08); margin-bottom:64px; }
@media (min-width: 800px) { .b7v2-wrap .b7v2-industry-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .b7v2-wrap .b7v2-industry-grid { grid-template-columns: 1fr 1fr 1fr; } }
.b7v2-wrap .b7v2-industry-card { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:28px 24px; display:flex; flex-direction:column; gap:16px; }
.b7v2-wrap .b7v2-industry-card:hover { background: rgba(30,30,36,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.b7v2-wrap .b7v2-industry-badge { font-size:10px; font-weight:700; letter-spacing:.1em; color:#9e866d; border:1px solid rgba(158,134,109,0.25); background: rgba(158,134,109,0.06); width:fit-content; padding:6px 8px; }
.b7v2-wrap .b7v2-industry-title { font-size:16px; font-weight:700; line-height:1.25; color:#fff; }
.b7v2-wrap .b7v2-industry-label { font-size:10px; letter-spacing:.1em; font-weight:700; color:#6a6a72; text-transform:uppercase; }
.b7v2-wrap .b7v2-industry-value { font-size:12px; line-height:1.6; color:#7a7a7c; }
.b7v2-wrap .b7v2-industry-fields { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.b7v2-wrap .b7v2-industry-field { display:flex; flex-direction:column; gap:4px; }

/* -------------------- shared: verification / guarantee / cta-block -------------------- */
.b7v2-wrap .b7v2-verification, .b7v2-wrap .b7v2-guarantee, .b7v2-wrap .b7v2-cta-block { max-width: 900px; }
.b7v2-wrap .b7v2-verification { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 32px; margin-bottom: 64px; }
.b7v2-wrap .b7v2-verification-badge { font-size:11px; font-weight:600; padding:10px 14px; border:1px solid rgba(255,255,255,0.12); color:#8a8a92; }
.b7v2-wrap .b7v2-verification-badge--red { color:#9e866d; border-color: rgba(158,134,109,0.35); background: rgba(158,134,109,0.06); }
.b7v2-wrap .b7v2-guarantee { border:1px solid rgba(255,255,255,0.12); border-left:2px solid #9e866d; background: rgba(28,28,34,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:28px 24px; margin-bottom:64px; }
.b7v2-wrap .b7v2-guarantee-heading { font-size:14px; font-weight:700; margin-bottom:8px; color:#fff; }
.b7v2-wrap .b7v2-guarantee-body { font-size:13px; line-height:1.6; color:#7a7a7c; }
.b7v2-wrap .b7v2-cta-heading { font-size:18px; font-weight:700; margin-bottom:10px; }
.b7v2-wrap .b7v2-cta-sub { font-size:14px; color:#7a7a7c; line-height:1.5; margin-bottom:24px; }
.b7v2-wrap .b7v2-cta-banner { display:inline-flex; padding:14px 18px; border:1px solid rgba(255,255,255,0.15); color:#fff; text-decoration:none; font-size:13px; font-weight:600; }
.b7v2-wrap .b7v2-cta-banner:hover { border-color:#9e866d; background: rgba(158,134,109,0.06); color:#9e866d; }
.b7v2-wrap .b7v2-grid-heading { font-size:11px; letter-spacing:.14em; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:12px; margin-bottom:24px; }

/* -------------------- process page: sequential stage list -------------------- */
/* Single-column always (unlike industry-grid) since these are ordered
   steps, not parallel categories — reuses .b7v2-industry-card/-badge/
   -title/-fields/-field/-label/-value for each stage's visual styling. */
.b7v2-wrap .b7v2-stage-list { display:flex; flex-direction:column; gap:1px; background: rgba(255,255,255,0.08); margin-bottom:64px; }

/* -------------------- open roles: filter bar + large job cards -------------------- */
.b7v2-wrap .b7v2-filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.08); }
.b7v2-wrap .b7v2-filter-pill { font-size:11px; font-weight:600; letter-spacing:.06em; padding:8px 14px; border:1px solid rgba(255,255,255,0.12); color:#8a8a92; cursor:pointer; background:transparent; transition: all .15s; }
.b7v2-wrap .b7v2-filter-pill:hover { border-color: rgba(255,255,255,0.3); color:#fff; }
.b7v2-wrap .b7v2-filter-pill--active { background:#fff; color:#1a1a1c; border-color:#fff; }
.b7v2-wrap .b7v2-jobs-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.08); margin-bottom:64px; }
@media (min-width: 900px) { .b7v2-wrap .b7v2-jobs-grid { grid-template-columns: 1fr 1fr; } }
.b7v2-wrap .b7v2-job-card-lg { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:28px 24px; display:flex; flex-direction:column; gap:14px; transition: background .15s; position:relative; }
.b7v2-wrap .b7v2-job-card-lg:hover { background: rgba(30,30,36,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.b7v2-wrap .b7v2-job-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.b7v2-wrap .b7v2-job-badge { font-size:9px; letter-spacing:.1em; font-weight:700; padding:5px 8px; border:1px solid rgba(255,255,255,0.12); color:#6a6a72; text-transform:uppercase; }
.b7v2-wrap .b7v2-job-badge--new { color:#9e866d; border-color: rgba(158,134,109,0.3); background: rgba(158,134,109,0.06); }
.b7v2-wrap .b7v2-job-title-lg { font-size:15px; font-weight:700; line-height:1.3; color:#fff; }
.b7v2-wrap .b7v2-job-loc-lg { font-size:12px; color:#6a6a72; }
.b7v2-wrap .b7v2-job-skills-lg { font-size:12px; line-height:1.6; color:#7a7a7c; }
.b7v2-wrap .b7v2-job-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.b7v2-wrap .b7v2-job-meta-item { font-size:10px; letter-spacing:.06em; color:#6a6a72; border:1px solid rgba(255,255,255,0.08); padding:6px 8px; }
.b7v2-wrap .b7v2-job-cta { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); }
.b7v2-wrap .b7v2-job-apply { font-size:12px; font-weight:600; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:2px; }
.b7v2-wrap .b7v2-job-apply:hover { color:#9e866d; border-color:#9e866d; }
.b7v2-wrap .b7v2-job-type { font-size:10px; color:#8a8a92; letter-spacing:.04em; }

/* ==========================================================================
   CONTACT PAGE — layout + plugin-compatible form styling
   ========================================================================== */
.b7v2-wrap .b7v2-contact-layout { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.08); max-width: 1100px; }
@media (min-width: 1024px) { .b7v2-wrap .b7v2-contact-layout { grid-template-columns: 1.3fr 1fr; } }
.b7v2-wrap .b7v2-form-panel { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:32px 28px; }
@media (min-width: 1024px) { .b7v2-wrap .b7v2-form-panel { padding:40px 32px; } }
.b7v2-wrap .b7v2-form-heading { font-size:14px; font-weight:700; letter-spacing:.04em; margin-bottom:24px; color:#fff; }
.b7v2-wrap .b7v2-form-note { font-size:11px; color:#6a6a72; line-height:1.5; margin-top:16px; }

.b7v2-wrap .b7c-form-row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
@media (min-width: 640px) { .b7v2-wrap .b7c-form-row--split { grid-template-columns: 1fr 1fr; } }
.b7v2-wrap .b7c-field { display: flex; flex-direction: column; gap: 6px; }
.b7v2-wrap .b7c-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6a6a72; }
.b7v2-wrap .b7c-input,
.b7v2-wrap .b7c-select,
.b7v2-wrap .b7c-textarea,
.b7v2-wrap input[type="text"],
.b7v2-wrap input[type="email"],
.b7v2-wrap input[type="tel"],
.b7v2-wrap select,
.b7v2-wrap textarea {
  background: #0f0f13; border: 1px solid rgba(255,255,255,0.12); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400;
  padding: 12px 14px; width:100%; border-radius:0; transition: border-color .15s;
}
.b7v2-wrap .b7c-input::placeholder,
.b7v2-wrap .b7c-textarea::placeholder { color: #565c68; }
.b7v2-wrap .b7c-input:focus,
.b7v2-wrap .b7c-select:focus,
.b7v2-wrap .b7c-textarea:focus,
.b7v2-wrap input:focus,
.b7v2-wrap select:focus,
.b7v2-wrap textarea:focus {
  outline: none; border-color: rgba(158,134,109,0.5); box-shadow: 0 0 0 3px rgba(158,134,109,0.10);
}
.b7v2-wrap .b7c-textarea, .b7v2-wrap textarea { resize: vertical; min-height: 120px; }
.b7v2-wrap .b7c-submit,
.b7v2-wrap button[type="submit"],
.b7v2-wrap .b7v2-submit {
  background:#fff; color:#1a1a1c; border:1px solid #fff; padding:14px 22px; font-family:'Inter',sans-serif; font-weight:700; font-size:13px; letter-spacing:.04em; cursor:pointer; transition: all .15s; margin-top:6px;
}
.b7v2-wrap .b7c-submit:hover,
.b7v2-wrap button[type="submit"]:hover,
.b7v2-wrap .b7v2-submit:hover { background:transparent; color:#fff; border-color: rgba(255,255,255,0.4); }
.b7v2-wrap .b7c-submit span { color:inherit; }
.b7v2-wrap .b7c-submit:disabled { opacity: .6; cursor: not-allowed; }
/* Plugin's actual output classes — separate from .b7v2-form-note above,
   which is only for the Contact page's own static text. */
.b7v2-wrap .b7c-form-note { font-size:11px; color:#6a6a72; line-height:1.5; margin-top:16px; font-style:italic; }
.b7v2-wrap .b7c-form-success { background: rgba(26,26,28,0.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border:1px solid rgba(158,134,109,0.35); padding:22px 20px; text-align:center; }
.b7v2-wrap .b7c-form-success-heading { font-size:14px; font-weight:700; color:#9e866d; margin-bottom:8px; letter-spacing:.04em; }
.b7v2-wrap .b7c-form-success-body { font-size:13px; line-height:1.6; color:#7a7a7c; }

/* job card apply — used by [b7_job_board variant="full"] */
.b7v2-wrap .b7v2-job-apply-toggle { font-size:12px; font-weight:600; color:#fff; background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.2); padding:0 0 2px; cursor:pointer; margin-top:auto; align-self:flex-start; }
.b7v2-wrap .b7v2-job-apply-toggle:hover { color:#9e866d; border-color:#9e866d; }
.b7v2-wrap .b7v2-job-apply-panel { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08); }

.b7v2-wrap .b7v2-info-panel { background: rgba(28,28,34,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding:32px 28px; display:flex; flex-direction:column; gap:24px; }
@media (min-width: 1024px) { .b7v2-wrap .b7v2-info-panel { padding:40px 32px; } }
.b7v2-wrap .b7v2-info-heading { font-size:11px; letter-spacing:.12em; font-weight:700; color:#9e866d; text-transform:uppercase; }
.b7v2-wrap .b7v2-info-item { display:flex; flex-direction:column; gap:4px; }
.b7v2-wrap .b7v2-info-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6a6a72; }
.b7v2-wrap .b7v2-info-value { font-size:14px; font-weight:500; color:#e5e7eb; line-height:1.5; }
.b7v2-wrap .b7v2-info-value a { color:#e5e7eb; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:1px; }
.b7v2-wrap .b7v2-info-value a:hover { color:#fff; border-color:#9e866d; }
.b7v2-wrap .b7v2-info-divider { border-top:1px solid rgba(255,255,255,0.08); margin:8px 0; }

/* Popup-specific styles ([b7_contact_form variant="popup"]) now live in
   their own file: black7-v2-popup-styles.css */

/* ==========================================================================
   CV BUILDER — [b7_cv_builder]
   Two zones: the FORM (dark, matches the rest of v2) and the generated
   PREVIEW (deliberately light/professional — candidates use this output
   to apply elsewhere too, not just on this site, so it stays a normal-
   looking résumé rather than being dark-branded).
   ========================================================================== */
.b7v2-wrap .b7cv-form { max-width: 720px; }
.b7v2-wrap .b7cv-section { margin-bottom: 28px; }
.b7v2-wrap .b7cv-section-heading { font-size:11px; letter-spacing:.1em; font-weight:700; color:#9e866d; text-transform:uppercase; margin-bottom:14px; }

.b7v2-wrap .b7cv-exp-block { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); padding:18px 18px 6px; margin-bottom:14px; position:relative; }
.b7v2-wrap .b7cv-exp-remove { position:absolute; top:10px; right:12px; background:none; border:none; color:#6a6a72; font-size:13px; cursor:pointer; }
.b7v2-wrap .b7cv-exp-remove:hover { color:#9e866d; }

.b7v2-wrap .b7cv-add-btn { background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); color:#d0d0d4; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:10px 18px; cursor:pointer; display:inline-block; margin-bottom:24px; transition: all .15s; }
.b7v2-wrap .b7cv-add-btn:hover { border-color: rgba(158,134,109,0.5); color:#9e866d; }

.b7v2-wrap .b7cv-consent-row { display:flex; align-items:flex-start; gap:10px; margin:20px 0; font-size:12.5px; color:#7a7a7c; line-height:1.5; }
.b7v2-wrap .b7cv-consent-row input[type="checkbox"] { margin-top:3px; flex-shrink:0; }

.b7v2-wrap .b7cv-action-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.b7v2-wrap .b7cv-btn-secondary { background: transparent; border:1px solid rgba(255,255,255,0.2); color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.04em; padding:14px 20px; cursor:pointer; transition: all .15s; }
.b7v2-wrap .b7cv-btn-secondary:hover { border-color: rgba(158,134,109,0.5); color:#9e866d; }

/* preview wrap (dark container around the light résumé card) */
.b7v2-wrap .b7cv-preview-wrap { margin-top:32px; }

/* the résumé itself — intentionally light, not dark/gold-branded */
.b7v2-wrap .b7cv-preview {
  background:#ffffff; color:#1a1a1a; font-family:'Inter',Arial,sans-serif;
  padding:40px 44px; max-width:760px; margin:0 auto; border-radius:2px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.b7v2-wrap .b7cv-preview h1 { font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:28px; color:#111; margin-bottom:4px; }
.b7v2-wrap .b7cv-preview-role { color:#444; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.b7v2-wrap .b7cv-preview-contact { color:#555; font-size:12.5px; margin-bottom:24px; line-height:1.6; }
.b7v2-wrap .b7cv-preview h2 { font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#8a6d3f; border-bottom:2px solid #8a6d3f; padding-bottom:4px; margin:22px 0 10px; }
.b7v2-wrap .b7cv-preview p, .b7v2-wrap .b7cv-preview li { font-size:13px; line-height:1.6; color:#222; }
.b7v2-wrap .b7cv-preview ul { padding-left:18px; margin-bottom:4px; }
.b7v2-wrap .b7cv-exp-entry { margin-bottom:14px; }
.b7v2-wrap .b7cv-exp-header { display:flex; justify-content:space-between; font-weight:700; font-size:13.5px; color:#111; }
.b7v2-wrap .b7cv-exp-dates { color:#666; font-weight:600; font-size:12px; }
.b7v2-wrap .b7cv-exp-company { color:#444; font-size:12.5px; font-style:italic; margin-bottom:4px; }
.b7v2-wrap .b7cv-footer-credit { margin-top:28px; padding-top:12px; border-top:1px solid #ddd; color:#999; font-size:10px; text-align:center; }

/* print styling — only the preview prints */
@media print {
  body * { visibility: hidden; }
  .b7cv-preview, .b7cv-preview * { visibility: visible; }
  .b7cv-preview { position: absolute; left: 0; top: 0; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1baa25e *//* ==========================================================================
   BLACK 7 — V2 FOOTER STYLES (footer only)
   Split from black7-v2-complete-styles.css so this can be attached
   directly to a footer Theme Builder template, separate from header/body.
   Self-contained — includes the base reset so it works loaded on its own.
   Scoped under .b7v2-wrap. Requires: Inter Google Font (300-800)
   ========================================================================== */

/* html/body background intentionally NOT set here — it is owned
   solely by black7-v2-body-only-styles.css (which includes the actual
   background image). If this file also set a plain background:#1a1a1c,
   loading after the body file would silently wipe out the image, since
   the background shorthand resets every sub-property not restated. */
.b7v2-wrap, .b7v2-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.b7v2-wrap { background: rgba(26,26,28,0.72); color: #fff; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
/* margin-left reserves space for the header's fixed rail (72px) — see
   the note in black7-v2-header-only-styles.css for why this is needed
   in every section, not just the header. */
.b7v2-wrap .b7v2-main { margin-left: 72px; flex: 1; position: relative; padding: 32px 40px; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .b7v2-wrap .b7v2-main { padding: 40px 64px; } }
@media (max-width: 900px) { .b7v2-wrap .b7v2-main { margin-left: 0; } }

/* footer */
.b7v2-wrap .b7v2-footer { margin-top:96px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.08); }
.b7v2-wrap .b7v2-micro { font-size:10px; letter-spacing:.18em; color:#6a6a72; font-weight:600; margin-bottom:20px; }
.b7v2-wrap .b7v2-banner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid rgba(255,255,255,0.12); padding:18px 20px; text-decoration:none; transition: border-color .15s, background .15s; }
.b7v2-wrap .b7v2-banner:hover { border-color: rgba(158,134,109,0.5); background: rgba(158,134,109,0.04); }
.b7v2-wrap .b7v2-banner-left { font-size:13px; font-weight:700; letter-spacing:.04em; color:#fff; }
.b7v2-wrap .b7v2-banner-right { font-size:12px; font-weight:600; color:#9e866d; letter-spacing:.06em; }
.b7v2-wrap .b7v2-footer-right { margin-top:20px; font-size:11px; line-height:1.6; color:#6a6a72; letter-spacing:.04em; }/* End custom CSS */