/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {

  /* ---- PRIMARY COLORS: GREENS ---- */
  --color-green-900:    #072B2A;
  --color-green-800:    #073735;
  --color-green-600:    #0A504E;   /* *Brand Primary Color */
  --color-green-400:    #8eb3ab;   /* Button Pressed State */
  --color-green-200:    #A1C9C1;

  /* ---- PRIMARY COLORS: ORANGES ---- */
  --color-orange-800:   #852909;
  --color-orange-600:   #EF5323;   /* *Brand Primary Color */
  --color-orange-550:   #FF6834;   /* Alt on dark bg — Charcoal text on top */
  --color-orange-200:   #F6C99A;

  /* ---- NEUTRALS ---- */
  --color-cream-600:    #c3b6aa;   /* Stroke on Avatars */
  --color-cream-400:    #D9D3CD;   /* Lines on Cream 200 Background */
  --color-cream-200:    #F4F1EE;   /* Main Light Background / Body copy on Dark Backgrounds */
  --color-white:        #FFFFFF;   /* Headline copy on dark backgrounds */
  --color-charcoal:     #121D24;   /* Arundel's "Black" / Headline copy on light backgrounds */
  --color-charcoal-800: #3B3C3F;   /* Body copy on light backgrounds */

  /* ---- SEMANTIC ALIASES ---- */
  --color-bg-light:            var(--color-cream-200);
  --color-bg-dark:             var(--color-green-800);
  --color-text-heading-light:  var(--color-charcoal);
  --color-text-heading-dark:   var(--color-white);
  --color-text-body-light:     var(--color-charcoal-800);
  --color-text-body-dark:      var(--color-cream-200);
  --color-brand-primary:       var(--color-green-600);
  --color-brand-accent:        var(--color-orange-600);
  --color-line-on-cream:       var(--color-cream-400);
  --color-line-on-white:       var(--color-cream-200);

  /* ---- FONT FAMILIES ---- */
  --font-display: 'Mona Sans', sans-serif;
  --font-body:    'Archivo', sans-serif;

  /* ---- FONT SIZES: DESKTOP ---- */
  --fs-t1:       200px;
  --fs-h1:        68px;
  --fs-h2:        54px;
  --fs-h3:        44px;
  --fs-h4:        34px;
  --fs-h5:        24px;
  --fs-h6:        14px;
  --fs-body-lg:   22px;
  --fs-body:      18px;
  --fs-body-sm:   15px;
  --fs-body-xs:   12px;

  /* ---- LINE HEIGHTS ---- */
  --lh-t1:       0.9;
  --lh-h1:       1.1;
  --lh-h2:       1.1;
  --lh-h3:       1.2;
  --lh-h4:       1.2;
  --lh-h5:       1.2;
  --lh-h6:       1.2;
  --lh-body-lg:  1.6;
  --lh-body:     1.5;
  --lh-body-sm:  1.6;
  --lh-body-xs:  1.6;

  /* ---- LETTER SPACING ---- */
  --ls-t1:  -1.75px;
  --ls-h1:  -0.5px;
  --ls-h2:  -0.5px;
  --ls-h3:  -0.25px;
  --ls-h4:  normal;
  --ls-h5:  normal;
  --ls-h6:  2px;

  /* ---- PARAGRAPH SPACING ---- */
  --paragraph-spacing-lg:  16px;
  --paragraph-spacing-sm:  8px;
  --paragraph-spacing-xs:  8px;
}

/* ============================================================
   3. BASE / RESET TYPOGRAPHY
   ============================================================ */
body *{
  text-underline-offset: 0.2em;
}
body,
.et_pb_text,
.et_pb_module p {
  font-family:  var(--font-body);
  font-weight:  500;
  font-size:    var(--fs-body);
  line-height:  var(--lh-body);
}

.et_pb_text.body-light-text p{
  font-family:  var(--font-body);
  font-weight:  500;
  font-size:    var(--fs-body);
  line-height:  var(--lh-body);
  color:        var(--color-cream-200);
}

.et_pb_text.body-white-text p,
.et_pb_text.body-white-text span{
  font-family:  var(--font-body);
  font-weight:  500;
  font-size:    var(--fs-body);
  line-height:  var(--lh-body);
  color:        #ffffff !important;
}

/* Remove Divi default margin collapsing on text modules */
.et_pb_text_inner {
  overflow: visible;
}


/* ============================================================
   4. HEADING STYLES — DESKTOP
   ============================================================ */

/* --- Title Style (T1) ---
   NOTE: Used ONLY on Home Page in Primary Hero component.
   Apply class="title-t1" to the Divi text module wrapper. */
.title-t1 h1,
.et_pb_text.title-t1 h1{
  font-family:     var(--font-display);
  font-weight:     200;
  font-size:       var(--fs-t1) !important;
  line-height:     var(--lh-t1);
  letter-spacing:  var(--ls-t1);
  color:           var(--color-green-200) !important;
}

/* --- H1 --- */
h1,
.et_pb_text h1,
.et_pb_column h1,
.et_pb_section h1 {
  font-family:     var(--font-body);
  font-weight:     300;
  font-size:       var(--fs-h1);
  line-height:     var(--lh-h1);
  letter-spacing:  var(--ls-h1);
  color:           var(--color-text-heading-light);
  margin-top:      0;
}

/* --- H2 --- */
h2,
.et_pb_text h2,
.et_pb_column h2,
.et_pb_section h2 {
  font-family:     var(--font-body);
  font-weight:     400;
  font-size:       var(--fs-h2);
  line-height:     var(--lh-h2);
  letter-spacing:  var(--ls-h2);
  color:           var(--color-text-heading-light);
  margin-top:      0;
}

/* --- H3 --- */
h3,
.et_pb_text h3,
.et_pb_column h3,
.et_pb_section h3,
h2.h3{
  font-family:     var(--font-body);
  font-weight:     400;
  font-size:       var(--fs-h3);
  line-height:     var(--lh-h3);
  letter-spacing:  var(--ls-h3);
  color:           #000000;
  margin-top:      0;
}

h3.white,
.et_pb_text.white h3{
	color: #ffffff !important;
}

/* --- H4 --- */
h4,
.et_pb_text h4,
.et_pb_column h4,
.et_pb_section h4 {
  font-family:     var(--font-body);
  font-weight:     400;
  font-size:       var(--fs-h4);
  line-height:     var(--lh-h4);
  letter-spacing:  var(--ls-h4);
  color:           #000000;
  margin-top:      0;
}

/* --- H5 --- */
h5,
.et_pb_text h5,
.et_pb_column h5,
.et_pb_section h5 {
  font-family:     var(--font-body);
  font-weight:     700;
  font-size:       var(--fs-h5);
  line-height:     var(--lh-h5);
  letter-spacing:  var(--ls-h5);
  color:           var(--color-charcoal);
  margin-top:      0;
}

/* --- H6 / Eyebrow Style ---
   Eyebrow is uppercase, tracked out, Charcoal color.
   Also available via .eyebrow utility class. */
h6,
.et_pb_text h6,
.et_pb_column h6,
.et_pb_section h6,
.eyebrow,
.et_pb_text.eyebrow h6{
  font-family:     var(--font-body);
  font-weight:     400;
  font-size:       var(--fs-h6);
  line-height:     var(--lh-h6);
  letter-spacing:  var(--ls-h6);
  text-transform:  uppercase;
  color:           var(--color-charcoal);
  margin-top:      0;
}

.eyebrow{
	padding-left: 31px !important;
}

.eyebrow:after{
	content: '';
    width: 20px;
    height: 5px;
    background: var(--color-orange-600);
    position: absolute;
    top: 6px;
	left: 0;
}

.et_pb_text.white h1,
.et_pb_text.white h2,
.et_pb_text.white h3,
.et_pb_text.white h4,
.et_pb_text.white h5,
.et_pb_text.white h6,
.et_pb_text.white p,
.et_pb_text.white div,
.et_pb_text.white span,
.eyebrow.white{
	color: #ffffff !important;
}

.et_pb_text.cream-200 p,
.et_pb_text.cream-200 div,
.et_pb_text.cream-200 span{
	color: #F4F1EE !important;
}

.et_pb_text.green-200 h1{
	color: #A1C9C1 !important;
}

/* ============================================================
   5. BODY TEXT STYLES
   ============================================================ */

/* --- Body Large (22px) --- */
.body-large,
.et_pb_text .body-large {
  font-family:    var(--font-body);
  font-weight:    500;
  font-size:      var(--fs-body-lg);
  line-height:    var(--lh-body-lg);
  letter-spacing: normal;
  margin-bottom:  var(--paragraph-spacing-lg);
  color:          var(--color-charcoal-800);
}

/* --- Body Regular (18px) — Default paragraph --- */
p,
.body-regular,
.et_pb_text p,
.et_pb_text .body-regular {
  font-family:    var(--font-body);
  font-weight:    500;
  font-size:      var(--fs-body);
  line-height:    var(--lh-body);
  letter-spacing: normal;
  color:          var(--color-charcoal-800);
}

/* --- Body Small (15px) --- */
.body-small,
.et_pb_text.body-small {
  font-family:    var(--font-body);
  font-weight:    500;
  font-size:      var(--fs-body-sm);
  line-height:    var(--lh-body-sm);
  letter-spacing: normal;
  margin-bottom:  var(--paragraph-spacing-sm);
  color:          var(--color-charcoal-800);
}

/* --- Body Extra-Small (12px) --- */
.body-xs,
small,
.et_pb_text .body-xs,
.et_pb_text small {
  font-family:    var(--font-body);
  font-weight:    500;
  font-size:      var(--fs-body-xs);
  line-height:    var(--lh-body-xs);
  letter-spacing: normal;
  margin-bottom:  var(--paragraph-spacing-xs);
  color:          var(--color-charcoal-800);
}


/* ============================================================
   6. DARK BACKGROUND SECTION OVERRIDES
   Add class="dark-bg" to any Divi section row for auto color flip.
   ============================================================ */

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

.et_pb_section.dark-bg p,
.et_pb_section.dark-bg .et_pb_text,
.et_pb_section.dark-bg .et_pb_module p,
.et_pb_section.dark-bg .body-large,
.et_pb_section.dark-bg .body-regular,
.et_pb_section.dark-bg .body-small,
.et_pb_section.dark-bg .body-xs,
.et_pb_section.dark-bg small {
  color: var(--color-text-body-dark);
}

.et_pb_section.dark-bg h1,
.et_pb_section.dark-bg h2,
.et_pb_section.dark-bg h3,
.et_pb_section.dark-bg h4,
.et_pb_section.dark-bg h5,
.et_pb_section.dark-bg h6,
.et_pb_section.dark-bg .eyebrow {
  color: var(--color-text-heading-dark);
}

/* Buttons */
/* PRIMARY BUTTON */
.btn--primary,
.btn.cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: #121D24;
  color: #ffffff;
  border: 1.5px solid #121D24;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn--primary:hover,
.btn.cta-btn:hover {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px!important;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: transparent;!important;
  border: 1.5px solid #121D24!important;
  color: #121D24!important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn--primary:active,
.btn.cta-btn:active {
  background-color: #D9D3CD!important;
}
.btn--primary:focus,
.btn.cta-btn:focus {
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #121D24;
}

/* SECONDARY BUTTON DARK SMALL WITH ICON */
.btn--secondary-dark-small-icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 52px 12px 24px !important;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: #121D24;
  color: #fff;
  border: 1.5px solid #121D24;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.btn--secondary-dark-small-icon:after{
  content:'';
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  right:28px;
  width:16px;
  height:16px;
  background-color: #ffffff !important;
  -webkit-mask: url(/wp-content/uploads/2026/03/plus-icon-16px-white.svg) no-repeat center;
  mask: url(/wp-content/uploads/2026/03/plus-icon-16px-white.svg) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn--secondary-dark-small-icon:hover{
  color: #121D24 !important;
  background-color: transparent;
}
.btn--secondary-dark-small-icon:active,
.btn--secondary-dark-small-icon:focus{
  color: #121D24 !important;
  background-color: #D9D3CD;
}
.btn--secondary-dark-small-icon:hover:after,
.btn--secondary-dark-small-icon:active:after,
.btn--secondary-dark-small-icon:focus:after{
  background-color: #121D24 !important;
}

/* SECONDARY BUTTON */
.btn--secondary,
.btn.ghost-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px !important;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: transparent;
  color: #121D24;
  border: 1.5px solid #EF5323;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn--primary-dark{
	display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px !important;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: #ffffff !important;
  color: #121D24;
  border: 1.5px solid #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn--primary-dark:hover,
.btn--primary-post-icon-dark:hover,
.btn--primary-post-plus-icon-dark:hover,
.btn--primary-post-tilt-arrow-icon-dark:hover{
  padding: 10px 18px !important;
  border-radius: 8px;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary-post-icon-dark:hover{
	padding: 10px 36px 10px 18px !important;
}

.btn--primary-post-plus-icon-dark:hover,
.btn--primary-post-tilt-arrow-icon-dark:hover{
	padding: 12px 48px 12px 24px !important;
}

.btn--primary-post-icon-dark{
	display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 36px 10px 18px !important;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: #ffffff !important;
  color: #121D24;
  border: 1.5px solid #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn--primary-post-icon-dark::before{
	content: "" !important;
	width: 16px;
	height: 16px; 
	background-image: url('/wp-content/uploads/2026/03/icon-16px-external-link-orange600.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	right: 15px;
    top: 17px;
	opacity: 1 !important;
	visibility: 1 !important;
}
.btn--primary-post-plus-icon-dark::before{
	content: "" !important;
	width: 24px;
    height: 24px;
	background-image: url('/wp-content/uploads/2026/03/wide-arrow-right.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	right: 20px;
    top: 16px;
	opacity: 1 !important;
	visibility: visible !important;
}

.btn--primary-post-tilt-arrow-icon-dark:before{
	content: "" !important;
	width: 24px;
    height: 24px;
	background-image: url('/wp-content/uploads/2026/03/icon-24px-external-link-orange550.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	right: 20px;
    top: 16px;
	opacity: 1 !important;
	visibility: visible !important;
}

.tertiary-small-buttony-post-download-ic:before{
	content: "" !important;
	width: 24px;
    height: 24px;
	background-image: url('/wp-content/uploads/2026/04/wide-arrow-right@2x.png') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	right: 20px;
    top: 16px;
	opacity: 1 !important;
	visibility: visible !important;
}



.btn--primary-post-plus-icon-dark,
.btn--primary-post-tilt-arrow-icon-dark{
	display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 48px 12px 24px !important;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background-color: #ffffff !important;
  color: #121D24;
  border: 1.5px solid #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}


.btn--secondary:hover,
.btn.ghost-btn:hover {
  background-color:#ffffff !important;
  padding: 10px 18px !important;
  border: 1.5px solid #EF5323 !important;
}
.btn--secondary:active,
.btn.ghost-btn:active {
  background-color: rgba(217, 211, 205, 1)!important;
  transform: translateY(1px);
}
.btn--secondary:focus,
.btn.ghost-btn:focus {
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #121D24;
	border: 1.5px solid #121D24;
}

.button-with-before-icon-dark-theme{
	font-family: Archivo;
	color: #ffffff;
font-size: 18px;
font-weight: 500;
	border: 1.5px solid rgba(161, 201, 193, 1);
border-radius: 8px;
padding: 12px 24px 12px 48px !important;
	background: transparent !important;
	position: relative;

}

.button-with-before-icon-dark-theme:hover,
.button-with-before-icon-dark-theme[aria-expanded="true"]{
  color: #121D24;
  border: 1.5px solid rgba(161, 201, 193, 1) !important;
  border-radius: 8px;
  padding: 12px 24px 12px 48px !important;
  background: #A1C9C1 !important;
  position: relative;
}

.small-button-with-before-icon-dark-theme{
	font-family: Archivo;
	color: #ffffff;
font-size: 18px;
font-weight: 500;
	border: 1.5px solid rgba(161, 201, 193, 1);
border-radius: 8px;
padding: 10px 20px 10px 40px !important;
	background: transparent !important;
	position: relative;

}

.small-button-with-before-icon-dark-theme:hover{
	color: #121D24;
	border: 1.5px solid rgba(161, 201, 193, 1) !important;
border-radius: 8px;
padding: 10px 20px 10px 40px !important;
	background: #A1C9C1 !important;
	position: relative;

}

.secondary--button-dark-theme{
	font-family: Archivo;
	color: #ffffff;
font-size: 18px;
font-weight: 500;
	border: 1.5px solid rgba(161, 201, 193, 1);
border-radius: 8px;
padding: 10px 20px !important;
	background: transparent !important;
	position: relative;

}

.secondary--button-dark-theme:hover{
	color: #121D24;
	border: 1.5px solid rgba(161, 201, 193, 1) !important;
border-radius: 8px;
padding: 10px 20px !important;
	background: #A1C9C1 !important;
	position: relative;

}

.button-with-before-icon-dark-theme::before{
	content: "" !important;
	width: 20px;
	height: 20px; 
	background-image: url('/wp-content/uploads/2026/04/calendar.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	left: 50px;
    top: 17px;
	opacity: 1 !important;
	visibility: 1 !important;
}

.button-with-before-icon-dark-theme:hover:before,
.button-with-before-icon-dark-theme[aria-expanded="true"]:before{
	content: "" !important;
	width: 20px;
	height: 20px; 
	background-image: url('/wp-content/uploads/2026/04/calendar-1.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	left: 50px;
    top: 17px;
	opacity: 1 !important;
	visibility: 1 !important;
}
.small-button-with-before-icon-dark-theme::before{
	content: "" !important;
	width: 20px;
	height: 20px; 
	background-image: url('/wp-content/uploads/2026/04/calendar.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	left: 47px;
    top: 15px;
	opacity: 1 !important;
	visibility: 1 !important;
}

.small-button-with-before-icon-dark-theme:hover:before{
	content: "" !important;
	width: 20px;
	height: 20px; 
	background-image: url('/wp-content/uploads/2026/04/calendar-1.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	left: 47px;
    top: 15px;
	opacity: 1 !important;
	visibility: 1 !important;
}

.tertiary-small-button-with-ic,
.tertiary-small-buttony-post-download-ic{
	font-family: Archivo;
	color: #121D24;
font-size: 15px;
font-weight: 500;
	border: none !important;
border-radius: 0px;
padding: 0px !important;
	background: transparent !important;
	position: relative !important;
}

.tertiary-small-button-with-ic:hover,
.tertiary-small-buttony-post-download-ic:hover{
	color: #4E535B;
}

.tertiary-small-button-with-ic::before{
	content: "" !important;
	width: 20px;
	height: 20px; 
	background-image: url('/wp-content/uploads/2026/03/icon-24px-arrow-right-charcoal-1.svg') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	right: -22px;
    top: 2px;
	opacity: 1 !important;
	visibility: 1 !important;
}

.tertiary-small-buttony-post-download-ic::before{
	content: "" !important;
	width: 20px;
	height: 20px; 
	background-image: url('/wp-content/uploads/2026/04/wide-arrow-right@2x.png') !important;
	background-size: 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: block;
	right: -22px;
    top: 2px;
	opacity: 1 !important;
	visibility: 1 !important;
}
.tertiary-small-button-with-ic,
.et_pb_button_module_wrapper {
    overflow: visible !important;
}

a.et_pb_button.tertiary-small-button-with-ic::after,
a.et_pb_button.tertiary-small-buttony-post-download-ic:after{
    content: "" !important;
    display: block !important;        /* ← this is what's missing */
    width: calc(100% + 20px) !important;
    height: 1px !important;
    background: red !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 32px !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    transform: none !important;
}
a.et_pb_button.tertiary-small-button-with-ic:hover:after,
a.et_pb_button.tertiary-small-buttony-post-download-ic:hover:after{
    bottom: -2px !important;
    left: 0px !important;
}


.bento-grid-h4 h4{
	color: #ffffff;
font-family: Archivo;
font-size: 28px;
font-weight: 700;

}

/* ============================================================
   7. TABLET BREAKPOINT TYPOGRAPHY
   Divi tablet breakpoint: max-width 980px
   ============================================================ */

@media (max-width: 980px) {
	

  /* Title T1 — Tablet */
  .title-t1,
  .et_pb_text .title-t1 {
    font-size:      164px;
    line-height:    0.9;
    letter-spacing: -1.75px;
    color:          var(--color-green-200);
  }

  /* H1 — Tablet */
  h1,
  .et_pb_text h1 {
    font-size:      64px;
    line-height:    1.1;
    letter-spacing: -0.5px;
    font-weight:    300;
  }

  /* H2 — Tablet */
  h2,
  .et_pb_text h2 {
    font-size:      50px;
    line-height:    1.1;
    letter-spacing: -0.5px;
    font-weight:    400;
  }

  /* H3 — Tablet */
  h3,
  .et_pb_text h3,
  .h3{
    font-size:      40px;
    line-height:    1.2;
    letter-spacing: -0.25px;
    font-weight:    400;
  }

  /* H4 — Tablet */
  h4,
  .et_pb_text h4 {
    font-size:      30px;
    line-height:    1.2;
    letter-spacing: normal;
    font-weight:    400;
  }
	.btn--primary-post-icon-dark,
	.secondary--button-dark-theme,
	.small-button-with-before-icon-dark-theme{
		font-size: 15px !important;
	}
	
	.btn--primary-post-icon-dark::before {
		top: 15px !important;
	}
}

/* ============================================================
   NOTE: Mobile breakpoint styles will be added here
   once mobile typography specs are provided.
   @media (max-width: 767px) { ... }
   ============================================================ */


/* ============================================================
   8. UTILITY COLOR CLASSES
   ============================================================ */

/* --- Text Color Utilities --- */
.text-green-900     { color: var(--color-green-900) !important; }
.text-green-800     { color: var(--color-green-800) !important; }
.text-green-600     { color: var(--color-green-600) !important; }
.text-green-400     { color: var(--color-green-400) !important; }
.text-green-200     { color: var(--color-green-200) !important; }
.text-orange-800    { color: var(--color-orange-800) !important; }
.text-orange-600    { color: var(--color-orange-600) !important; }
.text-orange-550    { color: var(--color-orange-550) !important; }
.text-orange-200    { color: var(--color-orange-200) !important; }
.text-cream-600     { color: var(--color-cream-600) !important; }
.text-cream-400     { color: var(--color-cream-400) !important; }
.text-cream-200     { color: var(--color-cream-200) !important; }
.text-white         { color: var(--color-white) !important; }
.text-charcoal      { color: var(--color-charcoal) !important; }
.text-charcoal-800  { color: var(--color-charcoal-800) !important; }

/* --- Background Color Utilities --- */
.bg-green-900     { background-color: var(--color-green-900) !important; }
.bg-green-800     { background-color: var(--color-green-800) !important; }
.bg-green-600     { background-color: var(--color-green-600) !important; }
.bg-green-400     { background-color: var(--color-green-400) !important; }
.bg-green-200     { background-color: var(--color-green-200) !important; }
.bg-orange-800    { background-color: var(--color-orange-800) !important; }
.bg-orange-600    { background-color: var(--color-orange-600) !important; }
.bg-orange-550    { background-color: var(--color-orange-550) !important; }
.bg-orange-200    { background-color: var(--color-orange-200) !important; }
.bg-cream-600     { background-color: var(--color-cream-600) !important; }
.bg-cream-400     { background-color: var(--color-cream-400) !important; }
.bg-cream-200     { background-color: var(--color-cream-200) !important; }
.bg-white         { background-color: var(--color-white) !important; }
.bg-charcoal      { background-color: var(--color-charcoal) !important; }
.bg-charcoal-800  { background-color: var(--color-charcoal-800) !important; }

@media only screen and (max-width: 980px){
  :root {
    --fs-t1:        164px;
    --fs-h2:        50px;
    --fs-h3:        40px;
    --fs-h4:        30px;
    --fs-h5:        24px;
    --fs-h6:        14px;
  }
}
@media only screen and (max-width: 600px){
  :root {
    --fs-body:      16px;
    --fs-t1:        92px;
    --fs-h2:        36px;
    --fs-h3:        28px;
    --fs-h4:        22px;
    --fs-h5:        20px;
    --fs-h6:        12px;
  }

  .btn--secondary,
  .btn.ghost-btn {
    font-size:16px;
  }

  .btn--primary-post-plus-icon-dark, .btn--primary-post-tilt-arrow-icon-dark{
    font-size:16px;
  }
  .btn--primary-post-tilt-arrow-icon-dark:before,
  .btn--primary-post-plus-icon-dark::before{
    right: 20px;
    width: 20px;
    height: 20px;
  }

	.title-t1 h1,
	.et_pb_text.title-t1 h1{
		font-size: 92px !important;
	}
	/* --- H1 --- */
h1,
.et_pb_text h1,
.et_pb_column h1,
.et_pb_section h1 {
  font-size: 48px;
  
}

/* --- H2 --- */
h2,
.et_pb_text h2,
.et_pb_column h2,
.et_pb_section h2 {
 font-size: 36px;
}

/* --- H3 --- */
h3,
.et_pb_text h3,
.et_pb_column h3,
.et_pb_section h3,
.h3{
  font-size: 28px;
}


/* --- H4 --- */
h4,
.et_pb_text h4,
.et_pb_column h4,
.et_pb_section h4 {
  font-size: 22px !important;
}

  /* --- H5 --- */
  h5,
  .et_pb_text h5,
  .et_pb_column h5,
  .et_pb_section h5 {
  font-size: 20px;
  }
  .btn--primary-post-icon-dark,
  .secondary--button-dark-theme{
  	width: 100%;
  	text-align: center;
  }

  .body-small, .et_pb_text.body-small{
    font-size:13px;
  }
}