/* =========================================================
   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(var(--cg-card-min, 280px), 1fr));
    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;
    }
}

/* =========================================================
   25h. Contact Form 7 (.cg-form / .wpcf7)
   ---------------------------------------------------------
   WHY THIS EXISTS, when the booking widget is left alone:

   LatePoint ships a COMPLETE UI, so styling it means fighting
   a design that already exists. Contact Form 7 ships almost no
   CSS at all -- it renders bare inputs and expects the theme to
   dress them. Leaving it alone would mean browser-default white
   boxes on a near-black page.

   So this block styles CF7's stable, documented control classes
   (.wpcf7-form-control, .wpcf7-quiz, .wpcf7-acceptance,
   .wpcf7-not-valid-tip, .wpcf7-response-output) -- the ones CF7
   treats as its public API -- plus the .cg-form__* wrappers that
   the FORM TEMPLATE itself supplies, which the theme owns.

   The template lives in tools/setup-contact-form.php.
   ========================================================= */
.wpcf7 {
    width: 100%;
}

.cg-form {
    display: grid;
    gap: 18px;
}

/* Two fields side by side; one column below 620px */
.cg-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.cg-form__field,
.cg-form__accept,
.cg-form__submit {
    margin: 0;
}

.cg-form__field > label {
    display: block;
    margin-bottom: 8px;
    color: var(--cg-heading);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
}

/* The required marker reads as "verplicht" to a screen reader */
.cg-form__field abbr[title] {
    color: var(--cg-primary-on-surface);
    text-decoration: none;
    cursor: help;
}

.cg-form .wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-form-control {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * .55);
    background: rgba(var(--cg-primary-rgb), .06);
    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;
}

.wpcf7-form-control::placeholder {
    color: var(--cg-muted);
    opacity: 1;
}

.wpcf7-form-control:focus {
    outline: none;
    border-color: rgba(var(--cg-primary-rgb), .55);
    background: rgba(var(--cg-primary-rgb), .10);
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .16);
}

.wpcf7-form textarea.wpcf7-form-control {
    min-height: 150px;
    resize: vertical;
    display: block;
}

/* --- The anti-robot sum ------------------------------------------------
   CF7 renders the question inside the control's own <label>, so the
   question and the input are laid out here rather than by the template. */
.cg-form__quiz .wpcf7-form-control-wrap > label {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--cg-primary-rgb), .26);
    border-radius: calc(var(--cg-radius) * .6);
    background: rgba(var(--cg-primary-rgb), .07);
}

.wpcf7-quiz-label {
    color: var(--cg-heading);
    font-size: 15px;
    font-weight: 600;
}

.cg-form__quiz input.wpcf7-quiz {
    max-width: 160px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}

.cg-form__hint {
    display: block;
    margin-top: 8px;
    color: var(--cg-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* --- Consent checkbox ---
   CF7 gives the checkbox GROUP the class .wpcf7-form-control too, even though
   it is a <span> wrapper and not a control. Left alone it inherits the input
   rule above -- width:100% plus horizontal padding on a static span, which
   overflowed its container by 16px and drew a box nobody designed. Reset it,
   then put the box on the wrapper the template owns. */
.wpcf7-form-control.wpcf7-acceptance,
.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.cg-form__accept {
    padding: 14px 18px;
    border: 1px solid var(--cg-border);
    border-radius: calc(var(--cg-radius) * .55);
    background: rgba(var(--cg-primary-rgb), .04);
}

.cg-form__accept .wpcf7-list-item {
    margin: 0;
}

.cg-form__accept .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: var(--cg-text);
    font-size: 14px;
    line-height: 1.6;
}

.cg-form__accept input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--cg-primary);
    cursor: pointer;
}

/* --- Submit --------------------------------------------------------------
   CF7 renders a bare <input>, which cannot carry the pseudo-element the
   site's .cg-btn uses for its sheen. Same gradient, lift and glow; no sheen. */
.cg-form__submit {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wpcf7-form input[type="submit"] {
    width: auto;
    padding: 15px 32px;
    border: 0;
    border-radius: calc(var(--cg-radius) * .66);
    background: linear-gradient(135deg, var(--cg-btn-from), var(--cg-btn-to));
    color: var(--cg-btn-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(var(--cg-primary-rgb), .34);
}

.wpcf7-form input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--cg-primary-rgb), .40);
}

/* --- Honeypot ------------------------------------------------------------
   Hidden from people, present for bots. NOT `display:none` -- some bots skip
   fields that are display:none, which defeats the trap. Moved off-screen
   instead, and marked aria-hidden + tabindex="-1" in the markup so screen
   readers and the keyboard skip it. A honeypot that catches real users is
   worse than no honeypot. */
.cg-form__trap {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Validation and response messages --- */
.wpcf7-not-valid-tip {
    margin-top: 7px;
    color: var(--cg-accent);
    font-size: 13.5px;
    font-weight: 600;
}

.wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--cg-accent);
}

.wpcf7-response-output {
    margin: 4px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: calc(var(--cg-radius) * .55);
    border-width: 1px !important;
    color: var(--cg-text);
    font-size: 14.5px;
    line-height: 1.6;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(var(--cg-primary-rgb), .45) !important;
    background: rgba(var(--cg-primary-rgb), .10);
    color: var(--cg-heading);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: rgba(var(--cg-accent-rgb), .55) !important;
    background: rgba(var(--cg-accent-rgb), .10);
}

.wpcf7-spinner {
    background-color: rgba(var(--cg-primary-rgb), .45);
}

@media (max-width: 620px) {
    .cg-form__quiz input.wpcf7-quiz {
        max-width: 100%;
    }

    .wpcf7-form input[type="submit"] {
        width: 100%;
    }
}

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

    .wpcf7-form-control,
    .wpcf7-form input[type="submit"] {
        transition: none;
    }

    .wpcf7-form input[type="submit"]:hover {
        transform: none;
    }
}

/* =========================================================
   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);
}