/*
Theme Name: Node8 Theme
Theme URI: https://node81solutions.com
Author: Node8
Author URI: https://node81solutions.com
Description: Custom Modern Black & White WordPress Theme built with Bootstrap 5 and Advanced Custom Fields (ACF).
Version: 1.0.7
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: node8-theme
*/

/* ==========================================================================
   CSS Root Variables (Global Monochrome / Black & White Color Tokens)
   ========================================================================== */
:root {
  /* Brand / Accent Colors */
  --primary-color: #000000;
  --primary-hover: #262626;
  --secondary-color: #1a1a1a;
  --tertiary-color: #404040;

  /* Text Colors */
  --text-color: #171717;
  --text-muted: #6b7280;
  --text-light: #ffffff;
  --text-subtle: #9ca3af;

  /* Background & Surface Colors */
  --bg-color: #ffffff;
  --bg-light: #f9fafb;
  --bg-card: #ffffff;
  --bg-dark: #000000;
  --bg-hover: #f3f4f6;

  /* Border & Divider Colors */
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  --border-dark: #111827;

  /* Typography */
  --font-family-base: 'Fraunces', Georgia, 'Times New Roman', serif;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* Transitions & Radii */
  --transition: all 0.25s ease-in-out;
  --border-radius-sm: 6px;
  --border-radius-btn: 8px;
  --border-radius: 12px;
  --border-radius-lg: 18px;
  --border-radius-pill: 9999px;
}

/* ==========================================================================
   Base & Global Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-optical-sizing: auto;
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-color);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Site-wide font-weight cap: nothing on the site should render heavier than
   400. Covers bare headings and Bootstrap's own defaults/utilities (which
   ship their own !important), not just this stylesheet's explicit rules. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
strong, b,
.fw-bold, .fw-bolder, .fw-semibold, .fw-medium, .fw-extrabold {
  font-weight: 400 !important;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
  background-color: var(--bg-color);
  border: 1px solid transparent;
  border-bottom-color: var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0.875rem 0;
  /* Same shape as --shadow-lg but fully transparent - gives the compact
     state's shadow a real value to transition FROM (browsers can't
     smoothly animate `box-shadow: none` into a real shadow, only between
     two shadows of the same structure). */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0), 0 4px 6px -4px rgba(0, 0, 0, 0);
  transition: var(--transition);
}

/* Mobile/tablet nav menu: Bootstrap's default .collapse behavior is
   position:static, which pushes the page content below it down when open.
   Switched to absolute (floating below the header bar as an overlay) with
   a higher z-index than .site-header's own 1030, so opening it never
   shifts the rest of the page and it always renders above other content.
   .site-header is already position:sticky, so it's the containing block
   this positions against - no extra wrapper needed. Scoped below
   navbar-expand-lg's 992px breakpoint; desktop's always-open horizontal
   nav is untouched. */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1rem 1.5rem;
    box-shadow: var(--shadow-md);
  }
}

.site-header .navbar {
  padding: 0;
}

.site-header .navbar-brand,
.site-header .custom-logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

.site-header .custom-logo,
.site-header .navbar-brand img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo-img,
.site-footer .custom-logo {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

.site-header .brand-badge {
  background: var(--primary-color);
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.35rem 0.85rem;
  border-radius: var(--border-radius-sm);
  display: inline-block;
  letter-spacing: -0.02em;
}

.site-header .navbar-nav {
  gap: 0.25rem;
  align-items: center;
}

/* Mobile/tablet: .navbar-nav is a column (not a row like desktop), so
   align-items:center was centering each menu item horizontally instead of
   vertically. Left-align them instead; desktop's row-layout centering is
   untouched. */
@media (max-width: 991.98px) {
  .site-header .navbar-nav {
    align-items: flex-start;
    width: 100%;
  }

  .site-header .nav-item {
    width: 100%;
  }
}

.site-header .nav-item .nav-link {
  color: var(--text-color);
  font-weight: 400;
  font-size: 0.9375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-header .nav-item .nav-link:hover,
.site-header .nav-item.active > .nav-link,
.site-header .nav-item.current-menu-item > .nav-link {
  color: var(--primary-color);
  background-color: var(--bg-hover);
}

.site-header .dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  background-color: var(--bg-color);
  min-width: 200px;
}

.site-header .dropdown-item {
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
}

.site-header .dropdown-item:hover {
  background-color: var(--bg-hover);
  color: var(--primary-color);
}

/* Header Buttons */
.btn-header-cta,
.btn-header-contact {
  background-color: var(--primary-color);
  color: var(--text-light) !important;
  font-weight: 400;
  font-size: 0.9375rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-header-cta:hover,
.btn-header-contact:hover {
  background-color: var(--bg-color);
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.navbar-toggler {
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.65rem;
  border-radius: var(--border-radius-sm);
  color: var(--primary-color);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px var(--border-dark);
}

/* Desktop-only scroll-synchronized "Dynamic Island" header. Unlike a
   threshold class-toggle, there is no .site-header--compact state here:
   initHeaderScroll() in main.js computes every property (width, top,
   padding, radius, shadow, border, logo/nav/CTA sizing) as a direct
   function of window.scrollY on every scroll frame and writes them as
   inline styles, so the header is always exactly as "morphed" as the
   current scroll position warrants - no jump, no delay, no CSS
   `transition` fighting a constantly-moving target (transition:none is
   deliberate here; JS already produces continuous motion frame by frame).

   position:fixed (not sticky) is used unconditionally on desktop so the
   width/top can be freely interpolated without the sticky/fixed switch
   CSS can't animate; left:50% + translateX(-50%) keeps it centered
   correctly at every width along the way, not just the start/end values.
   Removing the header from flow needs a spacer to avoid a layout jump -
   see .site-header-spacer below, sized by JS to the header's natural
   height and desktop-only itself.

   Scoped to the same 992px breakpoint navbar-expand-lg already uses -
   inert on tablet/mobile, which keep the original position:sticky header
   untouched (initHeaderScroll resets any inline styles there). */
@media (min-width: 992px) {
  .site-header {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    transition: none;
  }
}

.site-header-spacer {
  display: none;
}

@media (min-width: 992px) {
  .site-header-spacer {
    display: block;
  }
}

/* ==========================================================================
   Section 1: Hero Banner
   ========================================================================== */
.section-hero {
  background-color: var(--bg-light);
  position: relative;
  overflow: hidden;
  padding-top: 2.25rem !important; /* py-5's 3rem, reduced 25% */
}

.section-hero .container {
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .section-hero .container {
    padding-top: 1.125rem !important; /* py-lg-4's 1.5rem, reduced 25% */
  }
}

/* ---- Hero wave background ----
   Two layers inside one FULL-HEIGHT wrapper (inset:0), so no plain
   background colour is ever exposed above/around the wave:
   1) .hero-wave-mesh - the provided node81-hero-wave-background.svg
      (unmodified asset file, only a render-time preserveAspectRatio
      attribute is added in PHP so it cover-fills instead of leaving a gap),
      as a static backdrop. Its wireframe group keeps a small ambient sway.
   2) .hero-wave-tiles - a genuinely seamless tiling wave. Each of its 3
      layers places 3 copies of the SAME repeat-unit path exactly one period
      apart (see the PHP comment above the markup for the coverage proof),
      then slides that whole set of copies by exactly one period on a plain
      infinite loop. Because the tiles are pre-placed edge-to-edge, the
      visible frame is always fully covered - there is no point in the
      animation where an edge/seam/gap can show, which is what the previous
      single-tile version got wrong. Layers run at different durations/
      delays/vertical sway so the surface reads as one evolving flow rather
      than a flat slide.
   Falls back to fully static under prefers-reduced-motion. */
.hero-wave-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Scales every wave layer (mesh, contour, wireframe, all 3 tile layers)
     down to ~40% visual intensity uniformly. Safe here because this wrapper
     contains only decorative wave artwork - no hero text/buttons/orbit
     graphic live inside it (those are siblings, rendered after this in
     .container). Applying it here means we don't have to individually
     recompute every fill/stroke alpha across the mesh SVG and tile layers. */
  opacity: 0.4;
}

/* Mobile: the wave normally stretches to match the full hero section
   height (inset:0) - once the orbit graphic is hidden below, that height
   shrinks a lot on its own, but the wave itself should also read as a
   shorter band rather than growing to fill whatever's left. Anchoring it
   to the bottom with a capped height keeps it a thin decorative strip
   instead of a tall backdrop; the mesh SVG's own preserveAspectRatio
   ("xMidYMax slice", set in PHP) already crops from the top and anchors
   to the bottom, so shrinking this box just shows less of the same
   artwork rather than distorting it. */
@media (max-width: 767.98px) {
  .hero-wave-bg {
    inset: auto 0 0 0;
    height: 300px;
  }

  .section-hero {
    padding-bottom: 0 !important;
  }
}

.hero-wave-mesh {
  position: absolute;
  inset: 0;
}

.hero-wave-mesh svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-wave-mesh svg > g {
  animation: hero-wave-wireframe 17s ease-in-out infinite alternate;
  transform-origin: center;
}

.hero-wave-tiles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  overflow: hidden;
}

.hero-wave-tiles svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-wave-layer-1 {
  fill: rgba(156, 163, 175, 0.09);
  animation: hero-wave-sway-1 16s ease-in-out infinite alternate;
}

.hero-wave-layer-2 {
  fill: rgba(156, 163, 175, 0.15);
  animation: hero-wave-sway-2 12.5s ease-in-out infinite alternate;
}

.hero-wave-layer-3 {
  fill: rgba(156, 163, 175, 0.21);
  animation: hero-wave-sway-3 9.5s ease-in-out infinite alternate;
}

.hero-wave-layer-1 use,
.hero-wave-layer-2 use,
.hero-wave-layer-3 use {
  animation-name: hero-wave-slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero-wave-layer-1 use {
  animation-duration: 14s;
  animation-delay: -1s;
}

.hero-wave-layer-2 use {
  animation-duration: 11s;
  animation-delay: -6s;
}

.hero-wave-layer-3 use {
  animation-duration: 9s;
  animation-delay: -3s;
}

@keyframes hero-wave-wireframe {
  to {
    transform: translateY(-4px);
  }
}

@keyframes hero-wave-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-300px, 0, 0);
  }
}

@keyframes hero-wave-sway-1 {
  to {
    transform: translateY(-2.5px);
  }
}

@keyframes hero-wave-sway-2 {
  to {
    transform: translateY(2px);
  }
}

@keyframes hero-wave-sway-3 {
  to {
    transform: translateY(-1.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave-mesh svg > g,
  .hero-wave-layer-1,
  .hero-wave-layer-2,
  .hero-wave-layer-3,
  .hero-wave-layer-1 use,
  .hero-wave-layer-2 use,
  .hero-wave-layer-3 use {
    animation: none !important;
  }
}

.hero-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-color);
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.9rem;
  border-radius: var(--border-radius-pill);
}

.hero-content h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--primary-color);
  margin-bottom: 1.25rem;
}

.hero-content p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 540px;
  margin-bottom: 0;
}

.btn-hero-primary {
  background-color: var(--primary-color);
  color: var(--text-light) !important;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.7rem 1.45rem;
  border-radius: var(--border-radius-btn);
  border: 1px solid var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn-hero-primary:hover {
  background-color: var(--bg-color);
  color: var(--primary-color) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-hero-secondary {
  background-color: var(--bg-color);
  color: var(--text-color) !important;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.7rem 1.45rem;
  border-radius: var(--border-radius-btn);
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-hero-secondary:hover {
  background-color: var(--bg-light);
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
  transform: translateY(-2px);
}

/* Hero Animated Integration Orbit (NODE81 hub + six integrations) */
.hero-visual-wrapper {
  padding: 20px 0;
}

/* Hidden on mobile - the orbit graphic competes with the hero copy/CTAs for
   an already-tight viewport; the text column stays the sole focus there. */
@media (max-width: 767.98px) {
  .hero-visual-wrapper {
    display: none;
  }
}

.ecosystem-container,
.hero-orbit {
  width: calc(460px * var(--orbit-scale, 1));
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  position: relative;
  --orbit-scale: 1;
}

/* Center Hub: small circle only - no large outer/inner orbit ring by
   design. The circle and the NODE81 logo inside it reveal at two separate
   points in the sequence (see #orbitHubCircle/#orbitHubLogo below and
   initHeroOrbit in main.js), so they're animated independently rather than
   as one .orbit-hub unit. */
.orbit-hub {
  z-index: 10;
}

/* SVG layer the dotted connection lines are drawn into by JS - spans the
   whole orbit, sits above the node circles but below the hub so the lines
   read as running into/under the center circle. */
.orbit-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

/* Thin solid connector (previously dotted). Hidden by default via opacity -
   0 always means truly invisible from first paint, regardless of JS timing,
   which is what keeps this flash-free on load. */
.orbit-connection-line {
  stroke: #6B7280;
  stroke-width: 1.2;
  fill: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.orbit-connection-line.connection-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-connection-line {
    transition: none;
  }
}

/* Center circle: hidden until step 3 (after all 6 logos finish), then
   fades/scales in on its own - independent of the NODE81 logo inside it,
   which reveals separately in step 5. */
.orbit-hub-circle {
  width: calc(130px * var(--orbit-scale, 1));
  height: calc(130px * var(--orbit-scale, 1));
  border-radius: 50%;
  background: var(--bg-color);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14px * var(--orbit-scale, 1));
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.orbit-hub-circle.circle-visible {
  opacity: 1;
  transform: scale(1);
}

/* NODE81 logo inside the circle: hidden until step 5 (after the dotted
   lines finish drawing). */
#orbitHubLogo {
  display: block;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

#orbitHubLogo.logo-visible {
  opacity: 1;
  transform: scale(1);
}

/* Skips straight to the finished state for visitors who never run the JS
   entrance sequence (script blocked/failed) or explicitly opted out via
   prefers-reduced-motion (see the reduced-motion block further down). */
.hero-orbit:not(.orbit-ready) .orbit-hub-circle,
.hero-orbit:not(.orbit-ready) #orbitHubLogo {
  opacity: 1;
  transform: scale(1);
}

.orbit-hub-logo {
  width: 100%;
  max-width: calc(88px * var(--orbit-scale, 1));
  height: auto;
  object-fit: contain;
  display: block;
}

/* Integration node: outer wrapper holds the static final orbital position */
.orbit-item {
  position: absolute;
  top: calc(50% + (var(--dy) * var(--orbit-scale, 1)));
  left: calc(50% + (var(--dx) * var(--orbit-scale, 1)));
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* Inner wrapper carries the entrance animation (transform + opacity only) */
.orbit-item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--orbit-scale, 1));
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.orbit-node-circle {
  width: calc(60px * var(--orbit-scale, 1));
  height: calc(60px * var(--orbit-scale, 1));
  border-radius: 50%;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.orbit-item-more .orbit-node-circle {
  border-style: dashed;
}

.orbit-node-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(34px * var(--orbit-scale, 1));
  height: calc(34px * var(--orbit-scale, 1));
  color: var(--text-color);
}

.orbit-node-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

.orbit-node-label {
  font-size: calc(0.75rem * var(--orbit-scale, 1));
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

.orbit-item-inner:hover .orbit-node-circle {
  transform: scale(1.1);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.orbit-item-inner:hover .orbit-node-glyph {
  color: var(--primary-color);
}

/* Step 1/2 entrance: each logo's circle grows from 0 to full size while
   fading in (width/height/opacity, exactly as specified - no translate).
   Each item's own --delay (set inline per item in the PHP loop) is staged
   so item N's delay equals the sum of every earlier item's 0.5s duration,
   making the six reveals strictly sequential with zero overlap - the next
   one's animation-delay only elapses once the previous one's 0.5s duration
   is already done. initHeroOrbit (main.js) mirrors these same numbers
   (6 x 0.5s = 3s total) to know exactly when to start step 3. */
.hero-orbit.orbit-ready .orbit-node-circle {
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.hero-orbit.orbit-ready .orbit-node-label {
  opacity: 0;
}

.hero-orbit.orbit-ready.orbit-visible .orbit-node-circle {
  animation: orbit-node-in 0.5s ease-out forwards;
  animation-delay: var(--delay);
}

.hero-orbit.orbit-ready.orbit-visible .orbit-node-label {
  animation: orbit-label-in 0.5s ease-out forwards;
  animation-delay: var(--delay);
}

@keyframes orbit-node-in {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }
  to {
    width: calc(60px * var(--orbit-scale, 1));
    height: calc(60px * var(--orbit-scale, 1));
    opacity: 1;
  }
}

@keyframes orbit-label-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit.orbit-ready .orbit-node-circle,
  .hero-orbit.orbit-ready .orbit-node-label {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero-orbit.orbit-ready .orbit-node-circle {
    width: calc(60px * var(--orbit-scale, 1)) !important;
    height: calc(60px * var(--orbit-scale, 1)) !important;
  }
  /* No dotted-line-draw sequence ever runs for reduced-motion
     (initHeroOrbit returns early) - show the circle, lines (drawn
     instantly by JS with dashoffset 0) and NODE81 logo immediately
     instead of waiting on a sequence that will never run. */
  .orbit-hub-circle,
  #orbitHubLogo {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }
}

@media (max-width: 991.98px) {
  .ecosystem-container,
  .hero-orbit {
    --orbit-scale: 0.82;
  }
}

@media (max-width: 575.98px) {
  .ecosystem-container,
  .hero-orbit {
    --orbit-scale: 0.62;
  }
}

/* Floating Chat Button - Pill Shaped */
.hero-chat-btn {
  bottom: 10px;
  right: 15px;
  background: var(--primary-color);
  color: var(--text-light) !important;
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--border-radius-pill);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  transition: var(--transition);
}

.hero-chat-btn:hover {
  background: var(--secondary-color);
  transform: translateY(-2px);
}

/* ==========================================================================
   Section 2: Trusted By / Partners
   ========================================================================== */
.section-trusted {
  background-color: var(--bg-color);
}

/* Mobile: halve the horizontal gap between the two card columns (the row's
   g-4 gutter is 1.5rem/24px - Bootstrap's discrete gx-* scale has no exact
   half-step, so the gutter's own CSS variable is overridden directly).
   Vertical spacing and the desktop 4-column layout are untouched. */
@media (max-width: 767.98px) {
  .section-trusted .row {
    --bs-gutter-x: 0.75rem;
  }
}

.trusted-top-content p:first-child,
.trusted-top-content small {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.trusted-top-content h2,
.trusted-top-content h3 {
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.partner-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.partner-icon-wrap {
  width: 62px;
  height: 62px;
  margin: 0 auto;
}

/* Scoped to the trusted-partner cards specifically - .partner-logo-img is
   also reused by the marquee section below, which must stay untouched.
   A fixed width+height (not just max-height) makes every badge render in
   an identical box regardless of its own SVG's natural aspect ratio - that
   mismatch (each badge's drawn content fills a different proportion of its
   viewBox) was why the icons looked uneven despite sharing one max-height. */
.partner-icon-wrap .partner-logo-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  margin: 0;
}

/* Zoho, Odoo and n8n's official marks are wide/flat shapes - contain-fit
   already uses their full width, but leaves a lot of unused vertical space
   in the box, so they read visually smaller than Microsoft 365/WhatsApp's
   near-square marks. Scaling them up (the wrap has no overflow:hidden, and
   there's ample card padding around it) brings their visual weight in line
   with the other two without distorting their aspect ratio. */
.partner-icon-wrap .partner-logo-img[src*="zoho"],
.partner-icon-wrap .partner-logo-img[src*="odoo"],
.partner-icon-wrap .partner-logo-img[src*="n8n"] {
  transform: scale(1.5);
}

.partner-content h4 {
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.partner-content p {
  font-size: 0.85rem;
  color: var(--text-color);
  margin-bottom: 0.35rem;
}

.partner-content small {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* "Trusted By" rotating certification badges: plain image boxes (no icon +
   text) - see initTrustedBadgesRotator in main.js, which swaps the <img>
   src every 2s to a fresh random pick from the full backend pool. Fixed
   height so the row never jumps as different badge images (each a
   different natural aspect ratio) cycle through. */
.partner-card-badge {
  height: 150px;
  padding: 0.75rem !important;
}

.trusted-badge-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: grayscale(100%);
  transition: opacity 0.5s ease-in-out;
}

.trusted-badge-img.is-fading {
  opacity: 0;
}

.trusted-badge-img:not([src]),
.trusted-badge-img[src=""] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .trusted-badge-img {
    transition: none;
  }
}

/* ==========================================================================
   Section 3: Two Column Stats Counter
   ========================================================================== */
.section-stats {
  background-color: var(--bg-light);
}

.stats-top-content {
  max-width: 640px;
}

.stats-top-content h2,
.stats-top-content h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--primary-color);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.stats-top-content p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Single unified horizontal stats container (replaces individual stat cards) */
.stats-bar {
  background-color: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.stats-bar-item {
  padding: 2rem 1.5rem;
  border-left: 1px solid var(--border-color);
}

.stats-bar-item:first-child {
  border-left: none;
}

.stats-bar-inner {
  text-align: center;
}

.stat-number {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--primary-color);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* 5 equal columns from tablet up (was a fixed 4-column col-lg-3 layout).
   Scoped to min-width so it never touches the mobile row-cols-2 (2-per-row)
   layout below that - the two must never both apply to the same item. */
@media (min-width: 768px) {
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
}

@media (max-width: 767.98px) {
  .stats-bar-item {
    border-left: none;
    padding: 1.5rem 1rem;
  }

  .stats-bar-item:nth-child(odd) {
    border-right: 1px solid var(--border-color);
  }

  .stats-bar-item:nth-child(3),
  .stats-bar-item:nth-child(4),
  .stats-bar-item:nth-child(5) {
    border-top: 1px solid var(--border-color);
  }
}

/* ==========================================================================
   Section 4: Process & Approach (Our 6 Step Approach)
   ========================================================================== */
.section-approach {
  background-color: var(--bg-color);
}

.approach-top-content h3,
.approach-top-content h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 640px;
}

/* ---- Pinned horizontal-scroll mechanics ----
   Base state below is the safe fallback: a plain, natively horizontally
   scrollable row (mobile / reduced-motion / no-JS). At >=768px, the pin
   outer's height and the sticky box's 100vh sizing are set directly by
   media query (see the calc() rules further down) - NOT gated behind a
   JS-added class - so the section is already the correct final size on
   first paint. JS (initApproachScroll in main.js) only ever toggles
   `position: static -> sticky` on top of that already-correct box, and
   nudges --card-w/height by a sub-pixel amount for precision, so nothing
   visibly resizes or jumps once it runs (avoids layout shift). */
.approach-pin-outer {
  height: auto;
}

.approach-pin-sticky {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: 2.5rem 0;
}

.approach-pin-active .approach-pin-sticky {
  position: sticky;
  top: 10vh;
}

.approach-pin-sticky .approach-top-content {
  flex: 0 0 auto;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .approach-pin-sticky {
    height: 75vh;
    padding: 0;
  }

  .approach-pin-sticky .approach-top-content {
    margin-bottom: 3rem;
  }
}

.approach-track-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.approach-track-viewport::-webkit-scrollbar {
  display: none;
}

.approach-pin-active .approach-track-viewport {
  overflow: hidden;
}

.approach-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: var(--approach-gap, 32px);
  padding: 0 var(--approach-pad, 64px);
  /* ~4 cards visible: solved from (100vw - 2*pad - 3*gap) / 4 */
  --card-w: clamp(240px, calc(25vw - 56px), 320px);
}

.approach-pin-active .approach-track {
  transform: translate3d(var(--approach-track-x, 0px), 0, 0);
  will-change: transform;
}

.approach-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  /* Fixed height (not min-height) - the illustration/description hover-swap
     must never change the card's own box size (that was the fixed-height
     text on step 6 pushing the card taller on hover than its neighbours,
     shifting the whole row). */
  height: clamp(360px, 52vh, 460px);
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: start;
}

.approach-card-title {
  font-size: 1.575rem;
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  margin: 0 0 1.5rem 0;
}

.approach-card-illustration {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  overflow: hidden;
}

.approach-illustration {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Hover state (desktop/pointer devices only - see the "hover: hover" media
   query below): the illustration hides and this description takes over the
   exact same flex slot, so the card's height never jumps. Hidden by default
   via display:none, not just opacity, so it never intercepts clicks/taps
   underneath the illustration when not hovered. */
.approach-card-description {
  display: none;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  text-align: center;
  overflow: hidden;
}

.approach-card-description p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

@media (hover: hover) {
  .approach-card:hover .approach-card-illustration {
    display: none;
  }

  .approach-card:hover .approach-card-description {
    display: flex;
  }
}

/* Reserve the pinned scroll height by media query (viewport-width-only
   formula), not by JS after load - keeps first paint already the right
   size so nothing visibly jumps once JS refines it with real measurements.
   height = 100vh + pinDistance * SCROLL_PACE(1.6), where pinDistance
   solves to (6 - visibleCards) * (cardWidth + gap) for this card count. */
@media (min-width: 1200px) {
  .approach-pin-outer {
    height: calc(75vh + 80vw - 76.8px);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .approach-pin-outer {
    height: calc(75vh + 224vw - 125.44px);
  }

  .approach-track {
    /* ~2.5 cards visible: solved from (100vw - 2*pad - 1.5*gap) / 2.5 */
    --card-w: clamp(260px, calc(40vw - 46.4px), 380px);
    --approach-gap: 24px;
    --approach-pad: 40px;
  }
}

/* Tablet: same treatment as mobile below - a plain 3-column grid instead of
   the pinned horizontal-scroll carousel, so there's no oversized vertical
   scroll distance reserved for the pin/reveal effect and nothing to drag.
   All 6 steps sit in 2 rows of 3, fully visible at once. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .approach-pin-outer {
    height: auto !important;
  }

  .approach-pin-sticky {
    position: static !important;
    height: auto !important;
  }

  .approach-track-viewport {
    overflow: visible;
  }

  .approach-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 20px;
    padding: 0 40px;
    transform: none !important;
  }

  .approach-card {
    width: auto;
    height: clamp(240px, 32vw, 320px);
  }
}

@media (max-width: 767.98px) {
  .approach-card {
    height: clamp(220px, 46vh, 280px);
    padding: 1.25rem 1rem;
  }

  .approach-illustration {
    max-width: 100px;
  }

  .approach-card-title {
    font-size: 1.05rem;
  }

  .approach-pin-sticky .approach-top-content {
    margin-bottom: 1.5rem;
  }

  /* Hard safety net: never reserve pinned scroll height on small screens,
     regardless of JS timing - avoids broken sticky/scroll-trap behaviour. */
  .approach-pin-outer {
    height: auto !important;
  }

  .approach-pin-sticky {
    position: static !important;
    height: auto !important;
  }

  /* Plain 2-column grid instead of the desktop/tablet horizontal-scroll
     carousel - no overflow-x, no scroll-snap, nothing to drag/scroll. All
     6 steps are simply visible at once, wrapping into 3 rows of 2. */
  .approach-track-viewport {
    overflow: visible;
  }

  .approach-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 16px;
    padding: 0 20px;
    transform: none !important;
  }

  .approach-card {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approach-pin-outer {
    height: auto !important;
  }

  .approach-pin-sticky {
    position: static !important;
    height: auto !important;
  }

  .approach-track {
    transform: none !important;
  }
}

/* ==========================================================================
   Section 5: Industries We Serve
   ========================================================================== */
.section-industries {
  background-color: var(--bg-light);
}

.industries-top-content p:first-child {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.industries-top-content h2,
.industries-top-content h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.industries-top-content p:last-child {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .row-cols-lg-7 > * {
    flex: 0 0 auto;
    width: 14.2857%;
  }

  .row-cols-lg-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
  }
}

.industry-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.industry-icon-wrap {
  width: 36px;
  height: 36px;
}

.industry-default-icon {
  font-size: 1.25rem;
  color: var(--text-color);
}

.industry-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.industry-name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-color);
  line-height: 1.35;
}

/* ==========================================================================
   Section 6: Partners Marquee (Continuous Infinite Scrolling)
   ========================================================================== */
.section-partners {
  background-color: var(--bg-light);
}

.marquee-track-wrapper {
  overflow: hidden;
  width: 100%;
  display: flex;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

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

.marquee-content {
  display: flex;
  align-items: center;
}

/* Sized as a fraction of the viewport (not a fixed px width) so exactly
   4.5 rectangular logo slots are visible at once at any screen width - the
   half-visible slot at the edge is the standard "there's more, keep
   looking" affordance for an auto-scrolling strip. */
.partner-logo-item {
  flex: 0 0 calc(100vw / 4.5);
  max-width: calc(100vw / 4.5);
  height: 100px;
  padding: 0 0.75rem;
  box-sizing: border-box;
}

/* Tablet: exactly 3 logo slots visible at once. */
@media (max-width: 991.98px) {
  .partner-logo-item {
    flex: 0 0 calc(100vw / 3);
    max-width: calc(100vw / 3);
  }
}

/* Mobile: exactly 1.5 logo slots visible at once. */
@media (max-width: 575.98px) {
  .partner-logo-item {
    flex: 0 0 calc(100vw / 1.5);
    max-width: calc(100vw / 1.5);
  }
}

.partner-logo-card {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  transition: var(--transition);
}

.partner-logo-item:hover .partner-logo-card {
  border-color: var(--primary-color);
}

.partner-logo-img {
  max-width: 70%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: var(--transition);
}

.partner-logo-item:hover .partner-logo-img {
  filter: grayscale(100%) opacity(0.7);
}

.partner-logo-placeholder-icon {
  width: 34px;
  height: 34px;
  color: var(--text-subtle);
  transition: var(--transition);
}

.partner-logo-item:hover .partner-logo-placeholder-icon {
  color: var(--text-muted);
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}

/* ==========================================================================
   Section 7: Quote Banner Card (Monochrome Styling)
   ========================================================================== */
.section-quote {
  background-color: var(--bg-color);
}

.quote-card {
  background-color: var(--primary-color);
  color: var(--text-light);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-dark);
}

.quote-icon-wrap {
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--text-light);
}

@media (max-width: 767.98px) {
  .quote-card .col-auto {
    display: none;
  }
}

.quote-text-wrap p {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 400;
  line-height: 1.65;
  color: #f3f4f6;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Section 8: Why Choose Us Section (Full Banner Background)
   ========================================================================== */
.section-why-choose {
  background-color: var(--bg-color);
  padding: 4.5rem 0;
}

/* Grey background on mobile only - now that the map/overlay is removed,
   this section would otherwise sit flush white against the sections
   around it there. */
@media (max-width: 767.98px) {
  .section-why-choose {
    background-color: var(--bg-light);
  }
}

/* Background map image at full strength - the fade is done by the
   translucent overlay sitting directly above it, not by this layer's own
   opacity, so the image's own rendering stays crisp. */
.why-choose-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Translucent wash between the map image and the pins/text above it - fades
   the map's visual intensity without reducing the image's own opacity. */
.why-choose-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* Bootstrap's z-1 utility on the content .container (z-index:1) would now
   tie with the overlay and sit below the pins (z-index:2) - raise it above
   both so the heading/cards are never visually obscured. */
.section-why-choose > .container {
  z-index: 3 !important;
}

/* Map pin markers: real SVG, positioned by JS (initWhyChoosePins in main.js) to
   track the section's "background-size: cover; background-position: center
   right" so they line up with the map at any viewport width. */
.why-choose-map-pins {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Background map/overlay/pins hidden on mobile only - desktop/tablet keep
   the full map background. */
@media (max-width: 767.98px) {
  .why-choose-bg-layer,
  .why-choose-bg-overlay,
  .why-choose-map-pins {
    display: none;
  }
}

.map-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 32px;
  color: #000000;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(0);
}

.map-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pins grow from 0 to full size, one after another, once the section
   scrolls into view (triggered by initWhyChoosePins in main.js, same
   IntersectionObserver pattern as the hero orbit reveal). Growth is
   anchored to the pin's own tip (transform-origin: 50% 100%, matching the
   translate(-50%,-100%) used for map positioning) so it grows upward from
   its exact map location instead of drifting from the center. */
.why-choose-map-pins.pins-visible .map-pin {
  animation: map-pin-pop-in 1s ease-out forwards;
  animation-delay: calc(var(--pin-i, 0) * 0.15s);
}

@keyframes map-pin-pop-in {
  from {
    transform: translate(-50%, -100%) scale(0);
  }
  to {
    transform: translate(-50%, -100%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin {
    transform: translate(-50%, -100%) scale(1);
  }

  .why-choose-map-pins.pins-visible .map-pin {
    animation: none;
  }
}

.why-choose-badge {
  color: var(--secondary-color);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

.why-choose-left-content h2,
.why-choose-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  color: var(--primary-color);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.why-choose-left-content p.text-muted,
.why-choose-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.why-choose-pill {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 16px;
  min-height: 64px;
  padding: 0.85rem 1.35rem;
  gap: 0.85rem;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.why-choose-pill.pill-highlight {
  background-color: #ffffff;
  border-color: var(--border-color);
}

.why-choose-pill .pill-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-choose-pill .pill-img-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.why-choose-pill .pill-text {
  font-size: 0.95rem;
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .why-choose-pill {
    padding: 0.75rem 1rem;
    gap: 0.65rem;
  }

  .why-choose-pill .pill-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .why-choose-pill {
    padding: 0.75rem 1.15rem;
    gap: 0.75rem;
  }

  .why-choose-pill .pill-text {
    font-size: 0.9rem;
  }
}

/* 2 columns on mobile too (was a single stacked column below 576px) - the
   pills need tighter padding/gap/icon size at that width so "24/7 Delivery"
   style copy still fits comfortably beside its icon. */
@media (max-width: 575.98px) {
  .why-choose-badges-wrap .row {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
  }

  .why-choose-pill {
    padding: 0.6rem 0.5rem !important;
    gap: 0.35rem !important;
    min-height: 50px;
    border-radius: 12px;
  }

  .why-choose-pill .pill-icon {
    width: 20px;
    height: 20px;
  }

  .why-choose-pill .pill-img-icon {
    width: 17px;
    height: 17px;
  }

  .why-choose-pill .pill-text {
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Section 9: CTA Section (Call to Action Card)
   ========================================================================== */
.section-home-cta {
  background-color: var(--bg-color);
}

/* Scoped to the Home page only: .section-home-cta is reused (unstyled here)
   by the About and Services page CTA sections, which must stay untouched. */
body.home .section-home-cta {
  background-color: var(--bg-color);
}

.home-cta-card {
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  max-width: 960px;
}

.home-cta-card h3,
.home-cta-card h2,
.cta-card-heading {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.02em;
}

.home-cta-card p,
.cta-card-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
}

.btn-cta-primary {
  background-color: var(--primary-color);
  color: var(--text-light);
  border: 1px solid var(--primary-color);
  font-weight: 400;
  font-size: 0.95rem;
  border-radius: var(--border-radius-btn);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
}

.btn-cta-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-cta-secondary {
  background-color: var(--bg-light);
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  font-weight: 400;
  font-size: 0.95rem;
  border-radius: var(--border-radius-btn);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
}

.btn-cta-secondary:hover {
  background-color: var(--bg-color);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-color);
  padding-top: 4rem;
  padding-bottom: 2rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.site-footer .footer-brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer .footer-brand-badge {
  background: var(--primary-color);
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.35rem 0.85rem;
  border-radius: var(--border-radius-sm);
  display: inline-block;
}

.site-footer .footer-description {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

@media (max-width: 767.98px) {
  .site-footer .footer-description {
    max-width: none;
  }
}

/* Social Media Icons */
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.footer-social-links .social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  transition: var(--transition);
  font-size: 0.95rem;
}

.footer-social-links .social-icon-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
  transform: translateY(-2px);
}

/* Footer Columns & Menus */
.site-footer .footer-heading {
  color: var(--primary-color);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  text-transform: none;
}

.site-footer .footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer .footer-nav-list li a {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  transition: var(--transition);
}

.site-footer .footer-nav-list li a:hover {
  color: var(--primary-color);
  padding-left: 2px;
}

/* Footer Contact Info */
.site-footer .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.site-footer .footer-contact-item a {
  color: var(--text-muted);
}

.site-footer .footer-contact-item a:hover {
  color: var(--primary-color);
}

/* Footer Bottom Bar */
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Main Content Area Container */
.site-main {
  min-height: calc(100vh - 450px);
}

/* ==========================================================================
   About Page Styles (Strict Monochrome Design Tokens)
   ========================================================================== */

.about-page-main {
  background-color: var(--bg-color);
}

/* Common Section Top Content */
.about-section-top-content {
  text-align: center;
}

.about-section-top-content .section-tag {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text-color);
  display: inline-block;
  background: var(--bg-light);
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.about-section-top-content .section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--primary-color);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.about-section-top-content .section-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* 1. About Hero Section */
.about-hero-section {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

/* Subtle decorative wave/wireframe texture, scoped to this one banner only -
   kept as its own layer (not the section's own background-image) so its low
   opacity never touches the heading/copy/image, which sit above it via
   .container's position-relative z-1. Reuses the same wave-background
   illustration as the Home hero (flowing ribbons + perspective grid mesh)
   for visual consistency, cover-filled and bottom-anchored since the
   artwork's own detail is concentrated in its lower portion. */
.about-hero-bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/hero/node81-hero-wave-background.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  opacity: 0.5;
  pointer-events: none;
}

.about-badge {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text-color);
  display: inline-block;
  background: var(--bg-light);
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.about-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--primary-color);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.about-hero-desc {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.about-image-card {
  border: 1px solid var(--border-color);
  background: var(--bg-light);
}

.about-hero-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* 2. Team Section */
.about-team-section {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.team-card {
  border: 1px solid var(--border-color);
}

.team-img-wrap {
  aspect-ratio: 1 / 1;
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
}

.team-card-content .member-name {
  font-size: 1.25rem;
  color: var(--primary-color);
  letter-spacing: -0.02em;
}

.team-card-content .member-role {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.team-card-content .member-bio {
  font-size: 0.9rem;
  line-height: 1.55;
}

/* 3. Vision & Mission Section
   Section-level vertical padding is intentionally left to the default
   py-5 + container py-4/py-lg-5 stack in the markup (unchanged), matching
   every other About page section (team, values, full-width, hero) so the
   top/bottom rhythm between sections is consistent site-wide. */
.about-vm-section {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
}

.vm-card {
  border: 1px solid var(--border-color);
  padding: 1.25rem !important;
}

@media (min-width: 768px) {
  .vm-card {
    padding: 1.75rem !important;
  }
}

/* Icon sizing moved here from inline styles in the template so both cards
   share one definition (was 60px/32px; reduced ~15% to 51px/27px). */
.vm-icon-wrap {
  border: 1px solid var(--border-color);
  background-color: var(--bg-light);
  width: 51px !important;
  height: 51px !important;
  margin-bottom: 0.75rem !important;
}

.vm-icon-wrap img {
  width: 27px;
  height: 27px;
  max-width: none;
}

.vm-card-title {
  font-size: 1.325rem;
  line-height: 1.3;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem !important;
}

.vm-card-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* 4. Values Section */
.about-values-section {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
}

.val-card {
  border: 1px solid var(--border-color);
}

.val-icon-wrap {
  border: 1px solid var(--border-color);
  background-color: var(--bg-light);
}

.val-title {
  font-size: 1.125rem;
  color: var(--primary-color);
  letter-spacing: -0.01em;
}

.val-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Integrations Page: 4-Column Features (Logo Left, Text Right) */
.integration-feature-card {
  border: 1px solid var(--border-color);
  gap: 1rem;
}

.integration-feature-logo-wrap {
  width: 56px;
  height: 56px;
}

.integration-feature-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.integration-feature-content {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.integration-feature-content p {
  margin-bottom: 0;
}

/* 5. Full Width Content Section */
.about-fullwidth-section {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.about-fullwidth-body {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.about-fullwidth-body p {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Services Page Styles (Strict Monochrome Design Tokens)
   ========================================================================== */

.services-hero-section {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.services-tabs-section {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
}

.services-tabs-section.bg-light-surface {
  background-color: var(--bg-light);
}

.services-tabs-section.bg-white {
  background-color: var(--bg-color);
}

.services-tab-nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.services-tab-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 9999px !important;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.services-tab-btn {
  background-color: transparent;
  color: var(--text-color);
  font-size: 0.8875rem;
  font-weight: 500;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px !important;
  border: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.35;
}

.services-tab-btn:hover:not(.active) {
  background-color: #f3f4f6;
  color: var(--primary-color);
}

.services-tab-btn.active {
  background-color: #000000;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.services-tab-btn .tab-btn-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.services-tab-btn .tab-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: filter 0.2s ease;
}

.services-tab-btn.active .tab-icon-img {
  filter: brightness(0) invert(1);
}

@media (max-width: 991.98px) {
  .services-tab-nav-wrapper {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .services-tab-nav-wrapper::-webkit-scrollbar {
    display: none;
  }
  .services-tab-nav {
    flex-wrap: nowrap;
    border-radius: 9999px !important;
  }
}

.services-tab-panels-wrapper {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.services-tab-panel {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.services-tab-panel.active {
  animation: tabFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.tab-content-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--primary-color);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.tab-content-desc {
  font-size: 1.025rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.tab-learn-more-link {
  color: var(--primary-color);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 2px;
  transition: var(--transition);
}

.tab-learn-more-link:hover {
  color: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateX(3px);
}

.tab-sub-apps-grid {
  border-top: 1px solid #e5e7eb;
}

.sub-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
}

.sub-app-icon-wrap {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-color);
  background-color: #f9fafb;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.sub-app-item:hover .sub-app-icon-wrap {
  transform: translateY(-2px);
  border-color: #9ca3af;
}

.sub-app-name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-color);
}

.tab-dashboard-card {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.tab-dashboard-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tab-dashboard-card:hover img {
  transform: scale(1.015);
}

.services-fullwidth-section {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

/* ==========================================================================
   Contact Form 7 Pop-up Modal (Strict Monochrome Design Tokens)
   ========================================================================== */

.contact-popup-modal .modal-dialog {
  max-width: 480px;
  margin: 1.5rem auto;
}

.contact-popup-modal .modal-content {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
  padding: 1.25rem 1.5rem !important;
  overflow: hidden;
}

.contact-popup-modal .modal-header {
  padding: 0 0 0.5rem 0 !important;
}

.contact-popup-modal .modal-title {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--primary-color);
  letter-spacing: -0.025em;
  margin-bottom: 0.15rem !important;
}

.contact-popup-modal .modal-subtitle {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.contact-popup-modal .modal-body {
  padding: 0.5rem 0 0 0 !important;
  overflow: visible !important;
}

.contact-popup-modal .form-label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-color);
  margin-bottom: 0.25rem;
  display: block;
}

/* Input Fields */
.contact-popup-modal .contact-input,
.contact-popup-modal .wpcf7-form-control:not(.wpcf7-submit) {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  color: var(--text-color);
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.contact-popup-modal .contact-input::placeholder,
.contact-popup-modal .wpcf7-form-control::placeholder {
  color: #9ca3af;
  font-size: 0.84rem;
}

.contact-popup-modal .contact-input:focus,
.contact-popup-modal .wpcf7-form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07);
  outline: none;
}

.contact-popup-modal textarea.contact-input,
.contact-popup-modal textarea.wpcf7-form-control {
  min-height: 60px;
  height: 64px;
  resize: none;
}

/* Select Dropdown */
.contact-popup-modal select.contact-input,
.contact-popup-modal select.wpcf7-form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 13px 9px;
  padding-right: 2.25rem;
  appearance: none;
  -webkit-appearance: none;
}

/* Send Message Submit Button (Brand Black - NO GREEN) */
.contact-popup-modal .btn-contact-submit,
.contact-popup-modal input[type="submit"].wpcf7-submit {
  background-color: var(--primary-color) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.contact-popup-modal .btn-contact-submit:hover,
.contact-popup-modal input[type="submit"].wpcf7-submit:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Contact Form 7 Feedback Messages & Spinners */
.contact-popup-modal .wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.2rem;
  font-weight: 400;
  display: block;
}

.contact-popup-modal .wpcf7-response-output {
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  margin: 0.75rem 0 0 0 !important;
  padding: 0.5rem 0.85rem !important;
  border: 1px solid var(--border-color) !important;
}

.contact-popup-modal .wpcf7-spinner {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ==========================================================================
   Contact Page Section (Info + Existing CF7 Form)
   All rules scoped under .contact-page-section - does not touch the popup
   modal's form styling above, and is not referenced by any other page.
   ========================================================================== */
.contact-page-section {
  background-color: var(--bg-color);
}

/* Left Column: Contact Info */
.contact-info-heading {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--primary-color);
  letter-spacing: -0.02em;
}

.contact-info-list {
  margin: 0;
  padding: 0;
}

.contact-info-item {
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  background-color: var(--bg-light);
  border-color: var(--border-color) !important;
  color: var(--primary-color);
  margin-top: 0.125rem;
}

.contact-info-icon svg {
  width: 22px;
  height: 22px;
}

.contact-info-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.contact-info-value {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-color);
  text-decoration: none;
  line-height: 1.4;
}

a.contact-info-value:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Right Column: Contact Form Panel */
.contact-form-panel {
  border: none;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .contact-form-panel {
    padding: 1.25rem;
  }
}

/* Labels are visually hidden (not display:none) so each field still has an
   accessible name for screen readers; placeholders carry the visible cue. */
.contact-form-panel .wpcf7-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The form's own markup wraps each field in a Bootstrap .mb-2/.mb-3 div;
   those utilities carry !important, so field-to-field spacing must be
   overridden here (not on the label) to actually take effect. */
.contact-form-panel .contact-form-fields-wrap > div:not(.text-start) {
  margin-bottom: 0.75rem !important;
}

.contact-form-panel .wpcf7-form-control:not(.wpcf7-submit) {
  display: block;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--text-color);
  background-color: #ffffff;
  margin-top: 0.4rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-panel .wpcf7-form-control::placeholder {
  color: #9ca3af;
}

.contact-form-panel .wpcf7-form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07);
  outline: none;
}

.contact-form-panel textarea.wpcf7-form-control {
  height: 127px !important;
  min-height: 0;
  resize: vertical;
}

.contact-form-panel select.wpcf7-form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 13px 9px;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}

/* The unselected "Select an option" state should read like a placeholder
   (same grey as the other fields' ::placeholder); once a real option is
   chosen the text reverts to the normal dark input color. */
.contact-form-panel select.wpcf7-form-control:has(option:first-child:checked) {
  color: #9ca3af;
}

/* Options inherit the select's color by default, which would grey out the
   whole open dropdown list. Force every real option back to the normal
   dark color; only the first ("Select an option") stays grey. */
.contact-form-panel select.wpcf7-form-control option {
  color: var(--text-color);
}

.contact-form-panel select.wpcf7-form-control option:first-child {
  color: #9ca3af;
}

.contact-form-panel input[type="submit"].wpcf7-submit {
  background-color: var(--primary-color) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 999px !important;
  padding: 0.75rem 2.25rem !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  margin-top: 0.5rem;
}

.contact-form-panel input[type="submit"].wpcf7-submit:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-form-panel .wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: #dc2626;
  margin-top: 0.35rem;
  font-weight: 400;
  display: block;
}

.contact-form-panel .wpcf7-response-output {
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  margin: 1.25rem 0 0 0 !important;
  padding: 0.65rem 1rem !important;
  border: 1px solid var(--border-color) !important;
}

.contact-form-panel .wpcf7-spinner {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Mobile: stack contact info first, then the form */
@media (max-width: 991.98px) {
  .contact-info-panel {
    margin-bottom: 0.5rem;
  }
}