/* Gravity Forms theming, shared by the landing-page hero panel (.lpform) and
   the site-wide estimate panel (.lead).

   This was scoped to .lpform alone, which was the same mistake in CSS that the
   prop form was in content: the landing pages got a real, branded form while 41
   other pages kept the comp's mockup form. One scope, both places.

   Gravity Forms 2.7+ themes through custom properties, and its framework rules
   use :where() plus its own class, so a plain descendant selector loses on load
   order however specific it looks. Set the variables (the documented seam) for
   colour, and use scoped rules for geometry, which GF sets directly. */
/* Gravity Forms 2.7+ themes through custom properties, and its framework
   rules use :where() plus its own class, so a plain :is(.lpform,.lead) .gform_button
   loses on load order however specific it looks. Setting the variables is the
   documented seam and it wins without an !important arms race. */
:is(.lpform,.lead) .gform_wrapper{
  margin:0;
  --gf-ctrl-btn-bg-color-primary:var(--red);
  --gf-ctrl-btn-bg-color-hover-primary:var(--red-dark);
  --gf-ctrl-btn-bg-color-focus-primary:var(--red-dark);
  --gf-ctrl-btn-color-primary:#fff;
  --gf-ctrl-btn-border-color-primary:var(--red);
  --gf-ctrl-btn-border-color-hover-primary:var(--red-dark);
  --gf-ctrl-btn-size:58px;
  --gf-ctrl-btn-font-size:1rem;
  --gf-ctrl-btn-padding-x:24px;
  --gf-ctrl-btn-border-radius:800px;
  --gf-ctrl-btn-font-weight:700;
}
:is(.lpform,.lead) .gform_heading,
:is(.lpform,.lead) .gform_required_legend{display:none;}
:is(.lpform,.lead) .gform_fields{display:grid;grid-template-columns:1fr;gap:15px;}
:is(.lpform,.lead) .gfield_label{display:block;font-size:.86rem;font-weight:700;
  color:var(--ink);margin-bottom:6px;}
:is(.lpform,.lead) .ginput_container input[type=text],
:is(.lpform,.lead) .ginput_container input[type=email],
:is(.lpform,.lead) .ginput_container input[type=tel],
:is(.lpform,.lead) .ginput_container input[type=number],
:is(.lpform,.lead) .ginput_container input[type=url],
:is(.lpform,.lead) .ginput_container textarea,
:is(.lpform,.lead) .ginput_container select{
  width:100%;border:1px solid rgba(22,32,43,.5);border-radius:12px;
  padding:14px 15px;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;min-height:52px;}
:is(.lpform,.lead) .ginput_container textarea{min-height:120px;line-height:1.5;}
:is(.lpform,.lead) .ginput_container input:focus,
:is(.lpform,.lead) .ginput_container textarea:focus,
:is(.lpform,.lead) .ginput_container select:focus{
  outline:3px solid rgba(224,49,47,.28);border-color:var(--red);}
:is(.lpform,.lead) .gfield_description{font-size:.8rem;color:var(--ink-muted);
  margin-top:5px;font-weight:500;}
:is(.lpform,.lead) .gform_footer{margin:18px 0 0;padding:0;}

/* The CTA. Matches .btn--primary rather than Gravity's default, and clears
   44px so it is not the one tap target on the page that fails. */
/* Colour themes cleanly through the custom properties above. Geometry does
   not: Gravity's framework sets min-height, border-radius, font-size and
   padding directly, at a specificity a scoped two-class selector cannot beat.
   These are !important because the alternative is a selector-length arms race
   with a plugin that can re-win it on any update. Scoped to :is(.lpform,.lead), so the
   blast radius is this one component. */
:is(.lpform,.lead) .gform_footer{display:block;}
:is(.lpform,.lead) .gform_wrapper .gform_footer .gform_button{
  width:100% !important;
  min-height:58px !important;
  padding:18px 24px !important;
  border-radius:800px !important;
  font-family:var(--f-display) !important;
  font-size:1rem !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(224,49,47,.34);}
:is(.lpform,.lead) .gform_confirmation_message{padding:22px 0;font-weight:600;color:var(--ink);}
:is(.lpform,.lead) .gfield_error input,:is(.lpform,.lead) .gfield_error textarea{border-color:var(--red);}
:is(.lpform,.lead) .validation_message{font-size:.82rem;color:var(--red-dark);margin-top:5px;}

/* Any stray inline icon inside the hero copy. .lppts already sizes its own,
   but an unsized SVG in a flex column stretches to the column width -- which
   is how three trust icons rendered at ~250px each. */
.lpcopy svg{width:19px;height:19px;flex-shrink:0;}
.lptrust svg{width:16px;height:16px;}

/* ---- Landing page conversion furniture ----
   None of this is in the comp, whose LP has exactly one ask at the top. On a
   3,700px page that means a visitor who reads the proof has to scroll back a
   full screen to act. */

/* Mid-page ask, after the process and after the proof. */
.lpcta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px;}
.lpcta .btn{min-height:54px;padding:16px 30px;}
.lpcta .btn--ghost{background:transparent;border:1px solid var(--rule);color:var(--ink);}
.lpcta .btn--ghost:hover{background:var(--paper-alt);}

/* Urgency band. offer_text is a real scheduling constraint ("call before 5 PM
   to schedule same day"), not a countdown timer. */
.lpband--offer{background:var(--navy);color:#fff;}
.lpband--offer .container{display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:center;text-align:center;padding:22px 0;}
.lpband--offer span{font-weight:600;font-size:1.02rem;}
.lpband--offer .btn{min-height:48px;}

/* Sticky call bar. The comp's site chrome has one; its LP does not, because
   the comp's LP is one screen tall. These are not. */
.is-lp .action-bar{display:none;}
@media(max-width:900px){
  .is-lp .action-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;
    display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
    box-shadow:0 -6px 20px rgba(6,12,32,.18);}
  .is-lp .action-bar a{display:flex;align-items:center;justify-content:center;
    gap:8px;min-height:58px;background:#fff;color:var(--navy);
    font-weight:700;font-size:.95rem;text-decoration:none;}
  .is-lp .action-bar a.primary{background:var(--red);color:#fff;}
  .is-lp .action-bar svg{width:18px;height:18px;}
  /* Reserve the bar's height so it never covers the footer or the last CTA. */
  body.is-lp{padding-bottom:58px;}
}

/* Two reviews in a three-column grid leaves an empty cell. The comp defines
   .rev-grid--2 only inside a max-width:920px media query, so it needs a
   desktop rule to be useful above that. */
/* Two columns on desktop only. Written without a media query first, which
   kept 2 x 408px tracks inside a 350px viewport and overflowed the page at
   both mobile widths. The comp's own .rev-grid--2 rule lives INSIDE a
   max-width:920px query, which is why it looked like it had no desktop rule. */
@media(min-width:921px){
  .rev-grid--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto;}
}
@media(max-width:920px){
  .rev-grid--2{grid-template-columns:1fr;max-width:640px;margin:0 auto;}
}

/* GF theme CSS is disabled on lp pages (gform_disable_css): 640KB the page's
   own styling replaces. Three things only GF's CSS was providing, restored
   here, scoped to .lpform so the rest of the site is untouched. */
/* 1. The honeypot must stay invisible. */
.lpform .gform_validation_container,
.lpform .gfield--type-honeypot{display:none !important;}
/* 2. Labels are VISIBLE (2026-10-01). The form was placeholder-led with the
   label clipped to 1x1: the placeholder measured 3.72:1 and vanished on the
   first keystroke, leaving two unlabelled boxes on a three-field form. The
   label now sits above the field and the duplicate placeholder is hidden. */
.lpform .gfield_label{display:block;font-family:var(--f-body);font-weight:700;
  font-size:.82rem;color:var(--ink);margin-bottom:6px;}
.lpform .ginput_container input::placeholder,
.lpform .ginput_container textarea::placeholder{color:transparent;}
/* 3. The submit's colors came from GF custom properties; set them directly. */
.lpform .gform_wrapper .gform_footer .gform_button{
  background:var(--red) !important;color:#fff !important;border:none !important;
  transition:background .15s ease,transform .15s ease;}
.lpform .gform_wrapper .gform_footer .gform_button:hover{
  background:var(--red-dark) !important;transform:translateY(-2px);}
.lpform .gfield{margin-bottom:15px;}
.lpform .gfield input,.lpform .gfield textarea,.lpform .gfield select{width:100%;}
.lpform .validation_message,.lpform .gfield_validation_message{
  color:var(--red-dark);font-size:.82rem;font-weight:600;margin-top:5px;}
.lpform .gform_required_legend{display:none;}

/* ---------- i11: the qualifying question as tappable chips ---------- */
/* A native radio dot is a ~13px target and reads as a survey. These are the
   first thing the visitor touches, so they are full-size buttons. */
.lpform .lp-chips .gfield_label{position:static !important;width:auto;height:auto;
  clip-path:none;overflow:visible;white-space:normal;
  display:block;font-family:var(--f-body);font-weight:700;font-size:.88rem;
  color:var(--ink);margin-bottom:9px;}
.lpform .lp-chips .gfield_required{color:var(--red);}
.lpform .lp-chips .gfield_radio{display:flex;flex-wrap:wrap;gap:8px;}
.lpform .lp-chips .gchoice{margin:0;}
.lpform .lp-chips input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;}
.lpform .lp-chips label{display:inline-flex;align-items:center;min-height:44px;
  padding:11px 16px;border:1.5px solid rgba(22,32,43,.18);border-radius:11px;
  background:#fff;color:var(--ink);font-size:.9rem;font-weight:600;cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease;}
.lpform .lp-chips label:hover{border-color:var(--red);color:var(--red-dark);}
.lpform .lp-chips input[type="radio"]:checked + label{background:var(--red);border-color:var(--red);
  color:#fff;box-shadow:0 6px 16px rgba(224,49,47,.28);}
.lpform .lp-chips input[type="radio"]:focus-visible + label{outline:3px solid rgba(224,49,47,.4);outline-offset:2px;}
/* The optional note should not dominate the form the way a 6-row box did. */
.lpform textarea{min-height:96px !important;height:96px;}

/* The submit is the house button: gradient, inset highlight, slab, glow. */
.lpform .gform_wrapper .gform_footer .gform_button{
  background:linear-gradient(180deg,#EF4643 0%,var(--red) 55%,#C92220 100%) !important;
  color:#fff !important;border:none !important;text-shadow:0 1px 1px rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 3px 0 rgba(140,14,13,.45),0 10px 26px rgba(224,49,47,.4) !important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.lpform .gform_wrapper .gform_footer .gform_button:hover{
  background:linear-gradient(180deg,#F55856 0%,#E63A38 55%,#D02523 100%) !important;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 rgba(140,14,13,.4),0 16px 34px rgba(224,49,47,.5) !important;}
.lpform .gform_wrapper .gform_footer .gform_button:active{transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 6px 16px rgba(224,49,47,.35) !important;}

/* GF wraps a radio group in a real <fieldset>. With GF's own CSS disabled the
   browser default shows: a border with the legend notched into it. */
.lpform fieldset{border:0;padding:0;margin:0;min-width:0;}
.lpform legend{padding:0;}
/* "(Required)" next to a question is clutter on a five-field lead form. */
.lpform .gfield_required{display:none;}
/* GF's own CSS was providing the vertical rhythm; without it the fields drift
   apart and the form runs off the fold. */
.lpform .gform_fields{display:block;}
.lpform .gfield{margin:0 0 14px;}
.lpform .lp-chips{margin-bottom:20px;}
.lpform .gform_footer{margin:20px 0 0 !important;padding:0 !important;}
.lpform .gform_body{margin:0;}
/* At 320 the number wrapped to a second line inside its pill. */
@media(max-width:360px){
  .lpform__call{font-size:.92rem;gap:8px;padding:14px 10px;white-space:nowrap;}
}

/* ================= i11: the lead form as a designed card ================= */
.lpform{padding:0;overflow:hidden;}
.lpform__head{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;padding:22px 28px 20px;}
.lpform__head h2{color:#fff;margin:0 0 6px;font-size:1.38rem;}
.lpform__sub{display:flex;align-items:center;gap:8px;margin:0;
  font-size:.88rem;font-weight:600;color:var(--accent-dark);}
.lpform__sub svg{width:16px;height:16px;flex:none;}
.lpform .gform_wrapper,
.lpform .lpform__or,
.lpform .lpform__call,
.lpform .lpform__foot{margin-left:28px;margin-right:28px;}
.lpform .gform_wrapper{margin-top:24px;}

/* Inputs: taller, softer, with a red focus ring so the active field is
   unmistakable on a phone. */
.lpform input[type="text"],.lpform input[type="email"],.lpform input[type="tel"],
.lpform textarea{background:#F7F9FC;border:1.5px solid rgba(22,32,43,.14);border-radius:12px;
  min-height:54px;font-size:1rem;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;}
.lpform input:focus,.lpform textarea:focus{background:#fff;border-color:var(--red);
  box-shadow:0 0 0 4px rgba(224,49,47,.13);outline:none;}
.lpform input::placeholder,.lpform textarea::placeholder{color:#7b8598;}

/* Chips: a check appears on the selected one, so the answer stays obvious
   after the thumb moves on. */
.lpform .lp-chips label::before{content:"";width:0;margin-right:0;font-weight:800;
  transition:width .12s ease,margin .12s ease;}
.lpform .lp-chips input[type="radio"]:checked + label::before{content:"\2713";width:1em;margin-right:7px;}

/* Progressive disclosure. */
.lpform form.is-compact .gfield--type-email,
.lpform form.is-compact .gfield--type-textarea{display:none;}
.lpform__more{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:4px 0 10px;margin:0;cursor:pointer;font-family:var(--f-body);font-size:.88rem;
  font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
.lpform__more span{font-size:1.05rem;line-height:1;}
.lpform__more:hover{color:var(--red);}

/* Footer: the rating does more work here than a privacy line alone. */
.lpform__foot{border-top:1px solid var(--rule);margin-top:18px;padding:14px 0 22px;
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;}
.lpform__rating{font-size:.86rem;color:var(--ink);font-weight:600;}
.lpform__rating .stars{color:var(--amber);letter-spacing:.06em;margin-right:6px;}
.lpform__rating strong{font-family:var(--f-display);font-weight:800;}
.lpform__priv{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-muted);}
.lpform__priv svg{width:13px;height:13px;color:var(--trust);flex:none;}
@media(max-width:520px){
  .lpform__head{padding:18px 20px 16px;}
  .lpform .gform_wrapper,.lpform .lpform__or,
  .lpform .lpform__call,.lpform .lpform__foot{margin-left:20px;margin-right:20px;}
}

/* ===========================================================================
   RESTORED AFTER gform_disable_css WENT SITEWIDE
   ---------------------------------------------------------------------------
   Gravity Forms ships 630 kB of CSS. Dropping it site-wide removed three
   things it was doing quietly for form 1. Each rule below exists because a
   before/after computed-style diff showed the property change, not because it
   seemed likely.
   =========================================================================== */

/* 1. THE HONEYPOT. THIS ONE LOSES LEADS, IT IS NOT COSMETIC.
   GF's anti-spam field is a real <input> labelled "Name" whose description
   reads "This field is for validation purposes and should be left unchanged".
   Only GF's stylesheet was hiding it. Without this rule it renders as a
   109px-tall visible field directly above the real Name field, and anyone who
   fills it in has their submission scored as spam and silently discarded.
   Measured: display none -> block, height 0 -> 109px desktop / 130px mobile.
   !important mirrors GF's own declaration; this must not lose a specificity
   race to anything. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gfield.gform_validation_container{display:none!important;}

/* 2. THE MULTI-PAGE STEP INDICATOR. Form 1 is the only form with one, so no
   existing .lpform rule covered it. Measured: flex -> block, so the three
   numbers stacked vertically and the block grew 32px -> 77px.
   The labels are empty on this form, so only the numbers are drawn. */
.lead .gf_page_steps{display:flex;align-items:center;margin:0 0 20px;}
.lead .gf_step{display:flex;align-items:center;justify-content:flex-start;
  width:44px;height:32px;flex:0 0 auto;}
.lead .gf_step_number{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);
  background:#fff;color:var(--navy);font-weight:700;font-size:.86rem;line-height:1;}
.lead .gf_step_active .gf_step_number{background:var(--paper-alt);border-color:var(--rule);}
.lead .gf_step_label:empty{display:none;}

/* 3. THE SUBMIT AND PAGINATION BUTTONS.
   forms.css already styled .gform_wrapper .gform_footer .gform_button. A
   multi-page form does not use those class names on its intermediate pages:
   the wrapper is .gform_page_footer and the controls are .gform_next_button
   and .gform_previous_button. So the rule that existed matched nothing on
   pages 1 and 2, and the Next button fell back to the browser default.
   Measured: rgb(224,49,47) on white -> rgb(239,239,239) on black, 67x38 -> 31x19. */
.lead .gform_page_footer{margin-top:18px;display:flex;gap:10px;align-items:center;}
.lead .gform_wrapper .gform_page_footer .gform_next_button,
.lead .gform_wrapper .gform_page_footer .gform_button,
.lead .gform_wrapper .gform_footer .gform_next_button,
.lead input.gform_next_button,
.lead input.gform_button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:3px;
  padding:0 22px;font-family:var(--f-body);font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;
  width:auto;min-height:48px;border-radius:12px;}
.lead .gform_wrapper .gform_page_footer .gform_previous_button,
.lead input.gform_previous_button{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--navy);border:1px solid var(--rule);border-radius:3px;
  padding:0 20px;font-family:var(--f-body);font-weight:700;font-size:15px;min-height:48px;border-radius:12px;cursor:pointer;width:auto;}
.lead input.gform_next_button:hover,
.lead input.gform_button:hover{background:var(--red-ink,#D92220);border-color:var(--red-ink,#D92220);}

/* ---- single-page forms: the submit button --------------------------------------
   Josh, 2026-09-16, on /request-estimate/: "formatting needs to 10x!!!"

   The block above fixed the MULTI-page case and left the single-page one broken
   in the mirror-image way. Gravity Forms renders the final submit as
   <button class="gform_button"> inside .gform_footer. The selector list had
   .gform_footer .gform_next_button and input.gform_button -- neither matches a
   <button> in .gform_footer -- so on /request-estimate/, the page whose whole
   job is that one button, it rendered as the browser default: measured
   rgb(239,239,239) background, rgb(0,0,0) text, 464px wide.

   Contact Us looked fine only because form 1 is multi-page and its button lives
   in .gform_page_footer. Same wrapper, same theme, opposite outcome.

   Tag-agnostic from here. A rule that depends on whether Gravity Forms emitted
   <input> or <button> will break again the next time that changes. */
.lead .gform_wrapper .gform_footer .gform_button,
.lead .gform_wrapper .gform_page_footer .gform_button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:12px;
  padding:16px 22px;font-family:var(--f-body);font-weight:800;font-size:1.02rem;line-height:1.2;
  letter-spacing:.01em;cursor:pointer;width:100%;height:auto;min-height:54px;
  box-shadow:0 8px 18px rgba(224,49,47,.26);transition:background .15s ease,transform .12s ease,box-shadow .15s ease;}
.lead .gform_wrapper .gform_footer .gform_button:hover,
.lead .gform_wrapper .gform_page_footer .gform_button:hover{
  background:var(--red-ink,#D92220);border-color:var(--red-ink,#D92220);
  transform:translateY(-1px);box-shadow:0 10px 22px rgba(224,49,47,.32);}
.lead .gform_wrapper .gform_footer .gform_button:active,
.lead .gform_wrapper .gform_page_footer .gform_button:active{transform:translateY(0);box-shadow:0 5px 12px rgba(224,49,47,.24);}
.lead .gform_wrapper .gform_footer{display:block;margin:20px 0 0;padding:0;}

/* ---- radio and checkbox choices -------------------------------------------------
   .gchoice was display:block, so on /request-estimate/ the "Yes" input sat at
   y=2394 and its own label at y=2418 -- input stacked ON TOP of its text, 24px
   apart, for both options and for the consent box. Measured, not guessed.

   Flex row, and the control keeps a real size: Gravity Forms ships no dimensions
   of its own here, so an unstyled radio is a 13px browser dot next to 16px text. */
.lead .gfield_radio,
.lead .gfield_checkbox{display:grid;gap:2px;margin-top:4px;}
/* Each choice is one 44px row and the label fills it (2026-10-01): the input
   and its label were two separate 22px targets with dead space between. */
.lead .gchoice{display:flex;align-items:center;gap:11px;margin:0;min-height:44px;}
.lead .gchoice label{flex:1;padding:11px 0;}
.lead .gchoice input[type=radio],
.lead .gchoice input[type=checkbox]{
  flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red);cursor:pointer;}
.lead .gchoice label{
  margin:0;font-size:.95rem;font-weight:500;line-height:1.45;color:var(--ink);
  text-transform:none;letter-spacing:0;cursor:pointer;}
.lead .ginput_container_consent{display:flex;align-items:flex-start;gap:11px;}
.lead .ginput_container_consent input[type=checkbox]{
  flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red);cursor:pointer;}
.lead .ginput_container_consent label{
  margin:0;font-size:.88rem;font-weight:500;line-height:1.5;color:var(--ink-muted);
  text-transform:none;letter-spacing:0;}

/* Gravity Forms wraps radio, checkbox and consent fields in a real <fieldset>,
   so those two fields arrived with the browser's default hairline box and a
   legend notched into it -- next to six borderless inputs it read as a legal
   disclaimer rather than part of the form. The grouping is correct markup and
   stays for screen readers; only the chrome goes. */
.lead .gform_wrapper fieldset.gfield{border:0;padding:0;margin:0 0 16px;min-inline-size:0;}
.lead .gform_wrapper fieldset.gfield > legend.gfield_label{
  padding:0;float:none;width:auto;display:block;
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);margin-bottom:8px;}
/* "Full Name(Required)" -- GF emits the marker with no separating space. */
.lead .gform_wrapper .gfield_required{margin-left:5px;}

/* ---- date picker toggle and file input (2026-10-01) -----------------------------
   /careers/ only. The calendar toggle rendered as a raw 24x24 browser button
   BELOW its field (2px outset border, Arial), and the resume input was the
   unstyled native control. Nothing in this sheet matched either one. */
.lead .ginput_container_date{position:relative;}
.lead .ginput_container_date .gform-datepicker-toggle{
  position:absolute;right:8px;top:6px;width:40px;height:40px;padding:0;
  appearance:none;-webkit-appearance:none;border:0;border-radius:10px;
  background:transparent;color:var(--navy);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;}
.lead .ginput_container_date .gform-datepicker-toggle:hover{background:var(--paper-alt,#F4F7FB);}
.lead .ginput_container_date .gform-datepicker-toggle .dashicons{display:none;}
.lead .ginput_container_date .gform-datepicker-toggle::before{
  content:"";width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") center/contain no-repeat;}
.lead .ginput_container_date input{padding-right:54px;}
.lead .ginput_container_fileupload input[type=file]{
  width:100%;border:1px dashed rgba(22,32,43,.5);border-radius:12px;padding:12px;
  font:inherit;font-size:.92rem;color:var(--ink);background:#fff;cursor:pointer;}
.lead .ginput_container_fileupload input[type=file]::file-selector-button{
  font:inherit;font-weight:700;font-size:.88rem;color:var(--navy);background:var(--paper-alt,#F4F7FB);
  border:1px solid rgba(22,32,43,.5);border-radius:10px;padding:9px 14px;margin-right:12px;cursor:pointer;}
.lead .gform_fileupload_rules{display:block;margin-top:6px;font-size:.8rem;color:var(--ink-muted);}