  
    /* ============================================================
   SQUARESPACE 7.1 — QUIRK'S EVENT CAPTURE PAGE
   ============================================================
   
   PAGE SETUP (do this first):
   
   1. Create a new BLANK page.
   2. In Page Settings → General, set the URL slug to /connect or /quirks.
   3. In Page Settings → Advanced → Page Header Code Injection, paste:
      
      
   
   4. Add blocks to the page in this order:
      a. IMAGE BLOCK — Upload your Quirk's Event transparent PNG. 
         Set to "Inline" display, center-aligned.
      b. CODE BLOCK — Paste the HTML from the section below.
      c. FORM BLOCK — Add fields: Name (required), Email (required), 
         Company (not required). Set the button text to "Send It".
         Under the form block's Storage tab, turn on email notifications 
         to your address. Submissions also appear under 
         Marketing → Form Submissions in your Squarespace dashboard.
   
   5. Go to Design → Custom CSS and paste EVERYTHING below this line.
   
   ============================================================ */
 
 
/* ── Page Background ── */
body,
.page-section,
.content-wrapper,
.fluid-engine {
  background-color: #F0EFEF !important;
}
 
 
/* ── Center & Constrain Content ── */
.page-section .content-wrapper {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 2rem 1.25rem !important;
}
 
 
/* ── Quirk's Logo (Image Block) ── */
.page-section .sqs-image-shape-container-element {
  max-width: 140px !important;
  margin: 0 auto !important;
  opacity: 0.7;
}
 
 
/* ── Code Block Reset ── */
.page-section .sqs-block-code {
  padding: 0 !important;
}
 
 
/* ── Identity Styles ── */
.quirks-identity {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
 
.quirks-identity h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1B1B1F;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
 
.quirks-identity .quirks-role {
  font-size: 0.85rem;
  font-weight: 400;
  color: #2A2A31;
  margin: 0 0 0.125rem 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
 
.quirks-identity .quirks-org {
  font-size: 0.85rem;
  font-weight: 500;
  color: #2A2A31;
  margin: 0;
}
 
.quirks-divider {
  width: 48px;
  height: 3px;
  background-color: #C00000;
  border: none;
  border-radius: 2px;
  margin: 1.25rem auto;
}
 
.quirks-cta {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  color: #2A2A31;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
}
 
 
/* ── Native Form Block Styling ── */
.page-section .form-wrapper {
  padding: 0.5rem 0 1.5rem !important;
}
 
.page-section .form-wrapper .field-list {
  padding: 0 !important;
}
 
.page-section .form-wrapper .form-item {
  margin-bottom: 0.75rem !important;
}
 
.page-section .form-wrapper .field-element,
.page-section .form-wrapper input[type="text"],
.page-section .form-wrapper input[type="email"] {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  font-size: 1rem !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1B1B1F !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}
 
.page-section .form-wrapper input:focus {
  border-color: #1B1B1F !important;
}
 
/* Hide default Squarespace form labels (placeholders handle it) */
.page-section .form-wrapper .title {
  display: none !important;
}
 
.page-section .form-wrapper .caption {
  display: none !important;
}
 
/* Submit Button */
.page-section .form-wrapper .form-button-wrapper {
  margin-top: 0.25rem !important;
  padding: 0 !important;
}
 
.page-section .form-wrapper .sqs-system-button,
.page-section .form-wrapper input[type="submit"],
.page-section .form-wrapper button[type="submit"],
.page-section .form-wrapper .form-submit-button {
  width: 100% !important;
  padding: 0.95rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #F0EFEF !important;
  background-color: #1B1B1F !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  -webkit-appearance: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
 
.page-section .form-wrapper .sqs-system-button:hover,
.page-section .form-wrapper input[type="submit"]:hover,
.page-section .form-wrapper button[type="submit"]:hover,
.page-section .form-wrapper .form-submit-button:hover {
  background-color: #2A2A31 !important;
}
 
/* Success message after submit */
.page-section .form-wrapper .form-submission-text,
.page-section .form-wrapper .form-submission-html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #1B1B1F !important;
  text-align: center !important;
  padding: 1.5rem 0 !important;
}
 
 
/* ── Social Section ── */
.quirks-social-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  margin: 0 0 1rem 0;
  text-align: center;
}
 
.quirks-social-row {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
 
.quirks-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #d0d0d0;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
 
.quirks-social-btn:hover {
  border-color: #1B1B1F;
  transform: translateY(-2px);
}
 
.quirks-social-btn svg {
  width: 24px;
  height: 24px;
}
 
.quirks-footer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  color: #bbb;
  text-align: center;
  margin: 1.75rem 0 0 0;
}
 
 
/* ── Mobile Refinements ── */
@media (max-width: 600px) {
  .page-section .content-wrapper {
    padding: 1.5rem 1rem !important;
  }
}
 
@media (min-width: 600px) {
  .quirks-identity h1 {
    font-size: 2rem;
  }
 
  .quirks-social-btn {
    width: 56px;
    height: 56px;
  }
}
  
  