/* Connect — book an intro call */

body.connect-page {
  background: var(--velvet-orchid);
  color: var(--parchment);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.connect-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 5vw, 4rem) 5rem;
}

/* Plain block wrapper around hero + divider + form (everything but the
   shape's own positioning needs). connect-main's height comes from flex
   growth against the page, which browsers don't reliably expose to a
   percentage-height/top+bottom-anchored descendant (tested: both fell back
   to the shape's intrinsic default size instead of the real content height).
   This wrapper's own height is plain, ordinary content-driven auto height —
   the well-supported case — so the shape below can anchor to it exactly. */
.connect-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* Wraps the heading/copy/button so the background shape below can be
   clipped to just this block, matching the homepage's closing CTA band
   (index.css .hc-cta) rather than spanning the whole page (which
   also holds the "send a quick note" form). */
.connect-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1.5rem 0;
}

.connect-hero > * {
  position: relative;
  z-index: 1;
}

/* "Larger format" version, matching the technique built for services.css:
   one crop, shown at every width, capped with max-width instead of being
   swapped for an entirely different (much smaller) crop below a breakpoint
   — the same "B" bowl + outer arc crop ("91 0 57 110") that used to only
   appear above 1300px now always shows. The viewBox crops directly to this
   region's own bounding box (confirmed by direct render to be solid,
   continuous ink top to bottom). Anchored to height: 100% of
   .connect-content (see above), so it always starts at the top and ends
   exactly at the bottom of the real content — never over- or under-shooting.

   left:0 here is relative to .connect-content, which sits INSIDE
   .connect-main's own left padding (clamp(1.5rem, 5vw, 4rem) — the same
   expression .site-nav uses for its own left padding, which is why the
   shape's cut-off edge visually lined up with the nav logo). The solid page
   background reaches the true screen edge because it's painted on body,
   which has no padding — only this padded content box was ever pulling the
   shape in from the edge. Pulling it left by that same amount cancels the
   padding out just for this element, so it reaches the real edge like the
   background does, without changing the padding (and text) for anything
   else in .connect-content. */
.connect-hero-shape {
  position: absolute;
  z-index: 0;
  top: 0;
  left: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  height: 100%;
  width: auto;
  /* Without a cap, this crop's width (derived from height, see above) grows
     wide enough to crowd the centered text column below about 1300px wide —
     same issue services.css's shape had on narrow phones, same fix. */
  max-width: 46vw;
  pointer-events: none;
  /* Was a hand-tuned #6a1a78 at 0.9 opacity — a bold, near-solid shape from
     before the homepage's "one rule for shapes" system existed (index.css
     --hc-shape-on-dark): Parchment at a flat 8% opacity on every dark Orchid
     section (the homepage's hero and closing CTA use this exact value). That
     old bold treatment was also strong enough to visibly dim the "Not ready
     for a call" text where it crossed behind it on narrow phones. Matches
     the quiet system now (can't reference the homepage's CSS variable from
     this stylesheet, so the same value is written out directly). */
  fill: rgba(248, 244, 238, 0.08);
}


/* 20% smaller than the original clamp, matching the same reduction applied
   to the homepage's closing CTA heading (index.css). No max-width:
   at this size the sentence fits on one line on any normal desktop/tablet
   width, so the old 640px cap was wrapping it to two lines for no reason.
   Text still wraps normally (the default) on screens too narrow to fit it
   on one line — this only removes the artificial cap that wrapped it early
   even when there was plenty of room. */
.connect-heading {
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.connect-copy {
  opacity: 0.85;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.connect-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 420px;
  margin: 2.5rem 0 2rem;
  color: rgba(248, 244, 238, 0.5);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.connect-divider::before,
.connect-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(248, 244, 238, 0.25);
}

/* Replaces the old name/email/message form — that implied a submission that
   went somewhere, when all it ever did was open the visitor's own email app
   (see the comment in connect.html). Mirrors the hero's own heading/copy
   pairing above (.connect-heading/.connect-copy) at a smaller scale, so
   this reads as a quieter echo of the same pattern rather than a new one:
   a bold prompt, a plain line beneath it, then a button. */
.connect-email-heading {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.connect-email-copy {
  max-width: 420px;
  opacity: 0.85;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.connect-email-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}