/* ==========================================================================
   Shared components
   ========================================================================== */

/* --- Section headings --- */

.section-eyebrow {
    margin-bottom: 15px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-accent);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-maroon-dark);
}

@media (max-width: 1024px) {

    .section-eyebrow {
        font-size: 14px;
    }

    .section-title {
        font-size: 40px;
    }
}

@media (max-width: 767px) {

    .section-title {
        font-size: 34px;
    }
}

/* --- Social icons (CSS masks, so one file works in any colour) --- */

.social-link {
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--social-icon) center / contain no-repeat;
    mask: var(--social-icon) center / contain no-repeat;
    transition: background-color 0.3s, transform 0.3s;
}

.social-link--facebook  { --social-icon: url("../images/icons/facebook.svg"); }
.social-link--x         { --social-icon: url("../images/icons/x-twitter.svg"); }
.social-link--youtube   { --social-icon: url("../images/icons/youtube.svg"); }
.social-link--linkedin  { --social-icon: url("../images/icons/linkedin.svg"); }
.social-link--instagram { --social-icon: url("../images/icons/instagram.svg"); }
.social-link--whatsapp  { --social-icon: url("../images/icons/whatsapp.svg"); }

/* --- Team member card --- */

.team-card {
    padding: 3px 3px 30px;
    background-color: var(--color-card-bg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.team-card__photo {
    width: 100%;
    height: auto;
}

.team-card__name {
    margin: 14px 0 0;
    font-family: var(--font-card-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-maroon-dark);
}

.team-card__quals {
    margin: 6px 12px 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text);
}

.team-card__role {
    margin: 8px 12px 0;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
}

@media (max-width: 1024px) {

    .team-card__name {
        font-size: 21px;
    }
}

@media (max-width: 767px) {

    .team-card__name {
        font-size: 20px;
    }
}

/* --- Star rating ---
   Two stacked rows of stars: the gold row is clipped to the rating width, so
   half stars come out exact. The width comes from a modifier class rather
   than a style attribute, because the Content-Security-Policy does not allow
   inline styles; add one here for each rating the site actually shows. */

.star-rating {
    position: relative;
    display: inline-block;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 5px;
    color: rgba(13, 30, 30, 0.2);
}

.star-rating__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-gold);
}

.star-rating__fill--90 {
    width: 90%;
}

/* --- Why choose us (home + services) --- */

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

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

.why__eyebrow,
.why__title {
    color: var(--color-white);
}

.why__title {
    margin: 0 385px 50px 0;
}

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

.why-card {
    flex: 0 0 calc((100% - 45px) / 4);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-align: center;
}

.why-card__icon {
    display: block;
    margin-bottom: 15px;
    color: var(--color-maroon-dark);
}

.why-card__icon svg {
    width: 40px;
    height: 40px;
    margin-inline: auto;
    stroke-width: 1;
}

.why-card__title {
    font-family: var(--font-card-title);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-white);
}

@media (max-width: 1024px) {

    .why {
        padding: 70px 30px;
    }

    .why__inner {
        padding-inline: 0;
    }

    .why__title {
        margin-right: 200px;
    }

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

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

@media (max-width: 767px) {

    .why {
        padding: 70px 20px;
    }

    .why__title {
        margin: 0 0 30px;
    }

    /* One card per row: two across leaves each one too narrow for its title */
    .why-card {
        flex: 0 0 100%;
        padding: 30px 20px;
    }

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

/* --- Testimonials (home + services) ---
   Photograph behind the band under a 70% #0D1E1E overlay, as on the
   existing site. */

.testimonials {
    position: relative;
    padding: 100px 0;
    background-color: var(--color-grey-light);
    background-image: url("../images/general-images/testimonial-background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-secondary);
    opacity: 0.7;
}

.testimonials__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 15px;
}

.testimonials__eyebrow {
    text-align: center;
    color: var(--color-white);
}

.testimonials__title {
    margin: 0 250px 50px;
    text-align: center;
    color: var(--color-white);
}

/* Carousel: one testimonial at a time */

.testimonial-carousel__viewport {
    overflow: hidden;
}

.testimonial-carousel__track {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial {
    flex: 0 0 100%;
    padding-inline: 20px;
    text-align: center;
}

.testimonial__stars {
    width: 116px;
    height: 20px;
    margin: 0 auto 18px;
    fill: var(--color-gold);
}

.testimonial__quote {
    max-width: 860px;
    margin: 0 auto 24px;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1.7;
    color: var(--color-text-light);
}

.testimonial__quote::before {
    content: "\201C";
    display: block;
    margin-bottom: -20px;
    font-family: var(--font-heading);
    font-size: 80px;
    line-height: 1;
    color: var(--color-maroon-mid);
}

.testimonial__author {
    font-family: var(--font-card-title);
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-white);
}

/* Controls */

.testimonial-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

.carousel-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--color-white);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.carousel-button svg {
    width: 20px;
    height: 20px;
}

.carousel-button:hover,
.carousel-button:focus-visible {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-maroon-dark);
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    transition: background-color 0.3s, transform 0.3s;
}

.carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.65);
}

.carousel-dot.is-active {
    background-color: var(--color-white);
    transform: scale(1.3);
}

@media (max-width: 1024px) {

    .testimonials {
        padding: 70px 30px;
    }

    .testimonials__inner {
        padding-inline: 0;
    }

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

    .testimonial__quote {
        font-size: 20px;
    }
}

@media (max-width: 767px) {

    .testimonials {
        padding: 70px 20px;
    }

    .testimonials__title {
        margin: 0 0 30px;
    }

    .testimonial {
        padding-inline: 0;
    }

    .testimonial__quote {
        font-size: 18px;
    }

    .testimonial-carousel__controls {
        gap: 16px;
        margin-top: 30px;
    }
}

/* --- Breadcrumb (inner-page banners) --- */

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-breadcrumb-text);
}

.breadcrumb__item a {
    color: inherit;
    transition: color 0.3s;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus {
    color: var(--color-white);
}

.breadcrumb__arrow {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
    color: var(--color-accent);
}

/* --- Button --- */

.button {
    display: inline-block;
    padding: 16px 32px;
    background-color: var(--color-maroon-dark);
    color: var(--color-button-text);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 2px;
    transition: background-color 0.3s, color 0.3s;
}

.button:hover,
.button:focus {
    background-color: var(--color-dark-grey);
    color: var(--color-white);
}

@media (max-width: 1024px) {

    .button {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .button {
        font-size: 14px;
    }
}

/* --- Page hero (inner-page banner) ---
   Centred page title and breadcrumb over a photograph, under a maroon/grey
   gradient, with the transparent navigation row sitting on top. */

.page-hero {
    position: relative;
    margin-top: calc(var(--header-row-height) * -1);
    background-color: var(--color-maroon-dark);
    background-image: url("../images/general-images/mallet.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        100deg,
        var(--color-maroon-dark) 0%,
        var(--color-dark-grey) 100%
    );
    opacity: 0.8;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40vh;
    max-width: var(--container-width);
    margin-inline: auto;
    /* Top padding clears the navigation row the hero was pulled up behind */
    padding: calc(var(--header-row-height) - 20px) 15px 0;
}

.page-hero__title {
    margin-bottom: 10px;
    text-align: center;
    color: var(--color-white);
}

/* Pages whose banner differs from the default. The blog banner runs its
   gradient the other way, with the maroon reaching full strength at 56% —
   the same treatment as the about page hero. */
.page-hero--blog {
    background-image: url("../images/general-images/lawyer-writing.jpg");
}

.page-hero--contact,
.page-hero--privacy,
.page-hero--complaints {
    background-image: url("../images/general-images/lawyers-working-together.jpg");
}

/* Every fee page shares one banner photograph */
.page-hero--fees {
    background-image: url("../images/general-images/lawyer-providing-information.jpg");
}

.page-hero--blog::before,
.page-hero--contact::before,
.page-hero--privacy::before,
.page-hero--complaints::before {
    background-image: linear-gradient(
        90deg,
        var(--color-dark-grey) 0%,
        var(--color-maroon-dark) 56%
    );
}

@media (max-width: 1024px) {

    .page-hero__inner {
        min-height: 35vh;
        padding-inline: 30px;
    }
}

@media (max-width: 767px) {

    .page-hero__inner {
        padding-inline: 20px;
    }
}

/* --- Meet the lawyers (home + fees) ---
   A four-card preview of the team, with a link through to the full list. */

.team {
    padding: 100px 0;
}

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

.team__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 70px;
}

.team__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* .team-card itself is defined above — shared with the about page */
.team__grid .team-card {
    flex: 0 0 calc((100% - 60px) / 4);
}

@media (max-width: 1024px) {

    .team {
        padding: 70px 30px;
    }

    .team__inner {
        padding-inline: 0;
    }

    .team__header {
        margin-bottom: 50px;
    }

    .team__grid .team-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 767px) {

    .team {
        padding: 70px 20px;
    }

    .team__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 40px;
    }

    .team__grid .team-card {
        flex: 0 0 100%;
    }
}

/* --- Article cards (home + blog index) ---

   Reworked from the existing site's two-column layout: four equal cards with
   a consistent image ratio, so the row reads as a set rather than as two
   oversized posts.
   ------------------------------------------------------------------------ */

.blog {
    padding: 100px 0;
    background-color: var(--color-white);
}

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

.blog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

.blog__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* On a white band the cards need an edge rather than a shadow, so they take
   the same light surface as the team cards above. */
.post-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 72px) / 4);
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.post-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.post-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card:hover .post-card__media img {
    transform: scale(1.06);
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

.post-card__date {
    margin-bottom: 10px;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text);
}

.post-card__title {
    margin-bottom: 16px;
    font-family: var(--font-card-title);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-maroon-dark);
}

.post-card__title a {
    transition: color 0.3s;
}

.post-card__title a:hover {
    color: var(--color-accent);
}

.post-card__author {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
}

@media (max-width: 1024px) {

    .blog {
        padding: 70px 30px;
    }

    .blog__inner {
        padding-inline: 0;
    }

    .blog__header {
        margin-bottom: 40px;
    }

    .blog__grid .post-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

@media (max-width: 767px) {

    .blog {
        padding: 70px 20px;
    }

    .blog__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .blog__grid .post-card {
        flex: 0 0 100%;
    }
}

/* --- Get In Touch (services + contact) ---
   The offices on the left, enquiry form on the right. The form is front end
   only; submission is wired up when the backend is built.
   ------------------------------------------------------------------------ */

.contact {
    padding: 100px 0;
}

.contact__inner {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: 15px;
}

/* Spans the full width above the two columns */
.contact__header {
    margin-bottom: 50px;
}

.contact__columns {
    display: flex;
}

.contact__details {
    flex: 0 0 50%;
    margin-right: 50px;
}

.contact__eyebrow {
    margin-bottom: 5px;
}

.contact__title {
    margin-bottom: 20px;
}


.office + .office {
    margin-top: 15px;
}

/* The rule stops short of the full width, as on the existing site */
.office + .office::before {
    content: "";
    display: block;
    width: 80%;
    margin-bottom: 15px;
    border-top: 1px solid var(--color-rule);
}

.office__name {
    margin-bottom: 10px;
    font-family: var(--font-card-title);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-accent);
}

/* The address sits above the contact lines rather than beside them. Side by
   side, neither half is wide enough for a full "Email: name@MorganHill…"
   line at any screen width, so the email wrapped and each office's columns
   settled at a different width, leaving the addresses out of line. */
.office__details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

.office__address {
    font-style: normal;
    font-weight: 600;
}

.office__lines {
    /* Last resort on a very narrow screen: break inside the address rather
       than let it spill out of the page */
    overflow-wrap: break-word;
}

.office__lines a {
    color: inherit;
    transition: color 0.3s;
}

.office__lines a:hover,
.office__lines a:focus-visible {
    color: var(--color-maroon-dark);
}

/* --- Enquiry form --- */

.contact__form {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    /* Top of the column, level with the first office beside it */
    justify-content: flex-start;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form__field--full {
    grid-column: 1 / -1;
}

/* The honeypot field: off screen for people, still in the DOM for bots */
.contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__legend {
    grid-column: 1 / -1;
    margin-bottom: -5px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}

.contact-form__label {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Marks a compulsory field. The input's own required attribute is what tells
   assistive technology, so the asterisk is decorative. */
.contact-form__required {
    color: var(--color-maroon-dark);
}

.contact-form__input {
    width: 100%;
    padding: 20px 25px;
    border: 1px solid var(--color-divider);
    border-radius: 0;
    background-color: transparent;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-secondary);
    transition: border-color 0.3s;
}

.contact-form__input::placeholder {
    color: var(--color-grey-mid);
}

.contact-form__input:focus-visible {
    border-color: var(--color-maroon-dark);
    outline: 1px solid var(--color-maroon-dark);
    outline-offset: -2px;
}

/* Native select arrows differ per browser, so draw our own */
select.contact-form__input {
    appearance: none;
    padding-right: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C171F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 25px center;
    background-repeat: no-repeat;
    background-size: 14px;
    cursor: pointer;
}

textarea.contact-form__input {
    resize: vertical;
}

.contact-form__actions {
    grid-column: 1 / -1;
}

.contact-form__note {
    margin-top: 15px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Shown in place of the form once the enquiry has been posted in the
   background (js/enquiry-form.js), so the enquirer stays on the page they
   were reading. Without JavaScript the server sends its own pages instead. */
.form-result {
    padding: 25px 30px;
    border-left: 3px solid var(--color-maroon-dark);
    background-color: var(--color-grey-light);
}

.form-result:focus {
    outline: none;
}

.form-result__title {
    margin-bottom: 12px;
    font-family: var(--font-card-title);
    font-size: 24px;
    line-height: 1.3;
    color: var(--color-secondary);
}

.form-result__text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

.form-result__errors {
    margin: 12px 0 0 20px;
    list-style: disc;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

.form-result__errors li + li {
    margin-top: 6px;
}

@media (max-width: 1024px) {

    .contact {
        padding: 70px 30px;
    }

    .contact__inner {
        padding-inline: 0;
    }

    .contact__details {
        margin-right: 30px;
    }

    .office + .office::before {
        width: 95%;
    }

    .office__name {
        font-size: 19px;
    }

    .office__details {
        font-size: 17px;
    }

    .contact-form__input {
        padding: 16px 20px;
        font-size: 17px;
    }

    select.contact-form__input {
        background-position: right 20px center;
    }
}

@media (max-width: 767px) {

    .contact {
        padding: 70px 20px;
    }

    .contact__columns {
        flex-direction: column;
    }

    .contact__details,
    .contact__form {
        flex: 0 0 auto;
    }

    .contact__header {
        margin-bottom: 40px;
    }

    .contact__details {
        margin: 0 0 50px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .office + .office::before {
        width: 100%;
    }

    .office__name {
        font-size: 18px;
    }

    .office__details {
        font-size: 16px;
    }

    .contact-form__input {
        font-size: 16px;
    }
}

/* --- Legal document (privacy policy + complaints procedure) ---
   A long piece of prose: one readable measure, generous spacing between
   sections, and tables that scroll rather than overflow the page.
   ------------------------------------------------------------------------ */

.policy {
    padding: 100px 0;
    background-color: var(--color-white);
}

.policy__inner {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 15px;
}

.policy__body {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text);
}

.policy__body h2 {
    margin: 55px 0 18px;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-maroon-dark);
}

/* No leading gap above the opening section */
.policy__body > *:first-child {
    margin-top: 0;
}

.policy__body p {
    margin-bottom: 18px;
    max-width: 80ch;
}

.policy__body ul {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
    max-width: 80ch;
}

.policy__body li {
    margin-bottom: 8px;
}

.policy__body strong {
    font-weight: 600;
    color: var(--color-secondary);
}

.policy__body a {
    color: var(--color-maroon-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}

.policy__body a:hover,
.policy__body a:focus-visible {
    color: var(--color-secondary);
}

/* --- Tables ---
   The wrapper does the scrolling, so the table itself stays a real table and
   its header and body rows share one set of column widths. */

.policy__table {
    max-width: 100%;
    margin-bottom: 28px;
    overflow-x: auto;
}

.policy__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
}

.policy__body td,
.policy__body th {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    vertical-align: top;
    text-align: left;
}

.policy__body th {
    background-color: var(--color-grey-light);
    font-weight: 600;
    color: var(--color-secondary);
}

/* Two shapes of table on this page:

   - a term/definition list, where the first column is the term being defined
     and gets a narrow shaded column;
   - a proper column-headed table, where both columns carry equal-weight
     content and must therefore be equal width. Its header row is the <thead>,
     so :not(:has(thead)) tells the two apart. */
.policy__body table:not(:has(thead)) td:first-child {
    width: 30%;
    background-color: var(--color-grey-light);
}

.policy__body table:has(thead) td,
.policy__body table:has(thead) th {
    width: 50%;
}

.policy__body td p {
    margin-bottom: 0;
}

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

@media (max-width: 1024px) {

    .policy {
        padding: 70px 30px;
    }

    .policy__inner {
        padding-inline: 0;
    }

    .policy__body {
        font-size: 17px;
    }

    .policy__body h2 {
        font-size: 28px;
        margin-top: 45px;
    }
}

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

@media (max-width: 767px) {

    .policy {
        padding: 60px 20px;
    }

    .policy__body {
        font-size: 16px;
    }

    .policy__body h2 {
        font-size: 24px;
        margin-top: 40px;
    }

    .policy__body table {
        /* Narrower than this and the columns become unreadable, so the
           wrapper scrolls instead of the text squashing */
        min-width: 480px;
        font-size: 15px;
    }

    .policy__body td,
    .policy__body th {
        padding: 10px 12px;
    }

    .policy__body table:not(:has(thead)) td:first-child {
        width: auto;
        min-width: 140px;
    }
}

/* --- Call to action band (home + service pages) ---
   Full-width photograph under a maroon gradient, carrying the firm's strapline
   and the consultation button. */

.cta-band {
    position: relative;
    padding: 120px 0;
    background-image: url("../images/general-images/lawyer-providing-information.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(240deg, rgba(60, 60, 60, 0) 0%, var(--color-maroon-dark) 60%);
    opacity: 0.91;
}

.cta-band__inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 15px;
}

.cta-band__title {
    margin-bottom: 20px;
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-white);
}

.cta-band__text {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-light);
}

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

@media (max-width: 1024px) {

    .cta-band {
        padding: 100px 10px;
    }

    .cta-band__inner {
        padding-inline: 0;
    }

    .cta-band__title {
        font-size: 40px;
    }

    .cta-band__text {
        font-size: 17px;
    }
}

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

@media (max-width: 767px) {

    .cta-band {
        padding: 80px 10px;
        text-align: center;
    }

    .cta-band__title {
        font-size: 34px;
    }

    .cta-band__text {
        font-size: 16px;
    }
}

/* --- Office maps (contact + register a new case) ---
   One Google map per office, in a row as on the existing site, which carries
   three. The fourth is Romford. */

.office-maps {
    padding: 0 0 100px;
}

.office-maps__inner {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: 15px;
}

.office-maps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
}

/* The existing site sets these at 44px across three columns. With Romford
   making four, 44px wraps "Head Office (Ilford)" — 347px of text in a 278px
   column. 32px is the largest size that keeps it on one line in Cormorant
   Garamond and in the Georgia fallback, so it holds if the webfont fails. */
.office-map__title {
    margin-bottom: 20px;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--color-maroon-dark);
}

.office-map__frame {
    /* Google's embed has no intrinsic size, so the box sets the height */
    height: 300px;
    overflow: hidden;
}

.office-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

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

@media (max-width: 1024px) {

    .office-maps {
        padding: 0 30px 70px;
    }

    .office-maps__inner {
        padding-inline: 0;
    }

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

    .office-map__title {
        font-size: 34px;
        white-space: normal;
    }
}

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

@media (max-width: 767px) {

    .office-maps {
        padding: 0 20px 70px;
    }

    .office-maps__grid {
        grid-template-columns: 1fr;
    }

    .office-map__title {
        font-size: 28px;
        white-space: normal;
    }

    .office-map__frame {
        height: 260px;
    }
}

/* --- Chat widget (every page with a footer) ---
   A launcher pinned to the bottom right corner that opens the enquiry form.
   Hidden until js/chat-widget.js runs, so it never appears without its
   behaviour. */

/* column-reverse keeps the launcher itself pinned to the corner: the panel
   opens above it rather than pushing it up the page */
.chat-widget {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 60;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 15px;
}

.chat-widget__launcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    border: 0;
    border-radius: 50px;
    background-color: var(--color-maroon-dark);
    box-shadow: 0 10px 30px rgba(19, 16, 58, 0.25);
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--color-button-text);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.chat-widget__launcher:hover,
.chat-widget__launcher:focus-visible {
    background-color: var(--color-dark-grey);
    color: var(--color-white);
}

.chat-widget__icon {
    width: 22px;
    height: 22px;
    flex: none;
}

/* Once the panel is open the launcher becomes the close control: it drops
   back to a circle and shows a down arrow. Whichever of the two icons and
   two labels is not in use is display: none, so exactly one label reaches
   assistive technology. */
.chat-widget__icon--arrow,
.chat-widget:not(.chat-widget--open) .chat-widget__close-label {
    display: none;
}

.chat-widget--open .chat-widget__icon--bubble,
.chat-widget--open .chat-widget__launcher-text {
    display: none;
}

.chat-widget--open .chat-widget__icon--arrow {
    display: block;
}

.chat-widget--open .chat-widget__launcher {
    padding: 15px;
}

.chat-widget__panel {
    width: min(380px, calc(100vw - 40px));
    max-height: min(620px, calc(100vh - 120px));
    overflow-y: auto;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 50px rgba(19, 16, 58, 0.22);
}

.chat-widget__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 25px;
    background-color: var(--color-maroon-dark);
}

.chat-widget__eyebrow {
    margin-bottom: 4px;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.chat-widget__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-white);
}

.chat-widget__close {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    background-color: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: opacity 0.3s;
}

.chat-widget__close:hover,
.chat-widget__close:focus-visible {
    opacity: 0.7;
}

.chat-widget__close svg {
    width: 100%;
    height: 100%;
}

.chat-widget__body {
    padding: 25px;
}

.chat-widget__intro {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
}

.chat-widget__intro a {
    color: var(--color-maroon-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The shared form lays its fields out two across; in the panel they stack */
.chat-widget__form {
    grid-template-columns: 1fr;
    gap: 15px;
}

.chat-widget__form .contact-form__input {
    padding: 12px 15px;
    font-size: 16px;
}

.chat-widget__form select.contact-form__input {
    padding-right: 40px;
    background-position: right 15px center;
}

.chat-widget__form .contact-form__legend,
.chat-widget__form .contact-form__note {
    font-size: 13px;
}

.chat-widget__form .button {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    text-align: center;
    cursor: pointer;
}

/* The same result panel, sized for the narrower chat panel */
.chat-widget__body .form-result {
    padding: 20px;
}

.chat-widget__body .form-result__title {
    font-size: 20px;
}

.chat-widget__body .form-result__text,
.chat-widget__body .form-result__errors {
    font-size: 14px;
}

@media (max-width: 767px) {

    .chat-widget {
        right: 15px;
        bottom: 15px;
        gap: 12px;
    }

    .chat-widget__panel {
        max-height: calc(100vh - 100px);
    }

    .chat-widget__title {
        font-size: 24px;
    }

    .chat-widget__body {
        padding: 20px;
    }
}