/*==================================================
    ETONHOUSE PARTNERSHIP PAGE
    Distinct collaboration layout
==================================================*/

:root{
 /* EtonHouse */
    --eton-ocean:#D93933;
    --eton-ocean-dark:#A92B27;
    --eton-aqua:#F1EFEC;

    /* Dandelion */
    --eton-coral:#E15027;
    --eton-yellow:#F5A605;

    /* Neutral */
    --eton-sand:#F7F1E7;
    --eton-sand-deep:#E9E1D5;
    --eton-ink:#2F2D2B;
    --eton-muted:#625F5B;
    --eton-white:#FFFFFF;
}
}


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

.eton-hero{
    position:relative;
    overflow:hidden;
    min-height:760px;
    padding:155px 0 105px;
    background:
        linear-gradient(120deg,#FFF9F2 0%,#F7F0E5 48%,#EEECE8 100%);
}

.eton-hero .container{
    position:relative;
    z-index:5;
}

.eton-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
    gap:70px;
    align-items:center;
}

.eton-partnership-mark{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:30px;
    padding:10px 16px;
    border:1px solid rgba(23,107,112,.18);
    border-radius:999px;
    background:rgba(255,255,255,.68);
    box-shadow:0 12px 35px rgba(38,65,65,.05);
    color:var(--eton-ocean-dark);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
}

.eton-partnership-mark strong{
    color:var(--eton-coral);
    font-size:20px;
    line-height:1;
}

.eton-kicker,
.eton-section-label{
    display:inline-block;
    margin-bottom:16px;
    color:var(--eton-coral);
    font-size:13px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.eton-hero h1{
    max-width:680px;
    margin:0 0 24px;
    color:var(--eton-ink);
    font-family:"Poppins",sans-serif;
    font-size:clamp(52px,6vw,86px);
    font-weight:800;
    line-height:1.01;
    letter-spacing:-.04em;
}

.eton-hero h1 span{
    display:block;
    color:var(--eton-ocean);
}

.eton-hero-copy > p{
    max-width:650px;
    margin:0;
    color:var(--eton-muted);
    font-size:18px;
    line-height:1.85;
}

.eton-hero-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:34px;
}

.eton-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:54px;
    padding:14px 22px;
    border:1px solid transparent;
    border-radius:999px;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;
}

.eton-btn:hover{
    transform:translateY(-2px);
}

.eton-btn-primary{
    background:var(--eton-ocean);
    color:#fff;
    box-shadow:0 14px 32px rgba(217,57,51,.18);
}

.eton-btn-primary:hover{
    background:var(--eton-ocean-dark);
    color:#fff;
}

.eton-btn-secondary{
    border-color:rgba(36,55,56,.14);
    background:rgba(255,255,255,.68);
    color:var(--eton-ink);
}

.eton-btn-secondary:hover{
    background:#fff;
    color:var(--eton-coral);
}

.eton-hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    margin-top:34px;
    color:var(--eton-ink);
    font-size:14px;
    font-weight:700;
}

.eton-hero-meta > div{
    display:flex;
    align-items:center;
    gap:8px;
}

.eton-hero-meta i{
    color:var(--eton-coral);
}

.eton-hero-visual{
    position:relative;
    min-height:540px;
}

.eton-photo-frame{
    position:absolute;
    top:10px;
    right:0;
    width:min(100%,560px);
    aspect-ratio:4/5;
    overflow:hidden;
    border:12px solid rgba(255,255,255,.86);
    border-radius:48% 48% 24px 24px;
    background:#ddd;
    box-shadow:0 32px 80px rgba(65,55,45,.16);
}

.eton-photo-frame img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.eton-photo-frame::after{
    content:"";
    position:absolute;
    inset:50% 0 0;
    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(45,42,40,.68));
}

.eton-photo-label{
    position:absolute;
    z-index:2;
    left:28px;
    right:28px;
    bottom:28px;
    color:#fff;
}

.eton-photo-label span{
    display:block;
    margin-bottom:7px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.85;
}

.eton-photo-label strong{
    display:block;
    max-width:350px;
    font-family:"Poppins",sans-serif;
    font-size:25px;
    line-height:1.25;
}

.eton-hero-sun{
    position:absolute;
    top:110px;
    right:8%;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(245,166,5,.16);
}

.eton-hero-wave{
    position:absolute;
    left:-10%;
    width:120%;
    height:240px;
    border-radius:50%;
    pointer-events:none;
}

.eton-wave-one{
    right:auto;
    bottom:-160px;
    background:rgba(245,166,5,.14);
    transform:rotate(-3deg);
}

.eton-wave-two{
    bottom:-205px;
    background:rgba(90,86,82,.08);
    transform:rotate(3deg);
}

.eton-floating-note{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.09);
    color:var(--eton-coral);
    font-family:"Poppins",sans-serif;
    font-weight:800;
    animation:etonFloat 5s ease-in-out infinite;
}

.note-a{
    top:45px;
    left:5%;
    width:68px;
    height:68px;
    font-size:28px;
}

.note-b{
    right:-10px;
    bottom:90px;
    width:82px;
    height:82px;
    font-size:32px;
    color:var(--eton-ocean);
    animation-delay:.8s;
}

.note-c{
    left:0;
    bottom:35px;
    width:46px;
    height:46px;
    color:var(--eton-yellow);
    animation-delay:1.4s;
}

@keyframes etonFloat{
    0%,100%{ transform:translateY(0) rotate(-2deg); }
    50%{ transform:translateY(-14px) rotate(3deg); }
}


/*==================================================
    STORY
==================================================*/

.eton-story{
    padding:120px 0 105px;
    background:#fff;
}

.eton-story-grid{
    display:grid;
    grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);
    gap:90px;
    align-items:start;
}

.eton-story-heading h2,
.eton-section-heading h2,
.eton-experience h2,
.eton-register h2{
    margin:0;
    color:var(--eton-ink);
    font-family:"Poppins",sans-serif;
    font-size:clamp(38px,4.5vw,64px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.035em;
}

.eton-story-heading h2 span,
.eton-section-heading h2 span,
.eton-register h2 span{
    display:block;
    color:var(--eton-ocean);
}

.eton-story-copy{
    color:var(--eton-muted);
    font-size:17px;
    line-height:1.9;
	margin-top: 60px;
}

.eton-story-copy p:last-child{
    margin-bottom:0;
}

.eton-lead{
    color:var(--eton-ink);
    font-size:21px;
    line-height:1.7;
}

.eton-fact-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:70px;
    overflow:hidden;
    border:1px solid rgba(70,65,60,.10);
    border-radius:28px;
    background:var(--eton-aqua);
}

.eton-fact{
    min-height:155px;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.eton-fact + .eton-fact{
    border-left:1px solid rgba(70,65,60,.12);
}

.eton-fact-number{
    display:block;
    margin-bottom:8px;
    color:var(--eton-ocean-dark);
    font-family:"Poppins",sans-serif;
    font-size:32px;
    font-weight:800;
}

.eton-fact-text{
    max-width:270px;
    color:#587071;
    line-height:1.55;
}


/*==================================================
    PROGRAMMES
==================================================*/

.eton-programmes{
    position:relative;
    padding:120px 0;
    background:var(--eton-sand);
}

.eton-section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:55px;
}

.eton-section-heading > p{
    max-width:520px;
    margin:0 0 8px;
    color:var(--eton-muted);
    font-size:16px;
    line-height:1.8;
}

.eton-programme-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.eton-programme-card{
    position:relative;
    min-height:305px;
    overflow:hidden;
    display:grid;
    grid-template-columns:90px 1fr;
    gap:25px;
    align-items:end;
    padding:34px;
    border-radius:30px;
    border:1px solid rgba(36,55,56,.08);
    background:#fff;
    box-shadow:0 20px 50px rgba(52,60,54,.06);
    transition:transform .3s ease,box-shadow .3s ease;
}

.eton-programme-card:hover{
    transform:translateY(-7px);
    box-shadow:0 28px 70px rgba(52,60,54,.1);
}

.eton-programme-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    top:-115px;
    right:-70px;
    opacity:.72;
}

.eton-card-piano::before{ background:#F9D8C9; }
.eton-card-vocal::before{ background:#DDEEEA; }
.eton-card-choir::before{ background:#F5E8B7; }
.eton-card-adult::before{ background:#E9E1F3; }

.eton-programme-number{
    position:absolute;
    top:22px;
    left:28px;
    color:rgba(36,55,56,.12);
    font-family:"Poppins",sans-serif;
    font-size:52px;
    font-weight:800;
    line-height:1;
}

.eton-programme-icon{
    position:relative;
    z-index:2;
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    background:var(--eton-ocean);
    color:#fff;
    font-size:27px;
}

.eton-programme-copy{
    position:relative;
    z-index:2;
}

.eton-programme-copy > span{
    display:block;
    margin-bottom:6px;
    color:var(--eton-coral);
    font-size:12px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.eton-programme-copy h3{
    margin:0 0 10px;
    color:var(--eton-ink);
    font-family:"Poppins",sans-serif;
    font-size:27px;
    font-weight:750;
}

.eton-programme-copy p{
    margin:0;
    color:var(--eton-muted);
    line-height:1.7;
}


/*==================================================
    BEACH EXPERIENCE
==================================================*/

.eton-experience{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:var(--eton-ocean);
}

.eton-experience::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    left:-260px;
    top:-210px;
    border:70px solid rgba(255,255,255,.05);
}

.eton-experience-card{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
    padding:70px;
    border-radius:42px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
    box-shadow:0 35px 80px rgba(0,0,0,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.eton-label-light{
    color:#FFD17B;
}

.eton-experience h2{
    color:#fff;
}

.eton-experience h2 span{
    color:#FFD17B;
}

.eton-experience-copy > p{
    max-width:650px;
    margin:22px 0 0;
    color:rgba(255,255,255,.78);
    font-size:17px;
    line-height:1.85;
}

.eton-experience-points{
    display:grid;
    gap:14px;
    margin-top:30px;
}

.eton-experience-points > div{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#fff;
    line-height:1.55;
}

.eton-experience-points i{
    margin-top:4px;
    color:#FFD17B;
}

.eton-experience-art{
    position:relative;
    min-height:390px;
}

.eton-experience-word{
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
}

.eton-experience-word small{
    display:block;
    margin-bottom:6px;
    color:#FFD17B;
    font-size:13px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.eton-experience-word strong{
    display:block;
    font-family:"Poppins",sans-serif;
    font-size:58px;
    line-height:.95;
    letter-spacing:-.05em;
}

.eton-sound-circle{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.1);
}

.circle-one{
    width:190px;
    height:190px;
    left:0;
    top:25px;
    font-size:50px;
}

.circle-two{
    width:130px;
    height:130px;
    right:5px;
    top:15px;
    font-size:34px;
}

.circle-three{
    width:155px;
    height:155px;
    right:35px;
    bottom:5px;
    font-size:39px;
}


/*==================================================
    APPROACH
==================================================*/

.eton-approach{
    padding:120px 0;
    background:#fff;
}

.eton-heading-centered{
    align-items:center;
    flex-direction:column;
    text-align:center;
}

.eton-heading-centered > p{
    max-width:730px;
    margin:0 auto;
}

.eton-approach-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.eton-approach-card{
    padding:36px 32px;
    border-radius:28px;
    background:#FAFBFA;
    border:1px solid rgba(36,55,56,.08);
}

.eton-approach-icon{
    width:64px;
    height:64px;
    margin-bottom:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:var(--eton-aqua);
    color:var(--eton-ocean-dark);
    font-size:24px;
}

.eton-approach-card h3{
    margin:0 0 12px;
    color:var(--eton-ink);
    font-family:"Poppins",sans-serif;
    font-size:22px;
    font-weight:750;
}

.eton-approach-card p{
    margin:0;
    color:var(--eton-muted);
    line-height:1.75;
}


/*==================================================
    REGISTRATION CTA
==================================================*/

.eton-register{
    padding:0 0 120px;
    background:#fff;
}

.eton-register-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
    padding:58px 64px;
    border-radius:36px;
    background:
        linear-gradient(110deg,var(--eton-coral),#E86B35);
    box-shadow:0 25px 70px rgba(225,80,39,.18);
}

.eton-register-card::after{
    content:"♪";
    position:absolute;
    top:-55px;
    right:22%;
    color:rgba(255,255,255,.12);
    font-family:"Poppins",sans-serif;
    font-size:230px;
    font-weight:800;
    transform:rotate(-10deg);
}

.eton-register-card > *{
    position:relative;
    z-index:2;
}

.eton-register-label{
    display:block;
    margin-bottom:12px;
    color:#FFE0CD;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.eton-register h2{
    color:#fff;
    font-size:clamp(36px,4vw,57px);
}

.eton-register h2 span{
    color:#FFE29A;
}

.eton-register p{
    max-width:650px;
    margin:18px 0 0;
    color:rgba(255,255,255,.84);
    line-height:1.75;
}

.eton-btn-light{
    flex-shrink:0;
    background:#fff;
    color:var(--eton-coral);
    box-shadow:0 12px 28px rgba(111,34,13,.15);
}

.eton-btn-light:hover{
    background:#FFF5EC;
    color:var(--eton-ocean-dark);
}


/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1100px){

    .eton-hero-grid{
        gap:40px;
    }

    .eton-experience-card{
        padding:55px 45px;
        gap:40px;
    }

    .eton-experience-word strong{
        font-size:50px;
    }
}

@media(max-width:991px){

    .eton-hero{
        min-height:auto;
        padding:135px 0 90px;
    }

    .eton-hero-grid,
    .eton-story-grid,
    .eton-experience-card{
        grid-template-columns:1fr;
    }

    .eton-hero-visual{
        min-height:auto;
        margin-top:20px;
    }

    .eton-photo-frame{
        position:relative;
        top:auto;
        right:auto;
        margin:0 auto;
        width:min(100%,600px);
        aspect-ratio:5/4;
        border-radius:40px;
    }

    .note-a{
        left:3%;
        top:-20px;
    }

    .note-b{
        right:1%;
        bottom:20px;
    }

    .note-c{
        left:8%;
        bottom:-12px;
    }

    .eton-story-grid{
        gap:35px;
    }

    .eton-fact-strip{
        grid-template-columns:1fr;
    }

    .eton-fact + .eton-fact{
        border-left:0;
        border-top:1px solid rgba(23,107,112,.14);
    }

    .eton-section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:22px;
    }

    .eton-programme-grid{
        grid-template-columns:1fr;
    }

    .eton-experience-art{
        min-height:360px;
        max-width:520px;
        width:100%;
        margin:0 auto;
    }

    .eton-approach-grid{
        grid-template-columns:1fr;
    }

    .eton-register-card{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:767px){

    .eton-hero{
        padding:120px 0 75px;
    }

    .eton-hero h1{
        font-size:48px;
    }

    .eton-partnership-mark{
        align-items:flex-start;
        flex-wrap:wrap;
        border-radius:22px;
    }

    .eton-hero-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .eton-btn{
        width:100%;
    }

    .eton-hero-meta{
        display:grid;
        gap:12px;
    }

    .eton-photo-frame{
        aspect-ratio:4/3;
        border-width:8px;
        border-radius:30px;
    }

    .eton-photo-label{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .eton-photo-label strong{
        font-size:21px;
    }

    .eton-story,
    .eton-programmes,
    .eton-experience,
    .eton-approach{
        padding:85px 0;
    }

    .eton-story-heading h2,
    .eton-section-heading h2,
    .eton-experience h2,
    .eton-register h2{
        font-size:39px;
    }

    .eton-fact-strip{
        margin-top:45px;
    }

    .eton-programme-card{
        min-height:0;
        grid-template-columns:1fr;
        gap:20px;
        padding:28px 24px;
    }

    .eton-programme-number{
        top:18px;
        right:20px;
        left:auto;
        font-size:42px;
    }

    .eton-experience-card{
        padding:38px 24px;
        border-radius:30px;
    }

    .eton-experience-art{
        min-height:300px;
    }

    .circle-one{
        width:145px;
        height:145px;
    }

    .circle-two{
        width:105px;
        height:105px;
    }

    .circle-three{
        width:120px;
        height:120px;
    }

    .eton-experience-word strong{
        font-size:40px;
    }

    .eton-register{
        padding-bottom:85px;
    }

    .eton-register-card{
        padding:40px 25px;
        border-radius:28px;
    }
}

@media(prefers-reduced-motion:reduce){
    .eton-floating-note{
        animation:none;
    }

    .eton-btn,
    .eton-programme-card{
        transition:none;
    }
}