/*
Theme Name:   Venay Creative — Divi Child
Theme URI:    https://venaycreative.co.za
Description:  Child theme for Divi 5 carrying the Venay Creative redesign. Holds only the
              components Divi cannot build natively. Colour, type and spacing live in
              Divi 5 Design Variables — see README.md.
Author:       Venay Creative
Version:      1.3.1
Template:     Divi
Text Domain:  venay-child
*/

/* ============================================================
   0. Fallback tokens
   ------------------------------------------------------------
   Divi 5 Design Variables are the source of truth (README has the
   table). These are declared so the component CSS below still
   renders correctly if a variable has not been created yet, and so
   you can reference them inside Divi's own Custom CSS boxes.
   ============================================================ */
:root {
  --vc-accent:      #EDF000;
  --vc-accent-hi:   #F2FF00;
  --vc-accent-dim:  #C9CC00;
  --vc-accent-wash: rgba(237, 240, 0, 0.12);
  --vc-accent-line: rgba(237, 240, 0, 0.28);

  --vc-ink:    #0E0F11;
  --vc-ink-2:  #17191C;
  --vc-paper:  #FFFFFF;
  --vc-mist:   #F5F6F1;
  --vc-muted:  #666666;

  --vc-line:      rgba(14, 15, 17, 0.10);
  --vc-line-soft: rgba(14, 15, 17, 0.06);
  --vc-line-dark: rgba(255, 255, 255, 0.13);

  --vc-r:     20px;
  --vc-r-lg:  28px;
  --vc-r-xl:  40px;
  --vc-pill:  999px;

  --vc-ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --vc-dur:  0.42s;

  --vc-shadow:    0 18px 44px -20px rgba(14, 15, 17, 0.24);
  --vc-shadow-lg: 0 40px 90px -34px rgba(14, 15, 17, 0.42);
}

/* ============================================================
   1. Type baseline
   ------------------------------------------------------------
   Set the font family itself in Divi (Theme Options → fonts, or a
   Design Variable). This only fixes the tracking Divi does not
   expose per-heading-level.
   ============================================================ */
h1, h2, h3, h4, h5,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
  letter-spacing: -0.032em;
  line-height: 1.08;
  text-wrap: balance;
}
h1, .et_pb_module h1 { letter-spacing: -0.04em; }

::selection { background: var(--vc-accent); color: var(--vc-ink); }

/* Accent word inside a heading:  <span class="vc-hl">Brand</span> */
.vc-hl { color: var(--vc-accent); }

/* ============================================================
   2. Announcement bar  (Theme Builder header, top section)
   Section class: vc-topbar
   ============================================================ */
.vc-topbar { position: relative; }
.vc-topbar.vc-is-dismissed { display: none !important; }

.vc-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #35D07F;
  vertical-align: middle;
  margin-right: 8px;
  animation: vc-pulse 2.4s var(--vc-ease) infinite;
}
@keyframes vc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

.vc-topbar__close {
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem; line-height: 1;
  padding: 8px;
}
.vc-topbar__close:hover { color: #fff; }

.vc-topbar__pill {
  display: inline-block;
  margin-left: 10px;
  padding: 6px 14px;
  border-radius: var(--vc-pill);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  transition: background-color var(--vc-dur) var(--vc-ease),
              color var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease);
}
.vc-topbar__pill:hover {
  background: var(--vc-accent);
  color: var(--vc-ink);
  border-color: var(--vc-accent);
}

/* Divi centres the Code module's text; keep the bar on one line on desktop */
.vc-topbar .et_pb_code {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 620px) {
  .vc-topbar__close { display: none; }
  .vc-topbar__pill  { display: none; }
  .vc-topbar .et_pb_code { font-size: 0.76rem; }
}

/* ============================================================
   3. Floating pill nav  (Theme Builder header)
   Row class: vc-navbar   ·   set the row to Sticky in Divi
   ============================================================ */
.vc-navbar {
  border-radius: var(--vc-pill) !important;
  background: rgba(14, 15, 17, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: background-color var(--vc-dur) var(--vc-ease),
              box-shadow var(--vc-dur) var(--vc-ease);
}
.vc-navbar.et_pb_sticky--active {
  background: rgba(14, 15, 17, 0.94) !important;
  box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.7);
}

/* Divi Menu module inside the pill */
.vc-navbar .et_pb_menu__menu > nav > ul > li > a {
  padding: 9px 15px;
  border-radius: var(--vc-pill);
  font-weight: 500;
  transition: color var(--vc-dur) var(--vc-ease),
              background-color var(--vc-dur) var(--vc-ease);
}
.vc-navbar .et_pb_menu__menu > nav > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}
.vc-navbar .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  color: var(--vc-accent) !important;
}
/* Divi draws a bottom border on the current item — replace with a dot */
.vc-navbar .et_pb_menu__menu > nav > ul > li.current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--vc-accent);
}
.vc-navbar .et_pb_menu__menu > nav > ul > li { position: relative; }

/* ---- Mobile header ----------------------------------------
   Divi stacks a row's columns below 980px: each becomes width:100%,
   float:left, margin-bottom:30px. That turns the capsule into a
   ~460px blob with the logo, burger and CTA stacked down it.
   Lay the row out as one flex line instead and drop the CTA — at
   375px the logo, burger and a button do not fit, and "Connect"
   is already in the menu.
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .vc-navbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 8px 14px 8px 18px !important;
  }
  .vc-navbar > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }
  .vc-navbar > .et_pb_column:first-child  { flex: 0 0 auto; }
  .vc-navbar > .et_pb_column:nth-child(3),
  .vc-navbar > .et_pb_column:nth-child(4) { display: none !important; }

  /* The menu column was display:block, so nothing pushed the burger to the
     right — it floated near the middle of the remaining space. Make the whole
     chain flex and end-aligned so it sits hard right inside the pill. */
  .vc-navbar > .et_pb_column:nth-child(2) {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
  }
  .vc-navbar .et_pb_menu,
  .vc-navbar .et_pb_menu_inner_container,
  .vc-navbar .et_pb_menu__wrap {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
  }
  .vc-navbar .et_mobile_nav_menu {
    margin: 0 0 0 auto !important;
    float: none !important;
  }

  /* A proper 44px tap target rather than a bare glyph */
  .vc-navbar .mobile_menu_bar {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
  }
  .vc-navbar .mobile_menu_bar::before { margin: 0 !important; top: auto !important; }

  .vc-navbar .et_pb_image,
  .vc-navbar .et_pb_menu { margin-bottom: 0 !important; }
  .vc-navbar img { width: 108px !important; }

  .vc-topbar .et_pb_code { font-size: 0.72rem; line-height: 1.45; }
}

/* Header CTA: uppercase and bold, with no icon.
   Divi's default button icon is glyph "5" in its ETmodules font and renders as
   an empty box wherever that font fails to resolve. Hidden here as well as
   switched off in the layout, so it cannot come back. */
.vc-navbar .et_pb_button {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-right: 24px !important;
}
.vc-navbar .et_pb_button::after,
.vc-navbar .et_pb_button:hover::after {
  display: none !important;
  content: none !important;
  margin: 0 !important;
  opacity: 0 !important;
}

/* Connect sits in the WordPress menu so it survives into the collapsed mobile
   menu, where the yellow CTA button is hidden. On desktop the button is there,
   so hide the nav item rather than show Connect twice. */
@media (min-width: 981px) {
  .vc-navbar .et_pb_menu__menu nav > ul > li:has(> a[href$="/connect/"]) {
    display: none;
  }
}

/* Divi renders the burger in its own brand blue (#2ea3f2) because the Menu
   module is flagged as a light background. Force it to white. */
.vc-navbar .mobile_menu_bar::before,
.vc-navbar .mobile_menu_bar::after,
.vc-navbar .et_pb_menu__icon::before { color: #fff !important; }
.vc-navbar .mobile_nav { color: #fff; }

/* ============================================================
   MOBILE MENU — full-screen overlay
   ------------------------------------------------------------
   Modelled on dumacollective.com: a plain left-aligned list, no
   numbering, no dividers, no inline CTA. Current page takes the brand
   accent, everything else white. Logo centred at the top with the close
   cross at the right, both injected by venay.js so they sit INSIDE the
   overlay — Divi pins z-index:4 inline on the nav row and traps it in a
   stacking context, so the real header cannot reliably be lifted above
   a fixed overlay.
   ============================================================ */

/* Burger drawn from two bars rather than Divi's icon font, so it can morph
   into the close cross and never renders as an empty box. */
.vc-navbar .mobile_menu_bar { position: relative; z-index: 2; }
.vc-navbar .mobile_menu_bar::before,
.vc-navbar .mobile_menu_bar::after {
  content: "" !important;
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  border-radius: 2px;
  background: #fff;
  color: transparent !important;
  font-size: 0 !important;
  transition: transform 0.3s var(--vc-ease), top 0.3s var(--vc-ease);
}
.vc-navbar .mobile_menu_bar::before { top: 17px; }
.vc-navbar .mobile_menu_bar::after  { top: 25px; }
.vc-navbar .mobile_nav.opened .mobile_menu_bar::before { top: 21px; transform: rotate(45deg); }
.vc-navbar .mobile_nav.opened .mobile_menu_bar::after  { top: 21px; transform: rotate(-45deg); }

body.vc-menu-open { overflow: hidden; }

/* A backdrop-filter makes an element the containing block for its
   position:fixed descendants — so while the pill carried blur(18px) the
   full-screen overlay was clamped to the pill's own 343x66 box. Dropping
   the filter while the menu is open frees it, and hides the pill behind
   the overlay, which has its own logo and cross. */
.vc-navbar:has(.mobile_nav.opened) {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ---- the overlay ---- */
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 26px 40px 40px !important;
  z-index: 98;

  background: var(--vc-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* Divi opens this with jQuery slideDown(), which writes height, overflow,
     padding and margin inline and animates them from near zero. With the panel
     fixed to the viewport there is no natural height to grow into, so it stuck
     at 0.02px. These override the inline values it writes. */
  height: auto !important;
  opacity: 1 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* ---- the list ---- */
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li:not(.vc-menu-head) {
  padding: 0 0 15px !important;
  border: 0 !important;
}
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li:not(.vc-menu-head) > a {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 25px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  color: #fff !important;
  transition: color 0.25s var(--vc-ease);
}
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li:not(.vc-menu-head) > a:hover,
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li.current-menu-item:not(.vc-menu-head) > a {
  color: var(--vc-accent) !important;
}

/* ---- logo + close, injected by venay.js ---- */
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li.vc-menu-head {
  position: relative;
  display: block !important;
  padding: 0 0 46px !important;
  border: 0 !important;
  text-align: center;
}
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li.vc-menu-head > a,
body .vc-navbar .et_pb_menu .et_mobile_menu.et_mobile_menu > li.vc-menu-head > a:hover {
  display: inline-block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.vc-menu-head .vc-menu-logo img { width: 128px; height: auto; display: block; }
.vc-menu-head .vc-menu-close {
  position: absolute;
  top: -4px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: color var(--vc-dur) var(--vc-ease);
}
.vc-menu-head .vc-menu-close svg { width: 24px; height: 24px; }
.vc-menu-head .vc-menu-close:hover { color: var(--vc-accent); }

/* ============================================================
   4. Status pill   —  "Available for new projects"
   Text module class: vc-status
   ============================================================ */
.vc-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: var(--vc-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}
.vc-status p { margin: 0; padding: 0; }

/* ============================================================
   5. Rotating badge  —  Code module, markup in README
   ============================================================ */
.vc-spinner {
  position: absolute;
  top: -46px; right: -18px;
  width: 104px; height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vc-accent);
  color: var(--vc-ink);
  box-shadow: var(--vc-shadow);
  z-index: 3;
}
.vc-spinner svg { width: 100%; height: 100%; animation: vc-spin 16s linear infinite; }
.vc-spinner text { font-size: 11.4px; font-weight: 600; letter-spacing: 0.17em; fill: var(--vc-ink); }
.vc-spinner__core { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; }
.vc-spinner__core svg { width: 16px; height: 16px; animation: none; }
@keyframes vc-spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .vc-spinner { top: -40px; right: 10px; width: 92px; height: 92px; }
}

/* ============================================================
   6. Client marquee  —  Code module, markup in README
   ============================================================ */
.vc-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.vc-marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(40px, 5vw, 82px);
  animation: vc-slide 34s linear infinite;
}
.vc-marquee:hover .vc-marquee__track { animation-play-state: paused; }
.vc-marquee__item {
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vc-ink);
  opacity: 0.42;
  white-space: nowrap;
  transition: opacity var(--vc-dur) var(--vc-ease);
}
.vc-marquee__item:hover { opacity: 1; }
@keyframes vc-slide { to { transform: translateX(-50%); } }

/* ============================================================
   7. Service cards  —  Divi Blurb or Text module
   Module class: vc-svc
   ============================================================ */
.vc-svc {
  position: relative;
  border-radius: var(--vc-r-lg);
  background: var(--vc-paper);
  border: 1px solid var(--vc-line);
  overflow: hidden;
  transition: transform var(--vc-dur) var(--vc-ease),
              box-shadow var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease);
}
.vc-svc::after {
  content: "";
  position: absolute;
  inset: auto -40% -70% -40%;
  height: 190px;
  background: radial-gradient(ellipse at center, var(--vc-accent-wash), transparent 70%);
  opacity: 0;
  transition: opacity var(--vc-dur) var(--vc-ease);
  pointer-events: none;
}
.vc-svc:hover { transform: translateY(-5px); box-shadow: var(--vc-shadow); border-color: var(--vc-accent-line); }
.vc-svc:hover::after { opacity: 1; }
.vc-svc > * { position: relative; z-index: 1; }

/* Icon tile — Blurb icon, or an inline SVG in a Text module */
.vc-svc .et_pb_main_blurb_image,
.vc-svc .vc-svc__ico {
  width: 50px; height: 50px;
  display: grid !important;
  place-items: center;
  border-radius: 14px;
  background: var(--vc-ink);
  color: var(--vc-accent);
  margin-bottom: 16px;
  transition: transform var(--vc-dur) var(--vc-ease);
}
.vc-svc .et_pb_main_blurb_image .et-pb-icon { color: var(--vc-accent); font-size: 23px; }
.vc-svc:hover .et_pb_main_blurb_image,
.vc-svc:hover .vc-svc__ico { transform: rotate(-8deg) scale(1.06); }

/* Bulleted feature list inside the card */
.vc-svc ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.vc-svc ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 9px !important;
  font-size: 0.895rem;
  color: var(--vc-muted);
  line-height: 1.5;
}
.vc-svc ul li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--vc-accent-dim);
  flex: none;
}

/* Corner number:  <span class="vc-num">01</span> */
.vc-num {
  position: absolute;
  top: 22px; right: 26px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #8A8D90;
  z-index: 2;
}

/* ============================================================
   8. Work cards  —  Row/Blurb, class: vc-work
   ============================================================ */
.vc-work {
  border-radius: var(--vc-r-lg);
  overflow: hidden;
  background: var(--vc-ink-2);
  border: 1px solid var(--vc-line-dark);
  transition: transform var(--vc-dur) var(--vc-ease), box-shadow var(--vc-dur) var(--vc-ease);
}
.vc-work:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75); }
.vc-work .et_pb_image_wrap { overflow: hidden; display: block; }
.vc-work img { transition: transform 0.85s var(--vc-ease); width: 100%; }
.vc-work:hover img { transform: scale(1.055); }

/* Tag pills:  <span class="vc-tag">Brand Identity</span> */
.vc-tag {
  display: inline-block;
  padding: 5px 11px;
  margin: 0 7px 7px 0;
  border-radius: var(--vc-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   9. Industry tiles  —  Divi Image module, class: vc-ind
   ============================================================ */
.vc-ind {
  position: relative;
  border-radius: var(--vc-r);
  overflow: hidden;
  background: var(--vc-ink);
  transition: transform var(--vc-dur) var(--vc-ease), box-shadow var(--vc-dur) var(--vc-ease);
}
.vc-ind img { width: 100%; transition: transform 0.7s var(--vc-ease); display: block; }
.vc-ind:hover { transform: translateY(-5px); box-shadow: var(--vc-shadow); }
.vc-ind:hover img { transform: scale(1.06); }
.vc-ind::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  transition: border-color var(--vc-dur) var(--vc-ease);
  pointer-events: none;
}
.vc-ind:hover::after { border-color: var(--vc-accent); }

/* ============================================================
   10. Pillar cards  —  class: vc-pillar
   ============================================================ */
.vc-pillar {
  border-radius: var(--vc-r-lg);
  overflow: hidden;
  background: var(--vc-paper);
  border: 1px solid var(--vc-line);
  transition: transform var(--vc-dur) var(--vc-ease),
              box-shadow var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease);
}
.vc-pillar:hover { transform: translateY(-5px); box-shadow: var(--vc-shadow); border-color: var(--vc-accent-line); }
.vc-pillar .et_pb_image_wrap { overflow: hidden; display: block; }
.vc-pillar img { transition: transform 0.8s var(--vc-ease); width: 100%; }
.vc-pillar:hover img { transform: scale(1.05); }

/* Step badge:  <span class="vc-step">1</span> */
.vc-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--vc-accent);
  color: var(--vc-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============================================================
   11. Studio locale panel  (replaces the map embed)
   Class: vc-locale
   ============================================================ */
.vc-locale {
  position: relative;
  border-radius: var(--vc-r-lg);
  overflow: hidden;
  background: var(--vc-ink);
  isolation: isolate;
}
.vc-locale::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%);
}
.vc-locale::after {
  content: "";
  position: absolute; z-index: 0;
  width: 460px; height: 460px;
  top: -180px; right: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 240, 0, 0.18), transparent 68%);
  filter: blur(60px);
}
.vc-locale > * { position: relative; z-index: 1; }

.vc-pin {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--vc-accent);
  color: var(--vc-ink);
}

/* ============================================================
   11b. Footer components  —  Code modules in the Global Footer
   ============================================================ */

/* Column heading: NAVIGATE / WHAT WE DO / CONNECT */
.vc-fhead {
  display: block;
  margin-bottom: 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* Stacked link lists */
.vc-flinks { display: flex; flex-direction: column; gap: 11px; }
.vc-flinks a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--vc-dur) var(--vc-ease);
}
.vc-flinks a:hover { color: var(--vc-accent); }

/* Contact rows with leading icons */
.vc-fcontact { display: flex; flex-direction: column; gap: 14px; }
.vc-fcontact > div { display: flex; gap: 11px; align-items: flex-start; }
.vc-fcontact svg {
  width: 17px; height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--vc-accent);
}
.vc-fcontact span, .vc-fcontact a {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--vc-dur) var(--vc-ease);
}
.vc-fcontact a:hover { color: var(--vc-accent); }

/* Social circles */
.vc-socials { display: flex; gap: 9px; margin-bottom: 18px; }
.vc-socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.8);
  transition: background-color var(--vc-dur) var(--vc-ease),
              color var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease),
              transform var(--vc-dur) var(--vc-ease);
}
.vc-socials a svg { width: 16px; height: 16px; }
.vc-socials a:hover {
  background: var(--vc-accent);
  color: var(--vc-ink);
  border-color: var(--vc-accent);
  transform: translateY(-3px);
}

/* Sortlist membership pill */
.vc-sortlist {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--vc-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}
.vc-sortlist img { width: 58px; filter: brightness(0) invert(1); opacity: 0.85; }
.vc-sortlist svg { width: 15px; height: 15px; color: var(--vc-accent); flex: none; }

/* Copyright / legal bar */
.vc-fbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}
.vc-fbar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.vc-fbar a { color: inherit; transition: color var(--vc-dur) var(--vc-ease); }
.vc-fbar a:hover { color: var(--vc-accent); }

@media (max-width: 620px) {
  .vc-fbar { justify-content: center; text-align: center; }
}

/* ============================================================
   12. Footer ghost wordmark  —  Text module, class: vc-wordmark
   ============================================================ */
.vc-wordmark {
  font-size: clamp(2rem, 10.6vw, 11rem) !important;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.05) !important;
  text-align: center;
  user-select: none;
  overflow: hidden;
}
.vc-wordmark p { margin: 0; color: inherit !important; font-size: inherit !important; }

/* ============================================================
   13. Divi form fields  —  Contact Form module, class: vc-form
   ============================================================ */
.vc-form .et_pb_contact_field .et_pb_contact_field_options_title,
.vc-form .et_pb_contact_field > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vc-ink);
}
.vc-form .et_pb_contact_field input,
.vc-form .et_pb_contact_field textarea,
.vc-form .et_pb_contact_field select {
  border-radius: 14px !important;
  border: 1px solid var(--vc-line) !important;
  background: var(--vc-mist) !important;
  padding: 14px 16px !important;
  font-size: 0.9rem !important;
  transition: border-color var(--vc-dur) var(--vc-ease),
              background-color var(--vc-dur) var(--vc-ease),
              box-shadow var(--vc-dur) var(--vc-ease);
}
.vc-form .et_pb_contact_field input:focus,
.vc-form .et_pb_contact_field textarea:focus,
.vc-form .et_pb_contact_field select:focus {
  outline: none;
  background: #fff !important;
  border-color: var(--vc-ink) !important;
  box-shadow: 0 0 0 4px var(--vc-accent-wash);
}
.vc-form .et_pb_contact_submit { width: 100%; justify-content: center; }

/* ============================================================
   13b. Divi 5 corrections — found against the live install
   ============================================================ */

/* Divi puts a Button module's wrapper on its own line, so two buttons stack and
   a pill radius turns a wrapped label into a blob. Sit them side by side at
   their natural width instead. */
.et_pb_button_module_wrapper:has(> .vc-btn) {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  margin-right: 12px;
}
.vc-btn { white-space: nowrap; }

/* The white enquiry card is the hero COLUMN, not the form module — that is the
   only way to get a heading above the fields and a phone line below them
   inside one card. Divi sets the background, radius and padding; the shadow
   is here so it matches the static build exactly. */
.vc-card { box-shadow: var(--vc-shadow-lg); }

/* Divi renders a real <label> for every field and then hides it. Show them,
   because the design puts labels above the inputs rather than relying on
   placeholder text alone (which disappears the moment someone types). */
.vc-form .et_pb_contact_form_label {
  display: block !important;
  margin-bottom: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--vc-ink);
}
/* Required markers on the fields the form actually needs */
.vc-form .et_pb_contact_field[data-id="name"]  .et_pb_contact_form_label::after,
.vc-form .et_pb_contact_field[data-id="email"] .et_pb_contact_form_label::after,
.vc-form .et_pb_contact_field[data-id="brief"] .et_pb_contact_form_label::after {
  content: " *";
  color: var(--vc-accent-dim);
}

/* Select field, styled to match the text inputs */
.vc-form .et_pb_contact_field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 14px 40px 14px 16px !important;
  background-color: var(--vc-mist) !important;
  border: 1px solid var(--vc-line) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px;
}
.vc-form .et_pb_contact_field input,
.vc-form .et_pb_contact_field textarea,
.vc-form .et_pb_contact_field select,
.vc-form input[type="text"],
.vc-form input[type="email"],
.vc-form input[type="tel"],
.vc-form textarea {
  border-radius: 14px !important;
}
/* Submit spans the card, matching the static build.
   Divi 5 lays the form out with flex, and the bottom row shrinks to its
   content — so widening the button alone does nothing until its container
   is told to take the full row. */
.vc-form .et_contact_bottom_container {
  flex: 1 0 100% !important;
  width: 100% !important;
  justify-content: stretch;
  text-align: center;
}
.vc-form .et_pb_button_wrapper { width: 100% !important; }
.vc-form .et_pb_contact_submit {
  width: 100% !important;
  text-align: center;
  justify-content: center;
  padding: 15px 22px !important;
}

/* Hero stat labels: three counters inside a half-width column leaves them
   narrow, so ease the size and tighten the leading. */
.vc-hero .et_pb_number_counter .title {
  font-size: 12px;
  line-height: 1.35;
}

/* Service card icon tile (inline SVG, not a Divi Blurb icon) */
.vc-svc__ico svg { width: 23px; height: 23px; }

/* Hero and CTA accent glow. Divi has no ::before layer of its own to fight,
   so the same treatment as the static build drops straight in. */
.vc-hero, .vc-cta-band { position: relative; overflow: hidden; isolation: isolate; }
.vc-hero::before, .vc-hero::after, .vc-cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.vc-hero::before {
  width: 720px; height: 720px; top: -320px; right: -180px;
  background: radial-gradient(circle, rgba(237, 240, 0, 0.20), transparent 68%);
}
.vc-hero::after {
  width: 620px; height: 620px; bottom: -340px; left: -200px;
  background: radial-gradient(circle, rgba(237, 240, 0, 0.10), transparent 70%);
}
.vc-cta-band::before {
  width: 640px; height: 640px; top: -280px; left: 50%; margin-left: -320px;
  background: radial-gradient(circle, rgba(237, 240, 0, 0.22), transparent 66%);
  filter: blur(70px);
}

/* ============================================================
   14. Accessibility
   ============================================================ */
:focus-visible { outline: 2px solid var(--vc-accent-dim); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  /* The client-logo marquee is deliberately NOT stopped here: the client wants it
     running at all times, and a slow horizontal drift is tolerable. Everything
     else that moves on its own still stops. */
  .vc-spinner svg,
  .vc-dot { animation: none !important; }
  * { transition-duration: 0.001ms !important; }
}

/* ============================================================
   25. Trailing cursor  (pointer devices only)
   ------------------------------------------------------------
   A dot that tracks the pointer and a ring that eases behind it. Both sit on
   mix-blend-mode: difference so they invert against whatever is underneath —
   legible on the dark hero and the white sections without any per-section
   handling. Built by venay.js, which skips it on touch and when the visitor
   has asked for reduced motion.
   ============================================================ */
.vc-cursor-dot,
.vc-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s var(--vc-ease),
              width 0.28s var(--vc-ease),
              height 0.28s var(--vc-ease),
              margin 0.28s var(--vc-ease);
}
.vc-cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #fff;
}
.vc-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

body.vc-cursor-on .vc-cursor-dot,
body.vc-cursor-on .vc-cursor-ring { opacity: 1; }

/* Ring opens up over anything clickable */
body.vc-cursor-hot .vc-cursor-ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(255, 255, 255, 0.9);
}
body.vc-cursor-hot .vc-cursor-dot {
  width: 0;
  height: 0;
  margin: 0;
}

@media (hover: none), (pointer: coarse) {
  .vc-cursor-dot, .vc-cursor-ring { display: none !important; }
}

/* ============================================================
   26. Sticky footer
   ------------------------------------------------------------
   On a page shorter than the viewport the footer floated up and left
   a band of white body background beneath it — measured at 190px on a
   1440x900 screen. Divi's wrappers are plain blocks, so the footer has
   nothing pushing it down. Making the chain a flex column and giving
   the footer margin-top:auto pins it to the bottom; the dark body
   colour covers any overscroll bounce underneath.
   ============================================================ */
body { background-color: var(--vc-ink); }

#page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#et-boc,
#et-main-area {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.et-l--footer { margin-top: auto; }


/* ============================================================
   27. Typeface consistency
   ------------------------------------------------------------
   Plus Jakarta Sans was never set as Divi's body font, so everything
   that inherits — the whole footer — was falling back to Divi's
   default Open Sans, while the nav and headings used the brand face.
   Setting it here means the site is consistent whether or not the
   Theme Options value is ever changed.
   ============================================================ */
:root { --vc-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

body,
body input,
body textarea,
body select,
body button,
.et_pb_module,
.et_pb_text,
.et_pb_code { font-family: var(--vc-font); }

/* Footer components inherit from Code modules, which Divi does not style,
   so they need naming explicitly. */
.vc-fhead,
.vc-flinks a,
.vc-fcontact a,
.vc-fcontact span,
.vc-fbar,
.vc-fbar a,
.vc-sortlist,
.vc-wordmark,
.vc-tag,
.vc-num,
.vc-step,
.vc-status,
.vc-hmeta,
.vc-eyebrow,
.vc-ctile { font-family: var(--vc-font) !important; }

/* Footer links a touch heavier, to sit with the bolder menu */
.vc-flinks a,
.vc-fcontact a { font-weight: 600; }

/* ============================================================
   28. Showreel  —  Code module, class: vc-showreel
   ------------------------------------------------------------
   Full-bleed, edge to edge on every width, square corners — as on
   dumacollective.com. Divi's Video module wraps Vimeo in its own play
   overlay and exposes no autoplay / mute / loop, so this is a plain iframe
   with the parameters on the URL. The row and column carry zero padding in
   the layout; these rules back that up against Divi's defaults.
   ============================================================ */
.vc-showreel-section { padding: 0 !important; }
.vc-showreel-row {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.vc-showreel-row > .et_pb_column { padding: 0 !important; margin: 0 !important; }
.vc-showreel { padding: 0 !important; margin: 0 !important; }

.vc-showreel__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.vc-showreel__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Unmute toggle — bottom right, pill, blurred over the picture. Browsers allow
   un-muting only inside a real user gesture, which a click is. */
.vc-showreel__sound {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--vc-pill);
  background: rgba(14, 15, 17, 0.72);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--vc-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--vc-dur) var(--vc-ease),
              color var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease),
              transform var(--vc-dur) var(--vc-ease);
}
.vc-showreel__sound svg { width: 18px; height: 18px; flex: none; }
.vc-showreel__sound .vc-showreel__ico-on { display: none; }
.vc-showreel__sound[aria-pressed="true"] .vc-showreel__ico-on { display: block; }
.vc-showreel__sound[aria-pressed="true"] .vc-showreel__ico-muted { display: none; }
.vc-showreel__sound:hover,
.vc-showreel__sound[aria-pressed="true"] {
  background: var(--vc-accent);
  color: var(--vc-ink);
  border-color: var(--vc-accent);
}
.vc-showreel__sound:hover { transform: translateY(-2px); }
.vc-showreel__sound:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 3px; }

@media (max-width: 620px) {
  .vc-showreel__sound {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .vc-showreel__label { display: none; }
}

/* ============================================================
   29. Connect page  —  layout: DIVI LAYOUTS/venay-2026-connect.json
   ------------------------------------------------------------
   The hero's white card column, the pill buttons and the form fields
   are already covered by sections 13 and 13b. This adds what is new
   on Connect: the hero meta strip, the white details section that
   rises over the hero and the four contact tiles.
   ============================================================ */

/* Hero meta strip (Code module):
   <div class="vc-hmeta"><div><b>1 Day</b><small>Typical reply time</small></div>…</div> */
.vc-hmeta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3vw, 46px);
  padding-top: 10px;
}
.vc-hmeta > div { display: flex; flex-direction: column; gap: 5px; }
.vc-hmeta b {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--vc-accent);
}
.vc-hmeta small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; }

/* Eyebrow above an H2:  <span class="vc-eyebrow">FAQ</span> */
.vc-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-accent-dim);
}

/* Details section: rounded top rising 40px over the dark hero. The layout
   carries the negative margin and radius; z-index here keeps it above the
   hero, which has its own stacking context for the glow. */
.vc-details { position: relative; z-index: 2; }

/* Contact tiles — one Code module per column. The row is made flex so the
   four tiles stand the same height; Divi floats the columns otherwise. */
.vc-details .et_pb_row { display: flex !important; flex-wrap: wrap; align-items: stretch; }
.vc-details .et_pb_column { display: flex; flex-direction: column; }
.vc-details .et_pb_column .et_pb_code,
.vc-details .et_pb_column .et_pb_code_inner { flex: 1; display: flex; }
.vc-ctile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--vc-r-lg);
  border: 1px solid var(--vc-line);
  background: var(--vc-paper);
  transition: transform var(--vc-dur) var(--vc-ease),
              box-shadow var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease);
}
.vc-ctile:hover { transform: translateY(-4px); box-shadow: var(--vc-shadow); border-color: var(--vc-accent-line); }
.vc-ctile__ico {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--vc-ink);
  color: var(--vc-accent);
  margin-bottom: 6px;
}
.vc-ctile__ico svg { width: 19px; height: 19px; }
.vc-ctile h4 { margin: 0; padding: 0; font-size: 1rem; font-weight: 600; color: var(--vc-ink); }
.vc-ctile a,
.vc-ctile p { margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.55; color: var(--vc-muted); }
.vc-ctile a { font-weight: 600; transition: color var(--vc-dur) var(--vc-ease); }
/* Four across leaves ~215px of text width per tile. The email address is the
   one line that does not fit at the tile size, so it runs a step smaller and
   may break only as a last resort. */
.vc-ctile__email { font-size: 0.82rem !important; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.vc-ctile a:hover { color: var(--vc-ink); }
.vc-ctile__more { margin-top: auto !important; padding-top: 8px !important; font-size: 0.82rem !important; color: var(--vc-ink) !important; }
.vc-ctile__more:hover { color: var(--vc-accent-dim) !important; }

/* ============================================================
   30. Industry Verticals  —  layout: DIVI LAYOUTS/venay-2026-industry-verticals.json
   ------------------------------------------------------------
   The tiles are the client's own 1080×1080 PNGs as Image modules in
   columns carrying section 9's vc-ind class (hover lift, zoom, yellow
   edge) — the sandbox treatment, kept by the client's decision. This
   section only adds the responsive column grid, the client-logo
   marquee (section 6 base, logos variant, running left → right) and
   the dark CTA band.
   ============================================================ */

/* Eyebrow with a rule running to the right edge:
   <span class="vc-eyebrow vc-eyebrow--rule">Selected Clients</span> */
.vc-eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  color: var(--vc-accent);
}
.vc-eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--vc-line-dark); }

/* Tile grid. The image is square, so the column width sets the tile height;
   the module needs no bottom margin inside its column. */
.vc-verticals .et_pb_row { display: flex !important; flex-wrap: wrap; align-items: stretch; }
.vc-verticals .et_pb_row + .et_pb_row { margin-top: 30px; }
.vc-verticals .vc-ind .et_pb_image { margin-bottom: 0 !important; }
.vc-verticals .vc-ind .et_pb_image_wrap,
.vc-verticals .vc-ind img { display: block; width: 100%; }

@media (max-width: 980px) {
  /* Two across on tablets and phones rather than one long column (the sandbox
     stacked them one-up, which runs very tall with square tiles). Spacing comes
     from the row's gap, so Divi's own column margins are zeroed. */
  .vc-verticals .et_pb_row { column-gap: 5% !important; row-gap: 24px; }
  .vc-verticals .et_pb_column { width: 47.5% !important; margin: 0 !important; }
}
@media (max-width: 520px) {
  .vc-verticals .et_pb_row { column-gap: 4% !important; row-gap: 16px; }
  .vc-verticals .et_pb_column { width: 48% !important; }
  .vc-verticals .et_pb_row + .et_pb_row { margin-top: 16px; }
}

/* Logo marquee variant, running left → right. The eleven PNGs in the media
   library (600×300, transparent) are already brand yellow, so they run as-is;
   the 600×300 canvas carries padding, hence the generous height. */
.vc-marquee-row { padding: 0 !important; }
/* The 600×300 canvases carry a lot of empty space around each mark, so the
   rendered height is generous (the mark itself ends up ~45–90px). 30 s per
   pass is fast enough to read as movement at a glance. */
.vc-marquee--logos .vc-marquee__track { gap: clamp(28px, 4vw, 72px); padding: 6px 0; animation-duration: 30s; }
.vc-marquee--ltr .vc-marquee__track { animation-direction: reverse; }
.vc-marquee--logos .vc-marquee__item { opacity: 0.92; display: flex; align-items: center; }
.vc-marquee--logos .vc-marquee__item img {
  height: 132px;
  width: auto;
  max-width: none;
  display: block;
}
.vc-marquee--logos .vc-marquee__item:hover { opacity: 1; }
/* Never stops — the client wants it running the whole time, even under the pointer */
.vc-marquee--logos:hover .vc-marquee__track { animation-play-state: running; }
@media (max-width: 980px) { .vc-marquee--logos .vc-marquee__item img { height: 104px; } }
@media (max-width: 620px) { .vc-marquee--logos .vc-marquee__item img { height: 84px; } .vc-marquee--logos .vc-marquee__track { animation-duration: 22s; } }

/* CTA band (dark rounded row inside a mist section) */
.vc-cta-band { text-align: center; }
.vc-cta-band .et_pb_text, .vc-cta-band .et_pb_text h2 { color: #fff; }
.vc-cta-band .et_pb_button_module_wrapper { text-align: center; }

/* Clients band: same dark rounded treatment and glow as the CTA band, but
   left-aligned, with the marquee running edge to edge inside it. The row has
   no side padding, so the heading carries the inset itself. */
.vc-clients-band { text-align: left; }
.vc-clients-band .vc-clients-band__head { padding: 0 clamp(24px, 4vw, 56px) !important; }
.vc-clients-band .vc-eyebrow { color: var(--vc-accent); }
.vc-clients-band .vc-marquee { margin: 0; }
.vc-clients-band .et_pb_code { margin-bottom: 0 !important; }

/* ============================================================
   31. Case studies  —  hub (/case-studies/) and single pages
   ------------------------------------------------------------
   Source of the design: HOME MOCKUP/index.html (cards) and
   HOME MOCKUP/case-kagiso-trust.html (single page). Every block is a
   Code module carrying plain HTML on these classes; the generator is
   GENERATORS/gen_case_studies.py. Dark pages throughout.
   ============================================================ */
:root {
  --vc-cs-card:  #15171A;
  --vc-cs-fg:    #F5F6F1;
  --vc-cs-muted: #9A9DA0;
  --vc-cs-body:  #C9CBCD;
  --vc-glass-bg:   rgba(14, 15, 17, 0.82);
  --vc-glass-line: rgba(255, 255, 255, 0.10);
  --vc-ghost-bg:   rgba(255, 255, 255, 0.09);
  --vc-ghost-line: rgba(255, 255, 255, 0.13);
  --vc-h1: clamp(2.4rem, 6vw, 4.9rem);
  --vc-h2: clamp(1.9rem, 3.8vw, 3.3rem);
  --vc-h3: clamp(1.25rem, 1.9vw, 1.6rem);
}

/* Shared type inside the case-study blocks */
.vc-cs, .vc-case { font-family: var(--vc-font); color: var(--vc-cs-fg); font-size: 17px; line-height: 1.6; }
.vc-cs h1, .vc-cs h2, .vc-cs h3, .vc-case h3 {
  margin: 0; padding: 0; font-weight: 500; letter-spacing: -0.032em; line-height: 1.08;
  color: var(--vc-cs-fg) !important; text-wrap: balance;
}
.vc-cs p, .vc-case p { margin: 0; padding: 0; }
.vc-cs ul { margin: 0; padding: 0; list-style: none; }
.vc-ey { display: block; margin: 0; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--vc-accent); }
.vc-lede { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.65; color: var(--vc-cs-muted); max-width: 62ch; }
.vc-body { color: var(--vc-cs-body); max-width: 60ch; }

/* Pill buttons in HTML — the live header CONNECT pill: uppercase, bold, tracked, no icon */
.vc-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 28px; border-radius: var(--vc-pill);
  font-family: var(--vc-font); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: background-color var(--vc-dur) var(--vc-ease), color var(--vc-dur) var(--vc-ease),
              border-color var(--vc-dur) var(--vc-ease), transform var(--vc-dur) var(--vc-ease),
              box-shadow var(--vc-dur) var(--vc-ease);
}
.vc-pill:hover { transform: translateY(-2px); }
.vc-pill--primary { background: var(--vc-accent); color: var(--vc-ink) !important; }
.vc-pill--primary:hover { background: var(--vc-accent-hi); box-shadow: 0 14px 30px -16px rgba(237, 240, 0, 0.6); }
.vc-pill--ghost {
  background: var(--vc-ghost-bg); border-color: var(--vc-ghost-line); color: var(--vc-cs-fg) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.vc-pill--ghost:hover { background: var(--vc-accent); border-color: var(--vc-accent); color: var(--vc-ink) !important; }
.vc-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vc-actions--start { justify-content: flex-start; }

/* Reveal on scroll — resting state is visible; venay.js adds .pre only when it can remove it */
.vc-rv { transition: opacity 0.9s var(--vc-ease), transform 0.9s var(--vc-ease); }
.vc-rv.pre { opacity: 0; transform: translateY(28px); }

/* ---- Hub: section head + Joren-style cards ---- */
/* Hub rows run to the same width as the floating header pill (92%, max 1440px) so the
   cards line up with the nav edges while scrolling; single pages keep the 1240px reading width. */
.vc-cs-row:has(.vc-cases-head), .vc-cs-row:has(.vc-case) { max-width: 1440px !important; }
.vc-cases-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: end; }
.vc-cases-head h1, .vc-cases-head h2 { font-size: var(--vc-h2); margin-top: 14px; }
.vc-cases-head .vc-lede { justify-self: end; }

.vc-case {
  position: relative; display: block; border-radius: var(--vc-r-xl); background: var(--vc-cs-card);
  overflow: hidden; min-height: clamp(380px, 40vw, 560px); isolation: isolate;
  border: 1px solid var(--vc-glass-line); text-decoration: none;
  transition: transform 0.6s var(--vc-ease), box-shadow 0.6s var(--vc-ease), border-color 0.6s var(--vc-ease);
}
.vc-case:hover { transform: translateY(-6px); border-color: var(--vc-accent-line); box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.7); }
.vc-case__glow {
  position: absolute; z-index: 0; inset: -20% auto auto -16%; width: 66%; height: 120%; border-radius: 50%;
  background: radial-gradient(ellipse at 38% 38%, rgba(237, 240, 0, 0.42) 0%, rgba(237, 240, 0, 0.30) 28%,
              rgba(237, 240, 0, 0.14) 50%, rgba(237, 240, 0, 0.04) 66%, transparent 78%);
  filter: blur(40px); transition: transform 1.4s var(--vc-ease);
}
.vc-case__glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.18), transparent 55%);
  mix-blend-mode: soft-light; animation: vc-drift 14s ease-in-out infinite alternate;
}
.vc-case:hover .vc-case__glow { transform: translate(2%, 2%) scale(1.04); }
@keyframes vc-drift { from { transform: translate(-4%, -3%); } to { transform: translate(5%, 4%); } }
.vc-case__shot {
  position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: 72%; overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 22%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.vc-case__shot img {
  position: absolute; right: -4%; top: 9%; width: 104%; height: 100%; max-width: none;
  object-fit: cover; object-position: left top; border-radius: 22px 0 0 0; transition: transform 1.4s var(--vc-ease);
}
.vc-case:hover .vc-case__shot img { transform: translateY(-10px) scale(1.02); }
.vc-case__glass {
  position: absolute; z-index: 2; left: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 42px); border-radius: 28px;
  background: var(--vc-glass-bg); border: 1px solid var(--vc-glass-line);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end;
  transition: transform 0.7s var(--vc-ease), background-color 0.7s var(--vc-ease);
}
.vc-case:hover .vc-case__glass { transform: translateY(-6px); background: rgba(14, 15, 17, 0.94); }
.vc-case__ey { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--vc-accent); }
.vc-case h3 { font-size: clamp(1.55rem, 2.6vw, 2.4rem); margin: 8px 0 10px; letter-spacing: -0.03em; }
.vc-case__svc { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--vc-cs-muted); margin-bottom: 10px; }
.vc-case__blurb { color: var(--vc-cs-body); max-width: 64ch; font-size: 15.5px; line-height: 1.6; }
.vc-case .vc-pill--primary { padding: 16px 26px; }
/* Concept projects with no mockup yet: shorter card, glow only */
.vc-case--noshot { min-height: clamp(300px, 30vw, 380px); }
@media (max-width: 900px) {
  .vc-cases-head { grid-template-columns: 1fr; } .vc-cases-head .vc-lede { justify-self: start; }
  .vc-case { min-height: 0; display: grid; grid-template-rows: auto auto; }
  .vc-case__glow { width: 130%; height: 70%; inset: -25% auto auto -15%; }
  .vc-case__shot {
    position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10;
    margin: clamp(56px, 10vw, 80px) 0 0 clamp(18px, 4vw, 32px); overflow: visible; mask-image: none; -webkit-mask-image: none;
  }
  .vc-case__shot img { position: relative; right: auto; top: auto; width: 100%; height: 100%; border-radius: 18px 0 0 0; }
  .vc-case__glass { position: relative; left: auto; right: auto; bottom: auto; margin: -24px clamp(14px, 3vw, 24px) clamp(14px, 3vw, 24px); grid-template-columns: 1fr; align-items: start; }
  .vc-case--noshot { display: block; padding-top: clamp(56px, 10vw, 80px); }
}

/* ---- Single page: banner ---- */
.vc-cs-banner { position: relative; isolation: isolate; }
.vc-cs-banner::before {
  content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 720px; height: 720px; max-width: 90vw;
  border-radius: 50%; background: radial-gradient(circle, rgba(237, 240, 0, 0.18), transparent 68%); filter: blur(90px); pointer-events: none;
}
.vc-back {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--vc-cs-muted) !important; padding: 10px 16px 10px 12px; border-radius: var(--vc-pill);
  border: 1px solid var(--vc-ghost-line); background: var(--vc-ghost-bg); text-decoration: none;
  transition: color var(--vc-dur) var(--vc-ease), border-color var(--vc-dur) var(--vc-ease);
}
.vc-back:hover { color: var(--vc-cs-fg) !important; border-color: var(--vc-cs-muted); }
.vc-back i { display: inline-block; width: 18px; height: 1px; background: currentColor; position: relative; }
.vc-back i::before { content: ""; position: absolute; left: 0; top: -3px; width: 6px; height: 6px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.vc-cs-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
.vc-cs-banner h1 { font-size: var(--vc-h1); letter-spacing: -0.04em; margin-top: 16px; }
.vc-cs-banner .vc-lede { margin-top: 22px; }
.vc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--vc-line-dark); }
.vc-meta div { padding: 18px 0; border-bottom: 1px solid var(--vc-line-dark); }
.vc-meta div:nth-child(odd) { padding-right: 20px; }
.vc-meta div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--vc-line-dark); }
.vc-meta dt { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--vc-cs-muted); margin-bottom: 6px; }
.vc-meta dd { margin: 0; font-weight: 500; font-size: 15.5px; line-height: 1.4; color: var(--vc-cs-fg); }
.vc-cs-hero {
  margin-top: clamp(36px, 5vw, 64px); position: relative; border-radius: var(--vc-r-xl); overflow: hidden;
  background: var(--vc-cs-card); border: 1px solid var(--vc-glass-line); isolation: isolate; aspect-ratio: 16 / 8.5; min-height: 260px;
}
.vc-cs-hero__glow {
  position: absolute; z-index: 0; inset: -30% auto auto -12%; width: 60%; height: 140%; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, rgba(237, 240, 0, 0.40) 0%, rgba(237, 240, 0, 0.26) 30%, rgba(237, 240, 0, 0.10) 52%, transparent 74%);
  filter: blur(40px);
}
.vc-cs-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 40%; z-index: 1;
  mask-image: linear-gradient(to right, transparent 0, #000 14%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
  transition: transform 1.6s var(--vc-ease);
}
.vc-cs-hero:hover img { transform: scale(1.02); }
.vc-cs-hero__chip {
  position: absolute; z-index: 2; left: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--vc-pill);
  background: var(--vc-glass-bg); border: 1px solid var(--vc-glass-line);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.vc-cs-hero__chip b { color: var(--vc-accent); font-weight: 700; }
/* Concept projects with no mockup: glow panel with the chip only */
.vc-cs-hero--noshot { aspect-ratio: 16 / 5; min-height: 200px; }
/* Motion projects (Strava MAXX, Lumina Pay, Penelope AI): the Vimeo piece plays in the
   banner, muted and looping, exactly like the Home showreel. The panel takes the video's
   16:9 so the player never letterboxes; the mockup sits underneath as poster/fallback and
   the showreel's sound pill is reused bottom-right, opposite the chip. */
.vc-cs-hero--video { aspect-ratio: 16 / 9; min-height: 0; background: #000; }
.vc-cs-hero--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 2; background: #000; }
.vc-cs-hero--video img { mask-image: none; -webkit-mask-image: none; }
.vc-cs-hero--video:hover img { transform: none; }
.vc-cs-hero--video .vc-cs-hero__chip { z-index: 3; }
.vc-cs-hero--video .vc-showreel__sound { z-index: 3; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); }
@media (max-width: 860px) { .vc-cs-grid { grid-template-columns: 1fr; align-items: start; } .vc-cs-hero { aspect-ratio: 4 / 3; } .vc-cs-hero--noshot { aspect-ratio: 16 / 7; } .vc-cs-hero--video { aspect-ratio: 16 / 9; } }

/* ---- Single page: two-column text blocks (label left, copy right) ---- */
.vc-two {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: start;
  padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--vc-line-dark);
}
.vc-two h2 { font-size: var(--vc-h2); margin-top: 14px; }
.vc-two__stack { display: grid; gap: 18px; }
@media (max-width: 860px) { .vc-two { grid-template-columns: 1fr; } }

/* ---- Single page: what Venay solved ---- */
.vc-did-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.vc-did-head h2 { font-size: var(--vc-h2); margin-top: 14px; }
.vc-did-head .vc-lede { justify-self: end; }
.vc-cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vc-cs-card {
  position: relative; overflow: hidden; background: var(--vc-cs-card); border: 1px solid var(--vc-glass-line); border-radius: var(--vc-r-lg);
  padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 14px; align-content: start; isolation: isolate;
  transition: transform 0.6s var(--vc-ease), border-color 0.6s var(--vc-ease);
}
.vc-cs-card::before {
  content: ""; position: absolute; z-index: -1; inset: auto auto -40% -30%; width: 90%; height: 90%; border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 240, 0, 0.18), transparent 66%); filter: blur(36px); opacity: 0; transition: opacity 0.8s var(--vc-ease);
}
.vc-cs-card:hover { transform: translateY(-4px); border-color: var(--vc-accent-line); }
.vc-cs-card:hover::before { opacity: 1; }
.vc-cs-card .n { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--vc-accent); }
.vc-cs-card h3 { font-size: var(--vc-h3); }
.vc-cs-card p { color: var(--vc-cs-muted); font-size: 15.5px; }
.vc-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.vc-chip {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 10px 14px; border-radius: var(--vc-pill);
  background: var(--vc-ghost-bg); border: 1px solid var(--vc-ghost-line);
  transition: background-color var(--vc-dur) var(--vc-ease), color var(--vc-dur) var(--vc-ease), border-color var(--vc-dur) var(--vc-ease);
}
.vc-chip:hover { background: var(--vc-accent); color: var(--vc-ink); border-color: var(--vc-accent); }
@media (max-width: 900px) { .vc-did-head { grid-template-columns: 1fr; } .vc-did-head .vc-lede { justify-self: start; } .vc-cs-cards { grid-template-columns: 1fr; } }

/* ---- Single page: impact panel ---- */
.vc-res {
  background: var(--vc-ink-2); border: 1px solid var(--vc-glass-line); border-radius: var(--vc-r-lg); padding: clamp(26px, 3vw, 40px);
  position: relative; overflow: hidden; isolation: isolate;
}
.vc-res::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: -40%; width: 70%; height: 120%; border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 240, 0, 0.20), transparent 68%); filter: blur(60px);
}
.vc-res h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin-top: 14px; max-width: 22ch; }
.vc-res .vc-body { margin-top: 18px; }
.vc-res .vc-scope { margin-top: 22px; font-size: 13.5px; color: var(--vc-cs-muted); padding-top: 18px; border-top: 1px solid var(--vc-line-dark); }
.vc-res .vc-actions { margin-top: 26px; }

/* ---- Single page: closing band + previous / next ---- */
.vc-cs-cta {
  position: relative; overflow: hidden; background: var(--vc-ink-2); border-radius: var(--vc-r-xl);
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 80px); text-align: center; isolation: isolate; border: 1px solid var(--vc-glass-line);
}
.vc-cs-cta::before {
  content: ""; position: absolute; left: 50%; top: -40%; width: 640px; height: 640px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(237, 240, 0, 0.22), transparent 66%); filter: blur(70px); z-index: -1;
}
.vc-cs-cta h2 { font-size: var(--vc-h1); letter-spacing: -0.04em; max-width: 14ch; margin: 14px auto 0; }
.vc-cs-cta .vc-lede { margin: 22px auto 34px; text-align: center; }
.vc-next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.vc-next a {
  display: grid; gap: 8px; padding: clamp(22px, 3vw, 30px); border-radius: var(--vc-r-lg); border: 1px solid var(--vc-glass-line);
  background: var(--vc-cs-card); color: var(--vc-cs-fg) !important; text-decoration: none;
  transition: border-color var(--vc-dur) var(--vc-ease), transform var(--vc-dur) var(--vc-ease);
}
.vc-next a:hover { border-color: var(--vc-accent-line); transform: translateY(-3px); }
.vc-next .lbl { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--vc-cs-muted); }
.vc-next .ttl { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; }
.vc-next a:last-child { text-align: right; }
@media (max-width: 600px) { .vc-next { grid-template-columns: 1fr; } .vc-next a:last-child { text-align: left; } }

/* Divi puts 30px under every module; the blocks set their own rhythm */
.vc-cs-row .et_pb_code { margin-bottom: 0 !important; }


/* ============================================================
   32. What We Do  —  layout: DIVI LAYOUTS/venay-2026-what-we-do.json
   ------------------------------------------------------------
   Generator: GENERATORS/gen_what_we_do.py. Hero is the client's Hero1N.mp4
   (media id 1905) full-bleed under a black → yellow gradient; the four
   capability cards reproduce the hover on adaracreativeedge.co.za/solutions:
   a 6px lift, a brighter border and a spotlight that follows the cursor
   (spotlight() in venay.js writes --mx/--my on mousemove) — in brand yellow.
   Type comes from the case-study classes (.vc-cs, .vc-ey, .vc-lede, .vc-pill).
   ============================================================ */
.vc-wwd-hero-section { padding: 0 !important; }
.vc-wwd-hero-row { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.vc-wwd-hero-row > .et_pb_column { padding: 0 !important; margin: 0 !important; }
.vc-wwd-hero-row .et_pb_code { padding: 0 !important; margin: 0 !important; }

.vc-wwd-hero {
  position: relative; isolation: isolate; overflow: hidden; background: #0E0F11;
  min-height: clamp(520px, 74vh, 780px); display: flex; align-items: flex-end;
}
.vc-wwd-hero__video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center; display: block;
}
/* Black on the left where the copy sits, brand yellow bleeding in from the right,
   and a fade into the page ink along the bottom so the cards section joins cleanly.
   Kept light enough that the clip reads through everywhere; the copy gets a soft
   shadow for legibility instead of a heavier tint. */
.vc-wwd-hero__tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, #0E0F11 0%, rgba(14, 15, 17, 0.50) 20%, rgba(14, 15, 17, 0) 44%),
    linear-gradient(100deg, rgba(14, 15, 17, 0.84) 0%, rgba(14, 15, 17, 0.62) 34%, rgba(14, 15, 17, 0.22) 56%, rgba(237, 240, 0, 0.30) 78%, rgba(237, 240, 0, 0.55) 100%);
}
.vc-wwd-hero__inner h1, .vc-wwd-hero__inner .vc-lede, .vc-wwd-hero__inner .vc-ey { text-shadow: 0 2px 24px rgba(14, 15, 17, 0.7); }
/* Phones: the copy sits at the bottom, so darken bottom-up and let the clip show at the top. */
@media (max-width: 768px) {
  .vc-wwd-hero__tint {
    background:
      linear-gradient(to top, #0E0F11 0%, rgba(14, 15, 17, 0.88) 30%, rgba(14, 15, 17, 0.45) 58%, rgba(14, 15, 17, 0.12) 100%),
      linear-gradient(100deg, rgba(14, 15, 17, 0) 50%, rgba(237, 240, 0, 0.42) 100%);
  }
}
.vc-wwd-hero__inner {
  position: relative; z-index: 2; width: 92%; max-width: 1440px; margin: 0 auto;
  padding: clamp(120px, 18vh, 200px) 0 clamp(56px, 8vw, 96px);
}
.vc-wwd-hero__inner h1 { font-size: var(--vc-h1); letter-spacing: -0.04em; margin-top: 16px; max-width: 12ch; }
.vc-wwd-hero__inner .vc-lede { margin-top: 22px; color: rgba(245, 246, 241, 0.82); max-width: 46ch; }
.vc-wwd-hero__inner .vc-actions { margin-top: 32px; }
/* The clip stays on under prefers-reduced-motion: it is a slow, silent background like the
   Home showreel, and macOS "Reduce Motion" users (the client among them) must still see it. */

/* ---- Capability cards ---- */
.vc-wwd-row { max-width: 1440px !important; }
.vc-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.vc-cap {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: 120px;
  display: flex; flex-direction: column; min-height: 100%;
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 40px);
  border-radius: var(--vc-r-xl); border: 1px solid var(--vc-glass-line);
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(255, 255, 255, 0.05), transparent 46%),
    linear-gradient(180deg, #17191C 0%, var(--vc-cs-card) 100%);
  transition: transform 0.35s var(--vc-ease), border-color 0.35s var(--vc-ease), box-shadow 0.35s var(--vc-ease);
}
/* The spotlight: a soft yellow pool under the cursor, revealed on hover. */
.vc-cap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(237, 240, 0, 0.16), rgba(237, 240, 0, 0.05) 36%, transparent 56%);
  transition: opacity 0.3s var(--vc-ease);
}
.vc-cap:hover { transform: translateY(-6px); border-color: rgba(237, 240, 0, 0.45); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9); }
.vc-cap:hover::before { opacity: 1; }
.vc-cap > * { position: relative; z-index: 1; }
.vc-cap__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: clamp(28px, 3.5vw, 44px); }
.vc-cap__icon {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px;
  background: rgba(237, 240, 0, 0.08); border: 1px solid rgba(237, 240, 0, 0.18); color: var(--vc-accent);
  transition: background-color 0.35s var(--vc-ease), transform 0.35s var(--vc-ease);
}
.vc-cap__icon svg { width: 24px; height: 24px; display: block; }
.vc-cap:hover .vc-cap__icon { background: rgba(237, 240, 0, 0.16); transform: translateY(-2px); }
.vc-cap__n { font-size: 13px; letter-spacing: 0.1em; font-weight: 600; color: var(--vc-cs-muted); transition: color 0.35s var(--vc-ease); }
.vc-cap:hover .vc-cap__n { color: var(--vc-accent); }
.vc-cap h3 { font-size: clamp(1.45rem, 2.1vw, 1.9rem); letter-spacing: -0.035em; line-height: 1.12; max-width: 16ch; }
.vc-cap__lede { margin-top: 12px !important; color: var(--vc-cs-muted); font-size: 15.5px; line-height: 1.6; max-width: 50ch; }
.vc-cap__list { margin: clamp(22px, 2.6vw, 32px) 0 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid var(--vc-line-dark); }
.vc-cap__list li { display: block; list-style: none; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--vc-line-dark); }
.vc-cap__list li::before, .vc-cap__list li::marker { content: none; display: none; }
.vc-cap__list h4 { margin: 0 0 4px; padding: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--vc-cs-fg) !important; }
.vc-cap__list p { font-size: 14px; line-height: 1.6; color: var(--vc-cs-body); max-width: 58ch; }
.vc-cap__foot { margin-top: auto; padding-top: clamp(22px, 2.6vw, 30px); }
@media (max-width: 980px) {
  .vc-cap-grid { grid-template-columns: 1fr; }
  .vc-cap h3 { max-width: none; }
}
@media (max-width: 560px) {
  .vc-wwd-hero { min-height: clamp(460px, 70vh, 620px); }
}
@media (prefers-reduced-motion: reduce) {
  .vc-cap, .vc-cap:hover { transform: none; }
  .vc-cap::before { display: none; }
}