/* =========================================================
   eGateweb — Page Section Design System
   ---------------------------------------------------------
   Every colour, radius and size here comes from a CSS custom
   property emitted by inc/theme-colors.php, which reads
   Customizer → Theme Colors + Site Identity → Primary Color.

   NEVER hard-code a colour in this file.
   ========================================================= */

/* ---------------------------------------------------------
   1. Page canvas — the square grid background
--------------------------------------------------------- */
body.cg-gridbg {
    background-color: var(--cg-bg);
}

/* The squares */
body.cg-gridbg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--cg-bg);
    background-image:
        linear-gradient(to right, var(--cg-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cg-grid-line) 1px, transparent 1px);
    background-size: var(--cg-grid-size) var(--cg-grid-size);
}

/* Soft colour wash floating over the squares */
body.cg-gridbg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 10% 4%, rgba(var(--cg-primary-rgb), .13), transparent 70%),
        radial-gradient(46% 36% at 92% 16%, rgba(var(--cg-accent-rgb), .09), transparent 72%),
        radial-gradient(66% 44% at 48% 102%, rgba(var(--cg-primary-rgb), .10), transparent 72%);
}

/* Reusable grid layer for heroes, boxes and bands */
.cg-grid-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--cg-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cg-grid-line) 1px, transparent 1px);
    background-size: var(--cg-grid-size) var(--cg-grid-size);
}

.cg-grid-layer--soft {
    opacity: .55;
}

.cg-grid-layer--dark {
    --cg-grid-line: rgba(255, 255, 255, .07);
}

/* ---------------------------------------------------------
   2. Layout — one container, matching the header exactly
--------------------------------------------------------- */

/* Undo the narrow article container from content.css */
#primary.cg-main,
.cg-main {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
}

.cg-container {
    width: 100%;
    max-width: var(--cg-container, 1400px);
    margin-inline: auto;
    padding-inline: 20px;
}

.cg-section {
    position: relative;
    padding-block: clamp(56px, 7vw, 96px);
}

/* Every second section gets a translucent tint so the grid still shows */
.cg-section--alt {
    background: rgba(var(--cg-bg-alt-rgb), .78);
    border-block: 1px solid rgba(var(--cg-primary-rgb), .10);
}

.cg-section__actions {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/*
 * Tight rhythm. For blocks that belong together and must read as ONE band --
 * consecutive price groups on the menu page, for example. Using the full
 * section rhythm between them makes a single price list look like three
 * unrelated sections.
 */
.cg-section--tight {
    padding-block: clamp(30px, 3.4vw, 50px);
}

/* ---------------------------------------------------------
   3. Typography primitives
--------------------------------------------------------- */
.cg-head {
    max-width: 760px;
    margin-bottom: clamp(36px, 4vw, 56px);
}

.cg-head--center {
    margin-inline: auto;
    text-align: center;
}

.cg-head--left {
    max-width: 640px;
    margin-bottom: 28px;
}

.cg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    background: rgba(var(--cg-primary-rgb), .09);
    border: 1px solid rgba(var(--cg-primary-rgb), .20);
    color: var(--cg-primary-on-surface);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.cg-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cg-primary);
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .18);
    flex-shrink: 0;
}

.cg-eyebrow--light {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.cg-title {
    margin: 0 0 18px;
    color: var(--cg-heading);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.5px;
}

.cg-lead {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.75;
}

/* Small check bullet, shared by every list */
.cg-tick {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(var(--cg-primary-rgb), .12);
    color: var(--cg-primary-on-surface);
}

/* Inline text link with arrow */
.cg-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--cg-primary-on-surface);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: gap .28s ease, color .28s ease;
}

.cg-textlink:hover {
    gap: 13px;
    color: var(--cg-primary-on-surface-strong);
}

/* Location / keyword chip */
.cg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(var(--cg-bg-rgb), .72);
    border: 1px solid var(--cg-border);
    color: var(--cg-heading);
    font-size: 14px;
    font-weight: 500;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, background .28s ease, color .28s ease;
}

.cg-chip__icon {
    display: inline-flex;
    color: var(--cg-primary);
    transition: color .28s ease;
}

.cg-chip:hover {
    transform: translateY(-3px);
    background: rgba(var(--cg-primary-rgb), .10);
    border-color: rgba(var(--cg-primary-rgb), .40);
    color: var(--cg-primary-on-surface-strong);
}

/* ---------------------------------------------------------
   4. Buttons — gradient + sheen sweep
--------------------------------------------------------- */
.cg-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: calc(var(--cg-radius) * .66);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .32s cubic-bezier(.22, 1, .36, 1),
        box-shadow .32s ease,
        background .32s ease,
        border-color .32s ease,
        color .32s ease;
}

/* Sheen */
.cg-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}

.cg-btn:hover::after,
.cg-btn:focus-visible::after {
    transform: translateX(130%);
}

.cg-btn__icon {
    display: inline-flex;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.cg-btn:hover .cg-btn__icon {
    transform: translateX(5px);
}

.cg-btn:hover,
.cg-btn:focus-visible {
    transform: translateY(-3px);
}

/* Primary — the gradient button */
.cg-btn--primary {
    color: var(--cg-btn-text);
    background: linear-gradient(135deg, var(--cg-btn-from) 0%, var(--cg-btn-to) 100%);
    box-shadow: 0 10px 26px rgba(var(--cg-primary-rgb), .32);
}

.cg-btn--primary:hover,
.cg-btn--primary:focus-visible {
    color: var(--cg-btn-text);
    box-shadow: 0 18px 36px rgba(var(--cg-primary-rgb), .42);
}

/* Ghost — outlined, fills with the gradient on hover */
.cg-btn--ghost {
    color: var(--cg-primary-on-surface-strong);
    background: rgba(var(--cg-bg-rgb), .6);
    border-color: rgba(var(--cg-primary-rgb), .38);
}

.cg-btn--ghost:hover,
.cg-btn--ghost:focus-visible {
    color: var(--cg-btn-text);
    background: linear-gradient(135deg, var(--cg-btn-from) 0%, var(--cg-btn-to) 100%);
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(var(--cg-primary-rgb), .32);
}

/* Outline — secondary action on a dark band */
.cg-btn--outline {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .38);
}

.cg-btn--outline:hover,
.cg-btn--outline:focus-visible {
    color: var(--cg-heading);
    background: #fff;
    border-color: #fff;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

/* Light — for use on the dark band */
.cg-btn--light {
    color: var(--cg-heading);
    background: #fff;
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.cg-btn--light:hover,
.cg-btn--light:focus-visible {
    color: var(--cg-primary-on-surface-strong);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .26);
}

/* ---------------------------------------------------------
   5. Card — one card style for the whole site
--------------------------------------------------------- */
.cg-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 26px 28px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-bg-rgb), .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    list-style: none;
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        box-shadow .38s ease,
        border-color .38s ease,
        background .38s ease;
}

/* Accent bar that grows along the top edge on hover */
.cg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--cg-btn-from), var(--cg-btn-to));
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

.cg-card:hover,
.cg-card:focus-within {
    transform: translateY(-7px);
    background: rgba(var(--cg-bg-rgb), .95);
    border-color: rgba(var(--cg-primary-rgb), .40);
    box-shadow: 0 20px 44px rgba(var(--cg-shadow-rgb), .11);
}

.cg-card:hover::before,
.cg-card:focus-within::before {
    width: 100%;
}

.cg-card__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--cg-radius) * .6);
    background: var(--cg-primary-soft);
    color: var(--cg-primary-on-surface);
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        background .38s ease,
        color .38s ease,
        box-shadow .38s ease;
}

.cg-card:hover .cg-card__icon,
.cg-card:focus-within .cg-card__icon {
    transform: rotate(-6deg) scale(1.06);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 10px 22px rgba(var(--cg-primary-rgb), .34);
}

.cg-card__title {
    margin: 0;
    color: var(--cg-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.cg-card__link {
    color: inherit;
    text-decoration: none;
}

/* Make the whole card clickable without nesting links */
.cg-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.cg-card:hover .cg-card__link {
    color: var(--cg-primary-on-surface);
}

.cg-card__text {
    margin: 0;
    color: var(--cg-text);
    font-size: 14.5px;
    line-height: 1.7;
}

.cg-card__more {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    color: var(--cg-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .38s ease, transform .38s ease;
}

.cg-card:hover .cg-card__more,
.cg-card:focus-within .cg-card__more {
    opacity: 1;
    transform: translateX(0);
}

/* ---------------------------------------------------------
   6. Hero
--------------------------------------------------------- */
.cg-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(60px, 7vw, 96px) clamp(72px, 8vw, 118px);
}

.cg-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Glass photos are naturally low-contrast; a light lift keeps them crisp
       instead of relying on a heavy white veil to create separation. */
    filter: saturate(1.16) contrast(1.07);
}

/*
 * The photo is NOT covered by a white sheet any more.
 *
 * Readability comes from the frosted panel the copy sits on (.cg-hero__content
 * below) — literally a pane of glass, which is what the company sells. That
 * leaves the photograph sharp and fully visible across the whole hero.
 *
 * This layer only does three light jobs: take the harshest edge off the photo,
 * add a primary tint on the open side, and blend into the page below.
 */
.cg-hero__wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(var(--cg-bg-rgb), .26) 0%,
            rgba(var(--cg-bg-rgb), .10) 55%,
            rgba(var(--cg-primary-rgb), .20) 100%),
        linear-gradient(to top, var(--cg-bg) 0%, rgba(var(--cg-bg-rgb), 0) 26%);
}

/*
 * The square grid now sits ON the photo instead of on a white wash, so it needs
 * light lines to stay visible — it reads as an architectural overlay, which is
 * exactly the effect we want to keep. It fades out at the bottom where the hero
 * blends into the page, and the frosted panel covers it on the left.
 */
.cg-hero .cg-grid-layer {
    /*
     * Engraved grid: a light line with a dark one offset by 1px. A single-tone
     * grid disappears against a photo — white vanishes on bright glass, dark
     * vanishes in the shadows. The pair always leaves one edge visible.
     */
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .30) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .30) 1px, transparent 1px),
        linear-gradient(to right, rgba(var(--cg-grid-engrave-rgb), .13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--cg-grid-engrave-rgb), .13) 1px, transparent 1px);
    background-size: var(--cg-grid-size) var(--cg-grid-size);
    background-position: 0 0, 0 0, 1px 1px, 1px 1px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .8) 55%, transparent 94%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .8) 55%, transparent 94%);
}

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

/*
 * Frosted glass panel — the readability device for every hero.
 *
 * Shared by the home hero (.cg-hero__content) and the inner-page hero
 * (.cg-phero__panel) so both stay identical. --cg-hero-overlay (Customizer →
 * Text Veil Strength) sets how opaque the pane is: lower lets more of the photo
 * through, higher gives crisper text.
 */
.cg-hero__content,
.cg-phero__panel {
    position: relative;
    max-width: 760px;
    padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(24px, 2.6vw, 36px);
    border-radius: calc(var(--cg-radius) * 1.2);
    background: rgba(var(--cg-bg-rgb), var(--cg-hero-overlay, .62));
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        0 28px 70px rgba(var(--cg-shadow-rgb), .18),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Inner-page heroes carry a breadcrumb, so they run a little wider */
.cg-phero__panel {
    max-width: 820px;
}

/* A thin highlight along the top edge, the way light catches real glass */
.cg-hero__content::before,
.cg-phero__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    pointer-events: none;
}

.cg-hero__eyebrow {
    background: rgba(var(--cg-bg-rgb), .78);
    border-color: rgba(var(--cg-primary-rgb), .30);
}

.cg-hero__title {
    margin: 0 0 22px;
    color: var(--cg-heading);
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.4px;
}

.cg-hero__accent {
    display: block;
    background: linear-gradient(120deg, var(--cg-primary) 0%, var(--cg-primary-on-surface-strong) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cg-hero__text {
    margin: 0 0 32px;
    max-width: 620px;
    color: var(--cg-text);
    font-size: clamp(16px, 1.35vw, 18.5px);
    line-height: 1.75;
}

.cg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 38px;
}

.cg-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin: 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid rgba(var(--cg-primary-rgb), .22);
}

.cg-hero__badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cg-heading);
    font-size: 14px;
    font-weight: 500;
}

.cg-hero__badge-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(var(--cg-primary-rgb), .12);
    color: var(--cg-primary-on-surface);
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   7. USP strip
--------------------------------------------------------- */
.cg-usp {
    padding-block: 0;
    margin-top: -40px;
    z-index: 2;
}

.cg-usp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-bg-rgb), .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 46px rgba(var(--cg-shadow-rgb), .09);
    overflow: hidden;
}

.cg-usp__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 24px;
    border-right: 1px solid var(--cg-border);
    transition: background .32s ease;
}

.cg-usp__item:last-child {
    border-right: 0;
}

.cg-usp__item:hover {
    background: rgba(var(--cg-primary-rgb), .06);
}

.cg-usp__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--cg-primary-soft);
    color: var(--cg-primary-on-surface);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), background .34s ease, color .34s ease;
}

.cg-usp__item:hover .cg-usp__icon {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-usp__title {
    margin: 0 0 5px;
    color: var(--cg-heading);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
}

.cg-usp__text {
    margin: 0;
    color: var(--cg-text);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   8. Services grid
--------------------------------------------------------- */
.cg-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------
   9. Sectors
--------------------------------------------------------- */
.cg-sectors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}

.cg-sector {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-bg-rgb), .78);
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

.cg-sector:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--cg-primary-rgb), .40);
    box-shadow: 0 24px 50px rgba(var(--cg-shadow-rgb), .13);
}

.cg-sector__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cg-primary-soft);
}

.cg-sector__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.cg-sector:hover .cg-sector__img {
    transform: scale(1.07);
}

.cg-sector__img--empty {
    background:
        linear-gradient(135deg, rgba(var(--cg-primary-rgb), .18), rgba(var(--cg-primary-rgb), .05));
}

.cg-sector__icon {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 10px 24px rgba(var(--cg-primary-rgb), .38);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.cg-sector:hover .cg-sector__icon {
    transform: translateY(-4px) rotate(-6deg);
}

.cg-sector__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 28px;
}

.cg-sector__title {
    margin: 0;
    color: var(--cg-heading);
    font-size: 21px;
    font-weight: 700;
}

.cg-sector__text {
    margin: 0;
    color: var(--cg-text);
    font-size: 14.5px;
    line-height: 1.7;
}

.cg-sector__list {
    display: grid;
    gap: 9px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.cg-sector__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cg-heading);
    font-size: 14px;
}

/* ---------------------------------------------------------
   10. Process steps
--------------------------------------------------------- */
/* Explicit 3 columns: six steps make two even rows, never an orphan card */
.cg-process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cg-step;
}

.cg-step {
    position: relative;
    overflow: hidden;
    padding: 28px 24px 26px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-bg-rgb), .72);
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        border-color .38s ease,
        box-shadow .38s ease,
        background .38s ease;
}

.cg-step:hover {
    transform: translateY(-6px);
    background: rgba(var(--cg-bg-rgb), .96);
    border-color: rgba(var(--cg-primary-rgb), .40);
    box-shadow: 0 20px 40px rgba(var(--cg-shadow-rgb), .10);
}

.cg-step__num {
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(var(--cg-primary-rgb), .22);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    transition: color .38s ease, transform .38s ease;
}

.cg-step:hover .cg-step__num {
    color: rgba(var(--cg-primary-rgb), .42);
    transform: translateY(-2px);
}

.cg-step__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 15px;
    background: var(--cg-primary-soft);
    color: var(--cg-primary-on-surface);
    transition: background .38s ease, color .38s ease, transform .38s ease;
}

.cg-step:hover .cg-step__icon {
    transform: rotate(-6deg) scale(1.05);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-step__title {
    margin: 0 0 7px;
    color: var(--cg-heading);
    font-size: 17px;
    font-weight: 700;
}

.cg-step__text {
    margin: 0;
    color: var(--cg-text);
    font-size: 14px;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   11. Why us
--------------------------------------------------------- */
.cg-why__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.cg-why__media {
    position: relative;
}

.cg-why__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--cg-radius);
    box-shadow: 0 26px 60px rgba(var(--cg-shadow-rgb), .16);
}

.cg-why__img--empty {
    background: linear-gradient(135deg, rgba(var(--cg-primary-rgb), .20), rgba(var(--cg-primary-rgb), .06));
}

/* Floating guarantee stamp */
.cg-why__stamp {
    position: absolute;
    right: -14px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 20px;
    border-radius: calc(var(--cg-radius) * .8);
    background: rgba(var(--cg-bg-rgb), .95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--cg-primary-rgb), .24);
    box-shadow: 0 16px 36px rgba(var(--cg-shadow-rgb), .16);
}

.cg-why__stamp-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-why__stamp-text {
    color: var(--cg-heading);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 110px;
}

.cg-why__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 22px;
    margin: 8px 0 30px;
    padding: 0;
    list-style: none;
}

.cg-why__list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--cg-heading);
    font-size: 15px;
    font-weight: 500;
}

.cg-why__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Phone call-out next to the button */
.cg-callout {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px 11px 14px;
    border-radius: calc(var(--cg-radius) * .66);
    border: 1px dashed rgba(var(--cg-primary-rgb), .42);
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.cg-callout:hover {
    transform: translateY(-2px);
    background: rgba(var(--cg-primary-rgb), .08);
    border-color: var(--cg-primary);
}

.cg-callout__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(var(--cg-primary-rgb), .12);
    color: var(--cg-primary-on-surface);
}

.cg-callout__body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cg-callout__body small {
    color: var(--cg-muted);
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cg-callout__body strong {
    color: var(--cg-heading);
    font-size: 15.5px;
    font-weight: 700;
    direction: ltr;
}

/* ---------------------------------------------------------
   12. Projects gallery
--------------------------------------------------------- */
.cg-projects__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: 18px;
}

.cg-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--cg-radius);
    background: var(--cg-primary-soft);
    text-decoration: none;
    transition: box-shadow .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

/*
 * Editorial rhythm, driven by position instead of a fixed class per tile, so
 * the gallery works with any number of photos. The pattern repeats every six:
 * one 2x2 feature, one wide, two small, two wide.
 *
 * 4, 6 or 12 photos fill the grid most evenly.
 */
.cg-tile:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.cg-tile:nth-child(6n + 2),
.cg-tile:nth-child(6n + 5),
.cg-tile:nth-child(6n + 6) {
    grid-column: span 2;
}

/* Magnifier badge, shown only on lightbox-enabled tiles */
.cg-tile__zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--cg-heading);
    background: rgba(var(--cg-bg-rgb), .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-6px) scale(.9);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.cg-tile:hover .cg-tile__zoom,
.cg-tile:focus-visible .cg-tile__zoom {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cg-tile:focus-visible {
    outline: 3px solid var(--cg-primary);
    outline-offset: 3px;
}

.cg-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.cg-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(var(--cg-shadow-rgb), .78) 0%,
            rgba(var(--cg-shadow-rgb), .18) 45%,
            transparent 75%);
    opacity: .75;
    transition: opacity .4s ease;
}

.cg-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px rgba(var(--cg-shadow-rgb), .22);
}

.cg-tile:hover .cg-tile__img {
    transform: scale(1.08);
}

.cg-tile:hover::after {
    opacity: .92;
}

.cg-tile__caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 1;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    transform: translateY(4px);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.cg-tile:hover .cg-tile__caption {
    transform: translateY(0);
}

/* ---------------------------------------------------------
   13. Regions
--------------------------------------------------------- */
.cg-regions__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(30px, 4vw, 56px);
    align-items: center;
}

.cg-regions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.cg-regions__address {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 0;
    color: var(--cg-muted);
    font-size: 14.5px;
}

/* Highlight box — free measuring */
.cg-highlight {
    position: relative;
    overflow: hidden;
    padding: 34px 32px 36px;
    border-radius: var(--cg-radius);
    border: 1px solid rgba(var(--cg-primary-rgb), .26);
    background:
        linear-gradient(150deg, rgba(var(--cg-primary-rgb), .13) 0%, rgba(var(--cg-bg-rgb), .9) 55%);
    box-shadow: 0 20px 46px rgba(var(--cg-shadow-rgb), .09);
}

.cg-highlight > *:not(.cg-grid-layer) {
    position: relative;
    z-index: 1;
}

.cg-highlight__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: calc(var(--cg-radius) * .6);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 12px 26px rgba(var(--cg-primary-rgb), .34);
}

.cg-highlight__title {
    margin: 0 0 12px;
    color: var(--cg-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.cg-highlight__text {
    margin: 0 0 24px;
    color: var(--cg-text);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   14. Closing CTA
--------------------------------------------------------- */
.cg-cta__box {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 68px);
    border-radius: calc(var(--cg-radius) * 1.4);
    background: var(--cg-dark);
    box-shadow: 0 30px 70px rgba(var(--cg-dark-rgb), .30);
}

.cg-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .28;
}

.cg-cta__box::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 90% at 85% 15%, rgba(var(--cg-primary-rgb), .40), transparent 65%),
        linear-gradient(120deg, rgba(var(--cg-dark-rgb), .92) 20%, rgba(var(--cg-dark-rgb), .55) 100%);
}

.cg-cta__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.cg-cta__title {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.6px;
}

.cg-cta__text {
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.75;
}

.cg-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Give the primary action a brighter edge so it still leads on the dark band */
.cg-cta .cg-btn--primary {
    box-shadow:
        0 14px 34px rgba(var(--cg-primary-rgb), .50),
        inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.cg-cta .cg-btn--primary:hover,
.cg-cta .cg-btn--primary:focus-visible {
    box-shadow:
        0 20px 42px rgba(var(--cg-primary-rgb), .62),
        inset 0 0 0 1px rgba(255, 255, 255, .34);
}

.cg-cta__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.cg-cta__contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .82);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    direction: ltr;
    transition: color .28s ease, transform .28s ease;
}

.cg-cta__contact a:hover {
    color: #fff;
    transform: translateX(3px);
}

/* ---------------------------------------------------------
   15. Responsive
--------------------------------------------------------- */
@media (max-width: 1100px) {
    .cg-usp__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-usp__item:nth-child(2) {
        border-right: 0;
    }

    .cg-usp__item:nth-child(1),
    .cg-usp__item:nth-child(2) {
        border-bottom: 1px solid var(--cg-border);
    }

    .cg-why__inner,
    .cg-regions__inner {
        grid-template-columns: 1fr;
    }

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

    .cg-why__media {
        max-width: 520px;
    }

    .cg-why__img {
        aspect-ratio: 16 / 11;
    }

    .cg-projects__grid {
        grid-auto-rows: 170px;
    }
}

@media (max-width: 900px) {
    .cg-hero {
        padding-block: 54px 72px;
    }

    .cg-hero__wash {
        background:
            /* Portrait: the frosted panel still carries readability, so this is
               only a light top-down lift plus the blend into the page. */
            linear-gradient(180deg,
                rgba(var(--cg-primary-rgb), .14) 0%,
                rgba(var(--cg-bg-rgb), .10) 45%,
                rgba(var(--cg-bg-rgb), .92) 100%);
    }

    /* Panel spans the column on small screens */
    .cg-hero__content,
    .cg-phero__panel {
        max-width: none;
        border-radius: var(--cg-radius);
    }

    .cg-hero .cg-grid-layer {
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 90%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 90%);
    }

    .cg-usp {
        margin-top: -26px;
    }

    .cg-tile--1,
    .cg-tile--2,
    .cg-tile--5,
    .cg-tile--6 {
        grid-column: span 2;
    }

    .cg-tile--1 {
        grid-row: span 1;
    }

    .cg-projects__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .cg-why__stamp {
        right: 12px;
        bottom: 12px;
        padding: 11px 16px;
    }
}

@media (max-width: 620px) {
    .cg-container {
        padding-inline: 16px;
    }

    .cg-usp {
        margin-top: -18px;
    }

    .cg-usp__grid {
        grid-template-columns: 1fr;
    }

    .cg-usp__item {
        border-right: 0;
        border-bottom: 1px solid var(--cg-border);
    }

    .cg-usp__item:last-child {
        border-bottom: 0;
    }

    .cg-hero__actions .cg-btn,
    .cg-cta__actions .cg-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .cg-projects__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .cg-tile--1,
    .cg-tile--2,
    .cg-tile--3,
    .cg-tile--4,
    .cg-tile--5,
    .cg-tile--6 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .cg-process__grid {
        grid-template-columns: 1fr;
    }

    .cg-why__list {
        grid-template-columns: 1fr;
    }

    .cg-callout {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   16. RTL
--------------------------------------------------------- */
.rtl .cg-step__num {
    right: auto;
    left: 18px;
}

.rtl .cg-sector__icon {
    left: auto;
    right: 18px;
}

.rtl .cg-btn:hover .cg-btn__icon,
.rtl .cg-textlink:hover {
    transform: translateX(-5px);
}

.rtl .cg-why__stamp {
    right: auto;
    left: -14px;
}

/* ---------------------------------------------------------
   17. Motion preferences
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .cg-btn,
    .cg-btn::after,
    .cg-btn__icon,
    .cg-card,
    .cg-card::before,
    .cg-card__icon,
    .cg-card__more,
    .cg-chip,
    .cg-sector,
    .cg-sector__img,
    .cg-sector__icon,
    .cg-step,
    .cg-step__icon,
    .cg-step__num,
    .cg-tile,
    .cg-tile__img,
    .cg-tile__caption,
    .cg-callout,
    .cg-usp__icon,
    .cg-textlink {
        transition-duration: .01ms !important;
        transform: none !important;
    }
}

/* =========================================================
   18. Inner-page hero (.cg-phero)
   Shared by every page except the home page.
   ========================================================= */
.cg-phero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(44px, 5vw, 68px) clamp(52px, 6vw, 84px);
}

.cg-phero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Lift the photo instead of hiding it behind a veil */
    filter: saturate(1.16) contrast(1.07);
}

/* Same principle as the home hero: the pane carries readability, so this layer
   only takes the edge off the photo and blends into the page. */
.cg-phero__wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(var(--cg-bg-rgb), .26) 0%,
            rgba(var(--cg-bg-rgb), .10) 55%,
            rgba(var(--cg-primary-rgb), .20) 100%),
        linear-gradient(to top, var(--cg-bg) 0%, rgba(var(--cg-bg-rgb), 0) 30%);
}

/* Engraved grid so the square pattern survives over a photograph */
.cg-phero .cg-grid-layer {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .30) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .30) 1px, transparent 1px),
        linear-gradient(to right, rgba(var(--cg-grid-engrave-rgb), .13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--cg-grid-engrave-rgb), .13) 1px, transparent 1px);
    background-size: var(--cg-grid-size) var(--cg-grid-size);
    background-position: 0 0, 0 0, 1px 1px, 1px 1px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .8) 55%, transparent 94%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .8) 55%, transparent 94%);
}


/* Full container width so the panel lines up with the header edge — the panel
   itself carries the max-width. Do NOT put a max-width here: it centres the
   container and the hero stops aligning with the logo. */
.cg-phero__inner {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.cg-crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--cg-muted);
    font-size: 13.5px;
}

.cg-crumbs a {
    color: var(--cg-muted);
    text-decoration: none;
    transition: color .25s ease;
}

.cg-crumbs a:hover {
    color: var(--cg-primary-on-surface);
}

.cg-crumbs [aria-current] {
    color: var(--cg-heading);
    font-weight: 600;
}

.cg-phero__title {
    margin: 0 0 18px;
    color: var(--cg-heading);
    font-size: clamp(30px, 4.2vw, 50px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.1px;
}

.cg-phero__text {
    margin: 0 0 28px;
    max-width: 680px;
    color: var(--cg-text);
    font-size: clamp(15.5px, 1.25vw, 17.5px);
    line-height: 1.75;
}

.cg-phero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 32px;
}

.cg-phero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(var(--cg-primary-rgb), .22);
}

/* =========================================================
   19. Generic card grid (.cg-cards)
   ========================================================= */
.cg-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--cg-card-min, 280px), 100%), 1fr)); /* min(): a card minimum wider than the phone must not overflow it */
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bullet list inside a card */
.cg-card__list {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.cg-card__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cg-heading);
    font-size: 13.5px;
}

/* Compact variant: icon + title only, for long keyword lists */
.cg-cards--compact .cg-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.cg-cards--compact .cg-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.cg-cards--compact .cg-card__title {
    font-size: 15px;
    font-weight: 600;
}

/* =========================================================
   20. Split section (.cg-split) — image beside text
   ========================================================= */
.cg-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.cg-split--reverse .cg-split__media {
    order: 2;
}

.cg-split__media {
    position: relative;
}

.cg-split__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cg-radius);
    box-shadow: 0 26px 60px rgba(var(--cg-shadow-rgb), .16);
}

.cg-split__img--empty {
    background: linear-gradient(135deg, rgba(var(--cg-primary-rgb), .20), rgba(var(--cg-primary-rgb), .06));
}

/* Checklist column count is set per section */
.cg-why__list {
    grid-template-columns: repeat(var(--cg-list-cols, 2), minmax(0, 1fr));
}

/* Step grid column count is set per section */
.cg-process__grid {
    grid-template-columns: repeat(var(--cg-step-cols, 3), minmax(0, 1fr));
}

/* =========================================================
   21. Form section (.cg-formsec)
   ========================================================= */
.cg-formsec__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
    gap: clamp(26px, 3.5vw, 46px);
    align-items: start;
}

.cg-formsec__inner--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
    margin-inline: auto;
}

.cg-formsec__form {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-bg-rgb), .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 18px 44px rgba(var(--cg-shadow-rgb), .08);
}

/* --- Fields --- */
.cg-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cg-field--full {
    grid-column: 1 / -1;
}

.cg-field__label {
    display: block;
    margin-bottom: 7px;
    color: var(--cg-heading);
    font-size: 14px;
    font-weight: 600;
}

.cg-field__req {
    color: var(--cg-primary-on-surface);
}

.cg-form input[type="text"],
.cg-form input[type="email"],
.cg-form input[type="tel"],
.cg-form select,
.cg-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * .55);
    background: var(--cg-bg);
    color: var(--cg-heading);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.cg-form textarea {
    resize: vertical;
    min-height: 130px;
}

.cg-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cg-primary-on-surface) 50%),
        linear-gradient(135deg, var(--cg-primary-on-surface) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.cg-form input:focus,
.cg-form select:focus,
.cg-form textarea:focus {
    outline: none;
    border-color: var(--cg-primary);
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .14);
}

.cg-form input::placeholder,
.cg-form textarea::placeholder {
    color: var(--cg-muted);
}

/* --- Consent checkbox --- */
.cg-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: var(--cg-text);
    font-size: 14px;
    line-height: 1.6;
}

.cg-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cg-check__box {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cg-border);
    border-radius: 8px;
    background: var(--cg-bg);
    color: transparent;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.cg-check input:checked + .cg-check__box {
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    border-color: transparent;
    color: var(--cg-btn-text);
}

.cg-check input:focus-visible + .cg-check__box {
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .18);
}

/* --- Actions + notices --- */
.cg-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: 26px;
}

.cg-form__note {
    margin: 0;
    flex: 1 1 240px;
    color: var(--cg-muted);
    font-size: 13px;
    line-height: 1.6;
}

.cg-form__notice {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: calc(var(--cg-radius) * .7);
    border: 1px solid;
    font-size: 14.5px;
    line-height: 1.6;
}

.cg-form__notice p,
.cg-form__notice ul {
    margin: 6px 0 0;
}

.cg-form__notice ul {
    padding-left: 18px;
}

.cg-form__notice-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.cg-form__notice--ok {
    border-color: rgba(var(--cg-primary-rgb), .38);
    background: rgba(var(--cg-primary-rgb), .09);
    color: var(--cg-primary-on-surface-strong);
}

.cg-form__notice--ok .cg-form__notice-icon {
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-form__notice--error {
    border-color: rgba(var(--cg-accent-rgb), .55);
    background: rgba(var(--cg-accent-rgb), .12);
    color: var(--cg-heading);
}

.cg-form__notice--error .cg-form__notice-icon {
    background: var(--cg-accent);
    color: #fff;
}

/* Honeypot — visually and programmatically out of the way */
.cg-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =========================================================
   22. Info card beside the form
   ========================================================= */
.cg-infocard {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid rgba(var(--cg-primary-rgb), .26);
    border-radius: var(--cg-radius);
    background: linear-gradient(150deg, rgba(var(--cg-primary-rgb), .13) 0%, rgba(var(--cg-bg-rgb), .92) 55%);
    box-shadow: 0 20px 46px rgba(var(--cg-shadow-rgb), .09);
}

.cg-infocard > *:not(.cg-grid-layer) {
    position: relative;
    z-index: 1;
}

.cg-infocard__title {
    margin: 0 0 20px;
    color: var(--cg-heading);
    font-size: 20px;
    font-weight: 700;
}

.cg-infocard__sublabel {
    margin: 24px 0 12px;
    color: var(--cg-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cg-infocard__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Contact list */
.cg-contactlist {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-contactlist li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.cg-contactlist__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--cg-primary-rgb), .13);
    color: var(--cg-primary-on-surface);
}

.cg-contactlist small {
    display: block;
    margin-bottom: 2px;
    color: var(--cg-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cg-contactlist span,
.cg-contactlist a {
    color: var(--cg-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color .25s ease;
}

.cg-contactlist a:hover {
    color: var(--cg-primary-on-surface);
}

/* Mini numbered steps in the sidebar */
.cg-ministeps {
    display: grid;
    gap: 18px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.cg-ministeps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cg-ministeps__num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    font-size: 14px;
    font-weight: 700;
}

.cg-ministeps strong {
    display: block;
    margin-bottom: 3px;
    color: var(--cg-heading);
    font-size: 15px;
}

.cg-ministeps p {
    margin: 0;
    color: var(--cg-text);
    font-size: 13.5px;
    line-height: 1.6;
}

.cg-callout--block {
    display: flex;
    width: 100%;
}

/* =========================================================
   23. Responsive for the new blocks
   ========================================================= */
@media (max-width: 1100px) {
    .cg-formsec__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg-split__inner {
        grid-template-columns: 1fr;
    }

    .cg-split--reverse .cg-split__media {
        order: 0;
    }

    .cg-split__media {
        max-width: 620px;
    }

    .cg-process__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cg-why__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cg-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg-process__grid,
    .cg-why__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg-phero__actions .cg-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .cg-form__actions .cg-btn {
        width: 100%;
        justify-content: center;
    }
}

/* RTL */
.rtl .cg-form__hp {
    left: auto;
    right: -9999px;
}

/* =========================================================
   24. Header Overlap Content
   ---------------------------------------------------------
   Customizer → Header Settings → "Header Overlap Content".
   `cg-overlap` is added to <body> by inc/template-functions.php.

   With overlap ON the hero must run full-bleed to the very top
   edge, behind the transparent header — so the header clearance
   lives INSIDE the hero as top padding, never as a push on
   #primary (that would leave a blank band above the photo).

   Reference heights, transparent header at 1600px wide:
     .site-header  = 118px tall, glass pill ends at 98px
     → ~150px top padding puts the first line clear of the pill.
   ========================================================= */
body.cg-overlap {
    --cg-overlap-pad: clamp(122px, 9vw, 152px);
}

/* The WordPress admin bar pushes the header down 32px (46px on small screens) */
body.cg-overlap.admin-bar {
    --cg-overlap-pad: clamp(154px, calc(9vw + 32px), 184px);
}

body.cg-overlap .cg-hero,
body.cg-overlap .cg-phero {
    padding-top: var(--cg-overlap-pad);
}

/* Mobile: the glass pill is ~74px tall, so less clearance is needed */
@media (max-width: 900px) {
    body.cg-overlap {
        --cg-overlap-pad: 104px;
    }

    body.cg-overlap.admin-bar {
        --cg-overlap-pad: 150px;
    }
}

/*
 * Keep the top of the photo readable under the header.
 * The standard wash fades from the left; with overlap on we add a soft
 * top-down veil so white menu text never sits on a light part of the photo.
 */
body.cg-overlap .cg-hero__wash::after,
body.cg-overlap .cg-phero__wash::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--cg-overlap-pad);
    background: linear-gradient(to bottom, rgba(var(--cg-shadow-rgb), .28) 0%, transparent 100%);
    pointer-events: none;
}

/* =========================================================
   25. Gallery lightbox (.cg-lb)
   ---------------------------------------------------------
   Markup is created by js/lightbox.js; tiles opt in with
   data-cg-lightbox (see shared/gallery.php).
   ========================================================= */
html.cg-lb-open,
body.cg-lb-open {
    overflow: hidden !important;
}

.cg-lb {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}

.cg-lb[hidden] {
    display: none !important;
}

.cg-lb.is-open {
    opacity: 1;
}

.cg-lb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--cg-dark-rgb), .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: zoom-out;
}

.cg-lb__stage {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    height: 100%;
    padding: clamp(56px, 7vh, 84px) clamp(14px, 5vw, 76px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Figure ---------- */
.cg-lb__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 100%;
    transform: scale(.96);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.cg-lb.is-open .cg-lb__figure {
    transform: scale(1);
}

.cg-lb__imgwrap {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-lb__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - clamp(150px, 20vh, 210px));
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--cg-radius);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    background: rgba(255, 255, 255, .04);
}

/* ---------- Caption bar ---------- */
.cg-lb__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cg-lb__caption {
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.cg-lb__count {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Controls ---------- */
.cg-lb__btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s ease, border-color .25s ease, transform .25s ease, opacity .25s ease;
}

.cg-lb__btn[hidden] {
    display: none;
}

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

.cg-lb__btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .55);
    outline-offset: 3px;
}

.cg-lb__btn--close {
    top: clamp(14px, 3vh, 26px);
    right: clamp(14px, 3vw, 26px);
}

.cg-lb__btn--close:hover {
    transform: rotate(90deg);
}

.cg-lb__btn--prev,
.cg-lb__btn--next {
    top: 50%;
    margin-top: -26px;
}

.cg-lb__btn--prev {
    left: clamp(6px, 1.5vw, 18px);
}

.cg-lb__btn--next {
    right: clamp(6px, 1.5vw, 18px);
}

.cg-lb__btn--prev:hover {
    transform: translateX(-3px);
}

.cg-lb__btn--next:hover {
    transform: translateX(3px);
}

/* ---------- Loading ---------- */
.cg-lb__spinner {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    opacity: 0;
    transition: opacity .2s ease;
    animation: cgLbSpin .7s linear infinite;
}

.cg-lb__imgwrap.is-loading .cg-lb__spinner {
    opacity: 1;
}

.cg-lb__imgwrap.is-loading .cg-lb__img {
    opacity: .25;
}

.cg-lb__img {
    transition: opacity .25s ease;
}

@keyframes cgLbSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 620px) {
    .cg-lb__stage {
        padding: 64px 10px 20px;
    }

    .cg-lb__btn {
        width: 44px;
        height: 44px;
    }

    .cg-lb__btn--prev,
    .cg-lb__btn--next {
        top: auto;
        bottom: 14px;
        margin-top: 0;
    }

    .cg-lb__btn--prev {
        left: 24%;
    }

    .cg-lb__btn--next {
        right: 24%;
    }

    .cg-lb__img {
        max-height: calc(100vh - 200px);
    }

    .cg-lb__bar {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {

    .cg-lb,
    .cg-lb__figure,
    .cg-lb__btn,
    .cg-tile__zoom {
        transition-duration: .01ms !important;
        transform: none !important;
    }

    .cg-lb__spinner {
        animation-duration: 2s;
    }
}

/* =========================================================
   25b. Card media header (.cg-card--media)
   ---------------------------------------------------------
   An optional photo on the SAME card component, so a service
   card with a picture and a feature card without one still
   read as one family. The icon badge moves onto the photo's
   lower edge instead of sitting at the top of the card.
   ========================================================= */
.cg-card--media {
    padding-top: 0;
    gap: 12px;
}

.cg-card__media {
    position: relative;
    display: block;
    margin: 0 -26px 8px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(var(--cg-primary-rgb), .08);
}

.cg-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.cg-card:hover .cg-card__img {
    transform: scale(1.06);
}

/* Fade the photo into the card so the badge always has a ground */
.cg-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(var(--cg-shadow-rgb), .72), transparent);
    pointer-events: none;
}

.cg-card--media .cg-card__icon {
    position: relative;
    z-index: 1;
    margin-top: -52px;
    margin-bottom: 4px;
    width: 50px;
    height: 50px;
    background: rgba(var(--cg-bg-rgb), .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--cg-primary-rgb), .30);
}

/* A price / short qualifier next to the card title */
.cg-card__meta {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--cg-primary-rgb), .12);
    border: 1px solid rgba(var(--cg-primary-rgb), .24);
    color: var(--cg-primary-on-surface);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    vertical-align: middle;
    white-space: nowrap;
}

/* NOTE: .cg-cards--compact already exists above (icon + title only, no body
   text). Do not redefine it here -- a section that needs a shorter card should
   pass a smaller `min` instead. */

/* =========================================================
   25c. Price list (.cg-prices)
   ---------------------------------------------------------
   Service -> note -> amount. A leader line joins the two ends
   so the eye tracks across on wide screens; below 620px the
   row stacks and the leader is dropped.
   ========================================================= */
.cg-pricelist {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 860px;
}

.cg-price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--cg-border);
    transition: background .3s ease, padding-inline .3s ease;
}

.cg-price:first-child {
    border-top: 1px solid var(--cg-border);
}

.cg-price:hover {
    background: rgba(var(--cg-primary-rgb), .05);
    padding-inline: 14px;
}

.cg-price__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 1 auto;
}

.cg-price__name {
    color: var(--cg-heading);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
}

.cg-price__note {
    color: var(--cg-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.cg-price__dots {
    flex: 1 1 auto;
    min-width: 24px;
    align-self: center;
    height: 1px;
    background-image: linear-gradient(to right, var(--cg-border) 0 4px, transparent 4px 9px);
    background-size: 9px 1px;
    background-repeat: repeat-x;
}

.cg-price__amount {
    flex: 0 0 auto;
    color: var(--cg-primary-on-surface);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
}

/* =========================================================
   25d. Opening hours + location (.cg-hours)
   ========================================================= */
.cg-hours__inner {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 420px);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.cg-hours__contact {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cg-hours__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--cg-text);
    font-size: 15px;
    line-height: 1.6;
}

.cg-hours__contact a {
    color: var(--cg-text);
    text-decoration: none;
    transition: color .25s ease;
}

.cg-hours__contact a:hover {
    color: var(--cg-primary-on-surface);
}

.cg-hours__contact-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--cg-radius) * .5);
    background: rgba(var(--cg-primary-rgb), .10);
    border: 1px solid rgba(var(--cg-primary-rgb), .20);
    color: var(--cg-primary-on-surface);
}

.cg-hours__cities-label {
    margin: 0 0 10px;
    color: var(--cg-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.cg-hours__cities {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
}

.cg-hours__actions {
    display: flex;
}

/* The card itself */
.cg-hourscard {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 2.6vw, 34px);
    border: 1px solid rgba(var(--cg-primary-rgb), .22);
    border-radius: calc(var(--cg-radius) * 1.2);
    background: rgba(var(--cg-primary-rgb), .05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 24px 60px rgba(var(--cg-shadow-rgb), .18);
}

.cg-hourscard > *:not(.cg-grid-layer) {
    position: relative;
    z-index: 1;
}

.cg-hourscard__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--cg-heading);
    font-size: 19px;
    font-weight: 700;
}

.cg-hourscard__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--cg-radius) * .6);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-hourscard__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cg-hourrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border-radius: calc(var(--cg-radius) * .45);
    color: var(--cg-text);
    font-size: 15px;
}

.cg-hourrow + .cg-hourrow {
    border-top: 1px solid rgba(var(--cg-border-rgb), .7);
}

.cg-hourrow__day {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cg-hourrow__time {
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

/* Today's row is the one visitors actually look for */
.cg-hourrow.is-today {
    background: rgba(var(--cg-primary-rgb), .13);
    color: var(--cg-heading);
    font-weight: 600;
}

.cg-hourrow__badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.cg-hourscard__note {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--cg-border-rgb), .7);
    color: var(--cg-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
    .cg-hours__inner {
        grid-template-columns: 1fr;
    }

    .cg-card__media {
        margin-inline: -22px;
    }
}

@media (max-width: 620px) {

    /* Keep the amount on the name's line -- a price under a description reads
       as another line of copy rather than as the price. Drop the leader line
       instead; there is no room for it to do its job. */
    .cg-price {
        align-items: flex-start;
        gap: 16px;
    }

    .cg-price__dots {
        display: none;
    }

    .cg-price__body {
        flex: 1 1 auto;
    }

    .cg-price__amount {
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 16.5px;
    }

    .cg-card__meta {
        margin-left: 0;
        margin-top: 8px;
        display: table;
    }
}

/* --- RTL ------------------------------------------------------------- */
.rtl .cg-card__meta {
    margin-left: 0;
    margin-right: 10px;
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .cg-card__img,
    .cg-price {
        transition: none;
    }

    .cg-card:hover .cg-card__img {
        transform: none;
    }

    .cg-price:hover {
        padding-inline: 4px;
    }
}

/* =========================================================
   25e. FAQ accordion (.cg-faq)
   ---------------------------------------------------------
   Built on <details>/<summary>: no JavaScript, keyboard
   operable, and findable with the browser's own in-page
   search. The marker is drawn with CSS so it can animate;
   the native triangle is removed on both engines.
   ========================================================= */
.cg-faq__list {
    max-width: 860px;
    margin-inline: auto;
    display: grid;
    gap: 12px;
}

.cg-faq__item {
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * .8);
    background: rgba(var(--cg-bg-rgb), .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    transition: border-color .3s ease, background .3s ease;
}

.cg-faq__item[open] {
    border-color: rgba(var(--cg-primary-rgb), .38);
}

.cg-faq__item:hover {
    border-color: rgba(var(--cg-primary-rgb), .28);
}

.cg-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    cursor: pointer;
    color: var(--cg-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    list-style: none;
}

/* Remove the native disclosure triangle */
.cg-faq__q::-webkit-details-marker {
    display: none;
}

.cg-faq__q::marker {
    content: '';
}

.cg-faq__q:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(var(--cg-primary-rgb), .55);
}

/* A plus that becomes a minus */
.cg-faq__mark {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(var(--cg-primary-rgb), .10);
    border: 1px solid rgba(var(--cg-primary-rgb), .24);
    transition: background .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.cg-faq__mark::before,
.cg-faq__mark::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 1.6px;
    border-radius: 2px;
    background: var(--cg-primary-on-surface);
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}

.cg-faq__mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.cg-faq__item[open] .cg-faq__mark {
    background: rgba(var(--cg-primary-rgb), .20);
}

.cg-faq__item[open] .cg-faq__mark::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

.cg-faq__a {
    padding: 0 22px 20px;
    border-top: 1px solid rgba(var(--cg-border-rgb), .6);
    margin-top: -1px;
}

.cg-faq__a p {
    margin: 16px 0 0;
    color: var(--cg-text);
    font-size: 15px;
    line-height: 1.75;
}

/* =========================================================
   25f. Price row label (.cg-price__badge)
   ---------------------------------------------------------
   Optional per-row marker ("Meest gekozen"). Rows without one
   are untouched.
   ========================================================= */
.cg-price__badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--cg-primary-rgb), .14);
    border: 1px solid rgba(var(--cg-primary-rgb), .28);
    color: var(--cg-primary-on-surface);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.cg-price.is-featured .cg-price__amount {
    color: var(--cg-primary-on-surface-strong);
}

.rtl .cg-price__badge {
    margin-left: 0;
    margin-right: 10px;
}

@media (max-width: 620px) {
    .cg-price__badge {
        display: block;
        width: fit-content;
        margin: 6px 0 0;
    }

    .cg-faq__q {
        padding: 16px 18px;
        font-size: 15.5px;
    }

    .cg-faq__a {
        padding: 0 18px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cg-faq__item,
    .cg-faq__mark,
    .cg-faq__mark::before,
    .cg-faq__mark::after {
        transition: none;
    }
}

/* =========================================================
   25g. Third-party embed frame (.cg-embed)
   ---------------------------------------------------------
   Frames a plugin widget (booking form, map, reviews) so it
   sits in the page rhythm: centred, width-capped, and unable
   to push the page sideways on a phone.

   IT DELIBERATELY DOES NOT STYLE THE WIDGET'S INTERNALS.
   Plugin markup changes on every update; overrides written
   against it rot silently. Everything here targets the frame
   the theme owns -- .cg-embed and its one child.
   ========================================================= */
.cg-embed {
    width: 100%;
    max-width: var(--cg-embed-max, 1100px);
    margin-inline: auto;
}

.cg-embed__inner {
    /*
     * The containment rule. A booking widget with a wide internal grid would
     * otherwise stretch the document and give the whole page a horizontal
     * scrollbar; `min-width: 0` lets it shrink, `max-width: 100%` caps it, and
     * the widget scrolls inside its own box if it truly cannot fit.
     */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Centre a widget that sets its own narrower width */
.cg-embed__inner > * {
    margin-inline: auto;
}

/* Widgets often ship a fixed pixel width; let it shrink on small screens */
.cg-embed__inner img,
.cg-embed__inner iframe,
.cg-embed__inner table {
    max-width: 100%;
}

.cg-embed__note {
    max-width: 620px;
    margin: 26px auto 0;
    text-align: center;
    color: var(--cg-muted);
    font-size: 14px;
    line-height: 1.7;
}

/*
 * The booking widget (LatePoint) renders a LIGHT panel. That is the plugin's
 * own design -- `latepoint-color-black` names its accent, not its background --
 * and it has no dark skin to switch on.
 *
 * So the theme does not try to repaint it. A bright panel on a dark page reads
 * as the interactive part of the page, which is exactly what a booking form
 * should be. All that is added here is the frame the theme owns: the site's
 * corner radius, a copper edge and a lift, so the widget belongs to the page
 * instead of being dropped onto it.
 *
 * Everything inside stays the plugin's business -- see design-system.md 18.8.
 * If a dark form is ever wanted, do it in the plugin (or its own custom CSS
 * field), not here: overrides written against plugin internals break on update,
 * and a half-applied dark override means dark text on a dark ground.
 */
.cg-embed .latepoint-w {
    border-radius: var(--cg-radius);
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(var(--cg-shadow-rgb), .55),
        0 0 0 1px rgba(var(--cg-primary-rgb), .30);
}

@media (max-width: 620px) {
    .cg-embed__note {
        font-size: 13.5px;
    }
}

/* =========================================================
   25i. Location map (.cg-map)
   ---------------------------------------------------------
   The iframe is sized by an aspect-ratio-free wrapper so the
   client can set the height in the Customizer, and it never
   pushes the page sideways.
   ========================================================= */
.cg-map__frame {
    position: relative;
    width: 100%;
    height: var(--cg-map-h, 460px);
    overflow: hidden;
    border: 1px solid rgba(var(--cg-primary-rgb), .22);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-primary-rgb), .05);
    box-shadow: 0 24px 60px rgba(var(--cg-shadow-rgb), .35);
}

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

.cg-map__address {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 22px 0 0;
    color: var(--cg-text);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 620px) {
    .cg-map__frame {
        height: min(var(--cg-map-h, 460px), 320px);
    }
}

/* =========================================================
   26. DARK CANVAS LAYER
   ---------------------------------------------------------
   Everything above is canvas-agnostic: surfaces are written as
   rgba(var(--cg-bg-rgb), …) and accent text as
   var(--cg-primary-on-surface), so inverting the palette tokens
   in Customizer → Theme Colors inverts the whole system.

   What is left here is the handful of details that a token cannot
   express, because they are literal light values that only make
   sense over a light ground: the frosted-pane hairlines, the
   glass highlight, and the two hover states that flip a light
   label onto a light fill.

   The `cg-dark` body class is added by egateweb_body_classes()
   when the page background's luminance is below 0.4, so this
   block switches itself on and off with the palette — it is not
   tied to this one client.
   ========================================================= */

/* --- Frosted panes: a white hairline reads as a smear on dark glass.
       Drop it to a whisper and let the copper edge do the work. --- */
body.cg-dark .cg-hero__content,
body.cg-dark .cg-phero__panel {
    border-color: rgba(var(--cg-primary-rgb), .22);
    box-shadow:
        0 28px 70px rgba(var(--cg-shadow-rgb), .55),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.cg-dark .cg-hero__content::before,
body.cg-dark .cg-phero__panel::before {
    background: linear-gradient(90deg, transparent, rgba(var(--cg-primary-rgb), .55), transparent);
}

/* --- Cards sit slightly ABOVE the ground on dark, not below it.
       On white a card is a lighter pane; on black it must be a
       lighter pane too, so lift it off the background instead of
       tinting it with the same near-black. --- */
body.cg-dark .cg-card,
body.cg-dark .cg-infocard,
body.cg-dark .cg-highlight,
body.cg-dark .cg-faq__item {
    background: rgba(var(--cg-primary-rgb), .045);
    border-color: rgba(var(--cg-primary-rgb), .14);
}

body.cg-dark .cg-card:hover {
    background: rgba(var(--cg-primary-rgb), .085);
    border-color: rgba(var(--cg-primary-rgb), .30);
}

body.cg-dark .cg-section--alt {
    background: rgba(var(--cg-primary-rgb), .035);
    border-block-color: rgba(var(--cg-primary-rgb), .12);
}

/* --- Ghost button: its hover fills with the button gradient, so the
       label must switch to the button's own (dark) text colour.
       On a light canvas the ghost label is already dark and this is
       a no-op; on dark it is the difference between 2.98:1 and
       5.90:1. See design-system.md §3.3. --- */
body.cg-dark .cg-btn--ghost {
    color: var(--cg-primary-light);
    border-color: rgba(var(--cg-primary-rgb), .45);
}

body.cg-dark .cg-btn--ghost:hover,
body.cg-dark .cg-btn--ghost:focus-visible {
    color: var(--cg-btn-text);
}

/* --- The dark CTA band is no longer a contrast event on a dark page.
       Give it the copper edge and a deeper ground so it still reads
       as the closing statement. --- */
body.cg-dark .cg-cta__box {
    border: 1px solid rgba(var(--cg-primary-rgb), .28);
}

/* --- Photos are the only bright thing on the page; let them breathe
       rather than fighting the ground. --- */
body.cg-dark .cg-split__img,
body.cg-dark .cg-tile__img {
    filter: saturate(1.05) contrast(1.02) brightness(.96);
}

body.cg-dark .cg-tile:hover .cg-tile__img {
    filter: saturate(1.12) contrast(1.05) brightness(1);
}

/* --- Form fields: var(--cg-bg) is now near-black, which reads as a
       hole. Lift them the same way cards are lifted. --- */
/*
 * Text fields only. A bare `input` here also matches input[type="submit"],
 * and because this selector outranks the button rule it silently repainted
 * the submit button with the field background -- a copper gradient replaced
 * by a 6%-opacity tint. Exclude the button types.
 */
body.cg-dark .cg-form input:not([type="submit"]):not([type="button"]),
body.cg-dark .cg-form select,
body.cg-dark .cg-form textarea {
    background: rgba(var(--cg-primary-rgb), .06);
}

body.cg-dark .cg-form input::placeholder,
body.cg-dark .cg-form textarea::placeholder {
    color: var(--cg-muted);
}

/* =========================================================
   27. Home hero: photo slideshow + glass service card
   ---------------------------------------------------------
   Added for Jet Clean NL. Extends the hero from §6; the
   frosted text pane, wash and engraved grid are unchanged.

   .cg-hero__slides   1-3 stacked photos. js/hero-slides.js
                      moves .is-active; CSS does the fade and
                      the slow zoom. Without JS photo 1 stays.
   .cg-hero__card     Dark frosted pane with quick links to the
                      services and the live phone number.
   .cg-hero__dots     Slide picker, only when 2+ photos.
   ========================================================= */
.cg-hero--slides {
    padding-bottom: clamp(110px, 10vw, 150px);
}

.cg-hero__slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--cg-dark);
}

.cg-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.cg-hero__slide.is-active {
    opacity: 1;
}

.cg-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.16) contrast(1.07);
    transform: scale(1.02);
    transition: transform 9s cubic-bezier(.22, 1, .36, 1);
}

/* Slow push-in on the visible photo */
.cg-hero__slide.is-active .cg-hero__img {
    transform: scale(1.09);
}

/* A soft water-blue light behind the glass, bottom right */
.cg-hero__glow {
    position: absolute;
    right: -8%;
    bottom: -22%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--cg-primary-rgb), .38), transparent 72%);
    filter: blur(20px);
    pointer-events: none;
}

.cg-hero--with-card .cg-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(300px, 380px);
    justify-content: space-between;
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
}

/* The service card: dark glass, so it reads as a second layer */
.cg-hero__card {
    position: relative;
    padding: 26px 22px 22px;
    border-radius: calc(var(--cg-radius) * 1.2);
    background: rgba(var(--cg-dark-rgb), .58);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 30px 70px rgba(var(--cg-shadow-rgb), .30),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    color: #fff;
}

.cg-hero__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    pointer-events: none;
}

.cg-hero__card-title {
    margin: 0 4px 16px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.cg-hero__card-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-hero__card-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 9px 14px 9px 9px;
    border-radius: calc(var(--cg-radius) * .7);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform .32s cubic-bezier(.22, 1, .36, 1),
        background .32s ease,
        border-color .32s ease;
}

a.cg-hero__card-item:hover,
a.cg-hero__card-item:focus-visible {
    color: #fff;
    transform: translateX(4px);
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .28);
}

.cg-hero__card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--cg-radius) * .55);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 8px 18px rgba(var(--cg-primary-rgb), .35);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

a.cg-hero__card-item:hover .cg-hero__card-icon {
    transform: rotate(-6deg) scale(1.06);
}

.cg-hero__card-label {
    flex: 1;
}

.cg-hero__card-arrow {
    display: inline-flex;
    opacity: .7;
    transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

a.cg-hero__card-item:hover .cg-hero__card-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.cg-hero__card-call {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 14px 4px 2px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    text-decoration: none;
}

.cg-hero__card-call-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    transition: background .32s ease, color .32s ease;
}

.cg-hero__card-call:hover .cg-hero__card-call-icon {
    background: #fff;
    color: var(--cg-primary-dark);
}

.cg-hero__card-call-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cg-hero__card-call-body small {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
}

.cg-hero__card-call-body strong {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
    direction: ltr;
}

.cg-hero__card-call:hover,
.cg-hero__card-call:focus-visible {
    color: #fff;
}

/* Slide picker */
.cg-hero__dots-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(74px, 7vw, 100px);
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin-inline: auto;
    pointer-events: none;
}

.cg-hero__dots {
    display: inline-flex;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(var(--cg-dark-rgb), .35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .22);
    pointer-events: auto;
}

.cg-hero__dot {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.cg-hero__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    transform: translate(-50%, -50%);
    transition: width .4s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}

.cg-hero__dot.is-active::before {
    width: 20px;
    background: #fff;
}

.cg-hero__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff;
}

/* ---------------------------------------------------------
   27b. Lifted USP band (.cg-cards--lift)
   Pulled up over the bottom edge of the hero, so the page
   opens with glass cards floating over the photo.
--------------------------------------------------------- */
.cg-cards--lift {
    z-index: 2;
    margin-top: clamp(-96px, -7vw, -70px);
    padding-top: 0;
    padding-bottom: clamp(40px, 5vw, 72px);
}

.cg-cards--lift .cg-card {
    padding: 24px 22px;
    background: rgba(var(--cg-bg-rgb), .80);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-color: rgba(255, 255, 255, .7);
    box-shadow:
        0 22px 50px rgba(var(--cg-shadow-rgb), .12),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

.cg-cards--lift .cg-card__icon {
    width: 50px;
    height: 50px;
}

.cg-cards--lift .cg-card__title {
    font-size: 16.5px;
}

/* ---------------------------------------------------------
   27c. Responsive
--------------------------------------------------------- */
@media (max-width: 1100px) {
    .cg-hero--with-card .cg-hero__inner {
        grid-template-columns: 1fr;
    }

    .cg-hero__card {
        max-width: 760px;
    }

    .cg-hero__card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cg-hero__dots-wrap {
        display: none;
    }
}

@media (max-width: 900px) {
    .cg-hero--slides {
        padding-bottom: 104px;
    }

    .cg-hero__card {
        max-width: none;
        border-radius: var(--cg-radius);
    }

    .cg-hero__glow {
        width: 110%;
        right: -40%;
        bottom: -12%;
    }
}

@media (max-width: 620px) {
    .cg-hero__card {
        padding: 20px 16px 16px;
    }

    .cg-hero__card-list {
        grid-template-columns: 1fr;
    }

    .cg-cards--lift {
        margin-top: -60px;
    }
}

/* ---------------------------------------------------------
   27d. RTL + motion
--------------------------------------------------------- */
.rtl a.cg-hero__card-item:hover {
    transform: translateX(-4px);
}

.rtl .cg-hero__card-arrow {
    transform: scaleX(-1);
}

.rtl .cg-hero__dots-wrap {
    justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .cg-hero__slide,
    .cg-hero__img,
    .cg-hero__card-item,
    .cg-hero__card-icon,
    .cg-hero__card-arrow,
    .cg-hero__dot::before {
        transition-duration: .01ms !important;
    }

    .cg-hero__img,
    .cg-hero__slide.is-active .cg-hero__img {
        transform: none !important;
    }
}

/* ---------------------------------------------------------
   27e. Lifted band: always four even columns on desktop
   (auto-fill would leave an empty fifth track at 1400px)
--------------------------------------------------------- */
.cg-cards--lift .cg-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .cg-cards--lift .cg-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cg-cards--lift .cg-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   27f. Split with an upright photo (.cg-split--portrait)
   The default 4:3 frame crops a portrait photo to a strip.
--------------------------------------------------------- */
.cg-split--portrait .cg-split__inner {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.cg-split--portrait .cg-split__media {
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

.cg-split--portrait .cg-split__img {
    aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
    .cg-split--portrait .cg-split__inner {
        grid-template-columns: 1fr;
    }

    .cg-split--portrait .cg-split__media {
        max-width: 420px;
    }
}

/* =========================================================
   28. Inner pages: Diensten, Galerij, Over ons, Contact
   ---------------------------------------------------------
   Added for Jet Clean NL. Everything reuses the tokens,
   surfaces and motion values of §1–§27.
   ========================================================= */

/* `hidden` must win over any display rule set below */
.cg-form [hidden],
.cg-mtile[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------
   28a. Lazy image fade-in (inc/performance.php + enhance.js)
   Only with JS, so a no-JS visitor or bot always sees images.
--------------------------------------------------------- */
html.cg-js img.cg-fade {
    opacity: 0;
    transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}

html.cg-js img.cg-fade.is-loaded {
    opacity: 1;
}

/* ---------------------------------------------------------
   28b. Inner-page hero photo as <img> + live contact pills
--------------------------------------------------------- */
.cg-phero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cg-phero__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.cg-phero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 16px 6px 6px;
    border-radius: 999px;
    background: rgba(var(--cg-bg-rgb), .8);
    border: 1px solid rgba(var(--cg-primary-rgb), .22);
    color: var(--cg-heading);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    direction: ltr;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}

.cg-phero__pill:hover,
.cg-phero__pill:focus-visible {
    color: var(--cg-primary-on-surface-strong);
    transform: translateY(-3px);
    border-color: rgba(var(--cg-primary-rgb), .5);
    box-shadow: 0 12px 26px rgba(var(--cg-primary-rgb), .18);
}

.cg-phero__pill-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

/* ---------------------------------------------------------
   28c. Four-up card band (.cg-cards--four)
--------------------------------------------------------- */
.cg-cards--four .cg-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .cg-cards--four .cg-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cg-cards--four .cg-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   28d. Jump navigation (.cg-jumpnav)
   A glass bar pulled up against the hero; scrolls sideways
   on phones instead of wrapping into a tall block.
--------------------------------------------------------- */
.cg-jumpnav {
    position: relative;
    z-index: 2;
    margin-top: -34px;
}

.cg-jumpnav__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 20px;
    border-radius: 999px;
    background: rgba(var(--cg-bg-rgb), .82);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 18px 44px rgba(var(--cg-shadow-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.cg-jumpnav__label {
    flex-shrink: 0;
    color: var(--cg-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cg-jumpnav__list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.cg-jumpnav__list::-webkit-scrollbar {
    display: none;
}

.cg-jumpnav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--cg-border);
    background: rgba(var(--cg-bg-rgb), .9);
    color: var(--cg-heading);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s ease, color .28s ease, border-color .28s ease;
}

.cg-jumpnav__icon {
    display: inline-flex;
    color: var(--cg-primary);
    transition: color .28s ease;
}

.cg-jumpnav__link:hover,
.cg-jumpnav__link:focus-visible {
    transform: translateY(-2px);
    color: var(--cg-btn-text);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    border-color: transparent;
}

.cg-jumpnav__link:hover .cg-jumpnav__icon,
.cg-jumpnav__link:focus-visible .cg-jumpnav__icon {
    color: var(--cg-btn-text);
}

/* Anchored blocks land below the fixed header */
.cg-split[id] {
    scroll-margin-top: 110px;
}

/* ---------------------------------------------------------
   28e. Masonry gallery + filter (.cg-projects--masonry)
--------------------------------------------------------- */
.cg-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: -12px 0 34px;
}

.cg-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 12px 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--cg-border);
    background: rgba(var(--cg-bg-rgb), .8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--cg-heading);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.cg-filter__count {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--cg-primary-rgb), .1);
    color: var(--cg-primary-on-surface);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.cg-filter__btn:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--cg-primary-rgb), .45);
}

.cg-filter__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .2);
}

.cg-filter__btn.is-active {
    color: var(--cg-btn-text);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(var(--cg-primary-rgb), .3);
}

.cg-filter__btn.is-active .cg-filter__count {
    background: rgba(255, 255, 255, .22);
    color: var(--cg-btn-text);
}

.cg-masonry {
    columns: 3 300px;
    column-gap: 20px;
}

.cg-mtile {
    position: relative;
    display: block;
    margin: 0 0 20px;
    break-inside: avoid;
    border-radius: var(--cg-radius);
    overflow: hidden;
    background: var(--cg-primary-soft);
    border: 1px solid rgba(var(--cg-primary-rgb), .08);
    box-shadow: 0 10px 28px rgba(var(--cg-shadow-rgb), .07);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

.cg-mtile.is-in {
    animation: cg-tile-in .55s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes cg-tile-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.cg-mtile:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(var(--cg-shadow-rgb), .15);
}

.cg-mtile__link {
    position: relative;
    display: block;
    overflow: hidden;
}

.cg-mtile__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
}

.cg-mtile:hover .cg-mtile__img {
    transform: scale(1.05);
}

.cg-mtile__link .cg-tile__zoom {
    opacity: 0;
}

.cg-mtile:hover .cg-tile__zoom,
.cg-mtile__link:focus-visible .cg-tile__zoom {
    opacity: 1;
}

/* Caption as a frosted strip over the bottom of the photo */
.cg-mtile__caption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 14px;
    border-radius: calc(var(--cg-radius) * .7);
    background: rgba(var(--cg-dark-rgb), .52);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}

.cg-mtile__tag {
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .92);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   28f. Contact form: steps, choice cards, segments, chips,
        photo drop zone, inline errors, success panel
--------------------------------------------------------- */
.cg-formsec__aside {
    display: grid;
    gap: 22px;
    position: sticky;
    top: 120px;
}

.cg-infocard--steps {
    background: rgba(var(--cg-bg-rgb), .8);
}

.cg-fset {
    margin: 0;
    padding: 0 0 26px;
    border: 0;
    border-bottom: 1px solid var(--cg-border);
    min-width: 0;
}

.cg-fset + .cg-fset {
    padding-top: 26px;
}

.cg-fset:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.cg-fset__legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 0;
    color: var(--cg-heading);
    font-size: 17px;
    font-weight: 700;
}

.cg-fset__num {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(var(--cg-primary-rgb), .3);
}

.cg-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cg-form__row + .cg-form__row,
.cg-choices + .cg-form__row,
.cg-chips + .cg-form__row {
    margin-top: 18px;
}

.cg-field {
    min-width: 0;
}

.cg-field--full + .cg-field--full {
    margin-top: 18px;
}

.cg-field--split {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 12px;
}

.cg-field__opt {
    color: var(--cg-muted);
    font-weight: 400;
}

/* Visually hidden radio/checkbox, the label is the control */
.cg-choice input,
.cg-seg__opt input,
.cg-chipcheck input,
.cg-drop input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Topic cards */
.cg-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cg-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.cg-choice__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 18px 16px 16px;
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * .8);
    background: var(--cg-bg);
    transition: border-color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}

.cg-choice:hover .cg-choice__card {
    transform: translateY(-3px);
    border-color: rgba(var(--cg-primary-rgb), .45);
}

.cg-choice__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: calc(var(--cg-radius) * .55);
    background: var(--cg-primary-soft);
    color: var(--cg-primary-on-surface);
    transition: background .25s ease, color .25s ease;
}

.cg-choice__title {
    color: var(--cg-heading);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
}

.cg-choice__text {
    color: var(--cg-text);
    font-size: 13.5px;
    line-height: 1.5;
}

.cg-choice__tick {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--cg-border);
    color: transparent;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.cg-choice input:checked + .cg-choice__card {
    border-color: var(--cg-primary);
    background: rgba(var(--cg-primary-rgb), .05);
    box-shadow: 0 0 0 1px var(--cg-primary), 0 14px 30px rgba(var(--cg-primary-rgb), .14);
}

.cg-choice input:checked + .cg-choice__card .cg-choice__icon {
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-choice input:checked + .cg-choice__card .cg-choice__tick {
    background: var(--cg-primary);
    border-color: var(--cg-primary);
    color: #fff;
}

.cg-choice input:focus-visible + .cg-choice__card,
.cg-seg__opt input:focus-visible + span,
.cg-chipcheck input:focus-visible + span {
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .22);
}

/* Segmented control (particulier / zakelijk, contact preference) */
.cg-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * .7);
    background: var(--cg-bg-alt);
}

.cg-seg__opt {
    position: relative;
    flex: 1;
    cursor: pointer;
}

.cg-seg__opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: calc(var(--cg-radius) * .5);
    color: var(--cg-text);
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.cg-seg--small .cg-seg__opt span {
    font-size: 13.5px;
    padding: 8px 6px;
}

.cg-seg__opt:hover span {
    color: var(--cg-heading);
}

.cg-seg__opt input:checked + span {
    background: var(--cg-bg);
    color: var(--cg-primary-on-surface-strong);
    box-shadow: 0 4px 14px rgba(var(--cg-shadow-rgb), .1), 0 0 0 1px rgba(var(--cg-primary-rgb), .3);
}

/* Service chips (multi-select) */
.cg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.cg-chipcheck {
    position: relative;
    cursor: pointer;
}

.cg-chipcheck > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 16px 8px 10px;
    border: 1px solid var(--cg-border);
    border-radius: 999px;
    background: var(--cg-bg);
    color: var(--cg-heading);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .25s ease, background .25s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.cg-chipcheck:hover > span {
    transform: translateY(-2px);
    border-color: rgba(var(--cg-primary-rgb), .45);
}

.cg-chipcheck__box {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid var(--cg-border);
    color: transparent;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.cg-chipcheck input:checked + span {
    border-color: var(--cg-primary);
    background: rgba(var(--cg-primary-rgb), .07);
    color: var(--cg-primary-on-surface-strong);
}

.cg-chipcheck input:checked + span .cg-chipcheck__box {
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    border-color: transparent;
    color: var(--cg-btn-text);
}

/* Photo drop zone */
.cg-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1.5px dashed rgba(var(--cg-primary-rgb), .35);
    border-radius: calc(var(--cg-radius) * .8);
    background: rgba(var(--cg-primary-rgb), .03);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}

.cg-drop:hover,
.cg-drop.is-drag,
.cg-drop:focus-within {
    border-color: var(--cg-primary);
    background: rgba(var(--cg-primary-rgb), .07);
}

/* The real file input covers the zone, so drag-and-drop lands on it */
.cg-drop input[type="file"] {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

.cg-drop__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 8px 18px rgba(var(--cg-primary-rgb), .3);
}

.cg-drop__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cg-drop__text strong {
    color: var(--cg-heading);
    font-size: 15px;
}

.cg-drop__text small {
    color: var(--cg-muted);
    font-size: 13px;
    line-height: 1.5;
}

.cg-drop__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.cg-drop__item {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cg-primary-soft);
    color: var(--cg-primary-on-surface-strong);
    font-size: 13px;
}

.cg-drop__item.is-over {
    text-decoration: line-through;
    opacity: .6;
}

.cg-drop__warn,
.cg-field__error {
    margin: 8px 0 0;
    color: var(--cg-danger);
    font-size: 13px;
    font-weight: 600;
}

.cg-field.is-invalid input,
.cg-field.is-invalid select,
.cg-field.is-invalid textarea,
.cg-field.is-invalid .cg-check__box {
    border-color: var(--cg-danger);
    box-shadow: 0 0 0 4px rgba(var(--cg-danger-rgb), .1);
}

.cg-fset.is-invalid .cg-chipcheck > span {
    border-color: rgba(var(--cg-danger-rgb), .5);
}

.cg-check__label a {
    color: var(--cg-primary-on-surface);
    font-weight: 600;
}

/* Submit: spinner while sending */
.cg-btn--submit {
    border: 0;
    font-family: inherit;
}

.cg-btn--submit.is-loading {
    pointer-events: none;
    opacity: .85;
}

.cg-btn--submit.is-loading .cg-btn__icon {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cg-spin .8s linear infinite;
}

.cg-btn--submit.is-loading .cg-btn__icon svg {
    display: none;
}

@keyframes cg-spin {
    to { transform: rotate(360deg); }
}

.cg-form__note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cg-form__note svg {
    flex-shrink: 0;
    color: var(--cg-primary);
}

/* Thank-you panel */
.cg-success {
    padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
    text-align: center;
    outline: none;
}

.cg-success__icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 0 0 10px rgba(var(--cg-primary-rgb), .1), 0 18px 40px rgba(var(--cg-primary-rgb), .35);
    animation: cg-pop .6s cubic-bezier(.22, 1.4, .36, 1) both;
}

@keyframes cg-pop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.cg-success__title {
    margin: 0 0 12px;
    color: var(--cg-heading);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
}

.cg-success__text {
    max-width: 520px;
    margin: 0 auto 10px;
    color: var(--cg-text);
    font-size: 16px;
    line-height: 1.7;
}

.cg-success__note {
    margin: 0 auto 22px;
    color: var(--cg-muted);
    font-size: 13.5px;
}

/* ---------------------------------------------------------
   28g. Legal / default pages (.cg-prose)
--------------------------------------------------------- */
.cg-prose {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * 1.2);
    background: rgba(var(--cg-bg-rgb), .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 18px 44px rgba(var(--cg-shadow-rgb), .07);
    color: var(--cg-text);
    font-size: 16px;
    line-height: 1.8;
}

.cg-prose__updated {
    display: inline-block;
    margin: 0 0 20px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--cg-primary-soft);
    color: var(--cg-primary-on-surface);
    font-size: 13px;
    font-weight: 600;
}

.cg-prose h2 {
    margin: 36px 0 12px;
    color: var(--cg-heading);
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.3;
}

.cg-prose h3 {
    margin: 26px 0 10px;
    color: var(--cg-heading);
    font-size: 18px;
}

.cg-prose h2:first-child,
.cg-prose .entry-content > h2:first-child {
    margin-top: 0;
}

.cg-prose p,
.cg-prose ul,
.cg-prose ol {
    margin: 0 0 16px;
}

.cg-prose ul,
.cg-prose ol {
    padding-left: 22px;
}

.cg-prose li {
    margin-bottom: 6px;
}

.cg-prose li::marker {
    color: var(--cg-primary);
}

.cg-prose a {
    color: var(--cg-primary-on-surface);
    font-weight: 600;
}

.cg-prose strong {
    color: var(--cg-heading);
}

/* ---------------------------------------------------------
   28h. Responsive + motion
--------------------------------------------------------- */
@media (max-width: 1100px) {
    .cg-formsec__aside {
        position: static;
    }
}

@media (max-width: 900px) {
    .cg-jumpnav {
        margin-top: -26px;
    }

    .cg-jumpnav__inner {
        border-radius: var(--cg-radius);
        padding: 10px;
    }

    .cg-jumpnav__label {
        display: none;
    }
}

@media (max-width: 620px) {
    .cg-choices,
    .cg-form__row {
        grid-template-columns: 1fr;
    }

    .cg-choice__card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        padding: 14px;
    }

    .cg-choice__icon {
        margin: 0;
    }

    .cg-choice__text {
        flex-basis: 100%;
    }

    .cg-drop {
        flex-direction: column;
        text-align: center;
    }

    .cg-masonry {
        columns: 1;
    }

    .cg-btn--submit {
        width: 100%;
        justify-content: center;
    }
}

.rtl .cg-choice__tick {
    right: auto;
    left: 14px;
}

@media (prefers-reduced-motion: reduce) {
    html.cg-js img.cg-fade,
    .cg-mtile,
    .cg-mtile__img,
    .cg-choice__card,
    .cg-chipcheck > span,
    .cg-jumpnav__link,
    .cg-filter__btn,
    .cg-phero__pill {
        transition-duration: .01ms !important;
        transform: none !important;
    }

    .cg-mtile.is-in,
    .cg-success__icon {
        animation: none;
    }
}

/* Errors use the danger token, not the warm accent (white on amber is too faint) */
.cg-form__notice--error {
    border-color: rgba(var(--cg-danger-rgb), .35);
    background: rgba(var(--cg-danger-rgb), .06);
}

.cg-form__notice--error .cg-form__notice-icon {
    background: var(--cg-danger);
}

/* Social links reused from the mobile menu are white-on-dark there; on the
   light info card they need the accent colour to be visible at all. */
.cg-infocard__social .tc-menu__social-link {
    color: var(--cg-primary-on-surface);
    background: var(--cg-primary-soft);
    border-color: rgba(var(--cg-primary-rgb), .2);
}

.cg-infocard__social .tc-menu__social-link:hover,
.cg-infocard__social .tc-menu__social-link:focus-visible {
    color: var(--cg-btn-text);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    border-color: transparent;
}

/* =========================================================
   29. AJL Dakbedekking: additions to the shared components
   ---------------------------------------------------------
   Three small extensions, each an option on an EXISTING
   component rather than a new one:

   29a  .cg-split--inset   second photo overlapping the first
   29b  .cg-card--cta      closing call-out card in a card grid
   29c  .cg-cards--row     icon beside the text, for short reasons
   ========================================================= */

/* ---------------------------------------------------------
   29a. Split with an inset photo (shared/split, 'inset' => true)
   The main photo leaves room bottom-right; the inset overlaps
   that corner with a frame in the page colour, like a print
   laid on top of another.
--------------------------------------------------------- */
.cg-split--inset .cg-split__media {
    padding: 0 12% 14% 0;
}

.cg-split__inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cg-radius);
    border: 5px solid var(--cg-bg);
    box-shadow: 0 22px 50px rgba(var(--cg-shadow-rgb), .30);
}

/* The stamp moves to the top-right so it never covers the inset. */
.cg-split--inset .cg-why__stamp {
    top: 28px;
    bottom: auto;
    right: -6px;
}

.cg-split--inset.cg-split--reverse .cg-split__media {
    padding: 0 0 14% 12%;
}

.cg-split--inset.cg-split--reverse .cg-split__inset {
    right: auto;
    left: 0;
}

/* ---------------------------------------------------------
   29b. Closing call-out card (shared/cards, 'cta' => true)
   Same card, tinted like .cg-highlight, content centred. It
   fills the last cell of the grid instead of leaving a gap.
--------------------------------------------------------- */
.cg-card--cta {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(150deg, rgba(var(--cg-primary-rgb), .16) 0%, rgba(var(--cg-bg-rgb), .70) 70%);
    border-color: rgba(var(--cg-primary-rgb), .30);
}

.cg-card--cta > *:not(.cg-grid-layer) {
    position: relative;
    z-index: 1;
}

.cg-card--cta .cg-card__icon {
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-card--cta .cg-card__cta-btn {
    margin-top: 6px;
}

body.cg-dark .cg-card--cta {
    background: linear-gradient(150deg, rgba(var(--cg-primary-rgb), .16) 0%, rgba(var(--cg-primary-rgb), .04) 70%);
    border-color: rgba(var(--cg-primary-rgb), .30);
}

/* ---------------------------------------------------------
   29c. Row cards (.cg-cards--row)
   Icon on the left, title and text on the right. For short
   "why us" reasons, where a tall card per sentence wastes
   space.
--------------------------------------------------------- */
.cg-cards--row .cg-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
    padding: 24px 24px 24px 22px;
}

.cg-cards--row .cg-card__icon {
    grid-row: 1 / span 2;
    width: 50px;
    height: 50px;
}

.cg-cards--row .cg-card__title {
    font-size: 17px;
}

.cg-cards--row .cg-card__text {
    font-size: 14px;
}

/* ---------------------------------------------------------
   29d. Responsive + motion
--------------------------------------------------------- */
@media (max-width: 900px) {
    .cg-split--inset .cg-split__media {
        max-width: 560px;
        width: 100%;
        justify-self: center;
    }
}

@media (max-width: 620px) {
    .cg-split--inset .cg-split__media,
    .cg-split--inset.cg-split--reverse .cg-split__media {
        padding: 0 8% 18% 0;
    }

    .cg-split__inset {
        width: 56%;
        border-width: 4px;
    }

    .cg-cards--row .cg-card {
        padding: 20px 18px;
        column-gap: 14px;
    }

    .cg-cards--row .cg-card__icon {
        width: 44px;
        height: 44px;
    }
}

.rtl .cg-split--inset .cg-split__media {
    padding: 0 0 14% 12%;
}

.rtl .cg-split__inset {
    right: auto;
    left: 0;
}

/* ---------------------------------------------------------
   29e. Touch screens: the card's "more" arrow is always shown
   On hover devices it fades in as a hint. Without hover it
   never appeared, leaving an empty strip at the foot of every
   linked card and no sign that the card is a link.
--------------------------------------------------------- */
@media (hover: none) {
    .cg-card__more {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------
   29f. Price label on a card (shared/cards, 'price' key)
   "Prijs op aanvraag" by default; the client types an amount
   in the Customizer when they want one. Sits at the foot of
   the card so a row of cards lines up on its prices.
--------------------------------------------------------- */
.cg-card__price {
    margin: auto 0 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid rgba(var(--cg-primary-rgb), .30);
    border-radius: 999px;
    background: rgba(var(--cg-primary-rgb), .10);
    color: var(--cg-primary-on-surface);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.cg-card__price-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-card__price.is-free {
    border-color: rgba(var(--cg-accent-rgb, 245, 165, 36), .40);
    background: rgba(var(--cg-accent-rgb, 245, 165, 36), .12);
    color: var(--cg-accent);
}

.cg-card__price.is-free .cg-card__price-icon {
    background: var(--cg-accent);
    color: var(--cg-dark);
}

.cg-card__price + .cg-card__more {
    margin-top: 0;
}

/* ---------------------------------------------------------
   29g. FAQ question as a heading (shared/faq 'heading')
   The question may be an <h3> inside <summary> so a page of
   questions has a real outline. It must look exactly like
   the plain <span> it replaces.
--------------------------------------------------------- */
.cg-faq__qt {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

/* ---------------------------------------------------------
   29h. "Route plannen" after the address in the hours block
--------------------------------------------------------- */
.cg-hours__contact .cg-textlink {
    margin-left: 10px;
    white-space: nowrap;
}

.rtl .cg-hours__contact .cg-textlink {
    margin-left: 0;
    margin-right: 10px;
}

/* =========================================================
   30. Blog: overview cards, article layout, side column
   Templates: template-parts/blog/*.php, single.php.
   30a  .cg-postcard        article card (+ --featured)
   30b  .cg-blog__grid      overview grid + pagination
   30c  .cg-article         article column + sticky side column
   30d  .cg-toc / .cg-helpcard / .cg-svclist   side cards
   30e  article typography additions (images, tips, tables)
   30f  responsive + motion + RTL
========================================================= */

/* 30a. Article card ------------------------------------- */
.cg-postcard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    background: rgba(var(--cg-bg-rgb), .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        border-color .38s ease,
        box-shadow .38s ease;
}

.cg-postcard:hover,
.cg-postcard:focus-within {
    transform: translateY(-6px);
    border-color: rgba(var(--cg-primary-rgb), .42);
    box-shadow: 0 22px 48px rgba(var(--cg-shadow-rgb), .14);
}

.cg-postcard__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cg-primary-soft);
}

.cg-postcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.cg-postcard:hover .cg-postcard__img {
    transform: scale(1.05);
}

.cg-postcard__img--empty {
    display: grid;
    place-items: center;
    color: var(--cg-primary-on-surface);
}

.cg-postcard__cat {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 6px 13px;
    border: 1px solid rgba(var(--cg-primary-rgb), .40);
    border-radius: 999px;
    background: rgba(var(--cg-bg-rgb), .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--cg-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
}

.cg-postcard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 24px 24px 26px;
}

.cg-postcard__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    color: var(--cg-muted);
    font-size: 13px;
}

.cg-postcard__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cg-postcard__meta svg {
    color: var(--cg-primary-on-surface);
}

.cg-postcard__title {
    margin: 0;
    color: var(--cg-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.cg-postcard__link {
    color: inherit;
    text-decoration: none;
}

/* The title link covers the whole card: one tab stop per article */
.cg-postcard__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.cg-postcard__link:focus-visible {
    outline: none;
}

.cg-postcard:has(.cg-postcard__link:focus-visible) {
    outline: 2px solid rgba(var(--cg-primary-rgb), .7);
    outline-offset: 3px;
}

.cg-postcard:hover .cg-postcard__link {
    color: var(--cg-primary-on-surface);
}

.cg-postcard__excerpt {
    margin: 0;
    color: var(--cg-text);
    font-size: 15px;
    line-height: 1.7;
}

.cg-postcard__more {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cg-primary-on-surface);
    font-size: 14px;
    font-weight: 700;
}

.cg-postcard__more svg {
    transition: transform .38s ease;
}

.cg-postcard:hover .cg-postcard__more svg {
    transform: translateX(4px);
}

/* Newest article on page 1: full width, photo beside the text */
.cg-postcard--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.cg-postcard--featured .cg-postcard__media {
    aspect-ratio: auto;
    min-height: 340px;
}

.cg-postcard--featured .cg-postcard__body {
    justify-content: center;
    padding: clamp(28px, 4vw, 48px);
}

.cg-postcard--featured .cg-postcard__title {
    font-family: var(--cg-font-display, inherit);
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: -.3px;
    line-height: 1.15;
}

.cg-postcard--featured .cg-postcard__excerpt {
    font-size: 16px;
}

/* 30b. Overview grid + pagination ------------------------- */
.cg-blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 26px;
}

.cg-blog__empty {
    margin: 0;
    padding: 40px;
    border: 1px dashed var(--cg-border);
    border-radius: var(--cg-radius);
    color: var(--cg-text);
    text-align: center;
}

.cg-pagination {
    margin-top: 44px;
}

.cg-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.cg-pagination .page-numbers {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--cg-border);
    border-radius: 12px;
    background: rgba(var(--cg-bg-rgb), .7);
    color: var(--cg-heading);
    font-weight: 700;
    text-decoration: none;
    transition: border-color .3s ease, background .3s ease;
}

.cg-pagination a.page-numbers:hover {
    border-color: rgba(var(--cg-primary-rgb), .5);
}

.cg-pagination .page-numbers.current {
    border-color: transparent;
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
}

.cg-pagination .prev svg {
    transform: scaleX(-1);
}

/* 30c. Article layout --------------------------------------- */
.cg-article__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}

.cg-article .cg-prose {
    max-width: none;
    margin: 0;
    font-size: 17px;
}

.cg-article__aside {
    position: sticky;
    top: calc(var(--egw-header-h, 88px) + 24px);
    display: grid;
    gap: 20px;
}

.cg-article .cg-prose h2 {
    scroll-margin-top: calc(var(--egw-header-h, 88px) + 24px);
    padding-top: 6px;
    font-size: clamp(22px, 2.2vw, 28px);
}

/* 30d. Side cards --------------------------------------------- */
.cg-article__aside .cg-infocard {
    padding: 24px;
}

.cg-article__aside .cg-infocard__title {
    margin-bottom: 14px;
    font-size: 17px;
}

.cg-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cg-toc;
    display: grid;
    gap: 2px;
}

.cg-toc__list li {
    counter-increment: cg-toc;
}

.cg-toc__list a {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--cg-text);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.cg-toc__list a::before {
    content: counter(cg-toc, decimal-leading-zero);
    color: var(--cg-primary-on-surface);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.7;
}

.cg-toc__list a:hover,
.cg-toc__list a:focus-visible {
    background: rgba(var(--cg-primary-rgb), .12);
    color: var(--cg-heading);
}

.cg-helpcard__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--cg-radius) * .6);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    box-shadow: 0 10px 22px rgba(var(--cg-primary-rgb), .3);
}

.cg-helpcard__text {
    margin: 0 0 16px;
    color: var(--cg-text);
    font-size: 14.5px;
    line-height: 1.65;
}

.cg-helpcard .cg-callout {
    margin-bottom: 14px;
}

.cg-helpcard__btn {
    width: 100%;
    justify-content: center;
}

.cg-svclist__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-svclist__list li + li {
    border-top: 1px solid var(--cg-border);
}

.cg-svclist__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 2px;
    color: var(--cg-text);
    font-size: 14.5px;
    text-decoration: none;
    transition: color .25s ease;
}

.cg-svclist__list a svg {
    flex: 0 0 auto;
    color: var(--cg-primary-on-surface);
    transition: transform .3s ease;
}

.cg-svclist__list a:hover {
    color: var(--cg-heading);
}

.cg-svclist__list a:hover svg {
    transform: translateX(4px);
}

/* 30e. Article typography additions ----------------------------- */
.cg-article .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cg-radius);
}

.cg-article .entry-content figure {
    margin: 28px 0;
}

.cg-article .entry-content figcaption {
    margin-top: 10px;
    color: var(--cg-muted);
    font-size: 13.5px;
    text-align: center;
}

.cg-article .entry-content blockquote,
.cg-article .entry-content .cg-tip {
    margin: 28px 0;
    padding: 20px 24px;
    border: 1px solid rgba(var(--cg-primary-rgb), .3);
    border-left: 4px solid var(--cg-primary);
    border-radius: 12px;
    background: rgba(var(--cg-primary-rgb), .08);
    color: var(--cg-heading);
}

.cg-article .entry-content .cg-tip p:last-child,
.cg-article .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.cg-article .entry-content table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.cg-article .entry-content th,
.cg-article .entry-content td {
    padding: 11px 14px;
    border: 1px solid var(--cg-border);
    text-align: left;
    vertical-align: top;
}

.cg-article .entry-content th {
    background: rgba(var(--cg-primary-rgb), .10);
    color: var(--cg-heading);
}

/* 30f. Responsive + motion + RTL --------------------------------- */
@media (max-width: 1100px) {
    .cg-article__grid {
        grid-template-columns: 1fr;
    }

    .cg-article__aside {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }

    /* The table of contents only helps beside the text, not below it */
    .cg-toc {
        display: none;
    }
}

@media (max-width: 900px) {
    .cg-postcard--featured {
        grid-template-columns: 1fr;
    }

    .cg-postcard--featured .cg-postcard__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 620px) {
    .cg-article .cg-prose {
        font-size: 16px;
    }

    .cg-article .entry-content table {
        display: block;
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-postcard,
    .cg-postcard__img,
    .cg-postcard__more svg,
    .cg-svclist__list a svg {
        transition: none;
    }

    .cg-postcard:hover,
    .cg-postcard:focus-within,
    .cg-postcard:hover .cg-postcard__img {
        transform: none;
    }
}

.rtl .cg-postcard__cat {
    left: auto;
    right: 16px;
}

.rtl .cg-postcard__more svg,
.rtl .cg-svclist__list a svg,
.rtl .cg-pagination .next svg {
    transform: scaleX(-1);
}

.rtl .cg-pagination .prev svg {
    transform: none;
}

.rtl .cg-article .entry-content blockquote,
.rtl .cg-article .entry-content .cg-tip {
    border-left-width: 1px;
    border-right: 4px solid var(--cg-primary);
}

.rtl .cg-article .entry-content th,
.rtl .cg-article .entry-content td {
    text-align: right;
}

/* ---------------------------------------------------------
   30g. Editor text inside .cg-prose (articles, legal pages)
   content.css styles .entry-content for a white page (#444
   text, #1a1a1a headings). Inside a prose card the palette
   tokens must win, or the text disappears on a dark canvas.
--------------------------------------------------------- */
.cg-prose .entry-content {
    color: var(--cg-text);
    font-size: inherit;
    line-height: inherit;
}

.cg-prose .entry-content h2,
.cg-prose .entry-content h3,
.cg-prose .entry-content h4 {
    color: var(--cg-heading);
    font-weight: 700;
}

.cg-prose .entry-content h2 {
    margin: 2.1em 0 .7em;
    border-bottom-color: var(--cg-primary);
}

.cg-prose .entry-content h3 {
    margin: 1.6em 0 .5em;
    font-size: 19px;
}

.cg-prose .entry-content > :first-child {
    margin-top: 0;
}

.cg-prose .entry-content p {
    margin-bottom: 1.15em;
}

.cg-prose .entry-content a {
    color: var(--cg-primary-on-surface);
    font-weight: 600;
    border-bottom-color: rgba(var(--cg-primary-rgb), .4);
}

.cg-prose .entry-content a:hover {
    border-bottom-color: currentColor;
}

.cg-prose .entry-content strong {
    color: var(--cg-heading);
}

.cg-prose .entry-content ul,
.cg-prose .entry-content ol {
    margin: 1em 0 1.3em;
}

/* Overview grid: three columns at most, so three articles fill a row */
@media (min-width: 1000px) {
    .cg-blog__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 640px) and (max-width: 999px) {
    .cg-blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cg-postcard--featured .cg-postcard__more {
    margin-top: 10px;
}