/**
 * Layout corrections.
 *
 * The base stylesheet carries rules from two earlier builds. Rather than
 * unpick 3,600 lines, these rules run last and set the layout this theme
 * actually needs. Anything here is a candidate for folding back into
 * style.css once the old rules are retired.
 */

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.contact-top-bar {
    position: relative;
    z-index: 30;
    background: var(--c-primary-dark, #0b0e12);
    color: var(--c-on-primary, #ffffff);
    padding: 8px 0;
    font-size: .875rem;
}

/* Social on the left, phone and email on the right, all on one row. */
.contact-top-bar .top-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
}

.contact-top-bar .top-bar-column {
    display: flex;
    align-items: center;
    min-width: 0;
}

.contact-top-bar .column-left {
    flex: 0 1 auto;
}

.contact-top-bar .column-right {
    flex: 0 1 auto;
    margin-left: auto;
}

.contact-top-bar .contact-items {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.contact-top-bar .contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-top-bar a {
    color: inherit;
    text-decoration: none;
}

.contact-top-bar a:hover {
    text-decoration: underline;
}

.contact-top-bar .social-icons {
    gap: 4px;
}

.contact-top-bar .social-icons a {
    width: 32px;
    height: 32px;
}

.contact-top-bar .social-icons svg {
    width: 17px;
    height: 17px;
}

.site-header {
    position: relative;
    z-index: 20;
    background: var(--c-primary, #14181d);
    padding: 14px 0;
}

.site-header .header-content {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: nowrap;
}

/* The logo is dark artwork, so the header stays dark on every page and the
   reversed mark is used throughout. */
.site-branding {
    flex: 0 0 auto;
    margin: 0;
}

.site-header .site-branding img,
.has-transparent-header .site-branding img {
    height: var(--logo-h, 52px);
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.main-navigation {
    flex: 1 1 auto;
    min-width: 0;
}

.main-navigation ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 10px 14px;
    color: var(--c-on-primary, #ffffff);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 3px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background: rgba(255, 255, 255, .1);
}

.search-form-container {
    flex: 0 0 auto;
}

.site-header .search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 3px;
    overflow: hidden;
}

.site-header .search-field {
    width: 140px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--c-on-primary, #ffffff);
    font: inherit;
    font-size: .875rem;
}

.site-header .search-field::placeholder {
    color: rgba(255, 255, 255, .7);
}

.site-header .search-submit {
    border: 0;
    background: transparent;
    padding: 8px 10px;
    cursor: pointer;
}

.site-header .search-submit img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    display: block;
}

.header-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    font-size: .9375rem;
}

/* The hero sits below the header rather than behind it, so nothing overlaps. */
.site.has-hero-background .site-header {
    position: relative;
}

.hero-background {
    position: relative;
    height: clamp(420px, 56vh, 620px);
}

.hero-image-container,
.hero-video-container,
.hero-overlay {
    position: absolute;
    inset: 0;
}

.hero-image-container {
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(var(--c-primary-rgb, 20, 24, 29), .55) 0%, rgba(var(--c-primary-rgb, 20, 24, 29), .78) 100%);
}

.hero-content-wrapper {
    position: relative;
    margin-top: clamp(-620px, -56vh, -420px);
    height: clamp(420px, 56vh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--c-on-primary, #ffffff);
}

.hero-content {
    max-width: 760px;
    text-align: left;
}

.hero-content h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.12;
    color: var(--c-on-primary, #ffffff);
    margin: 0 0 16px;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    max-width: 620px;
    margin-bottom: 28px;
}

.hero-subtitle p {
    margin: 0;
}

/* A static band beneath the hero rather than an overlay pinned to its bottom
   edge. Pinned, the bar's height had to be guessed against the hero's own
   height and it collided with the hero button at some viewport sizes. */
.feature-items {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--c-primary, #14181d);
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Icon on its own line, text centred beneath it. */
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 28px 22px;
}

.feature-item + .feature-item {
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.feature-icon {
    display: inline-flex;
    color: var(--c-highlight, #e8a317);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
}

.feature-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.35;
}

.feature-text span:first-child {
    font-weight: 600;
}

.feature-subtitle {
    font-size: .875rem;
    opacity: .85;
}

/* -------------------------------------------------------------------------
 * Services grid
 * ---------------------------------------------------------------------- */

.four-column-services-section .services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 2px;
}

.four-column-services-section .service-item {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
}

.four-column-services-section .service-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--c-primary-rgb, 20, 24, 29), .35) 0%, rgba(var(--c-primary-rgb, 20, 24, 29), .92) 70%);
}

.four-column-services-section .service-content {
    position: relative;
    z-index: 2;
    padding: 24px;
    text-align: left;
}

.four-column-services-section .service-title,
.four-column-services-section h3 {
    font-size: 1.1875rem;
    line-height: 1.25;
    margin: 0 0 8px;
    color: #ffffff;
}

.four-column-services-section .service-description,
.four-column-services-section p {
    font-size: .9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Image and text split
 * ---------------------------------------------------------------------- */

.image-text-split-section .content-icon,
.text-image-split-section .content-icon {
    color: var(--c-accent, #9a6504);
    margin-bottom: 16px;
}

.image-text-split-section .content-icon svg,
.text-image-split-section .content-icon svg {
    width: 44px !important;
    height: 44px !important;
}

/* -------------------------------------------------------------------------
 * Sectors
 *
 * The block stylesheet scopes everything under .sectors-block-section, so
 * these match that specificity rather than using !important.
 * ---------------------------------------------------------------------- */

.sectors-block-section {
    background-size: cover;
    background-position: center;
    position: relative;
}

.sectors-block-section .sectors-overlay {
    background: rgba(var(--c-primary-rgb, 20, 24, 29), .88);
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sectors-block-section .container {
    position: relative;
    z-index: 2;
}

.sectors-block-section .sectors-header,
.sectors-block-section .sectors-subheader,
.sectors-block-section .sectors-content,
.sectors-block-section .sector-title {
    color: #ffffff;
}

.sectors-block-section .sectors-content a {
    color: var(--c-highlight, #e8a317);
}

.sectors-block-section .sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 36px auto;
}

.sectors-block-section .sector-item {
    width: auto;
    max-width: none;
    margin: 0;
}

.sectors-block-section .sector-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 20px;
    text-decoration: none;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    height: 100%;
}

.sectors-block-section .sector-link:hover {
    background: rgba(255, 255, 255, .14);
}

.sectors-block-section .sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(var(--c-highlight-rgb, 232, 163, 23), .16);
    border: 1px solid rgba(var(--c-highlight-rgb, 232, 163, 23), .45);
    border-radius: 50%;
    color: var(--c-highlight, #e8a317);
}

.sectors-block-section .sector-link:hover .sector-icon {
    background: rgba(var(--c-highlight-rgb, 232, 163, 23), .28);
}

.sectors-block-section .sector-icon svg {
    width: 30px;
    height: 30px;
}

.sectors-block-section .sector-title {
    margin: 0;
    font-size: 1.0625rem;
    text-align: center;
}

.sectors-block-section .sectors-cta-button {
    background: var(--c-highlight, #e8a317);
    color: var(--c-on-highlight, #14181d);
}

.sectors-block-section .sectors-cta-button:hover {
    background: var(--c-accent-dark, #7e5200);
    color: #ffffff;
}

/* -------------------------------------------------------------------------
 * Image and text split
 * ---------------------------------------------------------------------- */

.image-text-split-section .split-container,
.text-image-split-section .split-container {
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.image-text-split-section .image-side,
.text-image-split-section .image-side {
    flex: 1 1 50%;
    min-height: 420px;
    background-size: cover;
    background-position: center;
}

.image-text-split-section .text-side,
.text-image-split-section .text-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--c-surface-alt, #f4f5f7);
}

/* The text was capped at 560px inside a 725px column, with 56px of padding on
   top of that, leaving a 448px measure and a column of dead space to its
   right. It now fills its half with symmetric padding. */
.image-text-split-section .text-content,
.text-image-split-section .text-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(40px, 5vw, 72px);
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

/* The block nudged the image 10px to the left of the section edge. */
.image-text-split-section .image-side,
.text-image-split-section .image-side {
    margin-left: 0;
    margin-right: 0;
}

.image-text-split-section .content-icon,
.text-image-split-section .content-icon {
    color: var(--c-accent, #9a6504);
    margin-bottom: 16px;
}

.image-text-split-section .content-icon svg,
.text-image-split-section .content-icon svg {
    width: 44px;
    height: 44px;
}

.image-text-split-section .cta-button,
.text-image-split-section .cta-button {
    background: var(--c-highlight, #e8a317);
    color: var(--c-on-highlight, #14181d);
}

.image-text-split-section .cta-button:hover,
.text-image-split-section .cta-button:hover {
    background: var(--c-accent-dark, #7e5200);
    color: #ffffff;
}

@media (max-width: 992px) {
    .image-text-split-section .split-container,
.text-image-split-section .split-container {
        flex-direction: column;
    }

    .image-text-split-section .image-side,
.text-image-split-section .image-side {
        min-height: 280px;
    }

    .image-text-split-section .text-content,
.text-image-split-section .text-content {
        padding: 36px 20px;
    }
}

/* -------------------------------------------------------------------------
 * Large banner
 * ---------------------------------------------------------------------- */

.large-banner-block {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

.large-banner-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--c-primary-rgb, 20, 24, 29), .72);
}

.large-banner-block > * {
    position: relative;
    z-index: 2;
}

.large-banner-block h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.15;
    color: #ffffff;
}

.large-banner-block p {
    color: rgba(255, 255, 255, .9);
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
    border-radius: 0 !important;
    border: 1px solid var(--c-border-strong, #6f7985) !important;
    padding: 11px 14px !important;
    font: inherit !important;
    background: #ffffff;
    color: var(--c-ink, #14181d);
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
    background: var(--c-highlight, #e8a317) !important;
    color: var(--c-on-highlight, #14181d) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
    background: var(--c-accent-dark, #7e5200) !important;
    color: #ffffff !important;
}

/* The enquiry form sits over a photograph, so it needs its own surface. */
.enquiry-image-section {
    position: relative;
    background-size: cover;
    background-position: center;
}

.enquiry-image-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--c-primary-rgb, 20, 24, 29), .8);
}

.enquiry-image-section .container,
.enquiry-image-section > div {
    position: relative;
    z-index: 2;
}

.enquiry-form-container {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 32px;
    background: var(--c-surface, #ffffff);
    border-radius: 4px;
}

.enquiry-form-container .gfield_label,
.enquiry-form-container label,
.enquiry-form-container .gfield_description {
    color: var(--c-body, #3a424b) !important;
}

.enquiry-header,
.enquiry-sub-header {
    color: #ffffff;
    text-align: center;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.site-footer {
    padding: 56px 0 32px;
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.footer-logo img {
    height: 46px !important;
    width: auto !important;
    display: block;
}

.footer-search .search-form {
    display: flex;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 3px;
    overflow: hidden;
}

.footer-search .search-field {
    border: 0;
    padding: 10px 14px;
    background: transparent;
    color: var(--c-footer-text, #ffffff);
    font: inherit;
}

.footer-search .search-field::placeholder {
    color: rgba(255, 255, 255, .65);
}

.footer-search .search-submit {
    border: 0;
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
}

.footer-search .search-submit img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px;
}

.footer-column h2 {
    font-size: 1.125rem;
    margin: 0 0 16px;
    color: var(--c-footer-text, #ffffff);
}

.footer-column a {
    color: var(--c-footer-text, #ffffff);
}

.quick-links-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-links-menu li {
    margin-bottom: 8px;
}

/* Accreditation marks are dark artwork on white, so they get a light plate. */
.certification-logos {
    gap: 10px;
    align-items: stretch;
}

.certification-logo {
    background: #ffffff;
    border-radius: 3px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.certification-logo img {
    width: auto !important;
    height: 56px !important;
    display: block;
    opacity: 1 !important;
}

.certification-number {
    color: var(--c-body, #3a424b);
    font-size: .6875rem;
}

.certification-text {
    margin-top: 14px;
    font-size: .875rem;
    opacity: .85;
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-legal-links {
    margin-bottom: 6px;
}

.footer-legal-detail {
    margin: 0;
    font-size: .8125rem;
    opacity: .85;
}

.footer-bottom a {
    color: var(--c-footer-text, #ffffff);
}

.footer-social .social-icons a {
    color: var(--c-footer-text, #ffffff);
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .site-header .search-form-container {
        display: none;
    }

    .main-navigation a {
        padding: 10px;
        font-size: .9375rem;
    }
}

@media (max-width: 900px) {
    .contact-top-bar {
        display: none;
    }

    .site-header .main-navigation,
    .header-cta {
        display: none;
    }

    .site-header .header-content {
        justify-content: space-between;
    }

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

    .feature-item:nth-child(odd) {
        border-left: 0;
    }

    .feature-item:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .hero-content-wrapper {
        height: auto;
        min-height: clamp(360px, 48vh, 520px);
        padding: 40px 0;
    }
}

@media (max-width: 600px) {
    .feature-items {
        grid-template-columns: 1fr;
    }

    .feature-item + .feature-item {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .enquiry-form-container {
        padding: 20px;
    }

    .footer-bottom .container {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------
 * Specificity corrections
 *
 * The base sheet carries two duplicated blocks of transparent-header rules and
 * a `.hero-content .btn` colour, both of which outrank the component styles
 * above. These match that specificity rather than reaching for !important.
 * ---------------------------------------------------------------------- */

.site .site-header {
    background: var(--c-primary, #14181d);
    position: relative;
    inset: auto;
    width: auto;
}

.site .header-content {
    flex-wrap: nowrap;
}

.hero-content .btn,
.hero-content .btn-primary {
    background-color: var(--c-highlight, #e8a317);
    color: var(--c-on-highlight, #14181d);
}

.hero-content .btn:hover,
.hero-content .btn-primary:hover {
    background-color: var(--c-accent-dark, #7e5200);
    color: #ffffff;
}

/* Clear the feature bar pinned to the bottom of the hero. */
/* The hero content box carries a legacy top margin from the old overlay
   layout; it is centred by the wrapper now. */
.has-hero-background .hero-content {
    margin-top: 0;
    padding-bottom: 0;
}

/* Cap the services grid at four columns; auto-fit gave five on wide screens. */
.four-column-services-section .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 820px) {
    .four-column-services-section .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1100px) {
    .four-column-services-section .services-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .four-column-services-section .services-grid {
        grid-template-columns: 1fr !important;
    }

    .has-hero-background .hero-content {
        padding-bottom: 0;
    }
}

/* The base sheet leaves the header row top-aligned and gives the branding
   wrapper its own padding, which pushed the bar to 127px tall. */
.site .header-content {
    align-items: center;
}

.site .site-branding,
.site .site-branding a {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 0;
}

.site .main-navigation ul {
    margin: 0;
    padding: 0;
}

/* The base sheet pushed the nav and search down 50px to clear the old
   transparent header. The header is solid now, so that offset has to go. */
.site .main-navigation,
.site .search-form-container {
    margin: 0;
}

.site .header-cta {
    margin: 0;
}

/* Six services sit as 3 x 2 rather than 4 + 3 with a hole in the row. */
@media (min-width: 1100px) {
    .four-column-services-section .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* The banner's background image is portrait, so it tiled and showed a seam. */
.large-banner-block,
.large-banner-block .banner-image,
.large-banner-block [class*="banner-bg"] {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.large-banner-block h2 {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    max-width: 14ch;
}

/* The base sheet whitens every footer image so dark logos read on the dark
   footer. Accreditation marks are already mostly white, so the filter made
   them disappear against their plate. */
.site-footer .certification-logo img,
.certification-logo img {
    filter: none;
    opacity: 1;
}

/* Four fixed footer columns: Contact, Services, Quick Links, then a
   deliberate empty cell, with Accreditations starting the next row. */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 40px;
    justify-content: start;
}

.footer-column--spacer {
    display: block;
}

@media (max-width: 1024px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-column--spacer {
        display: none;
    }
}

.footer-logo img {
    height: 54px !important;
}

/* The hero feature icons are inline SVG now, not the old raster set. */
.feature-icon img {
    width: 28px;
    height: 28px;
    filter: none;
}

/* The base sheet centres footer content below 768px, which reads oddly against
   left-aligned column headings. */
@media (max-width: 768px) {
    .site-footer .footer-column,
    .site-footer .footer-info,
    .site-footer .footer-address,
    .site-footer .footer-contact,
    .site-footer .footer-emails,
    .site-footer .quick-links-menu,
    .site-footer .certifications,
    .site-footer .certification-text {
        text-align: left;
    }

    .site-footer .certification-logos,
    .site-footer .quick-links-menu {
        justify-content: flex-start;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-column--spacer {
        display: none;
    }

    .footer-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------
 * Single records without flexible content
 * ---------------------------------------------------------------------- */

.single-entry__header {
    background: var(--c-surface-alt, #f4f5f7);
    padding: 56px 0 40px;
}

.single-entry__title {
    margin: 0;
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    line-height: 1.15;
    color: var(--c-ink, #14181d);
    max-width: 20ch;
}

.single-entry__summary {
    margin: 16px 0 0;
    font-size: 1.125rem;
    color: var(--c-body, #3a424b);
    max-width: 62ch;
}

.single-entry__meta {
    margin: 12px 0 0;
    color: var(--c-muted, #5b6673);
    font-size: .875rem;
}

.single-entry__media {
    padding: 40px 0 0;
}

.single-entry__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    border-radius: 4px;
}

.single-entry__content {
    padding: 40px 0 56px;
}

.single-entry__content .container > * {
    max-width: 72ch;
}

.single-entry__cta {
    background: var(--c-primary, #14181d);
    color: var(--c-on-primary, #ffffff);
    padding: 48px 0;
}

.single-entry__cta h2 {
    margin: 0 0 16px;
    color: var(--c-on-primary, #ffffff);
}

.single-entry__cta p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.single-entry__cta a:not(.btn) {
    color: var(--c-highlight, #e8a317);
}

.single-entry__cta .btn-primary {
    background: var(--c-highlight, #e8a317);
    color: var(--c-on-highlight, #14181d);
    padding: 14px 28px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
}

/* Below 900px the top bar is hidden, so the row only has to hold together
   down to that width. Drop the email first if it ever runs tight. */
@media (max-width: 1024px) {
    .contact-top-bar .contact-items {
        gap: 16px;
    }
}

/* Centre the label inside the header button, and centre the hero button under
   the hero text rather than leaving it hanging to the left. */
.site .header-cta {
    justify-content: center;
    text-align: center;
}

.has-hero-background .hero-content {
    text-align: center;
}

.has-hero-background .hero-content h1,
.has-hero-background .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.has-hero-background .hero-content .btn,
.has-hero-background .hero-content .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* -------------------------------------------------------------------------
 * Make an enquiry: content left, form right
 * ---------------------------------------------------------------------- */

.enquiry-image-section .enquiry-intro {
    max-width: 62ch;
    margin: 0 0 32px;
    text-align: left;
}

.enquiry-image-section .enquiry-header {
    text-align: left;
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.15;
    color: #ffffff;
}

.enquiry-image-section .enquiry-sub-header {
    text-align: left;
    margin: 0;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .88);
}

.enquiry-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.enquiry-columns--single {
    grid-template-columns: 1fr;
}

.enquiry-content-column {
    color: rgba(255, 255, 255, .9);
}

.enquiry-content {
    font-size: 1rem;
    line-height: 1.65;
}

.enquiry-content > *:first-child {
    margin-top: 0;
}

.enquiry-content > *:last-child {
    margin-bottom: 0;
}

.enquiry-content h2,
.enquiry-content h3,
.enquiry-content h4 {
    color: #ffffff;
    margin: 28px 0 10px;
    font-size: 1.1875rem;
}

.enquiry-content p {
    margin: 0 0 16px;
}

.enquiry-content a {
    color: var(--c-highlight, #e8a317);
}

.enquiry-content ul,
.enquiry-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.enquiry-content li {
    margin-bottom: 8px;
}

.enquiry-image-section .enquiry-form-container {
    max-width: none;
    margin: 0;
}

@media (max-width: 900px) {
    .enquiry-columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* The enquiry block capped its container at 1200px while every other block
   used the theme's 1500px. The banner had the same problem, fixed at source in
   its own stylesheet because that sheet is enqueued from inside the template
   and therefore prints after this one. */
.enquiry-image-section .container {
    max-width: 1500px;
}

/* -------------------------------------------------------------------------
 * Horizontal rhythm
 *
 * The sectors and FAQ blocks capped their container at 1400px with 20px of
 * padding, so their text started 20px further in than every other block. All
 * containers now use the theme's 1500px, putting every left edge on 20px.
 * ---------------------------------------------------------------------- */

.sectors-block-section .container,
.faq-block .container,
.simple-header-section .container,
.leftright-telephone-section .container,
.leftright-telephone-container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.sectors-block-section .container,
.faq-block .container {
    padding-left: 20px;
    padding-right: 20px;
}

/* Even 50/50 split so the left column's text lines up with the blocks above
   and below it. */
.leftright-telephone-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.leftright-telephone-container .left-column,
.leftright-telephone-container .right-column {
    max-width: none;
    width: auto;
    flex: none;
}

@media (max-width: 900px) {
    .leftright-telephone-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Footer bottom bar: legal links on one line, company registration and
   copyright stacked underneath them, both left aligned. */
.footer-bottom .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-bottom .footer-legal-links {
    margin: 0;
}

.footer-bottom .footer-legal-detail {
    margin: 0;
    text-align: left;
}

/* Scroll to top is a real button now, not a div with a Font Awesome glyph. */
.scroll-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-color: var(--c-highlight, #e8a317);
    color: var(--c-on-highlight, #14181d);
    line-height: 0;
}

.scroll-to-top svg {
    width: 22px;
    height: 22px;
}

.scroll-to-top:hover {
    background-color: var(--c-accent-dark, #7e5200);
    color: #ffffff;
}

@media (max-width: 768px) {
    .scroll-to-top svg {
        width: 18px;
        height: 18px;
    }
}

/* -------------------------------------------------------------------------
 * Services grid hover
 *
 * The block scaled each card by 1% on hover. On a full-bleed grid that pushed
 * the right-hand column past the viewport edge and produced a horizontal
 * scrollbar, as well as reading as a wobble rather than a hover state.
 *
 * The replacement changes nothing about the card's size: the image lifts
 * slightly behind a fixed frame, the overlay deepens, and an inset rule picks
 * out the card in the highlight colour.
 * ---------------------------------------------------------------------- */

.four-column-services-section {
    overflow: hidden;
}

.four-column-services-section .service-item {
    position: relative;
    overflow: hidden;
    transform: none;
    transition: none;
}

.four-column-services-section .service-item:hover,
.four-column-services-section .service-item:focus-within {
    transform: none;
}

/* The frame is drawn inside the card, so the box never changes size. */
.four-column-services-section .service-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 0 0 0 0 var(--c-highlight, #e8a317);
    transition: box-shadow .25s ease;
}

.four-column-services-section .service-item:hover::before,
.four-column-services-section .service-item:focus-within::before {
    box-shadow: inset 0 0 0 3px var(--c-highlight, #e8a317);
}

/* Deepen the gradient so the copy stays legible as the image brightens. */
.four-column-services-section .service-item::after {
    transition: background .25s ease;
}

.four-column-services-section .service-item:hover::after,
.four-column-services-section .service-item:focus-within::after {
    background: linear-gradient(180deg, rgba(var(--c-primary-rgb, 20, 24, 29), .45) 0%, rgba(var(--c-primary-rgb, 20, 24, 29), .96) 70%);
}

/* A slow zoom on the image itself, clipped by the card's overflow. */
.four-column-services-section .service-item .service-image,
.four-column-services-section .service-item > img,
.four-column-services-section .service-background {
    transition: transform .4s ease;
}

.four-column-services-section .service-item:hover .service-image,
.four-column-services-section .service-item:hover > img,
.four-column-services-section .service-item:hover .service-background {
    transform: scale(1.04);
}

.four-column-services-section .service-title {
    transition: color .2s ease;
}

.four-column-services-section .service-item:hover .service-title {
    color: var(--c-highlight, #e8a317);
}

@media (prefers-reduced-motion: reduce) {
    .four-column-services-section .service-item:hover .service-image,
    .four-column-services-section .service-item:hover > img,
    .four-column-services-section .service-item:hover .service-background {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
 * Square corners
 *
 * The logo mark and wordmark are hard-edged, so pill buttons and rounded
 * panels read as borrowed from a different identity. Everything is squared
 * off except the handful of elements that are genuinely circular.
 * ---------------------------------------------------------------------- */

.site a,
.site button,
.site input,
.site select,
.site textarea,
.site form,
.site ul,
.site li,
.site div,
.site span,
.site img,
.site section,
.site-footer a,
.site-footer button,
.site-footer input,
.site-footer form,
.site-footer li,
.site-footer div,
.footer-bottom a,
.footer-bottom div,
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper button,
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.enquiry-form-container input,
.enquiry-form-container select,
.enquiry-form-container textarea,
.search-field,
.search-form,
.search-submit {
    border-radius: 0;
}

/* Genuinely circular elements keep their shape. */
.social-icon,
.sector-icon,
.phone-circle,
.scroll-to-top,
.gform_wrapper .gfield_radio input,
.gform_wrapper input[type="radio"] {
    border-radius: 50%;
}

.gform_wrapper input[type="checkbox"] {
    border-radius: 0;
}

/* The hamburger bars look wrong perfectly square at that size. */
.mobile-menu-toggle .toggle-bar {
    border-radius: 1px;
}

/* -------------------------------------------------------------------------
 * Hero vertical rhythm
 *
 * The hero button carried a 97px bottom margin from the layout where the
 * feature bar overlapped the hero. With the bar now below the hero, that
 * margin left 111px of dead space under the button against 14px above the
 * heading.
 * ---------------------------------------------------------------------- */

.hero-content .btn,
.hero-content .btn-primary {
    margin: 0;
}

.hero-content h1 {
    margin-top: 0;
}


/* The base sheet pills the search inputs; square them to match everything else. */
.site .site-header .search-field,
.site .site-header .search-form,
.site .footer-search .search-field,
.site .footer-search .search-form,
.site-footer .search-form,
.site-footer .search-field,
form.search-form input.search-field,
form.search-form {
    border-radius: 0;
}

/* Gravity Forms sets its own radii from a stylesheet enqueued after this one. */
.gform_wrapper .gform_fields input,
.gform_wrapper .gform_fields select,
.gform_wrapper .gform_fields textarea,
.gform_wrapper .gform_footer input,
.gform_wrapper .gform_footer button,
.gform_wrapper .gfield input,
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea,
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
    border-radius: 0 !important;
}

/* Block stylesheets pill their own buttons; square them to match. */
.sectors-block-section .sectors-cta-button,
.sectors-block-section .sector-link,
.image-text-split-section .cta-button,
.large-banner-block .cta-button,
.enquiry-image-section .cta-button,
.four-column-services-section .read-more-btn,
.hero-content .btn,
.hero-content .btn-primary,
.site .btn,
.site .btn-primary,
.site .cta-button,
.site .header-cta {
    border-radius: 0;
}

/* Longer body copy in the split block: give the list and sub-heading room. */
.image-text-split-section .content-text h3,
.text-image-split-section .content-text h3 {
    margin: 28px 0 12px;
    font-size: 1.1875rem;
    color: var(--c-ink, #14181d);
}

.image-text-split-section .content-text ul,
.text-image-split-section .content-text ul {
    margin: 0 0 20px;
    padding-left: 20px;
}

.image-text-split-section .content-text li,
.text-image-split-section .content-text li {
    margin-bottom: 8px;
}

.image-text-split-section .content-text p:last-of-type,
.text-image-split-section .content-text p:last-of-type {
    margin-bottom: 20px;
}

/* The two-column CTA block renders its button in the primary colour, which
   reads as a dark button on a dark photograph. Use the highlight, as every
   other primary call to action does. */
.cta-two-columns-section .cta-button,
.cta-two-columns-section .cta-button-container a {
    background-color: var(--c-highlight, #e8a317);
    color: var(--c-on-highlight, #14181d);
    border-color: var(--c-highlight, #e8a317);
    font-weight: 600;
}

.cta-two-columns-section .cta-button:hover,
.cta-two-columns-section .cta-button-container a:hover {
    background-color: var(--c-accent-dark, #7e5200);
    border-color: var(--c-accent-dark, #7e5200);
    color: #ffffff;
}

/* Services grids are not always a multiple of three. Let a trailing orphan
   fill its row rather than leaving a hole beside it. */
@media (min-width: 1100px) {
    .four-column-services-section .service-item:last-child:nth-child(3n + 1) {
        grid-column: span 3;
    }

    .four-column-services-section .service-item:last-child:nth-child(3n + 2) {
        grid-column: span 2;
    }
}

@media (min-width: 820px) and (max-width: 1099px) {
    .four-column-services-section .service-item:last-child:nth-child(3n + 1) {
        grid-column: span 3;
    }

    .four-column-services-section .service-item:last-child:nth-child(3n + 2) {
        grid-column: span 2;
    }
}

@media (min-width: 561px) and (max-width: 819px) {
    .four-column-services-section .service-item:last-child:nth-child(2n + 1) {
        grid-column: span 2;
    }
}

/* -------------------------------------------------------------------------
 * Submenu indicator
 *
 * Rendered as inline SVG by the nav walker rather than a "▼" text character
 * injected from JavaScript, so it is in the markup and uses the theme's own
 * icon set instead of a webfont.
 * ---------------------------------------------------------------------- */

.main-navigation .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-navigation .dropdown-arrow {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.main-navigation .dropdown-arrow svg {
    width: 13px;
    height: 13px;
    display: block;
}

.main-navigation .menu-item-has-children:hover > a .dropdown-arrow,
.main-navigation .menu-item-has-children.submenu-focus > a .dropdown-arrow,
.main-navigation .menu-item-has-children.submenu-open > a .dropdown-arrow {
    transform: rotate(180deg);
}

/* Second level points right, since those submenus open sideways. */
.main-navigation .sub-menu .menu-item-has-children > a .dropdown-arrow {
    margin-left: auto;
    transform: rotate(-90deg);
}

.main-navigation .sub-menu .menu-item-has-children:hover > a .dropdown-arrow,
.main-navigation .sub-menu .menu-item-has-children.submenu-focus > a .dropdown-arrow {
    transform: rotate(-90deg);
}

/* Keyboard focus and tap both open the submenu, not just hover. */
.main-navigation .menu-item-has-children.submenu-focus > .sub-menu,
.main-navigation .menu-item-has-children.submenu-open > .sub-menu {
    display: block;
}

/* Mobile menu: the chevron sits at the end of the row. */
.mobile-menu-items .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-menu-items .dropdown-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.mobile-menu-items .dropdown-arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}

.mobile-menu-items .menu-item-has-children.submenu-open > a .dropdown-arrow {
    transform: rotate(180deg);
}

/* The base sheet drew the second-level indicator with a Font Awesome glyph
   and then hid the real arrow. Font Awesome is no longer loaded, so that left
   a tofu box. Drop the pseudo-element and show the SVG instead. */
.main-navigation ul ul li.menu-item-has-children > a::after,
.menu-item-has-children:not(.stock-menu-item) .sub-menu li.menu-item-has-children > a::after {
    content: none;
    display: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul ul li.menu-item-has-children > a .dropdown-arrow,
.menu-item-has-children .sub-menu li.menu-item-has-children > a .dropdown-arrow {
    display: inline-flex;
}

/* Match the base sheet's selector exactly, including the :not(), so the
   second-level arrow is not hidden on specificity. */
.main-navigation ul ul li.menu-item-has-children > a .dropdown-arrow,
.menu-item-has-children:not(.stock-menu-item) .sub-menu li.menu-item-has-children > a .dropdown-arrow {
    display: inline-flex;
}

/* Second-level rows: the label sits left, the chevron pinned to the right edge
   of the row, so the arrows line up in a column rather than trailing each
   label at a different x. */
.main-navigation .sub-menu li.menu-item-has-children > a,
.menu-item-has-children:not(.stock-menu-item) .sub-menu li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.main-navigation .sub-menu li.menu-item-has-children > a .dropdown-arrow,
.menu-item-has-children:not(.stock-menu-item) .sub-menu li.menu-item-has-children > a .dropdown-arrow {
    margin-left: auto;
    flex: 0 0 auto;
}

/* Same treatment in the mobile menu. */
.mobile-menu-items .menu-item-has-children > a {
    width: 100%;
}

/* -------------------------------------------------------------------------
 * Body copy links
 *
 * The CTA orange is 2.17:1 against white, so it cannot carry link text on a
 * light background. Light sections use the accent gold, which is the same
 * family at 4.96:1; dark sections use the CTA orange itself at 8.22:1. Both
 * are underlined so colour is not the only cue (WCAG 1.4.1).
 * ---------------------------------------------------------------------- */

.site-content .content-text a,
.site-content .sub-header a,
.site-content .enquiry-content a,
.site-content .faq-answer a,
.single-entry__content a,
.page-content .entry-content a {
    color: var(--c-accent, #9a6504);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-weight: 600;
}

.site-content .content-text a:hover,
.site-content .sub-header a:hover,
.site-content .enquiry-content a:hover,
.site-content .faq-answer a:hover,
.single-entry__content a:hover,
.page-content .entry-content a:hover {
    color: var(--c-accent-dark, #7e5200);
    text-decoration-thickness: 2px;
}

/* On dark sections the CTA orange reaches 8.22:1, so use it there. */
.enquiry-image-section .enquiry-content a,
.sectors-block-section .sectors-content a,
.large-banner-block a:not(.cta-button),
.cta-two-columns-section .cta-content a,
.single-entry__cta a:not(.btn) {
    color: var(--c-highlight, #e8a317);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.enquiry-image-section .enquiry-content a:hover,
.sectors-block-section .sectors-content a:hover,
.large-banner-block a:not(.cta-button):hover,
.cta-two-columns-section .cta-content a:hover {
    color: #ffffff;
}

/* Buttons keep their fill and must not pick up the underline. */
.site-content a.btn,
.site-content a.btn-primary,
.site-content a.cta-button,
.site-content a.sectors-cta-button {
    text-decoration: none;
}