/* ===== PTG WEBSITE — Cleaned CSS ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ptg-navy: #1a3a5c;
    --ptg-navy-dark: #0f2641;
    --ptg-blue: #3498db;
    --ptg-blue-dark: #2980b9;
    --ptg-light: #f5f7fa;
    --ptg-gray: #6b7785;
    --ptg-text: #2c3e50;
    --ptg-border: #e0e6ed;
}

html, body {
    /* Safety net: never let a too-wide block make the whole page horizontally scrollable
       (which clips every other section on mobile). `clip` doesn't create a scroll container,
       so the sticky header keeps working. */
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: 'Poppins', 'Open Sans', -apple-system, sans-serif;
    color: var(--ptg-text);
    line-height: 1.6;
    font-size: 15px;
    background: white;
}

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

a {
    color: var(--ptg-blue);
    text-decoration: none;
}

    a:hover {
        color: var(--ptg-blue-dark);
    }

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container-prose {
    max-width: 100%;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    color: var(--ptg-navy);
    line-height: 1.25;
    font-weight: 700;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 18px;
}

/* === TOP UTILITY BAR === */
.top-bar {
    background: var(--ptg-navy-dark);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    padding: 8px 0;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    gap: 20px;
}

.top-bar-item {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
}

    .top-bar-item:hover {
        color: white;
    }

.top-bar-right {
    display: flex;
    gap: 8px;
}

.top-bar-social {
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

    .top-bar-social:hover {
        background: var(--ptg-blue);
        color: white;
    }

/* === MAIN HEADER === */
.site-header {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.site-logo img {
    max-height: 80px;
    width: auto;
}

.site-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--ptg-navy);
    letter-spacing: -0.5px;
}

.main-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    color: var(--ptg-text);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .nav-link:hover {
        color: var(--ptg-blue);
        background: var(--ptg-light);
    }

/* ===== NAV DROPDOWNS =====
   A menu item with children renders as a <button> trigger plus a panel. Opening is driven by a
   class the script toggles, NOT by :hover alone -- hover-only menus are unusable on touch and
   unreachable by keyboard. Desktop still opens on hover via the :hover rule below. */
.nav-item.has-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.15s;
}

.nav-item.open > .nav-dropdown-toggle .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--ptg-border);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    padding: 6px 0;
    z-index: 300;
}

.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.open > .nav-dropdown {
    display: block;
}

.nav-dropdown-link {
    display: block;
    padding: 10px 16px;
    color: var(--ptg-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

    .nav-dropdown-link:hover {
        color: var(--ptg-blue);
        background: var(--ptg-light);
    }

.mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--ptg-border);
    color: var(--ptg-navy);
    font-size: 20px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* ===== MOBILE NAV — collapse the desktop nav into a hamburger dropdown =====
   Without this the full horizontal nav renders on phones and overflows the viewport
   (widening the page so every section looks clipped). The ☰ button toggles .open. */
@media (max-width: 860px) {
    .mobile-toggle {
        display: block;
    }

    .header-inner {
        position: relative;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.10);
        border-top: 1px solid var(--ptg-border);
        padding: 6px 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        z-index: 200;
    }

        .main-nav.open {
            display: flex;
        }

        .main-nav .nav-link {
            width: 100%;
            padding: 13px 20px;
            border-radius: 0;
        }

            .main-nav .nav-link:hover {
                background: var(--ptg-light);
            }

    /* In the mobile sheet the panel can't float -- it opens inline, and only on tap
       (the :hover rule is cancelled here, since "hover" on touch is a stray first tap). */
    .main-nav .nav-item.has-dropdown {
        width: 100%;
    }

    .main-nav .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .main-nav .nav-item.has-dropdown:hover > .nav-dropdown {
        display: none;
    }

    .main-nav .nav-item.open > .nav-dropdown {
        display: block;
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 6px 0;
        background: var(--ptg-light);
    }

    .main-nav .nav-dropdown-link {
        padding: 11px 32px;
    }
}

.site-content {
    min-height: 60vh;
}

/* === GLOBAL BUTTONS === */
.btn, button.btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--ptg-blue);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn:hover {
        background: var(--ptg-blue-dark);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(52,152,219,0.3);
    }

.btn-outline {
    background: transparent;
    color: var(--ptg-blue);
    border: 2px solid var(--ptg-blue);
}

    .btn-outline:hover {
        background: var(--ptg-blue);
        color: white;
    }

/* ============================================ */
/* FOOTER — structure only (colors via theme vars) */
/* ============================================ */
.site-footer {
    padding: 60px 0 30px;
    font-size: 14px;
}

/* Footer: brand on the left, then the managed columns.
   The 2fr / 5fr split reproduces the old `2fr repeat(5, 1fr)` exactly (brand 2, columns 5),
   but the column count is no longer baked into the CSS -- it used to be hard-coded to five, so
   four columns left an empty track and six overflowed. The columns now live in their own flex
   row, which is what makes the alignment setting possible. */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-cols {
    display: flex;
    gap: 40px;
}

    /* Default ("stretch"): equal-width columns filling the row -- identical to the old behaviour. */
    .footer-cols > .footer-col {
        flex: 1 1 0;
        min-width: 0;
    }

    /* The three alignment options size each column to its content instead, so that the group
       can actually sit left / centre / right rather than always spanning the full width. */
    .footer-cols.pos-left,
    .footer-cols.pos-center,
    .footer-cols.pos-right {
        flex-wrap: wrap;
    }

        .footer-cols.pos-left > .footer-col,
        .footer-cols.pos-center > .footer-col,
        .footer-cols.pos-right > .footer-col {
            flex: 0 1 auto;
            min-width: 120px;
        }

    .footer-cols.pos-left {
        justify-content: flex-start;
    }

    .footer-cols.pos-center {
        justify-content: center;
    }

    .footer-cols.pos-right {
        justify-content: flex-end;
    }

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

    .footer-cols {
        flex-wrap: wrap;
    }

        .footer-cols > .footer-col {
            flex: 1 1 30%;
        }
}

@media (max-width: 700px) {
    .footer-cols > .footer-col {
        flex: 1 1 40%;
    }
}

.footer-col h4 {
    color: var(--footer-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.footer-col a {
    display: block;
    color: var(--footer-link);
    text-decoration: none;
    padding: 5px 0;
    font-size: 14px;
    transition: color 0.15s;
}

    .footer-col a:hover {
        color: var(--footer-link-hover);
    }

.footer-brand .footer-logo {
    /*max-height: 60px;*/
    margin-bottom: 10px;
}

.footer-brand .footer-logo-text {
    margin-bottom: 16px;
    color: var(--footer-heading);
}

.footer-brand p {
    margin-bottom: 18px;
    line-height: 1.6;
    color: var(--footer-text);
}

.footer-social {
    display: flex;
    gap: 8px;
}

    .footer-social a {
        width: 32px;
        height: 32px;
        background: transparent;
        color: var(--footer-link);
        border: 1px solid var(--footer-border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        transition: color 0.2s, border-color 0.2s;
        -webkit-tap-highlight-color: transparent; /* no dark flash on tap */
    }

        /* On hover/tap/focus keep the circle background the same — only the icon glyph turns
           green (SVGs use fill:currentColor). Prevents the whole circle going dark on click. */
        .footer-social a:hover,
        .footer-social a:focus,
        .footer-social a:active {
            background: transparent;
            color: var(--primary, #88b121);
            border-color: var(--primary, #88b121);
        }

.footer-address {
    color: var(--footer-text);
    font-size: 13px;
    margin: 0 0 14px;
}

.footer-bottom {
    border-top: 1px solid var(--footer-border);
    padding-top: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--footer-text);
}

    .footer-bottom p {
        margin: 0;
    }

.footer-bottom-left {
    flex: 1;
    min-width: 260px;
}

.footer-bottom-right {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

    .footer-bottom-right a {
        color: var(--footer-text);
        text-decoration: none;
        transition: color 0.15s;
    }

        .footer-bottom-right a:hover {
            color: var(--footer-link-hover);
        }

.footer-bottom-sep {
    color: var(--footer-border);
}

@media (max-width: 700px) {
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Block sections set their own padding inline from the admin's section-padding control.
   This default applies only to non-block content sections (standalone form / error pages). */
.page-section {
    padding: 60px 0;
}

/* ============================================ */
/* HERO BLOCK                                    */
/* ============================================ */
.block-hero {
    color: var(--hero-text);
    overflow: hidden;
}

    .block-hero .container {
        max-width: 100%;
        padding: 0;
    }

    .block-hero .hero-centered {
        max-width: 100%;
        margin: 0 auto;
        padding: 10px 5px;
    }

    .block-hero .hero-split {
        display: grid;
        grid-template-columns: 1.1fr 3fr;
        align-items: stretch;
        /*min-height: 100%;*/
        gap: 0;
    }

        .block-hero .hero-split .hero-text {
            /*padding: 48px 40px 48px 80px;*/
            max-width: 100%;
            justify-self: start;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .block-hero .hero-split .hero-image {
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: stretch;
            max-height: 380px;
        }

            .block-hero .hero-split .hero-image img {
                width: 100%;
                height: 100%;
                max-height: 380px;
                object-fit: cover;
                border-radius: 0;
                display: block;
            }

@media (max-width: 900px) {
    .block-hero .hero-split {
        grid-template-columns: 1fr;
        /*min-height: 0;*/
    }

        .block-hero .hero-split .hero-text {
            padding: 40px 20px;
            max-width: 100%;
            justify-self: stretch;
        }

        .block-hero .hero-split .hero-image img {
            height: auto;
        }
}

.block-hero .hero-title {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    margin: 0 0 20px;
    font-weight: 800;
    color: var(--hero-text);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Flexbox min-content guard: a flex item defaults to min-width:auto, which lets a long
   word/heading force the hero wider than the viewport — and .block-hero has overflow:hidden,
   so the text then gets clipped on the right. Allow the container/text to actually shrink. */
.block-hero > .container,
.block-hero .hero-text {
    min-width: 0;
}

/* Phones: shrink the hero heading + tighten padding so nothing clips. */
@media (max-width: 700px) {
    .block-hero .hero-title {
        font-size: clamp(24px, 7vw, 34px);
    }
    .block-hero .hero-subtitle {
        font-size: 15px;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .block-hero .hero-split .hero-text {
        padding: 32px 18px;
    }
}

    .block-hero .hero-title .accent {
        color: var(--primary, #88b121);
    }

.block-hero .hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 32px;
    opacity: 0.85;
    max-width: 100%;
}

.block-hero .hero-centered .hero-subtitle {
    margin-left: 0;
    margin-right: 0;
}

.block-hero .hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.block-hero .hero-centered .hero-buttons {
    justify-content: center;
}

/* HERO BUTTONS — variants + custom */
.block-hero .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    line-height: 1;
    border: 1.5px solid transparent;
}

    .block-hero .hero-btn::after {
        content: "→";
        display: inline-block;
        font-size: 16px;
        margin-left: 2px;
        transition: transform 0.2s;
    }

    .block-hero .hero-btn:hover::after {
        transform: translateX(3px);
    }

.block-hero .hero-btn-theme-primary {
    background: var(--btn-primary-bg, var(--primary, #88b121));
    color: var(--btn-primary-text, #ffffff);
    border-color: var(--btn-primary-border, var(--primary, #88b121));
}

    .block-hero .hero-btn-theme-primary:hover {
        background: var(--btn-primary-hover-bg, var(--primary-hover, #6e8f1a));
        color: var(--btn-primary-hover-text, #ffffff);
        border-color: var(--btn-primary-hover-border, var(--primary-hover, #6e8f1a));
    }

.block-hero .hero-btn-theme-secondary {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255,255,255,0.55);
}

    .block-hero .hero-btn-theme-secondary:hover {
        background: rgba(255,255,255,0.10);
        border-color: #ffffff;
        color: #ffffff;
    }

    .block-hero .hero-btn-theme-secondary::after {
        content: "";
        margin-left: 0;
    }

.block-hero .hero-btn-theme-ghost {
    background: transparent;
    color: var(--primary, #88b121);
    border-color: transparent;
}

    .block-hero .hero-btn-theme-ghost:hover {
        background: rgba(136,177,33,0.10);
        color: var(--primary-hover, #6e8f1a);
    }

/* ============================================ */
/* TEXT BLOCK                                    */
/* ============================================ */
    .block-text .text-title {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 12px;
    }

        /* Let a long heading wrap/shrink inside the flex row instead of overflowing on mobile. */
        .block-text .text-title h2 {
            min-width: 0;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .block-text .text-title h2 {
            margin: 0;
        }

    .block-text .title-deco-line {
        display: inline-block;
        width: 42px;
        height: 2px;
        border-radius: 2px;
        flex: 0 0 auto;
    }

    .block-text .title-deco-icon {
        width: 1.2em;
        height: 1.2em;
        min-width: 1.2em;
        object-fit: contain;
        flex: 0 0 auto;
        display: inline-block;
    }

    .block-text .text-subtitle {
        margin: 0 0 16px;
        /* Keep long subtitles inside the column / panel background on small screens. */
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .block-text h2 {
        margin-bottom: 16px;
        text-align: center;
    }

    /* The optional panel/box never wider than its column, and its content wraps inside it
       so nothing spills over the background when the screen shrinks. */
    .block-text .text-panel {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* On phones, ease the panel's inner padding so the text has room instead of overflowing. */
    @media (max-width: 600px) {
        .block-text .text-panel {
            padding-left: clamp(14px, 5vw, 32px) !important;
            padding-right: clamp(14px, 5vw, 32px) !important;
        }
    }

.block-text-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* ============================================ */
/* CARDS BLOCK                                   */
/* ============================================ */
.block-cards {
    /*background: var(--ptg-light);*/
}

    .block-cards h2 {
        text-align: center;
        margin-bottom: 16px;
    }

.block-cards-intro {
    max-width: 100%;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--ptg-gray);
    font-size: 16px;
}

.cards-grid, .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* The admin's column count is emitted inline as grid-template-columns:repeat(N,1fr).
   That can't shrink below the cards' content width, so on narrow screens N columns
   overflow the viewport (widening the whole page). Collapse to 2-up then 1-up. */
@media (max-width: 900px) {
    .block-cards .cards-grid,
    .block-cards .services-grid,
    .block-stats .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 600px) {
    .block-cards .cards-grid,
    .block-cards .services-grid,
    .block-stats .stats-grid {
        grid-template-columns: 1fr !important;
    }
    /* Left/right image cards stack image over body on phones so the row can't overflow.
       Drop the desktop fixed height (260px) — stacked, the image + title exceed it and the
       fixed-height card's overflow:hidden clips the title. Let the card grow to fit instead. */
    .block-cards .fc-pos-left,
    .block-cards .fc-pos-right {
        flex-direction: column !important;
        height: auto !important;
    }
    /* The 150px side image becomes a full-width banner on top. */
    .block-cards .fc-pos-left .fc-image,
    .block-cards .fc-pos-right .fc-image {
        width: 100% !important;
        height: 180px !important;
        align-self: stretch;
    }
    /* Don't clip the body text. */
    .block-cards .fc-pos-left .fc-body,
    .block-cards .fc-pos-right .fc-body {
        overflow: visible !important;
    }
}

.service-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }

    .service-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

.service-card-body, .fc-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .service-card h3, .fc-body h3 {
        font-size: 20px;
        /*margin-bottom: 12px;*/
        color: var(--ptg-navy);
    }

    .service-card p, .fc-body p {
        color: var(--ptg-gray);
        margin-bottom: 16px;
        flex: 1;
        font-size: 14px;
    }

    .service-card .read-more, .fc-body .read-more {
        color: var(--primary, #88b121);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    /* Card subtitle: a secondary line under the title. Reset the generic card <p> rules
       (flex-grow, big margin) so it hugs the title; color/size/weight come from the block. */
    .service-card .fc-subtitle, .fc-body .fc-subtitle {
        flex: 0 0 auto;
        margin: 2px 0 10px;
        font-size: 15px;
        text-transform: none;
        letter-spacing: 0;
    }

.card-number-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(136,177,33,0.10);
    color: var(--primary, #88b121);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary, #88b121);
}

/* === FEATURE CARDS LAYOUT VARIANTS === */
.fc-pos-top {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .fc-pos-top .fc-image {
        width: 100%;
        display: block;
    }

    .fc-pos-top .fc-icon {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin: 16px 0 0 16px;
    }

    .fc-pos-top .fc-body {
        padding: 16px;
    }

/* Bottom: text on top, image below. Body grows so the image is pinned to the
   card's bottom edge — cards of unequal text length keep aligned image rows. */
.fc-pos-bottom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .fc-pos-bottom .fc-body {
        padding: 16px;
        flex: 1 0 auto;
    }

    .fc-pos-bottom .fc-image {
        width: 100%;
        display: block;
        margin-top: auto;
    }

    .fc-pos-bottom .fc-icon {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin: 16px 0 16px 16px;
    }

.fc-pos-left {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
}

.fc-pos-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    overflow: hidden;
}

.fc-pos-left, .fc-pos-right {
    height: 260px;
}

    .fc-pos-left .fc-body, .fc-pos-right .fc-body {
        overflow: hidden;
    }

    .fc-pos-left .fc-image, .fc-pos-right .fc-image {
        width: 150px;
        height: auto;
        align-self: stretch;
        object-fit: cover;
        flex-shrink: 0;
    }

    .fc-pos-left .fc-icon {
        width: 64px;
        height: 64px;
        object-fit: contain;
        margin: 16px 0 0 16px;
        align-self: flex-start;
        flex-shrink: 0;
    }

    .fc-pos-right .fc-icon {
        width: 64px;
        height: 64px;
        object-fit: contain;
        margin: 16px 16px 0 0;
        align-self: flex-start;
        flex-shrink: 0;
    }

    .fc-pos-left .fc-body, .fc-pos-right .fc-body {
        flex: 1;
        min-width: 0;
        padding: 16px;
    }

/* === OPEN POSITIONS block (list of rows) === */
.block-open-positions {
    --jp-accent: var(--primary, #88b121);
}

    .block-open-positions .jp-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 22px;
        flex-wrap: wrap;
    }

    .block-open-positions .jp-heading {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        color: var(--jp-accent);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .block-open-positions .jp-viewall {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--jp-accent);
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        white-space: nowrap;
    }

        .block-open-positions .jp-viewall:hover .jp-arrow {
            transform: translateX(3px);
        }

    .block-open-positions .jp-arrow {
        transition: transform 0.2s ease;
    }

    /* Bordered container holding the rows */
    .block-open-positions .jp-list {
        background: #fff;
        border: 1px solid #e0e6ed;
        border-radius: 14px;
        overflow: hidden;
    }

    .block-open-positions .jp-row {
        display: grid;
        grid-template-columns: minmax(220px, 1.6fr) 1.1fr 1.1fr 0.9fr auto;
        align-items: center;
        gap: 18px;
        padding: 20px 26px;
        border-top: 1px solid #eef1f5;
    }

        .block-open-positions .jp-row:first-child {
            border-top: none;
        }

        /* When the View Details button is hidden, drop the trailing button column. */
        .block-open-positions .jp-row.jp-nobtn {
            grid-template-columns: minmax(220px, 1.6fr) 1.1fr 1.1fr 0.9fr;
        }

        .block-open-positions .jp-row:hover {
            background: #fafbfc;
        }

    .block-open-positions .jp-name-cell {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .block-open-positions .jp-name {
        font-size: 18px;
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    .block-open-positions .jp-badge {
        background: var(--jp-accent);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.4px;
        padding: 3px 11px;
        border-radius: 999px;
        line-height: 1.6;
    }

    .block-open-positions .jp-cell {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #6c7a89;
        font-size: 15px;
        min-width: 0;
    }

    .block-open-positions .jp-ic {
        opacity: 0.8;
        flex: none;
    }

    .block-open-positions .jp-btn {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        padding: 9px 22px;
        border: 1.5px solid var(--jp-accent);
        border-radius: 8px;
        color: var(--jp-accent);
        background: transparent;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

        .block-open-positions .jp-btn:hover {
            background: var(--jp-accent);
            color: #fff;
        }

    .block-open-positions .jp-empty {
        text-align: center;
        color: #6c7a89;
        padding: 40px 0;
        font-size: 15px;
    }

/* Mobile: each row becomes a clean stacked card — title on top, meta lines below, full-width button */
@media (max-width: 820px) {
    .block-open-positions .jp-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 16px 18px;
    }

        .block-open-positions .jp-row .jp-name-cell {
            flex-wrap: wrap;
            width: 100%;
        }

        .block-open-positions .jp-row .jp-name {
            font-size: 16px;
        }

        .block-open-positions .jp-row .jp-cell {
            font-size: 14px;
        }

        /* hide the empty placeholder cells so stacked rows don't get blank gaps */
        .block-open-positions .jp-row .jp-cell:empty {
            display: none;
        }

    .block-open-positions .jp-btn {
        align-self: stretch;
        justify-content: center;
        margin-top: 8px;
    }
}

.fc-theme {
    background: #fff;
    border: 1px solid var(--ptg-border);
    border-radius: 12px;
}

/* ============================================ */
/* STATS BLOCK                                   */
/* ============================================ */
    .block-stats .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }

    .block-stats .stat-tile {
        background: #ffffff;
        border-radius: 14px;
        padding: 36px 24px 32px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        border: 1px solid #f0f0f0;
        transition: box-shadow 0.2s, transform 0.2s;
    }

        .block-stats .stat-tile:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }

    .block-stats .stat-tile-icon {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        background: rgba(136,177,33,0.10);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .block-stats .stat-tile-icon img {
            /* size comes from the block's Icon size setting (emitted inline); this is only a fallback */
            width: 44px;
            height: 44px;
            object-fit: contain;
        }

    /* Icon shown without the circle chip. */
    .block-stats .stat-tile-icon-plain {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Groups the number + label so a left/right icon sits beside the whole text stack. */
    .block-stats .stat-tile-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    /* Left/right icon position: lay the tile out as a row (direction set inline). */
    .block-stats .stat-pos-left,
    .block-stats .stat-pos-right {
        justify-content: flex-start;
    }

    /* Hide the underline accent when the admin turns it off. */
    .block-stats .stat-tile-label-nounderline::after {
        display: none;
    }

    .block-stats .stat-tile-value {
        font-size: 48px;
        font-weight: 700;
        color: var(--primary, #88b121);
        line-height: 1;
        margin: 0;
    }

    .block-stats .stat-tile-label {
        font-size: 14px;
        color: #1a1a2e;
        font-weight: 500;
        margin: 0;
        padding-bottom: 8px;
        position: relative;
    }

        .block-stats .stat-tile-label::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 2px;
            background: var(--stat-underline, var(--primary, #88b121));
            border-radius: 2px;
        }

    .block-stats .stat-suffix {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }

/* ============================================ */
/* ICON ROW BLOCK                                */
/* Consolidated — single source of truth.        */
/* Background / padding / radius / border come    */
/* from per-block item settings (inline styles),  */
/* so transparent items stay transparent.         */
/* ============================================ */

/* Grid: columns come from inline repeat(N,1fr) at render time; rows stretch for equal height */
.block-icon-row .icon-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    align-items: stretch;
}

    /* Item box: equal width + height, hover lift. No forced background/shadow here. */
    .block-icon-row .icon-row-grid > .icon-row-item {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-decoration: none;
        color: inherit;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .block-icon-row .icon-row-grid > .icon-row-item:hover {
            transform: translateY(-4px);
        }

.block-icon-row .icon-row-icon {
    flex-shrink: 0;
    display: block;
}

.block-icon-row .icon-row-body {
    flex: 1;
    min-width: 0;
}

.block-icon-row .icon-row-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    /* Break long unbroken words instead of overflowing the item on narrow/mobile widths */
    overflow-wrap: break-word;
    word-break: break-word;
}

.block-icon-row .icon-row-text {
    margin: 0;
    font-size: 14px;
    color: #6c7a89;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}

a.icon-row-item:hover .icon-row-title {
    color: var(--primary, #88b121);
}

/* icon position variants */
.ir-pos-left {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
}

.ir-pos-right {
    display: flex;
    flex-direction: row-reverse;
    gap: 14px;
    align-items: flex-start;
}

.ir-pos-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

    .ir-pos-top .icon-row-icon {
        margin: 0 auto;
    }

/* heading + intro beside the icon grid (text-left / text-right) */
.block-icon-row .icon-row-content {
    max-width: 100%;
    margin: 0 auto 0px;
}

.block-icon-row .ir-split {
    display: flex;
    gap: 40px;
    align-items: center;
}

.block-icon-row .ir-zone-text {
    flex: 0 0 38%;
    max-width: 38%;
}

.block-icon-row .ir-zone-grid {
    flex: 1;
    min-width: 0;
}

.block-icon-row .ir-split .section-head-center {
    text-align: left;
    margin: 0 0 16px;
}

.block-icon-row .ir-split .icon-row-content {
    max-width: 100%;
    margin: 0;
}

/* separators between items */
.block-icon-row.has-separators .icon-row-grid > * + * {
    border-left: 1px solid var(--ptg-border);
    padding-left: 24px;
}

@media (max-width: 900px) {
    .block-icon-row .ir-split {
        flex-direction: column;
        align-items: stretch;
    }

    .block-icon-row .ir-zone-text {
        flex: none;
        max-width: none;
    }
}

/* ===== Anchor menu (in-page navigation) ===== */
.block-anchor-menu .pmenu-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.block-anchor-menu .pmenu-nav.pmenu-vertical {
    flex-direction: column;
    align-items: stretch;
}

.block-anchor-menu .pmenu-sticky {
    position: sticky;
    z-index: 30;
    background: inherit;
}

.block-anchor-menu .pmenu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.2;
    background: var(--pm-bg, transparent);
    color: var(--pm-fg, #555);
    border-radius: var(--pm-radius, 20px);
    font-size: var(--pm-font, 0.9rem);
    padding: var(--pm-pv, 8px) var(--pm-ph, 16px);
    height: var(--pm-h, auto);
    width: var(--pm-w, auto);
    transition: background-color 0.18s ease, color 0.18s ease;
}

    .block-anchor-menu .pmenu-item:hover {
        filter: brightness(0.97);
    }

    .block-anchor-menu .pmenu-item.is-active {
        background: var(--pm-abg, #88b121);
        color: var(--pm-afg, #fff);
    }

.block-anchor-menu .pmenu-vertical .pmenu-item {
    text-align: center;
}

@media (max-width: 768px) {
    .block-icon-row .icon-row-grid {
        grid-template-columns: 1fr !important;
        /* Center each item in its column so fixed-width "boxed" cards sit centered, not left. */
        justify-items: center !important;
    }

    /* Items with no explicit width fill the column so their text wraps instead of running
       off-screen; cards that set their own width (inline) keep it and get centered above. */
    .block-icon-row .icon-row-item {
        max-width: 100%;
        box-sizing: border-box;
    }
    .block-icon-row .icon-row-grid > .icon-row-item:not([style*="width"]) {
        width: 100%;
    }

    /* One card per row on mobile; stack the icon above the text so long titles/text
       are never pushed out of view by a side-by-side image. Keep the admin's text
       alignment (only the icon/text flow changes, not text-align). */
    .block-icon-row .ir-pos-left,
    .block-icon-row .ir-pos-right {
        flex-direction: column;
        align-items: flex-start;
    }

    .block-icon-row .icon-row-icon,
    .block-icon-row .icon-row-icon img {
        max-width: 100%;
    }

    .block-icon-row .icon-row-body {
        width: 100%;
    }
}

/* ============================================ */
/* TESTIMONIALS, CTA, IMAGE                      */
/* ============================================ */
.block-testimonials {
    /*background: var(--ptg-light);*/
}

    .block-testimonials h2 {
       /*text-align: center;
        margin-bottom: 48px;*/ 
    }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /*gap: 24px;*/
}

.testimonial-card {
   /*background: white;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    text-align: center;*/ 
}

    .testimonial-card img {
     /*  width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 16px;
        object-fit: cover;*/ 
    }

    .testimonial-card .testimonial-name {
       /*font-size: 18px;
        color: var(--ptg-navy);
        margin-bottom: 8px;
        font-weight: 700;*/ 
    }

    .testimonial-card .testimonial-text {
      /*color: var(--ptg-gray);
        font-style: italic;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 16px;*/  
    }

    .testimonial-card .testimonial-company {
        /*color: var(--ptg-blue);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;*/
    }

/* New testimonial card: quote on TOP, photo + name/position pinned to the BOTTOM. */
.block-testimonials .testimonials-grid {
    align-items: stretch;
}

/* Card box-shadow, quote line-height and italic are now admin-controlled (emitted inline by
   the renderer), so nothing is hardcoded here. */
    .block-testimonials .tst-quote {
        flex: 1;
        overflow-wrap: break-word;
    }

    .block-testimonials .tst-person {
       /**/ display: flex;
        align-items: center;
        gap: 14px;
        margin-top: auto;
    }

    .block-testimonials .tst-meta {
        min-width: 0;
    }

    .block-testimonials .tst-name {
       /* font-weight: 700;
        color: #1a1a2e;
        line-height: 1.3;
        overflow-wrap: break-word;*/
    }

    .block-testimonials .tst-role {
       /*font-size: 14px;
        color: #6c7a89;
        margin-top: 2px;
        overflow-wrap: break-word;*/ 
    }

@media (max-width: 768px) {
    .block-testimonials .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================ */
/* VIDEO block — text beside the video            */
/* ============================================ */
/* The block emits the side-by-side layout with an inline flex-basis/max-width on the text
   column (the admin's "Text width %"). That is the DESKTOP layout and stays untouched.
   On phones those fixed % columns leave the text squeezed, so stack them full width instead.
   !important is required because the widths are inline styles. Mobile-only — desktop keeps
   its max-width exactly as set. */
@media (max-width: 768px) {
    .block-video .video-split {
        flex-direction: column !important;
        align-items: stretch !important;
    }

        .block-video .video-split > * {
            flex: 1 1 auto !important;
            max-width: 100% !important;
        }
}

.block-cta {
    background: var(--cta-bg, transparent);
    color: white;
    text-align: center;
}

    .block-cta h2 {
        color: white;
        margin-bottom: 12px;
    }

    .block-cta p {
        font-size: 17px;
        opacity: 0.9;
        margin-bottom: 24px;
    }

    .block-cta .btn {
        background: var(--primary, transparent);
        padding: 14px 36px;
    }

.block-image {
    text-align: center;
}

    .block-image img {
        max-width: 100%;
        margin: 0 auto;
    }

/* ============================================ */
/* SECTION HEADINGS / EYEBROWS                   */
/* ============================================ */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary, #88b121);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
}

    .eyebrow::before, .eyebrow::after {
        content: "";
        display: inline-block;
        width: 24px;
        height: 1px;
        background: var(--primary, #88b121);
    }

.section-heading {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 12px 0;
    color: var(--ptg-text);
}

.section-subtitle {
    text-align: center;
    color: var(--ptg-gray);
    font-size: 15px;
    margin: 0 0 40px 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section-head-center {
    text-align: center;
    /*margin-bottom: 40px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================ */
/* CONTENT BODY (article pages)                  */
/* ============================================ */
.content-body {
    font-size: 16px;
    line-height: 1.7;
}

    .content-body h2 {
        margin-top: 32px;
    }

    .content-body p {
        margin-bottom: 16px;
    }

    .content-body img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
    }

/* ============================================ */
/* COOKIE BANNER — structure only                */
/* ============================================ */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    padding: 16px 20px;
}

    .cookie-banner.cookie-bottom {
        bottom: 0;
    }

    .cookie-banner.cookie-top {
        top: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.cookie-banner-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner-message {
    flex: 1;
    min-width: 260px;
    margin: 0;
    line-height: 1.5;
}

.cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-cookie {
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* CTA — flexible layout */
.block-cta .cta-text h2 {
    color: inherit;
}

.block-cta .cta-panel,
.block-cta .cta-container {
    box-sizing: border-box;
    max-width: 100%;
}

.block-cta .cta-lead {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0; /* allow the text to shrink and wrap instead of overflowing the background */
}

/* Text must wrap within the padded background on narrow screens, never spill past it */
.block-cta .cta-text {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

    .block-cta .cta-lead.cta-lead-top {
        flex-direction: column;
        align-items: inherit;
        gap: 12px;
    }

.block-cta .cta-icon {
    flex-shrink: 0;
}

/* buttons beside the text: text-left, buttons-right, vertically centered */
.block-cta .cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

    .block-cta .cta-row .cta-lead {
        flex: 1;
        min-width: 260px;
    }

/* On small screens the fixed 260px min-width forces the text wider than the
   padded background, so it visually spills outside it. Let it shrink instead. */
@media (max-width: 768px) {
    .block-cta .cta-row .cta-lead {
        min-width: 0;
        width: 100%;
    }
}

    .block-cta .cta-row .cta-buttons {
        flex-shrink: 0;
    }

/* stacked (below) spacing */
.block-cta .cta-buttons {
    margin-top: 24px;
}

.block-cta .cta-row .cta-buttons {
    margin-top: 0;
}

@media (max-width: 768px) {
    .block-cta .cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    /* Guarantee the text is never squeezed to a sliver on mobile (which would wrap it one
       letter per line): stack the icon ABOVE the text so the text always gets the full width.
       Mobile-only — desktop layout is unchanged. */
    .block-cta .cta-lead {
        flex-direction: column;
        align-items: flex-start;
    }
    .block-cta .cta-text {
        width: 100%;
        min-width: 0;
    }
}
.block-cta .cta-icon-circle {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-cta .btn .btn-icon,
.block-cta .btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
}

.block-cta .btn-lg {
    display: inline-flex;
    align-items: center;
}
.block-cta {
    background: var(--cta-bg, transparent);
}
.block-text .text-panel {
    margin: 0 auto;
}

    .block-text .text-panel > :last-child {
        margin-bottom: 0;
    }

/* ------------------------------------------------------------
   Rich-text content (.prose) — keep everything inside the column
   so the text block never overflows / breaks on mobile.
   ------------------------------------------------------------ */
.prose {
    max-width: 100%;
    overflow-wrap: break-word;   /* break long words */
    word-wrap: break-word;
}

    /* Long URLs / unbroken strings can't push the layout wider than the screen. */
    .prose a {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Media scales down to the available width instead of forcing horizontal scroll. */
    .prose img,
    .prose video,
    .prose iframe,
    .prose embed,
    .prose object {
        max-width: 100%;
        height: auto;
    }

    /* Wide tables / code scroll within their own box rather than stretching the page. */
    .prose table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
    }

    .prose pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

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

    .prose > :last-child {
        margin-bottom: 0;
    }
/* ============================================================
   MULTI-BLOCK ROWS — admin 1–4 columns per row
   ============================================================ */
.page-row {
    display: grid;
    gap: 0;
    align-items: stretch;
}

    .page-row > .page-col {
        min-width: 0;
    }

        .page-row > .page-col.solo > section {
            height: 100%;
        }

    /* Let a list block's panel fill the full column height (so buttons pinned to the
       panel bottom line up across side-by-side lists of unequal item length). */
    .page-col .block-list > .container {
        height: 100%;
    }

    /* Stacked column: each item is exactly its grid-row share of the column height; content
       taller than that is cropped. min-height:0 lets the grid item shrink below its content. */
    .page-col.stack > .page-stack-item {
        min-height: 0;
        overflow: hidden;
    }

        .page-col.stack > .page-stack-item > section {
            height: 100%;
        }

@media (max-width: 860px) {
    .page-row {
        display: block !important;
    }

    /* On phones columns stack and heights become natural — drop the fixed row split so
       nothing is cropped in the narrow single-column view. */
    .page-col.stack {
        display: block !important;
    }

        .page-col.stack > .page-stack-item {
            overflow: visible !important;
        }
}

/* On phones a list "card" panel drops its fixed proportional grid / hard height and just flows,
   so wrapped text (taller in a narrow column) stays INSIDE the panel background instead of
   spilling out. Any set height becomes a minimum only. */
@media (max-width: 640px) {
    .list-panel {
        display: block !important;
        height: auto !important;
        grid-template-rows: none !important;
    }
    .list-panel .list-region {
        overflow: visible !important;
        height: auto !important;
    }
    .list-points {
        grid-template-columns: 1fr !important; /* stack 2-per-row items on phones */
    }
}

/* ============================================================
   TIMELINE block — milestone strip ("Our Journey")
   ============================================================ */
.block-timeline .timeline-track {
    display: grid;
    gap: 28px;
}

.block-timeline .tl-item {
    position: relative;
}

.block-timeline .tl-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.block-timeline .tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary, #88b121);
    box-shadow: 0 0 0 4px rgba(136,177,33,0.18);
}

/* Year-on-node: a circle with the milestone year inside (replaces the dot). */
.block-timeline .tl-node-year {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--primary, #88b121);
    background: #fff;
    color: var(--primary, #88b121);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}
/* Connector runs rim-to-rim between year-circles (not through them, so it looks right even when
   the node background is transparent). --tl-node = the admin circle size, set inline on the
   section; the default-dot line otherwise assumes a 14px dot.
   Horizontal: shift the line start to this circle's right rim and shorten it by one diameter so
   it ends at the next circle's left rim. Vertical: start at the bottom rim, span only the gap. */
.block-timeline.timeline-yearnode.timeline-horizontal .tl-marker::before {
    top: calc(100% - (var(--tl-node, 56px) / 2));
    left: calc(50% + (var(--tl-node, 56px) / 2));
    width: calc(100% - var(--tl-node, 56px));
}
.block-timeline.timeline-yearnode.timeline-vertical .tl-marker::before {
    top: var(--tl-node, 56px);
    height: calc(100% + 28px - var(--tl-node, 56px));
}
.block-timeline.timeline-yearnode.timeline-vertical .tl-item { grid-template-columns: var(--tl-node, 56px) 1fr; }
/* Keep the circle above the connector line. */
.block-timeline .tl-node-year { position: relative; z-index: 1; }

.block-timeline .tl-year {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}

.block-timeline .tl-title {
    margin: 4px 0 6px;
    font-size: 17px;
}

.block-timeline .tl-desc {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

/* Horizontal: nodes in a row, connected by a line behind the dots */
.block-timeline.timeline-horizontal .timeline-track {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
}

.block-timeline.timeline-horizontal .tl-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    margin-bottom: 16px;
}

    .block-timeline.timeline-horizontal .tl-marker::before {
        content: "";
        position: absolute;
        top: calc(100% - 7px);
        left: 50%;
        width: 100%;
        height: 2px;
        background: var(--border, #e0e6ed);
        z-index: 0;
    }

.block-timeline.timeline-horizontal .tl-item:last-child .tl-marker::before {
    display: none;
}

.block-timeline.timeline-horizontal .tl-marker .tl-dot {
    position: relative;
    z-index: 1;
}

.block-timeline.timeline-horizontal .tl-body {
    padding: 0 10px;
}

/* Vertical: nodes stacked, line down the left */
.block-timeline.timeline-vertical .timeline-track {
    max-width: 100%;
    margin: 0 auto;
}

.block-timeline.timeline-vertical .tl-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
}

.block-timeline.timeline-vertical .tl-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

    .block-timeline.timeline-vertical .tl-marker::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 50%;
        width: 2px;
        height: calc(100% + 28px);
        background: var(--border, #e0e6ed);
        transform: translateX(-50%);
    }

.block-timeline.timeline-vertical .tl-item:last-child .tl-marker::before {
    display: none;
}

.block-timeline.timeline-vertical .tl-marker .tl-dot {
    position: relative;
    z-index: 1;
}

@media (max-width: 760px) {
    .block-timeline.timeline-horizontal .timeline-track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .block-timeline.timeline-horizontal .tl-marker::before {
        display: none;
    }
}

/* === cards "contact-card" variant (Regional Presence) === */
.service-card.cc-card {
    text-align: left;
}

.cc-contact {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-line {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted, #6c7a89);
}

    .cc-line a {
        color: inherit;
        text-decoration: none;
    }

        .cc-line a:hover {
            color: var(--primary, #88b121);
            text-decoration: underline;
        }

/* ============================================ */
/* RICH-TEXT EDITOR TOOLBAR (admin)              */
/* ============================================ */
.rc-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

    .rc-toolbar select {
        flex: 0 0 auto;
        width: auto;
        min-width: 90px;
    }

.rc-color {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ptg-border, #e0e6ed);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

    .rc-color input[type="color"] {
        width: 150%;
        height: 150%;
        margin: -25%;
        border: none;
        padding: 0;
        cursor: pointer;
    }
.block-hero .hero-title {
    color: var(--hero-text); /* ← always wins, ignores your Text Color field */
}
.block-location-info .li-card > .li-row:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .block-location-info .li-grid {
        grid-template-columns: 1fr !important;
    }
}
.editor-group {
    margin: 16px 0 4px;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.editor-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #eef1f5;
    border-bottom: 1px solid #dfe3ea;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #26303f;
}

    .editor-group-head:hover {
        background: #e6eaf0;
    }

    .editor-group-head .chev {
        font-size: 11px;
        color: #6b7785;
        transition: transform .15s ease;
    }

.editor-group.collapsed .editor-group-head {
    border-bottom: none;
}

    .editor-group.collapsed .editor-group-head .chev {
        transform: rotate(-90deg);
    }

.editor-group.collapsed .editor-group-body {
    display: none;
}

.editor-group-body {
    padding: 12px 12px 2px;
}

/* Static (non-collapsible) section heading inside the block editor. */
.editor-subhead {
    margin: 20px 0 10px;
    padding: 0 0 7px;
    border-bottom: 2px solid #d4dae3;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #1a2230;
}
.editor-subhead:first-child {
    margin-top: 2px;
}

/* (Padding-control styles moved to admin.css — the builder loads admin.css, not site.css.) */

/* Dynamic form (standalone page) grid layout — spacing handled by the grid gap */
.form-grid > .form-group { margin-bottom: 0; }
.form-grid .fg-full { grid-column: 1 / -1; }
/* Radio / checkbox: keep native appearance (not styled like a bordered text box). */
.form-group input[type=radio], .form-group input[type=checkbox] {
    width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: none; -webkit-appearance: auto; appearance: auto; box-sizing: content-box;
}

/* ============================================================
   HIGHLIGHTED CONTENT BLOCK (SharePoint-style) — 5 layouts
   Static rules; per-block dynamics (columns/colours/img height/gap) are injected inline.
   ============================================================ */
.block-highlighted .hc-heading { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 22px; }

/* shared tile */
.block-highlighted .hc-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.block-highlighted a.hc-card:hover { box-shadow: 0 10px 28px rgba(16,38,76,.12); transform: translateY(-3px); }
.block-highlighted .hc-img { width: 100%; object-fit: cover; display: block; }
.block-highlighted .hc-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.block-highlighted .hc-title { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; }
.block-highlighted .hc-desc { font-size: 14px; line-height: 1.55; margin: 0; }
.block-highlighted .hc-link { font-weight: 600; font-size: 14px; margin-top: auto; }
.block-highlighted .hc-attach { font-size: 12.5px; font-weight: 600; color: #6b7280; margin-top: auto; letter-spacing: .2px; display: inline-flex; align-items: center; gap: 6px; }
.block-highlighted .hc-attach::before { content: "📄"; font-size: 14px; }

/* CARDS / GRID */
.block-highlighted .hc-cards { display: grid; }
.block-highlighted.hc-layout-grid .hc-body { padding: 10px 12px; gap: 5px; }
.block-highlighted.hc-layout-grid .hc-title { font-size: 15px; }
.block-highlighted.hc-layout-grid .hc-desc { font-size: 13px; }

/* LIST */
.block-highlighted .hc-list { display: flex; flex-direction: column; }
.block-highlighted .hc-row { display: flex; gap: 16px; align-items: center; overflow: hidden; text-decoration: none; color: inherit; padding: 12px; transition: box-shadow .2s; }
.block-highlighted a.hc-row:hover { box-shadow: 0 6px 18px rgba(16,38,76,.10); }
.block-highlighted .hc-row-img { width: 130px; height: 88px; object-fit: cover; flex: none; border-radius: 8px; }
.block-highlighted .hc-row .hc-body { padding: 0; }

/* FILMSTRIP + CAROUSEL (horizontal scroll) */
.block-highlighted .hc-filmstrip,
.block-highlighted .hc-carousel .hc-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.block-highlighted .hc-filmstrip::-webkit-scrollbar,
.block-highlighted .hc-carousel .hc-track::-webkit-scrollbar { display: none; }
.block-highlighted .hc-filmstrip > .hc-card,
.block-highlighted .hc-carousel .hc-track > .hc-card { scroll-snap-align: start; }

.block-highlighted .hc-carousel { position: relative; padding: 0 52px; }
.block-highlighted .hc-arrow-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e0e6ed; background: #fff;
    color: #1a1a2e; font-size: 22px; line-height: 1; cursor: pointer; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.block-highlighted .hc-arrow-btn:hover { background: #f5f7fa; }
.block-highlighted .hc-arrow-btn.prev { left: 0; }
.block-highlighted .hc-arrow-btn.next { right: 0; }
.block-highlighted .hc-arrow-btn[hidden] { display: none; }

@media (max-width: 600px) {
    .block-highlighted .hc-carousel { padding: 0; }
    .block-highlighted .hc-arrow-btn { width: 38px; height: 38px; font-size: 18px; }
}

/* FEATURED split: big card (image left) on ~half, related grid (image on top) on the other half */
.block-highlighted .hc-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.block-highlighted .hcf-main { min-width: 0; }
.block-highlighted .hcf-big { display: flex; gap: 22px; align-items: center; }
.block-highlighted .hcf-big[hidden] { display: none; }
.block-highlighted .hcf-big-img { flex: 0 0 40%; max-width: 40%; }
.block-highlighted .hcf-big-img img { width: 100%; height: auto; border-radius: 12px; display: block; object-fit: cover; }
.block-highlighted .hcf-big-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.block-highlighted .hcf-eyebrow { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4b5563; background: #eef2f7; padding: 5px 12px; border-radius: 999px; }
.block-highlighted .hcf-big-body .hc-title { font-size: 22px; margin: 0; }
.block-highlighted .hcf-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 1.5px solid var(--primary, #88b121); color: var(--primary, #88b121); border-radius: 8px; font-weight: 700; text-decoration: none; margin-top: 4px; transition: background .2s, color .2s; }
.block-highlighted .hcf-btn:hover { background: var(--primary, #88b121); color: #fff; }

.block-highlighted .hcf-side { min-width: 0; }
.block-highlighted .hcf-rel-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4b5563; margin: 0 0 14px; }
.block-highlighted .hcf-grid { display: grid; gap: 16px; }
.block-highlighted .hcf-sm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 16px; background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.block-highlighted a.hcf-sm:hover { box-shadow: 0 8px 22px rgba(16,38,76,.10); transform: translateY(-2px); }
.block-highlighted .hcf-sm-img { height: 44px; display: flex; align-items: center; justify-content: center; }
.block-highlighted .hcf-sm-img img { max-height: 44px; max-width: 60px; object-fit: contain; display: block; }
.block-highlighted .hcf-sm .hc-title { font-size: 15px; margin: 0; }
.block-highlighted .hcf-sm .hc-desc { font-size: 13px; margin: 0; color: #6b7280; }
.block-highlighted .hcf-sm .hc-link { font-size: 13px; font-weight: 600; color: var(--primary, #88b121); margin-top: 4px; }

/* Category filter bar (clickable cards that show/hide posts) */
.block-highlighted .hc-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.block-highlighted .hc-filter-card { padding: 10px 20px; border: 1px solid #e6e9ee; border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; font-size: .9rem; color: #12203a; font-family: inherit; transition: background .2s, color .2s, border-color .2s; }
.block-highlighted .hc-filter-card:hover { border-color: var(--primary, #88b121); }
.block-highlighted .hc-filter-card.active { background: var(--primary, #88b121); color: #fff; border-color: var(--primary, #88b121); }
/* The filter chips became <a> links when filtering moved server-side, so they need the
   text-decoration/colour reset a <button> got for free. */
.block-highlighted .hc-filter-card { text-decoration: none; display: inline-block; }

/* Pager for the posts grid. Only rendered when a page size is set and there is more than one page. */
.block-highlighted .hc-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.block-highlighted .hc-page { padding: 9px 18px; border: 1px solid #e6e9ee; border-radius: 8px; background: #fff; color: #12203a; text-decoration: none; font-weight: 600; font-size: .9rem; }
.block-highlighted .hc-page:hover { border-color: var(--primary, #88b121); }
.block-highlighted .hc-page.disabled { opacity: .45; pointer-events: none; }
.block-highlighted .hc-page-of { font-size: .85rem; color: #5b6675; }

/* POSTS (Pages source) — blog-card grid */
.block-highlighted .hc-posts { display: grid; }
.block-highlighted .hc-post { overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.block-highlighted .hc-post-head { position: relative; height: 170px; }
.block-highlighted .hc-post-badge { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 16px; color: #fff; font-size: .72rem; font-weight: 700; }
.block-highlighted .hc-post-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.block-highlighted .hc-post-meta { font-size: .78rem; color: #8a94a3; margin-bottom: 8px; }
.block-highlighted .hc-post .hc-title { font-size: 1.05rem; line-height: 1.35; margin: 0 0 10px; }
.block-highlighted .hc-post .hc-desc { font-size: .9rem; line-height: 1.6; margin: 0 0 16px; flex: 1; }
.block-highlighted .hc-post .hc-link { font-weight: 700; font-size: .88rem; text-decoration: none; }

@media (max-width: 900px) {
    .block-highlighted .hc-featured { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
    .block-highlighted .hcf-big { flex-direction: column; align-items: stretch; }
    .block-highlighted .hcf-big-img { flex-basis: auto; max-width: 100%; }
    .block-highlighted .hcf-grid { grid-template-columns: 1fr !important; }
}

/* Public form — server-side validation summary. Shown only when a POST reached the server
   with a required field missing (the browser normally blocks that first). */
.error-box {
    padding: 14px 18px;
    margin: 0 0 16px 0;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 14px;
}

.error-box ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

/* ============================================================
   Tinted icons — safety net.
   "Tint icon a single color" renders the icon as an EMPTY <span>: the background is the chosen
   colour and a CSS mask carves the icon shape out of it. A <span> is display:inline by default,
   and width/height do not apply to inline boxes — so a tinted icon whose span forgot an explicit
   display collapses to zero size and vanishes silently. (The untinted path uses an <img>, which
   is replaced content and sizes correctly either way, which is why only tinting broke.)
   Every render site now sets its own display; this rule means forgetting one can never again
   make an icon disappear. Inline styles still win, so a span that wants block/flex keeps it.
   ============================================================ */
[style*="-webkit-mask:"],
[style*="mask-image:"] {
    display: inline-block;
}