/* ==========================================================================
   Home page — hero

   Background slideshow matching the existing site: four images, 5s per slide,
   500ms cross-fade, slow Ken Burns zoom-in, under a translucent red overlay.
   The section is pulled up under the transparent navigation row.
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: calc(var(--header-row-height) * -1);
    /* The row of the header sitting over the hero is added on top of the
       viewport height so the *visible* hero is the full 50vh. The matching
       top padding keeps the content centred in that visible area. */
    min-height: calc(50vh + var(--header-row-height));
    padding: calc(var(--header-row-height) + 57px) 0 57px;
    overflow: hidden;
}

/* --- Slideshow --- */

.hero__slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: scale(1);
    /* The zoom runs far slower than a slide lasts, so each image is still
       moving when it hands over — as on the existing site. */
    transition: opacity 0.5s ease-in-out, transform 10s linear;
}

.hero__slide.is-active {
    opacity: 1;
    transform: scale(1.3);
}

.hero__slide--lawyer  { background-image: url("../../images/hero-section/male-lawyer-working.jpg"); }
.hero__slide--london-eye { background-image: url("../../images/hero-section/london-eye.jpg"); }
.hero__slide--tower   { background-image: url("../../images/hero-section/tower-of-london.jpg"); }
.hero__slide--justice { background-image: url("../../images/hero-section/statue-of-justice-symbol.jpg"); }

/* --- Red overlay --- */

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--color-hero-overlay);
}

/* --- Content --- */

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Full width rather than the boxed 1200px container — on a wide screen a
       centred container makes start-aligned text read as centred. */
    padding-left: clamp(30px, 7vw, 140px);
    text-align: start;
}

.hero__title {
    margin-bottom: 25px;
    font-family: var(--font-heading);
    /* Sized to keep the heading on a single line across desktop widths */
    font-size: min(3.9vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-white);
}

.hero__text {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-hero-text);
    margin-bottom: 24px;
}

.hero__stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.hero__stat-figure {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-white);
}

.hero__stat-label {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-hero-text);
}

/* ==========================================================================
   Introduction — "We Have Been Operating Since 2020"
   ========================================================================== */

.about-intro {
    padding: 100px 0 40px;
}

.about-intro__inner {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 15px;
}

/* --- Imagery: the statue sits in front of the pillar graphic --- */

.about-intro__media {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 0 0 50%;
}

/* Sits low and far enough left to read as the statue's shadow */
.about-intro__pillar {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: -10%;
    width: 58%;
    height: auto;
}

.about-intro__figure {
    position: relative;
    z-index: 2;
    width: 65%;
    height: auto;
}

/* --- Copy --- */

.about-intro__content {
    flex: 1 1 50%;
}

.about-intro__title {
    margin-bottom: 5px;
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-maroon-dark);
}

.about-intro__text {
    max-width: 92%;
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text);
}

.about-intro__values {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

.value-list {
    flex: 1 1 50%;
}

.value-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-secondary);
}

.value-list li + li {
    margin-top: 10px;
}

.value-list__icon {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: var(--color-maroon-dark);
}

/* ==========================================================================
   Services
   ========================================================================== */

.services {
    padding: 100px 0;
    background-color: var(--color-grey-light);
}

.services__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 15px;
}

.services__eyebrow {
    text-align: center;
}

.services__title {
    margin: 0 250px 50px;
    text-align: center;
}

/* --- Card grid: four across --- */

.services__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 15px;
}

/* Three across, so the nine services fill three even rows */
.service-card {
    flex: 0 0 calc((100% - 30px) / 3);
    text-align: center;
}

.service-card__image {
    width: 100%;
    height: auto;
    transition: opacity 0.3s;
}

.service-card:hover .service-card__image {
    opacity: 0.85;
}

.service-card__title {
    margin: 15px 0 -10px;
    font-family: var(--font-card-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-accent);
}

/* The call to action band lives in components.css — it is shared with the
   service pages */

/* "Why choose us" lives in components.css — it is shared with the services page */

/* Testimonials live in components.css — shared with the services page */


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .hero {
        min-height: calc(45vh + var(--header-row-height));
        padding: calc(var(--header-row-height) + 70px) 30px 70px;
    }

    .hero__inner {
        padding: 0 0 0 25px;
    }

    .hero__title {
        font-size: 44px;
    }

    .hero__text {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .hero__stat-figure {
        font-size: 40px;
    }

    .about-intro {
        padding: 80px 10px 20px;
    }

    .about-intro__inner {
        gap: 20px;
    }

    .about-intro__pillar {
        top: 12%;
        left: -5%;
        width: 60%;
    }

    .about-intro__figure {
        width: 70%;
    }

    .about-intro__title {
        font-size: 40px;
    }

    .about-intro__text,
    .value-list li {
        font-size: 17px;
    }

    .about-intro__values {
        margin-bottom: 40px;
    }

    .services {
        padding: 70px 30px;
    }

    .services__inner {
        padding-inline: 0;
    }

    .services__title {
        margin: 0 70px 50px;
    }

    .services__grid {
        gap: 30px 15px;
    }

    .service-card {
        flex: 0 0 calc((100% - 15px) / 2);
    }

    .service-card__title {
        font-size: 21px;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .hero {
        min-height: calc(40vh + var(--header-row-height));
        padding: calc(var(--header-row-height) + 50px) 20px 50px;
    }

    .hero__inner {
        padding: 0 0 0 15px;
    }

    .hero__title {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .hero__text {
        font-size: 18px;
    }

    .hero__stat-figure {
        font-size: 34px;
    }

    .about-intro {
        padding: 60px 10px 10px;
    }

    .about-intro__inner {
        flex-direction: column;
        gap: 30px;
    }

    /* Copy first, imagery beneath it */
    .about-intro__content {
        order: 1;
        flex: 1 1 auto;
    }

    .about-intro__media {
        order: 2;
        flex: 0 0 auto;
        align-self: center;
        width: 100%;
        max-width: 320px;
    }

    .about-intro__values {
        margin-bottom: 0;
    }

    .about-intro__title {
        font-size: 34px;
    }

    .about-intro__text {
        max-width: 100%;
    }

    .about-intro__text,
    .value-list li {
        font-size: 16px;
    }

    .services {
        padding: 70px 20px;
    }

    .services__title {
        margin: 0 0 30px;
    }

    .service-card__title {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep the cross-fade, drop the zoom
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .hero__slide,
    .hero__slide.is-active {
        transform: none;
        transition: opacity 0.5s ease-in-out;
    }
}