/*
Theme Name: Atlas Salient ASLM
Description: ASLM child theme for Salient, rebuilt from the approved style guide and homepage reference.
Author: Atlas / White Tower Digital
Template: salient
Version: 1.0.0
Text Domain: atlas-salient-aslm
*/

:root {
  --aslm-blue: #376EA0;
  --aslm-sky: #87D1E3;
  --aslm-green: #9ACA20;
  --aslm-lime: #BED702;
  --aslm-yellow: #FCC401;
  --aslm-sun: #FDD601;
  --aslm-ink: #494754;
  --aslm-copy: #666666;
  --aslm-border: #D7D6D6;
  --aslm-grey: #F6F6F6;
  --aslm-cream: #FFFEF3;
  --aslm-white: #FFFFFF;
  --aslm-section-space: 80px;
}

body,
body p,
body li,
body input,
body textarea,
body select,
body button {
  font-family: "Open Sans", Arial, sans-serif;
}

body { color: var(--aslm-copy); }

h1, h2, h3, h4, h5, h6 {
  color: var(--aslm-ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--aslm-green) !important;
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════
   ASLM — Salient child theme
   ═══════════════════════════════════════════════════════
   1. Role cards
   2. Pill CTA buttons
   3. Contact section
   4. Footer
   5. What we do
   6. Become a member
   7. Find a practitioner
   8. Header
   9. Hero
  10. Featured event
  11. Education pathways
  12. Prose
  13. Page header band
  14. Event detail
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   1. ROLE CARDS
   Row class: "role-cards" (+ "role-cards-sm" for short)
   ═══════════════════════════════════════════════════════ */

  /* Salient names the wrapper .row_col_wrap_12 on a top-level row and
     .row_col_wrap_12_inner on an inner row — both must be listed or the
     flex layout silently does not apply and the columns fall back to the
     theme's own spacing. */
   .wpb_row.role-cards > .row_col_wrap_12,
   .wpb_row.role-cards > .row_col_wrap_12_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
    padding: 8px 0 24px;
  }
  
  /* Columns */
  /* padding:0 is load-bearing — Salient's column gutter would otherwise stack
     on top of the flex gap and render it at roughly double the declared 24px */
  .wpb_row.role-cards .wpb_column {
    display: flex;
    margin: 0;
    padding: 0;
  }
  .wpb_row.role-cards .wpb_column.vc_col-sm-3 { width: calc(25% - 18px); }     /* 4-up */
  .wpb_row.role-cards .wpb_column.vc_col-sm-4 { width: calc(33.333% - 16px); } /* 3-up */
  
  /* The card */
  .wpb_row.role-cards .wpb_column > .vc_column-inner {
    display: flex;
    flex: 1;
    min-height: 326px;
    background-color: #fff;
    padding: 24px;
    /* Confirmed from Figma: TL 64 / TR 10 / BR 64 / BL 10. */
    border-radius: 64px 10px 64px 10px;
    box-shadow:
      0 2px 6px rgba(23, 30, 47, 0.04),
      0 12px 32px rgba(23, 30, 47, 0.08);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  
  .wpb_row.role-cards .wpb_column > .vc_column-inner:hover {
    transform: translateY(-4px);
    box-shadow:
      0 2px 6px rgba(23, 30, 47, 0.05),
      0 16px 40px rgba(23, 30, 47, 0.12);
  }
  
  /* Auto-layout: 16px between every child, no stray margins */
  .wpb_row.role-cards .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  
  .wpb_row.role-cards .wpb_wrapper > * { margin: 0; }
  .wpb_row.role-cards .wpb_content_element { margin-bottom: 0; }
  .wpb_row.role-cards .img-with-aniamtion-wrap,
  .wpb_row.role-cards .img-with-aniamtion-wrap .inner { margin: 0; }
  .wpb_row.role-cards .wpb_text_column p:last-child { margin-bottom: 0; }
  .wpb_row.role-cards .img-with-animation { display: block; }
  
  /* CTA pinned to the bottom so links align across cards */
  .wpb_row.role-cards .nectar-cta { margin-top: auto; }
  
  /* Shorter variant */
  .wpb_row.role-cards-sm .wpb_column > .vc_column-inner { min-height: 240px; }

  /* --- GET INVOLVED (3-up) ---
     Row class: "get-involved", added alongside "role-cards role-cards-sm
     cta-pills". Values from Figma: card 405.33 x 325, padding 40, internal
     stack gap 20; the 32px between cards is what 405.33 x 3 leaves inside a
     1280 container.

     Every selector here carries both .role-cards and .get-involved. That is
     deliberate: it lifts them above the shared card rules AND above Salient's
     generated .flex_gap_desktop_10px column rule, so none of this needs
     !important. */

  .wpb_row.role-cards.get-involved > .row_col_wrap_12,
  .wpb_row.role-cards.get-involved > .row_col_wrap_12_inner {
    gap: 32px;
  }

  .wpb_row.role-cards.get-involved .wpb_column.vc_col-sm-4 {
    width: calc(33.333% - 21.334px);   /* 2 gaps x 32 / 3 */
  }

  .wpb_row.role-cards.get-involved .wpb_column > .vc_column-inner {
    min-height: 325px;
    padding: 40px;
  }

  /* No flex gap on this row. The stack's rhythm comes from the elements' own
     margins, which already read correctly against the comp; adding a gap on
     top of them double-spaced the card. This selector carries .role-cards and
     .get-involved (0,5,0), so it beats both the shared 16px rule and Salient's
     generated .flex_gap_desktop_10px — the other two rows keep their gaps. */
  .wpb_row.role-cards.get-involved .vc_column-inner > .wpb_wrapper {
    gap: 0;
  }

  /* Figma specifies one uniform 20px gap down the stack, so the button is not
     pinned to the floor here. The shared margin-top:auto would swallow the
     card's leftover height and push the button away from the description —
     that is the oversized description-to-button gap. */
  .wpb_row.role-cards.get-involved .nectar-cta {
    margin-top: 0;
  }

  /* NOT from Figma — measured off the comp, pills read ~140px wide there
     against ~113px here. Replace if you have the button's real values. */
  .wpb_row.role-cards.get-involved.cta-pills .nectar-cta .link_text {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* These have to be repeated at .get-involved specificity. Media queries add
     no specificity of their own, so the (0,5,0) desktop width above beats the
     (0,4,0) responsive rules further down and the cards never stack. */
  @media (max-width: 1000px) {
    .wpb_row.role-cards.get-involved .wpb_column.vc_col-sm-4 {
      width: calc(50% - 16px);
    }
  }

  @media (max-width: 690px) {
    .wpb_row.role-cards.get-involved .wpb_column.vc_col-sm-4 {
      width: 100%;
    }

    .wpb_row.role-cards.get-involved .wpb_column > .vc_column-inner {
      min-height: 0;
      padding: 32px 24px;
    }
  }

  @media (max-width: 1000px) {
    .wpb_row.role-cards .wpb_column.vc_col-sm-3,
    .wpb_row.role-cards .wpb_column.vc_col-sm-4 { width: calc(50% - 12px); }
  }
  
  @media (max-width: 690px) {
    .wpb_row.role-cards .wpb_column.vc_col-sm-3,
    .wpb_row.role-cards .wpb_column.vc_col-sm-4 { width: 100%; }
    .wpb_row.role-cards .wpb_column > .vc_column-inner { min-height: 0; }
  }
  
  
  /* ═══════════════════════════════════════════════════════
     2. PILL CTA BUTTONS
     Row class: "role-cards role-cards-sm cta-pills"
     ═══════════════════════════════════════════════════════ */
  
  .wpb_row.cta-pills .nectar-cta {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .wpb_row.cta-pills .nectar-cta .link_text {
    display: inline-block;
    padding: 11px 26px;
    border: 2px solid #9ACA20;
    border-radius: 999px;
    color: #9ACA20 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
  }
  
  .wpb_row.cta-pills .nectar-cta .link_text:hover {
    background-color: #9ACA20;
    color: #fff !important;
  }
  
  /* Filled — add "cta-filled" to the column OR the CTA element */
  .wpb_row.cta-pills .cta-filled .nectar-cta .link_text,
  .wpb_row.cta-pills .nectar-cta.cta-filled .link_text {
    background-color: #9ACA20 !important;
    border-color: #9ACA20 !important;
    color: #fff !important;
  }
  
  .wpb_row.cta-pills .cta-filled .nectar-cta .link_text:hover,
  .wpb_row.cta-pills .nectar-cta.cta-filled .link_text:hover {
    background-color: #7ea917 !important;
    border-color: #7ea917 !important;
  }
  
  
  /* ═══════════════════════════════════════════════════════
     3. CONTACT SECTION
     Row class: "contact-section"
     ═══════════════════════════════════════════════════════ */
  
  /* Left column: contact list */
  .wpb_row.contact-section .contact-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 36px;
  }
  
  .wpb_row.contact-section .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  
  .wpb_row.contact-section .contact-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
  }
  
  /* Icons — positional, with modifier-class fallback for dynamic output */
  .wpb_row.contact-section .contact-item:nth-child(1) .contact-icon,
  .wpb_row.contact-section .contact-item--email .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  }
  .wpb_row.contact-section .contact-item:nth-child(2) .contact-icon,
  .wpb_row.contact-section .contact-item--phone .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  }
  .wpb_row.contact-section .contact-item:nth-child(3) .contact-icon,
  .wpb_row.contact-section .contact-item--address .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }
  
  .wpb_row.contact-section .contact-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  /* colour is set explicitly — without it the mailto:/tel: links fall back to
     the theme's default link blue, while the address <p> inherits body colour,
     so the three rows do not match. They stay clickable, just not styled as
     generic links. */
  .wpb_row.contact-section .contact-content a,
  .wpb_row.contact-section .contact-content p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    color: #1e293b;
    text-decoration: none;
    transition: color .2s ease;
  }

  .wpb_row.contact-section .contact-content a:hover {
    color: #9ACA20;
  }
  
  /* Right column: form card */
  .wpb_row.contact-section .gform_wrapper {
    /* Figma: 720 x 710, padding 48, radius 24, internal gap 32.
       margin-left:auto keeps the card flush right inside its 8/12 column, so
       the reduced width comes off the gutter rather than shifting the card. */
    max-width: 720px;
    margin-left: auto;
    background: #fff;
    border-radius: 24px;
    padding: 48px;
    box-shadow:
      0 2px 8px rgba(23, 30, 47, 0.03),
      0 16px 40px rgba(23, 30, 47, 0.07);
  }
  
  /* Override Gravity Forms' orbital theme tokens */
  .wpb_row.contact-section .gform-theme--orbital {
    --gf-radius: 10px;
    --gf-ctrl-border-color: transparent;
    --gf-color-primary: #9ACA20;
  }
  
  /* Field spacing is set once, on the grid. GF's orbital theme already lays
     .gform_fields out as a CSS grid with its own row-gap, so the old
     margin-bottom:20px on every .gfield stacked on top of it and doubled the
     spacing. The fieldset reset matters because complex fields (Name, Address)
     render as <fieldset>, which carries default UA padding and a border that
     plain <div> fields do not — that is why the Name row gapped wider than
     the rest. */
  .wpb_row.contact-section .gform_wrapper .gform_fields {
    row-gap: 32px;
  }

  .wpb_row.contact-section .gform_wrapper .gfield {
    margin-bottom: 0;
  }

  .wpb_row.contact-section .gform_wrapper fieldset.gfield {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  
  .wpb_row.contact-section .gform_wrapper input[type="text"],
  .wpb_row.contact-section .gform_wrapper input[type="email"],
  .wpb_row.contact-section .gform_wrapper input[type="tel"],
  .wpb_row.contact-section .gform_wrapper select,
  .wpb_row.contact-section .gform_wrapper textarea {
    width: 100%;
    background-color: #f7f8f8;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 13px 16px;
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease;
  }
  
  .wpb_row.contact-section .gform_wrapper input:focus,
  .wpb_row.contact-section .gform_wrapper select:focus,
  .wpb_row.contact-section .gform_wrapper textarea:focus {
    background-color: #fff;
    border-color: #9ACA20;
    outline: none;
  }
  
  .wpb_row.contact-section .gform_wrapper textarea { min-height: 120px; resize: vertical; }
  
  /* Name field: 2-up grid, sub-labels above the inputs */
  .wpb_row.contact-section .ginput_complex.ginput_container_name {
    display: flex;
    gap: 16px;
  }
  .wpb_row.contact-section .ginput_complex .gform-grid-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
  }
  /* First/Last sub-labels are styled identically to the main field labels so
     the Name row reads like every other row. order:-1 lifts them above their
     input — Gravity Forms outputs them after it. */
  .wpb_row.contact-section .gform_wrapper .gfield_label,
  .wpb_row.contact-section .gform_wrapper .gform-field-label--type-sub {
    display: block;
    margin: 0 0 8px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: #1e293b;
  }

  .wpb_row.contact-section .gform-field-label--type-sub {
    order: -1;
  }
  /* The "Name" legend is hidden because First/Last carry the visible labels.
     Visually hidden rather than display:none so the fieldset still announces
     itself to screen readers. Selector is (0,4,0) — the old (0,2,0) version
     tied with Gravity Forms' own label rule and lost on source order, since
     the plugin's CSS enqueues after this stylesheet. */
  .wpb_row.contact-section .gform_wrapper.gform-theme .gfield_label_before_complex {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  
  /* Checkbox */
  .wpb_row.contact-section .gform_wrapper .gfield--type-checkbox .gchoice {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .wpb_row.contact-section .gform_wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #9ACA20;
  }
  
  /* Submit button */
  /* 32px matches the card's auto-layout gap, so the button sits on the same
     rhythm as the field rows above it */
  .wpb_row.contact-section .gform_footer { margin: 32px 0 0; padding: 0; }
  /* Gravity Forms' orbital theme paints the submit button from its own
     --gf-color-primary, and its selector tied with the previous (0,3,0) rule
     here — the plugin's CSS loads later, so it won. This is (0,6,0) and the
     colours carry !important because GF regenerates that theme CSS on update.
     Covers [type=submit] too, in case the button renders as a <button>. */
  .wpb_row.contact-section .gform_wrapper.gform-theme .gform_footer .gform_button,
  .wpb_row.contact-section .gform_wrapper.gform-theme .gform_footer [type="submit"] {
    background-color: #9ACA20 !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .25s ease;
  }
  .wpb_row.contact-section .gform_wrapper.gform-theme .gform_footer .gform_button:hover,
  .wpb_row.contact-section .gform_wrapper.gform-theme .gform_footer [type="submit"]:hover {
    background-color: #7ea917 !important;
  }
  
  @media (max-width: 1000px) {
    .wpb_row.contact-section .gform_wrapper { padding: 28px 24px; }
  }
  @media (max-width: 690px) {
    .wpb_row.contact-section .ginput_complex.ginput_container_name {
      flex-direction: column;
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════
     4. FOOTER
     Rows:    footer-main / footer-ack / footer-bottom
     Columns: fm-brand / fm-links / fm-links / fm-contact
     Headings: fm-heading
     Measured from Figma: 1280px container, bg #376EA0
     ═══════════════════════════════════════════════════════ */
  
  /* --- row 1: column widths (47.7 / 12.3 / 15.1 / 25) --- */
  .wpb_row.footer-main > .row_col_wrap_12 {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column {
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 0;
  }
  
  /* by position, so no extra classes are required */
  /* Brand gives 5% to the contact column so the newsletter blurb and the
     address each fit on one line. It has the slack: its tagline is capped at
     420px and the logo is 410px, so 42.66% (~546px at 1280) is still ample. */
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(1),
  .wpb_row.footer-main .fm-brand   { width: 42.66% !important; }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(2),
  .wpb_row.footer-main .fm-links:nth-of-type(2) { width: 12.27% !important; }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(3),
  .wpb_row.footer-main .fm-links:nth-of-type(3) { width: 15.08% !important; }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(4),
  .wpb_row.footer-main .fm-contact { width: 30% !important; }
  
  .wpb_row.footer-main .wpb_column { margin: 0 !important; }
  
  /* --- column headings: 14px bold (no class needed) --- */
  .wpb_row.footer-main .vc_custom_heading,
  .wpb_row.footer-main .fm-heading {
    margin: 0 0 12px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;              /* 100% */
    letter-spacing: 0;
    color: #fff;
  }
  
  /* --- brand column --- */
  .wpb_row.footer-main .img-with-aniamtion-wrap {
    margin: 0 0 24px !important;
  }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(1) .img-with-animation,
  .wpb_row.footer-main .fm-brand .img-with-animation {
    display: block;
    width: 410px;
    max-width: 100%;
    height: auto;
  }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(1) .wpb_text_column,
  .wpb_row.footer-main .fm-brand .wpb_text_column {
    margin-bottom: 24px !important;
  }
  
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(1) .wpb_text_column p,
  .wpb_row.footer-main .fm-brand .wpb_text_column p {
    margin: 0;
    max-width: 420px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* Not 100%: this is the one footer paragraph that genuinely wraps, and at
       line-height:1 the two lines touch. The Figma value describes single-line
       text, which this is not. Matches the acknowledgement paragraph's 160%. */
    line-height: 1.6;
    letter-spacing: 0;
    /* !important beats the inline colour WPBakery writes onto this Text
       Block's <p>. Remove it once that inline style is stripped in the
       builder — otherwise the builder shows one colour and the page another. */
    color: rgba(255, 255, 255, 0.6) !important;   /* #FFFFFF99 */
  }
  
  /* --- social icons: 40px circles, 16px gap --- */
  .wpb_row.footer-main .footer-social {
    display: flex;
    gap: 16px;
    margin: 0;
  }
  
  .wpb_row.footer-main .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
    transition: background-color .25s ease;
  }
  
  .wpb_row.footer-main .footer-social a:hover {
    background: rgba(255, 255, 255, 0.45);
  }
  
  .wpb_row.footer-main .footer-social svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
  }
  
  .wpb_row.footer-main .footer-social img,
  .wpb_row.footer-main .footer-social .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
    object-fit: contain;
  }
  
  .wpb_row.footer-main .footer-social img {
    filter: brightness(0) invert(1);
  }
  
  /* --- link menus --- */
  .wpb_row.footer-main .widget_nav_menu ul.menu {
    margin: 0;
    padding: 0;
    list-style: none !important;
  }
  
  .wpb_row.footer-main .widget_nav_menu ul.menu li {
    margin: 0 0 12px;
    padding: 0;
    list-style: none !important;
    list-style-type: none !important;
  }
  
  .wpb_row.footer-main .widget_nav_menu ul.menu li::marker {
    content: "";
    font-size: 0;
  }
  
  .wpb_row.footer-main .widget_nav_menu ul.menu li:last-child {
    margin-bottom: 0;
  }
  
  .wpb_row.footer-main .widget_nav_menu a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;              /* 100% */
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6);   /* #FFFFFF99 */
    text-decoration: none;
    transition: color .2s ease;
  }
  
  .wpb_row.footer-main .widget_nav_menu a:hover {
    color: #fff;
  }
  
  /* --- contact list (dynamic-safe: positional + modifier class) --- */
  .wpb_row.footer-main .contact-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 32px;
  }
  
  .wpb_row.footer-main .contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  
  .wpb_row.footer-main .contact-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  .wpb_row.footer-main .contact-item:nth-child(1) .contact-icon,
  .wpb_row.footer-main .contact-item--email .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  }
  
  .wpb_row.footer-main .contact-item:nth-child(2) .contact-icon,
  .wpb_row.footer-main .contact-item--phone .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  }
  
  .wpb_row.footer-main .contact-item:nth-child(3) .contact-icon,
  .wpb_row.footer-main .contact-item--address .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }
  
  /* Selector is deliberately long — (0,5,1). The address is a <p> inside the
     contact list, so the column-4 paragraph rule above would otherwise set it
     on its own while the email and phone, being <a>, kept the theme's link
     colour. Listing all three together is what keeps the rows matching. */
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column .contact-content a,
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column .contact-content p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;              /* 100% */
    letter-spacing: 0;
    text-decoration: none;
  }

  /* hide the shortcode's <small> labels in the footer */
  .wpb_row.footer-main .contact-items small {
    display: none;
  }
  
  /* --- newsletter (position fallback: 4th column) --- */
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(4) .wpb_text_column,
  .wpb_row.footer-main .fm-contact .wpb_text_column {
    margin-bottom: 17px !important;
  }
  
  /* Covers the newsletter blurb and, because the contact list sits in a Text
     Block too, the address. The :nth-child(4) makes this (0,6,1), which
     outranks the contact rule's (0,5,1) — so the size has to be right here,
     not there. Values match the inline styling on the blurb's Text Block, so
     that inline style can now be stripped in the builder. */
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(4) .wpb_text_column p,
  .wpb_row.footer-main .fm-contact .wpb_text_column p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;              /* 100% */
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6);   /* #FFFFFF99 */
  }
  
  .wpb_row.footer-main .footer-newsletter form,
  .wpb_row.footer-main .footer-newsletter .gform_wrapper form {
    display: flex;
    align-items: center;
    max-width: 320px;
    height: 48px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
  }
  
  .wpb_row.footer-main .footer-newsletter input[type="email"],
  .wpb_row.footer-main .footer-newsletter input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 16px;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 15px;
    color: #fff;
  }
  
  .wpb_row.footer-main .footer-newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.8);
  }

  /* Focus must repeat the resting values — Salient repaints inputs white on
     focus, which is what turned the typed address dark-on-white. */
  .wpb_row.footer-main .footer-newsletter input[type="email"]:focus,
  .wpb_row.footer-main .footer-newsletter input[type="text"]:focus {
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    color: #fff !important;
  }

  /* Chrome repaints an autofilled input with its own background and dark text.
     Neither is a normal background-color, so an inset shadow is the only way
     to cover it — and it needs an opaque value: this is the pill's
     rgba(255,255,255,.2) pre-blended over the footer's #376EA0. The radius
     keeps that fill inside the pill instead of showing square corners, and
     the absurd transition delay stops Chrome animating its colour back in. */
  .wpb_row.footer-main .footer-newsletter input:-webkit-autofill,
  .wpb_row.footer-main .footer-newsletter input:-webkit-autofill:hover,
  .wpb_row.footer-main .footer-newsletter input:-webkit-autofill:focus {
    border-radius: 999px;
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #5f8bb3 inset;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
  }
  
  .wpb_row.footer-main .footer-newsletter input[type="submit"],
  .wpb_row.footer-main .footer-newsletter button,
  .wpb_row.footer-main .footer-newsletter .gform_wrapper .gform_button,
  .wpb_row.footer-main .footer-newsletter .gform_footer input,
  .wpb_row.footer-main .footer-newsletter .gform_footer button {
    flex: 0 0 auto !important;
    width: 73px !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #666666 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: opacity .25s ease;
  }
  
  .wpb_row.footer-main .footer-newsletter input[type="submit"]:hover,
  .wpb_row.footer-main .footer-newsletter button:hover {
    opacity: .85;
  }
  
  /* Gravity Forms chrome removal inside the pill */
  .wpb_row.footer-main .footer-newsletter .gform-body,
  .wpb_row.footer-main .footer-newsletter .gform_fields,
  .wpb_row.footer-main .footer-newsletter .gfield {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  
  .wpb_row.footer-main .footer-newsletter .gfield_label,
  .wpb_row.footer-main .footer-newsletter .gform-field-label,
  .wpb_row.footer-main .footer-newsletter .gfield_description,
  .wpb_row.footer-main .footer-newsletter .gform_description,
  .wpb_row.footer-main .footer-newsletter .gform_heading,
  .wpb_row.footer-main .footer-newsletter .gform_required_legend,
  .wpb_row.footer-main .footer-newsletter .gfield_required {
    display: none !important;
  }
  
  /* neutralise Gravity Forms' own field styling inside the pill */
  .wpb_row.footer-main .footer-newsletter .gform_wrapper .gfield input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 38px !important;
    padding: 0 16px !important;
    color: #fff !important;
  }
  
  .wpb_row.footer-main .footer-newsletter .gform_wrapper .gfield input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  .wpb_row.footer-main .footer-newsletter .gform_footer {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
  }
  
  /* --- row 2: acknowledgement --- */
  .wpb_row.footer-ack .vc_custom_heading {
    margin: 0 0 26px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
  }
  
  /* Same inline-style override as the brand tagline above. */
  .wpb_row.footer-ack p,
  .wpb_row.footer-ack .wpb_text_column p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;            /* 160% */
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6) !important;   /* #FFFFFF99 */
  }
  
  /* --- row 3: bottom bar ---
     Both wrapper names listed: Salient uses .row_col_wrap_12 on a top-level
     row and .row_col_wrap_12_inner on a nested one. padding-top measured off
     the comp, where the copyright sits ~40px below the divider. */
  .wpb_row.footer-bottom > .row_col_wrap_12,
  .wpb_row.footer-bottom > .row_col_wrap_12_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
  
  .wpb_row.footer-bottom p,
  .wpb_row.footer-bottom .wpb_text_column p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6) !important;   /* #FFFFFF99 */
  }
  
  .wpb_row.footer-bottom .widget_nav_menu ul.menu {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none !important;
  }
  
  .wpb_row.footer-bottom .widget_nav_menu ul.menu li {
    margin: 0;
    list-style: none !important;
    list-style-type: none !important;
  }
  
  .wpb_row.footer-bottom .widget_nav_menu ul.menu li::marker {
    content: "";
    font-size: 0;
  }
  
  .wpb_row.footer-bottom .widget_nav_menu a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color .2s ease;
  }
  
  .wpb_row.footer-bottom .widget_nav_menu a:hover {
    color: #fff;
  }
  
  @media (max-width: 999px) {
    .wpb_row.footer-main > .row_col_wrap_12 {
      flex-wrap: wrap;
    }
  
    .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(1),
    .wpb_row.footer-main .fm-brand {
      width: 100% !important;
      margin-bottom: 40px !important;
    }
    .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(2),
    .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(3),
    .wpb_row.footer-main .fm-links:nth-of-type(2),
    .wpb_row.footer-main .fm-links:nth-of-type(3) {
      width: 50% !important;
      margin-bottom: 40px !important;
    }
    .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(4),
    .wpb_row.footer-main .fm-contact { width: 100% !important; }
  }
  
  @media (max-width: 690px) {
    .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(2),
    .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column:nth-child(3),
    .wpb_row.footer-main .fm-links:nth-of-type(2),
    .wpb_row.footer-main .fm-links:nth-of-type(3) { width: 100% !important; }
  
    .wpb_row.footer-bottom .widget_nav_menu ul.menu {
      justify-content: flex-start;
      margin-top: 16px;
    }
  }


  /* --- muted body text: #FFFFFF99 -------------------------------------
     Consolidated and placed last on purpose.

     WPBakery Text Blocks in this build wrap their copy in a <span> carrying
     its own inline colour. Colouring the <p> alone does nothing, because the
     span sets colour for its own text — which is why the earlier per-rule
     declarations left the tagline and acknowledgement bright. The "p *" here
     reaches those spans, and !important is what outranks the inline value.

     Headings are excluded: they are .vc_custom_heading, not <p>, so they keep
     the solid #fff set earlier in this section.

     Delete this block if the inline colours are ever stripped in the builder;
     the per-element rules above already carry the right values. */
  .wpb_row.footer-main .wpb_text_column p,
  .wpb_row.footer-main .wpb_text_column p *,
  .wpb_row.footer-main .widget_nav_menu a,
  .wpb_row.footer-ack p,
  .wpb_row.footer-ack p *,
  .wpb_row.footer-bottom p,
  .wpb_row.footer-bottom p *,
  .wpb_row.footer-bottom .widget_nav_menu a {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  /* The whole contact list stays white — email and phone (<a>) and the address
     (<p>) alike, so the three rows match. The " *" variants reach any inline
     <span> the shortcode or builder wraps the text in. */
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column .contact-content a,
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column .contact-content a *,
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column .contact-content p,
  .wpb_row.footer-main > .row_col_wrap_12 > .wpb_column .contact-content p * {
    color: #fff !important;
  }


  /* ═══════════════════════════════════════════════════════
     5. WHAT WE DO
     Row: what-we-do  |  Image col: wwd-media-col  |  Image: wwd-media
     ═══════════════════════════════════════════════════════ */
  
  /* --- right image: 600 × 640, radius 24 --- */
  .what-we-do .wwd-media-col .img-with-aniamtion-wrap {
    position: relative;
    overflow: visible;
    max-width: 600px;
    margin-left: auto;
  }
  
  .what-we-do img.wwd-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 640;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
  }
  
  /* --- green leaf: traced from Figma, #BFD704 --- */
  .what-we-do .wwd-media-col .img-with-aniamtion-wrap::after {
    content: "";
    position: absolute;
    width: 26.667%;        /* 160 / 600 */
    aspect-ratio: 160 / 132;
    top: -7.813%;          /* 50 / 640 */
    right: -9.333%;        /* 56 / 600 */
    z-index: 2;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 132'%3E%3Cpath d='M146 0.4C128.5 4.3 111.3 10 94 14.8C80.2 18.6 65.9 21.7 53 28.2C34.6 37.4 18.7 51.5 9.4 70C3.2 82.5 0 97 0 111C0 117.6 0.1 124.3 5.1 129.1C11.1 131.4 17 128.9 23 127.2C30.3 125.2 37.7 123.4 45 121.3C78.3 112.1 120.2 108.4 142.1 78C146.1 72.5 149.4 66.3 151.9 60C156.8 47.3 159 33.6 159 20C159 13.7 159 6.7 154.8 1.8C151.6 0.3 149.5 0.1 146 0.4Z' fill='%23BFD704'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  
  /* --- unclip wrappers (this section only) --- */
  .what-we-do,
  .what-we-do .row_col_wrap_12,
  .what-we-do .wwd-media-col,
  .what-we-do .wwd-media-col .vc_column-inner,
  .what-we-do .wwd-media-col .wpb_wrapper,
  .what-we-do .wwd-media-col .img-with-aniamtion-wrap .inner,
  .what-we-do .wwd-media-col .hover-wrap,
  .what-we-do .wwd-media-col .hover-wrap-inner {
    overflow: visible !important;
  }
  
  .what-we-do .row_col_wrap_12 {
    position: relative;
    z-index: 1;
  }
  
  /* --- left column spacing --- */
  .what-we-do .vc_custom_heading { margin-bottom: 20px; }
  .what-we-do .inner_row { margin-top: 32px; }
  
  /* --- stat blocks --- */
  .what-we-do .inner_row .wpb_text_column p br { display: none; }
  .what-we-do .inner_row .wpb_text_column p span + span { margin-top: 8px; }
  
  @media (max-width: 690px) {
    .what-we-do .wwd-media-col .img-with-aniamtion-wrap { margin: 0 auto; }
    .what-we-do img.wwd-media { aspect-ratio: 4 / 3; }
    .what-we-do .wwd-media-col .img-with-aniamtion-wrap::after {
      width: 90px;
      top: -22px;
      right: -12px;
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════
     6. BECOME A MEMBER
     Row: become-member  |  Cols: bm-content / bm-media
     Image: bm-img  |  Parts: bm-badge / bm-title / bm-lead / bm-list / bm-cta
     NOTE: the photo PNG already contains the curved edge —
           no clip-path is applied.
     ═══════════════════════════════════════════════════════ */
  
  .become-member {
    position: relative;
  }
  
  /* must stay static: the left column's margins would otherwise
     inset the absolutely positioned image column */
  .become-member .row_col_wrap_12 {
    position: static !important;
  }
  
  /* --- right image column: bleeds to the viewport edge --- */
  .become-member .bm-media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: calc(50% - 50vw);
    width: calc(6% + 50vw);
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1;
  }
  
  .become-member .bm-media .vc_column-inner,
  .become-member .bm-media .wpb_wrapper,
  .become-member .bm-media .img-with-aniamtion-wrap,
  .become-member .bm-media .img-with-aniamtion-wrap .inner,
  .become-member .bm-media .hover-wrap,
  .become-member .bm-media .hover-wrap-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    max-width: none;
  }
  
  .become-member .bm-media img.bm-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: left center;
  }
  
  /* --- left column --- */
  .become-member .bm-content {
    position: relative;
    z-index: 2;
  }
  
  .become-member .bm-content .wpb_wrapper {
    max-width: 640px;
  }
  
  .become-member .bm-badge { margin-bottom: 26px !important; }
  .become-member .bm-badge p { margin: 0 !important; }
  
  .become-member .bm-title { margin: 0 0 14px !important; }
  
  .become-member .bm-lead { margin-bottom: 26px !important; }
  .become-member .bm-lead h5,
  .become-member .bm-lead p {
    max-width: none !important;
    margin: 0 !important;
  }
  
  /* --- bullet list --- */
  .become-member .bm-list { margin-bottom: 25px !important; }
  
  .become-member .bm-list ul {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  /* the reset must target the li directly, not inherit from ul */
  .become-member .bm-list ul li {
    position: relative;
    margin: 0 !important;
    padding-left: 26px;
    line-height: 1.65;
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
  }
  
  .become-member .bm-list ul li::marker {
    content: "";
    font-size: 0;
  }
  
  .become-member .bm-list ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8a8f9c;
  }
  
  /* --- button --- */
  .become-member .bm-cta { margin: 0 !important; }
  
  .become-member .bm-cta .nectar-button-type,
  .become-member .bm-cta .link_wrap {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  
  .become-member .bm-cta .link_text {
    display: inline-block !important;
    width: auto !important;
    padding: 15px 30px !important;
    border: 2px solid #9ACA20;
    border-radius: 999px;
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: #9ACA20 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
  }
  
  .become-member .bm-cta .link_text .text {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .become-member .bm-cta .link_text::after,
  .become-member .bm-cta .link_text .icon {
    display: none !important;
  }
  
  .become-member .bm-cta .link_text:hover {
    background: #9ACA20;
    color: #fff !important;
  }
  
  @media (max-width: 999px) {
    .become-member .bm-content .wpb_wrapper { max-width: none; }
  
    .become-member .bm-media {
      position: static;
      width: 100%;
      height: 320px !important;
      min-height: 320px;
      overflow: hidden;
    }
  
    .become-member .bm-media .vc_column-inner,
    .become-member .bm-media .wpb_wrapper,
    .become-member .bm-media .img-with-aniamtion-wrap,
    .become-member .bm-media .img-with-aniamtion-wrap .inner,
    .become-member .bm-media .hover-wrap,
    .become-member .bm-media .hover-wrap-inner {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: 100% !important;
    }

    .become-member .bm-media img.bm-img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
    }
  }

  @media (max-width: 690px) {
    .become-member .bm-media {
      height: 250px !important;
      min-height: 250px;
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════
     7. FIND A PRACTITIONER — CARDS
     Row: find-practitioner  |  Inner row: fp-cards
     Column: fp-card  |  Image: fp-img  |  Title: fp-title  |  CTA: fp-cta
     ═══════════════════════════════════════════════════════ */
  
  /* --- cards row: 842px wide, 32px gap --- */
  .find-practitioner .fp-cards {
    max-width: 842px;
    margin: 0 auto !important;
  }
  
  .find-practitioner .fp-cards > .row_col_wrap_12_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 32px;
  }
  
  .find-practitioner .fp-card {
    display: flex;
    width: calc(50% - 16px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .find-practitioner .fp-card > .vc_column-inner {
    display: flex;
    flex: 1;
    padding: 0 !important;
  }
  
  /* flex column so the CTA can pin to the bottom */
  .find-practitioner .fp-card .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  /* --- image: 405 × 272, radius 36 --- */
  .find-practitioner .fp-card .img-with-aniamtion-wrap {
    margin: 0 0 28px !important;
  }
  
  .find-practitioner .fp-card .img-with-aniamtion-wrap .inner,
  .find-practitioner .fp-card .hover-wrap,
  .find-practitioner .fp-card .hover-wrap-inner {
    margin: 0;
    line-height: 0;
  }
  
  .find-practitioner img.fp-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 405 / 272;
    object-fit: cover;
    object-position: center;
    border-radius: 36px;
  }
  
  /* --- title: Open Sans 700, 32px, 44px pitch --- */
  .find-practitioner .fp-title {
    margin: 0 0 32px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.375 !important;
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
  }
  
  /* --- CTA: Open Sans 700, 16px, pinned to the bottom --- */
  .find-practitioner .fp-cta {
    margin: auto 0 0 !important;
  }
  
  .find-practitioner .fp-cta .nectar-button-type,
  .find-practitioner .fp-cta .link_wrap {
    display: inline-block !important;
    width: auto !important;
  }
  
  .find-practitioner .fp-cta .link_text {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #666666 !important;
    text-decoration: none;
    transition: gap .25s ease;
  }
  
  .find-practitioner .fp-cta .link_text::after {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  
  .find-practitioner .fp-cta .link_text:hover {
    gap: 16px;
  }
  
  @media (max-width: 690px) {
    .find-practitioner .fp-cards > .row_col_wrap_12_inner { gap: 40px; }
    .find-practitioner .fp-card { width: 100% !important; }
    .find-practitioner .fp-title { font-size: 26px !important; }
    .find-practitioner .fp-cta { margin-top: 0 !important; }
  }
  
  
  /* ═══════════════════════════════════════════════════════
     8. HEADER
     Menu item class: nav-cta  (the Join Now button)
     Transparency is driven by the .at-top class that the
     script in functions.php adds to <body> while the page
     is scrolled near the top. Salient's own transparent
     header effect is NOT used.
     ═══════════════════════════════════════════════════════ */
  
  #header-outer .container,
  #header-outer header#top .container {
    max-width: 1280px;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* --- logo: 112 × 49 --- */
  #header-outer #logo img,
  #header-outer #logo .starting-logo {
    height: 49px !important;
    width: auto !important;
  }
  
  /* --- menu: Open Sans 700, 16px, 34px apart --- */
  #header-outer header#top nav > ul > li {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #header-outer header#top nav > ul > li > a {
    padding-left: 17px !important;
    padding-right: 17px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: #494754;
    opacity: 1;
    white-space: nowrap;
  }
  
  #header-outer header#top nav > ul > li:hover > a {
    color: #9ACA20;
  }
  
  /* --- Join Now pill: 140 × 55 --- */
  #header-outer header#top nav > ul > li.nav-cta {
    margin-left: 30px !important;
  }
  
  #header-outer header#top nav > ul > li.nav-cta > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 55px;
    padding: 0 30px !important;
    border-radius: 999px;
    background: #9ACA20 !important;
    color: #fff !important;
    opacity: 1 !important;
    transition: background-color .25s ease;
  }
  
  #header-outer header#top nav > ul > li.nav-cta > a:hover {
    background: #7ea917 !important;
  }
  
  /* kill Salient's hover underline on the button */
  #header-outer header#top nav > ul > li.nav-cta > a .menu-title-text::after,
  #header-outer header#top nav > ul > li.nav-cta > a::after,
  #header-outer header#top nav > ul > li.nav-cta > a::before {
    display: none !important;
  }
  
  /* --- hide the slide-out hamburger on desktop --- */
  #header-outer .slide-out-widget-area-toggle {
    display: none !important;
  }
  
  
  /* ─── transparent over the hero (front page only) ───── */

  body.home #header-space {
    display: none !important;
  }

  body.home #header-outer {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  body.home #header-outer .container,
  body.home #header-outer header#top,
  body.home #header-outer header#top .container,
  body.home #header-outer #header-inner,
  body.home #header-outer .row {
    background: transparent !important;
  }

  body.home.admin-bar #header-outer {
    top: 32px;
  }

  /* at the top: white logo + white links */
  body.home.at-top #header-outer header#top nav > ul > li > a {
    color: #fff !important;
    opacity: 1 !important;
  }

  body.home.at-top #header-outer header#top nav > ul > li:hover > a {
    color: #fff !important;
    opacity: .75 !important;
  }

  body.home.at-top #header-outer #logo img {
    filter: brightness(0) invert(1);
  }

  /* scrolled: solid white bar */
  body.home:not(.at-top) #header-outer {
    position: fixed !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important;
    transition: background-color .3s ease;
  }

  body.home:not(.at-top) #header-outer header#top nav > ul > li > a {
    color: #494754 !important;
  }

  body.home:not(.at-top) #header-outer #logo img {
    filter: none;
  }

  /* Join Now stays green in both states */
  body.home #header-outer header#top nav > ul > li.nav-cta > a {
    background: #9ACA20 !important;
    color: #fff !important;
    opacity: 1 !important;
  }


  /* ─── transparent over an inner-page band ────────────────
     Inner pages use Salient's own per-page transparent header
     (Header Navigation metabox → Force Transparent Header, colour
     Light), which is what adds #header-outer.transparent. That
     class is the hook here, so these rules only fire where the
     option is actually on.

     Doing it in CSS alone does not work: the transparent/solid
     switch keys off body.at-top, and Salient only maintains that
     class on pages where its own transparency option is set —
     verified on /?page_id=489, which has data-permanent-transparent
     "false" and never receives at-top.

     Turning the option on also makes Salient emit an empty 350px
     #page-header-wrap above the content; our band replaces it. */

  body:has(.wpb_row.page-header) #page-header-wrap {
    display: none !important;
  }

  /* The header now overlays the band instead of sitting above it, so the
     band grows by roughly the header's height to keep the title clear of
     the nav — measured 34px of clearance at 380px. min-height rather than
     padding, because WPBakery writes padding-top inline on every row. */
  body:has(#header-outer.transparent) .wpb_row.page-header {
    min-height: 380px;
  }

  body:has(.wpb_row.page-header) #header-outer.transparent #logo img {
    filter: brightness(0) invert(1);
  }

  body:has(.wpb_row.page-header) #header-outer.transparent header#top nav > ul > li > a {
    color: #fff !important;
    opacity: 1 !important;
  }

  body:has(.wpb_row.page-header) #header-outer.transparent header#top nav > ul > li:hover > a {
    opacity: .75 !important;
  }

  body:has(.wpb_row.page-header) #header-outer.transparent header#top nav > ul > li.nav-cta > a {
    background: #9ACA20 !important;
    color: #fff !important;
    opacity: 1 !important;
  }
  
  
  /* ═══════════════════════════════════════════════════════
     9. HERO
     Row class: hero
     Elements: hero-badge / hero-title / hero-lead / hero-cta
     ═══════════════════════════════════════════════════════ */
  
  /* flex here is only for vertical centring against the 700px min-height.
     Salient gives .row_col_wrap_12 width:auto, so as a flex item it
     shrink-wraps to its widest child (the 1040px .hero-title) instead of
     filling the row — justify-content keeps that narrower box on the row's
     centre line rather than letting it hug the left edge. */
  .hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* dark gradient for legibility — heaviest at the top,
     where the transparent header sits */
  .hero .row-bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, .45) 0%,
                rgba(0, 0, 0, .25) 45%,
                rgba(0, 0, 0, .30) 100%);
    pointer-events: none;
    z-index: 1;
  }
  
  .hero .row_col_wrap_12 {
    position: relative;
    z-index: 2;
  }
  
  /* --- badge pill --- */
  .hero .hero-badge {
    margin-bottom: 24px !important;
  }
  
  .hero .hero-badge p {
    margin: 0 !important;
  }
  
  .hero .hero-badge span,
  .hero .hero-badge p > span {
    display: inline-block !important;
    padding: 7px 22px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #494754 !important;
    text-shadow: none !important;
  }
  
  /* --- heading --- */
  .hero .hero-title {
    max-width: 1040px;
    margin: 0 auto 24px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 72px !important;
    line-height: 1.19 !important;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  }
  
  /* --- subtitle --- */
  .hero .hero-lead {
    margin-bottom: 40px !important;
  }
  
  .hero .hero-lead p {
    max-width: 760px;
    margin: 0 auto !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.42;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  }
  
  /* --- button: 140 × 55 --- */
  .hero .hero-cta {
    display: flex;
    justify-content: center;
    margin: 0 !important;
  }
  
  .hero .hero-cta .nectar-button-type,
  .hero .hero-cta .link_wrap {
    display: inline-block !important;
    width: auto !important;
  }
  
  .hero .hero-cta .link_text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 55px;
    padding: 0 30px !important;
    border-radius: 999px;
    background: #9ACA20 !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: #fff !important;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .25s ease;
  }
  
  .hero .hero-cta .link_text:hover {
    background: #7ea917 !important;
  }
  
  
  /* ═══════════════════════════════════════════════════════
     RESPONSIVE — header + hero
     ═══════════════════════════════════════════════════════ */
  
  @media (max-width: 999px) {
    #header-outer #logo img,
    #header-outer #logo .starting-logo {
      height: 40px !important;
    }
  
    #header-outer .slide-out-widget-area-toggle {
      display: block !important;
    }
  
    .hero {
      min-height: 520px;
    }
  
    .hero .hero-title {
      font-size: 44px !important;
    }
  
    .hero .hero-lead p {
      font-size: 18px;
    }
  }
  
  @media (max-width: 690px) {
    .hero .hero-title {
      font-size: 34px !important;
    }

    .hero .hero-lead p {
      font-size: 16px;
    }
  }


  /* ═══════════════════════════════════════════════════════
     10. FEATURED EVENT
     Markup comes from the [featured_event] shortcode, not from
     WPBakery — these are the shortcode's own classes:
       .featured-event            (wrapper, doubles as the flex row)
       .featured-event__image     > img
       .featured-event__content   > .event-badge / h2 / .event-meta
                                    / p / a.event-button
     The cream background and vertical padding belong on the
     WPBakery row that hosts the shortcode, so they full-bleed —
     set them in the row's own settings, not here.
     NOTE: the leaf is drawn as a ::after on the image box, matching
           .what-we-do. It is a sibling of the <img>, so the image's
           own radius does not clip it — but every wrapper up the tree
           has to stay overflow:visible or the overhang is lost.
     ═══════════════════════════════════════════════════════ */

  /* 50/50 split, content optically centred against the image */
  .featured-event {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
  }

  .featured-event .featured-event__image,
  .featured-event .featured-event__content {
    width: calc(50% - 24px);
  }

  /* --- image --- */
  .featured-event .featured-event__image {
    position: relative;
    overflow: visible;
  }

  .featured-event .featured-event__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
  }

  /* --- green leaf: same traced asset as .what-we-do, #BFD704 ---
     Percentages resolve against the image box, so the leaf scales with
     it: width/right against its width, top against its height. */
  .featured-event .featured-event__image::after {
    content: "";
    position: absolute;
    width: 26%;            /* 160 / 615 */
    aspect-ratio: 160 / 132;
    top: -12.2%;           /* -50 / 410 */
    right: -6.8%;          /* -42 / 615 */
    z-index: 2;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 132'%3E%3Cpath d='M146 0.4C128.5 4.3 111.3 10 94 14.8C80.2 18.6 65.9 21.7 53 28.2C34.6 37.4 18.7 51.5 9.4 70C3.2 82.5 0 97 0 111C0 117.6 0.1 124.3 5.1 129.1C11.1 131.4 17 128.9 23 127.2C30.3 125.2 37.7 123.4 45 121.3C78.3 112.1 120.2 108.4 142.1 78C146.1 72.5 149.4 66.3 151.9 60C156.8 47.3 159 33.6 159 20C159 13.7 159 6.7 154.8 1.8C151.6 0.3 149.5 0.1 146 0.4Z' fill='%23BFD704'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* --- unclip wrappers so the leaf can overhang (this section only) ---
     The shortcode sits inside WPBakery wrappers that clip by default.
     :has() reaches them off the shortcode's own class, so no extra row
     class is needed on the builder side. */
  .featured-event,
  .wpb_row:has(.featured-event),
  .wpb_row:has(.featured-event) .row_col_wrap_12,
  .wpb_row:has(.featured-event) .wpb_column,
  .wpb_row:has(.featured-event) .vc_column-inner,
  .wpb_row:has(.featured-event) .wpb_wrapper,
  .wpb_row:has(.featured-event) .wpb_text_column {
    overflow: visible !important;
  }

  /* --- content stack: explicit margins, the gaps are uneven --- */
  .featured-event .featured-event__content {
    display: flex;
    flex-direction: column;
    /* keeps the badge and button at their intrinsic width
       instead of stretching to the column */
    align-items: flex-start;
  }

  /* --- badge pill (neutral eyebrow variant) --- */
  /* The badge, meta row and button are shared with the event single (§14),
     so from here down they take :is(.featured-event, .event-detail) rather
     than .featured-event alone. :is() carries the specificity of its most
     specific argument — both are single classes — so this is still (0,1,x)
     and nothing that previously won or lost against these rules changes. */
  :is(.featured-event, .event-detail) .event-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 18px;
    border: 1px solid #e0e0e5;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #464a5c;
  }

  /* --- title --- */
  .featured-event .featured-event__content h2 {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #464a5c;
  }

  /* --- meta row: date + location --- */
  :is(.featured-event, .event-detail) .event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #464a5c;
  }

  /* each icon+label pair is its own inline-flex so the 8px icon gap
     stays independent of the 24px gap between the two pairs */
  :is(.featured-event, .event-detail) .event-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* PNGs from the media library — the tint is baked into the file, so it
     cannot be changed here. Height is pinned so a non-square source is
     letterboxed rather than allowed to shift the row's baseline. */
  /* margin/padding are !important because Salient scopes its image rules as
     .wpb_text_column .wpb_wrapper img — higher specificity than this selector,
     so a plain margin:0 here loses to the theme's bottom spacing. */
  :is(.featured-event, .event-detail) .event-meta .event-meta__icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
  }

  /* The label's line box is matched to the icon height so align-items:center
     lands both on the same centre. Inheriting the row's 1.4 line-height made
     the text box taller than the icon, which pushed the icon visibly high. */
  :is(.featured-event, .event-detail) .event-meta__label {
    line-height: 16px;
  }

  /* --- description --- */
  .featured-event .featured-event__content > p {
    margin: 0 0 32px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #808289;
  }

  /* backstop: if any filter still autop's the output, an empty <p> would
     otherwise inherit the rule above and add 32px of dead space */
  .featured-event .featured-event__content > p:empty {
    display: none;
  }

  /* ...and a <p> wrapping only the button must not be styled as body copy */
  .featured-event .featured-event__content > p:has(> .event-button) {
    margin: 0;
  }

  /* --- button: 180 × 52 --- */
  :is(.featured-event, .event-detail) .event-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 52px;
    padding: 0 32px;
    border-radius: 999px;
    background: #a8c81c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color .25s ease;
  }

  :is(.featured-event, .event-detail) .event-button:hover {
    background: #94b318;
  }

  @media (max-width: 1000px) {
    .featured-event {
      gap: 32px;
    }

    .featured-event .featured-event__image,
    .featured-event .featured-event__content {
      width: 100%;
    }

    .featured-event .featured-event__content h2 {
      font-size: 26px;
    }
  }

  @media (max-width: 690px) {
    .featured-event .featured-event__content h2 {
      font-size: 24px;
    }

    .featured-event .event-button {
      width: 100%;
    }
  }


  /* ═══════════════════════════════════════════════════════
     11. EDUCATION PATHWAYS
     Markup comes from the [education_cards] shortcode:
       .education-cards > .education-card
         > .education-card-image > img
         > .education-card-content
             > .education-card-badge / .education-card-title
             / .education-card-description
             / .education-card-button > .education-card-arrow
     WARNING: [resource_cards] emits these same class names, so
              anything here also styles the resources section.
     ═══════════════════════════════════════════════════════ */

  /* Hover lift and shadow disabled — the comp shows no card container at all,
     so there is nothing to raise. The rule being countered is NOT in this file
     (it lives in Theme Options / Customizer CSS), so this overrides rather than
     removes it, hence the !important. Drop both once the original is deleted
     at source. */
  .education-card,
  .education-card:hover {
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* The card's bottom corners were rounded with overflow:hidden, and the
     "Learn More" link sits in the bottom-left — the curve was clipping its
     first letter. The comp has no card container, so the radius has nothing
     to round; only the image is rounded, and it carries its own. */
  .education-card {
    overflow: visible !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* --- 3-up grid --- */
  .education-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .education-card {
    display: flex;
    flex-direction: column;
  }

  /* --- image: no card box in this variant, the image carries the radius --- */
  .education-card-image {
    margin-bottom: 20px;
  }

  .education-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 406 / 280;
    object-fit: cover;
    border-radius: 12px;
  }

  /* flex:1 lets the link pin to the card floor via margin-top:auto below.
     padding:0 is !important because the 24px it counters lives in the
     Theme Options / Customizer CSS, which loads after this file. */
  .education-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 !important;
    /* keeps the badge at its intrinsic width instead of stretching */
    align-items: flex-start;
  }

  /* --- badge pill: lime variant --- */
  .education-card-badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 16px;
    border: 1px solid #a8c81c;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #a8c81c;
  }

  /* --- title --- */
  .education-card-title {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #464a5c;
  }

  /* --- description --- */
  .education-card-description {
    margin: 0 0 32px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #808289;
  }

  /* --- text link, pinned so it aligns across cards of unequal copy ---
     It reads as plain text in the comp, not a pill, so the radius is
     zeroed against whatever the Customizer CSS is applying. */
  .education-card-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #464a5c !important;
    text-decoration: none !important;
  }

  @media (max-width: 1000px) {
    .education-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .education-card-title {
      font-size: 20px;
    }
  }

  @media (max-width: 690px) {
    .education-cards {
      grid-template-columns: 1fr;
    }
  }


  /* ═══════════════════════════════════════════════════════
     12. PROSE
     Body copy outside the marketing components — the plain
     h2/p/ul/table an editor writes into a page or a CPT single.

     Two ways in:
       .prose            opt-in, put it on a WPBakery Text Block
                         (or its column) via Extra Class Name
       CPT singles       applied automatically, since event /
                         education_pathway / resource render
                         through Salient's default template with
                         no builder markup to class

     Sizes are taken from what home already renders so pages sit
     in the same scale, NOT from workspace/design-spec.md — the
     spec's #464a5c / #808289 do not match what Salient's
     typography options actually output (#494754 / #666666).
     ═══════════════════════════════════════════════════════ */

  .prose,
  .single-event .post-content .content-inner,
  .single-education_pathway .post-content .content-inner,
  .single-resource .post-content .content-inner {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
  }

  /* Comfortable reading measure. Separate class so a full-width
     prose block stays possible where the layout wants one. */
  .prose-narrow { max-width: 760px; }
  .prose-narrow.prose-center { margin-left: auto; margin-right: auto; }

  /* --- headings ---
     Steps down from the 40px section h2 used on home, so an
     in-content h2 never competes with the section it sits under. */
  .prose :is(h2, h3, h4, h5, h6),
  .single-event .post-content .content-inner :is(h2, h3, h4, h5, h6),
  .single-education_pathway .post-content .content-inner :is(h2, h3, h4, h5, h6),
  .single-resource .post-content .content-inner :is(h2, h3, h4, h5, h6) {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #464a5c;
    margin: 1.6em 0 0.5em;
  }

  .prose :is(h2, h3, h4, h5, h6):first-child,
  .single-event .post-content .content-inner :is(h2, h3, h4, h5, h6):first-child,
  .single-education_pathway .post-content .content-inner :is(h2, h3, h4, h5, h6):first-child,
  .single-resource .post-content .content-inner :is(h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
  }

  .prose h2, .single-event .post-content .content-inner h2,
  .single-education_pathway .post-content .content-inner h2,
  .single-resource .post-content .content-inner h2 { font-size: 32px; line-height: 1.25; }

  .prose h3, .single-event .post-content .content-inner h3,
  .single-education_pathway .post-content .content-inner h3,
  .single-resource .post-content .content-inner h3 { font-size: 24px; line-height: 1.3; }

  .prose h4, .single-event .post-content .content-inner h4,
  .single-education_pathway .post-content .content-inner h4,
  .single-resource .post-content .content-inner h4 { font-size: 20px; line-height: 1.4; }

  .prose :is(h5, h6),
  .single-event .post-content .content-inner :is(h5, h6),
  .single-education_pathway .post-content .content-inner :is(h5, h6),
  .single-resource .post-content .content-inner :is(h5, h6) { font-size: 18px; line-height: 1.5; }

  /* --- paragraphs --- */
  .prose p,
  .single-event .post-content .content-inner p,
  .single-education_pathway .post-content .content-inner p,
  .single-resource .post-content .content-inner p {
    margin: 0 0 1.25em;
  }

  .prose p:last-child,
  .single-event .post-content .content-inner p:last-child,
  .single-education_pathway .post-content .content-inner p:last-child,
  .single-resource .post-content .content-inner p:last-child { margin-bottom: 0; }

  /* Intro paragraph — 18px, matching the section leads on home.
     Confirmed from the design source (design-spec §Status). */
  .prose-lead,
  .prose > p.prose-lead { font-size: 18px; line-height: 1.6; }

  /* --- links --- */
  .prose a,
  .single-event .post-content .content-inner a,
  .single-education_pathway .post-content .content-inner a,
  .single-resource .post-content .content-inner a {
    color: #9ACA20;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
  }

  .prose a:hover,
  .single-event .post-content .content-inner a:hover,
  .single-education_pathway .post-content .content-inner a:hover,
  .single-resource .post-content .content-inner a:hover { color: #7ea917; }

  /* --- lists ---
     Markers are lime via ::marker so the list item text keeps its
     own colour. Nested lists step the marker style, as browsers do. */
  .prose :is(ul, ol),
  .single-event .post-content .content-inner :is(ul, ol),
  .single-education_pathway .post-content .content-inner :is(ul, ol),
  .single-resource .post-content .content-inner :is(ul, ol) {
    margin: 0 0 1.25em;
    padding-left: 1.4em;
  }

  .prose :is(ul, ol) :is(ul, ol),
  .single-event .post-content .content-inner :is(ul, ol) :is(ul, ol),
  .single-education_pathway .post-content .content-inner :is(ul, ol) :is(ul, ol),
  .single-resource .post-content .content-inner :is(ul, ol) :is(ul, ol) {
    margin: .5em 0 0;
  }

  .prose li,
  .single-event .post-content .content-inner li,
  .single-education_pathway .post-content .content-inner li,
  .single-resource .post-content .content-inner li { margin-bottom: .5em; }

  .prose li::marker,
  .single-event .post-content .content-inner li::marker,
  .single-education_pathway .post-content .content-inner li::marker,
  .single-resource .post-content .content-inner li::marker { color: #a8c81c; }

  /* --- blockquote --- */
  .prose blockquote,
  .single-event .post-content .content-inner blockquote,
  .single-education_pathway .post-content .content-inner blockquote,
  .single-resource .post-content .content-inner blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border-left: 4px solid #a8c81c;
    font-size: 18px;
    line-height: 1.6;
    font-style: normal;
    color: #464a5c;
  }

  /* Salient draws its own 4px rule as blockquote::before, coloured from
     --nectar-accent-color. That variable is still the stock #3452ff blue, so
     without this the quote shows two stripes — Salient's blue beside the lime
     one above. Hiding the pseudo-element leaves the border-left as the only rule.
     (The accent variable itself is a Theme Options → Accent Colors setting and
     is out of scope for this file — see the note in the inventory.) */
  .prose blockquote::before,
  .single-event .post-content .content-inner blockquote::before,
  .single-education_pathway .post-content .content-inner blockquote::before,
  .single-resource .post-content .content-inner blockquote::before {
    display: none;
  }

  .prose blockquote p:last-child,
  .single-event .post-content .content-inner blockquote p:last-child,
  .single-education_pathway .post-content .content-inner blockquote p:last-child,
  .single-resource .post-content .content-inner blockquote p:last-child { margin-bottom: 0; }

  /* --- images --- */
  .prose :is(img, figure img),
  .single-event .post-content .content-inner :is(img, figure img),
  .single-education_pathway .post-content .content-inner :is(img, figure img),
  .single-resource .post-content .content-inner :is(img, figure img) {
    max-width: 100%;
    height: auto;
    /* 24px matches .wwd-media and .featured-event__image */
    border-radius: 24px;
  }

  .prose figcaption,
  .single-event .post-content .content-inner figcaption,
  .single-education_pathway .post-content .content-inner figcaption,
  .single-resource .post-content .content-inner figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #808289;
  }

  /* --- tables ---
     Wrapped in an overflow container so a wide table scrolls
     itself instead of forcing the page sideways on mobile. */
  .prose .table-scroll,
  .single-event .post-content .content-inner .table-scroll,
  .single-education_pathway .post-content .content-inner .table-scroll,
  .single-resource .post-content .content-inner .table-scroll {
    overflow-x: auto;
    margin: 0 0 1.6em;
  }

  .prose table,
  .single-event .post-content .content-inner table,
  .single-education_pathway .post-content .content-inner table,
  .single-resource .post-content .content-inner table {
    width: 100%;
    margin: 0 0 1.6em;
    border-collapse: collapse;
    font-size: 15px;
  }

  /* Two !importants, both verified against the rendered page rather than assumed:

     font-size — Salient sets `.main-content td { font-size: 14px }`. A direct rule
     always beats an inherited one, so the 15px on `table` above never reaches the
     cells and `td` renders 1px smaller than `th`.

     border-bottom-color — Salient's `body:not(.woocommerce-cart) .main-content tr
     td:first-child` is (0,3,3) and outranks this rule's (0,3,1), so without the
     override the first column's rule is #ececec while every other column is #e0e0e5.

     The side borders come from the same Salient rules and draw a full gridline
     box. Nothing else on the site uses gridlines, so they are zeroed and the
     table reads as horizontal rules only. */
  .prose :is(th, td),
  .single-event .post-content .content-inner :is(th, td),
  .single-education_pathway .post-content .content-inner :is(th, td),
  .single-resource .post-content .content-inner :is(th, td) {
    padding: 12px 16px;
    font-size: 15px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e0e0e5 !important;
    text-align: left;
    vertical-align: top;
  }

  .prose th,
  .single-event .post-content .content-inner th,
  .single-education_pathway .post-content .content-inner th,
  .single-resource .post-content .content-inner th {
    font-weight: 700;
    color: #464a5c;
    border-bottom-width: 2px;
  }

  /* --- rule --- */
  .prose hr,
  .single-event .post-content .content-inner hr,
  .single-education_pathway .post-content .content-inner hr,
  .single-resource .post-content .content-inner hr {
    height: 1px;
    margin: 2.4em 0;
    border: 0;
    background: #e0e0e5;
  }

  /* --- responsive --- */
  @media (max-width: 690px) {
    .prose h2, .single-event .post-content .content-inner h2,
    .single-education_pathway .post-content .content-inner h2,
    .single-resource .post-content .content-inner h2 { font-size: 26px; }

    .prose h3, .single-event .post-content .content-inner h3,
    .single-education_pathway .post-content .content-inner h3,
    .single-resource .post-content .content-inner h3 { font-size: 21px; }

    .prose blockquote,
    .single-event .post-content .content-inner blockquote,
    .single-education_pathway .post-content .content-inner blockquote,
    .single-resource .post-content .content-inner blockquote {
      padding-left: 18px;
      font-size: 17px;
    }
  }

  /* ═══════════════════════════════════════════════════════
     13. PAGE HEADER BAND
     The short banner that opens an inner page. Derived from
     the hero (section 9) at roughly a third the height.

     Two ways in, because the two contexts have different markup:

       .page-header      Row class, for the builder pages. Put it
                         on a full-width WPBakery row and set the
                         title element to .page-header-title.

       CPT singles       Applied automatically. Salient already
                         emits .heading-title > .section-title >
                         h1.entry-title on event / education_pathway
                         / resource / post, so the band is styled
                         onto that rather than duplicated.

     Default fill is the footer blue, which bookends the page.
     Add .page-header--image alongside a background image for the
     hero's dark gradient treatment instead.
     ═══════════════════════════════════════════════════════ */

  .wpb_row.page-header,
  .single-event .heading-title,
  .single-education_pathway .heading-title,
  .single-resource .heading-title,
  .single-post .heading-title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 280px;
    background-color: #376ea0;
    background-size: cover;
    background-position: center;
  }

  /* Builder rows need the same breakout. Salient has its own JS that
     stretches a full-width row, but it only runs on rows it has
     processed (it marks those with .loaded) and it does not pick up a
     row written straight into post content — verified on page 489,
     where the row rendered with .full-width-section but stayed inside
     the 1245px container. Doing it in CSS keeps it independent of that.

     margin-bottom needs !important: Salient zeroes row margins at a
     specificity this rule cannot reach without it. */
  /* No padding on the row itself — it does not compute as border-box here,
     so side padding would add to the 100vw width and push 48px off-screen.
     The gutter goes on the inner wrap below instead. Vertical size comes
     from min-height plus flex centring, since WPBakery writes padding-top
     and padding-bottom inline on every row and would win regardless. */
  .wpb_row.page-header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 56px !important;
  }

  .container-wrap:has(.wpb_row.page-header) {
    overflow-x: clip;
    padding-top: 0;
  }

  /* Salient's own markup sits inside .container, so the band has to
     break out to reach the page edges. overflow-x: clip on the wrap
     stops the 100vw overhang creating a horizontal scrollbar where
     the OS draws classic (space-taking) scrollbars — clip rather
     than hidden, so it does not become a scroll container and break
     the fixed header. */
  .single-event .heading-title,
  .single-education_pathway .heading-title,
  .single-resource .heading-title,
  .single-post .heading-title {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .single-event .container-wrap,
  .single-education_pathway .container-wrap,
  .single-resource .container-wrap,
  .single-post .container-wrap { overflow-x: clip; }

  /* Salient's `.single .heading-title[data-header-style="default_minimal"]`
     is (0,3,0) and sets its own padding. The body prefix takes these to
     (0,3,1) so they win outright rather than on source order.
     Zeroing the wrap's 40px top padding butts the band to the header. */
  body.single-event .container-wrap,
  body.single-education_pathway .container-wrap,
  body.single-resource .container-wrap,
  body.single-post .container-wrap { padding-top: 0; }

  body.single-event .container-wrap .heading-title,
  body.single-education_pathway .container-wrap .heading-title,
  body.single-resource .container-wrap .heading-title,
  body.single-post .container-wrap .heading-title {
    padding: 72px 24px;
    margin-bottom: 56px;
  }

  /* --- inner container: matches the 1245px row width used site-wide --- */
  .wpb_row.page-header > .row_col_wrap_12,
  .wpb_row.page-header > .row_col_wrap_12_inner,
  .single-event .heading-title > .section-title,
  .single-education_pathway .heading-title > .section-title,
  .single-resource .heading-title > .section-title,
  .single-post .heading-title > .section-title {
    width: 100%;
    max-width: 1245px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* --- title --- */
  .wpb_row.page-header .page-header-title,
  .single-event .heading-title .entry-title,
  .single-education_pathway .heading-title .entry-title,
  .single-resource .heading-title .entry-title,
  .single-post .heading-title .entry-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
  }

  /* Salient wraps the title in a span on some post types */
  .single-event .heading-title .entry-title span,
  .single-education_pathway .heading-title .entry-title span,
  .single-resource .heading-title .entry-title span,
  .single-post .heading-title .entry-title span { color: #fff; }

  /* --- optional subtitle, builder rows only --- */
  .wpb_row.page-header .page-header-lead,
  .wpb_row.page-header .page-header-lead p {
    max-width: 760px;
    margin: 16px auto 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    text-align: center;
  }

  /* --- photo variant: same gradient as the hero, so a background
         image stays legible under white type --- */
  .wpb_row.page-header--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, .45) 0%,
                rgba(0, 0, 0, .25) 45%,
                rgba(0, 0, 0, .30) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .wpb_row.page-header--image > .row_col_wrap_12 {
    position: relative;
    z-index: 2;
  }

  /* --- responsive --- */
  @media (max-width: 1000px) {
    .wpb_row.page-header,
    .single-event .heading-title,
    .single-education_pathway .heading-title,
    .single-resource .heading-title,
    .single-post .heading-title { min-height: 220px; }

    body.single-event .container-wrap .heading-title,
    body.single-education_pathway .container-wrap .heading-title,
    body.single-resource .container-wrap .heading-title,
    body.single-post .container-wrap .heading-title {
      padding: 56px 24px;
      margin-bottom: 40px;
    }

    .wpb_row.page-header .page-header-title,
    .single-event .heading-title .entry-title,
    .single-education_pathway .heading-title .entry-title,
    .single-resource .heading-title .entry-title,
    .single-post .heading-title .entry-title { font-size: 38px; }
  }

  @media (max-width: 690px) {
    .wpb_row.page-header,
    .single-event .heading-title,
    .single-education_pathway .heading-title,
    .single-resource .heading-title,
    .single-post .heading-title { min-height: 180px; }

    body.single-event .container-wrap .heading-title,
    body.single-education_pathway .container-wrap .heading-title,
    body.single-resource .container-wrap .heading-title,
    body.single-post .container-wrap .heading-title {
      padding: 40px 20px;
      margin-bottom: 32px;
    }

    .wpb_row.page-header .page-header-title,
    .single-event .heading-title .entry-title,
    .single-education_pathway .heading-title .entry-title,
    .single-resource .heading-title .entry-title,
    .single-post .heading-title .entry-title { font-size: 30px; }

    .wpb_row.page-header .page-header-lead,
    .wpb_row.page-header .page-header-lead p { font-size: 16px; }
  }


  /* ═══════════════════════════════════════════════════════
     14. EVENT DETAIL
     Markup comes from the [event_detail] shortcode, which reads
     the event currently being viewed. Sits in a Global Section
     conditioned to the `event` post type, above the post body.

     The title is not repeated here — §13 already bands the
     .heading-title Salient emits on the single. This is the
     photo, the facts and the CTA.

     .event-badge / .event-meta / .event-button are inherited
     from §10 (featured event) on purpose, so the card and the
     detail page cannot drift apart.
     ═══════════════════════════════════════════════════════ */

  .event-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
  }

  .event-detail__media {
    width: calc(55% - 24px);
  }

  .event-detail__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 24px;
  }

  .event-detail__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(45% - 24px);
  }

  /* The badge and meta rows carry their own margins from §10; only the
     gaps this layout adds are set here. */
  .event-detail__panel .event-badge {
    margin-bottom: 20px;
  }

  .event-detail__panel .event-meta {
    margin-bottom: 24px;
  }

  .event-detail__lead {
    margin: 0 0 32px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    color: #666;
  }

  /* --- responsive --- */
  @media (max-width: 999px) {
    .event-detail {
      gap: 32px;
    }

    .event-detail__media,
    .event-detail__panel {
      width: 100%;
    }
  }

  @media (max-width: 690px) {
    .event-detail {
      gap: 24px;
      margin-bottom: 32px;
    }

    .event-detail__media img {
      aspect-ratio: 4 / 3;
    }

    .event-detail__panel .event-button {
      width: 100%;
    }
  }



/* ASLM benchmark internal page — reference-bound recovery pass. */
.aslm-benchmark-hero > .row_col_wrap_12,
.aslm-benchmark-overview > .row_col_wrap_12,
.aslm-benchmark-cta > .row_col_wrap_12 {
  align-items: center;
}

.aslm-benchmark-hero .wwd-media-col .img-with-aniamtion-wrap::after {
  display: none;
}

.aslm-benchmark-breadcrumbs,
.aslm-benchmark-pill,
.aslm-benchmark-title,
.aslm-benchmark-lead {
  margin-bottom: 0 !important;
}

.aslm-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  color: #666;
  font-size: 14px;
  font-weight: 600;
}

.aslm-breadcrumbs a {
  color: #494754;
  text-decoration: underline;
  text-decoration-color: #d7d6d6;
  text-underline-offset: 4px;
}

.aslm-benchmark-pill p {
  margin: 0 0 20px;
}

.aslm-benchmark-pill span {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #e0e0e5;
  border-radius: 999px;
  background: #fff;
  color: #494754;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.aslm-benchmark-pill--center p {
  text-align: center;
}

.aslm-benchmark-title h1,
h1.aslm-benchmark-title {
  margin: 0 0 24px !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.aslm-benchmark-lead p,
.aslm-benchmark-overview-copy p,
.aslm-benchmark-pathways p {
  margin-bottom: 0;
  color: #666;
  font-size: 18px;
  line-height: 1.6;
}

.aslm-benchmark-section-heading h2 {
  margin-bottom: 0 !important;
}

.aslm-benchmark-principles .wpb_column > .vc_column-inner {
  min-height: 280px;
}

body .wpb_row.role-cards.aslm-benchmark-principles .img-with-aniamtion-wrap,
body .wpb_row.role-cards.aslm-benchmark-principles .img-with-aniamtion-wrap .inner,
body .wpb_row.role-cards.aslm-benchmark-principles img.img-with-animation {
  flex: 0 0 64px !important;
  width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
}

.aslm-benchmark-pathways .vc_column-inner {
  padding-top: 28px;
  border-top: 3px solid #bfd704;
}

.aslm-benchmark-pathways .nectar-cta {
  margin-top: 28px;
}

.aslm-benchmark-pathways .nectar-cta .link_text {
  color: #494754 !important;
  font-weight: 700;
}

.aslm-benchmark-cta h2 {
  margin-bottom: 0 !important;
}

.aslm-benchmark-cta-action .wpb_wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.aslm-benchmark-hero a:focus-visible,
.aslm-benchmark-pathways a:focus-visible,
.aslm-benchmark-cta a:focus-visible {
  outline: 3px solid #9aca20 !important;
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  #header-outer,
  #header-outer header#top,
  #header-outer header#top .container,
  #header-outer header#top .row,
  #header-space {
    height: 72px !important;
  }

  #header-outer header#top .container {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body #header-outer #top #logo,
  body #header-outer #top #logo img,
  body #header-outer #top #logo .starting-logo,
  body #header-outer #top #logo .mobile-only-logo,
  body #header-outer #top #logo .dark-version {
    width: auto !important;
    height: 42px !important;
    max-height: 42px !important;
  }

  .aslm-benchmark-hero-media {
    margin-top: 40px;
  }

  .aslm-benchmark-cta-action .wpb_wrapper {
    justify-content: flex-start;
  }
}

@media (max-width: 690px) {
  .aslm-benchmark-title h1,
  h1.aslm-benchmark-title {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }

  .aslm-benchmark-lead p,
  .aslm-benchmark-overview-copy p,
  .aslm-benchmark-pathways p {
    font-size: 16px;
  }

  .aslm-benchmark-pathways .wpb_column {
    margin-bottom: 36px;
  }

  .aslm-benchmark-principles .wpb_column > .vc_column-inner {
    min-height: 0;
  }

  .aslm-benchmark-cta .cta-filled,
  .aslm-benchmark-cta .link_text {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aslm-benchmark-principles .wpb_column > .vc_column-inner {
    transition: none !important;
  }

  .aslm-benchmark-principles .wpb_column > .vc_column-inner:hover {
    transform: none !important;
  }
}



/* Alternative homepage: native WPBakery hero + existing Salient Global Sections. */
body.atlas-homepage #header-space { display: none !important; }

body.atlas-homepage #header-outer {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.atlas-homepage.admin-bar #header-outer { top: 32px; }

body.atlas-homepage #header-outer .container,
body.atlas-homepage #header-outer header#top,
body.atlas-homepage #header-outer header#top .container,
body.atlas-homepage #header-outer #header-inner,
body.atlas-homepage #header-outer .row {
  background: transparent !important;
}

body.atlas-homepage.at-top #header-outer header#top nav > ul > li > a {
  color: #fff !important;
  opacity: 1 !important;
}

body.atlas-homepage.at-top #header-outer #logo img {
  filter: brightness(0) invert(1);
}

body.atlas-homepage:not(.at-top) #header-outer {
  position: fixed !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important;
}

body.atlas-homepage:not(.at-top) #header-outer header#top nav > ul > li > a {
  color: var(--aslm-ink) !important;
}

body.atlas-homepage:not(.at-top) #header-outer #logo img { filter: none; }

.atlas-home-hero .hero-title {
  max-width: 1040px;
  font-size: 64px !important;
  line-height: 1.18 !important;
}

.atlas-home-hero .hero-lead p {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.5;
}

/* Reference cards are calm surfaces; remove the old decorative lift. */
.wpb_row.role-cards .wpb_column > .vc_column-inner,
.wpb_row.role-cards .wpb_column > .vc_column-inner:hover {
  transform: none;
}

@media (max-width: 999px) {
  body.atlas-homepage #header-space { display: block !important; height: 72px !important; }
  body.atlas-homepage #header-outer { position: relative !important; top: 0; background: #fff !important; }
  body.atlas-homepage #header-outer #logo img { filter: none !important; }
  .atlas-home-hero .hero-title { font-size: 44px !important; line-height: 1.18 !important; }
}

@media (max-width: 690px) {
  .atlas-home-hero { min-height: 560px; }
  .atlas-home-hero .hero-title { font-size: 32px !important; line-height: 1.31 !important; }
  .atlas-home-hero .hero-lead p { font-size: 16px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}