/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/contact-panel/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/**
 * Breakpoints.
 *
 * Sass cannot read the `--breakpoint-*` custom properties out of the Tailwind
 * theme at compile time, so this map mirrors them by hand. Keep the two in step:
 * `src/global/tailwind/design-system.css` is the source of truth, and the names
 * and values here are deliberately identical to it so there is one vocabulary
 * across utilities and SCSS.
 *
 * Values are the breakpoint's *min-width*, matching Tailwind. The mixin
 * subtracts a pixel when it needs a max-width query.
 */
/**
 * Breakpoint query.
 *
 * The map stores each breakpoint's min-width, the same way Tailwind's
 * `--breakpoint-*` variables do, so `$mobileFirst: true` uses the value as-is
 * and the max-width case stops a pixel short of it. That means
 * `breakpoint("sm")` and `breakpoint("sm", true)` never both match a width.
 */
/*********************
* BREAKPOINTS
*
* Names match the Tailwind scale in design-system.css:
* xxs 320, xs 375, sml 479, smlr 568, sm 768, md 992,
* lg 1025, wd 1200, lp 1400, bigLp 1600, xl 1930.
*
* @example
* below the breakpoint (max-width)
* @include breakpoint('sm') {
*	@content;
* }
*
* from the breakpoint up (min-width), matching the `sm:` utility prefix
* @include breakpoint('sm', true) {
*	@content;
*}
*********************/
/**
* Mixin to declare Font-face
*
*/
/**
 * Contact Panel. The section reuses the Page Hero's gradient so the opener and
 * this panel read as one continuous dark band, and the form fields are styled
 * here because the markup comes from Contact Form 7 rather than this template.
 */
.block-contact-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(250.49deg, #000000 0%, #043B68 52.88%, #1F1F1F 99.98%);
  pointer-events: none;
}
.block-contact-panel__form {
  /* Figma stacks the five fields 16px apart. */
}
.block-contact-panel__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.block-contact-panel__form p {
  margin: 0;
}
.block-contact-panel__form .bf-field {
  margin-bottom: 20px;
}
.block-contact-panel__form {
  /* 16px of flex gap plus 16px here is the 32px Figma leaves before the button. */
}
.block-contact-panel__form .bf-submit {
  margin-block-start: 16px;
}
.block-contact-panel__form {
  /* Each field is a label stacked 8px above its control. */
}
.block-contact-panel__form .bf-field label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.block-contact-panel__form .bf-field__label {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-bf-white);
}
.block-contact-panel__form .wpcf7-form-control-wrap {
  display: block;
}
.block-contact-panel__form {
  /* Figma draws each field as a 52px underline rather than a boxed input. */
}
.block-contact-panel__form input[type=text],
.block-contact-panel__form input[type=email],
.block-contact-panel__form input[type=tel],
.block-contact-panel__form textarea {
  display: block;
  width: 100%;
  height: 52px;
  padding: 12px 0;
  border: 0;
  border-block-end: 1px solid var(--color-bf-grey);
  background-color: transparent;
  color: var(--color-bf-white);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  transition: border-color 0.25s ease;
}
.block-contact-panel__form textarea {
  height: 100px;
  resize: vertical;
}
.block-contact-panel__form input::placeholder,
.block-contact-panel__form textarea::placeholder {
  color: var(--color-bf-grey);
  opacity: 1;
}
.block-contact-panel__form input:focus,
.block-contact-panel__form textarea:focus {
  border-block-end-color: var(--color-bf-brand);
  outline: none;
}
.block-contact-panel__form {
  /* CF7's own messages, legible on the dark panel. */
}
.block-contact-panel__form .wpcf7-not-valid-tip {
  color: #ff8a80;
}
.block-contact-panel__form .wpcf7-response-output {
  margin: 8px 0 0;
  color: var(--color-bf-white);
}
.block-contact-panel__form .wpcf7-spinner {
  margin-inline-start: 12px;
}
.block-contact-panel {
  /* The map is a plain iframe; this only stops it collapsing. */
}
.block-contact-panel__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.bf-contact-page .site-header {
  position: fixed;
  width: 100%;
}
body.bf-contact-page .site-header:not(.is-stuck) {
  background-color: transparent !important;
}

/*# sourceMappingURL=style-index.css.map*/