/*
Theme Name: Hello Biz Child
Theme URI: https://github.com/elementor/hello-biz-child/
Description: Hello Biz Child is a child theme of Hello Biz, created by Elementor team
Author: Elementor Team
Template: hello-biz
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 1.0.0
Stable tag: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-biz-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready, style-variations
*/

/* Add your custom styles here */
:root {
	--linear-gradient: linear-gradient(45deg, #fc001f, #d51f29, #232424,#fc001f, #d51f29, #FF7800, 
    #3B3B2B, #ebebe1,#fff, #fc001f);
	  --sea-moss:   #88BFB0;
	  --fire-engine:#FC001F;
	  --mountain:   #3B3B2B;
	  --apple:      #D51F29;
	  --bone:       #EBEBE1;
	  --slate:      #232424;
	--white: #f0f0f0;
	--tangerine: 	#FF7800;
	   --bg:                 #ffffff;
	  --inactive:           #E4E4E4;
	  --secondary-text:     #999999;
	  --active:             #666666;
	  --primary-text:       #232424;
	  --definition:         #ebebe1;
	  --contrast:           #e9e9e9;
	  --theme-color:   #fc001f;
}

body {
	overflow-x:hidden;
}

@media only screen and (min-width:1025px) {
  .e-con>.e-con-inner {
    max-width: 1140px!important;
  }
}

@media only screen and (min-width:1921px) {
  body {
    font-size:1.5rem!important;
  }
  h2.main-page-title {
    font-size:4.5rem!important;
  }
  h2 {
    font-size:3.5rem!important;   
  }
  h3 {
    font-size:2rem!important;   
  }
  h4 {
    font-size:1.75rem!important;   
  }
  h5 {
    font-size:1.5rem!important; 
  }

  .e-con>.e-con-inner {
    max-width: 1600px!important;
  }

}

.rtmega-menu-mobile-button {
  font-size:2rem!important;
}
/* .elementor img {
  height:auto;
  width:100%;
} */
@media only screen and (max-width:940px) {
  .mask-wrap h2 span {
    font-size:3rem!important
  }
}

.rtmega-menu-area .mobile-menu-area .rtmega-menu-mobile-sidebar {
  top:150px!important;
}

/* ================
   EP Grid Preview
   ================ */

/* Base variables */
.elementor-location-archive, .ep-grid-0preview {
  --ep-grid-line-color: #4E4E4E1F;
  --ep-grid-line-columns: 4;
  --ep-grid-line-max-width: 1600px; /* fallback / default */
  --ep-grid-line-width: 1px;
  position: relative;
}

/* Overlay grid lines */
.elementor-location-archive::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--ep-grid-line-max-width);
  max-width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to right,
    var(--ep-grid-line-color),
    var(--ep-grid-line-color) var(--ep-grid-line-width),
    transparent var(--ep-grid-line-width),
    transparent calc(100% / var(--ep-grid-line-columns))
  );
  z-index: 9;
}

/* ==========
   Breakpoints
   ========== */

/* Mobile Portrait (≤767px) */
@media (max-width: 767px) {
  .elementor-location-archive {
    --ep-grid-line-max-width: 480px;
    --ep-grid-line-columns: 2;
  }
}

/* Tablet Portrait (768–1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
  .elementor-location-archive {
    --ep-grid-line-max-width: 768px;
    --ep-grid-line-columns: 4;
  }
}

/* Laptop (1025–1366px) */
@media (max-width: 1366px) and (min-width: 1025px) {
  .elementor-location-archive {
    --ep-grid-line-max-width: 1200px;
    --ep-grid-line-columns: 4;
  }
}

/* Widescreen (1367–1920px) */
@media (max-width: 1920px) and (min-width: 1367px) {
  .elementor-location-archive {
    --ep-grid-line-max-width: 1140px;
    --ep-grid-line-columns: 4;
  }
}

/* Extra Widescreen (>1920px) */
@media (min-width: 1921px) {
  .elementor-location-archive {
    --ep-grid-line-max-width: 1600px;
    --ep-grid-line-columns: 8;
  }
}


.relative {
	position: relative;
}

.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.sticky {
	position: sticky;
}

.forced-color-adjust {
	mix-blend-mode: difference;
	z-index:999;
}

.color-burn {
	mix-blend-mode: color-burn;
}

.element-pack-agbg-yes .bdt-animated-gradient-background {
  z-index:-1!important;
}

.customer-card {
    position: relative;
    overflow: hidden;
}

.customer-card .elementor-button-link  {
    transform: translateY(70px);
    transition: transform 0.2s ease-in-out;
}

.customer-card:hover .elementor-button-link  {
    transform: translateY(0);
}

.scroll-display {
    position: fixed;
    bottom: 50%;
    left: 10px;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-radius: 5px;
    z-index: 99999;
}

.theplus-scroll-navigation__dot {
	background-color: transparent!important;
	transition: all	0.3s ease-in-out;
	opacity: 0.8;
}

.theplus-scroll-navigation__dot:hover {
	background-color: transparent!important;
	transition: all	0.3s ease-in-out;
	opacity: 1;
}

.theplus-scroll-navigation__dot::after {
	content: ' ';
	display:block;
	position: relative;
	border-radius:0!important;
	height:10px;
	width:10px;
	padding:5px;
	/* this is the fix */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transform: rotate(45deg);
	background-color: #ffffff;
	border:5px solid rgba(255,255,255,0.5);
	 /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.theplus-scroll-navigation__dot span.tooltiptext {
    color: #fff;
    text-align: left!important;
    z-index: 2;
    position: absolute;
    transform: translate3d(13px, -50%, 0)!important;
    top: 50%;
    left: 100%;
}

.theplus-scroll-navigation.s_n_right {
	right: 140px;
}


.top-offset-100 {
	top: -100%;
}

.top-offset-80 {
	top: -90%!important;
}

.top-offset-50 {
	top: -50%;
}

.top-offset-30 {
	top: -30%;
}


header::after {
	    content: "";
		display: table;
		clear: both;
}

header > .elementor-sticky {
	transition: all .2s ease;
}

header.scrolled > .elementor-sticky {
	background: #232424;
	z-index:999;
}

header.scrolled > .elementor-sticky > div:last-child {
	border-top:1px solid #111;
}

main {
	position:relative;
	/* margin-top:-94px; */
}

.unlimited-elements-background-overlay {
	z-index: -1!important;
}

.benefit .e-lottie__container {
	cursor: pointer;
}

@media only screen and (min-width:768px) {

/* 1st, 3rd, 5th …  → right side of the grid */
.alt-shift-left .elementor-loop-container > .e-loop-item:nth-of-type(odd){
  transform:translateX(30px)
}

/* 2nd, 4th, 6th …  → left side (default)  */
.alt-shift-right .elementor-loop-container > .e-loop-item:nth-of-type(odd){
   transform:translateX(-30px)
}

}

.lottie-icon-horizontal-30 .e-lottie__container {
	display: inline-flex!important;
}


 .lottie-icon-horizontal-30 .e-lottie__animation {
    display:flex;
}

.lottie-icon-horizontal-30 .e-lottie__animation svg {
    width:30px!important;
    height:auto;
}

.lottie-icon-horizontal-30  .e-lottie__caption {
    align-self: flex-end!important;
    justify-self: center;
    text-align: left;
    white-space: nowrap;
    margin: 0;
    padding-left: .5em;
    height: 100%;
}

@media only screen and (max-width:1024px) {
    .lottie-icon-horizontal-30  .e-lottie__container {
    display:inline-flex;
}

.lottie-icon-horizontal-30 .e-lottie__animation {
    display:flex;
}

.lottie-icon-horizontal-30 .e-lottie__animation svg {
    width:30px!important;
    height:auto;
}

.lottie-icon-horizontal-30  .e-lottie__caption {
    display:none;
}
}


/* Remove transform or overflow on Elementor sections */
.elementor-sticky--effects,
.elementor-section-wrap,
.elementor-section {
  overflow: visible !important;
  transform: none !important;
}

.elementor-widget-image a img[src$=".svg"] {
  width: 100%!important;
  height: auto;
}

/* Make sure submenu has sticky applied */

.sticky-submenu.elementor-sticky--active {
  padding-top:1.5rem;
	border-bottom:1px solid #999;
}
.sticky-submenu.elementor-sticky--active .e-con-inner {
  padding:0!important;
  transition: all 0.2s ease;
}

.btn-anim-arrow:hover a > span i  {
    transform: translate3d(5px, 0, 0) scale(1.1);
    transition:all .2s ease;
}

.btn-anim-arrow:hover a > span {
  transform: scale(1.05);
    transition:all .2s ease;
}

@media only screen and (min-width:1921px) {
  .btn-anim-arrow a > span {
    font-size:1.5rem!important;
}
.sticky-submenu ul li a {
    font-size:1.5rem!important;
}
}

.btn-pdf-animation:hover {
    transform: scale(1.05);
    color:#fc001f;
    transition:all .2s ease;
}

.button--telesto a > span {
	display: flex;
	position: relative;
	z-index: 1;
}

.button--telesto > span {
	overflow: hidden;
	mix-blend-mode: difference;
}

.button--telesto a:hover > span  {
	animation: MoveRightInitial 0.1s forwards, MoveRightEnd 0.3s forwards 0.2s;
}

.button--telesto .red a:hover:visited {
  color:#fff!important;
} 

.button--telesto .red a:visited {
  color:#fff!important;
} 


.button--telesto a:hover:visited {
  color:#fff!important;
} 

@keyframes MoveRightInitial {
	to {
		transform: translate3d(105%,0,0);
	}
}

@keyframes MoveRightEnd {
	from {
		transform: translate3d(-100%,0,0);
	}
	to {
		transform: translate3d(0,0,0);
	}
}

.button--telesto a {
	pointer-events: auto;
	cursor: pointer;
	border: none;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	position: relative;
	display: inline-block;
    overflow:hidden;
}

.button--telesto a::before,
.button--telesto a::after {
	content: ' ';
	background: #111;/*#88bfb0; /*#3b3b2b;*/
    display:block;
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button--telesto.red a::before,
.button--telesto.red a::after {
	content: ' ';
	background: #fc001f!important;/*#88bfb0; /*#3b3b2b;*/
    display:block;
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button--telesto a::before {
	width: 135%;
	-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
	clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
	transform: translate3d(-100%,0,0);
}

.button--telesto a:hover::before {
	transform: translate3d(0,0,0);
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button--telesto a::after {
	width: 105%;
	transform: translate3d(100%,0,0);
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button--telesto a:hover::after {
	transform: translate3d(0,0,0);
	transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

@media only screen and (min-width:768px) {
/* Keep the container unrotated; draw the diamond with ::before so text stays 0deg */
.rhombus { 
  width: 300px !important; 
  cursor: pointer; 
}

.rhombus .elementor-widget-container { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

.rhombus.nth4 { transform: translate3d(20%, -25%, 0); }
.rhombus.nth5 { transform: translate3d(-20%, -25%, 0); }
}

@media only screen and (max-width:767px) {
  .rhombus:nth-child(odd) {
    transform:translateX(-25%);
  }

   .rhombus:nth-child(even) {
    transform:translateX(25%);
  }
}

/* UNROTATED content container */
.rhombus .e-lottie__container {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column; /* stack icon over caption */
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: visible; /* let rotated ::before extend */
}

/* Rotated diamond background that does NOT affect children */
.rhombus .e-lottie__container::before {
  content: "";
  position: absolute;
  inset: 0; /* fill the 200x200 box */
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(35,36,36, 0.8);
  border: 12px solid #fff;
  transform: rotate(-45deg);
  z-index: 0; /* behind content */
  pointer-events: none; /* clicks go through */
}

/* Content stays upright */
.rhombus .e-lottie__animation,
.rhombus .e-lottie__caption { 
  position: relative; 
  z-index: 1; 
  transform: none; 
}

.rhombus .e-lottie__animation { 
  width: 100px; 
  transition: transform 0.3s ease-in; 
}

.rhombus .e-lottie__caption { 
  text-align: center; 
  width: 100%;
  /* neutralize previous absolute rules if they existed */
  position: static !important;
  top: auto !important; 
  left: auto !important; 
}

/* Hover effects without changing rotation */
.rhombus:hover .e-lottie__container { transform: scale(1.05);transition: all 0.3s ease-in;  }



/* Form Styles */

.inline-form form .wpcf7-submit {
	position: absolute;
    width: 35%!important;
    right: 8px;
    top: 33px;
}

.inline-form form .wpforms-submit-container {
	position: absolute;
    width: 35%!important;
    right: 8px;
    top: 30px;
	padding:0!important;
	margin:0!important;
}

.inline-form .wpforms-field-label {
	display:none!important;
}

.inline-form .wpforms-field.wpforms-field-email {
	padding:0!important;
	border-radius:33px;
	background:#fff;
	border:1px solid #e4e4e4;
}

.inline-form .wpforms-submit {
	width:100%;
	border-radius:33px!important;
}

.inline-form .wpforms-field.wpforms-field-email:focus, .inline-form .wpforms-field.wpforms-field-email:focus-visible, .inline-form .wpforms-field.wpforms-field-email:focus-within {
  outline: none!important; /* or outline: 0; */
}


.inline-form form input[type=email] {
  /* Remove default browser appearance */
  -webkit-appearance: none!important;
  -moz-appearance: none!important;
  appearance: none!important;

  /* Make the background completely transparent */
  background-color: transparent!important; 

  /* Remove default border */
  border: none!important; 

  /* Remove default outline when focused */
  outline: none!important; 
}


.elementor .elementor-element.elementor-widget-n-tabs:not(:has(>.elementor-widget-container))>.e-n-tabs>.e-n-tabs-heading .e-n-tab-title[aria-selected=true], .elementor .elementor-element.elementor-widget-n-tabs:not(:has(>.elementor-widget-container))>.e-n-tabs[data-touch-mode=true]>.e-n-tabs-heading .e-n-tab-title[aria-selected=false]:hover, .elementor .elementor-element.elementor-widget-n-tabs>.elementor-widget-container>.e-n-tabs>.e-n-tabs-heading .e-n-tab-title[aria-selected=true], .elementor .elementor-element.elementor-widget-n-tabs>.elementor-widget-container>.e-n-tabs[data-touch-mode=true]>.e-n-tabs-heading .e-n-tab-title[aria-selected=false]:hover {
	background-color:transparent!important;
	box-shadow:none!important;
}

.elementor .elementor-element.elementor-widget-n-tabs:not(:has(>.elementor-widget-container))>.e-n-tabs[data-touch-mode=false]>.e-n-tabs-heading .e-n-tab-title[aria-selected=false]:hover, .elementor .elementor-element.elementor-widget-n-tabs>.elementor-widget-container>.e-n-tabs[data-touch-mode=false]>.e-n-tabs-heading .e-n-tab-title[aria-selected=false]:hover {
	background-color:transparent!important;
	box-shadow:none!important;
}

/* BLOCK - Rainbox Glow */
.block:hover .elementor-widget-container{
	z-index:1;
	position:relative;
}

.block:hover:before, .block:hover:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: var(--linear-gradient);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: 0;
  animation: steam 20s linear infinite;
  border-radius: 18px;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.block:after {
  filter: blur(50px);
}

/* Gradient Border */

.gradient-border .elementor-widget-container {
  --border-width: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%!important;
  height: 100%!important;
  font-family: Lato, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: 10px;
  transition: all .2s ease;
  transform:scale(1);
}

.gradient-border .elementor-widget-container:hover {
	 transform:scale(1.1);
	 cursor:pointer;
}


.gradient-border .elementor-widget-container:hover::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: var(--linear-gradient);
  background-size: 300% 300%;
  background-position: 0 50%;
  animation: moveGradient 4s alternate infinite;

  clip-path: polygon(
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    calc(var(--border-width)) calc(var(--border-width)),
    calc(var(--border-width)) calc(100% - var(--border-width)),
    calc(100% - var(--border-width)) calc(100% - var(--border-width)),
    calc(100% - var(--border-width)) calc(var(--border-width)),
    calc(var(--border-width)) calc(var(--border-width))
  );

  -webkit-clip-path: polygon(
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    calc(var(--border-width)) calc(var(--border-width)),
    calc(var(--border-width)) calc(100% - var(--border-width)),
    calc(100% - var(--border-width)) calc(100% - var(--border-width)),
    calc(100% - var(--border-width)) calc(var(--border-width)),
    calc(var(--border-width)) calc(var(--border-width))
  );
}



@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

.max-height-overflow .elementor-widget-container {
  max-height:12rem;
  overflow:hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

.aspect-16-9 {
  position: relative;
  width: 100%; /* or set a fixed width if needed */
  padding-bottom: calc(100% * (9 / 16)); /* 16:9 ratio */
  overflow: hidden;
}

.aspect-16-9 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* use 'contain' if you prefer full image with possible letterboxing */
}

.square {
  position: relative;
  width: 100%; /* or set a fixed width if needed */
  padding-bottom: calc(100% * (1 / 1)); /* square ratio */
  overflow: hidden;
}

.square img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* use 'contain' if you prefer full image with possible letterboxing */
}


.elementor-widget-ucaddon_icon_box_hover_effect .icon_box_hover_effect {
  height:100%;
  border-radius: 17px;
}


/* =========================
   Elementor Loop Grid Accordion (scoped to .grid-accordion)
   ========================= */

.grid-accordion .elementor-loop-container.elementor-grid {
  display: grid;
  gap: 0;
  grid-auto-flow: row dense;
  background-color: #f0f0f0;
}

/* Flatten wrappers so tile + desc are direct grid items */
.grid-accordion .elementor-loop-container.elementor-grid .e-loop-item,
.grid-accordion .elementor-loop-container.elementor-grid .e-loop-item > .e-con,
.grid-accordion .elementor-loop-container.elementor-grid .e-loop-item > .e-con > .e-con-inner {
  display: contents !important;
}

/* ---- TILE ---- */
.grid-accordion .elementor-loop-container.elementor-grid .e-loop-item .elementor-element-5eff520 {
  position: relative;  /* needed for triangle positioning */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-bg, #fff);
  border: 1px solid #e4e4e4;
  min-height: 150px;
  cursor: pointer;
}

.grid-accordion .elementor-loop-container.elementor-grid .e-loop-item .elementor-widget-image img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 200px;
}

/* ---- ACTIVE TILE TRIANGLES ---- */
:root {
  --acc-tri-size: 10px;
  --acc-tri-border: #e4e4e4;
  --acc-tri-fill: #fff;
}

.grid-accordion .elementor-loop-container.elementor-grid
  .e-loop-item .elementor-element-5eff520.is-open::before,
.grid-accordion .elementor-loop-container.elementor-grid
  .e-loop-item .elementor-element-5eff520.is-open::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Gray outline triangle */
.grid-accordion .elementor-loop-container.elementor-grid
  .e-loop-item .elementor-element-5eff520.is-open::before {
  bottom: -1px;
  border-left: var(--acc-tri-size) solid transparent;
  border-right: var(--acc-tri-size) solid transparent;
  border-bottom: var(--acc-tri-size) solid var(--acc-tri-border);
  z-index: 1;
}

/* White fill triangle */
.grid-accordion .elementor-loop-container.elementor-grid
  .e-loop-item .elementor-element-5eff520.is-open::after {
  bottom: -1px;
  border-left: var(--acc-tri-size) solid transparent;
  border-right: var(--acc-tri-size) solid transparent;
  border-bottom: var(--acc-tri-size) solid var(--acc-tri-fill);
  z-index: 2;
  transform: translateX(-50%) rotate(180deg) translateY(-9px);
}

/* ---- DESCRIPTION (hidden by default) ---- */
.grid-accordion .elementor-loop-container.elementor-grid .grid__description {
  grid-column: 1 / -1;
  display: none;
  height: 0;
  overflow: hidden;
  background: #f0f0f0;
  border: 1px solid #e4e4e4;
  padding: 0;
  transition: height 0.45s ease;
  will-change: height;
}

.grid-accordion .elementor-loop-container.elementor-grid
  .grid__description .elementor-widget-theme-post-excerpt {
  padding: 0;
}

.grid-accordion .elementor-loop-container.elementor-grid
  .grid__description.active .elementor-widget-theme-post-excerpt {
  padding: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .grid-accordion .elementor-loop-container.elementor-grid .grid__description {
    transition: none;
  }
}


/* ---- ACTIVE DESCRIPTION ---- */
.swiper-pagination-bullet {
  width: 12px!important;
    border-radius: 5px!important;
    transition:all .2s ease;
    height:8px!important;
}

.swiper-pagination-bullet-active {
  width: 30px!important;
}


/* ===== Angled mask (from earlier) ===== */
.angled-mask {
  --slope: 66px; /* adjust to taste */
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 var(--slope), 100% 0, 100% calc(100% - var(--slope)), 0 100%);
  -webkit-clip-path: polygon(0 var(--slope), 100% 0, 100% calc(100% - var(--slope)), 0 100%);
}

.angled-mask--reverse {
  clip-path: polygon(0 0, 100% var(--slope), 100% 100%, 0 calc(100% - var(--slope)));
  -webkit-clip-path: polygon(0 0, 100% var(--slope), 100% 100%, 0 calc(100% - var(--slope)));
}

.angled-mask--asym {
  --slope-top: 24px;
  --slope-bottom: 56px;
  clip-path: polygon(0 var(--slope-top), 100% 0, 100% calc(100% - var(--slope-bottom)), 0 100%);
  -webkit-clip-path: polygon(0 var(--slope-top), 100% 0, 100% calc(100% - var(--slope-bottom)), 0 100%);
}

.angled-mask--top-only {
  --slope: 66px;
  clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
}

.angled-mask--bottom-only {
  --slope: 66px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope)), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope)), 0 100%);
}

/* ===== NEW: Tight stacking helpers ===== */
/* Use this when you stack angled sections so edges sit flush */
.angled-stack {
  /* nothing here; acts as an opt-in hook */
}

/* If BOTH edges are angled, cancel the visual triangles on both sides */
.angled-stack.angled-mask {
  margin-top: calc(-1 * var(--slope));
  margin-bottom: calc(-1 * var(--slope));
}

/* If only the TOP is angled, pull it up to meet the previous section */
.angled-stack.angled-mask--top-only {
  margin-top: calc(-1 * var(--slope));
  margin-bottom: 0;
}

/* If only the BOTTOM is angled, pull the next section up by overlapping this one */
.angled-stack.angled-mask--bottom-only {
  margin-bottom: calc(-1 * var(--slope));
  margin-top: 0;
}

/* If using asymmetric slopes, cancel each side precisely */
.angled-stack.angled-mask--asym {
  margin-top: calc(-1 * var(--slope-top));
  margin-bottom: calc(-1 * var(--slope-bottom));
}

/* Nice-to-have: don't pull the very first/last items past outer boundaries */
.angled-stack:first-child { margin-top: -66px; }
.angled-stack:last-child  { margin-bottom: 0; }


/* ===== Angled mask (from earlier) ===== */
.angled-mask {
  --slope: 66px; /* adjust to taste */
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 var(--slope), 100% 0, 100% calc(100% - var(--slope)), 0 100%);
  -webkit-clip-path: polygon(0 var(--slope), 100% 0, 100% calc(100% - var(--slope)), 0 100%);
}

.angled-mask--reverse {
  clip-path: polygon(0 0, 100% var(--slope), 100% 100%, 0 calc(100% - var(--slope)));
  -webkit-clip-path: polygon(0 0, 100% var(--slope), 100% 100%, 0 calc(100% - var(--slope)));
}

.angled-mask--asym {
  --slope-top: 24px;
  --slope-bottom: 56px;
  clip-path: polygon(0 var(--slope-top), 100% 0, 100% calc(100% - var(--slope-bottom)), 0 100%);
  -webkit-clip-path: polygon(0 var(--slope-top), 100% 0, 100% calc(100% - var(--slope-bottom)), 0 100%);
}

.angled-mask--top-only {
  --slope: 66px;
  clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
}

.angled-mask--bottom-only {
  --slope: 66px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope)), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope)), 0 100%);
}

/* ===== NEW: Mobile-only Tight stacking helpers ===== */
/* Use this when you stack angled sections so edges sit flush */

@media only screen and (max-width:767px) {

    .mobile-angled-stack {
      /* nothing here; acts as an opt-in hook */
    }

    /* If BOTH edges are angled, cancel the visual triangles on both sides */
    .mobile-angled-stack.mobile-angled-mask {
      margin-top: calc(-1 * var(--slope));
      margin-bottom: calc(-1 * var(--slope));
    }

    /* If only the TOP is angled, pull it up to meet the previous section */
    .mobile-angled-stack.mobile-angled-mask--top-only {
      margin-top: calc(-1 * var(--slope));
      margin-bottom: 0;
    }

    /* If only the BOTTOM is angled, pull the next section up by overlapping this one */
    .mobile-angled-stack.mobile-angled-mask--bottom-only {
      margin-bottom: calc(-1 * var(--slope));
      margin-top: 0;
    }

    /* If using asymmetric slopes, cancel each side precisely */
    .mobile-angled-stack.mobile-angled-mask--asym {
      margin-top: calc(-1 * var(--slope-top));
      margin-bottom: calc(-1 * var(--slope-bottom));
    }

    /* Nice-to-have: don't pull the very first/last items past outer boundaries */
    .mobile-angled-stack:first-child { margin-top: -66px; }
    .mobile-angled-stack:last-child  { margin-bottom: 0; }
}

/* Gravity forms overrides */
.gform-field-label--type-sub {
	display:none!important;
}
.gform-theme--foundation .gform_fields {
     row-gap: 1.5rem!important;
}

.gfield_required_text {
	color:var(--bone)!important;
}

.gform_validation_errors {
	border:1px solid var(--white)!important;
}

.gform_submission_error, .gform-icon {
	color:var(--bone)!important;
}

.gform-icon {
	border:1px solid var(--bone)!important;
}

.gfield_error input {
	border:2px solid var(--tangerine)!important;
}

.sub-title {
	color: var(--white);
	padding-left: 1rem;
	border-left:2px solid var(--white);
}