/* colors

lightblue: #F0F2F7
darkblue: #29499B

*/


@font-face{
  font-family:"ITC Clearface W01 Bold";
  src:url("../fonts/5727403/f8b2b3d4-a96c-4785-b5dc-efdd795b5edc.woff2") format("woff2"),url("../fonts/5727403/a70806b0-46e6-4144-b651-2c862212da1c.woff") format("woff");
}

/*
This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: http://www.fonts.com
*/

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto;
  }
}

body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   line-height: 1.6em;
   margin:0;
}

h1,h2,h3,h4,h5,h6,.itc {
  font-family: 'ITC Clearface W01 Bold';
  line-height: 1;
  letter-spacing: -0.03em;
}

figure {
  margin:0;
}

/* Utils */

.util__relative {
  position:relative;
}

.util__button,
button {
  font-family: 'ITC Clearface W01 Bold';
  line-height: 1;
  background-color:#29499B;
  color:#fff;
  border:1px solid #29499B;
  text-decoration:none;
  text-decoration: none;
  padding: 20px 30px;
  border-radius: 10px;
  margin-right: 12px;
  font-size:22px;
  cursor:pointer;
  transition:all 0.2s ease-out;
}

@media (max-width:767px){
  .util__button, button {
    font-size:20px;
  }
}

.util__button:hover,
.util__button--white,
button:hover {
  background-color:#fff;
  color:#29499B;
  transition:all 0.2s ease-in;
}

.util__button--white:hover {
  background-color:#29499B;
  color:#fff
}

.util__button-spacer {
  margin-top: 10px;
  display: inline-block;
}

.wrap {
  max-width:1200px;
  margin:0 auto;
}

@media (max-width:1260px){
  .wrap {
    padding: 0 30px;
  }
}

@media (max-width:400px){
  .wrap {
    padding: 0 20px;
  }
}

nav.sitenav {
  font-family: 'ITC Clearface W01 Bold';
  background-color:#f4e8de;
  padding:20px 0;
  position:relative;
}

nav.sitenav .wrap {
  display:flex;
  align-items: center;
  justify-content: center;
}

nav.sitenav .wrap > * {
  text-decoration: none;
  color: #000;
  font-size: 22px;
  flex: 1;
  white-space: nowrap;
  text-align:center;
  opacity:1;
  transition: opacity 0.2s ease-in;
}

nav.sitenav .wrap > *[aria-current='page']{
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

nav.sitenav .wrap > *:hover {
  color: #29499b;
}

@media (max-width:1100px){
  nav.sitenav .wrap > *:not(.nav-item__home) {
    visibility: hidden;
    opacity:0;
    display:none;
  }
}

nav.sitenav .wrap > *:first-child,
nav.sitenav .wrap > *:nth-child(2)  {
  text-align:left;
}

nav.sitenav .wrap > *:last-child {
  text-align:right;
}

nav.sitenav .nav-item__home {
  background-image:url(../images/bfd_logo_header-01.svg);
  background-repeat:no-repeat;
  background-position: center top;
  width: 300px;
  height: 100px;
  color:transparent;
  display: inline-block;
  flex: none;
  margin:0 40px;
  padding:0;
}

nav.sitenav .nav-item__home:hover {
  color:transparent;
}

nav.sitenav .nav-item__home[aria-current='page']{
  text-decoration: none;
}

@media (max-width:1100px){
  nav.sitenav .nav-item__home {
    margin:0 40px;
  }
}

@media (max-width:500px){
  nav.sitenav .nav-item__home {
    width: 40vw;
    height: 14vw;
  }
}

/* mobile menu */
.header__mobile-menu-button {
  display:block;
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  appearance: none;
  font-size: 0;
  width: 40px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease-in;
}

.header__mobile-menu-button:hover {
  background:transparent;
}


.header__mobile-menu-button span {
  display: block;
  width: 28px;
  height: 2px;
  background: #000;
  margin-bottom: 7px;
  margin-left: auto;
  margin-right: auto;
}
 .header__mobile-menu-button span:last-child {
    margin-bottom: 0;
  }

@media (min-width:1100px){
  .header__mobile-menu-button {
    display:none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
}

nav.mobilesitenav{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease-in;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:10;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  font-family: 'ITC Clearface W01 Bold';
  background-color:#f4e8de;
}

nav.mobilesitenav a {
  color:#000;
  text-decoration: none;
  font-size: 5vh;
  padding: 1vh 0;
  margin: 1vh 0;
}

nav.mobilesitenav a[aria-current='page'] {
  text-decoration: underline;
}

.js-menu-on nav.mobilesitenav {
  opacity:1;
  pointer-events: all;
  transition:opacity 0.3s ease-out;
}

.js-menu-on .header__mobile-menu-button {
  z-index:20;
  border-color:#000;
  transform:rotate(-45deg);
  transform-origin: center;
  right:-5px;
  background:transparent;
}

.js-menu-on .header__mobile-menu-button span:last-child {
  border-color:#000;
  transform:rotate(90deg);
  top: 11px;
  left: 6px;
  position: absolute;
  width: 29px;
}

.js-menu-on .header__mobile-menu-button span:first-child {
  display:none;
}

/* Layouts */

.layout {
  display: flex;
  padding: 90px 0;
}

.layout.stripe--odd {
  flex-direction: row-reverse;
}

@media (max-width:767px){
  .layout,
  .layout.stripe--odd {
    flex-direction: column;
    padding: 30px 0;
  }
}
@media (max-width:767px){
  .layout.layout--mobile-reverse {
    flex-direction: column-reverse;
  }
  .layout.layout--mobile-reverse .layout__child:first-child {
    padding-top:15px;
    margin-bottom:0;
  }
}


.layout__child {
  flex: 1;
}

.layout img {
  max-width:100%;
}

figure.rounded img {
  border-radius: 15px;
}

.layout__child:first-child p {
  margin-top:0;
}

/* Home */

/* Extra class qualifiers so these margins beat WP's flow-layout reset
   (.wp-block-group-is-layout-flow > * { margin-block-end: 0 }), which
   loads after this sheet and would otherwise zero them out. */
div.intro__text,
.intro__text {
  margin-bottom: 60px !important;
}

.intro h1 {
  font-size: 70px;
  margin: 0;
  padding-right: 50px;
}

@media (max-width:767px){
  .intro h1 {
    font-size: 40px;
    letter-spacing: -0.02em;
  }
}

.intro h1 p {
  margin: 0;
}

@media (max-width:1200px){
  .intro__text {
    margin-bottom: 30px !important;
  }
  .intro__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:30px !important;
  }
  .intro__cta a {
    margin-bottom: 15px;
    max-width: 220px;
  }
}

.seal {
  background:url('../images/seal.svg');
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  display:flex;
  justify-content: center;
  align-items:center;
  position: absolute;
  bottom: -70px;
  right: -27px;
  transition:transform 0.3s ease-out;
}

@media (max-width:767px){
  .seal {
    right: -20px;
    bottom: -20px;
  }
}

.seal span {
  padding: 0.6em 1em 1em;
  text-align: center;
  text-decoration: underline;
  font-size: 22px;
  line-height: 1.1em;
  color:#000;
}

a.seal:hover {
  transform:rotate(-10deg);
  transition:transform 0.3s ease-in;
}

/* outro */

.outro .layout__child:first-child {
  margin-right: 80px;
}

@media (max-width:767px){
  .outro .layout__child:first-child {
    margin-right: 0px;
    margin-bottom:30px;
  }

  .outro__cta {
    justify-content: center;
    display: flex;
    margin-bottom:30px;
  }

  .outro__cta a.util__button {
    margin-right: 0;
  }
}

.big-message {
  font-size: 70px;
  margin: 0;
}

@media (max-width:767px){
  .big-message {
    font-size: 40px;
    letter-spacing: -0.02em;
  }
}

.big-message p {
  margin:0;
}

/* generic layout w/ title */

.layout-with-title-wrap {
  padding-top: 50px;
  text-align: center;
}

.layout-with-title-wrap .layout {
  padding-top: 0;
}

h2.section-title {
  font-size: 54px;
  margin: 0;
}

h3 {
  font-size: 35px;
  margin:0;
}

.illu img {
  width: 50%;
  height: auto;
}


/* promos */
.promo .layout__child:nth-child(2) {
  margin: 0 100px;
}

@media (max-width:1100px){
  .promo .layout__child:nth-child(2) {
    margin: 30px 0px;
  }
}

.promo .layout {
  justify-content: space-between;
}

.promo .layout__child {
  display: flex;
  flex-direction: column;
}

.promo p {
  flex: 1;
}

.promo .util__button {
  margin: 0;
  display: inline-block;
}

@media (max-width:1100px){
  .promo .layout {
    flex-direction: column;
  }
}

/* forms */

form label {
  position:relative;
}

form label span {
  position: absolute;
  pointer-events: none;
  background:#fff;
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1;
  top:13px;
  left:12px;
  padding-left:8px;
  transition:all 0.25s ease-in;
}

form label.input--focus span,
form label.input--has-content span {
  font-size:13px;
  top:-13px;
  border-color: #DEDEDD;
  transition:all 0.25s ease-out;
}

form label input {
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #DEDEDD;
  font-size:18px;
  display: block;
  width: 220px;
}

@media (max-width:767px){
  form label input {
    width: 260px;
  }
}

/* Get in touch */

.getintouch {
  background-color:#F0F2F7;
  padding: 50px 0;
  margin-top:50px;
  text-align:center;
  position: relative;
}

@media (max-width:767px){
  .getintouch__intro {
    padding: 0 14px;
  }
}

.getintouch img {
  width: 103px;
  position: absolute;
  left: calc(50% - 50px);
  top: -60px;
}

.getintouch__fields {
  display:flex;
  flex-wrap:wrap;
  margin:0 auto;
  max-width: 550px;
}
.getintouch__fields label {
  margin-bottom:15px;
}

@media (max-width:767px){
  .getintouch__fields label {
    margin: 0 auto 10px;
  }
}

.getintouch__fields label:first-child,
.getintouch__fields label:nth-child(3) {
  margin-right:15px;
}

@media (max-width:767px){
  .getintouch__fields label:first-child,
  .getintouch__fields label:nth-child(3) {
    margin-right:auto;
  }
}

.getintouch button {
  min-width:150px;
}

label.mainmessage {
  width: 100%;
  max-width: 538px;
  margin: 0 auto 10px;
  display: block;
  padding-right: 14px;
}

@media (max-width:767px){
  label.mainmessage {
    width: 300px;
    padding-right: 0;
  }
}

textarea.input {
  width: calc(100% - 40px);
  height: 130px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #dedede;
}

/* Footer */

footer {
  padding:50px 0;
  background-color:#29499B;
  color:#fff;
  display:flex;
  align-items: center;
}

footer a {
  color:#fff;
}

.foot-col {
  flex:1;
  text-align:center;
}

@media (max-width:767px){
  footer {
    flex-direction: column;
  }
}

/* Content Sections */

.content-section {
  padding: 50px 0 70px;
  border-bottom:2px solid #000;
}

.content-section.content-section--noline {
  border-bottom:none;
  padding-bottom:0;
}

.content-section.content-section--0 {
  padding-top:0;
}

.content-section:last-child {
  border-bottom: none;
}

.content-section .layout__child:first-child {
  margin-right: 80px;
}

.content-section .stripe--odd .layout__child:first-child {
  margin-right: 0px;
  margin-left:80px;
}

@media (max-width:767px){
  .content-section .layout__child:first-child {
    margin-right: 0px;
    margin-bottom:30px;
  }

  .content-section .stripe--odd .layout__child:first-child {
    margin:0;
  }
}

.content-section .layout--2 {
  padding: 70px 0 0;
}

@media (max-width:767px){
  .content-section .layout--2 {
    padding: 30px 0 0;
  }
}

.content-section__heading {
  font-size: 80px;
  margin: 0;
  text-align:center;
}

.content-section__heading--small {
  font-size: 50px;
  margin: 0;
  line-height: 1;
  text-align:center;
}

.content-section__heading--small p{
  margin:0;
}

@media (max-width:767px){
  .content-section__heading {
    font-size: 50px;
  }
}

.content-section h3 {
  font-size: 50px;
}

@media (max-width:767px){
  .content-section h3 {
      font-size: 35px;
  }
}

/* Subnav for jumplinks */

.subnav {
  background-color:#29499B;
  color:#fff;
  font-family: 'ITC Clearface W01 Bold';
  line-height: 1;
  display:flex;
  justify-content: center;
  font-size:22px;
}

@media (max-width:767px){
  .subnav {
    display:none;
  }
}

.subnav a {
  color:#fff;
  text-decoration:none;
  padding:20px;
}

/* Team */

.layout--4 {
  flex-wrap: wrap;
  padding-bottom: 0;
  padding-top: 30px;
}

#team .layout__child.team-member {
  margin: 0;
  padding: 35px;
  width: calc(25% - 70px);
  flex:none;
}

@media (max-width:767px){
  #team .layout__child.team-member {
    width: 80%;
  }
}

.layout--4 .layout__child img {
  width:100%;
}

img.circle {
  border-radius:50%;
  width:100%;
}

.team-member a {
  color: #000;
  text-decoration: none;
}

h4.team-member__name {
  font-size: 28px;
  text-align: center;
  margin-bottom: 0;
  color:#29499B;
}

p.team-member__role {
  text-align: center;
  margin-top: 0.5em;
}

/* Modals */

dialog {
  display: block;
  border: 0;
}

.no-scroll {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 666;
}

.modal__wrapper {
  position: relative;
}

.modal {
  position: fixed;
  left: 0;
  right: auto;
  top: 0;
  width: calc(100% - 160px);
  height: calc(100% - 200px);
  padding: 100px 80px;
  margin: 0;
  background: rgba(255,255,255,.95);
  z-index: 667;
}

.modal__content > div {
  display: flex;
}

@media (max-width:767px){
  .modal__content > div {
    flex-direction:column;
    height: calc(100vh - 143px);
  }
}

.modal__photo {
  margin-right:80px;
  padding-top: 20px;
  flex:1;
}

@media (max-width:767px){
  .modal__photo {
    margin-right: 0px;
    padding-top: 0px;
    flex:none;
  }
}

.modal__text {
  flex:1;
  overflow: scroll;
  padding-bottom: 250px;
  max-height: 80vh;
}

@media (max-width:767px){
  .modal__text {
    overflow: scroll;
    padding-bottom:250px;
  }
  .modal__text:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 250px;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  }
}

@media (max-width:767px){
  .modal__name {
    font-size: 60px;
    margin: 0;
  }
}

.modal__name {
  font-size: 40px;
  margin: 20px 0 0;
}

button.js-modal-close {
  background: transparent;
  border: none;
  position:relative;
  padding: 35px;
  width: 30px;
  height: 30px;
  margin: 0;
  transform: rotate(45deg);
  position: absolute;
  top: -70px;
  right: 0;
}

button.js-modal-close span {
  visibility: hidden;
}

button.js-modal-close:after {
  content:"";
  display:block;
  width:30px;
  height:1px;
  border-bottom:2px solid #000;
  position:absolute;
  top:33px;
  left:20px;
}

button.js-modal-close:before {
  content:"";
  display:block;
  width:1px;
  height:30px;
  border-right:2px solid #000;
  position:absolute;
  top:20px;
  left:33px;
}

/* Services */

.content-section__intro {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.layout.layout--1 {
  flex-direction: column;
  padding-top: 30px;
}

.minimalist-accordion__panel[aria-hidden=true] {
  display: none;
}

.minimalist-accordion__header {
  display: block;
  color: #29499B;
  background: #fff;
  border: none;
  font-size: 40px;
  text-align: center;
  width: 100%;
  position:relative;
}

.layout__child--accordion-small .minimalist-accordion__header {
  font-size:23px;
  text-align:left;
  padding: 10px 0;
}

.js-accordion__panel--textonly .ac__text {
  max-width: 700px;
  text-align: center;
  margin: 0 auto;
}

.layout__child--accordion-small .js-accordion__panel--textonly .ac__text {
  text-align:left;
}

.ac__text p {
  margin: 0 0 1em;
}

.ac__text p:last-child {
  margin: 0 0 2em;
}

.minimalist-accordion__title{
  border-top: 2px solid #000;
  margin: 0;
  padding: 10px;
}

.layout__child--accordion-small .minimalist-accordion__title {
  padding-left:0;
  padding-right:0;
}

.minimalist-accordion {
  border-bottom:2px solid #000;
}

.minimalist-accordion__header[aria-expanded="true"]:after {
  content: "";
  position: absolute;
  right: 0;
  top: 37px;
  width: 25px;
  height: 2px;
  border-top: 5px solid;
}

.minimalist-accordion__header[aria-expanded="false"]:after {
  content: "";
  position: absolute;
  right: 0;
  top: 37px;
  width: 25px;
  height: 2px;
  border-top: 5px solid;
}

.minimalist-accordion__header[aria-expanded="false"]:before {
  content: "";
  position: absolute;
  right: 10px;
  top: 27px;
  width: 1px;
  height: 25px;
  border-right: 5px solid;
}

.layout__child--accordion-small .minimalist-accordion__header[aria-expanded="true"]:after {
  right: 0px;
  top: 21px;
  width: 20px;
  height: 2px;
  border-top: 3px solid;
}

.layout__child--accordion-small .minimalist-accordion__header[aria-expanded="false"]:after {
  right: 0px;
  top: 21px;
  width: 20px;
  height: 2px;
  border-top: 3px solid;
}

.layout__child--accordion-small .minimalist-accordion__header[aria-expanded="false"]:before {
  right: 8px;
  top: 12px;
  width: 1px;
  height: 21px;
  border-right: 3px solid;
}

.content-section .layout__child.layout__child--accordion:first-child {
  margin-right: 0px;
}

.js-accordion__panel--visual {
  display: flex;
}

.js-accordion__panel--visual > * {
  flex:1;
}

.js-accordion__panel--visual > *:first-child {
  margin-right:80px;
  padding-bottom:30px;
}

@media (max-width:767px){
  .js-accordion__panel--visual {
   flex-direction:column;
  }

  .js-accordion__panel--visual > *:first-child {
    margin-right:0px;
    padding-bottom:30px;
  }
}

.content-section.content-section--no-border {
  border-bottom: none;
}

/* Location and Hours */

.map iframe {
  width: 100%;
  height: 35vw;
  margin-bottom:20px;
}

.rounded iframe {
  border-radius: 20px;
}

h2.address {
  margin: 0;
  color: #29499B;
}

/* homepage gallery */

.gallery {
 width: 45vw;
 max-width:600px;
}

@media (max-width:767px){
  .gallery {
    width: calc(100vw - 60px);
    max-width: 100%;
  }
 }

.gallery img {
  width:100%;
}

.space-bottom {
  margin-bottom:30px;
}
/* ============================================================
   WordPress compatibility layer (added during WP migration).
   Everything above is the live site's stylesheet, verbatim.
   ============================================================ */

/* Template-part wrappers behave like the live bare elements. */
header.wp-block-template-part {
  display: block;
}

/* Vanilla fade slider (replaces Slick): stack slides, crossfade. */
.fade.bfd-fade-initialized {
  position: relative;
}
.fade.bfd-fade-initialized .bfd-fade-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.fade.bfd-fade-initialized .bfd-fade-slide.is-active {
  opacity: 1;
  position: relative; /* active slide defines the height */
}

/* Neutralize WP block-gap/margins inside live-class containers so
   core blocks used within them keep the live geometry. */
.wrap > :where(.wp-block-group) ,
.layout > :where(.wp-block-group) {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* wp:image inside live layouts: no extra figure margins (live sets figure{margin:0}) */
.layout .wp-block-image {
  margin: 0;
}

/* Buttons built as live-class anchors keep live styling even if WP
   wraps them; also let .util__button win over theme.json button colors. */
a.util__button,
a.util__button:visited {
  color: #fff;
}
a.util__button:hover {
  color: #29499B;
}

/* Restore native (UA) margins inside post content: the live site relies on
   default <p>/<h*> margins; WP's block-gap :where() rules would override
   them and shift spacing. */
.wp-block-post-content :where(.is-layout-flow) > *,
.wp-block-post-content :where(.is-layout-constrained) > * {
  margin-block-start: revert;
  margin-block-end: revert;
}
.wp-block-post-content > :where(:first-child) {
  margin-block-start: revert;
}
/* ...but live.css zeroes these explicitly (h3/figure { margin: 0 }); that
   rule is too weak to beat the revert above, so restate it stronger here. */
.wp-block-post-content h3,
.layout h3 {
  margin: 0;
}
.wp-block-post-content figure,
.layout figure {
  margin: 0;
}
/* The live site's section dividers are plain unstyled <hr>s (full width,
   1px inset gray). Strip the core separator-block styling back to that. */
.wp-block-post-content hr.wp-block-separator,
.content-section hr.wp-block-separator,
.layout hr.wp-block-separator {
  all: revert !important;
}

/* Feed Query Loops (community / vlog): make the WP wrappers invisible to
   the live layout so entries render exactly like the Kirby feed rows. */
.bfd-feed ul.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* entry-content wrapper joins the flex row as if it weren't there */
.bfd-feed .layout > .wp-block-post-content {
  display: contents;
}
/* live feed starts on a stripe--even (image right) row and alternates, so
   every second entry is the reversed one. The text group is first in the DOM
   and carries the 80px gutter as margin-right; on a reversed row that margin
   points at the outer edge instead of at the image, so swap it to margin-left
   exactly as .stripe--odd does on the live site. */
@media (min-width: 768px) {
  .bfd-feed li.wp-block-post:nth-child(even) .layout--2 {
    flex-direction: row-reverse;
  }
  .bfd-feed li.wp-block-post:nth-child(even) .content-section .layout__child:first-child {
    margin-right: 0;
    margin-left: 80px;
  }
}
/* each entry is alone inside its <li>, so restore the between-entry
   borders that .content-section:last-child would otherwise remove */
.bfd-feed .content-section {
  border-bottom: 2px solid #000;
}
.bfd-feed li.wp-block-post:last-child .content-section {
  border-bottom: none;
}

/* Team grid Query Loop: replicate the live .layout--4 card grid */
#team .bfd-team ul.wp-block-post-template {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 30px 0 0;
}
#team .bfd-team li.wp-block-post {
  margin: 0;
  padding: 35px;
  width: calc(25% - 70px);
}
@media (max-width: 767px) {
  #team .bfd-team li.wp-block-post {
    width: 80%;
  }
}
#team .bfd-team img,
.modal__photo img {
  border-radius: 50%;
  width: 100%;
  height: auto;
}
#team .bfd-team h4.team-member__name {
  font-size: 28px;
  text-align: center;
  margin-bottom: 0;
  color: #29499B;
}
#team .bfd-team .team-member__role {
  text-align: center;
  margin-top: 0.5em;
}
#team .bfd-team .team-member__role a {
  color: #000;
  text-decoration: none;
  pointer-events: none;
}
#team .bfd-team a.js-modal {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  display: block;
}
/* hidden modal source content */
.teammodal-src {
  display: none;
}

/* No gap between the top-level template sections (header / content /
   footer) — WP adds a default block gap there; the live site has none. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* A subheading inside a reason. Left to itself it renders larger than
   the h2 it sits under and with no space around it, so it is pinned
   below its parent heading and given the same rhythm. */
.content-section .reason__subhead {
  font-size: 30px;
  line-height: 1.2;
  margin: 34px 0 18px;
}

/* ============================================================
   In-content prose links.

   The live site has no links inside body copy anywhere, so it never
   needed a rule and there isn't one to port. Left alone, the links we
   have added (Reason #1 through to the Fuel the Frontline page, and
   the "click here" in its paragraph) render in default browser blue,
   which reads as broken next to this palette. Navy is the site's own
   accent, already used for buttons, the subnav and headings.

   Scoped to prose so it cannot touch navigation, buttons or the
   footer, none of which should change.
   ============================================================ */

.content-section p a:not(.util__button),
.content-section li a:not(.util__button),
.content-section h2 a,
.content-section h3 a,
.ff__text p a:not(.util__button),
.nomination-form__call a {
  color: #29499B;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.content-section p a:not(.util__button):hover,
.content-section li a:not(.util__button):hover,
.content-section h2 a:hover,
.content-section h3 a:hover,
.ff__text p a:not(.util__button):hover,
.nomination-form__call a:hover {
  text-decoration: none;
}

/* ============================================================
   Fuel the Frontline hero.

   A new component with no counterpart on the live site, built to
   match the standalone comp the client approved: full-bleed navy band,
   oversized Playfair Display headline, and a video card that overlaps
   the band into the white section beneath it.

   The comp's navy band is swapped for the site's own cream (#f4e8de,
   the same value as the header bar) with the type in the site navy --
   the client asked for the band to read warm rather than blue.

   Playfair Display is self-hosted (assets/fonts/playfair/) like the
   Clearface face above -- no CDN, consistent with the rest of the
   theme.
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/playfair/playfair-display-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Break out of .wrap's 1200px column so the navy runs edge to edge.
   100vw includes the scrollbar gutter, so pull back by half of it. */
.ff {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}

/* Opening the page: cancel .content-section's 50px top padding so the
   band starts flush under the subnav. */
.content-section > .ff:first-child {
  margin-top: -50px;
}

.ff__hero {
  background: #f4e8de;
  padding: 24px 64px 70px;
}

.ff__inner {
  max-width: 1552px;
  margin: 0 auto;
}

.ff__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #29499B;
  margin: 0 0 12px;
  line-height: 1.2;
}

.ff .ff__title {
  font-family: 'Playfair Display', Georgia, serif;
  /* Sized so the band, the video and the body copy all clear the fold. */
  font-size: clamp(38px, 5.5vw, 92px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #29499B;
  margin: 0 0 16px;
}

.ff__lead {
  font-size: 20px;
  line-height: 30px;
  color: #161616;
  max-width: 620px;
  margin: 0;
}

.ff__lead strong {
  color: #29499B;
}

.ff__body {
  padding: 0 64px 60px;
}

.ff__grid {
  display: grid;
  grid-template-columns: 744fr 744fr;
  column-gap: 64px;
  align-items: center;
}

/* Pull the video up over the band, as in the comp. align-self keeps the
   negative margin from being swallowed by the row's centre alignment. */
.ff .ff__video {
  align-self: start;
  margin-top: -44px;
  max-width: 570px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
  background: #111;
  line-height: 0;
}

.ff__video iframe,
.ff__video .wp-block-embed__wrapper {
  border-radius: 14px;
}

.ff__text p {
  margin: 0 0 28px;
}

/* The nomination section on the dedicated Fuel the Frontline page. */
.ff__nominate {
  padding: 0 64px 64px;
}

.ff .ff__nominate-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.15;
  color: #29499B;
  margin: 0 0 28px;
}

.ff__form-wrap {
  max-width: 720px;
}

.ff__note {
  max-width: 720px;
  margin: 30px 0 0;
}

@media (max-width: 1100px) {
  .ff__nominate {
    padding: 0 30px 44px;
  }
}

/* Closing cream band carrying the thank-you line, as in the comp. */
.ff__thanks {
  background: #f4e8de;
  padding: 46px 64px 52px;
}

.ff .ff__thanks-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.15;
  color: #29499B;
  margin: 0;
}

@media (max-width: 1100px) {
  .ff__thanks {
    padding: 36px 30px 40px;
  }
}

/* The comp's CTA is a pill, not the site's square util__button. */
.ff__cta .wp-block-button__link {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  background-color: #29499B;
  border: 1px solid #29499B;
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.ff__cta .wp-block-button__link:hover {
  background-color: #fff;
  color: #29499B;
  transition: all 0.2s ease-in;
}

/* The nomination form's submit button, matching the pill above. */
.ff .nomination-form .contact-submit {
  align-self: flex-start;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  background-color: #29499B;
  border: 1px solid #29499B;
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  margin: 0;
  transition: all 0.2s ease-out;
}

.ff .nomination-form .contact-submit:hover {
  background-color: #fff;
  color: #29499B;
  transition: all 0.2s ease-in;
}

.ff .nomination-form .contact-submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 1100px) {
  .ff__hero {
    padding: 50px 30px 100px;
  }

  .ff__body {
    padding: 0 30px 50px;
  }

  .ff__grid {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .ff .ff__video {
    margin-top: -40px;
  }
}

@media (max-width: 767px) {
  .ff__lead {
    font-size: 19px;
    line-height: 29px;
  }

  /* Keep the phone number on one line -- it was breaking mid-number. */
  .ff__cta .wp-block-button__link {
    font-size: 15px;
    padding: 14px 22px;
  }

  .ff .ff__video {
    margin-top: -32px;
  }
}