/* Omni site: accessibility and motion improvements layered after the theme CSS.
   Nothing here restyles the design; it adds what the theme left out. */

/* Skip link: hidden until it receives keyboard focus, then shown top left. */
.skip_link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 1000;
    padding: 12px 20px;
    background: #9B0167;
    color: #fff;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    text-decoration: none;
}
.skip_link:focus {
    top: 16px;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* The theme removes focus outlines in places; keyboard users get a clear ring
   back, and mouse users are not affected (focus-visible). */
:focus-visible,
html .flickity-button:focus-visible {
    outline: 3px solid #9B0167;
    outline-offset: 3px;
}
/* Flickity focuses the whole carousel after an arrow click; the strip itself
   never needs a ring, its arrows and dots carry it for keyboard users. */
.flickity-enabled:focus-visible,
.flickity-enabled:focus {
    outline: none;
}
.global_header--dark :focus-visible,
.global_footer :focus-visible,
.priority_media :focus-visible {
    outline-color: #fff;
}

/* Main region is focusable for the skip link but needs no ring of its own. */
#main_content:focus {
    outline: none;
}

/* Testimonial quotes. The theme drew a white band behind the quote that did
   not follow the text, which readers took for a rendering fault. The band
   goes; a rule in the brand colour marks the quote instead. */
.blockquote__content::after {
    display: none;
}
.blockquote__quote {
    display: block;
    border-left: 4px solid #9B0167;
    padding-left: 1.2rem;
}

/* Testimonials carousel: arrows either side of the quote, vertically centred,
   using the theme's own arrow artwork; dots dark enough to be seen. */
.testimonials .inner .flickity-prev-next-button {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-size: 44px 44px;
}
.testimonials .inner .flickity-prev-next-button.previous {
    left: -8px;
    right: auto;
}
.testimonials .inner .flickity-prev-next-button.next {
    right: -8px;
}
.testimonials .inner .flickity-prev-next-button.previous:after,
.testimonials .inner .flickity-prev-next-button.next:after {
    width: 44px;
    height: 44px;
    background-size: 44px 44px;
}
.testimonials .inner .flickity-page-dots .dot {
    background: #bdbbbc;
}
.testimonials .inner .flickity-page-dots .dot.is-selected {
    background: #9B0167;
}
@media only screen and (max-width: 800px) {
    .testimonials .inner .flickity-prev-next-button {
        display: none;   /* swipe on touch screens; the dots remain */
    }
}

/* Video embeds fill their column; each keeps its own aspect ratio (set inline
   from the embed's dimensions), so a column of videos lines up. */
.wp_vimeo_embed iframe {
    display: block;
    width: 100%;
    height: auto;
}

/* Statistics blocks. The theme set the figures in heavy black sans on a grey
   slab with faint labels. The figures now use the heading serif in the brand
   colour, units sit smaller beside them, labels are readable, and the block
   is a white panel with a brand rule, divided between figures. */
.statistics-block {
    background-color: #fff;
    border-top: 4px solid #9B0167;
}
.statistics-block .statistics .statistic {
    padding: 36px 24px 32px;
    border-left: 1px solid #e4e2e3;
}
.statistics-block .statistics .statistic:first-child {
    border-left: 0;
}
.statistics-block .statistics .statistic .prepend,
.statistics-block .statistics .statistic .number,
.statistics-block .statistics .statistic .append {
    font-family: "Source Serif Pro", serif;
    font-weight: 600;
    color: #9B0167;
    font-size: 3.6em;
    line-height: 1;
    padding: 0;
    vertical-align: baseline;
}
.statistics-block .statistics .statistic .append {
    font-size: 1.6em;
    margin-left: 0.15em;
}
.statistics-block .statistics .statistic .sub-title {
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1.45;
    color: #333;
    max-width: 22ch;
    margin: 14px auto 0;
}
@media (max-width: 800px) {
    .statistics-block .statistics .statistic {
        display: block;
        width: 100%;
        border-left: 0;
        border-top: 1px solid #e4e2e3;
        padding: 24px 16px;
    }
    .statistics-block .statistics .statistic:first-child {
        border-top: 0;
    }
}

/* Office details on the contact page: a clear hierarchy in place of one long
   run of large text. Address, how to find us, email, then phone. The theme
   gave the column 23% of the width, which wrapped every link; a third of the
   width keeps each line whole and leaves the map plenty of room. */
@media (min-width: 801px) {
    .contact_details__details {
        width: 34vw;
        min-width: 340px;
        max-width: 480px;
    }
}
.contact_details__details .contact_details__address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 400;
}
.contact_details__find_us,
.contact_details__email_line,
.contact_details__phone,
.contact_details__label {
    margin: 1.1rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;   /* these rows sit outside the theme's <address>, which carried the colour */
}
.contact_details__find_us a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.6rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.contact_details__find_us a:hover .contact_details__find_label,
.contact_details__find_us a:focus .contact_details__find_label {
    color: #ff24ab;
}
.contact_details__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}
.contact_details__external {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0.75;
}
.contact_details__email_line .contact_details__email {
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: normal;   /* wraps only at the <wbr> after the @ */
}
.contact_details__label {
    display: block;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.15rem;
}
.contact_details__phone .contact_details__tel {
    font-size: 1.35rem;
    font-weight: 600;
}

/* Showreel and service tiles: the theme hid each tile's still on desktop and
   relied on the video's first frame, which browsers do not reliably paint
   before playback. The still now shows until hover, when the theme's own
   transition reveals the video. */
.showreels .inner .showreel-list .showreel-list-item .showreel-list-item-image,
.video-product-category-item .video-product-category-item-image {
    display: block;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.showreels .inner .showreel-list .showreel-list-item.video-yes:hover .showreel-list-item-image,
.video-product-category-item:hover .video-product-category-item-image {
    opacity: 0;
}

/* Work tiles (portfolio grid, recent work, related projects). Titles sat too
   large for the column and wrapped to three ragged lines; summaries were set
   light and small. Titles now hold two lines, summaries read as body text. */
.work-list-container .work-list-content a.work-list-box h3.work-list-box-content-title,
.recent-work a.work-list-box h3.work-list-box-content-title {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0.75rem 0 0.35rem;
}
.work-list-container .work-list-content a.work-list-box p.work-list-box-content-summary,
.recent-work a.work-list-box p.work-list-box-content-summary {
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 400;
    color: #4a4a4a;
    margin: 0;
}
.child_pages__item_heading {
    font-size: 1.2rem;
    line-height: 1.3;
}

/* The B Corp mark in the commitment section scales with its column; never let
   it grow past the size it has on a large desktop screen. */
.bcorp-details .icon__bcorporation {
    max-width: 200px;
}

/* Footer services list: the theme jumps from three columns to one at 800px.
   Two columns first, down to one only on phones. */
@media only screen and (min-width: 560px) and (max-width: 800px) {
    .services_footer .services-container .services-list {
        column-count: 2;
    }
}

/* Footer accreditation badges: the theme shrinks them to 30px tall on small
   screens, where they cannot be read. They wrap onto two rows instead. */
@media only screen and (max-width: 800px) {
    .global_footer__logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 18px 28px;
    }
    .global_footer__logos img {
        max-height: 64px;
    }
    .global_footer__ecologi_anchor,
    .global_footer__greenhosting_anchor {
        margin-left: 0;
    }
}

/* The last clickable things without a hover state: the Feel / Think / Act
   headings, the clickable map on the contact page, and the skip link. */
.info-circles .right .item h3.accordion-title {
    transition: color 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.info-circles .right .item h3.accordion-title:hover,
.info-circles .right .item h3.accordion-title:focus-visible {
    color: #ff24ab;
}
.contact_details__map_anchor .contact_details__map {
    transition: opacity 240ms ease;
}
.contact_details__map_anchor:hover .contact_details__map,
.contact_details__map_anchor:focus-visible .contact_details__map {
    opacity: 0.85;
}
.skip_link:hover {
    background: #7a0151;
}

/* Footer copyright line: its links had no hover or focus state. */
.global_footer__copyright a {
    transition: color 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.global_footer__copyright a:hover,
.global_footer__copyright a:focus {
    color: #ff24ab;
    text-decoration: underline;
}

/* Contact form: the honeypot is invisible to people, the result message is
   shown only when there is one, in a colour that says what happened. */
.omni-contact-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.omni-contact-form .wpcf7-response-output {
    display: none;
    margin: 1.5rem 0 0;
    padding: 0.9rem 1.1rem;
    border: 2px solid #9B0167;
    font-weight: 600;
}
.omni-contact-form .wpcf7-response-output.is-sent {
    display: block;
    border-color: #019B82;
}
.omni-contact-form .wpcf7-response-output.is-error {
    display: block;
    border-color: #9B0167;
}
.omni-contact-form [type="submit"]:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Respect a visitor's request for less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}