@charset "UTF-8";
/* =============================================================================
   Eaton Essentials — Global HubSpot Form Styling
   -----------------------------------------------------------------------------
   Aligns every HubSpot form on the site with Eaton Essentials branding:
   slate-teal primary, warm cream fields, squared corners, Merriweather +
   Poppins + DM Sans type system.

   SCOPING: every rule is scoped to `.hs-form` (the class HubSpot puts on every
   one of its forms). Native WordPress search forms, WooCommerce forms, etc. do
   NOT carry `.hs-form`, so they are never touched. Selectors use only generic
   HubSpot classes — no form-id selectors — so this works for any HubSpot form
   dropped anywhere on the site.

   Brand tokens (pulled from the live theme):
     Primary teal .......... #2e5363   (hover #223b46, dark #1c333d)
     Cream / warm fill ..... #fff7f2 / #ecdcd3
     Ink / body text ....... #241e1a / #413f3c
     Muted ................. #6e6e70
     Error ................. #b82105
     Headings .............. Merriweather, serif
     Body / inputs ......... Poppins, sans-serif
     Buttons ............... "DM Sans", uppercase, 700, 0.7px tracking, square
   ========================================================================== */

/* Make the brand fonts available wherever this form is embedded (incl. inside
   the HubSpot form iframe, which does not inherit the host page's fonts). */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Merriweather:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap");

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */
.hs-form {
  --eaton-primary: #2e5363;
  --eaton-primary-hover: #223b46;
  --eaton-primary-dark: #1c333d;
  --eaton-cream: #fff7f2;
  --eaton-beige: #ecdcd3;
  --eaton-ink: #241e1a;
  --eaton-text: #413f3c;
  --eaton-muted: #6e6e70;
  --eaton-field-bg: #fff7f2;
  --eaton-field-border: #e3d8d0;
  --eaton-error: #b82105;
  --eaton-radius: 0px; /* the brand uses squared corners throughout */
  --eaton-gutter: 20px;

  --eaton-font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --eaton-font-head: "Merriweather", Georgia, serif;
  --eaton-font-btn: "DM Sans", "Poppins", sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Form shell                                                                 */
/* -------------------------------------------------------------------------- */
.hs-form,
.hs-form .hs-input,
.hs-form label {
  font-family: var(--eaton-font-body);
  color: var(--eaton-text);
  box-sizing: border-box;
}

/* Give the form its own surface. Because this is a global style and a form may
   be dropped on a white, cream, or teal section, a self-contained card keeps
   dark text legible and the teal CTA contrasting on ANY background — and mirrors
   how the site sets white content cards on colored sections. */
.hs-form {
  width: 100%;
  margin: 0 auto;
  line-height: 1.5;
  background-color: #ffffff;
  border: 1px solid var(--eaton-field-border);
  border-radius: var(--eaton-radius);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: 0 2px 22px rgba(36, 30, 26, 0.08);
}

.hs-form *,
.hs-form *::before,
.hs-form *::after {
  box-sizing: border-box;
}

/* Reset HubSpot's fieldset chrome */
.hs-form fieldset {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* -------------------------------------------------------------------------- */
/* Rich-text headings / intro copy inside the form                            */
/* -------------------------------------------------------------------------- */
.hs-form .hs-richtext {
  margin: 0 0 22px;
  color: var(--eaton-text);
}

.hs-form .hs-richtext h1,
.hs-form .hs-richtext h2,
.hs-form .hs-richtext h3 {
  font-family: var(--eaton-font-head);
  font-weight: 500;
  color: var(--eaton-ink);
  line-height: 1.2;
  margin: 0 0 8px;
}

.hs-form .hs-richtext h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
}
.hs-form .hs-richtext h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.7rem);
}
.hs-form .hs-richtext p {
  margin: 0 0 8px;
  color: var(--eaton-muted);
}

/* -------------------------------------------------------------------------- */
/* Layout: column groups + per-field spacing                                  */
/* -------------------------------------------------------------------------- */
.hs-form .hs-form-field {
  margin-bottom: 18px;
  width: 100%;
  float: none;
  min-width: 0; /* let paired fields shrink instead of wrapping onto their own row */
}

/* Neutralise HubSpot's float/percentage column system in favour of flexbox */
.hs-form .form-columns-1,
.hs-form .form-columns-2,
.hs-form .form-columns-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--eaton-gutter);
  width: 100%;
}

.hs-form .form-columns-2 > .hs-form-field {
  flex: 1 1 calc(50% - var(--eaton-gutter));
}
.hs-form .form-columns-3 > .hs-form-field {
  flex: 1 1 calc(33.333% - var(--eaton-gutter));
}
.hs-form .form-columns-1 > .hs-form-field {
  flex: 1 1 100%;
}

/* HubSpot wraps each control in `.input`, often with an inline right margin */
.hs-form .hs-form-field > .input {
  margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Labels + helper text                                                       */
/* -------------------------------------------------------------------------- */
/* Most fields label themselves via placeholders, so a visible label (e.g. on a
   <select> like County) is the exception. Style it as a quiet uppercase
   micro-eyebrow so it reads as an intentional caption rather than heavy black
   text clashing with the placeholder-driven fields around it. */
.hs-form .hs-form-field > label {
  display: block;
  margin: 0 0 7px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--eaton-muted);
}

/* HubSpot renders empty <label><span></span></label> when placeholders are
   used; collapse those so they don't add phantom spacing. */
.hs-form .hs-form-field > label:empty,
.hs-form .hs-form-field > label > span:empty {
  display: none;
}

.hs-form .hs-form-required {
  color: var(--eaton-error);
  margin-left: 2px;
}

.hs-form .hs-field-desc {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--eaton-muted);
}

/* -------------------------------------------------------------------------- */
/* Inputs, selects, textareas                                                 */
/* -------------------------------------------------------------------------- */
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="password"],
.hs-form input[type="url"],
.hs-form input[type="date"],
.hs-form select.hs-input,
.hs-form textarea.hs-input {
  display: block;
  width: 100% !important;
  max-width: 100%;
  padding: 13px 15px;
  font-family: var(--eaton-font-body);
  font-size: 16px; /* >=16px keeps iOS from zooming on focus */
  line-height: 1.4;
  color: var(--eaton-ink);
  background-color: var(--eaton-field-bg) !important;
  border: 1px solid var(--eaton-field-border) !important;
  border-radius: var(--eaton-radius) !important;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.hs-form textarea.hs-input {
  min-height: 132px;
  resize: vertical;
}

/* Placeholders */
.hs-form .hs-input::placeholder {
  color: #9a938c;
  opacity: 1;
}
.hs-form .hs-input::-webkit-input-placeholder {
  color: #9a938c;
}

/* Hover */
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: #c9b9ad !important;
}

/* Focus — teal border + soft brand ring, on a clean white field */
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):focus,
.hs-form select.hs-input:focus,
.hs-form textarea.hs-input:focus {
  outline: none;
  background-color: #ffffff !important;
  border-color: var(--eaton-primary) !important;
  box-shadow: 0 0 0 3px rgba(46, 83, 99, 0.14);
}

/* Custom select chevron (teal) */
.hs-form select.hs-input {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232e5363' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

/* Before a county is chosen, HubSpot flags the <select> with .is-placeholder.
   Match the placeholder grey used on the other fields. !important is needed
   because the base input color rule above carries higher specificity. */
.hs-form select.hs-input.is-placeholder {
  color: #9a938c !important;
}

/* Keep the "Please Select" option itself grey, and real options in body ink. */
.hs-form select.hs-input option[value=""] {
  color: #9a938c;
}
.hs-form select.hs-input option:not([value=""]) {
  color: var(--eaton-ink);
}

/* -------------------------------------------------------------------------- */
/* Checkboxes & radios                                                        */
/* -------------------------------------------------------------------------- */
.hs-form .inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hs-form .inputs-list > li {
  margin: 0 0 10px;
}

.hs-form .hs-form-booleancheckbox-display,
.hs-form .hs-form-checkbox-display,
.hs-form .hs-form-radio-display {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--eaton-text);
  cursor: pointer;
}

.hs-form input[type="checkbox"],
.hs-form input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--eaton-primary);
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Submit button — mirrors the site's primary CTA                             */
/* -------------------------------------------------------------------------- */
.hs-form .hs-submit {
  margin-top: 6px;
}
.hs-form .hs-submit .actions {
  margin: 0;
  padding: 0;
}

.hs-form .hs-button,
.hs-form input[type="submit"].hs-button,
.hs-form input[type="submit"] {
  display: inline-block;
  width: auto;
  padding: 18px 40px;
  font-family: var(--eaton-font-btn) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #ffffff !important;
  background-color: var(--eaton-primary) !important;
  border: 2px solid var(--eaton-primary) !important;
  border-radius: var(--eaton-radius) !important;
  cursor: pointer;
  text-align: center;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.05s ease;
  -webkit-appearance: none;
  appearance: none;
}

.hs-form .hs-button:hover,
.hs-form input[type="submit"]:hover {
  background-color: var(--eaton-primary-hover) !important;
  border-color: var(--eaton-primary-hover) !important;
  color: #ffffff !important;
}

.hs-form .hs-button:focus-visible,
.hs-form input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 83, 99, 0.28);
}

.hs-form .hs-button:active,
.hs-form input[type="submit"]:active {
  transform: translateY(1px);
}

/* -------------------------------------------------------------------------- */
/* Validation states & messages                                              */
/* -------------------------------------------------------------------------- */
.hs-form .hs-form-field.invalid .hs-input,
.hs-form .hs-input.invalid.error,
.hs-form .hs-input.error {
  border-color: var(--eaton-error) !important;
  background-color: #fdf3f1 !important;
}

.hs-form .hs-form-field.invalid .hs-input:focus,
.hs-form .hs-input.error:focus {
  box-shadow: 0 0 0 3px rgba(184, 33, 5, 0.14);
}

.hs-form .hs-error-msgs,
.hs-form ul.hs-error-msgs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.hs-form .hs-error-msg,
.hs-form .hs-error-msgs label,
.hs-form .hs-main-font-element {
  color: var(--eaton-error);
  font-size: 0.8125rem;
}

/* The rich-text element shares .hs-main-font-element; keep its color neutral */
.hs-form .hs-richtext.hs-main-font-element {
  color: var(--eaton-text);
}

/* -------------------------------------------------------------------------- */
/* Inline success / submitted message                                         */
/* -------------------------------------------------------------------------- */
.hs-form__virality-link,
.submitted-message,
.hs-form .submitted-message {
  font-family: var(--eaton-font-body);
  color: var(--eaton-text);
}

/* -------------------------------------------------------------------------- */
/* Responsive — keep paired fields two-up on tablets/desktop; only stack the    */
/* column groups on small phones, where two inputs no longer fit side by side.  */
/* -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hs-form .form-columns-2,
  .hs-form .form-columns-3 {
    gap: 0;
  }
  .hs-form .form-columns-2 > .hs-form-field,
  .hs-form .form-columns-3 > .hs-form-field {
    flex: 1 1 100%;
  }
  .hs-form .hs-button,
  .hs-form input[type="submit"] {
    width: 100%;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hs-form .hs-input,
  .hs-form .hs-button,
  .hs-form input[type="submit"] {
    transition: none;
  }
}

.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]), .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="tel"], .hs-form input[type="number"], .hs-form input[type="password"], .hs-form input[type="url"], .hs-form input[type="date"], .hs-form select.hs-input, .hs-form textarea.hs-input { padding: 3px 15px;}