/**
 * Header, navigation, footer, buttons, breadcrumbs.
 * Mobile-first: base rules target small screens, desktop nav takes over
 * at the 960px breakpoint.
 */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.btn--accent:hover {
    background: var(--color-accent-dark);
    color: #fff;
}

.btn--outline {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
}

.btn--outline:hover {
    background: var(--color-ink);
    color: #fff;
}

.btn--whatsapp {
    background: #25d366;
    color: #fff;
}

.btn--whatsapp:hover {
    background: #1ebc59;
    color: #fff;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--space-4);
}

/* ---------- Brand lockup (logo + wordmark + tagline) ---------- */
/* Shared by the header and footer (see partials/brand-lockup.php) so the
   two never drift apart visually. */

.brand-lockup {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    min-width: 0;
    flex-shrink: 0;
}

.brand-lockup__logo {
    flex-shrink: 0;
    width: clamp(40px, 7vw, 54px);
    height: clamp(40px, 7vw, 54px);
    object-fit: contain;
}

/* Column of two rows (wordmark, tagline) — align-items:stretch (the flex
   default) makes the tagline row match the wordmark's own rendered
   width, so its flanking lines size themselves to the wordmark rather
   than to the full header; justify-content:center on the wordmark below
   then centers it within that shared width, so the two rows line up on
   a common center line rather than the wordmark hugging the left edge. */
.brand-lockup__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.brand-lockup__name {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.35em;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.55rem);
    line-height: 1.1;
    white-space: nowrap;
}

/* Dark-glass treatment: a subtle gradient sheen (not a flat fill) on
   each half of the wordmark. */
.brand-lockup__word {
    background: linear-gradient(160deg, var(--word-a) 0%, var(--word-b) 55%, var(--word-a) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-lockup__word--ink {
    --word-a: var(--color-ink);
    --word-b: var(--color-ink-soft);
}

.brand-lockup__word--accent {
    --word-a: var(--color-brand-sky);
    --word-b: var(--color-brand-sky-light);
}

.brand-lockup__tagline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(0.5rem, 0.44rem + 0.3vw, 0.66rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    white-space: nowrap;
}

.brand-lockup__line {
    flex: 1 1 auto;
    min-width: 6px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

/* Dark-background variant (footer): swap "Secure"'s ink gradient and the
   tagline for light tones so they stay legible over the footer's dark
   navy background — the accent word's sky-blue already reads fine on
   both, so it's untouched here. */
.brand-lockup--dark .brand-lockup__word--ink {
    --word-a: #ffffff;
    --word-b: rgba(255, 255, 255, 0.82);
}

.brand-lockup--dark .brand-lockup__tagline {
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- Nav toggle (mobile hamburger) ---------- */

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
}

.nav-toggle__bar {
    width: 22px;
    height: 2px;
    background: var(--color-ink);
}

/* ---------- Primary nav (mobile: full-screen panel) ---------- */

.primary-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--color-surface);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: var(--z-header);
}

.primary-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.primary-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.primary-nav__list > li:not(.primary-nav__cta) > a,
.mega-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-2);
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
}

/* Leading icon before each mobile menu item — hidden again at the
   desktop breakpoint below, so the desktop bar reads exactly as before. */
.primary-nav__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.primary-nav__list > li:not(.primary-nav__cta) > a:hover,
.mega-trigger:hover {
    background: var(--color-surface-muted);
}

.primary-nav__cta {
    margin-top: var(--space-3);
}

.primary-nav__cta .btn {
    width: 100%;
}

/* ---------- Mega menu ---------- */

.has-mega {
    position: relative;
}

.mega-menu {
    display: none;
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
}

.mega-menu.is-open {
    display: block;
}

.mega-menu__group {
    margin-bottom: var(--space-4);
}

.mega-menu__heading {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.mega-menu__group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu__group a {
    display: block;
    padding: var(--space-1) 0;
    color: var(--color-text);
    text-decoration: none;
}

.mega-menu__group a:hover {
    color: var(--color-accent-dark);
}

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

.site-footer {
    background: var(--color-ink);
    color: #fff;
    padding-block: var(--space-8) var(--space-6);
}

.site-footer a {
    color: #d9e2ec;
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer__inner {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

.site-footer__brand .brand-lockup {
    margin-bottom: var(--space-4);
}

.site-footer__brand p {
    color: #c3cdd6;
}

.site-footer__tagline {
    margin-bottom: var(--space-4);
}

.site-footer__rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: var(--space-4);
}

.site-footer__stars {
    color: var(--color-accent);
    letter-spacing: 0.08em;
}

.site-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: #c3cdd6;
}

.site-footer__contact .icon {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.site-footer__contact strong {
    color: #fff;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.site-footer__heading {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: #fff;
}

.site-footer__group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    font-size: 0.85rem;
    color: #b7c3cf;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
    padding-block: var(--space-4);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    color: var(--color-border);
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-accent-dark);
}

.breadcrumbs--dark ol {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumbs--dark li:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.3);
}

.breadcrumbs--dark a {
    color: rgba(255, 255, 255, 0.75);
}

.breadcrumbs--dark a:hover {
    color: #fff;
}

.breadcrumbs--dark [aria-current="page"] {
    color: #fff;
}

/* ---------- Desktop breakpoint ---------- */

@media (min-width: 960px) {
    .nav-toggle {
        display: none;
    }

    .primary-nav {
        position: static;
        inset: auto;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        background: transparent;
        overflow: visible;
    }

    .primary-nav__list {
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: var(--space-5);
    }

    .primary-nav__cta {
        margin-top: 0;
        margin-left: var(--space-2);
    }

    .primary-nav__cta .btn {
        width: auto;
    }

    /* Icons and the WhatsApp CTA are a mobile-menu-only enhancement —
       the desktop bar keeps its original text-only links + single CTA. */
    .primary-nav__icon {
        display: none;
    }

    .primary-nav__cta--whatsapp {
        display: none;
    }

    .mega-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: var(--space-5);
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        gap: var(--space-5);
        z-index: var(--z-mega);
        min-width: 720px;
    }

    .has-mega:hover .mega-menu,
    .has-mega:focus-within .mega-menu,
    .mega-menu.is-open {
        display: grid;
    }
}

@media (min-width: 720px) {
    .site-footer__inner {
        grid-template-columns: 1fr 2fr;
    }

    .site-footer__links {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer__group {
        flex: 1 1 160px;
    }
}

/* ---------- CTA block ---------- */
/* Dark parallax band reusing the hero's scrim/grid-pattern language.
   Fixed attachment dropped below 768px, same reasoning as .trust-band. */

.cta-block {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-ink) 0%, #16324f 100%);
    background-attachment: fixed;
    padding-block: var(--space-8);
    color: #fff;
}

/* When $bgImage is supplied, the section's flat gradient becomes a photo
   (applied lazily by assets/js/lazy-bg.js) with a dark scrim on top so
   text and buttons stay legible over any photo. */
.cta-block--photo {
    background-size: cover;
    background-position: center;
}

.cta-block__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.92) 0%, rgba(22, 50, 79, 0.88) 100%);
}

.cta-block__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.cta-block__copy {
    max-width: 640px;
    margin-inline: auto;
}

.cta-block__copy h2 {
    color: #fff;
    margin-bottom: var(--space-2);
}

.cta-block__copy p {
    color: rgba(255, 255, 255, 0.78);
}

.cta-block__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .cta-block {
        background-attachment: scroll;
    }
}

/* ---------- Service cards ---------- */

.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
}

/* Same dark glassy gradient card treatment as .value-props__item /
   .process-steps__card, reused here so "Related Services" cards match
   the rest of the site's card language instead of a plain light box. */
.service-card {
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.94) 0%, rgba(28, 51, 80, 0.88) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 8px 28px rgba(11, 31, 51, 0.18);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(11, 31, 51, 0.28);
}

.service-card h3 {
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
}

.service-card h3 a {
    color: #fff;
    text-decoration: none;
}

.service-card h3 a:hover {
    color: var(--color-accent);
}

.service-card p {
    color: rgba(255, 255, 255, 0.72);
}

.service-card__link {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Service area ---------- */

.service-area {
    padding-block: var(--space-6);
}

/* Responsive area grid: 2 cols mobile -> 3 tablet -> 4 desktop -> 5 large
   desktop. A real grid (not flex-wrap chips) so areas align into clean,
   scannable rows at every size. */
.service-area__list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

/* Same dark glassy gradient used by .value-props__item / .service-card,
   reused here so coverage-area chips match the rest of the site's card
   language instead of a plain light box. */
.service-area__list li {
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.94) 0%, rgba(28, 51, 80, 0.88) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

@media (min-width: 600px) {
    .service-area__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 960px) {
    .service-area__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1440px) {
    .service-area__list {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* "Don't see your area?" CTA card — a highlighted conversion element, not
   an alert/warning: same surface-muted card language as the rest of the
   design system, with a single accent-colored edge rather than alert
   colors. */
.area-cta {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.area-cta__content h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
}

.area-cta__content p {
    margin: 0;
    color: var(--color-text-muted);
}

.area-cta__btn {
    align-self: flex-start;
    white-space: nowrap;
}

@media (min-width: 720px) {
    .area-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
    }

    .area-cta__btn {
        align-self: center;
        flex-shrink: 0;
    }
}

/* ---------- FAQ accordion ---------- */

.faq-accordion {
    padding-block: var(--space-6);
}

.faq-accordion__item {
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-3);
}

.faq-accordion__item summary {
    font-weight: 700;
    cursor: pointer;
    color: var(--color-ink);
}

.faq-accordion__item p {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

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

.testimonials {
    padding-block: var(--space-7);
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

.testimonials__card {
    margin: 0;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.testimonials__card blockquote {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.6;
}

.testimonials__card figcaption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.88rem;
}

.testimonials__card figcaption strong {
    color: var(--color-ink);
}

.testimonials__card figcaption span {
    color: var(--color-text-muted);
}

/* ---------- Gallery ---------- */

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.gallery-filter__btn {
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    font-weight: 600;
}

.gallery-filter__btn.is-active {
    background: var(--color-ink);
    color: #fff;
    border-color: var(--color-ink);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}

.gallery-grid__item {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.gallery-grid__item[hidden] {
    display: none;
}

.gallery-grid__zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-muted);
    cursor: zoom-in;
}

.gallery-grid__zoom img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    display: block;
}

.gallery-grid__zoom-icon {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(11, 31, 51, 0.75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.gallery-grid__zoom:hover .gallery-grid__zoom-icon,
.gallery-grid__zoom:focus-visible .gallery-grid__zoom-icon {
    opacity: 1;
}

.gallery-grid__item figcaption {
    padding-top: var(--space-2);
    font-size: 0.85rem;
}

.gallery-grid__item figcaption a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.gallery-grid__item figcaption a:hover {
    color: var(--color-accent-dark);
}

/* ---------- Lightbox ---------- */

.lightbox {
    position: relative;
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(90vw, 900px);
    width: 100%;
}

.lightbox::backdrop {
    background: rgba(11, 31, 51, 0.85);
}

.lightbox__figure {
    margin: 0;
    background: var(--color-ink);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.lightbox__figure img {
    display: block;
    width: 100%;
    min-height: 240px;
    max-height: 80vh;
    object-fit: contain;
    background: var(--color-surface-muted);
}

.lightbox__figure figcaption {
    padding: var(--space-3) var(--space-4);
    color: #fff;
    font-size: 0.9rem;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: rgba(11, 31, 51, 0.75);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.lightbox__close {
    top: var(--space-3);
    right: var(--space-3);
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__nav--prev {
    left: var(--space-3);
}

.lightbox__nav--next {
    right: var(--space-3);
}

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

.form-field {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-field label {
    font-weight: 600;
    font-size: 0.9rem;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    width: 100%;
    background: var(--color-surface);
    color: var(--color-text);
}

.enquiry-form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.enquiry-form fieldset legend {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--space-2);
    padding: 0;
}

.enquiry-form fieldset label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-4);
    font-weight: 400;
}

.enquiry-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.enquiry-form__errors {
    background: #fdecea;
    border: 1px solid #f3b4ac;
    color: #8a2c22;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

.enquiry-form__errors ul {
    margin: 0;
    padding-left: var(--space-4);
}

/* ---------- Icons ---------- */

.icon {
    width: 24px;
    height: 24px;
}

.icon--sm {
    width: 18px;
    height: 18px;
}

/* ---------- Section rhythm ---------- */

.section-heading {
    max-width: 720px;
    margin-bottom: var(--space-6);
}

.section-heading p {
    color: var(--color-text-muted);
}

.section-link {
    margin-top: var(--space-5);
}

/* Shared eyebrow + H2 + lede header, used by every section built to this
   pattern (services showcase, why choose us, process, coverage areas,
   testimonials, FAQ) so the header markup/styling exists once. */
.section-header {
    max-width: 720px;
    margin: 0 auto var(--space-7);
    text-align: center;
}

.section-header__eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border-radius: 999px;
    background: rgba(224, 127, 16, 0.12);
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.section-header h2 {
    margin: 0 0 var(--space-3);
}

.section-header__lede {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin: 0 auto;
}

/* A plain paragraph directly following a section header (rather than
   passed as $lede, needed when the copy has real inline links that
   $lede's escaping would break) gets the same centered, readable-width
   treatment for visual consistency. */
.section-header + p {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: var(--color-text-muted);
}

.section-link a {
    font-weight: 700;
}

/* ---------- Chennai page category blocks ---------- */

.chennai-category {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.chennai-category:first-of-type {
    margin-top: var(--space-5);
    padding-top: 0;
    border-top: none;
}

.chennai-category h3 {
    font-size: 1.15rem;
    margin-bottom: var(--space-3);
}

.chennai-category > p {
    color: var(--color-text-muted);
}

/* Reuses .service-showcase__card's exact gradient+icon card styling (see
   partials/service-showcase-card.php) in a wrapped grid instead of the
   homepage's horizontal scroller — appropriate here since every service
   is already grouped and shown at once, with no need for category tabs. */
.chennai-category__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-4);
}

/* ---------- Scroll reveal ---------- */
/* Gated behind .js (set by an inline script in partials/head.php) so
   content stays visible by default with JavaScript disabled — only a
   confirmed-JS page hides it pending reveal.js adding .is-visible. */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    color: #fff;
    background: var(--color-ink);
    padding-block: var(--space-8) var(--space-9);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* One per service, all stacked in the same spot; the active slide's
   photo crossfades in via opacity (see assets/js/hero-carousel.js, which
   also lazy-loads each slide's photo the first time it becomes active). */
.hero__bg-slide {
    position: absolute;
    inset: 0;
    background-color: var(--color-ink);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 700ms ease;
}

.hero__bg-slide.is-active {
    opacity: 1;
}

/* Left-to-right scrim so text on the left stays legible while the photo
   remains visible toward the right edge. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(11, 31, 51, 0.93) 0%, rgba(11, 31, 51, 0.82) 45%, rgba(11, 31, 51, 0.5) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero__h1 {
    color: #fff;
    font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem);
    font-weight: 700;
    max-width: 640px;
    margin: 0 0 var(--space-2);
}

.hero__subhead {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    max-width: 55ch;
    margin: 0 0 var(--space-7);
}

.btn--on-dark.btn--outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.btn--on-dark.btn--outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-ink);
}

/* ---------- Hero service slides ---------- */
/* Full-bleed text directly over the video/scrim (no boxed card) — a
   bolder, gradient-and-glass-accented treatment scoped to this one
   component, distinct from the flatter cards used across the rest of
   the site. */

/* All 10 slides are stacked in the SAME grid cell, so the grid row's
   height is always the tallest slide's natural height — constant,
   regardless of which slide is currently active. This is deliberate: a
   min-height guess can't account for every slide's different text length
   at every viewport width, and being even slightly short causes the
   whole page below the hero to shift up/down as the carousel advances
   (real, measured layout shift — not just a cosmetic risk). Inactive
   slides use visibility:hidden (not display:none/[hidden]) so they still
   count toward that sizing, while still being correctly excluded from
   the accessibility tree and tab order. */
.hero-slides {
    display: grid;
}

.hero-slide {
    grid-area: 1 / 1;
    max-width: 640px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.hero-slide.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: heroSlideIn 500ms ease;
}

@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.hero-slide__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    color: #fff;
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.hero-slide__badge .icon {
    color: var(--color-accent);
}

.hero-slide__title {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
    line-height: 1.12;
    margin: 0 0 var(--space-2);
}

.hero-slide__subtitle {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    margin: 0 0 var(--space-4);
}

.hero-slide__desc {
    color: rgba(255, 255, 255, 0.85);
    max-width: 58ch;
    margin: 0 0 var(--space-5);
}

.hero-slide__keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
}

.hero-slide__keyword {
    padding: var(--space-1) var(--space-4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    font-weight: 600;
}

.hero-slide__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---------- Carousel chrome: arrows + dots ---------- */

.hero-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

.hero-carousel__arrow:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.hero-carousel__arrow--prev {
    left: var(--space-4);
}

.hero-carousel__arrow--next {
    right: var(--space-4);
}

/* Normal document flow (not absolutely positioned) — sits right below
   whichever slide is showing, so it can never overlap the CTA buttons
   above it regardless of how tall that slide's content is. */
.hero-carousel__dots {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.hero-carousel__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width var(--transition-fast), background var(--transition-fast);
}

.hero-carousel__dot[aria-selected="true"] {
    width: 28px;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(224, 127, 16, 0.25);
}

/* ---------- Bottom wave divider ---------- */

.hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}

.hero__wave svg {
    display: block;
    width: 100%;
    height: 60px;
}

.hero__wave-path {
    /* Matches .trust-band's own top color below, so the curve reads as a
       seamless join rather than a stray sliver of the page's white
       background between two dark sections. */
    fill: var(--color-ink);
}

@media (min-width: 720px) {
    .hero {
        min-height: 680px;
    }

    .hero__wave svg {
        height: 90px;
    }
}

@media (min-width: 960px) {
    .hero-carousel__arrow {
        display: flex;
    }
}

@media (min-width: 1440px) {
    .hero {
        min-height: 760px;
    }
}

/* ---------- Service page hero ---------- */
/* Each service's real photo (see data/service-images.php) as the
   background — set inline by templates/service.php since it's this
   page's LCP element (also preloaded via $preloadImage in head.php), so
   it loads eagerly rather than through the lazy-bg.js path used further
   down the page. The gradient below is just the fallback for the rare
   case a service has no photo mapped. */

.service-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-ink) 0%, #16324f 100%);
    background-size: cover;
    background-position: center;
    padding-block: var(--space-7) var(--space-8);
    color: #fff;
}

.service-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.92) 0%, rgba(22, 50, 79, 0.88) 100%);
}

.service-hero__inner {
    position: relative;
    z-index: 1;
}

.service-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: var(--space-5) 0 var(--space-4);
}

.service-hero__badge .icon {
    color: var(--color-accent);
}

.service-hero__badge span {
    color: #fff;
}

.service-hero__inner h1 {
    color: #fff;
    font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
    line-height: 1.15;
    max-width: 720px;
    margin: 0 0 var(--space-4);
}

.service-hero__intro {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    max-width: 62ch;
    margin: 0 0 var(--space-6);
}

.service-hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---------- Applications & materials panel (service pages) ---------- */
/* Two-column dark section: a checklist of real applications on the left,
   an optional materials panel (light glass card, same treatment as the
   hero slide keyword chips) on the right. Single column when a service
   has no 'materials' text. */

.applications-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-ink) 0%, #16324f 100%);
    padding-block: var(--space-8);
    color: #fff;
}

.applications-panel__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

.applications-panel__col .section-header {
    text-align: left;
    margin: 0 0 var(--space-5);
    max-width: none;
}

.applications-panel__col .section-header h2 {
    color: #fff;
}

.applications-panel__col .section-header__eyebrow {
    background: rgba(224, 127, 16, 0.18);
    color: var(--color-accent);
}

.applications-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.applications-panel__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.9);
}

.applications-panel__list .icon {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.applications-panel__panel {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
}

.applications-panel__panel h3 {
    color: #fff;
    margin-bottom: var(--space-3);
}

.applications-panel__panel p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

@media (min-width: 900px) {
    .applications-panel__grid {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }
}

/* ---------- SEO overview (service pages) ---------- */
/* Long-form Chennai-focused copy block, narrower than the standard
   container for readability, eyebrow/heading/body all centered to match
   the "centered badge + title" treatment used across every section. */

.seo-overview {
    padding-block: var(--space-8);
}

.seo-overview__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.seo-overview__inner .section-header__eyebrow {
    margin-bottom: var(--space-4);
}

.seo-overview__inner h2 {
    margin-bottom: var(--space-4);
}

.seo-overview__inner h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.seo-overview__inner p {
    color: var(--color-text-muted);
}

.seo-overview__inner strong {
    color: var(--color-ink);
}

/* ---------- Recent projects slider (service pages) ---------- */

.recent-projects {
    padding-block: var(--space-8);
    background: var(--color-surface-muted);
}

.recent-projects__slider {
    max-width: 900px;
    margin: var(--space-6) auto 0;
}

.recent-projects__track {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-ink);
    box-shadow: var(--shadow-md);
}

.recent-projects__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 600ms ease;
}

.recent-projects__slide.is-active {
    opacity: 1;
}

.recent-projects__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-projects__slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(180deg, transparent 0%, rgba(11, 31, 51, 0.85) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.recent-projects__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.recent-projects__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width var(--transition-fast), background var(--transition-fast);
}

.recent-projects__dot[aria-selected="true"] {
    width: 28px;
    background: var(--color-accent);
}

/* ---------- Trust band (stat highlights) ---------- */
/* Gradient background with a fixed-attachment parallax effect — the
   background stays put in the viewport while the stat content scrolls
   normally over it. Fixed attachment is dropped below 768px: some mobile
   browsers repaint it poorly (jank) and iOS Safari has a long history of
   inconsistent support, so this is a progressive enhancement, not load-
   bearing — the section still reads correctly with a normal scrolling
   background on small screens. */

.trust-band {
    position: relative;
    background: linear-gradient(180deg, var(--color-ink) 0%, #16324f 55%, var(--color-ink) 100%);
    background-attachment: fixed;
    color: #fff;
}

.trust-band__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-4);
    padding-block: var(--space-8);
    text-align: center;
}

.trust-band__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.trust-band__value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    color: var(--color-accent);
    line-height: 1;
}

.trust-band__label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 0.92rem;
}

.trust-band__sub {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    margin-top: calc(var(--space-2) * -1);
}

.trust-band__stars {
    color: var(--color-accent);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    margin-top: calc(var(--space-2) * -1);
}

@media (min-width: 720px) {
    .trust-band__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .trust-band {
        background-attachment: scroll;
    }
}

/* ---------- Chennai intro (content section) ---------- */

.chennai-intro {
    background: var(--color-surface);
    padding-block: var(--space-8);
}

.chennai-intro__inner {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.chennai-intro__inner h2 {
    margin-bottom: var(--space-5);
}

.chennai-intro__inner p {
    max-width: none;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.chennai-intro__inner strong {
    color: var(--color-ink);
    font-weight: 700;
}

.chennai-intro__inner .section-link {
    text-align: center;
}

/* ---------- Before/after: single widget (default homepage case) ---------- */
/* Full width within the page's normal container padding on mobile;
   contained and centered on larger screens rather than stretching edge
   to edge. */

.ba-single {
    max-width: 640px;
    margin-inline: auto;
}

.ba-single .ba-slide {
    flex: none;
    width: 100%;
}

/* ---------- Before/after: carousel (fallback for 2+ pairs) ---------- */

.ba-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: var(--space-5);
    padding-bottom: var(--space-2);
}

.ba-slide {
    flex: 0 0 min(420px, 85vw);
    scroll-snap-align: start;
}

.ba {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    touch-action: pan-y;
    cursor: ew-resize;
    background: var(--color-surface-muted);
    user-select: none;
    border: 1px solid var(--color-border);
}

.ba__after,
.ba__before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.ba__before {
    clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

.ba__label {
    position: absolute;
    top: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: rgba(11, 31, 51, 0.75);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.ba__label--before {
    left: var(--space-3);
}

.ba__label--after {
    right: var(--space-3);
}

.ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    width: 0;
    pointer-events: none;
}

.ba__handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
}

.ba__handle-grip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
}

.ba-slide__caption {
    margin-top: var(--space-3);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.ba-note {
    margin-top: var(--space-5);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ---------- Value props ---------- */
/* Premium "frosted glass" card treatment: a soft gradient wash behind the
   section gives the semi-transparent, blurred cards something worth
   blurring, so the effect actually reads instead of just looking like a
   plain white box. Shared by every page that uses this component (both
   homepage instances + the Chennai page), so the enhancement is
   consistent everywhere at once rather than needing to be duplicated. */

.value-props {
    position: relative;
    padding-block: var(--space-7);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);
}

.value-props__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

/* Dark glassy gradient card — deliberately darker than the section's own
   light background, so it reads as an elevated, premium surface (the same
   navy the hero/CTA bands already use, just as a translucent card rather
   than a full section). */
.value-props__item {
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.94) 0%, rgba(28, 51, 80, 0.88) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(11, 31, 51, 0.18);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.value-props__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(11, 31, 51, 0.28);
}

.value-props__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: #fff;
    box-shadow: 0 6px 16px rgba(224, 127, 16, 0.3);
    margin-bottom: var(--space-4);
}

/* Alternating icon treatment: odd cards keep the accent gradient above,
   even cards switch to a frosted glass badge (same language as the hero
   slide badges) — navy-on-navy would disappear against the dark card, so
   this reuses the light-glass alternative instead of a flat navy repeat. */
.value-props__item:nth-child(even) .value-props__icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: none;
    color: #fff;
}

.value-props__item h3 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.value-props__item p {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0;
}

/* ---------- Services showcase (homepage) ---------- */

.service-showcase {
    padding-block: var(--space-8);
}

/* Category filter tabs */
.service-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.service-tabs__btn {
    padding: var(--space-2) var(--space-5);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.service-tabs__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

.service-tabs__btn.is-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}

/* Horizontal scroller */
.service-scroller {
    position: relative;
}

.service-scroller__track {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--space-2);
    padding-block: var(--space-2) var(--space-4);
    margin: 0 calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
    scrollbar-width: thin;
}

.service-scroller__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.service-scroller__nav:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.service-scroller__nav--prev {
    left: 0;
}

.service-scroller__nav--next {
    right: 0;
}

@media (min-width: 1180px) {
    .service-scroller__nav {
        display: flex;
    }
}

.service-showcase__card {
    flex: 0 0 270px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.service-showcase__card[hidden] {
    display: none;
}

.service-showcase__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(224, 127, 16, 0.4);
}

/* Real photo cover (see data/service-images.php) with a bottom scrim so
   the category badge stays legible over any photo, plus a subtle
   hover-zoom on the image itself. */
.service-showcase__cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.service-showcase__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.service-showcase__card:hover .service-showcase__cover img {
    transform: scale(1.08);
}

.service-showcase__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 31, 51, 0) 55%, rgba(11, 31, 51, 0.5) 100%);
}

.service-showcase__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(224, 127, 16, 0.35);
    transition: transform var(--transition-base);
}

.service-showcase__badge .icon {
    width: 20px;
    height: 20px;
}

.service-showcase__card:hover .service-showcase__badge {
    transform: scale(1.08);
}

.service-showcase__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5);
}

.service-showcase__category {
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.service-showcase__body h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
}

.service-showcase__body > p {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin-bottom: var(--space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-showcase__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.service-showcase__features li {
    position: relative;
    padding-left: var(--space-4);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.service-showcase__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.service-showcase__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: 0.92rem;
}

.service-showcase__link .icon {
    transition: transform var(--transition-fast);
}

.service-showcase__card:hover .service-showcase__link .icon {
    transform: translateX(3px);
}

/* ---------- Process steps ---------- */
/* Numbered circles connected by a line (via ::before on the list),
   each step's heading/text sitting in the same dark glass card used by
   .value-props__item — same background gradient, so the two sections
   read as one consistent "glass card" language. */

.process-steps {
    padding-block: var(--space-7);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);
}

.process-steps__list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
}

.process-steps__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
    text-align: left;
}

.process-steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 8px 20px rgba(224, 127, 16, 0.35);
}

.process-steps__card {
    flex: 1;
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.94) 0%, rgba(28, 51, 80, 0.88) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(11, 31, 51, 0.16);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.process-steps__item:hover .process-steps__card {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(11, 31, 51, 0.26);
}

.process-steps__card h3 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: var(--space-2);
}

.process-steps__card p {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0;
    font-size: 0.92rem;
}

/* Connecting line: vertical on mobile (runs through the number circles'
   center, left-aligned), horizontal on desktop where steps sit in a row. */
.process-steps__list::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--color-border);
}

@media (min-width: 900px) {
    .process-steps__list {
        display: grid;
        grid-template-columns: repeat(var(--step-count, 6), 1fr);
        gap: var(--space-4);
    }

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

    .process-steps__list::before {
        left: calc(100% / var(--step-count, 6) / 2);
        right: calc(100% / var(--step-count, 6) / 2);
        top: 24px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--color-border), var(--color-accent), var(--color-border));
    }
}

/* ---------- Status banner (form feedback) ---------- */

.status-banner {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-weight: 600;
}

.status-banner--success {
    background: #e8f5ec;
    color: #1f7a4d;
    border: 1px solid #b9e0c6;
}

.status-banner--error {
    background: #fdecea;
    color: #8a2c22;
    border: 1px solid #f3b4ac;
}

.status-banner a {
    color: inherit;
}

/* ---------- Contact layout ---------- */
/* Same dark glassy gradient card used for value-props/process-steps/
   service-card elsewhere on the site, applied to both the form and the
   "reach us directly" aside so the two read as one deliberate pair. */

.contact-layout {
    display: grid;
    gap: var(--space-6);
}

.contact-form-card,
.contact-layout__aside {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(11, 31, 51, 0.94) 0%, rgba(28, 51, 80, 0.88) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 28px rgba(11, 31, 51, 0.18);
    color: #fff;
}

.contact-form-card h2,
.contact-layout__aside h2 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: var(--space-2);
}

.contact-form-card > p,
.contact-layout__aside > p {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: var(--space-5);
}

.contact-layout__aside {
    align-self: start;
    display: flex;
    flex-direction: column;
}

.contact-layout__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: auto;
}

.contact-layout__actions .btn {
    width: 100%;
}

/* Form fields need light-on-dark treatment inside the card — the base
   .form-field rules stay light-surface (in case the form is ever reused
   somewhere without the dark card), these just override for this context. */
.contact-form-card .form-field label {
    color: rgba(255, 255, 255, 0.85);
}

.contact-form-card .form-field input[type="text"],
.contact-form-card .form-field input[type="tel"],
.contact-form-card .form-field select,
.contact-form-card .form-field textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.contact-form-card .form-field input::placeholder,
.contact-form-card .form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contact-form-card .form-field select option {
    color: var(--color-text);
    background: var(--color-surface);
}

.contact-form-card .enquiry-form fieldset legend,
.contact-form-card .enquiry-form fieldset label {
    color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 860px) {
    .contact-layout {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}

/* ---------- Large desktop ---------- */

@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }
}