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

    /* A card that is not a link must not behave like one. The hover lift is the only thing that
       says "click me" on a card whose read-more link is hidden, so it goes with the anchor. */
    .service-card.fc-static:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }

    .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-grid > .icon-row-item.ir-static:hover {
            transform: none;
        }

.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; }

/* One field per row on a phone, whatever the form block asks for. The column count is written
   inline on the grid, so this has to be !important to reach it. */
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr !important; }
}
/* 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; }
/* One published item has nothing to relate to, so the side column is not rendered at all
   and the featured card takes the full width instead of leaving half the row empty. */
.block-highlighted .hc-featured.hcf-solo { grid-template-columns: 1fr; }
.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;
}