:root {
    /* Greens */
    --green1000: #1e442f;
    --green950: #005456;
    --green900: #336b5e;
    --green800: #658166;
    --green600: #71a871;
    --green300: #ceefcf;

    /* Reds */
    --red900: #720c07;
    --red700: #e54833;
    --red500: #dd725e;

    /* Golds */
    --gold500: #dba25e;
    --gold300: #fcb435;
    --gold100: #ffc655;
    --gold50: #fdc57d;

    /* Wheat */
    --wheat50: #f4f3d9;

    /* Browns */
    --brown800: #443e1b;
    --brown600: #846625;

    /* Gray */
    --gray1000: #232323;
}

.container {
    max-width: 100%;
}

/* Flex Alignment */
.flex-vertical-top .columns {
    align-items: start;
}
.flex-vertical-middle .columns {
    align-items: center;
}
.flex-vertical-bottom .columns {
    align-items: end;
}
.flex-vertical-top-important .columns {
    align-items: start !important;
}
.flex-vertical-middle-important .columns {
    align-items: center !important;
}
.flex-vertical-bottom-important .columns {
    align-items: end !important;
}

.font-mackinac {
    font-family: "p22-mackinac-pro", "Times New Roman", serif !important;
}
.font-manrope {
    font-family: "Manrope", Helvetica, Arial, sans-serif !important;
}
.font-bulldog {
    font-family: "Bulldog - Default Font", Helvetica, Arial, Lucida, sans-serif !important;
}

/* Greens */
.text-green1000 {
    color: var(--green1000);
}
.bg-green1000 {
    background-color: var(--green1000);
}

.text-green950 {
    color: var(--green950);
}
.bg-green950 {
    background-color: var(--green950);
}

.text-green900 {
    color: var(--green900);
}
.bg-green900 {
    background-color: var(--green900);
}

.text-green800 {
    color: var(--green800);
}
.bg-green800 {
    background-color: var(--green800);
}

.text-green600 {
    color: var(--green600);
}
.bg-green600 {
    background-color: var(--green600);
}

.text-green300 {
    color: var(--green300);
}
.bg-green300 {
    background-color: var(--green300);
}

/* Reds */
.text-red900 {
    color: var(--red900);
}
.bg-red900 {
    background-color: var(--red900);
}

.text-red700 {
    color: var(--red700);
}
.bg-red700 {
    background-color: var(--red700);
}

.text-red500 {
    color: var(--red500);
}
.bg-red500 {
    background-color: var(--red500);
}

/* Golds */
.text-gold500 {
    color: var(--gold500);
}
.bg-gold500 {
    background-color: var(--gold500);
}

.text-gold300 {
    color: var(--gold300);
}
.bg-gold300 {
    background-color: var(--gold300);
}

.text-gold100 {
    color: var(--gold100);
}
.bg-gold100 {
    background-color: var(--gold100);
}

.text-gold50 {
    color: var(--gold50);
}
.bg-gold50 {
    background-color: var(--gold50);
}

/* Wheat */
.text-wheat50 {
    color: var(--wheat50);
}
.bg-wheat50 {
    background-color: var(--wheat50);
}

/* Browns */
.text-brown800 {
    color: var(--brown800);
}
.bg-brown800 {
    background-color: var(--brown800);
}

.text-brown600 {
    color: var(--brown600);
}
.bg-brown600 {
    background-color: var(--brown600);
}

/* Gray */
.text-gray1000 {
    color: var(--gray1000);
}
.bg-gray1000 {
    background-color: var(--gray1000);
}

.video-wrapper {
    position: relative;
    width: calc(100vw - 0px);
    height: 0;
    /* This creates the 16:9 aspect ratio (9 / 16 = 0.5625).
        The padding is relative to the element's width. */
    padding-top: 56.25%;
    background-color: #000; /* Fallback for slow-loading video */
    overflow: hidden;
    z-index: 1;
}

#vimeo-player {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Ensure video covers full screen at all aspect ratios */
@media (max-width: 960px) {
    .video-wrapper {
        position: relative;
        width: calc(100vw - 0px);
        height: 56.25vw;
        overflow: hidden;
        z-index: 1;
    }
    #vimeo-player {
        width: 100vw;
        height: 56.25vw; /* 16:9 aspect ratio */
    }
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* Hide buttons by default */
.btn-vid-control.hidden {
    display: none;
}

/* Hide overlay when video is playing */
.video-wrapper.playing .video-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Show overlay on hover when video is playing */
.video-wrapper.playing:hover .video-overlay.hidden {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Always show overlay when video is paused */
.video-wrapper.paused .video-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Touch device support - show controls when class is added */
.video-wrapper.show-controls .video-overlay.hidden {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* Touch device handling - show overlay when tapped */
@media (hover: none) and (pointer: coarse) {
    .video-wrapper.playing .video-overlay.hidden {
        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }

    .video-wrapper.playing.show-controls .video-overlay.hidden {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.overlay-content {
    text-align: center;
    padding: 2rem;
}

.headline {
    font-weight: 500;
}

.copy {
    font-weight: 400;
}

/* Button visibility toggle */
.btn.btn-vid-control {
    cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .headline {
        font-size: 2rem;
    }

    .copy {
        font-size: 1rem;
    }

    .overlay-content {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .headline {
        font-size: 1.5rem;
    }

    .copy {
        font-size: 0.9rem;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px 8px 15px;
    border-radius: 11px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: "Manrope", Helvetica, Arial, sans-serif !important;
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1rem;
}
.btn-vid-control {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 3.5rem;
    padding: 8px 20px 8px 8px;
    backdrop-filter: blur(2.5px);
    outline: none;
    border: none;
}
.btn span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin: 0px 0 0 10px;
}
.btn-vid-control span {
    width: 55px;
    height: 55px;
    margin: 0 10px 0 0;
}
.btn-vid-control svg {
    width: 55px;
    height: 55px;
}
.btn-vid-control:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
.video-btn-text {
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.btn-vid-control:hover svg ellipse {
    fill: #9da393;
}

.btn-vid-control:hover strong {
    color: #000;
    font-size: calc(1em + 1px);
}

.btn-vid-control svg ellipse,
.btn-vid-control strong {
    transition: all 0.3s ease;
}

.hero-call {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -37px;
    z-index: 2;
}
@media (max-width: 600px) {
    .hero-call {
        margin-top: -15px;
        width: 90%;
    }

    .btn-vid-control {
        padding: 4px 20px 4px 4px;
    }
    .btn-vid-control span {
        width: 25px;
        height: 25px;
    }
}

/* PARALLAX SECTION */
.parallax-section {
    position: relative;
    width: 100%;
    height: 712px; /* adjust as needed */
    background-image: url("../images/wyen_t2t-looking-desktop.webp");
    background-size: cover;
    background-repeat: no-repeat; /* prevent repeating */
    background-position: center center;
    display: flex;
    align-items: flex-end; /* position overlay toward bottom */
    justify-content: center;
    overflow: hidden;
    padding-bottom: 6rem;
}

.overlay {
    background-color: color-mix(in srgb, var(--green1000) 90%, transparent);
    padding: 3rem 4rem;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 1225px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

.author {
    color: #d4b053;
    font-size: 0.9rem;
}

/* optional: subtle parallax drift of overlay */
@media (prefers-reduced-motion: no-preference) {
    .parallax-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-attachment: scroll;
        transform: translateY(-15%);
        z-index: -1;
    }

    .parallax-section:hover .overlay {
        transform: translateY(-5px);
    }
}
@media (max-width: 600px) {
    .parallax-section {
        padding-bottom: 1rem;
        background-image: url("../images/wyen_t2t-looking-mobile.webp");
        background-size: cover;
        background-repeat: no-repeat; /* prevent repeating */
        background-position: center center;
    }
    .parallax-section::before {
        transform: translateY(5%);
    }
}

/* CARDS SECTION */
.card {
    background: #ffffff;
    border: 0px solid #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 20px 8px rgb(0 0 0 / 18%);
    box-shadow: 0px 0px 20px 8px rgb(0 0 0 / 18%);
    height: 100%;
}
.card .card-preheader {
    padding: 0;
    transition: 0.8s ease-in-out;
}
.card-image img {
    transition: transform 0.5s ease;
}
.card:hover .card-image img {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.card:hover .card-preheader {
    transition: 0.5s ease-in-out;
    transform: translateY(-1px) scale(1.07);
}
.card .card-header {
    padding: 0;
}

#infocards .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 120px; /* Adjust base height as needed */
    flex-grow: 1;
}
#infocards .cardeq {
    flex-shrink: 0;
    display: block;
    line-height: 1.4;
}

/* MASONRY SECTION */
.masonry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1510px;
    height: 80vh;
    grid-auto-flow: dense;
    position: relative;
    padding: 0px;
    box-sizing: border-box;
}

.tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform, box-shadow;
}

/* background image + overlay */
.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.6; /* adjust as needed */
    z-index: 1;
}

.kids-tile::after {
    background-color: var(--green1000);
}
.active.kids-tile::after {
    opacity: 0.9;
}

.community-tile::after {
    background-color: var(--red500);
}
.active.community-tile::after {
    opacity: 0.9;
}

.programs-tile::after {
    background-color: var(--brown600);
}
.active.programs-tile::after {
    opacity: 0.9;
}

.wyoming-tile::after {
    background-color: var(--green800);
}
.active.wyoming-tile::after {
    opacity: 0.9;
}

.you-tile::after {
    background-color: var(--gold50);
}
.active.you-tile::after {
    opacity: 0.9;
}

/* text layout */
.tile-content {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: 65%;
    z-index: 2;
    pointer-events: none;
}

.tile-content h2 {
    margin: 0 0 0.2em;
    font-family: "p22-mackinac-pro", "Times New Roman", serif !important;
    font-weight: 500;
    color: #fff;
}

.kids-tile.active .tile-content h2,
.wyoming-tile.active .tile-content h2 {
    color: var(--green300);
}

.tile-content p {
    margin: 0;
    font-family: "Manrope", Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* active state (larger and shows copy) */
.tile.active {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.tile.active .tile-content p {
    opacity: 1;
}

/* RESPONSIVE: stack vertically */
@media (max-width: 768px) {
    body {
        height: auto;
    }

    .masonry {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .tile {
        height: 20vh;
    }

    .tile.active {
        grid-column: auto;
        grid-row: auto;
        height: 35vh;
    }
}

/* FOOTER VIDEO SECTION */
.footer-vimeo {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.footer-vimeo-wrapper {
    position: relative;
    overflow: hidden;
}

/* Maintain aspect ratio */
.footer-vimeo-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.footer-vimeo-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s ease;
}

.footer-vimeo-btn-container {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.footer-vimeo-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.footer-vimeo-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Active state */
.footer-vimeo.active .footer-vimeo-thumbnail,
.footer-vimeo.active .footer-vimeo-btn-container {
    opacity: 0;
    pointer-events: none;
}

.footer-vimeo.active .footer-vimeo-frame {
    opacity: 1;
}

.radius0 {
    border-radius: 0;
}
.radius1 {
    border-radius: 1px;
}
.radius2 {
    border-radius: 2px;
}
.radius3 {
    border-radius: 3px;
}
.radius4 {
    border-radius: 4px;
}
.radius5 {
    border-radius: 5px;
}
.radius6 {
    border-radius: 6px;
}
.radius7 {
    border-radius: 7px;
}
.radius8 {
    border-radius: 8px;
}
.radius9 {
    border-radius: 9px;
}
.radius10 {
    border-radius: 10px;
}
.radius11 {
    border-radius: 11px;
}
.radius12 {
    border-radius: 12px;
}
.radius13 {
    border-radius: 13px;
}
.radius14 {
    border-radius: 14px;
}
.radius15 {
    border-radius: 15px;
}
.radius16 {
    border-radius: 16px;
}
.radius17 {
    border-radius: 17px;
}
.radius18 {
    border-radius: 18px;
}
.radius19 {
    border-radius: 19px;
}
.radius20 {
    border-radius: 20px;
}
.radius21 {
    border-radius: 21px;
}
.radius22 {
    border-radius: 22px;
}
.radius23 {
    border-radius: 23px;
}
.radius24 {
    border-radius: 24px;
}
.radius25 {
    border-radius: 25px;
}
.radius26 {
    border-radius: 26px;
}
.radius27 {
    border-radius: 27px;
}
.radius28 {
    border-radius: 28px;
}
.radius29 {
    border-radius: 29px;
}
.radius30 {
    border-radius: 30px;
}
.radius31 {
    border-radius: 31px;
}
.radius32 {
    border-radius: 32px;
}
.radius33 {
    border-radius: 33px;
}
.radius34 {
    border-radius: 34px;
}
.radius35 {
    border-radius: 35px;
}
.radius36 {
    border-radius: 36px;
}
.radius37 {
    border-radius: 37px;
}
.radius38 {
    border-radius: 38px;
}
.radius39 {
    border-radius: 39px;
}
.radius40 {
    border-radius: 40px;
}
.radius41 {
    border-radius: 41px;
}
.radius42 {
    border-radius: 42px;
}
.radius43 {
    border-radius: 43px;
}
.radius44 {
    border-radius: 44px;
}
.radius45 {
    border-radius: 45px;
}
.radius46 {
    border-radius: 46px;
}
.radius47 {
    border-radius: 47px;
}
.radius48 {
    border-radius: 48px;
}
.radius49 {
    border-radius: 49px;
}
.radius50 {
    border-radius: 50px;
}
.radius51 {
    border-radius: 51px;
}
.radius52 {
    border-radius: 52px;
}
.radius53 {
    border-radius: 53px;
}
.radius54 {
    border-radius: 54px;
}
.radius55 {
    border-radius: 55px;
}
.radius56 {
    border-radius: 56px;
}
.radius57 {
    border-radius: 57px;
}
.radius58 {
    border-radius: 58px;
}
.radius59 {
    border-radius: 59px;
}
.radius60 {
    border-radius: 60px;
}
.radius61 {
    border-radius: 61px;
}
.radius62 {
    border-radius: 62px;
}
.radius63 {
    border-radius: 63px;
}
.radius64 {
    border-radius: 64px;
}
.radius65 {
    border-radius: 65px;
}
.radius66 {
    border-radius: 66px;
}
.radius67 {
    border-radius: 67px;
}
.radius68 {
    border-radius: 68px;
}
.radius69 {
    border-radius: 69px;
}
.radius70 {
    border-radius: 70px;
}
.radius71 {
    border-radius: 71px;
}
.radius72 {
    border-radius: 72px;
}
.radius73 {
    border-radius: 73px;
}
.radius74 {
    border-radius: 74px;
}
.radius75 {
    border-radius: 75px;
}
.radius76 {
    border-radius: 76px;
}
.radius77 {
    border-radius: 77px;
}
.radius78 {
    border-radius: 78px;
}
.radius79 {
    border-radius: 79px;
}
.radius80 {
    border-radius: 80px;
}
.radius81 {
    border-radius: 81px;
}
.radius82 {
    border-radius: 82px;
}
.radius83 {
    border-radius: 83px;
}
.radius84 {
    border-radius: 84px;
}
.radius85 {
    border-radius: 85px;
}
.radius86 {
    border-radius: 86px;
}
.radius87 {
    border-radius: 87px;
}
.radius88 {
    border-radius: 88px;
}
.radius89 {
    border-radius: 89px;
}
.radius90 {
    border-radius: 90px;
}
.radius91 {
    border-radius: 91px;
}
.radius92 {
    border-radius: 92px;
}
.radius93 {
    border-radius: 93px;
}
.radius94 {
    border-radius: 94px;
}
.radius95 {
    border-radius: 95px;
}
.radius96 {
    border-radius: 96px;
}
.radius97 {
    border-radius: 97px;
}
.radius98 {
    border-radius: 98px;
}
.radius99 {
    border-radius: 99px;
}
.radius100 {
    border-radius: 100px;
}