/* Qtell page "contact". Generated by docs/website/convert-page.py from the page mockup;
   do not edit by hand. Markup: framework/pages/contact/. */
/* Base rules for this page's converted mockup sections, scoped to the wrapper so nothing leaks to the rest of the
   site. Three classes (0,3,0) beat the parent theme's element rules (.qtell-section h2, .page-content ul li,
   svg{width:100%}); the generated class rules below share that specificity and win by order. */
.qtell-pg-contact {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  --inv-cta-b: #3f5472;
  --inv-cta-c: #2f7280;
}
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact {
  font-family: var(--qtell-font-body);
  color: var(--qtell-purple-900);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  text-align: start;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(*, *::before, *::after) { box-sizing: border-box; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(ul, ol) { padding: 0; list-style: none; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(li) { margin: 0; padding-left: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact li::before, .qtell-pg-contact.qtell-pg-contact.qtell-pg-contact li::after { content: none; display: none; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(h1, h2, h3, h4) { font-family: inherit; font-weight: 700; line-height: normal; letter-spacing: inherit; text-transform: none; color: inherit; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(h1) { font-size: 2em; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(h2) { font-size: 1.5em; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(h3) { font-size: 1.17em; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(h4) { font-size: 1em; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact span { font-weight: inherit; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(svg) { max-width: none; }
/* the theme forces max-width: 100% on images; the mockup has none */
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(img) { max-width: none; }
/* The theme styles every <button> (padding, 30px radius, white text, teal background forced with !important). Back to
   the browser default; generated classes set what the mockup sets (backgrounds with !important so they beat the theme's). */
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact button { all: revert; background-color: buttonface !important; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact summary { list-style: none; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact summary::-webkit-details-marker { display: none; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact details[open] summary svg { transform: rotate(45deg); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(a) { color: var(--qtell-purple-700); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(a:hover) { color: var(--qtell-accent-ink); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact :where(:focus-visible) { outline: 3px solid var(--qtell-teal-700); outline-offset: 3px; }

.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s1 { position: relative; overflow: hidden; padding: clamp(60px,8.5vw,116px) 0 clamp(64px,8.5vw,112px); background: var(--qtell-white); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s2 { position: absolute; inset: 0; pointer-events: none; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s3 { position: absolute; width: 64vmax; height: 64vmax; left: -26vmax; top: -38vmax; border-radius: 50%; background: radial-gradient(closest-side,var(--qtell-purple-200),transparent); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s4 { position: absolute; width: 58vmax; height: 58vmax; right: -28vmax; top: -20vmax; border-radius: 50%; background: radial-gradient(closest-side,var(--qtell-blend-light),transparent); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s5 { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-wrap: wrap; gap: 48px clamp(40px,6vw,96px); align-items: flex-start; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s6 { flex: 1 1 420px; min-width: 0; max-width: 580px; padding-top: clamp(0px,2vw,24px); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s7 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qtell-accent-ink); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s8 { width: 8px; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s9 { height: 13px; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s10 { fill: var(--qtell-teal-600); }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s11 { margin-top: 22px; font-size: clamp(38px,5vw,64px); line-height: 1.04; letter-spacing: -.045em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s12 { margin-top: 26px; font-size: clamp(18px,1.6vw,20px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s13 { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; color: var(--qtell-accent-ink); text-decoration: none; text-underline-offset: 4px; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s14 { width: 20px; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s15 { height: 20px; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-s16 { flex: 1 1 420px; min-width: 0; max-width: 600px; padding: clamp(24px,3.4vw,40px); border-radius: 24px; background: var(--qtell-white); border: 1px solid var(--qtell-border-soft); box-shadow: 0 30px 60px -40px var(--qtell-shadow-color); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 18px; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact .ct-h1:hover { text-decoration: underline; color: var(--qtell-purple-700); }

/* The mockup's own animation / interaction / responsive rules */
/* HubSpot renders this form in an iframe, so the page's CSS cannot style the fields (that is done in HubSpot's form editor). The
   card from the mockup holds it; the iframe fills the card. */
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact #qtell-hs-form { grid-column: 1 / -1; min-width: 0; }
.qtell-pg-contact.qtell-pg-contact.qtell-pg-contact #qtell-hs-form iframe { display: block; width: 100%; border: 0; }