/**********
SITEWIDE STYLES
**********/

:root {
    /* Colors */
    --color-white: #ffffff;
    --color-pink: #ff8fb9;
    --color-lime: #cbfa64;
    --color-black: #0a0a0a;
    --color-sand: #f6f4f0;

    /* Typography tokens — fluid via clamp(): scales between the mobile (min)
       and desktop (max) sizes over a 375px–1440px viewport. Line-height and
       h1 letter-spacing are clamped too so they flex while hitting both ends. */
    --fs-h1: clamp(42px, calc(42.03px + 3.19vw), 101px);
    --lh-h1: clamp(67px, calc(56.44px + 2.82vw), 97px);
    --ls-h1: clamp(0.67px, calc(0.55px + 0.03vw), 1.01px);

    --fs-h2: clamp(42px, calc(37.78px + 1.13vw), 54px);
    --lh-h2: clamp(47px, calc(42.42px + 1.22vw), 60px);

    --fs-h3: clamp(22px, calc(13.90px + 2.16vw), 31px);
    --lh-h3: clamp(38px, calc(55.07px + 1.31vw), 38px);

    --fs-h4: 24px;
    --lh-h4: 24px;

    --fs-h5: 18px;
    --ls-h5: 1.8px;

    --fs-body: clamp(16px, calc(15.30px + 0.19vw), 18px);
    --lh-body: clamp(24px, calc(21.18px + 0.75vw), 32px);

    --fs-btn: 14px;
    --ls-btn: 1.4px;

    /* Layered heading shadow: white fill copy + thin black outline ring, offset down-right */
    --shadow-heading:
        7px 7px 0 var(--color-white),
        6px 6px 0 var(--color-black),
        8px 8px 0 var(--color-black),
        6px 8px 0 var(--color-black),
        8px 6px 0 var(--color-black),
        7px 6px 0 var(--color-black),
        7px 8px 0 var(--color-black),
        6px 7px 0 var(--color-black),
        8px 7px 0 var(--color-black);

    /* Outline variant for dark sections: hollow white outline offset (dark core blends into bg) */
    --shadow-heading-outline:
        7px 7px 0 var(--color-black),
        6px 6px 0 var(--color-white),
        8px 8px 0 var(--color-white),
        6px 8px 0 var(--color-white),
        8px 6px 0 var(--color-white),
        7px 6px 0 var(--color-white),
        7px 8px 0 var(--color-white),
        6px 7px 0 var(--color-white),
        8px 7px 0 var(--color-white);

    /* Layout tokens ---------------------------------------------------- */
    --container-max: 1340px;
    /* Distance from the viewport edge to the container's inner edge, used to
       bleed elements out to (or contain them at) the container edge. The
       suffix is the container/col padding added on top (15 = container pad,
       27 = 15 container + 12 g-4 col pad). */
    --bleed-15: max(15px, calc((100vw - 1340px) / 2 + 15px));
    --bleed-27: max(27px, calc((106vw - 1340px) / 2 + 27px));

    /* Torn paint-edge strip height (pathway / inspire / impact bands) */
    --torn-h: clamp(80px, 10vw, 140px);

    /* Shared elevation + misc tokens */
    --shadow-card: 0 4px 30px 0 rgba(0, 0, 0, 0.60);
    --color-error: #f00;
}
.text-center{
    text-align: center;
}
body,
html,
a,
p,
div,
span {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    line-height: 120%;
    font-size: 16px;
    color: var(--color-black);
}

/* Guard against accidental horizontal scroll (e.g. row gutters wider than
   the container padding). Vertical overflow — like the impact paint edge — is
   unaffected. */
html,
body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}


h1,
h1 span,
h2,
h2 span,
h3,
h4,
h5,
h6 {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    margin: 0;
}

h1,
h1 span {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    margin: 0 0 1rem;
}

h2,
h2 span {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    margin: 0 0 0.75rem;
    text-shadow: var(--shadow-heading);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin: 0 0 0.75rem;
}

h4 {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-h4);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-h4);
    text-transform: capitalize;
    margin-bottom: 1rem;
}

h5 {
    font-size: var(--fs-h5);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: var(--ls-h5);
    text-transform: uppercase;
}

p {
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--color-black);
}

button,
.button,
input[type="submit"] {
    font-family: 'Gotham', sans-serif;
}

.btn,
a.btn {
    font-size: var(--fs-btn);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: var(--ls-btn);
}

/* ================================================
   DISPLAY HEADING — reusable component
   Layered uppercase heading with offset hollow shadow.
   Use on any element; add .display-heading__accent on a
   child <span> for a coloured (pink) line.
   ================================================ */

.display-heading {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-black);
    text-shadow: var(--shadow-heading);
    margin: 0 0 2.5rem;
}

.display-heading__accent {
    display: block;
    color: var(--color-pink);
}

/* Inline accent — keep the coloured word on the same flowing line */
.display-heading__accent--inline {
    display: inline;
}

/* Light variant for dark sections: clean white text, no shadow */
.display-heading--light {
    color: var(--color-white);
    text-shadow: none;
}

/* ================================================
   PAINT BUTTON — reusable brush-stroke CTA
   Use on any <a> or <button>. The pink paint stroke is
   a background SVG behind the text.
   ================================================ */

.btn-paint {
    display: inline-block;
    position: relative;
    z-index: 1;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-size: 31px;
    font-style: italic;
    font-weight: 500;
    line-height: 60px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-black);
    text-decoration: none;
    padding: 0.9rem 2.8rem;
    background: none;
    border: none;
    cursor: pointer;
}

.btn-paint::before {
    content: '';
    position: absolute;
    inset: -14px -34px;
    background: url('../img/paint-text-bg-pink.svg') no-repeat center / 100% 100%;
    z-index: -1;
}

.btn-paint:hover {
    color: var(--color-black);
    opacity: 0.85;
}



/* ================================================
   ARROW BUTTON — reusable outline pill with arrow icon
   Pair with .btn for the shared button typography:
   <a class="btn btn-arrow">Learn more</a>
   ================================================ */
.btn-plain {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0;
    border-radius: 100px;
    color: var(--color-black);
    background: none;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 2.2rem;
    border: 1.5px solid var(--color-black);
    border-radius: 100px;
    color: var(--color-black);
    text-transform: uppercase;
    background: none;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}

.btn-arrow::after {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 14px;
    background: url('../img/icon-arrow-right-dark.svg') no-repeat center / contain;
    transition: transform 200ms;
}

.btn-arrow:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 1;
}

.btn-arrow:hover::after {
    background-image: url('../img/icon-arrow-right-light.svg');
    transform: translateX(4px);
}

/* Solid modifier — filled black pill, white text + light arrow by default */
.btn-arrow--solid {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-arrow--solid::after {
    background-image: url('../img/icon-arrow-right-light.svg');
}

.btn-arrow--solid:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 0.85;
}

/* Block modifier — full-width button (e.g. inside cards) */
.btn-arrow--block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Light modifier — white outline + light arrow, for dark backgrounds */
.btn-arrow--light {
    border-color: var(--color-white);
    color: var(--color-white);
}
.btn-arrow--light::after {
    background-image: url('../img/icon-arrow-right-light.svg');
}
.btn-arrow--light:hover {
    background: var(--color-white);
    color: var(--color-black);
    opacity: 1;
}
.btn-arrow--light:hover::after {
    background-image: url('../img/icon-arrow-right-dark.svg');
}

/* White modifier — solid white pill, dark text + dark arrow (for photos).
   Hover flips to the black fill inherited from .btn-arrow. */
.btn-arrow--white {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black);
}
.btn-arrow--white:hover {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

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

a {
    color: var(--color-black);
    text-decoration: none;
    transition: color 200ms ease, opacity 200ms ease;
}

a:hover {
    color: var(--color-pink);
    opacity: 0.8;
}

.flex {
    display: flex
}

.container {
    max-width: 1340px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto
}
.pathway .container{
    max-width: 1640px;
}

/* Every page section is full-width but must contain its own horizontal
   overflow. Uses overflow-x: clip (not hidden) so vertical decoration —
   like the impact-stats paint edge — can still overflow downward. */
.block {
    max-width: 100%;
    overflow-x: clip;
}

.cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.contain {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.bottom30 {
    margin-bottom: 30px;
}

.bottom60 {
    margin-bottom: 60px;
}

.bottom90 {
    margin-bottom: 90px;
}

.menu-item-has-children::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    display: inline-block;
    top: -1px;
    transition: all 300ms;
    transform: scaleY(1);
}

.menu-item-has-children.sub-menu-active::after {
    transform: scaleY(-1);
}

/* ================================================
   SITE HEADER
   ================================================ */

.site-header {
    padding: 3.4rem 0 1.4rem;
    position: relative;
    z-index: 100;
}

.page-template-template-home .site-header,
.page-template-default .site-header,
.page-template .site-header,
.single  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* ================================================
   PAGE BANNER — masked photo hero for general pages
   ================================================ */

.page-banner {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: var(--color-white);
    text-align: center;
    /* top padding clears the overlaid header; bottom clears the masked torn edge */
    padding: clamp(150px, 18vw, 240px) 0 clamp(90px, 13vw, 170px);
    position: relative;
    z-index: 2;
}

.page-banner__crumbs {
    margin-bottom: 1rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-white);
}
.page-banner__crumbs a {
    color: var(--color-white);
    font-weight: 400;
}
.page-banner__crumbs span.page-banner__sep{
    font-weight: 400;
}
.page-banner__crumbs span{
    color: var(--color-white);
}
.page-banner__crumbs a:hover {
    color: var(--color-pink);
    opacity: 1;
}
.page-banner__sep {
    margin: 0 0.5rem;
    opacity: 0.6;
}

.page-banner__title {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: var(--color-white);
    text-shadow: none;
    margin: 0;
}

/* hollow white outline offset — no dark fill, photo shows through */
.page-banner__title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(6px, 6px);
    color: transparent;
    -webkit-text-stroke: 1px var(--color-white);
    pointer-events: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.site-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    text-decoration: none;
}

.site-header__logo img {
    height: 70px;
    width: auto;
    display: block;
}

.site-header__burger {
    position: relative;
    z-index: 110;
    width: 66px;
    height: 46px;
    border-radius: 30px; /* pill */
    background: var(--color-pink);
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    flex-shrink: 0;
    transition: background 200ms, width 200ms, border-radius 200ms, opacity 200ms;
}

.site-header__burger:hover {
    opacity: 0.9;
}

.site-header__burger span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--color-black);
    border-radius: 2px;
    transition: transform 300ms, opacity 300ms;
}

/* open state → same pink-pill shape, recoloured white, bars form a black X */
.site-header__burger.navActive {
    background: var(--color-white);
}

/* while open, pin the close button top-left (aligned to the container) so it
   stays put above the menu and never lands mid-heading */
body.fix .site-header__burger {
    position: fixed;
    top: 3.4rem;
    left: var(--bleed-15);
    z-index: 120;
}

.site-header__burger.navActive span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.site-header__burger.navActive span:nth-child(2) {
    opacity: 0;
}

.site-header__burger.navActive span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.site-header__social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-decoration: none;
    line-height: 0;
    transition: background 200ms, border-color 200ms;
}

.site-header__social:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.9);
    color: var(--color-white);
    opacity: 1;
}

.site-header__social svg {
    display: block;
}

/* Fullscreen nav overlay */
body.fix {
    overflow: hidden;
}

/* hide the logo + socials while the menu is open — only the close button shows */
body.fix .site-header__logo,
body.fix .site-header__actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-header .nav {
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 50;
    height: 100vh;
    width: 100%;
    background: var(--color-pink);
    transition: left 300ms ease;
    box-sizing: border-box;
    padding: 12.5rem 0 3rem;
    overflow-y: auto;
}

.site-header .nav.navActive {
    left: 0;
}

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

/* top-level list aligned to the container (matches the close button) */
.site-header .nav > ul {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 15px;
}

.site-header .nav > ul > li {
    position: relative;
    margin-bottom: 0.4rem;
}

.site-header .nav > ul > li > a {
    display: inline-block;
    padding: 0.4rem 0;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-size: clamp(1rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-black);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
a.sub-menu-active{
    color: var(--color-white) !important;
}
.site-header .nav .menu-item-has-children.sub-menu-active > .sub-menu{
    padding: 0.4rem;
}

.site-header .nav > ul > li > a:hover {
    color: var(--color-white);
    opacity: 1;
}

/* submenu toggle badge: lime "+" (closed) → pink "×" (open) */
.site-header .nav .menu-item-has-children::after {
    display: none; /* disable the global Font Awesome chevron here */
}
.site-header .nav .menu-item-has-children > a::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 2rem;
    border-radius: 50%;
    background: var(--color-lime);
    color: var(--color-black);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 2;
    vertical-align: 0.18em;
        padding: 13px 17px 16px;
    transition: background-color 200ms ease, transform 250ms ease;
}
.site-header .nav .menu-item-has-children > a:hover::after {
    transform: scale(1.08);
}
/* active → rotate the "+" 45° so it becomes "×", animated by the transition */
.site-header .nav .menu-item-has-children > a.sub-menu-active::after {
    transform: rotate(45deg);
}
.site-header .nav .menu-item-has-children > a.sub-menu-active:hover::after {
    transform: rotate(45deg) scale(1.08);
}

.site-header .nav .sub-menu {
    position: static; /* override the desktop popup rule so it pushes items down */
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 250ms ease;
}

.site-header .nav .menu-item-has-children.sub-menu-active > .sub-menu {
    max-height: 900px;
}

.site-header .nav .sub-menu li {
    display: block;
    width: auto;
    white-space: normal;
}

.site-header .nav .sub-menu li a {
    display: block;
    padding: 0;
    font-family: 'Gotham', 'Inter', sans-serif;
    font-style: normal;
    text-transform: none;
    font-size: 24px;
    font-weight: 700;
    line-height: 37px; /* 154.167% */
    letter-spacing: 0.24px;
    color: var(--color-black);
}
.site-header .nav .sub-menu li a:hover {
    color: var(--color-white);
    opacity: 1;
}


/**********
COOKIE    
**********/

#siteCookie {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    z-index: 30;
    bottom: 0;
    padding: 10px 0;
    width: 100%;
}

#siteCookie,
#siteCookie p,
#siteCookie a,
#siteCookie .fa {
    color: #fff;
    font-weight: 600
}

#siteCookie .inner {
    display: flex;
    align-items: center;
}

#siteCookie p {
    margin-right: 20px
}

#siteCookie .fa {
    font-size: 28px;
    margin-left: auto
}

#siteCookie i {
    cursor: pointer
}







/* Home page hero */
.home-hero {
    min-height: 100vh;
    background-image: url('http://egf.test/wp-content/uploads/2026/06/Mask-group-41-scaled.png');
    background-size: cover;
    background-position: left bottom;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--color-white);
    overflow: hidden;
    padding: 0 2rem;
}




.home-hero__headline {
    text-transform: uppercase;
    text-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.home-hero__headline--accent {
    display: block;
    color: var(--color-pink);
}

.home-hero__copy {
    margin: 2.5rem 0;
    font-size: clamp(18px, calc(16.24px + 0.47vw), 23px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 600px;
}

.home-hero__newsletter-card {
    background: var(--color-lime);
    border-radius: 10px;
    padding: 3rem 2.5rem;
    min-width: 320px;
    color: var(--color-black);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.home-hero__newsletter-label {
    display: block;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-size: clamp(28px, calc(23.77px + 1.13vw), 40px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.home-hero__newsletter-copy {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-top: 0;
}

.home-hero__newsletter-form .gform_wrapper {
    margin: 0;
}

/* Inline: input + arrow button side by side */
.home-hero__newsletter-form form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-hero__newsletter-form .gform_body {
    flex: 1;
    min-width: 0;
}

.home-hero__newsletter-form .gform_footer,
.home-hero__newsletter-form .gform_page_footer {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}

.home-hero__newsletter-form .gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-hero__newsletter-form .gform_fields{
    display: flex;
}

.home-hero__newsletter-form .gfield--type-email {
    width: 70%;
    margin-bottom: 0;
    padding-right: 14px;
}
.home-hero__newsletter-form .gfield--type-submit{
    width: 30%;
}

.home-hero__newsletter-form .gfield_label {
    display: none;
}

.home-hero__newsletter-form input[type="email"],
.home-hero__newsletter-form input[type="text"],
.home-hero__newsletter-form .ginput_container input[type="email"],
.home-hero__newsletter-form .ginput_container input[type="text"] {
    width: 100%;
    border-radius: 99px;
    border: 1px solid #0A0A0A;
    padding: 18px;
    font-size: 14px;
    font-family: 'Inter Tight', sans-serif;
    background: none;
    color: var(--color-black);
    box-sizing: border-box;
}

.home-hero__newsletter-form input[type="email"]::placeholder,
.home-hero__newsletter-form input[type="text"]::placeholder {
    color: #0A0A0A
}

.home-hero__newsletter-form .gform_button,
.home-hero__newsletter-form input[type="submit"] {
    width: 100%;
    height: 52px;
    border-radius:100px;
    background-color: var(--color-black);
    background-image: url('../img/icon-arrow-right-light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    color: transparent;
    font-size: 0;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: opacity 200ms;
}

.home-hero__newsletter-form .gform_button:hover,
.home-hero__newsletter-form input[type="submit"]:hover {
    opacity: 0.8;
}

/* ================================================
   ABOUT INTRO SECTION
   ================================================ */

.about-intro {
    background: #fff;
    padding: 50px 0 100px;
}

/* Collage box — fixed aspect ratio so every tile scales together
   identically across desktop widths and degrades cleanly on mobile */
.about-intro__collage {
    position: relative;
    width: 100%;
    max-width: 721px;
    aspect-ratio: 600 / 540;
}

/* Pink paint splatter behind the tiles, bleeding past the edges */
.about-intro__collage::before {
    content: '';
    position: absolute;
    inset: -8% -6%;
    background: url('../img/paint-bg-pink.svg') no-repeat center / 100% 100%;
    z-index: 0;
}

.about-intro__img {
    position: absolute;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.about-intro__img img,
.about-intro__img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Captain's armband card — top left */
.about-intro__img--card {
    width: 34.83%;
    height: 48.7%;
    top: 1.63%;
    left: 6.33%;
    transform: rotate(-9deg);
    z-index: 4;
}

/* Action photo — top right */
.about-intro__img--action {
    width: 44%;
    height: 29.11%;
    top: -0.22%;
    right: 4.5%;
    transform: rotate(-6deg);
    z-index: 3;
}

/* Group photo — bottom left */
.about-intro__img--group {
    width: 50.5%;
    height: 32.89%;
    bottom: 10.56%;
    left: 2.5%;
    transform: rotate(3deg);
    z-index: 3;
}

/* Video — bottom right */
.about-intro__img--video {
    width: 37.17%;
    height: 52.59%;
    bottom: 12.7%;
    right: 3.33%;
    transform: rotate(2deg);
    z-index: 2;
    background: var(--color-black);
}

/* Circular EGF crest, centered on top of the four tiles */
.about-intro__badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 29.17%;
    aspect-ratio: 1;
    z-index: 6;
}

.about-intro__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Right: text content */
.about-intro__content p {
    text-align: justify;
    margin-bottom: 2.5rem;
}



/* ================================================
   BLOCK: IMPACT STATS — dark section with torn paint edge
   ================================================ */

.impact-stats {
    position: relative;
    background: var(--color-black);
    padding: 90px 0;
    /* reserve space for the half of the paint edge that protrudes below */
    margin-bottom: clamp(40px, 5.5vw, 75px);
}

/* Torn black paint edge. The full stroke is taller than what shows: it sits
   half over the black section (hiding the SVG's torn top) and half protrudes
   below onto the page background, so only the drippy bottom edge is visible. */
.impact-stats::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 47px;
    height: clamp(80px, 11vw, 150px);
    background: url(../img/paint-btm-black.svg) 100% 100%;
    transform: translateY(50%);
    pointer-events: none;
    background-repeat: repeat-x;
}

.impact-stats__title {
    text-align: center;
    margin-bottom: 3.5rem;
}

.impact-stats__value {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-lime);
    text-shadow: var(--shadow-heading-outline);
    margin: 0 0 1rem;
}

.impact-stats__label {
    color: var(--color-white);
    font-weight: 500;
    max-width: 268px;
    padding-bottom: 15px;
}



/* ================================================
   BLOCK: BLUEPRINT — centred image, heading and CTA
   ================================================ */

.blueprint {
    background: var(--color-white);
    margin: 90px 0;
    text-align: center;
}



.blueprint__image {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 0 auto 1.5rem;
}

.blueprint__eyebrow {
    color: var(--color-pink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 0.5rem;
}

/* uses the global p size — only width + spacing here */
.blueprint__copy {
    margin: 1.25rem auto 2.5rem;
}



/* ================================================
   BLOCK: PROGRAMMES — card grid (feature + info cards)
   ================================================ */

.programmes {
    margin: 90px 0;
}

body.elevate-blueprint .programmes,
body.single-elevate-blueprint .programmes {
    margin: 90px 0 -183px;
    position: relative;
    z-index: 13;
}
.programmes__heading {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 31px;
    font-style: italic;
    font-weight: 500;
    line-height: 60px; /* 193.548% */
    text-transform: uppercase;
}

/* Shared card base */
.programme-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-sand);
    border: 1px solid #000;
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-sizing: border-box;
}
.single-elevate-blueprint .programme-card{
    padding: 2rem 2.75rem;
}

.programme-card__badge {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
    margin: 0 auto 1.25rem;
}



.programme-card__meta {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.programme-card__meta li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 14px;
    line-height: 1.4;
}

.programme-card__meta iconify-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--color-black);
}

.programme-card__meta-soon {
    color: var(--color-pink);
    font-weight: 600;
}

/* Buttons pinned to the bottom so they align across cards of differing height */
.programme-card__actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Feature card — full-bleed photo with an overlaid heading */
.programme-card--feature {
    position: relative;
    justify-content: center;
    min-height: 420px;
    padding: 3rem;
    border: none;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}

.programme-card--feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 9, 9, 0.50);
}

.programme-card__overlay-title {
    position: relative;
    z-index: 1; /* lift above the card's gradient so the outline copy shows */
    color: var(--color-white);
    text-shadow: none;
    margin: 0;
}

/* Offset hollow white outline (shows the photo through it — no fill inside).
   text-shadow can't knock out a fill, so we duplicate the text and stroke it.
   Sits behind the solid text but above the gradient. */
.programme-card__overlay-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(7px, 7px);
    color: transparent;
    -webkit-text-stroke: 1px var(--color-white);
    pointer-events: none;
}

/* Feature cards bleed to the viewport edge (same technique as why-elevate).
   Bleed = gap from the 1340px container to the viewport edge + 27px
   (15px container pad + 12px g-4 col pad). Only on desktop, where the feature
   sits at the left/right edge of its row; .block overflow-x:clip trims it. */




/* ================================================
   BLOCK: CURRICULUM — coaching spine diagram
   ================================================ */

.curriculum {
    background: var(--color-white);
    margin: 90px 0;
}

.curriculum__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.curriculum__eyebrow {
    color: var(--color-pink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-h5);
    margin-bottom: 0.5rem;
}

.curriculum__intro {
    margin-bottom: 3.5rem;
}

/* --- diagram layout --- */
.curriculum__diagram {
    display: flex;
    align-items: stretch; /* panels match the hexagon's height */
    justify-content: center;
    gap: 8px;
}

/* The whole panel is clipped into a chevron pointing toward the hexagon,
   parallel to the hexagon's diagonal edges. Head + 5 bars share the height. */
.curriculum__panel {
    flex: 1 1 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.curriculum__panel-head,
.curriculum__list li {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(16px, 1.7vw, 25px);
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 0 2.3rem;
}
.curriculum__panel--in .curriculum__list li:first-child{
    border-top-right-radius: 10px;  
}
.curriculum__panel--out .curriculum__list li:first-child{
    border-top-left-radius: 10px;  
}
.curriculum__list li:last-child{
    border-radius: 0 0 10px 10px;
}
.curriculum__panel-head {
    flex: 1 1 0;
    background: transparent;
    border: 2px solid;
}

.curriculum__list {
    flex: 5 1 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.curriculum__list li {
    flex: 1 1 0;
    color: var(--color-black);
}

/* IN POSSESSION — lime. Straight rectangle; the hexagon overlaps it and its
   black diagonals carve the visible inner edge, so no clip-path is needed. */
.curriculum__panel--in .curriculum__panel-head {
    border: 6px solid var(--color-lime);
    color: var(--color-lime);
}
.curriculum__panel--in .curriculum__list li {
    background: var(--color-lime);
}

/* OUT OF POSSESSION — pink. */
.curriculum__panel--out {
    text-align: right;
}
.curriculum__panel--out .curriculum__panel-head,
.curriculum__panel--out .curriculum__list li {
    justify-content: flex-end;
}
.curriculum__panel--out .curriculum__panel-head {
    border: 6px solid var(--color-pink);
    color: var(--color-pink);
}
.curriculum__panel--out .curriculum__list li {
    background: var(--color-pink);
}

/* --- centre hexagon wheel (inline SVG: rounded corners + white border) --- */
.curriculum__hex {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    width: clamp(340px, 40vw, 600px);
    aspect-ratio: 1.1547; /* regular flat-top hexagon: wider than tall */
    /* overlap the panels up to the hexagon's vertices (~25% of its width)
       so the bars tuck under and the black diagonals carve their inner edge */
    margin-inline: calc(clamp(340px, 40vw, 500px) * -0.35);
    z-index: 2;
}

.curriculum__hex-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible !important; /* let the rounded white stroke show fully */
}

.curriculum__node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    z-index: 2;
}

.curriculum__node-icon {
    width: clamp(28px, 3vw, 40px);
    height: auto;
    margin-bottom: 10px;
}

.curriculum__node-label {
    color: var(--color-white);
    font-size: clamp(8px, 0.8vw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.curriculum__node--positioning { left: 50%;   top: 17.5%; }
.curriculum__node--scanning    { left: 25.5%; top: 34%; }
.curriculum__node--movement     { left: 74.5%; top: 34%; }
.curriculum__node--deception    { left: 25.5%; top: 66%; }
.curriculum__node--techniques   { left: 74.5%; top: 66%; }
.curriculum__node--timing       { left: 50%;   top: 82.5%; }

/* Hover feedback on the hex nodes + possession bars */
.curriculum__node {
    transition: transform 250ms ease;
}
.curriculum__node:hover {
    transform: translate(-50%, -50%) scale(1.15);
}
.curriculum__node-label {
    transition: color 200ms ease;
}
.curriculum__node:hover .curriculum__node-label {
    color: var(--color-lime);
}
.curriculum__node-icon {
    transition: transform 250ms ease;
}
.curriculum__list li {
    transition: filter 200ms ease;
}
.curriculum__list li:hover {
    filter: brightness(0.9);
}

.curriculum__hex-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    aspect-ratio: 1;
    z-index: 3;
}
.curriculum__hex-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- bottom steps --- */
.curriculum__steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 3.5rem;
}

.curriculum__step {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(0.875rem, -0.375rem + 4vw, 2.875rem);
    color: var(--color-black);
}

.curriculum__step-arrow {
    width: clamp(32px, 6vw, 98px);
    height: auto;
}

/* --- outcome box --- */
.curriculum__outcome {
    margin-top: 3.5rem;
    border-radius: 6px;
    padding: clamp(1.75rem, 4vw, 3rem) 2rem;
    text-align: center;
}

.curriculum__outcome-title {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 1rem;
}

.curriculum__outcome p {
    max-width: 1140px;
    margin: 0 auto;
}





/* ================================================
   BLOCK: PHILOSOPHY — Believe / Inspire / Achieve banner
   ================================================ */

.philosophy {
    background-size: cover;
    background-position: center bottom;
    color: var(--color-white);
    padding: clamp(90px, 13vw, 170px) 0;
    height: 80vh;
}

.philosophy__word {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 4rem;
}
.philosophy__word--2 { margin-left: clamp(1.5rem, 7vw, 5.5rem); }
.philosophy__word--3 { margin-left: clamp(3rem, 14vw, 11rem); }

.philosophy__title {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: var(--color-white);
    font-size: clamp(48px, 9vw, 92px);
    line-height: 1;
    text-shadow: none;
    margin: 0;
}

/* hollow white outline offset behind — no dark fill, photo shows through */
.philosophy__title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(6px, 6px);
    color: transparent;
    -webkit-text-stroke: 1px var(--color-white);
    pointer-events: none;
}

.philosophy__plus {
    flex-shrink: 0;
    width: clamp(24px, 2.6vw, 40px);
    height: clamp(24px, 2.6vw, 40px);
    margin-top: 0.35em;
    border: none;
    border-radius: 50%;
    background: var(--color-lime);
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.philosophy__plus::before,
.philosophy__plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-black);
}
.philosophy__plus::before { border-radius: 10px; width: 45%; height: 4px; transform: translate(-50%, -50%); }
.philosophy__plus::after  { border-radius: 10px; width: 4px; height: 45%; transform: translate(-50%, -50%); }

.philosophy__content p {
    color: var(--color-white);
    max-width: 34rem;
    margin: 0 0 2rem;
}



/* ================================================
   BLOCK: WHY ELEVATE EXISTS — text + media grid
   ================================================ */

.why-elevate {
    background: var(--color-white);
    padding: 90px 0;
}

.why-elevate__eyebrow {
    color: var(--color-pink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-h5);
    margin-bottom: 0.5rem;
}

.why-elevate__text p {
    margin: 0 0 1.25rem;
}
.why-elevate__text p:last-child {
    margin-bottom: 0;
}

/* media tiles stretch to their row height; min-height covers the stacked state */
.why-elevate__media {
    margin: 0;
    height: 472px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-black);
}
.why-elevate__media img,
.why-elevate__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* attribution */
.why-elevate__author {
    margin-top: 1.75rem;
    font-size: 15px;
    line-height: 1.5;
}
.why-elevate__author strong {
    display: block;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 0.35rem;
}



/* Mobile / tablet: centred header + eyebrow, justified body, and the
   attribution sits on a pink paint stroke. */


/* Bleed the two flagged tiles out to the viewport edges — at every size,
   since the tiles sit in 2-per-row (mobile) or the 3-col grid (desktop) and
   are always the right/left tile of their row. Bleed = gap from the 1340px
   container to the viewport edge + 27px (15px container pad + 12px g-4 col
   pad). max() floors it at 27px so it never goes negative below 1340px (where
   the container already fills the width). Section overflow-x:clip trims at the edge. */
.why-elevate {
    --we-bleed: var(--bleed-27);
}
.why-elevate__media--bleed-right {
    width: calc(100% + var(--we-bleed));
}
.why-elevate__media--bleed-left {
    width: calc(100% + var(--we-bleed));
    margin-left: calc(-1 * var(--we-bleed));
}

/* ================================================
   BLOCK: SCHOOL SUPPORT & CLUBS
   ================================================ */

.school-support {
    background: var(--color-white);
    padding: 90px 0;
}

.school-support__intro {
    margin-bottom: 2rem;
}

/* 4 cards in a 2×2 grid; CTA tucks into the right column below card 4 */
.school-support__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch; /* cards in a row match heights (no gap under the short one) */
}

.school-support__card {
    border: 1px solid #0A0A0A;
    border-radius: 14px;
    padding: 1.5rem;
}
.school-support__card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.school-support__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--color-lime);
}
.school-support__check img {
    width: 26px;
    height: auto;
    display: block;
}

/* card 4 + CTA stacked in one grid cell so the button tucks under card 4 */
.school-support__cell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.school-support__media img {
    display: block;
    width: 100%;
    height: auto;
}











/* ================================================
   BLOCK: BLUEPRINT INTRO — centred intro + icon features
   ================================================ */

.blueprint-intro {
   
    background-color: var(--color-white);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: clamp(660px, 48vw, 820px);
    padding: clamp(70px, 10vw, 110px) 0;
    text-align: center;
}

.blueprint-intro__lead {
    max-width: 1240;
    margin: 0 auto 2.5rem;
    font-size: clamp(18px, calc(16.24px + 0.47vw), 22px);
    line-height: 1.5;
}

.blueprint-intro__sub {
    font-weight: 700;
    margin: 0 0 3rem;
}

.blueprint-intro__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.blueprint-intro__icon {
    display: inline-flex;
    color: var(--color-pink);
    font-size: clamp(44px, 5vw, 56px);
}
.blueprint-intro__icon img {
    width: clamp(44px, 5vw, 56px);
    height: clamp(44px, 5vw, 56px);
    object-fit: contain;
    margin-bottom: 1.5rem;
}
.blueprint-intro__features{
    margin-top: 4rem;
}
.blueprint-intro__label {
    margin: 0;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.1rem + 1vw, 1.95rem);
    line-height: 1.1;
}

/* ================================================
   BLOCK: PATHWAY — Believe / Inspire / Achieve
   ================================================ */

.pathway {
    position: relative;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: clamp(30px, 4vw, 60px) 0;
    margin-top: clamp(80px, 120vw, 250px);
    margin-bottom: 350px;    
}

/* torn edges — overhang into the reserved margins so the light page bg shows
   between the black drips (black-on-black inside the section can't show) */
.pathway::before,
.pathway::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(80px, 10vw, 140px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.pathway::before {
    bottom: 100%;
    background-image: url(../img/paint-top-black.svg);
    background-position: top center;
    background-repeat: repeat-x;
    background-size: auto;
    width: 100%;
}
.pathway::after {
    bottom: -90px;
    background-image: url('../img/paint-btm-black.svg');
    background-position: bottom center;
     background-repeat: repeat-x;
    background-size: auto;
    width: 100%;
}

/* compact, centred diagram (sits above the torn edges) */
.pathway__grid {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(150px, 210px) 1fr;
    grid-template-areas:
        "c1 center c2"
        "c3 center c4";
    column-gap: clamp(0.75rem, 2.5vw, 2rem);
    row-gap: 2rem;
    align-items: start;
}

.pathway__card--c1 { grid-area: c1; }
.pathway__card--c2 { grid-area: c2; }
.pathway__card--c3 { grid-area: c3; }
.pathway__card--c4 { grid-area: c4; }

/* the four photos overlap outward into the torn edges — top pair up, bottom pair down */
.pathway__card--c1,
.pathway__card--c2 {
    transform: translateY(clamp(-110px, -9vw, -60px));
    margin-top: -200px
}
.pathway__card--c3,
.pathway__card--c4 {
    transform: translateY(clamp(60px, 9vw, 110px));
    margin-bottom: -200px
}

/* cards */
.pathway__card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* bottom cards: title + description on top, photo below */
.pathway__card--c3 .pathway__photo,
.pathway__card--c4 .pathway__photo {
    order: 3;
    margin: 3rem auto 0;
}
.pathway__card--c1 .pathway__photo{
    transform: rotate(356deg);
}
.pathway__card--c2 .pathway__photo{
    transform: rotate(8deg);
}
.pathway__card--c3 .pathway__photo{
    transform: rotate(4deg);
}
.pathway__card--c4 .pathway__photo{
    transform: rotate(356deg);
}
.pathway__photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    height: 400px;
    margin: 0 auto 3rem;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}
.pathway__badge {
    width: 46%;
    max-width: 130px;
    height: auto;
}
.pathway__title {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 100% */
    color: var(--color-white);
    max-width: 265px;
    margin: 1rem auto 1.5rem;
}
.pathway__desc {
    max-width: 285px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

/* centre flow */
.pathway__center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
    height: 100%;
}
.pathway__word {
    margin: 0;
    color: var(--color-pink);
    text-shadow: var(--shadow-heading-outline);
    font-size: clamp(50px, 6vw, 65px);
    line-height: 1;
}

.pathway__arrows {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
}
.pathway__arrow {
    width: clamp(48px, 7vw, 158px);
    height: auto;
}
.pathway__arrow--down {
    width: clamp(24px, 6vw, 107px);
    align-self: center;
}





/* ================================================
   SITE FOOTER
   ================================================ */

.footer {
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
    color: var(--color-white);
    /* top padding clears the masked torn edge baked into the bg image */
    padding: clamp(120px, 16vw, 220px) 0 2.5rem;
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

body.page-template-template-contact .footer {
    min-height: 600px;
}

.footer__cards {
    margin-bottom: 3rem;
}

.footer__card {
    height: 100%;
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 3rem);
    box-sizing: border-box;
}

/* Follow card */
.footer__follow {
    border-radius: 10px;
background: rgba(255, 255, 255, 0.10);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer__logo {
    width: 110px;
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
}
.footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--color-white);
    font-weight: 600;
    font-size: 18px;
}
.footer__social:hover {
    color: var(--color-pink);
    opacity: 1;
}
.footer__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-pink);
    font-size: 18px;
    colr: var(--color-white);
}
.footer__social-icon iconify-icon {
    font-size: 24px;
    color: var(--color-white);
}

/* Contact card */
.footer__contact {
    background: var(--color-pink);
    color: var(--color-black);
}
.footer__contact .footer__heading {
    color: var(--color-white);
    text-shadow: none;
    text-align: center;
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 3.5rem;
}
.footer__form{
    max-width: 438px;
    margin: 0 auto;
}

/* shared footer heading (uses .display-heading for font + shadow, resized) */
.footer__heading {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    margin: 0 0 1.5rem;
}
.footer__follow .footer__heading {
    color: var(--color-white);
    text-shadow: none;
}

/* contact form (Gravity Form id 2) */
.footer__form .gform_wrapper {
    margin: 0;
}
.footer__form .gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.footer__form .gfield_label {
    display: none; /* placeholders carry the labels */
}
.footer__form input[type="text"],
.footer__form input[type="email"],
.footer__form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-black);
    border-radius: 99px;
    background: none;
    padding: 1.5rem 1.4rem;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-black);
}
.footer__form textarea {
    border-radius: 20px;
    resize: vertical;
}
.footer__form textarea:focus{
    outline: none;
}
.footer__form input::placeholder,
.footer__form textarea::placeholder {
    color: var(--color-black);
    opacity: 0.7;
}

/* submit styled as the outline arrow button (input can't use ::after, so
   the arrow is a background image on the right) */
/* GF validation error heading — plain Inter, no display-heading styling */
.footer__form h2 {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: var(--color-error);
    margin: 0 0 1rem;
}
.gfield_validation_message{
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: var(--color-error);
}

/* submit — solid black pill, centered, white text + light arrow */
.footer__form .gform_footer {
    padding: 0;
    margin: 1.25rem 0 0;
    text-align: center;
}
.footer__form .gform_button {
    display: inline-block;
    border: none;
    border-radius: 100px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-btn);
    font-weight: 700;
    letter-spacing: var(--ls-btn);
    text-transform: uppercase;
    padding: 1.5rem 4.6rem 1.5rem 3.4rem;
    cursor: pointer;
    background-image: url('../img/icon-arrow-right-light.svg');
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 24px 12px;
    transition: opacity 200ms;
    width: 188px;
}
.footer__form .gform_button:hover {
    opacity: 0.85;
}
.gform_submission_error{
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal !important;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: var(--color-error);
    margin: 0 0 2rem;
}
.gform_confirmation_message{
    font-weight: 500;
}
/* footer nav */
.footer__nav {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}
.footer__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
}
.footer__menu a {
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    font-weight: 600;
}
.footer__menu a:hover {
    color: var(--color-pink);
    opacity: 1;
}

/* bottom bar */
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
}
.footer__copyright {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
.footer__privacy {
    color: rgba(255, 255, 255, 0.7);
}
.footer__privacy:hover {
    color: var(--color-pink);
    opacity: 1;
}



/* ================================================
   BLOCK: IMAGE SLIDER — reusable centre-mode photo carousel
   ================================================ */

.image-slider {
    background: var(--color-white);
    margin: 90px 0;
    overflow-x: clip;
}

.image-slider__intro {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.image-slider__heading {
    margin-bottom: 1.5rem;
}

.image-slider__copy p {
    margin: 0 0 1rem;
}
.image-slider__copy p:last-child {
    margin-bottom: 0;
}

.image-slider__track {
    margin-top: 3.5rem;
}

.image-slider__slide {
    padding: 0 12px;
}

.image-slider__photo {
    aspect-ratio: 15 / 7;
    border-radius: 12px;
    overflow: hidden;
}

/* Peeking side slides sit slightly recessed; the centre one is full-strength */
.image-slider__track .slick-slide {
    /* opacity: 0.55; */
    transition: opacity 300ms ease;
}

.image-slider__track .slick-center {
    opacity: 1;
}

/* Arrows overlaid on the peeking side slides */
.image-slider__track .slick-prev,
.image-slider__track .slick-next {
    z-index: 3;
    width: 48px;
    height: 48px;
}
.image-slider__track .slick-prev {
    left: 30px;
}
.image-slider__track .slick-next {
    right: 30px;
}
.image-slider__track .slick-prev::before,
.image-slider__track .slick-next::before {
    font-size: 40px;
    opacity: 0.95;
    color: var(--color-white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Light SVG arrows — add .arrows-light to the track */
.image-slider__track.arrows-light .slick-prev::before,
.image-slider__track.arrows-light .slick-next::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    background: no-repeat center / contain;
    text-shadow: none;
    opacity: 1;
}
.image-slider__track.arrows-light .slick-prev::before {
    background-image: url('../img/slick-arrow-left-light.svg');
}
.image-slider__track.arrows-light .slick-next::before {
    background-image: url('../img/slick-arrow-right-light.svg');
}



/* ================================================
   BLOCK: CONTENT COLLAGE — text + 2×2 collage on paint splash
   Reusable: any heading/copy/CTA + a 4-photo collage with badge.
   ================================================ */

.content-collage {
    position: relative;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    background-position: -160px center;
    background-size: auto 85%;
    margin: 90px 0;
    overflow-x: clip;
}
.content-collage .container {
    position: relative;
    z-index: 1;
}

/* Post variant: the badge doubles as a faded background watermark */
.content-collage__watermark {
    position: absolute;
    top: 50px;
    left: -235px;
    transform: translateY(-50%);
    width: min(620px, 60%);
    height: 90%;
    background: no-repeat center / contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.content-collage__heading,
.image-slider h2,
.gains h2,
.sets-apart h2{
    margin-bottom: 1.75rem;
    text-shadow: none;
    font-size: var(--fs-h3);
    line-height:var(--lh-h3);
}

.content-collage__copy p {
    margin: 0 0 1.25rem;
}
.content-collage__copy p:last-child {
    margin-bottom: 0;
}

/* Meta card (date / location / price) — light rounded panel */
.content-collage__meta {
    list-style: none;
    margin: 2.5rem 0;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-sand);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.content-collage__meta li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: var(--fs-body);
    line-height: 1.4;
}
.content-collage__meta-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-black);
    font-size: 20px;
}

.content-collage__cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.content-collage__cta-label {
    font-weight: 700;
    font-size: var(--fs-body);
}

/* Collage: staggered 2-column mosaic over a pink paint splash.
   The four photos get different heights and offset start rows so no two
   are the same size (see the design guide). */
.content-collage__collage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: clamp(42px, 6vw, 42px);
    gap: 14px;
    max-width: 650px;
    margin: 0 auto;
    padding: 3rem;
}

/* Pink paint splash sits behind the photos, overhanging the grid */
.content-collage__collage::before {
    content: '';
    position: absolute;
    inset: -6% -8%;
    background: url('../img/paint-bg-pink.svg') no-repeat center / 100% 100%;
    z-index: 0;
}

.content-collage__img {
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}

/* Varied sizes + vertical offsets. Right column starts a row lower than the
   left; each photo spans a different number of rows. */
.content-collage__img:nth-of-type(1) { grid-column: 1; grid-row: 1 / span 6; }
.content-collage__img:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 4; }
.content-collage__img:nth-of-type(3) { grid-column: 1; grid-row: 7 / span 4; }
.content-collage__img:nth-of-type(4) { grid-column: 2; grid-row: 5 / span 6; }

/* Centred circular badge where the four photos meet */
.content-collage__badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: clamp(120px, 16vw, 200px);
    border-radius: 100%;
    background: #fff;
    padding: 2px;
}
.content-collage__badge img {
    display: block;
    width: 100%;
    height: auto;
}





/* ================================================
   BLOCK: GAINS — "What You'll Gain" radial diagram
   ================================================ */

.gains {
    background-color: var(--color-sand);
    padding: 90px 0;
    overflow-x: clip;
}
.single-elevate-blueprint .image-slider{
    padding: 90px 0 0;
    margin-bottom: 0;
    background-color: var(--color-sand);

}
.gains__heading {
    text-align: center;
    margin-bottom: 3.5rem;
}

/* 3-column layout: items | centre badge | items, over the pentagon backdrop */
.gains__diagram {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 8rem);
    background: url('../template-parts/blocks/elevate-bg.svg') no-repeat center center;
    background-size: clamp(320px, 42vw, 560px) auto;
}

.gains__col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-self: stretch;
    padding: clamp(1rem, 3vw, 3rem) 0;
}

.gains__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
/* Left column mirrors: icon nearest the centre */
.gains__col--left .gains__item {
    flex-direction: row-reverse;
}

/* Hexagonal arrangement: middle item sits furthest out, top & bottom items
   are pulled in toward the centre badge. */
.gains__col--left .gains__item:nth-child(1),
.gains__col--left .gains__item:nth-child(3) {
    transform: translateX(clamp(20px, 4vw, 70px));
}
.gains__col--right .gains__item:nth-child(1),
.gains__col--right .gains__item:nth-child(3) {
    transform: translateX(clamp(-70px, -4vw, -20px));
}

.gains__icon {
    position: relative;
    flex-shrink: 0;
    width: clamp(58px, 7vw, 88px);
    height: clamp(58px, 7vw, 88px);
    border-radius: 50%;
    background: var(--color-black);
    box-shadow: 0 0 0 3px var(--color-pink);
    display: grid;
    place-items: center;
}
.gains__icon img {
    width: 55%;
    height: 55%;
    object-fit: contain;
}

/* Faint dashed spoke from each icon toward the centre badge */
.gains__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: clamp(28px, 6vw, 90px);
    border-top: 1.5px dashed rgba(10, 10, 10, 0.25);
}
.gains__col--left .gains__icon::after {
    left: calc(100% + 3px);
    transform-origin: left center;
}
.gains__col--right .gains__icon::after {
    right: calc(100% + 3px);
    transform-origin: right center;
}
.gains__col--left .gains__item:nth-child(1) .gains__icon::after { transform: rotate(28deg); }
.gains__col--left .gains__item:nth-child(3) .gains__icon::after { transform: rotate(-28deg); }
.gains__col--right .gains__item:nth-child(1) .gains__icon::after { transform: rotate(-28deg); }
.gains__col--right .gains__item:nth-child(3) .gains__icon::after { transform: rotate(28deg); }

.gains__text {
    margin: 0;
    max-width: 240px;
    text-align: center;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.4;
}

.gains__center {
    display: grid;
    place-items: center;
    background: var(--color-pink);
    border-radius: 999px;
    padding: 4px;
}
.gains__badge {
    width: clamp(150px, 20vw, 240px);
    height: auto;
    display: block;
}

/* Stack the columns under the badge on tablet/mobile */




/* ================================================
   CONTACT US PAGE — map + info card + pink form card
   The form card reuses .footer__card / .footer__contact / .footer__form.
   ================================================ */

.contact {
    padding: clamp(40px, 6vw, 80px) 0;
    background: var(--color-white);
}

.contact__map {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    line-height: 0;
}
.contact__map iframe {
    display: block;
    width: 100%;
    height: clamp(300px, 40vw, 460px);
    border: 0;
}

/* Address / details card */
.contact__info {
    height: 100%;
    background: var(--color-sand);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 3rem);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: 100%;
}
.contact__list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: var(--fs-body);
    line-height: 1.5;
}
.contact__list a {
    color: inherit;
}
.contact__list a:hover {
    color: var(--color-pink);
    opacity: 1;
}
.contact__icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-pink);
    font-size: 22px;
    line-height: 1.5;
}

/* Form card: keep the footer heading left-aligned isn't needed — the shared
   .footer__contact rules already centre "Contact Us Today" and style the form */
.contact__form-card {
    border-radius: 20px;
}

/* ================================================
   VISION & PHILOSOPHY — shared typography for the
   Believe / Inspire / Achieve section blocks
   ================================================ */

.vp-word {
    display: block;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(48px, 7vw, 90px);
    line-height: 1;
    margin: 0 0 2rem;
}
.vp-word--pink  { color: var(--color-pink); }
.vp-word--lime  { color: var(--color-lime); }
.vp-word--white { color: var(--color-white); }

.vp-sub {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(18px, 2vw, 26px);
    margin: 0 0 1.25rem;
    
}
.inspire .vp-sub,
.achieve .vp-sub{
    color: var(--color-white);
}
.vp-copy {
    max-width: 520px;
}

/* Word shadow keys off the band background: light → filled ring, dark → hollow */
.believe .vp-word {
    text-shadow: var(--shadow-heading);
}
.inspire .vp-word {
    text-shadow: var(--shadow-heading-outline);
}
/* Achieve sits on a photo: white text + a hollow white-outline offset behind
   it (same treatment as the page-banner title — no black anywhere). */
.achieve .vp-word {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: var(--color-white);
    text-shadow: none;
}
.achieve .vp-word--outline::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(6px, 6px);
    color: transparent;
    -webkit-text-stroke: 1px var(--color-white);
    pointer-events: none;
}

/* ================================================
   BLOCK: BELIEVE — light band, text left / photo right
   ================================================ */

.believe {
    position: relative;
    background: var(--color-white);
    color: var(--color-black);
    padding: clamp(50px, 8vw, 110px) 0;
    overflow-x: clip;
    min-height: 770px;
    display: flex;
    align-items: center;
}
.believe .container {
    position: relative;
    z-index: 1;
}
.believe__watermark {
   position: absolute;
    top: -24%;
    left: -15%;
    transform: translateY(-50%);
    width: min(533px, 205%);
    height: 548px;
    background: no-repeat left center / contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: -1;
}
/* Full image, uncropped (the torn edges are baked into the PNG) */
.believe__main {
    display: block;
    width: 100%;
    height: auto;
}
/* Pin the photo to the viewport's right edge (the section is full-width) */

/* Rotated corner photo, spilling into the next band */
.believe__secondary {
    position: absolute;
    z-index: 3;
    left: clamp(10px, 3vw, 60px);
    bottom: clamp(-90px, -6vw, -50px);
    width: clamp(220px, 26vw, 360px);
    aspect-ratio: 4 / 3;
    border: 6px solid var(--color-white);
    border-radius: 6px;
    transform: rotate(-5deg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

/* ================================================
   BLOCK: INSPIRE — dark band, centred text + flanking photos
   ================================================ */

.inspire {
    position: relative;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: clamp(70px, 10vw, 150px) 0;
    margin: clamp(90px, 15vw, 140px) 0;
    overflow-x: clip;
    /* distance from the viewport edge to the 1340px container's inner edge */
    --edge: var(--bleed-15);
}
.inspire::before,
.inspire::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(80px, 10vw, 140px);
    background-repeat: repeat-x;
    pointer-events: none;
}
.inspire::before {
    bottom: 100%;
    background-image: url('../img/paint-top-black.svg');
    background-position: top center;
}
.inspire::after {
    top: 96%;
    background-image: url('../img/paint-btm-black.svg');
    background-position: bottom center;
}
.inspire .container {
    position: relative;
    z-index: 2;
}
.inspire__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.inspire__inner .vp-copy {
    max-width: 609px;
    margin: 0 auto;
}
.inspire__inner .vp-copy p,
.achieve .vp-copy p{
    color: var(--color-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}
.inspire__deco {
    display: block;
    max-width: 100%;
    margin: 2rem auto 0;
}
/* Flanking rotated photos */
.inspire__photo {
    position: absolute;
    z-index: 1;
    width: clamp(220px, 22vw, 320px);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
background: #FFF;
box-shadow: var(--shadow-card);
background-size: cover;
background-repeat: no-repeat;
}
.inspire__photo--left {
    top: clamp(-40px, -3vw, 0px);
    left: var(--edge);
    transform: rotate(-6deg);
    margin-top: -250px;
}
.inspire__photo--right {
    bottom: clamp(-40px, -3vw, 20px);
    right: var(--edge);
    transform: rotate(6deg);
    margin-bottom: -250px;
}

/* ================================================
   BLOCK: ACHIEVE — dark band, full-width photo + text row
   ================================================ */

.achieve {
    position: relative;
    background-size: 1440px;
    background-repeat: repeat-x;
    background-position: center bottom;
    color: var(--color-white);
    padding-bottom: 218px;
    overflow-x: clip;
    margin-bottom: -348px;
    min-height: 100vh;
    display: flex;
    align-items:end;
}
/* Main image is now the section background (see .achieve); the flex align-end
   above drops the text to the bottom, over the lower (pitch) area. */
.achieve__row {
    margin-top: 0;
}
.achieve .container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.achieve__body .vp-copy {
    margin-left: auto;
}

/* ---- responsive: neutralise the desktop-only fixed heights / overlaps ---- */


/* Small phones — tighten the big vertical rhythm a touch */


/* ================================================
   BLOCK: WHAT SETS ELEVATE APART — title + zig-zag rows
   ================================================ */

.sets-apart {
    background-color: var(--color-sand);
    /* Fixed brush art: green stroke top, pink stroke diagonally across */
    background-image: url('../img/brush-green.png'), url('../img/brush-pink.png');
    background-repeat: no-repeat, no-repeat;
    background-position: -506px -149px, 360px 64%;
    background-size: 1375px auto, 1300px auto;
    padding: clamp(50px, 8vw, 110px) 0;
    overflow-x: clip;
}

.sets-apart__heading {
    text-align: center;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.sets-apart__row {
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.sets-apart__row:last-child {
    margin-bottom: 0;
}

/* Pre-clipped image clusters — shown whole, uncropped */
.sets-apart__img {
    display: block;
    width: 100%;
    height: auto;
}

.sets-apart__row-title {
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.05;
    margin: 0 0 1.25rem;
}

.sets-apart__copy {
    max-width: 520px;
}



/* ================================================
   BLOCK: REVIEWS — static grid of quote + name cards
   (content comes from the ACF Options page)
   ================================================ */

.reviews {
    background: var(--color-white);
    padding: clamp(50px, 8vw, 110px) 0;
    overflow-x: clip;
}

.reviews__heading {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Cards split either side of a centred portrait video */
/* All review cards stacked in the left column; video fills the right,
   stretching to the full height of the cards column. */
.reviews__layout {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 420px);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
}
.reviews__col {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.reviews__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    background: var(--color-black);
}

.reviews__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--color-sand);
    border-radius: 18px;
    padding: 35px;
    box-sizing: border-box;
}

/* Decorative opening quote mark (quote.svg) */
.reviews__quote {
    position: relative;
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.6;
}
.reviews__quote::before {
    content: '';
    display: block;
    width: 34px;
    height: 26px;
    margin-bottom: 1rem;
    background: url('../img/quote.svg') no-repeat left top / contain;
}



.reviews__name {
    margin: auto 0 0;
    font-family: 'Gotham Ultra', 'Gotham', sans-serif;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 16px;
    color: var(--color-pink);
}

/* ============================================================
   RESPONSIVE — media queries (widest to narrowest)
   ============================================================ */

@media (min-width: 1441px) {
    .sets-apart
    {
        background-position: -506px -149px, 100% 64% !important;
    }
}

@media (max-width: 1440px) {
    .philosophy{
        background-size: cover;
    }
}

@media only screen and (min-width: 1140px) {
    
    /**********
    COLUMNS
    **********/
    .twoCol {
        width: calc(100% + 30px);
        position: relative;
        left: -15px;
    }
    .twoCol .col {
        width: 50%;
        padding: 15px;
    }
    .threeCol .col {
        width: 33.33%;
        padding: 15px;
    }
    .fourCol .col {
        width: 25%;
        padding: 15px;
    }
    .fiveCol .col {
        width: 20%;
        padding: 15px;
    }
    /**********
    submenu popup
    **********/
    nav.nav .sub-menu {
        max-height: 0;
        overflow: hidden;
        position: absolute;
        flex-wrap: wrap;
        transition: all 200ms;
    }
    .menu-item-has-children::after {}
    nav.nav .menu-item-has-children.sub-menu-active>.sub-menu {
        max-height: 900px;
    }
    nav.nav .sub-menu li {
        width: 100%;
        margin-left: 0;
        display: inline-block;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 1140px) {
    .flex {
        flex-wrap: wrap;
    }
    .menu-item-has-children::after {
        position: absolute;
        right: 0;
    }
}

@media (max-width: 1024px) {
    .home-hero__newsletter-card {
        min-width: auto;
    }
    .site-header__logo img {
        height: 58px;
    }
}

@media (min-width: 992px) {
    .home-hero__inner{
        margin-top: 150px;
    }

    .programmes .row{
        max-width: 1240px;
        margin: 0 auto;
    }
    .content-collage__content{
        padding-left: 70px;
    }
    .programmes {
        --pf-bleed: var(--bleed-27);
    }
    /* Bleed the photo to the edge, but pad the bled side so the overlay text
       stays within the container bounds. */
    .programme-card--feature.programme-card--bleed-right {
        width: calc(100% + var(--pf-bleed));
        padding-right: calc(2rem + var(--pf-bleed));
    }
    .programme-card--feature.programme-card--bleed-left {
        width: calc(100% + var(--pf-bleed));
        margin-left: calc(-1 * var(--pf-bleed));
        padding-left: calc(3rem + var(--pf-bleed));
    }
    .why-elevate__author{
        position: relative;
        z-index: 0; /* own stacking context so the -1 brush stays above the section bg */
    }
    .why-elevate__author::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url('../img/paint-text-bg-pink.svg') no-repeat center / 100% 100%;
    }
    .why-elevate__author{
        margin-top: 3rem !important;
        padding: 20px 20px 20px 80px;
    }
    body.elevate-blueprint .blueprint-intro{
     margin-top: -26px;
}
   
   main section:last-child {
      
        margin-bottom: -149px;
        position: relative;
        z-index: 1;
    }
     section.achieve {
        margin-top: -311px;
        margin-bottom: -311px !important;
    }

    
    .believe__media {
         position: absolute;
        top: 37%;
        right: -44px;
        transform: translateY(-50%);
        width: 100%;
        max-width: 725px;
        margin: 0;
        padding: 0;
        z-index: -1;
    }
    .believe__main {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 991px) {
    .philosophy{
        margin-bottom: 0 !important;
    }
    /* Tabbed layout: hexagon on top, two tabs, then the active list.
       display:contents flattens the panels so head + list become grid items. */
    .curriculum__diagram {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "hex  hex"
            "tab1 tab2"
            "pane pane";
        column-gap: 8px;
        row-gap: 0.5rem;
        align-items: start;
    }
    .school-support__content{
        order: 2;
    }

    .curriculum__panel--in,
    .curriculum__panel--out {
        display: contents;
        
    }

    .curriculum__hex {
        grid-area: hex;
        justify-self: center;
        width: min(360px, 90vw);
        margin: 0 auto 1rem;
    }

    /* Tabs (the two panel headers) */
    .curriculum__panel--in .curriculum__panel-head  { grid-area: tab1; }
    .curriculum__panel--out .curriculum__panel-head { grid-area: tab2; }

    .curriculum__panel--in .curriculum__panel-head,
    .curriculum__panel--out .curriculum__panel-head {
        flex: 0 0 auto;
        cursor: pointer;
        justify-content: center;
        text-align: center;
        padding: 1rem 2rem;
        user-select: none;
        height: 50px;
    }
    .curriculum__panel--in .curriculum__panel-head{
        border:none;
         color: #74A900;
    }
    .curriculum__panel--in .curriculum__panel-head.is-active {
        background: var(--color-lime);
        color: #74A900;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        border-radius: 100px 100px 0px 0px;
        
    }
    .curriculum__panel--out .curriculum__panel-head{
        border:none;
        color: var(--color-pink);
    }
    
    .curriculum__panel--out .curriculum__panel-head.is-active {
        background: var(--color-pink);
        color: #fff;
        border-radius: 100px 100px 0px 0px;
    }

    /* Panes: both stay stacked in the one grid cell and crossfade on switch
       (display can't transition, so we toggle opacity/visibility instead) */
    .curriculum__panel--in .curriculum__list,
    .curriculum__panel--out .curriculum__list {
        grid-area: pane;
        clip-path: none;
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
        pointer-events: none;
    }
    .curriculum__panel--in .curriculum__list.is-active,
    .curriculum__panel--out .curriculum__list.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    .curriculum__panel--in .curriculum__list li,
    .curriculum__panel--out .curriculum__list li {
        flex: 0 0 auto;
        justify-content: center;
        text-align: center;
        padding: 1.1rem 1.6rem;
    }
    .philosophy__content {
        margin-top: 2.5rem;
    }
    .why-elevate__media{
        height: 240px;
    }
    .why-elevate__intro {
        text-align: center;
    }
    .why-elevate__intro p:not([class]) {
        text-align: justify;
    }
    .why-elevate__text--quote > p:not(.why-elevate__author) {
        text-align: justify;
    }
    .why-elevate__author {
        position: relative;
        z-index: 1;
        text-align: center;
        margin-top: 3.5rem !important;
        padding: 2.5rem 4.5rem;
    }
    .why-elevate__author::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url('../img/paint-text-bg-pink-mobile.svg') no-repeat center / 100% 100%;
    }
    .pathway::after {
        bottom: -70px;
    }
    /* Top cards, then the Believe/Inspire/Achieve flow, then bottom cards.
       Stretch so both cards in a row are the same height. */
    .pathway__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "c1 c2"
            "center center"
            "c3 c4";
        column-gap: 1rem;
        row-gap: 1.5rem;
        align-items: stretch;
    }
    /* Drop the desktop torn-edge overlaps so cards sit in a clean 2×2 grid */
    .pathway__card--c1,
    .pathway__card--c2,
    .pathway__card--c3,
    .pathway__card--c4 {
        transform: none;
        margin-top: 0;
        margin-bottom: 0;
    }
    /* Square, responsive photos (drop the fixed 400px height) */
    .pathway__photo {
        height: auto;
        max-width: 100%;
        margin: 0 auto 1.25rem;
    }
    /* Bottom cards: push the photo to the card bottom so the two align even
       when their text differs in length */
    .pathway__card--c3 .pathway__photo,
    .pathway__card--c4 .pathway__photo {
        margin: auto auto 0;
    }
    .pathway__center {
        margin: 0.5rem 0;
    }
    .content-collage {
        background-image: none !important;
    }
    .content-collage__watermark {
        display: none;
    }
    .content-collage__collage {
        margin-top: 2.5rem;
    }
    .content-collage__collage{
        padding-left: 0;
        padding-right: 0;
    }
    .content-collage__content{
        order: 1;
        text-align: center;
    }
    .gains__diagram {
        grid-template-columns: 1fr;
        background-size: clamp(240px, 60vw, 360px) auto;
        gap: 2.5rem;
    }
    .gains__center {
        order: -1;
    }
    .gains__col {
        gap: 2rem;
        padding: 0;
    }
    .gains__col--left .gains__item {
        flex-direction: row;
    }
    /* Drop the hexagon offsets and spokes once stacked */
    .gains__item {
        transform: none !important;
    }
    .gains__icon::after {
        display: none;
    }
    .vp-copy{
        margin: auto;
    }
    .believe__media{
        padding: 0;
    }

    /* BELIEVE — natural height, plain stacked flow (no fixed 770px / centring) */
    .believe {
        min-height: 0;
        display: block;
    }
    .believe__watermark {
        display: none;
    }
    .believe__main {
        margin-top: 2rem;
    }
    .believe__secondary {
        position: relative;
        left: auto;
        bottom: auto;
        width: clamp(180px, 55vw, 300px);
        margin: 1.5rem auto 0;
        transform: rotate(-4deg);
    }

    /* INSPIRE — stack in reading order: top photo, text, bottom photo, balls.
       Flex + order interleaves them (the deco is a direct child of .inspire). */
    .inspire {
        margin: 80px 0;
        display: flex;
        flex-direction: column;
    }
    .inspire__photo {
        position: relative;
        display: block;
        width: min(320px, 80%);
        inset: auto;
        margin: 2rem auto 0;
        transform: rotate(-4deg);
    }
    .inspire__photo--left  { 
        order: 1;
        margin-top: -239px;
        margin-bottom: 24px;
        max-width: 240px;
     }
    .inspire .container    { order: 2; }
    .inspire__photo--right { 
        order: 3; 
        transform: rotate(4deg); 
        margin-bottom: -239px;
        margin-top: 24px;
        max-width: 240px;
    }
    .inspire__deco         { order: 4; margin-top: 2.5rem; }

    /* ACHIEVE — drop the full-viewport height and the footer-overlap margin
       so the background photo + text sit cleanly without pulling the footer up */
    .achieve {
        min-height: 1239px;
        margin-bottom: -131px;
        padding-bottom: 50px;
        position: relative;
        margin-top: -114px;
        z-index: -1;
    }
    .achieve__row{
        margin-bottom: 50px;
    }
    .achieve .vp-word,
    .believe .vp-word{
        margin-bottom: 1.5rem;
    }
    .believe .container{
        padding-right: 0;
        padding-left: 0;
    }
    .believe__content{
        padding-right: 15px;
        padding-left: 15px;
    }
    .believe__content,
    .achieve__row{
        text-align: center;
    }
    .achieve__body,
     .achieve__body p{
        margin-top: 0;
    }
    .achieve__body .vp-copy {
        margin: auto
    }
    /* Image always above the text once stacked, regardless of side */
    .sets-apart__img {
        max-width: 460px;
        margin: 0 auto 1.5rem;
    }
    .sets-apart__copy {
        max-width: none;
    }
    /* Stack: cards, then video */
    .reviews__layout {
        grid-template-columns: 1fr;
    }
    .reviews__video {
        max-width: 340px;
        margin: 0 auto;
    }
    .reviews__video video {
        height: auto;
        aspect-ratio: 9 / 16;
    }
}

@media (max-width: 767px) {
    .btn-paint {
        font-size: 22px;
        line-height: 40px;
        padding: 0.6rem 2rem;
    }
    .about-intro {
        padding: 60px 0;
    }
    .btn-paint{
        font-size: 22px;
        line-height: 60px;
    }
    .impact-stats {
        padding: 60px 0;
    }
    .impact-stats__title {
        margin-bottom: 2rem;
    }
    .blueprint {
        margin: 60px 0;
    }
    .programmes {
        margin: 60px 0;
    }
    .programme-card--feature {
        min-height: 320px;
        padding: 2rem;
    }
    .curriculum {
        margin: 60px 0;
    }
    .philosophy__word{
        justify-content: center;
        margin-left: 0 !important;
    }
    .philosophy__content{
        text-align: center;
    }
    .philosophy__content p{
        margin: 0 auto 2rem !important;
    }
   .why-elevate {
        padding: 60px 0;
    }
    body.home .why-elevate {
        padding: 0;
    }
    .school-support {
        padding: 60px 0;
    }
    .home-hero__newsletter-card {
        padding: 2rem;
    }
    .reviews__col{
        order: 2;
    }
    .content-collage__cta{
        flex-direction: column;
        align-items: center;
    }
    .pathway__card
    {
        text-align: left;
    }
    .site-header .nav .sub-menu li a{
        font-size: 16px;
        line-height: 1.5;
    }
    .pathway__center{
        position: relative;
        margin-bottom: 80px;
    }
    .pathway__arrows.top .pathway__arrow:nth-child(2){ 
        width: 170px;
        height: auto;
        transform: rotate(159deg);
        position: absolute;
        top: -9px;
        right: -64px;
    }

    .pathway__arrows.top .pathway__arrow:first-child{ 
        width: 170px;
        height: auto;
        transform: rotate(200deg);
        position: absolute;
        top: -9px;
        left: -64px;
    }

    .pathway__arrows.bottom .pathway__arrow:first-child{ 
        width: 93px;
        height: auto;
        transform: rotate(68deg) scaleX(-1);
        position: absolute;
        bottom: -11px;
        left: -18px;
    }
    body.elevate-blueprint .programmes, body.single-elevate-blueprint .programmes {
        margin: 90px 0 -97px;
    }

    .pathway__arrows.bottom .pathway__arrow:last-child{ 
        width: 93px;
        height: auto;
        transform: rotate(297deg) scaleX(-1);
        position: absolute;
        bottom: -11px;
        right: -18px;
    }
    .pathway__arrow--down {
        width: clamp(91px, 6vw, 107px);
}
    .pathway{
        margin-top: 105px;
        margin-bottom: 170px;
    }
    .pathway__card--c1,
    .pathway__card--c2{
        margin-top: -150px;
    }
    .pathway__card--c3,
    .pathway__card--c4{
        margin-bottom: -150px;
    }
    .footer__bottom {
        justify-content: center;
        text-align: center;
    }
    .site-header .nav .menu-item-has-children.sub-menu-active > .sub-menu{
        width: 100% !important;
    }
    .programmes .row .col-12:nth-child(4){
      order: 3;
    }
    .programmes .row .col-12:nth-child(5){
      order: 4;
    }
        .why-elevate__media {
        height: 176px;
    }
    .image-slider {
        margin: 60px 0;
    }
    .image-slider__track {
        margin-top: 2.5rem;
    }
    .image-slider__slide {
        padding: 0 6px;
    }
    .content-collage__collage {
        grid-auto-rows: clamp(25px, 6vw, 39px);
    }
    .content-collage {
        margin: 60px 0;
    }
    .about-intro__content{
        text-align: center;
    }
    .gains {
        margin: 60px 0;
    }
    .sets-apart {
        background-position: -506px -149px, -308px 46% !important;
    }
}

@media (max-width: 575px) {
    .school-support__cards {
        grid-template-columns: 1fr;
    }
    .home-hero__inner {
        gap: 1.5rem;
        padding: 6rem 0 5rem;
    }
    .site-header__logo img {
        height: 50px;
    }
    .site-header__burger {
        width: 58px;
        height: 42px;
    }
    .site-header__social {
        width: 38px;
        height: 38px;
    }
    /* Keep the 2-up card rows; just tighten type + gaps */
    .pathway__grid {
        column-gap: 0.75rem;
    }
    .pathway__title {
        font-size: 18px;
        line-height: 1.15;
        margin: 0.75rem auto 0.75rem;
    }
    .pathway__desc {
        font-size: 13px;
    }
    .inspire {
        margin: 160px 0;
    }
    
}