@charset "UTF-8";
/* ==========================================================================
   EMC — Contact popup (Popup Maker #477 + Gravity Forms #2, Orbital theme)
   Loads site-wide because the popup is triggered from the global menu and any
   link containing #contactform.

   Everything is scoped to #pum-477 / #popmake-477 so the Discount popup (#420),
   which shares the "Framed Border" theme, is untouched.
   ========================================================================== */

#pum-477{
  --emc-crimson:#c61b57;
  --emc-btn:#cc1c55;
  --emc-gold:#f7ae14;
  --emc-line:#dcdce4;
  --emc-muted:#6b6b76;
  --emc-head:'Poppins',system-ui,-apple-system,sans-serif;
  --emc-body:'Open Sans',system-ui,-apple-system,sans-serif;
}

/* ---------- Overlay becomes the scroll container ----------------------------
   Popup Maker positions the panel with inline position/top/left/margin and
   vertically centres it. When the panel is taller than the viewport that
   centring clips it top AND bottom, so it opened showing the middle of the
   form. Instead the overlay scrolls and does the centring itself.

   The panel is centred with `margin:auto` rather than justify/align-content,
   because the spec resolves auto margins to 0 once free space goes negative.
   That gives us both behaviours from one rule: dead-centre when the form fits,
   and pinned below the overlay's padding-top — top of the form visible, whole
   panel reachable — when it doesn't. align-items:center would instead push the
   top out of the scrollable area, which is the bug we started with.
   -------------------------------------------------------------------------- */
#pum-477.pum-overlay{
  background-color:rgba(10,8,18,.62);
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:4vh 0;
  /* Redundant while the panel is a flex item (auto side margins centre it);
     harmless cover for the non-flex path. */
  text-align:center;
}
/* Popup Maker animates the overlay's inline `display`, so only claim it while
   the popup is actually open — it adds .pum-active on open, removes it on close. */
#pum-477.pum-overlay.pum-active{display:flex!important}

/* ---------- Panel: replace the cream "framed border" with the site card look ---------- */
#pum-477 #popmake-477,
#pum-477 .pum-container{
  position:relative!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  margin:auto!important;
  /* Deliberately NO `display` declaration here, and never add one with
     !important. Popup Maker closes with jQuery fadeOut, and a jQuery hide
     animation finishes by setting `display:none` inline AND removing the
     inline `opacity:0` it was animating. An !important display beats that
     inline `display:none`, so the panel snapped back to full opacity and sat
     there for the 200ms the overlay takes to fade — the "flash, reappear,
     disappear" close. As a flex item the panel is blockified anyway, so
     margin:auto centres it with no display declaration at all; and when the
     overlay is not a flex container the panel is a block with an explicit
     width, so the auto side margins still centre it horizontally. */
  text-align:left;
  flex:0 0 auto;
  box-sizing:border-box!important;
  width:min(92vw,620px)!important;max-width:min(92vw,620px)!important;
  max-height:none!important;overflow:visible!important;
  background:#fff!important;
  border:0!important;
  border-radius:28px!important;
  box-shadow:0 40px 90px -30px rgba(10,8,18,.55)!important;
  padding:clamp(22px,3vw,34px)!important;
  font-family:var(--emc-body);
  color:#000;
}
/* Popup Maker prints the title element even when empty — hide the empty one. */
#pum-477 .pum-title:empty{display:none}
#pum-477 .pum-title{
  font-family:var(--emc-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.05;color:#000;margin:0 0 6px;
}

/* ---------- Close button ---------- */
#pum-477 .pum-content + .pum-close,
#pum-477 .pum-close{
  position:absolute!important;top:14px!important;right:14px!important;
  width:34px;height:34px;padding:0!important;
  /* Centred two ways on purpose: place-items for the grid path, and
     line-height/text-align so the glyph stays centred if `display` ever gets
     overridden to block — which jQuery does inline if the popup's
     "close button delay" setting is raised above 0. Never make this display
     !important; see the panel rule below for why. */
  display:grid;place-items:center;
  background:#f2f2f6!important;color:#000!important;
  border:0!important;border-radius:50%!important;
  font-family:var(--emc-body);font-size:18px;font-weight:700;
  line-height:34px;text-align:center;
  box-shadow:none!important;text-shadow:none!important;
  transition:background-color .25s,color .25s,transform .25s;
}
#pum-477 .pum-close:hover{background:var(--emc-btn)!important;color:#fff!important;transform:rotate(90deg)}
#pum-477 .pum-close:focus-visible{outline:2px solid var(--emc-crimson);outline-offset:2px}

/* ---------- Intro block (eyebrow / heading / contact details) ---------- */
#pum-477 .emc-pop-eyebrow{
  font-family:var(--emc-head);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:1.6px;color:var(--emc-crimson);margin:0 0 5px;
}
#pum-477 .emc-pop-title{
  font-family:var(--emc-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.05;color:#000;margin:0 0 9px;
  padding-right:34px;
}
#pum-477 .emc-pop-meta{
  font-family:var(--emc-body);font-size:15px;line-height:1.45;margin:0 0 16px;color:#000;
}
#pum-477 .emc-pop-meta a{color:var(--emc-crimson);text-decoration:none}
#pum-477 .emc-pop-meta a:hover{text-decoration:underline}

/* ---------- Gravity Forms (Orbital) ---------- */
#pum-477 .gform_wrapper{margin:0}
#pum-477 .gform_wrapper form{margin:0}
#pum-477 .gform_wrapper .gform_fields{row-gap:14px;column-gap:16px}
#pum-477 .gform_wrapper .gform_heading{display:none}

/* Labels */
#pum-477 .gform_wrapper .gfield_label,
#pum-477 .gform_wrapper .gform-field-label,
#pum-477 .gform_wrapper legend.gfield_label{
  font-family:var(--emc-head)!important;font-weight:700!important;
  font-size:12px!important;letter-spacing:1.2px!important;text-transform:uppercase!important;
  color:#000!important;margin:0 0 5px!important;line-height:1.3!important;
}
#pum-477 .gform_wrapper .gfield_required,
#pum-477 .gform_wrapper .gfield_required .gfield_required_text{
  color:var(--emc-crimson)!important;font-weight:700;letter-spacing:0;text-transform:none;
}
/* Sub-labels (First / Last), descriptions, character counter */
#pum-477 .gform_wrapper .ginput_complex label,
#pum-477 .gform_wrapper .gform-field-label--type-sub,
#pum-477 .gform_wrapper .gfield_description,
#pum-477 .gform_wrapper .ginput_counter,
#pum-477 .gform_wrapper .charleft{
  font-family:var(--emc-body)!important;font-weight:400!important;
  font-size:12px!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--emc-muted)!important;line-height:1.35!important;
}
#pum-477 .gform_wrapper .ginput_complex label,
#pum-477 .gform_wrapper .gform-field-label--type-sub{margin-top:4px!important;display:block}
#pum-477 .gform_wrapper .gfield_description{margin:0 0 6px!important;padding-top:0!important}
#pum-477 .gform_wrapper .ginput_counter,
#pum-477 .gform_wrapper .charleft{margin-top:4px!important;font-size:11px!important}

/* Controls */
#pum-477 .gform_wrapper input[type=text],
#pum-477 .gform_wrapper input[type=email],
#pum-477 .gform_wrapper input[type=tel],
#pum-477 .gform_wrapper input[type=number],
#pum-477 .gform_wrapper input[type=url],
#pum-477 .gform_wrapper select,
#pum-477 .gform_wrapper textarea{
  width:100%!important;
  font-family:var(--emc-body)!important;font-size:15px!important;line-height:1.3!important;
  color:#000!important;background:#fff!important;
  border:1px solid var(--emc-line)!important;
  border-radius:24px!important;
  padding:0 20px!important;height:46px!important;
  box-shadow:none!important;
  transition:border-color .25s,box-shadow .25s;
  -webkit-appearance:none;appearance:none;
}
/* Explicit height, not `auto` — Gravity Forms' `rows` attribute otherwise
   renders a ~220px box and forces the panel to scroll. Still user-resizable. */
#pum-477 .gform_wrapper textarea{
  height:96px!important;min-height:96px!important;
  border-radius:18px!important;padding:12px 20px!important;resize:vertical;
}
#pum-477 .gform_wrapper input::placeholder,
#pum-477 .gform_wrapper textarea::placeholder{color:#9a9aa6;opacity:1}

#pum-477 .gform_wrapper input:hover,
#pum-477 .gform_wrapper textarea:hover{border-color:#b9b9c6!important}
#pum-477 .gform_wrapper input:focus,
#pum-477 .gform_wrapper textarea:focus,
#pum-477 .gform_wrapper select:focus{
  border-color:var(--emc-crimson)!important;
  box-shadow:0 0 0 3px rgba(198,27,87,.16)!important;
  outline:none!important;
}
/* Autofill: repaint the browser's own background (see homepage signup note) */
#pum-477 .gform_wrapper input:autofill,
#pum-477 .gform_wrapper input:-webkit-autofill,
#pum-477 .gform_wrapper input:-webkit-autofill:hover,
#pum-477 .gform_wrapper input:-webkit-autofill:active{
  box-shadow:inset 0 0 0 100vmax #fff!important;
  -webkit-text-fill-color:#000;caret-color:#000;
}

/* Radio / checkbox choices (kept for any future choice fields) */
#pum-477 .gform_wrapper .gfield_radio,
#pum-477 .gform_wrapper .gfield_checkbox{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
#pum-477 .gform_wrapper .gchoice{display:flex;align-items:center;gap:9px}
#pum-477 .gform_wrapper .gchoice input[type=radio],
#pum-477 .gform_wrapper .gchoice input[type=checkbox]{
  width:20px!important;height:20px!important;min-height:0!important;padding:0!important;
  accent-color:var(--emc-btn);border-radius:50%!important;border:1px solid var(--emc-line)!important;
  flex:0 0 auto;
}
#pum-477 .gform_wrapper .gchoice input[type=checkbox]{border-radius:5px!important}
#pum-477 .gform_wrapper .gchoice label{
  font-family:var(--emc-body)!important;font-size:15px!important;font-weight:400!important;
  color:#000!important;text-transform:none!important;letter-spacing:0!important;margin:0!important;
}

/* ---------- reCAPTCHA v3 (replaces the old "5 + 5 =" math radio) ------------
   v3 has no widget — it scores silently — so there is nothing to lay out. What
   it does add is a floating grey badge in the corner of every page, which reads
   as clutter on this design. Google's terms allow hiding the badge as long as
   the branding appears in the flow, which is what .emc-recaptcha-note under the
   submit button is for (see inc/recaptcha-v3.php).
   `visibility` rather than `display` — display:none has broken token execution
   in past reCAPTCHA releases.
   -------------------------------------------------------------------------- */
.grecaptcha-badge{visibility:hidden!important}

.gform_wrapper .emc-recaptcha-note{
  font-family:'Open Sans',system-ui,-apple-system,sans-serif;
  font-size:11px;line-height:1.45;color:#6b6b76;
  margin:10px 0 0;max-width:46ch;
}
.gform_wrapper .emc-recaptcha-note a{color:#6b6b76;text-decoration:underline}
.gform_wrapper .emc-recaptcha-note a:hover{color:#c61b57}

/* Submit */
/* Flex row so Google's branding line sits beside the button instead of below it
   — it then costs no extra panel height at all. Wraps under the button on
   narrow screens, where the button goes full width. */
#pum-477 .gform_wrapper .gform_footer,
#pum-477 .gform_wrapper .gform-footer{
  margin:16px 0 0!important;padding:0!important;
  display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 16px;
}
#pum-477 .gform_wrapper .emc-recaptcha-note{margin:0}
@media (max-width:600px){
  #pum-477 .gform_wrapper .emc-recaptcha-note{flex:0 0 100%;max-width:none}
}
#pum-477 .gform_wrapper .gform_footer input[type=submit],
#pum-477 .gform_wrapper .gform-footer input[type=submit],
#pum-477 .gform_wrapper .gform_footer button,
#pum-477 .gform_wrapper .gform-footer button,
#pum-477 .gform_wrapper .gform_button,
#pum-477 .gform_wrapper .gform-button{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--emc-body)!important;font-weight:700!important;font-size:15px!important;
  letter-spacing:2.6px!important;text-transform:uppercase!important;line-height:1!important;
  height:46px!important;padding:0 30px!important;width:auto!important;
  background:var(--emc-btn)!important;color:#fff!important;
  border:1px solid var(--emc-btn)!important;border-radius:26px!important;
  cursor:pointer;box-shadow:none!important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
#pum-477 .gform_wrapper .gform_footer input[type=submit]:hover,
#pum-477 .gform_wrapper .gform-footer input[type=submit]:hover,
#pum-477 .gform_wrapper .gform_button:hover,
#pum-477 .gform_wrapper .gform_footer button:hover{
  transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(198,27,87,.75)!important;
}
#pum-477 .gform_wrapper .gform_footer input[type=submit]:focus-visible,
#pum-477 .gform_wrapper .gform_button:focus-visible{outline:3px solid var(--emc-gold);outline-offset:3px}
/* Ajax spinner sits next to the button, not on its own line */
#pum-477 .gform_wrapper .gform_ajax_spinner{margin-left:12px;vertical-align:middle}

/* Validation + confirmation */
#pum-477 .gform_wrapper .gform_validation_errors{
  background:#fdf0f4!important;border:1px solid var(--emc-crimson)!important;
  border-radius:16px!important;box-shadow:none!important;padding:12px 16px!important;
  margin:0 0 14px!important;
}
#pum-477 .gform_wrapper .gform_validation_errors h2,
#pum-477 .gform_wrapper .gform_validation_errors .gform_submission_error{
  font-family:var(--emc-body)!important;font-size:14px!important;font-weight:700!important;
  color:var(--emc-crimson)!important;text-transform:none!important;letter-spacing:0!important;margin:0!important;
}
#pum-477 .gform_wrapper .gfield_error input,
#pum-477 .gform_wrapper .gfield_error textarea{border-color:var(--emc-crimson)!important}
#pum-477 .gform_wrapper .validation_message{
  background:none!important;border:0!important;padding:5px 0 0!important;
  font-family:var(--emc-body)!important;font-size:12px!important;font-weight:600!important;
  color:var(--emc-crimson)!important;
}
#pum-477 .gform_confirmation_message{
  font-family:var(--emc-body);font-size:16px;line-height:1.5;color:#000;
  padding:6px 0;
}

/* ---------- Small screens ---------- */
@media (max-width:600px){
  #pum-477 #popmake-477,#pum-477 .pum-container{
    width:94vw!important;max-width:94vw!important;border-radius:22px!important;
    padding:22px 18px!important;
  }
  #pum-477.pum-overlay{padding:2.5vh 0}
  #pum-477 .gform_wrapper .gform_fields{row-gap:12px}
  #pum-477 .gform_wrapper .gform_footer input[type=submit],
  #pum-477 .gform_wrapper .gform_button{width:100%!important}
}

@media (prefers-reduced-motion:reduce){
  #pum-477 .pum-close,
  #pum-477 .gform_wrapper input,
  #pum-477 .gform_wrapper textarea,
  #pum-477 .gform_wrapper .gform_footer input[type=submit]{transition:none}
  #pum-477 .pum-close:hover{transform:none}
}