/* ==========================================================================
   The Entourage | Multi-step Application Form (HubSpot new form editor)
   --------------------------------------------------------------------------
   Scope:   everything sits under .ent-apply, so no other form on the page
            (or the site) is affected. Wrap the embed in <div class="ent-apply">.
   Embed:   use HubSpot's "Developer code (Advanced)" embed. The standard
            embed renders in an iframe that page CSS cannot reach.
   Method:  1) set HubSpot's own --hsf-* variables (these beat the Style
               panel, which only sets --hsf-default-*),
            2) targeted rules for things variables do not cover.
   Classes confirmed against a live new-editor form, 25 Sep 2026.
   ========================================================================== */

/* Brand heading font, served from The Entourage HubSpot file manager */
@font-face {
  font-family: "Entourage Parafina";
  src: url("https://www.the-entourage.com/hubfs/Parafina%20Black%20S.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

.ent-apply {
  /* Brand tokens */
  --ent-blue: #146EF5;          /* primary: 4.59:1 on white (AA) */
  --ent-blue-dark: #0F5AD1;     /* hover / pressed: 6.17:1 */
  --ent-navy: #030517;          /* text: 20.2:1 */
  --ent-sky: #26B8FF;
  --ent-orange: #FF5205;
  --ent-pink: #D92B6B;          /* errors: 4.66:1 (AA) */
  --ent-purple: #7A2BAB;
  --ent-muted: #5B6478;         /* secondary text: 5.93:1 */
  --ent-line: #D5DCE8;
  --ent-field: #F5F8FD;
  --ent-ring: rgba(20, 110, 245, .22);

  --ent-heading-font: "Entourage Parafina", "Parafina", "Bebas Neue", "Oswald", Inter, sans-serif;
  --ent-body-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Trust line under the buttons. Edit the text here. */
  --ent-trust-line: "Takes about 30 seconds";

  display: block;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;              /* 16px phone gutter */
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. HubSpot variables (override the Style panel)
   -------------------------------------------------------------------------- */
.ent-apply [data-hsfc-id="Renderer"] {
  --hsf-global__font-family: var(--ent-body-font);
  --hsf-global__font-size: 16px;
  --hsf-global__color: var(--ent-navy);
  --hsf-global-error__color: var(--ent-pink);

  --hsf-row__vertical-spacing: 16px;
  --hsf-row__horizontal-spacing: 12px;
  --hsf-module__vertical-spacing: 8px;

  --hsf-heading__font-family: var(--ent-heading-font);
  --hsf-heading__color: var(--ent-navy);
  --hsf-richtext__font-family: var(--ent-body-font);
  --hsf-richtext__color: var(--ent-navy);

  --hsf-field-label__font-family: var(--ent-body-font);
  --hsf-field-label__font-size: 14px;
  --hsf-field-label__color: var(--ent-navy);
  --hsf-field-description__color: var(--ent-muted);

  --hsf-field-input__font-family: var(--ent-body-font);
  --hsf-field-input__font-size: 17px;   /* 16px+ stops iOS zooming on focus */
  --hsf-field-input__color: var(--ent-navy);
  --hsf-field-input__background-color: var(--ent-field);
  --hsf-field-input__placeholder-color: #5F677A;
  --hsf-field-input__border-color: var(--ent-line);
  --hsf-field-input__border-width: 1.5px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 12px;
  --hsf-field-input__padding: 16px 18px;
  --hsf-field-dropdown-options__border-radius: 14px;

  --hsf-button__font-family: var(--ent-body-font);
  --hsf-button__font-size: 17px;
  --hsf-button__font-weight: 700;
  --hsf-button__color: #FFFFFF;
  --hsf-button__background-color: var(--ent-blue);
  --hsf-button--hover__background-color: var(--ent-blue-dark);
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 18px 28px;
  --hsf-button__box-shadow: 0 8px 20px -8px rgba(20, 110, 245, .55);

  --hsf-progressbar-text__font-family: var(--ent-body-font);
  --hsf-progressbar-text__font-size: 13px;
  --hsf-progressbar-text__color: var(--ent-muted);
  --hsf-progressbar-progressLine__background-color: var(--ent-blue);
  --hsf-progressbar-progressLine__background-image: linear-gradient(90deg, var(--ent-blue), var(--ent-sky));
  --hsf-progressbar-trackLine__background-color: #E6ECF7;

  --hsf-erroralert__font-family: var(--ent-body-font);
  --hsf-erroralert__font-size: 14px;
  --hsf-erroralert__color: var(--ent-pink);

  --hsf-background__background-color: #FFFFFF;
  --hsf-background__padding: 0;
  --hsf-background__border-style: none;
}

/* --------------------------------------------------------------------------
   2. Card
   -------------------------------------------------------------------------- */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Form {
  background: #FFFFFF;
  border: 1px solid #E3E8F2;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(3, 5, 23, .04), 0 24px 48px -24px rgba(3, 5, 23, .18);
  padding: 28px 20px 24px;
  font-family: var(--ent-body-font);
  color: var(--ent-navy);
  -webkit-font-smoothing: antialiased;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content {
  padding: 0;
}
/* Rows that only hold hidden fields still take up a gap. Collapse them. */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Row:has(> input[type="hidden"]:only-child) {
  display: none;
}
/* Stack fields on phones (first/last name side by side from 480px) */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Row {
  grid-template-columns: 1fr;
}

/* Smooth step change: HubSpot re-renders each step, so this plays on every step */
@keyframes ent-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Step__Content {
  animation: ent-step-in .28s cubic-bezier(.2, .7, .2, 1);
}

/* HubSpot places the progress bar in its own row under the fields.
   Move that row to the top of each step. */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Step__Content {
  display: flex;
  flex-direction: column;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Row:has(> .hsfc-ProgressBar) {
  order: -1;
  margin: 0;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. Progress indicator (turn on in HubSpot: Edit step > Progress bar >
      "Number of steps"). Shows "Step 2 of 6" style text + thin bar.
   -------------------------------------------------------------------------- */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar__Text::before {
  content: "Step ";                 /* HubSpot shows "1/6"; this makes it "Step 1/6" */
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar__Text {
  font-family: var(--ent-body-font);
  font-size: 13px;
  color: var(--ent-muted);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar__Progress,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar__Progress > div {
  height: 6px;
  border-radius: 6px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar__Progress {
  margin-bottom: 24px;
  background-color: #E6ECF7;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ProgressBar__Progress > div {
  background-color: var(--ent-blue);
  background-image: linear-gradient(90deg, var(--ent-blue), var(--ent-sky));
  transition: width .4s cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   4. Step headings (Rich text block at the top of each step, set as H2)
   -------------------------------------------------------------------------- */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText h1,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText h2,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText h3,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Heading {
  font-family: var(--ent-heading-font);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ent-navy);
  margin: 0 0 4px;
  text-align: left;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ent-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Labels and inputs
   -------------------------------------------------------------------------- */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-FieldLabel {
  display: block;
  font-family: var(--ent-body-font);
  font-size: 14px;
  color: var(--ent-navy);
  font-weight: 600;
  margin-bottom: 8px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator {
  color: var(--ent-pink);
  margin-left: 2px;
}

.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextInput {
  width: 100%;
  min-height: 56px;                 /* comfortable tap target */
  box-sizing: border-box;
  padding: 16px 18px;
  font-family: var(--ent-body-font);
  font-size: 17px;                  /* 16px+ stops iOS zooming on focus */
  line-height: 1.3;
  color: var(--ent-navy);
  background-color: var(--ent-field);
  border: 1.5px solid var(--ent-line);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextInput:hover {
  border-color: #B7C3D8;
  box-shadow: none;
}
/* Visible focus state (HubSpot removes the outline) */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextInput:focus-visible {
  outline: none;
  background-color: #FFFFFF;
  border-color: var(--ent-blue);
  box-shadow: 0 0 0 4px var(--ent-ring);
}
/* Error state */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextInput[aria-invalid="true"] {
  border-color: var(--ent-pink);
  background-color: #FFF7FA;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextInput[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(217, 43, 107, .18);
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-ErrorAlert {
  font-family: var(--ent-body-font);
  font-size: 14px;
  color: var(--ent-pink);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 6px;
}

/* Long answer box (core business question) */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
  width: 100%;
  min-height: 132px;
  box-sizing: border-box;
  padding: 16px 18px;
  font-family: var(--ent-body-font);
  font-size: 17px;                  /* 16px+ stops iOS zooming on focus */
  line-height: 1.5;
  color: var(--ent-navy);
  background-color: var(--ent-field);
  border: 1.5px solid var(--ent-line);
  border-radius: 12px;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextareaInput::placeholder {
  color: #5F677A;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus-visible {
  outline: none;
  background-color: #FFFFFF;
  border-color: var(--ent-blue);
  box-shadow: 0 0 0 4px var(--ent-ring);
}

/* Phone: country picker joined to the number input */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-PhoneInput {
  display: flex;
  align-items: stretch;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  padding: 0 14px;
  background: var(--ent-field);
  border: 1.5px solid var(--ent-line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret:focus-visible {
  outline: 3px solid var(--ent-blue);
  outline-offset: 2px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-PhoneInput > .hsfc-TextInput {
  border-left: 1.5px solid var(--ent-line);
  border-radius: 0 12px 12px 0;
}

/* Dropdowns (revenue, occupation, industry) */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownInput > input {
  padding-right: 48px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret > span {
  border-top-color: var(--ent-blue);
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions {
  margin-top: 6px;
  background: #FFFFFF;
  border: 1px solid #E3E8F2;
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(3, 5, 23, .25);
  overflow: hidden;
}
/* Short lists: the search box is noise on mobile */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__Search {
  display: none;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List {
  padding: 6px;
  margin: 0;
  max-height: 320px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem {
  display: flex;
  align-items: center;
  min-height: 48px;                 /* 44px+ tap target */
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ent-navy);
  cursor: pointer;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:hover,
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:focus {
  background: #EEF4FF;
  filter: none;
  outline: none;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ent-blue);
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem--selected {
  background: var(--ent-blue);
  color: #FFFFFF;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Buttons: primary = Next / Submit Now, text link = Back
   -------------------------------------------------------------------------- */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-NavigationRow {
  margin-top: 28px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons {
  display: flex;
  flex-direction: column-reverse;   /* Back sits under the main button */
  align-items: stretch;
  gap: 14px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Button {
  width: 100%;
  min-height: 58px;
  padding: 18px 28px;
  font-family: var(--ent-body-font);
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  background-color: var(--ent-blue);
  background-image: none;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(20, 110, 245, .55);
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover {
  background-color: var(--ent-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(20, 110, 245, .6);
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
  outline: 3px solid var(--ent-navy);
  outline-offset: 3px;
}
/* Back: first button when a step has two */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child) {
  min-height: 44px;
  padding: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--ent-muted);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child)::before {
  content: "\2190";
  margin-right: 8px;
}
.ent-apply [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child):hover {
  background: transparent;
  color: var(--ent-navy);
  transform: none;
  box-shadow: none;
}

/* Trust line */
.ent-apply [data-hsfc-id="Renderer"] .hsfc-NavigationRow::after {
  content: var(--ent-trust-line);
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ent-muted);
}

/* --------------------------------------------------------------------------
   7. Larger screens
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .ent-apply [data-hsfc-id="Renderer"] .hsfc-Form {
    padding: 40px 40px 32px;
  }
  .ent-apply [data-hsfc-id="Renderer"] .hsfc-Row:has(> .hsfc-TextField + .hsfc-TextField) {
    grid-template-columns: 1fr 1fr;
  }
  .ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText h1,
  .ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText h2,
  .ent-apply [data-hsfc-id="Renderer"] .hsfc-RichText h3,
  .ent-apply [data-hsfc-id="Renderer"] .hsfc-Heading {
    font-size: 34px;
  }
}

/* --------------------------------------------------------------------------
   8. Accessibility: respect reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ent-apply [data-hsfc-id="Renderer"] *,
  .ent-apply [data-hsfc-id="Renderer"] *::before,
  .ent-apply [data-hsfc-id="Renderer"] *::after {
    animation: none !important;
    transition: none !important;
  }
}