/* ========== HERO ========== */
.hero {
    height: 25vh;
    
}

/* replace the video       */
.hero-content {
    padding-top: 25vh;
    height: 1vh;
}

#hero-video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* centre CTA a bit lower  */
.img-video {
    max-width: 120px;
}

.cta-button-container {
    position: absolute;
    bottom: -2vh;
    right: 14vw;
}

/* smaller join-button     */



/* ========== INTRO ========== */
.intro-text {
    font-size: 20px;
    line-height: 1.4;
    white-space: normal;
}

.intro-button .img-intro {
    width: 120px;
}

/* ========== PURPOSE / COMPASS ========== */
.purpose-section {
    flex-direction: column;
    padding-top: 40px;
    position: relative;
}

.purpose-container {
    z-index: 2;
    padding: 20px;
}

.purpose-content {
    padding: 80px 0px 40px;
}

.purpose-text {
    margin-top: -30px;
}

.purpose-p{
    font-size: 14px;
}

.img-purpose {
    width: 100px;
}

.compass-container {
    width: 100%;
    /* 70 % of viewport width   */
    /* keep it a perfect square */
    z-index: 1;
}

.compass-center {
    position: absolute;
    left: calc(50% + 10px);
    top: calc(50% + 17px);
    transform: translate(-50%, -50%);
}
/* dial back the hand length & thickness if needed */
.compass-hand {
    height: 55%;
    transform: translate(-50%, -50%) rotate(202.1deg);
    position: absolute;
    transform-origin: center center;
    left: calc(50% + 10px);
    top: calc(50% + 21px);
}


/* centre them */

/* Reduce motion for performance */
@media (prefers-reduced-motion: reduce) {
    .compass-hand {
        display: none;
    }
}

/* ========== WHAT WE’RE UP TO ========== */
.wwut-button-container {
    flex-direction: column;
    gap: 12px;
}

.wwut-section-title {
    font-size: 26px;
}

.wwut-image-button {
    max-width: 100%;
}

/* ========== LET’S CONNECT ========== */
.lets-connect {
    padding: 80px 0;
}

.connect-text {
    font-size: 16px;
}

.connect-button {
    font-size: 16px;
    padding: 6px 30px;
}

.flower-icon {
    display: none;
}

/* tidy up edge clutter */

/* ========== FOOTERS ========== */
/* We already hide .site-footer below 768px in your main sheet      */
/* If you need extra tweaks for .mobile-site-footer, do them here   */