* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    background: var(--bg);
    color: var(--text);
}

.site-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.brand {
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--text);
}

.brand img {
    max-height: 36px;
}

.brand-center img {
    max-height: 64px;
}

.site-header nav,
.site-footer nav {
    display: flex;
    gap: 1.25rem;
}

.site-header nav a,
.site-footer nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
}

.header-button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: var(--primary);
    color: #fff !important;
}

.nav-item {
    position: relative;
}

.nav-item.mega {
    /* Positions the mega panel relative to the whole header instead of this nav
       item, so it stays centered and on-screen regardless of where the trigger
       link sits in the nav. */
    position: static;
}

.caret {
    font-size: 0.6rem;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.dropdown.mega-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    min-width: 320px;
    max-width: min(640px, calc(100vw - 2rem));
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.25rem;
}

.nav-item:hover .dropdown {
    display: flex;
    flex-direction: column;
}

.nav-item:hover .dropdown.mega-panel {
    display: grid;
}

.dropdown a {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}

.dropdown a:hover {
    background: var(--bg);
}

.hero {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
}

.hero h1 {
    font-size: 2.25rem;
    margin: 0 0 1rem;
}

.highlights {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.highlight-card {
    background: var(--surface);
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.highlight-card h3 {
    margin: 0 0 0.5rem;
    color: var(--primary);
}

.site-footer {
    text-align: center;
    padding: 2rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.site-footer nav {
    justify-content: center;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------------ */
/* Shared page-width wrapper                                          */
/* ------------------------------------------------------------------ */

.wrapper {
    width: 95%;
    max-width: none;
    margin: 0 auto;
}

/* Footer keeps the narrower 90% column even though the rest of the page
   moved to 95% — kept as its own rule (not the shared .wrapper width) so
   the two can diverge on purpose. */
.footer-main,
.footer-bottom-inner {
    width: 90%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-status {
    font-size: 0.9rem;
}

.form-status.success {
    color: #166534;
}

.form-status.error {
    color: #b91c1c;
}

/* ------------------------------------------------------------------ */
/* Header — "centered" style: hamburger toggle + centered logo +      */
/* a pinned nav item (e.g. phone number) on the right, rest tucked    */
/* into a dropdown drawer.                                            */
/* ------------------------------------------------------------------ */

.site-header.centered .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.5rem 0;
}

.site-header:not(.centered) .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.menu-toggle {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    padding: 0.4rem 0;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hamburger-icon span {
    width: 20px;
    height: 2px;
    background: currentColor;
    display: block;
}

.brand-center {
    justify-self: center;
}

.pinned-item {
    justify-self: end;
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
    white-space: nowrap;
}

.site-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 5% 1rem;
    z-index: 20;
}

.site-drawer[hidden] {
    display: none;
}

.site-drawer a {
    padding: 0.7rem 0;
    text-decoration: none;
    color: var(--text);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-drawer a:last-child {
    border-bottom: none;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.75rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid var(--primary);
    border-radius: var(--nova-radius, 0);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary);
}

/* ------------------------------------------------------------------ */
/* Generic slider (hero banner + testimonials)                        */
/* ------------------------------------------------------------------ */

.slider {
    position: relative;
}

.slider-item {
    display: none;
}

.slider-item.active {
    display: block;
}

.slider-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.slider-dot.active {
    background: var(--text);
    border-color: var(--text);
}

.hero-slider .slider-item.active {
    display: flex;
}

.hero-slide {
    /* No unconditional `display` here — `.slider-item` hides every slide by
       default and `.hero-slider .slider-item.active` (below) switches the
       current one to flex. Setting display:flex here unconditionally would
       win the cascade (equal specificity, later in source) and show every
       slide stacked regardless of .active. */
    min-height: 640px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
    padding: 4rem 1.5rem;
    background-size: cover;
    background-position: center;
    background-color: var(--text, #4a4a4a);
    color: #fff;
}

.hero-slide h1 {
    margin: 0;
    max-width: 900px;
    font-size: 2.25rem;
    font-weight: 300;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.hero-slide p {
    margin: 0;
    max-width: 640px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.hero-slider .slider-dots {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
}

.hero-slider .slider-dot {
    border-color: rgba(255, 255, 255, 0.8);
}

.hero-slider .slider-dot.active {
    background: #fff;
    border-color: #fff;
}

/* ------------------------------------------------------------------ */
/* Split section (alternating text / image)                           */
/* ------------------------------------------------------------------ */

.split-section {
    /* Full-bleed outer element — just the divider line and vertical
       breathing room between stacked sections. The actual two-column
       layout lives in .split-grid (below), inset to the same 95% band as
       the rest of the page, with both columns ending flush at that 95%
       boundary — no more edge-to-edge photo bleed. */
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 3rem 0;
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 3rem;
    width: 95%;
    margin: 0 auto;
}

.split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.split-text h2 {
    margin: 0;
    font-weight: 400;
}

.split-text .step-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary);
}

.split-text p {
    margin: 0;
    line-height: 1.6;
}

.split-text .btn {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.split-image {
    /* A generous, uniform height (not 360px) so every split-section reads
       at the same visual weight regardless of how much copy sits opposite
       it — otherwise each row's height ends up driven by whichever side
       (text or photo) happens to need more room in that particular
       section, so sections look inconsistent next to each other. */
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

@media (max-width: 800px) {
    .split-grid {
        grid-template-columns: 1fr;
    }

    .split-grid .split-image {
        order: -1;
    }
}

/* ------------------------------------------------------------------ */
/* Accreditations / logo strip section                                */
/* ------------------------------------------------------------------ */

.accred-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    background: #eee;
    padding: 3rem 2.5%;
}

.accred-logos {
    display: flex;
    align-items: center;
    justify-content: center;
}

.accred-logos img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Inspiration index toolbar (search + category filter, decorative —  */
/* no live filtering wired up)                                        */
/* ------------------------------------------------------------------ */

.inspiration-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0;
}

.inspiration-search {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.inspiration-search input {
    border: none;
    padding: 0.6rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    min-width: 220px;
}

.inspiration-search button {
    border: none;
    background: none;
    padding: 0 0.75rem;
    cursor: pointer;
}

.inspiration-category-select {
    background: #333;
    color: #fff;
    border: none;
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.masonry-no-results {
    padding: 2rem 2.5%;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ */
/* Inspiration photo masonry (Home page gallery_images repeater, and  */
/* the Inspiration index page)                                        */
/* ------------------------------------------------------------------ */

.masonry-section {
    padding: 0 2.5% 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 3rem;
}

/* Independent flex columns (not CSS grid) — each column packs its own
   images tightly regardless of neighboring columns' heights, since grid
   rows would otherwise force uniform row height across every column and
   leave large gaps under shorter images. */
.masonry-grid {
    display: flex;
    gap: 1rem;
}

.masonry-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.masonry-item {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    text-decoration: none;
}

.masonry-item .masonry-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1rem 1rem;
    color: #fff;
    font-size: 0.95rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.masonry-item:hover .masonry-caption {
    opacity: 1;
}

@media (max-width: 1000px) {
    .masonry-grid {
        flex-wrap: wrap;
    }

    .masonry-column {
        flex-basis: calc(50% - 0.5rem);
    }
}

@media (max-width: 700px) {
    .masonry-column {
        flex-basis: 100%;
    }
}

.accred-text h2 {
    margin: 0 0 1rem;
    font-weight: 400;
}

.accred-text p {
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

@media (max-width: 800px) {
    .accred-section {
        grid-template-columns: 1fr;
    }
}

/* Qualification / accreditation card grid (Accreditations page) */

.card-grid-section {
    padding: 3rem 2.5%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.card-grid-section h2 {
    font-weight: 400;
    margin: 0 0 2rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

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

@media (max-width: 500px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

.card-grid-item img {
    /* These logo files have a solid light-gray background baked into the
       image itself (not a CSS box) — shown as a consistent, moderately
       sized square tile rather than shrunk down or blended away. */
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-bottom: 1rem;
}

.card-grid-item h3 {
    margin: 0 0 0.5rem;
    font-weight: 500;
}

.card-grid-item p {
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

/* ------------------------------------------------------------------ */
/* Testimonials                                                       */
/* ------------------------------------------------------------------ */

.testimonials-section {
    padding: 4rem 2.5%;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.testimonials-section h2 {
    font-weight: 400;
    margin: 0 0 2rem;
}

.testimonial-slide blockquote {
    margin: 0 auto 1rem;
    max-width: 720px;
    font-style: italic;
    line-height: 1.7;
}

.testimonial-slide cite {
    font-style: normal;
    color: rgba(0, 0, 0, 0.6);
}

.testimonials-section .slider-dots {
    margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Simple content section (intro text blocks, two-column intro, etc.) */
/* ------------------------------------------------------------------ */

.content-section {
    padding: 3rem 2.5%;
}

.content-section h1 {
    font-weight: 400;
    margin: 0 0 1rem;
}

.content-section h2 {
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 900px;
}

.content-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 0 2.5% 3rem;
}

.content-columns p {
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Trade / discipline card grid (Our Company page)                    */
/* ------------------------------------------------------------------ */

.trade-grid-section {
    padding: 3rem 2.5%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.trade-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.5rem;
}

.trade-card-image {
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    margin-bottom: 1rem;
}

.trade-card h3 {
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.trade-card p {
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 800px) {
    .trade-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Case study card grid (Case Studies page)                           */
/* ------------------------------------------------------------------ */

.case-study-grid-section {
    padding: 3rem 2.5%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
}

.case-study-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.case-study-card-image {
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    margin-bottom: 1rem;
}

.case-study-card h3 {
    margin: 0 0 0.5rem;
    font-weight: 500;
}

.case-study-card p {
    margin: 0 0 1rem;
    line-height: 1.6;
}

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

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

/* ------------------------------------------------------------------ */
/* Legal / plain text pages (Cookies, etc.)                            */
/* ------------------------------------------------------------------ */

.legal-content {
    max-width: 900px;
}

.legal-content p {
    line-height: 1.7;
    margin: 0 0 1rem;
}

.legal-content h2 {
    font-weight: 500;
    font-size: 1.3rem;
    max-width: none;
    margin: 2rem 0 0.75rem;
}

.legal-content ul {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.legal-content li {
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.contact-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 3rem 2.5%;
}

.contact-details p {
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.contact-details a {
    color: var(--text);
}

.contact-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.contact-form-col form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form-col label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.contact-form-col input,
.contact-form-col textarea {
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
}

@media (max-width: 800px) {
    .contact-columns {
        grid-template-columns: 1fr;
    }
}

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

.site-footer {
    text-align: left;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.footer-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: start;
    padding: 3rem 0;
}

.footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.footer-logos img {
    max-height: 42px;
    max-width: 110px;
    object-fit: contain;
}

.footer-address p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9rem;
}

.footer-contact {
    text-align: right;
    font-size: 0.9rem;
}

.footer-contact p {
    margin: 0 0 0.5rem;
}

.footer-contact a {
    color: var(--text);
    text-decoration: none;
}

.footer-bottom {
    background: #222;
    color: #fff;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    font-size: 0.8rem;
}

.footer-bottom a {
    color: #fff;
}

@media (max-width: 800px) {
    .footer-main {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .footer-contact {
        text-align: left;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Inspiration article (blog post custom template)                   */
/* ------------------------------------------------------------------ */

.inspiration-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 3rem;
}

.inspiration-intro-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.inspiration-intro-text p {
    margin: 0;
    line-height: 1.7;
}

.inspiration-intro-text h3 {
    margin: 0.5rem 0 0;
    font-weight: 500;
}

.inspiration-intro-image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

@media (max-width: 800px) {
    .inspiration-intro {
        grid-template-columns: 1fr;
    }

    .inspiration-intro-image {
        order: -1;
    }
}

.inspiration-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.8;
}

.inspiration-quote {
    margin: 0;
    max-width: 720px;
    font-style: italic;
    line-height: 1.7;
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    padding-left: 1.25rem;
}

.inspiration-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    color: rgba(0, 0, 0, 0.6);
}

.inspiration-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.inspiration-gallery-item {
    margin: 0;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

.inspiration-gallery-item.full-width {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 6;
}

@media (max-width: 700px) {
    .inspiration-gallery {
        grid-template-columns: 1fr;
    }

    .inspiration-gallery-item.full-width {
        aspect-ratio: 4 / 3;
    }
}

.recent-inspiration {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 3rem;
}

.recent-inspiration h2 {
    font-weight: 400;
    margin: 0 0 1.5rem;
}

.recent-inspiration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.recent-inspiration-item {
    display: block;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

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