/* -----------------------------  helpers  ----------------------------- */

.min-h-screen { min-height: 100vh; }

/* Gradient helpers for the pink/purple blob */
.bg-gradient-to-tr {
  background-image: linear-gradient(
    45deg,
    var(--grad-from, #ff80b5) 0%,
    var(--grad-to,   #9089fc) 100%
  );
}
.from-\[\#ff80b5\] { --grad-from: #ff80b5; }
.to-\[\#9089fc\]   { --grad-to:   #9089fc; }

/* ------------------  hero styling + tighter horizontal gradient + grid  ------------------ */

/* ORIGINAL LOOK: Tailwind bg-gradient-to-br from-blue-200 via-blue-100 to-teal-200 */
.contact-hero{
  background:
    linear-gradient(135deg, /* to bottom-right */
      #C3DDFD 0%,   /* blue-200 */
      #E1EFFE 45%,  /* blue-100 */
      #81E6D9 100%  /* teal-200 */
    ) !important;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Hero spacing: smaller, fluid, consistent */
.contact-hero{
  /* keep your gradient as-is */
  padding-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(2rem, 6vh, 3rem);
}

/* keep the form block close to the headline */
.contact-hero .form-wrap{ margin-top: 1.25rem; } /* ~mt-5 */
@media (min-width: 640px){
  .contact-hero .form-wrap{ margin-top: 1.5rem; } /* ~mt-6 */
}
.contact-hero h1{ margin-top: 0; }

/* Remove the old gradient-based grid to avoid double layers */
.contact-hero::before { content: none !important; }

/* SVG grid overlay sits ABOVE fog, BELOW content */
.hero-grid{
  position:absolute; inset:0;
  z-index:1;                /* fog is 0, grid is 1, content is 2 */
  pointer-events:none;
}



/* Keep real content above the grid */
.contact-hero > * { position: relative; z-index: 2; }

/* Default copy styling for the rich text */
.contact-hero .copy {
  color: #4b5563;                 /* gray-600 */
  font-size: 1.125rem;            /* text-lg */
  line-height: 2rem;              /* leading-8 */
}

/* LARGE, RESPONSIVE HERO HEADLINE */
.contact-hero h1,
.hero h1,
.hs_cos_wrapper_type_rich_text .headline-lg {
  font-size: clamp(32px, 6vw, 56px); /* tweak last value to 60–64px if you want bigger */
  line-height: 1.08;                 /* tight lines like the example */
  font-weight: 800;                   /* heavy weight */
  letter-spacing: -0.02em;            /* subtle tracking tighten */
  margin: 0 0 0.75rem 0;
  max-width: 18ch;                    /* keeps lines short & punchy */
}

/* Optional: subtext under headline to match visual hierarchy */
.contact-hero p.hero-sub,
.hero p.hero-sub,
.hs_cos_wrapper_type_rich_text .hero-sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: #6B7280; /* neutral-500 style */
  margin-bottom: 1rem;
}

/* If your theme keeps centering, force left-align in the hero */
.contact-hero,
.hero,
.contact-hero .hs_cos_wrapper_type_rich_text,
.hero .hs_cos_wrapper_type_rich_text {
  text-align: left !important;
}


/* Center the hero headline */
.contact-hero h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------  HubSpot form styling  -------------------------- */

/* Strip theme wrappers/padding/borders inside the hero */
.contact-hero .form-wrap,
.contact-hero .hs-form,
.contact-hero .hs-form fieldset,
.contact-hero .hs-form .form-columns-1,
.contact-hero .hs-form .form-columns-2,
.contact-hero .hs-form .hs-form-field,
.contact-hero .hs-form .inputs-list,
.contact-hero .hs-form .hs_error_rollup,
.contact-hero .hs-form .hs-form__legend,
.contact-hero .hs-form .legal-consent-container,
.contact-hero .hs-form .legal-consent-container .hs-richtext {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep the form the same width as the copy block and centered */
.contact-hero .form-wrap,
.contact-hero .hs-form {
  max-width: 42rem; /* ~ max-w-2xl */
  margin-left: auto;
  margin-right: auto;
}

/* Labels */
.contact-hero .hs-form label {
  display: block;
  font-weight: 600;
  color: #111827;                  /* gray-900 */
  font-size: 0.875rem;             /* text-sm */
  line-height: 1.25rem;            /* leading-5 */
  margin-bottom: 0.5rem;
}

/* Inputs / textareas / selects */
.contact-hero .hs-form input[type="text"],
.contact-hero .hs-form input[type="email"],
.contact-hero .hs-form input[type="tel"],
.contact-hero .hs-form input[type="number"],
.contact-hero .hs-form select,
.contact-hero .hs-form textarea,
.contact-hero .hs-form .hs-input {
  width: 100%;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;       /* gray-300 */
  border-radius: 0.375rem;         /* rounded-md */
  padding: 0.625rem 0.875rem;      /* px-3.5 py-2 */
  font-size: 1rem;                 /* text-base */
  line-height: 1.5rem;
  outline: none;
  box-shadow: none;
}

.contact-hero .hs-form input:focus,
.contact-hero .hs-form select:focus,
.contact-hero .hs-form textarea:focus,
.contact-hero .hs-form .hs-input:focus {
  border-color: #2563eb;           /* blue-600 */
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Two-column layout (if enabled in the form editor) */
.contact-hero .hs-form .form-columns-2 .hs-form-field {
  width: 48%;
  float: left;
}
.contact-hero .hs-form .form-columns-2 .hs-form-field:nth-child(odd) {
  margin-right: 4%;
}
@media (max-width: 640px){
  .contact-hero .hs-form .form-columns-2 .hs-form-field {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}

/* Submit */
.contact-hero .hs-form input[type="submit"] {
  display: block;
  width: 100%;
  background: #2563eb;             /* blue-600 */
  color: #fff;
  font-weight: 600;
  padding: 0.625rem 0.875rem;      /* px-3.5 py-2.5 */
  border-radius: 0.375rem;
  border: 0;
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}
.contact-hero .hs-form input[type="submit"]:hover {
  background: #1d4ed8;             /* blue-700 */
}

/* Clear floats */
.contact-hero .hs-form form:after {
  content: "";
  display: block;
  clear: both;
}

/* ===== Full-page fog/glass overlay ===== */
.page-glass{
  position: fixed;
  inset: 0;
  z-index: 0;                 /* behind your content; see step 3 */
  pointer-events: none;       /* never blocks clicks */
}

/* Page-wide glass */
.page-glass::before{
  --fog-alpha: .20; /* was .40 */
  background: rgba(255,255,255,var(--fog-alpha));
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
}

.contact-hero::after{
  --fog-alpha:.10;              /* was .18 */
  background: rgba(255,255,255,var(--fog-alpha));
  -webkit-backdrop-filter: blur(4px) saturate(115%);
          backdrop-filter: blur(4px) saturate(115%);
}

/* If you want zero fog in the hero, just turn it off: */
/* .contact-hero::after{ content:none !important; } */


/* Safari fallback if backdrop-filter isn't supported */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .page-glass::before{
    /* slightly higher opacity when we can't blur */
    background: rgba(255,255,255, calc(var(--fog-alpha) + .10));
  }
}

/* Make sure page content paints above the overlay */
.contact-hero,
.dnd-section, .dnd-row, .dnd-column, .dnd-module {
  position: relative;
  z-index: 1;
}

/* --- HERO fog sits between the hero background and its content --- */
.contact-hero { position: relative; }

/* Grid above the fog */
.hero-grid{ z-index:2; }

/* Actual hero content above both */
.contact-hero > *{ position:relative; z-index:3; }

/* Keep the hero content block centered to match the form (≈42rem) */
.contact-hero .mx-auto.max-w-2xl{
  max-width: 42rem;                 /* same width as the form */
  margin-left: auto !important;     /* keep the block centered */
  margin-right: auto !important;
}

/* Left-align text INSIDE that centered block */
.contact-hero .mx-auto.max-w-2xl h2,
.contact-hero .mx-auto.max-w-2xl .copy{
  text-align: left !important;
}

/* Neutralize the 'text-center' utility only in this block */
.contact-hero .mx-auto.max-w-2xl.text-center{
  text-align: left !important;
}

/* Target the HubSpot form submit button */
.hs-form .hs-submit {
  text-align: right; /* moves button to right */
  margin-top: 1rem; /* spacing above button */
}

.hs-form .hs-submit input[type="submit"] {
  background-color: #4F46E5; /* Indigo */
  color: #fff; /* White text */
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 9999px; /* pill shape */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover effect */
.hs-form .hs-submit input[type="submit"]:hover {
  background-color: #4338CA; /* Darker indigo */
  transform: translateY(-2px);
}

/* Optional: center or left align instead */
.hs-form .hs-submit.center {
  text-align: center;
}

.hs-form .hs-submit.left {
  text-align: left;
}

/* Base text color & rhythm */
body { color:#111827; }
p, .copy { color:#4B5563; line-height:1.75; }

/* Headings (tight tracking, bold, responsive) */
h1{ font-weight:800; letter-spacing:-0.02em; font-size:clamp(2.5rem, 5.5vw, 4.25rem); line-height:1.08; }
h2{ font-weight:700; letter-spacing:-0.02em; font-size:clamp(2rem,   4.5vw, 3.5rem);  line-height:1.1;  }
h3{ font-weight:600; letter-spacing:-0.01em; font-size:clamp(1.5rem, 3.5vw, 2.25rem); line-height:1.15; }

/* Hero headline specifically (mirrors the TSX) */
.contact-hero h2{
  color:#111827;
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:clamp(2.25rem, 6vw, 3.5rem);
  line-height:1.08;
}

/* Optional: brand wordmark look (for "Euphonic AI" text when needed) */
.brand-name { font-weight:700; font-size:1.25rem; color:#111827; }
.brand-name.font-quicksand { letter-spacing:0; } /* cleaner with Quicksand */

.site-footer{
  background:#fff; border-top:1px solid #e5e7eb;
  padding:2.5rem 0;
}
.foot-inner{
  max-width:1200px; margin:0 auto; padding:0 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.foot-left{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.foot-logo{ height:24px; width:auto; }
.foot-link{ color:#6B7280; text-decoration:none; margin-left:1rem; }
.foot-link:hover{ color:#111827; text-decoration:underline; }
.foot-right{ color:#6B7280; font-size:.9rem; }

.container-8xl { max-width: 90rem; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; }
/* Example usage in your hero: wrap your headline/copy with <div class="container-8xl"> ... </div> */

/* bg-clip text utility */
.bg-clip-text{ -webkit-background-clip:text; background-clip:text; }
.text-transparent{ color:transparent; }

/* Example class for the blue→teal text span */
.text-gradient-blue-teal{
  background-image: linear-gradient(90deg, #1A56DB, #38B2AC); /* blue-700 to teal-400 */
}

/* === Global Inter defaults (page-wide) === */
html, body,
p, span, a, li, label,
input, select, textarea, button {
  font-family: 'Inter', sans-serif !important;
}

/* Keep wordmark in Quicksand when you use .font-quicksand */
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }

/* ---------- Headings ---------- */
h1, h2, h3 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.02em;
}
h1 { font-weight: 800; line-height: 1.08; }
h2 { font-weight: 700; line-height: 1.10; }
h3 { font-weight: 600; line-height: 1.15; }

/* Hero headline (explicit) */
.contact-hero h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.08;
  margin: 0 0 .75rem;
}

/* Body copy in hero */
.contact-hero .copy,
p, .copy {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 1.125rem;   /* 18px */
  line-height: 1.75;
  color: #4B5563;
}

/* Back to Home link */
.back-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500;
}

/* ---------- HubSpot form ---------- */
.contact-hero .hs-form label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.25rem;
  color: #111827;
}

.contact-hero .hs-form input[type="text"],
.contact-hero .hs-form input[type="email"],
.contact-hero .hs-form input[type="tel"],
.contact-hero .hs-form input[type="number"],
.contact-hero .hs-form select,
.contact-hero .hs-form textarea,
.contact-hero .hs-form .hs-input {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}

.hs-form .hs-submit input[type="submit"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  font-size: 1rem;
}

/* Footer text */
.site-footer, .foot-right, .foot-link {
  font-family: 'Inter', sans-serif !important;
}