/* The Sound Bath Company — global resets + responsive overrides.
   All component styling lives inline in index.html so the design is
   preserved exactly; this file only holds what inline styles cannot do. */

html, body { margin: 0; padding: 0; background: #F4E2D2; overflow-x: hidden; }

/* One soft, evenly spaced print texture across the whole viewport. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .25;
  background-image: radial-gradient(rgba(44,50,39,.45) .55px, transparent .7px);
  background-size: 7px 7px;
}

/* On phones, lead with the artwork and keep the hero message concise. */
@media (max-width: 560px) {
  .archwindow { grid-row: 1 !important; }
  .herocopy { grid-row: 2 !important; }
  .herocopy > div:first-child { display: none !important; }
  .headline { margin-top: 0 !important; }
}
* { box-sizing: border-box; }
a { color: #C7481B; text-decoration: none; }
a:hover { opacity: .75; }
h1, p { margin: 0; }
img { max-width: 100%; }
[data-sticky][hidden] { display: none !important; }

/* ---- The interest section.
        Desktop: explainer over offerings in the left column, the Tally
        panel spanning both rows on the right and sticking as you scroll.
        Mobile: one column in DOM order — explainer, form, offerings — so the
        form is reachable without scrolling past the three offering cards. ---- */

.explainer  { grid-column: 1; grid-row: 1; }
.offerings  { grid-column: 1; grid-row: 2; }
.formpanel  { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; }

@media (max-width: 900px) {
  #interest { grid-template-columns: 1fr !important; }
  .explainer, .offerings, .formpanel {
    grid-column: 1 !important; grid-row: auto !important;
    position: static !important;
  }
}

/* ---- Hero: type left, arched window right. The window is a fixed 520px
        track on desktop; it narrows, then drops below the type on tablets,
        and is hidden on phones where a 300px-tall arch would read as a
        fragment rather than a window. ---- */

/* The large-screen canvas grows fluidly up to 1600px. Below 1280px, tighten
   the image track and type so the composition keeps its balance. */
@media (max-width: 1279px) {
  .herogrid { grid-template-columns: 1fr 420px !important; gap: 40px !important; }
  .headline { font-size: 82px !important; }
  .herocopy { padding-bottom: 76px !important; }
  .archwindow { height: 560px !important; border-radius: 210px 210px 0 0 !important; }
}

@media (max-width: 900px) {
  .herogrid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    align-items: start !important;
    padding: 34px 34px 0 !important;
  }
  .headline { font-size: 66px !important; }
  .herocopy { padding-bottom: 0 !important; }
  .archwindow { height: 420px !important; border-radius: 50% 50% 0 0 / 34% 34% 0 0 !important; }
  .topbar { padding: 22px 34px !important; }
}

@media (max-width: 560px) {
  body::before {
    opacity: .13;
    background-size: 11px 11px;
  }
  .topbar {
    padding: 16px 18px 8px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 5px !important;
  }
  .wordmark { gap: 8px !important; }
  .wordmark > span:first-child {
    transform: scale(.82);
    transform-origin: left center;
    margin-right: -5px;
  }
  .wordmark span:last-child { font-size: 19px !important; }
  .topbar > div:last-child { font-size: 8px !important; letter-spacing: .17em !important; }
  .herogrid { padding: 14px 18px 0 !important; gap: 20px !important; }
  .herocopy > div:first-child {
    font-size: 9px !important;
    letter-spacing: .27em !important;
    line-height: 1.55 !important;
  }
  .headline {
    font-size: clamp(32px, 9vw, 38px) !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
    margin-top: 0 !important;
    white-space: nowrap;
    text-align: center;
  }
  .herocopy p {
    margin-top: 18px !important;
    font-size: 17px !important;
    line-height: 1.48 !important;
  }
  .ctastack { justify-content: center !important; margin-top: 24px !important; }
  .ctastack > div { width: 100%; max-width: 320px; }
  .ctastack [data-jump] { width: 100%; padding: 17px 24px !important; text-align: center; }
  .archwindow { height: 300px !important; }
}