.area-hero{
    padding:72px 0 66px;
    background:var(--red);
    border-bottom:3px solid var(--ink);
}

.area-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
    gap:52px;
    align-items:end;
}

.area-hero h1{
    max-width:900px;
    margin:0;
    color:#fff;
    font-size:clamp(3.5rem,8vw,7.7rem);
    line-height:.84;
    letter-spacing:-.07em;
    text-transform:uppercase;
    text-shadow:5px 5px 0 var(--ink);
}

.area-hero-lead{
    max-width:760px;
    margin:30px 0 0;
    color:#fff;
    font-size:1.08rem;
    line-height:1.65;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.area-offer{
    padding:28px;
    border:3px solid var(--ink);
    background:var(--paper);
    box-shadow:8px 8px 0 var(--ink);
    transform:rotate(1deg);
}

.area-offer small{
    display:block;
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.area-offer strong{
    display:block;
    font-size:1.75rem;
    line-height:1.05;
    text-transform:uppercase;
}

.area-offer p{
    line-height:1.55;
    text-align:justify;
    hyphens:auto;
}

.area-offer p strong{
    display:inline;
    font-size:inherit;
    text-transform:none;
}

.area-offer a{
    font-size:.8rem;
    text-transform:uppercase;
    font-weight:700;
}

.area-signals{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--yellow);
    border-bottom:3px solid var(--ink);
}

.area-signals div{
    padding:22px 18px;
    border-right:3px solid var(--ink);
    text-align:center;
    text-transform:uppercase;
}

.area-signals div:last-child{
    border-right:0;
}

.area-signals strong{
    display:block;
    font-size:1.45rem;
}

.area-signals span{
    display:block;
    margin-top:4px;
    font-size:.69rem;
    letter-spacing:.08em;
}

.area-context{
    background:var(--paper);
}

.area-copy-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:64px;
    align-items:start;
}

.area-long-copy p{
    margin:0 0 22px;
    font-size:1.05rem;
    line-height:1.75;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.area-value{
    background:var(--blue);
    color:#fff;
}

.area-value .eyebrow{
    color:var(--ink);
}

.area-points{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.area-points article{
    min-height:220px;
    padding:26px;
    border:3px solid var(--ink);
    background:var(--paper);
    color:var(--ink);
    box-shadow:6px 6px 0 var(--ink);
}

.area-points article:nth-child(2){
    background:var(--yellow);
}

.area-points article:nth-child(3){
    background:var(--green);
}

.area-points b{
    display:block;
    margin-bottom:36px;
    color:var(--red);
    font-size:3rem;
    line-height:1;
}

.area-points p{
    margin:0;
    line-height:1.55;
    text-align:justify;
    hyphens:auto;
}

.area-packages{
    background:var(--yellow);
}

.area-package-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    align-items:stretch;
}

.area-package{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:28px;
    border:3px solid var(--ink);
    background:var(--paper);
    box-shadow:7px 7px 0 var(--ink);
}

.area-package.featured{
    background:var(--blue);
    color:#fff;
}

.area-badge{
    position:absolute;
    top:-16px;
    right:-10px;
    padding:7px 10px;
    border:2px solid var(--ink);
    background:var(--red);
    color:#fff;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    transform:rotate(4deg);
}

.area-package h3{
    margin:0;
    font-size:2rem;
    text-transform:uppercase;
}

.area-price{
    margin:14px 0;
    font-size:4.2rem;
    line-height:1;
    letter-spacing:-.07em;
}

.area-price sup{
    font-size:1.3rem;
}

.area-package-strap{
    min-height:46px;
    line-height:1.4;
}

.area-package ul{
    flex:1;
    margin:20px 0 28px;
    padding-left:20px;
    line-height:1.7;
    font-size:.88rem;
}

.area-package li{
    white-space:nowrap;
}

.area-package .button{
    text-align:center;
}

.area-neighbours{
    background:var(--paper);
}

.area-link-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.area-link-grid a{
    padding:14px 12px;
    border:2px solid var(--ink);
    background:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.77rem;
    box-shadow:3px 3px 0 var(--ink);
}

.area-link-grid a:hover{
    background:var(--yellow);
    transform:translate(1px,1px);
    box-shadow:2px 2px 0 var(--ink);
}

.area-cta{
    padding:74px 0;
    background:var(--green);
    border-bottom:3px solid var(--ink);
}

.area-cta-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
}

.area-cta h2{
    margin:0;
    max-width:780px;
    font-size:clamp(3rem,6vw,6rem);
    line-height:.88;
    letter-spacing:-.055em;
    text-transform:uppercase;
}

.area-cta p{
    margin:0 0 25px;
    line-height:1.7;
    text-align:justify;
    hyphens:auto;
}

.area-footer{
    padding:46px 0 22px;
    background:var(--ink);
    color:#fff;
}

.area-footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
}

.area-footer strong{
    font-size:1.5rem;
}

.area-footer p{
    max-width:520px;
    line-height:1.55;
}

.area-footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:20px;
    font-size:.76rem;
    text-transform:uppercase;
}

.area-footer-links a,
.area-footer-bottom a{
    color:#fff;
    text-decoration:none;
}

.area-footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:25px;
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.22);
    font-size:.72rem;
}

@media(max-width:900px){

    .area-hero-grid,
    .area-copy-grid,
    .area-cta-grid{
        grid-template-columns:1fr;
    }

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

    .area-signals div:nth-child(2){
        border-right:0;
    }

    .area-signals div:nth-child(-n+2){
        border-bottom:3px solid var(--ink);
    }

    .area-points,
    .area-package-grid{
        grid-template-columns:1fr;
    }

    .area-link-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .area-package li{
        white-space:normal;
    }

}

@media(max-width:600px){

    .area-hero{
        padding:50px 0;
    }

    .area-hero h1{
        font-size:clamp(3.1rem,17vw,5rem);
    }

    .area-signals,
    .area-link-grid{
        grid-template-columns:1fr;
    }

    .area-signals div{
        border-right:0;
        border-bottom:2px solid var(--ink);
    }

    .area-signals div:last-child{
        border-bottom:0;
    }

    .area-footer-grid{
        grid-template-columns:1fr;
    }

    .area-footer-links{
        justify-content:flex-start;
    }

    .area-footer-bottom{
        display:block;
    }

    .area-footer-bottom a{
        display:block;
        margin-top:10px;
    }

}

/* TASK52_ENGLISH_MOBILE_AREA_OFFER
   Prevent English area hero/offer content from exceeding
   the mobile viewport. English mobile only. */
@media (max-width:600px){

    html[lang="en-GB"] .area-hero-grid{
        width:100%;
        min-width:0;
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }

    html[lang="en-GB"] .area-hero-grid > *{
        min-width:0;
        max-width:100%;
    }

    html[lang="en-GB"] .area-offer{
        width:100%;
        max-width:100%;
        min-width:0;
        margin:16px 0 10px;
        box-sizing:border-box;
        transform:none;
    }

    html[lang="en-GB"] .area-offer small,
    html[lang="en-GB"] .area-offer strong,
    html[lang="en-GB"] .area-offer p,
    html[lang="en-GB"] .area-offer a{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
    }

}

/* TASK53_ENGLISH_MOBILE_AREA_HERO
   Safe mobile geometry for long English London-area headings.
   English only. Desktop and Arabic remain unchanged. */
@media (max-width:600px){

    html[lang="en-GB"] .area-hero{
        padding:38px 0 42px;
    }

    html[lang="en-GB"] .area-hero h1{
        width:100%;
        max-width:100%;
        min-width:0;
        font-size:clamp(2.55rem,11.5vw,4rem);
        line-height:1.02;
        letter-spacing:-.025em;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    html[lang="en-GB"] .area-hero-lead{
        width:100%;
        max-width:100%;
        min-width:0;
        margin-top:22px;
        font-size:1rem;
        line-height:1.7;
        overflow-wrap:break-word;
        word-break:normal;
    }

    html[lang="en-GB"] .hero-actions{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:14px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    html[lang="en-GB"] .hero-actions .button{
        display:block;
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        text-align:center;
        overflow-wrap:break-word;
    }

}

/* TASK54_ENGLISH_MOBILE_AREA_INNER_PADDING
   Add comfortable inner left/right spacing for English area-page
   hero content on mobile, without changing Arabic or desktop. */
@media (max-width:600px){

    html[lang="en-GB"] .area-hero-grid{
        padding-left:16px;
        padding-right:16px;
        box-sizing:border-box;
    }

}