/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/




/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */



/* Anchors */

a {
  cursor: pointer;
  text-decoration:none;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/* Lists */

ul,
ol {
  margin: 0!important;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0!important;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}





:root {
  /* * Fluid Typography Scale
   * Scales perfectly between 320px (mobile) and 1920px (desktop)
   * Base: 1rem = 16px 
   */
   
  /* h1: Max 64px (4rem) | Min 40px (2.5rem) */
  --text-h1: clamp(2.5rem, 1.5vw + 2.2rem, 4rem);

  /* h2: Max 36px (2.25rem) | Min 28px (1.75rem) */
  --text-h2: clamp(1.75rem, 0.5vw + 1.65rem, 2.25rem);

  /* h3: Max 32px (2rem) | Min 24px (1.5rem) */
  --text-h3: clamp(1.5rem, 0.5vw + 1.4rem, 2rem);

  /* h4: Max 28px (1.75rem) | Min 22px (1.375rem) */
  --text-h4: clamp(1.375rem, 0.35vw + 1.3rem, 1.75rem);

  /* h5: Max 25px (1.5625rem) | Min 20px (1.25rem) */
  --text-h5: clamp(1.25rem, 0.3125vw + 1.1875rem, 1.5625rem);

  /* h6: Max 23px (1.4375rem) | Min 18px (1.125rem) */
  --text-h6: clamp(1.125rem, 0.3125vw + 1.0625rem, 1.4375rem);
  
  /* p: Max 23px (1.4375rem) | Min 16px (1rem) */
  --text-p: clamp(1rem, 0.4375vw + 0.9125rem, 1.4375rem);
}

/* Update your classes as well */

/* --- Global Heading Styles --- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font);
  color:var( --primary-dark-text-color);
  font-weight: 700; 
  margin: 0;
  line-height: 1.2;
}

h1 { font-size: var(--text-h1);}
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }


p {
  font-size: var(--text-p);
  font-family: var(--secondary-font); 
  line-height: 1.6;
  margin: 0;
}

a{
color:var(--tertiary-dark-text-color);
}

.body-1 {
  /* max: 25px (1.5625rem) | min: 16px (1rem) */
  font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem);
  font-family: var(--secondary-font); 
  line-height: 1.6;
  margin-top: 0;
}

.body-2 {
  /* max: 31px (1.9375rem) | min: 16px (1rem) */
  font-size: clamp(1rem, 0.9375vw + 0.8125rem, 1.9375rem);
  font-family: var(--secondary-font); 
  line-height: 1.6;
  margin-top: 0;
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* 1. Define Continuum Bold (from contb.ttf) */
@font-face {
  font-family: 'Continuum';
  src: url('https://145627525.fs1.hubspotusercontent-eu1.net/hubfs/145627525/Re-board%20web%20content/contb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Define Continuum Medium (from contm.ttf) - Optional but good since you uploaded it */
@font-face {
  font-family: 'Continuum';
  src: url('https://145627525.fs1.hubspotusercontent-eu1.net/hubfs/145627525/Re-board%20web%20content/contm.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 3. Define Continuum Light (from contl.ttf) - Optional but good since you uploaded it */
@font-face {
  font-family: 'Continuum';
  src: url('https://145627525.fs1.hubspotusercontent-eu1.net/hubfs/145627525/Re-board%20web%20content/contl.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* 4.  Franklin Gothic Book*/
@font-face {
  font-family: 'Franklin Gothic Book';
  src: url('https://145627525.fs1.hubspotusercontent-eu1.net/hubfs/145627525/Re-board%20web%20content/FRABK.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



:root {
  /* Colors */
  --primary-dark-text-color: #0D0D0D;
  --secondary-dark-text-color: #AAAAAA;
  --tertiary-dark-text-color: #666666;
  --light-text-color: #FFFFFF;

  /* Global fonts  */
  --primary-font: 'Continuum', sans-serif;
  --secondary-font: 'Franklin Gothic Book', sans-serif;

  /* General Styles */
  --border-radius: 12px;
  --border-color: #E8E4DF;
  --border-width: 2px;

  /* Backgrounds */
  --primary-bg: #FFFFFF;
  --secondary-bg: #FAF8F6; 
  --dark-bg: #221F20;

  /*  container  */
  --container-max-width: 1920px;

  /* blog tag*/
  --blue-background: #ebf0fa;
  --blue-text: #3561AC;

}



/****** Button CSS START *********/
/***************************/

.p-btn {
  color: #FFFFFF;font-size: 27px;font-family: Franklin Gothic Book, sans-serif;;
  font-size: clamp(14px, 0.4vw + 0.8rem, 27px);
  background-color: #221F20;
  border-radius: 13px;
  border: 2px solid #221F20;
;
  padding-top: 15px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 25px;
;
  letter-spacing: 0px; 
  cursor: pointer;
  display: inline-block;
  transition:all 0.3s ease;
}

.p-btn:hover{
  background-color: rgba(255, 255, 255, 0%);
  border: 2px solid #221F20;
;
  color:#221F20;
}

.s-btn {
  color: #221F20;font-size: 27px;font-family: Franklin Gothic Book, sans-serif;;
  font-size: clamp(14px, 0.4vw + 0.8rem, 27px);
  background-color: rgba(255, 255, 255, 0%);
  border-radius: 13px;
  border: 2px solid #221F20;
;
  padding-top: 15px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 25px;
;
  letter-spacing: 0px; 
  cursor: pointer;
  display: inline-block;
  transition:all 0.3s ease;
}

.s-btn:hover{
  background-color: #221F20;
  color:#FFFFFF;
}

/* @media(max-width:1420px){
  .p-btn,.s-btn{
    border-width:1px;
  }
} */

@media(max-width:768px){
  .p-btn,.s-btn{
    font-size:1rem;
    padding:10px 12px;
    width: 100%;
    text-align: center
  }
}






/****** Button CSS END *********/
/*******************************/



/****** Other Utility Classes CSS START *********/
/***********************************************/

.border {
  border: var(--border-width) solid var(--border-color);
}

.primary-bg {
  background-color: var(--primary-bg);
}

.secondary-bg {
  background-color: var(--secondary-bg);
}

.dark-bg {
  background-color: var(--dark-bg);
}

.rounded {
  border-radius: var(--border-radius);
}



/****** Other Utility Classes CSS END *********/
/*********************************************/



/* Padding */
.p-40 { padding: clamp(24px, 2vw, 40px); }
.pt-40 { padding-top: clamp(24px, 2vw, 40px); }
.pr-40 { padding-right: clamp(24px, 2vw, 40px); }
.pb-40 { padding-bottom: clamp(24px, 2vw, 40px); }
.pl-40 { padding-left: clamp(24px, 2vw, 40px); }
.px-40 { padding-inline: clamp(24px, 2vw, 40px); }
.py-40 { padding-block: clamp(24px, 2vw, 40px); }

/* Margin */
.m-40 { margin: clamp(24px, 2vw, 40px); }
.mt-40 { margin-top: clamp(24px, 2vw, 40px); }
.mr-40 { margin-right: clamp(24px, 2vw, 40px); }
.mb-40 { margin-bottom: clamp(24px, 2vw, 40px); }
.ml-40 { margin-left: clamp(24px, 2vw, 40px); }
.mx-40 { margin-inline: clamp(24px, 2vw, 40px); }
.my-40 { margin-block: clamp(24px, 2vw, 40px); }

.p-36 { padding: clamp(22px, 1.8vw, 36px); }
.pt-36 { padding-top: clamp(22px, 1.8vw, 36px); }
.pr-36 { padding-right: clamp(22px, 1.8vw, 36px); }
.pb-36 { padding-bottom: clamp(22px, 1.8vw, 36px); }
.pl-36 { padding-left: clamp(22px, 1.8vw, 36px); }
.px-36 { padding-inline: clamp(22px, 1.8vw, 36px); }
.py-36 { padding-block: clamp(22px, 1.8vw, 36px); }

/* Margin */
.m-36 { margin: clamp(22px, 1.8vw, 36px); }
.mt-36 { margin-top: clamp(22px, 1.8vw, 36px); }
.mr-36 { margin-right: clamp(22px, 1.8vw, 36px); }
.mb-36 { margin-bottom: clamp(22px, 1.8vw, 36px); }
.ml-36 { margin-left: clamp(22px, 1.8vw, 36px); }
.mx-36 { margin-inline: clamp(22px, 1.8vw, 36px); }
.my-36 { margin-block: clamp(22px, 1.8vw, 36px); }

/* Padding */
.p-32 { padding: clamp(20px, 1.6vw, 32px); }
.pt-32 { padding-top: clamp(20px, 1.6vw, 32px); }
.pr-32 { padding-right: clamp(20px, 1.6vw, 32px); }
.pb-32 { padding-bottom: clamp(20px, 1.6vw, 32px); }
.pl-32 { padding-left: clamp(20px, 1.6vw, 32px); }
.px-32 { padding-inline: clamp(20px, 1.6vw, 32px); }
.py-32 { padding-block: clamp(20px, 1.6vw, 32px); }

/* Margin */
.m-32 { margin: clamp(20px, 1.6vw, 32px); }
.mt-32 { margin-top: clamp(20px, 1.6vw, 32px); }
.mr-32 { margin-right: clamp(20px, 1.6vw, 32px); }
.mb-32 { margin-bottom: clamp(20px, 1.6vw, 32px); }
.ml-32 { margin-left: clamp(20px, 1.6vw, 32px); }
.mx-32 { margin-inline: clamp(20px, 1.6vw, 32px); }
.my-32 { margin-block: clamp(20px, 1.6vw, 32px); }

/* Padding */
.p-24 { padding: clamp(16px, 1.2vw, 24px); }
.pt-24 { padding-top: clamp(16px, 1.2vw, 24px); }
.pr-24 { padding-right: clamp(16px, 1.2vw, 24px); }
.pb-24 { padding-bottom: clamp(16px, 1.2vw, 24px); }
.pl-24 { padding-left: clamp(16px, 1.2vw, 24px); }
.px-24 { padding-inline: clamp(16px, 1.2vw, 24px); }
.py-24 { padding-block: clamp(16px, 1.2vw, 24px); }

/* Margin */
.m-24 { margin: clamp(16px, 1.2vw, 24px); }
.mt-24 { margin-top: clamp(16px, 1.2vw, 24px); }
.mr-24 { margin-right: clamp(16px, 1.2vw, 24px); }
.mb-24 { margin-bottom: clamp(16px, 1.2vw, 24px); }
.ml-24 { margin-left: clamp(16px, 1.2vw, 24px); }
.mx-24 { margin-inline: clamp(16px, 1.2vw, 24px); }
.my-24 { margin-block: clamp(16px, 1.2vw, 24px); }



.p-20 { padding: clamp(12px, 1vw, 20px); }
.pt-20 { padding-top: clamp(12px, 1vw, 20px); }
.pr-20 { padding-right: clamp(12px, 1vw, 20px); }
.pb-20 { padding-bottom: clamp(12px, 1vw, 20px); }
.pl-20 { padding-left: clamp(12px, 1vw, 20px); }
.px-20 { padding-left: clamp(12px, 1vw, 20px); padding-right: clamp(12px, 1vw, 20px); }
.py-20 { padding-top: clamp(12px, 1vw, 20px); padding-bottom: clamp(12px, 1vw, 20px); }


.m-20 { margin: clamp(12px, 1vw, 20px); }
.mt-20 { margin-top: clamp(12px, 1vw, 20px); }
.mr-20 { margin-right: clamp(12px, 1vw, 20px); }
.mb-20 { margin-bottom: clamp(12px, 1vw, 20px); }
.ml-20 { margin-left: clamp(12px, 1vw, 20px); }
.mx-20 { margin-left: clamp(12px, 1vw, 20px); margin-right: clamp(12px, 1vw, 20px); }
.my-20 { margin-top: clamp(12px, 1vw, 20px); margin-bottom: clamp(12px, 1vw, 20px); }

/* Padding */
.p-16 { padding: clamp(12px, 0.8vw, 16px); }
.pt-16 { padding-top: clamp(12px, 0.8vw, 16px); }
.pr-16 { padding-right: clamp(12px, 0.8vw, 16px); }
.pb-16 { padding-bottom: clamp(12px, 0.8vw, 16px); }
.pl-16 { padding-left: clamp(12px, 0.8vw, 16px); }
.px-16 { padding-inline: clamp(12px, 0.8vw, 16px); }
.py-16 { padding-block: clamp(12px, 0.8vw, 16px); }

/* Margin */
.m-16 { margin: clamp(12px, 0.8vw, 16px); }
.mt-16 { margin-top: clamp(12px, 0.8vw, 16px); }
.mr-16 { margin-right: clamp(12px, 0.8vw, 16px); }
.mb-16 { margin-bottom: clamp(12px, 0.8vw, 16px); }
.ml-16 { margin-left: clamp(12px, 0.8vw, 16px); }
.mx-16 { margin-inline: clamp(12px, 0.8vw, 16px); }
.my-16 { margin-block: clamp(12px, 0.8vw, 16px); }

.p-10 { padding: clamp(6px, 0.5vw, 10px); }
.pt-10 { padding-top: clamp(6px, 0.5vw, 10px); }
.pr-10 { padding-right: clamp(6px, 0.5vw, 10px); }
.pb-10 { padding-bottom: clamp(6px, 0.5vw, 10px); }
.pl-10 { padding-left: clamp(6px, 0.5vw, 10px); }
.px-10 { padding-left: clamp(6px, 0.5vw, 10px); padding-right: clamp(6px, 0.5vw, 10px); }
.py-10 { padding-top: clamp(6px, 0.5vw, 10px); padding-bottom: clamp(6px, 0.5vw, 10px); }

.m-10 { margin: clamp(6px, 0.5vw, 10px); }
.mt-10 { margin-top: clamp(6px, 0.5vw, 10px); }
.mr-10 { margin-right: clamp(6px, 0.5vw, 10px); }
.mb-10 { margin-bottom: clamp(6px, 0.5vw, 10px); }
.ml-10 { margin-left: clamp(6px, 0.5vw, 10px); }
.mx-10 { margin-left: clamp(6px, 0.5vw, 10px); margin-right: clamp(6px, 0.5vw, 10px); }
.my-10 { margin-top: clamp(6px, 0.5vw, 10px); margin-bottom: clamp(6px, 0.5vw, 10px); }

/* Gap 40 (24px to 40px) */
.gap-40 { gap: clamp(24px, 2vw, 40px); }
.gap-x-40 { column-gap: clamp(24px, 2vw, 40px); }
.gap-y-40 { row-gap: clamp(24px, 2vw, 40px); }

/* Gap 32 (20px to 32px) */
.gap-32 { gap: clamp(20px, 1.6vw, 32px); }
.gap-x-32 { column-gap: clamp(20px, 1.6vw, 32px); }
.gap-y-32 { row-gap: clamp(20px, 1.6vw, 32px); }

/* Gap 24 (16px to 24px) */
.gap-24 { gap: clamp(16px, 1.2vw, 24px); }
.gap-x-24 { column-gap: clamp(16px, 1.2vw, 24px); }
.gap-y-24 { row-gap: clamp(16px, 1.2vw, 24px); }

/* Gap 16 (12px to 16px) */
.gap-16 { gap: clamp(12px, 0.8vw, 16px); }
.gap-x-16 { column-gap: clamp(12px, 0.8vw, 16px); }
.gap-y-16 { row-gap: clamp(12px, 0.8vw, 16px); }



.gap-30 { gap: clamp(16px, 1.5vw, 30px); }
.gap-x-30 { row-gap: clamp(16px, 1.5vw, 30px); }
.gap-y-30 { column-gap: clamp(16px, 1.5vw, 30px); }



.gap-20 { gap: clamp(12px, 1vw, 20px); }
.gap-x-20 { row-gap: clamp(12px, 1vw, 20px); }
.gap-y-20 { column-gap: clamp(12px, 1vw, 20px); }

.gap-10 { gap: clamp(6px, 0.5vw, 10px); }
.gap-x-10 { row-gap: clamp(6px, 0.5vw, 10px); }
.gap-y-10 { column-gap: clamp(6px, 0.5vw, 10px); }



/*************   */
.clamp-1{
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* number of lines */
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
}
/******  *********/



/* global container for moduels */

.section{
  width:100%;
  padding: 5em 0;
}

.container{
  max-width:var(--container-max-width);
  width:90%;
  margin:0 auto;
}



/* Mobile css */
@media(max-width:768px){
  .section{
    padding:3em 0;
  }
}

/* ════════════════════════════════
  HubSpot form overrides
  Works for legacy + multi-step
  ════════════════════════════════ */

  /* Field spacing */
  .fh-form-wrap .hs-form .hs-form-field {
    margin-bottom: 14px;
  }

.form-columns-1 .hs-input{
  width:100%;
}

  /* Hide labels for standard input fields, show for radio/checkbox groups */
  .fh-form-wrap .hs-form .hs-fieldtype-text > label,
  .fh-form-wrap .hs-form .hs-fieldtype-email > label,
  .fh-form-wrap .hs-form .hs-fieldtype-phone > label,
  .fh-form-wrap .hs-form .hs-fieldtype-number > label,
  .fh-form-wrap .hs-form .hs-fieldtype-select > label,
  .fh-form-wrap .hs-form .hs-fieldtype-textarea > label {
    display: none;
  }

  .fh-form-wrap .hs-form .hs-fieldtype-radio > label,
  .fh-form-wrap .hs-form .hs-fieldtype-checkbox > label {
    display: block;
    font-family: var(--secondary-font);
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem);
    font-weight: 600;
    color: var(--primary-dark-text-color);
    margin-bottom: 14px;
  }

  /* Text / email / phone / number inputs */
  .fh-form-wrap .hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
  .fh-form-wrap .hs-form select.hs-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--secondary-font);
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem);;
    color: var(--primary-dark-text-color);
    outline: none;
    transition: border-color 0.2s ease;
  }

  /* Select arrow */
  .fh-form-wrap .hs-form select.hs-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
    width:100% !important;

  }

  /* Textarea */
  .fh-form-wrap .hs-form textarea.hs-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 148px;
    padding: 14px 16px;
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--secondary-font);
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem);
    color: var(--primary-dark-text-color);
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
  }

  /* Focus state */
  .fh-form-wrap .hs-form input.hs-input:focus,
  .fh-form-wrap .hs-form select.hs-input:focus,
  .fh-form-wrap .hs-form textarea.hs-input:focus {
    border-color: var(--primary-dark-text-color);
    box-shadow: none;
  }

  /* Placeholder text */
  .fh-form-wrap .hs-form input::placeholder,
  .fh-form-wrap .hs-form textarea::placeholder {
    color: var(--secondary-dark-text-color);
  }

  /* ── Radio buttons ── */
  .fh-form-wrap .hs-form .inputs-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .fh-form-wrap .hs-form .hs-form-radio,
  .fh-form-wrap .hs-form .hs-form-radio-display {
    margin-bottom: 12px;
  }

  .fh-form-wrap .hs-form .hs-form-radio label,
  .fh-form-wrap .hs-form .hs-form-radio-display label {
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--secondary-font);
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem);
    color: var(--primary-dark-text-color);
    line-height: 1.4;
  }

  .fh-form-wrap .hs-form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 20px !important;
    height: 20px;
    border: 1px solid #707070;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .fh-form-wrap .hs-form input[type="radio"]:checked {
    background-color: #2B8A45;
    border-color: #2B8A45;
    box-shadow: inset 0 0 0 3px #ffffff;
  }

  /* ── GDPR / Consent section ── */
  .fh-form-wrap .hs-form .legal-consent-container {
    margin-top: 12px;
  }

  .fh-form-wrap .hs-form .legal-consent-container .hs-richtext {
    font-family: var(--secondary-font);
    font-size: 13px;
    color: var(--tertiary-dark-text-color);
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .fh-form-wrap .hs-form .legal-consent-container .hs-richtext p {
    margin: 0;
  }

  .fh-form-wrap .hs-form .legal-consent-container .hs-form-booleancheckbox {
    margin-bottom: 0;
  }

  .fh-form-wrap .hs-form .legal-consent-container .hs-form-booleancheckbox label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--secondary-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--secondary-dark-text-color);
    line-height: 1.5;
  }

  /* Custom checkbox */
  .fh-form-wrap .hs-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c4c4c4;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .fh-form-wrap .hs-form input[type="checkbox"]:checked {
    background-color: var(--dark-bg);
    border-color: var(--dark-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
  }

  /* ── Submit / Next / Prev buttons ── */
  .fh-form-wrap .hs-form .hs-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background: var(--dark-bg);
    color: var(--light-text-color);
    border: 2px solid var(--dark-bg);
    border-radius: var(--border-radius);
    padding: 14px 36px;
    font-family: var(--secondary-font);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    margin-top: 8px;
  }

  .fh-form-wrap .hs-form .hs-button:hover {
    background: transparent;
    color: var(--dark-bg);
  }

  /* ── Error messages ── */
  .fh-form-wrap .hs-form .hs-error-msgs {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
  }

  .fh-form-wrap .hs-form .hs-error-msg,
  .fh-form-wrap .hs-form label.hs-error-msg {
    font-family: var(--secondary-font);
    font-size: 12px;
    color: #d93025;
    display: block;
  }

  /* ── Multi-step: progress bar ── */
  .fh-form-wrap .hs-form .hs-progress-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin-bottom: 24px;
    overflow: hidden;
  }

  .fh-form-wrap .hs-form .hs-progress-bar .hs-progress-bar-fill {
    height: 100%;
    background: var(--dark-bg);
    border-radius: 2px;
    transition: width 0.4s ease;
  }


/*Multi Step*/



/* ── Individual Radio Option Rows ── */
.fh-form-wrap .hsfc-FieldLabel {
  display: flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--secondary-font);
  font-size: 15px;
  color: var(--primary-dark-text-color);
  line-height: 1.4;
  margin-bottom: 12px; /* Replaces legacy .hs-form-radio margin */
}

/* ── Custom Radio Buttons ── */
.fh-form-wrap input[type="radio"].hsfc-RadioInput {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px;
  border: 1px solid #707070;
  border-radius: 50%;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  
}

[data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options label{
      margin-bottom: 12px;
}


.hsfc-RadioInput:checked:after{
 background-color: #2B8A45 !important;
}

/* ── Radio Active / Checked State ── */
.fh-form-wrap input[type="radio"].hsfc-RadioInput:checked {
  
}

[data-hsfc-id=Renderer] .hsfc-TextInput {
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    background: var(--primary-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--secondary-font) !important;
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem) !important;
    color: var(--primary-dark-text-color) !important;
    resize: vertical !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
  
}


[data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem {
 background:var(--primary-bg) !important;
}

[data-hsfc-id=Renderer] .hsfc-DropdownOptions__Search {
 background:var(--primary-bg) !important;
}

[data-hsfc-id=Renderer]  .hsfc-TextareaInput {
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    box-sizing: border-box;
    padding: 14px 16px;
    background: var(--primary-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--secondary-font) !important;
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem) !important;
    color: var(--primary-dark-text-color) !important;
    resize: vertical !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}


.hsfc-NavigationRow__Buttons:has(>*:only-child) {
 justify-content:flex-start !important;
}

[data-hsfc-id=Renderer] .hsfc-Button{

   -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    background: var(--dark-bg) !important;
    color: var(--light-text-color) !important;
    border: 2px solid var(--dark-bg) !important;
    border-radius: var(--border-radius) !important;
    padding: 14px 36px !important;
    font-family: var(--secondary-font) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background 0.3s ease, color 0.3s ease !important; 
    margin-top: 8px !important;
}

[data-hsfc-id=Renderer] .hsfc-FieldLabel {
     display: block;
    font-family: var(--secondary-font) !important;
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem) !important;
    font-weight: 400 !important;
    color: var(--primary-dark-text-color) !important;
    margin-bottom: 14px !important;
}


[data-hsfc-id=Renderer] .hsfc-RichText p {
    display: block;
    font-family: var(--secondary-font) !important;
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem) !important;
    font-weight: 600 !important;
    color: var(--primary-dark-text-color) !important;
    margin-bottom: 14px !important;
}

[data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options label{
    gap:12px !important;
}


.hsfc-PhoneInput{
 gap:0px !important;
}

.hsfc-PhoneInput  .hsfc-TextInput{
  border-top-left-radius: 0px !important;
  border-top-right-radius:  var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
  border-bottom-left-radius: 0px !important ;
}


[data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret{
 border: 1px solid var(--border-color) !important;
 border-right:0px !important; 
 border-top-left-radius: var(--border-radius) !important;
 border-bottom-left-radius: var(--border-radius) !important ;
 background: var(--primary-bg)
}

/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
   .fh-form-wrap .hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
  .fh-form-wrap .hs-form select.hs-input{
   width:100% !important;
}
}


/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 10px !important;
  border-radius: var(--border-radius);
    font-family: var(--secondary-font);
    font-size: clamp(1rem, 0.5625vw + 0.8875rem, 1.5625rem);
  color: var(--secondary-dark-text-color);
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }



/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/




/* Utilities
Helper classes with ability to override anything that comes before it
*/

