/* ─────────────────────────────────────────────────────────────
   CONTACT FORM V2 — prefix: cf-

   Structure only. Every editor-driven value arrives as a --cf-*
   custom property set by the scoped <style> block in module.html.
   Nothing here reads a module field, so this file declares real
   properties and owns the breakpoints outright.

   Font families are the one exception: brand-locked, never editable.
   Akzidenz-Grotesk for the heading and the street-address lines,
   Brandon Grotesque for everything else — including the embedded
   HubSpot form, whose own font-family is overridden node-by-node from
   module.html using the --cf-body-font token declared here.
   ───────────────────────────────────────────────────────────── */

.cf-wrap {
  --cf-heading-font: 'akzidenz-grotesk', 'Akzidenz-Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --cf-body-font: 'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;

/* Known dependency, deliberately left in place.

     This is the 100vw full-bleed trick, and 100vw includes the scrollbar
     gutter, so wherever a classic scrollbar exists the section is wider than
     the page by that gutter and pushes a horizontal scrollbar. That overflow is
     absorbed by the global `html, body { overflow-x: hidden }` set in
     header-menu.module.

     There is no module-local fix: `margin-inline: calc(50% - 50vw)` reaches the
     same edges and therefore overflows by exactly the same gutter, and clipping
     it from a wrapper this module owns would clip the bleed itself. The real
     fix is at theme level — switch the global guard to `overflow-x: clip` on
     `html` (clip does not create a scroll container, so nothing becomes
     unreachable), or give the page container a full-bleed grid so no module
     needs viewport units. */
  position: relative;
  left: 50%;
  width: 100vw;
  min-height: 760px;
  margin-left: -50vw;
  margin-top: var(--cf-margin-top, 0px);
  margin-bottom: var(--cf-margin-bottom, 0px);
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 12%, rgba(84, 62, 152, 0.18) 0, rgba(84, 62, 152, 0.06) 24%, transparent 48%),
    radial-gradient(circle at 76% 86%, rgba(20, 103, 101, 0.18) 0, rgba(20, 103, 101, 0.07) 28%, transparent 52%),
    var(--cf-bg, #0b0a12);
  color: var(--cf-heading, #f7f5ff);
  font-family: var(--cf-body-font);
  box-sizing: border-box;
}

.cf-wrap *,
.cf-wrap *::before,
.cf-wrap *::after {
  box-sizing: border-box;
}

/* ── Rich text normalisation ──
   HubSpot wraps field output in <p>/<h*>. Inline contexts collapse those
   and inherit type, so a stray <h2> in the badge or heading can't resize
   itself out of the layout. */
.cf-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.cf-rt > * + *::before {
  content: ' ';
}

/* Description keeps block flow — a rich text paragraph break is a real break. */
.cf-rt-block > * {
  margin: 0 0 1em;
  font: inherit;
  color: inherit;
}

.cf-rt-block > *:last-child {
  margin-bottom: 0;
}

/* ── Entrance animations ── */
@keyframes cf-slide-left {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cf-slide-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

.cf-copy {
  animation: cf-slide-left 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cf-form-card {
  animation: cf-slide-right 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@media (prefers-reduced-motion: reduce) {
  .cf-copy, .cf-form-card { animation: none; }
}

.cf-gradient {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(120px);
}

.cf-gradient--purple {
  top: -250px;
  left: 7%;
  width: 760px;
  height: 760px;
  background: rgba(90, 66, 178, 0.22);
}

.cf-gradient--teal {
  right: -120px;
  bottom: -260px;
  width: 820px;
  height: 640px;
  background: rgba(21, 106, 105, 0.18);
}

/* Fades into the section's own background rather than a hardcoded near-black,
   so recolouring the section can't leave a visible band along the bottom. */
.cf-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320px;
  background: linear-gradient(to bottom, transparent 0%, var(--cf-bg, #0b0a12) 100%);
  pointer-events: none;
}

/* ── Layout: copy left (flexible) + form card right (fixed width via --cf-card-w) ── */
.cf-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--cf-card-w, 550px));
  gap: 96px;
  align-items: start;
  width: min(1080px, calc(100% - var(--cf-pad-left, 24px) - var(--cf-pad-right, 24px)));
  min-height: 0;
  margin: 0 auto;
  padding: var(--cf-pad-top, 100px) 0 var(--cf-pad-bottom, 100px);
}

/* container-type so the heading can size itself against the copy column rather
   than the viewport — that is what keeps it to exactly two lines. See
   .cf-heading below. */
.cf-copy {
  padding-top: 0;
  align-self: start;
  container-type: inline-size;
}

/* A <span>, not a <p>: the badge holds rich text, and HubSpot's block wrapper
   nested inside a <p> would be closed by the parser.
   Block-level flex + fit-content, not inline-flex: an inline-level pill sits on
   a line box and inherits its strut, which added a few px of dead space under
   the badge. This hugs the label the same way with no line box at all. */
.cf-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 30px;
  margin: 0 0 28px;
  padding: 5px 18px;
  border: 1px solid rgba(177, 140, 255, 0.22);
  border-radius: 999px;
  background: rgba(177, 140, 255, 0.08);
  color: var(--cf-badge-color, #ada5c5);
  font-family: var(--cf-body-font);
  font-size: var(--cf-badge-size, 14px);
  /* Light (300). Brandon Grotesque ships a real Light face, so this is not
     synthesized. Locked — there is no weight field. */
  font-weight: 300;
/* 1.2, not 1.0: a unitless 1 clips descenders and leaves no room for the
     line box to grow when a visitor overrides text spacing. The 30px min-height
     still absorbs it at the default 12px. */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cf-heading {
  max-width: none;
  margin: 0 0 var(--cf-heading-gap, 26px);
  color: var(--cf-heading, #f7f5ff);
  font-family: var(--cf-heading-font);
  /* Driven by the Heading Font Size field, which bakes its own clamp(). Locked
     at 700: at 800+ Akzidenz-Grotesk drops out of the stack and the heading
     falls back to Helvetica/Arial. */
  font-size: var(--cf-heading-size, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

/* ── Exactly two lines ──
   The heading is always line 1 = No Highlight, line 2 = Highlight, and neither
   part is allowed to wrap into a third line.

   Holding that needs both halves of this rule: `nowrap` stops the wrap, and the
   cqi cap stops the nowrap from overflowing the copy column. 7.2cqi fits roughly
   26 characters of Akzidenz Bold across the column at any viewport, because cqi
   tracks the column's own width — so the Font Size field acts as a ceiling the
   heading takes when the column is wide enough for it, and gives up when it is
   not. Longer copy than that will still clip rather than wrap; shorten the line
   or lower the size field.

   Declared twice on purpose: the plain declaration is what renders where cqi is
   unsupported, since a min() containing an unknown unit invalidates the whole
   declaration and the heading would fall back to inherited body size. */
@supports (font-size: 1cqi) {
  .cf-heading {
    font-size: min(var(--cf-heading-size, 46px), 7.2cqi);
  }
}

/* A block-level line beats <br>: the two halves stay welded to their own line.
   Scoped to the class, not to every descendant <span>, so rich text markup
   inside a line stays inline. */
.cf-heading__line {
  display: block;
  white-space: nowrap;
}

/* Solid colour first. In forced-colors mode, in print, or anywhere
   background-clip: text is not honoured, the highlighted words must still be
   readable rather than vanishing into transparent fill. */
.cf-heading__accent {
  width: fit-content;
  color: var(--cf-heading-accent-s, #FFFFFF);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cf-heading__accent:not(.cf-heading__accent--solid) {
    background: linear-gradient(var(--cf-heading-accent-angle, 135deg), var(--cf-heading-accent-s, #FFFFFF) 0%, var(--cf-heading-accent-m, #A68DE2) 50%, var(--cf-heading-accent-e, #AA78E2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
/* No `color: transparent` here. -webkit-text-fill-color already paints the
       glyphs with the clipped gradient in every engine that honours
       background-clip: text, so zeroing `color` as well changes nothing on
       screen and only makes the computed colour transparent - which a contrast
       checker reads as a 1:1 ratio against any background. The solid colour
       above stays the computed value. */
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .cf-heading__accent {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.cf-description {
  max-width: min(var(--cf-copy-max, 440px), 100%);
  margin: 0 0 var(--cf-copy-gap, 38px);
  color: var(--cf-copy, #a9a5b7);
  font-family: var(--cf-body-font);
  font-size: var(--cf-copy-size, 19px);
  font-weight: 400;
  line-height: 1.58;
}

.cf-description a {
  color: var(--cf-copy-link, #c8b6ff);
  text-decoration: underline;
}

.cf-contact-list {
  display: grid;
  gap: 16px;
}

.cf-contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--cf-meta, #a7a1b5);
  font-family: var(--cf-body-font);
  font-size: 14px;
  line-height: 1.45;
}

.cf-contact-item a {
  color: inherit;
  text-decoration: none;
}

.cf-contact-item:not(.cf-contact-item--addresses) a {
  font-size: var(--cf-email-size, 17px);
  /* Light (300). Brandon Grotesque ships a real Light face, so this is not synthesized. */
  font-weight: 300;
  line-height: 1.35;
}

.cf-contact-item a:hover {
  color: var(--cf-heading, #f7f5ff);
}

.cf-contact-icon {
  display: inline-flex;
  flex: 0 0 15px;
  width: 15px;
  height: 18px;
  margin-top: 1px;
  color: #a65b7f;
}

.cf-contact-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cf-addresses {
  display: grid;
  gap: 12px;
}

.cf-address {
  margin: 0;
}

/* Address block typography. NOTE the field names are inverted relative to their
   editor labels: `item.city` is the *Street Address* (rendered in the <strong>)
   and `item.address` is *City, State, ZIP*. Street address takes Akzidenz;
   city/state/zip and country take Brandon. Both families are brand-locked. */
.cf-address > span {
  display: block;
  font-family: var(--cf-body-font);
  font-size: var(--cf-address-size, 17px);
  font-weight: 400;
  line-height: 1.35;
}

.cf-address strong {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  color: var(--cf-location-title, #c6c2d4);
  font-family: var(--cf-heading-font);
  font-size: var(--cf-location-title-size, 18px);
  /* 700, not 600: Akzidenz-Grotesk ships Roman and Bold only. */
  font-weight: 700;
  line-height: 1.25;
}

.cf-address-pin {
  display: inline-flex;
  flex: 0 0 15px;
  width: 15px;
  height: 18px;
  color: #a65b7f;
}

.cf-address-pin svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* ── Form card — width controlled by grid column (--cf-card-w), height by Style tab ── */
.cf-form-card {
  width: 100%;
  max-width: 100%;
  min-height: var(--cf-card-h, 0px);
  padding: 42px 38px 38px;
  border: 1px solid rgba(22, 21, 31, 0.08);
  border-radius: 24px;
  background: var(--cf-card, #f7fafc) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
  color: var(--cf-input-text, #000000) !important;
}

.cf-form-embed,
.cf-form-card form,
.cf-form-card .hs-form,
.cf-form-card .hbspt-form {
  width: 100% !important;
  max-width: none !important;
}

.cf-form-placeholder {
  margin: 0;
  padding: 32px 0;
  color: var(--cf-label, #8b879c);
  text-align: center;
}

.cf-form-card .hs-form {
  margin: 0;
  background: var(--cf-card, #f7fafc) !important;
  color: var(--cf-input-text, #000000) !important;
}

/* The embed injects its own font-family on nearly every node; module.html also
   forces this token inline from JS once the form renders. */
.cf-form-card .hs-form,
.cf-form-card .hs-form * {
  font-family: var(--cf-body-font) !important;
}

.cf-form-card .hs-form-field {
  margin: 0 0 20px;
}

.cf-form-card .hs-form-field>label,
.cf-form-card .hs-form-field>legend,
.cf-form-card .hs-label {
  display: block;
  margin: 0 0 9px;
  color: var(--cf-label, #000000) !important;
  font-size: 12px !important;
  /* Bold, locked — there is no weight field. */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cf-form-card input.hs-input,
.cf-form-card select.hs-input,
.cf-form-card textarea.hs-input {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--cf-input-border, #e7e5ee) !important;
  border-radius: 8px !important;
  background: var(--cf-input-bg, #f7f7f8) !important;
  color: var(--cf-input-text, #000000) !important;
  font-size: 14px !important;
/* 1.5 and no !important: a user stylesheet setting line-height: 1.5 could not
     beat `1.35 !important`, and a text-spacing override has to be able to win.

     Dropping the flag is safe here — the embed is created with `css: ''` and
     `cssRequired: ''` (see module.html), so HubSpot injects no stylesheet at
     all and there is nothing at author level to lose to. The only other
     declaration is the UA's `line-height: normal` on form controls, which any
     author rule outranks. The remaining !important flags on this rule are
     unrelated to text spacing and are left alone. */
  line-height: 1.5;
  box-shadow: none !important;
  appearance: none !important;
}

/* Placeholders carry the only hint for what each field wants (they are set from
   JS in module.html), so they have to be legible rather than the UA's default
   near-invisible grey. #5c5a66 on #f7f7f8 is 6.4:1. The visible <label> above
   each field remains the actual accessible name. */
.cf-form-card input.hs-input::placeholder,
.cf-form-card textarea.hs-input::placeholder {
  color: #5c5a66 !important;
  opacity: 1 !important;
}

.cf-form-card textarea.hs-input {
  min-height: 94px !important;
  resize: vertical;
}

/* Clears the fixed header when Tab scrolls a field into view. Applied to the
   embed's own controls, which this module does not render. */
.cf-form-card .hs-input,
.cf-form-card .hs-button,
.cf-form-card input[type="submit"] {
  scroll-margin-top: 96px;
}

/* Focus indicator.

   `outline: 0 !important` on the inputs above removes the UA ring, so a real
   2px ring with a 2px offset is stated here - on the #f7f7f8 field a border tint
   plus a 14%-opacity halo alone is close to invisible, and this is the only cue
   for where the keyboard is. The border tint and halo stay as reinforcement. */
.cf-form-card input.hs-input:focus,
.cf-form-card select.hs-input:focus,
.cf-form-card textarea.hs-input:focus {
  border-color: var(--cf-button-bg, #443187);
  box-shadow: 0 0 0 3px rgba(143, 109, 247, 0.14);
}

.cf-form-card input.hs-input:focus-visible,
.cf-form-card select.hs-input:focus-visible,
.cf-form-card textarea.hs-input:focus-visible,
.cf-form-card .hs-form-checkbox input:focus-visible,
.cf-form-card .hs-form-radio input:focus-visible,
.cf-form-card input[type='submit']:focus-visible,
.cf-form-card .hs-button:focus-visible {
  outline: 2px solid var(--cf-button-bg, #443187) !important;
  outline-offset: 2px !important;
}

/* The submit <input> is visually a transparent slab inside .cf-submit-wrap,
   which is the thing that actually looks like a button — so the ring has to be
   drawn on the wrap for it to land on the pill. */
.cf-form-card .cf-submit-wrap:has(input:focus-visible),
.cf-form-card .cf-submit-wrap:has(.hs-button:focus-visible) {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px var(--cf-button-bg, #443187);
}

/* The pill is the visible control and the 14px native input inside it is easy
   to miss, so the pill outlines itself too. The ring above is the guaranteed
   indicator; this is the one that reads at a glance. */
.cf-form-card .hs-form-checkbox label:has(input:focus-visible),
.cf-form-card .hs-form-radio label:has(input:focus-visible) {
  border-color: var(--cf-button-bg, #443187) !important;
  background: #eeeafa !important;
}

.cf-form-card .form-columns-2,
.cf-form-card .cf-pair-parent {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px 28px !important;
}

/* Fields are paired via grid auto-placement (cf-pair-item) rather than a
   wrapper element, so other children of a cf-pair-parent must span both
   columns to stay on their own row. */
.cf-form-card .cf-pair-parent > * {
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
}

.cf-form-card .form-columns-2 .hs-form-field,
.cf-form-card .cf-pair-parent > .cf-pair-item {
  grid-column: auto;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.cf-form-card .inputs-list {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cf-form-card .cf-service-grid .inputs-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
}

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

.cf-form-card .cf-service-grid .inputs-list li {
  position: relative;
}

/* ── Strip HubSpot's injected custom checkbox/radio indicator pseudo-elements ── */
.cf-form-card .hs-form-checkbox label::before,
.cf-form-card .hs-form-checkbox label::after,
.cf-form-card .hs-form-radio label::before,
.cf-form-card .hs-form-radio label::after,
.cf-form-card .hs-form-checkbox label span::before,
.cf-form-card .hs-form-checkbox label span::after,
.cf-form-card .hs-form-radio label span::before,
.cf-form-card .hs-form-radio label span::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: none !important;
}

/* ── Checkbox / radio pill cards (all options including Services) ── */
.cf-form-card .hs-form-checkbox label,
.cf-form-card .hs-form-radio label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 0 !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #e8e6f0 !important;
  border-radius: 999px !important;
  background: #f4f3f8 !important;
  color: #3a3755 !important;
  /* 14px, not 13.5: collapses a near-duplicate of the 14px input size. */
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  min-width: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.cf-form-card .hs-form-checkbox label span,
.cf-form-card .hs-form-radio label span {
  flex: 1 1 auto !important;
  color: inherit !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Show native inputs — HubSpot hides them via position:absolute/opacity:0 */
.cf-form-card .hs-form-checkbox input[type='checkbox'],
.cf-form-card .hs-form-radio input[type='radio'] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1.5px solid #c0bbd4 !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

/* Shape follows behaviour: circles for single-choice, squares for multi-choice,
   so the multi-select Services group does not read as "pick exactly one". */
.cf-form-card .hs-form-radio input[type='radio'] {
  border-radius: 50% !important;
}

.cf-form-card .hs-form-checkbox input[type='checkbox'] {
  border-radius: 3px !important;
}

/* Radio: filled dot, drawn with an inset white ring. */
.cf-form-card .hs-form-radio input[type='radio']:checked {
  background: var(--cf-button-bg, #443187) !important;
  border-color: var(--cf-button-bg, #443187) !important;
  box-shadow: inset 0 0 0 3px #ffffff !important;
}

/* Checkbox: filled box with a tick. The tick is an SVG background rather than a
   pseudo-element because HubSpot's own ::before/::after on these controls are
   stripped to `content: none !important` further up, and inputs are replaced
   elements that cannot host pseudo-elements reliably anyway. */
.cf-form-card .hs-form-checkbox input[type='checkbox']:checked {
  background-color: var(--cf-button-bg, #443187) !important;
  border-color: var(--cf-button-bg, #443187) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
}

/* Forced-colors mode drops author backgrounds, which would leave checked and
   unchecked states identical. */
@media (forced-colors: active) {
  .cf-form-card .hs-form-checkbox input[type='checkbox'],
  .cf-form-card .hs-form-radio input[type='radio'] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }
}

/* Hover */
.cf-form-card .hs-form-checkbox label:hover,
.cf-form-card .hs-form-radio label:hover {
  border-color: #9b8fd4 !important;
  background: #efecfa !important;
}

/* Selected */
.cf-form-card .hs-form-checkbox label:has(input:checked),
.cf-form-card .hs-form-radio label:has(input:checked) {
  border-color: var(--cf-button-bg, #443187) !important;
  background: #eeeafa !important;
}

/* Keep submit always visible */
.cf-form-card .hs-submit,
.cf-form-card .actions {
  display: block !important;
}

.cf-form-card .hs-submit {
  margin-top: 20px;
}

.cf-form-card .actions {
  position: relative;
  margin: 0;
  padding: 0;
}

.cf-form-card .actions::after {
  content: none !important;
  display: none !important;
}

.cf-form-card input[type='submit'],
.cf-form-card .hs-button {
  display: block !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 18px 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cf-button-bg, #443187) !important;
  color: var(--cf-button-text, #ffffff) !important;
  font-family: var(--cf-body-font) !important;
  font-size: var(--cf-button-size, 17px) !important;
  /* Bold, locked — there is no weight field. */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
}

.cf-form-card input[type='submit']::before,
.cf-form-card input[type='submit']::after,
.cf-form-card .hs-button::before,
.cf-form-card .hs-button::after {
  content: none !important;
  display: none !important;
}

/* ── Submit button wrap (acts as the pill) ── */
.cf-form-card .cf-submit-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 18px 30px;
  border-radius: 999px;
  background: var(--cf-button-bg, #443187);
  box-sizing: border-box;
  transition: filter 0.2s ease;
}

/* Derived from the chosen button colour rather than a second hardcoded purple,
   so recolouring the button keeps a matching hover state. */
.cf-form-card .cf-submit-wrap:hover {
  filter: brightness(1.14);
}

.cf-form-card .cf-submit-wrap input[type='submit'],
.cf-form-card .cf-submit-wrap .hs-button {
  width: auto !important;
  min-height: auto !important;
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cf-form-card .cf-submit-icon {
  position: static;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--cf-button-text, #ffffff);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.cf-form-card .cf-submit-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cf-form-card .cf-submit-wrap:hover .cf-submit-icon {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .cf-form-card .cf-submit-wrap,
  .cf-form-card .cf-submit-icon {
    transition: none;
  }

  .cf-form-card .cf-submit-wrap:hover .cf-submit-icon {
    transform: none;
  }
}

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

.cf-form-card .hs-error-msg,
.cf-form-card .hs-error-msgs label {
  color: #c2415b;
  font-size: 12px;
  line-height: 1.35;
  text-transform: none;
}

.cf-form-card .submitted-message {
  color: var(--cf-input-text, #000000);
  /* 17px matches the description/button size rather than adding a 16px near-duplicate. */
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
}

.cf-form-card .legal-consent-container,
.cf-form-card .legal-consent-container p,
.cf-form-card .legal-consent-container span,
.cf-form-card .hs-richtext,
.cf-form-card .hs-richtext p,
.cf-form-card .hs-richtext span,
.cf-form-card .hs-form-booleancheckbox label,
.cf-form-card .hs-form-booleancheckbox label span,
.cf-form-card .hs-fieldtype-booleancheckbox label,
.cf-form-card .hs-fieldtype-booleancheckbox label span,
.cf-form-card .legal-consent-container label,
.cf-form-card .legal-consent-container label span {
  color: #444444 !important;
  /* 12px, not 11: 11px was below the module's smallest readable size and
     matched no other style here. */
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.cf-form-card .legal-consent-container,
.cf-form-card .hs-richtext {
  margin: 10px 0 0 !important;
}

.cf-form-card .legal-consent-container p,
.cf-form-card .hs-richtext p {
  margin: 0 !important;
}

/* ─────────────────────────────────────────
   TABLET  561px – 900px  →  single column, form below copy

   Type scales via the clamp() baked into each --cf-*-size, so no font size is
   redeclared until mobile.
───────────────────────────────────────── */
@media (max-width: 900px) {
  .cf-wrap {
    min-height: 0;
  }

  .cf-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    width: min(100%, calc(100% - 40px));
    padding-top: min(var(--cf-pad-top, 100px), 76px);
    padding-bottom: min(var(--cf-pad-bottom, 100px), 68px);
  }

  .cf-form-card {
    max-width: 100%;
    padding: 32px 24px 28px;
  }

  .cf-form-card .form-columns-2,
  .cf-form-card .cf-pair-parent {
    gap: 20px !important;
  }
}

/* ─────────────────────────────────────────
   MOBILE  560px and below — single column, its own type curve
───────────────────────────────────────── */
@media (max-width: 560px) {
  .cf-wrap {
    min-height: 0;
  }

  .cf-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
    padding: min(var(--cf-pad-top, 100px), 60px) max(var(--cf-pad-left, 24px), 20px) min(var(--cf-pad-bottom, 100px), 52px) max(var(--cf-pad-right, 24px), 20px);
  }

  .cf-heading {
    font-size: var(--cf-heading-size-m, 34px);
  }

  /* Same two-line contract as desktop, against the mobile curve. */
  @supports (font-size: 1cqi) {
    .cf-heading {
      font-size: min(var(--cf-heading-size-m, 34px), 7.2cqi);
    }
  }

  .cf-description {
    font-size: var(--cf-copy-size-m, 15px);
  }

  .cf-form-card {
    max-width: 100%;
    min-height: 0;
    padding: 26px 18px;
    border-radius: 16px;
  }

  .cf-form-card .form-columns-2,
  .cf-form-card .cf-pair-parent,
  .cf-form-card .cf-service-grid .inputs-list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .cf-form-card .hs-form-field {
    margin-bottom: 14px;
  }

  .cf-form-card input.hs-input,
  .cf-form-card select.hs-input,
  .cf-form-card textarea.hs-input {
    font-size: 15px !important;
  }

  .cf-form-card .legal-consent-container,
  .cf-form-card .legal-consent-container p,
  .cf-form-card .legal-consent-container span,
  .cf-form-card .hs-richtext,
  .cf-form-card .hs-richtext p,
  .cf-form-card .hs-richtext span {
    font-size: 15px !important;
  }
}