/* ===========================================================
   VISIBILITY FIX — restore light backgrounds for sections that
   use dark text (#000/#2c2c2c/#333 etc.) but had no background
   of their own, so they no longer sit invisible against the
   page's black body background. Applies site-wide since every
   service page links this stylesheet after its inline critical
   CSS, so these rules win the cascade.
=========================== */
.clientLogos,
.tableMain,
.flutterReact,
.swo,
.cspSlider,
.crossTabs,
.advancedTech,
.industrySpecific,
.odooKeyFeatures,
.whyChoose {
  background-color: #ffffff;
}

/* Comparison-table body cells inherited the page's global white
   body text color (no color of their own), making the first two
   columns invisible against the table's white background. */
.tableMain .cmp-table td {
  color: #2c2c2c;
}
.tableMain .cmp-table tbody td:last-child {
  color: #EE3D25;
}

/* FAQ section — heading and answer text inherited the page's global
   white body text color on pages/instances where the ".light" modifier
   wasn't applied, making them invisible against the section's light
   background. Colors set with !important so they win over each page's
   own inline critical CSS, guaranteeing every FAQ block on every page
   renders the same way regardless of which modifier class is present
   or what that page's inline styles already say.
   NOTE: only the currently-open FAQ item has a solid red
   (#EE3D25) header background — every other (closed) item has a white
   header, so the question text must be dark by default and switch to
   white only while that item's answer is open. */
.faqSec .headContent h2 {
  color: #0a0a0a !important;
}
.faqSec .headContent h2 span {
  color: #EE3D25 !important;
}
.faqSec .faqHead button {
  color: #0a0a0a !important;
}
.faqSec .faqHead button:not(.collapsed) {
  color: #ffffff !important;
}
.faqSec .faqBody p,
.faqSec .faqBody ul {
  color: #4a4a4a !important;
}

/* FAQ accordion — smooth open/close animation.
   Bootstrap's own collapse CSS just hard-switches display:none/block
   (the smooth height animation normally comes from its JS, which this
   site can't depend on — see faq-accordion-standalone script). This
   swaps the collapse element to a CSS grid whose row track is animated
   between 0fr and 1fr, which gives a smooth height transition purely in
   CSS regardless of the answer's content length, with no JS height
   calculation needed. Combined with the opacity fade this replaces the
   previous instant show/hide. */
.faqSec .accordion-collapse {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}
.faqSec .accordion-collapse.show {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* THE ACTUAL BUG: .faqBody carries its own fixed vertical padding
   (12px top / 18px bottom, set by each page's inline critical CSS).
   Padding is never allowed to go negative, so even when the grid row
   above is told to collapse to 0fr, the browser still has to render
   this box at least 12px+18px = 30px tall to fit that padding. The
   opening animation looks fine because it's animating up to a real
   height, but closing always stalls at a leftover 30px sliver instead
   of reaching 0 — that's the "closing doesn't fully close" / jump you
   were seeing. Fix: animate the item's own vertical padding down to 0
   in lockstep with the row collapsing, and only restore it when open. */
.faqSec .accordion-collapse > .faqBody {
  min-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: padding-top 0.35s ease, padding-bottom 0.35s ease;
}
.faqSec .accordion-collapse.show > .faqBody {
  padding-top: 12px !important;
  padding-bottom: 18px !important;
}

/* Hero banners (.mobileAppBanner) load their photo via a remote
   data-bg URL that script.js swaps in as an inline background-image
   only once the photo is confirmed reachable (see the "Local asset
   loader" block in script.js). If that photo can't be reached — e.g.
   it still points at the live appverticals.com site and isn't part of
   this export — there was previously no fallback at all, so the
   section rendered as a big blank white gap under the header (with
   only the banner's own 100px top/bottom padding holding its height).
   This gives it a neutral, on-brand fallback background so it never
   looks like empty/broken space. It has no effect once the real photo
   loads successfully: script.js sets that as an inline style, and an
   inline background-image always wins over this plain CSS rule. */
.mobileAppBanner {
  background-color: #f3f2f1;
  background-image: linear-gradient(135deg, #f7f7f7 0%, #ececec 100%);
}

/* Some hero banners have no right-side image asset in this export, which
   previously left a large blank column (the layout is a 1fr/1fr grid).
   Pages missing that image get this modifier class instead, so the left
   content simply takes the full width and the blank space disappears. */
.mobileAppBanner__main--full {
  grid-template-columns: 1fr !important;
  justify-items: center;
}
.mobileAppBanner__main--full .mobileAppBanner__left {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
.mobileAppBanner__main--full .mobileAppBanner__btnWrapper {
  width: auto;
}
.mobileAppBanner__main--full .mobileAppBanner__topButtons {
  justify-content: flex-start;
}
.mobileAppBanner__main--full .mobileAppBanner__topButtons .av-primary-btn {
  width: auto;
  padding: 15px 40px;
}

/* ===========================
   RESET & BASE
=========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red: #EE3D25;
  --red-bright: #FF6A4D;
  --black: #0a0a0a;
  --panel: #141414;
  --panel-light: #1c1c1c;
  --text-white: #ffffff;
  --text-gray: #b3b3b3;
  --text-gray-dim: #8a8a8a;
  --border-dim: #2a2a2a;
  --font: 'Segoe UI', Arial, Helvetica, sans-serif;
}

/* Off-canvas mobile nav/mega-menu panels use position:fixed + transform
   to slide in from off-screen. Even though they're translated out of
   view, browsers still extend the document's scrollable width to fit
   them unless overflow-x is clipped here — that was cutting every
   page's visible content roughly in half on mobile. */
/* NOTE: overflow-x MUST be "clip" here, not "hidden". Setting overflow-x
   to any non-"visible"/"clip" value (like "hidden") forces the browser to
   also compute overflow-y as "auto" on this element (per the CSS Overflow
   spec's paired-axis rule), which turns <html>/<body> into a scroll
   container of their own. That breaks position:sticky for every
   descendant on the page (their sticky offset gets computed against this
   new container instead of the real viewport), which is why sections
   like the sticky case-studies stack on the homepage stopped pinning to
   the top after the first card. "clip" is exempt from that forcing rule,
   so it still clips horizontal overflow without creating a scroll
   container. */
html {
  overflow-x: clip;
  width: 100%;
}

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--text-white);
  overflow-x: clip;
  width: 100%;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

/* ===========================
   HEADER / TOP BAR
=========================== */
.site-header {
  position: relative;
  background: var(--black);
  z-index: 1000;
}

.header-bar {
  width: 100%;
  border-bottom: 3px solid var(--red);
  position: relative;
  /* Must stay above .mega-overlay (900) so the off-canvas mobile nav it
     contains stays clickable once the dimmed backdrop is active, but
     below .mega-menu (950 desktop / 1060 mobile) so the drill-down
     submenu panel still visually covers the nav list when it opens. */
  z-index: 1000;
}

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  gap: 24px;
}

.logo img {
  height: 34px;
  display: block;
  object-fit: contain;
}

.logo-fallback {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* .main-nav .nav-link { color: #ffffff !important; } */

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-white) !important;
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.nav-item.is-open .nav-link,
.nav-link:hover {
  color: var(--text-white);
}

.nav-item.is-open .nav-link::after,
.nav-link:hover::after {
  transform: scaleX(1);
}

/* Static (non-clickable) nav label, e.g. "Platforms" until it has a
   real destination. Keeps the same look but no pointer/hover affordance. */
.nav-link--static {
  cursor: default;
  opacity: 1;
}

.nav-link--static:hover {
  color: var(--text-white) !important;
}

.btn-discussion {
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1.5px solid var(--red);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.btn-discussion::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-105%);
  transition: transform 0.45s ease;
  pointer-events: none;
}

.btn-discussion:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(238, 61, 37, 0.35);
}

.btn-discussion:hover::before {
  transform: translateX(0);
}

/* ===========================
   MOBILE HEADER TOGGLE
=========================== */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  z-index: 1100;
}

.mobile-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header.mobile-nav-open .mobile-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.mobile-nav-open .mobile-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.mobile-nav-open .mobile-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Back button injected at the top of each mega-menu for mobile drill-down */
.mega-back {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dim);
  text-align: left;
}

.mega-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Cloned mobile CTA is desktop-hidden by default; the media query below
   turns it back on only inside the off-canvas nav on small screens. */
.btn-discussion-mobile {
  display: none;
}

/* Dedicated submenu-expand button, injected by script.js next to each
   mega nav item's link. Hidden on desktop; the media query below turns
   it on for mobile so tapping the label still visits the page while
   tapping this arrow expands the drill-down panel. */
.mega-toggle {
  display: none;
}

@media (max-width: 900px) {
  .header-inner { padding: 12px 20px; gap: 14px; }

  .mobile-toggle { display: flex; }

  /* Off-canvas main nav panel */
  .main-nav {
    position: fixed;
    top: var(--header-height, 66px);
    right: 0;
    width: min(88vw, 360px);
    height: calc(100vh - var(--header-height, 66px));
    background: var(--panel);
    border-left: 1px solid var(--border-dim);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1050;
  }

  .site-header.mobile-nav-open .main-nav {
    transform: translateX(0);
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
  }

  .main-nav .nav-item {
    border-bottom: 1px solid var(--border-dim);
  }

  .main-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    font-size: 16px;
    white-space: normal;
  }

  /* Items with a submenu become a two-target row: the label (left) is a
     normal link that navigates to its page, and the arrow button (right)
     expands the drill-down panel. Keeps both tap targets full height. */
  .main-nav .nav-item.has-mega {
    display: flex;
    align-items: stretch;
  }

  .main-nav .nav-item.has-mega .nav-link {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
  }

  .main-nav .mega-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    min-width: 54px;
    background: transparent;
    border: none;
    color: var(--text-white);
  }

  /* Chevron glyph removed per request — the toggle button itself stays
     in place (still expands the submenu on tap) but no longer shows a
     visible arrow icon. */
  .main-nav .mega-toggle::before {
    content: none;
  }

  .main-nav .nav-item.is-open .mega-toggle::before {
    transform: rotate(45deg);
  }

  .nav-item.is-open .nav-link::after {
    display: none;
  }

  .header-inner > .btn-discussion {
    display: none;
  }

  .main-nav .btn-discussion-mobile {
    display: block;
    margin: 6px 22px 18px;
    text-align: center;
  }

  /* Mega menus become full-screen drill-down panels on mobile */
  .mega-menu {
    position: fixed;
    top: var(--header-height, 66px);
    left: auto;
    right: 0;
    bottom: 0;
    width: min(88vw, 360px);
    background: var(--panel);
    border-top: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1060;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  .mega-menu.is-visible {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .mega-back { display: flex; }

  .mega-inner,
  .svc-inner {
    flex-direction: column;
    padding: 8px 20px 28px;
    gap: 24px;
  }

  .mega-col-art { display: none; }

  .mega-col-list { min-width: 0; }
}

@media (max-width: 380px) {
  .main-nav, .mega-menu { width: 100vw; }
}

/* ===========================
   OVERLAY
=========================== */
.mega-overlay {
  position: fixed;
  top: var(--header-height, 71px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 900;
}

.site-header.menu-open .mega-overlay,
.site-header.mobile-nav-open .mega-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ===========================
   MEGA MENU SHELL
=========================== */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border-top: 1px solid var(--border-dim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 950;
}

.mega-menu.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 32px;
  display: flex;
  gap: 40px;
}

/* shared list column (left nav inside mega menu) */
.mega-col-list {
  display: flex;
  flex-direction: column;
  min-width: 290px;
  background: var(--panel-light);
  border-radius: 6px;
  padding: 6px;
  flex-shrink: 0;
  align-self: flex-start;
  gap: 2px;
}

.mega-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-white);
  background: transparent;
  border: none;
  border-radius: 4px;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, padding-left 0.2s ease;
}

.mega-col-list > *:last-child { border-bottom: none; }

.mega-list-item:hover {
  background: var(--red);
  color: #ffffff;
  border-bottom-color: var(--red);
  padding-left: 20px;
}

.mega-list-item:hover .mega-icon {
  color: #ffffff;
  transform: scale(1.08);
}

.mega-list-item.is-active {
  background: var(--red);
  color: #ffffff;
  border-bottom: 1px solid var(--red);
}

.mega-list-item.is-active:hover {
  background: var(--red);
  color: #ffffff;
  border-bottom-color: var(--red);
  padding-left: 20px;
}

.mega-list-item.is-active:hover .mega-icon {
  color: #ffffff;
  transform: scale(1.08);
}

.mega-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  color: inherit;
  transition: transform 0.2s ease;
}
.mega-icon svg { width: 100%; height: 100%; }

/* ===========================
   ABOUT US MENU
=========================== */
.mega-about-layout {
  align-items: center;
}

.mega-col-feature {
  flex: 1;
  max-width: 420px;
}

.mega-col-feature h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
}

.mega-col-feature p {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 22px;
}

.btn-discussion--inline {
  padding: 13px 24px;
}

.mega-col-art {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EE3D25 0%, #8a0e10 60%, #4a0608 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.art-bars {
  width: 70px;
  height: 70px;
  color: #fff;
  opacity: 0.95;
}

.art-circle-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

/* ===========================
   SERVICES MENU
=========================== */
.mega-services-layout {
  position: relative;
  padding-bottom: 24px;
}

.mega-col-links {
  display: flex;
  gap: 60px;
  flex: 1;
  padding-top: 4px;
}

.mega-link-group {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mega-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-white);
  white-space: nowrap;
  transition: color 0.12s ease, gap 0.12s ease;
}

.mega-arrow-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mega-arrow-link:hover {
  color: var(--red);
  gap: 12px;
}
.mega-arrow-link:hover svg { transform: translateX(2px); }

.mega-arrow-link--white { color: var(--text-white); }

.mega-watermark {
  position: absolute;
  top: 30px;
  right: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
  z-index: 0;
}

.wm-line {
  font-size: 30px;
  font-weight: 800;
  color: rgba(255,255,255,0.045);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.mega-cta-bar {
  background: #f3f3f3;
  color: #111;
  margin: 0 32px 32px;
  border-radius: 6px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
  font-weight: 500;
}

.mega-cta-bar .btn-discussion {
  flex-shrink: 0;
}

/* ===========================
   INDUSTRIES MENU
=========================== */
.mega-industries-layout {
  align-items: flex-start;
}

.mega-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 300px;
  background: var(--panel-light);
  border-radius: 6px;
  padding: 6px;
  flex-shrink: 0;
  align-self: flex-start;
}

.mega-grid-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white);
  background: transparent;
  border: none;
  border-radius: 4px;
  text-align: left;
  width: 100%;
  transition: background 0.2s ease, color 0.2s ease;
}

.mega-grid-item:hover {
  background: var(--red);
  color: #ffffff;
}

.mega-grid-item.is-active {
  background: var(--red);
  color: #ffffff;
}

.mega-col-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mega-col-detail .detail-desc {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 700px;
}

.mega-col-detail h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.detail-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 26px;
}

.detail-links a {
  display: inline-block;
  width: auto;
  font-size: 14px;
  color: var(--text-gray);
  text-decoration: underline;
  text-decoration-color: var(--text-gray-dim);
}

.detail-links a:hover { color: var(--text-white); }

.detail-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-bullet::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--text-gray-dim);
  flex-shrink: 0;
}

.detail-image {
  width: 100%;
  max-width: 760px;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #0d2840 0%, #103a52 100%);
  position: relative;
}

.detail-image svg { width: 100%; height: 100%; }

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================
   RESOURCES MENU
=========================== */
.mega-resources-layout {
  align-items: flex-start;
}

.mega-resources-layout .mega-col-list {
  min-width: 290px;
}

.mega-resource-panel {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex: 1;
}

.mega-blog-card {
  flex: 1;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.mega-blog-img {
  width: 100%;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.mega-blog-img svg,
.mega-blog-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.mega-blog-card p {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-white);
}

.mega-col-viewall {
  align-self: flex-end;
  margin-left: auto;
  white-space: nowrap;
  padding-top: 6px;
}

.mega-col-viewall .mega-arrow-link {
  font-weight: 600;
}

/* Podcast cards */
.mega-podcast-card {
  flex: 1;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mega-podcast-img {
  width: 100%;
  height: 320px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0a0a 0%, #5a1010 100%);
}

.mega-podcast-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mega-podcast-card p {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-white);
}

/* App Cost Calculator panel */
.mega-calc-panel {
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.mega-calc-text {
  max-width: 420px;
  flex-shrink: 0;
}

.mega-calc-text h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
}

.mega-calc-text p {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 22px;
}

.mega-calc-text .mega-arrow-link {
  font-weight: 600;
  font-size: 15px;
}

.mega-calc-img {
  flex: 1;
  max-width: 420px;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0a0a 0%, #c83c32 100%);
}

.mega-calc-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* generic fallback tint if an image 404s and gets removed */
.img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   PAGE PLACEHOLDER
=========================== */
.page-placeholder {
  padding: 80px 32px;
  text-align: center;
  color: var(--text-gray);
  font-size: 16px;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1100px) {
  .main-nav ul { gap: 18px; }
  .nav-link { font-size: 14px; }
  .mega-inner { flex-direction: column; }
  .mega-watermark { display: none; }
}

@media (max-width: 768px) {
  .mega-col-grid { grid-template-columns: 1fr; }
}

/* ===========================
   HERO BANNER
=========================== */
.hero-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: #0a0a0a;
}

.hero-banner--fallback {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

.hero-video {
  background: #0a0a0a;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.92) 100%
  );
}

.hero-content {
  position: absolute;
  bottom: 140px;
  left: 60px;
  z-index: 10;
}

.hero-sub {
  font-size: 30px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.hero-title {
  font-size: clamp(56px, 6.5vw, 96px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.0;
  letter-spacing: -1px;
}

.hero-cta {
  position: absolute;
  bottom: 110px;
  right: 60px;
  z-index: 10;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  gap: 5px;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
  background: rgba(238, 61, 37, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: heroCtaPulse 2.6s ease-in-out infinite, heroCtaSpin 14s linear infinite;
  will-change: transform;
}

@keyframes heroCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

@keyframes heroCtaSpin {
  0% { border-color: #ffffff; }
  50% { border-color: rgba(255, 255, 255, 0.45); }
  100% { border-color: #ffffff; }
}

.hero-cta:hover {
  background: #c92e1a;
  border-color: #ffffff;
  color: #ffffff;
  transform: scale(1.1) rotate(-4deg);
  animation-play-state: paused;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

.hero-cta-arrow {
  font-size: 32px;
  line-height: 1;
  display: inline-block;
  transition: color 0.22s ease, transform 0.3s ease;
}

.hero-cta:hover .hero-cta-arrow {
  color: #ffffff;
  transform: translate(3px, -3px) rotate(8deg);
}

.hero-cta-text {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.2px;
  transition: color 0.22s ease, transform 0.25s ease;
}

.hero-cta:hover .hero-cta-text {
  color: #ffffff;
  transform: translateY(-1px);
}

.hero-cta-text strong {
  display: block;
  font-weight: 700;
}

@media (max-width: 768px) {
  .hero-content {
    bottom: 110px;
    left: 24px;
  }
  .hero-sub { font-size: 22px; }
  .hero-cta {
    bottom: 24px;
    right: 24px;
    width: 110px;
    height: 110px;
  }
  .hero-cta-arrow { font-size: 20px; }
  .hero-cta-text { font-size: 11px; }
}

/* ===========================
   LOGO ANIMATION
=========================== */
.logo-animated {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon-anim {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* bars animate up from bottom on load */
.logo-bar {
  transform-origin: bottom center;
  transform-box: fill-box;
  animation: barGrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.logo-bar-1 { animation-delay: 0.05s; }
.logo-bar-2 { animation-delay: 0.15s; }
.logo-bar-3 { animation-delay: 0.25s; }
.logo-bar-4 { animation-delay: 0.35s; }

@keyframes barGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.logo-text-anim {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  animation: fadeSlideIn 0.55s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* also animate the real logo img if it loads */
.logo img {
  animation: fadeSlideIn 0.55s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===========================
   SERVICES MEGA MENU – DARK LAYOUT
=========================== */
.mega-menu--light {
  background: var(--panel);
  color: var(--text-white);
  border-top: 1px solid var(--border-dim);
}

.svc-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 36px 40px 32px;
}

/* ---- top section ---- */
.svc-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 22px;
}

.svc-grid--top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
}

.svc-divider {
  border: none;
  border-top: 1px solid var(--border-dim);
  margin: 28px 0;
}

/* ---- bottom section ---- */
.svc-grid--bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0;
}

/* ---- group ---- */
.svc-group {
  padding: 0 28px 0 0;
  border-right: 1px solid var(--border-dim);
  margin-right: 0;
}

.svc-group:last-child {
  border-right: none;
  padding-right: 0;
}

.svc-group + .svc-group {
  padding-left: 28px;
}

.svc-group--sub {
  border-right: none;
  padding-top: 44px;
}

.svc-group--wide .svc-group-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* ---- group header ---- */
.svc-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.svc-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #EE3D25 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.svc-icon-box svg {
  width: 20px;
  height: 20px;
}

.svc-group-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  transition: color 0.2s ease;
}

.svc-group-header:hover .svc-group-title {
  color: var(--red) !important;
}

.svc-group-header:hover .svc-icon-box {
  background: var(--red-bright) !important;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(238, 61, 37, 0.45);
}

/* ---- link list ---- */
.svc-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-link-list--offset {
  padding-top: 0;
}

.svc-link-list li a {
  font-size: 14px;
  color: var(--text-gray);
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-block;
}

.svc-link-list li a:hover {
  color: var(--red);
}

@media (max-width: 1100px) {
  .svc-grid--top  { grid-template-columns: 1fr 1fr; }
  .svc-grid--bottom { grid-template-columns: 1fr 1fr; }
  .svc-group--wide { grid-column: span 2; margin-top: 20px; border-right: none; border-top: 1px solid var(--border-dim); padding-top: 20px; }
}

@media (max-width: 768px) {
  .svc-grid--top, .svc-grid--bottom { grid-template-columns: 1fr; }
  .svc-group { border-right: none; border-bottom: 1px solid var(--border-dim); padding: 0 0 16px 0; margin-bottom: 16px; }
  .svc-group + .svc-group { padding-left: 0; }
}

/* ===========================
   INDUSTRIES – 2-COLUMN LIST
=========================== */
.ind-grid-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-width: 340px;
  width: 340px;
}

.ind-grid-2col .mega-grid-item {
  border-bottom: 1px solid var(--border-dim);
  border-radius: 0;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ind-grid-2col .mega-grid-item:hover {
  background: var(--red);
  color: #ffffff;
  border-bottom-color: var(--red);
}

.ind-grid-2col .mega-grid-item.is-active {
  background: var(--red);
  color: #ffffff;
  border-bottom-color: var(--red);
}

.ind-grid-2col .mega-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mega-item-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.55;
  transform: translateX(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mega-item-arrow svg {
  width: 100%;
  height: 100%;
}

.ind-grid-2col .mega-grid-item:hover .mega-item-arrow,
.ind-grid-2col .mega-grid-item.is-active .mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ===========================
   INDUSTRIES – RED UNDERLINE ON HOVER/ACTIVE
=========================== */
.ind-grid-2col .mega-grid-item {
  position: relative;
}

.ind-grid-2col .mega-grid-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  /* background: #e8222a; */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}

.ind-grid-2col .mega-grid-item:hover::after,
.ind-grid-2col .mega-grid-item.is-active::after {
  transform: scaleX(1);
}

/* detail panel links – red underline on hover */
.detail-links a {
  text-decoration: none !important;
  position: relative;
  padding-bottom: 2px;
  color: var(--text-gray);
  transition: color 0.15s ease;
}

.detail-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}

.detail-links a:hover {
  color: var(--red) !important;
}

.detail-links a:hover::after {
  transform: scaleX(1);
}

/* ===========================
   PARTNERSHIPS MARQUEE STRIP
=========================== */
.partners-strip {
  background: var(--black);
  border-bottom: 1px solid var(--border-dim);
  overflow: hidden;
}

.partners-inner {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 18px 32px;
  gap: 24px;
}

.partners-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
  white-space: nowrap;
  flex-shrink: 0;
}

.partners-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EE3D25 !important;
  flex-shrink: 0;
  display: inline-block;
}

.partners-sep {
  width: 1px;
  height: 22px;
  background: var(--border-dim);
  flex-shrink: 0;
}

.partners-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.partners-track {
  display: flex;
  width: max-content;
  animation: partnersScroll 24s linear infinite;
}

.partners-track:hover {
  animation-play-state: paused;
}

.partners-set {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
}

.partner-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0.9;
  width: 100px;
  height: 40px;
  overflow: hidden;
  border-radius: 8px;
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
}

.partner-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

.partner-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.partner-logo svg {
  flex-shrink: 0;
}

.partner-logo em {
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.partner-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.partner-star {
  width: 13px;
  height: 13px;
  fill: var(--red);
  flex-shrink: 0;
}

@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (max-width: 768px) {
  .partners-inner { padding: 14px 20px; gap: 14px; }
  .partners-label { font-size: 12px; }
  .partner-logo em { font-size: 15px; }
  .partners-set { gap: 24px; padding-right: 24px; }
  /* .partner-logo { width: 96px; height: 38px; padding: 6px 10px; } */
}

/* ===========================
   WHAT WE OFFER – STICKY SCROLL
=========================== */
.wwo-section {
  background: var(--black);
  padding: 80px 0 100px;
  border-top: 1px solid var(--border-dim);
}

.wwo-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* LEFT sticky column */
.wwo-left {
  flex: 0 0 420px;
  position: sticky;
  top: 120px;
}

.wwo-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-gray);
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

.wwo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EE3D25;
  flex-shrink: 0;
}

.wwo-heading {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 22px;
}

.wwo-accent {
  color: #EE3D25;
}

.wwo-desc {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 380px;
}

.wwo-btn {
  display: inline-block;
  background: #EE3D25;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 6px;
  border: 1.5px solid #EE3D25;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}

.wwo-btn:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3);
}

/* ===========================================================
   UNIFIED BUTTON HOVER ANIMATION (site-wide)
   Gives every primary CTA button — on the homepage and on every
   service page (.av-primary-btn / .scs__btn / .wab__btn etc.) —
   the same lift + glow motion as the "View Our Work" button.
   Uses !important on transition only, so each page's own
   background/color hover swap still applies underneath.
=========================== */
.av-primary-btn,
.av-border-btn,
.scs__btn,
.wab__btn,
.wwo-btn,
.wwo-btn-primary,
.wwo-btn-outline,
.brands-btn,
.cs-view-all-btn,
.icta__btn,
.dev-services__btn,
.svc-cta__btn,
.mediaCta__btn,
.btn-discussion,
.btn-discussion--inline,
.quote-submit,
.ctaBanner__submit button,
.av-form button[type="submit"],
.del-btn,
.ind-scale-btn,
.recog-cta,
.cs-slider__cta,
.ctaButton {
  transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  cursor: pointer;
}

.av-primary-btn:hover,
.av-border-btn:hover,
.scs__btn:hover,
.wab__btn:hover,
.wwo-btn:hover,
.wwo-btn-primary:hover,
.wwo-btn-outline:hover,
.brands-btn:hover,
.cs-view-all-btn:hover,
.icta__btn:hover,
.dev-services__btn:hover,
.svc-cta__btn:hover,
.mediaCta__btn:hover,
.btn-discussion:hover,
.btn-discussion--inline:hover,
.quote-submit:hover,
.ctaBanner__submit button:hover,
.av-form button[type="submit"]:hover,
.del-btn:hover,
.ind-scale-btn:hover,
.recog-cta:hover,
.cs-slider__cta:hover,
.ctaButton:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3);
}

/* RIGHT: vertical auto-sliding cards */
.wwo-right {
  flex: 1;
  position: relative;
  height: 640px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.wwo-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: wwoSlideUp 42s linear infinite;
}

.wwo-right:hover .wwo-track {
  animation-play-state: paused;
}

.wwo-cards-set {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@keyframes wwoSlideUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Card */
.wwo-card {
  background: #141414;
  border-radius: 16px;
  padding: 32px 32px 28px;
  border: 1px solid #2a2a2a;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s ease;
}

.wwo-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wwo-card:hover {
  border-color: #EE3D25;
  transform: translateY(-2px);
}

.wwo-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.wwo-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wwo-card-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.wwo-card-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.wwo-icon--purple { background: rgba(109, 40, 217, 0.55); border: 1.5px solid rgba(139,92,246,0.4); }
.wwo-icon--green  { background: rgba(22, 163, 74, 0.55);  border: 1.5px solid rgba(34,197,94,0.4); }
.wwo-icon--pink   { background: rgba(232, 34, 42, 0.45);  border: 1.5px solid rgba(248,113,113,0.4); }
.wwo-icon--blue   { background: rgba(37, 99, 235, 0.55);  border: 1.5px solid rgba(59,130,246,0.4); }
.wwo-icon--orange { background: rgba(217, 119, 6, 0.55);  border: 1.5px solid rgba(251,146,60,0.4); }
.wwo-icon--teal   { background: rgba(13, 148, 136, 0.55); border: 1.5px solid rgba(45,212,191,0.4); }

.wwo-card-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.wwo-card-desc {
  font-size: 15px;
  color: #a0a0a0;
  line-height: 1.7;
  margin-bottom: 20px;
}

.wwo-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-bottom: 24px;
}

.wwo-card-tags span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #b0b0b0;
}

.wwo-card-tags span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EE3D25;
  flex-shrink: 0;
  font-style: normal;
  display: inline-block;
}

.wwo-card-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.wwo-btn-primary {
  background: #EE3D25;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1.5px solid #EE3D25;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.wwo-btn-primary:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3);
}

.wwo-btn-outline {
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1.5px solid #fff;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.wwo-btn-outline:hover {
  border-color: #EE3D25;
  color: #fff;
  background: #EE3D25;
  transform: translateY(-2px);
}

/* staggered reveal delay */
.wwo-card:nth-child(1) { transition-delay: 0s; }
.wwo-card:nth-child(2) { transition-delay: 0.1s; }
.wwo-card:nth-child(3) { transition-delay: 0.15s; }
.wwo-card:nth-child(4) { transition-delay: 0.2s; }

@media (max-width: 1100px) {
  .wwo-inner { flex-direction: column; gap: 48px; padding: 0 28px; }
  .wwo-left { position: relative; top: auto; flex: none; width: 100%; }
}

@media (max-width: 768px) {
  .wwo-section { padding: 60px 0; }
  .wwo-inner { padding: 0 20px; }
  .wwo-card { padding: 24px 20px; }
  .wwo-card-header h3 { font-size: 18px; }

  /* On small screens the continuous marquee is harder to read/tap,
     so let the cards sit in a normal static stack instead. */
  .wwo-right {
    height: auto;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .wwo-track {
    animation: none;
    gap: 20px;
  }
  .wwo-cards-set[aria-hidden="true"] {
    display: none;
  }
}

/* ===========================
   PARTNERING WITH TOP BRANDS
=========================== */
.brands-section {
  background: var(--black);
  padding: 90px 0 100px;
  border-top: 1px solid var(--border-dim);
}

.brands-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

/* LEFT sticky */
.brands-left {
  flex: 0 0 280px;
  position: sticky;
  top: 120px;
}

.brands-heading {
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 18px;
}

.brands-desc {
  font-size: 14.5px;
  color: var(--text-gray);
  line-height: 1.75;
  margin-bottom: 32px;
}

.brands-btn {
  display: inline-block;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 5px;
  border: 2px solid #EE3D25;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.brands-btn:hover {
  background: #EE3D25;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(238, 61, 37, 0.3);
}

/* RIGHT grid */
.brands-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brands-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card */
.brands-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #141414;
  border: 1px solid #2a2a2a;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(30px);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.brands-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.brands-card:hover {
  border-color: #EE3D25;
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(238, 59, 37, 0.22);
}

.brands-card img,
.brands-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.brands-card:hover img,
.brands-card:hover video {
  transform: scale(1.06);
}

/* dark gradient overlay over image */
.brands-card--img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
  transition: background 0.35s ease;
}

.brands-card--img:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(238,61,37,0.28) 55%, rgba(0,0,0,0.15) 100%);
}

/* fallback when no image */
.brands-card--nophoto {
  background: #181818;
}

.brands-card--nophoto img,
.brands-card--nophoto video { display: none; }

.brands-card-info {
  position: relative;
  z-index: 2;
  padding: 20px 18px 16px;
}

.brands-card-client {
  font-size: 12px;
  font-weight: 600;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 5px;
}

.brands-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 12px;
}

.brands-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brands-card-tags span {
  font-size: 11.5px;
  color: #ccc;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* "View Case Study" prompt — hidden by default, fades in on hover */
.brands-card--img::after {
  content: 'View Case Study →';
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(238, 61, 37, 0.9);
  padding: 7px 14px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.brands-card--img:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* stagger reveal delays */
.brands-row:nth-child(1) .brands-card:nth-child(1) { transition-delay: 0s; }
.brands-row:nth-child(1) .brands-card:nth-child(2) { transition-delay: 0.1s; }
.brands-row:nth-child(1) .brands-card:nth-child(3) { transition-delay: 0.2s; }
.brands-row:nth-child(2) .brands-card:nth-child(1) { transition-delay: 0.05s; }
.brands-row:nth-child(2) .brands-card:nth-child(2) { transition-delay: 0.15s; }
.brands-row:nth-child(2) .brands-card:nth-child(3) { transition-delay: 0.25s; }
.brands-row:nth-child(3) .brands-card:nth-child(1) { transition-delay: 0.1s; }
.brands-row:nth-child(3) .brands-card:nth-child(2) { transition-delay: 0.2s; }

@media (max-width: 1100px) {
  .brands-inner { flex-direction: column; gap: 40px; padding: 0 28px; }
  .brands-left { position: relative; top: auto; flex: none; }
  .brands-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .brands-section { padding: 60px 0; }
  .brands-inner { padding: 0 20px; }
  .brands-row { grid-template-columns: 1fr; }
}

/* ===========================
   CASE STUDIES / PORTFOLIO
=========================== */
.cs-section {
  background: var(--black);
  padding: 100px 0 120px;
  border-top: 1px solid var(--border-dim);
}

/* Header */
.cs-header {
  text-align: center;
  margin-bottom: 52px;
  padding: 0 24px;
}

.cs-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-gray-dim);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cs-heading {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 18px;
}

.cs-accent {
  color: #EE3D25;
}

.cs-subhead {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.7;
  max-width: 660px;
  margin: 0 auto;
}

/* Tab Nav */
.cs-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 40px;
  padding: 0 24px;
}

.cs-tab {
  background: none;
  border: none;
  color: var(--text-gray);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 32px;
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
  white-space: nowrap;
  font-family: inherit;
}

.cs-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #EE3D25;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.cs-tab:hover { color: #ffffff; }

.cs-tab.is-active {
  color: #ffffff;
  font-weight: 700;
}

.cs-tab.is-active::after {
  transform: scaleX(1);
}

/* Panels */
.cs-panels {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

.cs-panel {
  display: none;
  background: var(--cs-grad, linear-gradient(135deg, #1a0a0a 0%, #0a0404 100%));
  border-radius: 20px;
  border: 1px solid #2a2a2a;
  padding: 48px 48px 44px;
  gap: 56px;
  align-items: center;
  animation: csFadeIn 0.4s ease;
}

.cs-panel.is-active {
  display: flex;
}

@keyframes csFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Left content */
.cs-panel-left {
  flex: 0 0 500px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #ccc;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 5px 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
  width: fit-content;
}

.cs-panel-left h3 {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 18px;
}

.cs-panel-left p {
  font-size: 14px;
  color: #a0a0a0;
  line-height: 1.75;
  margin-bottom: 30px;
}

/* Stats */
.cs-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 70px;
}

.cs-stat strong {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.cs-stat span {
  font-size: 12px;
  color: #888;
  line-height: 1.4;
  max-width: 110px;
}

.cs-link {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: #EE3D25;
  border: 1.5px solid #EE3D25;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 6px;
  margin-top: auto;
  width: fit-content;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    gap 0.18s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cs-link:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  gap: 10px;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3);
}

/* Right image */
.cs-panel-right {
  flex: 1;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
}

.cs-panel-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 360px;
}

.cs-panel-right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 360px;
}

.cs-img--fallback {
  background: linear-gradient(135deg, #222 0%, #333 100%);
}

@media (max-width: 1100px) {
  .cs-panel { flex-direction: column; gap: 32px; padding: 32px 28px; }
  .cs-panel-left { flex: none; max-width: 100%; }
  .cs-panel-right { min-height: 260px; width: 100%; }
  .cs-panel-right img { min-height: 260px; }
  .cs-tabs { overflow-x: auto; justify-content: flex-start; }
  .cs-tab { padding: 12px 20px; font-size: 14px; }
}

@media (max-width: 640px) {
  .cs-section { padding: 60px 0 80px; }
  .cs-panels { padding: 0 16px; }
  .cs-stats { gap: 20px; }
  .cs-stat strong { font-size: 22px; }
  .cs-tab { padding: 10px 16px; font-size: 13px; }
}

/* ===========================
   INDUSTRY SCALING ACCORDION
=========================== */
.ind-scale-section {
  background: var(--black);
  padding: 90px 0 80px;
  border-top: 1px solid var(--border-dim);
}

.ind-scale-header {
  text-align: center;
  margin-bottom: 44px;
  padding: 0 24px;
}

.ind-scale-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-gray-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ind-scale-heading {
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.ind-scale-accent {
  color: #EE3D25;
}

.ind-scale-subhead {
  font-size: 15.5px;
  color: var(--text-gray-dim);
  line-height: 1.6;
  max-width: 640px;
  margin: 16px auto 0;
}

.ind-scale-num {
  color: #EE3D25;
}

/* Track */
.ind-scale-track {
  display: flex;
  height: 420px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  gap: 6px;
  overflow: hidden;
}

/* Each item */
.ind-scale-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 64px;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  text-decoration: none;
  color: inherit;
}

.ind-scale-item.is-active {
  flex: 1;
}

.ind-scale-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

.ind-scale-item:hover img,
.ind-scale-item.is-active img {
  transform: scale(1.04);
}

/* Dark overlay */
.ind-scale-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.5) 45%,
    rgba(0,0,0,0.15) 100%
  );
  z-index: 1;
  transition: background 0.3s ease;
}

/* inactive tint */
.ind-scale-item:not(.is-active) .ind-scale-overlay {
  background: rgba(0,0,0,0.62);
}

/* Content – shown only when active */
.ind-scale-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 28px 28px 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
  pointer-events: none;
}

.ind-scale-item.is-active .ind-scale-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ind-scale-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.ind-scale-desc {
  font-size: 13.5px;
  color: #cccccc;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 440px;
}

.ind-scale-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ind-scale-tags span {
  font-size: 11.5px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* Bottom-anchored label – shown when NOT active, sits inside the image
   at the bottom (mirrors the layout of the expanded panel's heading) */
.ind-scale-label-vert {
  position: absolute;
  bottom: 18px;
  left: 14px;
  right: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.2px;
  z-index: 3;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ind-scale-item.is-active .ind-scale-label-vert {
  opacity: 0;
}

/* CTA button */
.ind-scale-cta {
  text-align: center;
  margin-top: 40px;
}

.ind-scale-btn {
  display: inline-block;
  background: #EE3D25;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 6px;
  border: 1.5px solid #EE3D25;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}

.ind-scale-btn:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3);
}

@media (max-width: 900px) {
  .ind-scale-track {
    height: auto;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
  }
  .ind-scale-item {
    flex: 0 0 60px !important;
    border-radius: 12px;
  }
  .ind-scale-item.is-active {
    flex: 0 0 320px !important;
  }
  .ind-scale-label-vert {
    bottom: auto;
    left: 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
}

/* ===========================
   AWARDS & RECOGNITION – REVIEW MARQUEE
=========================== */
.rev-awards-section {
  background: var(--black);
  padding: 80px 0 90px;
  border-top: 1px solid var(--border-dim);
  overflow: hidden;
}

.rev-awards-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  padding: 0 40px;
  margin-bottom: 32px;
}

.rev-awards-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  display: inline-block;
}

.rev-awards-track-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.rev-awards-track {
  display: flex;
  width: max-content;
  animation: revAwardsScroll 36s linear infinite;
}

.rev-awards-track:hover {
  animation-play-state: paused;
}

.rev-awards-set {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}

.rev-award-card {
  flex-shrink: 0;
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  padding: 28px 26px;
}

.rev-award-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}

.rev-award-logo {
  height: 30px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.rev-award-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--text-white);
  font-size: 18px;
  font-weight: 700;
}

.rev-award-rating svg {
  width: 18px;
  height: 18px;
  fill: var(--red);
  flex-shrink: 0;
}

.rev-award-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-gray);
}

@keyframes revAwardsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (max-width: 768px) {
  .rev-awards-label { padding: 0 20px; font-size: 13px; }
  .rev-award-card { width: 280px; padding: 22px 20px; }
  .rev-award-desc { font-size: 13.5px; }
}

/* ===========================
   WHY CLIENTS TRUST US — TESTIMONIAL MARQUEE
   Same visual language as the Awards & Recognition strip above.
=========================== */
.rev-testi-section {
  background: var(--black);
  padding: 80px 0 90px;
  border-top: 1px solid var(--border-dim);
  overflow: hidden;
}

.rev-testi-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  padding: 0 40px;
  margin-bottom: 32px;
}

.rev-testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  display: inline-block;
}

.rev-testi-track-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.rev-testi-track {
  display: flex;
  width: max-content;
  animation: revTestiScroll 42s linear infinite;
}

.rev-testi-track:hover {
  animation-play-state: paused;
}

.rev-testi-set {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}

.rev-testi-card {
  flex-shrink: 0;
  width: 360px;
  background: var(--panel);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  padding: 28px 26px;
}

.rev-testi-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.rev-testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red) 0%, #8a1a0e 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rev-testi-who {
  min-width: 0;
}

.rev-testi-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-testi-role {
  font-size: 12.5px;
  color: var(--text-gray-dim);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-testi-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-gray);
}

@keyframes revTestiScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (max-width: 768px) {
  .rev-testi-label { padding: 0 20px; font-size: 13px; }
  .rev-testi-card { width: 280px; padding: 22px 20px; }
  .rev-testi-desc { font-size: 13.5px; }
}

/* ===========================
   HOW APPVERTICALS DELIVERS – TABBED SECTION
=========================== */
.del-section {
  background: var(--black);
  padding: 90px 0 100px;
  border-top: 1px solid var(--border-dim);
}

.del-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Top row: heading + intro */
.del-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 56px;
}

.del-heading {
  font-size: clamp(26px, 2.7vw, 40px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.28;
  flex: 0 0 auto;
  max-width: 560px;
}

.del-accent {
  color: #EE3D25;
}

.del-intro {
  font-size: 14px;
  color: var(--text-gray-dim);
  line-height: 1.7;
  max-width: 320px;
  text-align: left;
  flex: 0 0 auto;
  padding-top: 4px;
}

/* Body: tabs | panel | media */
.del-body {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Tabs column */
.del-tabs {
  display: flex;
  flex-direction: column;
  gap: 34px;
  flex: 0 0 210px;
  padding-right: 40px;
  border-right: 1px solid var(--border-dim);
}

.del-tab {
  position: relative;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  color: #4a4a4a;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s ease;
  line-height: 1.2;
}

.del-tab:hover {
  color: #9a9a9a;
}

.del-tab.is-active {
  color: #4a4a4a;
}

/* "Slide into theme color" reveal — an orange duplicate of the label
   wipes down over the muted-gray text when a tab becomes active. */
.del-tab::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #EE3D25;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
  white-space: nowrap;
}

.del-tab.is-active::after {
  clip-path: inset(0 0 0 0);
}

/* Content panel */
.del-panels {
  flex: 1 1 380px;
  max-width: 420px;
  padding: 4px 40px 0;
}

.del-panel {
  display: none;
  animation: delFade 0.4s ease;
}

.del-panel.is-active {
  display: block;
}

@keyframes delFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.del-panel-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 16px;
}

.del-panel-desc {
  font-size: 14px;
  color: var(--text-gray);
  line-height: 1.75;
  margin-bottom: 26px;
  max-width: 400px;
}

.del-btn {
  display: inline-block;
  background: #EE3D25;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 6px;
  border: 1.5px solid #EE3D25;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease, box-shadow 0.25s ease;
}

.del-btn:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3);
}

/* Media column */
.del-media {
  flex: 1 1 380px;
  max-width: 420px;
}

.del-media-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.del-media-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.del-media-img.is-active {
  opacity: 1;
  visibility: visible;
}

.del-media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.del-checklist-wrap {
  position: relative;
}

.del-checklist {
  display: none;
  flex-direction: column;
  gap: 14px;
  animation: delFade 0.4s ease;
}

.del-checklist.is-active {
  display: flex;
}

.del-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-gray);
  line-height: 1.5;
}

.del-checklist li svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.del-checklist li span {
  flex: 1;
}

@media (max-width: 1100px) {
  .del-body {
    flex-wrap: wrap;
  }
  .del-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    flex-basis: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-dim);
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 32px;
  }
  .del-tab {
    font-size: 18px;
  }
  .del-panels {
    padding: 0;
    max-width: 100%;
    flex: 1 1 320px;
  }
  .del-media {
    max-width: 100%;
    flex: 1 1 320px;
  }
}

@media (max-width: 720px) {
  .del-top {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }
  .del-intro {
    max-width: 100%;
  }
  .del-body {
    flex-direction: column;
  }
  .del-panels,
  .del-media {
    flex-basis: auto;
  }
}


/* ===========================
   SITE FOOTER
=========================== */
:root{
    --accent:#EE3D25 !important;
    --bg:#141414;
    --text-heading:#ffffff;
    --text-link:#c9c9d6;
    --text-muted:#8f8f9a;
    --border:#2a2a2e;
    --pill-bg:#1c1c20;
  }

  *{box-sizing:border-box;}

  body{
    margin:0;
    background:var(--bg);
    font-family:'Segoe UI', Arial, sans-serif;
  }

  footer.site-footer{
    background:var(--bg);
    color:var(--text-link);
    padding:60px 60px 30px;
  }

  .footer-columns{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    max-width:1400px;
    margin:0 auto;
  }

  .footer-col{
    flex:1;
    min-width:180px;
  }

  .col-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-heading);
    font-size:19px;
    font-weight:600;
    margin-bottom:22px;
  }

  .col-title .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    display:inline-block;
    flex-shrink:0;
  }

  .footer-col ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .footer-col a{
    color:var(--text-link);
    text-decoration:none;
    font-size:15px;
    transition:color .2s ease;
  }

  .footer-col a:hover,
  .footer-col a:focus-visible{
    color:var(--accent);
    outline:none;
  }

  .pill-links{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .pill{
    display:inline-block;
    width:fit-content;
    padding:10px 20px;
    border-radius:24px;
    background:var(--pill-bg);
    border:1px solid var(--border);
    color:var(--text-link);
    text-decoration:none;
    font-size:14px;
    transition:border-color .2s ease, color .2s ease;
  }

  .pill:hover,
  .pill:focus-visible{
    border-color:var(--accent);
    color:#ffffff;
    outline:none;
  }

  .footer-divider-row{
    display:flex;
    flex-wrap:wrap;
    max-width:1400px;
    margin:50px auto 0;
    border-top:1px solid var(--border);
  }

  .footer-block{
    flex:1;
    min-width:260px;
    padding:34px 40px 34px 0;
  }

  .footer-block + .footer-block{
    border-left:1px solid var(--border);
    padding-left:40px;
  }

  .block-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-heading);
    font-size:18px;
    font-weight:600;
    margin-bottom:20px;
  }

  .block-title .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    display:inline-block;
    flex-shrink:0;
  }

  .location-text{
    font-size:15px;
    line-height:1.6;
    color:var(--text-link);
    margin:0;
  }

  .contact-row{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }

  .icon-circle{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:#ffffff;
    transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  }

  .icon-circle svg{
    width:18px;
    height:18px;
    transition:transform .3s ease;
  }

  .contact-text{
    font-size:15px;
    color:var(--text-link);
    word-break:break-word;
    transition:color .3s ease;
  }

  .contact-pair{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .contact-pair:hover .icon-circle{
    background:var(--accent);
    border-color:var(--accent);
    color:#ffffff;
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 8px 20px rgba(238,61,37,.35);
  }

  .contact-pair:hover .icon-circle svg{
    transform:scale(1.1);
  }

  .contact-pair:hover .contact-text{
    color:var(--accent);
  }

  .contact-two{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
  }

  .social-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }

  .social-row a.icon-circle{
    text-decoration:none;
    cursor:pointer;
  }

  .social-row a.icon-circle:hover,
  .social-row a.icon-circle:focus-visible{
    background:var(--accent);
    border-color:var(--accent);
    outline:none;
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 8px 20px rgba(238,61,37,.35);
  }

  .social-row a.icon-circle:hover svg,
  .social-row a.icon-circle:focus-visible svg{
    transform:scale(1.1);
  }

  .footer-bottom{
    max-width:1400px;
    margin:0 auto;
    padding-top:36px;
  }

  .bottom-links{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    padding-bottom:36px;
    border-bottom:1px solid var(--border);
  }

  .bottom-links a{
    color:var(--text-link);
    text-decoration:none;
    font-size:15px;
  }

  .bottom-links a:hover,
  .bottom-links a:focus-visible{
    color:var(--accent);
    outline:none;
  }

  .legal-row{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    padding-top:28px;
    padding-bottom:10px;
  }

  .copyright{
    font-size:14px;
    color:var(--text-muted);
    line-height:1.6;
    max-width:100%;
    width:100%;
    margin:0;
    text-align:center;
  }

  .payments{
    display:none;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }

  .payments span{
    font-size:14px;
    color:var(--text-link);
    margin-right:6px;
  }

  .payment-badge{
    height:26px;
    padding:4px 8px;
    border-radius:5px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
    color:#1a1a1a;
    font-family:Arial, sans-serif;
    letter-spacing:.3px;
  }

  .payment-badge.dark{
    background:#000000;
    color:#ffffff;
  }
  .payment-badge.paypal{ color:#003087; }
  .payment-badge.amex{ background:#1f72cd; color:#fff; }
  .payment-badge.wise{ background:#9fe870; color:#0d3d2c; }
  .payment-badge.zelle{ background:#6d1ed4; color:#fff; }
  .payment-badge.mc{ background:#EE3D25; color:#fff; }

  @media (max-width:900px){
    footer.site-footer{padding:40px 24px 20px;}
    .footer-divider-row{margin-top:34px;}
    .footer-block{padding:26px 0;border-left:none !important;padding-left:0 !important;border-bottom:1px solid var(--border);}
    .footer-block:last-child{border-bottom:none;}
    .legal-row{flex-direction:column;align-items:center;}
  }

/* ===========================
   QUOTE REQUEST MODAL
=========================== */
.quote-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.quote-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.quote-modal-overlay.is-open .quote-modal {
  animation: quotePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes quotePopIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.quote-modal {
  position: relative;
  background: var(--black);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 36px 38px 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
  transform: translateY(16px) scale(0.98);
}

.quote-modal::-webkit-scrollbar {
  width: 8px;
}

.quote-modal::-webkit-scrollbar-track {
  background: transparent;
}

.quote-modal::-webkit-scrollbar-thumb {
  background: var(--border-dim);
  border-radius: 8px;
}

.quote-modal-close {
  display: none;
}

.quote-modal-close svg {
  width: 22px;
  height: 22px;
}

.quote-modal-close:hover {
  background: var(--red);
  color: #ffffff;
  transform: rotate(90deg);
}

.quote-modal-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;
  margin-bottom: 26px;
  padding-right: 0;
  text-align: center;
}

.quote-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quote-input {
  width: 100%;
  height: 48px;
  min-width: 0;
  background: #161616;
  border: 1px solid var(--border-dim);
  border-radius: 7px;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13.5px;
  padding: 14px 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.quote-input::placeholder {
  color: #7a7a7a;
}

.quote-input:hover {
  border-color: #3a3a3a;
}

.quote-input:focus {
  border-color: var(--red);
  background: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(238, 61, 37, 0.14);
}

.quote-select {
  appearance: none;
  -webkit-appearance: none;
  color: #7a7a7a;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px;
  padding-right: 38px;
  cursor: pointer;
}

.quote-select:valid {
  color: #ffffff;
}

.quote-select option {
  color: #ffffff;
  background: #1a1a1a;
}

.quote-subtitle {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 6px;
  margin-bottom: 4px;
}

.quote-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 15px;
  column-gap: 20px;
}

.quote-check {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #e8e8e8;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

.quote-check:hover {
  color: #ffffff;
}

.quote-check:has(input:checked),
.quote-check.is-checked {
  color: var(--red);
}

.quote-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  accent-color: var(--red);
}

.quote-box {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border: 1.5px solid #5a5a5a;
  border-radius: 4px;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.quote-check:hover .quote-box {
  border-color: var(--red);
}

.quote-check input:checked + .quote-box {
  background: var(--red);
  border-color: var(--red);
}

.quote-check input:checked + .quote-box::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.5px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.quote-textarea {
  background: #161616;
  border: 1px solid var(--border-dim);
  border-radius: 7px;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13.5px;
  padding: 15px;
  min-height: 92px;
  resize: vertical;
  outline: none;
  margin-top: 6px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.quote-textarea::placeholder {
  color: #7a7a7a;
}

.quote-textarea:hover {
  border-color: #3a3a3a;
}

.quote-textarea:focus {
  border-color: var(--red);
  background: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(238, 61, 37, 0.14);
}

.quote-submit {
  align-self: flex-start;
  background: #EE3D25;
  color: #ffffff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 7px;
  padding: 14px 46px;
  cursor: pointer;
  margin-top: 8px;
  box-shadow: 0 8px 22px rgba(238, 61, 37, 0.28);
  transition: filter 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.quote-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(238, 61, 37, 0.38);
}

.quote-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.quote-submit:active {
  transform: translateY(0);
}

.quote-status {
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  min-height: 1px;
}

.quote-status.is-success {
  color: #3ecf7a;
}

.quote-status.is-error {
  color: #EE3D25;
}

.quote-disclaimer {
  font-size: 11.5px;
  color: #7a7a7a;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .quote-modal {
    padding: 26px 20px 22px;
  }
  .quote-row {
    grid-template-columns: 1fr;
  }
  .quote-checks {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   CASE STUDIES INTRO HEADER
=========================== */
.case-studies-intro {
  text-align: center;
  margin-bottom: 60px;
}

.case-studies-intro-title {
  font-family: var(--font);
  font-size: 42px;
  font-weight: 700;
  color: var(--ink, #12141a);
  margin-bottom: 16px;
  line-height: 1.2;
}

.case-studies-intro-highlight {
  color: var(--red);
}

.case-studies-intro-desc {
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink-dim, #5a5f6b);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ===========================
   LIFECYCLE SECTION
=========================== */
.lc-section{
  max-width:1180px;
  margin:0 auto;
  padding:70px 24px 90px;
  position:relative;
}
.lc-heading{
  font-size:38px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 18px;
  letter-spacing:-0.5px;
}
.lc-heading .accent{ color:var(--red); }
.lc-subtext{
  max-width:700px;
  color:var(--text-dim, #8a8a8a);
  font-size:15px;
  line-height:1.6;
  margin:0 0 40px;
}

.lc-layout{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:28px;
  align-items:start;
  border:1px solid var(--border-dim);
  border-radius:16px;
  padding:32px;
  background:
    radial-gradient(480px 280px at 100% 0%, rgba(238,61,37,0.10), transparent 70%),
    #0c0c0c;
}

.lc-steps-slider{
  position:relative;
  height:460px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.lc-steps{
  display:flex;
  flex-direction:column;
  gap:14px;
  position:absolute;
  top:0; left:0; right:0;
  animation:lcStepsScroll 32s linear infinite;
}
.lc-steps-slider:hover .lc-steps{ animation-play-state:paused; }

@keyframes lcStepsScroll{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}

.lc-step{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-radius:8px;
  border:1px solid var(--border-dim);
  background:#111111;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  flex:0 0 auto;
  transition:border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.lc-step:hover{
  border-color:#EE3D25;
  transform:translateX(4px);
  box-shadow:0 8px 20px rgba(238,61,37,0.15);
}

.lc-step-num{
  font-size:11px;
  font-weight:800;
  color:#555;
  letter-spacing:0.5px;
  flex:0 0 auto;
  transition:color .25s ease;
}
.lc-step:hover .lc-step-num{ color:#EE3D25; }
.lc-step.active .lc-step-num{ color:#EE3D25; }

.lc-step .lc-check{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border-radius:50%;
  border:1.5px solid var(--text-dim, #8a8a8a);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.lc-step .lc-check svg{
  width:11px;
  height:11px;
  stroke:var(--text-dim, #8a8a8a);
  transition:stroke .25s ease;
}

.lc-step .lc-label{
  color:var(--text-dim, #8a8a8a);
  font-size:15px;
  font-weight:600;
  transition:color .25s ease;
}

.lc-step.active{
  border-color:var(--red);
  background:linear-gradient(90deg, rgba(238,61,37,0.12), rgba(238,61,37,0.02));
  box-shadow:0 0 0 1px rgba(238,61,37,0.25), 0 10px 24px rgba(238,61,37,0.18);
}
.lc-step.active .lc-check{
  border-color:#EE3D25;
  background:#EE3D25;
  transform:scale(1.08);
}
.lc-step.active .lc-check svg{
  stroke:#fff;
}
.lc-step.active .lc-label{
  color:#fff;
}

.lc-panel{
  border:1px solid var(--red);
  border-radius:10px;
  padding:32px;
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(238,61,37,0.10), transparent 70%),
    rgba(238,28,28,0.03);
  min-height:460px;
  box-shadow:0 20px 45px rgba(0,0,0,0.35);
}
.lc-panel-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  font-weight:800;
  color:#fff;
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(238,61,37,0.25);
}
.lc-panel-title-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:#EE3D25;
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.lc-panel p{
  color:var(--text-body, #c9c9c9);
  font-size:15px;
  line-height:1.7;
  margin:0 0 18px;
}
.lc-panel p:last-child{ margin-bottom:0; }

.lc-panel-content{
  animation:fadeIn .35s ease;
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:800px){
  .lc-layout{ grid-template-columns:1fr; padding:20px; }
  .lc-heading{ font-size:28px; }
  .lc-steps-slider{ height:360px; }
  .lc-panel{ min-height:auto; }
}


/* ---------- Recognition section ---------- */
  .recog-section{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px 90px;
  }
  .recog-card{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:40px;
    align-items:center;
    border:1px solid var(--border-dim);
    border-radius:16px;
    padding:56px;
    overflow:hidden;
    background:
      radial-gradient(420px 260px at 8% 100%, rgba(238,28,28,0.20), transparent 70%),
      #0c0c0c;
  }

  .recog-heading{
    font-size:38px;
    font-weight:800;
    color:#fff;
    line-height:1.2;
    margin:0 0 20px;
    letter-spacing:-0.3px;
  }

  .recog-text{
    font-size:15px;
    line-height:1.7;
    color:#9a9a9a;
    max-width:440px;
    margin:0 0 32px;
  }

  .recog-cta{
    display:inline-block;
    background:var(--red);
    color:#fff;
    font-weight:700;
    font-size:14px;
    border:1.5px solid var(--red);
    border-radius:6px;
    padding:15px 26px;
    cursor:pointer;
    font-family:inherit;
    transition:background .25s ease, border-color .25s ease, color .25s ease,
      transform .25s ease, box-shadow .25s ease;
  }
  .recog-cta:hover{
    background:transparent;
    border-color:#ffffff;
    color:#ffffff;
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 10px 24px rgba(238,61,37,0.3);
  }

  .recog-slider{
    position:relative;
    height:300px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }

  .recog-track{
    position:absolute;
    top:0; left:0; right:0;
    display:flex;
    flex-direction:column;
    gap:16px;
    animation:recogScroll 24s linear infinite;
  }
  .recog-slider:hover .recog-track{ animation-play-state:paused; }

  @keyframes recogScroll{
    from{ transform:translateY(0); }
    to{ transform:translateY(-50%); }
  }

  .recog-item{
    display:flex;
    align-items:center;
    gap:16px;
    background:#141414;
    border:1px solid #262626;
    border-radius:10px;
    padding:14px 20px;
    flex:0 0 auto;
    position:relative;
    overflow:hidden;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
  }

  /* white shimmer sweep on hover */
  .recog-item::before{
    content:'';
    position:absolute;
    top:0;
    left:-60%;
    width:35%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.16), transparent);
    transform:skewX(-20deg);
    transition:left .65s ease;
    pointer-events:none;
  }

  .recog-item:hover{
    transform:translateX(4px) scale(1.015);
    border-color:rgba(255,255,255,0.45);
    box-shadow:0 10px 26px rgba(255,255,255,0.10);
    background:#181818;
  }

  .recog-item:hover::before{
    left:130%;
  }

  .recog-badge{
    width:64px;
    height:52px;
    flex:0 0 64px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
  }

  .recog-badge img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:7px;
    display:block;
  }

  .recog-item:hover .recog-badge{
    transform:scale(1.08);
    box-shadow:0 0 0 3px rgba(255,255,255,0.18);
  }

  .recog-item .title{
    font-size:15px;
    font-weight:700;
    color:#fff;
    line-height:1.35;
    transition:color .3s ease;
  }

  .recog-rating{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto;
    padding-left:14px;
    font-size:13px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    flex-shrink:0;
    transition:transform .35s ease, color .35s ease;
  }

  .recog-rating .partner-star{
    width:13px;
    height:13px;
    fill:var(--red);
    flex-shrink:0;
    transition:transform .35s ease, fill .35s ease;
  }

  .recog-item:hover .title{
    color:#ffffff;
    text-shadow:0 0 12px rgba(255,255,255,0.35);
  }

  .recog-item:hover .recog-rating{
    transform:scale(1.08);
    color:var(--red-bright);
  }

  .recog-item:hover .recog-rating .partner-star{
    fill:var(--red-bright);
    transform:rotate(-14deg) scale(1.25);
  }

  @media (max-width:800px){
    .recog-card{ grid-template-columns:1fr; padding:36px 24px; }
    .recog-slider{ height:240px; }
  }
/* ===========================
   SCROLL-IN ANIMATIONS (data-av-animate)
   Applies to any element with data-av-animate="fade-up | fade-down |
   fade-left | fade-right | stagger". Optional data-av-delay="0.2"
   (seconds) adds an extra delay before the animation starts.
=========================== */
[data-av-animate] {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-av-animate="fade-up"] { transform: translateY(32px); }
[data-av-animate="fade-down"] { transform: translateY(-32px); }
[data-av-animate="fade-left"] { transform: translateX(40px); }
[data-av-animate="fade-right"] { transform: translateX(-40px); }
[data-av-animate="stagger"] { opacity: 1; transform: none; transition: none; }

[data-av-animate].av-in-view {
  opacity: 1;
  transform: none;
}

/* "stagger" animates its direct children one-by-one instead of itself */
[data-av-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-av-animate="stagger"].av-in-view > * {
  opacity: 1;
  transform: none;
}
[data-av-animate="stagger"] > *:nth-child(1)  { transition-delay: 0s; }
[data-av-animate="stagger"] > *:nth-child(2)  { transition-delay: 0.08s; }
[data-av-animate="stagger"] > *:nth-child(3)  { transition-delay: 0.16s; }
[data-av-animate="stagger"] > *:nth-child(4)  { transition-delay: 0.24s; }
[data-av-animate="stagger"] > *:nth-child(5)  { transition-delay: 0.32s; }
[data-av-animate="stagger"] > *:nth-child(6)  { transition-delay: 0.4s; }
[data-av-animate="stagger"] > *:nth-child(7)  { transition-delay: 0.48s; }
[data-av-animate="stagger"] > *:nth-child(8)  { transition-delay: 0.56s; }
[data-av-animate="stagger"] > *:nth-child(9)  { transition-delay: 0.64s; }
[data-av-animate="stagger"] > *:nth-child(10) { transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  [data-av-animate],
  [data-av-animate="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}