/* ============================================
   CONTACT US 2026
   Mockup: graphic-dev/contact-2026/contact us new.png
   Spec:   docs/superpowers/specs/2026-08-12-contact-page-design.md

   Layout: a dark hero band and a white info band, each full-bleed, with the
   purple form card absolutely positioned across the seam between them on
   desktop. Below 1024px the card returns to normal flow and the page becomes
   a single column: hero -> form -> info.

   Everything is scoped under .contact-2026 (body class) so nothing leaks.
   ============================================ */

/* Shared gutter. Matches .header-2026-inner (52 / 40 / 20) so page content
   lines up with the header logo and CTA. */
.contact-2026 .c26-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 52px;
}

/* Positioning context spanning both bands — the card is absolute against this. */
.contact-2026 .c26-top {
  position: relative;
}

/* ── Hero (dark) ───────────────────────────────────────────────── */
.contact-2026 .c26-hero {
  position: relative;
  overflow: hidden;
  /* Solid base under the artwork: the background PNG carries transparency, and
     this is also what shows if the image 404s or has not loaded yet. */
  background: #0C0B0A;
  /* Top padding clears the fixed header (~76px) with breathing room. */
  padding: 184px 0 120px;
}

/* Background artwork. object-fit: cover on the img (not a CSS background) so the
   <picture> element can swap sources at the mobile breakpoint. */
.contact-2026 .c26-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.contact-2026 .c26-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero copy above the artwork. Scoped to the hero so the shared .c26-inner used
   by the card wrap and info band keeps its own stacking behaviour. */
.contact-2026 .c26-hero .c26-inner {
  position: relative;
  z-index: 1;
}

.contact-2026 .c26-hero-text {
  /* Leaves the right half for the card. */
  max-width: 48%;
}

.contact-2026 .c26-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

.contact-2026 .c26-hero-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 40px 0 0;
}

/* ── Info (white) ──────────────────────────────────────────────── */
.contact-2026 .c26-info {
  background: #fff;
  padding: 72px 0 120px;
  /* LAYOUT CONSTANT. The card is absolutely positioned, so its height is not
     part of the flow on desktop — this floor is what stops it overhanging the
     footer if the info copy is ever shortened. It is only a floor: measured at
     1440px the band's natural content height already clears the card, so this
     does not normally bind. Raised too far it just adds dead white space below
     the card; the headless render is the way to re-check it if the HubSpot form
     gains fields. */
  min-height: 480px;
}

.contact-2026 .c26-info-text {
  max-width: 46%;
}

.contact-2026 .c26-info-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: #2B2B2B;
  margin: 0;
}

.contact-2026 .c26-info-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #0C0B0A;
  margin: 48px 0 24px;
}

.contact-2026 .c26-locations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.contact-2026 .c26-location,
.contact-2026 .c26-email {
  margin: 0;
}

.contact-2026 .c26-location-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #4739C2;
  margin-bottom: 8px;
}

.contact-2026 .c26-location-address {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #2B2B2B;
}

.contact-2026 .c26-email {
  margin-top: 40px;
}

.contact-2026 .c26-email-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #2B2B2B;
  text-decoration: none;
}

.contact-2026 .c26-email-link:hover {
  color: #4739C2;
  text-decoration: underline;
}

/* ── Form card ─────────────────────────────────────────────────── */
/* The wrapper spans the full width so the card can sit inside the same
   max-width gutter as every other band. pointer-events:none so the empty left
   half of the wrapper never swallows clicks meant for the hero or info text;
   the card itself re-enables them. */
.contact-2026 .c26-card-wrap {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}

.contact-2026 .c26-card-wrap .c26-inner {
  display: flex;
  justify-content: flex-end;
}

.contact-2026 .c26-card {
  pointer-events: auto;
  width: min(48%, 600px);
  background: #4739C2;
  border-radius: 24px;
  padding: 44px 40px 40px;
  box-sizing: border-box;
}

.contact-2026 .c26-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.contact-2026 .c26-card-lead {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 20px 0 32px;
}

/* ── HubSpot "Forms Component" (hsfc-*) restyle ────────────────────
   This portal serves the newer Forms Component runtime, NOT the classic
   hs-form-field / hs-button / form-columns-2 markup — verified on production
   2026-07-30/31 while building the Request a Demo page. The selectors and the
   specificity workarounds below are carried over from request-demo-2026.css,
   which documents how each was confirmed via DevTools computed styles.

   Scoped on #c26-hubspot (an id) because HubSpot's own rules reach (0,3,0) —
   e.g. [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content. A class alone
   loses and would force !important.

   Difference from Request a Demo: that form sits on a light panel, this one on
   the purple card, so labels are white and the submit is the mockup's black
   pill rather than a purple full-width button. */

/* HubSpot applies its own padding to the step content; zero it, scoped, so the
   same form embedded in the site demo modal cannot pick this up. */
.contact-2026 #c26-hubspot .hsfc-Step__Content {
  padding: 0;
}

/* No row-reflow rules here, deliberately — and this is the interesting part.
   request-demo-2026.css reflows firstname/lastname into a 2-up grid because THAT
   form is configured with one field per full-width row. This form is not:
   measured in a headless render on 2026-08-12, its 9 fields arrive in 6 rows.
   HubSpot's own form editor already pairs email+phone, firstname+lastname and
   company+jobtitle — which is exactly the pairing the mockup asks for.

   Carrying those reflow rules over broke the layout: they squeezed each
   already-paired row to 50% width and forced grid-template-columns:1fr on it, so
   the two fields inside stacked into a narrow column and the form rendered as
   email-over-phone beside firstname-over-lastname. Let HubSpot's grid pair them;
   only spacing and skin belong here. */
.contact-2026 #c26-hubspot .hsfc-Row {
  margin-bottom: 16px;
}

.contact-2026 #c26-hubspot .hsfc-FieldLabel {
  display: block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 8px;
}

.contact-2026 #c26-hubspot .hsfc-FieldLabel__RequiredIndicator {
  color: #FF6B6B;
  margin-left: 2px;
}

.contact-2026 #c26-hubspot input[type="text"],
.contact-2026 #c26-hubspot input[type="email"],
.contact-2026 #c26-hubspot input[type="tel"],
.contact-2026 #c26-hubspot input[type="number"],
.contact-2026 #c26-hubspot select,
.contact-2026 #c26-hubspot textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding: 13px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9375rem;
  color: #0C0B0A;
}

.contact-2026 #c26-hubspot input::placeholder,
.contact-2026 #c26-hubspot textarea::placeholder {
  color: #8A8A8A;
}

.contact-2026 #c26-hubspot input:focus-visible,
.contact-2026 #c26-hubspot select:focus-visible,
.contact-2026 #c26-hubspot textarea:focus-visible {
  outline: 2px solid #0C0B0A;
  outline-offset: 2px;
}

/* Submit: black pill, left-aligned, sized to content — per the mockup.
   HubSpot centres the button by default; measured in a headless render, so both
   the row and its inner Buttons wrapper need the override. */
.contact-2026 #c26-hubspot .hsfc-NavigationRow {
  margin-top: 8px;
}

.contact-2026 #c26-hubspot .hsfc-NavigationRow,
.contact-2026 #c26-hubspot .hsfc-NavigationRow__Buttons {
  display: flex;
  justify-content: flex-start;
}

/* HubSpot reserves a 20px bottom margin on the alerts container above the
   button. It renders empty on every load, so collapse it only WHILE empty —
   the moment an error is injected the selector stops matching and the spacing
   returns. */
.contact-2026 #c26-hubspot .hsfc-NavigationRow__Alerts:empty {
  margin-bottom: 0;
}

.contact-2026 #c26-hubspot .hsfc-Button {
  width: auto;
  padding: 15px 40px;
  border: 0;
  border-radius: 25px;
  background: #0C0B0A;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 0;
}

.contact-2026 #c26-hubspot .hsfc-Button:hover {
  background: #2B2B2B;
}

.contact-2026 #c26-hubspot .hsfc-ErrorRow,
.contact-2026 #c26-hubspot .hsfc-ErrorAlert,
.contact-2026 #c26-hubspot [class*="ErrorMessage"] {
  color: #FFD5D5;
  font-size: 0.8125rem;
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .contact-2026 .c26-hero-title { font-size: 2.75rem; }
  .contact-2026 .c26-card { padding: 36px 32px 32px; }
}

/* ── Card leaves the seam and joins the flow ───────────────────── */
@media (max-width: 1024px) {
  .contact-2026 .c26-inner { padding: 0 40px; }

  .contact-2026 .c26-hero {
    padding: 140px 0 56px;
  }

  .contact-2026 .c26-hero-text,
  .contact-2026 .c26-info-text {
    max-width: none;
  }

  /* Static: the card now sits between hero and info in DOM order, which is why
     the template renders it there. */
  .contact-2026 .c26-card-wrap {
    position: static;
    pointer-events: auto;
    background: #0C0B0A;
    padding-bottom: 56px;
  }

  .contact-2026 .c26-card-wrap .c26-inner {
    display: block;
  }

  .contact-2026 .c26-card {
    width: 100%;
  }

  .contact-2026 .c26-info {
    /* Floor no longer needed — the card is in the flow. */
    min-height: 0;
    padding: 56px 0 80px;
  }
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-2026 .c26-inner { padding: 0 20px; }

  .contact-2026 .c26-hero { padding: 120px 0 40px; }
  .contact-2026 .c26-hero-title { font-size: 2rem; }
  .contact-2026 .c26-hero-body { font-size: 1.0625rem; margin-top: 24px; }

  .contact-2026 .c26-card { padding: 28px 20px 24px; border-radius: 18px; }
  .contact-2026 .c26-card-title { font-size: 1.75rem; }
  .contact-2026 .c26-card-lead { font-size: 1rem; margin-bottom: 24px; }

  /* Paired fields are HubSpot's own grid; it collapses them to one column at
     narrow widths on its own, so there is nothing to override here. */
  .contact-2026 #c26-hubspot .hsfc-Button { width: 100%; }

  .contact-2026 .c26-locations {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .contact-2026 .c26-info-heading { font-size: 1.25rem; margin: 36px 0 20px; }
}