/*
Theme Name: Chimney Professionals
Theme URI:
Author: Geeks360
Author URI: https://geeks360.net
Description: Custom ACF-based WordPress theme for Chimney Professionals. Pages are built with an ACF Flexible Content field (page_sections); global header and footer are managed from the Theme Settings options page.
Version: 1.0.23
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: chimney-professionals
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
    /* Colors - replace with the brand palette */
    --color-primary: #c0392b;   /* brand red - CTA button, active/hover nav */
    --color-primary-dark: #a52f24;
    --color-secondary: #1d4e89; /* accent blue - header detail bar */
    --color-text: #1a1a1a;
    --color-muted: #6b7280;
    --color-bg: #ffffff;
    --color-bg-light: #f4f5f7;  /* light grey section background */
    --color-border: #e5e7eb;
    --color-overlay: rgba(16, 33, 58, .55); /* hero image darkening */
    --color-overlay-dark: rgba(15, 23, 35, .88); /* dark sections (who-we-serve) */

    /* Typography */
    --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-body: 16px;
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-lead: 18px;
    --lh-body: 1.5;

    /* Spacing scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-2xl: 64px;

    /* Layout */
    --container-max: 1200px;
    --container-pad: 20px;
    --radius: 8px;

    /* Header */
    --header-pad-y: 18px;
    --header-gap: 28px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
}

img,
svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin: 0 0 var(--spacing-sm);
}

p { margin: 0 0 var(--spacing-md); }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.site-main { min-height: 50vh; }

.section,
.page-content { padding-block: var(--spacing-2xl); }

/* The page must never pan sideways on phones: any block that pokes past the
   viewport gets clipped instead of creating horizontal scroll. `clip` keeps
   position: sticky working, `hidden` is the fallback for older engines. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

/* ==========================================================================
   BLOCK-HERO
   ========================================================================== */
.block-hero {
    position: relative;
    padding-block: 96px;
    background-color: #1b2a44;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

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

.block-hero > .container {
    position: relative;
    z-index: 2;
}

/* Breadcrumbs, pinned to the top-left of the section: taken out of the flow so
   the section's own padding-block cannot push them down, 20px from the top
   edge. The inner .container lines them up with the section content, and the
   z-index clears the overlay (::before, z-index 1). */
.block-hero__breadcrumbs {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 3;
    text-align: left;
}

.block-hero__breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;
    color: #BABABA;
}

/* Separator between crumbs, never before the first one. */
.block-hero__breadcrumb + .block-hero__breadcrumb::before {
    content: "/";
    margin-right: var(--spacing-sm);
    color: #BABABA;
}

.block-hero__breadcrumb-link {
    color: #BABABA;
    text-decoration: none;
    transition: color .2s ease;
}

.block-hero__breadcrumb-link:hover,
.block-hero__breadcrumb-link:focus-visible {
    color: #fff;
}

.block-hero__breadcrumb-current {
    color: #BABABA;
}

.block-hero__content {
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-hero__title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.block-hero__description {
    max-width: 720px;
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

/* Rating + CTA card */
/* Buttons on top, ratings underneath. The card is a column at every width, so
   the two rating widgets read as proof under the action rather than as a label
   beside it. */
.block-hero__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-md);
    padding: 18px 22px;
    background: var(--color-bg);
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}

/* Sits under the buttons, both widgets on one line, separated from the action
   row by a hairline instead of the old vertical divider. */
.block-hero__metrics {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* One rating widget: source logo over a row of stars, rating value beside it. */
.block-hero__metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline: 22px;
    color: var(--color-text);
}

.block-hero__metric:first-child { padding-left: 6px; }

.block-hero__metric--link {
    text-decoration: none;
    color: inherit;
}

.block-hero__metric + .block-hero__metric {
    border-left: 1px solid var(--color-border);
}

.block-hero__metric-source {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Logos differ in aspect ratio, so height is what is pinned. */
.block-hero__metric-logo {
    width: auto;
    height: 22px;
    object-fit: contain;
}

.block-hero__metric-stars {
    display: flex;
    align-items: center;
    gap: 3px;
}

.block-hero__metric-star {
    flex: 0 0 auto;
    width: 13px;
    height: 12px;
    object-fit: contain;
}

.block-hero__metric-value {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text);
}

.block-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* The card is the primary action on the page, so its buttons run larger than a
   default .btn. */
.block-hero__actions .btn {
    padding: 15px 30px;
    font-size: 16px;
}

/* Nothing sits under the buttons (show_metrics off, or none filled in), so the
   card closes right after them. */
.block-hero__actions--flush {
    padding-left: 0;
    border-left: 0;
}

.block-hero__actions a img{
    margin-right: 8px;
}

/* Right arrow on the primary CTA (scoped to the hero). */
/* .block-hero__actions .btn--primary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
} */

.block-hero__phone {
    margin-top: var(--spacing-lg);
}

.block-hero__phone a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
}

.block-hero__phone-icon {
    display: inline-flex;
    color: var(--color-primary);
}

/* ==========================================================================
   BLOCK-SAME-TEAM
   ========================================================================== */
.block-same-team {
    background: #F1F1F1;
}

/* The CTA is the last thing in the section and brings no spacing below it -
   restore the section rhythm so the button is not flush with the edge. */
.block-same-team--has-cta {
    padding-bottom: var(--spacing-2xl);
}

/* Top feature strip */
.block-same-team__features {
    background: #EAEAEA;
}

.block-same-team__features-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin: 0;
    padding: 14px 0;
    list-style: none;
}

.block-same-team__feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.block-same-team__feature-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    object-fit: contain;
}

.block-same-team__feature-text {
    font-size: 15px;
    color: var(--color-text);
}

.block-same-team__feature-text span{
    font-weight: bold;
}

/* Two-column body */
.block-same-team__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-2xl);
    padding-block: var(--spacing-2xl);
}

/* No right image - the content takes the full width of the container. */
.block-same-team__grid--full {
    grid-template-columns: 1fr;
}

.block-same-team__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-same-team__title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

.block-same-team__text {
    margin: 0 0 var(--spacing-lg);
    line-height: 1.7;
}

.block-same-team__text p:last-child {
    margin-bottom: 0;
}

/* Badge gallery */
.block-same-team__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    list-style: none;
}

.block-same-team__badge-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* Opt-in CTA button, bottom left of the section (bottom_cta_button switch). */
.block-same-team__cta {
    margin-top: 20px;
}

.block-same-team__cta-btn {
    gap: 10px;
    min-height: 56px;
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 700;
}

.block-same-team__cta-arrow {
    display: block;
    flex: 0 0 auto;
}

/* Right image */
.block-same-team__media {
    position: relative;
    height: 100%;
}

.block-same-team__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Metrics overlaid on the image (bottom corners). Wrap the number in <strong>
   inside the field to get the large top line. */
.block-same-team__img-metric {
    position: absolute;
    bottom: var(--spacing-lg);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.35;
}

.block-same-team__img-metric span{
    font-weight: bold;
    font-size: 34px;
}

.block-same-team__img-metric--left {
    left: var(--spacing-lg);
}

.block-same-team__img-metric--right {
    right: var(--spacing-lg);
}

.block-same-team__img-metric strong {
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
}

/* Alternative markup inside the field: span for the number + br for the break. */
.block-same-team__img-metric span {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
}

/* Bottom metrics row - red values with a label under each */
.block-same-team__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
    margin: 0;
    padding-bottom: var(--spacing-2xl);
    list-style: none;
    padding-left: 0;
}

.block-same-team__metric {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.block-same-team__metric-value {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.1;
}

.block-same-team__metric-text {
    color: var(--color-text);
    font-size: 15px;
}

/* ==========================================================================
   BLOCK-WHO-WE-SERVE
   ========================================================================== */
.block-who-we-serve {
    position: relative;
    padding-block: var(--spacing-2xl);
    background-color: #141d28;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/* The section is a dark panel with the photo showing through, as in the design.
   The overlay is what makes the white heading and the description readable, so it
   stays on regardless of how bright the background image is. */
.block-who-we-serve::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-overlay-dark);
    z-index: 1;
}

.block-who-we-serve > .container {
    position: relative;
    z-index: 2;
}

.block-who-we-serve__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-who-we-serve__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.block-who-we-serve__description {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    color: rgba(255, 255, 255, .85);
}

/* Card grid */
.block-who-we-serve__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.block-who-we-serve__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    background: #203947;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 4px;
    font-size: 15px;
    color: #fff;
}

/* Light variant: a section left without a background image renders as a white
   panel with dark type, so two photo sections never sit back to back. */
.block-who-we-serve--light {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.block-who-we-serve--light::before {
    display: none;
}

.block-who-we-serve--light .block-who-we-serve__title {
    color: var(--color-text);
}

.block-who-we-serve--light .block-who-we-serve__description {
    color: var(--color-muted);
}

.block-who-we-serve--light .block-who-we-serve__card {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text);
}

.block-who-we-serve--light .block-who-we-serve__bottom {
    border: 1px solid var(--color-border);
}

/* Red dot marker */
.block-who-we-serve__card::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Opt-in white bar under the cards (bottom_content switch): CTA button on the
   left, text split off by a hairline on the right. */
.block-who-we-serve__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    width: fit-content;
    margin: var(--spacing-xl) auto 0;
    padding: 18px;
    background: var(--color-bg);
    border-radius: var(--radius);
}

.block-who-we-serve__bottom-btn {
    gap: 10px;
    min-height: 52px;
    padding: 14px 26px;
    font-size: 15px;
}

.block-who-we-serve__bottom-arrow {
    display: block;
    flex: 0 0 auto;
}

.block-who-we-serve__bottom-text {
    max-width: 320px;
    margin: 0;
    padding-left: var(--spacing-lg);
    border-left: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

/* ==========================================================================
   SINGLE-SERVICE
   ========================================================================== */
/* Plain skeleton until the single service design is provided. */
.single-service {
    padding-block: var(--spacing-2xl);
}

.single-service__title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--fs-h1);
}

.single-service__image {
    width: 100%;
    border-radius: 16px;
    margin: 0 0 var(--spacing-lg);
}

.single-service__description {
    max-width: 720px;
    margin: 0 0 var(--spacing-lg);
    line-height: 1.7;
}

.single-service__features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-service__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: var(--spacing-sm);
}

.single-service__feature::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ==========================================================================
   BLOCK-WHAT-WE-DO
   ========================================================================== */
.block-what-we-do {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
    text-align: center;
}

.block-what-we-do__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-what-we-do__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

.block-what-we-do__description {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    color: var(--color-muted);
}

/* Cards grid */
.block-what-we-do__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    text-align: left;
}

.block-what-we-do__card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

/* Image with overlaid category + title */
.block-what-we-do__media {
    position: relative;
    display: block;
    height: 270px;
    text-decoration: none;
}

.block-what-we-do__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-what-we-do__media-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-lg);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .65) 100%);
}

/* The eyebrow sits on a photo, so it carries its own white plate. align-self
   keeps the plate hugging the text instead of stretching the full card width,
   because the overlay is a flex column. */
.block-what-we-do__categories {
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-what-we-do__card-title {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
}

/* Card body */
.block-what-we-do__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--spacing-lg);
}

.block-what-we-do__text {
    margin: 0 0 var(--spacing-lg);
    line-height: 1.6;
}

.block-what-we-do__features {
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    list-style: none;
}

.block-what-we-do__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 6px;
    font-size: 15px;
}

/* Red check circle */
.block-what-we-do__feature::before {
    content: "\2713";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* CTA pinned to the card bottom */
.block-what-we-do__cta {
    margin-top: auto;
    width: 100%;
    gap: 8px;
}

.block-what-we-do__cta-arrow {
    flex: 0 0 auto;
}

/* Pagination */
.block-what-we-do__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--spacing-xl);
}

.block-what-we-do__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.block-what-we-do__pagination .page-numbers:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.block-what-we-do__pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.block-what-we-do__pagination .page-numbers.dots {
    border: 0;
}

/* ==========================================================================
   BLOCK-MAKES-DIFFERENT
   ========================================================================== */
.block-makes-different {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
    text-align: center;
}

.block-makes-different__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-makes-different__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Cards: extra top margin leaves room for the overlapping number circles. */
.block-makes-different__description {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    color: var(--color-muted);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    text-align: center;
}

.block-makes-different__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: 44px;
}

.block-makes-different__card {
    position: relative;
    padding: 44px var(--spacing-lg) var(--spacing-lg);
    /* background: #f9fafb; */
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* Auto number circle, half-overlapping the card's top edge */
.block-makes-different__number--icon {
    padding: 13px;
}

.block-makes-different__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block-makes-different__number {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
}

.block-makes-different__card-subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-makes-different__card-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.block-makes-different__card-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 34px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

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

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-primary-dark);
}

.btn--secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ==========================================================================
   SITE TOP BANNER
   ========================================================================== */
/* Red strip above the header. Outside .site-header on purpose, so it scrolls
   away once the header goes fixed. */
.site-top-banner {
    background: var(--color-primary);
    color: #fff;
}

.site-top-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding-block: 9px;
    text-align: center;
}

.site-top-banner__note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.site-top-banner__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.site-top-banner__note-text {
    font-size: 14px;
    line-height: 1.3;
}

.site-top-banner__note-text strong {
    font-weight: 700;
}

.site-top-banner__phone {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
}

.site-top-banner__phone:hover,
.site-top-banner__phone:focus-visible {
    text-decoration: underline;
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
    position: relative;
    background: var(--color-bg);
}

/* Fixed-on-scroll: JS adds .is-fixed past ~100px and sets a matching
   body padding-top so the page content does not jump. */
.site-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    animation: site-header-drop .3s ease;
}

@keyframes site-header-drop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.site-header__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--header-gap);
    padding-block: var(--header-pad-y);
}

.site-header__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
}

.site-header__logo-img {
    display: block;
    width: auto;
    height: 48px;
}

/* Centre navigation */
.site-header__nav {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    /* justify-content: center; */
}

.header-menu {
    display: flex;
    align-items: stretch;
    gap: var(--header-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-menu li {
    position: relative;
}

/* Top-level items fill the header height so the active/hover bar can pin to
   the header's bottom edge. (The sub-menu is absolute, so it stays a dropdown.) */
.header-menu > li {
    display: flex;
}

.header-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.header-menu > li > a:hover,
.header-menu > li.current-menu-item > a,
.header-menu > li.current-menu-ancestor > a {
    color: var(--color-primary);
}

/* Active / hover bar, pinned to the bottom edge of the header.
   The link fills the header height, so dropping the bar by the header's
   vertical padding lands it flush on the header's bottom edge. */
.header-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--header-pad-y));
    height: 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity .2s ease;
}

.header-menu > li > a:hover::before,
.header-menu > li:focus-within > a::before,
.header-menu > li.current-menu-item > a::before,
.header-menu > li.current-menu-ancestor > a::before {
    opacity: 1;
}

/* Dropdown arrow on items with children */
.header-menu .menu-item-has-children > a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    position: relative;
    top: -2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease, top .2s ease;
}

.header-menu .menu-item-has-children.is-open > a::after {
    top: 1px;
    transform: rotate(-135deg);
}

/* Sub-menu toggle button (printed by the walker_nav_menu_start_el filter).
   Only the mobile panel needs it - on desktop the dropdown opens on hover and
   the arrow above is part of the link. */
.header-menu__submenu-toggle { display: none; }

/* Sub-menu (dropdown) */
.header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 100;
}

.header-menu .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-menu .sub-menu li {
    width: 100%;
}

.header-menu .sub-menu a {
    display: block;
    width: 100%;
    padding: 8px 18px;
    font-weight: 500;
}

.header-menu .sub-menu a:hover {
    color: var(--color-primary);
    background: rgba(192, 57, 43, .06);
}

.site-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Mobile menu toggle - hidden on desktop, shown from 768px down (media.css).
   Sized and framed to sit next to the logo and CTA button harmoniously. */
.site-header__toggle {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
    border-color: var(--color-primary);
    background: rgba(192, 57, 43, .06);
}

.site-header__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text);
    transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
}

.site-header__toggle:hover .site-header__toggle-bar,
.site-header__toggle:focus-visible .site-header__toggle-bar {
    background: var(--color-primary);
}

/* Open state: the three bars morph into an X. */
.site-header.is-menu-open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.is-menu-open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-header.is-menu-open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   BLOCK-OUR-WORK
   ========================================================================== */
.block-our-work {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg-light);
    text-align: center;
}

.block-our-work__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-our-work__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

.block-our-work__description {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    color: var(--color-muted);
}

/* Cards grid - project_image fills the top ~62% of the card, the text part
   sits on solid dark #162a35, joined by a smooth fade over the image bottom */
.block-our-work__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    text-align: left;
}

/* Whole card is a link - reset link styling and let the card fill the grid
   cell so cards keep equal heights across the row, as before the <a> wrap */
.block-our-work__card-link {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.block-our-work__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: #162a35; /* card body colour from the design */
    overflow: hidden;
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover: lift the card and zoom its image slightly */
.block-our-work__card-link:hover .block-our-work__card,
.block-our-work__card-link:focus-visible .block-our-work__card {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(22, 42, 53, .28);
}

.block-our-work__card-link:hover .block-our-work__media,
.block-our-work__card-link:focus-visible .block-our-work__media {
    transform: scale(1.05);
}

/* Image area: keeps ~62% of the card height via its aspect ratio */
.block-our-work__media {
    position: relative;
    aspect-ratio: 12 / 11;
    padding: var(--spacing-lg);
    background-color: #162a35;
    background-size: cover;
    background-position: center;
    transition: transform .35s ease;
}

/* Fade from the image into the dark text part below */
.block-our-work__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 42, 53, 0) 45%, #162a35 100%);
}

.block-our-work__types {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-our-work__type {
    padding: 12px 25px;
    border-radius: 999px;
    background: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.block-our-work__card-body {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    padding-bottom: 36px;
    padding-top: 20px;
}

.block-our-work__card-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.block-our-work__card-text {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

.block-our-work__actions {
    margin-top: var(--spacing-xl);
}

.block-our-work__cta {
    gap: var(--spacing-sm);
}

/* ==========================================================================
   BLOCK-HOW-WE-WORK
   ========================================================================== */
.block-how-we-work {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
    text-align: center;
}

.block-how-we-work__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-how-we-work__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Numbered steps row */
.block-how-we-work__points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
    text-align: left;
}

.block-how-we-work__point {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

/* Auto-numbered 01/02/... circle */
.block-how-we-work__number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}

.block-how-we-work__point-title {
    /* margin: 14px 0 var(--spacing-sm); */
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.block-how-we-work__point-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

/* ==========================================================================
   BLOCK-REVIEWS
   ========================================================================== */
.block-reviews {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
    text-align: center;
}

.block-reviews__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-reviews__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Slider: viewport is 100% of the container, arrows hang outside it */
.block-reviews__slider {
    position: relative;
}

.block-reviews__viewport {
    width: 100%;
    overflow: hidden;
}

.block-reviews__track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform .45s ease;
    will-change: transform;
}

/* 3 cards per view on desktop; flex-basis accounts for the two gaps */
.block-reviews__card {
    flex: 0 0 calc((100% - 2 * var(--spacing-lg)) / 3);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    background: var(--color-bg-light);
    text-align: left;
}

.block-reviews__card-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.block-reviews__stars {
    height: 18px;
    width: auto;
}

.block-reviews__source {
    height: 20px;
    width: auto;
}

.block-reviews__sign {
    height: 26px;
    width: auto;
    margin-left: auto;
    align-self: flex-start;
}

.block-reviews__name {
    margin: 0 0 var(--spacing-md);
    font-size: 18px;
    font-weight: 700;
}

.block-reviews__text {
    margin: 0 0 var(--spacing-lg);
    font-size: 15px;
}

/* Pinned to the card bottom so short reviews keep the date aligned */
.block-reviews__date {
    margin: auto 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

/* Arrows - absolute, slightly wider than the slider viewport */
.block-reviews__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.block-reviews__arrow img {
    width: 100%;
    height: auto;
    transition: transform .2s ease, filter .2s ease;
}

/* Hover / focus: the arrows are raster .png, so recolouring via CSS is not
   an option - scale the image up and lift it with a drop-shadow instead */
.block-reviews__arrow:hover img,
.block-reviews__arrow:focus-visible img {
    transform: scale(1.12);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .2));
}

.block-reviews__arrow:active img {
    transform: scale(1.02);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}

.block-reviews__arrow--prev { left: -56px; }
.block-reviews__arrow--next { right: -56px; }

/* ==========================================================================
   BLOCK-SERVICE-AREA
   ========================================================================== */
/* Full-bleed split: the two middle tracks together equal the site container,
   the 1fr edge tracks absorb the rest of the viewport. The dark panel spans
   the left edge track + its container share (44%), the map takes the rest,
   so the text column left-aligns exactly with the page container. */
.block-service-area {
    display: grid;
    grid-template-columns:
        1fr
        minmax(0, calc(var(--container-max) * .44))
        minmax(0, calc(var(--container-max) * .56))
        1fr;
}

.block-service-area__content {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #162a35; /* same dark panel colour as the our-work cards */
    color: #fff;
}

.block-service-area__inner {
    width: 100%;
    max-width: calc(var(--container-max) * .44);
    padding: var(--spacing-2xl) var(--container-pad);
}

.block-service-area__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-service-area__title {
    margin: 0 0 var(--spacing-md);
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.block-service-area__text {
    margin: 0;
    max-width: 420px;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    line-height: 1.6;
}

/* Map bleeds to the right body edge; the raw iframe is stretched to fill */
.block-service-area__map {
    grid-column: 3 / 5;
    position: relative;
    min-height: 400px;
}

.block-service-area__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ==========================================================================
   BLOCK-CTA-SECTION
   ========================================================================== */
.block-cta-section {
    position: relative;
    padding-block: 80px;
    background-color: #1b2a44; /* fallback when no image, same as hero */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
    min-height: 550px;
    display: flex;
    align-items: center;
}

.block-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    z-index: 1;
}

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

.block-cta-section__title {
    margin: 0 0 var(--spacing-sm);
    color: #fff;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
}

.block-cta-section__description {
    max-width: 720px;
    margin: 0 auto var(--spacing-lg);
    color: rgba(255, 255, 255, .9);
    font-size: var(--fs-lead);
}

/* White card that frames the two buttons */
.block-cta-section__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 18px;
    background: var(--color-bg);
    border: 1px solid rgba(192, 57, 43, .45); /* thin red frame from the design */
    border-radius: 4px;
}

.block-cta-section__btn, .block-hero__cta {
    gap: var(--spacing-sm);
}

.block-cta-section__btn-arrow {
    display: block;
}

.block-cta-section__btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
    padding-block: 48px var(--spacing-md);
    background: var(--color-bg-light);
}

/* Logo | three menus | contacts */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, .9fr) 1.35fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.site-footer__about {
    max-width: 250px;
    margin: 12px 0 6px;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.site-footer__trust {
    max-width: 250px;
    margin: 0;
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.site-footer__logo {
    display: inline-block;
}

.site-footer__logo-img {
    width: 120px;
    height: auto;
}

.site-footer__heading {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.site-footer__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__menu li + li {
    margin-top: 6px;
}

.site-footer__menu a {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
    color: var(--color-primary);
}

/* Contacts column */
.site-footer__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
    color: var(--color-primary);
}

.site-footer__phone-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.site-footer__email {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer__email:hover,
.site-footer__email:focus-visible {
    color: var(--color-primary);
}

.site-footer__address {
    max-width: 220px;
    margin: 0 0 var(--spacing-lg);
    font-size: 15px;
}

.site-footer__hours {
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.site-footer__copyright,
.site-footer__credit {
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}

.site-footer__credit a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
    color: var(--color-primary);
}

/* ==========================================================================
   BLOCK-HUB-WHAT-WE-DO
   ========================================================================== */
.block-hub-what-we-do {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
    text-align: center;
}

.block-hub-what-we-do__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-hub-what-we-do__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Stack of full-width row cards */
.block-hub-what-we-do__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    text-align: left;
}

.block-hub-what-we-do__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

/* Red icon tile, divider on its right edge */
.block-hub-what-we-do__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding-right: var(--spacing-lg);
    border-right: 1px solid var(--color-border);
    box-sizing: content-box;
}

/* The red tile is drawn here, not baked into the SVG, so every icon file in the
   set is a plain white glyph on transparent and stays interchangeable. */
.block-hub-what-we-do__icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 15px;
    background: var(--color-primary);
    border-radius: var(--radius);
}

.block-hub-what-we-do__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block-hub-what-we-do__card-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.block-hub-what-we-do__text {
    margin: 0;
    max-width: 560px;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Stacked button column; both buttons share the widest button's width */
.block-hub-what-we-do__aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-md);
    align-self: center;
}

.block-hub-what-we-do__aside .btn {
    gap: var(--spacing-sm);
    justify-content: center;
    white-space: nowrap;
}

/* First button: outlined red -> fills red on hover. */
.block-hub-what-we-do__cta {
    color: var(--color-primary);
    background: var(--color-bg);
    border-color: var(--color-primary);
}

.block-hub-what-we-do__cta:hover,
.block-hub-what-we-do__cta:focus-visible {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Second button: the inverse - solid red -> outlines on hover. */
.block-hub-get-a-quote__cta {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.block-hub-get-a-quote__cta:hover,
.block-hub-get-a-quote__cta:focus-visible {
    color: var(--color-primary);
    background: var(--color-bg);
    border-color: var(--color-primary);
}

/* ==========================================================================
   CATEGORY ARCHIVE (taxonomy-services_category.php)
   ========================================================================== */
.category-archive__header {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.category-archive__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--fs-h2);
    font-weight: 700;
}

.category-archive__description {
    max-width: 720px;
    margin-inline: auto;
    color: var(--color-muted);
}

.category-archive__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.category-archive__item-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.category-archive__item-link:hover,
.category-archive__item-link:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

.category-archive__item-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.category-archive__item-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
}

/* ==========================================================================
   BLOCK-WHAT-WE-OFFER
   ========================================================================== */
.block-what-we-offer {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
}

.block-what-we-offer__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

.block-what-we-offer__title {
    margin: 0 0 var(--spacing-md);
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.block-what-we-offer__description {
    max-width: 720px;
    margin: 0 auto var(--spacing-xl);
    color: var(--color-muted);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    text-align: center;
}

.block-what-we-offer__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
}

/* Three per row, and a short final row centres itself instead of hanging left. */
.block-what-we-offer__card {
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - (var(--spacing-lg) * 2)) / 3);
    max-width: calc((100% - (var(--spacing-lg) * 2)) / 3);
    padding: var(--spacing-xl);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.block-what-we-offer__card-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: var(--spacing-md);
    padding: 16px;
    background: var(--color-primary);
    border-radius: var(--radius);
}

.block-what-we-offer__card-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block-what-we-offer__card-eyebrow {
    margin: 0 0 var(--spacing-xs);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-what-we-offer__card-title {
    margin: 0 0 var(--spacing-sm);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.block-what-we-offer__card-text {
    margin: 0 0 var(--spacing-md);
    color: var(--color-muted);
    font-size: var(--fs-body);
    line-height: 1.6;
}

.block-what-we-offer__features {
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    list-style: none;
}

.block-what-we-offer__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.block-what-we-offer__feature:last-child {
    margin-bottom: 0;
}

.block-what-we-offer__feature-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.block-what-we-offer__feature-text {
    font-size: 15px;
    line-height: 1.5;
}

/* Pushed to the bottom so buttons line up across cards of different heights. */
.block-what-we-offer__card-button {
    margin-top: auto;
    align-self: flex-start;
}

.block-what-we-offer__bottom {
    max-width: 860px;
    margin: var(--spacing-xl) auto 0;
    color: var(--color-muted);
    font-size: var(--fs-body);
    line-height: 1.6;
    text-align: center;
}

.block-what-we-offer__bottom a {
    color: var(--color-primary);
    text-decoration: underline;
}

.block-what-we-offer__bottom a:hover,
.block-what-we-offer__bottom a:focus-visible {
    color: var(--color-primary-dark);
}

/* ==========================================================================
   BLOCK-WHY-US
   ========================================================================== */
.block-why-us {
    padding-block: var(--spacing-2xl);
    background: #F1F1F1;
    text-align: center;
}

.block-why-us__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-why-us__title {
    margin: 0 0 var(--spacing-2xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Two-column grid of numbered cards */
.block-why-us__points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    text-align: left;
}

.block-why-us__point {
    position: relative;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 60px;
    /* background: var(--color-bg); */
    border: 1px solid #D9D9D9;
    border-radius: var(--radius);
}

/* Auto-numbered circle straddling the card's left edge */
.block-why-us__number {
    position: absolute;
    top: var(--spacing-xl);
    left: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}

/* Same circle with an icon instead of the number (card_icons switch): the
   image fills the disc and the circle crops whatever sticks out. */
.block-why-us__number--icon {
    /* 68px circle minus a 40px glyph, per the Figma why-us card. */
    padding: 14px;
    overflow: hidden;
}

.block-why-us__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.block-why-us__point-title {
    margin: 6px 0 var(--spacing-sm);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.block-why-us__point-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================================================================
   BLOCK-TRUST-AND-CREDENTIALS
   ========================================================================== */
.block-trust-and-credentials {
    padding-block: var(--spacing-2xl);
    background: #F1F1F1;
    text-align: center;
}

.block-trust-and-credentials__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-trust-and-credentials__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Slider - same structure as .block-reviews__slider so JS/CSS behave alike */
.block-trust-and-credentials__slider {
    position: relative;
}

.block-trust-and-credentials__viewport {
    width: 100%;
    overflow: hidden;
}

.block-trust-and-credentials__track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform .45s ease;
    will-change: transform;
}

/* 3 cards per view on desktop; flex-basis accounts for the two gaps */
.block-trust-and-credentials__card {
    flex: 0 0 calc((100% - 2 * var(--spacing-lg)) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl);
    background: #ececec; /* card fill from the design, a touch darker than the section */
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* Pink icon tile with the red check PNG */
.block-trust-and-credentials__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius);
    /* background: rgba(192, 57, 43, .12); */
}

/* .block-trust-and-credentials__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
} */

.block-trust-and-credentials__card-title {
    margin: 0 0 var(--spacing-md);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.block-trust-and-credentials__card-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Arrows - absolute, slightly wider than the slider viewport */
.block-trust-and-credentials__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.block-trust-and-credentials__arrow img {
    width: 100%;
    height: auto;
    transition: transform .2s ease, filter .2s ease;
}

.block-trust-and-credentials__arrow:hover img,
.block-trust-and-credentials__arrow:focus-visible img {
    transform: scale(1.12);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .2));
}

.block-trust-and-credentials__arrow:active img {
    transform: scale(1.02);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}

.block-trust-and-credentials__arrow--prev { left: -56px; }
.block-trust-and-credentials__arrow--next { right: -56px; }

/* ==========================================================================
   BLOCK-HOW-WE-WORK-BIG
   ========================================================================== */
/* Full-bleed split: the two middle tracks together equal the site container,
   the 1fr edge tracks absorb the rest of the viewport. Text spans the left
   edge track + its 50% container share, so it left-aligns with the page
   container; the image takes the right half out to the body edge. */
.block-how-we-work-big {
    display: grid;
    grid-template-columns:
        1fr
        minmax(0, calc(var(--container-max) * .5))
        minmax(0, calc(var(--container-max) * .5))
        1fr;
    align-items: stretch;
}

.block-how-we-work-big__content {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--color-bg);
}

.block-how-we-work-big__inner {
    width: 100%;
    max-width: calc(var(--container-max) * .5);
    padding: var(--spacing-2xl) var(--container-pad);
}

.block-how-we-work-big__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-how-we-work-big__title {
    margin: 0 0 var(--spacing-xl);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.block-how-we-work-big__steps {
    display: flex;
    flex-direction: column;
    gap: 58px;
}

.block-how-we-work-big__step-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.block-how-we-work-big__step-number {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
}

.block-how-we-work-big__step-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.block-how-we-work-big__step-text {
    margin: 0;
    max-width: 480px;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Opt-in CTA button under the steps (bottom_cta_button switch). Full width of
   the text column, as in the design. */
.block-how-we-work-big__cta {
    margin-top: var(--spacing-xl);
}

.block-how-we-work-big__cta-btn {
    gap: 10px;
    width: 100%;
    max-width: 300px;
    min-height: 62px;
    padding: 18px 30px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
}

.block-how-we-work-big__cta-arrow {
    display: block;
    flex: 0 0 auto;
}

/* Image bleeds to the right body edge */
.block-how-we-work-big__media {
    grid-column: 3 / 5;
    min-height: 520px;
    background-color: var(--color-bg-light);
    background-size: cover;
    background-position: center;
}

/* ==========================================================================
   BLOCK-CATEGORY-FAQS
   ========================================================================== */
.block-category-faqs {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
    text-align: center;
}

.block-category-faqs__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-category-faqs__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

/* Accordion list */
.block-category-faqs__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: left;
}

.block-category-faqs__item {
    background: var(--color-bg-light);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Question row - the clickable toggle */
.block-category-faqs__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 0;
    background: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: color .2s ease;
}

.block-category-faqs__question:hover,
.block-category-faqs__question:focus-visible {
    color: var(--color-primary);
}

/* Plus / minus icon: the plus is the SVG, the minus is the ::after bar; they
   cross-fade (with a quarter-turn) as the item opens and closes. */
.block-category-faqs__icon {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.block-category-faqs__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .25s ease, transform .25s ease;
}

.block-category-faqs__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.block-category-faqs__item.is-open .block-category-faqs__icon img {
    opacity: 0;
    transform: rotate(90deg);
}

.block-category-faqs__item.is-open .block-category-faqs__icon::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Answer - grid-template-rows 0fr -> 1fr animates the height smoothly */
.block-category-faqs__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.block-category-faqs__item.is-open .block-category-faqs__answer {
    grid-template-rows: 1fr;
}

.block-category-faqs__answer-inner {
    min-height: 0;
    overflow: hidden;
}

.block-category-faqs__answer-text {
    margin: 0;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================================================================
   BLOCK-CATEGORY-TEXT-IMAGE-CONTENT
   ========================================================================== */
.block-category-text-image-content {
    padding-block: var(--spacing-2xl);
    background: #FFFFFF;
}

/* Dark intro panel - same look as who-we-serve, boxed within the container */
.block-category-text-image-content__intro {
    position: relative;
    padding: var(--spacing-2xl);
    border-radius: var(--radius);
    background-color: #141d28;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/* Same reasoning as who-we-serve: the panel is dark by design and the overlay is what
   keeps the white heading and the pills readable over any background photo. */
.block-category-text-image-content__intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-overlay-dark);
    z-index: 1;
}

.block-category-text-image-content__intro > * {
    position: relative;
    z-index: 2;
}

.block-category-text-image-content__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-category-text-image-content__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* Points grid - check-marked pills, 4 columns */
.block-category-text-image-content__button {
    margin-top: var(--spacing-xl);
}

.block-category-text-image-content__points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.block-category-text-image-content__point {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    background: #203947;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    font-size: 15px;
    color: #fff;
}

.block-category-text-image-content__point-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Alternating text / image rows */
.block-category-text-image-content__rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
}

.block-category-text-image-content__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-2xl);
}

/* Even rows put the image first (left) */
.block-category-text-image-content__row--reverse .block-category-text-image-content__row-media {
    order: -1;
}

.block-category-text-image-content__row-title {
    margin: 0 0 var(--spacing-md);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.block-category-text-image-content__row-text {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.7;
}

.block-category-text-image-content__row-text p { margin: 0 0 var(--spacing-md); }
.block-category-text-image-content__row-text p:last-child { margin-bottom: 0; }

.block-category-text-image-content__row-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* ==========================================================================
   BLOCK-ESTIMATE-FORM
   ========================================================================== */
.block-estimate-form {
    padding-block: 80px;
    background: var(--color-bg-light);
}

.block-estimate-form__card {
    padding: 56px 100px 64px;
    background: var(--color-bg);
    border: 1px solid rgba(192, 57, 43, .45); /* thin red frame from the design */
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(16, 33, 58, .06);
}

.block-estimate-form__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Formidable form inside the card.

   The markup comes from the plugin, so these rules target its classes rather
   than BEM ones - all of them are scoped to .block-estimate-form so no other
   Formidable form on the site is affected. Field layout comes from a two
   column grid on .frm_fields_container: every field is `frm6` (half width) and
   the eight visible fields fall into four rows exactly as in the design.
   -------------------------------------------------------------------------- */
.block-estimate-form__form { margin: 0; }

.block-estimate-form .frm_forms,
.block-estimate-form .frm-show-form { width: 100%; }

.block-estimate-form .frm_form_fields > fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Legend and every field label are visual noise here - the design uses
   placeholders - but they stay reachable for screen readers. */
.block-estimate-form .frm_screen_reader,
.block-estimate-form .frm_primary_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Formidable lays fields out on a 12 column grid and tags each field's width
 * with an frmN class (frm6 = half). Mirroring that grid here - rather than a
 * plain two column one - stops the plugin's own `grid-column: span 6` from
 * stretching every field across the row, and keeps the widths chosen in the
 * form builder working. Each field in this form is frm6, so they pair up two
 * per row: Name/Company, Phone/Email, City/Comment, consent/submit.
 */
.block-estimate-form .frm_fields_container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-md);
    row-gap: 32px;
    align-items: start;
}

/* Width classes. These outrank the plugin's own spans on specificity, so the
   layout holds whether or not Formidable's stylesheet is loaded. */
.block-estimate-form .frm_fields_container > .frm_form_field { grid-column: auto / span 12; }
.block-estimate-form .frm_fields_container > .frm9 { grid-column: auto / span 9; }
.block-estimate-form .frm_fields_container > .frm8 { grid-column: auto / span 8; }
.block-estimate-form .frm_fields_container > .frm6 { grid-column: auto / span 6; }
.block-estimate-form .frm_fields_container > .frm4 { grid-column: auto / span 4; }
.block-estimate-form .frm_fields_container > .frm3 { grid-column: auto / span 3; }

/* The anti-spam honeypot is the only field container the plugin renders
   without a class; the second rule is the same target via its input. */
.block-estimate-form .frm_fields_container > div:not([class]) { display: none; }
.block-estimate-form .frm_fields_container > div:has(.frm_verify) { display: none; }

.block-estimate-form .frm_form_field {
    margin: 0;
    min-width: 0;
}

.block-estimate-form .frm_form_field input[type="text"],
.block-estimate-form .frm_form_field input[type="email"],
.block-estimate-form .frm_form_field input[type="tel"],
.block-estimate-form .frm_form_field input[type="url"],
.block-estimate-form .frm_form_field input[type="number"],
.block-estimate-form .frm_form_field select,
.block-estimate-form .frm_form_field textarea {
    width: 100%;
    min-height: 62px;
    padding: 18px 24px;
    background: #ececec; /* field grey from the design */
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-text);
    transition: background-color .2s ease, border-color .2s ease;
}

.block-estimate-form .frm_form_field textarea {
    min-height: 124px;
    resize: vertical;
}

.block-estimate-form .frm_form_field input::placeholder,
.block-estimate-form .frm_form_field textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.block-estimate-form .frm_form_field input:focus,
.block-estimate-form .frm_form_field select:focus,
.block-estimate-form .frm_form_field textarea:focus {
    outline: none;
    background: #e6e6e6;
    border-color: var(--color-primary);
}

/* Consent checkbox - sits opposite the submit button, so it is centred
   against it instead of hugging the top of its grid cell. */
.block-estimate-form .frm_form_field.vertical_radio { align-self: center; }

.block-estimate-form .frm_opt_container { margin: 0; }

.block-estimate-form .frm_checkbox { margin: 0; }

.block-estimate-form .frm_checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-muted);
    cursor: pointer;
}

.block-estimate-form .frm_checkbox input[type="checkbox"] {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: #ececec;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease;
}

.block-estimate-form .frm_checkbox input[type="checkbox"]:checked { background: var(--color-primary); }

.block-estimate-form .frm_checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.block-estimate-form .frm_checkbox input[type="checkbox"]:focus-visible { border-color: var(--color-primary); }

/* Submit button - fills its half of the grid, matching the design. */
.block-estimate-form .frm_submit {
    display: block;
    margin: 0;
}

.block-estimate-form .frm_button_submit {
    width: 100%;
    min-height: 62px;
    padding: 18px 26px;
    background: var(--color-primary);
    border: 0;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}

.block-estimate-form .frm_button_submit:hover,
.block-estimate-form .frm_button_submit:focus-visible { background: var(--color-primary-dark); }

/* Validation and confirmation states. `has-error` is set by the front-end
   check in assets/js/main.js; frm_blank_field comes from the plugin itself. */
.block-estimate-form .frm_blank_field input,
.block-estimate-form .frm_blank_field select,
.block-estimate-form .frm_blank_field textarea,
.block-estimate-form .frm_form_field.has-error input,
.block-estimate-form .frm_form_field.has-error select,
.block-estimate-form .frm_form_field.has-error textarea { border-color: var(--color-primary); }

.block-estimate-form .frm_error {
    margin: var(--spacing-xs) 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-primary);
}

.block-estimate-form .frm_error_style,
.block-estimate-form .frm_message {
    grid-column: 1 / -1;
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-light);
    border-left: 3px solid var(--color-primary);
    font-size: 14px;
}

/*
 * The phone row sits centred under the form's right-hand column, so it takes
 * half the card width (minus the form's column gap) and is pushed right.
 * Once the form is styled, keep this in sync with the real column gap.
 */
.block-estimate-form__phone {
    width: calc(50% - var(--spacing-sm));
    margin-left: auto;
    padding-top: var(--spacing-lg);
}

.block-estimate-form__phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
}

.block-estimate-form__phone-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.block-estimate-form__phone-text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.block-estimate-form__phone-link:hover .block-estimate-form__phone-text,
.block-estimate-form__phone-link:focus-visible .block-estimate-form__phone-text {
    color: var(--color-primary);
}

/* ==========================================================================
   BLOCK-CONTACT-INFO
   ========================================================================== */
.block-contact-info {
    padding-block: 80px;
    background: var(--color-bg-light);
}

.block-contact-info__inner {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.block-contact-info__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hairline between items only - the first and last edges stay clean. */
.block-contact-info__item + .block-contact-info__item {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.block-contact-info__item-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.block-contact-info__item-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.block-contact-info__item-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.block-contact-info__item-content {
    margin-top: var(--spacing-lg);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-text);
}

.block-contact-info__item-content p { margin: 0 0 var(--spacing-sm); }
.block-contact-info__item-content p:last-child { margin-bottom: 0; }

/*
 * The map cell stretches to the row height, so the embed is pinned to it and
 * the min-height only kicks in when the contact list is the shorter column.
 */
.block-contact-info__map {
    position: relative;
    min-height: 420px;
    align-self: stretch;
    overflow: hidden;
}

.block-contact-info__map iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   PAGE-THANK-YOU

   Standalone confirmation screen (page-thank-you.php). Same card language as
   the estimate form and the quote popup - white card with a thin red frame on
   the light grey band - centred on the page.
   ========================================================================== */
.page-thank-you {
    display: flex;
    align-items: center;
    min-height: 60vh;
    padding-block: 100px;
    background: var(--color-bg-light);
}

.page-thank-you .container { width: 100%; }

.page-thank-you__card {
    max-width: 760px;
    margin-inline: auto;
    padding: 72px 80px 80px;
    background: var(--color-bg);
    border: 1px solid rgba(192, 57, 43, .45);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(16, 33, 58, .06);
    text-align: center;
}

.page-thank-you__contact {
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text);
    font-size: var(--fs-lead);
    font-weight: 600;
}

.page-thank-you__phone {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.page-thank-you__phone:hover,
.page-thank-you__phone:focus-visible { text-decoration: underline; }

/* Red disc with a CSS check - no icon file needed. */
.page-thank-you__icon {
    position: relative;
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto var(--spacing-xl);
    background: var(--color-primary);
    border-radius: 50%;
}

.page-thank-you__icon::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: 20px;
    height: 38px;
    border: solid #fff;
    border-width: 0 4px 4px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.page-thank-you__title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text);
}

.page-thank-you__text {
    margin: 0 auto var(--spacing-xl);
    max-width: 540px;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--color-muted);
}

.page-thank-you__button {
    min-height: 56px;
    padding-inline: 40px;
    font-size: 16px;
}

/* ==========================================================================
   QUOTE-POPUP

   Global modal printed by template-parts/quote-popup.php on every template.
   Hidden until assets/js/main.js adds `is-open` (triggered by any link with
   href="#quote-form"). The card and the form inside reuse the estimate form's
   look - white card, thin red frame, grey fields, full-width red submit - but
   every rule is scoped to .quote-popup so no other form is affected.
   ========================================================================== */
.quote-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    padding: var(--spacing-xl) var(--container-pad);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.quote-popup.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scroll lock for the page behind the popup. */
body.has-quote-popup-open { overflow: hidden; }

.quote-popup__overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-dark);
    cursor: pointer;
}

.quote-popup__dialog {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: auto;
    padding: 56px 72px 64px;
    background: var(--color-bg);
    border: 1px solid rgba(192, 57, 43, .45); /* same thin red frame as the estimate card */
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(16, 33, 58, .28);
}

.quote-popup__dialog:focus { outline: none; }

.quote-popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.quote-popup__close:hover,
.quote-popup__close:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Pure CSS X - no icon file needed. */
.quote-popup__close-icon {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
}

.quote-popup__close-icon::before,
.quote-popup__close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    transition: background-color .2s ease;
}

.quote-popup__close-icon::before { transform: translateY(-50%) rotate(45deg); }
.quote-popup__close-icon::after { transform: translateY(-50%) rotate(-45deg); }

.quote-popup__close:hover .quote-popup__close-icon::before,
.quote-popup__close:hover .quote-popup__close-icon::after,
.quote-popup__close:focus-visible .quote-popup__close-icon::before,
.quote-popup__close:focus-visible .quote-popup__close-icon::after { background: #fff; }

.quote-popup__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Formidable form inside the popup.

   Mirrors the BLOCK-ESTIMATE-FORM rules: the plugin lays fields out on a 12
   column grid and tags each with an frmN width class, so the same grid is
   rebuilt here - otherwise the plugin's own `span 6` stretches every field
   across the row.
   -------------------------------------------------------------------------- */
.quote-popup__form { margin: 0; }

.quote-popup .frm_forms,
.quote-popup .frm-show-form { width: 100%; }

.quote-popup .frm_form_fields > fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* The design uses placeholders - labels stay for screen readers only. */
.quote-popup .frm_screen_reader,
.quote-popup .frm_primary_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.quote-popup .frm_fields_container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-md);
    row-gap: 24px;
    align-items: start;
}

.quote-popup .frm_fields_container > .frm_form_field { grid-column: auto / span 12; }
.quote-popup .frm_fields_container > .frm9 { grid-column: auto / span 9; }
.quote-popup .frm_fields_container > .frm8 { grid-column: auto / span 8; }
.quote-popup .frm_fields_container > .frm6 { grid-column: auto / span 6; }
.quote-popup .frm_fields_container > .frm4 { grid-column: auto / span 4; }
.quote-popup .frm_fields_container > .frm3 { grid-column: auto / span 3; }

/* The honeypot is the only field container rendered without a class. */
.quote-popup .frm_fields_container > div:not([class]) { display: none; }
.quote-popup .frm_fields_container > div:has(.frm_verify) { display: none; }

.quote-popup .frm_form_field {
    margin: 0;
    min-width: 0;
}

.quote-popup .frm_form_field input[type="text"],
.quote-popup .frm_form_field input[type="email"],
.quote-popup .frm_form_field input[type="tel"],
.quote-popup .frm_form_field input[type="url"],
.quote-popup .frm_form_field input[type="number"],
.quote-popup .frm_form_field select,
.quote-popup .frm_form_field textarea {
    width: 100%;
    min-height: 58px;
    padding: 16px 22px;
    background: #ececec; /* field grey from the design */
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-text);
    transition: background-color .2s ease, border-color .2s ease;
}

.quote-popup .frm_form_field textarea {
    min-height: 110px;
    resize: vertical;
}

.quote-popup .frm_form_field input::placeholder,
.quote-popup .frm_form_field textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.quote-popup .frm_form_field input:focus,
.quote-popup .frm_form_field select:focus,
.quote-popup .frm_form_field textarea:focus {
    outline: none;
    background: #e6e6e6;
    border-color: var(--color-primary);
}

/* Consent checkbox - sits opposite the submit button. */
.quote-popup .frm_form_field.vertical_radio { align-self: center; }

.quote-popup .frm_opt_container { margin: 0; }

/* Consent line and the submit button each take the full popup width: the text
   reads in one line, the button sits underneath. */
.quote-popup .frm_fields_container > #frm_field_18_container,
.quote-popup .frm_fields_container > #frm_field_19_container { grid-column: 1 / -1; }

.quote-popup #frm_field_19_container .frm_button_submit { width: 100%; }

.quote-popup .frm_checkbox label { align-items: center; }

.cp-consent-text { display: inline; }

.cp-consent-text a { color: var(--color-primary); text-decoration: underline; }

.quote-popup .frm_checkbox { margin: 0; }

.quote-popup .frm_checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-muted);
    cursor: pointer;
}

.quote-popup .frm_checkbox input[type="checkbox"] {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: #ececec;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease;
}

.quote-popup .frm_checkbox input[type="checkbox"]:checked { background: var(--color-primary); }

.quote-popup .frm_checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.quote-popup .frm_checkbox input[type="checkbox"]:focus-visible { border-color: var(--color-primary); }

.quote-popup .frm_submit {
    display: block;
    margin: 0;
}

.quote-popup .frm_button_submit {
    width: 100%;
    min-height: 58px;
    padding: 16px 26px;
    background: var(--color-primary);
    border: 0;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}

.quote-popup .frm_button_submit:hover,
.quote-popup .frm_button_submit:focus-visible { background: var(--color-primary-dark); }

/* Validation and confirmation states - `has-error` comes from main.js,
   frm_blank_field from the plugin. */
.quote-popup .frm_blank_field input,
.quote-popup .frm_blank_field select,
.quote-popup .frm_blank_field textarea,
.quote-popup .frm_form_field.has-error input,
.quote-popup .frm_form_field.has-error select,
.quote-popup .frm_form_field.has-error textarea { border-color: var(--color-primary); }

.quote-popup .frm_error {
    margin: var(--spacing-xs) 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-primary);
}

.quote-popup .frm_error_style,
.quote-popup .frm_message {
    grid-column: 1 / -1;
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-light);
    border-left: 3px solid var(--color-primary);
    font-size: 14px;
}

/* ==========================================================================
   BLOCK-WARNING-SIGNS
   ========================================================================== */
.block-warning-signs {
    position: relative;
    padding-block: 100px;
    background-color: #1b2a44; /* fallback when no image, same as hero */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
}

.block-warning-signs::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-overlay-dark);
    z-index: 1;
}

.block-warning-signs > .container {
    position: relative;
    z-index: 2;
}

/* Centred header */
.block-warning-signs__header {
    max-width: 720px;
    margin: 0 auto var(--spacing-2xl);
    text-align: center;
}

.block-warning-signs__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.block-warning-signs__title {
    margin: 0 0 var(--spacing-md);
    color: #fff;
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.2;
}

.block-warning-signs__description {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.6;
}

/* Card grid - four per row, so eight cards fill the two rows of the design. */
.block-warning-signs__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Four per row, and a short final row centres itself instead of hanging left. */
.block-warning-signs__cards > * {
    flex: 0 1 calc((100% - (var(--spacing-lg) * 3)) / 4);
    max-width: calc((100% - (var(--spacing-lg) * 3)) / 4);
}

/* Translucent panel over the photo with the red rule across its top edge. */
.block-warning-signs__card {
    padding: 32px 24px 36px;
    background: rgba(13, 22, 35, .55);
    border-top: 3px solid var(--color-primary);
    text-align: center;
}

.block-warning-signs__card-title {
    margin: 0 0 var(--spacing-md);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.block-warning-signs__card-text {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.6;
}

/* White action bar under the grid */
.block-warning-signs__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    width: fit-content;
    margin: var(--spacing-2xl) auto 0;
    padding: 18px;
    background: var(--color-bg);
    border-radius: var(--radius);
}

.block-warning-signs__btn {
    gap: var(--spacing-sm);
    min-height: 56px;
    padding: 16px 30px;
    font-size: 16px;
    font-weight: 700;
}

.block-warning-signs__btn-arrow {
    display: block;
    flex: 0 0 auto;
}

/* Phone link, split off from the button by a hairline. */
.block-warning-signs__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: var(--spacing-lg);
    border-left: 1px solid var(--color-border);
    text-decoration: none;
}

.block-warning-signs__phone-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.block-warning-signs__phone-text {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}

.block-warning-signs__phone:hover .block-warning-signs__phone-text,
.block-warning-signs__phone:focus-visible .block-warning-signs__phone-text {
    color: var(--color-primary);
}

/* ==========================================================================
   ARCHIVE-PROJECTS
   Shared by the Projects archive and the single project: the dark header at the
   top and the booking band at the bottom are the same component in both.
   The cards themselves are styled under BLOCK-OUR-WORK.
   ========================================================================== */
.archive-projects-header {
    position: relative;
    padding: 72px 0 var(--spacing-2xl);
    background-color: #141d28;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/* The lighter hero overlay, not the who-we-serve one: this header is meant to
   show its photo through, it only has to keep the white type readable. */
.archive-projects-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    z-index: 1;
}

.archive-projects-header > .container {
    position: relative;
    z-index: 2;
}

/* Pinned to the top edge so the section padding never pushes it down, the same
   arrangement the hero uses. */
.archive-projects-header__breadcrumbs {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 3;
    text-align: left;
}

.archive-projects-header__breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.archive-projects-header__breadcrumb + .archive-projects-header__breadcrumb::before {
    content: "/";
    margin-right: var(--spacing-sm);
    color: #BABABA;
}

.archive-projects-header__breadcrumb-link {
    color: #BABABA;
    text-decoration: none;
    transition: color .2s ease;
}

.archive-projects-header__breadcrumb-link:hover,
.archive-projects-header__breadcrumb-link:focus-visible {
    color: #fff;
}

.archive-projects-header__breadcrumb-current {
    color: #BABABA;
}

.archive-projects-header__subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.archive-projects-header__title {
    margin: 0 auto var(--spacing-sm);
    max-width: 900px;
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    text-wrap: balance;
}

.archive-projects-header__description {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .85);
    font-size: var(--fs-lead);
}

/* Grid */
.archive-projects {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg-light);
}

.archive-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    text-align: left;
}

.archive-projects__empty {
    margin: 0;
    text-align: center;
    color: var(--color-muted);
}

/* Type filter pills above the grid. The count sits in a small chip. */
.archive-projects__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-xl);
}

.archive-projects__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.archive-projects__filter:hover,
.archive-projects__filter:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.archive-projects__filter.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.archive-projects__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--color-bg-light);
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1;
}

.archive-projects__filter.is-active .archive-projects__filter-count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* Pagination, same pills as the services grid */
.archive-projects__pagination {
    margin-top: var(--spacing-xl);
}

.archive-projects__pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.archive-projects__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.archive-projects__pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.archive-projects__pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.archive-projects__pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Booking band */
.archive-projects-cta {
    padding-block: var(--spacing-2xl);
    background: #162a35;
    color: #fff;
    text-align: center;
}

.archive-projects-cta__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-wrap: balance;
}

.archive-projects-cta__text {
    max-width: 720px;
    margin: 0 auto var(--spacing-lg);
    color: rgba(255, 255, 255, .85);
    font-size: var(--fs-lead);
}

.archive-projects-cta__button {
    gap: var(--spacing-sm);
}

/* ==========================================================================
   SINGLE-PROJECT
   Header pieces reuse ARCHIVE-PROJECTS. Below it: photo left, story right,
   then the optional Before / After pair and the photo grid.
   ========================================================================== */
.single-project {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
}

.single-project__types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
    padding: 0;
    list-style: none;
}

.single-project__type {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.single-project__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--spacing-xs) 0 0;
    color: rgba(255, 255, 255, .85);
    font-size: var(--fs-lead);
}

/* Photo + story. The photo column sticks while the story scrolls, so a tall
   portrait shot stays in view next to the text it illustrates. */
.single-project__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--spacing-2xl);
    align-items: start;
}

.single-project__media {
    position: sticky;
    top: 110px;
    margin: 0;
}

.single-project__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 18px 36px rgba(22, 42, 53, .16);
}

.single-project__lead {
    margin: 0 0 var(--spacing-lg);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

.single-project__content {
    color: var(--color-text);
}

.single-project__content p {
    margin: 0 0 var(--spacing-md);
    font-size: var(--fs-body);
    line-height: 1.7;
}

.single-project__content p:last-child {
    margin-bottom: 0;
}

.single-project__content strong {
    font-weight: 700;
}

.single-project__content ul,
.single-project__content ol {
    margin: 0 0 var(--spacing-md);
    padding-left: 22px;
}

.single-project__content li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

/* "Work shown" note: the same check icon as who-we-serve on a light panel */
.single-project__work-shown {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-bg-light);
}

.single-project__work-shown-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.single-project__work-shown-label {
    display: block;
    margin-bottom: 2px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.single-project__work-shown-text {
    margin: 0;
    line-height: 1.6;
}

/* Location / type / service rows */
.single-project__meta {
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.single-project__meta-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--spacing-md);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.single-project__meta-label {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.single-project__meta-value {
    margin: 0;
    font-weight: 600;
}

.single-project__meta-value a {
    color: var(--color-primary);
    text-decoration: none;
}

.single-project__meta-value a:hover,
.single-project__meta-value a:focus-visible {
    text-decoration: underline;
}

.single-project__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.single-project__quote {
    gap: var(--spacing-sm);
}

.single-project__back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.single-project__back:hover,
.single-project__back:focus-visible {
    text-decoration: underline;
}

/* Section titles inside the project (Before and After, Project Photos) */
.single-project__section-title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.single-project__compare,
.single-project__gallery {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

/* Before / After: two equal frames, label pill in the corner of each */
.single-project__compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.single-project__compare-item {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-light);
}

.single-project__compare-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-project__compare-label {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    padding: 8px 18px;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.single-project__compare-label--before {
    background: #162a35;
}

.single-project__compare-label--after {
    background: var(--color-primary);
}

/* Photo grid: three portrait frames per row, photos cropped to fit */
.single-project__gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.single-project__gallery-item {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-light);
}

.single-project__gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.single-project__gallery-item:hover .single-project__gallery-image {
    transform: scale(1.04);
}

.single-project-more {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg-light);
}

.single-project-more__title {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* ==========================================================================
   BLOCK-PAGE-TEXT
   Plain rich text for word-only pages (Privacy Policy, Terms, About). Held to a
   readable column rather than the full container width.
   ========================================================================== */
.block-page-text {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
}

.block-page-text__title {
    max-width: 760px;
    margin: 0 auto var(--spacing-lg);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.block-page-text__content {
    max-width: 760px;
    margin: 0 auto;
    color: var(--color-text);
}

.block-page-text__content > *:first-child {
    margin-top: 0;
}

.block-page-text__content > *:last-child {
    margin-bottom: 0;
}

.block-page-text__content h2 {
    margin: var(--spacing-xl) 0 var(--spacing-sm);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

.block-page-text__content h3 {
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.block-page-text__content p {
    margin: 0 0 var(--spacing-md);
    line-height: 1.7;
}

.block-page-text__content ul,
.block-page-text__content ol {
    margin: 0 0 var(--spacing-md);
    padding-left: 22px;
}

.block-page-text__content li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
}

.block-page-text__content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.block-page-text__content strong {
    font-weight: 700;
}

/* A closing note, the last-updated line and similar asides */
.block-page-text__content hr {
    height: 1px;
    margin: var(--spacing-xl) 0;
    border: 0;
    background: var(--color-border);
}

/* ==========================================================================
   BLOG
   Index cards (home.php) and the single post (single.php). The header and the
   quote band reuse ARCHIVE-PROJECTS, the text column reuses BLOCK-PAGE-TEXT.
   ========================================================================== */
.blog-index {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg-light);
}

.blog-index__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    text-align: left;
}

.blog-card {
    display: flex;
    color: inherit;
    text-decoration: none;
}

.blog-card__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.blog-card:hover .blog-card__inner,
.blog-card:focus-visible .blog-card__inner {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(22, 42, 53, .16);
}

.blog-card__media {
    aspect-ratio: 16 / 10;
    background: var(--color-bg-light);
    overflow: hidden;
}

.blog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
}

.blog-card__date {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blog-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.blog-card__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

.blog-card__more {
    margin-top: auto;
    padding-top: var(--spacing-sm);
    color: var(--color-primary);
    font-weight: 600;
}

.single-post {
    padding-block: var(--spacing-2xl);
    background: var(--color-bg);
}

.single-post__media {
    max-width: 960px;
    margin: 0 auto var(--spacing-xl);
}

.single-post__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--radius);
}

.single-post .single-project__back {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}