/*
 * ================================================================
 *  FORMA STUDIO — forms.css
 *  HubSpot Free Embedded Form Styles
 *
 *  HOW TO USE
 *  ──────────
 *  1. Add  <link rel="stylesheet" href="forms.css">  to every
 *     page that has a HubSpot form (after main.css).
 *
 *  2. In your HubSpot embed snippet, add  css: ""  to strip
 *     HubSpot's default styles so this file takes full control:
 *
 *     hbspt.forms.create({
 *       portalId:  "YOUR_PORTAL_ID",
 *       formId:    "YOUR_FORM_ID",
 *       css:       "",            ← this line removes HS defaults
 *       cssClass:  "forma-form",  ← optional wrapper class
 *       target:    "#hs-form-wrap"
 *     });
 *
 *  3. Wrap the embed target in a div you control:
 *     <div id="hs-form-wrap" class="hs-form-wrap"></div>
 *
 *  TABLE OF CONTENTS
 *  ─────────────────
 *   1.  Tokens (mirror of main.css :root — no dependency needed)
 *   2.  Form Wrapper & Layout
 *   3.  Field Groups & Columns
 *   4.  Labels
 *   5.  Inputs  (text / email / tel / number / url / date)
 *   6.  Textarea
 *   7.  Select / Dropdown
 *   8.  Checkboxes & Radio Buttons
 *   9.  File Upload
 *  10.  GDPR / Legal Consent Block
 *  11.  Submit Button
 *  12.  Inline Error Messages
 *  13.  Success / Thank-You Message
 *  14.  Required Field Indicator
 *  15.  Multi-Step Form Progress Bar
 *  16.  Placeholder Styles (cross-browser)
 *  17.  Autofill Override (Chrome yellow kill)
 *  18.  Focus-Visible Accessibility
 *  19.  Responsive (≤768px)
 *  20.  Utility: .forma-form wrapper overrides
 * ================================================================
 */


/* ================================================================
   1. TOKENS
   Local copies so forms.css works standalone without main.css.
   If main.css is already loaded these are simply re-declared
   with identical values — no conflict.
   ================================================================ */
:root {
  --hs-bg:           #0D0D0D;
  --hs-bg-2:         #111111;
  --hs-bg-card:      #161616;
  --hs-bg-input:     #0D0D0D;
  --hs-accent:       #F5C842;
  --hs-accent-dim:   #c9a02e;
  --hs-text:         #EDEDED;
  --hs-muted:        #888888;
  --hs-border:       #222222;
  --hs-border-focus: #F5C842;
  --hs-error:        #f87171;
  --hs-error-bg:     rgba(248,113,113,.08);
  --hs-success:      #4ade80;
  --hs-success-bg:   rgba(74,222,128,.08);
  --hs-radius:       6px;
  --hs-font-head:    'Syne', sans-serif;
  --hs-font-body:    'DM Sans', sans-serif;
  --hs-transition:   0.25s ease;
}


/* ================================================================
   2. FORM WRAPPER & LAYOUT
   .hbspt-form      — HubSpot's outer wrapper div
   .hs-form         — the actual <form> element
   .hs-form-wrap    — YOUR wrapper div (optional but recommended)
   ================================================================ */

/* Your wrapper — use for scoping and spacing */
.hs-form-wrap,
#hs-form-wrap {
  width:      100%;
  max-width:  640px;
}

/* HubSpot outer container */
.hbspt-form {
  width: 100%;
}

/* The form element itself */
.hs-form {
  display:        flex;
  flex-direction: column;
  gap:            0;
  width:          100%;
  font-family:    var(--hs-font-body);
  font-size:      0.92rem;
  color:          var(--hs-text);
}

/* HubSpot wraps each field in .hs-form-field */
.hs-form-field {
  margin-bottom: 18px;
  width:         100%;
}

/* Remove default ul/li list styling HubSpot injects */
.hs-form ul,
.hs-form ol {
  list-style: none;
  margin:     0;
  padding:    0;
}

.hs-form li {
  margin:  0;
  padding: 0;
}


/* ================================================================
   3. FIELD GROUPS & COLUMNS
   HubSpot wraps multi-column rows in .form-columns-{n}
   ================================================================ */
.hs-form .form-columns-1,
.hs-form .form-columns-2,
.hs-form .form-columns-3 {
  display:   flex;
  flex-wrap: wrap;
  gap:       16px;
  width:     100%;
}

/* Each column within a row */
.hs-form .form-columns-1 .hs-form-field { flex: 1 1 100%; }
.hs-form .form-columns-2 .hs-form-field { flex: 1 1 calc(50% - 8px); min-width: 180px; }
.hs-form .form-columns-3 .hs-form-field { flex: 1 1 calc(33.33% - 11px); min-width: 140px; }

/* .input wrapper HubSpot puts around each actual input */
.hs-form .input {
  display: block;
  width:   100%;
  margin:  0;
}


/* ================================================================
   4. LABELS
   ================================================================ */
.hs-form label,
.hs-form legend {
  display:        block;
  font-family:    var(--hs-font-body);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--hs-muted);
  margin-bottom:  8px;
  line-height:    1.4;
}

/* Required asterisk — HubSpot wraps it in a <span> */
.hs-form label .hs-form-required,
.hs-form .hs-form-required {
  color:       var(--hs-accent);
  margin-left: 3px;
  font-style:  normal;
}


/* ================================================================
   5. TEXT INPUTS
   Covers: text, email, tel, number, url, search, date, password
   ================================================================ */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="url"],
.hs-form input[type="search"],
.hs-form input[type="date"],
.hs-form input[type="password"],
.hs-form .hs-input {
  width:            100%;
  padding:          13px 16px;
  background:       var(--hs-bg-input);
  border:           1.5px solid var(--hs-border);
  border-radius:    var(--hs-radius);
  font-family:      var(--hs-font-body);
  font-size:        0.92rem;
  font-weight:      400;
  color:            var(--hs-text);
  line-height:      1.5;
  outline:          none;
  appearance:       none;
  -webkit-appearance: none;
  transition:       border-color var(--hs-transition),
                    background   var(--hs-transition),
                    box-shadow   var(--hs-transition);
  box-sizing:       border-box;
}

.hs-form input[type="text"]:hover,
.hs-form input[type="email"]:hover,
.hs-form input[type="tel"]:hover,
.hs-form input[type="number"]:hover,
.hs-form input[type="url"]:hover,
.hs-form input[type="date"]:hover,
.hs-form input[type="password"]:hover,
.hs-form .hs-input:hover {
  border-color: rgba(245,200,66,.35);
}

.hs-form input[type="text"]:focus,
.hs-form input[type="email"]:focus,
.hs-form input[type="tel"]:focus,
.hs-form input[type="number"]:focus,
.hs-form input[type="url"]:focus,
.hs-form input[type="date"]:focus,
.hs-form input[type="password"]:focus,
.hs-form .hs-input:focus {
  border-color: var(--hs-border-focus);
  box-shadow:   0 0 0 3px rgba(245,200,66,.10);
}

/* Error state on inputs */
.hs-form input.error,
.hs-form input.invalid,
.hs-form .hs-input.error,
.hs-form .hs-input.invalid {
  border-color: var(--hs-error) !important;
  background:   var(--hs-error-bg);
}


/* ================================================================
   6. TEXTAREA
   ================================================================ */
.hs-form textarea,
.hs-form textarea.hs-input {
  width:         100%;
  min-height:    130px;
  padding:       13px 16px;
  background:    var(--hs-bg-input);
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius);
  font-family:   var(--hs-font-body);
  font-size:     0.92rem;
  color:         var(--hs-text);
  line-height:   1.65;
  outline:       none;
  resize:        vertical;
  appearance:    none;
  transition:    border-color var(--hs-transition),
                 box-shadow   var(--hs-transition);
  box-sizing:    border-box;
}

.hs-form textarea:hover { border-color: rgba(245,200,66,.35); }
.hs-form textarea:focus {
  border-color: var(--hs-border-focus);
  box-shadow:   0 0 0 3px rgba(245,200,66,.10);
}

.hs-form textarea.error,
.hs-form textarea.invalid {
  border-color: var(--hs-error) !important;
  background:   var(--hs-error-bg);
}


/* ================================================================
   7. SELECT / DROPDOWN
   ================================================================ */
.hs-form select,
.hs-form select.hs-input {
  width:            100%;
  padding:          13px 40px 13px 16px;
  background-color: var(--hs-bg-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 16px center;
  border:           1.5px solid var(--hs-border);
  border-radius:    var(--hs-radius);
  font-family:      var(--hs-font-body);
  font-size:        0.92rem;
  color:            var(--hs-text);
  line-height:      1.5;
  outline:          none;
  appearance:       none;
  -webkit-appearance: none;
  cursor:           pointer;
  transition:       border-color var(--hs-transition),
                    box-shadow   var(--hs-transition);
  box-sizing:       border-box;
}

.hs-form select:hover { border-color: rgba(245,200,66,.35); }
.hs-form select:focus {
  border-color: var(--hs-border-focus);
  box-shadow:   0 0 0 3px rgba(245,200,66,.10);
}

/* Select options inherit dark background */
.hs-form select option {
  background: var(--hs-bg-card);
  color:      var(--hs-text);
}

/* Error state */
.hs-form select.error,
.hs-form select.invalid {
  border-color: var(--hs-error) !important;
  background-color: var(--hs-error-bg);
}


/* ================================================================
   8. CHECKBOXES & RADIO BUTTONS
   HubSpot structure:
     .inputs-list  (ul)
       li
         label
           input[type=checkbox / radio]
           span  (the label text)
   ================================================================ */

/* The list container */
.hs-form .inputs-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     8px;
}

/* Individual option row */
.hs-form .inputs-list li {
  display: flex;
  align-items: flex-start;
}

/* The label wrapping each option */
.hs-form .inputs-list label,
.hs-form .hs-form-booleancheckbox label,
.hs-form .hs-form-checkbox label,
.hs-form .hs-form-radio label {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  font-size:   0.88rem;
  font-weight: 400;
  color:       var(--hs-muted);
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

/* Hide the native input */
.hs-form .inputs-list input[type="checkbox"],
.hs-form .inputs-list input[type="radio"],
.hs-form .hs-form-booleancheckbox input[type="checkbox"],
.hs-form .hs-form-checkbox input[type="checkbox"],
.hs-form .hs-form-radio input[type="radio"] {
  /* Keep in DOM for accessibility but size it */
  width:           18px;
  height:          18px;
  min-width:       18px;
  margin-top:      1px;
  flex-shrink:     0;
  cursor:          pointer;
  appearance:      none;
  -webkit-appearance: none;
  background:      var(--hs-bg-input);
  border:          1.5px solid var(--hs-border);
  border-radius:   3px;
  transition:      background var(--hs-transition),
                   border-color var(--hs-transition);
  position:        relative;
}

/* Radio gets a circle */
.hs-form .inputs-list input[type="radio"],
.hs-form .hs-form-radio input[type="radio"] {
  border-radius: 50%;
}

/* Hover state */
.hs-form .inputs-list input[type="checkbox"]:hover,
.hs-form .inputs-list input[type="radio"]:hover {
  border-color: var(--hs-accent);
}

/* Checked state — checkbox */
.hs-form .inputs-list input[type="checkbox"]:checked,
.hs-form .hs-form-booleancheckbox input[type="checkbox"]:checked,
.hs-form .hs-form-checkbox input[type="checkbox"]:checked {
  background:   var(--hs-accent);
  border-color: var(--hs-accent);
}
.hs-form .inputs-list input[type="checkbox"]:checked::after,
.hs-form .hs-form-booleancheckbox input[type="checkbox"]:checked::after {
  content:     '';
  position:    absolute;
  top:         2px;
  left:        5px;
  width:       5px;
  height:      9px;
  border:      2px solid #000;
  border-top:  none;
  border-left: none;
  transform:   rotate(45deg);
}

/* Checked state — radio */
.hs-form .inputs-list input[type="radio"]:checked,
.hs-form .hs-form-radio input[type="radio"]:checked {
  background:   var(--hs-accent);
  border-color: var(--hs-accent);
  box-shadow:   inset 0 0 0 3px var(--hs-bg-input);
}

/* Label text span */
.hs-form .inputs-list label span,
.hs-form .hs-form-booleancheckbox label span {
  color:       var(--hs-muted);
  font-size:   0.86rem;
  line-height: 1.6;
}

/* Links inside consent labels */
.hs-form .inputs-list label span a,
.hs-form .hs-form-booleancheckbox label span a {
  color:                   var(--hs-accent);
  text-decoration:         underline;
  text-underline-offset:   3px;
  transition:              color var(--hs-transition);
}
.hs-form .inputs-list label span a:hover { color: #fff; }


/* ================================================================
   9. FILE UPLOAD
   ================================================================ */
.hs-form input[type="file"] {
  width:         100%;
  padding:       10px 16px;
  background:    var(--hs-bg-input);
  border:        1.5px dashed var(--hs-border);
  border-radius: var(--hs-radius);
  font-family:   var(--hs-font-body);
  font-size:     0.88rem;
  color:         var(--hs-muted);
  cursor:        pointer;
  transition:    border-color var(--hs-transition);
  box-sizing:    border-box;
}
.hs-form input[type="file"]:hover { border-color: var(--hs-accent); }


/* ================================================================
   10. GDPR / LEGAL CONSENT BLOCK
   HubSpot wraps the GDPR section in .legal-consent-container
   ================================================================ */
.hs-form .legal-consent-container {
  padding:        20px;
  background:     rgba(255,255,255,.03);
  border:         1px solid var(--hs-border);
  border-radius:  var(--hs-radius);
  margin-bottom:  20px;
}

.hs-form .legal-consent-container p,
.hs-form .legal-consent-container .hs-richtext p {
  font-size:      0.82rem;
  color:          var(--hs-muted);
  line-height:    1.65;
  margin-bottom:  12px;
}
.hs-form .legal-consent-container p:last-child { margin-bottom: 0; }

.hs-form .legal-consent-container a {
  color:                 var(--hs-accent);
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.hs-form .legal-consent-container a:hover { color: #fff; }

/* Consent checkbox row */
.hs-form .legal-consent-container .hs-form-booleancheckbox {
  margin-top: 12px;
}


/* ================================================================
   11. SUBMIT BUTTON
   HubSpot puts the button inside .hs-submit > .actions
   The actual element can be input[type=submit] or button
   ================================================================ */
.hs-form .hs-submit { margin-top: 8px; }

.hs-form .hs-submit .actions {
  display: flex;
  gap:     12px;
}

.hs-form .hs-button,
.hs-form input[type="submit"],
.hs-form button[type="submit"],
.hs-form .hs-submit .hs-button.primary {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            10px;
  width:          100%;
  padding:        15px 30px;
  background:     var(--hs-accent);
  color:          #000;
  font-family:    var(--hs-font-body);
  font-size:      0.92rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border:         none;
  border-radius:  var(--hs-radius);
  cursor:         pointer;
  line-height:    1;
  transition:     background   var(--hs-transition),
                  transform    0.2s ease,
                  box-shadow   var(--hs-transition);
  -webkit-appearance: none;
  appearance:     none;
}

.hs-form .hs-button:hover,
.hs-form input[type="submit"]:hover,
.hs-form button[type="submit"]:hover {
  background:  var(--hs-accent-dim);
  transform:   translateY(-2px);
  box-shadow:  0 8px 24px rgba(245,200,66,.2);
}

.hs-form .hs-button:active,
.hs-form input[type="submit"]:active {
  transform:  translateY(0);
  box-shadow: none;
}

.hs-form .hs-button:disabled,
.hs-form input[type="submit"]:disabled {
  opacity:  0.5;
  cursor:   not-allowed;
  transform: none;
}


/* ================================================================
   12. INLINE ERROR MESSAGES
   .hs-error-msgs   — the ul wrapping error messages
   .hs-error-msg    — individual error label
   .hs-main-font-element — HubSpot's error label class
   ================================================================ */

/* Error message list */
.hs-form .hs-error-msgs {
  margin-top: 6px;
}

/* Individual error item */
.hs-form .hs-error-msgs li { margin: 0; padding: 0; }

/* The error label text */
.hs-form .hs-error-msgs label,
.hs-form .hs-error-msg,
.hs-form .hs-error-msgs .hs-error-msg {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      0.78rem;
  font-weight:    500;
  color:          var(--hs-error);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom:  0;
  line-height:    1.4;
}

/* Add a small warning icon before error text */
.hs-form .hs-error-msg::before,
.hs-form .hs-error-msgs label::before {
  content:     '!';
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  width:       16px;
  height:      16px;
  min-width:   16px;
  background:  var(--hs-error);
  color:       #000;
  font-size:   0.65rem;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Global form-level error (shown above submit) */
.hs-form .hs_error_rollup .hs-error-msgs {
  padding:        12px 16px;
  background:     var(--hs-error-bg);
  border:         1px solid rgba(248,113,113,.25);
  border-radius:  var(--hs-radius);
  margin-bottom:  16px;
}

.hs-form .hs_error_rollup .hs-error-msg::before { display: none; }


/* ================================================================
   13. SUCCESS / THANK-YOU MESSAGE
   After submission HubSpot injects .submitted-message
   ================================================================ */
.hbspt-form .submitted-message,
.hs-form .submitted-message {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        48px 32px;
  background:     var(--hs-bg-card);
  border:         1px solid rgba(74,222,128,.25);
  border-radius:  var(--hs-radius);
  gap:            16px;
}

.hbspt-form .submitted-message p,
.hs-form .submitted-message p {
  font-family:   var(--hs-font-body);
  font-size:     1rem;
  color:         var(--hs-text);
  line-height:   1.75;
  margin-bottom: 0;
}

.hbspt-form .submitted-message h2,
.hbspt-form .submitted-message h3,
.hs-form .submitted-message h2,
.hs-form .submitted-message h3 {
  font-family:    var(--hs-font-head);
  font-size:      1.8rem;
  font-weight:    800;
  color:          var(--hs-accent);
  letter-spacing: -.01em;
  margin-bottom:  0;
}

/* Success icon injected before text — add via CSS */
.hbspt-form .submitted-message::before {
  content:         '✓';
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  background:      rgba(74,222,128,.12);
  border:          1.5px solid var(--hs-success);
  border-radius:   50%;
  color:           var(--hs-success);
  font-size:       1.4rem;
  font-weight:     700;
  margin-bottom:   8px;
}


/* ================================================================
   14. REQUIRED FIELD INDICATOR  (*)
   ================================================================ */
.hs-form .hs-form-required {
  color:       var(--hs-accent);
  font-weight: 700;
}

/* Optional "required fields" note HubSpot adds at form bottom */
.hs-form .hs-richtext.hs-main-font-element,
.hs-form .hs-richtext {
  font-size:     0.78rem;
  color:         var(--hs-muted);
  line-height:   1.5;
  margin-top:    4px;
  margin-bottom: 16px;
}

.hs-form .hs-richtext a {
  color: var(--hs-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ================================================================
   15. MULTI-STEP FORM PROGRESS BAR
   .hs-progressbar-wrapper  — outer track
   .hs-progressbar          — filled portion
   (Free plan has limited multi-step support but styles still apply)
   ================================================================ */
.hs-form .hs-progressbar-wrapper {
  width:         100%;
  height:        4px;
  background:    var(--hs-border);
  border-radius: 100px;
  margin-bottom: 32px;
  overflow:      hidden;
}

.hs-form .hs-progressbar {
  height:        100%;
  background:    var(--hs-accent);
  border-radius: 100px;
  transition:    width 0.4s ease;
}

/* Step counter text */
.hs-form .hs-form-progress-step-container {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   8px;
  font-size:       0.78rem;
  color:           var(--hs-muted);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
}

/* Previous / Next buttons (multi-step) */
.hs-form .hs-button.secondary,
.hs-form input[type="button"].secondary {
  background:     transparent;
  color:          var(--hs-muted);
  border:         1.5px solid var(--hs-border);
  width:          auto;
  padding:        12px 24px;
  font-size:      0.88rem;
  font-weight:    600;
  transition:     border-color var(--hs-transition), color var(--hs-transition);
}
.hs-form .hs-button.secondary:hover { border-color: var(--hs-accent); color: var(--hs-accent); }


/* ================================================================
   16. PLACEHOLDER STYLES  (cross-browser)
   ================================================================ */
.hs-form input::placeholder,
.hs-form textarea::placeholder {
  color:   rgba(255,255,255,.25);
  opacity: 1;
}
.hs-form input::-webkit-input-placeholder,
.hs-form textarea::-webkit-input-placeholder { color: rgba(255,255,255,.25); }
.hs-form input::-moz-placeholder,
.hs-form textarea::-moz-placeholder           { color: rgba(255,255,255,.25); opacity: 1; }
.hs-form input:-ms-input-placeholder,
.hs-form textarea:-ms-input-placeholder       { color: rgba(255,255,255,.25); }


/* ================================================================
   17. AUTOFILL OVERRIDE
   Chrome/Edge apply a yellow background on autocomplete.
   This forces it to match our dark theme.
   ================================================================ */
.hs-form input:-webkit-autofill,
.hs-form input:-webkit-autofill:hover,
.hs-form input:-webkit-autofill:focus,
.hs-form input:-webkit-autofill:active,
.hs-form textarea:-webkit-autofill,
.hs-form select:-webkit-autofill {
  -webkit-text-fill-color:  var(--hs-text) !important;
  -webkit-box-shadow:       0 0 0 1000px var(--hs-bg-input) inset !important;
  box-shadow:               0 0 0 1000px var(--hs-bg-input) inset !important;
  border-color:             var(--hs-border) !important;
  caret-color:              var(--hs-accent);
  transition:               background-color 9999s ease-in-out 0s;
}


/* ================================================================
   18. FOCUS-VISIBLE ACCESSIBILITY
   Keyboard focus gets a visible outline instead of the default.
   ================================================================ */
.hs-form input:focus-visible,
.hs-form textarea:focus-visible,
.hs-form select:focus-visible,
.hs-form button:focus-visible,
.hs-form .hs-button:focus-visible {
  outline:        2px solid var(--hs-accent);
  outline-offset: 2px;
  box-shadow:     0 0 0 4px rgba(245,200,66,.12);
}


/* ================================================================
   19. RESPONSIVE  (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* Stack two-column fields to single column */
  .hs-form .form-columns-2 .hs-form-field,
  .hs-form .form-columns-3 .hs-form-field {
    flex: 1 1 100%;
  }

  /* Make submit button full width already (already is, but reinforce) */
  .hs-form .hs-button,
  .hs-form input[type="submit"] {
    width: 100%;
  }

  /* Slightly reduce input padding on small screens */
  .hs-form input[type="text"],
  .hs-form input[type="email"],
  .hs-form input[type="tel"],
  .hs-form input[type="number"],
  .hs-form input[type="url"],
  .hs-form input[type="date"],
  .hs-form input[type="password"],
  .hs-form .hs-input,
  .hs-form textarea,
  .hs-form select {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}


/* ================================================================
   20. UTILITY: .forma-form WRAPPER OVERRIDES
   When you add  cssClass: "forma-form"  to the embed code,
   these rules target ONLY that form for extra specificity.
   Useful if you have multiple HubSpot forms with different styles.
   ================================================================ */

/* Full-width submit on forma-form */
.forma-form .hs-form .hs-submit { width: 100%; }
.forma-form .hs-form .hs-submit .actions { flex-direction: column; }

/* Inside the contact page split layout — right pane form */
.ch-right .hbspt-form,
.ch-right .hs-form-wrap { max-width: 100%; }

/* Inside the CTA banner — centred layout */
#cta-banner .hbspt-form,
#cta-banner .hs-form-wrap {
  max-width: 640px;
  margin:    0 auto;
}

/* CTA banner form fields & button get inverted colours */
#cta-banner .hs-form input[type="text"],
#cta-banner .hs-form input[type="email"],
#cta-banner .hs-form .hs-input {
  background:   rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.2);
  color:        #000;
}
#cta-banner .hs-form input::placeholder { color: rgba(0,0,0,.45); }
#cta-banner .hs-form input:focus,
#cta-banner .hs-form .hs-input:focus  {
  border-color: rgba(0,0,0,.5);
  box-shadow:   none;
}
#cta-banner .hs-form label { color: rgba(0,0,0,.6); }
#cta-banner .hs-form .hs-button,
#cta-banner .hs-form input[type="submit"] {
  background: #000;
  color:      var(--hs-accent);
}
#cta-banner .hs-form .hs-button:hover,
#cta-banner .hs-form input[type="submit"]:hover {
  background: #1a1a1a;
}


/*
 * ================================================================
 *  QUICK REFERENCE — HubSpot class map
 *
 *  Wrapper        .hbspt-form
 *  Form           .hs-form
 *  Field wrapper  .hs-form-field
 *  Row (1 col)    .form-columns-1
 *  Row (2 col)    .form-columns-2
 *  Row (3 col)    .form-columns-3
 *  Input wrapper  .input
 *  Label          label / legend
 *  Required *     .hs-form-required
 *  Text input     .hs-input  /  input[type=*]
 *  Select         .hs-input  /  select
 *  Textarea       .hs-input  /  textarea
 *  Checkbox list  .inputs-list  /  .hs-form-checkbox
 *  Radio list     .inputs-list  /  .hs-form-radio
 *  Bool checkbox  .hs-form-booleancheckbox
 *  Submit wrap    .hs-submit > .actions
 *  Submit btn     .hs-button.primary  /  input[type=submit]
 *  Error list     .hs-error-msgs  (ul)
 *  Error item     .hs-error-msg  (label inside li)
 *  Global error   .hs_error_rollup
 *  GDPR block     .legal-consent-container
 *  Rich text      .hs-richtext
 *  Progress bar   .hs-progressbar-wrapper > .hs-progressbar
 *  Thank-you      .submitted-message
 *  Field type     .hs-fieldtype-text  /  -email  /  -select  etc.
 * ================================================================
 */