/* @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    */
/*****************************************/


/* Base safety: improve legibility */
#hero-title h1 {
  line-height: 1.12;
  letter-spacing: -0.01em;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

/* Mobile tuning */
@media (max-width: 480px) {
  #hero-title h1 {
    font-size: clamp(28px, 7.2vw, 36px);
    line-height: 1;
    max-width: 14ch;
    margin-bottom: 0.5rem;
  }
}

.submitted-message {
  background-color: #fff;
}

/* Links inside the thank-you message */
.submitted-message a,
.submitted-message a:link,
.submitted-message a:visited {
  color: var(--primary-color);         /* #006d68 */
  text-decoration: underline;          /* restore underline for clarity */
  -webkit-transition: color .2s ease;  /* keep it lightweight */
  transition: color .2s ease;
}

/* ===============================
   HubSpot Header + Logo Cleanup
   Purpose: Normalize logo size, fix sticky overlap, remove brittle heights
   Last updated: 2026-02-11
   =============================== */

/* --- Variables you can tweak --- */
:root {
  /* Header height you want the layout to reserve for sticky behavior */
  --header-height-desktop: 86px;
  --header-height-mobile: 64px;

  /* Max visual height of the logo image itself */
  --logo-max-height-desktop: 54px;
  --logo-max-height-mobile: 40px;
}

/* --- Base header container cleanup --- */
/* Remove hard-coded heights and let content define height */
header .wrapper {
  background-color: #fff !important; /* keep your white bg */
  height: auto !important;           /* undo fixed height */
  min-height: var(--header-height-desktop); /* give it room on desktop */
  display: flex;
  align-items: center;
}

/* Make sure the header sits above content when sticky */
header {
  position: sticky; /* if your theme already sets this, no harm */
  top: 0;
  z-index: 1000;
}

/* --- Logo sizing (targets both standard and transparent logo modules) --- */
/* The HubSpot Site Logo module usually renders an <img> with class .hs-image-widget */
#hs_cos_wrapper_site_logo img,
#hs_cos_wrapper_site_logo_transparent img,
header .hs-image-widget {
  max-height: var(--logo-max-height-desktop) !important;
  height: auto !important;
  width: auto !important;  /* keep aspect ratio, no forced width */
  display: block;
}

/* Optional: keep the logo from growing larger than the header area */
#hs_cos_wrapper_site_logo img,
#hs_cos_wrapper_site_logo_transparent img {
  object-fit: contain;
}

/* --- Prevent content from sliding under the sticky header --- */
/* Only apply outside the HubSpot visual editor so the editor chrome isn't affected */
body:not(.hs-editor-preview) main,
body:not(.hs-editor-preview) .content-wrapper,
body:not(.hs-editor-preview) .page-center:first-child {
  /* Use the header height variable so spacing matches the visual header */
  padding-top: var(--header-height-desktop);
}

/* --- Transparent header states (if your theme switches on scroll) --- */
/* If your theme adds a class like .is-stuck when scrolled, ensure a solid bg */
.is-stuck header,
header.is-stuck,
.header--stuck {
  background-color: #fff !important;
}

/* --- Responsive adjustments --- */
@media (max-width: 767px) {
  header .wrapper {
    min-height: var(--header-height-mobile);
  }

  #hs_cos_wrapper_site_logo img,
  #hs_cos_wrapper_site_logo_transparent img,
  header .hs-image-widget {
    max-height: var(--logo-max-height-mobile) !important;
  }

  body:not(.hs-editor-preview) main,
  body:not(.hs-editor-preview) .content-wrapper,
  body:not(.hs-editor-preview) .page-center:first-child {
    padding-top: var(--header-height-mobile);
  }
}

/* --- Housekeeping: trim excess padding the transparent logo wrapper might add --- */
#hs_cos_wrapper_site_logo_transparent {
  padding: 0 !important; /* replaces your earlier 0/0/0 overrides */
  
}
/* ===========================================
   HubSpot Header + Logo — Clean Consolidated CSS
   Purpose: Smaller logo, tighter header, no overlap
   Safe to paste at the very bottom of your stylesheet
   Last updated: 2026-02-11
   =========================================== */

/* -----------------------------
   1) Variables (easy tuning)
   ----------------------------- */
:root {
  /* Visual height you want to reserve for header */
  --header-height-desktop: 76px;  /* previously 88px */
  --header-height-mobile: 56px;   /* previously 64px */

  /* Max visible height of the logo image */
  --logo-max-height-desktop: 48px; /* previously 56px */
  --logo-max-height-mobile: 34px;  /* previously 40px */

  /* Internal padding inside the header wrapper */
  --header-padding-desktop: 8px;
  --header-padding-mobile: 6px;
}

/* -----------------------------
   2) Header container cleanup
   ----------------------------- */
/* Remove brittle fixed heights; keep layout flexible */
header .wrapper {
  background-color: #fff !important;
  height: auto !important;
  min-height: var(--header-height-desktop);
  display: flex;
  align-items: center;
  padding-top: var(--header-padding-desktop) !important;
  padding-bottom: var(--header-padding-desktop) !important;
}

/* Ensure the header sits on top when sticky */
header {
  position: sticky; /* safe even if already set by theme */
  top: 0;
  z-index: 1000;
}

/* If the theme adds a "stuck" class, make sure bg stays solid */
.is-stuck header,
header.is-stuck,
.header--stuck {
  background-color: #fff !important;
}

/* -----------------------------
   3) Logo sizing (standard + transparent modules)
   ----------------------------- */
/* Target the HubSpot Site Logo <img> reliably */
#hs_cos_wrapper_site_logo img,
#hs_cos_wrapper_site_logo_transparent img,
header img.hs-image-widget {
  /* Keep aspect ratio; cap the height */
  max-height: var(--logo-max-height-desktop) !important;
  height: auto !important;
  width: auto !important;

  /* Nudge a touch higher */
  margin-top: -2px;
  display: block;
}

/* Trim any padding the transparent wrapper might add */
#hs_cos_wrapper_site_logo_transparent {
  padding: 0 !important;
}

/* -----------------------------
   4) Prevent sticky overlap
   ----------------------------- */
/* Add top offset to the first content container(s).
   Scope away from the editor chrome so previews aren't distorted. */
body:not(.hs-editor-preview) main,
body:not(.hs-editor-preview) .content-wrapper,
body:not(.hs-editor-preview) .page-center:first-child {