/* =================================================================
   EBM Group - custom styles

   theme.min.css and user.min.css belong to the Elixir template and are
   minified, so nothing is edited there. Everything bespoke lives here
   and this file loads last, which is what lets a plain single-class
   selector win against a template rule of the same weight.
   ================================================================= */

/* -----------------------------------------------
   Heading font: the one variable that drives it

   The template routes its heading font through this variable, and the
   rules that use it are compound selectors like

       .testimonials .testimonial-item h3
       .faq .faq-item .faq-header h4
       .section-title h2

   which out-specify any plain h1-h6 rule. Chasing each of them with a
   longer selector would mean finding all seven and re-finding them
   whenever the template changes. Redefining the variable once fixes
   every consumer at the source instead.

   This is only the heading face. Body text runs off
   --elixir-body-font-family, which is already Open Sans, so the two
   now agree rather than fighting.
------------------------------------------------ */
:root {
  --elixir-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* -----------------------------------------------
   Heading font and spacing

   theme.min.css styles bare h1 to h6 as Montserrat with a negative
   letter-spacing - minus 2.4px on an h2, minus 4px on the hero h1.
   That is what makes the testimonial names and the section headings
   read as squashed, with the letters running into each other.

   It affects all 57 headings on the site, not just the testimonials,
   so this resets it once rather than section by section. Same
   specificity as the theme rules but later in the cascade, so it wins
   on source order. Anything that genuinely wants Montserrat can still
   ask for it with a class.
------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
}

/* The small uppercase label above each section title. Its wide tracking
   is deliberate and correct for uppercase at that size, so only the
   face is changed, not the spacing. */
.section-title .subtitle {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -----------------------------------------------
   Section rhythm

   The template gave a bare <section> 120px top and bottom, while
   anything carrying Bootstrap's py-6 got 64px - and the two were mixed
   on three of the four pages, which is what made the spacing look
   arbitrary. py-6 is declared !important so it cannot be overridden
   from here; it was removed from the markup instead, leaving this one
   rule in charge.

   Change the variable below and every band on the site moves together.
   120px was the template default, 64px is what the Maine site uses;
   80px sits between them and stops the page feeling half empty on a
   laptop.
------------------------------------------------ */
:root {
  --ebm-section-space: 80px;
  --ebm-section-space-sm: 56px;
}

/* Scoped to body, not "main > section". The inner pages were built by
   splicing sections in next to <main> rather than inside it, so a
   child selector reached almost none of them: every section on the
   About page, and all but one on Services, kept the template's
   7.5rem and ran 40px looser than the home page. */
body section {
  padding-top: var(--ebm-section-space);
  padding-bottom: var(--ebm-section-space);
}

/* The page banner is sized deliberately and is not part of the
   rhythm. Pinned to what it already computed to, so widening the rule
   above does not shrink it. */
body section.page-banner {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

/* A logo strip is a divider, not a content section: no heading, one
   row of marks. It gets the smaller step so it stops reading as a
   full section of its own. */
body section.ebm-partners {
  padding-top: var(--ebm-section-space-sm);
  padding-bottom: var(--ebm-section-space-sm);
}

/* The hero sets its own height and carries py-0, which is !important
   and therefore already wins. Restated so the intent is visible rather
   than depending on a utility class further up the file. */
body section.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

/* 80px top and bottom is 160px of empty space on a phone screen that
   is only ~850px tall, so it steps down. */
@media (max-width: 767.98px) {
  body section {
    padding-top: var(--ebm-section-space-sm);
    padding-bottom: var(--ebm-section-space-sm);
  }

  body section.ebm-partners {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* -----------------------------------------------
   Core values slider

   Lives in the card that used to hold a single fixed quote. Fade
   rather than slide, because the card is small and a horizontal
   movement that short reads as a glitch.
------------------------------------------------ */
.core-values {
  /* Fading slides sit on top of one another, so without a floor the
     card's height jumps to whichever value is showing. This holds it
     to the tallest. */
  min-height: 132px;
}

.core-values .swiper-slide {
  /* The theme's slides are flex items elsewhere; here each one is a
     block of text that has to fill the slide for the fade to line up. */
  height: auto;
}

.core-value-name {
  margin: 0 0 8px;
  color: #13232F;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
}

.core-value-text {
  margin: 0;
  color: #6a6a6a;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Dots under the card. Laid out here rather than left to Swiper's
   absolute default, which would place them over the text. */
.core-values-pagination {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.core-values-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, #13232F, transparent 72%);
  opacity: 1;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.core-values-pagination .swiper-pagination-bullet-active {
  /* A wider pill rather than only a colour change, so which one is
     active is still clear without relying on colour alone. */
  width: 20px;
  border-radius: 4px;
  background-color: #13232F;
}

/* The same button inside a service division's text column. The card
   version is a full-width stack; here it sits inline under the text,
   so it hugs its label instead. */
/* Both classes in the selector, not just the modifier. The base
   .service-actions rule sets column + stretch at the same specificity,
   and it happens to sit later in this file - so a single-class
   override was losing on source order and the button stretched to the
   full 458px column. */
.service-actions.service-actions-inline {
  flex-direction: row;
  align-items: flex-start;
  margin-top: 22px;
  padding-top: 0;
}

.service-actions.service-actions-inline .service-btn {
  width: auto;
  flex: 0 0 auto;
}

/* -----------------------------------------------
   Legal page

   Ported from the Maine site, recoloured to EBM's navy. The side nav
   sticks so the three policies stay reachable while reading, and each
   block carries scroll-margin so a footer link landing on #privacy is
   not hidden behind the fixed header.
------------------------------------------------ */
.legal-nav {
  position: sticky;
  top: 100px;
  padding: 20px;
  background-color: #f2f4f7;
  border-left: 3px solid #13232F;
}

.legal-nav-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #13232F;
}

.legal-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-nav li + li {
  margin-top: 8px;
}

.legal-nav a {
  color: #13232F;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-nav a:hover {
  color: #3D4C6F;
  text-decoration: none;
}

.legal-updated {
  margin: 16px 0 0;
  font-size: 0.78rem;
  color: #6a6a6a;
}

.legal-block {
  scroll-margin-top: 110px;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid #e2e2e2;
}

.legal-block:last-of-type {
  border-bottom: 0;
}

.legal-block h2 {
  margin: 0 0 18px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #13232F;
}

.legal-block h3 {
  margin: 26px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #13232F;
}

.legal-block p,
.legal-block li {
  color: #3a3a3a;
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-block ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.legal-block li {
  margin-bottom: 6px;
}

.legal-block a {
  color: #3D4C6F;
  font-weight: 600;
}

.legal-footnote {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #6a6a6a;
}

@media (max-width: 991.98px) {
  .legal-nav {
    position: static;
  }
}

/* -----------------------------------------------
   Footer

   Everything in here used to be bold at roughly one size, so nothing
   led and nothing followed. Now only the two column headings carry
   weight; the links sit a step down, lighter and slightly muted, and
   brighten on hover.
------------------------------------------------ */
.footer-heading {
  margin-bottom: 16px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-list {
  margin-bottom: 0;
}

.footer-list li + li {
  margin-top: 10px;
}

.footer-list a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: #fff;
  text-decoration: none;
}

/* The marks alone, in a row. They used to be a column of their own with
   the network's name spelled out beside each one, which took a third of
   the footer to say what three icons say. */
.footer-social {
  display: flex;
  /* Its own column, running down rather than across. */
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  /* The columns beside it start below a heading; this one has none, so
     it borrows the same offset instead of floating higher than them. */
  margin-top: 32px;
}

/* Stacked, the footer is one column wide and a vertical strip of icons
   would run down the page on its own, so they go back into a row. */
@media (max-width: 991.98px) {
  .footer-social {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 24px;
  }
}

.footer-social li + li {
  margin-top: 0;
}

.footer-social a {
  display: inline-flex;
  text-decoration: none;
}

.footer-social .brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}

.footer-social a:hover .brand-icon,
.footer-social a:focus-visible .brand-icon {
  background-color: rgba(255, 255, 255, 0.24);
}

/* -----------------------------------------------
   Service card list separators
------------------------------------------------ */

/* The dot between items on the service cards. Darker and larger than
   the grey text it divides, so the description reads as a list rather
   than a sentence.

   line-height: 0 matters: a glyph set above the paragraph's own size
   would otherwise grow the line box it sits in, and the lines of a
   three-line description would no longer be evenly spaced. */
.svc-dot {
  color: #13232F;
  /* A bullet rather than a middle dot: the middle dot's glyph is tiny
     even when the type is set large, so it had to be scaled past the
     text to be seen at all. The bullet is the mark a list actually
     uses and reads at close to the text's own size. */
  font-size: 1.05em;
  line-height: 0;
  vertical-align: 0.02em;
  margin: 0 3px;
}

/* -----------------------------------------------
   Stats row: keep the rule below the numbers

   The template gives this row a border top and bottom. An earlier pass
   dropped the bottom one, because the "Discover" link that used to sit
   under it had been removed and the line was left dividing nothing.
   The line is wanted, so only the trailing margin stays trimmed: the
   border and its 2.5rem of padding come back from the template, while
   margin-bottom: 0 stops the 3rem beneath it stacking onto the
   section's own 80px and reading as an oversized gap.
------------------------------------------------ */
.about .stats-wrapper:last-child {
  margin-bottom: 0;
}

/* Tighter than the template's 3rem / 2.5rem. The row is two figures
   and two labels, and that much air made the rules read as separating
   the stats from the page rather than framing them. */
.about .stats-wrapper {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* -----------------------------------------------
   Service card actions

   Two actions per card: the call-back form on this page, and the
   detail on the services page. Icons are from Font Awesome 5.15.4 -
   phone-alt and arrow-right both exist in that build, which matters
   because its JS replaces the element with an <svg> and a name it does
   not know renders nothing at all, without an error.
------------------------------------------------ */

/* Pushes the buttons to the bottom of the card so they line up across
   the row no matter how long each description runs. */
.card-body:has(.service-actions) {
  display: flex;
  flex-direction: column;
}

.service-actions {
  display: flex;
  /* Side by side, falling back to stacked only where they genuinely do
     not fit. Each button may grow, but a flex item's automatic minimum
     is its own content, so neither can be squashed below its label.
     With wrapping on, a card too narrow for both simply breaks the row
     and each button takes the full width. No breakpoint to maintain:
     it responds to the card it is actually in, and the cards are three
     different widths across the layout. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  /* Pinned to the foot of the card, so the buttons line up across the
     row whatever length each description runs to. The cost is that the
     gap above them is not constant: a card with a line less to say
     shows the difference as empty space. That is deliberate, and the
     lesser of the two evils - ragged buttons across a row of cards are
     more obvious than an uneven gap within one.

     The 12px is the floor, applying when a card is the tallest and has
     no slack to distribute. The description's own margin-bottom is
     zeroed just below, so this is the whole of that minimum. */
  margin-top: auto;
  padding-top: 12px;
}

/* The description's trailing margin is part of that gap too. Zeroed
   here so the spacing above the buttons is set in one place. */
.card-body:has(.service-actions) p {
  margin-bottom: 0;
}

.service-actions .service-btn {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}

.service-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  justify-content: center;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease;
}

/* a:hover{text-decoration:underline} in the theme would otherwise
   underline these on hover, so it is restated at a weight that wins. */
.service-btn:hover,
.service-btn:focus-visible {
  text-decoration: none;
}

.service-btn-solid {
  background-color: #13232F;
  border-color: #13232F;
  color: #fff;
}

.service-btn-solid:hover,
.service-btn-solid:focus-visible {
  background-color: #24404f;
  border-color: #24404f;
  color: #fff;
}

.service-btn-ghost {
  background-color: transparent;
  border-color: color-mix(in srgb, #13232F, transparent 72%);
  color: #13232F;
}

.service-btn-ghost:hover,
.service-btn-ghost:focus-visible {
  border-color: #13232F;
  background-color: color-mix(in srgb, #13232F, transparent 94%);
  color: #13232F;
}

/* The arrow leads the eye out of the card, so it nudges on hover. */
.service-btn-ghost .fa-arrow-right {
  transition: transform 0.2s ease;
}

.service-btn-ghost:hover .fa-arrow-right {
  transform: translateX(3px);
}

/* -----------------------------------------------
   Service bands

   One card per service: the photograph sits inside the card behind a
   diagonal edge, the side alternates down the page, and a number sits
   on the join. Separate cards with a gap between them, not one
   continuous block.
------------------------------------------------ */
.svc-band {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Each band is its own card, so they are not attached to each other. */
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 6px;
  /* The shadow is what separates a band from the page behind it, since
     the card and the page are both white. */
  box-shadow: 0 10px 34px rgba(19, 35, 47, 0.11);
  overflow: hidden;
}

.svc-band:last-child {
  margin-bottom: 0;
}

/* Alternating sides. Reversing the flow rather than re-ordering the
   markup keeps the reading order the same for a screen reader. */
.svc-band--right {
  flex-direction: row-reverse;
}

.svc-media {
  position: relative;
  flex: 0 0 34%;
  min-height: 300px;
  /* The diagonal. A clip-path rather than a skewed element, so the
     photograph itself is never distorted - only the shape it is seen
     through. The image side is wider at the top. */
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

.svc-band--right .svc-media {
  /* Mirrored, so the slant always leans away from the text. */
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.svc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The number sits on the join between photograph and text. */
/* Positioned against the band, not the media. Inside .svc-media the
   diagonal clip-path cut the badge in half - a clip applies to an
   element's whole subtree, so anything placed in there is clipped with
   the photograph. */
.svc-number {
  position: absolute;
  top: 18px;
  left: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #13232F;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.svc-band--right .svc-number {
  left: auto;
  /* Sat at the corner of the card. The left-hand bands keep their
     badge out over the photograph, but on this side the wedge runs
     away from that spot, so the corner is the only place it reads as
     a deliberate position rather than a floating circle. */
  right: 26px;
}

.svc-body {
  flex: 1 1 auto;
  padding: 34px 38px;
}

.svc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #13232F;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: normal;
}

.svc-title .fas {
  color: #13232F;
  font-size: 1.05rem;
}

.svc-lead {
  margin: 0 0 18px;
  color: #6a6a6a;
  font-size: 0.97rem;
  line-height: 1.65;
}

/* Two columns so a long list does not push the band taller than the
   photograph beside it. */
.svc-list {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}

.svc-list li {
  break-inside: avoid;
  position: relative;
  margin-bottom: 7px;
  padding-left: 22px;
  color: #4a4a4a;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The tick is drawn rather than placed as an icon element, so a long
   list costs nothing extra to render. */
.svc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #13232F;
  border-bottom: 2px solid #13232F;
  transform: rotate(-45deg);
}

/* Below the point where a side-by-side band leaves the text too
   narrow, the photograph becomes a shorter header across the top and
   the service reads underneath it. The diagonal flips to run across
   the band rather than down it. */
@media (max-width: 991.98px) {
  .svc-band,
  .svc-band--right {
    flex-direction: column;
  }

  .svc-media {
    flex: 0 0 auto;
    min-height: 0;
    height: 170px;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
  }

  .svc-band--right .svc-media {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 84%);
  }

  /* Stacked, the photograph is a short header strip. The badge is
     pinned to the top of it, rather than left at the bottom - which,
     now that it hangs off the band instead of the media, is the bottom
     of the whole card.

     It also follows the deep side of the slant. The two clips above
     are mirrored, so the strip is full height on the left for one
     variant and on the right for the other, and the badge goes to
     whichever side has the room. */
  .svc-number {
    top: 16px;
    bottom: auto;
    left: 20px;
    right: auto;
  }

  .svc-band--right .svc-number {
    left: auto;
    right: 20px;
  }

  .svc-body {
    padding: 26px 24px;
  }
}

@media (max-width: 575.98px) {
  .svc-list {
    columns: 1;
  }

  .svc-media {
    height: 140px;
  }
}

/* -----------------------------------------------
   Why Choose Us: wrap the prose around the values card

   Only the lines that actually sit at the card's height need to be
   shorter. Narrowing the whole column instead would reflow paragraph
   one, which was never covered.

   So an invisible float is placed at the top of the column, as wide as
   the card intrudes and as tall as the card's lower edge. shape-outside
   then pulls its exclusion zone down to where the card actually starts,
   which is why the lines above it keep the full measure: a plain float
   would push every line from the first one down.

   The two blocks below are the two layouts this column has. The card is
   anchored to the image, so its offset from the top of this column
   changes when the row changes shape at 1200px. Measured, not guessed:
   the card intrudes 17.8% and starts 302px down on the wide layout,
   21.4% and 223px down on the narrow one.
------------------------------------------------ */
@media (min-width: 1200px) {
  .about .content::before {
    content: "";
    float: right;
    width: 22%;
    /* Stops short of the stats row rather than running to the card's
       own bottom edge. The card hangs 51px lower than the row starts,
       and .stats-wrapper is a flex container, so it establishes a
       formatting context and gets narrowed by any float it meets
       instead of flowing under it. No text sits that low anyway.
       Re-measured after the row's padding was tightened, which pulled
       it up from 469px to 453px. */
    height: 445px;
    shape-outside: inset(296px 0 0 0);
  }
}

@media (min-width: 993px) and (max-width: 1199.98px) {
  .about .content::before {
    content: "";
    float: right;
    width: 26%;
    height: 441px;
    shape-outside: inset(217px 0 0 0);
  }
}

/* -----------------------------------------------
   Why Choose Us: how far the card sits over the photo
------------------------------------------------ */

/* The template hangs the card 2rem off the left of the image, which
   left it covering just over half the photograph. Pushed further out
   so it clears most of it. This is as far as it can go: at -2rem its
   left edge already sat flush against the text column, so the room
   for it comes from dropping the third statistic, which the card now
   sits beside rather than on top of.

   Deliberately placed above the stacked rule below, which resets left
   to auto - so this only applies while the card is still floating. */
.about .image-wrapper .floating-element {
  left: -8rem;
  /* Lowered so its bottom edge lands just above the stat labels on the
     left, instead of sitting level with the paragraph above them.
     The template's -2rem put the card's base 50px higher. */
  bottom: -4.5rem;
}

/* -----------------------------------------------
   Why Choose Us: the core-values card on small screens
------------------------------------------------ */

/* The template drops this card below the photograph at 992px with a
   2rem gap, which reads as two unrelated blocks. Tucked up over the
   bottom edge and inset from the sides instead, so it keeps the
   overlap it has on a wide screen - the same treatment the team photo
   on the About page gets. Matches the template's own selector so it
   wins on source order, and uses the template's breakpoint rather
   than Bootstrap's, so there is no width where neither applies. */
@media (max-width: 992px) {
  .about .image-wrapper .floating-element {
    /* Positioned so it paints above the photograph. Both boxes were
       static, so there was no z-index to compare and paint order
       decided it: a block's background paints early, but a replaced
       element's content paints later - so the <img> landed on top of
       the card's white background and shadow no matter which came
       first in the markup. Positioning the card moves it past the
       inline content.

       The offsets have to be cleared with it. The desktop rule sets
       bottom: -2rem against position: absolute; left relative those
       same offsets still apply, and an auto top resolves to minus the
       bottom - so the card was shoved 32px down and the negative
       margin bought nothing. */
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: -28px 12px 0;
    max-width: none;
  }
}

/* -----------------------------------------------
   Home: angled edge on the service card images
------------------------------------------------ */

/* The photograph meets the card body on a slant instead of a straight
   line. The clip only takes the bottom corner off, so the rounded top
   corners the card already has are left alone - border-radius and
   clip-path both apply, and the visible shape is the overlap of the
   two. The area the clip removes is transparent, so what shows through
   is the white card underneath. */
.svc-thumb {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
}

/* -----------------------------------------------
   About: team photo with an overlapping card
------------------------------------------------ */

/* The padding reserves room for the part of the card that hangs below
   the photograph, so the card can be positioned against the bottom
   edge without pushing into the section underneath. */
.ebm-team-media {
  position: relative;
  padding-bottom: 110px;
}

.ebm-team-img {
  display: block;
  width: 100%;
  /* A fixed shape rather than the file's own, so swapping the
     placeholder for a real photograph later cannot change the
     section's height. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  /* Anchored to the top of the photograph. The frame is 16/9 and the
     file is 3/2, so cover always has to lose some height - centred it
     took it off both ends and trimmed the heads. Taken off the bottom
     only, where the card sits over it anyway. */
  object-position: center top;
  border-radius: 4px;
}

.ebm-team-card {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  padding: 30px 34px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(19, 35, 47, 0.16);
}

.ebm-team-card h3 {
  margin: 0 0 10px;
  color: #13232F;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: normal;
}

.ebm-team-card p {
  margin: 0;
  color: #6a6a6a;
  font-size: 0.97rem;
  line-height: 1.7;
}

/* Below the point where the overlap starts crowding the text, the card
   simply follows the photograph. An overlapping card on a narrow
   screen leaves almost no width for the words. */
@media (max-width: 767.98px) {
  .ebm-team-media {
    padding-bottom: 0;
  }

  .ebm-team-card {
    /* Same reason as the core-values card on the home page: static on
       both sides means paint order wins, and the photograph's content
       paints after the card's background.

       And, as there, the absolute rule's offsets have to be cleared
       with it: left: 8% still applied once the card was relative, so
       it was shunted a further 8% of the container to the right and
       hung 1px off the side of a 390px screen. */
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: -28px 12px 0;
    padding: 24px 22px;
  }
}

/* -----------------------------------------------
   Heading scale below the section title

   Five different things fill the same role - the title of a card or a
   panel - and each had inherited a different size from whichever
   template rule happened to reach it: 16.8px, 18.4px, 20px, 20.8px and
   21.33px. Close enough to look like a mistake rather than a decision,
   so they collapse onto three deliberate steps.

   Section titles (2.369rem / 600) and the hero are not part of this.
------------------------------------------------ */
:root {
  /* card, band and panel titles */
  --ebm-title-card: 1.25rem;
  /* the vision / mission / commitment columns, which sit three abreast */
  --ebm-title-panel: 1.125rem;
  /* the core value inside the small floating card */
  --ebm-title-mini: 1.0625rem;
}

.svc-title,
.svc-card-title,
.ebm-team-card h3 {
  font-size: var(--ebm-title-card);
}

.core-value-name {
  font-size: var(--ebm-title-mini);
}

/* -----------------------------------------------
   Preloader

   The logo mark with a ring turning around it, in place of the
   template's bouncing bars. The ring is a pseudo-element so there is
   nothing extra in the markup, and only one segment is inked: the rest
   of the circle is the same navy at low opacity, which is what makes
   the motion read as a sweep rather than a wheel.
------------------------------------------------ */
.ebm-loader {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
}

/* White, not navy: the preloader panel is #13232F, so a navy ring and
   a navy mark were both invisible against it. */
.ebm-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #ffffff;
  animation: ebm-loader-spin 0.9s linear infinite;
}

.ebm-loader-mark {
  width: 46px;
  height: auto;
  /* Sits inside the ring, so it must not pick up the page's img rules. */
  max-width: none;
}

@keyframes ebm-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Anyone who has asked their system to reduce motion gets the ring
   without the rotation: still a loading indicator, no spinning. */
@media (prefers-reduced-motion: reduce) {
  .ebm-loader::before {
    animation: none;
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
  }
}

/* -----------------------------------------------
   Active page marker in the nav

   A navy block behind the first two letters of the current page's
   link. Two letters cannot be done in CSS alone, since ::first-letter
   reaches exactly one, so the pair is wrapped in the markup and this
   only colours it. The wrapper sits inside the link, so the label
   still reads as one word; aria-current on the link is what actually
   announces which page you are on.
------------------------------------------------ */
.nav-mark {
  display: inline-block;
  padding: 0 2px;
  margin-left: -2px;
  background-color: #13232F;
  color: #fff;
}

/* The rest of the word keeps its resting colour: the block is the
   signal, so recolouring the whole label would say it twice. */
.navbar .nav-link.active {
  color: inherit;
}

/* -----------------------------------------------
   Hero arrows on a phone

   The side padding was reduced so the two buttons would fit, which
   left the heading running underneath the prev/next arrows sitting at
   the edges. With swipe enabled the arrows are redundant at this size
   anyway, so they come off rather than the text being pushed back in.
------------------------------------------------ */
@media (max-width: 767.98px) {
  .theme-slider .swiper-nav {
    display: none;
  }
}

/* -----------------------------------------------
   Hero buttons

   Side by side at every width. They were inline-block, so on a phone
   the pair measured 391px against a 294px column and simply wrapped.
   A nowrap flex row stops that, and the padding and type scale with
   the viewport so the two still fit at 320px instead of overflowing.
------------------------------------------------ */
.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
}

.hero-actions .btn {
  /* The markup carries me-3; the gap above handles the spacing now. */
  margin-right: 0;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .hero-actions {
    gap: 8px;
  }

  /* clamp rather than a fixed step: the two labels differ in length and
     the column keeps changing width, so the padding has to give way
     gradually instead of at one breakpoint. The ceilings are low
     because the desktop 2.5rem is 80px of padding per button, which on
     its own is wider than the gap the pair has to fit into here. */
  /* The floors matter as much as the ceilings. An earlier pass set them
     so low that the labels came out at 9.6px, which is under the size
     anyone should be asked to read or tap. With the labels shortened
     there is room to keep them legible: measured, the widest pair is
     well inside the column at every width down to 320px. */
  .hero-actions .btn {
    padding-right: clamp(0.85rem, 3.2vw, 1.4rem);
    padding-left: clamp(0.85rem, 3.2vw, 1.4rem);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: clamp(0.72rem, 2.8vw, 0.8rem);
  }

  /* The chevron is decoration that costs about 20px a button. At this
     size the label needs that space more than the arrow does. */
  .hero-actions .btn .fa-chevron-right,
  .hero-actions .btn svg {
    display: none;
  }
}

/* Below the small breakpoint the hero column keeps px-5, which is 48px
   of padding each side. On a 320px screen that is a third of the width
   spent on margin, and it was the rest of the reason the pair would
   not fit. */
@media (max-width: 575.98px) {
  .theme-slider .swiper-slide .col-sm-8 {
    /* px-5 is a Bootstrap utility and carries !important, so matching
       its weight is the only way to reduce it. */
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }
}

/* -----------------------------------------------
   Hero slide headings

   Only slide one is an h1; the rest are paragraphs so the page has a
   single heading, and Swiper's loop clones are demoted to divs. All
   three took their size from utility classes but their weight and
   colour from the h1 tag, so the demoted ones rendered grey and, in
   the case of the clones, not bold either. This puts those two back
   where the tag no longer supplies them.
------------------------------------------------ */
.theme-slider .hero-heading {
  color: #13232F;
  font-weight: 700;
}

/* The size came from fs-4 / fs-md-5, which is two fixed steps: 67px
   from 992px all the way up, then 50px below 576px. That left the
   heading at full desktop size in a 448px column at 768px, where it
   ran to four lines and took a third of the hero, and still at 50px on
   a 320px screen, where it ran to six.

   Fluid instead, so it tracks the column it has to fit. The utilities
   carry !important, so the override has to as well. */
.theme-slider h1,
.theme-slider .hero-heading {
  font-size: clamp(2.5rem, 6vw, 4.2rem) !important;
}

.theme-slider .swiper-slide p.text-primary {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem) !important;
}

/* A scrim behind the hero text on narrow screens.

   The light area these photographs are read against is painted into
   the files themselves, down the left edge. A phone crops to the
   middle 26% of a 16:9 frame, so that light area is cropped away and
   the navy heading ends up over the subject instead. Measured, slide
   three came out at 2.0:1 against the 3:1 minimum for large text, and
   slide one at 3.2:1 was no better than borderline.

   A gradient rather than a flat wash, so the photograph still reads
   lower down where no text sits over it. */
@media (max-width: 767.98px) {
  .theme-slider .swiper-slide .bg-holder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.78) 45%,
      rgba(255, 255, 255, 0.45) 80%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }
}

/* -----------------------------------------------
   FAQ question headings

   The questions are h3 rather than h4, so that an h2 section title is
   not followed by a jump to h4. The template styles them by tag, at
   .faq .faq-item .faq-header h4, so every one of those rules had to be
   restated for h3 or the questions render at full h3 size, which is as
   large as the section title above them.
------------------------------------------------ */
.faq .faq-item .faq-header h3 {
  flex: 1;
  margin: 0;
  font-family: var(--elixir-font-sans-serif);
  font-size: 1.25rem;
  font-weight: 300;
  color: #13232F;
  transition: all 0.3s ease;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.faq .faq-item.faq-active .faq-header h3 {
  color: #13232F;
}

@media (max-width: 991px) {
  .faq .faq-item .faq-header h3 {
    font-size: 1.1rem;
    margin-right: 15px;
  }
}

@media (max-width: 575px) {
  .faq .faq-item .faq-header h3 {
    font-size: 1rem;
    margin-right: 10px;
  }
}

/* -----------------------------------------------
   Form status messages and field errors

   Driven by initForms() and initFieldValidation() in ebm-forms.js.
   All three boxes ship hidden and are revealed by an is-shown class,
   so a visitor with no JavaScript gets an ordinary form post rather
   than three empty bars stacked above the button.
------------------------------------------------ */

.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message {
  display: none;
  margin-bottom: 15px;
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.php-email-form .loading {
  background-color: #f1f3f5;
  color: #2c2c2c;
}

.php-email-form .loading.is-shown {
  display: block;
}

.php-email-form .error-message {
  background-color: #b3261e;
  color: #fff;
}

.php-email-form .sent-message {
  background-color: #1d6b3f;
  color: #fff;
}

/* Flex so the close button can sit at the end of the row and the text
   can take the rest, rather than wrapping underneath it. */
.php-email-form .error-message.is-shown,
.php-email-form .sent-message.is-shown {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.php-email-form .form-note-text {
  flex: 1 1 auto;
}

/* Sized to the 44px touch guidance rather than to the glyph, which on
   a phone is the difference between closing it and missing it. */
.php-email-form .form-note-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.php-email-form .form-note-close:hover,
.php-email-form .form-note-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.34);
  outline: none;
}

/* Written into the field's own column, so the message sits directly
   under the input it is about. Same red and weight as the service
   picker error, so a form with two different problems still reads as
   one design. */
.field-error {
  margin: 6px 0 0;
  color: #b3261e;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Empty until there is something to say. Collapsed rather than hidden,
   so the field below does not jump as messages come and go while the
   visitor types. */
.field-error:empty {
  margin: 0;
}

.php-email-form .form-control.is-invalid-field {
  border-color: #b3261e;
}

.php-email-form .form-control.is-invalid-field:focus {
  border-color: #b3261e;
  box-shadow: 0 0 0 0.2rem rgba(179, 38, 30, 0.15);
}

/* The newsletter sits on the dark blue panel, where a filled bar would
   fight the background. */
.bg-primary .php-email-form .loading,
.bg-primary .php-email-form .error-message,
.bg-primary .php-email-form .sent-message {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* -----------------------------------------------
   Contact form: service picker

   A dropdown holding checkboxes. A native <select multiple> needs
   ctrl-click, shows a cramped scroll box and is close to unusable on a
   phone, so the control is built from a button and a list instead.

   The real checkboxes stay in the DOM and keep focus, so keyboard and
   screen-reader users get the native control; the labels are what is
   painted. Everything below .is-ready only applies once the script has
   run - without it the plain list remains, which is why the markup
   does not hide the menu itself.
------------------------------------------------ */
.field-label {
  margin: 0 0 10px;
  color: #6a6a6a;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Clipped, not display:none - it still names the control for a screen
   reader once the collapsed line is asking the same question. */
.field-label.ms-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.service-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-picker input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.service-picker label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  color: #444;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* The tick box is drawn on the label so the whole row is one target. */
.service-picker label::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid #b0b0b0;
  border-radius: 2px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.service-picker input[type="checkbox"]:checked + label {
  border-color: #13232F;
  background-color: color-mix(in srgb, #13232F, transparent 94%);
  color: #13232F;
}

.service-picker input[type="checkbox"]:checked + label::before {
  border-color: #13232F;
  background-color: #13232F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4'/%3E%3C/svg%3E");
}

/* Focus shows on the label, since the input itself is clipped. */
.service-picker input[type="checkbox"]:focus-visible + label {
  outline: 2px solid #13232F;
  outline-offset: 2px;
}

.service-picker-error {
  display: none;
  margin: 8px 0 0;
  color: #b3261e;
  font-size: 0.8rem;
  font-weight: 600;
}

.service-picker-error.is-shown {
  display: block;
}

/* --- collapsed into a dropdown once the script runs --- */
.service-picker.ms.is-ready {
  display: block;
  position: relative;
}

/* Matched to the form's own inputs rather than to a button: it sits
   among them and should read as one of them. */
.ms-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #d8e2ef;
  border-radius: 0.375rem;
  background-color: #fff;
  color: #6a6a6a;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.service-picker.ms.is-ready.is-open .ms-toggle,
.ms-toggle:focus-visible {
  border-color: #13232F;
  outline: none;
}

.ms.has-selection .ms-toggle {
  color: #13232F;
  font-weight: 600;
}

.ms-summary {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}

.service-picker.ms.is-ready.is-open .ms-caret {
  transform: translateY(1px) rotate(-135deg);
}

.service-picker.ms.is-ready .ms-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
  border: 1px solid #d8e2ef;
  border-radius: 0.375rem;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(19, 35, 47, 0.14);
}

.service-picker.ms.is-ready.is-open .ms-menu {
  display: flex;
}

/* Inside the menu these are rows in a list, not pills, so the border
   and rounded corners come off and each spans the full width. */
.service-picker.ms.is-ready .ms-menu label {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  font-size: 0.88rem;
}

.service-picker.ms.is-ready .ms-menu label:hover {
  background-color: #f3f5f8;
}

.service-picker.ms.is-ready .ms-menu input[type="checkbox"]:checked + label {
  background-color: color-mix(in srgb, #13232F, transparent 95%);
}

/* -----------------------------------------------
   Contact cards
------------------------------------------------ */
/* The phone numbers and email addresses are links, so they pick up the
   theme's link weight and colour. The street address is plain text and
   was landing lighter and greyer than the two cards beside it; family,
   size and line-height already matched. */
.contact-address {
  color: #13232F;
  font-weight: 600;
}

.contact-socials {
  display: flex;
  gap: 10px;
}

.contact-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background-color: color-mix(in srgb, #13232F, transparent 92%);
  color: #13232F;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-socials a:hover,
.contact-socials a:focus-visible {
  background-color: #13232F;
  color: #fff;
  text-decoration: none;
}

/* -----------------------------------------------
   Page banner

   Sized to match the Maine site: a 43px heading rather than 67px, and
   a breadcrumb just above body size instead of 21px bold. The template
   set both with fs-* utilities, which are !important, so those classes
   were taken off the markup and the sizes set here instead.
------------------------------------------------ */
.page-banner-title {
  font-size: 2.7rem;
  line-height: 1.05;
  letter-spacing: normal;
}

.page-banner .breadcrumb {
  margin-bottom: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .page-banner-title {
    font-size: 2rem;
  }

  .page-banner .breadcrumb {
    font-size: 1rem;
  }
}

/* -----------------------------------------------
   About Us

   Two photographs with the second overlapping the first, a bordered
   block of text beside them, and three pillars underneath divided by
   rules that change orientation with the layout.
------------------------------------------------ */
.ebm-about .section-title {
  text-align: left;
  margin-bottom: 34px;
}

.ebm-about .section-title h2::after {
  left: 0;
  transform: none;
}

.ebm-about .section-title p {
  max-width: none;
  margin-left: 0;
}

/* --- the overlapping pair --------------------- */

/* Padding on the bottom and right makes room for the inset image to
   hang off the main one without being clipped or overlapping the text
   column. The arrangement is proportional rather than fixed, so it
   survives down to the narrowest screen - which is why no breakpoint
   undoes it. */
.ebm-about-media {
  position: relative;
  /* The column is a flex container so the text box can stretch to
     match. Without this the photo block stretches too, and since the
     inset is pinned to its bottom it drops away from the photograph
     wherever the text happens to be taller. */
  align-self: flex-start;
  /* The accent block sits at the very top left of this box and the
     photograph is inset from it, which is what makes the block appear
     to sit behind the image. Keeping it inside the padding rather than
     using negative offsets means it can never push the page sideways
     on a narrow screen. */
  padding-top: 18px;
  padding-left: 18px;
  /* Narrower than before so the photograph reads as a tall portrait.
     The inset's position is derived from these two numbers below, so
     changing this one moves both together. */
  /* The photograph stops short of the column edge so the smaller one
     can overhang it to the right, which is what the design shows.
     Measured off the mockup: the big image occupies roughly the left
     three quarters, the small one runs from its centre out past its
     edge to nearly the full width. */
  padding-right: 25%;
  padding-bottom: 16%;
}

/* The navy block showing above and to the left of the photograph. */
.ebm-about-media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 38%;
  background-color: #13232F;
  border-radius: 3px;
  z-index: 0;
}

.ebm-about-img-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /* Portrait rather than the file's own near-square shape, which is
     what makes the whole section taller. object-fit crops instead of
     stretching, and the crop is held high so heads are never cut. */
  /* Widened from 3/4 to hold roughly the previous height while
     filling the extra width, rather than growing taller with it. */
  aspect-ratio: 9 / 10;
  height: auto;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 4px;
}

.ebm-about-img-inset {
  position: absolute;
  /* The main photograph fills the content box, which stops at 90% of
     this container because of the padding-right above - so its
     horizontal centre is at 45%, and that is where this one begins.
     Pinning left and right rather than setting a width means the two
     edges stay tied to the main image however wide the column gets. */
  /* Still begins at the photograph's horizontal centre. The image now
     runs from 18px to (100% - 24%), so its middle is 38% + 9px - and
     stating it as a calc keeps the two tied together rather than
     needing a new magic number each time the column changes. */
  /* Begins at the photograph's horizontal centre. It now runs from
     18px to 75%, so the middle is 37.5% + 9px. */
  left: calc(37.5% + 9px);
  /* An explicit width, not left+right. On a replaced element like an
     <img>, width:auto resolves to the file's own pixel width rather
     than stretching between the two offsets, so pinning both edges
     left it at its intrinsic 1092px and overflowing the column. */
  /* An explicit width, not left+right: on an <img>, width:auto takes
     the file's own pixel size instead of stretching between the two
     offsets. 57% carries the right edge past the big image's, which
     is the overhang the design has. */
  width: 57%;
  z-index: 2;
  bottom: 0;
  /* Landscape regardless of the source file's own proportions. The
     crop is centred so faces stay in frame as the column narrows. */
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  /* A white edge separates the two photographs where they meet, so the
     overlap reads as deliberate rather than as one picture bleeding
     into another. */
  border: 6px solid #fff;
  box-shadow: 0 10px 28px rgba(19, 35, 47, 0.16);
}

/* --- the bordered text block ------------------ */
.ebm-about-text {
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, #13232F, transparent 82%);
  border-radius: 4px;
}

.ebm-about-text p {
  margin-bottom: 18px;
  color: #6a6a6a;
}

.ebm-about-text p:last-child {
  margin-bottom: 0;
}

/* --- vision / mission / commitment ------------ */
.ebm-pillars {
  display: grid;
  /* Three equal columns with the divider drawn as the gap's background,
     so the rules sit exactly between the columns and need no extra
     markup. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  background-color: #eef1f5;
  border-radius: 4px;
  overflow: hidden;
}

.ebm-pillar {
  position: relative;
  padding: 30px 28px;
}

/* The divider. Drawn as a pseudo-element rather than a border because a
   border can only ever be the full height of its edge and cannot be
   tilted - the design has it shorter than the panel and leaning. */
.ebm-pillar:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  /* 1px, the same weight as every other rule on the page: the stats
     row's borders and the FAQ item dividers are all 1px solid. */
  width: 1px;
  /* Short of the panel's full height, so it floats between the columns
     instead of cutting the block into three. */
  height: 60%;
  background-color: var(--elixir-blue, #13232F);
  /* Leaning top-right to bottom-left, as in the design. The translate
     has to come first: transforms apply right to left, so rotating
     before centring would swing the bar around its own corner. */
  transform: translateY(-50%) rotate(9deg);
  border-radius: 2px;
}

.ebm-pillar h3 {
  margin-bottom: 12px;
  font-size: var(--ebm-title-panel);
  font-weight: 700;
  color: #13232F;
}

.ebm-pillar p {
  margin-bottom: 0;
  color: #6a6a6a;
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Below the point where three columns stop fitting, the pillars stack
   and the dividing rule turns from a vertical bar between columns into
   a horizontal one between rows. */
@media (max-width: 767.98px) {
  .ebm-pillars {
    grid-template-columns: 1fr;
  }

  /* Stacked, so the divider turns horizontal. Kept level rather than
     angled: a tilted rule reads as a mistake when it is spanning the
     full width of a block rather than standing between two columns. */
  .ebm-pillar:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    /* Mirrored: what was the bar's thickness is now its height, and
       what was its length is now its width. */
    width: 60%;
    height: 1px;
    transform: translateX(-50%);
  }
}

/* -----------------------------------------------
   About Us: matching column heights and the quote
------------------------------------------------ */

/* Making the column a flex container is what lets the text box stretch
   to the height the photographs set, instead of stopping at its own
   content and leaving the border floating halfway down. */
.ebm-about-row > [class*="col-"] {
  display: flex;
}

.ebm-about-text {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* flex:1 rather than margin-top:auto. The difference is that the quote
   grows to fill whatever height is left after the paragraphs, rather
   than being pushed to the bottom as a thin strip with dead space
   above it. */
.ebm-about-quote {
  /* Sits in the space left after the paragraphs. No rule above it -
     the mockup has the quote following the text directly. */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 10px 0 0;
  padding: 0;
  position: relative;
}

.ebm-about-quote p {
  /* The mark is positioned against this paragraph, not against the
     flex block. Pinned to the block it stayed at the top while the
     text centred further down, leaving the two drifting apart. */
  position: relative;
  margin: 0;
  padding-left: 72px;
  color: #13232F;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.75;
  /* Centred within the space beside the mark, as in the mockup. */
  text-align: center;
}

/* The opening mark: large, solid and dark, set against the top left of
   the quote rather than beside its first line. Written as the
   character itself, not a CSS escape - an escape has to survive both
   the script that writes the file and the stylesheet parser, and one
   was previously mangled into a control character on the way out.
   Decorative, so it lives here and not in the markup where a screen
   reader would read it aloud mid-sentence. */
.ebm-about-quote p::before {
  content: "“";
  position: absolute;
  left: 0;
  /* Slightly above the first line, as in the mockup. */
  top: -10px;
  color: #13232F;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.6rem;
  font-weight: 700;
  font-style: normal;
  line-height: 0.8;
}

/* -----------------------------------------------
   CTA banner: parallax background

   background-attachment:fixed pins the photo to the viewport rather
   than to the section, so the band acts as a window sliding across a
   stationary image and a different part of it shows the whole way past.

   Two things in the template have to be undone or this silently does
   nothing. .bg-holder carries will-change:transform and
   backface-visibility:hidden, and either one promotes the element to
   its own compositor layer - at which point a fixed background
   resolves against that layer instead of the viewport. No error, no
   warning, the effect just never appears.

   Scoped to devices with a real pointer. iOS Safari and most Android
   browsers do not honour background-attachment:fixed, and their
   fallback is not plain scrolling but a badly zoomed, mis-positioned
   crop - so touch devices deliberately keep the normal behaviour.
------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .ebm-cta .bg-holder {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    will-change: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
}

/* Parallax is a common motion-sensitivity trigger. */
@media (prefers-reduced-motion: reduce) {
  .ebm-cta .bg-holder {
    background-attachment: scroll;
  }
}

/* -----------------------------------------------
   FAQ: space between questions

   A closed question was 115px tall against Maine's 66px, and almost
   all of the difference was invisible.

   The collapse works by setting grid-template-rows to 0fr on
   .faq-content. That collapses the track, and overflow:hidden clips
   the text - but padding is not part of the track, so .content-inner
   kept its 40px bottom padding on every closed item. Each question
   therefore carried 40px of empty space underneath it that nothing on
   screen explained.

   Zeroing it only while closed leaves the open state exactly as it
   was, which is the point: the answer still gets its breathing room.
   The :not() adds enough specificity to beat the template's three
   responsive padding rules without !important.
------------------------------------------------ */
.faq .faq-item:not(.faq-active) .faq-content .content-inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Matched to the grid transition above it so the padding closes with
   the answer rather than snapping shut after it. */
.faq .faq-item .faq-content .content-inner {
  transition: padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 22px top and bottom put the row at 74px before anything else was
   added. 18px brings a closed question to 67px, which is where the
   Maine site sits, and still leaves a comfortable tap target. Nothing
   else about the row changes - same divider, numbers, type and icons. */
.faq .faq-item .faq-header {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* -----------------------------------------------
   FAQ: heading left, questions right

   The template centres .section-title and puts its underline in the
   middle, which is right for a full-width heading above a section but
   wrong once that heading is sharing a row with the questions. These
   rules only apply to .faq-intro, so every other section title on the
   site is untouched.
------------------------------------------------ */
@media (min-width: 992px) {

  .faq .faq-intro {
    margin-bottom: 0;
    text-align: left;
    /* Slight optical lift so the heading reads as level with the first
       question rather than with the top of its box. */
    padding-top: 4px;
  }

  /* The underline is absolutely positioned at left:50% with a
     translate. Both have to be undone or it floats in the middle of a
     left-aligned heading. */
  .faq .faq-intro h2::after {
    left: 0;
    transform: none;
  }

  /* The paragraph is centred by "margin: 0 auto" with a 640px cap,
     which in a narrow column leaves it adrift. */
  .faq .faq-intro p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Keeps the text off the questions beside it. */
  .faq .faq-intro {
    padding-right: 24px;
  }
}

/* Below the breakpoint the two columns stack, and a centred heading
   above the questions is the right shape again - which is the template
   default, so there is nothing to undo. */