body {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Schibsted Grotesk", sans-serif;
    color: #363636;
    font-weight: 400;
    line-height: 150%;
    background: #fff
}

html,
body {
    height: 100%;
}

.main-wrapper {
    position: relative;
    overflow-x: hidden
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

a {
    color: #000000;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    text-decoration: none;
    color: #000000;
}

a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Restore a visible focus ring for keyboard / non-pointer users. The
 * blanket outline:none above suppresses the default ring for mouse focus;
 * :focus-visible brings it back only when the browser determines the user
 * is navigating by keyboard, satisfying WCAG 2.4.7 without the mouse-click
 * outline the design originally removed. */
a:focus-visible,
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #094764;
    outline-offset: 2px;
}

img {
    max-width: 100%;
    display: block;
	height: auto;
	width: auto;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #094764;
    margin-bottom: 12px;
}

h1,
.h1 {
    font-size: 65px;
    line-height: 100%;
}

h2,
.h2 {
    font-size: 40px;
    line-height: 100%;
}

h3,
.h3 {
    font-size: 35px;
    line-height: 110%;
}

h4,
.h4 {
    font-size: 30px;
    line-height: 110%;
}

h5,
.h5 {
    font-size: 22px;
    line-height: 110%;
}

h6,
.h6 {
    font-size: 18px;
    line-height: 110%;
}

.fs_50 {
    font-size: 50px
}

p {
    margin-bottom: 25px;
}


p:last-child {
    margin-bottom: 0 !important;
}


button {
    border: none;
    transition: all 0.4s ease 0s;
    background: transparent
}

.section,
section {
    padding: 70px 0;
}

.bg_light {
    background: #F7F8F7
}

.bg_gray {
    background: #f1f1f1
}

.container {
    max-width: 1200px
}

.container.long {
    max-width: 1400px;
}

.container.wide {
    max-width: 1400px;
}

.container.medium {
    max-width: 1100px
}

.container.smalls {
    max-width: 1080px
}

.container.xs-smalls {
    max-width: 900px
}

.relative {
    position: relative;
    z-index: 1
}

.bg_white {
    background: #fff
}

.bg_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
}

.text_white,
.text_white > * {
    color: #fff
}

.text_dark {
    color: #000000
}

.letter_space {
    letter-spacing: 2px
}

.text_upper {
    text-transform: uppercase
}

.fw_700 {
    font-weight: 700
}

.fw_600 {
    font-weight: 600
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 30px;
    border-radius: 50px;
    border: 2px solid transparent;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.cta-btn::after {
    position: absolute;
    content: "";
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    left: 50%;
    width: 400px;
    height: 400px;
    transform-origin: center;
    transition: all 0.6s ease;
    border-radius: 50%;
    z-index: -1
}

.cta-btn:hover::after {
    transform: translate(-50%, -50%) scale(1.2);
}

.cta-btn em {
    margin-left: 10px;
    font-size: 20px
}

.btn_white {
    border-color: #094764;
    background: #fff;
    color: #094764
}

.btn_white::after {
    background: #094764
}

.btn_white:hover {
    color: #fff
}

.btn_default {
    border-color: #094764;
    background: #094764;
    color: #fff
}

.btn_default::after {
    background: #fff
}

.btn_default:hover {
    color: #094764
}

.btn_black {
    background: #0F1923;
    color: #fff
}

.link_text_white {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 700;
    justify-content: center;
    text-transform: uppercase;
    color: #fff
}

.link_text_white em {
    margin-left: 10px;
    font-size: 20px
}

.link_text_default {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 700;
    justify-content: center;
    text-transform: uppercase;
    color: #094764
}

.link_text_default span {
    position: relative
}

.link_text_default span::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    transform: scalex(0);
    height: 2px;
    background: #094764;
    transition: all 0.4s
}

.link_text_default:hover span::after {
    transform: scaleX(1)
}

.link_text_default em {
    margin-left: 10px;
    font-size: 20px
}

.link_text_white span {
    position: relative
}

.link_text_white span::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: all 0.4s
}

.link_text_white:hover {
    color: #fff
}

.link_text_white:hover span::after {
    transform: scaleX(0)
}

.font_sportfield {
    font-family: 'Sportfield Varsity';
    font-weight: 400
}

.site-logo {
    display: inline-block;
    max-width: 130px;
}

.header-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 20px 0
}

.header-area .cta-btn {
    font-size: 14px
}

.mainmenu ul li {
    position: relative;
    display: inline-block;
    margin-right: 30px
}

.mainmenu ul li a {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    position: relative
}

.mainmenu ul li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s;
}

.mainmenu ul li a:hover::before {
    transform-origin: bottom left;
    transform: scaleX(1);
}

.mainmenu ul li.has-submenu > a::after {
    position: absolute;
    content: "";
    right: -5px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    top: 47%;
}

.mainmenu ul li.has-submenu > a:hover::after {
    border-color: #fff
}

.mainmenu ul li > ul {
    width: 250px;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 15px;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    -webkit-transition: all .4s;
    transition: all .4s;
    border-top: 3px solid rgba(10, 112, 194, 0.84);
    text-align: left;
    box-shadow: 0 19px 51px rgba(0, 0, 0, 0.31);
    background-color: #ffffff;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.mainmenu ul li > ul > li {
    display: block;
    padding: 0;
    margin: 0;
}

.mainmenu ul li > ul > li a {
    padding: 7px;
    display: block;
    color: #fff;
    opacity: 1;
    font-size: 16px;
    line-height: 20px
}

.mainmenu ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    -ms-filter: "alpha(opacity=100)";
}


.mainmenu ul li a:hover {
    opacity: 1;
}

.mainmenu ul li > ul > li a:hover {
    color: #5690F4
}

.hero-text {
    font-size: 20px
}

.hero-area {
    position: relative;
    z-index: 1;
    padding-top: 170px;
    padding-bottom: 170px;
    height: 670px;
    overflow: hidden;
    border-bottom-right-radius: 100px
}

.hero-area .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1
}

.hero-area::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: -1;
    opacity: 0.4;
}

/* Hero bottom-left "bathtub scoop" ornament (hero-corner.webp). Shown on every
 * page that uses the standard hero so the hero reads identically site-wide
 * (owner decision). Clamped to a small bottom-left mark (not the old full-width
 * scoop). To hide it again, set display:none here. */
.hero-corner {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(80px, 12vw, 220px);
    height: auto;
    pointer-events: none;
    z-index: 2;
}

/* The single-event hero is flattened (border-bottom-right-radius:0); restore the
 * standard hero's 100px bottom-right scoop so its corner matches the rest. */
body.single-event .single-event-banner {
    border-bottom-right-radius: 100px;
}

.hero-area .link_text_white {
    margin-top: 20px
}

.hero-bottom img {
    max-width: 150px;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.5)
}

.hero-bottom {
    font-style: italic;
    position: absolute;
    bottom: 50px;
    right: 5%
}

.hero-bottom p {
    margin: 0
}

.scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: absolute;
    right: 10%;
    bottom: 50px;
}

.scroll-down .arrow {
    width: 14px;
    height: 14px;
    position: relative;
    animation: moveDown 1.5s infinite;
    opacity: 0;
}

.scroll-down .arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
}

.scroll-down .arrow:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes moveDown {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

/* Baseline vertical rhythm for every block section. Scales smoothly from
 * 48px on mobile to 80px on wide desktop. Block-specific overrides like
 * .pt_150, .pb_250, and Bootstrap's .pt-0/.pb-0/.py-0 utilities still win
 * because they're defined later in this file and (for Bootstrap) carry
 * !important. Use those when a block wants tighter or heavier spacing. */
.content-area {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
}


.video-holder {
    border-radius: 70px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

/* Direct iframe embed variant used by the intro-video block when a
 * YouTube / Vimeo URL is set. Slight rounded corners (vs the heavier
 * 70px notch-style .video-holder), no overlay shape, 16:9 aspect. */
.intro-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}

.intro-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* On wide screens the text column runs taller than the 16:9 embed, leaving
 * the centered video floating with dead space above/below. Let the embed
 * bleed toward the page's left margin so it grows to sit more even with the
 * copy on the right. The bleed is derived from the available outer margin
 * ((100vw - container) / 2), so it stays 0 until the viewport is wider than
 * the ~1200px container and never causes horizontal overflow. */
.intro-video-embed {
    --intro-video-bleed: clamp(0px, calc((100vw - 1230px) / 2), 130px);
    width: calc(100% + var(--intro-video-bleed));
    margin-left: calc(-1 * var(--intro-video-bleed));
}

/* The left bleed is for video-in-LEFT-column layouts (home). When the
 * embed column is flex-ordered to the right (.order-sm-2, registered
 * pages), the negative left margin would drag the video over the text
 * column and clip the copy. Mirror the bleed to the right instead. */
.order-sm-2 .intro-video-embed {
    margin-left: 0;
    margin-right: calc(-1 * var(--intro-video-bleed));
}

/* Custom minimal controls for the Vimeo intro-video embed (native chrome hidden
 * via controls=0). A transparent full-cover play/pause surface with a centered
 * brand circle, plus a corner mute toggle — so the player shows no Vimeo logo
 * or control bar. Driven by main.js via the Vimeo Player API. */
.intro-video-embed--custom .ivc-surface {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.intro-video-embed--custom .ivc-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: rgba(0, 70, 100, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    transition: opacity .25s ease, background .2s ease, transform .2s ease;
}

/* optical-center the play triangle inside the circle */
.intro-video-embed--custom .ivc-icon em.fa-play {
    transform: translateX(3px);
}

.intro-video-embed--custom .ivc-surface:hover .ivc-icon {
    background: #004664;
    transform: scale(1.04);
}

/* While playing, fade the icon out; reveal it (as a pause glyph) on hover. */
.intro-video-embed--custom.is-playing .ivc-icon {
    opacity: 0;
}

.intro-video-embed--custom.is-playing .ivc-surface:hover .ivc-icon {
    opacity: 1;
    transform: none;
}

.intro-video-embed--custom .ivc-mute {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 70, 100, 0.55);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.intro-video-embed--custom .ivc-mute:hover {
    background: #004664;
}

@media (max-width: 575px) {
    .intro-video-embed--custom .ivc-icon {
        width: 70px;
        height: 70px;
        font-size: 26px;
    }
    .intro-video-embed--custom .ivc-mute {
        width: 40px;
        height: 40px;
        right: 12px;
        bottom: 12px;
    }
}

.video-holder .image_shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
}

.play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #004664;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff
}

.play_btn:hover {
    background: #004664;
    color: #fff
}

.text-carousel .item {
    text-align: center
}

.text-carousel .title {
    margin: 0;
    font-size: 60px;
    -webkit-text-stroke-color: #004664;
    -webkit-text-fill-color: #004664;
    -webkit-text-stroke-width: 1px;
}

.text-carousel .slide {
    padding: 0 5px
}

.text-carousel .slick-list {
    margin-left: -5px;
    margin-right: -5px
}

.text-carousel .slide:nth-of-type(2n) .title {
    -webkit-text-fill-color: #F7F8F7;
    -webkit-text-stroke-color: rgb(0, 70, 100);
}

.accordion-wrapper {
    background: transparent;
    width: 100%;
}

.h-tab-area .accordion {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 480px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    gap: 15px
}

.accordion .tabs {
    flex: 0 0 16%;
    background-color: transparent;
    padding: 2px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s;
    font-size: 36px;
    font-weight: 400;
    line-height: 96%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px
}

.accordion .tabs + .tabs {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.accordion .tabs:hover {
    cursor: pointer;
}

.accordion .tabs .tab-header {
    writing-mode: vertical-rl;
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    height: 100%;
    padding: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-size: 40px;
    font-weight: 400;
    line-height: 96%;
    flex-direction: row-reverse;
    width: 100%;
    height: 480px;
    visibility: visible;
    opacity: 1;
}

.tab-content-wrapper .heading {
    color: #fff;
    font-size: 40px;
    font-weight: 400;
    line-height: 96%;
    font-family: 'Canela';
    margin-bottom: 25px
}

.tab-content-wrapper .video-star-rating {
    margin-bottom: 20px
}


.accordion .tabs .tab-header > img {
    transform: rotate(90deg);
    margin-top: 30px
}

.accordion .tabs .tab-header .text > div {
    position: absolute;
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 200px;
}

.accordion .tabs .tab-content {
    visibility: hidden;
    opacity: 0;
    position: relative;
    width: 100%;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.accordion .tabs .tab-content .action a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 400;
    line-height: 144%;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);

}




.accordion .tabs .tab-content .tab-content-wrapper,
.accordion .tabs .tab-content .meta {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s 0.3s;
}

.accordion .tabs .tab-content .title-time {
    font-weight: bold;
    font-size: 5.4rem;
    text-transform: uppercase;
    margin: 2rem 0 10rem;
}

.accordion .tabs .tab-content .tab-img {
    position: absolute;
    top: -3rem;
    left: -3rem;
    right: -3rem;
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: 2;
}

.accordion .tabs.is-active {
    flex: 6;
    flex-shrink: 0;
    justify-content: flex-start;
    flex-direction: row-reverse;
    align-items: flex-start;
    background: #fff;
    box-shadow: 11px 19px 14px 0 rgba(0, 0, 0, 0.05)
}


.accordion .tabs.is-active .tab-header {
    width: 45%;
    visibility: visible;
    opacity: 1;
}

.accordion .tabs.is-active .tab-content {
    visibility: visible;
    opacity: 1;
}

.accordion .tabs.is-active .tab-content .tab-content-wrapper,
.accordion .tabs.is-active .tab-content .meta {
    visibility: visible;
    opacity: 1;
}

.tab-header video,
.accordion .tabs .tab-header > img.testi-media-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 25px
}

/* Neutralise the vertical-label image treatment (.accordion .tabs .tab-header >
 * img is rotated 90deg + offset for the collapsed text label) so the
 * testimonial media image fills the panel exactly like the <video> does. The
 * selector matches that rule's specificity plus the extra class, so it wins. */
.accordion .tabs .tab-header > img.testi-media-img {
    transform: none;
    margin-top: 0;
}

.tab-content-wrapper {
    color: #001422;
    font-size: 21px;
    line-height: 130%;
    font-family: "Schibsted Grotesk", sans-serif;
    font-style: italic
}

img.video-review-logo {
    max-width: 120px;
}

.video-star-rating {
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
    color: #fcab35;
    font-style: normal;
}

.accordion .tabs .tab-content .meta {
    color: #001422;
    font-size: 12px;
    line-height: 120%;
    font-family: "Schibsted Grotesk", sans-serif;
}

.accordion .tabs .tab-content .meta img {
    margin-bottom: 20px
}

.accordion .tabs .tab-content .meta .title {
    color: #001422;
    font-size: 24px;
    margin-bottom: 5px;
    font-family: 'Sportfield Varsity';
    font-weight: 400;
}

/* Testimonials Tabs: keep the author's name + role visible no matter how long
 * the quote runs. The expanded panel is a fixed height (480px desktop, 400px on
 * large tablet) with overflow:hidden, so a quote longer than the others used to
 * spill past the bottom edge and push the .meta (name + role) out of sight. Pin
 * the .meta to the bottom and let the quote block absorb the squeeze; the
 * auto-fit routine in main.js shrinks an over-long quote's font so it fits
 * without clipping. Scoped to .h-tab-area so the shared .accordion markup used
 * by other blocks is left untouched. */
.h-tab-area .accordion .tabs.is-active .tab-content {
    justify-content: flex-start;
}
.h-tab-area .accordion .tabs.is-active .tab-content .tab-content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.h-tab-area .accordion .tabs.is-active .tab-content .meta {
    margin-top: auto;
    flex-shrink: 0;
}

.section-heading {
    margin-bottom: 30px
}

.section-heading.alt .heading {
    display: inline-block;
    font-size: 22px;
    letter-spacing: 2px;
    position: relative;
    z-index: 1
}

.section-heading.alt .heading span {
    background: #F7F8F7;
    padding: 0 10px
}

.bg_white .section-heading.alt .heading span {
    background: #fff
}

.section-heading.alt .heading::after {
    position: absolute;
    content: "";
    top: 11px;
    left: 50%;
    width: calc(100% + 300px);
    height: 2px;
    background: #004664;
    transform: translateX(-50%);
    z-index: -1;
}

.logo-carousel .slide {
    padding: 0 15px
}

.logo-carousel .slick-list {
    margin-left: -15px;
    margin-right: -15px
}

.logo-carousel .item {
    height: 70px;
    background: #F7F8F7;
    display: flex;
    align-items: center;
    justify-content: center
}

.logo-carousel .item img {
    height: 22px;
    object-fit: contain
}

.bg_white .logo-carousel .item {
    background: #fff;

}

.logo-carousel img {
    filter: invert(1) brightness(0.5);
}

.featured-text-box {
    position: relative;
    padding: 58px 72px;
    background: #fff;
    box-shadow: -3px 4px 24px 0 rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    margin-top: 30px;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.center-badge-img {
    width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

/* Three Pillars Venn diagram — "The Entrepreneur Support System".
 * Editorial, type-led, single-hue: three navy ring circles drawn as line-work
 * over faint tonal fills, so the overlaps (not three competing colours) carry
 * the Venn logic. The triple intersection is deepened as the figure where all
 * three meet, and "Good People." (the brand spine) sits there as the payoff,
 * with the period as the single warm-gold accent. No container box — the
 * figure floats on the bg_light section band so it reads as part of the page.
 * viewBox is 0 0 1000 780. Labels + payoff use the Sportfield Varsity display
 * face; the SVG is single words, so it stays legible scaling down (no separate
 * mobile fallback needed).
 */
.three-pillars-venn {
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.three-pillars-venn__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Pillar labels and the central payoff share the brand display face. */
.three-pillars-venn .tpv-label,
.three-pillars-venn .tpv-people {
    font-family: "Sportfield Varsity", "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    fill: #094764;
}

.three-pillars-venn .tpv-label {
    letter-spacing: 1px;
}

@media (max-width: 600px) {
    .three-pillars-venn {
        max-width: 440px;
    }
}

.center-badge-wrapper .icon {
    background: #004664;
    min-width: 80px;
    min-height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.center-badge-wrapper .icon img {
    width: 40px
}

.center-badge-wrapper .item .title {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin: 0
}

.center-badge-wrapper .item {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 325px;
}

.center-badge-wrapper .item.left-side {
    text-align: right
}

.center-badge-wrapper {
    position: relative;
    margin: 100px 0;
}

.center-badge-wrapper .item {
    position: absolute
}

.center-badge-wrapper .item.v1 {
    top: 0;
}

.center-badge-wrapper .item .shape {
    position: absolute
}

.center-badge-wrapper .item.v1 .shape {
    left: 100%;
    top: 35px;
    width: 90px
}

.center-badge-wrapper .item.v2 {
    max-width: 280px;
    top: 43%;
    left: -34px;
}

.center-badge-wrapper .item.v2 .shape {
    left: 100%;
    width: 95px;
}

.center-badge-wrapper .item.v3 {
    bottom: 0;
}

.center-badge-wrapper .item.v3 .shape {
    left: 100%;
    width: 87px;
    top: 0px;
}

.center-badge-wrapper .item.right-side {
    flex-direction: row-reverse
}

.center-badge-wrapper .item.v4 {
    top: 0;
    right: 0;
}

.center-badge-wrapper .item.v4 .shape {
    right: 100%;
    width: 90px;
    top: 35px;
}

.center-badge-wrapper .item.v5 {
    max-width: 280px;
    top: 43%;
    right: -34px;
}

.center-badge-wrapper .item.v5 .shape {
    right: 100%;
    width: 95px;
}

.center-badge-wrapper .item.v6 {
    bottom: 0;
    right: 0
}

.center-badge-wrapper .item.v6 .shape {
    right: 100%;
    width: 87px;
    top: 0px;
}

.box.style1 {
    margin-top: 50px
}

.box.style1 img {
    transform: scale(1.1);
    padding: 4px;
    background: #fff;
    border-radius: 20px
}

.box.style1 .text {
    padding: 25px;
    padding-top: 35px;
    font-size: 16px
}

.scale-box-area .col-md-3:nth-child(even) .box.style1 {
    transform: translateY(50px)
}

.number_tabs .accordion {
    margin-bottom: 40px
}

.number_tabs .accordion-button {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none !important;
    text-transform: uppercase;
    font-weight: 600;
    color: #004664;
    font-size: 22px;
    font-family: "Schibsted Grotesk", sans-serif !important;
    position: relative
}

.number_tabs .accordion-item {
    border: none;
    padding-left: 55px;
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
    z-index: 1;
    background-color: transparent !important
}

.number_tabs .accordion-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 18px;
    width: 1px;
    height: 100%;
    background: #004664;
    z-index: -1;
}

.number_tabs .accordion-item:first-child::before {
    top: 10px
}

.number_tabs .accordion-item:last-child::before {
    top: auto;
    bottom: 14px;
}

.number_tabs .accordion-body {
    padding: 15px 0 0
}

.number_tabs .accordion-button::after {
    display: none
}

/* Node marker on the connector rail — replaces the old 01/02/03 numbered
 * badges. The numbers read as AI "section markers" and implied a sequence the
 * membership benefits don't have. A small dot that fills navy on the open item
 * keeps the rail and the open/closed affordance without the numbering. */
.number_tabs .accordion-button .num {
    position: absolute;
    top: 7px;
    left: -44px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #004664;
    background: #F7F8F7;
    transition: all 0.3s;
}

.number_tabs .accordion-button:not(.collapsed) .num {
    background: #004664;
}

.pt_150 {
    padding-top: 150px
}

.half_image {
    position: absolute;
    right: 0;
    width: 40%;
    height: 670px;
    border-radius: 20px;
    object-fit: cover;
    top: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.acordion-alt .half_image {
    top: 80px;
    height: 570px
}

.mobile-mockup {
    position: absolute;
    width: 310px;
    left: 54%;
    top: 14%;
    box-shadow: 11px 19px 14px 0 rgba(0, 0, 0, 0.1);
    border-radius: 60px
}

.pb_250 {
    padding-bottom: 300px
}

/* === Chat bubbles overlaying the phone mockup =========================
 * Used by both branches of the membership-accordion block (v1 acordion-alt
 * and v2 large_tab). Pure-CSS rounded rect + ::after wedge tail — no
 * bitmap backgrounds, so the bubble shape stays crisp at any text length.
 *
 * Layout: iMessage-style stagger. v1/v2 sit on the LEFT and hang slightly
 * past the phone's left edge; v3/v4 sit on the RIGHT and hang past the
 * right edge. Each tail points back toward the phone, anchoring the
 * bubble to the device visually.
 *
 * All properties live in this block — no overrides elsewhere, no
 * !important, no duplicate selectors. Tablet/phone variant lives in a
 * single @media rule further down (also untouched by other selectors).
 * ====================================================================== */

.mockup-tags {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    color: #F7F8F7;
    font-size: 14px;
    line-height: 1.25;
    /* width:max-content lets the bubble grow to its natural single-line
     * width before being capped at max-width. Without it, an absolutely-
     * positioned text element collapses to its widest unbreakable word. */
    width: max-content;
    max-width: 200px;
    min-height: 40px;
    text-align: center;
    background: #3A7193; /* was #68a1c3, darkened for 4.5:1 text contrast */
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: floatUpDown 4s ease-in-out infinite;
}

/* Tail wedge. background-color: inherit lets v4's navy bubble carry a
 * navy tail automatically. */
.mockup-tags::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 14px;
    background-color: inherit;
    bottom: -6px;
}

/* v1 — upper-left, hangs off the left edge of the phone */
.mockup-tags.v1 {
    top: 22%;
    left: -8%;
    animation-duration: 3s;
}
.mockup-tags.v1::after {
    right: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* v2 — middle-left, hangs slightly further off the edge than v1 */
.mockup-tags.v2 {
    top: 50%;
    left: -10%;
    animation-duration: 4s;
    animation-delay: 0.5s;
}
.mockup-tags.v2::after {
    right: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* v3 — bottom-right, hangs off the right edge */
.mockup-tags.v3 {
    top: 74%;
    right: -10%;
    animation-duration: 3.5s;
    animation-delay: 1s;
}
.mockup-tags.v3::after {
    left: 14px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* v4 — top-right, navy notification banner, hangs off the right edge */
.mockup-tags.v4 {
    top: 5%;
    right: -8%;
    background: #004464;
    animation-duration: 4.5s;
    animation-delay: 0.8s;
}
.mockup-tags.v4::after {
    left: 14px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.group_btn .cta-btn {
    margin-right: 10px
}

/* .cta_group_btn — emitted by cta.php's `start` hero variant when the
 * editor adds multiple anchor buttons via the ACF `buttons` repeater
 * (used on /start/ and similar onboarding pages). Without a layout
 * rule the inner .cta-btn anchors collapse to their content width
 * and the row wraps awkwardly (e.g. 3 pills row-1, 4th orphaned
 * row-2 at 1500px). Using a fixed-fraction grid so the pills layout
 * predictably: even widths, even gap, even wrap.
 *
 * - 4 pills per row at >=992px (the typical use case is 4 step pills)
 * - 2 columns at tablet
 * - 1 column at phone
 *
 * The grid columns are auto-fit with a min size, so the same rule
 * handles 1, 2, 3, 4, 5+ buttons gracefully.
 */
.cta_group_btn {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    margin: 28px auto 0;
    max-width: 880px;
}

.cta_group_btn .cta-btn {
    width: 100%;
    text-align: center;
    white-space: normal;
}

@media (max-width: 767px) {
    .cta_group_btn {
        grid-template-columns: repeat(2, 1fr);
        max-width: 480px;
    }
}

@media (max-width: 480px) {
    .cta_group_btn {
        grid-template-columns: 1fr;
        max-width: 320px;
    }
}

.meet_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F1F1F1;
    z-index: -1;
}

.meet_shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    z-index: 11;
}

.meet-slider .slide {
    padding: 35px 8px;
}

.meet-slider .slick-list {
    margin-left: -80px;
    margin-right: -80px;
}

.meet-slider .box.style2 {
    height: 480px;
    width: 600px;
    display: block;
    position: relative;
    transform: scale(0.9) translate(250px);
    transition: all 0.5s;
    transform-origin: right
}

.meet-slider .box.style2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    transition: all 0.5s ease;
}



.meet-slider .slide.slick-active + .slide.slick-active .box.style2 {
    transform: scale(0.9) translate(175px);
}

.meet-slider .slide.slick-active + .slick-center .box.style2 {
    transform: scale(1.2) translate(50px) !important;
    z-index: 11;
}

.meet-slider .slick-center + .slick-active .box.style2 {
    transform: scale(0.9) translate(-295px) !important
}

.meet-slider .slick-center + .slick-active + .slick-active .box.style2 {
    transform: scale(0.9) translate(-370px) !important
}

.meet-slider .box.style2::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2
}

.meet-slider .box.style2 .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 26px 22px 28px;
    z-index: 1;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    transition: all 0.4s;
    opacity: 0;
    visibility: hidden;
}

.meet-slider .box.style2 .text .title {
    font-family: "Schibsted Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
}

.meet-slider .slick-center .box.style2 .text {
    opacity: 1;
    visibility: visible
}

.meet-slider .slick-slide {
    min-width: 150px;
    /* adjust as needed */
}

.section-action {
    margin-top: 50px
}

.circle-stats-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 50px;
}

.circle-stats-wrapper .item {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 15px;
    position: relative
}

.circle-stats-wrapper .item::after {
    position: absolute;
    content: "OR";
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    left: 94%;
    top: 50%;
    transform: translateY(-50%);
}

.circle-stats-wrapper .item:last-child::after {
    display: none
}

.circle-stats-wrapper .inner-num {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0F1923;
    color: #fff;
    margin: 0 auto;
    text-align: center;
}

.circle-stats-wrapper .inner-num .title {
    color: #fff;
    font-family: 'Sportfield Varsity';
    font-size: 40px;
    margin: 0
}

.circle-stats-wrapper .item.v2 .inner-num {
    background: #094764
}

.circle-stats-wrapper .item.v3 .inner-num {
    background: #68A3C4
}

.circle-stats-wrapper .item.v4 .inner-num {
    background: #094764
}

.circle-states-area {
    font-size: 20px
}

.circle-states-area .container,
.duck-flag-cta .container {
    max-width: 910px
}

/* "Good People Find Their People" mascot — md+ only. The duck image
 * (max-width 270px, float right) was wider than its col-md-3, so it spilled
 * left out of its column and the flag/beak overlapped the heading and the
 * first paragraph. Contain it to the column and pad its left edge so there is
 * clear space between the copy and the mascot. Below 768px the duck stacks and
 * centres under the text (handled by the .seq-img rules in the mobile blocks),
 * so this is scoped to the side-by-side layout only. */
@media (min-width: 768px) {
    .duck-flag-cta .seq-img {
        padding-left: 28px;
    }
    .duck-flag-cta .seq-img img {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
 * Criteria Stats — PPP row
 * Three labelled circles (Professional / Personality / Participation by
 * default, but the labels/icons/colors are editable per row via ACF).
 * Migrated out of inline <style> + <div> markup that used to live inside
 * the criteria-stats block's description WYSIWYG on page 411.
 * -------------------------------------------------------------------------- */
.criteria-stats__ppp-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
    justify-items: center;
    max-width: 960px;
    margin: 0 auto 40px;
}

.criteria-stats__ppp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.criteria-stats__ppp-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 16px;
}

.criteria-stats__ppp-circle--orange {
    background: #A05F24; /* was #B87333, darkened for 4.5:1 white-text contrast */
}

.criteria-stats__ppp-circle--navy {
    background: #094764;
}

.criteria-stats__ppp-circle--muted-blue {
    background: #41799C; /* was #68A3C5, darkened for 4.5:1 white-text contrast */
}

.criteria-stats__ppp-icon {
    font-size: 28px;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1;
}

.criteria-stats__ppp-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
    margin: 0;
}

.criteria-stats__ppp-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #363636;
    max-width: 220px;
    margin: 22px auto 0;
}

@media (max-width: 820px) {
    .criteria-stats__ppp-row {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

.seq-img img {
    max-width: 270px;
    float: right;
}

.box.style3 {
    margin-top: 30px;
    background: #fff;
    display: block;
    box-shadow: 2.5px 4.33px 10px 0 rgba(0, 0, 0, 0.07);
    padding: 10px;
    border-radius: 25px;
    color: #5C5C5C
}

.box.style3 .text {
    padding: 20px 5px
}

.box.style3:hover {
    transform: translateY(-10px)
}

.newsletter-box {
    border-radius: 60px;
    padding: 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Push the card down from whatever sits above it. The 3 templates that
     * render .newsletter-box (acf/newsletter, acf/cta, footer-cta) all put
     * it inside a section with .py-0, so the section contributes 0
     * vertical padding. The margin lives on the card itself so spacing is
     * consistent at the component level regardless of section context.
     * Scales 60px (mobile) -> 100px (wide desktop). */
    margin-top: clamp(60px, 6vw, 100px);
}

.newsletter-box::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #094764;
    z-index: -1;
    /* The card's overflow:hidden + border-radius:60px already clips the
     * corners; no need for a separate corner-cut here. (Was previously
     * border-bottom-right-radius: 150px which created an unwanted notch.) */
}

.newsletter-box.style3::after {
    z-index: 1;
    opacity: 0.3
}

.newsletter-box .newsletter_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    object-position: bottom right;
    z-index: 1;
    border-bottom-right-radius: 100px
}

.newsletter-box .heading {
    font-size: 55px
}

.newsletter-box .inner {
    width: 68%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* The newsletter form carries the production field set (name / email /
 * phone / consent), so the old single-pill layout (fixed 60px form with
 * every input absolutely stacked) no longer works. Each text input is its
 * own white pill; the consent checkbox and submit button flow below. */
.newsletter-box form {
    position: relative;
    height: auto;
    background: transparent;
}

.newsletter-box form .gform_fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.newsletter-box .gfield {
    flex: 1 1 100%;
    position: relative;
    margin: 0 !important;
}

.newsletter-box form input[type="text"],
.newsletter-box form input[type="email"],
.newsletter-box form input[type="tel"] {
    width: 100% !important;
    height: 56px !important;
    border: none !important;
    border-radius: 50px !important;
    background: #fff !important;
    padding: 10px 28px !important;
    text-align: left;
    font-size: 17px !important;
}
.newsletter-box form input::placeholder{
	opacity:0.8
}
/* Text-input labels stay visually hidden (placeholders carry the prompt,
 * labels stay in the DOM for screen readers). The consent checkbox keeps
 * its visible label below. */
.newsletter-box .gfield:not(.gfield--type-checkbox) > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
}
.newsletter-box label .gfield_required{
	display:none !important
}

.newsletter-box .gfield--type-checkbox {
    text-align: left;
}
.newsletter-box .gfield--type-checkbox .gfield_label {
    display: none !important;
}
.newsletter-box .gfield--type-checkbox .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.newsletter-box .gfield--type-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: #0F1923;
}
.newsletter-box .gfield--type-checkbox label {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.newsletter-box form label img {
    width: 20px !important;
	height:20px !important
}

.newsletter-box button img {
    width: 20px;
    margin-left: 10px
}
.newsletter-box .gform-footer{
	justify-content:center !important;
	margin:14px 0 0 !important
}
.newsletter-box button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    min-height: 56px;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    border: 2px solid transparent !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    overflow: hidden !important;
    z-index: 1 !important;
	background: #0F1923 !important;
    color: #fff !important;
}
.gform_validation_errors{
	display:none !important
}

.footer_bg {
    width: 100%;
    /* height:auto lets the width/height attributes resolve to an
     * aspect-ratio box, so the slot is reserved at the right size
     * before the lazy image loads (no collapse, no shift). */
    height: auto;
    transform: translateY(2px);
    /* Fade the top edge of the illustration so it blends smoothly into
     * whatever sits above (currently the transparent newsletter section,
     * which shows body white through). Using mask-image instead of a
     * coloured gradient pseudo-element means the fade works regardless
     * of what colour the section above happens to be.
     *
     * Fade band scales with viewport so it stays a proportional slice of
     * the illustration (≈25–30% of image height) at every width. A fixed
     * 120px fade was fine on desktop (~22% of a 553px image) but ate 80%+
     * of the image on phones where the illustration is only ~140–200px
     * tall, making the whole footer look washed out. Clamped to keep the
     * band readable on tiny screens and from getting absurdly tall on
     * ultra-wide displays. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(40px, 11vw, 160px));
            mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(40px, 11vw, 160px));
}

.footer-inner {
    background: #0C171F
}

.footer-top {
    padding: 70px 0
}

.footer_title {
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px
}

.footer-logo {
    display: inline-block;
    max-width: 200px;
}

.footer-social {
    text-align: center;
    margin-top: 20px
}

.footer-social li {
    display: inline-block;
    margin: 0 3px
}

.footer-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    width: 40px;
    height: 40px;
    color: #0C171F
}

.footer_links li {
    display: block;
    margin: 7px 0
}

.footer_links li a {
    color: #FFFFFF;
    display: block;
    font-size: 16px
}

/* Native <details>/<summary> dropdown used by the Babybathwater_Walker_Nav_Menu_Details
 * walker for any footer menu item that has children (currently the "Dev"
 * group in the Sitemap column). Styled to read like a regular footer
 * link so it sits visually among its peers, with a small caret indicator
 * that rotates when the dropdown is open. No JS needed — the <details>
 * element handles toggle, keyboard, and screen-reader semantics natively. */
.footer_links .footer-menu-details > summary {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
}

.footer_links .footer-menu-details > summary::-webkit-details-marker {
    display: none;
}

.footer_links .footer-menu-details > summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

.footer_links .footer-menu-details[open] > summary::after {
    transform: rotate(180deg);
}

.footer_links .footer-menu-details .sub-menu {
    margin: 6px 0 0 0;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.footer_btns a {
    width: 100%;
    justify-content: space-between;
    margin: 5px 0
}

.footer-bottom {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.21);
    color: #fff;
    font-size: 15px
}

.footer-bottom a {
    color: #fff
}

.page-banner-area {
    background: #000;
	padding-bottom:100px
}

.page-banner-area::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
}

.page-banner-area .container {
    position: relative;
    z-index: 1
}

.group-stats .stats-number {
    width: 230px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0F1923;
    color: #fff;
    margin: 0;
    text-align: center;
    padding: 15px;
}

.group-stats .stats-number .title {
    color: #fff;
    font-family: 'Sportfield Varsity';
    font-size: 38px;
    margin: 0;
}

.group-stats .stats-number.v2 {
    background: #0A4764
}

.group-stats .stats-number.v3 {
    background: #41799C /* was #68A3C5, darkened for 4.5:1 white-text contrast */
}

.group-stats {
    position: relative;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    top: 0px
}

.group-stats .stats-number.v1 {
    transform: translateX(10px)
}

.group-stats .stats-number.v2 {
    transform: translateX(-10px)
}

.group-stats .stats-number.v3 {
    transform: translateY(-35px);
}

/* Skip-to-content link (WCAG 2.4.1). Visually hidden off-canvas until
 * keyboard focus lands on it, then presented as a clear pill over the
 * header so sighted keyboard users see where they are. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 10000;
    padding: 12px 20px;
    background: #0A4764;
    color: #fff;
    border-radius: 0 0 12px 12px;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus-visible,
.skip-link:focus {
    top: 0;
    color: #fff;
}

/* Image-text-advanced content photos get the site-standard rounded
 * treatment (core-values, 4ocean, about, start, nominate pages, article
 * bio shots all render through this block). Conference-comparison and
 * flagship-box carry their own .content-img overrides and are unaffected.
 * The event-detail blocks (welcome-underground-haven, peer-lead-gathering,
 * whos-in-the-room) are event-only, so they never inherited this when the
 * main pages were synced; they share the same .content-img photo treatment
 * and are added here to match the 20px standard. */
.block-image-text-advanced .content-img img,
.block-welcome-underground-haven .content-img img,
.block-peer-lead-gathering .content-img img,
.block-whos-in-the-room .content-img img {
    border-radius: 20px;
}

/* Welcome-underground-haven layout. Vertically center the rounded photo and the
 * (taller) copy column so they balance instead of both top-aligning, and — with
 * pt-0 dropped from the template — the gray-texture band now carries padding above
 * and below the panel, so the photo stops lining up flush with the section's top
 * edge (the "hard line" the band made with the white section above it). */
.welcome-haven-section .row {
    align-items: center;
}
@media (max-width: 575px) {
    .welcome-haven-section .content-text {
        margin-top: 28px;
    }
}

/* Decorative bar+tub divider that sits under section headings.
 * Centered horizontally on its own (no parent text-center required) by
 * being a block-level element with auto left/right margins. Older block
 * templates pass an `mx-auto` class for the same effect; both work. */
.heading-shape {
    display: block;
    margin: 0 auto 30px;
    height: 16px;
    mix-blend-mode: multiply;
}

/* Left-aligned variant for blocks whose heading column is text-left
 * (e.g. peer-lead-gathering). The base rule deliberately centers. */
.heading-shape--start {
    margin-left: 0;
    margin-right: auto;
}

/* text-editor left style: the template omits mx-auto on purpose for
 * left-aligned content; align the ornament with the heading. */
.content-text.plain-text:not(.text-center) .heading-shape {
    margin-left: 0;
    margin-right: auto;
}

.flag-date {
    color: #000000;
    margin-bottom: 10px
}

.flag-date img {
    width: 18px;
    margin-right: 8px
}

.events-tags {
    background: #F2F2F2;
    padding: 8px 20px;
    font-weight: 500;
    color: #004664;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-bottom: 15px
}

.events-tags img {
    width: 14px;
    margin-right: 7px
}

.flagship-box {
    font-size: 16px
}

.flagship-box.smalls .cta-btn,
.flagship-box.smalls .link_text_default {
    font-size: 14px
}
.flagship-box .h4 a, .flagship-box .h5 a{
	color:#094764
}
.flagship-box.smalls .cta-btn {
    padding: 10px 18px
}

.flagship-box.smalls {
    font-size: 15px;
    line-height: 24px
}

.flagship-box.smalls .events-tags {
    padding: 6px 17px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Match the two small flagship cards in size. Their columns get .d-flex, so
 * the box stretches to fill the (already equal-height) flex column, the inner
 * row stretches with it, and the CTA pins to the bottom so the buttons line up
 * across both cards even when one carries slightly more copy. */
.flagship-box.smalls {
    width: 100%;
}
.flagship-box.smalls > .row {
    height: 100%;
}
.flagship-box.smalls .content-text {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.flagship-box.smalls .group_btn {
    margin-top: auto;
}

/* Whole card is clickable: the headline carries Bootstrap's .stretched-link,
 * so its invisible ::after overlay is bounded by .flagship-box and covers the
 * image + text. The text CTA sits above the overlay (z-index) so it stays
 * independently clickable — open cards both land on the event page, sold-out
 * cards send the CTA to the waitlist form. */
.flagship-box {
    position: relative;
}
.flagship-box .group_btn {
    position: relative;
    z-index: 2;
}

.flagship-box {
    margin-top: 40px
}

.call-to-action.style2 {
    border: 1px solid transparent;
    border-color: #094764;
    border-width: 1px;
    background: #fff;
    border-radius: 60px;
    padding: 70px;
    position: relative;
    z-index: 1;
}

.call-to-action.style2 .corner_shape {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #fff;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    top: -30px;
    z-index: 11;
    border: 1px solid #094764;
    border-bottom-right-radius: 8px;
    border-left: 0;
    border-top: 0;
}

.box.style3.alt {
    margin: 0;
    box-shadow: none;
    border: 1px solid #0046643D;
    color: #070707;
    height: 100%
}

.box.style3.alt .image {
    position: relative
}

.box.style3.alt .box_badges {
    background: #F4F4F4;
    font-weight: 600;
    color: #004664;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 50px;
    position: absolute;
    bottom: -21px;
    left: 20px;
}

.box.style3.alt .list_with_icon {
    margin-bottom: 15px
}

.box.style3.alt .list_with_icon li {
    position: relative;
    font-weight: 500;
    font-size: 15px;
    color: #004664;
    padding-left: 25px;
    margin: 2px 0;
}

.box.style3.alt .list_with_icon li img {
    position: absolute;
    top: 5px;
    left: 0;
    width: 13px;
}

.box.style3.alt .title {
    font-size: 26px
}

.box.style3.alt .text {
    padding: 20px 15px;
    padding-top: 40px;
}

.box.style3.alt .image {
    position: relative;
    height: 270px;

}

.box.style3.alt .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.event-box-wrapper {
    padding: 50px 0
}

.call-to-action.style3 {
    border-radius: 60px;
    padding: 120px 70px;
    position: relative;
    z-index: 1;
    color: #fff;
    background: #094764
}

.call-to-action.style3 .bg_image {
    border-radius: 60px
}

.call-to-action.style3 .cta_shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px
}

.call-to-action.style3 .cta_corner {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}

.n_top_160 {
    margin-top: -160px
}

.pb_200 {
    padding-bottom: 200px
}

.box.style5 {
    position: relative;
    background: #000;
    z-index: 1;
    border-radius: 30px;
    display: block;
    overflow: hidden;
    margin-top: 30px;
    height: calc(100% - 30px)
}

.box.style5 .info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    color: #fff
}

.box.style5 .info .title {
    font-size: 24px;
    margin-bottom: 5px
}

.box.style5 .tags {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    background: #004664;
    color: #fff;
    padding: 7px 20px
}

.box.style5:hover {
    transform: translateY(-10px)
}

.image-shape {
    position: relative;
    z-index: 1
}

.image-shape img:not(.shape) {
    border-radius: 60px;
    max-width: 650px;
}

.image-shape .shape {
    position: absolute;
    content: "";
    top: 0;
    right: -73px;
    width: 375px;
}

.py_140 {
    padding: 140px 0
}

.feature-list-box {
    padding: 30px;
    border-radius: 60px;
    background: #fff;
    box-shadow: -3px 4px 49px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid rgba(86, 86, 86, 0.35);
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

.feature-list-box .item {
    border-right: 1px solid rgba(86, 86, 86, 0.35);
    border-bottom: 1px solid rgba(86, 86, 86, 0.35);
    flex: 0 0 50%;
    max-width: 50%;
    padding: 25px;
}

.feature-list-box .item:nth-child(even) {
    border-right: 0
}

.feature-list-box .item:nth-last-child(-n+2) {
    border-bottom: 0
}

.feature-list-box .item .list-title {
    color: #004664;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding-right: 40px
}

.feature-list-box .item .list-title::after {
    position: absolute;
    content: "";
    top: -3px;
    right: 0;
    width: 30px;
    height: 30px;
    background: url(../img/right-arrow-cir.webp) no-repeat scroll center center/100%
}

.feature-list-box .item .list-title:last-child {
    padding-right: 0;
    padding-left: 10px
}

.feature-list-box .item .list-title:last-child::after {
    display: none
}

.coming-up-table table th {
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    background: #094764;
    padding: 15px 25px;
    box-shadow: none;
    border-right: 2px solid #106187;
    border-bottom: 0
}

.coming-up-table table td span {
    display: flex;
    align-items: center;

}

.coming-up-table table td span img {
    width: 15px;
    margin-right: 6px
}

.coming-up-table table td {
    padding: 15px 25px;
    vertical-align: middle
}

.coming-up-table table td span.type {
    background: #e3ebee;
    font-weight: 500;
    font-size: 16px;
    color: #004664;
    border-radius: 50px;
    padding: 6px 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: inline-flex;
    min-width: 120px;
    position: relative;
}

.coming-up-table table td span.type::after {
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background: url(../img/type-shape.webp) no-repeat scroll center/100%;
}

.coming-up-table table td span.type::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4d9e2
}

.coming-up-table table td .status {
    display: block;
    padding: 10px 20px;
    color: #000000;
    font-weight: 700;
    border-radius: 50px;
    text-align: center;
    text-transform: uppercase;
	font-size:15px
}

.coming-up-table table td .status.v1 {
    background: #C7D6DD
}

.coming-up-table table td .status.v2 {
    background: #F5E5E1
}

.coming-up-table table tbody tr:nth-child(even) {
    background: #f5f5f5
}

.coming-up-table table tbody tr:nth-child(even) td {
    border-bottom: 2px dashed rgba(186, 191, 193, 0.51);
    border-top: 2px dashed rgba(186, 191, 193, 0.51);
}

.coming-up-table table th:first-child {
    border-top-left-radius: 30px
}

.coming-up-table table th:last-child {
    border-top-right-radius: 30px;
    border-right: 0
}

.coming-up-table {
    background: #fff;
    border-radius: 30px;
    padding: 6px;
    box-shadow: -3px 4px 49px 0 rgba(0, 0, 0, 0.06)
}

.masonary-card-slider .slide {
    padding: 0 10px
}

.masonary-card-slider .slick-list {
    margin-left: -10px;
    margin-right: -10px
}

.masonary-card-slider .box.style6 {
    display: block;
    margin: 20px 0;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.masonary-card-slider .box.style6::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 0
}

.masonary-card-slider .box.style6 .info {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 1;
    transition: all 0.4s
}

.masonary-card-slider .box.style6 .hover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    z-index: 1;
    opacity: 0;
    transition: all 0.4s;
    visibility: hidden
}

.masonary-card-slider .box.style6 .hover .inner {
    background: rgba(255, 255, 255, 0.85);
    padding: 25px;
    border-radius: 20px
}

.masonary-card-slider .box.style6 .hover .inner li {
    display: inline-flex;
    font-size: 14px;
    align-items: center;
    margin-right: 7px
}

.masonary-card-slider .box.style6 .hover .inner li:last-child {
    margin-right: 0
}

.masonary-card-slider .box.style6 .hover .inner li img {
    width: 12px;
    margin-right: 5px
}

.masonary-card-slider .box.style6 .hover .title {
    color: #000;
    margin-bottom: 5px
}

.masonary-card-slider .box.style6 .hover .text {
    color: #004664;
    font-weight: 600;
    font-style: italic;
    font-size: 15px
}

.masonary-card-slider .box.style6 .title {
    font-size: 24px;
    margin: 0
}

.masonary-card-slider .box.style6 img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.masonary-card-slider .box.style6:hover .info {
    opacity: 0;
    visibility: hidden
}

.masonary-card-slider .box.style6:hover .hover {
    opacity: 1;
    visibility: visible
}

.masonary-card-slider .carousel-card-wrapper {
    height: 800px
}

.masonary-card-slider .carousel-card-wrapper.v1 .box.style6:first-child {
    height: calc(65% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v1 .box.style6:last-child {
    height: calc(35% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v2 .box.style6:first-child {
    height: calc(70% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v2 .box.style6:last-child {
    height: calc(30% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v3 .box.style6:first-child {
    height: calc(45% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v3 .box.style6:last-child {
    height: calc(55% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v4 .box.style6:first-child {
    height: calc(42% - 10px)
}

.masonary-card-slider .carousel-card-wrapper.v4 .box.style6:last-child {
    height: calc(58% - 10px)
}

.content-text .inner-img {
    margin: 30px 0
}

.group_btn_text .cta-btn {
    margin-bottom: 20px
}

.group_btn_text .text {
    font-style: italic
}

.group_btn_text .text a {
    color: #fff;
    text-decoration: underline
}

.group_btn_text .text a:hover {
    text-decoration: none
}

.newsletter-box.alt {
    border-radius: 80px;
}

.box.style7 {
    padding: 22px;
    position: relative;
    z-index: 1;
    height: calc(100% - 30px);
    margin-top: 30px
}

.box.style7 .box-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.box.style7 .image {
    border-radius: 20px;
    overflow: hidden;
    height: 225px
}

.box.style7 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.box.style7 .text {
    padding: 20px 5px
}

.box.style7 .title {
    font-size: 24px;
    padding-right: 60px;
    position: relative;
    padding-bottom: 15px;
}

.box.style7 .title::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 80px;
    height: 2px;
    background: #68A3C4
}

.zigzag-border-box .col-md-3:nth-child(2) .box.style7 .box-shape {
    left: -2px;
    width: calc(100% + 4px);
    top: auto;
    bottom: 0;
    height: 100%
}

.zigzag-border-box .col-md-3:nth-child(3) .box.style7 .box-shape {
    left: -4px;
    top: 0;
    width: calc(100% + 4px);
}

.zigzag-border-box .col-md-3:nth-child(4) .box.style7 .box-shape {
    left: -6px;
    width: calc(100% + 4px);
    top: auto;
    bottom: 0;
    height: 100%
}

.process-timeline-wrapper {
    display: flex;
    justify-content: space-between
}

.process-timeline-wrapper .item {
    padding: 0 15px;
    text-align: center;
    position: relative;
    z-index: 1
}

.process-timeline-wrapper .item::after {
    position: absolute;
    content: "";
    top: 48px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #004664;
    z-index: -1;
}

.process-timeline-wrapper .item .timeline-box {
    position: relative
}

.process-timeline-wrapper .item .timeline-box::after {
    position: absolute;
    content: "";
    top: 39px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #004664;
    right: -17px;
}

.process-timeline-wrapper .item:last-child .timeline-box::after {
    display: none
}

.process-timeline-wrapper .item:first-child .timeline-box::before {
    position: absolute;
    content: "";
    top: 38px;
    left: -40px;
    width: 20px;
    height: 25px;
    background: url(../img/timeline-arrow.webp) no-repeat scroll 0 0/100%;
}

.process-timeline-wrapper .item:last-child .timeline-box::before {
    position: absolute;
    content: "";
    top: 40px;
    right: -60px;
    width: 36px;
    height: 18px;
    background: url(../img/timeline-bath.webp) no-repeat scroll 0 0/100%;
}

.timeline-box .icon {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: #F1F2EF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    position: relative;
    border: 8px solid #fff;
}

.timeline-box .icon img {
    width: 42px;
    margin: 0 auto
}

.timeline-box .title {
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 10px
}

.timeline-notes {
    margin-top: 60px;
}

.timeline-notes .inner {
    margin-top: 40px;
    padding: 40px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    background: #094764;
    color: #fff;
}

.review-box {
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08)
}

.review-box .rating_star {
    width: 110px;
    margin-bottom: 15px;
	font-size:14px
}

.review-box .meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: normal;
    color: #004664;
    margin-top: 20px;
    position: relative
}

.review-box .meta img:not(.quotes_icon) {
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
    border-radius: 50%;
    margin-right: 15px
}

.review-box .meta .title {
    font-size: 22px;
    margin-bottom: 5px
}

.review-box .meta .quotes_icon {
    position: absolute;
    bottom: 0;
    width: 70px;
    right: 0;
}

.review-video-box {
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 6px 0 rgba(0, 70, 100, 0.17);
}

.review-box .content {
    margin-bottom: 20px
}

.review-video-box .image {
    position: relative
}

.review-video-box .meta {
    padding: 15px;
    margin: 0
}

.review-box .review-video-box .meta .quotes_icon {
    bottom: 17px;
    right: 16px;
}

.review-video-box .play_btn {
    border-color: #fff;
    width: 80px;
    height: 80px;
    font-size: 30px
}

.review-video-box .play_btn:hover {
    background: #fff;
    color: #004664
}

.circle-states-area .content-text {
    width: 80%;
    margin: 0 auto;
}

.process-timeline-wrapper.alt .num {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 20px;
    background: #69A3C4;
    color: #fff;
    border: 9px solid #F7F8F7;
    position: relative;
    z-index: 1
}

.process-timeline-wrapper.alt .num::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: 50%;
    background: rgba(105, 163, 196, 0.33);
    z-index: -1;
    transform: translate(-50%, -50%);
}

.process-timeline-wrapper.alt {
    margin-top: 70px
}

.process-timeline-wrapper.alt .item::after {
    top: 39px;
}

.process-timeline-wrapper.alt .item .timeline-box::after {
    top: 30px
}

.process-timeline-wrapper.alt .item:first-child .timeline-box::before {
    top: 30px;
}

.process-timeline-wrapper.alt .item:last-child .timeline-box::before {
    top: 30px
}

.call-to-action.style2.alt {
    font-size: 22px;
    padding: 50px 90px;
    margin-top: 80px
}

.call-to-action.style2.alt .corner_shape {
    background: #F1F1F1;
}

.join_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F1F1F1;
    z-index: -1;
    border-radius: 100px;
}

.join_shape_right {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    z-index: 11;
}

.join_shape_left {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    z-index: 11;
}

.image-shape-wrapper img:not(.image_shape) {
    border-radius: 60px
}

.image-shape-wrapper .image_shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
}

.faqs_accordion .accordion-item {
    border: none;
    margin: 15px 0;
    border-radius: 10px !important
}

/* Review flag: FAQ items with no answer yet get a red outline so a reviewer can
 * spot the gaps at a glance. Self-clearing — the template only adds
 * .faq-needs-answer when the answer is empty, so filling the answer removes it. */
.faqs_accordion .accordion-item.faq-needs-answer {
    outline: 2px solid #d11;
    outline-offset: 2px;
}
.faq-answer-pending {
    color: #d11;
    font-style: italic;
    margin: 0;
}

/* Review flag for a section whose per-event content still needs to be filled in
 * (e.g. activities cards). Red dashed frame + note so a reviewer can't miss it. */
.content-flag {
    display: inline-block;
    margin: 18px auto 0;
    padding: 10px 18px;
    border: 2px dashed #d11;
    border-radius: 10px;
    color: #d11;
    font-weight: 600;
}

.faqs_accordion .accordion-button {
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 600;
    color: #004664;
    font-size: 22px;
    background: #F1F2EF;
    padding: 20px 30px;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
    position: relative
}

.faqs_accordion .accordion-button:not(.collapsed) {
    background: #004664;
    color: #fff
}

.faqs_accordion .accordion-body {
    background: #fff;
    padding: 30px;
    box-shadow: 3px -3px 40px 0 rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.faqs_accordion .accordion-button::after {
    display: none
}

.faqs_accordion .accordion-button .plus-minus {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #004664;
}

.faqs_accordion .accordion-button .plus-minus::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%)
}

.faqs_accordion .accordion-button .plus-minus::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 2px;
    height: 12px;
    background: #fff;
    transform: translate(-50%, -50%)
}

.faqs_accordion .accordion-button:not(.collapsed) .plus-minus::before {
    opacity: 0
}

.faqs_accordion .accordion-button:not(.collapsed) .plus-minus {
    background: #fff
}

.faqs_accordion .accordion-button:not(.collapsed) .plus-minus::after {
    background: #004664;
}

.faqs_accordion.alt .accordion-item {
    background: #fff;
    padding: 6px
}

.faqs_accordion.alt .accordion-button {
    background: #fff;
    color: #004664
}

.faqs_accordion.alt .accordion-button:not(.collapsed) {
    background: #004664;
    color: #fff
}

.faqs_accordion.alt .accordion-body {
    box-shadow: none
}

.newsletter-box.style3 .inner {
    z-index: 11
}

.feature-testimonials .inner-box {
    border-radius: 60px;
    position: relative;
    z-index: 1;
    padding: 20px;
    padding-right: 50px;
    overflow: hidden
}

.feature-testimonials .inner-box .image {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
}

.feature-testimonials .inner-box .image .shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 160px;
}

.feature-testimonials .inner-box .rating_star {
    width: 140px;
    margin-bottom: 20px;
	font-size:25px
}

.feature-testimonials .inner-box .title {
    font-size: 24px;
    color: #172649
}

.feature-testimonials .inner-box .name {
    font-size: 26px;
    margin-bottom: 5px
}

.feature-testimonials .inner-box .name span {
    background: #fff;
    padding-right: 15px;
    position: relative;
    z-index: 1;
}

.feature-testimonials .inner-box .meta {
    font-size: 14px;
    line-height: 20px;
    margin-top: 30px
}

.feature-testimonials .inner-box .designation {
    font-size: 16px;
    line-height: normal;
    margin-bottom: 10px;
    display: block
}

.feature-testimonials .inner-box .head {
    position: relative
}

.feature-testimonials .inner-box .head .quote_icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70px;
    background: #fff;
    z-index: 1;
    padding-left: 10px;
}

.feature-testimonials .inner-box .head::after {
    position: absolute;
    content: "";
    bottom: 12px;
    left: 0;
    width: 100%;
    height: 2px;
    background: url(../img/review-dashed-shape.webp) no-repeat scroll 0 0/100%;
}

.feature-testimonials .item {
    position: relative
}

.rv_bg_image {
    position: relative
}

.feature-testimonials .inner-box {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding-left: 35px
}

.feature-testimonials .inner-box .image .tags {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 10px 20px;
    background: #fff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500
}

.feature-testimonials .item.alt .inner-box {
    padding-right: 35px;
    padding-left: 50px
}

.feature-testimonials .item.alt .inner-box .tags {
    bottom: auto;
    top: 20px;
    left: auto;
    right: 20px
}

.feature-testimonials .item {
    margin-top: 40px
}

.feature-testimonials .item.alt {
    margin-top: -40px
}

.feature-testimonials .inner-box .image img {
    min-height: 510px;
    width: 100%;
    object-fit: cover;
    object-position: bottom right;
}

.review_filter {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.review_filter .title {
    font-size: 26px;
    margin: 0
}

.review_filter .nav-tabs {
    display: block;
    border: none
}

.review_filter .nav-tabs li {
    display: inline-block
}

.review_filter .nav-tabs button {
    border: 1px solid #004664 !important;
    border-radius: 50px;
    font-weight: 500;
    color: #172649;
    font-size: 16px;
    text-align: center
}

.review_filter .nav-tabs button.active {
    background: #172649;
    color: #fff;
    border-color: #172649
}

.review_filter {
    margin-bottom: 50px
}

.review_tabs_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-bottom: 40px
}

.review_tabs_heading .h2 {
    margin: 0
}

.review_tabs_heading::after {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 100%;
    background: #D9D9D9;
    z-index: -1
}

.review_tabs_heading .h2 span {
    position: relative;
    background: #fff;
    padding-right: 15px
}

.review_tabs_heading .content {
    background: #fff;
    position: relative;
    z-index: 1;
    padding-left: 15px
}

.review-box-v3 {
    height: 100%;
    background: #F7F8F7;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-box-v3 .rating_star {
    width: 120px;
    margin-bottom: 15px
}

.review-box-v3 .content {
    font-style: italic;
    font-weight: 500;
    color: #2E2E2E
}

.expand-toggle:focus {
    color: #2E2E2E
}

.expand-toggle {
    text-decoration: underline;
    font-style: normal;
    position: relative;
    white-space: nowrap
}

.expand-toggle::after {
    position: absolute;
    content: "";
    top: 5px;
    right: -15px;
    width: 8px;
    height: 8px;
    border-left: 2px solid #172649;
    border-bottom: 2px solid #172649;
    transform: rotate(-45deg);
}

.expanded .expand-toggle::after {
    transform: rotate(136deg)
}

.review-box-v3 .meta .inner {
    display: flex;
    font-size: 13px;
    line-height: normal;
    align-items: center;
    padding-top: 20px
}

.review-box-v3 .meta .inner img {
    min-width: 60px;
    width: 60px;
    min-height: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px
}

/* Monogram fallback avatar for library testimonials with no headshot
 * (e.g. Google reviews + imported sheet quotes). Same footprint as the
 * 60px round photo so cards stay uniform with or without an image. */
.review-box-v3 .meta .inner .rev-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    background: #094764;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase
}

.review-box-v3 .meta .inner .title {
    font-size: 20px;
    color: #001422;
    margin-bottom: 5px
}

.review-box-v3 .content {
    min-height: 215px
}

.review_filter_alt .nav-tabs {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 40px
}

.review_filter_alt .nav-tabs li {
    display: inline-block;
    margin: 0 !important;
    border: none !important
}

.review_filter_alt .nav-tabs button {
    border: none;
    display: flex;
    box-shadow: none;
    border-radius: 0;
    justify-content: center;
    margin: 0 !important;
    padding: 17px 20px;
    color: #2E2E2E;
    position: relative
}

.review_filter_alt .nav-tabs button img {
    height: 20px;
    margin-right: 12px
}

.review_filter_alt .nav-tabs button::after {
    position: absolute;
    content: "";
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #094764;
    opacity: 0
}

.review_filter_alt .nav-tabs button.active::after {
    opacity: 1
}

.review_filter_alt .nav-tabs button.active {
    color: #2E2E2E
}

.review_filter_alt .review-box-v3 {
    background: #fff;
    box-shadow: 0 8px 31px 0 rgba(0, 0, 0, 0.08)
}

.review_filter_alt .review-box-v3 .meta {
    position: relative;
    padding-right: 50px
}

.review_site_icon {
    position: absolute;
    top: 35px;
    right: 0;
    width: 30px
}

.single-event-banner::before {
    background: url(../img/single-event-banner-gradient.webp) no-repeat scroll 0 0/cover;
    mix-blend-mode: luminosity;
    height: 100%
}

.single-event-banner {
    border-bottom-right-radius: 0
}

.single-event-banner .hero-corner-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90px;
}

.list_title {
    font-size: 18px;
    margin-bottom: 20px
}

.list_check li {
    margin: 10px 0;
    position: relative;
    padding-left: 30px;
}

.list_check li::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: url('data:image/svg+xml,<svg fill="%23004664" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') no-repeat scroll 0 0/cover;
}

.feature-testimonials .item.alt.with_bg .inner-box {
    position: inherit;
    top: auto;
    bottom: auto;
    left: auto;
    transform: translateY(0%);
    background: #fff;
    box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.08);
    padding: 30px;
    border-radius: 30px
}

.feature-testimonials .item.alt.with_bg {
    margin: 0
}

.feature-testimonials .item.alt.with_bg .inner-box .image img {
    min-height: inherit
}

.feature-testimonials .item.alt.with_bg .inner-box .head::after {
    display: none
}

.cta_number {
    position: relative;
    font-weight: 500;
    color: #004664;
    padding-left: 50px;
    display: inline-block
}

.cta_number span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #004664;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}

.icon-call-to-action {
    border: 1px solid rgba(0, 0, 0, 0.18);
    padding: 40px;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0px 30px 60px 0 rgba(0, 0, 0, 0.04)
}

.icon-call-to-action .head {
    display: flex;
    align-items: center;
    margin-bottom: 30px
}

.icon-call-to-action .icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    background: #004664;
    border-radius: 50%;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.icon-call-to-action .icon img {
    width: 50px
}

.icon-call-to-action .list_check li {
    font-weight: 500;
}

.icon-call-to-action .list_check {
    column-count: 2
}

.testimonial-circle-wrapper .item {
    position: relative;
    z-index: 1
}

.testimonial-circle-wrapper .inner {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    color: #000000
}

.tr_img {
    width: 100%
}

.testimonial-circle-wrapper .inner .image {
    width: 210px;
    height: 210px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #004664;
    padding: 5px;
}

.testimonial-circle-wrapper .inner .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.testimonial-circle-wrapper .inner .meta {
    margin-top: 30px;
    font-size: 14px;
    line-height: normal;
    position: relative
}

.testimonial-circle-wrapper .inner .name {
    font-size: 22px;
    color: #001422;
    margin-bottom: 5px
}

.testimonial-circle-wrapper .inner .meta .desg {
    color: #001422;
    opacity: 0.5
}

.testimonial-circle-wrapper .inner .content {
    position: relative
}

.testimonial-circle-wrapper .inner .border_shape {
    position: absolute;
    left: -60px;
    top: 0;
    height: 100%;
}

.quote_icon_secondary {
    position: absolute;
    bottom: -25px;
    right: -10px;
    width: 70px;
}

.testimonial-circle-wrapper .item.alt .inner .image {
    margin-left: auto
}

.testimonial-circle-wrapper .item.alt .inner .border_shape {
    right: -60px;
    transform: scaleX(-1);
    left: auto
}

.testimonial-circle-wrapper .item.alt .inner {
    top: auto;
    bottom: 140px;
}

.testimonial-circle-wrapper .item {
    margin-top: -70px
}

.testimonial-circle-wrapper .item.alt {
    margin-top: -100px
}

.testimonial-circle-wrapper .item:first-child {
    margin-top: -30px
}

.include_bg {
    border-radius: 80px
}

.icon-teaser {
    background: url(../img/icon-teaser-bg.webp) no-repeat scroll bottom right/100%;
    padding: 30px;
    height: 356px;
}

.icon-teaser > img {
    max-height: 60px;
    margin-bottom: 20px;
}

.icon-teaser .title {
    font-weight: 600;
    font-size: 22px;
}

.include-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
}

.team-box {
    position: relative;
    z-index: 1;
    height: 100%;
    /* Closed, framed card matching .formula-mcard (the Home/Membership "three
     * boxes"): full hairline border, 20px radius, soft shadow, hover lift.
     * Replaces the old 3-sided ::after border that left every card open at the
     * bottom — the "open box" look. */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(9, 71, 100, 0.07);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 70, 100, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.team-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 70, 100, 0.13);
}

.team-box::after {
    content: none; /* old open-bottom 3-sided frame retired; card carries its own full border */
}

.team_bg_shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
}

.team-box .image {
    position: relative;
    z-index: 1
}

.team-box .image img:not(.shape) {
    border-radius: 0; /* the card clips the top corners via overflow:hidden */
	height:270px;
	object-fit:cover;
	width:100%;
	display:block
}

.team-box .shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
}

.team-box .text {
    padding: 22px 22px 26px;
    font-size: 16px;
    line-height: 24px;
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .team-box {
        transition: none;
    }
    .team-box:hover {
        transform: none;
    }
}

.team-box .title {
    font-size: 22px;
    color: #001422;
    margin-bottom: 5px
}

.team-box .desg {
    color: #001422;
    opacity: 0.62; /* was 0.5, raised for 4.5:1 contrast on white */
    font-size: 14px;
    line-height: normal;
    margin-bottom: 15px
}

.box.style9:not(.text-only) {
    background: #FFF;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 5px 24px 0 rgba(0, 0, 0, 0.06);
    border-radius: 20px
}

.box.style9 .title {
    font-size: 24px
}

.box.style9 img {
    border-radius: 16px;
    height: 255px;
    object-fit: cover;
    width: 100%
}

.box.style9 .text {
    padding: 22px 15px
}

.box.style9 {
    height: 100%
}

.box-round-wrapper {
    position: relative;
    z-index: 1;
}

.box-round-wrapper .box-round-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    z-index: -1;
    width: 100%;
}

.box-round-wrapper .arrow1 {
    position: absolute;
    top: 185px;
    left: 780px;
    width: 22px;
}

.box-round-wrapper .arrow2 {
    position: absolute;
    right: -86px;
    top: 330px;
    width: 22px;
    transform: rotate(55deg);
}

.box-round-wrapper .arrow3 {
    position: absolute;
    right: -79px;
    bottom: 320px;
    width: 22px;
    transform: rotate(122deg);
}

.box-round-wrapper .arrow4 {
    position: absolute;
    bottom: 40px;
    left: -30px;
    width: 34px;
}


.stat-quotes {
    padding: 12px 20px;
    border-radius: 10px;
    background: #F6F7F5;
    display: flex;
    align-items: center;
}

.stat-quotes img {
    min-width: 80px;
    width: 80px;
    margin-right: 20px
}

.stat-quotes .title {
    margin-bottom: 5px
}

.box.style10 {
    display: block;
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    border-radius: 20px
}

.box.style10 .info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 1
}

.box.style10 .info .title {
    margin: 0;
    font-size: 26px
}

.box.style10::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)
}

.box.style10:hover {
    transform: translateY(-10px)
}

.section-notes {
    margin-top: 40px
}

.cta_spot {
    margin-top: 20px;
    text-align: center;
    color: #fff
}

.cta_spot img {
    margin-right: 10px
}

/* Event hero info card. Was a fixed 550px box with content absolutely
 * positioned over a notched shape image (event--action-shape.webp); the notch
 * read as a glitch. Now a clean rounded white card in normal flow that fills
 * its hero column. The shape <img> was removed from single-event.php. */
.event-banner-action {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    left: auto;
    z-index: 11;
    bottom: auto;
}

.single-event-banner {
    overflow: initial;
    z-index: 11
}

.event-banner-action .inner {
    padding: 34px 34px 30px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.event-banner-action .inner li {
    position: relative;
    padding-left: 30px;
    color: #000000;
    margin: 12px 0;
    display: block;
    font-weight: 500;
}

.event-banner-action .inner li img {
    position: absolute;
    top: 5px;
    left: 0;
    width: 18px;
}

.event-banner-action .inner .cta-btn {
    margin: 20px 0
}

.event-banner-action .inner ul {
    margin-bottom: 30px
}

.pt_270 {
    padding-top: 270px
}

.custom_tabs_acrdn {
    display: none;
    transition: 0.4s ease;
}

.custom_tabs_acrdn.active {
    display: block;
}

/* Initial state */
.center-badge-wrapper .item,
.circle-stats-wrapper .item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Visible state */
.center-badge-wrapper .item.in-view,
.circle-stats-wrapper .item.in-view {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Stagger delay */
.center-badge-wrapper .item.v1.in-view {
    transition-delay: 0s;
}

.center-badge-wrapper .item.v2.in-view {
    transition-delay: 0.2s;
}

.center-badge-wrapper .item.v3.in-view {
    transition-delay: 0.4s;
}

.center-badge-wrapper .item.v4.in-view {
    transition-delay: 0.6s;
}

.center-badge-wrapper .item.v5.in-view {
    transition-delay: 0.8s;
}

.center-badge-wrapper .item.v6.in-view {
    transition-delay: 1s;
}

.circle-stats-wrapper .item.v1.in-view {
    transition-delay: 0s;
}

.circle-stats-wrapper .item.v2.in-view {
    transition-delay: 0.2s;
}

.circle-stats-wrapper .item.v3.in-view {
    transition-delay: 0.4s;
}

.circle-stats-wrapper .item.v4.in-view {
    transition-delay: 0.6s;
}

.footer_links li a,
.footer-bottom a {
    position: relative;
    z-index: 1;
    display: inline-block
}

.footer_links li a::after,
.footer-bottom a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s;
}

.footer_links li a:hover::after,
.footer-bottom a:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
}

.footer-social li a:hover {
    background: #094764;
    color: #fff
}

.footer-area {
    position: relative;
    z-index: 1;
    /* margin-top is intentionally NOT set here. Every .footer-area is either
     * .no-cta or :not(.no-cta), and both variants below set their own
     * margin-top at higher specificity, so any base value here is dead code.
     * The live overlap clamp (the negative pull that floats the newsletter
     * card over the footer illustration) lives in .footer-area:not(.no-cta);
     * the air-gap value lives in .footer-area.no-cta. */
}

/* Sections that render a .newsletter-box card need to stack above the
 * footer (which we just pulled up with a negative margin). Targeting via
 * :has() means this works for every render path — acf/newsletter block,
 * acf/cta block, and the global footer-cta template — without per-block
 * CSS. The card itself already has position:relative + z-index:1; this
 * rule creates a new stacking context on the section so the card sits
 * above the upward-sliding footer rather than under it. */
section.content-area:has(> .container > .newsletter-box),
section.content-area:has(> .container > .call-to-action) {
    position: relative;
    z-index: 2;
}

/* Pages without a footer CTA newsletter-box (.no-cta is set by footer-content
 * when footer_cta_disable=1) get a POSITIVE margin-top so the footer
 * illustration sits cleanly below the last content section instead of
 * being pulled up to crash into it. Without this, the negative-margin
 * overlap above is designed for the newsletter-card float effect and
 * looks broken on pages like /apply/ where the last section is a form,
 * not a newsletter card.
 *
 * Scales 40px (mobile) -> 100px (wide desktop) so the air space feels
 * proportional to the section padding above. */
.footer-area.no-cta {
    margin-top: clamp(40px, 4vw, 100px);
}

/* Reduce overlap for pages WITH a footer CTA so the card doesn't sink
 * into the dark forest illustration. The original clamp pulled the
 * footer up 380px at 1440vw, leaving the card visually merged with the
 * illustration treetops. Bumping the upper bound to -240px keeps the
 * float-over-illustration effect but gives the card ~140px more
 * clearance below its bottom edge on desktop. Lower bound (mobile)
 * unchanged at -50px. */
.footer-area:not(.no-cta) {
    margin-top: clamp(-240px, calc(60px - 20vw), -50px);
}

/* Consistency fix: a few pages disable the global footer-cta and supply their
 * OWN final CTA card as the last in-content block (Home, Membership, Events,
 * Reviews). Those footers still carry .no-cta, so without this they'd take the
 * air-gap above and the CTA card would float far from the footer - the
 * "closing CTA is miles from the footer" inconsistency. When <main> ends in a
 * CTA card (a newsletter-box OR an apply-style .call-to-action), pull the
 * footer up to overlay it, exactly like the global-footer-cta pages, so the
 * final CTA lands in the SAME spot site-wide regardless of CTA type. Pages
 * whose last block is a form / text / offer-close don't match and keep the
 * .no-cta air gap. Specificity (main + class + :has + class) beats
 * .footer-area.no-cta, so it wins without !important. NOTE: the ~ (general
 * sibling), not + (adjacent), is required because WordPress injects a
 * <script type="speculationrules"> element between <main> and <footer>, which
 * would otherwise defeat the adjacent-sibling match. */
main.l-blocks-wrap:has(> article > :last-child .newsletter-box) ~ .footer-area,
main.l-blocks-wrap:has(> article > :last-child .call-to-action) ~ .footer-area {
    margin-top: clamp(-240px, calc(60px - 20vw), -50px);
}

.cloud {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    padding-bottom: 20.25%;
    z-index: 11;
    top: 0;
}

.cloudcontent {
    position: relative;
    padding: 30px;
    color: #337AB7;
    font-size: 22px;
    font-weight: bold;
    z-index: 100;
}

.cloud img {
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    object-fit: contain
}

@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(-100%)
    }
}

@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(100%)
    }

    to {
        -moz-transform: translateX(-100%)
    }
}

@keyframes animCloud {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.cloud1 {
    -webkit-animation: animCloud 20s infinite linear;
    -moz-animation: animCloud 20s infinite linear;
    animation: animCloud 20s infinite linear
}

.cloud2 {
    -webkit-animation: animCloud 40s infinite linear;
    -moz-animation: animCloud 40s infinite linear;
    animation: animCloud 40s infinite linear
}

.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}

.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
}

.bird {
    background-image: url(../img/duck-cell.png);
    background-size: auto 100%;
    width: 90px;
    height: 100px;
    will-change: background-position;
    -webkit-animation-name: fly-cycle;
    animation-name: fly-cycle;
    -webkit-animation-timing-function: steps(10);
    animation-timing-function: steps(10);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.bird--one {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.bird--two {
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}

.bird--three {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}

.bird--four {
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.bird-container {
    position: absolute;
    top: 40%;
    left: -10%;
    -webkit-transform: scale(0) translateX(-10vw);
    transform: scale(0) translateX(-10vw);
    will-change: transform;
    -webkit-animation-name: fly-right-one;
    animation-name: fly-right-one;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.bird-container--one {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

.bird-container--two {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.bird-container--three {
    -webkit-animation-duration: 14.6s;
    animation-duration: 14.6s;
    -webkit-animation-delay: 9.5s;
    animation-delay: 9.5s;
}

.bird-container--four {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 10.25s;
    animation-delay: 10.25s;
}

@-webkit-keyframes fly-cycle {
    100% {
        background-position: -900px 0;
    }
}

@keyframes fly-cycle {
    100% {
        background-position: -900px 0;
    }
}

@-webkit-keyframes fly-right-one {
    0% {
        -webkit-transform: scale(0.3) translateX(-10vw);
        transform: scale(0.3) translateX(-10vw);
    }

    10% {
        -webkit-transform: translateY(2vh) translateX(10vw) scale(0.4);
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }

    20% {
        -webkit-transform: translateY(0vh) translateX(30vw) scale(0.5);
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }

    30% {
        -webkit-transform: translateY(4vh) translateX(50vw) scale(0.6);
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }

    40% {
        -webkit-transform: translateY(2vh) translateX(70vw) scale(0.6);
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }

    50% {
        -webkit-transform: translateY(0vh) translateX(90vw) scale(0.6);
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }

    60% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }

    100% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }
}

@keyframes fly-right-one {
    0% {
        -webkit-transform: scale(0.3) translateX(-10vw);
        transform: scale(0.3) translateX(-10vw);
    }

    10% {
        -webkit-transform: translateY(2vh) translateX(10vw) scale(0.4);
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }

    20% {
        -webkit-transform: translateY(0vh) translateX(30vw) scale(0.5);
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }

    30% {
        -webkit-transform: translateY(4vh) translateX(50vw) scale(0.6);
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }

    40% {
        -webkit-transform: translateY(2vh) translateX(70vw) scale(0.6);
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }

    50% {
        -webkit-transform: translateY(0vh) translateX(90vw) scale(0.6);
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }

    60% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }

    100% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }
}

@-webkit-keyframes fly-right-two {
    0% {
        -webkit-transform: translateY(-2vh) translateX(-10vw) scale(0.5);
        transform: translateY(-2vh) translateX(-10vw) scale(0.5);
    }

    10% {
        -webkit-transform: translateY(0vh) translateX(10vw) scale(0.4);
        transform: translateY(0vh) translateX(10vw) scale(0.4);
    }

    20% {
        -webkit-transform: translateY(-4vh) translateX(30vw) scale(0.6);
        transform: translateY(-4vh) translateX(30vw) scale(0.6);
    }

    30% {
        -webkit-transform: translateY(1vh) translateX(50vw) scale(0.45);
        transform: translateY(1vh) translateX(50vw) scale(0.45);
    }

    40% {
        -webkit-transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
        transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
    }

    50% {
        -webkit-transform: translateY(0vh) translateX(90vw) scale(0.45);
        transform: translateY(0vh) translateX(90vw) scale(0.45);
    }

    51% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }

    100% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }
}

@keyframes fly-right-two {
    0% {
        -webkit-transform: translateY(-2vh) translateX(-10vw) scale(0.5);
        transform: translateY(-2vh) translateX(-10vw) scale(0.5);
    }

    10% {
        -webkit-transform: translateY(0vh) translateX(10vw) scale(0.4);
        transform: translateY(0vh) translateX(10vw) scale(0.4);
    }

    20% {
        -webkit-transform: translateY(-4vh) translateX(30vw) scale(0.6);
        transform: translateY(-4vh) translateX(30vw) scale(0.6);
    }

    30% {
        -webkit-transform: translateY(1vh) translateX(50vw) scale(0.45);
        transform: translateY(1vh) translateX(50vw) scale(0.45);
    }

    40% {
        -webkit-transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
        transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
    }

    50% {
        -webkit-transform: translateY(0vh) translateX(90vw) scale(0.45);
        transform: translateY(0vh) translateX(90vw) scale(0.45);
    }

    51% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }

    100% {
        -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }
}

/* Initial hidden state */
.group-stats .stats-number {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Visible */
.group-stats.in-view .stats-number {
    opacity: 1;

}

/* Stagger timing */
.group-stats.in-view .stats-number:nth-child(1) {
    transition-delay: 0s;
    transform: scale(1) translateX(10px);
}

.group-stats.in-view .stats-number:nth-child(2) {
    transition-delay: 0.3s;
}

.group-stats.in-view .stats-number:nth-child(3) {
    transition-delay: 0.6s;
    transform: scale(1) translateY(-35px);
}

.seq-alt .seq-img img {
    position: absolute;
    right: 200px;
    top: -120px;
    z-index: 11;
}

.process-timeline-wrapper {
    position: relative
}

.process-timeline-wrapper .item::after {
    width: 0;
    transition: all 1s ease
}

/* Stagger for scroll down */
.process-timeline-wrapper .item:nth-child(1).in-view::after {
    transition-delay: 0s;
}

.process-timeline-wrapper .item:nth-child(2).in-view::after {
    transition-delay: 1s;
}

.process-timeline-wrapper .item:nth-child(3).in-view::after {
    transition-delay: 2s;
}

.process-timeline-wrapper .item:nth-child(4).in-view::after {
    transition-delay: 3s;
}

.process-timeline-wrapper .item:nth-child(5).in-view::after {
    transition-delay: 4s;
}

.process-timeline-wrapper .item:nth-child(6).in-view::after {
    transition-delay: 5s;
}

/* When in-view, width grows */
.process-timeline-wrapper .item.in-view::after {
    width: 100%;
}

/* Optional: scroll up reverse */
.process-timeline-wrapper .item:not(.in-view):nth-child(6)::after {
    transition-delay: 0s;
}

.process-timeline-wrapper .item:not(.in-view):nth-child(5)::after {
    transition-delay: 1s;
}

.process-timeline-wrapper .item:not(.in-view):nth-child(4)::after {
    transition-delay: 2s;
}

.process-timeline-wrapper .item:not(.in-view):nth-child(3)::after {
    transition-delay: 3s;
}

.process-timeline-wrapper .item:not(.in-view):nth-child(2)::after {
    transition-delay: 4s;
}

.process-timeline-wrapper .item:not(.in-view):nth-child(1)::after {
    transition-delay: 5s;
}


.process-timeline-wrapper .item .timeline-box::after {
    opacity: 0;
    transition: opacity 1s ease
}

/* Stagger delay applied to each pseudo-element */
.process-timeline-wrapper .item:nth-child(1) .timeline-box::after {
    transition-delay: 0.8s;
}

.process-timeline-wrapper .item:nth-child(2) .timeline-box::after {
    transition-delay: 1.8s;
}

.process-timeline-wrapper .item:nth-child(3) .timeline-box::after {
    transition-delay: 2.8s;
}

.process-timeline-wrapper .item:nth-child(4) .timeline-box::after {
    transition-delay: 3.8s;
}

.process-timeline-wrapper .item:nth-child(5) .timeline-box::after {
    transition-delay: 4.8s;
}

.process-timeline-wrapper .item:nth-child(6) .timeline-box::after {
    transition-delay: 5.8s;
}

/* When visible */
.process-timeline-wrapper .item.in-view .timeline-box::after {
    opacity: 1;
}

.testimonial-banner {
    height: auto
}

.tab-content video {
    display: none
}

.three-col-slider .slide {
    padding: 12px
}

.three-col-slider .slick-list {
    margin-left: -12px;
    margin-right: -12px
}

.slick-dots li button::before {
    display: none
}

.slick-dots li button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    background: #094764;
    opacity: 0.3
}

.slick-dots li {
    margin: 0 6px;
    width: auto;
    height: auto
}

.slick-dots {
    position: inherit;
    bottom: auto
}

.slick-dots li.slick-active button {
    opacity: 1
}

.flagship-box .text {
    margin-bottom: 15px
}

.list_check {
    margin-bottom: 25px
}

.column_2 {
    column-count: 2
}

.order-sm-2 .image-shape-wrapper .image_shape {
    transform: scaleX(-1);
    right: auto;
    left: 0;
}

.gallery-img {
    overflow: hidden;
    display: block;
    border-radius: 25px;
	position:relative
}
.gallery-img .text{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
}
.gallery-img .text .title{
	font-weight:600;
	    font-size: 22px;
    letter-spacing: 2px; 
	color:#fff;
	position:relative;
	z-index:1;
	margin:0
}
.zoom-img.gallery-img.alt {
    height: 255px;
}
.zoom-img.gallery-img.alt img{
	width:100%;
	height:100%;
	object-fit:cover
}
.gallery-img.alt::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
}

.gallery-img img {
    transition: all 0.4s;
    transform: scale(1)
}

.gallery-img:hover img {
    transform: scale(1.1)
}

.testimonial-banner.alt {
    display: flex;
    align-items: center
}

.paginations ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    padding-left: 0
}

.paginations ul li {
    display: inline-flex;
    margin: 0 5px;
}

.paginations li a {
    color: #094764;
    opacity: 0.55;
    display: block;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600
}

.paginations li a:hover {
    opacity: 1;
    color: #094764;
}

.paginations .prev,
.paginations .next {
    color: #094764;
    font-size: 16px;
    opacity: 1;
    width: auto;
    height: auto
}

.paginations em {
    margin: 0 9px
}

.paginations {
    margin-top: 30px;
}

.box.style3.alts {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.box.style3.alts .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.plain-text img:not(.heading-shape ) {
    margin: 20px 0;
    width: 100%;
    border-radius: 20px
}

.plain-text ul {
    padding-left: 20px;
    margin-bottom: 20px
}

.plain-text ul,
.plain-text ul li {
    list-style: disc
}

.plain-text ul li {
    display: list-item;
    margin: 8px 0
}

.plain-text h1,
.plain-text h2,
.plain-text h3,
.plain-text h4,
.plain-text h5,
.plain-text h6 {
    text-transform: uppercase;
    color: #094764;
    margin-bottom: 12px;
    font-weight: 700
}

.plain-text p a,
.plain-text li a {
    text-decoration: underline
}

.plain-text p a:hover,
.plain-text li a:hover {
    text-decoration: none
}

.plain-text ol,
.plain-text ol li {
    list-style: decimal
}

.plain-text ol li {
    display: list-item;
    margin: 12px 0
}

.plain-text ol {
    padding-left: 30px;
    margin-bottom: 20px
}

.post-meta-details {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(9, 71, 100, 0.28)
}

.logo-carousel-nav .slide {
    padding: 25px
}

.tab_c_wrapper {
    padding: 0 25px;
}

.logo-carousel .item {
    padding: 15px;
    border-radius: 50px;
    cursor: pointer
}

.logo-carousel .slick-current .item {
    background: #094764
}

.logo-carousel .slick-current .item img {
    /* brightness(0) collapses any source color to pure black, then
     * invert(1) flips it to pure white — guarantees high contrast on
     * the dark blue active-pill background regardless of whether the
     * underlying logo asset is gray, black, or color. The previous
     * `invert(1) brightness(1)` only worked on dark logos; on the
     * gray Forbes asset it produced low-contrast light gray on dark
     * blue. */
    filter: brightness(0) invert(1);
}

.process-timeline-wrapper .item.in-view:last-child .timeline-box::before {
    animation: vibrate 0.3s linear ;
    animation-delay: 4s
}

.process-timeline-wrapper.alt .item.in-view:last-child .timeline-box::before {
    animation: vibrate 0.3s linear infinite;
    animation-delay: 5s
}

@keyframes vibrate {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(-3px, -3px);
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0);
    }
}



.box-round-wrapper .route {
    position: absolute;
    top: 58%;
    right: -2%;
    width: 100%;
    transform: translateY(-50%) scale(1.3);
    z-index: -1;
}

/* Vibrate immediately for 0.5s (2–3 shakes) */

img.arrow4.svganimbath.reached-bottom-left {
    animation: vibrateCycle 0.5s linear;
}

@keyframes vibrateCycle {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(3px, -3px);
    }

    60% {
        transform: translate(-3px, -3px);
    }

    80% {
        transform: translate(3px, 3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.meet-slider .slick-arrow::before {
    display: none
}

/* Circular navy arrows, matched to the hero Vimeo player controls
 * (.ivc-*): translucent navy fill, white chevron, solid navy on hover. */
.meet-slider .slick-arrow {
    z-index: 11;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 70, 100, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    transition: background .2s ease;
}

.meet-slider .slick-arrow:hover,
.meet-slider .slick-arrow:focus {
    background: #004664;
    color: #fff;
}

.meet-slider .slick-arrow.slick-disabled {
    opacity: 0.45;
    cursor: default;
}

.meet-slider .slick-prev {
    left: 0
}

.meet-slider .slick-next {
    right: 0
}

.inner-border {
    border: 3px solid #F1F1F1;
    border-radius: 50px;
    padding: 50px;
}

.circle-states-area .container {
    max-width: 1010px
}
.featured-text-box .inner-quotes{
    margin: 0;
    font-size: 25px;
    line-height: 1.4;
    font-weight: 500;
    color: #004664;
}
.featured-text-box .inner-quotes p{
    margin: 0;
}
/* Attribution under a press pull-quote — a byline for when the quote is a
 * person speaking, not a publication blurb. Subordinate to the quote, still
 * meets contrast on white. No leading dash (house style). */
.featured-text-box .press-attribution {
    margin: 18px 0 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
    color: #5f5f5f;
}
/* Diagonal pull-quote frame: an opening mark (the closing glyph flipped)
   sits top-left, the closing mark bottom-right, both behind the centered
   quote. The quote text is centered on both axes inside the card. */
.featured-text-box .card-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.featured-text-box .quote-mark {
    position: absolute;
    width: 96px;
    height: auto;
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.featured-text-box .quote-mark--left {
    top: 26px;
    left: 34px;
    transform: scaleX(-1);
}
.featured-text-box .quote-mark--right {
    bottom: 26px;
    right: 34px;
}
.featured-text-box .link_text_default {
    align-self: center;
    margin-top: 24px;
}
.icon-teaser.style1{
    text-align: center;
    height: calc(100% - 30px);
    background: #004664;
    color: #fff;
    text-align: center;
    border-radius: 25px;
    margin-top: 30px;
    font-size: 16px
}
.icon-teaser.style1 .icon img{
    min-height: 80px;
    margin: 0 auto 20px;
    opacity: 0.5
}
.icon-teaser.style1 .heading-shape{
    mix-blend-mode: normal
}
.icon-teaser-v3{
    padding: 30px;
    border: 1px solid rgb(229, 231, 235);
    border-radius: 12px;
    margin-top: 20px;
    display: flex;;
    font-size: 16px;
    line-height: 24px
    
}
.icon-teaser-v3 .icon{
    min-width: 60px;
    min-height: 60px;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 20px;
    background: rgba(9, 71, 100, 0.05)
}
.icon-teaser-v3 .title{
    font-size: 20px
}
.include-notes{
    margin-top: 50px;
    padding: 40px;
    border-radius: 20px;
    background: #094764;
    color: #fff
}
.include-notes ul{
    margin-top: 30px
}
.include-notes ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 40px;
    font-size: 16px;
    line-height: 24px;
}
.include-notes ul li::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 10px;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="%23fff"><path stroke="%23fff" d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>') no-repeat scroll 0 0/cover;
}
.box.style3.alt.with_margin{
    margin-top: 30px;
    display: block;
    height: calc(100% - 30px)
}
.pricing-box{
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgb(229, 231, 235);
    height: 100%
}
.pricing-box .title{
    font-weight: 700;
    margin: 0;
    font-size: 40px
}
.pricing-box .title small{
    font-size: 20px;
    color: #363636;
    font-weight: 400
}
.pricing-box .price-wrapper{
    margin: 15px 0
}
.pricing-box .content{
    margin-bottom: 20px
}
.pricing-box .pay-type{
    text-transform: uppercase;
    font-size: 15px;
    color: #094764;
    letter-spacing: 1px;
    font-weight: 700
}
.pricing-box.active{
    background: #094764;
    color: #fff
}
.pricing-box.active .title{
    color: #fff
}
.pricing-box.active .title small{
    color: rgba(255, 255, 255, 0.62)
}
.pricing-box.active .pay-type{
    color: rgba(255, 255, 255, 0.7)
}
.payment-tag{
    display: inline-block;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #094764;
    background: #fff;
    border-radius: 30px;
    line-height: 14px;
    margin-left: 6px
}
.pricing-box .cta-btn{
    width: 100%
}
.signature{
    font-family: "Dancing Script", cursive;
    font-weight: 600;
    color: rgb(59, 130, 160);
    font-size: 40px
}
.signature-photo{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px
}
.signature-photo li{
    margin-right: 15px;
    margin-top: 15px
}
.signature-photo li:last-child{
    margin-right: 0
}
.signature-photo li img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover
}
.three-col-slider .slick-track {
    display: flex
}

.three-col-slider .slide {
    min-height: inherit;
    height: auto
}
.three-col-slider .box.style3{
	height:calc(100% - 30px)
}
.feature-testimonials .rating, .review-box-v3 .rating, .rating_star{
	color: #fcab35;
}
.feature-testimonials .rating i, .review-box-v3 .rating i, .rating_star i{
	margin-right:4px
}
.feature-testimonials .rating i:last-child, ..review-box-v3 .rating i:last-child, .rating_star i:last-child{
	margin-right:0
}
.tab-content-wrapper img{
	margin-bottom:20px
}
.tab-content-wrapper .video-star-rating{
	font-size:25px
}
.review-box-v3 .rating {
    margin-bottom: 10px;
}
.box.style9.text-only .text{
	padding:0
}
body.single-event .footer-area{
	background:#F7F8F7
}
body.error404 .header-area{
	background:#094764
}
.error-page {
    padding-top: 250px;
    padding-bottom: 0;
}
.error-page h1{
	font-weight:700
}
.event-banner-action .cta-btn{
	margin-right:15px
}
/*Counter*/
.countdown {
  display: flex;
  gap: 20px;
    justify-content: center;
    margin-top: 40px
}

/* Each box */
.time-box {
  text-align: center;
}

/* Number card */
.time {
  background: #094764;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 8px 15px rgba(0,0,0,0.4);
  position: relative;
  min-width: 100px;
}
.countdown-widget-box{
    margin-top: 40px;
    padding: 50px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    background: #094764;
    color: #fff;
    width: 80%;
    margin-left: auto;
    margin-right: auto
}
.countdown-widget-box .price-value{
    display: inline-block;
    font-size: 22px;
    color: rgb(184, 150, 62);
    border: 2px solid rgb(184, 150, 62);
    border-radius: 50px;
    padding: 10px 24px;
    margin-bottom: 8px;
    font-weight: 700;
    margin: 15px 0
}
.countdown-widget-box .top{
    padding-bottom: 40px;
    border-bottom: 1px solid #01324a;
    margin-bottom: 40px
}
.countdown-widget-box .list_check {
    text-align: left;
    font-size: 16px;
    width: 60%;
    margin: 30px  auto;
}
.countdown-widget-box .list_check li::before {
    background: url('data:image/svg+xml,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') no-repeat scroll 0 0/cover;
}
.countdown-notes{
    margin-top: 40px;
    font-size: 16px
}
.countdown-notes p, .timeline-notes .inner p{
    margin: 0 0 10px
}

/* Labels */
.time-box span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1px;
}
.video-holder > img:not(.image_shape){
	border-bottom-right-radius:80px
}

.counter-box .num{
        color: #826b2a;
    font-family: 'Sportfield Varsity';
    font-weight: 400;
    font-size: 60px;
    display: block;
    line-height: 120%;
    margin-bottom: 20px;
}
.counter-box .title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.box.style3{
	height:100%
}
.box.style3.alt-text{
	margin:0
}
.box.style3 img{
	border-radius:16px
}
.box.style3.alt-text .inner-text{
	min-height:100px
}
.contact-area .c_info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}
.contact-area .c_info .icon {
    margin-right: 22px;
    width: 60px;
    min-width: 60px;
    background: #094764;
    min-height: 60px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-area .c_info .title {
    font-weight: 700;
    font-size: 18px;
    color: #143843;
    letter-spacing: 2px;
    margin-bottom:3px;
    text-transform: uppercase
}
.contact-area .c_info a {
    display: block;
}
.contact-area .c_info a:hover{
    text-decoration: underline
}
.c_form {
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid #094764;
    padding: 36px;
    position: relative;
    z-index: 11
}
.c_form li {
    margin-bottom: 14px;
}
.c_form input, .c_form textarea, .c_form select {
    width: 100% !important;
    height: 52px !important;
    border: 1px solid #6f8aa0 !important;
    background: #fff !important;
    color: #0e3346 !important;
	border-radius:8px !important;
	font-size:16px !important;
	padding: 10px 14px !important
}
.c_form textarea {
    height: 120px !important;
}
.c_form input::placeholder, .c_form textarea::placeholder, .c_form select::placeholder{
    color: #5d6f7a !important;
    opacity: 1 !important
}
.c_form input:focus, .c_form textarea:focus, .c_form select:focus{
	outline:none !important;
	box-shadow:none !important;
	border-color:#094764 !important
}
/* Keyboard focus ring for form fields. The !important above would otherwise
 * swallow the global :focus-visible rule, so re-assert it here for keyboard
 * users (white ring reads against the form's dark/blue field background). */
.c_form input:focus-visible, .c_form textarea:focus-visible, .c_form select:focus-visible{
	outline:2px solid #094764 !important;
	outline-offset:2px !important;
	border-color:#094764 !important
}
.c_form option{
	color:#000
}
.c_form .cta-btn em{
	font-family: "Font Awesome 6 Free" !important;
}
.c_form .cta-btn{
	border-color: #094764 !important;
    background: #094764 !important;
    color: #fff !important;
	    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    border: 2px solid #094764 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}
.c_form .cta-btn::after {
    position: absolute !important;
    content: "" !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    left: 50% !important;
    width: 400px !important;
    height: 400px !important;
    transform-origin: center !important;
    transition: all 0.6s ease !important;
    border-radius: 50% !important;
    z-index: -1 !important;
	background: #0c3a52 !important;
}
.c_form .cta-btn:hover::after {
    transform: translate(-50%, -50%) scale(1.2) !important;
}
.c_form textarea{
	min-height:100px !important
}
.c_form .cta-btn.btn_white:hover {
    color: #fff !important;
}
.c_form_html {
    color: #3a4a54;
    opacity: 1;
    font-size: 14px;
}
.form_title{
    font-size: 26px
}
.c_form .gform-footer{
	display:block !important
}
.c_form .cta-btn{
    width: 100% !important
}
.map_embed iframe{
    width: 100%;
	height:350px
}
.form_desc{
	color:#094764 !important;
	font-size:16px !important;
	margin-bottom:20px
}
.gform-theme--foundation .gform_fields{
	row-gap:20px !important
}
.legend_cs, .gfield--type-html h3 {
    color: #094764 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
	font-size:18px !important;
	margin:0 !important
}
.c_form input[type="checkbox"], .c_form input[type="radio"] {
    height: 20px !important;
    padding: 0 !important;
    border: 1px solid #094764 !important;
    border-radius: 5px !important;
}
.c_form .gfield_consent_label{
	color:#2b3a44 !important;
	font-size:16px !important
}
.c_form .gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before{
	color:#fff !important
}
header.header-area.style2 {
    position: relative;
    background: #094764;
}
.gf_page_steps{
	justify-content:space-between !important
}
.gf_step_number{
	background:#fff !important;
	border:2px solid #094764 !important;
	color:#094764 !important
}
.gf_step_active  .gf_step_number {
    background: #826b2a !important;
    color: #fff !important;
	border-color:#826b2a !important
}
.gf_step {
	position:relative
}
.gf_step::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 70%;
    width: 300px;
    height: 2px;
    background: #cdd9e1;
    transform: translateY(-50%);
    z-index: -1;
}
.gf_step_active .gf_step::after{
	 background: #826b2a ;
}
.gform-theme--framework .gf_step_completed .gf_step_number::after{
	    background: #826b2a !important;
    color: #fff !important;
	border-color:#826b2a !important
}
.gform-theme--framework .gf_step_completed.gf_step::after{
	 background: #826b2a !important;
}
.gf_step:last-child::after{
	display:none
}
.gform-page-footer{
	justify-content:center !important
}
/* Target Gravity Forms select */
.gform_wrapper select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    color: #0e3346 !important;

    /* Add space for arrow */
    padding-right: 40px !important;

    /* Custom white arrow */
    background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(9,71,100)' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

/* Remove arrow in IE */
.gform_wrapper select::-ms-expand {
    display: none !important;
}
.c_form legend{
color: #094764 !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
}
.gfield_checkbox label, .gchoice label  {
    color: #2b3a44 !important;
    font-size: 16px !important;
}
.gform_heading{
	display:none !important
}
.gform_confirmation_message{
	text-align:center !important;
	color:#094764 !important
}
.content-text p a, .content-text li a{
	text-decoration:underline;
}
.content-text p a:hover, .content-text li a:hover{
	text-decoration:none;
}
.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before{
	background-color:#fff !important
}
.c_form input[type="checkbox"]{
	  width: 20px !important;
}
.c_form input[type="radio"] {
    width: 20px !important;
    border-radius: 50% !important;
}
.c_form .cta-btn::after {
    width: 1000px !important;
    height: 1000px !important;
}
.c_form input, .c_form textarea, .c_form select{
	font-size:16px !important
}
.c_form label.gfield_label.gform-field-label{
	/* Visually hidden, not display:none, so selects and inputs keep their
	   accessible names (axe: select-name). */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important
}
.gfield_required{
	display:none !important
}
img.image_resized {
    display: inline;
    width: 19px;
    height: auto;
	margin:0 4px
}
.ol_list{
	list-style:decimal;
	padding-left:20px
}
.ol_list li{
	display:list-item;
	margin:14px 0
}
.review-box-v3.lgr .rating_star {
    width: auto;
    margin-bottom: 15px;
}
.plain-text ul.list_check{
	list-style:none;
	padding:0
}
.plain-text ul.list_check li{
	list-style:none
}
.icon-teaser-v3 .plain-text ul{
	column-count:2;
	margin-bottom:0;
}
.testimonial-circle-wrapper .inner .content{
	font-size:16px
}
.page-banner-area {
    padding-top: 115px;
}
.breadcrumb-menu {
    color: #ffffffc4;
    padding-bottom: 50px;
    font-size: 14px;
}
.breadcrumb-menu a{
	color:#fff;
}
.breadcrumb-menu a:hover{
	text-decoration:underline
}
.breadcrumb-menu.dark {
    color: #094764c7;
    padding: 5px 0;
}
.breadcrumb-menu.dark a{
	color:#094764
}
.page-banner-area{
	height:auto
}
.box.style3.alt .inner-text{
	  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.flagship-box .content-img img{
	border-radius:15px
}
section.hero-area.page-banner-area.single-event-banner{
	padding-bottom:60px
}
.icon-teaser.no-description {
    background: #fff;
    border-radius: 20px;
    height: 100%;
    text-align: center;
    /* Without definition these white cards dissolve into the light section
     * ("open box" look). A hairline border (matching .icon-teaser-v3) plus a
     * soft shadow lift them into proper cards, in step with the synced pages. */
    border: 1px solid rgb(229, 231, 235);
    box-shadow: 0 8px 31px 0 rgba(0, 0, 0, 0.06);
    padding: 30px 24px;
    /* Cards equalize to the tallest in the row (height:100%); center the
     * icon+label cluster so single-line cards don't sit top-heavy. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.icon-teaser.no-description > img {
    max-height: 40px;
    margin-bottom: 20px;
    margin: 0 auto 20px;
}

/*Responsive*/
#menu-toggle span {
    height: 2px;
    width: 95%;
    background: #fff;
    display: block;
    margin-top: 5px;
    position: relative;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    border-radius: 5px;
    margin-right: auto;
    margin-left: 0;
}

#menu-toggle span:nth-child(1) {
    top: 4px;
}

#menu-toggle span:nth-child(2) {
    top: 6px;
    width: 75%;
}

#menu-toggle span:nth-child(3) {
    top: 8px;
    width: 65%
}

#menu-toggle {
    width: 56px;
    height: 42px;
    display: block;
    position: relative;
    background: transparent;
    padding: 4px 8px;
    border-radius: 7px;
    margin-left: auto;
    margin-right: auto;
    display: none
}

@media(max-width:1400px) {
    .hero-bottom {
        left: 30%
    }

    h2,
    .h2 {
        font-size: 36px;
        line-height: 100%;
    }

    .seq-alt .seq-img img {
        right: 0
    }

    .masonary-card-slider .carousel-card-wrapper {
        height: 600px;
    }

    .box.style7 .title {
        font-size: 18px;
        padding-right: 0;
    }

    .number_tabs .accordion-button {
        font-size: 18px
    }

    .join_shape_left,
    .join_shape_right {
        width: 150px
    }

    .join_bg {
        border-radius: 40px
    }

    .timeline-box .title {
        font-size: 22px
    }

    .event-banner-action {
        left: auto;
    }

    .single-event-banner .hero-corner-right {
        width: 40px
    }

}

@media(max-width:1200px) {
    .review_filter {
        margin-bottom: 30px;
        display: block;
        text-align: center;
    }

    .tabs_wrapper {
        margin-top: 20px
    }

    .tabs_wrapper li {
        margin: 5px
    }

    .tr_img {
        display: none
    }

    .testimonial-circle-wrapper .inner {
        position: inherit;
        top: auto;
        left: auto;
        transform: translateX(0);
        bottom: auto
    }

    .testimonial-circle-wrapper .item.alt {
        margin-top: 30px
    }

    .testimonial-circle-wrapper .item.alt .inner {
        bottom: auto
    }

    .testimonial-circle-wrapper .item {
        margin-top: 30px;
        padding: 30px;
        background: #fff;
        border-radius: 30px;
        box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.07)
    }

    .testimonial-circle-wrapper .inner .image {
        width: 130px;
        height: 130px;
    }

    .testimonial-circle-wrapper .inner .border_shape {
        left: -42px;
    }

    .testimonial-circle-wrapper .inner {
        width: 100%
    }

    .icon-teaser .title {
        font-size: 20px
    }

    .include-shape {
        width: 120px;
    }

    .include_bg {
        border-radius: 30px;
    }

    .icon-teaser {
        background: #fff;
        padding: 20px;
        box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.08);
        height: auto;
        border-radius: 20px
    }

    .icon-teaser .title {
        font-size: 22px;
    }

    .icon-teaser {
        height: 100%
    }

    .team-box .title {
        font-size: 19px;
    }

    .box.style9 .title {
        font-size: 20px;
    }
	.event-banner-action {
	bottom:inherit
}
	.gf_step::after {
    width: 250px;
}

}


@media(max-width:991px) {
    br {
        display: none
    }

    nav#menu {
        position: absolute;
        top: 99%;
        left: 0;
        width: 100%;
        display: block;
        z-index: 999;
        min-height: calc(100vh - 45px);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s all;
    }

    nav#menu.active {
        opacity: 1;
        visibility: visible;
        transition: 0.3s all;
    }

    .mainmenu ul {
        text-align: left;
    }

    nav#menu,
    nav#menu > ul ul {
        overflow: hidden;
        max-height: 0;
        background: #094764;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    nav#menu,
    nav#menu > ul ul {
        overflow: auto;
        padding: 50px 20px;
    }

    nav#menu > ul > li {
        display: block !important;
        margin: 0 !important;
        padding: 0
    }

    nav#menu ul ul,
    nav#menu ul ul ul {
        display: inherit;
        position: relative;
        left: auto;
        top: auto;
        padding: 0
    }

    nav#menu > ul > li > span {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 16px;
        z-index: 2;
    }

    nav#menu ul ul.sub-menu.active {
        visibility: visible;
        opacity: 1;
        max-height: 55em;
    }

    nav#menu > ul > li > a {
        display: block;
        position: relative;
        padding: 15px 0px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 15px;
        opacity: 1;
        font-weight: 500
    }

    .header-menu a::before {
        display: none
    }

    .header-menu a::after {
        display: none
    }

    nav#menu > ul > li:last-child > a {
        border: none
    }

    .mainmenu ul li > ul {
        border: none
    }

    nav#menu li.has-submenu > a:after {
        border: none;
        content: '+';
        position: absolute;
        top: 10px;
        right: 9px;
        display: block;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        font-size: 30px;
        font-weight: 400
    }

    .sub-menu::before {
        height: 90% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .sub-menu::after {
        display: none
    }

    nav#menu li.has-submenu.active > a:after {
        content: "-";
        font-size: 30px
    }

    nav#menu ul ul > li a {
        padding: 13px 0px;
        line-height: normal;
        color: #fff;
        font-size: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06)
    }

    ul.sub-menu {
        padding-left: 20px;
    }

    .header-toggle.active span:nth-child(2) {
        opacity: 0
    }

    .header-toggle.active span:nth-child(1) {
        top: 14px;
        transform: rotate(45deg);
    }

    .header-toggle.active span:nth-child(3) {
        top: 0px;
        transform: rotate(-45deg);
    }

    .header-toggle {
        display: block;
    }

    nav#menu > ul ul {
        background: transparent;
        box-shadow: none;
        width: 100%;
        padding-left: 15px
    }


    #menu-toggle {
        display: block;
        margin-left: 10px;
        padding-right: 0
    }

    .header-action > a > span:not(.icon) {
        display: none
    }

    .header-action {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .site-logo {
        max-width: 100px;
    }

    #menu-toggle.active span:nth-child(2) {
        opacity: 0
    }

    #menu-toggle.active span:nth-child(1) {
        top: 14px;
        transform: rotate(45deg);
        width: 100%
    }

    #menu-toggle.active span:nth-child(3) {
        top: 0px;
        transform: rotate(-45deg);
        width: 100%
    }

    section,
    .section {
        padding: 50px 0
    }

    .cta-btn {
        padding: 10px 15px;
        letter-spacing: 1px;
        font-size: 14px;
        line-height: 20px
    }

    .box.style1 img {
        transform: scale(1);
        padding: 0
    }

    .box.style1 .text {
        padding: 20px 0 0
    }

    .scale-box-area .col-lg-3:nth-child(even) .box.style1 {
        transform: translateY(0px);
    }

    body {
        font-size: 16px
    }

    .header-area {
        transition: all 0.4s
    }

    .header-area.active {
        background: #094764
    }

    .hero-text {
        font-size: 16px;
    }

    .hero-area {
        padding-top: 130px;
        height: 530px;
        border-bottom-right-radius: 40px;
    }

    .hero-bottom {
        bottom: 85px;
        left: 20%;
    }

    h1,
    .h1 {
        font-size: 48px;
        line-height: 100%;
    }

    h2,
    .h2 {
        font-size: 30px;
        line-height: 100%;
    }

    h3,
    .h3 {
        font-size: 27px;
        line-height: 110%;
    }

    h4,
    .h4 {
        font-size: 24px;
        line-height: 110%;
    }

    h5,
    .h5 {
        font-size: 16px;
        line-height: 110%;
    }

    .video-holder {
        border-radius: 30px;
    }

    .play_btn {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .accordion .tabs .tab-content {
        padding: 20px
    }

    .tab-content-wrapper {
        font-size: 15px
    }

    .h-tab-area .accordion {
        height: 400px
    }

    .accordion .tabs .tab-content .meta .title {
        font-size: 18px
    }

    img.video-review-logo {
        max-width: 90px;
    }

    .number_tabs .accordion-button {
        font-size: 18px
    }

    .mobile-mockup {
        width: 200px
    }

    .mockup-tags {
        font-size: 12px;
        padding: 8px 12px;
        max-width: 140px;
        min-height: 36px;
        border-radius: 16px;
    }

    .mockup-tags::after {
        width: 14px;
        height: 12px;
        bottom: -4px;
    }

    .group_btn {
        text-align: center
    }

    .group_btn a {
        margin: 10px 0
    }

    .pb_250 {
        padding-bottom: 50px;
    }

    .meet_bg {
        border-radius: 30px;
    }

    .meet_shape {
        width: 120px
    }

    .meet-slider .slide.slick-active + .slick-center .box.style2 {
        transform: scale(1) translate(0px) !important;
        z-index: 11;
        width: auto
    }

    .meet-slider .slide {
        padding: 0 8px;
    }

    .meet-slider .slick-slide {
        min-width: inherit;
    }

    .meet-slider .slick-list {
        margin-left: 0px;
        margin-right: 0px;
    }

    .meet-slider .box.style2 {
        transform: scale(1) translate(0)
    }

    .meet-slider .box.style2 {
        width: auto;
        height: auto
    }

    .meet-slider .slide.slick-active + .slide.slick-active .box.style2 {
        transform: scale(1) translate(0);
    }

    .meet-slider .slick-center + .slick-active .box.style2 {
        transform: scale(1) translate(0) !important;
    }

    .meet-slider .box.style2 .text .title {
        margin: 0
    }

    .meet-slider .box.style2 .text {
        opacity: 1;
        visibility: visible
    }

    .circle-stats-wrapper .inner-num .title {
        font-size: 30px
    }

    .circle-states-area {
        font-size: 16px;
    }

    .circle-stats-wrapper .inner-num {
        width: 130px;
        height: 130px;
    }

    .newsletter-box {
        padding: 40px
    }

    .newsletter-box .inner {
        width: 90%;
    }

    .newsletter-box .heading {
        font-size: 40px;
    }

    .newsletter-box {
        min-height: 460px;
        border-radius: 30px
    }

    .footer-logo {
        max-width: 100%;
        display: block
    }

    .footer-logo > a {
        display: block;
        width: 120px;
    }

    .footer-widget {
        margin: 20px 0
    }

    .footer-logo {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .footer-social {
        margin-left: 20px;
        text-align: right
    }

    .footer-top {
        padding: 30px 0;
    }

    .footer-bottom {
        padding: 20px 0;
        font-size: 10px;
        text-align: center;
    }

    .footer_btns a {
        font-size: 12px;
        line-height: 16px;
    }

    .bird-container {
        top: 0
    }

    .events-tags {
        font-size: 13px
    }

    .events-tags img {
        width: 9px;
    }

    .flag-date {
        font-size: 12px
    }

    .flag-date img {
        width: 12px
    }

    .masonary-card-slider .box.style6 .title {
        font-size: 18px;
        margin: 0;
    }

    .py_140 {
        padding: 50px 0;
    }

    .image-shape img:not(.shape) {
        border-radius: 30px;
        max-width: 100%;
    }

    .image-shape .shape {
        width: 120px
    }

    .feature-list-box {
        padding: 10px;
        border-radius: 30px;
        margin-top: 30px;
    }

    .feature-list-box .item {
        padding: 15px
    }

    .feature-list-box .item .list-title {
        font-size: 13px;
        line-height: normal;
    }

    .group-stats {
        height: auto;
        width: 260px;
        margin: 0 auto;
    }

    .group-stats .stats-number {
        width: 130px;
        height: 130px;
        padding: 15px;
        font-size: 13px;
        line-height: 17px;
    }

    .group-stats .stats-number .title {
        font-size: 25px;
        margin: 0;
    }

    .flagship-box .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-bottom: 15px
    }

    .flagship-box {
        margin-top: 30px
    }

    .flagship-box:not(.smalls) {
        margin-top: 0
    }

    .call-to-action.style2 {
        border-radius: 30px;
        padding: 50px;
    }

    .call-to-action.style2 .corner_shape {
        width: 40px;
        height: 40px;
        top: -20px
    }

    .text-center .heading-shape {
        margin: 15px auto;
        display: block
    }

    .event-box-wrapper {
        padding: 30px 0;
    }

    .box.style3.alt .title {
        font-size: 20px;
    }

    .call-to-action.style3 {
        border-radius: 40px;
        padding: 70px;
    }

    .call-to-action.style3 .cta_shape {
        width: 200px;
    }

    .box.style5 .info {
        padding: 20px;
        font-size: 14px;
        line-height: normal
    }

    .box.style5 .info .title {
        font-size: 20px
    }

    .seq-alt .seq-img img {
        right: 0;
        max-width: 150px;
    }

    .coming-up-table table td {
        padding: 15px;
        font-size: 15px;
        line-height: normal
    }

    .coming-up-table table td .status {
        padding: 10px;
        font-size: 14px;
    }

    .masonary-card-slider .carousel-card-wrapper {
        height: 500px;
    }

    .newsletter-box.alt {
        min-height: inherit;
        border-radius: 40px;
    }

    .box.style7 .title {
        font-size: 20px;
    }

    .box.style7 .image {
        border-radius: 10px;
        overflow: hidden;
        height: 130px;
    }

    .box.style7 .title {
        padding-right: 0
    }

    .timeline-box .title {
        font-size: 18px
    }

    .review-box {
        padding: 20px
    }

    .review-box .meta .title {
        font-size: 18px;
    }

    .review-box .meta img:not(.quotes_icon) {
        width: 55px;
        height: 55px;
        min-width: 55px;
        min-height: 55px;
    }

    .review-video-box .play_btn {
        width: 60px;
        height: 60px
    }

    .review-box .review-video-box .meta .quotes_icon {
        width: 40px
    }

    .join_shape_left,
    .join_shape_right {
        width: 150px
    }

    .join_bg {
        border-radius: 40px
    }

    .process-timeline-wrapper .item:first-child .timeline-box::before {
        left: -20px
    }

    .process-timeline-wrapper .item:last-child .timeline-box::before {
        right: -20px
    }

    .faqs_accordion .accordion-button {
        font-size: 16px
    }

    .image-shape-wrapper img:not(.image_shape) {
        border-radius: 30px;
    }

    .hero-area.page-banner-area.testimonial-banner {
        height: 370px;
    }

    .rv_bg_image {
        display: none
    }

    .feature-testimonials .inner-box {
        position: inherit;
        top: auto;
        left: 0;
        transform: translateY(0%);
        padding-left: 35px;
        background: #fff;
        border-radius: 30px;
        padding: 20px;
    }

    .feature-testimonials .inner-box .image img {
        min-height: inherit
    }

    .feature-testimonials .inner-box .image {
        margin-bottom: 30px
    }

    .feature-testimonials .inner-box .title {
        font-size: 20px;
    }

    .feature-testimonials .item {
        margin-top: 30px
    }

    .feature-testimonials .inner-box .name {
        font-size: 18px
    }

    .feature-testimonials .item.alt {
        margin-top: 30px;
    }

    .feature-testimonials .item.alt .inner-box .tags {
        font-size: 12px
    }

    .feature-testimonials .item.alt .inner-box {
        padding: 20px
    }

    .feature-testimonials .inner-box .image .tags {
        padding: 8px 15px;
        font-size: 12px;
    }

    .feature-testimonials .inner-box .rating_star {
        width: 95px;
    }

    .review-box-v3 .meta .inner .title {
        font-size: 16px;
    }

    .review-box-v3 {
        padding: 20px
    }



    .box.style9 .title {
        font-size: 18px;
    }

    .box.style10 .info .title {
        font-size: 18px;
    }

    .inner-border {
        padding: 30px
    }
    .icon-teaser.style1 .icon img {
    min-height: 60px;
}
	.event-banner-action {
    bottom: auto;
}
	.error-page {
    padding-top: 150px;
}
	.gf_step::after {
    width: 250px;
}
	.hero-area.page-banner-area{
		padding-top:100px
	}
	.breadcrumb-menu {
    padding-bottom: 35px;
    font-size: 12px;
}
}


@media(max-width:767px) {
    .testimonial-circle-wrapper .inner .border_shape {
        display: none
    }

    h1,
    .h1 {
        font-size: 40px;
        line-height: 100%;
    }

    h2,
    .h2 {
        font-size: 30px;
        line-height: 100%;
    }

    h4,
    .h4 {
        font-size: 22px;
        line-height: 110%;
    }

    h5,
    .h5 {
        font-size: 18px;
        line-height: 110%;
    }

    .hero-bottom {
        left: 0;
        padding: 20px;
    }

    .hero-area {
        padding-top: 120px;
        padding-bottom: 150px;
        height: auto;
        border-bottom-right-radius: 30px;
    }

    .video-holder {
        border-radius: 30px;
    }

    .play_btn {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .text-carousel .title {
        font-size: 40px
    }

    .accordion .tabs .tab-content .meta .title {
        font-size: 20px
    }

    .tab-content-wrapper {
        font-size: 16px
    }

    .section-heading.alt .heading {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .featured-text-box {
        padding: 48px 30px;
        min-height: 0;
    }
    .featured-text-box .inner-quotes {
        font-size: 20px;
    }
    .featured-text-box .quote-mark {
        width: 50px;
        opacity: 0.5;
    }
    .featured-text-box .quote-mark--left {
        top: 16px;
        left: 18px;
    }
    .featured-text-box .quote-mark--right {
        bottom: 16px;
        right: 18px;
    }

    .number_tabs .accordion-button {
        font-size: 16px
    }

    .number_tabs .accordion {
        margin-bottom: 20px;
    }

    .section-action {
        margin-top: 30px;
    }

    .circle-states-area .content-text {
        width: 100%;
        margin: 0 auto;
        font-size: 16px;
    }

    .section-heading {
        font-size: 16px;
    }

    .mobile-mockup {
        width: 190px
    }





    .circle-stats-wrapper .item {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 20px 0;
    }

    .circle-stats-wrapper .inner-num {
        width: 120px;
        height: 120px;
        font-size: 12px;
    }

    .circle-stats-wrapper .inner-num .title {
        font-size: 26px
    }

    .circle-stats-wrapper .item:nth-child(2)::after {

        left: 50%;
        top: 100%;
        transform: translate(-50%, -50%);
    }

    .circle-stats-wrapper .item:nth-child(3)::after {

        left: 50%;
        top: 0%;
        transform: translate(-50%, -50%);
    }

    .circle-stats-wrapper .item:last-child::after {
        display: none;
        left: 0;
        transform: translate(-50%, -50%);
    }

    .circle-stats-wrapper {
        margin: 0 auto 20px
    }

    .seq-img img {
        max-width: 100%;
        float: none;
    }

    .three-col-slider .slide {
        padding: 8px
    }

    .three-col-slider .slick-list {
        margin-left: -8px;
        margin-right: -8px
    }

    .link_text_default {
        font-size: 14px
    }

    .newsletter-box .inner {
        width: 100%
    }

    .newsletter-box .heading {
        font-size: 28px;
    }

    .newsletter-box {
        padding: 30px;
        padding-bottom: 100px;
        min-height: inherit;
        border-radius: 20px
    }

    .newsletter-box button {
        width: 100%
    }

    .newsletter-box button img {
        margin-left: 0
    }

    .bird-container {
        top: -10%
    }

    .hero-area.page-banner-area {
        padding-bottom: 110px
    }

    .call-to-action.style2 {
        border-radius: 30px;
        padding: 30px;
    }

    .call-to-action.style2 .corner_shape {
        width: 30px;
        height: 30px;
        top: -15px;
    }

    .box.style3.alt .title {
        font-size: 20px;
    }

    .newsletter-box.alt {
        min-height: inherit;
        border-radius: 30px;
    }



    .event-box-wrapper {
        padding: 20px 0;
    }

    .call-to-action.style3 {
        border-radius: 30px;
        padding: 70px;
    }

    .call-to-action.style3 .cta_shape {
        width: 200px;
    }

    .seq-alt .seq-img img {
        width: 120px;
        right: 0;
        top: -94px;
    }

    .coming-up-table {
        overflow-x: auto
    }

    .coming-up-table table td {
        padding: 10px 15px;
        white-space: nowrap
    }

    .masonary-card-slider .carousel-card-wrapper {
        height: 400px;
    }

    .box.style5 .info {
        padding: 15px
    }

    .box.style5 .info .title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .timeline-box .title {
        font-size: 20px
    }

    .timeline-box .icon {
        width: 75px;
        height: 75px;
    }

    .timeline-box .icon img {
        width: 30px;
    }

    .join_bg {
        border-radius: 30px
    }

    .join_shape_right {
        width: 100px
    }

    .join_shape_left {
        width: 100px
    }

    .call-to-action.style2.alt {
        font-size: 16px
    }

    .image-shape-wrapper img:not(.image_shape) {
        border-radius: 30px;
    }

    .faqs_accordion .accordion-button {
        font-size: 16px;
        padding: 16px 22px;
    }

    .faqs_accordion .accordion-button .plus-minus {
        top: 14px;
        right: 20px;
        width: 28px;
        height: 28px;
    }

    .faqs_accordion .accordion-body {
        padding: 20px
    }

    .process-timeline-wrapper {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .process-timeline-wrapper .item {
        padding: 15px 0
    }

    .process-timeline-wrapper .item::after {
        width: 3px;
        height: 0;
        top: 10px
    }

    .process-timeline-wrapper .item.in-view::after {
        width: 3px;
        height: 100%
    }

    .process-timeline-wrapper .item .timeline-box {
        text-align: left;
        padding-left: 30px
    }

    .timeline-box .icon {
        margin-left: 0;
        border: none
    }

    .process-timeline-wrapper .item .timeline-box::after {
        right: auto;
        left: -8px;
        bottom: -30px;
        top: auto;
        background: #fff
    }

    .process-timeline-wrapper .item:first-child .timeline-box::before {
        top: -40px;
        left: -10px;
        transform: rotate(90deg);
    }

    .process-timeline-wrapper .item:last-child .timeline-box::before {
        right: auto;
        left: -9px;
        bottom: -50px;
        top: auto;
    }

    .zigzag-border-box .col-md-3:nth-child(odd) .box.style7 {
        padding-bottom: 0
    }

    .zigzag-border-box .col-md-3:nth-child(odd) .box.style7 .text {
        padding-bottom: 0
    }

    .review-box .meta {
        font-size: 10px
    }

    .process-timeline-wrapper.alt .item:last-child .timeline-box::before {
        top: auto;
    }

    .process-timeline-wrapper.alt .item .timeline-box::after {
        top: auto;
    }

    .process-timeline-wrapper.alt .item::after {
        top: 10px;
    }

    .process-timeline-wrapper.alt .item:first-child .timeline-box::before {
        top: -30px;
    }

    .timeline-box .icon {
        margin-left: 0;
        border: none;
        margin-bottom: 0;
        margin-right: 20px;
        min-width: 75px;
        min-height: 75px;
    }

    .process-timeline-wrapper .item .timeline-box {
        display: flex
    }

    .process-timeline-wrapper.alt .num {
        min-width: 80px;
        min-height: 80px;
        margin-right: 20px;
        margin-bottom: 0;
        margin-left: 0
    }

    .review_filter {
        display: block;
        margin-bottom: 30px
    }

    .review_filter .title {
        text-align: center
    }

    .tabs_wrapper {
        margin-top: 20px;
        overflow-x: scroll;
        overflow-y: hidden;
        padding-bottom: 10px
    }

    .tabs_wrapper .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
    }

    .tabs_wrapper .nav-tabs button {
        white-space: nowrap
    }

    .tabs_wrapper .nav-tabs li {
        margin-right: 5px
    }

    .review-box-v3 .meta .inner .title {
        font-size: 17px;
    }

    .feature-testimonials .inner-box .image .tags {
        padding: 7px 15px;
        font-size: 12px;
    }

    .faqs_accordion .accordion-button {
        padding-right: 50px
    }

    .single-event-banner .hero-corner-right {
        width: 30px
    }

    .event-banner-action {
        width: 100%;
        left: 0
    }

    .event-banner-action > img {
        display: none
    }

    .event-banner-action .inner {
        width: auto;
        padding: 24px;
        box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.08)
    }

    .event-banner-action .inner ul {
        margin-bottom: 0;
    }

    .tr_img {
        display: none
    }

    .testimonial-circle-wrapper .inner {
        position: inherit;
        left: auto;
        width: 100%;
        transform: translateX(0);
        top: auto
    }

    .testimonial-circle-wrapper .item {
        background: #fff;
        padding: 20px;
        box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.08);
        border-radius: 20px
    }

    .testimonial-circle-wrapper .inner .image {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
    }

    .testimonial-circle-wrapper .item.alt .inner {
        top: auto;
        bottom: auto;
    }

    .testimonial-circle-wrapper .item.alt .inner .image,
    .testimonial-circle-wrapper .item .inner .image {
        margin-right: auto;
        margin-left: auto
    }

    .testimonial-circle-wrapper .item {
        margin-top: 30px;
        text-align: center
    }

    .quote_icon_secondary {
        bottom: 0px;
        width: 50px;
    }

    .testimonial-circle-wrapper .inner .name {
        font-size: 18px;
    }

    .testimonial-circle-wrapper .item.alt {
        margin-top: 30px;
    }

    .testimonial-circle-wrapper .item:first-child {
        margin-top: 30px;
    }


    .box.style9 img {
        height: 180px;
    }

    .box.style9 .title {
        font-size: 20px;
    }

    .stat-quotes img {
        min-width: 60px;
        width: 60px;
    }

    .meet-slider .slick-arrow svg {
        height: 50px;
        width: 30px
    }

    .circle-stats-wrapper .item::after {
        left: 94%;
        font-size: 13px;
    }

    .timeline-notes .inner {
        padding: 20px
    }
    .icon-teaser.style1 .icon img {
    min-height: 50px;
}
    .pricing-box{
        padding: 25px
    }
	.event-banner-action {
    bottom: inherit;
}
	.c_form {
    padding: 20px;
}
	.team-box .image img:not(.shape){
		height:250px
	}
	
.gallery-img .text .title{
	    font-size: 16px;
}
.zoom-img.gallery-img.alt {
    height: 200px;
}
	.icon-teaser-v3 .plain-text ul{
		column-count:1
	}
	
	
	
}

@media(max-width:575px) {
	.gf_step::after {
    width: 158px;
}
		.c_form {
    margin-top: 30px;
}
    .inner-border {
        padding: 20px;
        overflow: hidden
    }

    .process-timeline-wrapper .item .timeline-box {
        display: block
    }

    .timeline-box .icon {
        margin-left: 0;
        border: none;
        margin-bottom: 20px;
        margin-right: 0px;
        min-width: 75px;
        min-height: 75px;
    }

    .process-timeline-wrapper.alt .num {
        min-width: 80px;
        min-height: 80px;
        margin-right: 0px;
        margin-bottom: 20px
    }

    .bird-container {
        top: -55%
    }

    .box.style3 .h5 {
        font-size: 15px;
        line-height: 110%;
    }

    .cta-btn {
        width: 100%
    }

    .hero-text {
        font-size: 15px;
        line-height: 23px;
    }

    body {
        font-size: 15px;
        line-height: 23px
    }

    .content-img {
        margin-bottom: 30px
    }

    .accordion .tabs .tab-header {
        display: none !important
    }

    .h-tab-area .accordion {
        display: block;
        height: auto
    }

    .accordion .tabs .tab-content,
    .accordion .tabs .tab-content .tab-content-wrapper,
    .accordion .tabs .tab-content .meta {
        opacity: 1;
        visibility: visible
    }

    .accordion .tabs,
    .accordion .tabs.is-active {
        box-shadow: -3px 4px 49px 0 rgba(0, 0, 0, 0.06);
        margin-top: 30px
    }

    .accordion .tabs.is-active {
        margin-top: 0
    }

    .accordion .tabs .tab-content {
        padding: 20px
    }

    .tab-content-wrapper {
        margin-top: 20px
    }

    .accordion .tabs .tab-content video {
        border-radius: 20px
    }

    img.video-review-logo {
        max-width: 90px;
    }

    .center-badge-img {
        width: 120px;
    }

    .center-badge-wrapper .item {
        align-items: flex-end;
        gap: 5px;
        max-width: 100px;
        flex-direction: column;
    }

    .center-badge-wrapper .item .title {
        font-size: 12px;
        margin: 0;
    }

    .center-badge-wrapper .icon {
        min-width: 50px;
        min-height: 50px;
    }

    .center-badge-wrapper .icon img {
        width: 22px;
    }

    .center-badge-wrapper .item.v1 .shape {
        left: 100%;
        top: 70px;
        width: 33px;
    }

    .center-badge-wrapper .item.v2 {
        max-width: 100px;
        top: 43%;
        left: 0;
    }

    .center-badge-wrapper .item.v2 .shape {
        left: 80%;
        width: 60px;
        top: 58px;
        transform: rotate(-36deg);
    }

    .center-badge-wrapper .item.v3 {
        bottom: -140px;
    }

    .center-badge-wrapper .item.v3 .shape {
        left: 41%;
        width: 200px;
        top: -20px;
        transform: rotate(-30deg);
        min-width: 145px;
        z-index: -1;
    }

    .center-badge-wrapper .item.right-side {
        flex-direction: column;
        align-items: flex-start;
    }

    .center-badge-wrapper .item.v4 {
        top: -55px;
        right: 0;
    }

    .center-badge-wrapper .item.v4 .shape {
        right: 100%;
        width: 33px;
        top: 70px;
    }

    .center-badge-wrapper .item.v1 {
        top: -55px;
    }

    .center-badge-wrapper .item.v5 {
        max-width: 100px;
        top: 43%;
        right: 0;
    }

    .center-badge-wrapper .item.v5 .shape {
        right: 96%;
        width: 33px;
        top: 40px;
        transform: rotate(27deg);
    }

    .center-badge-wrapper .item.v6 {
        bottom: -140px;
        right: 0;
    }

    .center-badge-wrapper .item.v6 .shape {
        right: 38%;
        width: 87px;
        top: -7px;
        min-width: 145px;
        transform: rotate(30deg);
        z-index: -1;
    }

    .section-notes {
        margin-top: 180px;
    }

    .box.style1 img {
        transform: scale(1);
        padding: 0
    }

    .scale-box-area .col-lg-3:nth-child(even) .box.style1 {
        transform: translateY(0px);
    }

    .box.style1 {
        margin-top: 30px
    }

    .box.style1 .text {
        padding: 20px 0 0;
    }

    /* Phones: hide the membership-accordion's decorative zone — the phone
     * mockup, its floating chat bubbles, and the rotating per-item photo.
     * On a single column the absolutely-positioned mockup landed on top of
     * the accordion (the first item was obscured on both the v1 home layout
     * and the v2 membership layout), and swapping the per-item image on each
     * tap shoved the list up and down. Dropping the whole zone leaves a clean,
     * full-width accordion that matches the FAQ accordions and stays still as
     * items open/close. The mockup still shows from 576px up, where it has
     * room beside/above the list. The .active selector is repeated so it beats
     * the equal-specificity `.custom_tabs_acrdn.active { display: block }`
     * rule by source order. */
    .custom_tabs_acrdn,
    .custom_tabs_acrdn.active {
        display: none;
    }



    .pt_150 {
        padding-top: 120px;
    }



    .pb_250 {
        padding-bottom: 50px;
    }

    .number_tabs .accordion-item:last-child::before {
        top: auto;
        bottom: 7px;
    }



    .tab-content video {
        display: block
    }

    .seq-img img {
        max-width: 100%;
        float: none;
        width: 120px;
        margin: 20px auto 0;
    }


    .call-to-action.style3 {
        border-radius: 30px;
        padding: 30px;
        padding-bottom: 70px;
    }

    .call-to-action.style3 .cta_corner {
        width: 55px;
    }

    .call-to-action.style3 .cta_shape {
        width: 120px;
    }

    .image-shape img:not(.shape) {
        border-radius: 20px;
        max-width: 100%;
    }

    .image-shape .shape {
        width: 100px
    }

    .feature-list-box {
        padding: 30px;
        border-radius: 30px;
        margin-top: 30px;
    }

    .feature-list-box .item {
        border-right: 0;
        border-bottom: 1px solid rgba(86, 86, 86, 0.35);
        flex: 0 0 100%;
        max-width: 100%;
        padding: 15px 0;
    }

    .feature-list-box .item:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(86, 86, 86, 0.35);
    }

    .feature-list-box .item:last-child {
        border-bottom: 0
    }

    .feature-list-box .item .list-title {
        font-size: 13px;
        line-height: normal;
    }

    .py_140 {
        padding: 50px 0;
        margin-top: 70px;
    }

    .seq-alt .seq-img img {
        right: 0
    }

    .masonary-card-slider .carousel-card-wrapper {
        height: 400px;
    }



    .call-to-action.style2.alt {
        padding: 30px
    }

    .review-box-v3 .content {
        min-height: inherit;
    }

    .review_tabs_heading {
        display: block;
        text-align: center
    }

    .review_tabs_heading .h2 {
        margin-bottom: 10px
    }

    .review_tabs_heading::after {
        display: none
    }

    .accordion .tabs + .tabs {
        background: #fff
    }

    .review_filter_alt .nav-tabs button {
        padding: 10px;
        align-items: center
    }

    .review_filter_alt .nav-tabs button img {
        height: 15px;
        margin-right: 8px;
    }



    .event-banner-action .link_text_default {
        display: flex
    }




    .icon-call-to-action {
        padding: 25px;
        border-radius: 20px;
    }

    .icon-call-to-action .icon img {
        width: 36px;
    }

    .icon-call-to-action .icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
        min-height: 65px;
        margin-right: 0;
        margin-bottom: 20px
    }

    .icon-call-to-action .head {
        display: block
    }






    .box.style9 .h2 {
        font-size: 20px;
        text-align: center;
    }

    .box.style9 .title {
        font-size: 20px;
    }

    .box.style9 .text {
        padding: 15px;
    }

    .box.style9 img {
        height: 190px
    }

    .stat-quotes img {
        min-width: 65px;
        width: 65px;
    }

    .box.style10 .info .title {
        font-size: 16px
    }

    .box.style10 .info {
        padding: 15px
    }

    .section-notes {
        margin-top: 30px;
    }

    .column_2 {
        column-count: 1
    }

    .text_two_col {
        padding: 20px 0
    }

    .logo-carousel .item {
        height: 47px
    }

    .logo-carousel .slide {
        padding: 0
    }
    .icon-teaser-v3{
        display: block
    }
    .icon-teaser-v3 .icon{
        margin-right: 0;
        margin-bottom: 20px
    }
	.center-badge-wrapper + .section-notes{
		margin-top:170px
	}
    
	.meet-slider .box.style2{
		height:180px
	}
	   .countdown {
        margin-top: 40px;
    }
    .time {
    font-size: 22px;
    padding: 15px;
    min-width: 60px;
}
    .countdown-widget-box{
        width: 100%;
        padding: 30px
    }
    .countdown-widget-box .list_check{
        width: 100%
    }
}
@media(max-width:420px){
	.gf_step::after {
    width: 115px;
}
}


/*Extra Responsive*/
@media only screen and (max-width: 1024px) {
    .center-badge-img {
        width: 400px
    }

    .center-badge-wrapper .item.v2 {
        max-width: 250px;
        top: 43%;
        left: 0;
    }

    .center-badge-wrapper .item.v5 {
        max-width: 250px;
        top: 43%;
        right: 0;
    }

    h5,
    .h5 {
        font-size: 18px;
        line-height: 110%;
    }

    .meet_shape {
        width: 300px
    }

    .pb_250 {
        padding-bottom: 200px;
    }

    .newsletter-box .heading {
        font-size: 50px;
    }

    .flagship-box.smalls .group_btn a {
        width: 100%;
        margin: 5px 0
    }
}

@media only screen and (max-width: 932px) {
    .center-badge-img {
        width: 450px;
    }

    .center-badge-wrapper .item {
        align-items: flex-end;
        gap: 5px;
        max-width: 100px;
        flex-direction: column;
    }

    .center-badge-wrapper .item .title {
        font-size: 14px;
        margin: 0;
    }

    .center-badge-wrapper .icon {
        min-width: 50px;
        min-height: 50px;
    }

    .center-badge-wrapper .icon img {
        width: 22px;
    }

    .center-badge-wrapper .item.v1 .shape {
        left: 100%;
        top: 70px;
        width: 125px;
        min-width: 130px;
    }

    .center-badge-wrapper .item.v2 {
        max-width: 100px;
        top: 43%;
        left: 0;
    }

    .center-badge-wrapper .item.v2 .shape {
        left: 100%;
        width: 66px;
        top: 88px;
        transform: rotate(0);
        min-width: 120px;
    }

    .center-badge-wrapper .item.v3 {
        bottom: -80px;
    }

    .center-badge-wrapper .item.v3 .shape {
        left: 78%;
        width: 207px;
        top: -20px;
        transform: rotate(-8deg);
        min-width: 200px;
        z-index: -1;
    }

    .center-badge-wrapper .item.right-side {
        flex-direction: column;
        align-items: flex-start;
    }

    .center-badge-wrapper .item.v4 {
        top: -55px;
        right: 0;

    }

    .center-badge-wrapper .item .shape {
        z-index: -1
    }

    .center-badge-wrapper .item.v4 .shape {
        right: 100%;
        top: 70px;
        width: 125px;
        min-width: 130px;
    }

    .center-badge-wrapper .item.v1 {
        top: -55px;
    }

    .center-badge-wrapper .item.v5 {
        max-width: 100px;
        top: 43%;
        right: 0;
    }

    .center-badge-wrapper .item.v5 .shape {
        right: 100%;
        width: 118px;
        top: 61px;
        transform: rotate(0);
        min-width: 120px;
    }

    .center-badge-wrapper .item.v6 {
        bottom: -80px;
        right: 0;
    }

    .center-badge-wrapper .item.v6 .shape {
        right: 69%;
        width: 87px;
        top: -20px;
        min-width: 200px;
        transform: rotate(8deg);
        z-index: -1;
    }

    .center-badge-wrapper .item {
        max-width: 150px
    }

    .pb_250 {
        padding-bottom: 50px;
    }

    .meet_shape {
        width: 120px
    }

    .newsletter-box .heading {
        font-size: 28px;
    }
}

@media only screen and (max-width: 853px) {
    .center-badge-img {}
}

@media only screen and (max-width:820px) {
    .center-badge-img {}
}

@media only screen and (max-width:778px) {
    .center-badge-img {}
}

@media only screen and (max-width:768px) {
    .center-badge-img {}
}

@media only screen and (max-width: 740px) {
    .center-badge-img {
        width: 450px;
    }

    .center-badge-wrapper .item {
        align-items: flex-end;
        gap: 5px;
        max-width: 100px;
        flex-direction: column;
    }

    .center-badge-wrapper .item .title {
        font-size: 14px;
        margin: 0;
    }

    .center-badge-wrapper .icon {
        min-width: 50px;
        min-height: 50px;
    }

    .center-badge-wrapper .icon img {
        width: 22px;
    }

    .center-badge-wrapper .item.v1 .shape {
        left: 100%;
        top: 70px;
        width: 125px;
        min-width: 130px;
    }

    .center-badge-wrapper .item.v2 {
        max-width: 100px;
        top: 43%;
        left: 0;
    }

    .center-badge-wrapper .item.v2 .shape {
        left: 80%;
        width: 66px;
        top: 58px;
        transform: rotate(-36deg);
    }

    .center-badge-wrapper .item.v3 {
        bottom: -80px;
    }

    .center-badge-wrapper .item.v3 .shape {
        left: 70%;
        width: 200px;
        top: 0px;
        transform: rotate(-30deg);
        min-width: 160px;
        z-index: -1;
    }

    .center-badge-wrapper .item.right-side {
        flex-direction: column;
        align-items: flex-start;
    }

    .center-badge-wrapper .item.v4 {
        top: -55px;
        right: 0;

    }

    .center-badge-wrapper .item .shape {
        z-index: -1
    }

    .center-badge-wrapper .item.v4 .shape {
        right: 66%;
        top: 70px;
        width: 125px;
        min-width: 130px;
    }

    .center-badge-wrapper .item.v1 {
        top: -55px;
    }

    .center-badge-wrapper .item.v5 {
        max-width: 100px;
        top: 43%;
        right: 0;
    }

    .center-badge-wrapper .item.v5 .shape {
        right: 96%;
        width: 45px;
        top: 40px;
        transform: rotate(27deg);
    }

    .center-badge-wrapper .item.v6 {
        bottom: -80px;
        right: 0;
    }

    .center-badge-wrapper .item.v6 .shape {
        right: 69%;
        width: 87px;
        top: 6px;
        min-width: 151px;
        transform: rotate(30deg);
        z-index: -1;
    }

    .center-badge-wrapper .item.v5 .shape,
    .center-badge-wrapper .item.v2 .shape {
        min-width: inherit
    }
}

@media only screen and (max-width: 667px) {
    .center-badge-img {
        width: 380px;
    }
}

@media only screen and (max-width: 658px) {
    .center-badge-img {
        width: 400px;
    }
}

@media only screen and (max-width: 640px) {
    .center-badge-img {
        width: 350px;
    }

    .center-badge-wrapper .item {
        align-items: flex-end;
        gap: 5px;
        max-width: 100px;
        flex-direction: column;
    }

    .center-badge-wrapper .item .title {
        font-size: 12px;
        margin: 0;
    }

    .center-badge-wrapper .icon {
        min-width: 50px;
        min-height: 50px;
    }

    .center-badge-wrapper .icon img {
        width: 22px;
    }

    .center-badge-wrapper .item.v1 .shape {
        left: 100%;
        top: 70px;
        width: 85px;
    }

    .center-badge-wrapper .item.v2 {
        max-width: 100px;
        top: 43%;
        left: 0;
    }

    .center-badge-wrapper .item.v2 .shape {
        left: 80%;
        width: 66px;
        top: 58px;
        transform: rotate(-36deg);
    }

    .center-badge-wrapper .item.v3 {
        bottom: -80px;
    }

    .center-badge-wrapper .item.v3 .shape {
        left: 62%;
        width: 200px;
        top: -20px;
        transform: rotate(-30deg);
        min-width: 145px;
        z-index: -1;
    }

    .center-badge-wrapper .item.right-side {
        flex-direction: column;
        align-items: flex-start;
    }

    .center-badge-wrapper .item.v4 {
        top: -55px;
        right: 0;
    }

    .center-badge-wrapper .item.v4 .shape {
        right: 100%;
        width: 85px;
        top: 70px;
    }

    .center-badge-wrapper .item.v1 {
        top: -55px;
    }

    .center-badge-wrapper .item.v5 {
        max-width: 100px;
        top: 43%;
        right: 0;
    }

    .center-badge-wrapper .item.v5 .shape {
        right: 96%;
        width: 45px;
        top: 40px;
        transform: rotate(27deg);
    }

    .center-badge-wrapper .item.v6 {
        bottom: -80px;
        right: 0;
    }

    .center-badge-wrapper .item.v6 .shape {
        right: 55%;
        width: 87px;
        top: -7px;
        min-width: 145px;
        transform: rotate(30deg);
        z-index: -1;
    }
}

@media only screen and (max-width: 600px) {
    .center-badge-img {
        width: 300px;
    }

    .center-badge-wrapper .item {
        align-items: flex-end;
        gap: 5px;
        max-width: 100px;
        flex-direction: column;
    }

    .center-badge-wrapper .item .title {
        font-size: 12px;
        margin: 0;
    }

    .center-badge-wrapper .icon {
        min-width: 50px;
        min-height: 50px;
    }

    .center-badge-wrapper .icon img {
        width: 22px;
    }

    .center-badge-wrapper .item.v1 .shape {
        left: 100%;
        top: 70px;
        width: 85px;
    }

    .center-badge-wrapper .item.v2 {
        max-width: 100px;
        top: 43%;
        left: 0;
    }

    .center-badge-wrapper .item.v2 .shape {
        left: 80%;
        width: 66px;
        top: 58px;
        transform: rotate(-36deg);
    }

    .center-badge-wrapper .item.v3 {
        bottom: -80px;
    }

    .center-badge-wrapper .item.v3 .shape {
        left: 62%;
        width: 200px;
        top: -20px;
        transform: rotate(-30deg);
        min-width: 145px;
        z-index: -1;
    }

    .center-badge-wrapper .item.right-side {
        flex-direction: column;
        align-items: flex-start;
    }

    .center-badge-wrapper .item.v4 {
        top: -55px;
        right: 0;
    }

    .center-badge-wrapper .item.v4 .shape {
        right: 100%;
        width: 85px;
        top: 70px;
    }

    .center-badge-wrapper .item.v1 {
        top: -55px;
    }

    .center-badge-wrapper .item.v5 {
        max-width: 100px;
        top: 43%;
        right: 0;
    }

    .center-badge-wrapper .item.v5 .shape {
        right: 96%;
        width: 45px;
        top: 40px;
        transform: rotate(27deg);
    }

    .center-badge-wrapper .item.v6 {
        bottom: -80px;
        right: 0;
    }

    .center-badge-wrapper .item.v6 .shape {
        right: 55%;
        width: 87px;
        top: -7px;
        min-width: 145px;
        transform: rotate(30deg);
        z-index: -1;
    }

    .footer_title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .footer_links li a {
        font-size: 14px
    }

    .hero-bottom {
        bottom: 60px;
    }
    



}

@media only screen and (max-width: 575px) {
    .center-badge-img {}
}

@media only screen and (max-width: 540px) {
    .center-badge-img {
        width: 200px;
    }

    .center-badge-wrapper .item.v1 .shape,
    .center-badge-wrapper .item.v4 .shape {

        min-width: inherit;
    }
}

@media only screen and (max-width: 480px) {
    .center-badge-img {
        width: 150px;
    }

    .center-badge-wrapper .item.v1 .shape {
        width: 42px;
        min-width: 42px
    }

    .center-badge-wrapper .item.v4 .shape {
        width: 42px;
        min-width: 42px
    }

    .center-badge-wrapper .item.v5 .shape {
        width: 38px
    }

    .center-badge-wrapper .item.v6 .shape {
        min-width: 160px
    }

    .center-badge-wrapper .item.v3 .shape {
        min-width: 160px
    }

    .center-badge-wrapper .item.v3 {
        bottom: -130px;
    }

    .center-badge-wrapper .item.v6 {
        bottom: -130px;
    }
}

/* iPhone 14 Pro Max */
@media only screen and (max-width: 430px) {
    .center-badge-img {}
}



/* iphone xr */
@media only screen and (max-width: 414px) {
    .center-badge-img {}
}

/* iphone xr */
@media only screen and (max-width: 412px) {
    .center-badge-img {}
}

@media only screen and (max-width: 395px) {
    .center-badge-img {
        width: 120px;
    }
}



/* iPhone 12 – 390px */
@media only screen and (max-width: 390px) {
    .center-badge-img {
        width: 120px;
    }
}

/* galaxy s5 */
@media only screen and (max-width: 360px) {
    .center-badge-img {
        width: 126px;
    }

    .center-badge-wrapper .item.v1 .shape {
        width: 24px;
    }

    .center-badge-wrapper .item.v4 .shape {
        width: 24px
    }

    .center-badge-wrapper .item.v5 .shape {
        width: 28px;
    }

    .center-badge-wrapper .item.v6 .shape {
        min-width: 135px
    }

    .center-badge-wrapper .item.v3 .shape {
        min-width: 135px;
    }

    .center-badge-wrapper .item.v2 .shape {
        width: 54px
    }

}

/* Galaxy S9+ – 412px */
@media only screen and (max-width: 344px) {
    .center-badge-img {}
}

@media only screen and (max-width: 320px) {
    .center-badge-wrapper .icon img {
        width: 18px;
    }

    .center-badge-img {
        width: 80px;
    }

    .center-badge-wrapper .icon {
        min-width: 42px;
        min-height: 42px;
    }

    .center-badge-wrapper .item.v1 .shape {
        width: 40px;
        top: 45px;
        min-width: 40px;
    }

    .center-badge-wrapper .item.v4 .shape {
        width: 40px;
        top: 45px;
        min-width: 40px;
    }

    .center-badge-wrapper .item.v5 .shape {
        width: 28px;
    }

    .center-badge-wrapper .item.v6 .shape {
        min-width: 135px;
        top: -33px;
        right: 48%;
    }

    .center-badge-wrapper .item.v3 .shape {
        min-width: 135px;
        top: -33px;
        left: 49%;
    }

    .center-badge-wrapper .item.v2 .shape {
        width: 54px;
        top: 47px
    }

    .center-badge-wrapper .item .title {
        font-size: 10px;
    }
}

/* ============================================================
 * Cadence Grid — process-timeline block (Membership page)
 * ------------------------------------------------------------
 * Replaces the old connected-strip layout (.process-timeline-wrapper
 * without `.alt`) for the "What Membership Actually Looks Like" block.
 * The old design used a horizontal line + arrow + bathtub end-cap
 * pseudo-elements between 4 cramped equal-width cells; body copy did
 * not fit and the connector looked off on every viewport. This grid
 * gives each cell its own white card with comfortable padding and a
 * proper responsive cadence: 1 col on phone, 2 cols on tablet, 4 cols
 * on desktop. Visual language matches `.box.style1` (the home-page
 * advisors-grid 4-card row).
 *
 * The .process-timeline-wrapper styles further up the file are left
 * untouched — the icon-timeline block still uses `.process-timeline-
 * wrapper.alt` for its numbered application flow.
 * ============================================================ */

.cadence-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.cadence-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 4px 18px 0 rgba(0, 70, 100, 0.08);
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
}

.cadence-card__icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #F1F2EF;
    border: 6px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 70, 100, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.cadence-card__icon img {
    width: 40px;
    height: auto;
}

.cadence-card__title {
    font-size: 22px;
    color: #004664;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

.cadence-card__body {
    text-align: left;
    flex: 1;
}

.cadence-card__text {
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}

.cadence-card__text > div,
.cadence-card__text > p {
    /* Editorial sub-field wraps content in a div with inline
     * `text-align: left`. Keep that, just normalize spacing. */
    margin: 0;
}

.cadence-card__text br {
    /* Tight stack of short phrases reads cleaner with slight extra
     * breathing room between line-break-separated items. */
    margin-bottom: 4px;
}

/* Checklist bullets — the timeline-step phrase stack is rendered as a real
 * <ul> (see process-timeline.php) so each item gets an outlined-circle
 * checkmark. The bullet sits flush-left, aligned under the card title's first
 * letter; the text hangs to its right so wrapped lines indent past the icon. */
.cadence-card__text .cadence-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cadence-card__text .cadence-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 6px;
}

.cadence-card__text .cadence-list li:last-child {
    margin-bottom: 0;
}

.cadence-card__text .cadence-list li::before {
    content: "\f058"; /* fa-circle-check */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 400; /* regular weight = outlined circle stroke */
    color: #004664; /* BBI navy, matches the card titles */
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 16px;
    line-height: 1.55;
}

/* Bottom note card — kept for the "Most members say..." quote, but
 * stripped of the old wavy divider image above and the duck mascot
 * inside (both lived in the markup-as-content era of this block). */
.cadence-note {
    margin-top: 48px;
}

.cadence-note__inner {
    padding: 32px 36px;
    border-radius: 22px;
    background: #094764;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 18px 0 rgba(0, 70, 100, 0.12);
}

.cadence-note__inner p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
}

.cadence-note__inner p + p {
    margin-top: 12px;
}

/* Tablet: 2 cols. */
@media (min-width: 576px) {
    .cadence-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Desktop: 4 cols. */
@media (min-width: 992px) {
    .cadence-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .cadence-card {
        padding: 36px 26px;
    }

    .cadence-card__title {
        font-size: 24px;
    }
}

/* ============================================================
 * How to Join cards — icon-timeline block (Membership page)
 * ------------------------------------------------------------
 * Companion styling for the rewritten icon-timeline template, which
 * emits a Bootstrap row of `col-lg-3 col-md-6` cards instead of the
 * legacy `.process-timeline-wrapper.alt` strip (the one with the
 * horizontal connector, `>>` arrow, and bathtub end-cap).
 *
 * Visual language follows the cadence grid above and the home-page
 * advisors-grid `.box.style1` pattern: white cards on the existing
 * `.join_bg` light backdrop, navy text, BBI palette number badge.
 * No `!important`. The legacy `.process-timeline-wrapper*` and
 * `.call-to-action.style2*` rules higher in the file are left
 * untouched — other blocks may still reference them.
 * ============================================================ */

.join-step {
    background: #fff;
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 4px 18px 0 rgba(0, 70, 100, 0.08);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.join-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px 0 rgba(0, 70, 100, 0.12);
}

.join-step__num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    background: #094764;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    /* Solid brand navy with a soft drop shadow. The old navy->#69A3C4
     * gradient + light-blue glow ring read as a generic SaaS badge. */
    box-shadow: 0 6px 16px rgba(9, 71, 100, 0.18);
}

.join-step__title {
    color: #004664;
    margin: 0 0 12px;
}

.join-step__desc {
    color: #363636;
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}

/* The quote / "Most applications are reviewed within 2 weeks." card
 * directly under the steps. The legacy template wrapped this in
 * `.call-to-action.style2.alt` which added a CSS-triangle notch via
 * `.corner_shape`. The new wrapper is a plain rounded card. */
.join-quote {
    background: #fff;
    border-radius: 24px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 4px 18px 0 rgba(0, 70, 100, 0.08);
    max-width: 880px;
    margin: 48px auto 0;
}

.join-quote__inner {
    color: #363636;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.6;
}

.join-quote__inner em {
    display: block;
    margin-bottom: 24px;
}

.join-quote .cta-btn {
    margin: 8px auto 0;
    /* Without this the button inherits .join-quote__inner's 25.6px line-height,
     * inflating the pill to ~72px and pushing the arrow icon above the label.
     * line-height:1 collapses both flex items to their glyph height so the
     * label and the circle-arrow sit on one optical center. */
    line-height: 1;
}

.join-quote .cta-btn em {
    /* Reset the .join-quote__inner em rule (display:block; margin-bottom:24px),
     * which is meant for the italic quote and otherwise leaks onto the button's
     * circle-arrow icon — inflating the pill and lifting the icon off the label. */
    display: inline-block;
    margin: 0 0 0 10px;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .join-quote {
        margin-top: 36px;
    }
}

@media (max-width: 575.98px) {
    .join-step {
        padding: 24px 20px;
    }

    .join-step__num {
        width: 48px;
        height: 48px;
        font-size: 18px;
        margin-bottom: 16px;
    }
}

/* ============================================================
 * AGENT-E: faq-with-image — drop notch, normalize image sizing
 * ============================================================
 * The "But What If..." block previously rendered its image with the
 * legacy .image-shape-wrapper treatment (60px corner radius plus a
 * decorative white-corner overlay PNG — the "notch"). That overlay
 * has been retired site-wide. This rule set gives the image a clean
 * rounded-rectangle container that fills its column width and uses
 * object-fit: cover so any source aspect crops gracefully. The
 * portrait 4/5 aspect ratio at desktop keeps the image height close
 * to the FAQ column's natural height when 4-6 questions are listed.
 */
.faq-with-image__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    background: #f1f2ef;
}

.faq-with-image__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

@media (max-width: 767.98px) {
    .faq-with-image__media {
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        margin-bottom: 30px;
    }
}
/* end AGENT-E */

/* ============================================================
 * AGENT-F: How to Join v2 — bg notch removal + design refresh
 * ------------------------------------------------------------
 * Builds on the .join-step / .join-quote rules above (commit 16fbb8a).
 *
 * Changes:
 *  - .join_bg now renders a clean rectangle with a subtle radius
 *    (was a 100px pill that read as a "notch" against the page).
 *  - .join-section: the two decorative corner shape <img>s were
 *    removed from the template; nothing else needed here.
 *  - .join-step gets a tighter visual hierarchy: number badge sits
 *    in a navy chip with a thin ring, title gains tracking, body
 *    leads with a left-aligned read for desktop while the chip
 *    stays centered above. A static chevron sits BETWEEN cards on
 *    desktop (after each step except the last), in muted blue.
 *    No animation — feedback said the moving connector was the
 *    problem in the first place.
 *  - .join-quote gains a thin top accent in BBI muted blue to feel
 *    like a deliberate "closing" element under the 4 steps.
 * ============================================================ */

.join-section .join_bg {
    border-radius: 24px;
}

@media (max-width: 991.98px) {
    .join-section .join_bg {
        border-radius: 20px;
    }
}

@media (max-width: 575.98px) {
    .join-section .join_bg {
        border-radius: 16px;
    }
}

/* Card refinement — subtle navy border replaces the soft-only shadow
 * so each card reads as deliberate rather than floating. Slight lift
 * on hover. No transforms beyond a 2px nudge. */
.join-step {
    border: 1px solid rgba(0, 70, 100, 0.08);
    box-shadow: 0 2px 10px 0 rgba(0, 70, 100, 0.06);
    padding-top: 36px;
}

.join-step:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 70, 100, 0.16);
    box-shadow: 0 10px 26px 0 rgba(0, 70, 100, 0.10);
}

/* Number badge: solid brand navy with a soft drop shadow. The earlier
 * white + muted-blue "stamp" rings leaned on the #69A3C4 AI-blue accent;
 * a plain navy disc reads cleaner and on-brand. */
.join-step__num {
    background: #094764;
    color: #fff;
    box-shadow: 0 6px 16px rgba(9, 71, 100, 0.18);
    font-family: var(--font-family-base, inherit);
    font-size: 18px;
    letter-spacing: 0.06em;
    margin-bottom: 22px;
}

.join-step__title {
    letter-spacing: 0.02em;
}

.join-step__desc {
    color: #4a4a4a;
}

/* Connector chevrons between step cards removed: the dashed muted-blue line
 * with a chevron read as a weak, generic accent in the gutter. The 01-04
 * badges already carry the sequence, so the cards stand as a clean numbered
 * row. (Re-add a single solid connector here later if a stepper look is wanted.) */

/* Quote card — plain rounded card. The 3px muted-blue top accent stripe was an
 * AI-style edge accent and has been removed; the card's shadow defines it. */
.join-quote {
    position: relative;
}

/* end AGENT-F */

/* ============================================================
 * AGENT-D: Membership bg alternation
 *
 * The Membership page (post 411) already alternates gray/white across
 * its visible blocks once the text-marquee removal lands. The one
 * visual oddity is the icon-timeline block ("How to Join"): its outer
 * <section> bg defaults to white but its child .join_bg panel fills
 * 100% of the section with #F1F1F1 and rounded 100px corners. On a
 * white-flanked page that reads as "a gray card floating in a white
 * section" — fine in isolation, awkward in an alternation cascade
 * because the section's top and bottom edges reveal ~100px white
 * slivers where the gray panel rounds inward.
 *
 * On /membership/ we want this slot to read as a flat gray block in
 * the cascade, not a contained card. Setting the section bg to match
 * the inner panel hides the rounded-corner slivers and the section
 * reads as a contiguous gray slot, matching its neighbors above and
 * below (criteria-stats white -> icon-timeline gray -> faq-with-image
 * white). On other pages where icon-timeline is single-use today only
 * Membership uses it, so the page-scoped selector is enough.
 *
 * Final cascade target on /membership/ (top to bottom, excluding hero,
 * removed text-marquee, and transparent footer-cta):
 *   feature-cards          white
 *   membership-accordion   gray  (bg_light on v2/else branch)
 *   process-timeline       white
 *   testimonials-grid      gray  (bg_light)
 *   criteria-stats         white (bg_white)
 *   icon-timeline          gray  (rule below unifies section + panel)
 *   faq-with-image         white
 *   faq-accordion          gray  (bg_light)
 *
 * No new utility classes invented. Color value mirrors the existing
 * .join_bg fill (#F1F1F1) so the section flows seamlessly into the
 * gray panel.
 * ============================================================ */
body.page-id-411 .block-icon-timeline > section.content-area {
    background: #F1F1F1;
}
/* end AGENT-D */

/* ============================================================
 * Membership hero — soften the flat overlay "color bar"
 * ------------------------------------------------------------
 * The shared hero stacks a flat 40% black .hero-area::after on top of
 * the top-darkening .page-banner-area::before gradient, so the upper
 * band of the banner reads as a flat dark slab with the nav floating
 * on it (the "AI color bar"). Scoped to /membership/: drop the
 * top-darkening band and swap the flat black for a navy-tinted
 * vertical scrim — the photo reads at the top, the centered white
 * headline stays legible, and the wash is the brand navy, not gray.
 * Other pages keep the global hero treatment.
 * ============================================================ */
body.page-id-411 .hero-area.page-banner-area::before {
    display: none;
}
body.page-id-411 .hero-area.page-banner-area::after {
    background: linear-gradient(180deg, rgba(9, 71, 100, 0.18) 0%, rgba(9, 71, 100, 0.48) 52%, rgba(9, 71, 100, 0.62) 100%);
    opacity: 1;
}

/* ============================================================
 * Pre-launch guard: placeholder-video ribbon
 * ------------------------------------------------------------
 * Any testimonial card whose video URL still points at the
 * intro-video placeholder YouTube ID (D8kHqe5k2NI) gets a loud
 * red ribbon overlay. The PHP template emits
 * `.is-placeholder-video` on the card wrapper plus a
 * `.placeholder-warning-ribbon` div with the label text. The
 * ribbon disappears the moment the editor swaps in a real URL.
 * Styled to be deliberately impossible to miss during QA so the
 * site can't ship with stock video sneaking through.
 * ============================================================ */
.review-video-box.is-placeholder-video {
    position: relative;
    outline: 3px solid #dc2626;
    outline-offset: -3px;
}

.placeholder-warning-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 10px 12px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ============================================================
 * GENERIC AWAITING-FROM-HOLLIS PLACEHOLDER WARNING
 * ------------------------------------------------------------
 * Any element wrapped in `.awaiting-hollis-asset` gets a red
 * outline + corner badge so it's impossible to miss during QA
 * but the page underneath still renders (doesn't break the
 * site or its layout). The badge label reads from the
 * data-awaiting attribute, e.g.
 *   <div class="awaiting-hollis-asset" data-awaiting="Topic
 *        testimonial video"> ... </div>
 * Use this on every placeholder asset (testimonial videos,
 * member photos, event hero photos, team photos, Dan Martell
 * clip, hero photo, etc.) so launch QA can sweep every one.
 *
 * Sub-class .awaiting-hollis-asset--inline keeps the badge
 * inline (no absolute positioning) for tighter containers.
 * .awaiting-hollis-asset--corner pins to top-right (default).
 * ============================================================ */
.awaiting-hollis-asset {
    position: relative;
    outline: 3px solid #dc2626;
    outline-offset: -3px;
}

.awaiting-hollis-asset::after {
    content: "AWAITING HOLLIS" attr(data-awaiting-suffix);
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    padding: 4px 10px;
    background: #dc2626;
    color: #fff;
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

/* Variant that uses data-awaiting for the WHOLE label (instead of
 * the default "AWAITING HOLLIS" prefix + suffix). For times when
 * a different leading word is wanted, e.g. "AWAITING CHRIS" or
 * "PLACEHOLDER PHOTO".  */
.awaiting-hollis-asset.awaiting-hollis-asset--custom::after {
    content: attr(data-awaiting);
}

/* =============================================================
 * OFFER PAGE REDESIGN (body.offer-squeeze scoped, page 589 + 628)
 * -------------------------------------------------------------
 * Scope is the squeeze body class only so other pages using these
 * same blocks (why-join-grid, testimonials-tabs) keep their
 * existing treatment. Copy is unchanged — visual treatment only.
 *
 * Direction (per Chris): mix Editorial Founder Letter + Mountain
 * Lodge Premium + Modern Editorial Minimalism. The "big blue
 * boxes" of the why-join-grid become a light editorial card grid
 * with large Sportfield numerals. Testimonials become a dark-navy
 * accent section so they read as the social-proof anchor instead
 * of competing with everything else for color attention. Hero
 * gets more breathing room and crisper hierarchy.
 *
 * Reference live site offer.babybathwater.com uses bg-gray-50 for
 * why-join and bg-[#0D3554] for testimonials. This redesign brings
 * the dev site in line with that pattern without porting Tailwind.
 * ============================================================= */

/* HERO — more whitespace, lighter overlay, primary CTA centered.
 * The dark hero photo stays (Chris hasn't picked a replacement);
 * lighten the bottom-edge curve so the H1 doesn't crash into the
 * Why-Join section below. */
body.offer-squeeze .hero-area {
    padding-top: 140px;
    padding-bottom: 200px;
}
body.offer-squeeze .hero-area .hero-text {
    max-width: 720px;
    margin: 0 auto;
}
body.offer-squeeze .hero-area .hero-text .h1,
body.offer-squeeze .hero-area .hero-text h1 {
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1.05;
    margin-bottom: 24px;
}
body.offer-squeeze .hero-area .hero-text .description,
body.offer-squeeze .hero-area .hero-text p {
    font-size: 19px;
    line-height: 1.55;
    margin-bottom: 36px;
    opacity: 0.92;
}
body.offer-squeeze .hero-area::after {
    opacity: 0.55; /* slightly darker overlay so the H1 reads */
}

/* WHY-JOIN-GRID — Direction A/C mix. Replace the dark blue cards
 * with light editorial cards on a warm-gray section background.
 * Each card gets a large Sportfield numeral (01-06) above the
 * title, a thin top border, and generous internal padding. Reads
 * as a magazine spread rather than a feature-list. */
body.offer-squeeze .block-why-join-grid section.content-area {
    background: #F7F8F7; /* echoes bg_light */
    padding: 100px 0 110px;
}
body.offer-squeeze .block-why-join-grid .section-heading {
    margin-bottom: 64px;
}
body.offer-squeeze .block-why-join-grid .row > [class*="col-"] {
    margin-top: 28px;
}
body.offer-squeeze .icon-teaser.style1 {
    background: #FFFFFF;
    color: #094764;
    border-radius: 18px;
    border: 1px solid rgba(9, 71, 100, 0.10);
    box-shadow: 0 14px 36px -22px rgba(9, 71, 100, 0.22);
    padding: 40px 28px 36px;
    text-align: left;
    height: calc(100% - 28px);
    position: relative;
    counter-increment: why-join-counter;
}
body.offer-squeeze .block-why-join-grid .row {
    counter-reset: why-join-counter;
}
body.offer-squeeze .icon-teaser.style1::before {
    content: counter(why-join-counter, decimal-leading-zero);
    display: block;
    font-family: "Sportfield Varsity", "Source Serif Pro", Georgia, serif;
    font-size: 56px;
    line-height: 1;
    color: #094764;
    opacity: 0.18;
    margin-bottom: 8px;
}
body.offer-squeeze .icon-teaser.style1 .icon {
    margin-bottom: 18px;
}
body.offer-squeeze .icon-teaser.style1 .icon img {
    min-height: 0;
    height: 44px;
    width: auto;
    margin: 0;
    opacity: 0.85;
    filter: none;
}
body.offer-squeeze .icon-teaser.style1 .text h3,
body.offer-squeeze .icon-teaser.style1 .text .h5 {
    color: #094764;
    text-transform: none;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 12px;
    font-weight: 700;
}
body.offer-squeeze .icon-teaser.style1 .text p,
body.offer-squeeze .icon-teaser.style1 .text {
    color: #41525d;
    font-size: 16px;
    line-height: 1.6;
}

/* TESTIMONIALS-TABS — Direction A mix. Dark navy section so the
 * social proof anchors the page. Quote treatment becomes the
 * primary signal (large pull-quote serif), with the video tab
 * heads acting as small selectors below. */
body.offer-squeeze .block-testimonials-tabs .h-tab-area,
body.offer-squeeze .block-testimonials-tabs section.h-tab-area {
    background: #0D3554;
    color: #FFFFFF;
    padding: 110px 0;
}
body.offer-squeeze .block-testimonials-tabs h2,
body.offer-squeeze .block-testimonials-tabs .h2 {
    color: #FFFFFF;
}
body.offer-squeeze .block-testimonials-tabs .heading-shape {
    filter: brightness(0) invert(1);
    opacity: 0.5;
}

/* Why-join section heading: drop ALL-CAPS, restyle as editorial */
body.offer-squeeze .block-why-join-grid .section-heading .h2,
body.offer-squeeze .block-why-join-grid .section-heading h2 {
    text-transform: none;
    font-family: "Sportfield Varsity", "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: clamp(36px, 4.2vw, 54px);
    line-height: 1.1;
    color: #094764;
}

/* Mobile: less aggressive padding so the long card grid fits */
@media (max-width: 767px) {
    body.offer-squeeze .hero-area {
        padding-top: 100px;
        padding-bottom: 130px;
    }
    body.offer-squeeze .block-why-join-grid section.content-area {
        padding: 64px 0 70px;
    }
    body.offer-squeeze .icon-teaser.style1 {
        padding: 32px 22px 28px;
    }
    body.offer-squeeze .icon-teaser.style1::before {
        font-size: 44px;
    }
    body.offer-squeeze .block-testimonials-tabs section.h-tab-area {
        padding: 70px 0;
    }
}

/* ============================================================
 * AGENT-M3: Mobile fixes — 4ocean / Press / People / Core Values / Secret to Success
 *
 * Five reference pages all hit two structural mobile bugs:
 *
 *  (1) .testimonial-banner heroes are pinned to height:370px from 991px
 *      down (style.css:6602). When hero description copy is long
 *      (Core Values worst offender), the hero-text spills below the
 *      dark hero-bg into the white body — the dark overlay ends but
 *      text continues. Fix: let the testimonial hero grow on phones,
 *      keeping the 370px floor as a min-height for visual presence.
 *
 *  (2) The hero H1 has no word-break safety net. At 375px the word
 *      "ENTREPRENEURIAL" (People page) renders 359px wide at 40px,
 *      kissing the container edge. Adjacent long words (e.g. on
 *      other pages later) would push past it. Fix: allow soft hyphens
 *      via overflow-wrap on hero H1s at narrow widths only.
 *
 * Plus two convention-parity items that aren't strictly mobile bugs
 * but make the page feel cohesive with Home / Membership: the
 * image-text-advanced H2 was missing the heading-shape divider, and
 * testimonials-grid / intro-video were emitting a stray divider when
 * the heading field is empty (handled in the PHP templates, not here).
 *
 * Scoped narrowly: rules target the page-banner-area hero variants
 * and the affected block class hooks only. No utility overrides.
 * ============================================================ */

/* (1) Let testimonial-style hero grow with content on narrow screens.
 *     Desktop rule at line 482 sets height:670px; tablet rule at line
 *     6602 pins it at 370px. Both lock the hero, so any description
 *     longer than 4 short lines bleeds out the bottom of the dark bg.
 *     Switching to min-height keeps the visual presence of a 370px
 *     "stage" without trapping the text inside it. */
@media (max-width: 991px) {
    .hero-area.page-banner-area.testimonial-banner {
        height: auto;
        min-height: 370px;
        /* Re-add bottom padding so the .hero-corner shape (35px tall
         * at the 80px clamp floor) doesn't sit on top of the last
         * line of copy. Page-banner-area's mobile padding-bottom:110px
         * rule still wins at <=767px; this is the 768-991 fallback. */
        padding-bottom: 80px;
    }
}

@media (max-width: 767px) {
    .hero-area.page-banner-area.testimonial-banner {
        /* Match the page-banner-area mobile padding-bottom so the
         * corner shape clears the copy on phones too. */
        padding-bottom: 110px;
    }
}

/* (2) Hero H1 long-word safety. At 375px the 40px Sportfield font
 *     renders single long words near the container edge — without
 *     overflow-wrap they'd visibly clip past the dark hero. Apply
 *     only inside the hero so body copy keeps default wrapping. */
@media (max-width: 575px) {
    .hero-area .hero-text h1,
    .hero-area .hero-text .h1 {
        overflow-wrap: break-word;
        word-break: normal;
        /* hyphens kicks in only on browsers that have language hints,
         * so the soft fallback is just the wrap. Keep both. */
        hyphens: auto;
    }
}

/* (3) Make image-text-advanced section headings honor the same
 *     centered-divider convention the editorial pages already use.
 *     The PHP template (template-parts/blocks/image-text-advanced)
 *     also gets a real <img class="heading-shape"> appended this
 *     pass; this rule covers the case where the heading-shape ends
 *     up left-aligned because the column is text-left on mobile.
 *     Keeping it block-scoped so other blocks aren't touched. */
/* Cap the divider at its intrinsic size (the flex text column can otherwise
 * stretch the image full width) and keep it block + left-aligned, since the
 * column is text-left on mobile. Block-scoped so other blocks aren't touched. */
.block-image-text-advanced .content-text .heading-shape {
    display: block;
    margin: 18px 0 24px;
    max-width: 200px;
    height: auto;
}

/* end AGENT-M3 */

/* ------------------------------------------------------------------
 * Offer page (post 589) — squeeze layout.
 *
 * Hides the main navigation menu, the header apply CTA, and (defensively)
 * the breadcrumb hero on the Offer page only. The header logo stays
 * visible. Breadcrumb is already disabled at the data layer via the
 * `disable_breadcrumb` ACF field on this page; this rule is belt-and-
 * braces in case the block-level CTA hero or breadcrumb meta ever
 * toggles back on. Single conversion path = no chrome competing with
 * the hero CTA.
 * ------------------------------------------------------------------ */
body.offer-squeeze .header-area .mainmenu,
body.offer-squeeze .header-area .header-action,
body.offer-squeeze .header-area #menu-toggle,
body.offer-squeeze .breadcrumb-menu {
    display: none !important;
}

/* The hero CTA block emits its own .breadcrumb-menu inside .hero-area.
 * Hide it without collapsing the hero spacing. */
body.offer-squeeze .hero-area .breadcrumb-menu {
    display: none !important;
}

/* ============================================================================
 * OFFER 2 (DRAFT REDESIGN)  --  body.offer-squeeze-v2, page ID 5020
 * ----------------------------------------------------------------------------
 * Bespoke editorial layout for the Offer 2 radical-redesign fork. All
 * rules are scoped to `.offer-squeeze-v2` so they cannot leak into
 * other pages -- including the original Offer 589 / Baja 628 which
 * share the `.offer-squeeze` chrome but keep their existing visuals.
 *
 * Design intent (per the redesign brief):
 *   - Editorial Founder Letter x Mountain Lodge Premium x Modern Minimalism
 *   - Cream / off-white base, BBI navy as accent (no dark-blue washes)
 *   - Sportfield Varsity reserved for the hero H1 ONLY (site convention).
 *     Everything else on the page is Schibsted Grotesk -- Sportfield stays
 *     a single brand moment per page, matching home / membership / 4ocean.
 *   - Schibsted Grotesk for headings, body copy, numerals
 *   - Asymmetric grids, generous negative space, restraint on motion
 *
 * Section index:
 *   1. Tokens, base reset, hero
 *   2. Press strip
 *   3. Proof block
 *   4. Reality (act 3)
 *   5. Solution (act 4)
 *   6. Inclusions (act 5)
 *   7. Pricing wrapper + FAQ
 *   8. Close + buttons + entrance animations
 *   9. Pricing-block visual override (light, editorial) on Offer 2 only
 * ============================================================================ */

/* ---------- 1. Tokens, base reset, hero ---------- */

body.offer-squeeze-v2 {
    /* Retargeted to the site design system (was a bespoke warm-cream /
     * rust editorial palette). Offer 2 now uses the same white / light-gray
     * section cadence and BBI navy as home / membership. */
    --o2-bg:        #fff;       /* site white */
    --o2-bg-soft:   #F7F8F7;    /* site light-gray (.bg_light) for alt sections */
    --o2-ink:       #363636;    /* site body text */
    --o2-ink-soft:  #5f5f5f;    /* muted body text */
    --o2-rule:      #e4e4e4;    /* hairline rule */
    --o2-navy:      #094764;    /* BBI navy */
    --o2-navy-deep: #063a54;    /* deep BBI navy for the one dark section */
    --o2-accent:    #094764;    /* accents/kickers use navy (rust is off-brand) */
    --o2-paper:     #fff;       /* cards on white */

    background: var(--o2-bg);
    color: var(--o2-ink);
    font-family: "Schibsted Grotesk", sans-serif;
}

/* Suppress legacy block chrome that page.php would normally emit but
 * which we are NOT using on the custom template. Defensive in case the
 * template hierarchy ever falls back to page.php. */
body.offer-squeeze-v2 .l-blocks-wrap {
    background: var(--o2-bg);
    position: relative;
    overflow-x: hidden;
}
/* Block wrappers (the composed /offer/ page) get the same stacking the old
 * custom-template sections had, so the close section sits above the rising
 * footer illustration. */
body.offer-squeeze-v2 .l-blocks-wrap > [class*="block-offer-"] {
    position: relative;
    z-index: 1;
}

/* Paper grain via stacked tiny SVG noise. Inline so no extra request. */
body.offer-squeeze-v2 .offer2-page {
    position: relative;
    overflow-x: hidden;
}

/* Paper-grain overlay removed for site alignment (it was a warm-cream
 * texture; the site is flat white). */
body.offer-squeeze-v2 .offer2-page::before {
    display: none;
}

body.offer-squeeze-v2 .offer2-page > section {
    position: relative;
    z-index: 1;
}

body.offer-squeeze-v2 .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* HERO -----------------------------------------------------------
 * Markup is the site-standard `.hero-area` pattern (full-bleed
 * `.hero-bg` photo, bottom-left `.hero-corner` brand mark, centered
 * `.hero-text.text_white`, single `.cta-btn.btn_white`). The H1
 * carries `font_sportfield` -- Sportfield's one moment on the page.
 *
 * The only Offer 2-specific additions below the H1 are the lede
 * paragraph spacing and the at-a-glance signals strip. Both
 * Schibsted Grotesk; numerals are not Sportfield.
 */

/* v2 hero sizing. The 3-sentence H1 is much longer than the short
 * Offer 589 headline, so the shared body.offer-squeeze 78px size
 * overflows the fixed-height hero (.hero-area is height:670px;
 * overflow:hidden) and clips the subhead + CTA. Bring the H1 down so the
 * three beats sit on three clean lines and everything stays inside the
 * box, matching the home / membership hero rhythm. */
body.offer-squeeze-v2 .hero-area .hero-text {
    max-width: 820px;
}

body.offer-squeeze-v2 .hero-area .hero-text .h1,
body.offer-squeeze-v2 .hero-area .hero-text h1 {
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.1;
    margin-bottom: 22px;
}

body.offer-squeeze-v2 .hero-area .hero-text > .offer2-hero__lede {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    color: #fff;
    opacity: 0.92;
    max-width: 600px;
    margin: 0 auto 30px;
}

body.offer-squeeze-v2 .hero-area .hero-text .cta-btn {
    margin-bottom: 0;
}

/* Secondary hero link, matching the site standard .link_text_white
 * ("See upcoming events" on home, "See what's included" on membership):
 * stacked on its own line below the primary CTA, centered. */
body.offer-squeeze-v2 .hero-area .hero-text .offer2-hero__secondary {
    display: block;
    margin-top: 18px;
}

/* ---------- 2. Press strip ---------- */

/* Transparent (no gray stripe, no hard borders) so the hero's curved
 * bottom flows into clean white instead of colliding with a rectangle.
 * Centered to align with the rest of the (centered) page. */
body.offer-squeeze-v2 .offer2-press {
    padding: clamp(30px, 4vw, 52px) clamp(20px, 5vw, 64px) clamp(18px, 3vw, 32px);
    background: transparent;
}

body.offer-squeeze-v2 .offer2-press__container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

body.offer-squeeze-v2 .offer2-press__label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--o2-ink-soft);
}

body.offer-squeeze-v2 .offer2-press__logos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: clamp(28px, 4vw, 60px);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

body.offer-squeeze-v2 .offer2-press__logos li {
    display: flex;
    align-items: center;
}

/* Real press logos, normalized to a quiet monochrome "as featured in"
 * row on the light strip (matches the muted press treatment on the
 * rest of the site). */
body.offer-squeeze-v2 .offer2-press__logos img {
    height: 22px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
}

/* ---------- 3. Proof block ---------- */

body.offer-squeeze-v2 .offer2-proof {
    padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px);
}

body.offer-squeeze-v2 .offer2-proof__container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

body.offer-squeeze-v2 .offer2-proof__kicker {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--o2-accent);
    margin-bottom: 40px;
    font-weight: 500;
}

body.offer-squeeze-v2 .offer2-proof__kicker span {
    margin-right: 8px;
}

body.offer-squeeze-v2 .offer2-proof__quote {
    margin: 0;
    padding: 0;
    border: none;
}

body.offer-squeeze-v2 .offer2-proof__quote p {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(24px, 2.8vw, 36px);
    line-height: 1.3;
    color: var(--o2-ink);
    margin: 0 0 36px;
    letter-spacing: -0.01em;
}

body.offer-squeeze-v2 .offer2-proof__cite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-style: normal;
}

body.offer-squeeze-v2 .offer2-proof__cite-name {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--o2-ink);
    font-weight: 500;
}

body.offer-squeeze-v2 .offer2-proof__cite-detail {
    font-size: 13px;
    color: var(--o2-ink-soft);
    font-style: italic;
}

/* ---------- 4. Reality (act 3) ---------- */

body.offer-squeeze-v2 .offer2-reality {
    background: var(--o2-bg-soft);
    padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 64px);
    border-top: 1px solid var(--o2-rule);
}

body.offer-squeeze-v2 .offer2-reality__container {
    max-width: 1200px;
    margin: 0 auto;
}

body.offer-squeeze-v2 .offer2-reality__h2,
body.offer-squeeze-v2 .offer2-solution__h2,
body.offer-squeeze-v2 .offer2-included__h2,
body.offer-squeeze-v2 .offer2-faq__h2,
body.offer-squeeze-v2 .offer2-close__h2 {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.1;
    color: var(--o2-navy);
    margin: 0 0 20px;
    letter-spacing: -0.015em;
    max-width: 900px;
}

body.offer-squeeze-v2 .offer2-reality__h2 em,
body.offer-squeeze-v2 .offer2-solution__h2 em,
body.offer-squeeze-v2 .offer2-included__h2 em,
body.offer-squeeze-v2 .offer2-faq__h2 em,
body.offer-squeeze-v2 .offer2-close__h2 em {
    color: var(--o2-navy);
    font-style: italic;
}

body.offer-squeeze-v2 .offer2-reality__h2 {
    margin-bottom: 24px;
}

body.offer-squeeze-v2 .offer2-page .heading-shape {
    margin: 0 0 32px;
}

body.offer-squeeze-v2 .offer2-reality__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 5vw, 80px);
    margin-top: 24px;
}

@media (max-width: 800px) {
    body.offer-squeeze-v2 .offer2-reality__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

body.offer-squeeze-v2 .offer2-reality__cell {
    border-top: 2px solid var(--o2-ink);
    padding-top: 24px;
}

body.offer-squeeze-v2 .offer2-reality__num {
    display: block;
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--o2-accent);
    line-height: 1;
    margin-bottom: 16px;
}

body.offer-squeeze-v2 .offer2-reality__cell p {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.55;
    color: var(--o2-ink);
    margin: 0;
}

/* ---------- 5. Solution (act 4) ---------- */

body.offer-squeeze-v2 .offer2-solution {
    padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px);
}

body.offer-squeeze-v2 .offer2-solution__container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 0;
    align-items: start;
}

@media (max-width: 860px) {
    body.offer-squeeze-v2 .offer2-solution__container {
        grid-template-columns: 1fr;
    }
}

body.offer-squeeze-v2 .offer2-solution__eyebrow,
body.offer-squeeze-v2 .offer2-included__eyebrow,
body.offer-squeeze-v2 .offer2-faq__eyebrow {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--o2-accent);
    margin: 0 0 24px;
    grid-column: 1 / -1;
}

body.offer-squeeze-v2 .offer2-solution__h2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

body.offer-squeeze-v2 .offer2-solution .heading-shape {
    grid-column: 1 / -1;
    margin: 16px auto 28px;
}

body.offer-squeeze-v2 .offer2-solution__body p {
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.65;
    color: var(--o2-ink-soft);
    margin: 0 0 20px;
}

body.offer-squeeze-v2 .offer2-solution__pullquote {
    background: var(--o2-paper);
    padding: 40px 36px;
    border-left: 3px solid var(--o2-navy);
    position: relative;
}

body.offer-squeeze-v2 .offer2-solution__pullquote p {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.45;
    color: var(--o2-ink);
    margin: 0 0 20px;
    letter-spacing: -0.005em;
}

body.offer-squeeze-v2 .offer2-solution__pullquote cite {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--o2-ink-soft);
    font-style: normal;
}

/* ---------- 6. Inclusions (act 5) ---------- */

body.offer-squeeze-v2 .offer2-included {
    background: var(--o2-navy-deep);
    color: #ffffff;
    padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px);
    position: relative;
    overflow: hidden;
}

body.offer-squeeze-v2 .offer2-included::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.06), transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(188, 210, 221, 0.06), transparent 50%);
    pointer-events: none;
}

body.offer-squeeze-v2 .offer2-included__container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

body.offer-squeeze-v2 .offer2-included__eyebrow {
    color: #bcd2dd;
}

body.offer-squeeze-v2 .offer2-included__h2 {
    color: #ffffff;
}

body.offer-squeeze-v2 .offer2-included__h2 em {
    color: #bcd2dd;
}

body.offer-squeeze-v2 .offer2-included__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 800px) {
    body.offer-squeeze-v2 .offer2-included__list {
        grid-template-columns: 1fr;
    }
}

body.offer-squeeze-v2 .offer2-included__item {
    display: flex;
    gap: 24px;
    padding: 36px 24px 36px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    align-items: flex-start;
    transition: background 0.25s ease;
}

body.offer-squeeze-v2 .offer2-included__item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding-right: clamp(24px, 4vw, 56px);
}

@media (max-width: 800px) {
    body.offer-squeeze-v2 .offer2-included__item:nth-child(odd) {
        border-right: none;
        padding-right: 0;
    }
}

body.offer-squeeze-v2 .offer2-included__item:nth-child(even) {
    padding-left: clamp(24px, 4vw, 56px);
}

@media (max-width: 800px) {
    body.offer-squeeze-v2 .offer2-included__item:nth-child(even) {
        padding-left: 0;
    }
}

body.offer-squeeze-v2 .offer2-included__num {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #bcd2dd;
    line-height: 1;
    flex-shrink: 0;
    min-width: 40px;
    padding-top: 6px;
}

body.offer-squeeze-v2 .offer2-included__copy h3 {
    font-family: "Schibsted Grotesk", sans-serif;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 600;
    margin: 0 0 12px;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

body.offer-squeeze-v2 .offer2-included__copy p {
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

body.offer-squeeze-v2 .offer2-included__close {
    text-align: center;
    margin: 48px 0 0;
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.35;
    color: #ffffff;
}

body.offer-squeeze-v2 .offer2-included__close em {
    color: #bcd2dd;
    font-style: italic;
}

/* ---------- 7. Pricing wrapper + FAQ ---------- */

body.offer-squeeze-v2 .offer2-pricing-wrap {
    padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px);
    background: var(--o2-bg);
}

body.offer-squeeze-v2 .offer2-pricing-wrap__container {
    max-width: 1200px;
    margin: 0 auto;
}

body.offer-squeeze-v2 .offer2-faq {
    padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 64px);
    background: var(--o2-bg-soft);
    border-top: 1px solid var(--o2-rule);
}

body.offer-squeeze-v2 .offer2-faq__container {
    max-width: 880px;
    margin: 0 auto;
}

body.offer-squeeze-v2 .offer2-faq__list {
    margin-top: 16px;
    border-top: 1px solid var(--o2-rule);
}

body.offer-squeeze-v2 .offer2-faq__item {
    border-bottom: 1px solid var(--o2-rule);
}

body.offer-squeeze-v2 .offer2-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: color 0.2s ease;
}

body.offer-squeeze-v2 .offer2-faq__item summary::-webkit-details-marker {
    display: none;
}

body.offer-squeeze-v2 .offer2-faq__q {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 600;
    color: var(--o2-ink);
    line-height: 1.35;
    letter-spacing: -0.005em;
    flex: 1;
}

body.offer-squeeze-v2 .offer2-faq__toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
}

body.offer-squeeze-v2 .offer2-faq__toggle::before,
body.offer-squeeze-v2 .offer2-faq__toggle::after {
    content: "";
    position: absolute;
    background: var(--o2-navy);
    transition: transform 0.25s ease;
}

body.offer-squeeze-v2 .offer2-faq__toggle::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    transform: translateY(-50%);
}

body.offer-squeeze-v2 .offer2-faq__toggle::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
}

body.offer-squeeze-v2 .offer2-faq__item[open] .offer2-faq__toggle::after {
    transform: translateX(-50%) scaleY(0);
}

body.offer-squeeze-v2 .offer2-faq__item[open] .offer2-faq__q {
    color: var(--o2-navy);
}

body.offer-squeeze-v2 .offer2-faq__a {
    padding: 0 0 28px;
    max-width: 700px;
}

body.offer-squeeze-v2 .offer2-faq__a p {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    color: var(--o2-ink-soft);
    margin: 0;
}

/* ---------- 8. Close + buttons + entrance animations ---------- */

body.offer-squeeze-v2 .offer2-close {
    /* Round 2: close-section padding tightened. Previously the page
     * ended with a `clamp(80px, 12vw, 160px)` block which felt like a
     * giant empty gap on tall viewports (Chris feedback). Standard
     * site rhythm is closer to 70-100px end padding. */
    padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 64px) clamp(50px, 6vw, 80px);
    text-align: center;
    background: var(--o2-bg);
}

body.offer-squeeze-v2 .offer2-close__container {
    max-width: 720px;
    margin: 0 auto;
}

body.offer-squeeze-v2 .offer2-close__h2 {
    margin: 0 auto 28px;
}

body.offer-squeeze-v2 .offer2-close .heading-shape {
    margin: 0 auto 36px;
}

body.offer-squeeze-v2 .offer2-close__lede {
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.6;
    color: var(--o2-ink-soft);
    max-width: 560px;
    margin: 0 auto 44px;
}

body.offer-squeeze-v2 .offer2-close__sig {
    margin: 36px 0 0;
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--o2-ink);
    line-height: 1.55;
}

body.offer-squeeze-v2 .offer2-close__sig span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--o2-ink-soft);
    margin-top: 8px;
    font-family: "Schibsted Grotesk", sans-serif;
}

/* Buttons. Single source of truth for Offer 2 CTAs. */
body.offer-squeeze-v2 .offer2-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    font-family: "Schibsted Grotesk", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
}

body.offer-squeeze-v2 .offer2-btn--primary {
    background: var(--o2-ink);
    color: var(--o2-bg);
}

body.offer-squeeze-v2 .offer2-btn--primary:hover {
    background: var(--o2-navy);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(9, 71, 100, 0.25);
}

body.offer-squeeze-v2 .offer2-btn--primary:focus-visible {
    outline: 2px solid var(--o2-accent);
    outline-offset: 3px;
}

body.offer-squeeze-v2 .offer2-btn--xl {
    padding: 22px 40px;
    font-size: 16px;
}

body.offer-squeeze-v2 .offer2-btn__arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 18px;
    line-height: 1;
}

body.offer-squeeze-v2 .offer2-btn:hover .offer2-btn__arrow {
    transform: translateX(4px);
}

/* Page-load reveal -- restraint per brief. One orchestrated cascade,
 * 600ms total, then nothing. Disabled for reduced-motion users. */
@keyframes offer2FadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.offer-squeeze-v2 .hero-area .hero-text .h1,
body.offer-squeeze-v2 .hero-area .hero-text .offer2-hero__lede,
body.offer-squeeze-v2 .hero-area .hero-text .cta-btn,
body.offer-squeeze-v2 .hero-area .hero-text .offer2-hero__secondary {
    animation: offer2FadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

body.offer-squeeze-v2 .hero-area .hero-text .h1               { animation-delay: 0.10s; }
body.offer-squeeze-v2 .hero-area .hero-text .offer2-hero__lede { animation-delay: 0.25s; }
body.offer-squeeze-v2 .hero-area .hero-text .cta-btn          { animation-delay: 0.38s; }
body.offer-squeeze-v2 .hero-area .hero-text .offer2-hero__secondary { animation-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    body.offer-squeeze-v2 [class^="offer2-"],
    body.offer-squeeze-v2 [class*=" offer2-"] {
        animation: none !important;
        transition: none !important;
    }
}

/* Site-wide reduced-motion guard. Cuts the decorative, infinitely-looping
 * animations that run on every page for users who ask for reduced motion
 * (WCAG 2.2.2 Pause/Stop/Hide, 2.3.3 Animation from Interactions): the
 * footer cloud drift + bird fly cycles, the bobbing chat-bubble tags, the
 * process-timeline "vibrate" pulse, and the scroll-down arrow. The arrow's
 * resting state is opacity:0 (its keyframe fades it in), so it is held
 * visible rather than allowed to vanish once the animation is removed. */
@media (prefers-reduced-motion: reduce) {
    .cloud1, .cloud2, .cloud3, .cloud4,
    .bird, .bird-container,
    .mockup-tags,
    .process-timeline-wrapper .item.in-view:last-child .timeline-box::before,
    .scroll-down .arrow {
        animation: none !important;
    }

    .scroll-down .arrow {
        opacity: 1 !important;
    }
}

/* ---------- 9. Pricing-block visual override (Offer 2 only) ----------
 * The membership-pricing block template is NOT modified per the brief.
 * We restyle its rendered markup via CSS scoped under
 * `.offer-squeeze-v2 .offer2-pricing-wrap` so the cards match the warm
 * cream / navy editorial palette. The Pixel Chefs annual_button /
 * annual_expire_button swap (driven by the count-down block global
 * flag) continues to work unchanged because we only touch presentation,
 * not the PHP template or the swap logic. */

body.offer-squeeze-v2 .offer2-pricing-wrap .block-membership-pricing,
body.offer-squeeze-v2 .offer2-pricing-wrap section.content-area {
    background: transparent !important;
    padding: 0 !important;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .heading-shape {
    margin: 24px auto 48px;
}

/* Hide block-emitted breadcrumb chrome that may be inside acf/cta hero
 * blocks rendered through the_content (defensive). */
body.offer-squeeze-v2 .offer2-pricing-wrap .breadcrumb-menu {
    display: none !important;
}

/* Section heading copy inside the pricing block: drop the all-caps shout
 * and lean on the Schibsted Grotesk sentence-case treatment used across
 * the rest of the Offer 2 chrome. */
body.offer-squeeze-v2 .offer2-pricing-wrap .section-heading h2 {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
    color: var(--o2-ink);
    letter-spacing: -0.015em;
    text-transform: none;
    margin: 0 auto 16px;
    max-width: 640px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .section-heading p {
    color: var(--o2-ink-soft);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 12px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .section-heading p strong {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--o2-accent);
    font-weight: 600;
    display: inline-block;
    margin-top: 8px;
}

/* The card itself. Warm cream surface, navy hairline, generous radius. */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box {
    background: var(--o2-paper);
    border: 1px solid var(--o2-rule);
    border-radius: 18px;
    padding: 36px 32px;
    color: var(--o2-ink);
    box-shadow: 0 1px 0 rgba(9, 71, 100, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Featured (active) card: subtle elevation + navy stroke, NOT a dark
 * fill. Keeps the warm palette consistent with the rest of the page. */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active {
    background: var(--o2-paper);
    color: var(--o2-ink);
    border: 1.5px solid var(--o2-navy);
    box-shadow: 0 14px 32px rgba(9, 71, 100, 0.10);
    transform: translateY(-2px);
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .title,
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .title small,
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .pay-type {
    color: var(--o2-ink);
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .title small {
    opacity: 0.6;
}

/* Top label row */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .pay-type {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--o2-navy);
}

/* "Most Popular" badge: warm rust on cream */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .payment-tag {
    background: var(--o2-accent);
    color: #fff;
    border: none;
    padding: 6px 12px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    margin: 0;
    line-height: 1.2;
}

/* Price. Sportfield restraint rule: keep numerals in Schibsted Grotesk
 * (per Round 1 audit; Sportfield only appears once on the page, on the
 * hero H1). */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .price-wrapper {
    margin: 16px 0 18px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .title {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--o2-ink);
    line-height: 1;
    margin: 0;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .title small {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--o2-ink-soft);
    text-transform: none;
    margin-left: 4px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .content {
    color: var(--o2-ink-soft);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 24px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .content p {
    margin: 0;
}

/* Button inside the pricing card: standard .cta-btn family already
 * comes from the block template. We keep .btn_white but ensure it
 * reads well on the cream card (the default white-on-white was the
 * Round 1 problem). Switch to btn_default-style colors when the card
 * is active. */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .cta-btn {
    border-color: var(--o2-navy);
    background: transparent;
    color: var(--o2-navy);
    width: 100%;
    margin-top: 8px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .cta-btn::after {
    background: var(--o2-navy);
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box .cta-btn:hover {
    color: #fff;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .cta-btn {
    background: var(--o2-navy);
    color: #fff;
    border-color: var(--o2-navy);
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .cta-btn::after {
    background: #fff;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .cta-btn:hover {
    color: var(--o2-navy);
}

/* Footer note below the two cards (timeline-notes wrapper). Tighten
 * spacing and warm the color so it reads as part of the editorial flow
 * rather than a generic block footer. */
body.offer-squeeze-v2 .offer2-pricing-wrap .timeline-notes {
    margin-top: 40px;
    color: var(--o2-ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .timeline-notes img {
    display: none;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .timeline-notes .inner {
    max-width: 640px;
    margin: 0 auto;
}

/* Count-down block (when present on a forked Offer 2 variant with
 * an active bonus): tone the navy widget so it harmonizes with the
 * cream surface instead of fighting it. Scoped tightly so the base
 * /offer/ pages keep their existing treatment. */
body.offer-squeeze-v2 .offer2-pricing-wrap .countdown-widget-box {
    background: var(--o2-navy);
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(9, 71, 100, 0.18);
    margin-top: 48px;
    padding: 36px 32px;
}

body.offer-squeeze-v2 .offer2-pricing-wrap .time {
    background: var(--o2-navy);
    box-shadow: 0 8px 20px rgba(9, 71, 100, 0.18);
    border-radius: 12px;
}

/* Mobile: stack the two pricing cards with a sensible gap. The block's
 * default Bootstrap grid handles the column collapse; we just need a
 * little vertical breathing room between them. */
@media (max-width: 575px) {
    body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box {
        margin-bottom: 20px;
        padding: 28px 24px;
    }
}

/* ---------- 10. Curves / flow + gold accent ----------
 * The production offer page (offer.babybathwater.com) speaks a softer,
 * curve-driven language than the rigid editorial grid this fork started
 * with: rounded cards, soft navy-tinted shadows, pill buttons, curved
 * section bottoms, and a gold accent for eyebrows + the bonus. These
 * overrides sit last so they win. The full hot-lead restructure (section
 * reorder + post-event hook + the count-down bonus section) is a separate
 * pass tracked in LAUNCH-CHECKLIST.md. */
body.offer-squeeze-v2 {
    --o2-gold:        #826B2A;   /* gold accent on light (sampled from offer page) */
    --o2-gold-bright: #C9A24A;   /* brighter gold on dark sections */
    --o2-soft-shadow: 0 4px 20px rgba(13, 53, 84, 0.12);
}

/* Eyebrows go gold (were navy) -- matches the offer page. */
body.offer-squeeze-v2 .offer2-proof__kicker,
body.offer-squeeze-v2 .offer2-solution__eyebrow,
body.offer-squeeze-v2 .offer2-faq__eyebrow {
    color: var(--o2-gold);
}
body.offer-squeeze-v2 .offer2-included__eyebrow {
    color: var(--o2-gold-bright);
}

/* Soften the pricing cards with the offer-page shadow (radius already 18px). */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box {
    box-shadow: var(--o2-soft-shadow);
}

/* --- Card-ify the rigid grids: the "squares and lines everywhere" was
 * hairline-bordered grids. Replace with rounded, soft-shadowed cards
 * separated by gaps -> the curve/flow language of the offer page. --- */

/* Inclusions: rounded cards on the dark section, not a hairline grid. */
body.offer-squeeze-v2 .offer2-included__list {
    border-top: none !important;
    gap: 18px;
}
body.offer-squeeze-v2 .offer2-included__item,
body.offer-squeeze-v2 .offer2-included__item:nth-child(odd),
body.offer-squeeze-v2 .offer2-included__item:nth-child(even) {
    border: none !important;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 28px 26px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

/* Reality: soft rounded white cards instead of hard 2px top rules. */
body.offer-squeeze-v2 .offer2-reality__cell {
    border-top: none;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--o2-soft-shadow);
    padding: 30px 26px;
}

/* FAQ: rounded soft cards instead of hairline rows. */
body.offer-squeeze-v2 .offer2-faq__list {
    border-top: none;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.offer-squeeze-v2 .offer2-faq__item {
    border-bottom: none;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--o2-soft-shadow);
    padding: 0 24px;
}
body.offer-squeeze-v2 .offer2-faq__item summary {
    padding: 22px 0;
}
body.offer-squeeze-v2 .offer2-faq__a {
    padding: 0 0 24px;
}

/* Pricing: the active (annual) card becomes a navy fill with a gold
 * primary button -> matches the offer page's annual card; the monthly
 * card stays a light card with a navy outline button. */
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active {
    background: var(--o2-navy) !important;
    box-shadow: 0 18px 40px rgba(13, 53, 84, 0.22);
}
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .title,
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .title small,
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .pay-type,
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .content,
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .content p {
    color: #fff !important;
}
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .payment-tag {
    background: #fff !important;
    color: var(--o2-navy) !important;
}
body.offer-squeeze-v2 .offer2-pricing-wrap .pricing-box.active .cta-btn {
    background: var(--o2-gold-bright) !important;
    border-color: var(--o2-gold-bright) !important;
    color: #14202b !important;
}

/* ---------- 11. Imagery (punch up a text-heavy page) ---------- */

/* The Scene: a clean "this is the room" section. Heading sits on a solid
 * background (readable), then ONE clean community photo below (never text
 * layered over a busy crowd shot). Eyebrow + heading use the SAME sizes
 * and colors as every other section -- no bespoke type. */
body.offer-squeeze-v2 .offer2-scene {
    padding: clamp(48px, 6vw, 90px) clamp(20px, 5vw, 64px);
    background: var(--o2-bg-soft);
    text-align: center;
}
body.offer-squeeze-v2 .offer2-scene__container {
    max-width: 1080px;
    margin: 0 auto;
}
body.offer-squeeze-v2 .offer2-scene__eyebrow {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--o2-gold);
    margin: 0 0 16px;
}
body.offer-squeeze-v2 .offer2-scene__h2 {
    font-family: "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--o2-navy);
    max-width: 820px;
    margin: 0 auto 20px;
}
body.offer-squeeze-v2 .offer2-scene__h2 em {
    color: var(--o2-navy);
    font-style: italic;
}
body.offer-squeeze-v2 .offer2-scene__photo {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 2;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--o2-soft-shadow);
    margin: 6px 0 0;
}
body.offer-squeeze-v2 .offer2-scene__caption {
    margin: 22px auto 0;
    max-width: 620px;
    color: var(--o2-ink-soft);
    font-size: 17px;
    line-height: 1.55;
}
@media (max-width: 700px) {
    body.offer-squeeze-v2 .offer2-scene__photo {
        aspect-ratio: 4 / 3;
    }
}

/* Quote mark above the member proof quote. */
body.offer-squeeze-v2 .offer2-proof__mark {
    display: block;
    width: 46px;
    height: auto;
    margin: 0 auto 20px;
    opacity: 0.5;
}

/* Duck flock taking flight above the close -> "make it official". Subtle. */
body.offer-squeeze-v2 .offer2-close__ducks {
    display: block;
    width: min(300px, 64%);
    height: auto;
    margin: 0 auto 28px;
    opacity: 0.35;
}

/* ---------- 12. Tighter vertical rhythm ----------
 * The clamp maxes (140-160px top AND bottom) left every section feeling
 * empty and stretched. One consistent, tighter scale (~90px desktop max)
 * across the content sections. */
body.offer-squeeze-v2 .offer2-proof,
body.offer-squeeze-v2 .offer2-reality,
body.offer-squeeze-v2 .offer2-solution,
body.offer-squeeze-v2 .offer2-included,
body.offer-squeeze-v2 .offer2-faq,
body.offer-squeeze-v2 .offer2-pricing-wrap {
    padding-top: clamp(48px, 6vw, 90px);
    padding-bottom: clamp(48px, 6vw, 90px);
}
body.offer-squeeze-v2 .offer2-close {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

/* ---------- 12b. By-the-numbers credibility band ---------- */
body.offer-squeeze-v2 .offer2-stats {
    background: var(--o2-navy);
    padding: clamp(34px, 4.5vw, 56px) clamp(20px, 5vw, 64px);
}
body.offer-squeeze-v2 .offer2-stats__container {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 3vw, 40px);
    text-align: center;
}
@media (max-width: 700px) {
    body.offer-squeeze-v2 .offer2-stats__container {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 18px;
    }
}
body.offer-squeeze-v2 .offer2-stat {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
body.offer-squeeze-v2 .offer2-stat__num {
    font-weight: 700;
    font-size: clamp(22px, 2.5vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--o2-gold-bright);
}
body.offer-squeeze-v2 .offer2-stat__label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* ---------- 13. Center the section headings ----------
 * The left-aligned editorial headings left the whole right side of each
 * section empty (part of the "empty" feel). Center the heading block
 * (eyebrow + h2 + divider) like the rest of the site does; the grids /
 * body / cards below keep their own alignment. */
body.offer-squeeze-v2 .offer2-reality__h2,
body.offer-squeeze-v2 .offer2-solution__h2,
body.offer-squeeze-v2 .offer2-included__h2,
body.offer-squeeze-v2 .offer2-faq__h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
body.offer-squeeze-v2 .offer2-solution__eyebrow,
body.offer-squeeze-v2 .offer2-included__eyebrow,
body.offer-squeeze-v2 .offer2-faq__eyebrow {
    text-align: center;
}
/* Center every divider (was left-aligned 0 0 32px). */
body.offer-squeeze-v2 .offer2-page .heading-shape {
    margin-left: auto;
    margin-right: auto;
}

/* End OFFER 2 (DRAFT REDESIGN) ============================================== */

/* ============================================================================
 * EVENTS PAGES REGRESSION FIX (2026-06-01)
 * Scope: the /events/ listing (page 924) + the event-only blocks used on event
 * detail pages. The decorative notch/scoop overlays were leftover template-kit
 * cruft. The `cta` block is shared site-wide, so anything touching it is
 * page-scoped here; the conference-comparison / call-to-action-bordered /
 * whats-included blocks are event-only and had their overlay markup removed at
 * the template instead. The site-wide hero "bathtub" scoop is deliberately NOT
 * in this change (owned by the theme consistency pass).
 * Spec: docs/superpowers/specs/2026-06-01-events-notch-overlay-fix-design.md
 * ==========================================================================*/

/* --- 1. Hide the leftover notch + corner scoop on the shared CTA block,
 *        events listing only (WANT ACCESS). The block template is untouched
 *        so every other page keeps its shapes. ---------------------------- */
body.page-id-924 .call-to-action.style3 .cta_corner,
body.page-id-924 .call-to-action.style3 .cta_shape {
    display: none;
}

/* --- 2. WANT ACCESS section: kill the -160px overlap that made it collide
 *        with the comparison card, pull the card into the same grey band as
 *        the "This isn't a conference" section (#F1F1F1, matching .meet_bg),
 *        and make the card slimmer + tighter. -------------------------------*/
body.page-id-924 .n_top_160 {
    margin-top: 0;
    background: #F1F1F1;          /* same grey as .meet_bg -> reads as one band */
    /* .py-0 is a Bootstrap !important utility on this section, so the padding
     * that gives the card breathing room below it (and stops it butting flush
     * against the next white section) must also be !important. */
    padding-top: clamp(8px, 1.5vw, 16px) !important;
    padding-bottom: clamp(64px, 8vw, 104px) !important;
}
body.page-id-924 .call-to-action.style3 {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 56px;            /* was 120px 70px */
    border-radius: 40px;           /* was 60px */
}
body.page-id-924 .call-to-action.style3 .bg_image {
    border-radius: 40px;
}
/* Trim the grey band's bottom so the comparison card and WANT ACCESS sit a
 * comfortable distance apart instead of the block's full 140px padding. */
body.page-id-924 .block-conference-comparison .py_140 {
    padding-bottom: clamp(40px, 5vw, 64px);
}

/* --- 3. NEW HERE card: tighten it around its content (was full-width with
 *        70px padding). -------------------------------------------------- */
body.page-id-924 .call-to-action.style2 {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding: 44px 56px;            /* was 70px */
    border-radius: 40px;           /* was 60px */
}

/* --- 4. "This isn't a conference" heading: left-align the bar+tub divider so
 *        it matches the left-aligned H2/subhead (was margin:0 auto -> centred,
 *        which read as misaligned against the left text). ----------------- */
body.page-id-924 .block-conference-comparison .content-text .heading-shape {
    margin-left: 0;
    margin-right: auto;
}

/* --- 5. "This isn't a conference" photo: fill the column's full height so it
 *        matches the vertical extent of the text beside it (was a short
 *        natural-height image leaving dead grey space). Desktop/tablet only;
 *        mobile keeps the stacked natural image. -------------------------- */
@media (min-width: 768px) {
    body.page-id-924 .block-conference-comparison .row {
        align-items: stretch;
    }
    /* Image is absolutely filled so the *text* column drives the row height;
     * the photo then cover-fills to exactly the text's vertical extent (no dead
     * space in either column). min-height keeps it from collapsing too short. */
    body.page-id-924 .block-conference-comparison .content-img {
        position: relative;
        height: 100%;
        min-height: 340px;
    }
    body.page-id-924 .block-conference-comparison .content-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 40px;
    }
}

/* --- 6. Quad comparison card: sits cleanly BELOW the image/text row. The base
 *        margin-top:-50px pulled it up and CLIPPED the photo + paragraph behind
 *        it (the "notch" on the image). Normal flow + a clear gap, no overlap. */
body.page-id-924 .block-conference-comparison .feature-list-box {
    margin-top: clamp(32px, 4vw, 56px);
    border-radius: 40px;
}

/* NOTE: the hero "bathtub" scoop treatment (the base .hero-corner rule and the
 * single-event bottom-right radius) is intentionally NOT in this commit. That
 * change is site-wide and is owned by the theme/offer consistency pass, kept
 * separate so this stays an events-listing-scoped change. */

/* --- 7. Upcoming Flagships: give each event a clear card stroke + soft shadow
 *        so they read as distinct cards (they were borderless boxes that
 *        blurred into the page). Scoped to the listing so Home is untouched. */
body.page-id-924 .flagship-box {
    border: 1px solid rgba(9, 71, 100, 0.18);
    border-radius: 24px;
    background: #fff;
    padding: clamp(16px, 2.5vw, 28px);
    box-shadow: 0 6px 28px rgba(9, 71, 100, 0.06);
}

/* End EVENTS PAGES REGRESSION FIX ========================================== */

/* ============================================================================
 * HOME -- "Where We Meet" format cards (Flagships / Adventures / Masterminds)
 * Title-first cards with a per-format accent (top cap + icon + meta icons):
 *   Flagships  = navy  #094764   (the primary / largest gathering)
 *   Adventures = teal  #2C7A9A   (water + outdoors energy)
 *   Masterminds= gold  #826B2A   (intimate, premium deep dive)
 * Titles stay brand-navy so the three still read as one set. Scoped to the
 * homepage. Site tokens: Schibsted Grotesk body, Sportfield Varsity display.
 * ========================================================================== */

.meet-formats-lead {
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 600;
    font-size: clamp(17px, 1.5vw, 20px);
    color: #094764;
    margin: 4px 0 38px;
}
.meet-formats-note {
    display: block;
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: #5f5f5f;
}

.wwm-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: clamp(18px, 1.8vw, 26px);
    text-align: left;
}
.wwm-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(9, 71, 100, 0.12);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(9, 71, 100, 0.07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wwm-card--navy { --wwm-accent: #094764; }
.wwm-card--teal { --wwm-accent: #2C7A9A; }
.wwm-card--gold { --wwm-accent: #826B2A; }
.wwm-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    z-index: 2;
    background: var(--wwm-accent, #094764);
}
.wwm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 50px rgba(9, 71, 100, 0.13);
    border-color: rgba(9, 71, 100, 0.20);
}

/* Media zone: the illustrations are 16:9 line art on PURE WHITE. The plate is a
 * matching 16:9 so the art fills it edge-to-edge — centred both ways, no empty
 * band above the title — which keeps the card shorter/wider. White plate blends
 * the art's white background; an accent hairline separates art from copy. */
.wwm-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #fff;
}
.wwm-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: clamp(22px, 2.3vw, 30px);
}
.wwm-card__title {
    font-family: "Sportfield Varsity", "Source Serif Pro", Georgia, serif;
    text-transform: uppercase;
    font-size: clamp(23px, 2.3vw, 29px);
    line-height: 1.05;
    color: #094764;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(9, 71, 100, 0.12);
    letter-spacing: 0.01em;
}
.wwm-card__meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 16px 0 18px;
}
.wwm-card__metaitem {
    font-family: "Schibsted Grotesk", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #094764;
    line-height: 1.35;
}
.wwm-card__metaitem em {
    color: var(--wwm-accent, #826B2A);
    font-style: normal;
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
}
.wwm-card__body {
    font-family: "Schibsted Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #5f5f5f;
    margin: 0;
}

@media (max-width: 800px) {
    .wwm-cards { grid-template-columns: 1fr; }
    .wwm-card__media { aspect-ratio: 16 / 9; }
}

/* End HOME "Where We Meet" format cards ==================================== */

/* Sold-out event mode (Event Status toggle on the event edit screen).
 * Red badge on the event hero + the events-listing flagship card, plus the
 * italic waitlist note on the card. CTA label swaps happen in PHP. */
.sold-out-badge {
    display: inline-block;
    padding: 6px 18px;
    margin-bottom: 14px;
    border-radius: 50px;
    background: #b30000;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sold-out-badge--card {
    margin: 0 0 0 12px;
    padding: 4px 14px;
    font-size: 12px;
    vertical-align: middle;
}

.sold-out-note {
    margin-top: 12px;
    font-size: 15px;
    color: #b30000;
}

/* Sold Out badge relocated out of the headline column to overlay the top-right
 * corner of the event-banner-action card (single-event hero). The parent
 * .event-banner-action is position:relative, so the badge floats over the card. */
.sold-out-badge--overlay {
    position: absolute;
    top: -16px;
    right: 22px;
    z-index: 12;
    margin: 0;
    box-shadow: 0 8px 20px rgba(179, 0, 0, 0.32);
}

/* Push the single-event hero headline in from the container's left edge so the
 * H1 stops sitting flush against the screen edge (desktop/tablet only; on phones
 * the column is full-width and the container padding already handles it). */
@media (min-width: 768px) {
    .single-event-banner .hero-text {
        padding-left: clamp(20px, 3vw, 50px);
    }
}


/* The press "Forbes quotes" box pull-quote redesign is now the global
 * default (see the .featured-text-box rules above: centered text framed
 * by a flipped opening mark top-left and a closing mark bottom-right),
 * so the former page-id-4667 review scope has been removed. */

/* ============================================================
 * OFFER PAGE DESIGN LIFT (post-event / baja26 pizzazz pass)
 * ------------------------------------------------------------
 * The v2 offer redesign set every accent to navy, so the page
 * read as one flat blue/white field with nothing signalling
 * priority or urgency. This pass reintroduces the brand GOLD as
 * a deliberate emphasis accent on exactly the three highest-
 * intent conversion elements — the top scarcity bar, the bonus,
 * and the annual plan — and leaves everything else navy/white so
 * the hierarchy reads. Gold = "act here."
 *   - #826b2a : deep gold for gold-on-white (already in design)
 *   - #d4a93a : brighter gold for gold-on-navy (timer, pills, CTA)
 * Scoped to the offer pages only (bar markup is emitted there).
 * ============================================================ */

/* The site sets `body { overflow-x: hidden }`, which turns body into a scroll
 * container and breaks `position: sticky` on its children. `overflow-x: clip`
 * clips the same horizontal overflow WITHOUT creating a scroll container, so the
 * sticky bar pins correctly. Scoped to offer pages so nothing else is affected. */
body.offer-squeeze {
    overflow-x: clip;
}
/* `.main-wrapper` carries `overflow-y: auto`, which makes it a scroll container
 * the window never actually scrolls — so sticky children stick to a viewport
 * that doesn't move and never pin. Neutralise it on offer pages (keep the
 * horizontal clip, drop the vertical scroll context) so the bar pins. */
body.offer-squeeze .main-wrapper {
    overflow-x: clip;
    overflow-y: visible;
}

/* --- 1. Top time-limit banner — white "flip-clock" announcement -----------------
 * Rebuilt (Chris: gold = ugly, navy = unnoticeable). A clean WHITE banner that pops
 * against the navy hero, with navy flip-clock countdown tiles whose digits flip each
 * tick + a blinking blue "live" dot so it stands out. NOT sticky/fixed: rendered at
 * wp_body_open priority 1 (before .main-wrapper) as a normal-flow block, so it is the
 * top-most element and pushes the header + hero DOWN rather than overlaying them.
 * Unscoped — page 589 shares the bar. PHP render guard + expiry untouched (the banner
 * is conditionally rendered, never CSS-hidden). */
.offer-urgency-bar {
    position: relative;
    z-index: 50;
    background: #ffffff;
    color: #07374e;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: 0 2px 12px rgba(7, 47, 70, 0.07);
}
.offer-urgency-bar__inner {
    max-width: 1180px;
    margin: 0 auto;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px clamp(16px, 3vw, 24px);
}
.offer-urgency-bar__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1f8ad6;
    box-shadow: 0 0 0 4px rgba(31, 138, 214, 0.18);
    animation: ubBlink 1.5s steps(1, end) infinite;
}
@keyframes ubBlink {
    0%, 55%   { opacity: 1; }
    56%, 100% { opacity: 0.2; }
}
.offer-urgency-bar__label {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    margin-right: auto;
}
.offer-urgency-bar__label strong {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #07374e;
}
.offer-urgency-bar__sub {
    font-size: 12.5px;
    font-weight: 600;
    color: #1f8ad6;
}
.offer-urgency-bar__timer {
    display: flex;
    gap: 8px;
    perspective: 320px;
}
.ub-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ub-num {
    display: block;
    min-width: 40px;
    padding: 7px 6px;
    background: #07374e;
    color: #fff;
    border-radius: 7px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    transform-origin: center;
    backface-visibility: hidden;
}
.ub-num.is-flip {
    animation: ubFlip 0.45s ease;
}
@keyframes ubFlip {
    0%   { transform: rotateX(0deg); }
    45%  { transform: rotateX(-88deg); }
    55%  { transform: rotateX(-88deg); }
    100% { transform: rotateX(0deg); }
}
.ub-unit i {
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5a7280;
}
.offer-urgency-bar__cta {
    flex: 0 0 auto;
    background: #1f8ad6;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 10px 22px;
    border-radius: 6px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.offer-urgency-bar__cta:hover {
    background: #1773b4;
    transform: translateY(-1px);
}
.offer-urgency-bar__cta:focus-visible {
    outline: 3px solid #07374e;
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .offer-urgency-bar__inner { min-height: 52px; gap: 12px; padding: 7px 14px; }
    .offer-urgency-bar__sub { display: none; }
    .offer-urgency-bar__label strong { font-size: 13px; }
    .offer-urgency-bar__timer { gap: 6px; }
    .ub-num { min-width: 32px; font-size: 15px; padding: 6px 4px; }
    .ub-unit i { font-size: 8px; }
    .offer-urgency-bar__cta { padding: 8px 14px; }
}
@media (max-width: 400px) {
    .ub-unit:last-child { display: none; } /* drop seconds on the narrowest phones */
}
@media (prefers-reduced-motion: reduce) {
    .offer-urgency-bar__dot { animation: none; }
    .ub-num.is-flip { animation: none; }
    .offer-urgency-bar__cta { transition: none; }
}

/* --- 2. Annual plan emphasis — climax of the brass-on-navy system.
 * 628 renders the DEFAULT navy .pricing-box (no .offer2-pricing-wrap, so the
 * cream-editorial pricing CSS never applies here). We commit to the unified navy
 * field #07374e + a brass ring, invert the card text to white, and make the CTA
 * one of exactly TWO solid-brass fills on the page (the other is the bar chip). */
body.offer-squeeze-v2 .pricing-box.active {
    position: relative;
    transform: translateY(-8px);
    background: #07374e !important;
    border-radius: 18px;
    box-shadow: 0 22px 44px -22px rgba(9, 71, 100, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1.5px rgba(201, 162, 74, 0.55);
}
/* Invert text on the navy fill (the cream-wrap inversion rules don't reach 628) */
body.offer-squeeze-v2 .pricing-box.active .pay-type,
body.offer-squeeze-v2 .pricing-box.active .title,
body.offer-squeeze-v2 .pricing-box.active .title small,
body.offer-squeeze-v2 .pricing-box.active .content,
body.offer-squeeze-v2 .pricing-box.active .content p {
    color: #fff;
}
/* Badge as a brass FOIL tag, not a solid fill */
body.offer-squeeze-v2 .pricing-box.active .payment-tag {
    background: transparent;
    border: 1px solid #C9A24A;
    color: #C9A24A;
}
/* The annual CTA — second of the two solid-brass fills; squared control button */
body.offer-squeeze-v2 .pricing-box.active .cta-btn {
    background: #C9A24A !important;
    border-color: #C9A24A !important;
    color: #0a2230 !important;
    border-radius: 6px;
}
body.offer-squeeze-v2 .pricing-box.active .cta-btn:hover {
    background: #d8b65e !important;
    border-color: #d8b65e !important;
}
body.offer-squeeze-v2 .pricing-box.active .cta-btn em {
    color: #0a2230;
}
/* Monthly stays deliberately quiet: white card, navy-outline ghost button */
body.offer-squeeze-v2 .pricing-box:not(.active) {
    align-self: center;
}
body.offer-squeeze-v2 .pricing-box:not(.active) .cta-btn {
    background: transparent !important;
    color: #094764 !important;
    border: 1px solid #094764 !important;
    border-radius: 6px;
}

/* --- 3. Bonus card — same brass-on-navy plate as the countdown panel + annual
 * card, so countdown -> bonus card -> price read as ONE descending instrument. */
body.offer-squeeze-v2 .countdown-widget-box {
    background: #07374e;
    border: 1px solid rgba(201, 162, 74, 0.30);
    border-radius: 18px;
    box-shadow: 0 26px 50px -30px rgba(7, 47, 70, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* $12,500 VALUE as a brass FOIL tag, not a solid fill */
body.offer-squeeze-v2 .countdown-widget-box .price-value {
    background: transparent;
    border: 1px solid #C9A24A;
    color: #C9A24A;
    border-radius: 999px;
    padding: 4px 16px;
    font-weight: 700;
}
/* --- 4. Countdown: refined navy/gold panel ---------------------------------
 * The stock count-down block renders four heavily-shadowed navy tiles that
 * read as a generic bolted-on timer and fight the bonus card below. Recompose
 * them into one cohesive panel: tabular numerals, hairline gold unit
 * separators, a gold context kicker, and a soft (not heavy-black) shadow, so
 * the timer reads as part of the same premium bonus system. Scoped to the
 * offer body class so the base count-down block elsewhere keeps its treatment. */
body.offer-squeeze-v2 .countdown {
    gap: 0;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin: 44px auto 0;
    padding: 24px clamp(18px, 3vw, 38px);
    background: linear-gradient(180deg, #0a4a69 0%, #07374e 100%);
    border: 1px solid rgba(212, 169, 58, 0.42);
    border-radius: 20px;
    box-shadow: 0 26px 50px -30px rgba(7, 47, 70, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}
body.offer-squeeze-v2 .countdown::before {
    content: "Bonus enrollment closes in";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #07374e;
    border: 1px solid #C9A24A;
    color: #C9A24A;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 40px;
    white-space: nowrap;
}
body.offer-squeeze-v2 .countdown .time-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px clamp(14px, 2.6vw, 32px) 0;
}
body.offer-squeeze-v2 .countdown .time-box:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 16%;
    bottom: 30%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 169, 58, 0.55), transparent);
}
body.offer-squeeze-v2 .countdown .time {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    line-height: 1;
    font-size: clamp(40px, 4.6vw, 58px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
body.offer-squeeze-v2 .countdown .time-box span {
    margin-top: 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 575px) {
    body.offer-squeeze-v2 .countdown {
        width: 100%;
        padding: 22px 4px;
    }
    body.offer-squeeze-v2 .countdown .time-box {
        padding: 4px clamp(4px, 3vw, 16px) 0;
    }
    body.offer-squeeze-v2 .countdown .time {
        font-size: clamp(26px, 8.5vw, 40px);
    }
    body.offer-squeeze-v2 .countdown .time-box span {
        font-size: 8.5px;
        letter-spacing: 0.14em;
    }
}

/* --- Claim zone: small anchor-jump breathing room (the banner is no longer sticky,
 * so #claim no longer hides under a pinned bar), and a tightened seam above pricing
 * so countdown -> bonus card -> two prices read as one module --- */
body.offer-squeeze-v2 #claim {
    scroll-margin-top: 16px;
    padding-top: clamp(32px, 5vw, 56px);
}

/* --- 5. Footer overlay on offer pages --------------------------------------
 * Offer pages disable the global footer CTA (they close with their own
 * .offer2-close section), which lands .no-cta on the footer and opens a dead
 * white gap before the illustration. Restore the site-wide overlap used on
 * home/membership: pull the footer up so the illustration rises behind the
 * close section, make that section transparent with room below, and stack it
 * above the rising art. (background_color meta is also cleared on these pages
 * so the footer loses bg_light and the mask-fade blends into the white body.) */
body.offer-squeeze .footer-area.no-cta {
    margin-top: clamp(-200px, calc(40px - 16vw), -40px);
}
body.offer-squeeze-v2 .offer2-close {
    position: relative;
    z-index: 2;
    background: transparent;
    padding-bottom: clamp(130px, 17vw, 250px);
}

/* ============================================================
 * MIDDLE-SECTION IMAGERY — break the text wall (body.offer-squeeze-v2)
 * Proof + Solution gain an OPTIONAL editorial photo via an ACF image field
 * (editor-controlled; degrades to the original text-only layout when empty —
 * nothing is hidden). Stats + Included gain a faint decorative photographic
 * TEXTURE behind their navy fields (CSS only, decorative, no ACF/toggle
 * surface, no alt). Every photo shares one radius + soft shadow + 1px brass
 * hairline edge so the imagery reads as one system with the bonus surfaces.
 * ============================================================ */

/* Shared editorial-photo frame */
body.offer-squeeze-v2 .offer2-proof__photo,
body.offer-squeeze-v2 .offer2-solution__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 26px 50px -30px rgba(7, 47, 70, 0.6);
    outline: 1px solid rgba(201, 162, 74, 0.28);
    outline-offset: -1px;
}

/* Proof: photo-left / quote-right when a photo is set (else centered text) */
body.offer-squeeze-v2 .offer2-proof__container.has-photo {
    max-width: 1000px;
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    text-align: left;
}
body.offer-squeeze-v2 .offer2-proof__container.has-photo .offer2-proof__kicker {
    margin-bottom: 22px;
}
body.offer-squeeze-v2 .offer2-proof__container.has-photo .offer2-proof__cite {
    align-items: flex-start;
}
@media (max-width: 760px) {
    body.offer-squeeze-v2 .offer2-proof__container.has-photo {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    body.offer-squeeze-v2 .offer2-proof__container.has-photo .offer2-proof__cite {
        align-items: center;
    }
    body.offer-squeeze-v2 .offer2-proof__container.has-photo .offer2-proof__photo {
        aspect-ratio: 16 / 10;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* Solution: photo-left / (thesis + pullquote)-right when a photo is set */
body.offer-squeeze-v2 .offer2-solution__container.has-photo {
    grid-template-columns: minmax(220px, 360px) 1fr;
    column-gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
body.offer-squeeze-v2 .offer2-solution__photo {
    align-self: start;
}
body.offer-squeeze-v2 .offer2-solution__main .offer2-solution__pullquote {
    margin-top: 28px;
}
@media (max-width: 860px) {
    body.offer-squeeze-v2 .offer2-solution__container.has-photo {
        grid-template-columns: 1fr;
    }
    body.offer-squeeze-v2 .offer2-solution__container.has-photo .offer2-solution__photo {
        aspect-ratio: 16 / 10;
        max-width: 520px;
        margin: 0 auto 8px;
    }
}

/* Stats band: a barely-there room photo behind the navy field for texture,
 * under a >=90% navy wash so the gold numerals keep full contrast. The wash
 * also unifies the band to the brass-plate navy (#07374e). */
body.offer-squeeze-v2 .offer2-stats {
    position: relative;
}
body.offer-squeeze-v2 .offer2-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(rgba(7, 55, 78, 0.90), rgba(7, 55, 78, 0.93)),
                url('/wp-content/uploads/2026/06/A22A2291-Dave-Rabin-scaled-1.jpg') center / cover no-repeat;
}
body.offer-squeeze-v2 .offer2-stats__container {
    position: relative;
    z-index: 1;
}

/* Inclusions band: whisper-faint (~10%) navy-duotone photographic texture so the
 * deep-navy section reads as atmosphere, not a flat fill. List stays legible (the
 * __container already sits at z-index:1 above this layer). */
body.offer-squeeze-v2 .offer2-included::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/wp-content/uploads/2026/05/give-first.webp') center / cover no-repeat;
    opacity: 0.10;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

/* Scene banner: match the new photos' brass hairline edge (one shared system) */
body.offer-squeeze-v2 .offer2-scene__photo {
    outline: 1px solid rgba(201, 162, 74, 0.28);
    outline-offset: -1px;
}

/* ============================================================================
 * VISUAL CONSISTENCY AUDIT FIXES (2026-06-16)
 * Site-wide screenshot + DOM audit; see _handoff/visual-audit-2026-06-16.md.
 * ========================================================================== */

/* --- P1 — Tub divider must sit under its (left-aligned) heading ------------
 * In these blocks the heading is left-aligned but the heading-shape kept
 * centering via the base `margin: 0 auto`, so the tub floated to the middle of
 * the column instead of under the headline. Left-align the divider to match.
 * Scoped with :not(.text-center) so genuinely centered variants are untouched
 * (e.g. the home intro-video uses .content-text.text-center and must stay
 * centered). */
.block-team-letter .content-text:not(.text-center) .heading-shape,
.block-home-intro-video .content-text:not(.text-center) .heading-shape {
    margin-left: 0;
    margin-right: auto;
}

/* baja26 / offer pages: the offer2 stylesheet force-centers every divider
 * (the "Center every divider" rule above). Restore the left alignment for the
 * left-aligned team-letter section only; this selector outranks that override. */
body.offer-squeeze-v2 .block-team-letter .content-text:not(.text-center) .heading-shape {
    margin-left: 0;
    margin-right: auto;
}

/* Responsive blocks: the heading is centered below 576px (text-sm-start
 * text-center) and left-aligned at >=576px. Match the divider at the same
 * breakpoint so it centers on mobile and left-aligns on desktop. */
@media (min-width: 576px) {
    .block-stats-with-content .content-text.text-sm-start .heading-shape,
    .block-faq-with-image .content-img .heading-shape {
        margin-left: 0;
        margin-right: auto;
    }
}

/* --- P2 — Equalize the word-marquee band height across pages ---------------
 * The same block-text-marquee shipped different per-instance spacing (home
 * default 80px, explore pt-0, events py-0) giving 220 / 140 / 60px bands.
 * Force the standard content-area padding so the scrolling banner has the same
 * breathing room everywhere. !important is required to beat the Bootstrap
 * py-0 / pt-0 / pb-0 utilities the editor applied per instance. */
.block-text-marquee > .content-area {
    padding-top: clamp(48px, 6vw, 80px) !important;
    padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* --- P3 — De-emphasize secondary terms copy on the offer pages ------------
 * The pricing terms / fine-print note ("12-month membership... cancel anytime
 * ... Bonus offer ends...") rendered at full body size, flattening the
 * hierarchy. Minimize it so it reads as fine print. Scoped to offer pages so
 * the shared timeline-notes component is unchanged elsewhere. */
body.offer-squeeze-v2 .timeline-notes .inner {
    font-size: 15px;
    line-height: 1.55;
}

/* ============================================================================
 * GRAVITY FORMS + ACCESSIBILITY FIXES (2026-06-16)
 * Surfaced by the WCAG 2.1 AA scan in _handoff/visual-audit-2026-06-16.md.
 * ========================================================================== */

/* --- Reveal field labels on the multi-step Apply form ---------------------
 * .c_form field labels are visually hidden site-wide because the single-step
 * forms carry their prompt in the input placeholder. The multi-step Apply form
 * (gravity form 10, embedded on /apply/ and /explore-membership/) has NO
 * placeholders, so with the label hidden every field rendered as a blank box
 * the same navy as its container. Scope to forms that have a progress bar
 * (i.e. the multi-step Apply form) and restore the real, visible labels so the
 * fields are usable; single-step forms keep their placeholder design. */
.gform_wrapper:has(.gf_progressbar_wrapper) label.gfield_label.gform-field-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    color: #094764;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

/* The "Step 1 of 3" progress title was dark grey (#585e6a) on the navy form
 * box, ~1.5:1 and effectively invisible. Make it legible. */
.c_form .gf_progressbar_title {
    color: #094764 !important;
}

/* (Form focus-ring restored separately — a parallel edit added a white
 * .c_form ...:focus-visible outline near the base rule. Not duplicated here.) */

/* ============================================================
 * "The Formula" block (acf/the-formula) — membership page.
 * Scoped under .block-the-formula. Heading, divider, card titles and
 * body all reuse the site's shared scale (.h2 40px, 18px body, 24px
 * card titles with the #68A3C4 rule) so the section reads as part of
 * the page. Type inherits Schibsted Grotesk; no extra @font-face.
 * The block sits directly in the page .container at the standard
 * section width (no prototype framing canvas).
 * ============================================================ */
/* lead under the standard section heading */
.block-the-formula .formula-lead{max-width:640px;margin:0 auto;font-size:20px;line-height:1.5;color:#363636;}
/* shared card type */
.block-the-formula .formula-mtitle,
.block-the-formula .formula-stitle{color:#094764;font-weight:700;text-transform:uppercase;margin:0;position:relative;}
.block-the-formula .formula-mtitle::after,
.block-the-formula .formula-stitle::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:2px;background:#68A3C4;}
.block-the-formula .formula-sub{font-size:18px;font-weight:700;color:#094764;margin:12px 0 0;}
.block-the-formula .formula-body p{font-size:18px;line-height:1.6;margin:0 0 14px;color:#363636;}
.block-the-formula .formula-body p:last-child{margin:0;}
.block-the-formula .formula-sub{margin:14px 0 0;}
/* card surface — same language as the icon-timeline .join-step cards below */
.block-the-formula .formula-mcard,
.block-the-formula .formula-scard{background:#fff;border:1px solid rgba(9,71,100,.07);border-radius:20px;overflow:hidden;box-shadow:0 6px 22px rgba(0,70,100,.08);transition:transform .2s ease,box-shadow .2s ease;}
.block-the-formula .formula-mcard:hover,
.block-the-formula .formula-scard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,70,100,.13);}
/* three main cards — the spine */
.block-the-formula .formula-mains{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.block-the-formula .formula-mcard{display:flex;flex-direction:column;}
.block-the-formula .formula-mcard .formula-img{height:210px;}
.block-the-formula .formula-mcard .formula-img img{width:100%;height:100%;object-fit:cover;}
.block-the-formula .formula-mcard-body{display:flex;flex-direction:column;flex:1;padding:26px 26px 30px;}
.block-the-formula .formula-mcard .formula-mtitle{font-size:24px;line-height:1.15;padding-bottom:15px;}
/* transition line between the two card groups */
.block-the-formula .formula-transition{text-align:center;max-width:680px;margin:50px auto;font-size:20px;line-height:1.4;font-weight:700;color:#094764;}
/* two sub cards — what you do with it */
.block-the-formula .formula-subs{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.block-the-formula .formula-scard{display:flex;align-items:stretch;}
.block-the-formula .formula-scard .formula-img{width:40%;flex:none;min-height:200px;}
.block-the-formula .formula-scard .formula-img img{width:100%;height:100%;object-fit:cover;}
.block-the-formula .formula-scard-body{display:flex;flex-direction:column;justify-content:center;padding:28px 30px;}
.block-the-formula .formula-scard .formula-stitle{font-size:20px;line-height:1.2;padding-bottom:13px;margin-bottom:16px;}
@media(max-width:991px){
  .block-the-formula .formula-mains{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto;}
  .block-the-formula .formula-subs{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .block-the-formula .formula-mcard .formula-mtitle{font-size:20px;}
  .block-the-formula .formula-scard{flex-direction:column;}
  .block-the-formula .formula-scard .formula-img{width:100%;height:200px;min-height:0;}
  .block-the-formula .formula-scard .formula-stitle{font-size:18px;}
}
@media(prefers-reduced-motion:reduce){
  .block-the-formula .formula-mcard,
  .block-the-formula .formula-scard{transition:none;}
  .block-the-formula .formula-mcard:hover,
  .block-the-formula .formula-scard:hover{transform:none;}
}

/* Conference-comparison ("Not a Conference, a Campus"): subtitle renders below
   the bar+tub divider as a body-size lead instead of an uppercase sub-heading. */
.conference-comparison__subtitle {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Events hero (924): a touch more air above the single CTA after the secondary
   "Learn About Membership" link was removed, for better breathing room. */
body.page-id-924 .hero-area .hero-text .cta-btn {
    margin-top: 22px;
}

/* Home hero (6): same treatment after the secondary "See Upcoming Events" link
   was removed — give the lone "Are you a fit?" CTA breathing room below the
   subhead. Page-scoped so other heroes that still carry two CTAs are untouched. */
body.page-id-6 .hero-area .hero-text .cta-btn {
    margin-top: 22px;
}

/* ============================================================
 * DE-AI PASS — baja26 / offer pages (post-event copy + voice polish, 2026-06-24)
 * The copy de-AI lives in page 628 block content; these few scoped overrides
 * finish the voice work. The brass-on-navy "pizzazz pass" above is untouched,
 * and the .offer2-pricing-wrap / .offer2-faq rules (live for the bespoke
 * template-offer-2-bespoke.php) are left alone.
 * ============================================================ */

/* De-shout the shared pricing + FAQ section headings to match the sentence-case
 * editorial voice of the offer2 sections. The block heading carries .text_upper;
 * the copy is now sentence-case in the DB, so drop the transform on offer pages. */
body.offer-squeeze-v2 .block-membership-pricing .section-heading .text_upper,
body.offer-squeeze-v2 .block-faq-accordion .section-heading .text_upper {
    text-transform: none;
}

/* Solution pullquote: replace the banned side-stripe (border-left) with a quiet
 * brass top accent, so the quote still reads as set off from the body copy in the
 * same brass language as the pricing/countdown surfaces. */
body.offer-squeeze-v2 .offer2-solution__pullquote {
    border-left: 0;
    border-top: 2px solid rgba(201, 162, 74, 0.55);
    border-radius: 4px;
}

/* Visible focus ring on the hero secondary text link (was relying on the UA
 * default over the dark hero photo). */
body.offer-squeeze-v2 .hero-area .offer2-hero__secondary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* End DE-AI PASS ============================================ */

/* ===== Event-detail section template (v2) ===== */
/* --- event section: featured-speakers --- */
/* ==========================================================================
   Event section: featured-speakers
   Per-event "Featured Speakers" card grid. Cards reuse the .team-box frame
   (border, radius, shadow, hover lift, .image cover crop, .title, .desg) so
   the existing team-card CSS does the heavy lifting; only the speaker bio and
   the optional per-speaker link need their own rules, scoped under
   .event-speakers / .event-speaker.
   ========================================================================== */
.event-speaker .text {
    display: flex;
    flex-direction: column;
}

.event-speaker-bio {
    font-size: 15px;
    line-height: 23px;
    color: #001422;
    opacity: 0.82;
    margin-bottom: 14px;
}

.event-speaker-bio p:last-child {
    margin-bottom: 0;
}

.event-speaker-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #094764;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.event-speaker-link:hover,
.event-speaker-link:focus-visible {
    color: #001422;
    gap: 12px;
}

.event-speaker-link em {
    font-size: 16px;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .event-speaker-link {
        transition: none;
    }
}

/* Blockquotes in the intro-video block render in italics. Editors use the
 * blockquote button in the WYSIWYG toolbar; italic styling is automatic. */
.block-home-intro-video blockquote {
    font-style: italic;
}


/* ============================================================================
 * GRAVITY FORMS — INTERNATIONAL PHONE FIELD (GP Advanced Phone Field /
 * intl-tel-input), 2026-06-25. Tuned for the white .c_form card.
 *  1) Collision fix: the base .c_form input padding cleared the country
 *     selector's space, so the flag drew over the placeholder digits. Give the
 *     phone input dedicated left padding that always clears the selector.
 *  2) Proportionate width on desktop, full-width on phones.
 *  3) Selector legible on white (navy dial code / caret / focus ring), a
 *     comfortable hit area, and an AA-contrast dropdown.
 * Display only — the plugin still submits the full E.164 number (HubSpot-safe).
 * ========================================================================== */
.c_form .gfield--type-phone .ginput_container_phone {
    max-width: 24rem;
}
@media (max-width: 575px) {
    .c_form .gfield--type-phone .ginput_container_phone {
        max-width: none;
    }
}
.c_form .ginput_container_phone .iti {
    display: block;
    width: 100%;
}
.c_form .ginput_container_phone .iti__tel-input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 12px !important;
    padding-left: 5.5em !important;
}
.c_form .iti__selected-country {
    height: 100%;
    padding-right: 6px;
}
.c_form .iti__selected-dial-code {
    color: #094764;
    font-size: 16px;
}
.c_form .iti {
    --iti-arrow-color: #094764;
}
.c_form .iti__selected-country .iti__flag {
    box-shadow: 0 0 0 1px rgba(9, 71, 100, 0.35);
}
.c_form .iti--separate-dial-code .iti__country-container {
    border-right: 1px solid rgba(9, 71, 100, 0.25);
}
.c_form .iti__selected-country:focus-visible {
    outline: 2px solid #094764;
    outline-offset: 2px;
    border-radius: 3px;
}
.iti__dropdown-content { color: #1a1a1a; }
.iti__dropdown-content .iti__dial-code { color: #595959; }
.iti__dropdown-content .iti__country.iti__highlight { background-color: #eef3f6; }
/* End GF international phone field ============================ */

/* White-form checkbox/radio checked state (navy fill, light indicator). */
.c_form input[type="checkbox"]:checked, .c_form input[type="radio"]:checked {
    background: #094764 !important;
    border-color: #094764 !important;
}

.blog-listing .box.style3 img{
    height: 250px;
    object-fit: cover;
    object-position: center;
}

body.single-post .content-area .plain-text h2 {
    font-size: 36px;
    margin: 0 0 20px;
}

body.single-post .content-area .plain-text h3 {
    font-size: 32px;
    margin: 0 0 20px;
}

body.single-post .content-area .plain-text .wp-block-columns {
    background: #7daec50d;
    padding: 30px;
}

body.single-post .content-area .plain-text .wp-block-columns h4 {
    font-size: 24px;
}

body.single-post .content-area .plain-text blockquote {
    border-left: 5px solid #094764;
    padding: 30px;
    background: #7daec50d;
    font-style: italic;
    margin-bottom: 26px;
}