@import url("https://fonts.cdnfonts.com/css/lufga");
/* 10X Experts static clone – v3.4
   - CTA (Let's Talk) button parity with original
   - Removed conflicting global .btn rules
   - Keeps Services/Process/News/hero/nav behavior intact
*/

/* ==== Theme tokens ======================================================= */
:root {
  /* Brand + layout tokens (Elementor parity) */
  --container: 1200px; /* default wide desktop */
  --gutter: 30px; /* fixed gutters */
  --radius: 20px; /* consistent radii */
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.08);
  --black: #0b0b0b;
  --gray: #efefef;
  --white: #fff;
  --text: #111;
  --text-inv: #f5f5f5;
  --lh-tight: 1.1;
  --ls-tight: -0.01em;
  --gold-1: #cb7f2c; /* OLD SITE primary gold */
  --gold-2: #f4d27b; /* OLD SITE light gold */
  --gold-3: #f2b451;
  --dark: #0e0e10;
  --muted: rgba(255, 255, 255, 0.72);
  /* Scrollbar tokens */
  --scrollbar-size: 6px; /* slimmer for a minimal look */
  --scrollbar-track: transparent; /* hide track by default */
  --scrollbar-thumb-color: rgba(244, 210, 123, 0.6); /* Firefox color */
  --scrollbar-thumb-grad: linear-gradient(
    180deg,
    rgba(244, 210, 123, 0.75),
    rgba(226, 166, 66, 0.75)
  );
  /* WP parity tokens used by buttons */
  --grad-1: #cb7f2c; /* from -> to direction matches OLD SITE */
  --grad-2: #f4d27b;
  --grad-1-rgb: 203, 127, 44;
  --grad-2-rgb: 244, 210, 123;
  --white-rgb: 255, 255, 255;
  --white-light-rgb: 240, 241, 242;
  --primary: #202133;
  --e-a-transition-hover: all 0.3s;
  --arrow-right-primary: url("data:image/svg+xml,<svg fill='none' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'><g stroke='%23202133' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'><path d='m7.21484 2.96484 3.03496 3.035-3.03496 3.035'/><path d='m1.75 6h8.415'/></g></svg>");
  --arrow-right-white: url("data:image/svg+xml,<svg fill='none' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'><g stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'><path d='m7.21484 2.96484 3.03496 3.035-3.03496 3.035'/><path d='m1.75 6h8.415'/></g></svg>");
}

/* ==== Fonts ============================================================ */
/* Local dev note: remote WP fonts cause CORS when previewing via localhost.
   We intentionally disable those @font-face declarations here. The site
   falls back to Inter (Google Fonts) and standard cursive for signatures. */

* {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
  margin: 0; /* eliminate default browser margins (prevents side gaps) */
  background: #0e0e10; /* match OLD SITE base */
  color: #fff;
  /* Prevent Safari/iOS from auto-enlarging text, keep our clamps consistent */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prefer Lufga (OLD SITE), fall back to Poppins/system */
  font-family:
    "Lufga",
    "Poppins",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  /* Prevent any accidental horizontal overflow from pinned/animated elements */
  overflow-x: hidden;
}

/* ==== Global scrollbar styling (gold on dark) ========================= */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track);
  /* Prevent layout shift when scrollbars appear */
  scrollbar-gutter: stable;
}
/* WebKit browsers */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
  margin: 2px; /* "floating" pill look */
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-grad);
  border-radius: 999px;
  border: 0;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(244, 210, 123, 0.95), rgba(226, 166, 66, 0.95));
}
/* Respect Windows High Contrast */
@media (forced-colors: active) {
  html {
    scrollbar-color: ButtonText Button;
  }
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}
@media (max-width: 767px) {
  :root {
    --scrollbar-size: 8px;
  }
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  max-width: var(--container); /* Elementor boxed width */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Utility: flex columns that were locked to 320px minimum can now respect smaller screens */
.minw-320 {
  min-width: 320px;
  min-width: min(320px, 100%);
}

/* PR section should use the full viewport width with generous but smaller insets */
#public-relations .container {
  --container: 100%;
  max-width: 100%;
}
#public-relations .container,
#public-relations .container-fluid {
  padding-inline: max(20px, 4vw);
}

/* Elementor-like breakpoints for container + gutters */
@media (max-width: 1439px) {
  .container {
    --container: 1140px;
  }
}
@media (max-width: 1024px) {
  .container {
    --container: 930px;
  }
}
@media (max-width: 767px) {
  .container {
    --container: 100%;
    --gutter: 16px; /* tighter gutters on small screens */
  }
}
@media (max-width: 480px) {
  .container {
    --gutter: 14px;
  }
}
section {
  position: relative;
  z-index: 1;
}

/* Global gradient text utility (match WP/Elementor gradient words) */
/* Robust gradient text with a solid-color fallback (avoids gold blocks
   in browsers that don't support background-clip:text) */
.text-grad {
  color: var(--gold-2);
  background: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-grad {
    background: linear-gradient(100deg, var(--grad-1), var(--grad-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Optional heading helper to tighten display text */
.h2 {
  font-size: clamp(36px, 4vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Watermark helper — prefer SVG background via CSS var */
.section-title {
  position: relative;
}
.section-title::before {
  content: attr(data-watermark);
  position: absolute;
  inset: auto auto -0.2em 0;
  transform: translateY(10%) scale(1.2);
  font:
    400 clamp(68px, 11vw, 200px) / 1 "Allura",
    cursive;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}
/* If a background-image is provided, use it instead of text content */
.section-title.section-title--svg::before {
  content: "";
  background: var(--watermark-img) no-repeat 0 100% / contain;
  width: clamp(200px, 40vw, 800px);
  height: clamp(80px, 16vw, 220px);
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  .py-lg-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==== Section shape dividers (SVG seams) ================================ */
.section {
  position: relative;
  overflow: hidden;
}
.section--light {
  background: var(--gray);
  color: var(--text);
}
.section--dark {
  background: var(--black);
  color: var(--text-inv);
}
.shape-top,
.shape-btm {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.shape-top {
  top: -1px;
  background-position: 50% 100%;
  /* Inline concave divider (placeholder) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1600 120'%3E%3Cpath d='M0 120C400 60 1200 60 1600 120V0H0Z' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
}
.shape-btm {
  bottom: -1px;
  background-position: 50% 0%;
  /* Inline concave divider (placeholder) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1600 120'%3E%3Cpath d='M0 0C400 60 1200 60 1600 0V120H0Z' fill='rgba(0,0,0,0.12)'/%3E%3C/svg%3E");
}

/* ==== Header / Nav ======================================================= */
header.site-header {
  position: relative;
  z-index: 50;
}
.navbar.fixed-top {
  position: sticky !important;
  top: 0;
  z-index: 1300;
  /* Old-site look: solid black bar with subtle blur */
  background: #000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
/* When a container wrapper is present inside the navbar, make it flex */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  gap: 16px;
}
/* hide during hero intro only when JS runs */
body.js-ready:not(.video_play_finished) .navbar.fixed-top {
  transform: translateY(-100%);
}
.navbar .brand img,
.custom-logo {
  height: 34px;
  width: auto;
}

/* When mobile menu is open, lock background scroll (prevents body scroll bleed) */
body.menu-open {
  overflow: hidden;
}

/* Ensure old-site wrapper classes don't hide items when Bootstrap is absent */
.navbar .navbar-collapse {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0; /* allow flex items to shrink without wrapping */
  margin-left: auto;
  order: 2;
}

.navbar .nav-toggle {
  order: 3;
  margin-left: auto;
}

/* WordPress/Elementor menu containers */
.navbar .navbar-nav,
.navbar .menu,
.menu-primary-menu-container ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar .navbar-collapse {
  flex-wrap: nowrap;
}
.navbar .menu {
  white-space: nowrap;
}
.navbar a.nav-link {
  white-space: nowrap;
}
/* Override WP-compat dropdown rule so top-level list stays visible */
.navbar .menu .menu-primary-menu-container > ul {
  display: flex;
}

@media (max-width: 767px) {
  .navbar .menu {
    white-space: normal;
  }
  .navbar a.nav-link {
    white-space: normal;
  }
  .navbar .menu .menu-primary-menu-container > ul {
    flex-direction: column;
  }
}
.navbar a.nav-link,
#ascendTopMenu a,
.menu-primary-menu-container a {
  color: #fff;
  opacity: 0.88;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 8px 10px;
  border-radius: 10px;
  display: inline-block;
  line-height: 1.2;
}
.navbar a.nav-link:hover,
#ascendTopMenu a:hover,
.menu-primary-menu-container a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
.navbar a.nav-link.active {
  color: var(--gold-2);
}

/* === Old-site navbar styling parity ================================ */
/* Target the `.top-nav` class present on the <nav> element in pages */
.top-nav {
  background-color: #000; /* solid bar like OLD SITE */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.top-nav .nav-item a,
.top-nav a.nav-link {
  /* OLD SITE: white links, slightly lighter weight and more tracking */
  color: var(--white);
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.5px;
  /* Remove pill look from the new site inside the top bar */
  border-radius: 0;
  background: none;
}
/* OLD SITE: gradient text on hover / focus / current */
.top-nav a.nav-link:hover {
  background-color: transparent;
  color: var(--white);
}
.top-nav .nav-item:hover a,
.top-nav .nav-item:focus a,
.top-nav .nav-item.current_page_item a,
.top-nav a.nav-link[aria-current="page"],
.top-nav a.nav-link.active,
.top-nav a.nav-link:hover,
nav.top-nav
  #ascendTopMenu
  :is(
    .nav-item:hover a,
    .nav-item:focus a,
    .nav-item.current_page_item a,
    a.nav-link[aria-current="page"],
    a.nav-link.active,
    a.nav-link:hover
  ) {
  background: linear-gradient(270deg, var(--grad-1) 0%, var(--grad-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: transparent;
}
@media (forced-colors: active) {
  .top-nav .nav-item:hover a,
  .top-nav .nav-item:focus a,
  .top-nav .nav-item.current_page_item a,
  .top-nav a.nav-link[aria-current="page"],
  .top-nav a.nav-link.active,
  .top-nav a.nav-link:hover,
  nav.top-nav
    #ascendTopMenu
    :is(
      .nav-item:hover a,
      .nav-item:focus a,
      .nav-item.current_page_item a,
      a.nav-link[aria-current="page"],
      a.nav-link.active,
      a.nav-link:hover
    ) {
    background: none;
    color: ButtonText;
    -webkit-text-fill-color: currentColor;
  }
}
@media screen and (min-width: 768px) {
  .top-nav {
    min-height: 80px; /* OLD SITE height */
  }
}

/* Mobile menu toggle button */
.nav-toggle {
  display: none;
  width: 42px;
  height: 36px;
  background: transparent;
  border: 0;
  position: relative;
  cursor: pointer;
  z-index: 1201; /* above menu panel */
}
.nav-toggle span {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: #fff;
  transform-origin: center;
  transition: all 0.3s ease;
}
.nav-toggle span:nth-child(1) {
  top: 10px;
}
.nav-toggle span:nth-child(2) {
  top: 17px;
}
.nav-toggle span:nth-child(3) {
  top: 24px;
}

@media (max-width: 992px) {
  .nav-toggle {
    display: block;
  }
  .navbar .navbar-collapse {
    justify-content: flex-end;
  }
  .navbar .menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 82vw);
    background: rgba(0, 0, 0, 0.96);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.34);
    z-index: 1110; /* above backdrop but below toggle */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 72px 22px 32px;
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    transform: translateX(100%);
    opacity: 0;
    transition:
      transform 0.28s ease,
      opacity 0.28s ease;
    pointer-events: none;
  }
  .navbar .menu.show,
  .navbar.is-open .menu {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .navbar a.nav-link,
  .navbar .menu a {
    padding: 12px 14px;
    border-radius: 8px;
  }
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.62);
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.menu-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.menu-backdrop:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

/* ==== Hero ============================================================== */
.hero-banner {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  background-image: url("assets/big-logo-fallback.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(420px, 45vw);
}
body.hero-video-ready .hero-banner {
  background-image: none;
}
.hero-banner .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
}
body.hero-video-ready .hero-banner .hero-video {
  opacity: 0.6;
}
/* Scroll badge cluster (OLD hero + page heroes) */
.hero-banner .section-blob,
.page-hero .section-blob {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 86px;
  z-index: 2;
  pointer-events: none;
}
/* If the scroll cue is a link, allow clicks */
.hero-banner a.section-blob,
.page-hero a.section-blob {
  pointer-events: auto;
}
.section-blob img {
  position: absolute;
  inset: 0;
  margin: auto;
}
.section-blob img.rotating {
  width: 86px;
  height: 86px;
  opacity: 0.9;
}
.section-blob img.center-icon {
  width: 24px;
  height: 24px;
}
.section-blob img.circle {
  width: 100px;
  height: 100px;
  opacity: 0.25;
}
/* Make the scroll cue more compact on small phones */
@media (max-width: 575px) {
  .hero-banner .section-blob,
  .page-hero .section-blob {
    width: 64px;
    height: 64px;
    bottom: 18px;
  }
  .section-blob img.rotating {
    width: 64px;
    height: 64px;
  }
  .section-blob img.center-icon {
    width: 18px;
    height: 18px;
  }
  .section-blob img.circle {
    width: 80px;
    height: 80px;
  }
}
/* Fallback CSS-drawn cue when images are not present */
.hero-banner .section-blob:empty {
  width: 48px;
  height: 72px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.35);
}
.hero-banner .section-blob:empty::after {
  content: "";
  width: 6px;
  height: 10px;
  border-radius: 6px;
  background: #fff;
  opacity: 0.85;
  animation: hero-scroll-cue 1.4s ease-in-out infinite;
}
/* If using an image, remove the CSS-drawn styles */
img.section-blob {
  width: 54px;
  height: 84px;
  border: 0;
  background: none;
  box-shadow: none;
}
@keyframes hero-scroll-cue {
  0% {
    transform: translateY(-8px);
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(8px);
    opacity: 0.15;
  }
}

@media (min-width: 992px) {
  body.js-ready .hero-banner {
    position: fixed;
    inset: 0;
    z-index: 30;
    min-height: 100svh;
  }
  body.js-ready .hero-banner.section-behind {
    z-index: 0;
    pointer-events: none;
  }
  body.js-ready:not(.video_play_finished) {
    height: 100svh;
    overflow: clip !important;
  }
}
.hero-spacer {
  height: 0;
}
@media (min-width: 992px) {
  .hero-spacer {
    height: 100svh;
  }
}

/* ==== Ticker / Logos ===================================================== */
.trusted_by {
  position: relative;
  overflow: hidden;
  background-color: #0f0f12; /* default dark variant */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.trusted_by::before {
  content: none;
}
.trusted_by.trusted-light {
  background-color: #f4f4f6; /* light variant to match original */
}
.trusted_by .rounded-text {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 96px);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  opacity: 1;
  pointer-events: none;
  isolation: isolate;
}
/* Place the scroll cue at the top seam of the logos band */
/* (removed seam bubble styles; hero hosts the simple cue) */
.trusted_by .rounded-text::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: -1;
}
.trusted_by .rounded-text img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.trusted_by:not(.trusted-light) .rounded-text img {
  /* invert ring for dark background only */
  filter: brightness(0) invert(1);
}
.ticker {
  display: flex;
  gap: 24px;
  align-items: center;
  will-change: transform;
  flex-wrap: nowrap; /* keep a single row for marquee */
}
.ticker img {
  filter: grayscale(1);
  opacity: 0.9;
  height: 42px;
  margin-inline: 0; /* avoid auto margins that cause gaps/wrapping */
}
/* Prevent flex growth/shrink to keep natural logo widths */
.ticker > * {
  flex: 0 0 auto;
}
/* Ensure black SVG logos remain visible on dark — give them a subtle tile */
/* Make pure black SVGs readable on dark by inverting to white */
/* In Trusted by, render all logos as white for consistent readability */
.trusted_by .ticker img {
  filter: grayscale(1);
}
.trusted_by:not(.trusted-light) .ticker img {
  filter: brightness(0) invert(1) grayscale(1);
}
/* If Flickity mounts on ticker, avoid flex quirks and guard height */
.ticker.js-flickity-mounted {
  display: block;
}
.ticker.js-flickity-mounted .flickity-viewport {
  min-height: 64px;
}
@media (max-width: 575px) {
  .ticker img {
    height: 32px;
  }
}

/* When Flickity is used for the ticker, let it manage layout */
.flickity-enabled.ticker {
  display: block;
}
/* Let Flickity handle positioning; avoid flex here to prevent overlap */
.flickity-enabled.ticker .flickity-slider {
  display: block;
}
.flickity-enabled.ticker .flickity-slider > * {
  margin: 0 24px;
}

/* Generic rotating helper (used by award/scroll rings) */
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating var(--rotating-duration, 10s) linear infinite;
}

/* Respect reduced motion globally for generic .rotating helper */
@media (prefers-reduced-motion: reduce) {
  .rotating {
    animation: none !important;
  }
}

/* Reveal-on-scroll micro-motion (opt-in) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==== Headings =========================================================== */
.text-signature {
  position: relative;
  line-height: 1.1;
}
.text-signature .signature {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  /* Free look-alike for signature: Allura */
  font-family: "Allura", cursive;
  font-size: clamp(64px, 17vw, 200px);
  color: #fff;
  opacity: 0.06;
  transform: translateY(30%);
  pointer-events: none;
  user-select: none;
}

/* Keep the "Gives Back" watermark inside the heading and faint */
#section_2 .text-signature .signature {
  opacity: 0.06 !important; /* subtle watermark */
  transform: translateY(0); /* keep entirely within heading */
}

/* Remove WP overlay gradient on Initiatives hero to show GIF clearly */
body.initiatives-page .page-hero::after {
  content: none !important;
  background: none !important;
}

/* Expertise › Digital Marketing: make the script background more subtle */
#digital-marketing .text-signature .signature {
  opacity: 0.06 !important;
}
/* Strategy heading watermark: keep subtle like digital */
#strategy .text-signature .signature {
  opacity: 0.06 !important;
}
.display-3 {
  /* OLD SITE display-3 ≈ 64px on desktop */
  font-size: clamp(36px, 5.5vw, 64px);
  margin: 0;
}

/* ==== Generic icon tile (used outside #process too) ===================== */
/* Matches the circular icon ring used in Our Process, applied to any
   .process-icon used in other sections like Digital Marketing. */
.process-icon .icon-container {
  --mfx-icon-size: 74px;
  width: var(--mfx-icon-size);
  height: var(--mfx-icon-size);
  border-radius: 999px;
  border: 2px solid var(--gold-1);
  background: #121214;
  display: grid;
  place-items: center;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 0 0 6px rgba(226, 166, 66, 0.1);
}
.process-icon .our-process-icon {
  width: 34px;
  height: 34px;
}

/* ==== Cards / Press ====================================================== */
.bg-dark-light {
  background: #1c1c1e;
}
.card.bg-grad {
  /* Gradient panel similar to Let's Talk CTA, usable for cards */
  background:
    radial-gradient(
      1100px 740px at 78% 52%,
      rgba(244, 210, 123, 0.85) 0%,
      rgba(244, 210, 123, 0.28) 50%,
      rgba(244, 210, 123, 0) 60%
    ),
    linear-gradient(100deg, #cb7f2c 0%, #dea848 48%, #f4d27b 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card-fold {
  position: relative;
  padding: 22px;
  border-radius: var(--radius);
}
.card-fold::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-bottom-left-radius: 6px;
}

/* In the News — title & subtext sizes like reference */
#news .card-fold .h4 {
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.25;
  margin: 0 0 10px;
}
#news .card-fold .opacity-75 {
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.55;
  opacity: 0.78;
  letter-spacing: 0.1px;
}
#news .award-logo {
  height: 38px;
  opacity: 0.95;
  filter: grayscale(1) brightness(0.95);
  margin-bottom: 12px;
}

/* ==== Our Process (animated timeline) =================================== */
.our-process {
  --icon-size: 88px; /* match OLD ring size for line alignment */
  --line-h: 2px;
}
.our-process .our-process-items {
  position: relative;
  padding-block: 24px;
}

/* ==== Icon ring utility ================================================= */
.icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: radial-gradient(circle at 30% 30%, var(--gold-1), var(--gold-2));
}
.our-process .our-process-items::before,
.our-process .our-process-items::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  /* Align the timeline with the visual center of the icon rings.
     Use container padding (24px) as the baseline offset. */
  top: calc(var(--icon-size) / 2 + var(--line-top-offset, 24px));
  height: var(--line-h);
  transform-origin: left center;
  border-radius: 3px;
}
.our-process .our-process-items::before {
  background: rgba(255, 255, 255, 0.14);
}
.our-process .our-process-items::after {
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.our-process .process-item {
  text-align: center;
  position: relative;
  z-index: 1;
}
.our-process .icon-container {
  /* OLD SITE parity: gradient ring with inner dark circle */
  --ring-size: 88px;
  --inner-inset: 2px;
  width: var(--ring-size);
  height: var(--ring-size);
  margin-inline: auto;
  margin-bottom: 12px;
  border-radius: 50%;
  position: relative;
  isolation: isolate;
  background: linear-gradient(270deg, var(--gold-1) 0%, var(--gold-2) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  transform: scale(0.8) translateY(10px);
  opacity: 0;
}
.our-process .icon-container::before {
  content: "";
  position: absolute;
  inset: var(--inner-inset);
  background-color: #000; /* matches OLD's inner dark */
  border-radius: 50%;
  z-index: -1;
}
.our-process .icon-container img {
  /* Match OLD: padded icon in inner circle */
  --size: 60px;
  width: var(--size);
  height: var(--size);
  background-color: #101010;
  border-radius: 50%;
  padding: 1rem;
}
.our-process h2 {
  /* OLD SITE h2 ≈ 32px on desktop */
  font-size: clamp(22px, 1.9vw, 32px);
  margin: 6px 0;
}
.our-process .process-item .opacity-75 {
  color: var(--muted);
  /* Match OLD: smaller paragraph with generous leading */
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.55;
}
.our-process .process-item h2 .text-grad {
  /* Match OLD: slightly larger gold dot */
  font-size: 40px;
  font-weight: 900;
}
.our-process .process-item h2,
.our-process .process-item .opacity-75 {
  transform: translateY(8px);
  opacity: 0;
}

/* in-view animation */
body.js-ready .our-process.in-view .our-process-items::after {
  transform: scaleX(1);
}
body.js-ready .our-process.in-view .icon-container {
  transform: none;
  opacity: 1;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
body.js-ready .our-process.in-view .process-item h2,
body.js-ready .our-process.in-view .process-item .opacity-75 {
  transform: none;
  opacity: 1;
  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}
body.js-ready .our-process.in-view .row > *:nth-child(1) .icon-container {
  transition-delay: 0.1s;
}
body.js-ready .our-process.in-view .row > *:nth-child(2) .icon-container {
  transition-delay: 0.25s;
}
body.js-ready .our-process.in-view .row > *:nth-child(3) .icon-container {
  transition-delay: 0.4s;
}
body.js-ready .our-process.in-view .row > *:nth-child(4) .icon-container {
  transition-delay: 0.55s;
}
body.js-ready .our-process.in-view .row > *:nth-child(1) h2,
body.js-ready .our-process.in-view .row > *:nth-child(1) .opacity-75 {
  transition-delay: 0.2s;
}
body.js-ready .our-process.in-view .row > *:nth-child(2) h2,
body.js-ready .our-process.in-view .row > *:nth-child(2) .opacity-75 {
  transition-delay: 0.35s;
}
body.js-ready .our-process.in-view .row > *:nth-child(3) h2,
body.js-ready .our-process.in-view .row > *:nth-child(3) .opacity-75 {
  transition-delay: 0.5s;
}
body.js-ready .our-process.in-view .row > *:nth-child(4) h2,
body.js-ready .our-process.in-view .row > *:nth-child(4) .opacity-75 {
  transition-delay: 0.65s;
}

/* OLD SITE parity: desktop rail geometry and start dot */
@media (min-width: 1024px) {
  .our-process .our-process-items {
    position: relative;
  }
  .our-process .our-process-items::before,
  .our-process .our-process-items::after {
    left: 0.1rem;
    width: 100vw;
    right: auto;
  }
  .our-process .our-process-items > .row::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc((var(--icon-size) / 2 + var(--line-top-offset, 24px)) - 3px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--gold-2);
  }
}

/* OLD SITE parity: zero out long delays on smaller screens */
@media (max-width: 1024px) {
  .process-item [data-aos][data-aos][data-aos-delay].aos-animate {
    transition-delay: 0s;
  }
  .our-process .icon-container img {
    --size: 36px;
    padding: 8px;
  }
}

/* ==== Services (supports <details> and Bootstrap-like accordions) ======= */
details.accordion {
  background: #141416;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
details.accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 22px;
  position: relative;
}
details.accordion > summary::-webkit-details-marker {
  display: none;
}
details.accordion > summary .dot {
  color: var(--gold-1);
  margin-left: 6px;
}
details.accordion > summary .chev {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #0f0f12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: rotate(0);
  transition: transform 0.25s ease;
}
details.accordion[open] > summary .chev {
  transform: rotate(180deg);
}
details.accordion .content {
  padding: 0 22px 20px;
  color: var(--muted);
}

.accordion .accordion-item {
  background: #141416;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 0;
}
.accordion .accordion-header {
  /* Remove default h2 margins so the gold bar fills edge-to-edge */
  margin: 0;
}
.accordion .accordion-button {
  width: 100%;
  padding: 22px;
  font-weight: 800;
  font-size: 22px;
  background: transparent;
  color: #fff;
  text-align: left;
  border: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}
.accordion .accordion-button:hover {
  background: rgba(255, 255, 255, 0.03);
}
.accordion .accordion-button:focus {
  outline: none;
}
.accordion .accordion-button .font-signature {
  color: var(--gold-1);
  margin-left: 6px;
  font-weight: 400;
  font-family: "Allura", cursive;
}

/* Accordion title with hover effect */
.accordion .accordion-title {
  position: relative;
  flex: 1;
  min-height: 1.4em;
}
.accordion .accordion-title-default,
.accordion .accordion-title-hover {
  display: block;
  transition: opacity 0.3s ease;
}
.accordion .accordion-title-default::after {
  /* Gold dot at end of title, matching original */
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-1);
  margin-left: 8px;
  vertical-align: middle;
}
.accordion .accordion-title-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.accordion .accordion-button:hover .accordion-title-hover {
  opacity: 1;
}
.accordion .accordion-button:hover .accordion-title-default {
  opacity: 0;
}

/* Chevron indicator (Elementor-like SVG) */
.accordion .accordion-button::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem 1.25rem;
  transition: transform 0.3s ease;
  /* white chevron for dark theme */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.accordion .accordion-body {
  padding: 0 22px 20px;
  color: var(--muted);
}
.accordion .accordion-collapse {
  display: none;
  overflow: hidden; /* for height animations */
}
.accordion .accordion-collapse.show {
  display: block;
}

/* Light variant overrides for accordions (used on Services section) */
.bg-light .accordion .accordion-item {
  background: #f5f5f6;
  border: 0;
}
.bg-light .accordion .accordion-button {
  color: #171717;
}
.bg-light .accordion .accordion-button:hover {
  background: rgba(0, 0, 0, 0.03);
}
.bg-light .accordion .accordion-body {
  color: #3b3b3b;
}
.bg-light .accordion .accordion-button::after {
  /* dark chevron for light backgrounds */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23202133'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Services tweaks to match original reference */
#services .accordion .accordion-button {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Hover/active: turn the whole header gold (not just text) */
#services .accordion .accordion-button:hover,
#services .accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(270deg, var(--gold-1) 0%, var(--gold-2) 100%);
  color: #fff;
}
#services .accordion .accordion-button:hover .accordion-title-default,
#services .accordion .accordion-button:not(.collapsed) .accordion-title-default {
  color: #fff;
  opacity: 1 !important; /* override generic hover swap */
}
/* Disable gradient-text swap for Services (we use bar highlight instead) */
#services .accordion .accordion-button:hover .accordion-title-hover,
#services .accordion .accordion-button:not(.collapsed) .accordion-title-hover {
  opacity: 0;
}
/* Chevron container: white rounded square like original */
#services .accordion .accordion-button::after {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: #ffffff; /* square */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-size: 16px 16px; /* chevron size inside square */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23202133'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* Keep chevron dark on gold bar (inside white square) */
#services .accordion .accordion-button:hover::after,
#services .accordion .accordion-button:not(.collapsed)::after {
  background-color: #ffffff; /* ensure square remains white */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23202133'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* On gold bar, make the dot white and hide item border for seamless look */
#services .accordion .accordion-button:hover .accordion-title-default::after,
#services .accordion .accordion-button:not(.collapsed) .accordion-title-default::after {
  background: #fff;
}
#services .accordion .accordion-item:has(.accordion-button:hover),
#services .accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: transparent;
}

/* ==== Bands that must be pure black & edge-to-edge ====================== */
.band-black {
  background: #000 !important;
  padding: 80px 0;
}

/* Ensure the black SEO band visually attaches to Strategy with rounded top */
#seo {
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  /* guard against any tiny seam between sections */
  margin-top: -1px;
}

/* Strategy band (light section with internal dark block) */
.section-strategy {
  position: relative;
}
.section-strategy > .container-fluid {
  /* Match OLD SITE gold sweep behind the three columns
     and tone down the mid yellow a bit. */
  background:
    radial-gradient(
      1100px 680px at 58% 42%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.03) 46%,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      100deg,
      #b66b25 0%,
      #d38b34 32%,
      #e0b55a 62%,
      /* slightly darker than the previous bright yellow */ #cb7f2c 100%
    );
  border-radius: 36px 36px 0 0;
}
.section-strategy h4,
.section-strategy p {
  color: #fff;
}
/* Spacing and readability parity for Strategy columns */
.section-strategy .strategy-cols .col-md-4 {
  padding: 2.5rem; /* ~py-5 px-5 */
}
@media (min-width: 768px) {
  .section-strategy .strategy-cols .col-md-4 + .col-md-4 {
    /* Vertical dividers between the columns like the OLD SITE */
    border-left: 2px solid rgba(32, 21, 0, 0.25);
  }
}
.section-strategy .strategy-cols h4 {
  margin-bottom: 0.75rem;
}
.section-strategy .strategy-cols p {
  padding-bottom: 1.5rem;
}

/* ==== SEO (Search Engine Optimization) section ========================= */
/* Icon + text rows like OLD SITE */
#seo .seo-list {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
  align-items: flex-start;
}
#seo .seo-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 6px 20px rgba(0, 0, 0, 0.22);
}
#seo .seo-icon img {
  width: 26px;
  height: 26px;
}
#seo .seo-detail {
  line-height: 1.5;
}
#seo .seo-detail h4 {
  /* Remove default top margin so titles align with icon top */
  margin: 0 0 6px;
  line-height: 1.25;
}

/* Digital Marketing card icon parity: light surface icon ring */
#digital-marketing .process-icon .icon-container {
  /* Use the brand gold gradient like the original */
  background: linear-gradient(270deg, var(--gold-1) 0%, var(--gold-2) 100%);
  border: 0;
  box-shadow: 0 0 0 6px rgba(226, 166, 66, 0.12);
}

/* Ensure the gold corner fold matches the original cards */
.card-fold.grad-fold-down::after {
  background: linear-gradient(135deg, transparent 50%, var(--gold-1) 0%, var(--gold-2) 100%);
}

/* ==== Expertise › Our Process (alternating bands) ====================== */
#process .process-section {
  position: relative;
  padding: 40px 0;
}
@media (min-width: 992px) {
  #process .process-section {
    padding: 64px 0;
  }
}
/* Even steps get a full-width black band with rounded corners */
#process .process-section:nth-child(even) {
  background: #000;
  border-radius: 36px;
  margin: 28px 0; /* create separation from light areas */
}
/* Icon tile contrast per surface */
#process .process-section:nth-child(odd) .process-icon .icon-container {
  background: rgba(0, 0, 0, 0.06);
}
#process .process-section:nth-child(even) .process-icon .icon-container {
  background: rgba(255, 255, 255, 0.06);
}
/* Dotted timeline color per surface */
#process .process-section:nth-child(odd) .bg-process-count {
  border-left-color: rgba(0, 0, 0, 0.12);
}
#process .process-section:nth-child(even) .bg-process-count {
  border-left-color: rgba(255, 255, 255, 0.2);
}
/* Text colors in dark bands */
/* Limit the override to the left column so cards keep their own colors */
#process .process-section:nth-child(odd) .col-xl-4 .col-lg-10,
#process .process-section:nth-child(odd) .col-xl-4 .text-body,
#process .process-section:nth-child(odd) .col-xl-4 h2 {
  /* Override the parent .bg-light default text color.
     Odd panels render on a dark surface, so we ensure
     the left-column heading and copy stay readable. */
  color: #fff;
}
#process .process-section:nth-child(even) .col-lg-10,
#process .process-section:nth-child(even) .text-body,
#process .process-section:nth-child(even) h2,
#process .process-section:nth-child(even) p {
  color: #fff;
}
/* Cards: light vs dark surfaces */
#process .process-section .card-fold {
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
#process .process-section:nth-child(odd) .card-fold {
  background: #fff;
  color: #202133;
}
#process .process-section:nth-child(even) .card-fold {
  background: #1c1c1e;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
#process .process-section:nth-child(even) .card-fold h4 {
  color: #fff;
}

/* Prevent margin-collapsing between bands (stops hero peeking through) */
#services,
#contact.lets-talk,
#press {
  position: relative;
  display: flow-root;
  z-index: 1;
}

/* Expertise page alias for Services (avoid SPA duplicate IDs) */
#services-expertise {
  position: relative;
  display: flow-root;
  z-index: 1;
}

/* <details>-based accordion on black (match old site parity) */
#services details.accordion,
#services-expertise details.accordion {
  background: #0f0f12;
  color: #e6e7ef;
  border: 1px solid #2b2c38;
  border-radius: 12px;
  margin: 0.75rem 0;
  overflow: hidden;
}
#services details.accordion > summary,
#services-expertise details.accordion > summary {
  list-style: none;
  padding: 0.875rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f0f12;
  color: #e6e7ef;
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease;
}
#services details.accordion > summary:hover,
#services-expertise details.accordion > summary:hover {
  background: #141416;
}
#services details.accordion > summary::-webkit-details-marker,
#services-expertise details.accordion > summary::-webkit-details-marker {
  display: none;
}

/* Title overlay swap (WP parity) */
#services details.accordion > summary .title-wrap,
#services-expertise details.accordion > summary .title-wrap {
  position: relative;
  flex: 1 1 auto;
  line-height: 1.35;
}
#services details.accordion > summary .title,
#services details.accordion > summary .title-default,
#services details.accordion > summary .title-hover,
#services-expertise details.accordion > summary .title,
#services-expertise details.accordion > summary .title-default,
#services-expertise details.accordion > summary .title-hover {
  display: block;
  font-weight: 600;
}
#services details.accordion > summary .title-hover,
#services-expertise details.accordion > summary .title-hover {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  background: linear-gradient(270deg, var(--gold-1) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: opacity 0.3s ease;
}
#services details.accordion > summary:hover .title-hover,
#services-expertise details.accordion > summary:hover .title-hover {
  opacity: 1;
}
#services details.accordion > summary:hover .title-default,
#services-expertise details.accordion > summary:hover .title-default {
  opacity: 0;
}

/* Accordion title bounce animations on hover (OLD parity) */
.accordion .accordion-button.collapsed:hover .accordion-title-hover {
  --anim-t: 0.8s;
  animation: mfx-bounce-in-up var(--anim-t) ease-in-out forwards;
}
.accordion .accordion-button.collapsed:hover .accordion-title-default {
  --anim-t: 0.4s;
  animation: mfx-bounce-in-down var(--anim-t) ease-out forwards;
}
#services details.accordion[open] > summary,
#services-expertise details.accordion[open] > summary {
  background: #171823;
  color: #ffffff;
  border-bottom-color: #2b2c38;
}
#services details.accordion.is-closing > summary,
#services-expertise details.accordion.is-closing > summary {
  background: #0f0f12;
  color: #e6e7ef;
  border-bottom-color: transparent;
}

/* Chevron */
#services details.accordion > summary .chev,
#services-expertise details.accordion > summary .chev {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: transparent; /* hide any fallback text */
  transition: transform 0.2s ease-in-out;
  background-image: var(--acc-icon-collapsed);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem 1.25rem;
}
#services details.accordion[open] > summary .chev,
#services-expertise details.accordion[open] > summary .chev {
  transform: rotate(-180deg);
}
#services details.accordion.is-closing > summary .chev,
#services-expertise details.accordion.is-closing > summary .chev {
  transform: rotate(0deg) !important;
}

/* Content */
#services details.accordion .content,
#services-expertise details.accordion .content {
  background: #171823;
  color: #cfd0da;
  border-top: 1px solid #2b2c38;
  padding: 1rem 1rem;
}

/* Comfortable spacing on the bands */
#services {
  padding: 64px 0 80px;
}
#services-expertise {
  padding: 64px 0;
}
#press {
  padding: 48px 0 38px;
}
#contact.lets-talk {
  padding: 48px 0;
}

/* ==== Let's Talk – panel & button ====================================== */
/* Local tokens to mirror WP/Elementor icon assets for parity */
.lets-talk {
  --white-rgb: 255, 255, 255;
  --white-light-rgb: 240, 241, 242;
  /* Match WP/Elementor dark token for CTA text/arrow */
  --primary: #0e0e10;
  --arrow-right-primary: url("data:image/svg+xml,<svg fill='none' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'><g stroke='%230e0e10' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'><path d='m7.21484 2.96484 3.03496 3.035-3.03496 3.035'/><path d='m1.75 6h8.415'/></g></svg>");
  --arrow-right-white: url("data:image/svg+xml,<svg fill='none' height='12' viewBox='0 0 12 12' width='12' xmlns='http://www.w3.org/2000/svg'><g stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'><path d='m7.21484 2.96484 3.03496 3.035-3.03496 3.035'/><path d='m1.75 6h8.415'/></g></svg>");
  --send-icon: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.16641 5.2668L13.2414 2.90846C16.4164 1.85013 18.1414 3.58346 17.0914 6.75846L14.7331 13.8335C13.1497 18.5918 10.5497 18.5918 8.96641 13.8335L8.26641 11.7335L6.16641 11.0335C1.40807 9.45013 1.40807 6.85846 6.16641 5.2668Z' stroke='%230e0e10' stroke-width='2.34961' stroke-linecap='round' stroke-linejoin='round'/><path d='M8.42578 11.3755L11.4091 8.38379' stroke='%230e0e10' stroke-width='2.34961' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --send-icon-white: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.16641 5.2668L13.2414 2.90846C16.4164 1.85013 18.1414 3.58346 17.0914 6.75846L14.7331 13.8335C13.1497 18.5918 10.5497 18.5918 8.96641 13.8335L8.26641 11.7335L6.16641 11.0335C1.40807 9.45013 1.40807 6.85846 6.16641 5.2668Z' stroke='%23ffffff' stroke-width='2.34961' stroke-linecap='round' stroke-linejoin='round'/><path d='M8.42578 11.3755L11.4091 8.38379' stroke='%23ffffff' stroke-width='2.34961' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Gradient panel (warmer left, brighter right like original) */
.lets-talk .bg-grad {
  /* Layered gradients to match the original’s warm sweep and soft highlight */
  background:
    radial-gradient(
      1100px 740px at 78% 52%,
      rgba(244, 210, 123, 0.85) 0%,
      rgba(244, 210, 123, 0.28) 50%,
      rgba(244, 210, 123, 0) 60%
    ),
    linear-gradient(100deg, #cb7f2c 0%, #dea848 48%, #f4d27b 100%);
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

/* Faint signature sweep inside the panel (matches WP/Elementor “script” feel) */
.lets-talk .bg-grad::after {
  content: "Let’s";
  position: absolute;
  left: 1.5%;
  top: -6%;
  /* Place watermark behind real content so it never masks text */
  z-index: -1;
  font-family: "Allura", cursive;
  font-size: clamp(200px, 24vw, 480px);
  line-height: 1;
  color: #fff;
  opacity: 0.06;
  transform: rotate(0.5deg);
  pointer-events: none;
  user-select: none;
}
.lets-talk .bg-grad > * {
  position: relative;
  z-index: 1;
}
.lets-talk .lets-talk-logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 120px;
  opacity: 0.2;
  pointer-events: none;
}

.lets-talk h2 {
  color: #fff;
}
.lets-talk h2.display-1 {
  font-size: clamp(40px, 7.5vw, 112px);
  line-height: 0.95;
}
.lets-talk p {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(16px, 1.6vw, 22px);
  margin-bottom: 26px;
}

/* — Single, unambiguous CTA system (no global .btn conflicts) — */
.lets-talk .btn {
  --border-radius: 12px;
  --padding-y: 14px;
  --padding-x: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--padding-y) var(--padding-x) !important;
  position: relative;
  border-radius: var(--border-radius);
  background: #fff;
  color: var(--primary);
  font-weight: 500;
  font-family:
    "Poppins",
    var(
      --bs-body-font-family,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Helvetica,
      Arial,
      sans-serif
    );
  letter-spacing: 0.5px;
  line-height: 1;
  border: 1px solid #fff;
  box-shadow: none;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  transition: var(--e-a-transition-hover, all 0.3s);
}
.lets-talk .btn:hover {
  box-shadow: none;
}
.lets-talk .btn:active {
  transform: none;
}

/* White variant parity (hover flips to primary like WP theme) */
.lets-talk .btn-white {
  background-color: #fff;
  color: var(--primary);
  border-color: #fff;
}
.lets-talk .btn-white:hover,
.lets-talk .btn-white:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Send variant: WP parity — keep white bg while text turns white over gradient sweep */
.lets-talk .btn-send:hover,
.lets-talk .btn-send:focus {
  /* Keep the CTA readable: stay on white with dark text */
  background-color: #fff;
  border-color: #fff;
  color: var(--primary) !important;
}

/* Arrow/Send chip as inline flex pseudo-element (parity with WP) */
.lets-talk .btn.btn-arrow {
  /* no extra padding needed; chip sits inline */
}
.lets-talk .btn.btn-arrow.btn-lg {
  /* keep parity with inline chip */
}
.lets-talk .btn.btn-arrow::after {
  content: "";

  --size: 40px;
  width: var(--size);
  height: var(--size);
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.5rem;
  border-radius: 14px;
  background-color: rgba(var(--white-rgb), 0);
  border: 1px solid rgba(0, 0, 0, 0);
  background-image: var(--arrow-right-primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  transition: var(--e-a-transition-hover, all 0.3s);
}
.lets-talk .btn.btn-arrow:hover::after {
  transform: translateX(2px);
  background-image: var(--arrow-right-white);
  /* no extra background/shadow change in base WP rule */
}
/* optional bordered token */
.lets-talk .btn-arrow-bordered::after {
  border: 1px solid rgba(var(--white-light-rgb), 0.4);
  background-color: rgba(var(--white-light-rgb), 0.2);
  box-shadow: 12px 12px 20px rgba(45, 47, 97, 0.04);
}
/* Send variant swaps icon and adds gradient sweep */
.lets-talk .btn-send {
  overflow: hidden;
}
.lets-talk .btn-send::after {
  background-image: var(--send-icon);
  z-index: 3;
}
.lets-talk .btn-send:hover::after {
  /* Keep icon color in sync with text (dark) */
  background-image: var(--send-icon);
}
.lets-talk .btn-send::before {
  /* Remove the full-button orange sweep which tinted the label */
  display: none;
}
.lets-talk .btn-send:hover::before {
  display: none;
}
.lets-talk .btn-send > span {
  position: relative;
  z-index: 2;
}

/* Parity: no extra inner shadow on CTA */
.lets-talk .btn {
  box-shadow: none;
}

/* Button icon styling for SVG icon */
.lets-talk .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #f5f6f7;
  border: 1px solid rgba(14, 14, 16, 0.1);
  border-radius: 14px;
  position: static;
  transform: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.lets-talk .btn-icon svg {
  width: 20px;
  height: 20px;
  color: #0e0e10;
}

.lets-talk .btn:hover .btn-icon {
  transform: translateX(2px);
  background: #fafafb;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

/* No special padding when using btn-icon in parity path */

/* Responsive tune */
@media (max-width: 575px) {
  .lets-talk .btn {
    --border-radius: 12px;
    --padding-y: 10px;
    --padding-x: 14px;
    font-size: 1rem;
  }
  .lets-talk .btn.btn-arrow::after {
    --size: 38px;
    border-radius: 12px;
  }
  .lets-talk .btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .lets-talk .btn-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* Let's Talk large size tune (matches WP) */
.lets-talk .btn.btn-lg {
  --padding-y: 12px;
  --padding-x: 16px;
  font-size: 1.25rem !important;
}
.lets-talk .btn.btn-lg.btn-arrow-bordered {
  --padding-y: 8px;
}

/* Bootstrap-like utility classes for Let's Talk section */
/* Neutral light surface used across sections (matches comps) */
.bg-light {
  background: #e9eaec;
  color: var(--text, #202133); /* ensure readable text on light */
}

/* Restore white text where explicitly requested */
.bg-light .text-white {
  color: #fff !important;
}

.rounded-4 {
  border-radius: 32px !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.isolation {
  isolation: isolate;
  z-index: 1;
}

.d-flex {
  display: flex !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-md-5 {
  padding: 3rem !important;
}

@media (min-width: 768px) {
  .p-md-5 {
    padding: 3rem !important;
  }
}

.position-relative {
  position: relative !important;
}

.px-lg-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

@media (max-width: 991px) {
  .px-lg-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.text-white {
  color: #fff !important;
}

.display-1 {
  font-size: clamp(40px, 7.5vw, 112px);
  font-weight: 900;
  line-height: 0.95;
}

.h4 {
  font-size: clamp(16px, 1.6vw, 22px);
}

.font-extrabold {
  font-weight: 900 !important;
}

.opacity-01 {
  opacity: 0.1 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* Additional utility classes for News section */
@media (min-width: 992px) {
  .p-lg-5 {
    padding: 3rem !important;
  }
}

/* Edge fade masks for continuous carousels */
.container-fluid {
  position: relative;
}
/* Only apply the edge fades to specific carousel sections, not all container-fluid */
.our-work-h > .container-fluid.has-fades::before,
.our-work-h > .container-fluid.has-fades::after,
#news .container-fluid.has-fades::before,
#news .container-fluid.has-fades::after,
.publishing-section .container-fluid.has-fades::before,
.publishing-section .container-fluid.has-fades::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(to right, #e9eaec, rgba(233, 234, 236, 0));
  z-index: 2;
}
.our-work-h > .container-fluid.has-fades::after,
#news .container-fluid.has-fades::after,
.publishing-section .container-fluid.has-fades::after {
  right: 0;
  transform: scaleX(-1);
}
.our-work-h > .container-fluid.has-fades::before,
#news .container-fluid.has-fades::before,
.publishing-section .container-fluid.has-fades::before {
  left: 0;
}

/* For dark backgrounds (news section, and Our Work when styled dark) */
#news .container-fluid.has-fades::before,
#news .container-fluid.has-fades::after,
.our-work-h.background-overlay-dark > .container-fluid.has-fades::before,
.our-work-h.background-overlay-dark > .container-fluid.has-fades::after,
.publishing-section > .container-fluid.has-fades::before,
.publishing-section > .container-fluid.has-fades::after,
.publishing-section .container-fluid.has-fades::before,
.publishing-section .container-fluid.has-fades::after {
  background: linear-gradient(to right, #1c1c1e, rgba(28, 28, 30, 0));
}

.d-block {
  display: block !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.font-bold {
  font-weight: 700 !important;
}

/* Founders card polish */
.card-team {
  border-radius: 20px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.card-team:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.font-medium {
  font-weight: 500 !important;
}

.border-0 {
  border: 0 !important;
}

/* === News carousel (Flickity) — robust spacing === */
.card-carousel {
  --cell-gap: 44px;
} /* adjust to taste */

.card-carousel:not(.flickity-enabled) {
  /* Pre-init fallback so content is visible and horizontally scrollable */
  display: grid;
  grid-auto-flow: column;
  gap: var(--cell-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.card-carousel:not(.flickity-enabled) > * {
  scroll-snap-align: start;
}
/* Force a simple, reliable layout in PR section regardless of JS state */
#public-relations .card-carousel {
  /* Target 4-up density on desktop like OLD SITE */
  --cell-gap: 24px;
  display: grid;
  grid-auto-flow: column;
  /* min 260px; grow with viewport; cap ~320px */
  grid-auto-columns: clamp(260px, 19vw, 320px);
  justify-content: start;
  align-items: stretch;
  gap: var(--cell-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
#public-relations .card-work {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
  border: 1px solid rgba(17, 17, 17, 0.08);
}
#public-relations .card-banner-img {
  height: 280px; /* original-like crop */
}
#public-relations .card-detail h4 {
  font-weight: 900;
  line-height: 1.2;
}
#public-relations .card-detail p {
  color: rgba(17, 17, 17, 0.72);
  font-weight: 400;
}

/* PR Read More button — neutral outline with arrow chip */
#public-relations .btn-outline {
  border: 1.5px solid rgba(17, 17, 17, 0.16);
  color: #111;
  background: #fff;
  padding: 12px 22px;
  border-radius: 9999px; /* pill */
}
#public-relations .btn-outline:hover,
#public-relations .btn-outline:focus {
  background: #f5f6f8;
  border-color: rgba(17, 17, 17, 0.22);
  color: #111;
}
#public-relations .btn-outline.btn-arrow::after {
  content: ""; /* re-enable arrow for outline inside PR */
  --size: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  background-color: rgba(17, 17, 17, 0.05);
  background-image: var(--arrow-right-primary);
}
#public-relations .btn-outline.btn-arrow:hover::after {
  background-color: rgba(17, 17, 17, 0.1);
}
#public-relations .card-carousel > * {
  scroll-snap-align: start;
  margin-right: 0; /* spacing handled by grid gap */
  width: auto !important; /* let grid track width control it */
  max-width: none !important; /* override .col-* max-width percentages */
  min-width: 0; /* avoid overflow constraints from flex utilities */
}

/* Drift mode (JS wraps children in a flex track and animates translateX) */
#public-relations .card-carousel.mfx-drift {
  display: block; /* let the inner track layout items */
  overflow: hidden; /* hide overflow while drifting */
}
#public-relations .card-carousel .mfx-drift-track {
  display: inline-flex;
  gap: var(--cell-gap);
  will-change: transform;
}
#public-relations .card-carousel .mfx-drift-track > * {
  /* Break bootstrap grid constraints inside the flex track */
  max-width: none !important;
  flex: 0 0 clamp(260px, 19vw, 320px);
  width: clamp(260px, 19vw, 320px);
}
/* Ensure visible even if Flickity is present */
.card-carousel.flickity-enabled {
  display: block;
}

.card-carousel .flickity-slider > *,
.card-carousel > * {
  /* pre- and post-init */
  width: clamp(300px, 42vw, 560px);
  /* Do not let Bootstrap/WP grid helpers cap width (e.g., .col-xl-3 max-width:25%) */
  max-width: none;
  margin-right: var(--cell-gap);
}

@media (max-width: 640px) {
  .card-carousel {
    --cell-gap: 20px;
  }
  .card-carousel .flickity-slider > *,
  .card-carousel > * {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  #public-relations .card-carousel {
    grid-auto-columns: 100%;
  }
  #public-relations .card-carousel .mfx-drift-track > * {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* Match Elementor carousel grid: 4/3/2/1 with 24–32px gaps */
@media (min-width: 1280px) {
  .card-carousel > * {
    width: calc((100% - (var(--cell-gap) * 3)) / 4);
    margin-right: var(--cell-gap);
  }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .card-carousel > * {
    width: calc((100% - (var(--cell-gap) * 2)) / 3);
    margin-right: var(--cell-gap);
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .card-carousel {
    --cell-gap: 24px;
  }
  .card-carousel > * {
    width: calc((100% - var(--cell-gap)) / 2);
    margin-right: var(--cell-gap);
  }
}
@media (max-width: 767px) {
  .card-carousel {
    --cell-gap: 16px;
  }
  .card-carousel > * {
    width: 100%;
    margin-right: var(--cell-gap);
  }
}

/* Ensure Flickity viewport fully expands and doesn't clip */
.card-carousel.flickity-enabled,
.card-carousel.flickity-enabled .flickity-viewport {
  width: 100%;
}
.card-carousel.flickity-enabled .flickity-viewport {
  overflow: visible; /* allow card shadows outside */
}

/* Override continuous drift styles when Flickity is enabled (OLD SITE parity) */
.card-carousel.flickity-enabled[data-continuous="true"] {
  display: block !important; /* beat later flex rule */
  gap: 0 !important;
  transform: none !important;
}

/* Publications viewport guard to avoid 0-height glitches during init */
.publishing-section .flickity-viewport {
  min-height: 220px;
}
/* Guard: ensure visible height even without Flickity */
.publishing-section .publications-carousel {
  min-height: 220px;
}

/* Ensure publications cells have a concrete width for layout engines/Flickity sizing */
.publications-carousel > * {
  width: clamp(300px, 30vw, 360px);
}
.publications-carousel .card-detail {
  min-height: 160px;
}

/* Publications/press fallback when Flickity is not mounted */
.card-carousel:not(.flickity-enabled) {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.publishing-section .card-carousel:not(.flickity-enabled) {
  justify-content: center;
}
.card-carousel:not(.flickity-enabled) > * {
  flex: 0 0 clamp(300px, 30vw, 360px);
  scroll-snap-align: start;
}
/* Hide fallback scrollbars inside publications */
.publishing-section .card-carousel:not(.flickity-enabled) {
  scrollbar-width: none;
}
.publishing-section .card-carousel:not(.flickity-enabled)::-webkit-scrollbar {
  display: none;
}

/* ==== Generic gradient buttons (WP parity) ============================= */
.btn-outline-grad {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--primary);
  background: linear-gradient(
    270deg,
    rgba(var(--grad-1-rgb), 0) 0%,
    rgba(var(--grad-2-rgb), 0) 100%
  );
  border: none;
  text-decoration: none;
  transition: var(--e-a-transition-hover, all 0.3s);
}
.btn-outline-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(270deg, var(--grad-1) 0%, var(--grad-2) 100%);
}
.btn-outline-grad:hover,
.btn-outline-grad:focus {
  color: #fff;
  background: linear-gradient(270deg, var(--grad-1) 0%, var(--grad-2) 100%);
}

/* Improve contrast for outline buttons on dark bands */
.band-black .btn-outline-grad {
  color: #fff;
}

.btn-grad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + 1px) 16px; /* +1px per WP */
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(270deg, var(--grad-1) 0%, var(--grad-2) 100%);
  border: none;
  text-decoration: none;
  transition: var(--e-a-transition-hover, all 0.3s);
}
.btn-grad:hover,
.btn-grad:focus {
  filter: brightness(1.02);
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.72;
}

/* Global arrow chip (used outside Let's Talk) */
.btn.btn-arrow::after {
  content: "";

  --size: 32px;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  border-radius: 10px;
  background-color: rgba(var(--white-rgb), 0);
  border: 1px solid rgba(0, 0, 0, 0);
  background-image: var(--arrow-right-primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  transition: var(--e-a-transition-hover, all 0.3s);
}
.btn.btn-arrow:hover::after {
  transform: translateX(2px);
  background-image: var(--arrow-right-white);
}
.btn-arrow-bordered::after {
  border: 1px solid rgba(var(--white-light-rgb), 0.4);
  background-color: rgba(var(--white-light-rgb), 0.2);
  box-shadow: 12px 12px 20px rgba(45, 47, 97, 0.04);
}
.btn-outline-grad.btn-arrow::after {
  background-image: var(--arrow-right-white);
}
.btn-outline-grad.btn-arrow-bordered::after {
  border: 1px solid rgba(var(--white-light-rgb), 0);
  background-color: rgba(var(--white-light-rgb), 0);
}
.btn-outline-grad:hover.btn-arrow-bordered::after,
.btn-outline-grad:focus.btn-arrow-bordered::after {
  border: 1px solid rgba(var(--white-light-rgb), 0.4);
  background-color: rgba(var(--white-light-rgb), 0.2);
}

/* Counters */
.square-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0f12;
  border: 1px solid #2b2c38;
  border-radius: 12px;
  min-height: 96px;
}

/* wrapAround clones make last-child rules ineffective */

.flickity-enabled .flickity-viewport {
  overflow: visible;
}
.news-carousel .card-fold {
  padding: 24px 28px;
}

/* Optional: more spacing on large screens */
@media (min-width: 1200px) {
  .card-carousel {
    --cell-gap: 56px;
  }
}

/* ==== Motion accessibility ============================================= */
@media (prefers-reduced-motion: reduce) {
  body.js-ready .our-process .our-process-items::after {
    transition: none !important;
  }
  body.js-ready .our-process .icon-container,
  body.js-ready .our-process .process-item h2,
  body.js-ready .our-process .process-item .opacity-75 {
    transition: none !important;
  }
}

/* ==== Additional AOS-like effects (parity with old site) =============== */
/* Bounce in (up/down/left/right). Works with MissingFX AOS toggler */
@keyframes mfx-bounce-in-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) scale(1.01);
  }
  80% {
    transform: translate3d(0, 4px, 0) scale(0.999);
  }
  100% {
    transform: none;
  }
}
@keyframes mfx-bounce-in-down {
  0% {
    opacity: 0;
    transform: translate3d(0, -28px, 0) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 8px, 0) scale(1.01);
  }
  80% {
    transform: translate3d(0, -4px, 0) scale(0.999);
  }
  100% {
    transform: none;
  }
}
@keyframes mfx-bounce-in-left {
  0% {
    opacity: 0;
    transform: translate3d(-28px, 0, 0) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translate3d(8px, 0, 0) scale(1.01);
  }
  80% {
    transform: translate3d(-4px, 0, 0) scale(0.999);
  }
  100% {
    transform: none;
  }
}
@keyframes mfx-bounce-in-right {
  0% {
    opacity: 0;
    transform: translate3d(28px, 0, 0) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translate3d(-8px, 0, 0) scale(1.01);
  }
  80% {
    transform: translate3d(4px, 0, 0) scale(0.999);
  }
  100% {
    transform: none;
  }
}

[data-aos="bounce-up"] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.98);
}
[data-aos="bounce-up"].aos-animate {
  opacity: 1;
  animation: mfx-bounce-in-up var(--aos-dur, 0.8s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
[data-aos="bounce-down"] {
  opacity: 0;
  transform: translate3d(0, -28px, 0) scale(0.98);
}
[data-aos="bounce-down"].aos-animate {
  opacity: 1;
  animation: mfx-bounce-in-down var(--aos-dur, 0.8s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
[data-aos="bounce-left"] {
  opacity: 0;
  transform: translate3d(-28px, 0, 0) scale(0.98);
}
[data-aos="bounce-left"].aos-animate {
  opacity: 1;
  animation: mfx-bounce-in-left var(--aos-dur, 0.8s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
[data-aos="bounce-right"] {
  opacity: 0;
  transform: translate3d(28px, 0, 0) scale(0.98);
}
[data-aos="bounce-right"].aos-animate {
  opacity: 1;
  animation: mfx-bounce-in-right var(--aos-dur, 0.8s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-aos^="bounce-"] {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Parity: Elementor used generic fade/fade-in keys — map them */
[data-aos="fade"],
[data-aos="fade-in"] {
  opacity: 0;
}
[data-aos="fade"].aos-animate,
[data-aos="fade-in"].aos-animate {
  opacity: 1;
}

/* Slide-up alias used in OLD site (acts like fade-up) */
[data-aos="slide-up"] {
  transform: translate3d(0, 24px, 0);
}
[data-aos="slide-up"].aos-animate {
  transform: none;
  opacity: 1;
}

/* Allow AOS to also trigger the process timeline line fill */
body.js-ready .our-process .our-process-items[data-aos="process-line"].aos-animate::after {
  transform: scaleX(1);
}

/* ==== Page Transitions (Elementor-like) ================================ */
/* JS toggles these on navigation to fade between pages */
html {
  scroll-behavior: smooth;
}
body.page-xfade-init {
  opacity: 0;
}
body.page-xfade-in {
  opacity: 1;
  transition: opacity 0.33s ease;
}
body.page-xfade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body.page-xfade-init,
  body.page-xfade-in,
  body.page-xfade-out {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ==== Custom Flickity Navigation ======================================== */
.custom-flickity-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Our Work: use the brand's gold gradient circular buttons (not white squares) */
.custom-work-nav .flickity-prev,
.custom-work-nav .flickity-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(100deg, #cb7f2c 0%, #f4d27b 100%);
  box-shadow: 0 4px 12px rgba(203, 127, 44, 0.3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}
.custom-work-nav .flickity-prev::before,
.custom-work-nav .flickity-next::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}
.custom-work-nav .flickity-prev::before {
  border-width: 6px 8px 6px 0;
  border-color: transparent #fff transparent transparent;
}
.custom-work-nav .flickity-next::before {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
}
.custom-work-nav .flickity-prev:hover,
.custom-work-nav .flickity-next:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(203, 127, 44, 0.5);
}

/* ==== Icon utilities (OLD SVG assets) ================================== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -2px;
}
.icon-16 {
  width: 16px;
  height: 16px;
}
.icon-20 {
  width: 20px;
  height: 20px;
}
.icon-24 {
  width: 24px;
  height: 24px;
}
.icon-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' ry='2'/%3E%3Cpath d='M3 7l9 7 9-7'/%3E%3C/svg%3E");
}
.icon-mail.alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 0l8 6 8-6'/%3E%3C/svg%3E");
}
.icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-7-7-11a7 7 0 1 1 14 0c0 4-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}
.icon-send {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}
.icon-instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' ry='5'/%3E%3Cpath d='M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}
.icon-arrow-down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.flickity-prev,
.flickity-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(100deg, #cb7f2c 0%, #f4d27b 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s,
    opacity 0.2s;
  position: relative;
}

.flickity-prev::before,
.flickity-next::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}

.flickity-prev::before {
  border-width: 6px 8px 6px 0;
  border-color: transparent #fff transparent transparent;
  margin-left: -3px;
}

.flickity-next::before {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.flickity-prev:hover,
.flickity-next:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Golden glow for navigation in Our Work section */
.our-work-h .custom-flickity-nav .flickity-prev,
.our-work-h .custom-flickity-nav .flickity-next {
  box-shadow: 0 4px 12px rgba(203, 127, 44, 0.3);
}

.our-work-h .custom-flickity-nav .flickity-prev:hover,
.our-work-h .custom-flickity-nav .flickity-next:hover {
  box-shadow: 0 6px 20px rgba(203, 127, 44, 0.5);
}

/* ==== Testimonials Section ============================================== */
.award-section {
  background: #1c1c1e;
  position: relative;
}
/* ensure all inner content sits above the seam pseudo-element */
.award-section > * {
  position: relative;
  z-index: 1;
}
/* Allow the top award badge in the Testimonials section to overlap the
   section edge (the HTML adds `overflow-hidden`, which clips it). */
#testimonials.award-section {
  overflow: visible !important;
  /* Section owns spacing; keep heading safely below the divider badge */
  padding-top: calc(var(--puck, 124px) / 2 + 3.25rem);
  padding-bottom: 4rem;
}
/* Draw seam with the badge cluster so it can overlay accent arcs correctly */
#testimonials.award-section::before {
  content: none;
}

/* Testimonials layout: match OLD SITE pattern — section carries vertical padding */
#testimonials .display-3 {
  margin-top: 0; /* spacing handled by section padding below */
}

/* ==== Initiatives Parity (OLD SITE layout hooks) ======================= */
.what-we-do-list {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.what-we-do-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
}
.what-we-do-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: invert(1);
}
.what-we-do-detail h4 {
  margin: 0 0 6px;
}
.what-we-do-detail p {
  margin: 0;
}

.publishing-section .big-logo {
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* Publishing/about band — pure black like original */
/* (publishing-section uses page classes + overlay; no overrides here) */

.our-publication-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* Publications cards use dark tiles so white logos remain visible */
.publishing-section .card-work {
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.publishing-section .card-work::before {
  content: none;
}
.publishing-section .card-work:hover {
  background: #1f1f22;
}
.publishing-section .card-detail h4 {
  color: #fff;
}
.publishing-section .card-detail p {
  color: rgba(255, 255, 255, 0.78);
}
.publishing-section .btn-outline-grad {
  color: #fff !important;
}

.content-create-section {
  /* Gold sweep gradient like the original comps */
  background: linear-gradient(100deg, var(--gold-1) 0%, #dea848 48%, var(--gold-2) 100%);
}
.content-create-section .content-creation-icon {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.content-create-section .content-creation-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  /* Icons already use white strokes; do not invert */
  filter: none;
}
.content-create-section .col-lg-4 .row.align-items-center {
  align-items: center; /* keep icon vertically centered with text */
}
.content-create-section h4 {
  margin: 0 0 6px; /* reduce top margin so heading aligns with icon */
}
/* Remove accidental mid-column separators; rely on spacing only */
.content-create-section .feature-col {
  border: 0 !important;
}

/* Light sections — use gold ring icon treatment (matches screenshots) */
.bg-light .what-we-do-icon {
  background: transparent;
  border: 2px solid var(--gold-1);
}
.bg-light .what-we-do-icon img {
  filter: none;
}

.government-division-section .division-side-img-container {
  position: relative;
  min-height: 420px;
}
.government-division-section .division-side-img {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
/* Government division image uses original square edges */

/* Rotating award circle + badge (OLD parity) */
.section-blob-award {
  --puck: 124px; /* inner badge size (white disk + rotating ring) */
  --halo: 156px; /* dark accent ring size (slightly larger for visibility) */
  --arc-thickness: 14px; /* thickness of the dark arc ring */
  --seam-center: 24px; /* must match notch center in the seam SVG */
  --seam-y: -6px; /* fine-tune vertical seam position relative to badge */
  /* Shift badge downward slightly so it doesn't collide with the section above */
  --badge-offset: 24px; /* manual tweak knob for quick alignment */
  position: absolute;
  /* Dock badge on the section seam (center sits on the top edge) */
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--badge-offset, 0px)));
  width: var(--puck); /* match SVG's natural size for crisper edges */
  height: var(--puck);
  pointer-events: none;
  z-index: 2; /* ensure badge sits above seam shapes */
  isolation: isolate; /* allow ::after to sit behind inner elements */
  overflow: visible; /* allow accent ring to extend beyond container */
}
.section-blob-award img {
  position: absolute;
  inset: 0;
  margin: auto;
}
.section-blob-award .rotating {
  width: var(--puck);
  height: var(--puck);
  opacity: 0.9;
  --rotating-duration: 16s; /* smoother rotation like the original */
}
.section-blob-award .rounded-text {
  position: absolute;
  inset: 0;
  width: var(--puck);
  height: var(--puck);
  border-radius: 50%;
  background: #fff; /* white badge background */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  display: grid;
  place-items: center;
  z-index: 2;
}
.section-blob-award .center-icon {
  width: 36px;
  height: 36px;
  z-index: 3;
}
.section-blob-award .circle {
  display: none !important;
}

/* (Notch is handled by the SVG mask above; no extra dark circle needed) */

/* Award badge should use original dark graphics on white badge */
.award-section .section-blob-award img {
  filter: none;
}

/* Accent ring removed - design uses background seam/notch effect instead */
.section-blob-award::after {
  content: none;
}

/* Accent-ring styles removed - no longer needed
.section-blob-award .accent-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--halo);
  height: var(--halo);
  z-index: 1;
  overflow: visible;
}
.section-blob-award .accent-ring circle {
  fill: none;
  stroke: #0d0e21;
  stroke-width: 12;
  stroke-linecap: butt;
  stroke-dasharray: 67 149 67 149;
  stroke-dashoffset: 54;
  opacity: 0.96;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15));
}
*/

/* The previous version drew a full-width dark seam behind the award
   badge using a ::before pseudo-element. On some viewports this could
   appear as a stray horizontal bar, misaligned with section edges.
   Remove it to keep the badge cleanly floating without artifacts. */
.section-blob-award::before {
  content: none !important;
}

@media (max-width: 600px) {
  /* Slightly smaller badge on compact viewports and adjusted spacing */
  .section-blob-award {
    --puck: 104px;
  }
  #testimonials.award-section {
    padding-top: calc(var(--puck, 104px) / 2 + 2.5rem);
  }
}

/* Featured screenshots styling */
.award-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
}
@media (max-width: 768px) {
  .award-featured-grid {
    grid-template-columns: 1fr;
  }
}
.award-featured-card {
  background: #141416;
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
}
.award-screenshot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0f0f12;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
}
.award-screenshot-img {
  display: block;
  width: 100%;
  height: auto;
}

.background-overlay-dark {
  background-image: linear-gradient(180deg, rgba(14, 14, 16, 0.9) 0%, rgba(28, 28, 30, 0.95) 100%);
}

.ratio {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  width: 100%;
}

/* Responsive aspect-ratio helpers */
.ratio-16x9 {
  aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 1) {
  .ratio-16x9::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

.ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==== Our Work Section ================================================== */
/* Our Work base should not be light when paired with the dark overlay. */
.our-work-h {
  background: #0e0e10; /* dark base to avoid washed overlay */
  position: relative;
}

/* Keep a subtle brand-tinted film over a dark base (not light). */
.our-work-h.background-overlay-dark {
  background:
    linear-gradient(
      135deg,
      rgba(203, 127, 44, 0.1) 0%,
      rgba(244, 210, 123, 0.06) 30%,
      rgba(14, 14, 16, 0.88) 52%,
      rgba(28, 28, 30, 0.96) 100%
    ),
    #0e0e10; /* dark base */
  /* bg-light declares background-color: #e9eaec !important; override it here */
  background-color: #0e0e10 !important;
}

.our-work-h.background-overlay-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(
    180deg,
    rgba(203, 127, 44, 0.12) 0%,
    rgba(244, 210, 123, 0.06) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.our-work-h.background-overlay-dark > * {
  position: relative;
  z-index: 1;
}

.our-work-h.background-overlay-dark h2 {
  color: #fff;
}

.our-work-h.background-overlay-dark h2 .text-grad {
  background: linear-gradient(100deg, #f4d27b 0%, #ffe9a8 50%, #cb7f2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(203, 127, 44, 0.3));
}

.our-work-h.background-overlay-dark .signature {
  color: rgba(244, 210, 123, 0.08);
}

/* Publishing (10X Experts) – force true black background when requested */
.publishing-section.publishing-black {
  background: #000 !important;
}
.publishing-section.publishing-black > .container-fluid.has-fades::before,
.publishing-section.publishing-black > .container-fluid.has-fades::after,
.publishing-section.publishing-black .container-fluid.has-fades::before,
.publishing-section.publishing-black .container-fluid.has-fades::after {
  background: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
}

.card-work {
  background: linear-gradient(145deg, #fff 0%, rgba(255, 255, 255, 0.98) 100%);
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
  position: relative;
  border: 1px solid rgba(203, 127, 44, 0.15);
  box-shadow: 0 4px 12px rgba(203, 127, 44, 0.05);
}

.card-work::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(244, 210, 123, 0.08) 50%,
    rgba(203, 127, 44, 0.12) 100%
  );
  pointer-events: none;
}

.card-work:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 10px 20px rgba(203, 127, 44, 0.15);
  border-color: rgba(203, 127, 44, 0.4);
  background: linear-gradient(145deg, #fff 0%, rgba(254, 252, 248, 1) 100%);
}

.card-banner-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.card-detail {
  padding: 24px;
}

.card-detail h4 {
  margin-bottom: 8px;
  color: #0e0e10;
}

.btn-outline {
  border: 2px solid #cb7f2c;
  color: #cb7f2c;
  background: rgba(203, 127, 44, 0.08);
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
  font-weight: 600;
  position: relative;
}

.btn-outline:hover {
  background: linear-gradient(100deg, #cb7f2c 0%, #f4d27b 100%);
  color: #fff;
  border-color: #f4d27b;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(203, 127, 44, 0.35);
}

.btn-arrow.btn-outline::after {
  /* Remove the black arrow for outline buttons */
  content: none;
}

.btn-arrow.btn-outline:hover::after {
  transform: translateX(4px);
}

.card-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* OLD SITE: deemphasize non-adjacent cards in Our Work Flickity slider */
.our-work-h .card-carousel .flickity-slider > * {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.our-work-h .card-carousel .flickity-slider > .is-previous,
.our-work-h .card-carousel .flickity-slider > .is-selected,
.our-work-h .card-carousel .flickity-slider > .is-next {
  opacity: 1;
}

/* ==== Continuous Carousel Scrolling ==================================== */
.card-carousel[data-continuous="true"] {
  display: flex;
  gap: 24px;
  transition: none;
  will-change: transform;
  /* Reset fallback scroll styles so no scrollbars appear */
  overflow: visible !important;
  overflow: visible visible !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
  /* Hide any UA scrollbars defensively (shouldn't be needed, but some UAs
     will still render an overlay scrollbar during layout) */
  scrollbar-width: none;
}
.card-carousel[data-continuous="true"]::-webkit-scrollbar {
  display: none;
}

/* Ensure the section container never becomes a scroll container */
.our-work-h > .container-fluid,
#news > .container-fluid {
  overflow: hidden !important;
}

.card-carousel[data-continuous="true"] > * {
  flex-shrink: 0;
  min-width: clamp(240px, calc(100vw - 64px), 320px);
  width: clamp(240px, calc(100vw - 64px), 320px);
}

.card-carousel[data-continuous="true"] .card-work {
  width: clamp(240px, calc(100vw - 64px), 320px);
}

.card-carousel[data-continuous="true"] .card-fold {
  min-width: clamp(260px, calc(100vw - 64px), 380px);
  width: clamp(260px, calc(100vw - 64px), 380px);
}

/* Ensure smooth rendering */
.card-carousel[data-continuous="true"] img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Ensure Our Work track always has height, even before layout settles */
.our-work-h .card-carousel {
  min-height: 240px;
}

/* If any AOS/MissingFX init fails, don't let animations hide cards here. */
.our-work-h .card-work[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Ensure Work carousel always renders above overlays and stays visible */
.our-work-h #work-carousel,
.our-work-h #work-carousel .flickity-viewport,
.our-work-h #work-carousel .flickity-slider {
  position: relative;
  z-index: 2;
}
.our-work-h #work-carousel .flickity-slider > * {
  opacity: 1; /* prevent accidental full fade-out from effects */
}

/* Container needs overflow hidden */
.container-fluid {
  overflow-x: hidden;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .card-carousel[data-continuous="true"] .card-work {
    width: clamp(240px, calc(100vw - 64px), 300px);
    min-width: clamp(240px, calc(100vw - 64px), 300px);
  }

  .card-carousel[data-continuous="true"] .card-fold {
    min-width: clamp(260px, calc(100vw - 64px), 340px);
    width: clamp(260px, calc(100vw - 64px), 340px);
  }
}

/* === Tablet breakpoint: switch Our Process to vertical rail and single-column === */
@media (max-width: 992px) {
  /* make the Our Process timeline vertical and stack items */
  .our-process {
    --icon-size: 60px;
  }
  .our-process .our-process-items {
    position: relative;
  }
  .our-process .our-process-items::before,
  .our-process .our-process-items::after {
    content: "";
    position: absolute;
    inset: 24px auto 24px var(--process-rail-left, calc(var(--gutter, 24px) + var(--icon-size) / 2));
    width: var(--line-h, 2px);
    height: auto;
    transform-origin: top center;
    border-radius: 3px;
    display: block;
  }
  .our-process .our-process-items::before {
    background: rgba(255, 255, 255, 0.14);
  }
  .our-process .our-process-items::after {
    background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
    transform: scaleY(0);
    transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* enforce single-column layout so steps follow the vertical rail */
  .our-process .our-process-items > .row {
    display: grid !important;
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .our-process .our-process-items > .row > * {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .our-process .process-item {
    text-align: left;
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 12px;
    align-items: center;
  }
  .our-process .process-item h2,
  .our-process .process-item .opacity-75 {
    grid-column: 2;
  }
  .our-process .icon-container {
    margin: 0;
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 4px rgba(226, 166, 66, 0.1);
  }

  /* mobile/tablet animation uses vertical fill */
  body.js-ready .our-process.in-view .our-process-items::after,
  body.js-ready .our-process .our-process-items[data-aos="process-line"].aos-animate::after {
    transform: scaleY(1);
  }
}

/* === Mobile fixes for ~6.2" devices (360–412px logical width) === */
@media (max-width: 420px) {
  /* tighter gutters so cards actually fit */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .our-work-h > .container-fluid::before,
  .our-work-h > .container-fluid::after,
  #news .container-fluid::before,
  #news .container-fluid::after {
    width: 24px;
  } /* smaller edge fades */

  /* reduce vertical padding on dark bands */
  .band-black {
    padding: 48px 0;
  }

  /* make Work/News cards fit without clipping */
  .card-carousel[data-continuous="true"] .card-work {
    width: min(84vw, 300px);
    min-width: min(84vw, 300px);
  }
  .card-carousel[data-continuous="true"] .card-fold {
    width: min(88vw, 320px);
    min-width: min(88vw, 320px);
  }

  /* keep mobile menu usable on short viewports */
  .navbar .menu {
    max-height: 85vh;
    overflow-y: auto;
  }

  /* keep header visible during hero intro on phones */
  body.js-ready:not(.video_play_finished) .navbar.fixed-top {
    transform: none;
  }

  /* stack Our Process cleanly on small screens and switch to vertical rail */
  /* Use a vertical baseline + fill that aligns with the icon center */
  .our-process {
    --icon-size: 60px; /* keep variable in sync with mobile icon */
  }
  .our-process .our-process-items {
    position: relative;
    /* already has padding-block: 24px above; rely on it for top/bottom offsets */
  }
  .our-process .row {
    gap: 12px !important;
  }
  .our-process .process-item {
    text-align: left;
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 12px;
    align-items: center;
  }
  /* Ensure title and description occupy the text column, not under the icon */
  .our-process .process-item h2,
  .our-process .process-item .opacity-75 {
    grid-column: 2;
  }
  .our-process .icon-container {
    margin: 0;
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 4px rgba(226, 166, 66, 0.1);
  }

  /* animate vertical rail fill on mobile when in-view/AOS triggers */
  body.js-ready .our-process.in-view .our-process-items::after,
  body.js-ready .our-process .our-process-items[data-aos="process-line"].aos-animate::after {
    transform: scaleY(1);
  }

  /* center the bottom footer bar on mobile */
  .site-footer > .container > div:last-child {
    justify-content: center !important;
    text-align: center;
    gap: 12px;
  }
}

/* Responsive grid for Approach cards */
.approach-grid {
  flex: 2 1 520px;
  min-width: 320px;
  min-width: min(320px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}

@media (max-width: 575px) {
  .approach-grid {
    grid-template-columns: 1fr;
  }
}

/* Tighter padding for team bio cards on small screens */
@media (max-width: 575px) {
  .experts-team-details-container {
    padding: 14px 16px !important;
  }
}

/* Footer contact text: allow wrapping without forcing per-letter breaks */
.site-footer .footer-contact span {
  word-break: normal;
  overflow-wrap: break-word; /* wrap only when needed */
}

/* Fallback so CTA with .btn-icon never overlaps text if :has() is unsupported */
.lets-talk .btn.btn-send {
  position: relative;
  padding-right: 68px;
}

/* ===== Accordion parity with old theme ===== */

/* Same chevron icons the old CSS used (dark theme fill = #797a85) */
:root {
  --acc-icon-collapsed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23797a85'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Your <details> accordion wrapper (adjust the selector to yours if needed) */
details.accordion {
  border: 1px solid #2b2c38;
  border-radius: 12px;
  background: #0f0f12;
  overflow: hidden;
  margin-bottom: 1rem;
}

details.accordion + details.accordion {
  margin-top: 0.75rem;
}

details.accordion > summary {
  list-style: none; /* hide native marker */
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem; /* matches the old 0.875rem button size */
  font-size: 0.875rem;
  color: #e6e7ef;
  background: #0f0f12;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

details.accordion > summary::-webkit-details-marker {
  display: none;
}
details.accordion > summary::marker {
  content: "";
}

/* Title + chevron layout */
details.accordion > summary .title {
  font-weight: 600;
  line-height: 1.35;
  flex: 1 1 auto;
}

details.accordion > summary .chev {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-image: var(--acc-icon-collapsed);
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  margin-left: auto;
  transition: transform 0.2s ease-in-out;
}

/* Open state mirrors old Bootstrap rotate(-180deg) */
details.accordion[open] > summary {
  color: #ffffff;
  background: #171823;
  border-bottom-color: #2b2c38;
}
details.accordion[open] > summary .chev {
  transform: rotate(-180deg);
}

/* Body padding to match old accordion-body spacing */
details.accordion > .content {
  padding: 1rem 1rem;
  color: #cfd0da;
  background: #171823;
}

/* Accessible focus ring similar to old :focus styles */
details.accordion > summary:focus-visible {
  outline: 2px solid #f4d27b;
  outline-offset: 2px;
  border-radius: 8px;
}

/* If you still use Bootstrap markup anywhere, this retains the old chevron + rotation */
[data-bs-theme="dark"] .accordion-button::after {
  --bs-accordion-btn-icon: var(--acc-icon-collapsed);
}

/* removed award-spinner styles by request */

/* ==== Blog page ========================================================== */
.blog-hero {
  position: relative;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(203, 127, 44, 0.32), transparent),
    radial-gradient(120% 120% at 100% 0%, rgba(84, 115, 255, 0.2), transparent),
    linear-gradient(160deg, #0f1014 0%, #121218 55%, #0b0b0f 100%);
  padding-block: clamp(120px, 20vh, 180px) clamp(80px, 16vh, 140px);
  text-align: center;
  overflow: hidden;
}
.blog-hero .page-hero-inner {
  max-width: min(720px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 20px;
}
.hero-subhead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
}
.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-actions .btn {
  min-width: 180px;
}

.blog-page .btn-outline-grad {
  color: #fff;
}

.blog-page .btn-outline-grad:hover,
.blog-page .btn-outline-grad:focus {
  color: var(--dark);
}

.blog-page .btn-outline-grad.btn-arrow:hover::after,
.blog-page .btn-outline-grad.btn-arrow:focus::after {
  background-image: var(--arrow-right-primary);
}
@media (max-width: 767px) {
  .blog-hero {
    padding-block: 120px 80px;
  }
  .hero-actions {
    width: 100%;
  }
}

.maxw-640 {
  max-width: 640px;
  margin-inline: auto;
}
.maxw-720 {
  max-width: 720px;
  margin-inline: auto;
}
.pillars-kicker {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.75rem;
  color: rgba(244, 210, 123, 0.82);
  margin-bottom: 12px;
}

.blog-pillars {
  background: linear-gradient(180deg, rgba(15, 15, 17, 0.92) 0%, rgba(12, 12, 14, 0.96) 100%);
}
.blog-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.blog-pillars-card {
  background: rgba(18, 18, 22, 0.85);
  border: 1px solid rgba(244, 210, 123, 0.08);
  border-radius: 20px;
  padding: 24px 24px 28px;
  position: relative;
  overflow: hidden;
}
.blog-pillars-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 0% 0%, rgba(244, 210, 123, 0.08), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.blog-pillars-card:hover::after,
.blog-pillars-card:focus-within::after {
  opacity: 1;
}
.blog-pillars-card h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
}
.blog-pillars-card p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}
.blog-pillars-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: rgba(244, 244, 246, 0.75);
  font-size: 0.95rem;
}
.blog-pillars-points li::before {
  content: "•";
  color: var(--gold-2);
  margin-right: 8px;
}

.blog-featured {
  background: linear-gradient(180deg, rgba(11, 11, 13, 0.96) 0%, rgba(15, 15, 18, 0.98) 100%);
}
.blog-featured-wrapper {
  margin-top: 40px;
}
.blog-featured-card {
  background: rgba(20, 20, 26, 0.88);
  border-radius: 28px;
  border: 1px solid rgba(244, 210, 123, 0.14);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  gap: clamp(24px, 4vw, 36px);
  position: relative;
  overflow: hidden;
}
.blog-featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 120% at 10% 0%,
    color-mix(in srgb, var(--accent, #f4d27b) 28%, transparent) 0%,
    transparent 60%
  );
  opacity: 0.8;
  pointer-events: none;
}
.blog-featured-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 55%);
  pointer-events: none;
}
.blog-featured-card > * {
  position: relative;
  z-index: 1;
}
.blog-featured-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.blog-featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-radius: 999px;
  background: rgba(244, 210, 123, 0.16);
  color: var(--gold-2);
}
.blog-featured-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}
.blog-featured-grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.blog-featured-primary h3 {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
}
.blog-featured-primary p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.78);
}
.blog-featured-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.blog-featured-author {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}
.blog-featured-secondary h4 {
  margin: 0 0 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(244, 210, 123, 0.85);
}
.blog-featured-tags {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
}
.blog-featured-note {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.54);
}
@media (max-width: 991px) {
  .blog-featured-grid {
    grid-template-columns: 1fr;
  }
  .blog-featured-actions {
    justify-content: flex-start;
  }
}

.blog-loading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}
.blog-loading__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(244, 210, 123, 0.32);
  border-top-color: var(--gold-2);
  animation: blog-spin 1s linear infinite;
}
@keyframes blog-spin {
  to {
    transform: rotate(360deg);
  }
}

.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 24px 32px;
}
.blog-filter {
  border: 1px solid rgba(244, 210, 123, 0.24);
  background: rgba(20, 20, 26, 0.6);
  color: rgba(255, 255, 255, 0.8);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.blog-filter:hover,
.blog-filter:focus-visible {
  border-color: rgba(244, 210, 123, 0.6);
  color: var(--gold-2);
}
.blog-filter.is-active {
  background: linear-gradient(120deg, rgba(203, 127, 44, 0.6), rgba(244, 210, 123, 0.6));
  color: #111;
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(203, 127, 44, 0.22);
}

.blog-fallback {
  margin-top: 32px;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(244, 210, 123, 0.2);
  background: rgba(18, 18, 24, 0.7);
}

.blog-fallback[hidden] {
  display: none !important;
}

.blog-fallback__intro {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.blog-fallback__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.blog-fallback__item {
  border-radius: 20px;
  border: 1px solid rgba(244, 210, 123, 0.16);
  background: rgba(13, 13, 18, 0.75);
  padding: 22px 24px;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.blog-fallback__item:hover,
.blog-fallback__item:focus-within {
  border-color: rgba(244, 210, 123, 0.5);
  transform: translateY(-4px);
}

.blog-fallback__link {
  color: inherit;
  text-decoration: none;
  display: grid;
  gap: 8px;
}

.blog-fallback__title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

.blog-fallback__meta {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
}

.blog-fallback__excerpt {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
  .blog-fallback {
    padding: 24px;
  }

  .blog-fallback__item {
    padding: 18px 20px;
  }
}

.blog-posts-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.blog-post-card {
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background: rgba(18, 18, 24, 0.8);
  border: 1px solid rgba(244, 210, 123, 0.1);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.blog-post-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #f4d27b) 22%, transparent),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.blog-post-card > * {
  position: relative;
  z-index: 1;
}
.blog-post-card:hover,
.blog-post-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(244, 210, 123, 0.42);
  box-shadow: 0 24px 40px rgba(13, 13, 18, 0.36);
}
.blog-post-card:hover::after,
.blog-post-card:focus-within::after {
  opacity: 1;
}
.blog-post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  flex-wrap: wrap;
}
.blog-post-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(244, 210, 123, 0.18);
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
}
.blog-post-card h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}
.blog-post-card p {
  color: rgba(255, 255, 255, 0.74);
  margin: 0 0 18px;
}
.blog-post-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.blog-post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-tag {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.75rem;
  background: rgba(244, 210, 123, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.blog-post-card__cta {
  background: none;
  border: none;
  color: var(--gold-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 6px 0;
  position: relative;
}
.blog-post-card__cta::after {
  content: "→";
  transition: transform 0.3s ease;
}
.blog-post-card__cta:hover::after,
.blog-post-card__cta:focus-visible::after {
  transform: translateX(4px);
}

.blog-empty {
  margin-top: 12px;
  text-align: center;
}

.blog-workflow {
  background: linear-gradient(180deg, rgba(10, 10, 13, 0.92) 0%, rgba(8, 8, 10, 0.98) 100%);
}
.workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 48px);
  align-items: start;
}
.workflow-intro p {
  color: rgba(255, 255, 255, 0.76);
}
.workflow-steps {
  border: 1px solid rgba(244, 210, 123, 0.18);
  border-radius: 24px;
  background: rgba(18, 18, 24, 0.7);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 24px 48px rgba(8, 8, 12, 0.32);
}
.workflow-list {
  counter-reset: blog-step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
.workflow-list li {
  position: relative;
  padding-left: 48px;
  color: rgba(255, 255, 255, 0.72);
}
.workflow-list li::before {
  counter-increment: blog-step;
  content: counter(blog-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(244, 210, 123, 0.2);
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.workflow-step-title {
  display: block;
  font-weight: 600;
  color: var(--gold-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.blog-cta {
  background: linear-gradient(180deg, rgba(13, 13, 18, 0.94) 0%, rgba(13, 13, 18, 0.88) 100%);
}
.blog-cta-card {
  border: 1px solid rgba(244, 210, 123, 0.2);
  border-radius: 28px;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  background: radial-gradient(120% 120% at 0% 0%, rgba(244, 210, 123, 0.18), transparent 60%);
  box-shadow: 0 40px 60px rgba(11, 11, 13, 0.35);
}
.blog-cta-card p {
  margin: 0 auto clamp(20px, 4vw, 28px);
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
}
.blog-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.blog-error {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
}

.blog-subscribe {
  position: relative;
  background: linear-gradient(180deg, rgba(11, 11, 15, 0.98) 0%, rgba(16, 16, 22, 0.98) 100%);
}

.subscribe-header {
  text-align: center;
  display: grid;
  gap: 16px;
}

.subscribe-grid {
  display: grid;
  gap: 24px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.subscribe-card {
  position: relative;
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 28px;
  border: 1px solid rgba(244, 210, 123, 0.14);
  background: rgba(18, 18, 26, 0.88);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
  overflow: hidden;
}

.subscribe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140% 120% at 0% 0%, rgba(244, 210, 123, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.subscribe-card:hover,
.subscribe-card:focus-within {
  border-color: rgba(244, 210, 123, 0.32);
  box-shadow: 0 26px 48px rgba(10, 10, 18, 0.35);
  transform: translateY(-4px);
}

.subscribe-card:hover::before,
.subscribe-card:focus-within::before {
  opacity: 1;
}

.subscribe-card > * {
  position: relative;
  z-index: 1;
}

.subscribe-card__header h3 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
}

.subscribe-card__header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.subscribe-form {
  display: grid;
  gap: 16px;
}

.subscribe-form__field {
  display: grid;
  gap: 8px;
}

.subscribe-form__field label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 210, 123, 0.8);
}

.subscribe-form__field input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(244, 210, 123, 0.18);
  background: rgba(12, 12, 18, 0.78);
  color: #fff;
  font-size: 1rem;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.subscribe-form__field input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.subscribe-form__field input:focus {
  outline: none;
  border-color: rgba(244, 210, 123, 0.65);
  box-shadow: 0 0 0 3px rgba(244, 210, 123, 0.25);
}

.subscribe-form__feedback {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  background: rgba(244, 210, 123, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.subscribe-form__feedback[data-state="success"] {
  background: rgba(86, 208, 141, 0.18);
  color: #e3ffef;
}

.subscribe-form__feedback[data-state="error"] {
  background: rgba(220, 86, 86, 0.2);
  color: #ffd8d8;
}

.subscribe-footnote {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.subscribe-notify {
  display: grid;
  gap: 18px;
}

.subscribe-notify__status {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}

.subscribe-notify__hint {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.subscribe-notify .btn {
  justify-self: start;
}

.subscribe-notify .btn.is-active {
  color: #0e0e10;
  background: linear-gradient(270deg, var(--grad-1) 0%, var(--grad-2) 100%);
  border: none;
  box-shadow: 0 18px 36px rgba(8, 8, 12, 0.36);
}

.blog-toast {
  position: fixed;
  right: clamp(16px, 5vw, 32px);
  bottom: clamp(16px, 6vh, 40px);
  z-index: 1200;
  max-width: min(360px, 90vw);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.blog-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.blog-toast__inner {
  background: rgba(18, 18, 24, 0.94);
  border: 1px solid rgba(244, 210, 123, 0.28);
  border-radius: 20px;
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  box-shadow: 0 28px 48px rgba(4, 4, 10, 0.45);
}

.blog-toast__message {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.blog-toast__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-toast__action {
  border: none;
  background: linear-gradient(270deg, var(--grad-1) 0%, var(--grad-2) 100%);
  color: #0e0e10;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    filter 0.25s ease,
    box-shadow 0.25s ease;
}

.blog-toast__action:hover,
.blog-toast__action:focus-visible {
  outline: none;
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px rgba(244, 210, 123, 0.3);
}

.blog-toast__close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.blog-toast__close:hover,
.blog-toast__close:focus-visible {
  color: #fff;
}

@media (max-width: 991px) {
  .subscribe-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .blog-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

.blog-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 48px);
  background: rgba(6, 6, 10, 0.82);
  backdrop-filter: blur(20px);
}
.blog-modal.is-visible {
  display: flex;
}
.blog-modal__backdrop {
  position: absolute;
  inset: 0;
}
.blog-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: min(920px, 100%);
  max-height: min(88vh, 960px);
  overflow-y: auto;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(244, 210, 123, 0.22);
  background: linear-gradient(160deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 14, 0.98));
  box-shadow: 0 32px 60px rgba(4, 4, 10, 0.6);
}
.blog-modal__dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 120% at 0% 0%,
    color-mix(in srgb, var(--accent, #f4d27b) 22%, transparent),
    transparent 55%
  );
  opacity: 0.9;
  pointer-events: none;
}
.blog-modal__dialog > * {
  position: relative;
  z-index: 1;
}
.blog-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(244, 210, 123, 0.25);
  background: rgba(18, 18, 24, 0.85);
  color: var(--gold-2);
  font-size: 1.4rem;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.blog-modal__close:hover,
.blog-modal__close:focus-visible {
  transform: translateY(-2px);
  background: rgba(244, 210, 123, 0.18);
}
.blog-modal__header {
  margin-bottom: 24px;
  display: grid;
  gap: 8px;
}
.blog-modal__meta {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.blog-modal__title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.blog-modal__author {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}
.blog-modal__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.blog-modal__body h2,
.blog-modal__body h3 {
  color: #fff;
  margin-top: 1.6em;
}
.blog-modal__body p {
  margin-bottom: 1em;
}
.blog-modal__body ul {
  padding-left: 1.2em;
  margin: 1em 0;
}
.blog-modal__body li {
  margin-bottom: 0.6em;
}
body.blog-modal-open {
  overflow: hidden;
}

body.blog-article-page {
  background: #0e0e10;
  color: #f7f7f8;
}

.blog-article-hero {
  position: relative;
  padding: clamp(120px, 14vw, 220px) 0 clamp(48px, 10vw, 120px);
  background: linear-gradient(140deg, rgba(14, 14, 19, 0.95) 0%, rgba(12, 12, 16, 0.92) 55%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.blog-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, var(--blog-accent, #f4d27b) 0%, transparent 62%);
  opacity: 0.2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.blog-article-hero__inner {
  max-width: min(760px, 100%);
  position: relative;
  z-index: 1;
}

.blog-article-hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blog-accent, #f4d27b);
  margin-bottom: 1rem;
}

.blog-article-hero__title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  margin: 0 0 1.5rem;
}

.blog-article-hero__meta {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

.blog-article-hero__author {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}

.blog-article-hero__tags {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-article-hero__tags .blog-tag {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.blog-article-hero__media {
  margin-top: clamp(32px, 6vw, 56px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 1;
}

.blog-article-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-article-body {
  padding: clamp(48px, 10vw, 120px) 0;
  background: linear-gradient(180deg, rgba(12, 12, 16, 0.96) 0%, rgba(10, 10, 14, 0.98) 60%);
}

.blog-article-body__inner {
  background: rgba(18, 18, 24, 0.92);
  border-radius: 28px;
  padding: clamp(32px, 6vw, 64px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.blog-article-body__inner > :first-child {
  margin-top: 0;
}

.blog-article-body__inner > :last-child {
  margin-bottom: 0;
}

.blog-article-nav {
  padding: clamp(40px, 8vw, 96px) 0;
  background: #0e0e10;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.blog-article-nav__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.blog-article-nav__card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: clamp(20px, 4vw, 28px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.blog-article-nav__card:hover,
.blog-article-nav__card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--blog-accent, #f4d27b);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
}

.blog-article-nav__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--blog-accent, #f4d27b);
}

.blog-article-nav__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.blog-article-nav__meta {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.blog-article-nav__actions {
  margin-top: clamp(32px, 6vw, 48px);
  display: flex;
  justify-content: flex-end;
}

.blog-article-nav__actions .btn {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.blog-article-nav__actions .btn:hover,
.blog-article-nav__actions .btn:focus-visible {
  border-color: var(--blog-accent, #f4d27b);
  color: #fff;
}

@media (max-width: 991.98px) {
  .blog-article-hero {
    padding-top: clamp(96px, 18vw, 160px);
  }
}

@media (max-width: 767.98px) {
  .blog-article-hero__title {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
  }

  .blog-article-body__inner {
    padding: clamp(24px, 8vw, 48px);
    border-radius: 22px;
  }

  .blog-article-nav__actions {
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .workflow-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .blog-featured-card,
  .workflow-steps,
  .blog-cta-card,
  .blog-post-card {
    padding: 20px;
  }
  .blog-featured-pill {
    font-size: 0.7rem;
  }
  .blog-featured-meta {
    font-size: 0.82rem;
  }
  .blog-featured-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .blog-post-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-modal__dialog {
    padding: 24px;
  }
  .blog-modal__close {
    top: 12px;
    right: 12px;
  }
}