/* ============================================================
   CVFO CUSTOM STYLESHEET
   Hosted on GitHub Pages — referenced in Zoho Sites head code

   USAGE IN ZOHO SITES:
   Settings → Custom Code → Head → paste:
   <link rel="stylesheet" href="YOUR_GITHUB_PAGES_URL/cvfo-styles.css">

   PHILOSOPHY:
   This file EXTENDS Zoho Sites — it does not override it.
   Typography, colors, spacing, borders, and shadows are set
   directly in the Zoho Visual Editor and element style panels.
   This file only adds things Zoho cannot do natively:
     - CSS custom properties (design tokens)
     - Google Fonts import
     - Gradient/animated backgrounds
     - Pseudo-element overlays (::before / ::after)
     - Scroll reveal animations (requires JS)
     - Hover transitions that need transform/keyframes
     - Navigation pill-float behavior
     - Dark section text color flips (scoped tightly)

   Last updated: 2026
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Brand Colors */
  --color-navy:       #1a365d;
  --color-sky:        #38b6ff;
  --color-blue:       #0081cc;
  --color-teal:       #83aeaf;
  --color-gold:       #d2b450;

  /* Neutrals */
  --color-offwhite:   #f7fafc;
  --color-lightgray:  #f0f0f0;
  --color-darkgray:   #2d3748;
  --color-white:      #ffffff;

  /* Semantic Aliases */
  --text-primary:     var(--color-darkgray);
  --text-light:       var(--color-offwhite);
  --accent-primary:   var(--color-sky);
  --accent-hover:     var(--color-blue);
  --accent-gold:      var(--color-gold);
  --accent-teal:      var(--color-teal);

  /* Spacing */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  5rem;

  /* Effects */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 100px;

  --shadow-sm:   0 1px 3px 0 rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px 0 rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 32px 0 rgba(0,0,0,0.14);
  --shadow-lift: 0 16px 40px 0 rgba(0,0,0,0.16);

  /* Typography — font variables only; sizes set in Zoho */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Montserrat', sans-serif;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}


/* ============================================================
   2. GOOGLE FONTS IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');


/* ============================================================
   3. MINIMAL BASE
   Only what Zoho doesn't provide.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent horizontal overflow from pseudo-element bleeds */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Subpixel antialiasing — Zoho doesn't set this */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sections need position:relative so ::before/::after overlays work */
.zpsection {
  position: relative;
}


/* ============================================================
   TEXT SELECTION HIGHLIGHT
   Replaces the browser default blue selection color.
   Three variants — global default + scoped overrides for
   dark sections and gold-accent sections.

   background: the highlight fill
   color: the selected text color (set explicitly — some browsers
          inherit incorrectly without it)
   ============================================================ */

/* Global default — teal highlight on light sections */
::selection {
  background: rgba(0, 112, 139, 0.22);
  color: #1a365d;
}
::-moz-selection {
  background: rgba(0, 112, 139, 0.22);
  color: #1a365d;
}

/* Dark sections — lighter teal so it reads on navy backgrounds */
.section-dark ::selection,
.cta-final ::selection,
.gradient-navy ::selection,
.gradient-deep ::selection,
.gradient-ocean ::selection,
.gradient-navy-teal ::selection,
.section-drift ::selection,
.section-aurora ::selection {
  background: rgba(56, 182, 255, 0.35);
  color: #ffffff;
}
.section-dark ::-moz-selection,
.cta-final ::-moz-selection,
.gradient-navy ::-moz-selection,
.gradient-deep ::-moz-selection,
.gradient-ocean ::-moz-selection,
.gradient-navy-teal ::-moz-selection,
.section-drift ::-moz-selection,
.section-aurora ::-moz-selection {
  background: rgba(56, 182, 255, 0.35);
  color: #ffffff;
}

/* Gold accent sections — warm amber highlight */
.section-gold-bloom ::selection,
.gradient-gold ::selection,
.gradient-dusk ::selection {
  background: rgba(210, 180, 80, 0.35);
  color: #ffffff;
}
.section-gold-bloom ::-moz-selection,
.gradient-gold ::-moz-selection,
.gradient-dusk ::-moz-selection {
  background: rgba(210, 180, 80, 0.35);
  color: #ffffff;
}


/* ============================================================
   4. DARK SECTION TEXT FLIPS
   Only the things Zoho's editor genuinely cannot do:
   flipping text/heading color based on a parent class.

   Apply "section-dark" to any section with a dark background
   to automatically flip heading and text colors to white.
   ============================================================ */

.section-dark .zpheading,
.section-dark .zpheading h1,
.section-dark .zpheading h2,
.section-dark .zpheading h3,
.section-dark .zpheading h4,
.section-dark .zpheading h5,
.section-dark .zpheading h6 {
  color: var(--color-white) !important;
}

/* Exception: stat-number headings use gold — don't let section-dark override.
   Use unset to remove the white color and let Zoho's inline color show through. */
.section-dark .zpelem-heading.stat-number,
.section-dark .zpelem-heading.stat-number h1,
.section-dark .zpelem-heading.stat-number h2,
.section-dark .zpelem-heading.stat-number h3,
.section-dark .zpelem-heading.stat-number h4,
.section-dark .zpelem-heading.stat-number h5 {
  color: unset !important;
}

.section-dark .zptext,
.section-dark .zptext p,
.section-dark .zptext span {
  color: rgba(247, 250, 252, 0.85) !important;
}


/* Secondary button inverts on dark backgrounds */
.section-dark .zpbutton.zpbutton-type-secondary {
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: var(--color-white) !important;
}

.section-dark .zpbutton.zpbutton-type-secondary:hover {
  background-color: var(--color-white) !important;
  color: var(--color-navy) !important;
}


/* ============================================================
   5. BUTTON HOVER TRANSITIONS
   Zoho's Visual Editor sets colors. This adds transitions,
   transform lifts, and box-shadow — none of which Zoho supports.
   ============================================================ */

.zpbutton.zpbutton-type-primary {
  transition: background-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base) !important;
  box-shadow: 0 2px 10px 0 rgba(56, 182, 255, 0.35) !important;
}

.zpbutton.zpbutton-type-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px 0 rgba(56, 182, 255, 0.55) !important;
}

.zpbutton.zpbutton-type-secondary {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base) !important;
}

.zpbutton.zpbutton-type-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px 0 rgba(26, 54, 93, 0.25) !important;
}

/* Button glow variants — apply to any button element in Zoho CSS field.
   Works on top of primary or secondary type. */

/* Gold glow — for premium CTAs */
.btn-glow-gold {
  box-shadow: 0 2px 10px 0 rgba(210, 180, 80, 0.35) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-fast) !important;
}
.btn-glow-gold:hover {
  box-shadow: 0 8px 24px 0 rgba(210, 180, 80, 0.55) !important;
  transform: translateY(-2px) !important;
}

/* White glow — for buttons on dark sections */
.btn-glow-white {
  box-shadow: 0 2px 10px 0 rgba(255, 255, 255, 0.15) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-fast) !important;
}
.btn-glow-white:hover {
  box-shadow: 0 8px 28px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Teal glow — matches brand teal accent */
.btn-glow-teal {
  box-shadow: 0 2px 10px 0 rgba(131, 174, 175, 0.35) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-fast) !important;
}
.btn-glow-teal:hover {
  box-shadow: 0 8px 24px 0 rgba(131, 174, 175, 0.55) !important;
  transform: translateY(-2px) !important;
}


/* ============================================================
   6. SCROLL REVEAL ANIMATIONS
   JS (cvfo-scripts.js) adds "is-visible" when element enters
   viewport. These classes define the before/after states.

   Usage — add ONE of these classes to any element:
     scroll-reveal        → fade up
     scroll-reveal-left   → slide in from left
     scroll-reveal-right  → slide in from right
     scroll-reveal-scale  → scale up from 95%
     stagger-children     → apply to parent; children stagger in
   ============================================================ */

.scroll-reveal,
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-scale {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.scroll-reveal       { transform: translateY(28px); }
.scroll-reveal-left  { transform: translateX(-40px); }
.scroll-reveal-right { transform: translateX(40px); }
.scroll-reveal-scale { transform: scale(0.95) translateY(16px); }

.scroll-reveal.is-visible,
.scroll-reveal-left.is-visible,
.scroll-reveal-right.is-visible,
.scroll-reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children — parent gets stagger-children, JS adds is-visible */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 100ms; }
.stagger-children.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 200ms; }
.stagger-children.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 300ms; }
.stagger-children.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 400ms; }
.stagger-children.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 500ms; }
.stagger-children.is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 600ms; }
.stagger-children.is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 700ms; }
.stagger-children.is-visible > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: 800ms; }
.stagger-children.is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 900ms; }
.stagger-children.is-visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 1000ms; }
.stagger-children.is-visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 1100ms; }

/* Tighter stagger — 60ms between items. Good for dense grids. */
.stagger-fast > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.stagger-fast.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger-fast.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 60ms; }
.stagger-fast.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 120ms; }
.stagger-fast.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 180ms; }
.stagger-fast.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger-fast.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 300ms; }
.stagger-fast.is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 360ms; }
.stagger-fast.is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 420ms; }
.stagger-fast.is-visible > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: 480ms; }
.stagger-fast.is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 540ms; }
.stagger-fast.is-visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 600ms; }
.stagger-fast.is-visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 660ms; }

/* Slower stagger — 200ms between items. Good for 2–4 large feature blocks. */
.stagger-slow > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.stagger-slow.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger-slow.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 200ms; }
.stagger-slow.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 400ms; }
.stagger-slow.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 600ms; }
.stagger-slow.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 800ms; }
.stagger-slow.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 1000ms; }


/* ============================================================
   SCROLL REVEAL — ADDITIONAL VARIANTS
   All follow the same JS pattern: class starts hidden,
   \"is-visible\" class added when element enters viewport.
   ============================================================ */

/* Blur clear — element starts blurry and sharpens in.
   Feels more premium than a plain fade. */
.scroll-reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
  will-change: opacity, filter, transform;
}
.scroll-reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Drop — falls from above. Opposite of scroll-reveal. */
.scroll-reveal-drop {
  opacity: 0;
  transform: translateY(-32px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: opacity, transform;
}
.scroll-reveal-drop.is-visible {
  opacity: 1;
  transform: none;
}

/* Flip — rotates from near-vertical to flat. */
.scroll-reveal-flip {
  opacity: 0;
  transform: perspective(600px) rotateX(18deg) translateY(20px);
  transform-origin: top center;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scroll-reveal-flip.is-visible {
  opacity: 1;
  transform: perspective(600px) rotateX(0) translateY(0);
}

/* Zoom out — starts slightly too large, settles to natural size. */
.scroll-reveal-zoom {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scroll-reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Slow variant — 1s fade, for large hero-style elements */
.scroll-reveal-slow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
.scroll-reveal-slow.is-visible {
  opacity: 1;
  transform: none;
}

/* Fast variant — 0.3s, for small UI elements like badges */
.scroll-reveal-fast {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}
.scroll-reveal-fast.is-visible {
  opacity: 1;
  transform: none;
}

/* Repeat variant — re-animates every time the element enters the
   viewport. JS must NOT unobserve — see initScrollRevealRepeat(). */
.scroll-reveal-repeat {
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.scroll-reveal-repeat.is-hidden {
  opacity: 0;
  transform: translateY(28px);
}
.scroll-reveal-repeat.is-visible {
  opacity: 1;
  transform: none;
}


/* ============================================================
   HOVER MICRO-INTERACTIONS
   All CSS-only unless noted.
   ============================================================ */

/* Animated underline — grows from left on hover.
   Apply to inline link or nav text elements. */
.hover-underline {
  position: relative;
  text-decoration: none !important;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* Underline teal variant */
.hover-underline-teal::after { background: var(--accent-teal); }

/* Underline gold variant */
.hover-underline-gold::after { background: var(--accent-gold); }

/* Border draw — hairline border traces around the element.
   Apply to buttons, badges, or card wrappers.
   Base styles (background, border-radius) set in Zoho. */
.hover-border-draw {
  position: relative;
  overflow: hidden;
}
.hover-border-draw::before,
.hover-border-draw::after {
  content: '';
  position: absolute;
  background: var(--accent-teal);
  transition: transform 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
/* Top and bottom lines */
.hover-border-draw::before {
  top: 0; left: 0;
  width: 100%; height: 1px;
  transform: scaleX(0);
  transform-origin: left;
}
.hover-border-draw::after {
  bottom: 0; right: 0;
  width: 100%; height: 1px;
  transform: scaleX(0);
  transform-origin: right;
}
.hover-border-draw:hover::before,
.hover-border-draw:hover::after { transform: scaleX(1); }

/* Fill from bottom — background floods up on hover.
   Apply to pill buttons or nav items.
   Set a transparent background + border in Zoho. */
.hover-fill {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.hover-fill::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background: var(--accent-teal);
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.hover-fill:hover::before { height: 100%; }
.hover-fill:hover { color: white !important; }

.hover-fill-navy::before  { background: var(--color-navy); }
.hover-fill-gold::before  { background: var(--accent-gold); }

/* Image brightness — subtle brightness lift on hover.
   Apply to image containers or thumbnail wrappers. */
.hover-bright {
  transition: filter var(--transition-base);
}
.hover-bright:hover { filter: brightness(1.08) contrast(1.02); }

/* Image dim — card dims to push sibling into focus.
   Works individually; for group dimming use JS hover-dim-group. */
.hover-dim {
  transition: opacity var(--transition-base);
}
.hover-dim:hover { opacity: 0.75; }

/* Icon spin — the SVG or icon element inside rotates.
   Apply to the icon element directly, not the card. */
.hover-icon-spin {
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hover-icon-spin:hover { transform: rotate(360deg); }

/* Icon bounce — small elastic bounce up on hover */
.hover-icon-bounce {
  transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.hover-icon-bounce:hover { transform: translateY(-6px); }

/* Icon wiggle — side-to-side shake on hover */
.hover-icon-wiggle:hover {
  animation: wiggle 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-8deg); }
  40%       { transform: rotate(8deg); }
  60%       { transform: rotate(-5deg); }
  80%       { transform: rotate(4deg); }
}

/* Reveal text — hides overflow, slides child text up on hover.
   Wrap text in a <span> inside the element.
   Good for button labels or card headings. */
.hover-slide-up {
  overflow: hidden;
}
.hover-slide-up span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-slide-up:hover span { transform: translateY(-4px); }

/* Card dim siblings — on hover, non-hovered siblings in the
   same parent dim. Apply to the parent container. [JS-assisted]
   JS adds .hover-dim-group-active class to parent on any child hover. */
.hover-dim-group .hover-dim-item {
  transition: opacity 0.25s ease;
}
.hover-dim-group-active .hover-dim-item:not(:hover) {
  opacity: 0.55;
}

/* Focus ring — branded visible focus for keyboard navigation.
   Apply to interactive elements (buttons, links, inputs). */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   TEXT MICRO-INTERACTIONS
   ============================================================ */

/* Highlight draw — animated teal underline highlight.
   Apply to a <span> wrapping key words in a heading. */
.highlight-draw {
  position: relative;
}
.highlight-draw::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 8px;
  background: rgba(0, 112, 139, 0.18);
  z-index: -1;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.highlight-draw.is-visible::after { width: 100%; }

/* Gold variant */
.highlight-draw-gold::after {
  background: rgba(210, 180, 80, 0.22);
}

/* Typewriter cursor — blinking bar after text.
   JS populates the text; this styles the cursor. */
.typewriter-cursor::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-teal);
  animation: blink 0.9s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ============================================================
   SCROLL PROGRESS BAR
   A thin line at the top of the viewport tracking page scroll.
   JS sets width via CSS custom property.
   ============================================================ */

.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(to right, var(--accent-teal), var(--accent-primary));
  z-index: 9999;
  pointer-events: none;
  transition: width 0.1s linear;
}
/* Gold variant */
.scroll-progress-bar.gold {
  background: linear-gradient(to right, var(--accent-gold), #f0c040);
}


/* ============================================================
   RIPPLE EFFECT
   JS injects a .ripple span on click. This styles it.
   Apply .ripple-host to any button or clickable element.
   ============================================================ */

.ripple-host {
  position: relative;
  overflow: hidden;
}
.ripple-host .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand 0.55s linear;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}
/* Dark ripple — for light-background buttons */
.ripple-host.ripple-dark .ripple {
  background: rgba(26, 54, 93, 0.15);
}


/* ============================================================
   MAGNETIC ELEMENT
   JS nudges the element toward the cursor.
   Apply .magnetic to any element. Strength controlled by JS.
   ============================================================ */

.magnetic {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}


/* ============================================================
   PARALLAX
   JS sets --parallax-y custom property per element.
   Apply .parallax-slow or .parallax-fast to section content.
   ============================================================ */

.parallax-slow,
.parallax-fast,
.parallax-reverse {
  will-change: transform;
}
.parallax-slow    { transform: translateY(var(--parallax-y, 0px)); }
.parallax-fast    { transform: translateY(var(--parallax-y, 0px)); }
.parallax-reverse { transform: translateY(var(--parallax-y, 0px)); }


/* ============================================================
   MARQUEE / TICKER
   Horizontal scrolling text loop — no JS needed.
   Wrap items in .marquee-track inside .marquee-wrapper.
   Duplicate the content once for a seamless loop.
   ============================================================ */

.marquee-wrapper {
  overflow: hidden;
  display: flex;
  width: 100%;
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  flex-shrink: 0;
}
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Reverse direction */
.marquee-track.reverse { animation-direction: reverse; }
/* Speed variants */
.marquee-track.fast  { animation-duration: 14s; }
.marquee-track.slow  { animation-duration: 48s; }



/* ============================================================
   SCROLL REVEAL — SKEW VARIANTS
   ============================================================ */

.scroll-reveal-skew {
  opacity: 0;
  transform: translateX(-24px) skewX(-4deg);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scroll-reveal-skew.is-visible {
  opacity: 1;
  transform: translateX(0) skewX(0deg);
}
.scroll-reveal-skew-right {
  opacity: 0;
  transform: translateX(24px) skewX(4deg);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scroll-reveal-skew-right.is-visible {
  opacity: 1;
  transform: translateX(0) skewX(0deg);
}


/* ============================================================
   WORD REVEAL
   JS splits text into word spans. Each word slides up staggered.
   ============================================================ */

.word-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word-reveal .word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.word-reveal.is-visible .word-inner {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   HOVER SHINE
   Light sweep passes across element on hover.
   ============================================================ */

.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  transition: left 0s;
  pointer-events: none;
}
.hover-shine:hover::after {
  left: 125%;
  transition: left 0.55s ease;
}


/* ============================================================
   HOVER REVEAL OVERLAY
   Dark overlay fades in over a card on hover.
   Structure:
     <div class="hover-reveal-card">
       <img ...> or any content
       <div class="hover-reveal-content">Text here</div>
     </div>
   ============================================================ */

.hover-reveal-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.hover-reveal-content {
  position: absolute;
  inset: 0;
  background: rgba(14, 30, 58, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.hover-reveal-card:hover .hover-reveal-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hover-reveal-card.teal .hover-reveal-content { background: rgba(0,112,139,0.85); }
.hover-reveal-card.gold .hover-reveal-content { background: rgba(180,140,20,0.88); }


/* ============================================================
   HOVER CARD FLIP
   Structure:
     <div class="flip-card" style="height:220px">
       <div class="flip-card-inner">
         <div class="flip-card-front">Front</div>
         <div class="flip-card-back">Back</div>
       </div>
     </div>
   ============================================================ */

.flip-card { perspective: 1000px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: var(--color-navy);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.flip-card .flip-card-back.teal { background: #0e3d44; }
.flip-card .flip-card-back.gold { background: #8a6200; }


/* ============================================================
   COUNT-UP
   JS animates the number. This sets the pre-animation state
   so there's no flash of unstyled content before JS fires.
   Apply .count-up to any element containing a number.
   Optional data attributes:
     data-count="1200"     — target number (overrides text)
     data-prefix="$"       — prepend string
     data-suffix="%"       — append string
     data-decimals="1"     — decimal places
     data-duration="1400"  — animation ms (default 1400)
   ============================================================ */

.count-up {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   TEXT SCRAMBLE
   JS scrambles characters then settles to real text on scroll.
   Apply .text-scramble to any short heading or label.
   Optional: data-delay="200" (ms before starting).
   Keep to < 40 characters — longer text looks chaotic.
   ============================================================ */

.text-scramble {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   STAGGER GRID
   Like stagger-children but staggers left-to-right across rows
   using a grid-position-aware delay calculation.
   Apply .stagger-grid to a grid parent.
   Works with up to 4 columns × N rows (24 items max).
   ============================================================ */

.stagger-grid > * {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-grid.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay:   0ms; }
.stagger-grid.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay:  60ms; }
.stagger-grid.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 120ms; }
.stagger-grid.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 180ms; }
.stagger-grid.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay:  80ms; }
.stagger-grid.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 140ms; }
.stagger-grid.is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 200ms; }
.stagger-grid.is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 260ms; }
.stagger-grid.is-visible > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: 160ms; }
.stagger-grid.is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 220ms; }
.stagger-grid.is-visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 280ms; }
.stagger-grid.is-visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 340ms; }
.stagger-grid.is-visible > *:nth-child(13) { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger-grid.is-visible > *:nth-child(14) { opacity: 1; transform: none; transition-delay: 300ms; }
.stagger-grid.is-visible > *:nth-child(15) { opacity: 1; transform: none; transition-delay: 360ms; }
.stagger-grid.is-visible > *:nth-child(16) { opacity: 1; transform: none; transition-delay: 420ms; }
.stagger-grid.is-visible > *:nth-child(17) { opacity: 1; transform: none; transition-delay: 320ms; }
.stagger-grid.is-visible > *:nth-child(18) { opacity: 1; transform: none; transition-delay: 380ms; }
.stagger-grid.is-visible > *:nth-child(19) { opacity: 1; transform: none; transition-delay: 440ms; }
.stagger-grid.is-visible > *:nth-child(20) { opacity: 1; transform: none; transition-delay: 500ms; }
.stagger-grid.is-visible > *:nth-child(21) { opacity: 1; transform: none; transition-delay: 400ms; }
.stagger-grid.is-visible > *:nth-child(22) { opacity: 1; transform: none; transition-delay: 460ms; }
.stagger-grid.is-visible > *:nth-child(23) { opacity: 1; transform: none; transition-delay: 520ms; }
.stagger-grid.is-visible > *:nth-child(24) { opacity: 1; transform: none; transition-delay: 580ms; }


/* ============================================================
   REVEAL LINE
   A horizontal rule that draws left-to-right on scroll entry.
   Apply .reveal-line to any <hr> or block element.
   Variants: .reveal-line-teal, .reveal-line-gold, .reveal-line-white
   ============================================================ */

.reveal-line {
  width: 0;
  height: 1px;
  background: rgba(26, 54, 93, 0.15);
  border: none;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
}
.reveal-line.is-visible { width: 100%; }

.reveal-line-teal  { background: var(--accent-teal); height: 2px; }
.reveal-line-gold  { background: var(--accent-gold); height: 2px; }
.reveal-line-sky   { background: var(--accent-primary); height: 2px; }
.reveal-line-white { background: rgba(255, 255, 255, 0.25); height: 1px; }

/* Short decorative version — 80px wide max, centered */
.reveal-line-short {
  max-width: 80px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   SECTION IN-VIEW HOOKS
   JS adds .section-visible to any section when > 30% in viewport.
   Use these CSS hooks to trigger effects inside the section
   without needing JS on individual child elements.

   Usage:
     Any element inside a section can react to .section-visible
     being added to its ancestor section.

   Example:
     .my-section.section-visible .my-heading { opacity: 1; }
   ============================================================ */

/* Fade-up children when parent section enters view */
.section-reveal-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.section-visible.section-reveal-children > *,
.section-visible .section-reveal-children > * {
  opacity: 1;
  transform: none;
}

/* Progress fill — a bar that fills when section is in view.
   Apply to a div inside any section. */
.progress-fill-bar {
  height: 4px;
  background: var(--accent-teal);
  border-radius: 2px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.section-visible .progress-fill-bar,
.progress-fill-bar.is-visible { width: var(--fill-width, 100%); }

/* Set width via inline style: style="--fill-width: 73%" */


/* ============================================================
   FORM INPUT FOCUS MICRO-INTERACTIONS
   Applies to Zoho form inputs. The label lifts and the border
   animates on focus.
   ============================================================ */

/* Branded focus outline for all interactive elements */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
  border-color: var(--accent-teal) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Animated bottom-border focus line.
   Apply .input-line to the input element. */
.input-line {
  border: none !important;
  border-bottom: 2px solid #cbd5e0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: border-color 0.25s ease !important;
}
.input-line:focus {
  border-bottom-color: var(--accent-teal) !important;
  outline: none !important;
}

/* Glow focus — adds a soft teal shadow on focus.
   Apply .input-glow to the input container or input. */
.input-glow:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 112, 139, 0.15);
  border-color: var(--accent-teal) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}


/* ============================================================
   HOVER ARROW
   A → arrow slides in from left to replace a static state.
   Apply .hover-arrow to any link or button text element.
   Structure: <span class="hover-arrow">Learn more</span>
   ============================================================ */

.hover-arrow {
  transition: gap 0.25s ease;
}
.hover-arrow::after {
  content: '→';
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  margin-left: 0;
}
.hover-arrow:hover::after {
  opacity: 1;
  transform: translateX(4px);
  margin-left: 6px;
}


/* ============================================================
   TOOLTIP
   Pure CSS tooltip on hover. No JS.
   Apply .tooltip to the trigger element.
   Set data-tip="Your tooltip text" on the element.
   Variants: .tooltip-top (default), .tooltip-bottom, .tooltip-right
   ============================================================ */

[data-tip] {
  position: relative;
}
[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-navy);
  color: white;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  max-width: 220px;
  text-align: center;
}
[data-tip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--color-navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
[data-tip]:hover::before,
[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-tip].tooltip-bottom::before {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tip].tooltip-bottom::after {
  bottom: auto;
  top: calc(100% + 2px);
  transform: translateX(-50%) translateY(-4px);
  border-top-color: transparent;
  border-bottom-color: var(--color-navy);
}
[data-tip].tooltip-bottom:hover::before,
[data-tip].tooltip-bottom:hover::after {
  transform: translateX(-50%) translateY(0);
}

[data-tip].tooltip-right::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(-4px);
}
[data-tip].tooltip-right::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%) translateX(-4px);
  border-top-color: transparent;
  border-right-color: var(--color-navy);
}
[data-tip].tooltip-right:hover::before,
[data-tip].tooltip-right:hover::after {
  transform: translateY(-50%) translateX(0);
}



.hover-border-glow {
  transition: box-shadow 0.35s ease;
  border-radius: var(--radius-md);
}
.hover-border-glow:hover {
  box-shadow: 0 0 0 2px var(--accent-teal), 0 0 16px 2px rgba(131,174,175,0.3), var(--shadow-md);
}
.hover-border-glow.gold:hover {
  box-shadow: 0 0 0 2px var(--accent-gold), 0 0 16px 2px rgba(210,180,80,0.3), var(--shadow-md);
}
.hover-border-glow.sky:hover {
  box-shadow: 0 0 0 2px var(--accent-primary), 0 0 16px 2px rgba(56,182,255,0.3), var(--shadow-md);
}

/* ============================================================
   REDUCED MOTION — NEW ADDITIONS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-blur,
  .scroll-reveal-drop,
  .scroll-reveal-flip,
  .scroll-reveal-zoom,
  .scroll-reveal-slow,
  .scroll-reveal-fast,
  .scroll-reveal-repeat,
  .scroll-reveal-skew,
  .scroll-reveal-skew-right {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .word-reveal .word-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hover-icon-spin,
  .hover-icon-bounce,
  .hover-icon-wiggle:hover,
  .hover-underline::after,
  .hover-border-draw::before,
  .hover-border-draw::after,
  .hover-fill::before,
  .hover-slide-up span,
  .hover-shine::after {
    transition: none !important;
    animation: none !important;
  }
  .flip-card-inner {
    transition: none !important;
  }
  .hover-reveal-content {
    transition: none !important;
  }
  .marquee-track {
    animation: none !important;
  }
  .ripple-host .ripple {
    animation: none !important;
  }
  .typewriter-cursor::after {
    animation: none !important;
    opacity: 1;
  }
}


/* ============================================================
   7. HOVER EFFECTS
   Zoho cannot animate transform or box-shadow on hover.
   Apply these classes to any card or interactive element.
   ============================================================ */

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.hover-lift-sm {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hover-scale {
  transition: transform var(--transition-base);
}
.hover-scale:hover {
  transform: scale(1.03);
}

.hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.25), var(--shadow-md);
}

/* 3D tilt — JS handles mouse tracking, this sets up the 3D context */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}


/* ============================================================
   8. BACKGROUNDS & GRADIENTS
   Zoho's background picker is limited to solid colors and
   basic images. These classes add gradient and animation.

   Static:
     gradient-navy        → dark navy to deep blue
     gradient-navy-teal   → navy fading to teal
     gradient-light       → off-white to light gray
     gradient-sky         → light sky blue wash
   Animated:
     gradient-bg-animated → slow diagonal navy/teal drift
   Texture:
     gradient-noise       → subtle SVG noise overlay (use with gradients)
   ============================================================ */

.gradient-navy {
  background: linear-gradient(160deg, #1e4a8a 0%, #0a1628 100%);
}

.gradient-navy-teal {
  background: linear-gradient(150deg, #1a365d 0%, #0d3a4a 60%, #0e3d44 100%);
}

.gradient-light {
  background: linear-gradient(160deg, #f7fafc 0%, #edf2f7 100%);
}

.gradient-sky {
  background: linear-gradient(150deg, #ebf8ff 0%, #e0f4ff 100%);
}

.gradient-bg-animated {
  /* Background set in Zoho — this class now only provides overflow clipping
     and the stacking context for section overlay pseudo-elements */
  overflow: hidden;
  isolation: isolate;
}

/* SVG noise texture — apply alongside any section class for grain texture */
.gradient-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Ensure section content sits above noise overlay */
.gradient-noise > .zpcontainer,
.gradient-noise > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Gentle float animation */
.animate-float {
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Pulse — opacity only, color-neutral.
   The element's own color shows through.
   Use modifier classes below to add a color glow. */
.animate-pulse {
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Pulse with colored box-shadow glow — pair with animate-pulse */
.pulse-teal  { animation: pulse-teal  3s ease-in-out infinite; }
.pulse-gold  { animation: pulse-gold  3s ease-in-out infinite; }
.pulse-sky   { animation: pulse-sky   3s ease-in-out infinite; }
.pulse-navy  { animation: pulse-navy  3s ease-in-out infinite; }
.pulse-white { animation: pulse-white 3s ease-in-out infinite; }
.pulse-red   { animation: pulse-red   3s ease-in-out infinite; }

@keyframes pulse-teal {
  0%, 100% { box-shadow: 0 0 0   0 rgba(131, 174, 175, 0);    opacity: 1; }
  50%       { box-shadow: 0 0 18px 6px rgba(131, 174, 175, 0.4); opacity: 0.85; }
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0   0 rgba(210, 180, 80, 0);    opacity: 1; }
  50%       { box-shadow: 0 0 18px 6px rgba(210, 180, 80, 0.4); opacity: 0.85; }
}
@keyframes pulse-sky {
  0%, 100% { box-shadow: 0 0 0   0 rgba(56, 182, 255, 0);    opacity: 1; }
  50%       { box-shadow: 0 0 18px 6px rgba(56, 182, 255, 0.4); opacity: 0.85; }
}
@keyframes pulse-navy {
  0%, 100% { box-shadow: 0 0 0   0 rgba(26, 54, 93, 0);    opacity: 1; }
  50%       { box-shadow: 0 0 18px 6px rgba(26, 54, 93, 0.3); opacity: 0.85; }
}
@keyframes pulse-white {
  0%, 100% { box-shadow: 0 0 0   0 rgba(255, 255, 255, 0);    opacity: 1; }
  50%       { box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.3); opacity: 0.85; }
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0   0 rgba(229, 62, 62, 0);    opacity: 1; }
  50%       { box-shadow: 0 0 18px 6px rgba(229, 62, 62, 0.4); opacity: 0.85; }
}

/* Gradient text — apply to heading elements */
.gradient-text {
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   9. COMPONENT CLASSES
   Color and display-mode overrides only.
   Font, size, weight, spacing → set in Zoho element style panel.
   ============================================================ */

/* Gold accent text */
.text-gold  { color: var(--accent-gold) !important; }
.text-teal  { color: var(--accent-teal) !important; }
.text-sky   { color: var(--accent-primary) !important; }
.text-white { color: var(--color-white) !important; }
.text-navy  { color: var(--color-navy) !important; }
.text-muted { color: var(--accent-teal) !important; }
.text-light { color: rgba(247, 250, 252, 0.75) !important; }

/* Text alignment */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* Stat number — gold color for the large number; size set in Zoho */
/* stat-number — center alignment only. Set color directly in Zoho. */
.zpelem-heading.stat-number,
.zpelem-heading.stat-number h1,
.zpelem-heading.stat-number h2,
.zpelem-heading.stat-number h3,
.zpelem-heading.stat-number h4,
.zpelem-heading.stat-number h5 {
  text-align: center !important;
}

/* stat-label — light color on dark section; size/weight set in Zoho */
.stat-label {
  color: rgba(247, 250, 252, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  display: block !important;
}
.zptext.stat-label p,
.zpheading.stat-label h1,
.zpheading.stat-label h2,
.zpheading.stat-label h3,
.zpheading.stat-label h4,
.zpheading.stat-label h5,
.zpheading.stat-label h6 {
  color: rgba(247, 250, 252, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

/* Step number — gold color; size set in Zoho */
.step-number {
  color: var(--accent-gold);
  line-height: 1;
  display: block;
}

/* Glassmorphism container.
   Requires a dark or image background behind the element.
   backdrop-filter is blocked by: ancestors with overflow:hidden,
   certain transforms, or older browsers.

   Fallback: when backdrop-filter isn't supported or is blocked,
   the semi-opaque background still looks intentional.

   Variants:
     glass          → white frost (for dark backgrounds)
     glass-dark     → dark frost (for light or image backgrounds)
     glass-teal     → teal-tinted frost
     glass-navy     → navy-tinted frost
*/
.glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  /* Stacking context — required for backdrop-filter to work */
  isolation: isolate;
  position: relative;
  z-index: 0;
}
/* Apply blur to a pseudo-element so Zoho ancestor overflow:hidden
   doesn't block it — the pseudo-element is a child, not a sibling */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.glass > * { position: relative; z-index: 1; }

.glass-dark {
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  isolation: isolate;
  position: relative;
  z-index: 0;
}
.glass-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
.glass-dark > * { position: relative; z-index: 1; }

.glass-teal {
  background: rgba(0, 112, 139, 0.18);
  border: 1px solid rgba(131, 174, 175, 0.3);
  border-radius: var(--radius-md);
  isolation: isolate;
  position: relative;
  z-index: 0;
}
.glass-teal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.glass-teal > * { position: relative; z-index: 1; }

.glass-navy {
  background: rgba(26, 54, 93, 0.55);
  border: 1px solid rgba(56, 182, 255, 0.15);
  border-radius: var(--radius-md);
  isolation: isolate;
  position: relative;
  z-index: 0;
}
.glass-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
.glass-navy > * { position: relative; z-index: 1; }

/* Section badge — small caps eyebrow label above headings.
   display:block + width:fit-content + margin:auto centers it.
   No pill shape — simple underline accent instead. */
.section-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-teal);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-teal);
}
.section-badge.gold {
  color: var(--accent-gold);
  border-bottom-color: var(--accent-gold);
}

/* Gold divider — for stat section */
.divider-gold {
  width: 48px;
  height: 3px;
  background-color: var(--accent-gold);
  border: none;
  border-radius: 2px;
  margin: var(--space-sm) auto;
  display: block;
}

/* Teal divider */
.divider-teal {
  width: 48px;
  height: 3px;
  background-color: var(--accent-teal);
  border: none;
  border-radius: 2px;
  margin: var(--space-sm) 0;
}
.divider-teal.centered {
  margin-left: auto;
  margin-right: auto;
}

/* Left accent bars */
/* border-left-* removed — apply border directly in Zoho element style panel */

/* Opacity utilities */
.opacity-50 { opacity: 0.5 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }

/* Display utilities */
.block        { display: block !important; }
.inline-block { display: inline-block !important; }
.hidden       { display: none !important; }
.overflow-hidden { overflow: hidden !important; }
.relative     { position: relative !important; }
.z-1          { z-index: 1 !important; }
.z-10         { z-index: 10 !important; }


/* ============================================================
   10. HERO SECTION
   Only handles what Zoho cannot:
   - Fluid H1 font-size via clamp()
   - Diagonal line texture overlay (::before)
   - Z-index stacking for content above overlays
   ============================================================ */

/* Fluid H1 sizing — Zoho's size picker is a fixed px value */
.hero-section .zpheading h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  line-height: 1.12 !important;
}



/* ============================================================
   10b. HERO & CTA DARK SECTION VISUAL TREATMENT
   
   Instead of animated overlays (which fight Zoho's rendering),
   we use a static multi-stop gradient applied directly via the
   class. Set the section background to transparent in Zoho,
   or set it to #0d2240 as a fallback.

   For a living background feel: a single hue-rotate animation
   on a ::after overlay. hue-rotate is GPU-composited and only
   shifts the teal accent color — no position changes, no edges.
   ============================================================ */

/* Rich static dark gradient — applied directly, no JS needed */
.hero-section,
.cta-final {
  background: linear-gradient(
    135deg,
    #0d1f3c 0%,
    #0d3347 35%,
    #0a2535 65%,
    #0d1f3c 100%
  ) !important;
}

/* Glow overlay — two layers that cross-fade independently.
   No transform or translate — just opacity on fixed-position gradients.
   Each layer is position:absolute inset:0 so no edges ever appear.
   The alternating opacity creates the sense of movement. */
.hero-section::before,
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 60%, rgba(56, 182, 255, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 80% 30%, rgba(0, 112, 139, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 55% 80%, rgba(27, 166, 99, 0.15) 0%, transparent 45%);
  animation: glowPulse 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

/* Second layer — offset phase for cross-fade movement feel */
.hero-section::after {
  /* keep diagonal lines but also cross-fade */
  animation: linesDrift 28s linear infinite, lineFade 10s ease-in-out infinite alternate-reverse;
}

@keyframes glowPulse {
  0%   { opacity: 1; }
  30%  { opacity: 0.55; }
  60%  { opacity: 0.8; }
  100% { opacity: 0.45; }
}

@keyframes lineFade {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}

/* Diagonal lines — hero only, animated scroll across the surface.
   inset: -60px gives just enough bleed for the animation without
   causing page overflow. The section must have overflow:hidden. */
.hero-section {
  overflow: hidden !important;
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: -60px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 58px,
    rgba(255, 255, 255, 0.028) 58px,
    rgba(255, 255, 255, 0.028) 59px
  );
  animation: linesDrift 28s linear infinite;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

@keyframes linesDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(84px, 84px); }
}

/* Section content sits above all overlays */
.hero-section > .zpcontainer,
.hero-section > .zpsection-inner,
.cta-final > .zpcontainer,
.cta-final > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* gradient-bg-animated is now a no-op — keeping class name so existing
   Zoho sections don't error, but visual is handled by hero-section/cta-final */
.gradient-bg-animated {
  overflow: hidden;
  isolation: isolate;
}

/* ============================================================
   11. MAP PROCESS — HORIZONTAL LAYOUT
   5 steps in a horizontal row with connecting line and
   phase color differentiation. Cannot be done in Zoho natively.

   Build in Zoho: one Row with 5 equal columns (width 2:2:2:2:2).
   Apply "map-process-row" to the Row element.
   Apply "map-step-planning" or "map-step-impl" to each column's Box.

   Phase label: a full-width Paragraph element ABOVE the row.
   Apply "map-phase-label map-phase-planning" or
         "map-phase-label map-phase-impl" to those paragraphs.
   ============================================================ */

/* Connecting line between steps — drawn as ::before on the row */
.map-process-row {
  position: relative;
}
.map-process-row::before {
  content: '';
  position: absolute;
  top: 14px; /* aligns with center of 28px step number badges */
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(56, 182, 255, 0.3) 0%,
    rgba(56, 182, 255, 0.3) 70%,
    rgba(27, 166, 99, 0.3) 80%,
    rgba(27, 166, 99, 0.3) 100%
  );
  z-index: 0;
}

/* Each step column: flex column, centered, above the connecting line */
.map-process-row .zprow-col,
.map-process-row .zp-col {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* All direct children of step columns center themselves */
.map-process-row .zprow-col > *,
.map-process-row .zp-col > * {
  text-align: center !important;
  align-self: center !important;
}

/* Icon circle — planning phase (teal/blue) */
.map-icon-planning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(56, 182, 255, 0.12);
  color: var(--color-sky);
  margin: 0 auto var(--space-sm);
  position: relative;
  z-index: 1;
}

/* Icon circle — implementation phase (green) */
.map-icon-impl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(27, 166, 99, 0.12);
  color: #1ba663;
  margin: 0 auto var(--space-sm);
  position: relative;
  z-index: 1;
}

/* Phase label with horizontal rules flanking the text */
.map-phase-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.map-phase-label::before,
.map-phase-label::after {
  content: '';
  flex: 1;
  height: 1px;
}

.map-phase-planning {
  color: var(--color-sky);
}
.map-phase-planning::before,
.map-phase-planning::after {
  background: rgba(56, 182, 255, 0.3);
}

.map-phase-impl {
  color: #1ba663;
}
.map-phase-impl::before,
.map-phase-impl::after {
  background: rgba(27, 166, 99, 0.3);
}

/* Step number badges — centered horizontally, line passes through them.
   Numbers sit at top of column; icons sit below with gap.
   Order in Zoho: step number paragraph → icon element → heading → text */
.map-step-num-planning {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--color-sky) !important;
  color: var(--color-white) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  margin: 0 auto 16px auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.map-step-num-impl {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1ba663 !important;
  color: var(--color-white) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  margin: 0 auto 16px auto !important;
  position: relative !important;
  z-index: 2 !important;
}


/* Service card top border — Zoho can't target one border side independently.
   Apply "card-border-top" to a Box element in Zoho.
   Targets both the box element and its inner wrapper div. */
/* card-border-top — uses inset box-shadow to fake a top border.
   box-shadow is additive and never conflicts with ::before pseudo-elements.
   Zoho's inline border styles don't affect box-shadow at all.
   The inset values: 0 3px 0 0 draws a 3px line at the top only.
   Apply class to the Box element in Zoho. */
.card-border-top {
  box-shadow:
    inset 0 3px 0 0 var(--accent-primary),
    0 3px 4px 0 rgba(0,0,0,0.08) !important;
}

.card-border-top-gold {
  box-shadow:
    inset 0 3px 0 0 var(--accent-gold),
    0 3px 4px 0 rgba(0,0,0,0.08) !important;
}

.card-border-top-teal {
  box-shadow:
    inset 0 3px 0 0 var(--accent-teal),
    0 3px 4px 0 rgba(0,0,0,0.08) !important;
}

/* ============================================================
   12. SERVICE CARDS
   Hover reveal effect — left accent bar animates in via inset
   box-shadow. This approach is Zoho-safe: no pseudo-element
   positioning dependency, no overflow-hidden clipping issues.
   Background, border, shadow, padding → set in Zoho.
   ============================================================ */

.service-card {
  transition: transform var(--transition-base),
              box-shadow 0.4s ease !important;
  box-shadow: inset 0px 0 0 0 var(--accent-primary) !important;
}

.service-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: inset 3px 0 0 0 var(--accent-primary),
              var(--shadow-lift) !important;
}


/* ============================================================
   13. PROBLEM CARDS (Section 2)
   Left red accent bar animates in on hover via inset box-shadow.
   Zoho-safe: no pseudo-element positioning dependency.
   ============================================================ */

.problem-card {
  transition: transform var(--transition-base),
              box-shadow 0.35s ease !important;
  box-shadow: inset 0px 0 0 0 #e53e3e !important;
}

.problem-card:hover {
  transform: translateX(4px) !important;
  box-shadow: inset 3px 0 0 0 #e53e3e !important;
}


/* ============================================================
   13b. CPA NOTE SECTION
   Better than a left border with centered text.
   Apply "cpa-note" to the section, "cpa-note-box" to the inner Box.
   Content should be left-aligned in Zoho.
   ============================================================ */

/* CPA note heading accent line — applied via ::before on the heading
   element. Add class "cpa-note-heading" to the H3 in Zoho.
   No extra element needed. */
.cpa-note-heading {
  position: relative !important;
  padding-top: 20px !important;
}

.cpa-note-heading::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--accent-teal) !important;
  border-radius: 2px !important;
}

/* Box container — clean white card with subtle shadow on teal bg */
.cpa-note-box {
  background: var(--color-white) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px 0 rgba(131, 174, 175, 0.18) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.cpa-note-box:hover {
  box-shadow: 0 8px 36px 0 rgba(131, 174, 175, 0.28) !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   14. FINAL CTA SECTION
   Faint watermark word behind the headline — decorative only.
   ============================================================ */

.cta-final {
  position: relative;
  overflow: hidden;
}

/* Dot-grid pattern — subtle "connected network" texture.
   Reinforces the coordination/connection theme without literal text.
   Fades out at edges so it doesn't compete with the content. */
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  /* Vignette mask — dots fade out toward center where text lives */
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, black 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, black 80%);
  pointer-events: none;
  z-index: 0;
}

.cta-final > .zpcontainer,
.cta-final > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ============================================================
   15. NAVIGATION — FLOATING PILL ON SCROLL
   Zoho cannot animate header position/shape on scroll.
   The JS adds "scrolled" class; this CSS handles the visual change.
   ============================================================ */

/* Kill Zoho's entrance animation on header */
.theme-header,
[data-megamenu-content-container] {
  animation: none !important;
}

/* Remove Zoho's default header bottom border */
.zpheader-style-01 {
  border-bottom: none !important;
  border-block-end: none !important;
}

/* Hidden state during pill ↔ bar swap (prevents flash) */
.theme-header.nav-hidden:not(.theme-toggle-animate) {
  transition: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Base state — only transition properties, no colors */
.theme-header {
  box-shadow: none !important;
  border-radius: 0 !important;
  transition:
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    right 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Nav link font only — no color (set in Zoho) */
.theme-header .theme-menu-name {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  transition: color var(--transition-fast) !important;
}

/* Scrolled pill — desktop */
@media (min-width: 992px) {
  .theme-header.scrolled {
    top: 12px !important;
    left: 24px !important;
    right: 24px !important;
    width: calc(100% - 48px) !important;
    border-radius: 14px !important;
    background: rgba(13, 28, 58, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.22) !important;
    /* No backdrop-filter here — moved to ::before to avoid creating a
       stacking context that traps position:fixed children (the mobile menu) */
  }

  /* Blur lives on ::before so it doesn't affect child stacking contexts */
  .theme-header.scrolled::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }
}

/* Scrolled pill — tablet and mobile */
@media (max-width: 991px) {
  .theme-header.scrolled {
    position: fixed !important;
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    border-radius: 14px !important;
    background: rgba(13, 28, 58, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.22) !important;
    /* No backdrop-filter here — moved to ::before */
  }

  .theme-header.scrolled::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }
}

/* Desktop submenu — frosted glass */
@media (min-width: 992px) {
  .theme-navigation-and-icons .theme-menu-area .theme-menu ul li > ul {
    background: rgba(13, 28, 58, 0.55) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden !important;
  }

  .theme-navigation-and-icons .theme-menu-area .theme-menu ul li > ul li {
    background: transparent !important;
    box-shadow: none !important;
  }

  .theme-navigation-and-icons .theme-menu-area .theme-menu ul li > ul li:first-of-type {
    border-top: none !important;
  }
}

/* Mobile menu — frosted glass */
@media (max-width: 991px) {
  .theme-responsive-menu-area .theme-responsive-menu {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu {
    border-block-start: none !important;
    border-top: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li {
    border-bottom: none !important;
    border-top: none !important;
    border-block-end: none !important;
    border-block-start: none !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li a .theme-menu-name {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li:hover a .theme-menu-name {
    color: #ffffff !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li a {
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li a .theme-menu-content {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Hide desktop arrow span — Zoho shows the responsive one on mobile/tablet */
  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li a .theme-sub-li-menu.theme-non-responsive-menu {
    display: none !important;
  }

  /* Zoho draws the chevron on .theme-submenu-down-arrow::after using:
     border-inline-end + border-block-start + rotate(135deg)
     We just need to fix position (Zoho uses position:absolute which drifts)
     and tint the border white. Don't touch ::after — Zoho owns it. */
  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li a .theme-sub-li-menu.theme-responsive-menu {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-inline-start: 6px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
  }

  /* Tint Zoho's arrow white — it inherits currentColor by default (dark on dark) */
  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li a .theme-sub-li-menu.theme-responsive-menu::after {
    border-color: rgba(255, 255, 255, 0.65) !important;
  }

  /* Submenu items */
  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li > ul li {
    background: rgba(0, 0, 0, 0.15) !important;
    border-block-end: none !important;
    border-block-start: none !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li > ul li a .theme-menu-name {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li > ul li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .theme-responsive-menu-area .theme-responsive-menu .theme-menu ul li > ul li:hover a .theme-menu-name {
    color: #ffffff !important;
  }
}

/* ============================================================
   16. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-lightgray); }
::-webkit-scrollbar-thumb { background: var(--accent-teal); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-navy); }


/* ============================================================
   17. RESPONSIVE
   ============================================================ */

/* ── Tablet (768–991px) ── 
   Proportional scale of Zoho base sizes (approx 80%):
   H1 56→44 | H2 40→32 | H3 28→23 | H4 22→19 | H5 18→16 | H6 14→13
   body 17→16 | btn-md 18→16 */
@media (max-width: 991px) {
  /* Headings — covers both dedicated heading elements AND text elements
     with heading tags typed directly inside them (zptext h3 pattern) */
  .zpelem-heading h1,
  .zpelem-iconheading h1,
  .zpelem-iconheadingtext h1,
  .zptext h1 { font-size: 44px !important; line-height: 1.15 !important; }

  .zpelem-heading h2,
  .zpelem-iconheading h2,
  .zpelem-iconheadingtext h2,
  .zptext h2 { font-size: 32px !important; line-height: 1.2 !important; }

  .zpelem-heading h3,
  .zpelem-iconheading h3,
  .zpelem-iconheadingtext h3,
  .zptext h3 { font-size: 23px !important; line-height: 1.3 !important; }

  .zpelem-heading h4,
  .zpelem-iconheading h4,
  .zpelem-iconheadingtext h4,
  .zptext h4 { font-size: 19px !important; line-height: 1.35 !important; }

  .zpelem-heading h5,
  .zpelem-iconheading h5,
  .zpelem-iconheadingtext h5,
  .zptext h5 { font-size: 16px !important; }

  .zpelem-heading h6,
  .zpelem-iconheading h6,
  .zpelem-iconheadingtext h6,
  .zptext h6 { font-size: 13px !important; }

  /* Stat-number headings are sized individually in Zoho — don't scale them */
  .zpelem-heading.stat-number h1,
  .zpelem-heading.stat-number h2,
  .zpelem-heading.stat-number h3,
  .zpelem-heading.stat-number h4,
  .zpelem-heading.stat-number h5 { font-size: unset !important; }

  /* Body text — .zpelem-text > .zptext > p/span/div */
  .zptext p,
  .zptext span { font-size: 16px !important; line-height: 1.7 !important; }

  /* Eyebrow labels */
  .eyebrow { font-size: 11px !important; letter-spacing: 0.1em !important; }

  /* Buttons */
  .zpbutton.zpbutton-size-sm { font-size: 14px !important; }
  .zpbutton.zpbutton-size-md { font-size: 16px !important; }
  .zpbutton.zpbutton-size-lg { font-size: 17px !important; }

  /* MAP — stack vertically, full center */
  .map-process-row::before {
    display: none;
  }

  /* Force every element inside a map column to center */
  .map-process-row .zprow-col,
  .map-process-row .zp-col,
  .map-process-row [class*="zpelem-col"],
  .map-process-row [class*="zpcol-"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-bottom: 2.5rem !important;
  }

  .map-process-row .zprow-col > *,
  .map-process-row .zp-col > *,
  .map-process-row [class*="zpelem-col"] > *,
  .map-process-row [class*="zpcol-"] > * {
    text-align: center !important;
    align-self: center !important;
  }

  .map-icon-planning,
  .map-icon-impl {
    margin: 0 auto 12px auto !important;
  }

  .map-step-num-planning,
  .map-step-num-impl {
    margin: 0 auto 12px auto !important;
  }

  /* Stats section — force center on all heading/text inside stat elements */
  .stat-number,
  .zpelem-heading.stat-number,
  .zpelem-heading.stat-number h1,
  .zpelem-heading.stat-number h2,
  .zpelem-heading.stat-number h3,
  .zpelem-heading.stat-number h4,
  .stat-label,
  .zpelem-heading.stat-label,
  .zpelem-heading.stat-label h1,
  .zpelem-heading.stat-label h2,
  .zpelem-heading.stat-label h3,
  .zpelem-heading.stat-label h4,
  .zpelem-text.stat-label p {
    text-align: center !important;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  .hero-section .zpheading h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* Mobile type scaling (approx 65% of desktop):
     H1 56→36 | H2 40→27 | H3 28→21 | H4 22→18 | H5 18→15 | H6 14→12
     body 17→15 | btn-md 18→15 */
  .zpelem-heading h1,
  .zpelem-iconheading h1,
  .zpelem-iconheadingtext h1,
  .zptext h1 { font-size: 36px !important; line-height: 1.15 !important; }

  .zpelem-heading h2,
  .zpelem-iconheading h2,
  .zpelem-iconheadingtext h2,
  .zptext h2 { font-size: 27px !important; line-height: 1.2 !important; }

  .zpelem-heading h3,
  .zpelem-iconheading h3,
  .zpelem-iconheadingtext h3,
  .zptext h3 { font-size: 21px !important; line-height: 1.3 !important; }

  .zpelem-heading h4,
  .zpelem-iconheading h4,
  .zpelem-iconheadingtext h4,
  .zptext h4 { font-size: 18px !important; }

  .zpelem-heading h5,
  .zpelem-iconheading h5,
  .zpelem-iconheadingtext h5,
  .zptext h5 { font-size: 15px !important; }

  .zpelem-heading h6,
  .zpelem-iconheading h6,
  .zpelem-iconheadingtext h6,
  .zptext h6 { font-size: 12px !important; }

  /* Stat-number exempt on mobile too */
  .zpelem-heading.stat-number h1,
  .zpelem-heading.stat-number h2,
  .zpelem-heading.stat-number h3,
  .zpelem-heading.stat-number h4,
  .zpelem-heading.stat-number h5 { font-size: unset !important; }

  .zptext p,
  .zptext span { font-size: 15px !important; line-height: 1.65 !important; }

  .eyebrow { font-size: 10px !important; }

  .zpbutton.zpbutton-size-sm { font-size: 13px !important; }
  .zpbutton.zpbutton-size-md { font-size: 15px !important; }
  .zpbutton.zpbutton-size-lg { font-size: 16px !important; }
}



/* ============================================================
   18. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gradient-bg-animated {
    animation: none !important;
  }

  .animate-float,
  .animate-pulse,
  .pulse-teal,
  .pulse-gold,
  .pulse-sky,
  .pulse-navy,
  .pulse-white,
  .pulse-red {
    animation: none !important;
  }

  .hero-section::before,
  .hero-section::after,
  .cta-final::before {
    animation: none !important;
    will-change: auto !important;
  }
}


/* ============================================================
   HOW IT WORKS PAGE
   All classes scoped to this page's components.
   Builds on the global design system — no token redefinitions.
   ============================================================ */


/* ============================================================
   HIW-1. HERO VARIANT — SIMPLE
   Same dark gradient as homepage hero but without animated
   diagonal lines. Interior pages feel calmer than the homepage.
   Apply "hero-section hero-simple" to the section in Zoho.
   ============================================================ */

.hero-simple::after {
  display: none !important;
}

.hero-simple::before {
  animation: none !important;
  opacity: 0.7;
}

/* Slightly different radial composition — more centered, less dynamic */
.hero-simple.hero-section::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(0, 112, 139, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(56, 182, 255, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 60% at 80% 20%, rgba(27, 166, 99, 0.12) 0%, transparent 45%);
}


/* ============================================================
   HIW-2. PULL QUOTE
   For the "We don't just advise — we quarterback" line.
   Apply "hiw-pull-quote" to a Paragraph element in Zoho.
   Set the text to whatever size/color you want in Zoho —
   this CSS only handles the decorative framing.
   ============================================================ */

.hiw-pull-quote {
  position: relative !important;
  /* Horizontal padding creates room for the quote marks on each side.
     The marks are absolute-positioned within this padding zone.
     At max-width ~700px the marks sit roughly 8–10px inside each edge
     of the element — close to the text but not touching it. */
  padding: 32px 72px !important;
  text-align: center !important;
  border-top: 1px solid rgba(210, 180, 80, 0.2) !important;
  border-bottom: 1px solid rgba(210, 180, 80, 0.2) !important;
  margin: 40px 0 !important;
}

/* Opening " — left side, vertically centered with the text */
.hiw-pull-quote::before {
  content: '\201C' !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 56px !important;
  line-height: 1 !important;
  font-family: Georgia, serif !important;
  color: var(--accent-gold) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* Closing " — right side, vertically centered */
.hiw-pull-quote::after {
  content: '\201D' !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 56px !important;
  line-height: 1 !important;
  font-family: Georgia, serif !important;
  color: var(--accent-gold) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}


/* ============================================================
   HIW-3. MAP PROCESS — TWO-COLUMN CARD GRID
   Steps render as cards in a 2-column grid (not single vertical stack).
   Steps 1-4: two per row. Step 5: full-width solo before phase break.
   Steps 6-7: implementation row, distinct green treatment.

   ZOHO BUILD per step pair:
   Row (2 equal columns, no padding in Zoho — CSS handles gap via margin)
     Column → apply "hiw-step hiw-step-planning" (or hiw-step-impl)
       Code Snippet: step badge
       Code Snippet: icon
       Heading H3
       Paragraph (body)
       Paragraph → apply "hiw-deliverables" (left border sub-section)
       Paragraph → apply "hiw-role"

   Step 5 alone: Row (1 column, max-width 560px centered)
     Column → apply "hiw-step hiw-step-planning hiw-step-solo"

   Gap between columns set in Zoho column settings.
   The column IS the card. Deliverables/role boxes go inside the column as normal boxes.
   ============================================================ */

/* Card container — each column IS the card */
.hiw-step {
  position: relative !important;
  padding: 36px 32px 36px 32px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-white) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
  overflow: hidden !important;
}

.hiw-step:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

/* Top color bar — phase color accent */
.hiw-step::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  pointer-events: none !important;
}

/* Step number badge — top-left corner of card */
.hiw-step-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
}

/* Planning phase (steps 1–5) — teal */
.hiw-step-planning::before {
  background: linear-gradient(
    to right,
    var(--accent-teal),
    var(--accent-primary)
  ) !important;
}

.hiw-step-planning .hiw-step-badge {
  background: var(--accent-teal) !important;
}

/* Implementation phase (steps 6–7) — green */
.hiw-step-impl::before {
  background: linear-gradient(
    to right,
    #1ba663,
    #22c97a
  ) !important;
}

.hiw-step-impl .hiw-step-badge {
  background: #1ba663 !important;
}

/* Solo step (step 5) — centered, narrower */
.hiw-step-solo {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Icon containers */
.hiw-icon-planning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  background: rgba(0, 112, 139, 0.1) !important;
  color: var(--accent-teal) !important;
  margin-bottom: 14px !important;
  flex-shrink: 0 !important;
}

.hiw-icon-impl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  background: rgba(27, 166, 99, 0.1) !important;
  color: #1ba663 !important;
  margin-bottom: 14px !important;
  flex-shrink: 0 !important;
}

/* Deliverables sub-section — apply to a Box inside the column.
   Creates a visual sub-block with left border + tinted background. */
.hiw-deliverables,
.zptext.hiw-deliverables,
.zpelem-text.hiw-deliverables {
  border-left: 3px solid var(--accent-teal) !important;
  padding: 14px 16px !important;
  margin-top: 20px !important;
  background: rgba(0, 112, 139, 0.04) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.hiw-step-impl .hiw-deliverables,
.zptext.hiw-deliverables-impl,
.zpelem-text.hiw-deliverables-impl {
  border-left-color: #1ba663 !important;
  background: rgba(27, 166, 99, 0.04) !important;
}

/* Role sub-section — lighter, no border */
.hiw-role,
.zptext.hiw-role,
.zpelem-text.hiw-role {
  background: var(--color-offwhite) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  margin-top: 10px !important;
}

/* "Optional" badge */
.hiw-optional-badge {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent-teal) !important;
  background: rgba(0, 112, 139, 0.1) !important;
  border-radius: 100px !important;
  padding: 2px 10px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
}

/* Implementation steps — slightly different card background to signal phase shift */
.hiw-step-impl {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(27, 166, 99, 0.03) 100%
  ) !important;
}

/* ============================================================
   HIW-3b. ACCORDION VARIANT (optional alternative to grid layout)
   Apply "hiw-accordion-section" to the section containing steps.
   JS handles open/close; CSS handles the visual transition.
   First step is open by default (JS adds "hiw-open" on init).
   ============================================================ */

.hiw-accordion-section .hiw-step {
  cursor: pointer !important;
}

/* The collapsible body — wraps everything below the step heading */
.hiw-step-body {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease !important;
  pointer-events: none !important;
}

.hiw-step.hiw-open .hiw-step-body {
  max-height: 600px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Chevron indicator on the step heading area */
.hiw-step-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

.hiw-step-toggle::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform 0.3s ease !important;
  flex-shrink: 0 !important;
  opacity: 0.5 !important;
  margin-left: 12px !important;
}

.hiw-step.hiw-open .hiw-step-toggle::after {
  transform: rotate(-135deg) !important;
}

/* ============================================================
   HIW-4. PHASE DIVIDER HEADER
   The "Proactive Planning Phase" / "Solution Implementation Phase"
   banners that sit between step groups.
   Apply "hiw-phase-divider" to a Section in Zoho.
   Then apply "hiw-phase-planning" or "hiw-phase-impl" to the
   Paragraph element inside it.
   ============================================================ */

.hiw-phase-divider {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 48px 0 32px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.hiw-phase-divider::before,
.hiw-phase-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
}

.hiw-phase-planning {
  color: var(--accent-teal) !important;
}

.hiw-phase-planning.hiw-phase-divider::before,
.hiw-phase-planning.hiw-phase-divider::after {
  background: rgba(0, 112, 139, 0.3) !important;
}

.hiw-phase-impl {
  color: #1ba663 !important;
}

.hiw-phase-impl.hiw-phase-divider::before,
.hiw-phase-impl.hiw-phase-divider::after {
  background: rgba(27, 166, 99, 0.3) !important;
}


/* ============================================================
   HIW-5. AFTER IMPLEMENTATION PARTNERSHIP BOX
   Apply "hiw-partnership-box" to a Box element in Zoho.
   ============================================================ */

.hiw-partnership-box {
  background: linear-gradient(
    135deg,
    rgba(0, 112, 139, 0.06) 0%,
    rgba(56, 182, 255, 0.04) 100%
  ) !important;
  border: 1px solid rgba(0, 112, 139, 0.18) !important;
  border-radius: var(--radius-lg) !important;
  padding: 56px 64px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle corner accent */
.hiw-partnership-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    to right,
    var(--accent-teal) 0%,
    var(--accent-primary) 50%,
    transparent 100%
  ) !important;
}


/* ============================================================
   HIW-6. FEE COMPARISON COLUMNS
   Apply "hiw-fee-col" to each Box in the two-column row.
   Apply "hiw-fee-structure" to the fee callout box within.
   Apply "hiw-role-callout" to the full-width box below.
   ============================================================ */

.hiw-fee-col {
  background: var(--color-offwhite) !important;
  border-radius: var(--radius-lg) !important;
  padding: 40px 36px !important;
  height: 100% !important;
  box-shadow: var(--shadow-sm) !important;
}

.hiw-fee-structure {
  background: var(--color-white) !important;
  border: 1px solid rgba(0, 112, 139, 0.15) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px 24px !important;
  margin-top: 24px !important;
}

.hiw-fee-structure-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--accent-teal) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.hiw-role-callout {
  background: linear-gradient(
    135deg,
    rgba(0, 112, 139, 0.08) 0%,
    rgba(56, 182, 255, 0.05) 100%
  ) !important;
  border: 1px solid rgba(0, 112, 139, 0.2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px 48px !important;
  margin-top: 32px !important;
  position: relative !important;
}

.hiw-role-callout::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(
    to bottom,
    var(--accent-teal),
    var(--accent-primary)
  ) !important;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}


/* ============================================================
   HIW-7. QUARTERBACK BENEFIT CARDS
   Apply "hiw-qb-card" to each Box in the three-column row.
   ============================================================ */

.hiw-qb-card {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px 32px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hiw-qb-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

/* Top accent line — teal for all three */
.hiw-qb-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    to right,
    var(--accent-teal),
    var(--accent-primary)
  ) !important;
}

/* Icon wrapper */
.hiw-qb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  background: rgba(0, 112, 139, 0.1) !important;
  color: var(--accent-teal) !important;
  margin-bottom: 20px !important;
}



/* ============================================================
   BACKGROUND VARIETY — Section texture/pattern utilities
   Apply to Section elements in Zoho. Set section background
   color first in Zoho, then apply class for texture overlay.
   ============================================================ */

/* Soft teal background — light sections that need a "process" feel */
.bg-teal-soft {
  background-color: #f0f7f9 !important;
}

/* Warm off-white — for narrative/text-heavy sections */
.bg-warm {
  background-color: #faf9f7 !important;
}

/* Light dot pattern — for light sections (inverted from the dark CTA version) */
.section-dots-light {
  position: relative;
  overflow: hidden;
}
.section-dots-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 112, 139, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.section-dots-light > .zpcontainer,
.section-dots-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Diagonal stripe texture — very subtle, for dark sections */
.section-stripe-dark {
  position: relative;
  overflow: hidden;
}
.section-stripe-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 40px,
    rgba(255, 255, 255, 0.018) 40px,
    rgba(255, 255, 255, 0.018) 41px
  );
  pointer-events: none;
  z-index: 0;
}
.section-stripe-dark > .zpcontainer,
.section-stripe-dark > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Topographic contour lines — dark navy section.
   Uses SVG data URI for the contour pattern.
   Pair with a dark background color in Zoho. */
.section-topo {
  position: relative;
  overflow: hidden;
}
.section-topo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cpath d='M 0 200 Q 100 150 200 200 T 400 200' stroke='rgba(56,182,255,0.06)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 180 Q 100 130 200 180 T 400 180' stroke='rgba(56,182,255,0.05)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 160 Q 100 110 200 160 T 400 160' stroke='rgba(56,182,255,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 220 Q 100 170 200 220 T 400 220' stroke='rgba(56,182,255,0.05)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 240 Q 100 190 200 240 T 400 240' stroke='rgba(56,182,255,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 120 Q 80 80 160 120 Q 240 160 320 120 T 400 120' stroke='rgba(0,112,139,0.06)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 280 Q 80 240 160 280 Q 240 320 320 280 T 400 280' stroke='rgba(0,112,139,0.05)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 80 Q 60 50 120 80 Q 180 110 240 80 Q 300 50 400 80' stroke='rgba(56,182,255,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M 0 320 Q 60 290 120 320 Q 180 350 240 320 Q 300 290 400 320' stroke='rgba(56,182,255,0.04)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.section-topo > .zpcontainer,
.section-topo > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Gold radial bloom — dark section with a warm glow center.
   Good for CTA and closing sections. Pair with dark navy background. */
.section-gold-bloom {
  position: relative;
  overflow: hidden;
}
.section-gold-bloom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(210, 180, 80, 0.1) 0%,
    rgba(210, 180, 80, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.section-gold-bloom > .zpcontainer,
.section-gold-bloom > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Split background — left teal-tinted, right white.
   Use on 2-column rows where left col has an image/stat.
   Apply to the Section containing the row. */
.section-split-light {
  background: linear-gradient(
    to right,
    #f0f7f9 0%,
    #f0f7f9 50%,
    #ffffff 50%,
    #ffffff 100%
  ) !important;
}

/* Mesh grid — fine lines, dark sections */
.section-mesh {
  position: relative;
  overflow: hidden;
}
.section-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 182, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 182, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
.section-mesh > .zpcontainer,
.section-mesh > .zpsection-inner {
  position: relative;
  z-index: 1;
}




/* ============================================================
   BACKGROUND & TEXTURE EXPANSION
   All classes apply to Section elements in Zoho.
   Set a base background color in Zoho first, then add the class.
   Each class documents which pseudo-element it uses so you can
   layer compatible classes without collision.

   PSEUDO-ELEMENT MAP (existing):
     section-dots-light    → ::after
     section-stripe-dark   → ::after
     section-topo          → ::before
     section-gold-bloom    → ::before
     section-mesh          → ::before

   NEW classes below document their pseudo-element in comments.
   When layering two classes, confirm they use different pseudo-elements.
   ============================================================ */


/* ── LIGHT SECTION TEXTURES ──────────────────────────────────
   All pair with light background colors (white, #f7fafc, #faf9f7)
   ──────────────────────────────────────────────────────────── */

/* Fine crosshatch grid — light sections.
   Tighter than section-mesh. Good for data/stats sections.
   Uses: ::before
   Pair with: white or #f7fafc background */
.section-grid-light {
  position: relative;
  overflow: hidden;
}
.section-grid-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 112, 139, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 112, 139, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.section-grid-light > .zpcontainer,
.section-grid-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Diagonal lines — light sections.
   Subtle hatching, slightly warmer than stripe-dark.
   Uses: ::before
   Pair with: #f7fafc or bg-warm background */
.section-hatch-light {
  position: relative;
  overflow: hidden;
}
.section-hatch-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 28px,
    rgba(0, 112, 139, 0.04) 28px,
    rgba(0, 112, 139, 0.04) 29px
  );
  pointer-events: none;
  z-index: 0;
}
.section-hatch-light > .zpcontainer,
.section-hatch-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Large dot grid — light sections.
   Bigger, airier dots vs section-dots-light (24px → 48px grid).
   Uses: ::before
   Pair with: white or bg-teal-soft */
.section-dots-large {
  position: relative;
  overflow: hidden;
}
.section-dots-large::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 112, 139, 0.07) 1.5px, transparent 1.5px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
.section-dots-large > .zpcontainer,
.section-dots-large > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Wavy lines — light sections.
   Horizontal sine curves layered at varying opacity.
   Good for hero alternates or testimonial sections.
   Uses: ::before
   Pair with: white or very light blue */
.section-wave-light {
  position: relative;
  overflow: hidden;
}
.section-wave-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cpath d='M0 100 Q150 60 300 100 T600 100' stroke='rgba(0,112,139,0.07)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 120 Q150 80 300 120 T600 120' stroke='rgba(0,112,139,0.05)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 140 Q150 100 300 140 T600 140' stroke='rgba(0,112,139,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 80 Q150 40 300 80 T600 80' stroke='rgba(0,112,139,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 160 Q150 120 300 160 T600 160' stroke='rgba(0,112,139,0.03)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 60 Q150 20 300 60 T600 60' stroke='rgba(56,182,255,0.04)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 200 Q150 160 300 200 T600 200' stroke='rgba(56,182,255,0.04)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 600px 300px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.section-wave-light > .zpcontainer,
.section-wave-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Teal corner bloom — light sections.
   Radial teal glow in the top-left corner.
   Complements gold-bloom on dark sections.
   Uses: ::before
   Pair with: white or #f7fafc */
.section-teal-bloom {
  position: relative;
  overflow: hidden;
}
.section-teal-bloom::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle at 0% 0%,
    rgba(0, 112, 139, 0.07) 0%,
    rgba(0, 112, 139, 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.section-teal-bloom > .zpcontainer,
.section-teal-bloom > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Noise grain — light sections.
   Subtle paper texture. Use on any light section for warmth.
   Uses: ::after
   Can layer with any ::before class above */
.section-grain-light {
  position: relative;
}
.section-grain-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.section-grain-light > .zpcontainer,
.section-grain-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── DARK SECTION TEXTURES ───────────────────────────────────
   Pair with navy/dark backgrounds (#0d1f3c, #1a365d)
   ──────────────────────────────────────────────────────────── */

/* Hexagonal grid — dark sections.
   More geometric than mesh, less structured than topo.
   Uses: ::before
   Pair with: #0d1f3c background */
.section-hex-dark {
  position: relative;
  overflow: hidden;
}
.section-hex-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z' fill='none' stroke='rgba(56,182,255,0.05)' stroke-width='1'/%3E%3Cpath d='M28 64 L56 80 L56 100' fill='none' stroke='rgba(56,182,255,0.05)' stroke-width='1'/%3E%3Cpath d='M28 64 L0 80 L0 100' fill='none' stroke='rgba(56,182,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  pointer-events: none;
  z-index: 0;
}
.section-hex-dark > .zpcontainer,
.section-hex-dark > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Scattered dots — dark sections.
   Randomized dot field, less grid-like than mesh.
   Uses: ::before
   Pair with: #1a365d or #0d1f3c background */
.section-scatter-dark {
  position: relative;
  overflow: hidden;
}
.section-scatter-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(56, 182, 255, 0.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(56, 182, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 112, 139, 0.12) 1px, transparent 1px);
  background-size: 73px 83px, 101px 67px, 59px 109px;
  background-position: 12px 18px, 44px 52px, 28px 76px;
  pointer-events: none;
  z-index: 0;
}
.section-scatter-dark > .zpcontainer,
.section-scatter-dark > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Teal radial bloom — dark sections.
   Teal glow at center (vs gold-bloom which is warm/gold).
   Good for process or "how it works" dark sections.
   Uses: ::before
   Pair with: #0d1f3c or #1a365d background */
.section-teal-glow {
  position: relative;
  overflow: hidden;
}
.section-teal-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(0, 112, 139, 0.14) 0%,
    rgba(56, 182, 255, 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.section-teal-glow > .zpcontainer,
.section-teal-glow > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Corner accent — dark sections.
   Bright teal/sky streak from top-right corner.
   Directional energy, good for hero alternates.
   Uses: ::before + ::after (both needed for the full effect)
   Pair with: #0d1f3c background */
.section-corner-accent {
  position: relative;
  overflow: hidden;
}
.section-corner-accent::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle at 100% 0%,
    rgba(56, 182, 255, 0.12) 0%,
    rgba(56, 182, 255, 0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.section-corner-accent::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle at 0% 100%,
    rgba(0, 112, 139, 0.1) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}
.section-corner-accent > .zpcontainer,
.section-corner-accent > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Dark grain — dark sections.
   Same grain overlay as light version but tuned for dark.
   Uses: ::after
   Can layer with any dark ::before class above */
.section-grain-dark {
  position: relative;
}
.section-grain-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.section-grain-dark > .zpcontainer,
.section-grain-dark > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── GRADIENT BACKGROUNDS ────────────────────────────────────
   Apply to Section in Zoho — these set the background color
   so no Zoho background color needed (or set same dark navy).
   ──────────────────────────────────────────────────────────── */

/* Deep dark — darker than gradient-navy, no blue shift */
.gradient-deep {
  background: linear-gradient(160deg, #0a1628 0%, #050e1a 100%) !important;
}

/* Navy to teal diagonal — vivid, good for hero sections */
.gradient-ocean {
  background: linear-gradient(140deg, #1a365d 0%, #0c3a52 50%, #0e5f6e 100%) !important;
}

/* Warm navy — slight amber/gold undertone, good for CTA */
.gradient-dusk {
  background: linear-gradient(155deg, #1a2a4a 0%, #1f1a28 60%, #2a1a1f 100%) !important;
}

/* Light teal wash — for soft intro sections */
.gradient-mist {
  background: linear-gradient(160deg, #f0f9fb 0%, #e8f5f8 100%) !important;
}

/* Warm cream — richer than bg-warm, slight golden tint */
.gradient-parchment {
  background: linear-gradient(150deg, #fdfaf5 0%, #f7f3e8 100%) !important;
}

/* Gold gradient — for accent panels or highlight rows */
.gradient-gold {
  background: linear-gradient(140deg, #2a1f08 0%, #1e1a0e 60%, #0d0d0a 100%) !important;
}


/* ── ANIMATED BACKGROUNDS ────────────────────────────────────
   CSS-only animations — no JS needed.
   Apply to Section in Zoho. Set background transparent or dark in Zoho
   so the animation fills the section.
   ──────────────────────────────────────────────────────────── */

/* Slow color drift — dark navy to teal shift.
   The classic "living" dark background.
   Uses: direct background animation on element */
.section-drift {
  background: linear-gradient(
    -45deg,
    #0d1f3c,
    #0c3045,
    #0e3d44,
    #1a365d
  );
  background-size: 400% 400%;
  animation: drift 18s ease infinite;
}
@keyframes drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.section-drift > .zpcontainer,
.section-drift > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Shimmer — very subtle brightness pulse on dark backgrounds.
   Less motion than drift. Good for "premium" static-looking sections.
   Uses: ::before shimmer sweep */
.section-shimmer {
  position: relative;
  overflow: hidden;
}
.section-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(56, 182, 255, 0.04) 50%,
    transparent 80%
  );
  animation: shimmer 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}
.section-shimmer > .zpcontainer,
.section-shimmer > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Breathing glow — centered radial pulse.
   The glow expands and contracts slowly.
   Good for final CTA or hero where you want live energy.
   Uses: ::before */
.section-breathe {
  position: relative;
  overflow: hidden;
}
.section-breathe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(0, 112, 139, 0.16) 0%,
    rgba(56, 182, 255, 0.06) 40%,
    transparent 70%
  );
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.7; }
}
.section-breathe > .zpcontainer,
.section-breathe > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Rising particles — small dots float upward on a dark bg.
   Generated with layered CSS, no JS.
   Uses: ::before + ::after for two particle layers */
.section-particles {
  position: relative;
  overflow: hidden;
}
.section-particles::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(56, 182, 255, 0.35);
  box-shadow:
    /* Layer 1 — teal particles */
    80px  10vh rgba(56, 182, 255, 0.3),
    160px 30vh rgba(56, 182, 255, 0.2),
    240px 60vh rgba(56, 182, 255, 0.25),
    320px 20vh rgba(56, 182, 255, 0.15),
    400px 70vh rgba(56, 182, 255, 0.3),
    480px 40vh rgba(56, 182, 255, 0.2),
    560px 80vh rgba(56, 182, 255, 0.25),
    640px 15vh rgba(56, 182, 255, 0.2),
    720px 55vh rgba(56, 182, 255, 0.3),
    800px 35vh rgba(56, 182, 255, 0.2),
    /* Layer 2 — sky highlights */
    120px 50vh rgba(131, 174, 175, 0.2),
    260px 10vh rgba(131, 174, 175, 0.15),
    380px 85vh rgba(131, 174, 175, 0.2),
    500px 25vh rgba(131, 174, 175, 0.15),
    620px 65vh rgba(131, 174, 175, 0.2),
    740px 45vh rgba(131, 174, 175, 0.15);
  animation: rise 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.section-particles::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(210, 180, 80, 0.2);
  box-shadow:
    /* Gold accent particles — fewer, subtler */
    50px  40vh rgba(210, 180, 80, 0.15),
    190px 70vh rgba(210, 180, 80, 0.12),
    350px 20vh rgba(210, 180, 80, 0.15),
    530px 55vh rgba(210, 180, 80, 0.12),
    680px 30vh rgba(210, 180, 80, 0.15);
  animation: rise 28s linear infinite;
  animation-delay: -10s;
  pointer-events: none;
  z-index: 0;
}
@keyframes rise {
  0%   { transform: translateY(0)    rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}
.section-particles > .zpcontainer,
.section-particles > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Slow horizontal scan — a single bright line moves across the section.
   Subtle "radar" or "scanner" feel. Works on dark sections.
   Uses: ::before */
.section-scan {
  position: relative;
  overflow: hidden;
}
.section-scan::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(56, 182, 255, 0.4) 50%,
    transparent 100%
  );
  animation: scan 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes scan {
  0%   { top: -1px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.section-scan > .zpcontainer,
.section-scan > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── SPLIT / ASYMMETRIC BACKGROUNDS ──────────────────────────
   For 2-column rows with distinct left/right treatment.
   Apply to the Section containing the 2-col row.
   ──────────────────────────────────────────────────────────── */

/* Navy left, white right — dark feature image left side */
.section-split-dark-left {
  background: linear-gradient(
    to right,
    #1a365d 0%,
    #1a365d 50%,
    #ffffff 50%,
    #ffffff 100%
  ) !important;
}

/* Teal left, light right */
.section-split-teal {
  background: linear-gradient(
    to right,
    #0e3d44 0%,
    #0e3d44 50%,
    #f7fafc 50%,
    #f7fafc 100%
  ) !important;
}

/* Diagonal split — light to dark at a 10deg angle */
.section-split-diagonal {
  position: relative;
  overflow: hidden;
  background: #f7fafc !important;
}
.section-split-diagonal::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: #1a365d;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}
.section-split-diagonal > .zpcontainer,
.section-split-diagonal > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Bottom fade — dark navy fades to transparent at the bottom.
   Good for transitions between a dark hero and a light section below.
   Apply to the dark section. Uses: ::after */
.section-fade-bottom {
  position: relative;
}
.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(13, 31, 60, 0.95));
  pointer-events: none;
  z-index: 0;
}
.section-fade-bottom > .zpcontainer,
.section-fade-bottom > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── REDUCE MOTION SUPPORT ────────────────────────────────────
   Respects OS preference to reduce animation.
   Stops all looping animations for users who need it.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .section-drift,
  .section-shimmer::before,
  .section-breathe::before,
  .section-particles::before,
  .section-particles::after,
  .section-scan::before,
  .animate-float,
  .animate-pulse,
  .gradient-bg-animated {
    animation: none !important;
  }
}


/* ============================================================
   SERVICES OVERVIEW PAGE
   Only things Zoho cannot do natively.
   Background colors, font sizes, spacing, button styles,
   column borders → all handled in Zoho visual editor.
   ============================================================ */


/* ── AUTHORITY STRIP ─────────────────────────────────────────
   Apply "authority-strip" to the section for top/bottom borders.
   Apply "authority-strip-item" to each column for right border dividers.
   In Zoho: set background, font sizes, and text colors natively.
   ──────────────────────────────────────────────────────────── */

.authority-strip {
  border-top: 1px solid rgba(0, 112, 139, 0.15) !important;
  border-bottom: 1px solid rgba(0, 112, 139, 0.15) !important;
}

/* Right border acts as divider — last item in the row has no right border */
.authority-strip-item {
  border-right: 1px solid rgba(0, 112, 139, 0.15) !important;
}

.authority-strip-item:last-child {
  border-right: none !important;
}

/* Eyebrow label — Zoho can't do the uppercase letter-spacing tint combo */
.authority-strip-label {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent-teal) !important;
  margin-bottom: 6px !important;
}


/* ── SERVICE CARDS ───────────────────────────────────────────
   Apply "svc-card" to each column (column = card).
   Apply "svc-card-solo" additionally to card 5 column.
   Background, padding, font sizes → set in Zoho natively.
   ──────────────────────────────────────────────────────────── */

/* Hover lift + shadow — Zoho can't animate transforms */
.svc-card {
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.svc-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

/* Teal/sky gradient top bar */
.svc-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(to right, var(--accent-teal), var(--accent-primary)) !important;
  pointer-events: none !important;
}

/* Card 5 — solo, centered, max-width constrained */
.svc-card-solo {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ── EXAMPLES SUB-SECTION ────────────────────────────────────
   Apply "svc-examples" to a Box inside the card.
   The teal left border + tinted background can't be done natively.
   ──────────────────────────────────────────────────────────── */

.svc-examples {
  background: rgba(0, 112, 139, 0.04) !important;
  border-left: 3px solid var(--accent-teal) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 14px 16px !important;
}


/* ── SECTION 4: HOW SERVICES CONNECT ─────────────────────────
   Apply "services-connect-diagram" to the Code Snippet holding the SVG.
   Centers and constrains the diagram width.
   ──────────────────────────────────────────────────────────── */

.services-connect-diagram {
  display: block !important;
  max-width: 580px !important;
  margin: 40px auto 0 !important;
}

.services-connect-diagram svg {
  width: 100% !important;
  height: auto !important;
}


/* ── SECONDARY LINK (dark CTA section) ───────────────────────
   Apply "svc-secondary-link" to an <a> Code Snippet
   in the final dark CTA section.
   ──────────────────────────────────────────────────────────── */

.svc-secondary-link {
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.95rem !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  transition: color var(--transition-fast) !important;
  margin-top: 12px !important;
}

.svc-secondary-link:hover {
  color: var(--accent-gold) !important;
}


/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 767px) {
  .authority-strip-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 112, 139, 0.15) !important;
  }

  .authority-strip-item:last-child {
    border-bottom: none !important;
  }
}


/* ============================================================
   HIW-8. RESPONSIVE — mobile/tablet adjustments
   ============================================================ */

@media (max-width: 767px) {
  /* Steps stack to single column on mobile */
  .hiw-step {
    padding: 28px 20px !important;
    margin: 6px 0 !important;
  }

  .hiw-step-badge {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.65rem !important;
  }

  .hiw-partnership-box {
    padding: 36px 24px !important;
  }

  .hiw-fee-col {
    padding: 28px 20px !important;
  }

  .hiw-role-callout {
    padding: 28px 24px !important;
  }

  .hiw-qb-card {
    padding: 28px 24px !important;
  }

  .hiw-pull-quote {
    padding: 28px 52px !important;
  }
}

@media (max-width: 991px) {
  .hiw-phase-divider {
    margin: 32px 0 24px !important;
  }
}

/* ── STATUS BADGE ────────────────────────────────────────────
   Small inline pill for case study status labels.
   Apply "svc-status-badge" to a text element or Code Snippet span.
   Example: <span class="svc-status-badge">Status: In progress</span>
   ──────────────────────────────────────────────────────────── */

.svc-status-badge {
  display: inline-block !important;
  background: rgba(0, 112, 139, 0.08) !important;
  color: var(--accent-teal) !important;
  border: 1px solid rgba(0, 112, 139, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 5px 14px !important;
  margin-bottom: 20px !important;
}



/* ============================================================
   BACKGROUND & TEXTURE EXPANSION — ROUND 2
   Additions: animated light, aurora, radial burst, circuit,
   depth rings, ink blobs, dark dots, soft splits, text shimmer,
   staggered stripes, pre-composed combos.

   All pseudo-element usage noted per class.
   ============================================================ */


/* ── ANIMATED — LIGHT SECTIONS ───────────────────────────────
   Subtle motion for light backgrounds. Much gentler than dark variants.
   ──────────────────────────────────────────────────────────── */

/* Warm drift — cream/parchment tones rotate slowly.
   The light equivalent of section-drift.
   Good for hero alternates or feature sections on white.
   Uses: background-size animation on element itself */
.section-drift-light {
  background: linear-gradient(
    -45deg,
    #fdfaf5,
    #f0f7f9,
    #f7fafc,
    #faf9f7
  );
  background-size: 400% 400%;
  animation: drift-light 22s ease infinite;
}
@keyframes drift-light {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.section-drift-light > .zpcontainer,
.section-drift-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Teal pulse — light section with a slow teal glow that breathes.
   Pair with white or #f7fafc background in Zoho.
   Uses: ::before */
.section-breathe-light {
  position: relative;
  overflow: hidden;
}
.section-breathe-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 45% at 50% 50%,
    rgba(0, 112, 139, 0.06) 0%,
    rgba(0, 112, 139, 0.02) 50%,
    transparent 70%
  );
  animation: breathe-light 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes breathe-light {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.2); opacity: 0.5; }
}
.section-breathe-light > .zpcontainer,
.section-breathe-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Floating ink — two soft blobs drift slowly on a light bg.
   Organic, no hard geometry. Good for narrative sections.
   Uses: ::before + ::after */
.section-ink-light {
  position: relative;
  overflow: hidden;
}
.section-ink-light::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(
    ellipse,
    rgba(0, 112, 139, 0.06) 0%,
    transparent 70%
  );
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: ink-float1 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.section-ink-light::after {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(
    ellipse,
    rgba(56, 182, 255, 0.05) 0%,
    transparent 70%
  );
  border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%;
  animation: ink-float2 22s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ink-float1 {
  0%, 100% { transform: translate(0, 0)    scale(1);    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33%       { transform: translate(6%, 4%)  scale(1.05); border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
  66%       { transform: translate(-4%, 6%) scale(0.97); border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
}
@keyframes ink-float2 {
  0%, 100% { transform: translate(0, 0)     scale(1);    border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%; }
  33%       { transform: translate(-5%, -3%) scale(1.04); border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
  66%       { transform: translate(5%, -5%)  scale(0.98); border-radius: 60% 40% 55% 45% / 55% 45% 40% 60%; }
}
.section-ink-light > .zpcontainer,
.section-ink-light > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── ANIMATED — DARK SECTIONS ────────────────────────────────
   ──────────────────────────────────────────────────────────── */

/* Aurora — slow multi-color shift with purple/teal/navy.
   More complex than drift. Best for hero or featured dark sections.
   Uses: background-size animation on element + ::before layer */
.section-aurora {
  background: linear-gradient(
    -30deg,
    #0d1f3c,
    #0c2e45,
    #0b1e38,
    #14203a,
    #0a1a3a
  );
  background-size: 500% 500%;
  animation: aurora 25s ease infinite;
  position: relative;
  overflow: hidden;
}
.section-aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 20% 60%, rgba(0, 112, 139, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(56, 182, 255, 0.1)  0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 90%, rgba(26, 54, 93, 0.4)    0%, transparent 60%);
  animation: aurora-overlay 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes aurora {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
@keyframes aurora-overlay {
  0%   { opacity: 0.6; transform: scale(1)    translateX(0); }
  50%  { opacity: 1;   transform: scale(1.05) translateX(-3%); }
  100% { opacity: 0.7; transform: scale(0.98) translateX(3%); }
}
.section-aurora > .zpcontainer,
.section-aurora > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Ink blobs — dark version.
   Two large soft glowing shapes drift on a dark background.
   Organic, no hard geometry. Uses: ::before + ::after */
.section-ink-dark {
  position: relative;
  overflow: hidden;
}
.section-ink-dark::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -10%;
  width: 55%;
  height: 65%;
  background: radial-gradient(
    ellipse,
    rgba(0, 112, 139, 0.18) 0%,
    transparent 65%
  );
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  animation: ink-dark1 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.section-ink-dark::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -8%;
  width: 50%;
  height: 55%;
  background: radial-gradient(
    ellipse,
    rgba(56, 182, 255, 0.1) 0%,
    transparent 65%
  );
  border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%;
  animation: ink-dark2 25s ease-in-out infinite;
  animation-delay: -8s;
  pointer-events: none;
  z-index: 0;
}
@keyframes ink-dark1 {
  0%, 100% { transform: translate(0, 0)    rotate(0deg)   scale(1); }
  40%       { transform: translate(-4%, 5%) rotate(8deg)   scale(1.06); }
  70%       { transform: translate(5%, -4%) rotate(-5deg)  scale(0.97); }
}
@keyframes ink-dark2 {
  0%, 100% { transform: translate(0, 0)     rotate(0deg)  scale(1); }
  35%       { transform: translate(5%, -5%)  rotate(-6deg) scale(1.05); }
  70%       { transform: translate(-3%, 4%)  rotate(4deg)  scale(0.98); }
}
.section-ink-dark > .zpcontainer,
.section-ink-dark > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Radial burst — light rays from top-left corner.
   Like a hidden sun behind the section. Dark bg.
   Uses: ::before */
.section-burst {
  position: relative;
  overflow: hidden;
}
.section-burst::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 130%;
  height: 130%;
  background: conic-gradient(
    from 0deg at 0% 0%,
    transparent 0deg,
    rgba(56, 182, 255, 0.03) 15deg,
    transparent 30deg,
    rgba(56, 182, 255, 0.04) 45deg,
    transparent 60deg,
    rgba(0, 112, 139, 0.03) 75deg,
    transparent 90deg,
    rgba(56, 182, 255, 0.02) 105deg,
    transparent 120deg
  );
  animation: burst-rotate 40s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes burst-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.section-burst > .zpcontainer,
.section-burst > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Circuit board — fine nodes and connecting lines. Dark sections.
   Denser than mesh, more structured than hex.
   Uses: ::before */
.section-circuit {
  position: relative;
  overflow: hidden;
}
.section-circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='rgba(56,182,255,0.05)' stroke-width='1'/%3E%3Cline x1='50' y1='0' x2='50' y2='100' stroke='rgba(56,182,255,0.05)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='2.5' fill='rgba(56,182,255,0.12)'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='rgba(56,182,255,0.08)'/%3E%3Ccircle cx='100' cy='0' r='1.5' fill='rgba(56,182,255,0.08)'/%3E%3Ccircle cx='0' cy='100' r='1.5' fill='rgba(56,182,255,0.08)'/%3E%3Ccircle cx='100' cy='100' r='1.5' fill='rgba(56,182,255,0.08)'/%3E%3Cline x1='0' y1='25' x2='25' y2='25' stroke='rgba(0,112,139,0.06)' stroke-width='1'/%3E%3Cline x1='75' y1='75' x2='100' y2='75' stroke='rgba(0,112,139,0.06)' stroke-width='1'/%3E%3Ccircle cx='25' cy='25' r='1.5' fill='rgba(0,112,139,0.1)'/%3E%3Ccircle cx='75' cy='75' r='1.5' fill='rgba(0,112,139,0.1)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  pointer-events: none;
  z-index: 0;
}
.section-circuit > .zpcontainer,
.section-circuit > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Depth rings — concentric ellipses from center. Dark sections.
   Sonar / radar feel. Works well behind stats or process sections.
   Uses: ::before */
.section-rings {
  position: relative;
  overflow: hidden;
}
.section-rings::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Cellipse cx='400' cy='250' rx='80'  ry='50'  fill='none' stroke='rgba(56,182,255,0.08)' stroke-width='1'/%3E%3Cellipse cx='400' cy='250' rx='160' ry='100' fill='none' stroke='rgba(56,182,255,0.06)' stroke-width='1'/%3E%3Cellipse cx='400' cy='250' rx='240' ry='150' fill='none' stroke='rgba(56,182,255,0.05)' stroke-width='1'/%3E%3Cellipse cx='400' cy='250' rx='320' ry='200' fill='none' stroke='rgba(56,182,255,0.04)' stroke-width='1'/%3E%3Cellipse cx='400' cy='250' rx='400' ry='250' fill='none' stroke='rgba(0,112,139,0.04)' stroke-width='1'/%3E%3Cellipse cx='400' cy='250' rx='480' ry='300' fill='none' stroke='rgba(0,112,139,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}
.section-rings > .zpcontainer,
.section-rings > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Staggered stripes — thick, offset bands. More graphic than stripe-dark.
   Like venetian blinds at low opacity. Dark bg.
   Uses: ::before */
.section-bands {
  position: relative;
  overflow: hidden;
}
.section-bands::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -35deg,
    transparent,
    transparent 60px,
    rgba(255, 255, 255, 0.012) 60px,
    rgba(255, 255, 255, 0.012) 90px
  );
  pointer-events: none;
  z-index: 0;
}
.section-bands > .zpcontainer,
.section-bands > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Dark dot grid — dots on dark background.
   Dark equivalent of section-dots-light.
   Uses: ::before */
.section-dots-dark {
  position: relative;
  overflow: hidden;
}
.section-dots-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(56, 182, 255, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.section-dots-dark > .zpcontainer,
.section-dots-dark > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Pulsing ring — single expanding ring from center.
   Radar ping. Good for hero stat or call-to-action.
   Uses: ::before */
.section-ping {
  position: relative;
  overflow: hidden;
}
.section-ping::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 1px solid rgba(56, 182, 255, 0.3);
  border-radius: 50%;
  animation: ping 3.5s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
.section-ping::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 1px solid rgba(56, 182, 255, 0.15);
  border-radius: 50%;
  animation: ping 3.5s ease-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
  z-index: 0;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(12);  opacity: 0; }
}
.section-ping > .zpcontainer,
.section-ping > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── GRADIENTS — ADDITIONAL ──────────────────────────────────
   ──────────────────────────────────────────────────────────── */

/* Midnight — deepest dark, no blue undertone. Pure shadow. */
.gradient-midnight {
  background: linear-gradient(160deg, #070d1a 0%, #020509 100%) !important;
}

/* Slate — cool blue-gray, between navy and pure gray */
.gradient-slate {
  background: linear-gradient(150deg, #1e2d45 0%, #131f30 100%) !important;
}

/* Teal deep — dark teal, good for alternating dark sections */
.gradient-teal-deep {
  background: linear-gradient(155deg, #0a2e38 0%, #051820 100%) !important;
}

/* Sunrise — warm amber-to-teal for accent panels */
.gradient-sunrise {
  background: linear-gradient(140deg, #1a2a1a 0%, #1a2816 30%, #0e3040 100%) !important;
}

/* Fog — barely-there light gray to white. For clean alternating sections. */
.gradient-fog {
  background: linear-gradient(170deg, #f7fafc 0%, #ffffff 100%) !important;
}

/* Ice — very pale teal-white. Colder than gradient-sky. */
.gradient-ice {
  background: linear-gradient(150deg, #e8f8fb 0%, #f2fcfe 100%) !important;
}

/* Warm white — white with slight amber top. Pairs with gradient-parchment. */
.gradient-warm-white {
  background: linear-gradient(160deg, #fefcf8 0%, #ffffff 100%) !important;
}


/* ── SOFT SPLITS & TRANSITIONS ───────────────────────────────
   ──────────────────────────────────────────────────────────── */

/* Gradient split — dark left, light right, with a feathered edge.
   Softer than section-split-dark-left (which has a hard line).
   Uses: direct background (no pseudo-element) */
.section-split-soft {
  background: linear-gradient(
    to right,
    #1a365d 0%,
    #1a365d 35%,
    #2a4a72 50%,
    #f7fafc 65%,
    #f7fafc 100%
  ) !important;
}

/* Bottom wave clip — section clips to a wave shape at the bottom.
   Creates a wave transition into the next section.
   Uses: clip-path */
.section-wave-clip {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 88%,
    75% 96%,
    50% 100%,
    25% 96%,
    0 88%
  );
}

/* Top wave clip — section clips to a wave shape at the top.
   Pair with the section below a wave-clipped section. */
.section-wave-clip-top {
  clip-path: polygon(
    0 6%,
    25% 0,
    50% 5%,
    75% 0,
    100% 6%,
    100% 100%,
    0 100%
  );
  margin-top: -40px;
}

/* Fade to white — section fades to white at the bottom.
   Good for flowing sections into white.
   Uses: ::after */
.section-fade-white {
  position: relative;
}
.section-fade-white::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
  z-index: 0;
}
.section-fade-white > .zpcontainer,
.section-fade-white > .zpsection-inner {
  position: relative;
  z-index: 1;
}

/* Vignette — darkens the edges all around. Dark sections.
   Makes content pop visually without changing base background.
   Uses: ::before */
.section-vignette {
  position: relative;
}
.section-vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.section-vignette > .zpcontainer,
.section-vignette > .zpsection-inner {
  position: relative;
  z-index: 1;
}


/* ── GRADIENT TEXT ANIMATIONS ────────────────────────────────
   Apply to heading elements (H1, H2) for animated gradient text.
   Works alongside existing .gradient-text class.
   ──────────────────────────────────────────────────────────── */

/* Shifting gradient text — the gradient position animates.
   Apply to heading element alongside large font size. */
.gradient-text-shift {
  background: linear-gradient(
    90deg,
    var(--accent-teal) 0%,
    var(--color-sky)   30%,
    var(--accent-teal) 60%,
    var(--accent-gold) 80%,
    var(--accent-teal) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s linear infinite;
}
@keyframes gradient-shift {
  to { background-position: 200% center; }
}

/* Gold gradient text — static gold-to-amber for subheadings */
.gradient-text-gold {
  background: linear-gradient(135deg, #d4af37 0%, #c8960c 50%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* White-to-teal gradient text — for dark section headings */
.gradient-text-light {
  background: linear-gradient(135deg, #ffffff 0%, rgba(56, 182, 255, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── COMPOSABLE COMBOS ───────────────────────────────────────
   Pre-tested class combinations. Apply both classes to the Section.
   No new CSS — just documentation of what pairs well.

   DARK COMBOS:
   section-drift + section-topo           → animated drift + contours
   section-aurora + section-scatter-dark  → aurora + particle field
   section-aurora + section-rings         → aurora + sonar rings
   section-ink-dark + section-bands       → floating blobs + stripes
   section-teal-glow + section-circuit    → glow center + circuit nodes
   section-teal-glow + section-dots-dark  → glow center + dot field
   section-corner-accent + section-hex-dark → corner highlight + hex grid
   section-drift + section-grain-dark     → animated + grain texture
   section-burst + section-dots-dark      → ray burst + dot field

   LIGHT COMBOS:
   section-drift-light + section-grain-light → animated warm + grain
   section-ink-light + section-dots-light    → blobs + dot grid
   section-breathe-light + section-grid-light → pulse glow + fine grid
   section-teal-bloom + section-hatch-light  → corner teal + hatching
   section-wave-light + section-grain-light  → waves + grain

   ANIMATED COMBOS (use sparingly — max 1 animated per page):
   section-aurora + section-scan          → aurora + scan line
   section-drift + section-shimmer        → drift + shimmer sweep
   section-drift + section-particles      → drift + rising particles
   section-breathe + section-rings        → pulsing glow + sonar rings
   ──────────────────────────────────────────────────────────── */


/* ── REDUCE MOTION — ADDITIONS ───────────────────────────────
   Extends existing prefers-reduced-motion block.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .section-drift-light,
  .section-breathe-light::before,
  .section-ink-light::before,
  .section-ink-light::after,
  .section-aurora,
  .section-aurora::before,
  .section-ink-dark::before,
  .section-ink-dark::after,
  .section-burst::before,
  .section-ping::before,
  .section-ping::after,
  .gradient-text-shift {
    animation: none !important;
  }
  .section-drift-light {
    background: #f7fafc !important;
    background-size: auto !important;
  }
  .section-aurora {
    background: #0d1f3c !important;
    background-size: auto !important;
  }
}


/* ── REDUCED MOTION — SCROLL + MICRO INTERACTIONS ── */
@media (prefers-reduced-motion: reduce) {
  .stagger-grid > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal-line,
  .reveal-line-teal,
  .reveal-line-gold,
  .reveal-line-sky,
  .reveal-line-white {
    width: 100% !important;
    transition: none !important;
  }
  .section-reveal-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .progress-fill-bar {
    width: var(--fill-width, 100%) !important;
    transition: none !important;
  }
  .hover-arrow::after { transition: none !important; }
  [data-tip]::before,
  [data-tip]::after   { transition: none !important; }
}



/* ============================================================
   CONTACT PAGE
   Classes use brand tokens throughout.
   No hardcoded hex — always var(--color-*) or var(--accent-*).
   Apply classes directly to native Zoho elements.
   Code Snippets used only where Zoho native elements can't achieve
   the layout (e.g., flex rows requiring multiple child elements).
   ============================================================ */

/* ── SECTION 1: HERO ─────────────────────────────────────── */

/* Persona hint pills — apply directly to Zoho Text elements.
   ::before adds the teal dot. Pill border and color use brand tokens.
   Apply contact-persona-strip to the Row or Box wrapping the pills.
   Apply contact-persona-pill to each Text element. */
.contact-persona-strip {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
}
.contact-persona-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(131, 174, 175, 0.4) !important;
  color: var(--accent-teal) !important;
  letter-spacing: 0.03em !important;
}
.contact-persona-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-teal);
  flex-shrink: 0;
}


/* ── SECTION 2: FORM + CONTACT DETAILS ───────────────────── */

/* Form column card — apply to a Box wrapping the form embed.
   Top border uses sky (primary accent) to signal action. */
.contact-form-card {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 40px 36px !important;
  border-top: 4px solid var(--accent-primary) !important;
}

/* Trust strip — apply contact-form-trust to the Row below the form.
   Apply contact-form-trust-item to each Text element in that row.
   ::before adds the teal checkmark — no Code Snippet needed. */
.contact-form-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 24px !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--color-lightgray) !important;
}
.contact-form-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--color-darkgray) !important;
}
.contact-form-trust-item::before {
  content: '✓';
  color: var(--accent-teal);
  font-weight: 700;
  flex-shrink: 0;
}

/* Right column sticky card — apply to the Box wrapping contact details.
   Sticky keeps the card in view while the form scrolls on desktop. */
.contact-info-card {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 36px 32px !important;
  position: sticky !important;
  top: 100px !important;
}

/* Contact detail rows — apply contact-detail-item to each Box row.
   Each row: native Box (contact-detail-item) contains two native
   Text elements — one for the label (contact-detail-label),
   one for the value (contact-detail-value).
   Border-bottom row separator uses lightgray token. */
.contact-detail-item {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--color-lightgray) !important;
}
.contact-detail-item:last-of-type {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.contact-detail-label {
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--accent-teal) !important;
  margin-bottom: 3px !important;
}
.contact-detail-value {
  color: var(--color-navy) !important;
}

/* Office hours inset — apply to a Box element.
   Reuses the same visual language as svc-examples. */
.contact-hours-block {
  background: rgba(131, 174, 175, 0.06) !important;
  border-left: 3px solid var(--accent-teal) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 14px 16px !important;
  margin-top: 20px !important;
}

/* Credential note — apply to a Text element at the bottom of info card.
   Uses darkgray token for body text, not a custom hardcoded gray. */
.contact-credential-note {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--color-lightgray) !important;
  color: var(--color-darkgray) !important;
}


/* ── SECTION 3: WHAT HAPPENS NEXT ────────────────────────── */

/* Step cards — apply to each Box in the 3-column row.
   ::before top bar uses teal→sky gradient matching site system.
   hover-lift behavior via transform matches other card patterns. */
.contact-step {
  position: relative !important;
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 28px !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(131, 174, 175, 0.2) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
  height: 100% !important;
}
.contact-step:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}
.contact-step::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    to right,
    var(--accent-teal),
    var(--accent-primary)
  ) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Step number badge — apply to a Text element inside the step card.
   Matches hiw-step-badge visual system. */
.contact-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--color-navy) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

/* Arrow connector — apply to a narrow Box between step columns.
   Hidden on mobile. */
.contact-step-connector {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 48px !important;
}
.contact-step-connector::after {
  content: '→';
  font-size: 18px;
  color: var(--accent-teal);
  opacity: 0.5;
}

/* Closing italic line below steps — apply to a Text element. */
.contact-steps-closing {
  text-align: center !important;
  color: var(--color-darkgray) !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--color-lightgray) !important;
  margin-top: 12px !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-step-connector  { display: none !important; }
  .contact-form-card       { padding: 24px 18px !important; }
  .contact-info-card       { position: static !important; margin-top: 32px !important; }
  .contact-persona-strip   { flex-direction: column !important; align-items: center !important; }
  .contact-form-trust      { flex-direction: column !important; gap: 10px !important; }
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .contact-step { transition: none !important; }
}


/* ============================================================
   TEAM CARDS (EliteRT data, CVFO-rendered)
   Applied via renderTeamCards() in cvfo-scripts.js.
   
   CLASSES:
   .team-grid          — card grid container
   .team-card          — individual member card
   .team-card-header   — gradient bar at top of card
   .team-card-photo    — circular headshot
   .team-card-name     — member name
   .team-card-title    — member title/role
   .team-card-btn      — Bio button
   .team-modal-overlay — full-screen modal backdrop
   .team-modal         — modal content box
   .team-modal-close   — × close button
   ============================================================ */

/* Grid */
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  max-width: 1024px !important;
  margin: 0 auto !important;
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(3, 186px) !important;
    justify-content: center !important;
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(5, 186px) !important;
  }
}

/* Card */
.team-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid var(--color-lightgray) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.team-card:hover {
  border-color: var(--accent-teal) !important;
  box-shadow: 0 6px 24px rgba(0, 112, 139, 0.12) !important;
}

/* Fade-in handled via inline JS transitions in renderTeamCards() */

/* Gradient header bar — navy → teal */
.team-card-header {
  height: 62px !important;
  background: linear-gradient(to right, var(--color-navy), var(--accent-teal)) !important;
  flex-shrink: 0 !important;
}

/* Card body */
.team-card-body {
  padding: 0 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  text-align: center !important;
}

/* Photo — overlaps header */
.team-card-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #ffffff !important;
  margin-top: -40px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

@media (min-width: 640px) {
  .team-card-photo {
    width: 96px !important;
    height: 96px !important;
    margin-top: -48px !important;
  }
}

/* Name */
.team-card-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-navy) !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

/* Title */
.team-card-title {
  font-size: 12px !important;
  color: var(--color-darkgray) !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  margin-bottom: 12px !important;
}

/* Bio button */
.team-card-btn {
  display: block !important;
  width: 100% !important;
  padding: 8px 0 !important;
  background: var(--color-navy) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.team-card-btn:hover {
  background: var(--accent-teal) !important;
}

/* Loading / error states */
.team-loading {
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--color-darkgray) !important;
  font-size: 15px !important;
}

.team-error {
  text-align: center !important;
  padding: 32px 24px !important;
  color: #c0392b !important;
  font-size: 14px !important;
}

/* ── MODAL ──────────────────────────────────────────────── */

.team-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(13, 28, 58, 0.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 40px 24px !important;
  overflow-y: auto !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.team-modal-overlay.is-open {
  opacity: 1 !important;
}

.team-modal {
  background: #ffffff !important;
  border-radius: 12px !important;
  max-width: 540px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transform: translateY(16px) !important;
  transition: transform 0.25s ease !important;
}

.team-modal-overlay.is-open .team-modal {
  transform: translateY(0) !important;
}

.team-modal-header {
  height: 80px !important;
  background: linear-gradient(to right, var(--color-navy), var(--accent-teal)) !important;
  border-radius: 12px 12px 0 0 !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.team-modal-photo {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid #ffffff !important;
  position: absolute !important;
  bottom: -48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.team-modal-body {
  padding: 60px 32px 32px !important;
  text-align: center !important;
}

.team-modal-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-navy) !important;
  margin-bottom: 4px !important;
}

.team-modal-title {
  font-size: 14px !important;
  color: var(--accent-teal) !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}

.team-modal-bio {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--color-darkgray) !important;
  text-align: left !important;
}

.team-modal-bio p {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

.team-modal-bio p:last-child {
  margin-bottom: 0 !important;
}

.team-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}

.team-modal-close:hover {
  background: rgba(255,255,255,0.3) !important;
}

/* No bio fallback */
.team-modal-no-bio {
  color: var(--color-darkgray) !important;
  font-style: italic !important;
  font-size: 14px !important;
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-modal-overlay,
  .team-modal { transition: none !important; }
}


/* ============================================================
   19. COLLECTIVE INSIGHTS — BLOG POST TEMPLATE
   ============================================================

   All classes apply to native Zoho Sites elements.
   No Code Snippet wrappers — use native Box, Text, Image, Row.

   HOW TO APPLY:
   Select element → CSS icon in property panel →
   type class name (no leading dot) → save.

   CLASS INDEX:
   .post-body-wrap       Row/Section wrapping all body content
   .post-meta            Text element — date / author / read time
   .post-h2              H2 subheadings inside post body
   .post-h3              H3 subheadings inside post body
   .post-callout         Box element — teal planning note callout
   .post-editor-note     Box element — amber editor's note (conditional)
   .post-cvfo-fits       Box element — "Where Collective VFO Fits"
   .post-cvfo-fits-label Text heading inside .post-cvfo-fits
   .post-author-card     Box element — author bio block
   .post-author-name     Text — author name
   .post-author-title    Text — author title/role (Sterling mode only)
   .post-author-photo    Image — 80x80 headshot (Sterling mode only)
   .post-compliance      Box element — compliance disclosure (conditional)
   ============================================================ */

/* ── POST BODY WRAPPER ───────────────────────────────────── */
/* Apply to the Row or Section that wraps all body content.
   Width is controlled by Zoho Sites native section settings. */
.post-body-wrap {
  width: 100% !important;
}

/* ── POST META LINE ─────────────────────────────────────── */
/* Apply to the Text element directly below H1.
   "Collective VFO Editorial · Month DD, YYYY · X min read"
   OR "By Sterling Hirsch · Month DD, YYYY · X min read" */
.post-meta {
  font-size: 14px !important;
  color: #4a5568 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
}

/* ── IN-POST HEADINGS ────────────────────────────────────── */
/* H2 and H3 global styles are set via Advanced Visual Editor.
   These classes are for in-post overrides only — apply when
   a specific heading needs to differ from the global style. */
.post-h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--color-navy) !important;
  line-height: 1.25 !important;
  margin-top: 48px !important;
  margin-bottom: 16px !important;
}

.post-h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-navy) !important;
  line-height: 1.3 !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 767px) {
  .post-h2 { font-size: 24px !important; }
  .post-h3 { font-size: 20px !important; }
}

/* ── CALLOUT BOX ─────────────────────────────────────────── */
/* Native Box element inside post body.
   Label options (bold text at top, set natively):
   "Planning Note:" / "Important Distinction:" / "Timing Consideration:" */
.post-callout {
  background: #e6f4f7 !important;
  border-left: 4px solid var(--accent-teal, #00708b) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 24px 28px !important;
}

/* ── EDITOR'S NOTE ───────────────────────────────────────── */
/* Native Box element. Placement: below featured image,
   above post body. Conditional — not on every post.
   See spec for when to use and example language. */
.post-editor-note {
  background: #fffbeb !important;
  border-left: 4px solid #d97706 !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 16px 24px !important;
}

/* Apply to the Text element inside the editor's note box */
.post-editor-note-text {
  font-size: 15px !important;
  color: #92400e !important;
  line-height: 1.6 !important;
  font-style: italic !important;
}

/* ── WHERE COLLECTIVE VFO FITS ───────────────────────────── */
/* Native Box element. Use on every post, before author bio.
   Structure inside: label (post-cvfo-fits-label), then 3 lines.
   See spec for content formula per post topic. */
.post-cvfo-fits {
  background: var(--color-offwhite, #f7fafc) !important;
  border-radius: 8px !important;
  padding: 24px 28px !important;
}

/* Apply to Text element for the "Where Collective VFO Fits" label */
.post-cvfo-fits-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--color-navy) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

/* ── AUTHOR BIO CARD ─────────────────────────────────────── */
/* Native Box element. Two modes — see spec.
   Mode A (Sterling): 2-col Row inside — photo left, text right.
   Mode B (Editorial): single column, no photo. */
.post-author-card {
  background: var(--color-offwhite, #f7fafc) !important;
  border-radius: 8px !important;
  padding: 32px !important;
}

.post-author-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-navy) !important;
  margin-bottom: 4px !important;
}

/* Mode A only — omit for Editorial byline */
.post-author-title {
  font-size: 14px !important;
  color: #4a5568 !important;
  margin-bottom: 12px !important;
}

.post-author-bio {
  font-size: 15px !important;
  color: var(--color-darkgray) !important;
  line-height: 1.6 !important;
}

/* Mode A only — apply to Image element, circular headshot */
.post-author-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* ── COMPLIANCE DISCLOSURE ───────────────────────────────── */
/* Native Box element below author bio.
   Conditional — see spec for when to include. */
.post-compliance {
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 16px 24px !important;
}

/* Apply to Text element inside the compliance box */
.post-compliance-text {
  font-size: 13px !important;
  color: #4a5568 !important;
  line-height: 1.6 !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .post-callout,
  .post-editor-note  { padding: 18px 20px !important; }
  .post-author-card  { padding: 24px 20px !important; }
  .post-cvfo-fits    { padding: 20px !important; }
  .post-compliance   { padding: 14px 18px !important; }
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .post-callout,
  .post-editor-note { transition: none !important; }
}

/* ── RELATED POSTS GRID ─────────────────────────────────── */
/* Rendered via renderRelatedPosts() JS function.
   Attach to a Code Snippet element in the Related Posts section. */
.related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.related-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.related-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}

.related-card-img {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

.related-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.related-card-body {
  padding: 20px !important;
  flex: 1 !important;
}

.related-card-cat {
  display: inline-block !important;
  margin-bottom: 10px !important;
}

.related-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-navy) !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
  /* Clamp to 2 lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.related-card-date {
  font-size: 13px !important;
  color: #4a5568 !important;
  margin: 0 !important;
}

.related-loading {
  font-size: 14px !important;
  color: #4a5568 !important;
  padding: 16px 0 !important;
}

@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}