#zd-lang-mobile { display: none; }

@media (max-width: 1024px) {

    #zd-lang-mobile {
        display: block;
        position: absolute;
        top: 50%;
        right: 76px;
        transform: translateY(-50%);
        z-index: 60;	
    }

    .zd-lang-select-mobile {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(0,0,0,.14);
        border-radius: 3px;
        color: #14161a;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        line-height: 1;
        padding: 8px 10px;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,.12);
    }
    .zd-lang-select-mobile:focus {
        outline: 2px solid rgba(0,0,0,.25);
        outline-offset: 1px;
    }
    .zd-lang-select-mobile option { color: #14161a; background: #fff; }

    /* only one control: hide the copy inside the hamburger menu */
    .zd-lang-item { display: none !important; }
}
	#zd-lang-mobile,
    #zd-lang-mobile * {
        pointer-events: auto !important;
    }
    #zd-lang-mobile { z-index: 9999; }


.zd-lb {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: rgba(8,8,10,.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
}
.zd-lb.is-open { display: flex; }
.zd-lb-fig {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.zd-lb-fig img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.zd-lb-fig figcaption {
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    opacity: .75;
    text-align: center;
    max-width: 60ch;
}
.zd-lb button {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 10px 16px;
    opacity: .7;
    transition: opacity .2s ease;
}
.zd-lb button:hover { opacity: 1; }
.zd-lb-close { top: 14px; right: 18px; font-size: 38px; }
.zd-lb-prev  { left: 10px;  top: 50%; transform: translateY(-50%); font-size: 52px; }
.zd-lb-next  { right: 10px; top: 50%; transform: translateY(-50%); font-size: 52px; }
@media (max-width: 600px) {
    .zd-lb { padding: 2vh 2vw; }
    .zd-lb-prev, .zd-lb-next { font-size: 38px; }
}

/* ============================================================
   POOLENG — site fixes
   1. Portfolio project pages: unreadable hero title
   2. Footer: black text on dark background
   3. Google Translate: grey gap + hide GTranslate's own widget
   4. Language switcher inside the main menu
   5. Hero title: fit the longest word
   6. Our Clients section
   ============================================================ */


/* ------------------------------------------------------------
   1. PORTFOLIO PROJECT PAGES — hero title contrast
   ------------------------------------------------------------ */
body.single-harington_portfolio #page-header,
body.single-harington_portfolio .page-header,
body.single-harington_portfolio .hero-holder,
body.single-harington_portfolio #hero-section {
    position: relative;
}

/* dark scrim so the title works on BOTH dark and bright hero photos */
body.single-harington_portfolio #page-header::after,
body.single-harington_portfolio .page-header::after,
body.single-harington_portfolio .hero-holder::after,
body.single-harington_portfolio #hero-section::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg,
                rgba(0,0,0,.55) 0%,
                rgba(0,0,0,.20) 42%,
                rgba(0,0,0,.65) 100%);
    pointer-events: none;
    z-index: 1;
}

body.single-harington_portfolio #page-header > *,
body.single-harington_portfolio .page-header > *,
body.single-harington_portfolio .hero-holder > *,
body.single-harington_portfolio #hero-section > * {
    position: relative;
    z-index: 2;
}

body.single-harington_portfolio #page-header h1,
body.single-harington_portfolio #page-header h2,
body.single-harington_portfolio .page-header h1,
body.single-harington_portfolio h1.entry-title,
body.single-harington_portfolio .hero-title,
body.single-harington_portfolio .title-holder h1,
body.single-harington_portfolio .title-holder h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
}


/* ------------------------------------------------------------
   2. FOOTER — force white text (survives translation)
   ------------------------------------------------------------ */
footer, footer *,
#footer, #footer *,
.site-footer, .site-footer * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

footer p, footer span, footer a, footer li, footer font,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
#footer p, #footer span, #footer a, #footer li, #footer font,
.site-footer p, .site-footer span, .site-footer a, .site-footer font {
    opacity: 1 !important;
    visibility: visible !important;
}

footer a:hover,
#footer a:hover,
.site-footer a:hover {
    opacity: .7;
}


/* ------------------------------------------------------------
   3. GOOGLE TRANSLATE — remove the grey gap it adds under the
      header, and hide GTranslate's own widget (we use our own)
   ------------------------------------------------------------ */
body,
body.translated-ltr,
body.translated-rtl {
    top: 0 !important;
    margin-top: 0 !important;
    position: static !important;
}

html {
    margin-top: 0 !important;
}

iframe.goog-te-banner-frame,
iframe.skiptranslate,
.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

.gtranslate_wrapper,
div[id^="gt-wrapper-"] {
    display: none !important;
}


/* ------------------------------------------------------------
   4. LANGUAGE SWITCHER inside the main menu
   ------------------------------------------------------------ */
.flexnav li.zd-lang-item {
    display: flex !important;
    align-items: center;
    margin-left: 24px;
}

.flexnav li.zd-lang-item > a {
    display: none !important;
}

.flexnav li.zd-lang-item select.zd-lang-select {
    background: rgba(0, 0, 0, .40) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    padding: 6px 10px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-family: inherit;
    max-width: 160px;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative;
    z-index: 10001;
}

.flexnav li.zd-lang-item select.zd-lang-select option {
    color: #111111 !important;
    background: #ffffff !important;
}

@media (max-width: 1025px) {
    .flexnav li.zd-lang-item {
        margin: 14px 0 0;
        justify-content: flex-start;
    }
    .flexnav li.zd-lang-item select.zd-lang-select {
        max-width: 200px;
    }
}

/* theme overlays that swallow clicks */
#magic-cursor,
.cd-cover-layer,
.cd-loading-bar,
.cd-transition-layer {
    pointer-events: none !important;
}


/* ------------------------------------------------------------
   5. HERO TITLE — fit the longest word, leave layout alone
   ------------------------------------------------------------ */
#hero-caption .hero-title {
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
    max-width: 100% !important;
	font-size:50px !important;
}

#hero-caption .hero-title span {
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    white-space: normal !important;
}

#hero {
    overflow-x: hidden !important;
}


/* ------------------------------------------------------------
   6. OUR CLIENTS section
   ------------------------------------------------------------ */
.zd-clients {
    background: #f5f5f5;
    padding: 90px 5vw;
}

.zd-clients-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.zd-clients-label {
    display: block;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #7a7a7a;
    margin-bottom: 14px;
}

.zd-clients-title {
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.2;
    color: #14161a;
    margin: 0 0 54px;
    max-width: 620px;
}

.zd-clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #e2e2e2;
    border: 1px solid #e2e2e2;
}

.zd-client {
    background: #ffffff;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.zd-client img {
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}

.zd-client:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.06);
}

@media (max-width: 1024px) {
    .zd-clients-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .zd-clients { padding: 60px 5vw; }
    .zd-clients-grid { grid-template-columns: repeat(2, 1fr); }
    .zd-client { padding: 16px; }
    .zd-client img { max-height: 42px; }
}



/* ---- Legal page tables ---- */
.zd-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 24px 0 12px;
}
.zd-cookie-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
}
.zd-cookie-table th,
.zd-cookie-table td {
    border: 1px solid rgba(0,0,0,.18);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}
.zd-cookie-table th {
    font-weight: 700;
    background: rgba(0,0,0,.04);
    white-space: nowrap;
}
.zd-cookie-table td:first-child {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   6. OUR CLIENTS section
   ------------------------------------------------------------ */
#main-page-content .zd-clients,
.zd-clients {
    background: #f5f5f5 !important;
    padding: 90px 5vw;
    margin: 60px 0;
}
.zd-clients-inner {
    max-width: 1240px;
    margin: 0 auto;
}

/* text colours — the dark-content template forces white headings,
   so these need both the id prefix and !important to win */
#main-page-content .zd-clients .zd-clients-label,
.zd-clients .zd-clients-label {
    display: block;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #7a7a7a !important;
    -webkit-text-fill-color: #7a7a7a !important;
    margin-bottom: 14px;
}
#main-page-content .zd-clients .zd-clients-title,
.zd-clients .zd-clients-title,
.zd-clients h2.zd-clients-title {
    font-size: clamp(22px, 2.6vw, 38px) !important;
    line-height: 1.25 !important;
    color: #14161a !important;
    -webkit-text-fill-color: #14161a !important;
    margin: 0 0 48px !important;
    max-width: 720px;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* grid */
.zd-clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #e2e2e2;
    border: 1px solid #e2e2e2;
}
.zd-client {
    background: #ffffff;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    min-width: 0;
}
.zd-client img {
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .62;
    transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.zd-client:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.06);
}

/* ---- responsive ---- */
@media (max-width: 1200px) {
    .zd-clients-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .zd-clients-grid { grid-template-columns: repeat(3, 1fr); }
    .zd-client img { max-height: 50px; }
}
@media (max-width: 600px) {
    #main-page-content .zd-clients,
    .zd-clients { padding: 55px 5vw; margin: 40px 0; }
    #main-page-content .zd-clients .zd-clients-title,
    .zd-clients .zd-clients-title { margin-bottom: 32px !important; }
    .zd-clients-grid { grid-template-columns: repeat(2, 1fr); }
    .zd-client { padding: 16px; }
    .zd-client img { max-height: 40px; }
}
@media (max-width: 360px) {
    .zd-client { padding: 12px; }
    .zd-client img { max-height: 34px; }
}


/* ------------------------------------------------------------
   7. WHO WE ARE page
   ------------------------------------------------------------ */
.zd-wwa {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4vw 40px;
}
.zd-wwa .zd-wwa-lead {
    font-size: clamp(21px, 2.6vw, 34px) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin: 0 0 34px !important;
    max-width: 900px;
    text-transform: none !important;
}
.zd-wwa .zd-wwa-body {
    font-size: clamp(15px, 1.3vw, 17px) !important;
    line-height: 1.85 !important;
    margin: 0 0 26px !important;
    max-width: 780px;
    opacity: .82;
    text-transform: none !important;
}
.zd-wwa .zd-wwa-label {
    display: block;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .55;
    margin: 54px 0 16px;
}
.zd-wwa .zd-wwa-close {
    font-size: clamp(17px, 1.8vw, 22px) !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 40px 0 0 !important;
    max-width: 880px;
    padding-top: 34px;
    border-top: 1px solid rgba(128,128,128,.28);
    text-transform: none !important;
}

/* capability grid */
.zd-caps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(128,128,128,.28);
    border: 1px solid rgba(128,128,128,.28);
    margin: 34px 0 44px;
}
.zd-cap {
    background: transparent;
    backdrop-filter: none;
    padding: 30px 26px 32px;
    min-width: 0;
    position: relative;
    isolation: isolate;
}
.zd-cap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(128,128,128,.07);
    z-index: -1;
}
.zd-cap .zd-cap-num {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    opacity: .45;
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}
.zd-cap h3 {
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.zd-cap p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    opacity: .78;
    text-transform: none !important;
}

@media (max-width: 900px) {
    .zd-caps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .zd-wwa { padding: 0 5vw 30px; }
    .zd-caps { grid-template-columns: 1fr; margin: 26px 0 34px; }
    .zd-cap { padding: 24px 22px 26px; }
    .zd-wwa .zd-wwa-label { margin-top: 40px; }
}
/* ------------------------------------------------------------
   8. HISTORY timeline + GOVERNANCE extras
   ------------------------------------------------------------ */
.zd-tl {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 4vw 40px;
}
.zd-tl-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0 28px;
    padding: 28px 0;
    border-top: 1px solid rgba(128,128,128,.28);
}
.zd-tl-item:last-child { border-bottom: 1px solid rgba(128,128,128,.28); }
.zd-tl-year {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    opacity: .5;
    font-variant-numeric: tabular-nums;
}
.zd-tl-body h3 {
    font-size: clamp(16px, 1.5vw, 20px) !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.zd-tl-body p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    opacity: .78;
    text-transform: none !important;
}

/* governance sub-heading + document links */
.zd-wwa h3.zd-sub {
    font-size: clamp(16px, 1.5vw, 20px) !important;
    margin: 34px 0 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
.zd-doc-link {
    display: inline-block;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    opacity: .85;
    transition: opacity .2s ease;
}
.zd-doc-link:hover { opacity: 1; }
.zd-doc-link::before { content: "→ "; }

@media (max-width: 600px) {
    .zd-tl { padding: 0 5vw 30px; }
    .zd-tl-item { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
    .zd-tl-year { font-size: 22px; }
}

/* ------------------------------------------------------------
   9. ABOUT dropdown (sub-menu)
   ------------------------------------------------------------ */
header:has(#logo) .flexnav li.menu-item-has-children {
    position: relative;
}

/* the panel */
header:has(#logo) .flexnav li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    margin: 0;
    padding: 14px 0 !important;
    list-style: none;
    background: rgba(10, 12, 16, 0.96) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 44px rgba(0,0,0,.45);
    z-index: 10050;
}

/* every item must be visible — the theme hides these by default */
header:has(#logo) .flexnav li ul.sub-menu {
    overflow: hidden;
}
header:has(#logo) .flexnav li ul.sub-menu li {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
}
header:has(#logo) .flexnav li ul.sub-menu li a,
header:has(#logo) .flexnav li ul.sub-menu li a span,
header:has(#logo) .flexnav li ul.sub-menu li a .before-span {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: .4px !important;
    text-transform: none !important;
    white-space: nowrap;
}
header:has(#logo) .flexnav li ul.sub-menu li a span,
header:has(#logo) .flexnav li ul.sub-menu li a .before-span {
    padding: 0 !important;
}
header:has(#logo) .flexnav li ul.sub-menu li a {
    padding: 11px 24px !important;
    transition: background .2s ease;
}
header:has(#logo) .flexnav li ul.sub-menu li a:hover {
    background: rgba(255,255,255,.08) !important;
}
/* mobile — expand inline instead of hovering */
@media (max-width: 1025px) {
    header:has(#logo) .flexnav li ul.sub-menu {
        position: static !important;
        transform: none !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 4px 0 14px 18px !important;
    }
    header:has(#logo) .flexnav li ul.sub-menu li a {
        padding: 8px 0 !important;
        font-size: 20px !important;
        opacity: .85 !important;
    }
}

/* ===== 10. GOVERNANCE — certificate grid ===== */
.zd-certs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 34px 0 44px;
    padding: 0;
    list-style: none;
}
.zd-cert { margin: 0; min-width: 0; position: static !important; }
.zd-cert > a { display: block; text-decoration: none; border: 0; }
.zd-cert img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 724 / 1024;
    object-fit: cover;
    object-position: top center;
    background: #fff;
    border: 1px solid rgba(128,128,128,.35);
    border-radius: 4px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.zd-cert > a:hover img {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
/* beat the theme's absolutely-positioned figure caption */
.zd-cert figcaption {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    background: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-transform: none !important;
}
.zd-cert-std  { display: block; font-weight: 600; letter-spacing: .02em; }
.zd-cert-desc { display: block; opacity: .72; }
.zd-cert-view { display: block; margin-top: 6px; font-size: 13px; opacity: .6; }

.zd-cert-placeholder .zd-cert-box {
    aspect-ratio: 724 / 1024;
    border: 1px dashed rgba(128,128,128,.55);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-size: 13px;
    opacity: .55;
}

/* small sub-heading (Whistleblowing) */
.zd-wwa-label-sm { font-size: .72em !important; margin-top: 28px !important; }

@media (max-width: 1024px) { .zd-certs { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  { .zd-certs { grid-template-columns: 1fr; gap: 28px; } }


/* ===== 11. HISTORY — founder block ===== */
.zd-founder {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0 36px;
    align-items: start;
    max-width: 900px;
    margin: 8px auto 48px;
    padding: 0 4vw;
}
.zd-founder-photo { margin: 0; min-width: 0; }
.zd-founder-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    filter: grayscale(100%);
}
.zd-founder-text > p:first-child { margin-top: 0 !important; }

@media (max-width: 700px) {
    .zd-founder {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5vw;
    }
    .zd-founder-photo { max-width: 200px; }
}

/* ============================================================
   POOLENG — Portfolio page (dropdown filters + featured cards)
   ============================================================ */

/* ---------- FILTER DROPDOWNS — custom, premium, no browser blue ---------- */
.zd-portfolio-filters {
    max-width: 1200px;
    margin: 0 auto 55px;
    padding: 10px 4vw 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.zd-filter-heading {
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #14161a;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.zd-dropdown { position: relative; display: inline-block; }

.zd-dropdown-toggle {
    appearance: none;
    background: #14161a;
    color: rgba(255,255,255,.75);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    font-family: inherit;
    padding: 14px 46px 14px 24px;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    min-width: 240px;
    text-align: left;
    position: relative;
    transition: background .25s ease;
}
.zd-dropdown-toggle.has-value { color: #ffffff; }
.zd-dropdown-toggle:hover { background: #23262c; }

.zd-dropdown-toggle::after {
    content: "";
    position: absolute;
    right: 20px; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease;
    pointer-events: none;
}
.zd-dropdown.open .zd-dropdown-toggle::after { transform: translateY(-30%) rotate(-135deg); }

/* dropdown panel */
.zd-dropdown-menu {
    list-style: none;
    margin: 10px 0 0;
    padding: 8px 0;
    position: absolute;
    left: 0; top: 100%;
    min-width: 100%;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}
.zd-dropdown.open .zd-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.zd-dropdown-menu li {
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.zd-dropdown-menu li:hover {
    background: #14161a;
    color: #ffffff;
}
.zd-dropdown-menu li.active {
    font-weight: 700;
    color: #14161a;
}
.zd-dropdown-menu li.active:hover { color: #ffffff; }

@media (max-width: 600px) {
    .zd-portfolio-filters { gap: 12px; }
    .zd-filter-heading { font-size: 19px; }
    .zd-dropdown { width: 100%; }
    .zd-dropdown-toggle { width: 100%; min-width: 100%; }
}

/* ---------- PORTFOLIO GRID (FLEX — theme-safe) ---------- */
.portfolio-wrap.zd-clean-grid {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4vw;
    height: auto !important;
}
.portfolio-wrap.zd-clean-grid .portfolio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 26px !important;
    align-items: flex-start !important;
    height: auto !important;
}
#itemsWrapper { height: auto !important; }

/* card = 2 columns; first project = full-width featured */
.portfolio-wrap.zd-clean-grid .item {
    flex: 0 0 calc(50% - 13px) !important;
    max-width: calc(50% - 13px) !important;
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    height: auto !important; min-height: 0 !important;
    margin: 0 !important; opacity: 1 !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,.12);
    aspect-ratio: 3 / 2;
    background: #111;
}
.portfolio-wrap.zd-clean-grid .item:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    aspect-ratio: 21 / 9;
}

/* inner wrappers fill the card */
.portfolio-wrap.zd-clean-grid .item-parallax,
.portfolio-wrap.zd-clean-grid .item-appear,
.portfolio-wrap.zd-clean-grid .item-content,
.portfolio-wrap.zd-clean-grid .item-wrap-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: inherit;
}

/* image cover + hover zoom */
.portfolio-wrap.zd-clean-grid .item-wrap-image img,
.portfolio-wrap.zd-clean-grid .item-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform .7s cubic-bezier(.2,.6,.2,1) !important;
}
.portfolio-wrap.zd-clean-grid .item:hover .item-image { transform: scale(1.07) !important; }
.portfolio-wrap.zd-clean-grid .grid__item-img--large { display: none !important; }

/* dark gradient overlay */
.portfolio-wrap.zd-clean-grid .item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 72%);
    z-index: 2; pointer-events: none;
}

/* caption overlay */
.portfolio-wrap.zd-clean-grid .item-caption-wrapper {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    transform: none !important;
    padding: 28px 30px;
    z-index: 3;
    text-align: left;
}
.portfolio-wrap.zd-clean-grid .item-caption { position: relative !important; transform: none !important; }
.portfolio-wrap.zd-clean-grid .item-title {
    font-size: 25px; font-weight: 700; color: #fff;
    line-height: 1.22; letter-spacing: .5px; margin: 0 0 6px;
    transform: translateY(8px); transition: transform .4s ease;
}
.portfolio-wrap.zd-clean-grid .item:hover .item-title { transform: translateY(0); }
.portfolio-wrap.zd-clean-grid .item-cat span {
    font-size: 13px; color: rgba(255,255,255,.9);
    text-transform: uppercase; letter-spacing: 2.5px; font-weight: 600;
}
.portfolio-wrap.zd-clean-grid .item:first-child .item-title { font-size: 40px; }

/* clickable overlay */
.portfolio-wrap.zd-clean-grid .item-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .portfolio-wrap.zd-clean-grid .portfolio { gap: 16px !important; }
    .portfolio-wrap.zd-clean-grid .item,
    .portfolio-wrap.zd-clean-grid .item:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3;
    }
    .portfolio-wrap.zd-clean-grid .item-title,
    .portfolio-wrap.zd-clean-grid .item:first-child .item-title { font-size: 21px; }
    .portfolio-wrap.zd-clean-grid .item-caption-wrapper { padding: 20px 22px; }
}
@media (max-width: 600px) {
    .zd-portfolio-filters { gap: 12px; }
    .zd-filter-heading { font-size: 19px; }
    .zd-select-wrap { width: 100%; }
    .zd-fselect { min-width: 100%; width: 100%; }
}
/* ============================================================
   POOLENG Header — persistent dark background + white logo/menu
   ============================================================ */

/* 1) Header ko hamesha semi-transparent dark background do */
header:has(#logo) {
    background: rgba(10, 12, 16, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    z-index: 500;
}

/* 2) Logo hamesha white version dikhe, black version kabhi nahi */
header:has(#logo) #logo .black-logo { display: none !important; }
header:has(#logo) #logo .white-logo { display: block !important; }

/* 3) Menu text/links hamesha white (dark bg ke against readable) */
header:has(#logo) #header-container nav a,
header:has(#logo) #header-container .menu a,
header:has(#logo) #header-container ul li a,
header:has(#logo) .button-text span,
header:has(#logo) .button-text { color: #ffffff !important; }

/* 4) Burger menu icon (3 lines) hamesha white */
header:has(#logo) #menu-burger span { background-color: #ffffff !important; }

/* 5) Mobile/responsive — same rules already apply, header full-width rahega */
@media (max-width: 780px) {
    header:has(#logo) { padding: 10px 0; }
}



/* ---- Sticky header ---- */
header:has(#logo) {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 12, 16, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
header:has(#logo) #logo,
header:has(#logo) #logo img {
    transform: none !important;
    opacity: 1 !important;
}
header:has(#logo) #logo .black-logo { display: none !important; }
header:has(#logo) #logo .white-logo { display: block !important; }
header:has(#logo) #header-container nav a,
header:has(#logo) #header-container .menu a,
header:has(#logo) #header-container ul li a,
header:has(#logo) .button-text span,
header:has(#logo) .button-text { color: #ffffff !important; }
header:has(#logo) #menu-burger span { background-color: #ffffff !important; }

/* ---- White-space gap fix: exact header height CSS variable se ---- */
#content-scroll {
    padding-top: var(--zd-header-h, 120px);
}

/* Translator ko CONTACT ke baju mein, menu ki same line mein */
.flexnav li.zd-lang-item {
    display: flex !important;
    align-items: center;
    margin-left: 22px;
}
.flexnav li.zd-lang-item > a { display: none !important; } /* koi khali link na dikhe */
.flexnav li.zd-lang-item, .flexnav li.zd-lang-item * { color: #ffffff !important; }
.flexnav li.zd-lang-item .gtranslate_wrapper { display: inline-block; }

/* Mobile menu mein bhi neat dikhe */
@media (max-width: 1025px) {
    .flexnav li.zd-lang-item { margin: 12px 0 0; justify-content: flex-start; }
}





/* GTranslate native dropdown — dark styling + guaranteed clickable */
.flexnav li.zd-lang-item select,
.flexnav li.zd-lang-item .goog-te-combo {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    padding: 5px 8px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    cursor: pointer;
    pointer-events: auto !important;
    position: relative;
    z-index: 10001;
    max-width: 150px;
}
.flexnav li.zd-lang-item select option { color: #111111 !important; } /* dropdown khulne par options readable */

@media (max-width: 1025px) {
    .flexnav li.zd-lang-item { margin: 12px 0; }
    .flexnav li.zd-lang-item select { max-width: 200px; }
}




/* Mobile fullscreen menu ko dark background do — white items visible ho */
@media (max-width: 1025px) {
    header:has(#logo) .nav-height,
    header:has(#logo) nav .outer,
    header:has(#logo) nav .inner,
    header:has(#logo) ul.flexnav {
        background: #14161a !important;
    }
    header:has(#logo) ul.flexnav li a { color: #ffffff !important; }
    header:has(#logo) ul.flexnav li.zd-lang-item { padding: 14px 0; }
}
/* ============================================================
   Pooleng contact form (WPForms #3916) — Prague-style styling
   Add via WPCode → Add Snippet → Custom CSS (Auto Insert, Site Wide).
   ============================================================ */

/* Field layout: Name + Phone on one row, then Email, then Message */
#wpforms-3916 .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
#wpforms-3916 .wpforms-field {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}
#wpforms-3916-field_1-container { order: 1; width: calc(50% - 8px); } /* Name  */
#wpforms-3916-field_3-container { order: 2; width: calc(50% - 8px); } /* Phone */
#wpforms-3916-field_2-container { order: 3; width: 100%; }            /* Email */
#wpforms-3916-field_4-container { order: 4; width: 100%; }            /* Message */

/* Hide the anti-spam honeypot fields */
#wpforms-3916-field_5-container,
#wpforms-3916-field_6-container { display: none !important; }

/* Labels — small & subtle */
#wpforms-3916 .wpforms-field-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8a8a8a !important;
    margin-bottom: 6px !important;
}
#wpforms-3916 .wpforms-required-label { color: #c0392b !important; }

/* Inputs — flat light-gray, borderless (Prague look) */
#wpforms-3916 input[type="text"],
#wpforms-3916 input[type="email"],
#wpforms-3916 input[type="tel"],
#wpforms-3916 textarea {
    background: #f1f1f1 !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    padding: 15px 16px !important;
    font-size: 15px !important;
    color: #222 !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
#wpforms-3916 input:focus,
#wpforms-3916 textarea:focus {
    border-color: #c0392b !important;
    background: #ececec !important;
    outline: none !important;
}
#wpforms-3916 textarea { min-height: 150px; resize: vertical; }

/* Phone field (country-flag input) */
#wpforms-3916 .iti { width: 100%; display: block; }
/* leave room for the country flag so it doesn't overlap the number */
#wpforms-3916 input[type="tel"] { padding-left: 52px !important; }
#wpforms-3916 .iti__selected-country { z-index: 2; }

/* Submit button → "SEND →" text link, right-aligned */
#wpforms-3916 .wpforms-submit-container {
    text-align: right;
    margin-top: 18px !important;
}
#wpforms-3916 button.wpforms-submit {
    background: none !important;
    border: none !important;
    color: #111 !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 6px 0 !important;
    width: auto !important;
    cursor: pointer;
}
#wpforms-3916 button.wpforms-submit::after { content: " \2192"; }
#wpforms-3916 button.wpforms-submit:hover { color: #c0392b !important; }

/* Responsive: stack Name + Phone on small screens */
@media (max-width: 600px) {
    #wpforms-3916-field_1-container,
    #wpforms-3916-field_3-container { width: 100%; }
}
/* ============================================================
   POOLENG footer — Prague-style dark layout
   Add via WPCode → Custom CSS (Auto Insert, Site Wide),
   or Appearance → Customize → Additional CSS.
   ============================================================ */

/* Make the theme's hidden/reveal footer a normal visible block.
   :has(.zd-footer) keeps showcase/carousel portfolio footers untouched. */
footer.hidden:has(.zd-footer) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    height: auto !important;
    transform: none !important;
}
footer:has(.zd-footer) #footer-container {
    height: auto !important;
    position: static !important;
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- Footer wrapper (dark + background image) ---- */
#footer-container .zd-footer {
    position: relative;
    background-color: #14161a !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    text-transform: none;
    overflow: hidden;
}
#footer-container .zd-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 13, 0.82);
    z-index: 0;
    pointer-events: none; /* overlay must never eat clicks */
}

/* ============================================================
   CLICKABILITY FIX
   The theme's custom cursor / transition layers sit on top of the
   page and block ALL footer clicks (links look fine but do nothing).
   Turn off their pointer-events and lift the footer above them.
   ============================================================ */
#magic-cursor,
#ball,
#ball-drag-x,
#ball-drag-y,
#ball-loader,
.cd-cover-layer,
#clone-image,
#rotate-device {
    pointer-events: none !important;
}
#footer-container .zd-footer {
    z-index: 100;
}
#footer-container .zd-footer-inner,
#footer-container .zd-footer a,
#footer-container .zd-footer .zd-link,
#footer-container .zd-social a {
    position: relative;
    z-index: 3;
    pointer-events: auto !important;
}
#footer-container .zd-footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 6vw 45px;
}

/* ============================================================
   TEXT COLORS — high specificity (#footer-container prefix) so
   the theme's dark text color can't override them.
   ============================================================ */
#footer-container .zd-footer-logo,
#footer-container .zd-footer-logo a { color: #ffffff !important; }
#footer-container .zd-footer-desc  { color: rgba(255,255,255,0.72) !important; }
#footer-container .zd-getintouch   { color: rgba(255,255,255,0.6) !important; }
#footer-container .zd-contact-line { color: rgba(255,255,255,0.95) !important; }
#footer-container a.zd-contact-line:hover { color: #ffffff !important; }
#footer-container .zd-copyright    { color: rgba(255,255,255,0.65) !important; }
#footer-container .zd-social a     { color: #ffffff !important; }

/* ---- Top row layout ---- */
#footer-container .zd-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}
#footer-container .zd-footer-left { flex: 1 1 480px; max-width: 560px; }
#footer-container .zd-footer-right { text-align: right; flex: 0 1 auto; }

/* Logo (text or image) */
#footer-container .zd-footer-logo {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 32px;
}
#footer-container .zd-footer-logo img {
    max-width: 190px;
    height: auto;
    display: block;
}

/* Description */
#footer-container .zd-footer-desc {
    font-size: 15px;
    line-height: 1.9;
    max-width: 460px;
    margin: 0;
}

/* Get in touch + contact */
#footer-container .zd-getintouch {
    font-size: 15px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 26px;
    font-weight: 500;
}
#footer-container .zd-contact { display: flex; flex-direction: column; gap: 10px; }
#footer-container .zd-contact-line {
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
}
#footer-container a.zd-contact-line:hover { text-decoration: underline; }

/* Divider */
#footer-container .zd-footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    margin: 55px 0 30px;
}

/* Bottom row: copyright + social */
#footer-container .zd-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}
#footer-container .zd-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    letter-spacing: .4px;
    text-transform: none;
    font-weight: 500;
    line-height: 1.6;
}
#footer-container .zd-copyright .zd-sep {
    opacity: .4;
}
#footer-container .zd-copyright a.zd-legal-link {
    color: rgba(255,255,255,.65) !important;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
#footer-container .zd-copyright a.zd-legal-link:hover {
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,.55);
}
@media (max-width: 480px) {
    #footer-container .zd-copyright { gap: 6px; font-size: 12px; }
}
#footer-container .zd-social { display: flex; gap: 12px; }
#footer-container .zd-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    transition: all 0.2s ease;
}
#footer-container .zd-social a svg {
    width: 17px;
    height: 17px;
    display: block;
}
#footer-container .zd-social a:hover {
    background: #ffffff;
    color: #14161a !important;
    border-color: #ffffff;
}

/* ---- Responsive ---- */
@media (max-width: 780px) {
    #footer-container .zd-footer-inner { padding: 50px 24px 32px; }
    #footer-container .zd-footer-top { flex-direction: column; gap: 30px; }
    /* stop the left column from stretching tall (this caused the big gap) */
    #footer-container .zd-footer-left { flex: 0 0 auto; max-width: 100%; }
    #footer-container .zd-footer-right { flex: 0 0 auto; text-align: left; }
    #footer-container .zd-footer-desc { max-width: 100%; }
    #footer-container .zd-footer-logo { font-size: 30px; }
    #footer-container .zd-contact { align-items: flex-start; }
    #footer-container .zd-footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
    #footer-container .zd-footer-divider { margin: 34px 0 24px; }
}
/*
 * SLIDER VERSION — replaces the plain grid with a horizontally
 * swipeable/scrollable row of the same cards. No plugin, no JS
 * library needed — pure CSS scroll-snap (works with touch swipe
 * on mobile and trackpad/shift+scroll on desktop out of the box).
 *
 * Add this via WPCode (Admin -> Code Snippets -> Add Snippet ->
 * "Custom CSS", set to Auto Insert on the Blogs page), or paste
 * into Appearance -> Customize -> Additional CSS.
 *
 * Keep this in addition to (after) your existing post-grid-cards.css
 * card styling — this only changes the *layout* of the container.
 */

/* Turn the grid into a horizontal scroll row */
.post-grid-cards .wp-block-post-template {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

/* Fixed-width cards so they don't stretch to fill the row */
.post-grid-cards .wp-block-post {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Optional: slim custom scrollbar (Chrome/Edge/Safari) */
.post-grid-cards .wp-block-post-template::-webkit-scrollbar {
    height: 6px;
}
.post-grid-cards .wp-block-post-template::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.post-grid-cards .wp-block-post-template::-webkit-scrollbar-track {
    background: transparent;
}

/* Optional: prev/next arrow buttons (used with the JS snippet) */
.post-slider-wrapper {
    position: relative;
}
.post-slider-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-slider-arrow.prev { left: -8px; }
.post-slider-arrow.next { right: -8px; }

/* Small phones: slightly narrower cards so the next card "peeks" in nicely */
@media (max-width: 480px) {
    .post-grid-cards .wp-block-post {
        flex: 0 0 260px;
    }
    .post-slider-arrow {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
}
/*
 * Add to Appearance -> Customize -> Additional CSS
 * (or your harington-child theme's style.css)
 *
 * Give the Query Loop block the additional CSS class "post-grid-cards"
 * in the block editor's Advanced panel for this to apply.
 */

.post-grid-cards .wp-block-post {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.post-grid-cards .wp-block-post-featured-image {
    margin: 0;
}

.post-grid-cards .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.post-grid-cards .wp-block-post > :not(.wp-block-post-featured-image) {
    padding-left: 20px;
    padding-right: 20px;
}

.post-grid-cards .wp-block-post > *:last-child {
    padding-bottom: 24px;
}

.post-grid-cards .wp-block-post-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 18px 0 8px;
}

.post-grid-cards .wp-block-post-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.post-grid-cards .wp-block-post-title a:hover {
    text-decoration: underline;
}

.post-grid-cards .wp-block-post-excerpt {
    color: #6b6b6b;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.post-grid-cards .read-more-link {
    display: block;
    margin-top: 10px;
    color: #c0392b;
    font-weight: 700;
    text-decoration: none;
}

.post-grid-cards .read-more-link:hover {
    text-decoration: underline;
}

/* Optional: force single column on small screens */
@media (max-width: 600px) {
    .post-grid-cards .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}

body #magic-cursor #ball:not([style*="background-color: transparent"]):not([style*="background-color: rgba(153, 153, 153, 0)"]){
	background-color: #5eaade !important;
	border-color: #5eaade !important;
}
#hero-image-wrapper{
	transform: none !important;
}
.hero-below-caption #hero.has-image{
	padding-bottom: 0!important;
	height: 100vh !important;
}
.hero-below-caption #hero.has-image:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
}
.zoom-wrapper-gallery{
	list-style: none !important;
}
.hero-footer-right{
	display: none !important;
}
#itemsWrapper {
    transition: opacity 0.5s ease-in-out;
}
.trigger-item.active-item .item-cat span:before{
	content: none !important;
}
.trigger-item.active-item, .trigger-item.active-item *{
	position: initial !important;
	transform: none !important;
	height: auto;
}
.trigger-item.active-item{
	width: calc( 50% - 60px ) !important;
}
.trigger-item.active-item .item-parallax{
	width: 100% !important;
}
.portfolio:has(.trigger-item.active-item){
	display: flex !important;
	flex-wrap: wrap !important;
	height: initial !important;
}
.parallax-grid .active-item::after{
	content: none !important;
}
.active-item .item-wrap-image:has(img) + .grid__item-img{
	display: none !important;
} 
.cat-filter-btn{
	opacity: 0.5;
	margin-right: 10px;
}
.cat-filter-btn.active{
	opacity: 1;
}
.cat-filter-btn:last-of-type{
	margin-right: 0;
}
.home .entry-meta li a span,
.home .page-nav-caption *,
.home footer *{
	color:#000 !important;
}
#magic-cursor #ball:not([style*="background-color: transparent"]):not([style*="background-color: rgba(153, 153, 153, 0)"]){
	border-color: #205cb6 !important;
	background-color: #205cb6 !important;
}
.home #hero-image-wrapper:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
}
.home.hero-below-caption #hero.has-image {
    padding-bottom: 0;
    height: 100vh;
}
.home.hero-below-caption #hero.has-image #hero-caption{
	height: 100vh !important;
}
.home .hero-caption{
	padding-top: 100px;
}
.home #hero-image-wrapper{
	top: 0 !important;
	transform: none !important;
}
.home #hero-image-wrapper video{
	object-fit: cover;
	transform: none !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 100vh;
}
.portfolio-table thead, .portfolio-table th,
.portfolio-table tr,
.portfolio-table td{
	color: #fff !important;
	background-color: transparent !important;
}
main:has(#page-content.dark-content){
	background-color: #ebebeb !important;
}
.entry-date{
	display: none !important;
}
.filter-wrapper{
	display: flex;
	flex-wrap: wrap;
}
#main-page-content:has(.filter-wrapper){
	overflow: initial !important;
}
.filter-wrapper button{
	margin: 5px;
}
.filter-wrapper button:first-of-type{
	margin-left: 0;
}
.portfolio-posts{
	width: 60%;
}
.portfolio-filters{
	width: 40%;
}
.portfolio-filters form{
	width: 100%;
}
.portfolio-wrapper{
    display: flex;
    flex-wrap: wrap;	
}
.filter-tile-group h4 {
	margin-bottom: 10px;
	font-weight: bold;
}

.filter-tile {
    display: block;
    margin: 5px 0;
    padding: 10px;
    background-color: transparent;
    border: 2px solid #ccc;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
    border-radius: 5px;
    transition: background-color 0.3s;
	color: #fff;
}
.filter-tile.active-filter{
	background-color: #fff;
	border-color: #fff;
	color: #000;
}
.filter-tile:hover {
		border-color: #fff;
    background-color: #fff;
		color: #000;
}

.selected {
    background-color: #0073aa;
    color: #fff;
}

.portfolio-thumbnail-wrapper {
    position: relative;
    overflow: hidden;
}

.filter-tile {
    margin: 5px;
    padding: 10px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 0px;
}
.portfolio-item{
	position: relative;
	width: fit-content;
}
.portfolio-thumbnail-wrapper{
	display: none;
	position: absolute;
	width: 200px;
	bottom: 0;
	left: 0;
}
.portfolio-item:hover .portfolio-thumbnail-wrapper{
	display: block;
}
@media screen and (max-width: 768px){
	.portfolio-posts{
		margin-top: 50px;
		width: 100%;
	}
	.portfolio-filters{
		width: 100%;
	}
}






/* Blog post card title ka size chhota karo */
.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a {
    font-size: 20px !important;
    line-height: 1.35 !important;
}
@media (max-width: 600px) {
    .wp-block-query .wp-block-post-title,
    .wp-block-query .wp-block-post-title a {
        font-size: 18px !important;
    }
}




/* =========================================
   MOBILE HEADER + LOGO + HAMBURGER FIX
========================================= */

@media screen and (max-width: 1024px) {

  /* Main mobile header */
  header.inherit-header,
  header.classic-menu,
  header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(15, 18, 22, 0.88) !important;
    border: 0 !important;
    z-index: 9999 !important;
  }

  /* Header inner container */
  header #header-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
  }

  /* Logo wrapper */
  header #logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 150px !important;
    max-width: 150px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 10002 !important;
  }

  header #logo a {
    position: relative !important;
    display: block !important;
    width: 150px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }

  header #logo img {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-58%) !important;
    object-fit: contain !important;
  }

  /* Hamburger outer wrapper */
  header .button-wrap.right.menu {
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    width: 34px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 10003 !important;
  }

  header .button-wrap .icon-wrap,
  header .button-wrap .button-icon,
  header .button-wrap .parallax-element,
  header #burger-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 34px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Convert menu icon into three straight lines */
  header #menu-burger {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 34px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    transform: none !important;
  }

  header #menu-burger span {
    position: static !important;
    display: block !important;
    width: 34px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  /* Hide unwanted text and arrow */
  header .button-text,
  header #menu-burger .touch-button,
  header #menu-burger .navicon {
    display: none !important;
  }

  /* Fullscreen mobile menu */
  header nav.menu-main-menu-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 105px 28px 40px !important;
    background: #121316 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 9998 !important;
  }

  header nav .nav-height,
  header nav .outer,
  header nav .inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile menu list */
  header #menu-main-menu {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  header #menu-main-menu > li {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header #menu-main-menu > li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    color: #ffffff !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.05 !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  header #menu-main-menu .before-span {
    opacity: 1 !important;
    transform: none !important;
  }

  header #menu-main-menu span {
    color: #ffffff !important;
  }

  /* Language selector */
  header .zd-lang-item {
    width: 100% !important;
    margin-top: 25px !important;
    padding: 0 !important;
  }

  header .gt_selector {
    width: 100% !important;
    max-width: 220px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
  }

  header .gt_selector option {
    color: #111111 !important;
    background: #ffffff !important;
  }

  /* Stop hero/header unwanted top spacing */
  #hero,
  #hero-caption,
  #hero-image-wrapper,
  #hero-bg-image {
    margin-top: 0 !important;
  }
}


/* =========================================
   SMALL MOBILE PHONES
========================================= */

@media screen and (max-width: 480px) {

  header.inherit-header,
  header.classic-menu,
  header {
    height: 72px !important;
    min-height: 72px !important;
  }

  header #header-container {
    height: 72px !important;
    min-height: 72px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  header #logo,
  header #logo a {
    width: 145px !important;
    max-width: 145px !important;
    height: 72px !important;
  }

  header #logo img {
    width: 145px !important;
    max-width: 145px !important;
    transform: translateY(-58%) !important;
  }

  header .button-wrap.right.menu {
    right: 20px !important;
    width: 31px !important;
    height: 24px !important;
  }

  header .button-wrap .icon-wrap,
  header .button-wrap .button-icon,
  header .button-wrap .parallax-element,
  header #burger-wrapper {
    width: 31px !important;
    height: 24px !important;
  }

  header #menu-burger {
    width: 31px !important;
    height: 22px !important;
  }

  header #menu-burger span {
    width: 31px !important;
  }

  header nav.menu-main-menu-container {
    padding: 100px 22px 35px !important;
  }

  header #menu-main-menu > li > a {
    font-size: 37px !important;
  }
}


/* Social icons — white on all devices */
.zd-social a {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.zd-social a svg {
  width: 16px !important;
  height: 16px !important;
  color: #ffffff !important;
}

/* Instagram outline icon */
.zd-social a[aria-label="Instagram"] svg,
.zd-social a[aria-label="Instagram"] svg * {
  fill: none !important;
  stroke: #ffffff !important;
}

/* LinkedIn and Facebook filled icons */
.zd-social a[aria-label="LinkedIn"] svg,
.zd-social a[aria-label="LinkedIn"] svg *,
.zd-social a[aria-label="Facebook"] svg,
.zd-social a[aria-label="Facebook"] svg * {
  fill: #ffffff !important;
  stroke: none !important;
}

/* Hover */
.zd-social a:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}


/* Mobile hero title proper alignment */
@media screen and (max-width: 768px) {

  #hero-caption {
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    padding: 90px 22px 40px !important;
    box-sizing: border-box !important;
  }

  #hero-caption .inner {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
  }

  #hero-caption .hero-title-wrapper {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

   #hero-caption .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    font-size: 44px !important;
    line-height: 0.98 !important;
    letter-spacing: -2px !important;
    text-align: left !important;
    overflow: visible !important;
    word-break: normal !important;
  }

  #hero-caption .hero-title span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    transform: none !important;
  }
}
@media screen and (max-width: 480px) {

  #hero-caption {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #hero-caption .hero-title {
    font-size: 45px !important;
    line-height: 1.02 !important;
    letter-spacing: -1.5px !important;
  }
}

@media screen and (max-width: 1024px) {
    header #logo img { 
        top: 22% !important;
	}
}		



footer {
    text-align: left;
}






//* Final mobile hero video layer fix */
@media screen and (max-width: 1024px) {

  #hero {
    position: relative !important;
    overflow: hidden !important;
  }

  #hero-image-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    background-image: none !important;
  }

  #hero-image-wrapper video.mobile-hero-video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Hide theme fallback image on mobile */
  #hero-image-wrapper img,
  #hero-image-wrapper .hero-bg-image,
  #hero-bg-image {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Dark overlay */
  #hero-image-wrapper::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* Text above video */
  #hero-styles,
  #hero-caption,
  #hero-footer {
    position: relative !important;
    z-index: 3 !important;
  }
}

/* ===== POOLENG TYPOGRAPHY START =====
   One size scale for the running text and the headings of the pages (set 11 Oct 2026; edit the numbers here to change it).
   Text 16px on a phone to 18px on a laptop, line height 1.6. Headings follow a perfect-fourth scale (each step 1.333 x the one below) on large screens
   and a tighter one on phones, so every heading is bigger than the one below it and than the text, on every screen. Sizes grow smoothly between a 390px phone and a 1440px laptop and stop there.
   Only font sizes (and the line height of running text) are set here: no colour, spacing, weight or layout. Hero captions, menus and the footer keep their own sizes. */
:root{
  --pl-text:clamp(1rem,0.9536rem + 0.1905vw,1.125rem);   /* 16px phone to 18.0px laptop */
  --pl-h5:clamp(1.1875rem,1.0714rem + 0.4762vw,1.5rem);   /* 19px phone to 24.0px laptop */
  --pl-h4:clamp(1.375rem,1.1429rem + 0.9524vw,2rem);   /* 22px phone to 32.0px laptop */
  --pl-h3:clamp(1.625rem,1.2381rem + 1.5873vw,2.6667rem);   /* 26px phone to 42.7px laptop */
  --pl-h2:clamp(1.9375rem,1.3365rem + 2.4656vw,3.5556rem);   /* 31px phone to 56.9px laptop */
  --pl-h1:clamp(2.25rem,1.3249rem + 3.7954vw,4.7407rem);   /* 36px phone to 75.9px laptop */
}
/* running text */
body p.wp-block-paragraph, body .zd-wwa-body, body .zd-wwa-lead, body .zd-wwa-close, body .pooleng-about-stats .about-text p,
body .zd-tl-body p, body .wp-block-list li, body .zd-lang-en p, body .zd-lang-it p { font-size:var(--pl-text) !important; line-height:1.6 !important; }
/* headings of the pages */
body h1.wp-block-heading { font-size:var(--pl-h1) !important; }
body h2.wp-block-heading, body h2.zd-wwa-label:not(.zd-wwa-label-sm) { font-size:var(--pl-h2) !important; }
body h3.wp-block-heading { font-size:var(--pl-h3) !important; }
body h4.wp-block-heading { font-size:var(--pl-h4) !important; }
body h5.wp-block-heading { font-size:var(--pl-h5) !important; }
body h6.wp-block-heading { font-size:var(--pl-text) !important; }
/* nothing smaller than 13px (small print, labels): fixes a heading that was smaller than the text and legal links at 12px */
body h3.zd-wwa-label-sm, body a.zd-legal-link, body .pooleng-about-stats .stat-item p { font-size:13px !important; }
/* ===== POOLENG TYPOGRAPHY END ===== */

/* ===== POOLENG POLISH START =====
   Small refinements found by comparing every page type with the original website at 1920, 1440, 1366, 1024, 768 and 390 px (13-14 Oct 2026).
   Nothing else depends on this block: edit or delete it in Appearance > Customize > Additional CSS. */

/* 1. The staggered page title ("Our / Portfolio"). The theme pushed the second line right by a fixed 300-400 px, which reads as a mistake (the client asked twice):
      both words now start on the same left line. (Tablets and phones already had no offset.) */
@media (min-width:1025px){
  html .indent-title .hero-title span:last-child{left:0}
}

/* 1b. Page titles start at the same left edge as the logo and the text below them. The theme pulls every big title 0.7vw to the left (13 px on a wide screen) so that lettering 170 px high
       looks aligned; the titles of this site are 50 px, so the pull showed as a title sticking out to the left of the logo. Now the same 2 px the theme itself uses for the next-page title.
       (The scrolling "marquee" titles of the demo pages keep their own rule; at 768 px and below nothing changes.) */
html .hero-title-wrapper{margin-left:-2px}
/* Measured on every page type at 390 / 768 / 1024 / 1440 / 1920 px: the logo starts at 20 / 24 / 24 / 60 / 80 px and the page title started at 24 / 22 / 38 / 58 / 78 px.
   These bring the title's left edge to the logo's on phones and small tablets too (the 2 px above is the letter's own side space on large screens). */
/* phones: the page's own rule sets the hero inset to 24 px with !important (logo: 20 px; the letter adds ~2 px of its own space) */
@media (max-width:480px){ html body #hero-caption{ padding-left:18px !important } }
@media (min-width:601px) and (max-width:768px){ html .hero-title-wrapper{margin-left:0} }
@media (min-width:769px) and (max-width:1024px){ html .hero-title-wrapper{margin-left:-16px} }

/* 2. Keyboard users get a visible focus ring in the brand blue on links and buttons (mouse users see no change). */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid #5cacdc;outline-offset:3px}

/* 3. Selected text in the brand blue. */
::selection{background:#5cacdc;color:#fff}
::-moz-selection{background:#5cacdc;color:#fff}

/* 4. Paragraphs: no single word alone on the last line (browsers that do not know the rule ignore it). */
p{text-wrap:pretty}
/* 5. Small light-grey labels ("ABOUT POOLENG", "NUMBERS", "OUR CLIENTS") were 2.4-3.9:1 on the light grey sections: same size and spacing, darker grey (4.8:1). */
html body .pooleng-section-title span, html body .about-text span { color:#666 }
html body #main-page-content .zd-clients .zd-clients-label, html body .zd-clients .zd-clients-label { color:#666 !important }

/* 6. Italian home page, the four paragraphs next to the numbers: they carried the label style (13 px, 6 px letter spacing, #999: 2.4:1) and were hard to read.
      Now running text like the English page (contrast 10:1). The English page is not touched. */
html body .zd-lang-it .pooleng-about-stats .about-text p { letter-spacing:.03em; color:#333; margin-bottom:14px }

/* 7. English contact form labels: 12 px #8a8a8a (3:1) -> 13 px #555 (6.4:1), same capitals, weight and spacing. */
html body #wpforms-3916 .wpforms-field-label { color:#555 !important; font-size:13px !important }

/* 9. Copyright line in the footer: 12 px -> 13 px (same colour, same place). */
html body .zd-copy-text{ font-size:13px }

/* 8. Footer links (Privacy / Cookie): a 22 px high target is hard to hit on a phone; same look, 40 px tap area. */
@media (max-width:1024px){ html body a.zd-legal-link{ display:inline-block; padding:9px 0 } }
/* ============ 10. PHONE / TABLET MENU (screens up to 1024 px) ============ */
@media screen and (max-width:1024px){
  /* 10a. THE ITALIAN MENU. The previous styling named only the English menu (#menu-main-menu, .menu-main-menu-container), so on Italian pages the full-screen
     menu was never built: it sat above the screen and no tap reached it. The Italian menu now gets the same full-screen menu. */
  header nav.menu-menu-principale-italiano-container{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; height:100vh !important; height:100dvh !important; min-height:100vh !important; margin:0 !important; padding:105px 28px 40px !important; background:#121316 !important; box-sizing:border-box !important; overflow-x:hidden !important; overflow-y:auto !important; z-index:9998 !important }
  header #menu-menu-principale-italiano{ width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; text-align:left !important }
  header #menu-menu-principale-italiano > li{ width:100% !important; height:auto !important; margin:0 !important; padding:0 !important }
  header #menu-menu-principale-italiano > li > a{ display:block !important; width:100% !important; height:auto !important; margin:0 !important; color:#fff !important; font-weight:400 !important; text-transform:uppercase !important; text-align:left !important }
  header #menu-menu-principale-italiano .before-span{ opacity:1 !important; transform:none !important }
  header #menu-menu-principale-italiano span{ color:#fff !important }

  /* 10b. SIZE of the menu words (was 37-48 px, far too big): 24-34 px, with a comfortable 48 px tap row. */
  html body header #menu-main-menu > li > a, html body header #menu-menu-principale-italiano > li > a{ font-size:clamp(24px,6.4vw,34px) !important; line-height:1.15 !important; letter-spacing:-.3px !important; padding:11px 0 !important }
  html body header nav.menu-main-menu-container, html body header nav.menu-menu-principale-italiano-container{ padding-top:96px !important }

  /* 10c. SUB-PAGES (About: Who we are / History / Governance) are always shown under their parent, which itself is a normal link. No hidden arrow to find.
     (The selectors start with header:has(#logo) #header-container on purpose: the older rules do, with two ids, and a rule of the same weight that comes later wins.) */
  html body header:has(#logo) #header-container .flexnav .touch-button{ display:none !important }
  html body header:has(#logo) #header-container nav.open .flexnav li.item-with-ul > a, html body header:has(#logo) #header-container nav.open .flexnav li.menu-item-has-children > a{ pointer-events:auto !important }  /* only while the menu is open: a closed menu must not catch taps */
  html body header:has(#logo) #header-container .flexnav li.menu-item-has-children > ul.sub-menu{ display:block !important; position:static !important; width:100% !important; height:auto !important; max-height:none !important; opacity:1 !important; visibility:visible !important; overflow:visible !important; transform:none !important; margin:0 0 6px !important; padding:0 0 4px 2px !important; background:none !important; border:0 !important; box-shadow:none !important }
  html body header:has(#logo) #header-container .flexnav ul.sub-menu > li{ display:block !important; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; opacity:1 !important; visibility:visible !important; transform:none !important }
  html body header:has(#logo) #header-container .flexnav ul.sub-menu > li > a{ display:block !important; width:100% !important; padding:10px 0 10px 16px !important; font-size:17px !important; line-height:1.3 !important; letter-spacing:.2px !important; text-transform:none !important; opacity:1 !important; color:rgba(255,255,255,.74) !important; -webkit-text-fill-color:rgba(255,255,255,.74) !important; border-left:1px solid rgba(255,255,255,.18) !important; white-space:normal !important }
  html body header:has(#logo) #header-container nav.open .flexnav ul.sub-menu > li > a{ pointer-events:auto !important }

  /* 10d. LANGUAGE: the two languages are shown side by side (current one filled), one tap each; the label "English"/"Italiano" above them is not needed. */
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item{ margin-top:22px !important; padding:20px 0 0 !important; border-top:1px solid rgba(255,255,255,.14) !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item > a{ display:none !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item > ul.sub-menu{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:10px !important; margin:0 !important; padding:0 !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item > ul.sub-menu > li{ width:auto !important; flex:0 0 auto !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item > ul.sub-menu > li > a{ width:auto !important; min-width:112px !important; text-align:center !important; padding:11px 22px !important; font-size:14px !important; font-weight:500 !important; letter-spacing:.08em !important; text-transform:uppercase !important; opacity:1 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background:transparent !important; border:1px solid rgba(255,255,255,.5) !important; border-radius:40px !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item > ul.sub-menu > li.current-lang > a{ background:#fff !important; color:#121316 !important; -webkit-text-fill-color:#121316 !important; border-color:#fff !important; font-weight:700 !important }

  /* 10e. The bar over the page: no live blur (it made the bar flicker white over big pictures on some phones); same dark colour, a little more solid. */
  html body header, html body header.inherit-header, html body header.classic-menu{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(15,18,22,.96) !important }
}
@media screen and (max-width:480px){
  html body header nav.menu-main-menu-container, html body header nav.menu-menu-principale-italiano-container{ padding:92px 22px 35px !important }
}

/* 10f. PHONE HELD SIDEWAYS (short screens): the whole menu fits at once, in two columns. */
@media screen and (max-width:1024px) and (max-height:520px){
  html body header nav.menu-main-menu-container, html body header nav.menu-menu-principale-italiano-container{ padding:78px 28px 16px !important }
  html body header #menu-main-menu, html body header #menu-menu-principale-italiano{ display:block !important; column-count:2 !important; column-gap:44px !important }
  html body header #menu-main-menu > li, html body header #menu-menu-principale-italiano > li{ break-inside:avoid !important; -webkit-column-break-inside:avoid !important }
  html body header #menu-main-menu > li > a, html body header #menu-menu-principale-italiano > li > a{ font-size:22px !important; padding:7px 0 !important }
  html body header:has(#logo) #header-container .flexnav ul.sub-menu > li > a{ font-size:15px !important; padding:6px 0 6px 14px !important }
  html body header:has(#logo) #header-container .flexnav li.menu-item-has-children > ul.sub-menu{ margin:0 0 4px !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item{ column-span:all !important; margin-top:10px !important; padding-top:12px !important }
  html body header:has(#logo) #header-container .flexnav li.pll-parent-menu-item > ul.sub-menu > li > a{ padding:8px 18px !important; font-size:13px !important }
}

/* ============ 11. PROJECT CARDS: a tap or click anywhere on a card opens the project ============ */
/* The title/category layer covers the lower 40-45% of every card and swallowed the tap: only the top of the picture was a link. */
html body .portfolio-wrap.zd-clean-grid .item-caption-wrapper{ pointer-events:none !important }
html body .portfolio-wrap.zd-clean-grid .item-caption-wrapper .item-title{ text-shadow:0 1px 12px rgba(0,0,0,.45) }
html body .portfolio-wrap.zd-clean-grid .item-caption-wrapper .item-cat span{ text-shadow:0 1px 8px rgba(0,0,0,.6) }

/* ============ 12. DESKTOP MENU just above the phone break (1025-1199 px): Italian words are longer; same look, tighter spacing so it never touches the logo or wraps ============ */
@media screen and (min-width:1025px) and (max-width:1199px){
  html body header ul.flexnav > li{ padding-left:16px !important; padding-right:16px !important }
}

/* ============ 13. FILTERS on phones: both buttons the same width, inside the screen ============ */
@media (max-width:600px){
  html body .zd-portfolio-filters{ width:100% !important; box-sizing:border-box !important }
  html body .zd-dropdown{ display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important }
  html body .zd-dropdown-toggle{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important }
}
/* ============ 14. GHOST LINKS under the header (desktop): the theme hides the drop-down menus of the header (About, language) with "visibility", but their links stay clickable, so a click on page
   content just below the header (a project card, a filter button) opened /history or /who-we-are instead. A closed menu is not clickable now; the theme adds .flexnav-show while the
   menu is open (hover), then everything works as before. The phone menu has its own rules above and is not touched. ============ */
@media screen and (min-width:1025px){
  html body header ul.sub-menu:not(.flexnav-show), html body header ul.sub-menu:not(.flexnav-show) a{ pointer-events:none !important }
}
/* ===== POOLENG POLISH END ===== */