/* ========================================
   KATSAROS DANCE
   GLOBAL WEBSITE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0d0d0d;
    color: #f7f3f1;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}

img {
    display: block;
    width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3,
blockquote {
    font-family: Georgia, "Times New Roman", serif;
}

em {
    font-weight: 400;
}


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

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 27px 7%;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.75),
            rgba(0,0,0,0)
        );
}

.solid-header {
    position: relative;
    background: #090909;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.brand {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 1.2rem;
    font-weight: 500;
}

nav {
    display: flex;
    gap: 31px;
}

nav a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .7rem;
    font-weight: 600;
    position: relative;
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 1px;
    background: #d99aaa;
    transition: width .2s ease;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}


/* ========================================
   GENERAL TYPOGRAPHY
   ======================================== */

.eyebrow {
    color: #e1a2b2;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.dark-eyebrow {
    color: #a75f73;
}

h1 em,
h2 em {
    display: block;
    color: #d99aaa;
    font-style: italic;
}

.light-section h1,
.light-section h2 {
    color: #171313;
}

.light-section h1 em,
.light-section h2 em {
    color: #a75f73;
}

.button {
    display: inline-block;
    padding: 16px 28px;
    background: #d99aaa;
    color: #111;
    border-radius: 40px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .72rem;
    font-weight: 700;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.button:hover {
    transform: translateY(-2px);
    opacity: .9;
}

.dark-button {
    margin-top: 20px;
}

.text-link {
    display: inline-block;
    margin-top: 22px;
    color: #8f5364;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .76rem;
    font-weight: 700;
}

.light-link {
    color: #e0a1b1;
}

.text-link:hover {
    opacity: .7;
}


/* ========================================
   HOME HERO
   ======================================== */

.home-hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 140px 8% 80px;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.91) 0%,
            rgba(0,0,0,.75) 27%,
            rgba(0,0,0,.38) 50%,
            rgba(0,0,0,.04) 73%
        ),
        url("christina-hero.jpg.jpeg.JPG");

    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: 700px;
}

.home-hero h1 {
    font-size: clamp(3.6rem, 6.4vw, 6.3rem);
    font-weight: 400;
    line-height: .95;
    margin-bottom: 28px;
}

.home-hero h1 span {
    display: block;
    margin-top: 15px;
    color: #f2dce1;
    font-size: .58em;
    font-style: italic;
}

.hero-description {
    max-width: 520px;
    color: rgba(255,255,255,.88);
    font-size: 1.08rem;
    margin-bottom: 13px;
}

.hero-achievement {
    color: #f0d6dc;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    font-size: .78rem;
    margin-bottom: 31px;
}

.hero-achievement span {
    padding: 0 8px;
}


/* ========================================
   LIGHT SECTIONS
   ======================================== */

.light-section {
    background: #efe7e2;
    color: #171313;
}

.home-intro {
    padding: 125px 8%;
}

.narrow-content {
    max-width: 850px;
}

.narrow-content h2 {
    font-size: clamp(3rem, 6vw, 5.6rem);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 35px;
}

.large-copy {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    line-height: 1.6;
    color: #504748;
    margin-bottom: 20px;
}


/* ========================================
   SPLIT SECTIONS
   ======================================== */

.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 720px;
}

.dark-section {
    background: #151515;
}

.split-image {
    min-height: 650px;
    overflow: hidden;
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tall-image img {
    object-position: center top;
}

.split-copy {
    padding: 100px 9%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-copy h2 {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 400;
    line-height: 1.03;
    margin-bottom: 30px;
}

.split-copy p {
    max-width: 650px;
    margin-bottom: 20px;
    color: #c9c2bf;
}

.light-section .split-copy p {
    color: #554d4b;
}

.reverse .split-image {
    order: 2;
}


/* ========================================
   CREDENTIALS
   ======================================== */

.credentials-section {
    padding: 0 8%;
    background: #090909;
}

.credentials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top:
        1px solid rgba(255,255,255,.1);

    border-bottom:
        1px solid rgba(255,255,255,.1);
}

.credential {
    padding: 52px 28px;

    border-right:
        1px solid rgba(255,255,255,.1);
}

.credential:last-child {
    border-right: none;
}

.credential strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #dfa0b0;
    margin-bottom: 13px;
}

.credential span {
    display: block;
    color: #aaa3a1;
    font-size: .85rem;
    line-height: 1.55;
}


/* ========================================
   FEATURE IMAGE
   ======================================== */

.feature-image-section {
    height: 760px;
    position: relative;
    overflow: hidden;
}

.feature-image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.feature-image-section::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.05) 65%
        );
}

.feature-image-overlay {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 75px;
    max-width: 780px;
}

.feature-image-overlay h2 {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
}


/* ========================================
   CONTACT CTA
   ======================================== */

.contact-cta {
    padding: 120px 8%;
    background: #090909;
    text-align: center;
}

.contact-cta h2 {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 25px;
}

.contact-cta p:not(.eyebrow) {
    max-width: 650px;
    margin: 0 auto 30px;
    color: #bfb8b5;
}


/* ========================================
   PAGE HERO
   ======================================== */

.page-hero {
    min-height: 620px;

    display: flex;
    align-items: flex-end;

    padding: 100px 8% 85px;

    background-size: cover;
    background-position: center;

    position: relative;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.15)
        );
}

.page-hero > div {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.page-hero h1 {
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: .93;
    margin-bottom: 25px;
}

.page-hero > div > p:last-child {
    max-width: 600px;
    color: rgba(255,255,255,.85);
    font-size: 1.1rem;
}

.about-hero {
    background-image:
        url("white dress blackpool.png");

    background-position: center 28%;
}

.lessons-hero {
    background-image:
        linear-gradient(
            rgba(0,0,0,.1),
            rgba(0,0,0,.1)
        ),
        url("pink dress samba.jpeg");

    background-position: center 35%;
}


/* ========================================
   ABOUT PAGE
   ======================================== */

.about-story {
    padding: 120px 8%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .9fr);

    gap: 90px;
    align-items: center;
}

.story-text h2 {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 30px;
}

.story-text > p:not(.eyebrow) {
    color: #51494a;
    margin-bottom: 19px;
}

.journey-images {
    display: grid;
    grid-template-columns: .7fr 1fr;
    gap: 20px;
    align-items: end;
}

.journey-images figure {
    overflow: hidden;
}

.journey-images img {
    min-height: 480px;
    height: 100%;
    object-fit: cover;
}

.childhood-photo img {
    min-height: 360px;
    object-position: center top;
}

.journey-images figcaption {
    margin-top: 10px;
    font-size: .74rem;
    color: #777;
    line-height: 1.5;
}


/* ========================================
   COMPETITION SECTION
   ======================================== */

.competition-section {
    padding: 120px 8%;
    background: #0c0c0c;
}

.section-heading.centred {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.event-grid {
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);

    border-top:
        1px solid rgba(255,255,255,.1);

    border-bottom:
        1px solid rgba(255,255,255,.1);
}

.event-grid div {
    padding: 40px 24px;

    border-right:
        1px solid rgba(255,255,255,.1);
}

.event-grid div:last-child {
    border-right: none;
}

.event-grid strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    color: #dfa0b0;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.event-grid span {
    color: #aaa3a1;
    font-size: .78rem;
}

.wide-photo {
    height: 760px;
    overflow: hidden;
}

.wide-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.philosophy-section {
    padding: 120px 8%;
}


/* ========================================
   LESSONS PAGE
   ======================================== */

.lessons-intro {
    padding: 110px 8%;
}

.lessons-page-section {
    padding: 110px 8%;
    background: #101010;
}

.lesson-page-grid {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;
}

.lesson-page-grid article {
    padding: 45px;
    min-height: 350px;
    background: #181818;

    border:
        1px solid rgba(255,255,255,.07);
}

.lesson-page-grid article > span {
    display: block;
    color: #d99aaa;
    letter-spacing: 3px;
    font-size: .75rem;
    margin-bottom: 35px;
}

.lesson-page-grid h2 {
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 18px;
}

.lesson-page-grid p {
    color: #beb7b4;
    margin-bottom: 14px;
}

.beginner-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #111;
}

.beginner-copy {
    padding: 100px 9%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.beginner-copy h2 {
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1;
    font-weight: 400;
    margin-bottom: 30px;
}

.beginner-copy > p:not(.eyebrow) {
    color: #bbb4b1;
    margin-bottom: 18px;
}

.beginner-copy .button {
    width: fit-content;
    margin-top: 18px;
}

.beginner-image {
    min-height: 700px;
}

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


/* ========================================
   GALLERY
   ======================================== */

.gallery-header {
    padding: 120px 8% 80px;
    background: #0a0a0a;
    text-align: center;
}

.gallery-header h1 {
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: .95;
    margin-bottom: 25px;
}

.gallery-header p:last-child {
    max-width: 650px;
    margin: auto;
    color: #aaa3a1;
}

.gallery-grid {
    padding: 0 3% 80px;
    background: #0a0a0a;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows: 520px;

    gap: 12px;
}

.gallery-grid figure {
    overflow: hidden;
    background: #161616;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .5s ease;
}

.gallery-grid figure:hover img {
    transform: scale(1.025);
}

.gallery-large {
    grid-row: span 2;
}

.gallery-wide {
    grid-column: span 2;
}


/* ========================================
   CONTACT PAGE
   ======================================== */

.contact-page {
    min-height: calc(100vh - 90px);

    display: grid;
    grid-template-columns: 1fr 1fr;

    background: #0b0b0b;
}

.contact-page-copy {
    padding: 110px 10%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-page-copy h1 {
    font-size: clamp(4rem, 6vw, 6rem);
    font-weight: 400;
    line-height: .95;
    margin-bottom: 35px;
}

.contact-lead {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    color: #eee7e4;
    margin-bottom: 20px;
}

.contact-page-copy > p:not(.eyebrow):not(.contact-lead) {
    color: #aaa3a1;
    max-width: 600px;
}

.contact-details {
    margin: 40px 0;

    border-top:
        1px solid rgba(255,255,255,.1);
}

.contact-details > div {
    padding: 20px 0;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}

.contact-details span {
    display: block;
    color: #d99aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .68rem;
    margin-bottom: 5px;
}

.contact-details a {
    color: white;
    text-decoration: none;
}

.contact-details a:hover {
    color: #d99aaa;
}

.contact-details p {
    color: #d5cfcc;
}

.contact-page-copy .button {
    width: fit-content;
}

.contact-page-image {
    min-height: 760px;
}

.contact-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


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

footer {
    padding: 35px 8%;
    background: #050505;

    border-top:
        1px solid rgba(255,255,255,.07);

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    color: #777;
    font-size: .78rem;
}

footer strong {
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* ========================================
   DESKTOP IMAGE + LAYOUT FIXES
   ONLY APPLIES ABOVE 768PX
   ======================================== */

@media (min-width: 769px) {

    /* ------------------------------------
       HOME
       ------------------------------------ */

    .home-hero {
        min-height: 760px;
        max-height: 900px;

        padding-top: 140px;
        padding-bottom: 90px;

        background-position: center 38%;
    }

    .hero-content {
        max-width: 610px;
    }

    .home-hero h1 {
        font-size: clamp(3.8rem, 5.4vw, 5.7rem);
        max-width: 650px;
    }

    .home-intro {
        padding-top: 100px;
        padding-bottom: 100px;
    }


    /* ------------------------------------
       GENERAL DESKTOP SPLIT SECTIONS
       ------------------------------------ */

    .split-section {
        min-height: 620px;
    }

    .split-image {
        min-height: 620px;
        max-height: 760px;
    }

    .split-copy {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .split-copy h2 {
        font-size: clamp(2.8rem, 4vw, 4.25rem);
    }


    /* ------------------------------------
       ABOUT HERO
       Show Christina's face rather than
       cropping into her torso
       ------------------------------------ */

    .about-hero {
        min-height: 610px;

        background-position: 50% 8%;
    }

    .about-hero h1 {
        font-size: clamp(4rem, 6vw, 6rem);
    }


    /* ------------------------------------
       LESSONS HERO
       Pull image upwards so faces/upper
       bodies remain in the photograph
       ------------------------------------ */

    .lessons-hero {
        min-height: 610px;

        background-position: 42% 8%;
    }

    .lessons-hero h1 {
        font-size: clamp(4rem, 6vw, 6rem);
    }


    /* ------------------------------------
       ABOUT PAGE:
       INTERNATIONAL CAREER SPLIT PHOTO

       Christina is on the right-hand side
       of this photograph, so deliberately
       crop towards her rather than Filipe.
       ------------------------------------ */

    .tall-image img {
        object-position: 82% 20%;
    }


    /* ------------------------------------
       HOME ABOUT IMAGE
       Keep Christina more central
       ------------------------------------ */

    .home-intro + .split-section .split-image img {
        object-position: 67% center;
    }


    /* ------------------------------------
       HOME LESSON IMAGE
       ------------------------------------ */

    .reverse .split-image img {
        object-position: center 25%;
    }


    /* ------------------------------------
       ABOUT JOURNEY PHOTOS
       Reduce aggressive cropping
       ------------------------------------ */

    .journey-images img {
        min-height: 0;
        height: auto;
        object-fit: contain;
        background: #e6ddd8;
    }

    .childhood-photo img {
        min-height: 0;
        height: auto;
    }


    /* ------------------------------------
       ABOUT WIDE INTERNATIONAL PHOTO
       Show complete dancers more naturally
       ------------------------------------ */

    .wide-photo {
        height: auto;
        max-height: none;
        background: #090909;
    }

    .wide-photo img {
        width: 100%;
        height: auto;
        max-height: 850px;
        object-fit: contain;
        object-position: center;
        margin: 0 auto;
    }


    /* ------------------------------------
       FEATURE IMAGE ON HOME

       Less extreme crop and bias slightly
       toward Christina.
       ------------------------------------ */

    .feature-image-section {
        height: 650px;
    }

    .feature-image-section img {
        object-position: 68% 30%;
    }


    /* ------------------------------------
       BEGINNER IMAGE
       ------------------------------------ */

    .beginner-image {
        min-height: 620px;
        max-height: 760px;
        overflow: hidden;
    }

    .beginner-image img {
        object-position: 68% 20%;
    }


    /* ------------------------------------
       CONTACT IMAGE
       ------------------------------------ */

    .contact-page-image {
        min-height: 680px;
        overflow: hidden;
    }

    .contact-page-image img {
        object-position: 72% 18%;
    }


    /* ====================================
       DESKTOP GALLERY FIX

       IMPORTANT:
       Stop forcing every photo into a
       fixed rectangle. Each photograph
       keeps its real proportions instead.
       ==================================== */

    .gallery-grid {
        display: block;

        columns: 3;
        column-gap: 14px;

        padding:
            0 4% 90px;
    }

    .gallery-grid figure,
    .gallery-grid .gallery-large,
    .gallery-grid .gallery-wide {
        display: inline-block;

        width: 100%;

        margin: 0 0 14px;

        break-inside: avoid;
        page-break-inside: avoid;

        overflow: hidden;

        background: #161616;
    }

    .gallery-grid img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: initial;
        object-position: initial;
    }

    .gallery-grid figure:hover img {
        transform: scale(1.015);
    }

}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 1000px) {

    .credentials-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .credential:nth-child(2) {
        border-right: none;
    }

    .credential:nth-child(1),
    .credential:nth-child(2) {
        border-bottom:
            1px solid rgba(255,255,255,.1);
    }

    .event-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .event-grid div {
        border-bottom:
            1px solid rgba(255,255,255,.1);
    }

    .event-grid div:nth-child(even) {
        border-right: none;
    }

    .event-grid div:last-child {
        border-bottom: none;
    }

    /*
       Desktop/tablet gallery remains
       masonry above 768px.
       Mobile rules below take over at 768px.
    */

}


/* ========================================
   MOBILE
   THIS SECTION IS KEPT THE SAME
   ======================================== */

@media (max-width: 768px) {

    .site-header {
        position: absolute;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        padding: 20px 6%;
    }

    .solid-header {
        position: relative;
    }

    .brand {
        font-size: 1rem;

        letter-spacing: 4px;
    }

    nav {
        flex-wrap: wrap;

        gap: 10px 17px;
    }

    nav a {
        font-size: .61rem;
    }


    /* HOME */

    .home-hero {
        min-height: 100vh;

        align-items: flex-end;

        padding: 180px 6% 60px;

        background-image:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.02) 10%,
                rgba(0,0,0,.12) 38%,
                rgba(0,0,0,.72) 68%,
                rgba(0,0,0,.98) 100%
            ),
            url("christina-hero.jpg.jpeg.JPG");

        background-position: 54% center;
    }

    .home-hero h1 {
        font-size: 3rem;
    }

    .hero-achievement span {
        display: none;
    }

    .hero-achievement {
        max-width: 310px;

        line-height: 1.8;
    }

    .home-intro,
    .philosophy-section,
    .lessons-intro {
        padding: 80px 6%;
    }

    .narrow-content h2 {
        font-size: 2.8rem;
    }

    .large-copy {
        font-size: 1.15rem;
    }


    /* SPLIT */

    .split-section,
    .beginner-section,
    .contact-page {
        grid-template-columns: 1fr;
    }

    .split-image {
        min-height: 500px;
    }

    .reverse .split-image {
        order: 0;
    }

    .split-copy {
        padding: 75px 6%;
    }

    .split-copy h2 {
        font-size: 2.8rem;
    }


    /* CREDENTIALS */

    .credentials-grid {
        grid-template-columns: 1fr;
    }

    .credential,
    .credential:nth-child(2) {
        border-right: none;

        border-bottom:
            1px solid rgba(255,255,255,.1);
    }

    .credential:last-child {
        border-bottom: none;
    }


    /* FEATURE IMAGE */

    .feature-image-section {
        height: 620px;
    }

    .feature-image-overlay {
        left: 6%;
        right: 6%;

        bottom: 50px;
    }

    .feature-image-overlay h2 {
        font-size: 2.8rem;
    }


    /* PAGE HERO */

    .page-hero {
        min-height: 560px;

        padding: 100px 6% 60px;
    }

    .page-hero h1 {
        font-size: 3.5rem;
    }


    /* ABOUT */

    .about-story {
        padding: 80px 6%;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .story-text h2 {
        font-size: 2.8rem;
    }

    .journey-images {
        grid-template-columns: 1fr 1fr;

        align-items: end;
    }

    .journey-images img {
        min-height: 350px;
    }

    .childhood-photo img {
        min-height: 260px;
    }

    .competition-section {
        padding: 80px 6%;
    }

    .section-heading h2 {
        font-size: 2.8rem;
    }

    .event-grid {
        grid-template-columns: 1fr;
    }

    .event-grid div,
    .event-grid div:nth-child(even) {
        border-right: none;

        border-bottom:
            1px solid rgba(255,255,255,.1);
    }

    .wide-photo {
        height: 520px;
    }


    /* LESSONS */

    .lessons-page-section {
        padding: 80px 6%;
    }

    .lesson-page-grid {
        grid-template-columns: 1fr;
    }

    .lesson-page-grid article {
        min-height: 0;

        padding: 34px;
    }

    .beginner-copy {
        padding: 80px 6%;
    }

    .beginner-copy h2 {
        font-size: 2.8rem;
    }

    .beginner-image {
        min-height: 550px;
    }


    /* GALLERY */

    .gallery-header {
        padding: 90px 6% 60px;
    }

    .gallery-header h1 {
        font-size: 3.7rem;
    }

    .gallery-grid {
        padding: 0 4% 60px;

        display: grid;

        grid-template-columns: 1fr;

        grid-auto-rows: 520px;

        gap: 12px;

        columns: auto;
    }

    .gallery-grid figure,
    .gallery-grid .gallery-large,
    .gallery-grid .gallery-wide {
        display: block;

        width: auto;

        margin: 0;

        break-inside: auto;
    }

    .gallery-grid img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .gallery-large {
        grid-row: span 1;
    }

    .gallery-wide {
        grid-column: span 1;
    }


    /* CONTACT */

    .contact-page-copy {
        padding: 80px 6%;
    }

    .contact-page-copy h1 {
        font-size: 3.5rem;
    }

    .contact-page-image {
        min-height: 570px;
    }


    /* CTA */

    .contact-cta {
        padding: 85px 6%;
    }

    .contact-cta h2 {
        font-size: 3rem;
    }


    /* FOOTER */

    footer {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 430px) {

    .home-hero h1 {
        font-size: 2.8rem;
    }

    .journey-images {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-auto-rows: 460px;
    }

}

/* ========================================
   WHATSAPP BUTTON
   ======================================== */

.whatsapp-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 18px;

    background: #d99aaa;
    color: #111;

    border-radius: 40px;

    text-decoration: none;

    text-transform: uppercase;
    letter-spacing: 1.4px;

    font-size: .68rem;
    font-weight: 700;

    box-shadow: 0 8px 30px rgba(0,0,0,.28);

    transition:
        transform .2s ease,
        background .2s ease;
}

.whatsapp-float svg {
    width: 22px;
    height: 22px;

    fill: currentColor;
    flex-shrink: 0;
}

.whatsapp-float:hover {
    transform: translateY(-3px);
    background: #e4a9b8;
}


/* MOBILE WHATSAPP BUTTON */

@media (max-width: 768px) {

    .whatsapp-float {
        right: 18px;
        bottom: 18px;

        width: 54px;
        height: 54px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;
    }

    .whatsapp-float svg {
        width: 27px;
        height: 27px;
    }

    .whatsapp-float span {
        display: none;
    }

}

/* ========================================
   GROUP CLASSES PAGE
   ======================================== */

.group-hero {
    padding: 125px 8% 100px;
    background: #0a0a0a;
    text-align: center;
}

.group-hero > div {
    max-width: 900px;
    margin: 0 auto;
}

.group-hero h1 {
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: .95;
    margin-bottom: 28px;
}

.group-hero p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #aaa3a1;
    font-size: 1.05rem;
}


.group-class-feature {
    padding: 110px 8%;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 90px;
    align-items: center;
}

.group-class-copy h2 {
    font-size: clamp(3.5rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: .95;
    margin-bottom: 30px;
}

.group-class-copy > p:not(.eyebrow) {
    color: #51494a;
    margin-bottom: 18px;
}

.group-class-copy .large-copy {
    color: #51494a;
}

.class-details {
    margin: 38px 0;

    border-top: 1px solid rgba(0,0,0,.15);
}

.class-details > div {
    padding: 18px 0;

    border-bottom: 1px solid rgba(0,0,0,.15);
}

.class-details span {
    display: block;

    color: #a75f73;

    text-transform: uppercase;
    letter-spacing: 2px;

    font-size: .67rem;
    font-weight: 700;

    margin-bottom: 4px;
}

.class-details strong {
    display: block;

    color: #272020;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 400;

    line-height: 1.5;
}


.group-poster {
    max-width: 650px;
    margin: 0 auto;

    box-shadow: 0 20px 55px rgba(0,0,0,.16);
}

.group-poster img {
    width: 100%;
    height: auto;
}


.group-dances {
    padding: 110px 8%;
    background: #0c0c0c;
}

.dance-name-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.dance-name-grid div {
    padding: 38px 18px;

    text-align: center;

    color: #dfa0b0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;

    border-right: 1px solid rgba(255,255,255,.1);
}

.dance-name-grid div:last-child {
    border-right: none;
}


/* ========================================
   SIX-ITEM NAVIGATION
   ======================================== */

@media (min-width: 769px) and (max-width: 1250px) {

    nav {
        gap: 18px;
    }

    nav a {
        font-size: .64rem;
        letter-spacing: 1.1px;
    }

}


/* ========================================
   GROUP CLASSES MOBILE
   ======================================== */

@media (max-width: 768px) {

    .group-hero {
        padding: 90px 6% 70px;
    }

    .group-hero h1 {
        font-size: 3.5rem;
    }

    .group-class-feature {
        padding: 75px 6%;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .group-class-copy h2 {
        font-size: 3rem;
    }

    .group-poster {
        width: 100%;
    }

    .group-dances {
        padding: 80px 6%;
    }

    .dance-name-grid {
        grid-template-columns: 1fr;
    }

    .dance-name-grid div {
        border-right: none;

        border-bottom:
            1px solid rgba(255,255,255,.1);
    }

    .dance-name-grid div:last-child {
        border-bottom: none;
    }

}

/* ========================================
   MOBILE HAMBURGER NAVIGATION
   ======================================== */

.menu-toggle {
    display: none;
}

@media (max-width: 768px) {

    .site-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 20px 6%;
    }

    .brand {
        position: relative;
        z-index: 1002;
        flex-shrink: 0;
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 46px;
        height: 46px;

        margin: 0;
        padding: 0;

        border: none;
        border-radius: 0;

        background: transparent;

        appearance: none;
        -webkit-appearance: none;

        cursor: pointer;

        position: relative;
        z-index: 1003;

        flex-shrink: 0;
    }

    .menu-toggle span {
        display: block !important;

        width: 27px;
        height: 2px;

        margin: 3px 0;

        background-color: #ffffff !important;
        border-radius: 2px;

        opacity: 1;

        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .site-header nav {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;
        flex-wrap: nowrap;

        gap: 0;

        padding: 18px 6% 28px;

        background: #090909;

        border-top: 1px solid rgba(255,255,255,.07);
        border-bottom: 1px solid rgba(255,255,255,.07);

        z-index: 1001;
    }

    .site-header nav.open {
        display: flex;
    }

    .site-header nav a {
        display: block;

        width: 100%;

        padding: 15px 0;

        color: #ffffff;

        font-size: .68rem;
        letter-spacing: 1.5px;

        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .site-header nav a:last-child {
        border-bottom: none;
    }

    .site-header nav a::after {
        display: none;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

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

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

}