@font-face
{
  font-family: monor;
  src: url('../../fonts/Montserrat-Regular.ttf');
  font-display:swap;
}

@font-face
{
	font-family: monob;
	src: url('../../fonts/Montserrat-Bold.ttf');
	font-display:swap;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   HSB DESIGN SYSTEM - ROOT VARIABLES
   Added: 2025-10-13
   Modern Banking Design System
   ======================================== */
:root {
  /* Brand Colors - Converted from CMYK */
  --hsb-grey: #6D6E72;
  --hsb-gold: #BBA14C;
  --hsb-blue-primary: #0068b3;
  --hsb-blue-dark: #004990;
  --hsb-blue-light: #5c9ed6;

  /* Neutral Palette */
  --hsb-white: #ffffff;
  --hsb-black: #121212;
  --hsb-grey-light: #f8f9fa;
  --hsb-grey-medium: #e0e0e0;
  --hsb-grey-dark: #474746;

  /* Accent Colors */
  --hsb-gold-light: #d4c68a;
  --hsb-gold-dark: #a08a3f;

  /* Semantic Colors */
  --hsb-success: #28a745;
  --hsb-warning: #ffc107;
  --hsb-danger: #dc3545;
  --hsb-info: #17a2b8;

  /* Typography */
  --hsb-font-primary: 'monob', sans-serif;
  --hsb-font-regular: 'monor', sans-serif;

  /* Spacing Scale (8px base) */
  --hsb-space-xs: 0.5rem;    /* 8px */
  --hsb-space-sm: 1rem;      /* 16px */
  --hsb-space-md: 1.5rem;    /* 24px */
  --hsb-space-lg: 2rem;      /* 32px */
  --hsb-space-xl: 3rem;      /* 48px */
  --hsb-space-xxl: 4rem;     /* 64px */

  /* Border Radius */
  --hsb-radius-sm: 4px;
  --hsb-radius-md: 8px;
  --hsb-radius-lg: 12px;
  --hsb-radius-xl: 16px;
  --hsb-radius-round: 50%;

  /* Shadows - Professional & Subtle */
  --hsb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --hsb-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --hsb-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --hsb-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);

  /* Transitions */
  --hsb-transition-fast: 0.2s ease;
  --hsb-transition-normal: 0.3s ease;
  --hsb-transition-slow: 0.5s ease;
}

.slicknav_menu
{
  display: none;
}

.slicknav_nav .slicknav_arrow 
{
    font-size: 17px !important;
}

.slicknav_btn
{
  float: left !important;
}

.clear
{
    clear: both;
}



.editing-area
{
	/*position: relative;*/
	width: 100%;
	/*background-color: maroon;*/
}


.menu-div
{
	text-align: center;
	background-color: #0068b3;
}
.sf-menu
{
	/*display: inline-block;*/
	float: inherit !important;
	display: flex;
	justify-content: flex-end;
	gap: 25px;
}

.sf-menu a
{
	border-left: none !important;
	color: white !important;
	font-family: monob;
	text-transform: uppercase;
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}



/* Edit toolbar - styled via Tailwind classes in session.php */
.editing-area .edit
{
	/* Legacy styles removed - now using Tailwind */
}




.ck_align_left
{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

.ck_align_right
{
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

.ck_image_radius
{
	border-radius: 15px;
}

.ck_border_1
{
	padding: 5px;
	border: 1px solid #d9d7d4;
	-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .17);
	-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .17);
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .17);
}

.ck_center
{
	 display: block !important;
text-align: center;
}

.ck_photo_wrapper
{
	display: inline-block;
		
}

.ck_photo_position
{
	position: relative;
}

.ck_main_photo
{
	width: 100%;
}
.ck_photo_caption
{
	display: none;	
}

.ck_caption_1
{
	
	text-align: center;
	display: block;
}

.ck_caption_2
{
	
	position: absolute;
	top: 100%;
	width: 100%;
	text-align: center;
	display: block;
}

.ck_caption_settings
{
	padding-left: 20px;
}



.my-acc, .my-tab
{
	background: #004990;
	color: #ffffff;
	cursor: pointer;
	padding: 12px;
	width: 100%;
	border: none;
	text-align: left;
	font-size: 20px;
	transition: background-color 0.4s, color 0.4s;
	border-radius: 3px;
	padding-right: 60px;
	margin-bottom: 20px;
	position: relative;
}
.my-acc:focus-visible, .my-tab:focus-visible {
	outline: 3px solid #BBA14C;
	outline-offset: 2px;
}

.my-acc::after, .my-tab::after
{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f078";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.35s ease;
	font-size: 18px;
}

.my-active::after
{
	transform: translateY(-50%) rotate(180deg);
}

.my-active, .my-acc:hover, .my-tab:hover
{
	background-color: #bbbbbb;
	color: black;
}

.my-panel
{
	padding: 18px 18px 50px;
}

.my-panel .hsb-section-title
{
	display: none;
}




.vert-tabs
{
	display: flex;
	justify-content: space-between;
}

.my-tabs
{
	width: 25%;
}

.my-tabs-data
{
	width: 73%;
}

.show-mobile
{
	display: none;
}

.special-width
{
	width: 100%;
	max-width: 1600px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;

}

.head-flex
{
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.logo
{
	margin-bottom: 15px;
}

.logo img
{
	width: 100%;
	max-width: 500px;
}

.fdic-badge
{
	margin-top: 5px;
}

.fdic-badge img
{
	max-width: 300px;
	height: auto;
}

.search-area
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	min-width: 337px;
	max-width: 337px;
}


.search-container {

}

.search-container input[type=text] {
	padding: 6px;
	margin-top: 8px;
	font-size: 17px;
	border: solid 1px #000000;
	width: 143px;
}

.search-container button {
	float: right;
	padding: 6px 10px;
	margin-top: 8px;

	background: none;
	font-size: 17px;
	border: none;
	cursor: pointer;
	margin-left: -40px;
	position: relative;
}

.login-link
{
	padding-top:17px;
}
.login-link a
{
	background-color: #0068b3;
	color: white;
	padding: 10px;
	font-family: monob;
	margin-right: 5px;
}

.login-link a:hover
{
	color: white;
}

.sub-link-flex
{
	flex-basis: 100%;
	text-align: right;
	padding-right: 5px;
}

.sub-link-flex a
{
	font-family: monob;
	color: #313232;
}

.special-width-2
{
	width: 100%;
	max-width: 1300px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.orange-title
{
	font-family: monob;
	color: #bba14c;
	font-size: 32px;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	-webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.2);
}

.gray-text
{
	color: #474746;
	font-family: monob;
	font-size: 18px;
}

.button-padd
{
	margin-top: 40px;
}

.capt-button a
{
	padding: 10px;
	border: solid 3px #0068b3;
	color: #bba14c;
	font-family: monob;
	background-color: rgba(255, 255, 255, .8);
}

.login-box
{
	padding: 40px;
	border: solid 2px #bba14c;
	background-color: rgba(255, 255, 255, .8);
	border-radius: 30px;
	margin-top: 3%;
}

.solid-color a
{
	background-color: #0068b3;
	color: white;
}
.orange-link
{
	padding-top: 20px;
}

.orange-link a
{
	color: #bba14c;
	font-family: monob;
}

#e1 {
	background: #ffffff;
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


#e1 h1 {

	font-family: monob;
	font-size: 4.2rem;
	font-weight: 700;

	position: relative;
	margin-bottom: 3.5rem;
	padding-bottom: 0.5rem;
}

/* Full-width underline */
#e1 h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--hsb-gold) 0%, var(--hsb-gold-light) 100%);
	border-radius: 2px;
}


#e1
{
	font-family: monob;
	margin-bottom: 30px;
}

.heb-list {
	list-style: none;
	padding: 0;
	margin-top: 30px;
}
.heb-list li {
	background: url('../../img/heb.jpg') no-repeat left center;
	background-size: 1em;
	padding-left: 1.5em;
	margin-left: 10px;
	margin-bottom: 8px;
	color: #bba14c;

}

.gray-section
{
	background-color: #fbfbfb;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.hsb-title
{
	font-family: monob;
	color: #121212;
	border-bottom: solid 2px #000000;
	border-right: solid 2px #000000;
	width: 234px;
	font-size: 25px;
	margin: auto;
}

.hsb-text
{
	color: #6d6e6f;
	font-family: monob;
	text-align: center;
	font-size: 16px;
	margin: auto;
	width: 80%;
	padding-bottom: 30px;
	padding-top: 10px;
	background-color: #fbfbfb;
}

.hsb-text-box
{
	color: #6d6e6f;
	font-family: monob;
	text-align: left;
	font-size: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.hsb-blue
{
	font-family: monob;
	color: #0068b3;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.hsb-flex
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
}

.hsb-box
{
	margin-bottom: 30px;
	width: 30%;
}

.hsb-link a
{
	font-family: monob;
	color: #bba14c;
}











.tan{background-color:#e8e8df;}
.footer-text{color:#5c5957;}
.footer-padding{padding-top:20px;min-height:150px;}
.footer-text h2{text-transform:uppercase;margin:0px;}
.footer-text a{display:block;color: #3b5194;}

.sub-footer-back-color{background-color:#f2f2f2;}
.sub-footer{background:url(../../img/sub-footer-back.jpg);background-repeat:repeat-x;min-height:50px;padding-top:25px;}
.sub-footer a, .sub-footer{color:#ffffff;}

footer
{
	font-family: monob;
}

.footer-flex
{
	display: flex;
	justify-content: space-between;
}

.foot-box
{
	margin-right: 20px;
}

#footcontent2 a:hover
{
	color: white;
}

.white-section
{
	margin-top: 60px;
	margin-bottom: 30px;
	background: white;
	display: none;
}

.work-together
{
	display: none;
}

.white-flex
{
	display: flex;
	justify-content: space-between;
}

.larger-width
{
	width: 325px;
	margin: inherit;
}

.w-title
{
	color: #6d6e6f;
	font-family: monob;
}

.w-text
{
	color: #6d6e6f;
	font-family: monob;
	padding-left: 20px;
}

.w-box-1
{
	width: 45%;
}

.w-box-2
{
	width: 52%;
}

.w-section
{
	margin-bottom: 30px;
	margin-top: 10px;
}

.w-flex
{
	display: flex;
	align-items: center;
}

.blue-section
{
	background: #0068b3;
	margin-bottom: 30px;
	padding-top: 50px;
	padding-bottom: 50px;
}
.blue-flex
{
	display: flex;
	justify-content: space-between;

}

.blue-box
{
	width: 100%;
	max-width: 327px;
	background: white;
	margin-top: 30px;
}

.blue-img img
{
	width: 100%;
}

.blue-title
{
	font-family: monob;
	color: white;
	border-bottom: solid 2px white;
	border-right: solid 2px white;
	width: 304px;
	font-size: 25px;
	margin: auto;
}

.blue-orange-title
{
	font-family: monob;
	color: #bba14c;
	font-size: 22px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.blue-padding
{
	padding-left: 20px;
	padding-right: 20px;
}

.blue-text
{
	color: #6d6e6f;
	font-family: monob;
	text-align: left;
	padding-bottom: 20px;
}

.blue-link a
{
	color: #0068b3;
	font-family: monob;

}

.blue-link
{
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 30px;
}

.contact-link
{
	background-color: #bba14c;
	padding: 10px;
	border-radius: 30px;
	color: white;
	font-family: monob;
}

.contact-link:hover
{
	color: white;
}

.circle-link
{
	color: #bba14c;
	background-color: #faf0f0;
	padding: 10px;
	border-radius: 30px;
}

.this-font
{
	font-family: monob;
	color: #6d6e6f;
}

.mobile-login
{
	display: none;
}

.home-image
{
	float: right; padding-left: 20px;
	width: 100%;
	max-width: 500px;
}

.page_content .body_table th, .blue_cell{background-color:#004b8b;color:#ffffff;border:solid 1px #efefef;font-size:16px;text-align:left;}
.page_content .body_table td{border:solid 1px #efefef;font-size:16px;text-align:center !important;}
.page_content .body_table tr:nth-child(odd){background:#a7bfde;}
.page_content .body_table tr:nth-child(even){background:#edf2f8;}

.bod-cont, .button-con
{
	text-align: justify; /*can also use left here */
	-ms-text-justify: distribute-all-lines;
	text-justify: distribute-all-lines;
	width: 100%;

}

.bod-box
{
	width: 25%;
	vertical-align: middle;
	display: inline-block;
	*display: inline;
	zoom: 1;
	text-align: left;

}



.bc {
	list-style: none;
	overflow: hidden;
	font: 18px Helvetica, Arial, Sans-Serif;
	margin-bottom: 25px !important;
	margin-left: 0px;
}

.bc li {
	float: left;
}

.bc li a {
	color: black;
	text-decoration: none;
	padding: 10px 0 10px 55px;
	background: brown;
	background: hsla(199, 100%, 83%, 1);
	position: relative;
	display: block;
	float: left;
}

.bc li a:after {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid hsla(199, 100%, 83%, 1);
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 2;
}

.bc li a:before {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid white;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	margin-left: 1px;
	left: 100%;
	z-index: 1;
}

.bc li:first-child a {
	padding-left: 10px;
}

.bc li:nth-child(2) a {
	background: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(2) a:after {
	border-left-color: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(3) a {
	background: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(3) a:after {
	border-left-color: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(4) a {
	background: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(4) a:after {
	border-left-color: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(5) a {
	background: hsla(199, 100%, 83%, 1);
}

.bc li:nth-child(5) a:after {
	border-left-color: hsla(199, 100%, 83%, 1);
}

.bc li:last-child a {
	background: white !important;
	color: black;
}

.bc li:last-child a:after {
	border: 0;
}

.bc li a:hover {
	background: hsla(199, 100%, 62%, 1);
}

.bc li a:hover:after {
	border-left-color: hsla(199, 100%, 62%, 1) !important;
}



 .nav-pills > li > a {
	 border-radius: 50px;
	 margin: 2px;
	 /*background-color: #f5f5f5;*/
	 border: 1px solid #ddd;
 }
.nav-pills > li > a:hover {
	background-color: #e6e6e6;
}
.nav-pills > li.active > a {
	background-color: #337ab7;
	color: #fff;
	border-color: #337ab7;
}

.custom-pills > li > a {
	padding: 10px 20px;
	border-radius: 50px;
	margin-right: 10px;
	background-color: #f5f5f5;
	color: #333;
	transition: background-color 0.3s ease;
	font-weight: 500;
}

.custom-pills > li > a:hover,
.custom-pills > li.active > a {
	background-color: #337ab7;
	color: #fff;
}

.custom-pills .arrow {
	margin-left: 6px;
	font-size: 14px;
}


/* CSS */
.phone-contact {
	display: flex;
	align-items: center;
	font-family: monob;
	margin-top: 20px;
	padding-left: 30px;
}

.phone-icon {
	background-color: #bba14c;
	border-radius: 20%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.phone-icon i {
	color: white;
	font-size: 20px;
}

.phone-text {
	margin-left: 15px;
	line-height: 1.2;
}

.phone-text a {
	color: #000;
	text-decoration: none;
	font-weight: bold;
}



/* base styling */
.sf-menu li {
	position: relative;
}

.sf-menu ul {
	position: absolute;
	top: 0;
	left: 100%; /* default: open to the right */
	display: none;
	min-width: 220px;
	background: #fff;
	border: 1px solid #ddd;
	z-index: 9999;
}

.sf-menu li:hover > ul,
.sf-menu li:focus-within > ul {
	display: block;
}

/* prevent off-screen: flip left */
.sf-menu li ul.submenu-left {
	left: auto;
	right: 100%;
}


/* 🔹 TOP-LEVEL parent links with submenus */
.sf-menu > li > a.sf-with-ul {
	position: relative;
	padding-left: 1.5em !important; /* space for chevron */
}

.sf-menu > li > a.sf-with-ul::before {
	content: "\f054"; /* FA chevron-right */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0; /* sits neatly at start of link */
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.75em;
	pointer-events: none;
}

/* 🔹 SUBMENU parent links */
.sf-menu ul li > a.sf-with-ul {
	position: relative;
	padding-right: 1.2em; /* space on right for chevron */
}

.sf-menu ul li > a.sf-with-ul::before {
	content: "\f054"; /* FA chevron-right */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	right: 0.4em; /* arrow floats right in submenus */
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.65em;
	pointer-events: none;
}


/* 🔥 Remove default Superfish arrow styles (CSS triangles) */
.sf-arrows .sf-with-ul::after,
.sf-arrows .sf-with-ul::before {
	border: none !important;
}


/* 🔹 ROOT MENU (already set, but for consistency) */
.sf-menu > li > a {
	background-color: #0068b3;
	color: #fff;
	padding: 12px 18px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.3s ease;
}


/* 🔹 SUBMENU CONTAINER */
.sf-menu ul {
	background-color: #ffffff !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
	padding: 8px 0 !important;
	min-width: 220px !important;
}

/* 🔹 SUBMENU LINKS */
.sf-menu ul li a {
	background-color: #ffffff !important;
	color: #333 !important;
	padding: 10px 16px !important;
	display: block !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	border-left: 3px solid transparent !important;
	text-align: left;
}

/* 🔹 SUBMENU HOVER */
.sf-menu ul li a:hover {
	background-color: #f5f9fc !important;
	color: #0068b3 !important;
	border-left-color: #0068b3 !important;
}


/* 🔹 ACTIVE STATE (optional if you have "current" links) */
.sf-menu ul li.current a {
	background-color: #eef6fb;
	color: #0068b3;
	border-left-color: #0068b3;
	font-weight: 600;
}



/*page style rules for conent  */


/* Container keeps flex layout */
.landing-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Top-level cards */
.landing-menu > li {
	flex: 1 1 200px;        /* responsive width */
	background-color: #0068b3;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	position: relative;     /* for absolute submenu positioning */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Top-level links */
.landing-menu > li > a.top-link {
	display: block;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 20px;
}

/* Submenus float absolutely */
.landing-menu .sub-menu {
	position: absolute;       /* float over other cards */
	top: 100%;                /* directly below the parent card */
	left: 0;
	background-color: #f5f9fc;
	list-style: none;
	padding: 10px 0;
	margin: 0;
	border-radius: 0 0 8px 8px;
	min-width: 220px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);

	/* Animation setup */
	opacity: 0;               /* start invisible */
	transform: translateY(-10px); /* start slightly above */
	pointer-events: none;     /* ignore clicks while hidden */
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 100;
}

/* Show submenu on hover or keyboard focus */
.landing-menu > li:hover .sub-menu,
.landing-menu > li:focus-within .sub-menu {
	display: block;
	opacity: 1;                /* fade in */
	transform: translateY(0);  /* slide down */
	pointer-events: auto;      /* enable clicks */
}


/* Submenu links */
.landing-menu .sub-menu li a {
	color: #0068b3;
	display: block;
	padding: 8px 16px;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.25s ease;
}

.landing-menu .sub-menu li a:hover {
	background-color: #e0f0ff;
	border-radius: 4px;
}

/* Show submenu on hover */
.landing-menu > li:hover .sub-menu {
	display: block;
}



/*first level pages under main dropdown*/
.feature-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px;
}

.feature-card {
	flex: 1 1 280px;
	background-color: #f5f9fc;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	cursor: pointer; /* indicates clickability */
}

.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.feature-card .icon {
	font-size: 36px;
	color: #0068b3;
	margin-bottom: 15px;
}

.feature-card .card-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #0068b3;
	display: flex;
	align-items: center;
	gap: 6px; /* space between text and arrow */
}

.feature-card .card-title i {
	font-size: 16px;
	transition: transform 0.2s ease;
}

.feature-card:hover .card-title i {
	transform: translateX(4px); /* subtle arrow movement on hover */
}

.feature-card p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Wrapper for lead text + icon */
.lead-text-wrapper {
	display: flex;
	align-items: flex-start; /* icon aligns with top of text */
	gap: 20px;               /* space between icon and text */
	padding: 40px 30px;      /* generous padding */

	/* Gradient + subtle pattern */
	background-image:
			linear-gradient(135deg, #0068b3 0%, #5c5957 100%), /* solid gradient */
			repeating-linear-gradient(
					45deg,
					rgba(255,255,255,0.05),
					rgba(255,255,255,0.05) 10px,
					rgba(255,255,255,0.02) 10px,
					rgba(255,255,255,0.02) 20px
			); /* subtle diagonal pattern */
	background-blend-mode: overlay;
	background-size: cover;
	background-repeat: no-repeat;

	border-left: 4px solid #ffffff; /* accent stripe */
	border-radius: 0;               /* full-width, no rounding */
	box-shadow: none;
}

/* Icon styling */
.lead-icon i {
	font-size: 50px; /* large attention-grabbing size */
	color: #ffffff;
	line-height: 1;
}

/* Main paragraph styling */
.lead-text {
	font-size: 16px;
	line-height: 1.8;
	color: #ffffff;                  /* white text for contrast */
	text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* subtle shadow for readability */
	margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.lead-text-wrapper {
		flex-direction: column;  /* stack icon above text */
		gap: 15px;
		padding: 30px 15px;
	}

	.lead-icon i {
		font-size: 40px;
	}

	.lead-text {
		font-size: 15px;
		line-height: 1.6;
	}
}


/*team section css*/
/* Team section container */
.team-section {
	background-color: #ffffff; /* white background */
	border: 4px solid #0068b3; /* solid blue border */
	padding: 60px 20px;
	color: #333333;
	text-align: center;
}

/* Main paragraph text */
.team-lead-text {
	max-width: 900px;
	margin: 0 auto 20px auto;
	font-size: 16px;
	line-height: 1.6;
	color: #333333;
}

/* Subtext under main paragraph */
.team-lead-subtext {
	font-size: 18px;
	font-weight: bold;
	color: #bba14c; /* accent yellow */
	margin-bottom: 40px;
}

/* Grid container for team cards */
.team-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
	gap: 30px;
	justify-items: center;
	align-items: stretch;
}

/* Individual team card */
.team-card {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	color: #333333;
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
	max-width: 320px; /* updated width */
	text-align: center;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Team photo styling */
.team-photo {
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

/* Team info container */
.team-info {
	background-color: #0068b3; /* bank blue */
	padding: 15px;
	border-radius: 0 0 12px 12px;
	flex-grow: 1; /* ensures all info sections are same height */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
}

/* Name styling */
.team-name {
	font-size: 18px;
	font-weight: bold;
	color: #bba14c; /* gold/yellow */

	margin-bottom: 6px;
	position: relative;
}

.team-name::after {
	content: '';
	display: block;
	width: 50%;
	height: 3px;
	background: #bba14c; /* gold underline */
	margin: 4px auto 0;
	border-radius: 2px;
}



/* Optional link inside name */
.team-name a {
	color: #bba14c;
	text-decoration: none;
}

.team-name a:hover {
	text-decoration: none;
	color: white;
}

/* Title/position styling */
.team-title {
	font-size: 14px;
	font-style: italic;
	margin-bottom: 10px;
	color: #ffffff;
}

.team-nmls {
	font-size: 13px;
	font-style: italic;
	margin-bottom: 10px;
	color: #ffffff;
}

/* Contact info styling */
.team-contact {
	font-size: 14px;
	color: white;
}

.team-contact a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

.team-contact a:hover {
	text-decoration: underline;
	color: #ffffff;
}

/* Mobile adjustments */
@media (max-width: 900px) {
	.team-cards {
		grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
	}
}

@media (max-width: 600px) {
	.team-cards {
		grid-template-columns: 1fr; /* 1 per row on mobile */
	}

	.team-card {
		max-width: 100%;
	}

	.team-photo {
		height: 250px;
	}

	.team-lead-text {
		font-size: 15px;
	}

	.team-lead-subtext {
		font-size: 16px;
	}
}





/* Two-column layout for intro + bottom sections */
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 40px;
}
@media(max-width: 768px) {
	.two-col {
		grid-template-columns: 1fr;
	}
}

/* Table styling */
.responsive-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.responsive-table th,
.responsive-table td {
	padding: 15px;
	text-align: center;
	border-bottom: 1px solid #eee;
}
.responsive-table th {
	background: #004080;
	color: #fff;
	font-weight: 600;
}
.responsive-table tr:nth-child(even) {
	background: #f9f9f9;
}
.responsive-table td:first-child {
	text-align: left;
	font-weight: 600;
	color: #333;
}

/* Make table scrollable on mobile */
.table-container {
	overflow-x: auto;
}

ul {
	padding-left: 20px;
}

/* ========================================
   FEATURED ACCOUNTS GRID
   Added: 2025-02-05
   Used on personal-savings-accounts page
   ======================================== */
.featured-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	gap: 1.5rem;
	margin-top: var(--hsb-space-lg);
}

.featured-card {
	background: var(--hsb-white);
	border-radius: var(--hsb-radius-md);
	padding: 16px 32px;
	box-shadow: var(--hsb-shadow-md);
	border: 1px solid #e8e8e8;
	transition: all var(--hsb-transition-normal);
}

.featured-card:first-child {
	border-left: 4px solid var(--hsb-gold);
}

.featured-card:hover {
	box-shadow: var(--hsb-shadow-lg);
	border-color: #d0d0d0;
}

.featured-card h2 {
	color: var(--hsb-blue-primary);
	font-size: 1.75em;
	margin-top: 0;
	margin-bottom: var(--hsb-space-md);
	font-weight: 700;
}

.featured-card p {
	font-size: 1.3rem;
	line-height: 1.7;
	margin-bottom: var(--hsb-space-md);
}

#e1 .featured-grid .btn,
#e1 .featured-grid .btn-primary,
#e1 .featured-grid .hsb-btn {
	display: inline-block;
	padding: 0.875rem 2rem;
	font-family: var(--hsb-font-primary);
	font-size: 1.35rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border-radius: var(--hsb-radius-md);
	transition: all var(--hsb-transition-normal);
	cursor: pointer;
	border: 2px solid var(--hsb-blue-primary);
	line-height: 1.5;
	background: transparent;
	color: var(--hsb-blue-primary);
	box-shadow: none;
}

#e1 .featured-grid .btn:hover,
#e1 .featured-grid .btn-primary:hover,
#e1 .featured-grid .hsb-btn:hover {
	background: var(--hsb-blue-primary);
	color: var(--hsb-white);
	text-decoration: none;
}

.featured-benefits {
	list-style: disc;
	list-style-position: inside;
	margin: var(--hsb-space-md) 0;
	color: var(--hsb-blue-dark);
}

.featured-benefits li {
	padding: 6px 0;
	font-size: 1.25rem;
	color: var(--hsb-grey-dark);
}

.featured-benefits li::marker {
	color: var(--hsb-blue-dark);
}

#e1 .btn-primary {
	display: inline-block;
	background: var(--hsb-blue-dark);
	color: var(--hsb-white);
	padding: 12px 28px;
	border-radius: var(--hsb-radius-md);
	text-decoration: none;
	font-weight: 600;
	transition: all var(--hsb-transition-normal);
	border: none;
	cursor: pointer;
	box-shadow: var(--hsb-shadow-md);
	margin-top: var(--hsb-space-md);
}

#e1 .btn-primary:hover {
	background: var(--hsb-blue-primary);
	box-shadow: var(--hsb-shadow-lg);
}

#e1 .btn-gold {
	background: var(--hsb-gold);
}

#e1 .btn-gold:hover {
	background: var(--hsb-gold-dark);
}

.table-disclosure {
	margin-top: var(--hsb-space-md);
	padding: var(--hsb-space-md);
	background: var(--hsb-grey-light);
	border-left: 2px solid var(--hsb-gold);
	font-size: 1.22rem;
	line-height: 1.6;
	color: var(--hsb-grey-dark);
}

#e1 .table-disclosure strong {
	background: none;
	color: var(--hsb-grey-dark);
	padding: 0;
	text-shadow: none;
	border-radius: 0;
}

/* VALUE PROPS SECTION */
.value-props {
	padding: var(--hsb-space-xl) 0;
}

.section-label {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--hsb-gold-dark);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.section-heading {
	text-align: left;
	color: var(--hsb-blue-dark);
	font-size: 1.75em;
	font-weight: 700;
	margin-bottom: var(--hsb-space-lg);
	line-height: 1.3;
}

.section-divider {
	width: 60px;
	height: 1px;
	background: var(--hsb-gold);
	margin: var(--hsb-space-lg) 0;
}

.value-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 1.5rem;
	margin-top: var(--hsb-space-lg);
}

.value-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.value-item i {
	font-size: 1.75rem;
	color: var(--hsb-blue-dark);
	line-height: 1;
	flex-shrink: 0;
}

.value-content h3 {
	color: var(--hsb-blue-primary);
	font-size: 1.75rem;
	margin-top: -0.15em;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.value-content p {
	font-size: 1.45rem;
	line-height: 1.7;
}

/* TWO COLUMN CALLOUTS */
.two-column-section {
	background: none;
	padding: var(--hsb-space-sm) 0;
}

.two-column-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 1.5rem;
}

.two-column-grid .hsb-callout {
	margin: 0;
}

.column-callout {
	background: var(--hsb-white);
	padding: 32px;
	border-radius: var(--hsb-radius-md);
	border: 1px solid #e8e8e8;
	box-shadow: var(--hsb-shadow-md);
	transition: all var(--hsb-transition-normal);
}

.column-callout:hover {
	box-shadow: var(--hsb-shadow-lg);
	border-color: #d0d0d0;
}

.column-callout h3 {
	color: var(--hsb-blue-primary);
	font-size: 1.75em;
	margin-bottom: var(--hsb-space-md);
	font-weight: 700;
}

.column-callout ul {
	list-style: disc;
	list-style-position: inside;
	margin-top: var(--hsb-space-md);
	color: var(--hsb-blue-dark);
}

.column-callout li {
	padding: 8px 0;
	font-size: 1.35rem;
	line-height: 1.7;
	color: var(--hsb-grey-dark);
}

.column-callout li::marker {
	color: var(--hsb-blue-dark);
}

#e1 .column-callout strong {
	background: none;
	padding: 0;
	text-shadow: none;
	border-radius: 0;
	color: var(--hsb-blue-dark);
	font-size: inherit;
}

/* INFO BOX */
.info-box {
	background: var(--hsb-white);
	color: var(--hsb-blue-dark);
	padding: var(--hsb-space-xl);
	border-radius: var(--hsb-radius-md);
	text-align: center;
	margin: var(--hsb-space-xl) auto;
	max-width: 1000px;
	box-shadow: var(--hsb-shadow-md);
	border: 1px solid #e8e8e8;
}

.info-box h3 {
	color: var(--hsb-blue-dark);
	font-size: 1.75em;
	margin-bottom: var(--hsb-space-md);
	font-weight: 700;
}

.info-box p {
	font-size: 1.35rem;
	line-height: 1.7;
	margin-bottom: var(--hsb-space-lg);
}

.info-box-buttons {
	display: flex;
	gap: var(--hsb-space-md);
	justify-content: center;
	flex-wrap: wrap;
}

#e1 .btn-outline {
	background: transparent;
	border: 2px solid var(--hsb-blue-dark);
	color: var(--hsb-blue-dark);
}

#e1 .btn-outline:hover {
	background: var(--hsb-blue-dark);
	color: var(--hsb-white);
}

@media (max-width: 980px) {
	.value-list,
	.two-column-grid {
		grid-template-columns: 1fr;
	}

	.info-box-buttons {
		flex-direction: column;
		align-items: center;
	}
}



/* Option 2: Highlight background (comment out above if you prefer this) */

#e1 strong {
	color: black;
  border-radius: 4px;
}



#e1 strong {
  text-shadow: none;
}


#e1 strong a
{
	color: white;
}




/* Intro text */
#e1 .intro {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

/* Checking product rows */
#e1 .bod-cont {
	display: flex;
	align-items: center;
	margin: 2rem 0;
	gap: 1.5rem;
	flex-wrap: wrap;
}
#e1 .bod-box {
	flex: 1;
}
#e1 .bod-box-center {
	flex: 2;
	text-align: left;
}
#e1 .bod-box img.learn-more {
	max-width: 150px;
}

#e1 .bod-img img
{
width: 100%;
}

/* Videos */
#e1 .video-section {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 2rem 0;
}
#e1 .video-section iframe {
	flex: 1 1 45%;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	min-height: 315px;
}



/* Two-column layout for any banking page */
.banking-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

.banking-col {
	/* optional: padding or extra styling if needed */
}

/* Section titles */
.banking-section-title {
	font-size: 2.4rem;
	color: #0068b3;
	font-weight: bold;
	margin-bottom: 0.5rem;
	margin-top: 1em;
	border-bottom: 2px solid #ddd;
	padding-bottom: 0.3rem;
}

/* Subtitles inside sections */
.banking-sub-title {
	font-size: 2.1rem;
	color: #444;
	font-weight: bold;
	margin-top: 1rem;
	margin-bottom: 0.3rem;
}

/* Lists inside two-column sections */
.banking-two-col ul {
	margin: 0 0 1rem 1.2rem;
	padding: 0;
}

.banking-two-col ul li {
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

/* Rates/contact blocks */
.banking-rates-contact {
	margin-top: 2rem;
	padding: 1.5rem;
	background: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 8px;
}

.banking-rates-contact .banking-section-title {
	margin-bottom: 0.8rem;
}


.video-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
}

.video-container {
	flex: 1 1 300px; /* responsive width */
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* Tiles Grid */
.tiles-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 tiles per row */
	gap: 20px;
	margin-top: 20px;
}

/* Individual Tile */
.tile {
	background-color: #ffffff;
	border: 2px solid #0068b3; /* bank blue */
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Tile image */
.tile img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Tile title */
.tile-title {
	font-size: 16px;
	font-weight: bold;
	color: #0068b3;
	padding: 10px 0;
}



.branch-locations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.branch-card {
	border: 1px solid #ddd;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 3px 8px rgba(0,0,0,0.1);
	transition: transform 0.2s, box-shadow 0.2s;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.branch-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.branch-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.branch-info {
	padding: 15px;
}

.branch-info h3 {
	margin-top: 0;
	margin-bottom: 10px;
	color: #004085;
}

.branch-info h4 {
	margin-bottom: 5px;
	color: #004085;
}

.branch-info ul {
	padding-left: 20px;
	margin-top: 0;
	margin-bottom: 10px;
}

.branch-info p {
	margin: 5px 0;
}

.branch-info i {
	color: #004085;
	margin-right: 5px;
	width: 18px; /* aligns icons nicely */
	text-align: center;
}











.atm-locations {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}

.atm-card {
	flex: 1 1 calc(50% - 20px);
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	font-family: monob;
	transition: transform 0.2s, box-shadow 0.2s;
}

.atm-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.atm-card h3 {
	margin-top: 0;
	margin-bottom: 8px;
}

.atm-card p {
	margin: 0;
	line-height: 1.5;
}

.other-atms {
	margin-top: 30px;
}

/* ========================================
   ATM LOCATION GRID - Custom Design
   Added: 2025-10-15
   ======================================== */

/* Grid container for location cards */
.hsb-location-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
	gap: 24px;
	margin-top: 20px;
}

/* Individual location card */
.hsb-location-card {
	background: #ffffff;
	border: 2px solid var(--hsb-grey-medium);
	border-radius: var(--hsb-radius-lg);
	padding: 30px 20px;
	text-align: center;
	transition: all var(--hsb-transition-normal);
	box-shadow: var(--hsb-shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 220px;
}

.hsb-location-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hsb-shadow-lg);
	border-color: var(--hsb-gold);
	background-color: var(--hsb-gold-light);
}

/* Icon container */
.hsb-location-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, var(--hsb-blue-primary), var(--hsb-blue-light));
	border-radius: var(--hsb-radius-round);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(0, 104, 179, 0.2);
}

.hsb-location-icon i {
	font-size: 32px;
	color: #ffffff;
}

/* Location card heading */
.hsb-location-card h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--hsb-blue-dark);
	margin: 0 0 12px 0;
	font-family: var(--hsb-font-primary);
}

/* Location card address text */
.hsb-location-card p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--hsb-grey);
	margin: 0;
	font-family: var(--hsb-font-regular);
}

/* Tablet breakpoint - 3 columns */
@media (max-width: 1200px) {
	.hsb-location-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

/* ========================================
   HOME PAGE VIDEO LAYOUT
   Added: 2025-10-15
   ======================================== */

/* Flex container for text + video */
.home-content-flex {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	margin-bottom: 30px;
}

/* Text column (left side) */
.home-text-column {
	flex: 1;
	min-width: 0; /* prevents flex overflow */
}

/* CTA buttons row */
.home-cta-buttons {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

/* Home service grid */
.home-service-grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Force 4 columns on second row */
.home-service-grid.four-col {
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
}
.home-service-grid.four-col .hsb-value-prop {
	flex: 1 1 0;
	min-width: 0;
	padding: 20px 15px;
}
@media screen and (max-width: 980px) {
	.home-service-grid.four-col {
		flex-wrap: wrap;
	}
	.home-service-grid.four-col .hsb-value-prop {
		flex: 1 1 calc(50% - 15px);
	}
}
@media screen and (max-width: 630px) {
	.home-service-grid.four-col .hsb-value-prop {
		flex: 1 1 100%;
	}
}

/* Video column (right side) */
.home-video-column {
	flex: 0 0 45%; /* fixed at 45% width */
	max-width: 500px;
}

.home-video-column video {
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	/* iOS/Mac compatibility */
	-webkit-border-radius: 12px;
	object-fit: contain;
}

/* ========================================
   FINANCIAL CALCULATORS
   ======================================== */

.hsb-calculator-wrapper {
    max-width: 100%;
    margin: var(--hsb-space-lg) 0;
}

/* Tab Navigation */
.hsb-calc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--hsb-space-lg);
    border-bottom: 3px solid var(--hsb-grey-medium);
    padding-bottom: 0;
}

.hsb-calc-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--hsb-grey-light);
    border: 1px solid var(--hsb-grey-medium);
    border-bottom: none;
    border-radius: var(--hsb-radius-md) var(--hsb-radius-md) 0 0;
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    color: var(--hsb-grey);
    cursor: pointer;
    transition: all var(--hsb-transition-fast);
    position: relative;
    bottom: -3px;
}

.hsb-calc-tab:hover {
    background: var(--hsb-white);
    color: var(--hsb-blue-primary);
}

.hsb-calc-tab.active {
    background: var(--hsb-white);
    color: var(--hsb-blue-primary);
    border-color: var(--hsb-grey-medium);
    border-bottom: 3px solid var(--hsb-white);
}


/* Tab Panels */
.hsb-calc-panel { display: none; }
.hsb-calc-panel.active { display: block; }

/* Calculator Card */
.hsb-calculator-card {
    background: var(--hsb-white);
    border-radius: var(--hsb-radius-lg);
    box-shadow: var(--hsb-shadow-md);
    border: 1px solid var(--hsb-grey-medium);
    overflow: hidden;
}

.hsb-calculator-header {
    background: linear-gradient(135deg, var(--hsb-blue-primary), var(--hsb-blue-dark));
    color: var(--hsb-white);
    padding: var(--hsb-space-md) var(--hsb-space-lg);
    display: flex;
    align-items: center;
    gap: var(--hsb-space-sm);
}

.hsb-calculator-header i {
    font-size: 1.5rem;
}

.hsb-calculator-header h2 {
    margin: 0;
    font-family: var(--hsb-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hsb-white);
}

.hsb-calculator-body {
    padding: var(--hsb-space-xl) var(--hsb-space-lg);
}

.hsb-calc-intro {
    font-family: var(--hsb-font-regular);
    color: var(--hsb-grey-dark);
    margin-bottom: var(--hsb-space-lg);
    line-height: 1.6;
}

.hsb-calc-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hsb-space-md);
}

.hsb-calc-field {
    display: flex;
    flex-direction: column;
}

.hsb-calc-field label {
    font-family: var(--hsb-font-primary);
    color: var(--hsb-grey-dark);
    margin-bottom: var(--hsb-space-xs);
    font-weight: 600;
}

.hsb-calc-input {
    padding: 0.875rem 1rem;
    border: 2px solid var(--hsb-grey-medium);
    border-radius: var(--hsb-radius-md);
    font-family: var(--hsb-font-regular);
    transition: border-color var(--hsb-transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.hsb-calc-input:focus {
    border-color: var(--hsb-blue-primary);
    box-shadow: 0 0 0 3px rgba(0, 104, 179, 0.15);
}
.hsb-calc-input:focus-visible {
    outline: 3px solid var(--hsb-blue-primary);
    outline-offset: 2px;
}

.hsb-calc-button-row {
    display: flex;
    gap: var(--hsb-space-sm);
    margin-top: var(--hsb-space-lg);
    padding-top: var(--hsb-space-md);
    border-top: 1px solid var(--hsb-grey-medium);
}

.hsb-calc-btn {
    background: var(--hsb-blue-primary);
    color: var(--hsb-white);
    border: none;
    padding: 0.875rem 2rem;
    border-radius: var(--hsb-radius-md);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hsb-transition-normal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hsb-calc-btn:hover {
    background: var(--hsb-blue-dark);
    box-shadow: var(--hsb-shadow-md);
}

.hsb-calc-btn-reset {
    background: transparent;
    color: var(--hsb-grey);
    border: 2px solid var(--hsb-grey-medium);
    padding: 0.875rem 1.5rem;
    border-radius: var(--hsb-radius-md);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hsb-transition-normal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hsb-calc-btn-reset:hover {
    border-color: var(--hsb-grey);
    color: var(--hsb-grey-dark);
}

.hsb-calc-results {
    margin-top: var(--hsb-space-lg);
    padding: var(--hsb-space-lg);
    background: var(--hsb-grey-light);
    border-radius: var(--hsb-radius-md);
    border-left: 4px solid var(--hsb-blue-primary);
}

.hsb-calc-results h3 {
    font-family: var(--hsb-font-primary);
    color: var(--hsb-blue-dark);
    font-size: 1.25rem;
    margin: 0 0 var(--hsb-space-md) 0;
}

.hsb-calc-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hsb-space-sm);
}

.hsb-calc-result-item {
    display: flex;
    flex-direction: column;
    padding: var(--hsb-space-sm) var(--hsb-space-md);
    background: var(--hsb-white);
    border-radius: var(--hsb-radius-sm);
    border: 1px solid var(--hsb-grey-medium);
}

.hsb-calc-result-label {
    font-family: var(--hsb-font-regular);
    color: var(--hsb-grey);
    margin-bottom: 4px;
}

.hsb-calc-result-value {
    font-family: var(--hsb-font-primary);
    font-size: 1.35rem;
    color: var(--hsb-blue-dark);
    font-weight: 700;
}

.hsb-calc-result-total {
    grid-column: 1 / -1;
    background: var(--hsb-blue-dark);
    border-color: var(--hsb-blue-dark);
}

.hsb-calc-result-total .hsb-calc-result-label {
    color: var(--hsb-blue-light);
}

.hsb-calc-total-value {
    font-size: 1.75rem;
    color: var(--hsb-white) !important;
}

.hsb-calc-disclaimer {
    padding: var(--hsb-space-md) var(--hsb-space-lg);
    background: var(--hsb-grey-light);
    border-top: 1px solid var(--hsb-grey-medium);
}

.hsb-calc-disclaimer p {
    color: var(--hsb-grey);
    line-height: 1.6;
    margin: 0;
}

.hsb-calc-disclaimer i {
    color: var(--hsb-blue-primary);
}

/* Outline & Small Buttons */
.hsb-calc-btn-outline {
    background: transparent;
    color: var(--hsb-blue-primary);
    border: 2px solid var(--hsb-blue-primary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--hsb-radius-md);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hsb-transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hsb-calc-btn-outline:hover {
    background: var(--hsb-blue-primary);
    color: var(--hsb-white);
}

.hsb-calc-btn-sm {
    background: var(--hsb-grey-light);
    color: var(--hsb-grey-dark);
    border: 1px solid var(--hsb-grey-medium);
    padding: 0.5rem 1rem;
    border-radius: var(--hsb-radius-sm);
    font-family: var(--hsb-font-primary);
    cursor: pointer;
    transition: all var(--hsb-transition-fast);
}

.hsb-calc-btn-sm.active,
.hsb-calc-btn-sm:hover {
    background: var(--hsb-blue-primary);
    color: var(--hsb-white);
    border-color: var(--hsb-blue-primary);
}

/* Debt Consolidation - Rows */
.hsb-debt-row {
    border: 1px solid var(--hsb-grey-medium);
    border-radius: var(--hsb-radius-md);
    padding: var(--hsb-space-md);
    margin-bottom: var(--hsb-space-md);
    background: var(--hsb-grey-light);
}

.hsb-debt-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hsb-space-sm);
}

.hsb-debt-row-num {
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    color: var(--hsb-blue-primary);
}

.hsb-debt-remove {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--hsb-danger);
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    transition: color var(--hsb-transition-fast);
}

.hsb-debt-remove:hover { color: #a01020; }

.hsb-debt-fields { grid-template-columns: repeat(3, 1fr); }

.hsb-calc-add-row {
    margin-bottom: var(--hsb-space-lg);
    text-align: center;
}

.hsb-debt-consol-section {
    border-top: 2px solid var(--hsb-blue-primary);
    padding-top: var(--hsb-space-md);
    margin-top: var(--hsb-space-md);
}

.hsb-debt-consol-section h3,
.hsb-refi-section h3 {
    font-family: var(--hsb-font-primary);
    color: var(--hsb-blue-dark);
    margin-bottom: var(--hsb-space-md);
}

.hsb-refi-section { margin-bottom: var(--hsb-space-lg); }

/* Comparison Columns */
.hsb-debt-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hsb-space-md);
    margin-bottom: var(--hsb-space-md);
}

.hsb-debt-compare-col {
    background: var(--hsb-white);
    border-radius: var(--hsb-radius-md);
    border: 1px solid var(--hsb-grey-medium);
    overflow: hidden;
}

.hsb-debt-compare-header {
    background: var(--hsb-grey);
    color: var(--hsb-white);
    padding: 0.75rem var(--hsb-space-md);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    text-align: center;
}

.hsb-debt-compare-new .hsb-debt-compare-header {
    background: var(--hsb-blue-primary);
}

.hsb-debt-compare-item {
    padding: 0.75rem var(--hsb-space-md);
    border-bottom: 1px solid var(--hsb-grey-medium);
    display: flex;
    flex-direction: column;
}

.hsb-debt-compare-item:last-child { border-bottom: none; }
.hsb-debt-savings { margin-top: var(--hsb-space-sm); }

.hsb-debt-interest-savings {
    display: flex;
    flex-direction: column;
    padding: var(--hsb-space-sm) var(--hsb-space-md);
    background: var(--hsb-white);
    border-radius: var(--hsb-radius-sm);
    border: 2px solid var(--hsb-blue-primary);
}

.hsb-debt-interest-savings .hsb-calc-result-value { color: var(--hsb-blue-dark); }

/* Amortization Table */
.hsb-amort-table-wrap { margin-top: var(--hsb-space-lg); }

.hsb-amort-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--hsb-space-md);
}

.hsb-amort-table-scroll {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--hsb-grey-medium);
    border-radius: var(--hsb-radius-md);
}

.hsb-amort-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--hsb-font-regular);
}

.hsb-amort-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.hsb-amort-table th {
    background: var(--hsb-blue-dark);
    color: var(--hsb-white);
    padding: 0.75rem 1rem;
    text-align: right;
    font-family: var(--hsb-font-primary);
    font-weight: 600;
}

.hsb-amort-table th:first-child { text-align: left; }

.hsb-amort-table td {
    padding: 0.625rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--hsb-grey-medium);
}

.hsb-amort-table td:first-child { text-align: left; font-weight: 600; }
.hsb-amort-table tbody tr:nth-child(even) { background: var(--hsb-grey-light); }
.hsb-amort-table tbody tr:hover { background: #e8f0f8; }

/* ========================================
   LEAVE NOTICE PAGE
   ======================================== */

.hsb-leave-notice-action {
    margin-top: var(--hsb-space-lg);
    text-align: center;
}

.hsb-leave-notice-url {
    background: var(--hsb-grey-light);
    padding: var(--hsb-space-md);
    border-radius: var(--hsb-radius-md);
    border-left: 4px solid var(--hsb-blue-primary);
    text-align: left;
    margin-bottom: var(--hsb-space-lg);
}

.hsb-leave-notice-url strong {
    font-family: var(--hsb-font-primary);
    color: var(--hsb-grey-dark);
    display: block;
    margin-bottom: 4px;
}

.hsb-leave-notice-destination {
    font-family: var(--hsb-font-regular);
    color: var(--hsb-blue-primary);
    word-break: break-all;
}

.hsb-leave-notice-buttons {
    display: flex;
    gap: var(--hsb-space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--hsb-space-lg);
}

.hsb-btn-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--hsb-blue-primary);
    color: var(--hsb-white);
    padding: 0.875rem 2rem;
    border-radius: var(--hsb-radius-md);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--hsb-transition-normal);
    box-shadow: var(--hsb-shadow-md);
}

.hsb-btn-continue:hover {
    background: var(--hsb-blue-dark);
    color: var(--hsb-white);
    text-decoration: none;
    box-shadow: var(--hsb-shadow-lg);
}

.hsb-btn-go-back {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--hsb-grey);
    padding: 0.875rem 2rem;
    border: 2px solid var(--hsb-grey-medium);
    border-radius: var(--hsb-radius-md);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--hsb-transition-normal);
}

.hsb-btn-go-back:hover {
    border-color: var(--hsb-grey);
    color: var(--hsb-grey-dark);
    text-decoration: none;
}

.hsb-leave-notice-error {
    background: #fff5f5;
    border: 1px solid var(--hsb-danger);
    border-radius: var(--hsb-radius-md);
    padding: var(--hsb-space-lg);
    text-align: center;
}

.hsb-leave-notice-error p {
    color: var(--hsb-danger);
    font-family: var(--hsb-font-primary);
    margin-bottom: var(--hsb-space-md);
}

.hsb-leave-notice-error i {
    margin-right: 0.5rem;
}

/* ========================================
   CALCULATOR & LEAVE NOTICE - RESPONSIVE
   ======================================== */

@media screen and (max-width: 768px) {
    .hsb-calc-inputs,
    .hsb-debt-fields {
        grid-template-columns: 1fr;
    }

    .hsb-calc-results-grid {
        grid-template-columns: 1fr;
    }

    .hsb-calc-result-total {
        grid-column: 1;
    }

    .hsb-calc-button-row {
        flex-direction: column;
    }

    .hsb-calc-btn,
    .hsb-calc-btn-reset {
        width: 100%;
        justify-content: center;
    }

    .hsb-calculator-header h2 {
        font-size: 1.25rem;
    }

    .hsb-calc-tabs {
        gap: 4px;
    }

    .hsb-calc-tab {
        padding: 0.625rem 0.75rem;
        font-size: 0.85rem;
    }

    .hsb-calc-tab span {
        display: none;
    }

    .hsb-calc-tab i {
        font-size: 1.25rem;
    }

    .hsb-debt-comparison {
        grid-template-columns: 1fr;
    }

    .hsb-leave-notice-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hsb-btn-continue,
    .hsb-btn-go-back {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media screen and (max-width: 400px) {
    .hsb-calculator-body {
        padding: var(--hsb-space-md);
    }

    .hsb-calculator-header {
        padding: var(--hsb-space-sm) var(--hsb-space-md);
    }

    .hsb-calc-disclaimer {
        padding: var(--hsb-space-sm) var(--hsb-space-md);
    }
}

/* ========================================
   FAQ PAGE STYLES
   Added: 2026-02-19
   ======================================== */
.hsb-faq-wrapper {
    width: 100%;
    padding: 0;
}

/* Tab Navigation */
.hsb-faq-tabs {
    display: flex;
    gap: 4px;
    background: var(--hsb-grey-light);
    padding: 6px;
    border-radius: var(--hsb-radius-lg);
    margin-top: var(--hsb-space-xl);
    margin-bottom: var(--hsb-space-lg);
    overflow-x: auto;
}

.hsb-faq-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--hsb-grey);
    font-family: var(--hsb-font-primary);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--hsb-radius-md);
    transition: all var(--hsb-transition-fast);
    white-space: nowrap;
}

.hsb-faq-tab:hover {
    background: var(--hsb-white);
    color: var(--hsb-blue-primary);
}

.hsb-faq-tab.active {
    background: var(--hsb-white);
    color: var(--hsb-blue-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.hsb-faq-tab i {
    font-size: 1.1rem;
}

/* FAQ Panels */
.hsb-faq-panel {
    display: none;
}

.hsb-faq-panel.active {
    display: block;
}

/* Category Header */
.hsb-faq-category-header {
    display: flex;
    align-items: center;
    gap: var(--hsb-space-sm);
    padding: var(--hsb-space-md) var(--hsb-space-lg);
    background: linear-gradient(135deg, var(--hsb-blue-primary) 0%, var(--hsb-blue-dark) 100%);
    color: var(--hsb-white);
    border-radius: var(--hsb-radius-lg) var(--hsb-radius-lg) 0 0;
}

.hsb-faq-category-header i {
    font-size: 1.5rem;
    opacity: 0.9;
}

.hsb-faq-category-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-family: var(--hsb-font-primary);
    color: var(--hsb-white);
}

/* FAQ List */
.hsb-faq-list {
    background: var(--hsb-white);
    border: 1px solid var(--hsb-grey-medium);
    border-top: none;
    border-radius: 0 0 var(--hsb-radius-lg) var(--hsb-radius-lg);
    overflow: hidden;
    margin-bottom: var(--hsb-space-lg);
}

/* FAQ Item */
.hsb-faq-item {
    border-bottom: 1px solid var(--hsb-grey-medium);
}

.hsb-faq-item:last-child {
    border-bottom: none;
}

/* Question Button */
.hsb-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hsb-space-sm);
    padding: var(--hsb-space-md) var(--hsb-space-lg);
    border: none;
    background: transparent;
    font-family: var(--hsb-font-primary);
    color: var(--hsb-grey-dark);
    text-align: left;
    cursor: pointer;
    transition: background var(--hsb-transition-fast);
}

.hsb-faq-question:hover {
    background: var(--hsb-grey-light);
}

.hsb-faq-question span {
    flex: 1;
}

.hsb-faq-icon {
    font-size: 0.8rem;
    color: var(--hsb-blue-primary);
    transition: transform var(--hsb-transition-fast);
    flex-shrink: 0;
}

.hsb-faq-item.open .hsb-faq-icon {
    transform: rotate(180deg);
}

/* Answer Area */
.hsb-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.hsb-faq-item.open .hsb-faq-answer {
    max-height: 500px;
}

.hsb-faq-answer-inner {
    padding: 0 var(--hsb-space-lg) var(--hsb-space-md) var(--hsb-space-lg);
    border-left: 3px solid var(--hsb-gold);
    margin-left: var(--hsb-space-lg);
    margin-right: var(--hsb-space-lg);
    margin-bottom: var(--hsb-space-sm);
    padding-left: var(--hsb-space-md);
}

.hsb-faq-answer-inner p {
    margin: 0;
    font-family: var(--hsb-font-regular);
    font-weight: normal;
    line-height: 1.6;
    color: var(--hsb-grey-dark);
}

.hsb-faq-answer-inner a {
    color: var(--hsb-blue-primary);
    text-decoration: underline;
}

.hsb-faq-answer-inner a:hover {
    color: var(--hsb-blue-dark);
}

/* CTA Buttons pair */
.hsb-cta-buttons {
    display: flex;
    gap: var(--hsb-space-sm);
    flex-shrink: 0;
}

.hsb-btn-outline-light {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--hsb-gold);
    border-radius: var(--hsb-radius-md);
    background: var(--hsb-gold);
    color: var(--hsb-white);
    font-family: var(--hsb-font-primary);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--hsb-transition-fast);
}

.hsb-btn-outline-light:hover {
    background: var(--hsb-gold-dark);
    border-color: var(--hsb-gold-dark);
    color: var(--hsb-white);
}

/* Responsive - Tablet */
@media screen and (max-width: 768px) {
    .hsb-faq-tab span {
        display: none;
    }

    .hsb-faq-tab i {
        font-size: 1.25rem;
    }

    .hsb-faq-tab {
        padding: 0.625rem 0.75rem;
    }

    .hsb-faq-question {
        padding: var(--hsb-space-sm) var(--hsb-space-md);
    }

    .hsb-faq-answer-inner {
        margin-left: var(--hsb-space-md);
        margin-right: var(--hsb-space-md);
        padding-left: var(--hsb-space-sm);
    }

    .hsb-faq-category-header {
        padding: var(--hsb-space-sm) var(--hsb-space-md);
    }

    .hsb-cta-buttons {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* Responsive - Small phone */
@media screen and (max-width: 400px) {
    .hsb-faq-wrapper {
        padding: 0 var(--hsb-space-xs);
    }

    .hsb-faq-tabs {
        padding: 4px;
        gap: 2px;
    }

    .hsb-faq-tab {
        padding: 0.5rem;
    }

    .hsb-faq-question {
        padding: var(--hsb-space-sm);
    }

    .hsb-faq-answer-inner {
        margin-left: var(--hsb-space-sm);
        margin-right: var(--hsb-space-sm);
    }
}

/* ========================================
   SECTION DIVIDER
   Added: 2026-02-20
   ======================================== */
.hsb-section-divider {
    display: flex;
    align-items: center;
    gap: var(--hsb-space-md);
    margin: var(--hsb-space-xxl) 0;
    padding: var(--hsb-space-lg) 0;
}

.hsb-section-divider::before,
.hsb-section-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hsb-gold), transparent);
}

.hsb-section-divider i {
    color: var(--hsb-gold);
    font-size: 1.25rem;
}

/* ========================================
   HSB FRONTEND FORM STYLES
   Complete custom form styling
   ======================================== */

/* Wrapper */
.form-builder-wrapper {
	max-width: 800px;
	margin: 30px auto;
	background: #fff;
	border-radius: 12px;
	padding: 45px;
	box-shadow: 0 2px 24px rgba(0,0,0,0.07);
	border: 1px solid #eaedf0;
}

/* Form base */
.form-builder-form {
	width: 100%;
}

/* Labels */
.form-builder-form label {
	display: block;
	font-family: monob;
	font-size: 12px;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 8px;
}

/* Required indicator */
.form-builder-form .required::before {
	content: "*";
	color: var(--hsb-gold);
	font-weight: 700;
	margin-left: 2px;
}

/* All inputs */
.form-builder-form .form-control,
.form-builder-form input[type="text"],
.form-builder-form input[type="email"],
.form-builder-form input[type="tel"],
.form-builder-form input[type="date"],
.form-builder-form select,
.form-builder-form textarea {
	display: block;
	width: 100%;
	font-family: monob;
	font-size: 15px;
	color: #1a1a1a;
	background: #f7f8fa;
	border: 1px solid #d5d9e0;
	border-radius: 6px;
	padding: 13px 16px;
	height: auto;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form-builder-form textarea:focus-visible {
	outline: 3px solid #0068b3;
	outline-offset: 2px;
}

/* Focus state */
.form-builder-form .form-control:focus,
.form-builder-form input:focus,
.form-builder-form select:focus,
.form-builder-form textarea:focus {
	border-color: var(--hsb-blue-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 104, 179, 0.1);
}

/* Textarea */
.form-builder-form textarea,
.form-builder-form textarea.form-control {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

/* Select dropdown */
.form-builder-form select,
.form-builder-form select.form-control {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
}

/* Field groups */
.form-builder-form .form-group {
	margin-bottom: 24px;
}

/* Row layout */
.form-builder-form .form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 0;
}

.form-builder-form .form-row-col {
	flex: 1;
	min-width: 0;
}

.form-builder-form .form-row-col .form-group {
	margin-bottom: 0;
}

.form-builder-form .form-row-2-cols .form-row-col {
	flex: 0 0 calc(50% - 10px);
}

.form-builder-form .form-row-3-cols .form-row-col {
	flex: 0 0 calc(33.333% - 14px);
}

/* Error states */
.form-builder-form .has-error .form-control,
.form-builder-form .has-error input,
.form-builder-form .has-error select,
.form-builder-form .has-error textarea {
	border-color: #e53e3e;
	background: #fff5f5;
}

.form-builder-form .has-error .form-control:focus {
	box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}

.form-builder-form .has-error label {
	color: #c53030;
}

.form-builder-form .text-danger,
.form-builder-form .help-block.text-danger {
	color: #c53030;
	font-family: monob;
	font-size: 12px;
	margin-top: 6px;
	display: block;
}

/* Help text */
.form-builder-form .help-block {
	display: block;
	font-family: monob;
	font-size: 12px;
	color: #888;
	margin-top: 6px;
}

/* Error summary */
.form-errors {
	padding: 18px 22px;
	background: #fff5f5;
	border: 1px solid #feb2b2;
	border-left: 4px solid #e53e3e;
	border-radius: 8px;
	margin-bottom: 28px;
}

.form-errors-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: monob;
	font-weight: 600;
	color: #9b2c2c;
	margin-bottom: 10px;
}

.form-errors-header svg {
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	color: #e53e3e;
	flex-shrink: 0;
}

.form-builder-wrapper svg {
	width: 20px;
	height: 20px;
	max-width: 24px;
	max-height: 24px;
	flex-shrink: 0;
}

.form-errors-list {
	margin: 0;
	padding-left: 30px;
	color: #742a2a;
	font-family: monob;
	font-size: 14px;
}

.form-errors-list li {
	padding: 3px 0;
}

/* Success message */
.form-success-message {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	background: #f0fff4;
	border: 1px solid #9ae6b4;
	border-left: 4px solid #38a169;
	border-radius: 8px;
	color: #276749;
	font-family: monob;
	font-weight: 500;
}

.form-success-message svg {
	width: 24px;
	height: 24px;
	color: #38a169;
	flex-shrink: 0;
}

/* Checkboxes & radios */
.form-builder-form .checkbox-group,
.form-builder-form .radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-builder-form .checkbox label,
.form-builder-form .radio label {
	font-family: monob;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: normal;
	color: #333;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-builder-form .checkbox input,
.form-builder-form .radio input {
	accent-color: var(--hsb-blue-primary);
	width: 18px;
	height: 18px;
}

/* File upload */
.form-builder-form input[type="file"] {
	font-family: monob;
	border: 2px dashed #d5d9e0;
	border-radius: 6px;
	padding: 16px;
	background: #f7f8fa;
	cursor: pointer;
}

/* HTML blocks */
.form-builder-form .form-html-block {
	background: #f0f6fc;
	border-left: 4px solid var(--hsb-blue-primary);
	border-radius: 0 8px 8px 0;
	padding: 20px;
	font-family: monob;
	font-size: 14px;
	color: #333;
	line-height: 1.7;
	margin-bottom: 24px;
}

/* Spam protection */
.form-builder-form .spam-protection {
	background: #f7f8fa;
	border: 1px solid #e2e4e8;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 10px;
}

.form-builder-form .spam-protection label {
	text-transform: none;
	font-size: 14px;
	letter-spacing: 0;
}

/* Submit area */
.form-builder-form .form-submit {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 2px solid #eaedf0;
}

.form-builder-form .form-submit button,
.form-builder-form .form-submit .btn,
.form-builder-form .form-submit .btn-primary {
	font-family: monob;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--hsb-blue-primary);
	border: none;
	border-radius: 8px;
	padding: 15px 48px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.form-builder-form .form-submit button:hover,
.form-builder-form .form-submit .btn:hover,
.form-builder-form .form-submit .btn-primary:hover {
	background: var(--hsb-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 104, 179, 0.3);
}

.form-builder-form .form-submit button:active,
.form-builder-form .form-submit .btn:active {
	transform: translateY(0);
}

.form-builder-form .form-submit button:focus,
.form-builder-form .form-submit .btn:focus {
	box-shadow: 0 0 0 3px rgba(0, 104, 179, 0.25);
}
.form-builder-form .form-submit button:focus-visible,
.form-builder-form .form-submit .btn:focus-visible {
	outline: 3px solid #0068b3;
	outline-offset: 2px;
}

.form-builder-form .form-submit button:disabled,
.form-builder-form .form-submit .btn:disabled {
	background: #adb5bd;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Width options */
.form-builder-wrapper.fb-form-width-100 { max-width: 100%; }
.form-builder-wrapper.fb-form-width-800px { max-width: 800px; }
.form-builder-wrapper.fb-form-width-700px { max-width: 700px; }
.form-builder-wrapper.fb-form-width-600px { max-width: 600px; }
.form-builder-wrapper.fb-form-width-500px { max-width: 500px; }
.form-builder-wrapper.fb-form-align-center { margin-left: auto; margin-right: auto; }

/* Responsive */
@media screen and (max-width: 630px) {
	.form-builder-wrapper {
		padding: 28px 20px;
		margin: 20px auto;
	}
	.form-builder-form .form-row {
		flex-direction: column;
		gap: 0;
	}
	.form-builder-form .form-row-col,
	.form-builder-form .form-row-2-cols .form-row-col,
	.form-builder-form .form-row-3-cols .form-row-col {
		flex: 0 0 100%;
	}
	.form-builder-form .form-row-col .form-group {
		margin-bottom: 24px;
	}
	.form-builder-form .form-submit button,
	.form-builder-form .form-submit .btn {
		width: 100%;
		padding: 15px;
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}