/* Contacts: the collection select, the form's own look (underlined, Satoshi 18px, a grey hint) */
.hs-pick { display: block; width: 100%; border-bottom: 1px solid rgb(176, 176, 176); }
.hs-pick select {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 28px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center / 12px no-repeat;
  color: #000;
  font: 400 18px/1 Satoshi, system-ui, sans-serif;
  letter-spacing: -.02em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.hs-pick select:focus-visible { outline: 2px solid #000; outline-offset: 4px; }

/* The page, a plain contact section: no photograph behind the title, no fictional people (the
   portrait and its quote, the client bubbles, the two team photos), none of the template's
   agency lines. What stays: the title, the form, the details. */
[data-framer-name="Hero"] { background: #000; }
[data-framer-name="Hero"] [data-framer-name="Backphoto (place your image)"],
[data-framer-name="Hero"] [data-framer-name="Persona message"],
[data-framer-name="Hero"] [data-framer-name="Logo and trusted"],
[data-framer-name="Hero"] [data-framer-name="Who we are"],
[data-framer-name="Contacts"] [data-framer-name="Additional images"] { display: none !important; }
[data-framer-name="Hero"] { height: auto !important; min-height: 0 !important; }
[data-framer-name="Hero"] [data-framer-name="Topblock"] { height: auto !important; min-height: 0 !important; padding: 160px 36px 72px !important; }
[data-framer-name="Contacts"] [data-framer-name="Marks"] { visibility: hidden !important; }   /* the template's two stars */
[data-framer-name="Hero"] [data-framer-name*="Star"],
[data-framer-name="Hero"] [data-framer-name="Marks"] { display: none !important; }
[data-framer-name="Marks"] { visibility: hidden !important; }   /* hidden, not removed: the column keeps its place */

/* The footer here, too: no founder quote with its portrait bubble, no picture behind it. */
footer [data-framer-name="Message and description"],
footer [data-framer-name="Persona"] { display: none !important; }
footer :has(> video[src*="XR85lzld6QlWDzCJZj9Q3EXIs"]) { background: #000 !important; }

/* ---------------------------------------------------------------- the form, ours (halfsecond-contact.js)
   The template's heading, its "shape the future" line and its details block are hidden; ours take
   their place. The submit reads "Send on WhatsApp" (the label is drawn over the template's). */
form [data-framer-name="Header"] > :not(.hs-ct-head) { display: none !important; }
form [data-framer-name="Header"] { display: block !important; height: auto !important; }
.hs-ct-head { max-width: 640px; }
.hs-ct-title {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: #000;
}
.hs-ct-lead { margin: 16px 0 0; font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif); font-size: 17px; line-height: 1.5; letter-spacing: -.01em; color: rgb(89, 89, 89); }
.hs-ct-lead a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
[data-framer-name="Sending block"] [data-framer-name="Message"] > div:first-child { display: none !important; }
[data-framer-name="Submit"] [data-framer-name="Button name"] p { font-size: 0 !important; }
[data-framer-name="Submit"] [data-framer-name="Button name"] > div { width: auto !important; }
[data-framer-name="Submit"] [data-framer-name="Button name"] p::after { content: 'Send on WhatsApp'; font-size: 15px; white-space: nowrap; }

/* the details: WhatsApp first, then the phone and the email; no address, no socials */
[data-framer-name="All contacts"] > div > div > :not(.hs-ct-details) { display: none !important; }
.hs-ct-details { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; width: 100%; }
.hs-ct-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: 500 16px/1 var(--hs-text, 'Satoshi', system-ui, sans-serif);
  letter-spacing: -.02em;
  text-decoration: none;
}
.hs-ct-wa::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--hs-wa-icon) center / contain no-repeat; mask: var(--hs-wa-icon) center / contain no-repeat; }
.hs-ct-line { color: #000; font: 500 clamp(18px, 1.6vw, 24px)/1.2 var(--hs-title, 'Space Grotesk', system-ui, sans-serif); letter-spacing: -.03em; text-decoration: none; }
.hs-ct-line:hover { text-decoration: underline; text-underline-offset: 4px; }