/* Client Colors CSS */

/* Body text */
body {
  font-size: 18px;
  line-height: 1.6; /* Comfortable line spacing */
  font-family: 'Source Sans Pro', sans-serif;
  color: #26334B;
}

/* Headings (H1, H2, H3, H4, H5, H6) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Droid Serif', serif;
  line-height: 1.4; /* Default line height for headings */
}

h1.elementor-heading-title {
  line-height: 1.1 !important;
  font-family: 'Droid Serif', serif !important;
}

h2.elementor-heading-title,
h3.elementor-heading-title {
  line-height: 1.3 !important;
  font-family: 'Droid Serif', serif !important;
}

h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title {
  line-height: 1.4 !important;
  font-family: 'Droid Serif', serif !important;
}

/* Specific heading sizes */
h1 { font-size: 48px; line-height: 1.2; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 26px; }
}

@media (max-width: 767px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
  body { font-size: 16px; }
}

header a {
  color: #26334B; /* Default link color */
  text-decoration: none; /* Optional: remove underlines */
}

header a:hover,
header a:focus {
  color: #1a2533; /* Optional: slightly darker color on hover/focus */
  text-decoration: underline; /* Optional: add underline on hover */
}

/* Decorative line under H2–H4 in Elementor content only (exclude header/footer) */
/* === Short divider (manual) — works whether class is on H2/H3/H4 or on the widget wrapper === */

/* 1) Class directly on the heading tag */
.elementor :is(h2.short-divider, h3.short-divider, h4.short-divider) {
  position: relative;
  padding-bottom: 0.6em;
}
.elementor :is(h2.short-divider, h3.short-divider, h4.short-divider)::after {
  content: "";
  position: absolute;
  left: 0;                       /* default: left-aligned */
  bottom: 0;
  width: var(--divider-width, 90px);
  height: var(--divider-height, 2px);
  background: var(--divider-color, #d7d7a0);
  border-radius: 2px;
}
.elementor :is(h2.short-divider.short-divider--center,
               h3.short-divider.short-divider--center,
               h4.short-divider.short-divider--center)::after {
  left: 50%; transform: translateX(-50%);
}
.elementor :is(h2.short-divider.short-divider--right,
               h3.short-divider.short-divider--right,
               h4.short-divider.short-divider--right)::after {
  left: auto; right: 0; transform: none;
}

/* 2) Class on the Elementor Heading widget wrapper (your example) */
.elementor .elementor-widget-heading.short-divider .elementor-heading-title {
  position: relative;
  padding-bottom: 0.6em;
}
.elementor .elementor-widget-heading.short-divider .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;                       /* default: left-aligned */
  bottom: 0;
  width: var(--divider-width, 90px);
  height: var(--divider-height, 2px);
  background: var(--divider-color, #d7d7a0);
  border-radius: 2px;
}
/* Alignment modifiers applied on the wrapper */
.elementor .elementor-widget-heading.short-divider.short-divider--center
  .elementor-heading-title::after {
  left: 50%; transform: translateX(-50%);
}
.elementor .elementor-widget-heading.short-divider.short-divider--right
  .elementor-heading-title::after {
  left: auto; right: 0; transform: none;
}

/* Global defaults you can override per page/section/widget */
:root{
  --divider-color: #d7d7a0;
  --divider-width: 90px;
  --divider-height: 2px;
}

/* Responsive tweak: keep short on small screens */
@media (max-width: 480px){
  .elementor .elementor-widget-heading.short-divider .elementor-heading-title::after,
  .elementor :is(h2.short-divider, h3.short-divider, h4.short-divider)::after{
    width: min(var(--divider-width), 40%);
  }
}

/* HERO SECTION COLORS */
.hero-section {
  margin-top: -155px;
  padding-top: 120px;
}

/* NAV COLORS */
.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
  color: #26334b;
}

.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text:hover {
  color: #26334b;
}

.clear-header .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
  color: #ffffff;
}

.clear-header .elementor-widget-n-menu 
.e-n-menu-title:not(.e-current):hover 
.e-n-menu-title-container .e-n-menu-title-text {
  color: #f0f0f0; /* Set your hover color here */
}

.clear-header .shrinker.elementor-sticky--effects .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
  color: #26334b;
}

.clear-header .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-dropdown-icon svg {
  fill: #ffffff;
}

.clear-header .elementor-widget-n-menu 
.e-n-menu-title:not(.e-current):hover 
.e-n-menu-dropdown-icon svg {
  fill: #ffffff; /* Set your default fill color here */
}

.clear-header .shrinker.elementor-sticky--effects .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-dropdown-icon svg {
  fill: #26334b; /* Set your default fill color here */
}

.clear-header .shrinker.elementor-sticky--effects .elementor-widget-n-menu 
.e-n-menu-title:not(.e-current):hover 
.e-n-menu-title-container .e-n-menu-title-text {
  color: #26334b; /* Set your default fill color here */
}

.clear-header .shrinker.elementor-sticky--effects .elementor-widget-n-menu 
.e-n-menu-title:not(.e-current):hover 
.e-n-menu-dropdown-icon svg {
  fill: #26334b; /* Set your hover fill color here */
}

/* MENU BUTTON + ELEMENTOR BUTTONS */
#menu-button,
.elementor-button {
  border-radius: 3em;
  padding: 0.5em 0.5em;                /* Adjust padding for balance */
  background-color: #d7d7a0;
  display: inline-flex;              /* Flex container for alignment */
  align-items: center;               /* Vertically center content */
  justify-content: space-between;    /* Text left, icon right */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  gap: 0.75em;                       /* Space between text and icon */
  font-size: 1rem;                   /* Base font size */
}

/* TEXT */
#menu-button .e-n-menu-title-text, 
.elementor-button .elementor-button-text {
  color: #26334b !important;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.elementor-button .elementor-button-text {
  padding-top: .25em; /* Fix vertical alignment */
  padding-left: 0.5em; /* Add left padding for button text */
}

#menu-button .e-n-menu-title-text {padding-left: 0.5em; /* Add left padding for button text */ }

/* ICON in proportional circle */
#menu-button .icon-inactive,
.elementor-button .elementor-button-icon {
  background-color: #eaead2;         /* Circle background */
  border-radius: 50%;                /* Perfect circle */
  width: 1.8em;                      /* Proportional to text size */
  height: 1.8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                    /* Prevent icon from shrinking */
  font-size: 0.9em;                  /* Slightly smaller icon */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Add transform transition */
}

/* HOVER EFFECTS */
#menu-button:hover,
.elementor-button:hover {
  background-color: #c0c087;
}

#menu-button:hover .icon-inactive,
.elementor-button:hover .elementor-button-icon {
  background-color: #d4d4b0;         /* Slightly darker circle */
  transform: translateX(3px) scale(1.05); /* Subtle slide + bounce */
}

#menu-button .icon-inactive svg path,
.elementor-button .elementor-button-icon svg path {
  fill: #26334b !important;          /* Arrow color */
}

/* Remove circle background if button has no text */
.elementor-button:not(:has(.elementor-button-text)) .elementor-button-icon {
  background-color: transparent !important;
  padding: 0; /* Optional: remove inner spacing */
}


/* Stuck Header */
.elementor-sticky--active {
  padding-bottom: 5px !important;
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.075) !important;
  background-color:#ffffff;
}

/* ====================
   Shrinking Logo
==================== */

.logo-container {
  position: relative;
  display: flex;
  align-items: center;    /* Vertically center both logos */
  justify-content: left;  /* Keep logos aligned to the left */
}

/* Large logo (default visible) */
.main-logo {
  position: absolute;
  top: 50%;                        /* Start at vertical center */
  left: 0;                         /* Align to left edge */
  transform: translateY(-50%) scale(1); /* Perfect vertical centering */
  opacity: 1;
  z-index: 2;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.main-logo img, 
.main-logo svg {
  width: 300px; /* desired size */
  height: auto;
  max-width: 100%;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

/* Small logo (default hidden) */
.small-logo {
  position: absolute;
  top: 50%;                        /* Start at vertical center */
  left: 0;                         /* Align to left edge */
  transform: translateY(-50%) scale(0.8); /* Center & slightly smaller */
  opacity: 0;
  z-index: 1;
  width: 50px !important;          /* Ensure fixed size */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Sticky header state (large logo hidden, small logo visible) */
.elementor-sticky--effects .main-logo {
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
}

.elementor-sticky--effects .small-logo {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}


.elementor-sticky--effects .shrinking-logo {
  padding: 10px 10px 10px 10px!important;
  transition: width 0.2s ease, height 0.2s ease;
}

.shrinking-logo img,
.shrinking-logo svg {
  width: 85px!important;
  height: auto;
  transition: width 0.2s ease, height 0.2s ease;
}

.shrinking-logo img,
.shrinking-logo svg {
  width: 85px!important;
  height: auto;
  transition: width 0.2s ease, height 0.2s ease;
}

.shrinking-logo2 img,
.shrinking-logo2 svg {
  width: 80px!important;
  height: auto !important;
  transition: width 0.2s ease, height 0.2s ease;
  display:none;
}

/* Default state (text hidden) */
.header-title {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Sticky header state (text visible) */
.elementor-sticky--effects .header-title {
  opacity: 1;
  transform: scale(1);
}

.shrinker.elementor-sticky--effects .main-logo img,
.shrinker.elementor-sticky--effects .main-logo svg {
  display:none;
}

.shrinker.elementor-sticky--effects .shrinking-logo img,
.shrinker.elementor-sticky--effects .shrinking-logo svg {
  width: 40px!important;
}

.shrinker.elementor-sticky--effects .shrinking-logo2 img,
.shrinker.elementor-sticky--effects .shrinking-logo2 svg {
  display: inline-block;
  margin-top: 15px;
  width: 50px !important;
}

#logo-container {margin-bottom:-50px }
.shrinker.elementor-sticky--effects #logo-container {margin-bottom:0px }

/* LOGO COLOR FILTER (for transparent header) */
.clear-header .main-logo img {
  filter: brightness(0) invert(1);
}

.clear-header .shrinker.elementor-sticky--effects .main-logo img {
  filter: none; /* Restores original colors */
}

/* DROPDOWN ARROW COLOR */
.e-n-menu-title:has([aria-expanded="true"])::before {
  border-bottom-color: #E3EAF6!important; /* just the color */
}

.elementor-widget text-editor ul, .elementor-widget-theme-post-content ul {
  margin-bottom:1.5em;
}

/* ============================
   Bronwyard Client Table Colors
   ============================ */

/* Base table styles */
table {
  background-color: #ffffff; /* White base background */
  border: 1px solid #D7D7A0; /* Olive border */
  color: #26334B; /* Brand text color */
  border-radius: 10px; /* Rounded corners */
  overflow: hidden;    /* Clip inner content to border radius */
  border-collapse: separate; /* Allow border-radius to work properly */
  border-spacing: 0;        /* Remove spacing between cells */
}

/* Header rows (THEAD + any TH in TBODY) */
table thead th,
table tbody th {
  background-color: #637289; /* Slate blue header background */
  color: #ffffff; /* White header text */
  border: 1px solid #D7D7A0;
  font-weight: 600;
}

/* Force body TH background on striped rows */
table tbody tr:nth-child(2n+1) th {
  background-color: #637289; /* Reset header cells in striped rows */
  color: #ffffff; /* Ensure text stays white */
}

/* Prevent hover color on any TH cell */
table tbody tr:hover th {
  background-color: #637289; /* Lock header background on hover */
  color: #ffffff;
}

/* Table body TD cells */
table tbody td {
  color: #26334B;
  border: 1px solid #D7D7A0;
}

/* Zebra striping for TD cells (odd rows only) */
table tbody tr:nth-child(2n+1) td {
  background-color: #F5F7F9; /* Light slate tint for odd rows */
}

/* Hover effect for TD cells in hovered row */
table tbody tr:hover td {
  background-color: #E8EDF2; /* Subtle blue-gray hover effect */
}

/* DOWNLOAD TABLE */

.dtable-button .elementor-button {color:#26334B; }

.dtable-button .elementor-button .elementor-button-text {
  padding-top: 0!important;
  padding-left: 0.5em;
}

.media-left::before {
  content: " ";
  display: block;
  width: 50%;
  height: 65%;
  background-color: #00984c;
  position: absolute;
  top: 0;
  left: -20px;
  z-index:0;
}

 .media-right::before {
  content: " ";
  display: block;
  width: 50%;
  height: 65%;
  background-color: #00984c;
  position: absolute;
  top: 0;
  right: -20px;
  z-index:0;
  }


.media-left img,
.media-right img {
    border: 0px solid #fff;
    margin-top: 20px;
    padding-right: 0;
    width: 100%;
    z-index:1;
    position: relative
  }
  
.media-right img {border-left:0px;margin-left:0px;margin-right:0px;}
.media-left img {border-right:0px;margin-left:0px;}

.sf-field-search input {
  min-width: 300px;
  border: 2px solid #ccc;
  border-radius: 0;
  padding: .5em 1em 0.5em 1em;
  font-size: 1em;
  background-color: #ffffff;
}

/* ============================
   Gravity Forms — Client (Brownyard)
   ============================ */

body .gform_wrapper{
  --gf-text:#26334B;                 /* dark navy */
  --gf-muted:#637289;                /* slate */
  --gf-focus:#627489;                /* focus border */
  --gf-focus-ring:rgba(98,116,137,.20);

  --gf-btn-bg:#d7d7a0;               /* brand beige */
  --gf-btn-bg-hover:#cacc8f;
  --gf-btn-text:#26334B;             /* button text */
}

/* Submit button brand style */
body .gform_wrapper input[type="submit"],
body .gform_wrapper .gform_button {
  background-color: #d7d7a0 !important; /* brand beige */
  color: #26334B !important;            /* dark blue */
  padding: 14px 28px !important;        /* bigger button */
  font-size: 1.05rem !important;
  font-weight: 600 !important;
}
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper .gform_button:hover {
  background-color: #cacc8f !important; /* darker beige hover */
}
body .gform_wrapper input[type="submit"]:active,
body .gform_wrapper .gform_button:active {
  transform: scale(0.97) !important;
}

/* ===== Global scrollbar styling ===== */

/* Firefox */
html {
  scrollbar-width: thin;                       /* thin | auto */
  scrollbar-color: #582523 rgba(0,0,0,0.08);   /* thumb | track */
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 12px;                 /* vertical scrollbar */
  height: 12px;                /* horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background-color: #582523;   /* Brownyard maroon */
  border-radius: 999px;
  /* Creates some “padding” so the thumb looks pill-shaped */
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #6f2f2d;   /* slightly lighter on hover */
}

::-webkit-scrollbar-thumb:active {
  background-color: #4a1d1b;   /* slightly darker while dragging */
}

/* Optional: prevent layout shift when scrollbars appear */
body, .scrollable {
  scrollbar-gutter: stable;     /* Chrome/Edge/Firefox (modern) */
}

/* === Wavy lines for Elementor CONTAINERS (final) === */
:root{
  --flow-thickness: 2;           /* px */
  --flow-base-opacity: .22;      /* faint base line */
  --flow-highlight-opacity: .45; /* moving highlight */
  --flow-dash: 140;              /* bright segment length */
  --flow-gap: 640;               /* gap length */
  --flow-speed: 14s;             /* slower = calmer */
}

/* Container with the background effect */
.bg-flow.e-con{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color:#26334B;                 /* currentColor for the SVG */
}

/* Keep Elementor overlay under the SVG */
.bg-flow.e-con::before{ z-index:0 !important; }

/* Absolutely position the HTML widget behind the content */
.bg-flow .flow-abs{
  position:absolute;
  inset:-6% -2%;
  width:104%;
  height:112%;
  z-index:1;
  pointer-events:none;
}

/* Make the SVG fill its box */
.bg-flow .flow-svg{ width:100%; height:100%; display:block; }

/* Ensure normal content stays above the lines */
.bg-flow.e-con > .e-con-inner,
.bg-flow.e-con .e-con,
.bg-flow.e-con .elementor-widget,
.bg-flow.e-con .elementor-widget-wrap{
  position:relative;
  z-index:2;
}

/* Lines + animation */
.bg-flow .flow-base{
  stroke-width:var(--flow-thickness);
  stroke-opacity:var(--flow-base-opacity);
}

.bg-flow .flow-dash{
  stroke-width:var(--flow-thickness);
  stroke-linecap:round;
  opacity:var(--flow-highlight-opacity);
  stroke-dasharray:var(--flow-dash) var(--flow-gap);
  animation:flow-move var(--flow-speed) linear infinite !important;
  will-change: stroke-dashoffset;
}

/* Stagger the second line by half a cycle */
.bg-flow .flow-dash.delay{
  animation-delay: calc(var(--flow-speed) / -2) !important;
}

/* iOS Safari: drop the blur so the dash stays visible */
@supports(-webkit-touch-callout:none){
  .bg-flow .flow-dash[filter]{ filter:none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .bg-flow .flow-dash{ animation:none !important; }
}


/* ---- Straight line bg ---- */
/* ---- Controls ---- */
:root{
  --straight-thickness: 1.5;       /* px */
  --straight-base-opacity: .15;
  --straight-highlight-opacity: .5;
  --straight-dash: 80;          /* bright segment length */
  --straight-gap: 640;           /* gap length */
  --straight-speed: 20s;         /* slower = calmer */
}

/* Target container */
.bg-straight{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #26334B;                /* line color via currentColor */
}

/* Keep Elementor’s overlay (if any) under the SVG */
.bg-straight::before,
.bg-straight::after{ z-index: 0 !important; }

/* The HTML widget is absolutely positioned via Elementor; this sizes & centers it */
.bg-straight .elementor-element.straight-abs{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 100% !important;        /* fill container */
  height: 100% !important;       /* fill container */
  z-index: 1;                    /* below content, above overlay */
  pointer-events: none;          /* keep content clickable */
  margin: 0 !important;          /* kill unexpected spacing */
}

/* Make sure your normal content stacks above the lines */
.bg-straight > .e-con-inner > *:not(.straight-abs),
.bg-straight .elementor-widget:not(.straight-abs){
  position: relative;
  z-index: 2;
}

/* SVG sizing */
.bg-straight .straight-svg{
  width: 100%;
  height: 100%;
  display: block;
  opacity: .9;
}

/* Stroke + animation */
.bg-straight .straight-base{
  stroke-width: var(--straight-thickness);
  stroke-opacity: var(--straight-base-opacity);
}
.bg-straight .straight-dash{
  stroke-width: var(--straight-thickness);
  stroke-linecap: round;
  opacity: var(--straight-highlight-opacity);
  stroke-dasharray: var(--straight-dash) var(--straight-gap);
  animation: straight-move var(--straight-speed) linear infinite;
}
.bg-straight .straight-dash.delay{
  animation-delay: calc(var(--straight-speed) / -2);
}

/* Global keyframes (backup for the inline <style>) */
@keyframes straight-move{
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: calc(-1 * (var(--straight-dash) + var(--straight-gap))); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-straight .straight-dash{ animation: none; }
}

/* kill the SVG glow filter on iOS; slightly bump opacity so it still pops */
html.is-ios .bg-straight .straight-dash{
  filter: none !important;
  opacity: .6;
}

/* small perf hint helps Safari repaint */
.bg-straight .straight-dash{ will-change: stroke-dashoffset; }

/* Default: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-straight:not(.force-motion) .straight-dash { animation: none !important; }
}

/* Add .force-motion on the container when you want it to always animate */
.bg-straight.force-motion .straight-dash {
  animation: straight-move var(--straight-speed) linear infinite !important;
}

.bg-straight .straight-dash{
  will-change: stroke-dashoffset;
  transform: translateZ(0); /* nudge compositor */
}

/* =========================
   Animated background lines
   ========================= */

/* Container creates a local stacking context */
.bg-lines{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: currentColor;
}

/* Make the HTML widget that holds the overlay NOT be a positioning/stacking island */
.bg-lines .elementor-widget-html:has(.lines-overlay){
  position: static !important;
  z-index: 0 !important;      /* keep the whole widget low in the stack */
}

/* Overlay fills the container and sits behind content */
.bg-lines .lines-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;                 /* lines layer */
  pointer-events: none;
}

/* Regular content paints above the lines */
.bg-lines .elementor-widget{
  position: relative;
  z-index: 1;                 /* content layer */
}

/* If the section uses Elementor’s background overlay, keep it under the lines */
.bg-lines::before,
.bg-lines::after,
.bg-lines .elementor-background-overlay{ z-index: -1 !important; }

/* ---- Rails / animation ---- */
:root{
  --line-width: 1px;
  --seg-height: 42px;
  --base-opacity: .12;

  /* OPTION 1: stronger default glow */
  --seg-opacity: .78;         /* was .55 */
  --glow-blur: 38px;          /* was 25px */

  --speed: 8s;
}

.bg-lines .line{
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--line-width);
}
.bg-lines .line::before{
  content:"";
  position:absolute; inset:0;
  width:var(--line-width);
  background: currentColor;
  opacity: var(--base-opacity);
}

/* Use classes for x-positions */
.bg-lines .line.x-33 { left: 33.333%; }
.bg-lines .line.x-66 { left: 66.666%; }
.bg-lines .line.x-50 { left: 50%; }
.bg-lines .line.x-20 { left: 20%; }
.bg-lines .line.x-80 { left: 80%; }
.bg-lines .line.x-15 { left: 15%; }
.bg-lines .line.x-85 { left: 85%; }


/* Bright moving segment */
.bg-lines .seg{
  position:absolute; left:0;
  width:var(--line-width); height:var(--seg-height);
  background: currentColor; opacity: var(--seg-opacity);

  /* OPTION 2: layered glow — fallback first */
  box-shadow:
    0 0 calc(var(--glow-blur)*.55) currentColor,
    0 0 var(--glow-blur)           currentColor,
    0 0 calc(var(--glow-blur)*1.6) currentColor;

  will-change: top, bottom;
}

/* Nicer layered glow when color-mix is supported */
@supports (color-mix(in srgb, black, white)){
  .bg-lines .seg{
    box-shadow:
      0 0 calc(var(--glow-blur)*.55) color-mix(in srgb, currentColor 90%, transparent),
      0 0 var(--glow-blur)           color-mix(in srgb, currentColor 70%, transparent),
      0 0 calc(var(--glow-blur)*1.6) color-mix(in srgb, currentColor 45%, transparent);
  }
}

/* DOWN */
@keyframes seg-down {
  from { top: calc(-1 * var(--seg-height)); }
  to   { top: 100%; }
}
.bg-lines .seg.down{
  top: calc(-1 * var(--seg-height));
  animation: seg-down var(--speed) linear infinite;
  animation-delay: -0.05s;
}

/* UP */
@keyframes seg-up {
  from { bottom: calc(-1 * var(--seg-height)); }
  to   { bottom: 100%; }
}
.bg-lines .seg.up{
  bottom: calc(-1 * var(--seg-height));
  animation: seg-up var(--speed) linear infinite;
  animation-delay: -0.05s;
}

/* Stagger one by half a cycle */
.bg-lines .seg.stagger{
  animation-delay: calc(var(--speed) / -2);
}

/* Respect reduced motion (add .force-motion on the .bg-lines container to bypass) */
@media (prefers-reduced-motion: reduce){
  .bg-lines:not(.force-motion) .seg{ animation: none !important; }
}

/* =========================
   hover scheme
   ========================= */

/* Container hover scheme: keep default Elementor colors; flip to dark bg + light text on hover */
.hover-scheme{
  /* set your hover palette once (can override per container inline if needed) */
  --hover-bg: #26334B;   /* dark background on hover */
  --hover-fg: #ffffff;   /* light text on hover */
  --hover-border-color: #26334B;  /* border color on hover */
  position: relative;
  transition: color .35s ease;
}

/* Background overlay that appears only on hover/focus-within */
.hover-scheme::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hover-bg);
  opacity: 0;                        /* invisible by default (keeps your original bg) */
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;                        /* below content */
}

/* Flip on hover (and keyboard focus within) */
.hover-scheme:hover,
.hover-scheme:focus-within{
  color: var(--hover-fg);            /* container text color switches */
  border-color: var(--hover-border-color) !important;  /* color only; width/style unchanged */
}
.hover-scheme:hover::before,
.hover-scheme:focus-within::before{
  opacity: 1;                        /* show dark overlay */
}

/* Ensure content stays above overlay */
.hover-scheme > .e-con-inner,
.hover-scheme .elementor-container{ position: relative; z-index: 1; }

/* On hover, force typical text elements to the light color (doesn't touch default state) */
.hover-scheme:hover :where(.elementor-heading-title, h1,h2,h3,h4,h5,h6, p, li, span, .elementor-widget-text-editor){
  color: var(--hover-fg) !important;
}

/* Links: follow the light color on hover; keeps your underline-border trick coherent */
.hover-scheme:hover a{
  color: var(--hover-fg) !important;
  text-decoration-color: var(--hover-fg) !important; /* if using text-decoration */
}

/* Optional: make inline SVGs/icons follow the light color on hover */
.hover-scheme:hover svg{
  fill: currentColor; 
  stroke: currentColor;
}