/* ============================================================
   Layerz — brand overrides on top of the Orixo theme (main.css)
   Loaded after main.css + white.css. Navy #12284B / Gold #BD9E70.
   ============================================================ */

:root {
    --lz-navy: #12284B;
    --lz-gold: #BD9E70;
}

/* ---- Logo sizing -------------------------------------------------
   Header uses the wide lockup (layerz-group.png, 1080x407, 2.65:1).
   Footer and preloader use the square lockup (layerz-group-vertical-white.png,
   500x500, 1:1). Cap height in every slot so nothing renders at natural pixel
   size. width:auto keeps ratio. */
.navbar-brand img,
.offcanvas-menu .header-top .logo img,
.mobile-topbar .logo img,
/* The mobile slide-out was missing from this list, so its logo rendered at
   natural pixel width (only capped below 470px by main.css). */
.mobile-menu-area .mobile-menu-main .logo img {
    max-height: 64px;
    width: auto;
}
.footer-logo img {
    max-height: 52px;
    width: auto;
}
/* Preloader logo: one fixed-width column so the base image, the fill
   overlay and the progress bar all share exactly the same box.
   The theme sets .pre-logo width with !important, so this must too.
   Widening this scales the logo and the progress bar together, which is the
   point of the shared box. 240px is 20% up from 200px; the square lockup
   renders 240x240. */
#preloader .lz-pre-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    max-width: 72vw;
    margin: 0 auto;
}
#preloader .pre-logo {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 0;
}
#preloader .pre-logo-img {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
}
#preloader .pre-logo-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- Service catalogue: icon badge on service.php cards ---------- */
.wt-svc-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border-radius: 14px;
    background: #f6f8fa;
}
.wt-svc-badge i {
    font-size: 68px;
    color: var(--lz-navy);
    line-height: 1;
}

/* ---- Sub-service cards on service-category.php ------------------- */
.wt-svc-card-2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 28px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e7eaf0;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}
.wt-svc-card-2:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(18,40,75,.12);
    border-color: var(--lz-gold);
}
.wt-svc-card-2 .wt-svc-ico,
.wt-scp-copy .wt-svc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: rgba(189,158,112,.12);
    color: var(--lz-gold);
    font-size: 26px;
}
.wt-svc-card-2 .title {
    color: var(--lz-navy);
    font-size: 21px;
    margin-bottom: 10px;
}
.wt-svc-card-2 p {
    color: #5a6675;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.wt-svc-card-2 .wt-svc-more {
    margin-top: auto;
    font-weight: 600;
    color: var(--lz-navy);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wt-svc-card-2 .wt-svc-more i { color: var(--lz-gold); transition: transform .3s; }
.wt-svc-card-2:hover .wt-svc-more i { transform: translate(3px,-3px); }

/* Category page intro paragraph */
.wt-scp-intro {
    max-width: 70ch;
    margin: 0 auto 48px;
    text-align: center;
    color: #5a6675;
    font-size: 17px;
    line-height: 1.7;
}
.wt-scp-copy .wt-svc-ico { margin-bottom: 26px; }

/* ---- Home services list (project-section-3 adapted to $LZ_SERVICES) ---- */
.project-section-3 .approach-box .thumb { overflow: hidden; border-radius: 12px; }
.project-section-3 .lz-svc-tile {
    width: 100%;
    height: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
}
.project-section-3 .lz-svc-tile i {
    font-size: 52px;
    color: var(--lz-navy);
}
.project-section-3 .approach-box .content span { color: var(--lz-gold); font-weight: 600; }
.project-section-3 .approach-box .content h3 a { color: var(--lz-navy); }

/* ---- Preloader: thin progress bar under the logo (ring + brackets removed) ---- */
#preloader .lz-loader-track {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    height: 3px;
    /* Lifted 24px (10% of the 240px logo box) towards the logo. The artwork has
       a 21% transparent tail, so ~50px of visual gap remains even at 0. */
    margin: 0 auto;
    border-radius: 3px;
    background: rgba(189,158,112,.18);
    overflow: hidden;
}
#preloader .lz-loader-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--lz-gold);
}

/* ---- Mobile bottom navigation: floating pill with raised call button ---- */
.lz-mobilebar { display: none; }
@media (max-width: 767.98px) {
    .lz-mobilebar {
        display: flex;
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 2147482500;
        align-items: center;
        justify-content: space-between;
        gap: 2px;
        height: 66px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(18,40,75,.07);
        box-shadow: 0 10px 34px rgba(18,40,75,.16);
    }
    .lz-mobilebar .lz-mb-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .01em;
        line-height: 1;
        color: #7c8695;
        text-decoration: none;
        transition: color .22s ease;
    }
    .lz-mobilebar .lz-mb-item i { font-size: 19px; line-height: 1; }
    .lz-mobilebar .lz-mb-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .lz-mobilebar .lz-mb-item.active { color: var(--lz-navy); }
    .lz-mobilebar .lz-mb-item.active i { color: var(--lz-gold); }
    .lz-mobilebar .lz-mb-item:active { opacity: .55; }

    /* Raised centre call button */
    .lz-mobilebar .lz-mb-call {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin: 0 6px;
        text-decoration: none;
    }
    .lz-mb-callring {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        margin-top: -26px;
        border-radius: 50%;
        background: linear-gradient(160deg, var(--lz-navy) 0%, #1c3a6b 100%);
        border: 4px solid #fff;
        box-shadow: 0 10px 22px rgba(18,40,75,.30);
        color: var(--lz-gold);
        font-size: 20px;
        transition: transform .25s cubic-bezier(.22,1,.36,1);
    }
    .lz-mobilebar .lz-mb-call:active .lz-mb-callring { transform: scale(.93); }
    .lz-mobilebar .lz-mb-callring i { color: #fff; }
    .lz-mb-calllabel {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        color: var(--lz-navy);
    }

    /* Clear space so the floating bar never covers content */
    .footer-section-3 { padding-bottom: 104px; }

    /* WhatsApp floats bottom left, clear of the pill bar */
    .wt-float.wt-whatsapp {
        display: flex;
        left: 18px;
        right: auto;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        width: 50px;
        height: 50px;
        z-index: 2147482400;
    }
    .wt-float.wt-scrolltop {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        right: 18px;
    }
}

/* ---- Footer: 4 column layout ---- */
.lz-footer-cols .footer-widget-items { height: 100%; }
.lz-footer-brand .footer-logo { display: inline-block; margin-bottom: 18px; }
/* Pull the blurb up ~2 lines (14px/24.5) into the logo art's transparent tail,
   so it sits just under the visible wordmark instead of ~80px below it.
   Footer is outside the header zoom, so these px are 1:1. */
.lz-footer-brand p { margin-top: -39px; margin-bottom: 0; max-width: 34ch; }  /* was -49; scaled ~0.8 to the smaller logo's tail */
/* One clean line above the social row, set explicitly rather than inherited. */
.lz-footer-brand .social-icon { margin-top: 24px; }
.lz-footer-cols .widget-head h3 { margin-bottom: 18px; }
.lz-footer-cols .footer-contact-list li { margin-bottom: 12px; }
.lz-footer-cols .social-icon a { margin-right: 10px; }
@media (max-width: 991.98px) {
    .lz-footer-cols > [class*="col-"] { margin-bottom: 10px; }
}

/* ---- Contact form ---- */
.contact-form-box .form-clt { margin-bottom: 4px; }
.contact-form-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lz-navy);
}
.contact-form-box select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #fff;
    color: #5a6675;
}
.contact-form-box .form-message { margin-top: 14px; font-size: 14px; }
.contact-form-box .form-message.success { color: #1c7c4a; }
.contact-form-box .form-message.error { color: #b3261e; }
.lz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= Header dropdowns ================= */
/* The nav <ul> is the positioning context, so the wide dropdown can span
   exactly from the first nav item to the last (Home to Contact). */

.lz-has-drop { position: relative; }
.lz-drop-caret { font-size: 10px; margin-left: 5px; transition: transform .3s; }
.lz-has-drop:hover .lz-drop-caret { transform: rotate(180deg); }
.lz-dropdown {
    position: absolute;
    top: 100%;
    padding-top: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
    z-index: 999;
}
.lz-has-drop:hover .lz-dropdown,
.lz-has-drop:focus-within .lz-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Wide dropdown: static li so the panel anchors to the nav <ul> and matches
   its full width, aligned with the first and last nav links. */
/* Beat the theme's .header-main .navbar .navbar-nav .nav-item {position:relative} */
.header-main .navbar .navbar-nav .nav-item.lz-drop-wide { position: static; }
.lz-drop-wide .lz-dropdown {
    left: 0;
    right: 0;
    transform: translateY(12px);
}
.lz-drop-wide:hover .lz-dropdown,
.lz-drop-wide:focus-within .lz-dropdown { transform: translateY(0); }

/* Small drawer (Services): narrow panel under its own nav item. */
.lz-drop-sm .lz-dropdown {
    left: 50%;
    width: 268px;
    transform: translate(-50%, 12px);
}
.lz-drop-sm:hover .lz-dropdown,
.lz-drop-sm:focus-within .lz-dropdown { transform: translate(-50%, 0); }


.lz-dropdown-head {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-dropdown-col ul { list-style: none; margin: 0; padding: 0; }
.lz-dropdown-col li { margin-bottom: 9px; }
.lz-dropdown-col li a {
    font-size: 14px;
    line-height: 1.4;
    color: var(--lz-navy);
    text-decoration: none;
    transition: color .25s;
}
.lz-dropdown-col li a:hover { color: var(--lz-gold); }
.lz-dropdown-cta p { font-size: 13px; line-height: 1.6; color: #5a6675; margin-bottom: 14px; }
.lz-dropdown-btn {
    display: block;
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--lz-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .25s, color .25s;
}
.lz-dropdown-btn:hover { background: var(--lz-gold); color: var(--lz-navy); }
.lz-dropdown-btn.alt { background: rgba(189,158,112,.14); color: var(--lz-navy); }
.lz-dropdown-btn.alt:hover { background: var(--lz-gold); }
@media (max-width: 1199.98px) { .lz-dropdown { display: none; } }

/* ================= Licence pages ================= */
.lz-lic-intro p, .lz-lic-body p {
    max-width: 72ch;
    margin-bottom: 18px;
    font-size: 17px;
    line-height: 1.75;
    color: #4a5666;
}
.lz-lic-subhead {
    margin: 28px 0 14px;
    font-weight: 700;
    color: var(--lz-navy);
}
.lz-lic-aside {
    position: sticky;
    top: 118px;
    padding: 34px 30px;
    border-radius: 18px;
    background: linear-gradient(158deg, #16305a 0%, var(--lz-navy) 55%, #0f2340 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 26px 60px rgba(9,20,38,.28);
    color: #fff;
}
.lz-lic-aside-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-lic-price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 14px; }
.lz-lic-from { font-size: 14px; color: rgba(255,255,255,.6); }
.lz-lic-price strong { font-size: 38px; font-weight: 700; line-height: 1.1; color: #fff; letter-spacing: -.01em; }
.lz-lic-aside-note { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0 0 22px; }

/* Gold CTA: high contrast on the navy card (the old navy-on-navy button was invisible) */
.lz-aside-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 22px;
    border-radius: 999px;
    background: var(--lz-gold);
    color: var(--lz-navy);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .3s ease;
}
#smooth-content .lz-aside-cta,
#smooth-content .lz-aside-cta:hover,
#smooth-content .lz-aside-cta span,
#smooth-content .lz-aside-cta i { color: var(--lz-navy) !important; }
.lz-aside-cta i { transition: transform .3s ease; }
.lz-aside-cta:hover {
    background: #cbaf82;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(189,158,112,.35);
    color: var(--lz-navy);
}
.lz-aside-cta:hover i { transform: translate(3px,-3px); }

.lz-lic-aside-links { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.lz-lic-aside-links li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14px; }
.lz-lic-aside-links li:last-child { margin-bottom: 0; }
.lz-lic-aside-links i { width: 18px; text-align: center; color: var(--lz-gold); }
.lz-lic-aside-links a { color: rgba(255,255,255,.9); text-decoration: none; transition: color .25s ease; }
.lz-lic-aside-links a:hover { color: var(--lz-gold); }

.lz-check-list { list-style: none; margin: 0; padding: 0; column-gap: 40px; }
@media (min-width: 768px) { .lz-check-list { column-count: 2; } }
.lz-check-list li {
    break-inside: avoid;
    margin-bottom: 13px;
    padding-left: 30px;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: #4a5666;
}
.lz-check-list li i {
    position: absolute;
    left: 0; top: 4px;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(189,158,112,.16);
    color: var(--lz-gold);
    font-size: 9px;
}

.lz-table-wrap { overflow-x: auto; }
.lz-compare { width: 100%; min-width: 560px; border-collapse: collapse; }
.lz-compare th, .lz-compare td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid #e7eaf0;
    font-size: 15px;
}
.lz-compare thead th {
    background: var(--lz-navy);
    color: #fff;
    font-weight: 600;
    border-bottom: none;
}
.lz-compare thead th:first-child { border-radius: 10px 0 0 0; }
.lz-compare thead th:last-child { border-radius: 0 10px 0 0; }
.lz-compare tbody td:first-child { font-weight: 600; color: var(--lz-navy); }
.lz-compare tbody tr:nth-child(even) { background: #f8f9fb; }

.lz-steps { counter-reset: lzstep; }
.lz-step {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid #e7eaf0;
}
.lz-step:last-child { border-bottom: none; }
.lz-step-num {
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 700;
    color: var(--lz-gold);
    line-height: 1.3;
    min-width: 46px;
}
.lz-step-body h3 { font-size: 20px; margin-bottom: 8px; color: var(--lz-navy); }
.lz-step-body p { font-size: 16px; line-height: 1.7; color: #4a5666; margin: 0; }

.lz-why-box {
    padding: 44px 40px;
    border-radius: 16px;
    background: #f8f9fb;
    border: 1px solid #e7eaf0;
}
.lz-why-box p { max-width: 70ch; margin: 18px 0 24px; font-size: 17px; line-height: 1.75; color: #4a5666; }

/* ================= Cost calculator ================= */
.lz-calc-field { margin-bottom: 26px; }
.lz-calc-field > label {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--lz-navy);
}
.lz-calc-field select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #fff;
    color: #4a5666;
    font-size: 15px;
}
.lz-calc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575.98px) { .lz-calc-choices { grid-template-columns: 1fr; } }
.lz-calc-choice { cursor: pointer; margin: 0; }
.lz-calc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lz-calc-choice span {
    display: block;
    padding: 16px 18px;
    border: 1px solid #e7eaf0;
    border-radius: 10px;
    transition: border-color .25s, background .25s;
}
.lz-calc-choice strong { display: block; color: var(--lz-navy); font-size: 15px; }
.lz-calc-choice em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: #7a8595; }
.lz-calc-choice input:checked + span { border-color: var(--lz-gold); background: rgba(189,158,112,.08); }
.lz-calc-addons { display: grid; gap: 10px; }
.lz-calc-addon { cursor: pointer; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: #4a5666; }
.lz-calc-addon input { width: 17px; height: 17px; accent-color: #BD9E70; }

.lz-calc-result {
    position: sticky;
    top: 110px;
    padding: 32px 28px;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--lz-navy) 0%, #1c3a6b 100%);
    color: #fff;
}
.lz-calc-result-label {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--lz-gold);
}
.lz-calc-range {
    margin: 12px 0 22px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
}
.lz-calc-range em { font-style: normal; font-size: 15px; font-weight: 400; color: rgba(255,255,255,.6); margin: 0 6px; }
.lz-calc-breakdown { list-style: none; margin: 0 0 20px; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.lz-calc-breakdown li {
    display: flex; justify-content: space-between; gap: 16px;
    margin-bottom: 11px; font-size: 14px; color: rgba(255,255,255,.8);
}
.lz-calc-breakdown li strong { color: #fff; white-space: nowrap; }
.lz-calc-note { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.lz-calc-wa {
    display: block; margin-top: 14px; text-align: center;
    font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
}
.lz-calc-wa i { color: #25D366; margin-right: 6px; }
.lz-calc-wa:hover { color: var(--lz-gold); }

/* ================= Cost calculator popup ================= */
body.lz-modal-open { overflow: hidden; }
.lz-modal[hidden] { display: none; }
.lz-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lz-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 38, .58);
    backdrop-filter: blur(2px);
    animation: lzFade .25s ease;
}
.lz-modal-dialog {
    position: relative;
    width: min(1040px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(9, 20, 38, .35);
    animation: lzRise .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes lzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lzRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.lz-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #eef0f4;
}
.lz-modal-eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-modal-title { margin: 0; font-size: 24px; color: var(--lz-navy); }
.lz-modal-close {
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid #e7eaf0;
    border-radius: 50%;
    background: #fff;
    color: var(--lz-navy);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.lz-modal-close:hover { background: var(--lz-navy); color: #fff; border-color: var(--lz-navy); }
.lz-modal-body { padding: 24px 28px; }
.lz-modal-foot {
    padding: 0 28px 22px;
    text-align: center;
}
.lz-modal-foot a {
    font-size: 13px;
    font-weight: 600;
    color: var(--lz-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lz-modal-foot a:hover { color: var(--lz-gold); }

/* Popup instance runs tighter than the full page one */
.lz-calc-instance--modal .lz-calc-result { margin-top: 0; }
@media (max-width: 991.98px) {
    .lz-modal { padding: 12px; }
    .lz-modal-head { padding: 18px 18px 14px; }
    .lz-modal-title { font-size: 20px; }
    .lz-modal-body { padding: 18px; }
    .lz-modal-foot { padding: 0 18px 18px; }
}

/* ================= Footer: minimalist, thin type ================= */
.footer-section-3 .footer-area-3 { background-image: none !important; background: var(--lz-navy); }
.lz-footer-cols .footer-widget-items,
.lz-footer-cols p,
.lz-footer-cols a,
.lz-footer-cols li {
    font-weight: 300;
    letter-spacing: .01em;
}
.lz-footer-brand p {
    font-size: 14px;
    line-height: 1.75;
    color: #ffffff;
}
.lz-footer-cols .widget-head h3 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-bottom: 20px;
}
.lz-footer-cols .gt-list-area li,
.lz-footer-cols .footer-contact-list li {
    margin-bottom: 11px;
    font-size: 14.5px;
    line-height: 1.6;
}
.lz-footer-cols .gt-list-area li a,
.lz-footer-cols .footer-contact-list a,
.lz-footer-cols .footer-contact-list li {
    color: rgba(255,255,255,.78);
    transition: color .25s;
}
.lz-footer-cols .gt-list-area li a:hover,
.lz-footer-cols .footer-contact-list a:hover { color: var(--lz-gold); }
.lz-footer-cols .footer-contact-list li i {
    color: var(--lz-gold);
    opacity: .8;
    margin-right: 9px;
    font-size: 13px;
}
/* Subdue the contact icons so the column reads as the same quiet type as the
   Company/Services link lists: dimmer, smaller, and a fixed width so the text
   after each icon aligns into a clean left edge. The address li has no icon, so
   it hangs to that same edge. #smooth-content prefix to beat the ID-weighted
   colour rule at layerz.css:1492. */
#smooth-content .footer-section-3 .lz-footer-cols .footer-contact-list li i,
.lz-footer-cols .footer-contact-list li i {
    color: rgba(255, 255, 255, .40);
    opacity: 1;
    font-size: 12px;
    width: 16px;
    margin-right: 10px;
    text-align: center;
    flex: none;
}
.lz-footer-cols .footer-contact-list li {
    display: flex;
    align-items: baseline;
}

/* Social icons: white, thin outline, gold on hover */
.social-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    transition: background .25s, border-color .25s, color .25s;
}
.social-icon a i { color: #fff; transition: color .25s; }
.social-icon a:hover { background: var(--lz-gold); border-color: var(--lz-gold); }
.social-icon a:hover i { color: var(--lz-navy); }

.footer-bottom-5 { border-top: 1px solid rgba(255,255,255,.10); }
.footer-bottom-5 p,
.footer-bottom-5 .footer-list a {
    font-weight: 300;
    font-size: 13.5px;
    color: rgba(255,255,255,.55);
}
.footer-bottom-5 p b { font-weight: 500; color: rgba(255,255,255,.8); }
.footer-bottom-5 .footer-list a:hover { color: var(--lz-gold); }

/* ================= Dropdowns: full header width ================= */
/* Anchor both dropdowns to the header bar so the panel spans the full
   header, with content aligned from the logo's left edge to the right margin. */
.header-main .navbar { position: relative; }
.header-main .navbar .navbar-nav .nav-item.lz-has-drop { position: static; }
.lz-drop-wide .lz-dropdown,
.lz-drop-sm .lz-dropdown {
    left: 0;
    right: 0;
    width: auto;
    transform: translateY(14px);
}
.lz-drop-wide:hover .lz-dropdown,
.lz-drop-wide:focus-within .lz-dropdown,
.lz-drop-sm:hover .lz-dropdown,
.lz-drop-sm:focus-within .lz-dropdown { transform: translateY(0); }

/* Hover bridge. The panel anchors to the bottom of the header bar, leaving a
   dead ~40px band between the nav link and the panel; without this the pointer
   drops :hover on the way down and the menu closes before it is reached. The
   panel is still a DOM child of the li, so hovering this ::before keeps
   .lz-has-drop:hover true. It inherits the panel's pointer-events (none when
   hidden, auto only on hover), so it is inert at rest.
   Height stays UNDER the real gap on purpose: the bridge is full-width, so any
   overlap up into the link row would sit over the nav links and eat their
   clicks while a menu is open. Tied to the header height (93px resting) --
   re-measure if that changes. */
.lz-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 46px;   /* gap 46.9px local (39.9 rendered @ zoom .85) */
}
/* Sticky bar is 28px shorter, so its gap is ~30.1px local (25.6 rendered). */
#sticky-header.sticky-menu .lz-dropdown::before { height: 29px; }

/* Readable, larger type inside both panels */

.lz-dropdown-head {
    font-size: 12px;
    letter-spacing: .12em;
    margin-bottom: 18px;
}
.lz-dropdown-col li { margin-bottom: 4px; }
.lz-dropdown-col li a {
    display: block;
    padding: 8px 0;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.45;
}
.lz-dropdown-cta p { font-size: 14.5px; line-height: 1.65; }
.lz-dropdown-btn { padding: 12px 16px; font-size: 14px; }

/* Services panel spans the header; laid out as an airy grid (see lz-menu-list) */


/* ---- Header logo. The theme declares width:181px !important, so this has to
   match it. Note .header-main carries zoom:0.85, so declared px are scaled:
   265px renders ~225x85 in a ~100px bar. (Was 441px / 375x141 / 150px bar,
   reduced 40%.) The nav and CTA are align-items:center, so they recentre in the
   shorter bar on their own. The generic max-height cap has to stay off for this
   to apply. ---- */
.header-main .navbar .navbar-brand img,
.mobile-topbar .logo img {
    width: 265px !important;
    height: auto !important;
    max-height: none !important;
}
/* Guard only the mobile bar. Do NOT put max-width on the desktop .navbar-brand
   img: it resolves against the flex container and clamped the logo to 256px. */
.mobile-topbar .logo img { max-width: 100% !important; }

/* Phones: the shared width does not fit next to the hamburger, so the mobile
   topbar gets a proportionate size of its own. */
@media (max-width: 767px) {
    .mobile-topbar .logo img { width: 220px !important; }
}
@media (max-width: 420px) {
    .mobile-topbar .logo img { width: 190px !important; }
}

/* Sticky (scrolled) header: smaller again than the resting logo, so the bar
   stays compact while scrolling. Renders ~150x56 in a ~65px bar. Must stay
   below the resting 265px or the logo would grow on scroll.
   .sticky-menu is added to #sticky-header by assets/js/main.js:134. */
#sticky-header.sticky-menu .navbar .navbar-brand img {
    width: 176px !important;
}

/* ================= Dropdown panels: 4-column icon grid ================= */
.lz-dropdown-inner {
    padding: 34px 40px 26px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    box-shadow: 0 26px 64px rgba(18,40,75,.16);
}

/* Shared eyebrow label */
.lz-drop-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lz-gold);
}

/* ---- Licence dropdown: tile carousel ---------------------------------- */
.lz-drop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.lz-carousel-nav { display: flex; gap: 8px; }
.lz-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #dfe3ea;
    background: #fff;
    color: var(--lz-navy);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, color .25s ease, opacity .25s ease;
}
.lz-carousel-arrow:hover { border-color: var(--lz-navy); background: var(--lz-navy); color: #fff; }
.lz-carousel-arrow:disabled { opacity: .35; cursor: default; }
.lz-carousel-arrow:disabled:hover { border-color: #dfe3ea; background: #fff; color: var(--lz-navy); }

.lz-carousel-viewport { overflow: hidden; }
.lz-carousel-track {
    display: flex;
    gap: 16px;
    will-change: transform;
    transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.lz-tile {
    flex: 0 0 202px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    border-radius: 16px;
    background: #fbfbfc;
    border: 1px solid #eceef2;
    text-decoration: none;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
.lz-tile:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: var(--lz-gold);
    box-shadow: 0 16px 34px rgba(18,40,75,.12);
}
/* Icon chip: generous box, icon at ~40% of it so the glyph breathes.
   A hairline edge gives the pale chip definition against the pale tile. */
.lz-tile-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: #f4f6f9;
    border: 1px solid #e8ecf1;
    color: var(--lz-navy);
    font-size: 22px;
    line-height: 1;
    transition: color .35s ease, background-color .35s ease, border-color .35s ease;
}
.lz-tile-ico i { font-size: inherit; line-height: 1; }
.lz-tile:hover .lz-tile-ico { background: #fff; border-color: #dfe4ec; }
.lz-tile-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lz-navy);
}
.lz-tile-meta {
    margin-top: auto;      /* pin to the bottom of every card regardless of title length */
    padding-top: 12px;
    font-size: 12px;
    letter-spacing: .02em;
    color: #9aa3b1;
}
.lz-tile-go {
    position: absolute;
    top: 22px;
    right: 20px;
    color: var(--lz-gold);
    font-size: 13px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity .35s ease, transform .35s ease;
}
.lz-tile:hover .lz-tile-go { opacity: 1; transform: translate(0, 0); }

/* ---- Services dropdown: minimalist list ------------------------------ */
.lz-menu-list { margin: 16px 0 4px; }
.lz-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 12px 2px;
    text-decoration: none;
    border-bottom: 1px solid #f0f1f4;
    transition: padding-left .3s cubic-bezier(.22,1,.36,1);
}
.lz-menu-row:last-child { border-bottom: 0; }
.lz-menu-label {
    flex: 1 1 auto;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--lz-navy);
    transition: color .25s ease;
}
.lz-menu-meta {
    flex: none;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #9aa3b1;
    background: #f2f3f6;
    transition: color .25s ease, background .25s ease;
}
.lz-menu-chev {
    flex: none;
    font-size: 11px;
    color: #c4ccd6;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
.lz-menu-row:hover { padding-left: 10px; }
.lz-menu-row:hover .lz-menu-label { color: var(--lz-gold); }
.lz-menu-row:hover .lz-menu-meta { color: var(--lz-navy); background: rgba(189,158,112,.18); }
.lz-menu-row:hover .lz-menu-chev { opacity: 1; transform: translateX(0); color: var(--lz-gold); }
.lz-drop-actions-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.lz-drop-actions-stack .lz-pill { width: 100%; }

/* Services panel: airy full-width grid of minimalist rows */
.lz-drop-sm .lz-menu-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2px 22px;
    margin: 22px 0 6px;
}
.lz-drop-sm .lz-menu-row {
    border-bottom: 0;
    padding: 15px 16px;
    border-radius: 12px;
}
.lz-drop-sm .lz-menu-row:hover { padding-left: 16px; background: rgba(18,40,75,.04); }
.lz-drop-sm .lz-menu-label { font-size: 15.5px; }

/* Pill actions, horizontal, bottom right */
.lz-drop-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eef0f4;
}
.lz-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.lz-pill-solid { background: var(--lz-navy); color: #fff; border: 1px solid var(--lz-navy); }
.lz-pill-solid:hover { background: var(--lz-gold); border-color: var(--lz-gold); color: var(--lz-navy); transform: translateY(-1px); }
.lz-pill-ghost { background: transparent; color: var(--lz-navy); border: 1px solid #d9dee6; }
.lz-pill-ghost:hover { border-color: var(--lz-gold); color: var(--lz-gold); transform: translateY(-1px); }

@media (max-width: 1399.98px) {
    .lz-drop-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================= Image placeholders ================= */
/* Grey blocks marking where real photography will drop in. */
.lz-imgph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background: repeating-linear-gradient(45deg, #eceef1, #eceef1 12px, #e6e9ed 12px, #e6e9ed 24px);
    border: 1px solid #e0e4ea;
    color: #97a0ad;
    overflow: hidden;
}
.lz-imgph span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 12px;
}
.lz-imgph-sq   { aspect-ratio: 1 / 1; }
.lz-imgph-tall { aspect-ratio: 3 / 4; }
.lz-imgph-wide { aspect-ratio: 21 / 9; }
.lz-imgph-thumb { aspect-ratio: 4 / 3; border-radius: 10px; }
.lz-imgph-avatar { width: 46px; height: 46px; aspect-ratio: 1/1; border-radius: 50%; flex: none; }
.lz-imgph-avatar span { display: none; }

/* Footer contact list and brand blurb in white */
.lz-footer-cols .lz-footer-brand p { color: #ffffff; }
.lz-footer-cols .footer-contact-list li,
.lz-footer-cols .footer-contact-list li a { color: #ffffff; }
.lz-footer-cols .footer-contact-list li a:hover { color: var(--lz-gold); }

/* ================= Inline cost calculator CTA ================= */
.lz-calcbanner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin: 0 0 70px;
    padding: 30px 34px;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    background: linear-gradient(120deg, #fbfcfd 0%, #f6f8fb 100%);
}
.lz-calcbanner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-calcbanner h3 { margin: 0 0 6px; font-size: 22px; color: var(--lz-navy); }
.lz-calcbanner p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #5a6675; }
.lz-calcbanner-btn { flex: none; padding: 14px 30px; }
@media (max-width: 767.98px) {
    .lz-calcbanner { padding: 24px; margin-bottom: 48px; }
    .lz-calcbanner h3 { font-size: 19px; }
    .lz-calcbanner-btn { width: 100%; }
}

/* ================= Service cards (grid card design) ================= */
.lz-svc-tilecard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    background: #fff;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}
.lz-svc-tilecard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(18,40,75,.13);
    border-color: var(--lz-gold);
}
.lz-svc-tilehead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: #f6f8fa;
    overflow: hidden;
}
/* Photo fills the card head; icon + number float over a navy scrim. */
.lz-svc-tilephoto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.lz-svc-tilehead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(18,40,75,.48) 0%, rgba(18,40,75,.12) 42%, rgba(18,40,75,.30) 100%);
}
.lz-svc-tilehead .lz-svc-tileico,
.lz-svc-tilehead .lz-svc-tilenum { z-index: 2; }
/* Number sits over a photo now; beat the #smooth-content span colour rule. */
body.wt-light #smooth-content .lz-svc-tilenum { color: rgba(255,255,255,.92); }
.lz-svc-tileico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(18,40,75,.06);
    color: var(--lz-navy);
    font-size: 25px;
}
.lz-svc-tilenum {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 6px rgba(18,40,75,.5);
}
.lz-svc-tilecard .content { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; }
.lz-svc-tilecard .content > ul { margin-bottom: 10px; }
.lz-svc-tilecard .content > ul li a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-svc-tilecard .title { font-size: 21px; line-height: 1.3; margin-bottom: 10px; }
.lz-svc-tilecard .title a { color: var(--lz-navy); }
.lz-svc-tilecard .title a:hover { color: var(--lz-gold); }
.lz-svc-tiledesc { font-size: 14.5px; line-height: 1.65; color: #5a6675; margin-bottom: 16px; }





.lz-svc-tilecard .news-btn { margin-top: auto; }

/* News sidebar extras */
.lz-imgph-mini { width: 78px; height: 78px; flex: none; border-radius: 10px; }
.lz-widget-note { font-size: 14px; line-height: 1.6; color: #5a6675; margin-bottom: 14px; }
.gt-recent-items { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

/* Service card refinements: visible icon, clean check list (beats theme
   .news-box-items-2 .content ul li a pill styling) */
.lz-svc-tilecard .lz-svc-tileico i {
    color: var(--lz-navy);
    font-size: 26px;
    line-height: 1;
}
.lz-svc-tilecard .lz-svc-tileico {
    background: #fff;
    border: 1px solid rgba(18,40,75,.08);
    box-shadow: 0 6px 16px rgba(18,40,75,.06);
}

/* Service card sub-service list (div based, so the theme's .content ul
   pill styling never applies) */
.lz-svc-tilelist { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.lz-svc-tileitem {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    line-height: 1.45;
    color: #5a6675;
    text-decoration: none;
    transition: color .22s;
}
.lz-svc-tileitem i { flex: none; font-size: 10px; color: var(--lz-gold); }
.lz-svc-tileitem:hover { color: var(--lz-navy); }
.lz-svc-tileitem:hover i { color: var(--lz-navy); }

/* ================= Footer brand mark ================= */
.lz-footer-mark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    text-decoration: none;
}
.lz-footer-mark img { max-height: 58px; width: auto; }
.lz-footer-mark span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    line-height: 1.3;
}
.lz-footer-mark span strong {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .1em;
    color: #fff;
}

/* Footer text in white (beats the theme's own colour rules) */
.footer-section-3 .lz-footer-cols .lz-footer-brand p,
.footer-section-3 .lz-footer-cols .footer-contact-list li,
.footer-section-3 .lz-footer-cols .footer-contact-list li a { color: #ffffff; }
.footer-section-3 .lz-footer-cols .footer-contact-list li a:hover { color: var(--lz-gold); }

/* ================= Inner page background ================= */
/* Abstract pattern behind every inner page hero, softened so headings stay
   legible. The homepage keeps its own treatment. */
.lz-pagebg {
    position: relative;
    background-image: url('../img/inner-page/page-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.lz-pagebg::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.78) 55%, rgba(255,255,255,.95) 100%);
    pointer-events: none;
}
.lz-pagebg > * { position: relative; z-index: 1; }

/* ================= News listing (standard layout) ================= */
.news-standard-section .gt-news-standard-items {
    display: flex;
    flex-direction: column;
    gap: 34px;
}
.news-standard-section .gt-news-card-items-4 {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    transition: box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.news-standard-section .gt-news-card-items-4:hover {
    transform: translateY(-4px);
    border-color: var(--lz-gold);
    box-shadow: 0 18px 42px rgba(18,40,75,.10);
}
/* Image column fills its cell instead of ballooning */
.news-standard-section .gt-news-card-items-4 > .lz-imgph,
.news-standard-section .gt-news-card-items-4 > .gt-news-thumb {
    aspect-ratio: auto;
    height: 100%;
    min-height: 230px;
    border: 0;
    border-radius: 0;
}
.gt-news-thumb { display: block; overflow: hidden; }
.gt-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.gt-news-card-items-4:hover .gt-news-thumb img { transform: scale(1.05); }
.lz-recent-thumb { display: block; width: 78px; height: 78px; flex: none; border-radius: 10px; overflow: hidden; }
.lz-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lz-post-hero { border-radius: 12px; overflow: hidden; margin-bottom: 30px; }
.lz-post-hero img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.lz-press-photo { overflow: hidden; }
.lz-press-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lz-about-photo { border-radius: 12px; overflow: hidden; }
.lz-about-photo img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.news-standard-section .gt-news-content { padding: 28px 30px; }
.news-standard-section .gt-date-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.news-standard-section .gt-date-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #8b95a3;
}
.news-standard-section .gt-date-list li i { font-size: 12px; color: var(--lz-gold); }
.news-standard-section .news-title { margin: 0 0 12px; font-size: 23px; line-height: 1.32; }
.news-standard-section .news-title a { color: var(--lz-navy); transition: color .25s; }
.news-standard-section .news-title a:hover { color: var(--lz-gold); }
.news-standard-section .gt-news-content > p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.7;
    color: #5a6675;
}

/* Sidebar */
.gt-single-sideber-widget {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 110px;
}
.gt-single-sideber-widget > div {
    padding: 26px 26px 28px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
}
.gt-widget-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lz-navy);
}
.gt-category-list ul { margin: 0; padding: 0; list-style: none; }
.gt-category-list ul li { margin: 0 0 4px; }
.gt-category-list ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    color: #5a6675;
    transition: background .22s, color .22s;
}
.gt-category-list ul li a::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--lz-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .22s, transform .22s;
}
.gt-category-list ul li a:hover { background: rgba(18,40,75,.045); color: var(--lz-navy); }
.gt-category-list ul li a:hover::after { opacity: 1; transform: translateX(0); }

.gt-recent-post-area .gt-recent-items {
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f3f6;
}
.gt-recent-post-area .gt-recent-items:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.gt-recent-post-area .lz-imgph { aspect-ratio: 1/1; border-radius: 10px; }
.gt-recent-content span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #8b95a3;
}
.gt-recent-content span i { font-size: 11px; color: var(--lz-gold); }
.gt-recent-content h6 { margin: 0; font-size: 14.5px; line-height: 1.45; }
.gt-recent-content h6 a { color: var(--lz-navy); transition: color .22s; }
.gt-recent-content h6 a:hover { color: var(--lz-gold); }

@media (max-width: 991.98px) {
    .gt-single-sideber-widget { position: static; margin-top: 34px; }
}
@media (max-width: 767.98px) {
    .news-standard-section .gt-news-card-items-4 { grid-template-columns: 1fr; }
    .news-standard-section .gt-news-card-items-4 > .lz-imgph { min-height: 200px; aspect-ratio: 16/9; }
    .news-standard-section .gt-news-content { padding: 24px 22px; }
    .news-standard-section .news-title { font-size: 20px; }
}

/* Footer white text: the theme colours body text via
   `body.wt-light #smooth-content :is(p, span, li, ...)`, which carries an ID
   and therefore outranks class-only rules. Match the ID to win cleanly. */
#smooth-content .footer-section-3 .lz-footer-brand p,
#smooth-content .footer-section-3 .footer-contact-list li,
#smooth-content .footer-section-3 .footer-contact-list li a,
#smooth-content .footer-section-3 .gt-list-area li a {
    color: #ffffff;
}
#smooth-content .footer-section-3 .footer-contact-list li a:hover,
#smooth-content .footer-section-3 .gt-list-area li a:hover {
    color: var(--lz-gold);
}
#smooth-content .footer-section-3 .footer-contact-list li i { color: var(--lz-gold); }
#smooth-content .footer-section-3 .widget-head h3 { color: rgba(255,255,255,.55); }
#smooth-content .footer-section-3 .lz-footer-mark span { color: rgba(255,255,255,.7); }
#smooth-content .footer-section-3 .lz-footer-mark span strong { color: #ffffff; }
#smooth-content .footer-bottom-5 p,
#smooth-content .footer-bottom-5 .footer-list a { color: rgba(255,255,255,.72); }
#smooth-content .footer-bottom-5 p b { color: #ffffff; }

/* Footer links: beat `body.wt-light #smooth-content a:not(...)` (1,3,2) */
body.wt-light #smooth-content .footer-section-3 .footer-contact-list li a,
body.wt-light #smooth-content .footer-section-3 .gt-list-area li a,
body.wt-light #smooth-content .footer-section-3 .lz-footer-mark,
body.wt-light #smooth-content .footer-bottom-5 .footer-list li a {
    color: #ffffff;
}
body.wt-light #smooth-content .footer-section-3 .footer-contact-list li a:hover,
body.wt-light #smooth-content .footer-section-3 .gt-list-area li a:hover,
body.wt-light #smooth-content .footer-bottom-5 .footer-list li a:hover {
    color: var(--lz-gold);
}
body.wt-light #smooth-content .footer-section-3 .social-icon a { color: #ffffff; }
body.wt-light #smooth-content .footer-section-3 .social-icon a:hover { color: var(--lz-navy); }

/* ================= Footer brand column: centred, larger mark ================= */
/* Lifted by 20% of the logo's 295px rendered height. The negative margin sits on
   the column, not the logo, so the blurb and the social icons rise with it as
   one block. The footer wrapper has 120px of padding above, so this stays
   inside it and cannot collide with the section above. */
.lz-footer-brand { text-align: center; margin-top: -47px; }  /* was -59; retuned to the 20%-smaller logo (~20% of 236px) */
.lz-footer-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 auto 20px;
}
/* 40% larger than the previous 58px */
.lz-footer-mark img { max-height: 81px !important; width: auto !important; }
.lz-footer-brand p { margin-left: auto; margin-right: auto; max-width: 30ch; }
.lz-footer-brand .social-icon {
    justify-content: center;
    display: flex;
    gap: 8px;
}
.lz-footer-brand .social-icon a { margin-right: 0; }

/* Footer bottom bar: match the light footer type */
#smooth-content .footer-bottom-5 p,
#smooth-content .footer-bottom-5 .footer-list li a {
    font-size: 14.5px;
    font-weight: 300;
    letter-spacing: .01em;
    color: #ffffff;
}
#smooth-content .footer-bottom-5 p b {
    font-weight: 500;
    color: #ffffff;
}

/* ================= Header gutter + dropdown alignment ================= */
/* One shared gutter: the logo's left edge and the CTA's right edge sit on it,
   and both dropdown panels span exactly between those two edges. */
.header-main .navbar { --lz-headgutter: 0px; }
.header-main .navbar .navbar-brand { margin-left: var(--lz-headgutter); }
.header-main .navbar .header-right { margin-right: var(--lz-headgutter); }
.lz-drop-wide .lz-dropdown,
.lz-drop-sm .lz-dropdown {
    left: var(--lz-headgutter, 0px);
    right: var(--lz-headgutter, 0px);
}

/* Contact map */
.contact-map .lz-map { width: 100%; height: 100%; min-height: 460px; border-radius: 12px; }
.contact-map iframe { width: 100%; height: 100%; min-height: 460px; border-radius: 12px; }

body.wt-light #smooth-content .footer-bottom-5 p,
body.wt-light #smooth-content .footer-bottom-5 p b { color: #ffffff; }

/* The theme sets this copy with !important, so match it. */
body.wt-light #smooth-content .footer-bottom-5 .footer-bottom-wrapper-5 p,
body.wt-light #smooth-content .footer-bottom-5 .footer-bottom-wrapper-5 p b {
    color: #ffffff !important;
}

/* ================= Inner page hero type ================= */
/* Match the homepage hero headline exactly: Urbanist, ultra-light, the same
   fluid clamp, so page titles no longer tower over their sections. main.css set
   these titles on a fixed 110/80/70px step scale, ~56% larger than the hero at
   1440. layerz.css loads after main.css, so this wins; the h1.split-title
   selector adds a class to make that certain. */
.breadcrumb-wrapper .page-heading .split-title,
.breadcrumb-wrapper .page-heading .split-title .style-font,
.breadcrumb-wrapper .page-heading .split-title .style-color,
.breadcrumb-wrapper .page-heading .split-title .style-font .char,
.breadcrumb-wrapper .page-heading .split-title .style-color .char,
.breadcrumb-wrapper .page-heading h1,
.breadcrumb-wrapper .page-heading h1.split-title,
.breadcrumb-wrapper .page-heading h1 span {
    font-family: "Urbanist", system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 200 !important;
    letter-spacing: -0.02em;
}
/* The global emphasis rule (italic gold, smaller) is for hero + section
   headings, NOT the inner-page breadcrumb title, which wraps its WHOLE heading
   in .style-font and has its own clean thin treatment. Reset the chars my
   global rule reached, and hold the breadcrumb title at heading colour. */
.breadcrumb-wrapper .page-heading .split-title .style-font,
.breadcrumb-wrapper .page-heading .split-title .style-font .char,
.breadcrumb-wrapper .page-heading .split-title .style-font .word {
    color: inherit !important;
    font-size: 1em !important;
}
.breadcrumb-wrapper .page-heading .split-title .style-color .char,
.breadcrumb-wrapper .page-heading .split-title .style-color .word {
    color: var(--lz-gold) !important;
    font-size: 1em !important;
}
.breadcrumb-wrapper .page-heading h1.split-title {
    font-size: clamp(26px, 4.9vw, 76px);
    line-height: 1.06;
    text-wrap: balance;
}
@media (max-width: 575.98px) {
    .breadcrumb-wrapper .page-heading h1.split-title { font-size: clamp(24px, 6.6vw, 34px); }
}
.breadcrumb-wrapper .page-heading .split-title .style-color { color: var(--lz-gold) !important; }

/* Eyebrow: small, uppercase, tracked. Reads as a label, not a flourish. */
.breadcrumb-wrapper .page-heading .sub-title,
.breadcrumb-wrapper .page-heading .sub-title.tz-sub-tilte {
    font-family: "Urbanist", system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lz-gold) !important;
}
.breadcrumb-wrapper .page-heading .sub-title img { display: none; }
.breadcrumb-wrapper .page-heading .wt-cat-blurb { font-weight: 300; }

/* ================= Primary nav spacing ================= */
.header-main .navbar .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    margin-left: auto;
    margin-right: auto;
}
.header-main .navbar .navbar-nav > .nav-item { margin: 0; }
.header-main .navbar .navbar-nav > .nav-item > .nav-link {
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
}
@media (max-width: 1399.98px) {
    .header-main .navbar .navbar-nav { gap: 24px; }
}

/* ================= Pagination ================= */
.lz-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 44px;
}
.lz-page-num,
.lz-page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #e2e6ec;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: var(--lz-navy);
    text-decoration: none;
    transition: background .22s, border-color .22s, color .22s, transform .22s;
}
.lz-page-num:hover,
.lz-page-arrow:hover {
    border-color: var(--lz-gold);
    color: var(--lz-gold);
    transform: translateY(-2px);
}
.lz-page-num.is-current {
    background: var(--lz-navy);
    border-color: var(--lz-navy);
    color: #fff;
}
/* Current page sits on navy; beat the #smooth-content span colour rule. */
body.wt-light #smooth-content .lz-page-num.is-current { color: #fff; }
.lz-page-arrow i { font-size: 13px; }
.lz-page-arrow.is-disabled {
    opacity: .38;
    pointer-events: none;
    color: #8b95a3;
}
@media (max-width: 575.98px) {
    .lz-pagination { gap: 7px; }
    .lz-page-num, .lz-page-arrow { min-width: 40px; height: 40px; font-size: 14px; }
}

/* True centring without absolute positioning: make the navbar a 3 column grid
   and let .navbar-collapse pass its children through, so the logo, nav and CTA
   are all direct grid items. Equal 1fr flanks put the nav on the exact centre
   line, and the navbar stays the containing block for both dropdowns. */
/* Desktop only: the navbar carries Bootstrap's .d-none .d-xl-flex, so an
   unscoped display override would force it visible on mobile and collide
   with the separate mobile menu. */
@media (min-width: 1200px) {
    .header-main .navbar {
        display: grid !important;      /* beats the theme's flex */
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    /* Bootstrap sets .navbar-expand-xl .navbar-collapse { display:flex !important } */
    .header-main .navbar .navbar-collapse { display: contents !important; }
    .header-main .navbar .navbar-brand { grid-column: 1; justify-self: start; }
    .header-main .navbar .navbar-nav { grid-column: 2; justify-self: center; margin: 0 !important; }
    /* Home uses .menu-right-info, inner pages use .header-right. Both sit in
       the third grid column so the nav stays centred on every page. */
    .header-main .navbar .header-right,
    .header-main .navbar .menu-right-info {
        grid-column: 3;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 0;
    }
    /* Breathing room from the viewport edges on both sides */
    .header-main .navbar {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    /* Dropdowns line up with the logo and the right-hand group */
    .lz-drop-wide .lz-dropdown,
    .lz-drop-sm .lz-dropdown { left: 40px; right: 40px; }
}

/* Narrow desktops: the grid above is 1fr auto 1fr, but a 1fr track cannot
   shrink below its content, so once brand + nav + CTA exceed the bar the whole
   row is pushed right and the nav stops looking centred. At 1200px it needed
   1341px inside a 1080px bar, landing the nav 71px right of centre and pushing
   the CTA 94px past the bar's edge (which also gave the page a horizontal
   scrollbar). Tightening the nav's own metrics buys back the ~142px shortfall
   so the middle column centres properly. 1400px and up already fits. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-main .navbar .navbar-nav .nav-link { font-size: 16px !important; }
}
/* 1200-1299 is fully saturated: at 1200 the CTA already touches the nav, so
   14px is the physical maximum. Measured per width. */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .header-main .navbar .navbar-nav { gap: 14px !important; }
}
/* From 1300 up there is room to breathe. 20px keeps ~15px clearance to the CTA
   at 1300 and more toward 1400, where the base 34px takes over. Applies to the
   sticky bar too, whose smaller logo leaves even more room. */
@media (min-width: 1300px) and (max-width: 1399.98px) {
    .header-main .navbar .navbar-nav { gap: 20px !important; }
}

/* ================= Footer: drop the theme's dark divider ================= */
/* .footer-area-3::before is a 1px rgba(16,16,16,.2) rule that reads as a black
   line over the navy panel. */
.footer-section-3 .footer-area-3::before,
.footer-section-3 .footer-area-3::after { display: none !important; content: none !important; }
.footer-section-3 .footer-widget-wrapper-5::before,
.footer-section-3 .footer-widget-wrapper-5::after { display: none !important; content: none !important; }
.footer-section-3 .footer-bottom-5 { border-top-color: rgba(255,255,255,.14); }

/* Footer mark, 3x the previous 113px. max-width keeps it inside the brand
   column: col-xl-3 is only ~295px at 1440, so the square lockup is clamped to
   the column width there and reaches the full 339px once the column is wider
   (tablet and below, where it stacks). Without this it overflows the grid. */
.lz-footer-mark img {
    max-height: 271px !important;   /* 339 * 0.8 */
    max-width: 80% !important;      /* the square logo is column-width clamped, so width is the real knob: 20% smaller */
    width: auto !important;
}

/* ================= Dropdown: sit clear of the header, blur behind ================= */
/* The panel opens below the header bar rather than hugging the nav text, and
   the page behind it is blurred so the menu reads as a separate layer. */
.lz-dropdown { padding-top: 34px; }

.lz-drop-scrim {
    position: fixed;
    inset: 0;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(9, 20, 38, .28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity .3s ease, visibility .3s ease;
}
.lz-drop-scrim.is-open {
    opacity: 1;
    visibility: visible;
}
/* Keep the header and the open panel above the scrim */
.header-section { z-index: 1000; }
.lz-has-drop:hover .lz-dropdown,
.lz-has-drop:focus-within .lz-dropdown { z-index: 1001; }

/* ================= Hero headline: hold it to two lines ================= */
/* Scaling the size with the viewport keeps the text-to-container ratio
   constant, so the wrap stays at two lines instead of drifting to three. */
.hero-1 .hero-content h1.split-title {
    font-size: clamp(26px, 4.9vw, 76px);   /* 30% down from 7vw / 108px */
    line-height: 1.06;
    max-width: 26ch;
    text-wrap: balance;
}
@media (max-width: 575.98px) {
    /* Below this the headline would have to shrink past readable to stay on
       two lines, so let it wrap naturally. */
    .hero-1 .hero-content h1.split-title {
        font-size: clamp(24px, 6.6vw, 34px);
        max-width: none;
    }
}

/* ================= Hero background ================= */
/* Dubai skyline sits behind the hero and runs up under the transparent
   header. Kept pale so the headline and nav stay legible. */
.hero-section-1.hero-1 {
    position: relative;
    --lz-fog: 0.77;      /* vertical veil intensity (1 = full). Tune via hero panel. */
    --lz-fog-left: 0.6;  /* left-edge fog intensity (0 = off). */
    --lz-fog-left-span: 46; /* how far the left fog reaches across before fading to 0 (% of width). */
    background-image: url('../img/inner-page/hero-bg.webp?v=2');
    /* Baked from the hero tuner, which used to write these as inline styles on
       every homepage load and so applied them at EVERY width. The panel is no
       longer rendered (see includes/footer.php), so they live here instead and
       the framing is unchanged. If the tuner is ever re-enabled and re-tuned,
       copy the new values back to these two lines, not just to the media query
       below. */
    background-size: 122% auto;
    background-position: 0% calc(100% - 145px);
    background-repeat: no-repeat;
    /* Header is position:absolute (overlay), so the hero already sits behind it
       with no negative margin. A negative margin-top here pulled the hero above
       the page origin and left ScrollSmoother phantom space under the footer. */
    margin-top: 0;
    padding-top: 24px;
}

/* Desktop: show the full frame instead of cropping the sky off the top.
   The skyline sits on the hero's bottom edge and the pale sky runs up behind
   the header. Anything above the image is filled with the same sky tone, so
   the join is invisible. */
@media (min-width: 1200px) {
    .hero-section-1.hero-1 {
        /* 80% = 20% zoom out. Pushed down by three headline lines (~215px)
           past the bottom edge, so the skyline sits lower in the frame.
           These two now duplicate the base rule; kept for readability since the
           padding and min-height below only apply at this breakpoint. */
        /* Var-driven so the desktop hero tuner can move it independently of
           mobile. Every fallback is the value in force before the tuner, so
           production (tuner absent) is byte-identical. */
        background-size: var(--lz-hero-zoom-d, 156%) auto;
        background-position: var(--lz-hero-x-d, 36%) calc(100% + var(--lz-hero-y-d, 170px));
        background-color: var(--lz-hero-bg-d, #f4f7fa);
        /* Remap the shared vars the ::before fog reads onto desktop-specific
           sources, so desktop fog tunes independently of mobile. */
        --lz-fog: var(--lz-fog-d, 0.90);
        --lz-fog-bottom: var(--lz-fog-bottom-d, 1.07);
        /* Fixed height owns where the next section starts. Hero top moves the
           content DOWN inside this band without changing the band height (box-
           sizing:border-box contains the padding), so the section below never
           shifts. padding-bottom is 0 for the same reason. */
        min-height: var(--lz-hero-h-d, 1010px);
        padding-top: var(--lz-hero-top-d, 425px) !important;
        padding-bottom: var(--lz-hero-gap-d, 0px) !important;
    }
}
.hero-section-1.hero-1::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Same fog, shifted down three lines (~215px): the top holds the opening
       tone flat, then the original ramp resumes 215px lower. */
    background:
        /* left-edge fog: full at the left, fading smoothly to clear at --lz-fog-left-span */
        linear-gradient(90deg,
            rgba(255,255,255, calc(.9 * var(--lz-fog-left))) 0,
            rgba(255,255,255, calc(.9 * var(--lz-fog-left))) 3%,
            rgba(255,255,255,0) calc(var(--lz-fog-left-span) * 1%)),
        /* vertical veil */
        linear-gradient(180deg,
            rgba(255,255,255, calc(.72 * var(--lz-fog))) 0,
            rgba(255,255,255, calc(.72 * var(--lz-fog))) 215px,
            rgba(255,255,255, calc(.55 * var(--lz-fog))) calc(45% + 215px),
            rgba(255,255,255, calc(var(--lz-fog-bottom, .86) * var(--lz-fog))) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Bottom blend: dissolve the hero into the section beneath it.
   The photo is parked with its bottom edge above the section's (background-position
   `calc(100% - Npx)`), so below it sits the flat hero background-colour. Neither is
   white: the image's last row samples ~rgb(238,243,249) and the desktop fill is
   #f4f7fa, while the section below is pure white. That ~17-point step is the visible
   line. Ramping the last 150px to solid #fff removes it, and costs nothing visually
   because the bottom of the frame is flat haze already.
   Separate ::after rather than folding into ::before, which carries the tuned fog
   values (--lz-fog, --lz-fog-bottom) and must not be disturbed. Paints after
   ::before at the same z-index, so it sits over the veil but under the content. */
.hero-section-1.hero-1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--lz-hero-fade, 150px);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 100%);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 767.98px) {
    /* Shorter hero, so a 150px ramp would eat too much of the frame. */
    .hero-section-1.hero-1 { --lz-hero-fade: 90px; }
}
.hero-section-1.hero-1 > * { position: relative; z-index: 1; }

/* Header is transparent on the homepage so the skyline shows through */
.header-1 { background: transparent !important; }

/* ================= Press / media highlights (home) ================= */
/* About CTA row: About-us button left, 500+ counter parallel on the right */
.lz-about-cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-top: 34px;
}
.lz-about-cta-row .theme-btn-main { margin-top: 0; }
.lz-about-cta-row .about-counter-items { margin-top: 0; }
/* 500+ as thin outlined (stroke) numerals */
.lz-about-cta-row .about-counter-items .content h2 {
    color: transparent;
    -webkit-text-stroke: 0.6px var(--lz-navy);
    text-stroke: 0.6px var(--lz-navy);
    font-weight: 300;
}
.lz-about-cta-row .about-counter-items .content h2 .plus {
    -webkit-text-stroke: 0.6px var(--lz-gold);
    text-stroke: 0.6px var(--lz-gold);
    color: transparent;
}
@media (max-width: 575.98px) {
    .lz-about-cta-row { justify-content: flex-start; }
}

.lz-press-section { background: transparent; }
/* Section header: theme's .news-btn only styles under dark-template scopes
   (.project-wrapper/.team-section-4/.offcanvas-menu), so on this light section
   the button rendered unstyled/invisible. Restyle under our own scope. */
#smooth-content .lz-press-section .text-items p { color: #5a6675; }
#smooth-content .lz-press-section .text-items .news-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lz-navy);
    overflow: hidden;
    text-transform: capitalize;
}
#smooth-content .lz-press-section .text-items .news-btn i { margin-left: 7px; color: var(--lz-gold); }
#smooth-content .lz-press-section .text-items .news-btn .text {
    position: relative;
    display: inline-block;
    height: 24px;
    overflow: hidden;
}
#smooth-content .lz-press-section .text-items .news-btn .text-default,
#smooth-content .lz-press-section .text-items .news-btn .text-hover {
    display: block;
    transition: transform .4s ease;
    color: var(--lz-navy);
}
#smooth-content .lz-press-section .text-items .news-btn .text-hover {
    position: absolute;
    left: 0;
    top: 100%;
    color: var(--lz-gold);
}
#smooth-content .lz-press-section .text-items .news-btn:hover .text-default,
#smooth-content .lz-press-section .text-items .news-btn:hover .text-hover { transform: translateY(-100%); }
/* Shared meta + read-more */
.lz-press-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.lz-press-meta li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #8b95a3;
}
.lz-press-meta i { color: var(--lz-gold); font-size: 12px; }
.lz-press-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lz-navy);
}
.lz-press-more i { color: var(--lz-gold); transition: transform .3s ease; }

/* Featured article (left) */
.lz-press-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e7eaf0;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.lz-press-feature:hover {
    transform: translateY(-5px);
    border-color: var(--lz-gold);
    box-shadow: 0 22px 50px rgba(18,40,75,.12);
}
.lz-press-feat-thumb { border-radius: 0; aspect-ratio: 16 / 9; }
.lz-press-feat-body { padding: 26px 28px 28px; }
.lz-press-feat-body h3 {
    font-size: 23px;
    line-height: 1.32;
    color: var(--lz-navy);
    margin: 0 0 12px;
    transition: color .3s ease;
}
.lz-press-feature:hover .lz-press-feat-body h3 { color: var(--lz-gold); }
.lz-press-feat-body p {
    font-size: 15px;
    line-height: 1.65;
    color: #5a6675;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lz-press-feature:hover .lz-press-more i { transform: translate(3px,-3px); }

/* Side list (right) */
.lz-press-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; height: 100%; }
.lz-press-list li { flex: 1 1 0; }
.lz-press-item {
    display: flex;
    gap: 20px;
    height: 100%;
    padding: 18px;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.lz-press-item:hover {
    transform: translateY(-4px);
    border-color: var(--lz-gold);
    box-shadow: 0 16px 38px rgba(18,40,75,.10);
}
.lz-press-item-thumb { flex: none; width: 128px; align-self: stretch; border-radius: 12px; aspect-ratio: auto; }
.lz-press-item-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lz-press-item-body .lz-press-meta { margin-bottom: 10px; }
.lz-press-item-body h4 {
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--lz-navy);
    margin: 0 0 12px;
    transition: color .3s ease;
}
.lz-press-item:hover h4 { color: var(--lz-gold); }
.lz-press-item:hover .lz-press-more i { transform: translate(3px,-3px); }
@media (max-width: 479.98px) {
    .lz-press-item { flex-direction: column; gap: 14px; }
    .lz-press-item-thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* ================= Contact map floating card ================= */
.lz-contact-map { position: relative; }
.lz-contact-float {
    position: absolute;
    left: 24px;
    bottom: 24px;
    max-width: 300px;
    padding: 24px 26px;
    border-radius: 14px;
    background: var(--lz-navy);
    color: #fff;
    box-shadow: 0 20px 44px rgba(9,20,38,.28);
    z-index: 2;
}
.lz-cf-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-contact-float h3 { margin: 0 0 10px; font-size: 20px; color: #fff; }
.lz-contact-float p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); }
.lz-cf-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.lz-cf-phone i { color: var(--lz-gold); }
.lz-cf-phone:hover { color: var(--lz-gold); }
@media (max-width: 575.98px) {
    .lz-contact-float { position: static; max-width: none; margin-top: 16px; }
}

/* Beat the theme's ID-scoped span/heading colour inside press + contact float */
body.wt-light #smooth-content .lz-press-logo span { color: var(--lz-navy); }
body.wt-light #smooth-content .lz-press-date { color: #8b95a3; }
body.wt-light #smooth-content .lz-contact-float p { color: rgba(255,255,255,.8); }
body.wt-light #smooth-content .lz-contact-float .lz-cf-label { color: var(--lz-gold); }

/* ================= Consistent inner-page heading ================= */
.breadcrumb-wrapper .page-heading .lz-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
}
.breadcrumb-wrapper .page-heading .lz-crumbs a { color: #7c8695; transition: color .22s; }
.breadcrumb-wrapper .page-heading .lz-crumbs a:hover { color: var(--lz-gold); }
.breadcrumb-wrapper .page-heading .lz-crumbs span { color: var(--lz-navy); }
.breadcrumb-wrapper .page-heading .lz-crumbs .lz-crumb-sep { color: #c4ccd6; font-weight: 400; user-select: none; }

/* Two-line gap between the heading and its description */
.breadcrumb-wrapper .page-heading .wt-cat-blurb {
    margin-top: 2em;
    max-width: 60ch;
    color: #5a6675;
}


/* ================= Milestones / track record (homepage) ================= */
/* Tint sits on the container so the panel respects the page margins and can be
   rounded, rather than bleeding edge to edge. */
.lz-milestones .container {
    background: #f6f8fa;
    border-radius: 20px;
    padding: 56px 52px;
}
@media (max-width: 575.98px) {
    .lz-milestones .container { padding: 40px 26px; border-radius: 16px; }
}
.lz-milestones-lead {
    margin: 22px 0 30px;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.7;
    color: #5a6675;
}
.lz-timeline { list-style: none; margin: 0; padding: 0; }
.lz-tl-row {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 22px 6px 22px 4px;
    border-bottom: 1px solid #e2e6ec;
    transition: padding-left .35s cubic-bezier(.22,1,.36,1);
}
.lz-tl-row:first-child { padding-top: 4px; }
.lz-tl-row:last-child { border-bottom: 0; }
.lz-tl-year {
    flex: none;
    width: 92px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--lz-navy);
    letter-spacing: -.01em;
    transition: color .3s ease;
}
.lz-tl-text {
    font-size: 17px;
    line-height: 1.5;
    color: #4a5666;
}
.lz-tl-row:hover { padding-left: 12px; }
.lz-tl-row:hover .lz-tl-year { color: var(--lz-gold); }
@media (max-width: 575.98px) {
    .lz-tl-row { flex-direction: column; gap: 6px; }
    .lz-tl-year { font-size: 26px; }
}

/* Grey icon tiles: keep icons legible (beat theme #smooth-content i colour) */
#smooth-content .wt-svc-badge i,
#smooth-content .project-section-3 .lz-svc-tile i,
#smooth-content .lz-tile-ico i,
#smooth-content .lz-svc-tileico i,
#smooth-content .lz-svc-tileico { color: var(--lz-navy); }

/* ================= Homepage FAQ section ================= */
.lz-faq-section { background: #fff; }
.lz-faq-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.lz-faq-head p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: #5a6675; }
.lz-faq-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 991.98px) { .lz-faq-grid { grid-template-columns: 1fr; gap: 28px; } }
.lz-faq-accordion .acc-btn { cursor: pointer; }
.lz-faq-aside {
    position: sticky;
    top: 118px;
    padding: 34px 30px;
    border-radius: 18px;
    background: linear-gradient(158deg, #16305a 0%, var(--lz-navy) 55%, #0f2340 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 26px 60px rgba(9,20,38,.28);
    color: #fff;
}
.lz-faq-aside h3 { margin: 0 0 10px; font-size: 22px; color: #fff; }
.lz-faq-aside p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.75); }
.lz-faq-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
#smooth-content .lz-faq-more { color: #fff; }
.lz-faq-more i { color: var(--lz-gold); transition: transform .3s ease; }
.lz-faq-more:hover i { transform: translateX(3px); }
@media (max-width: 991.98px) { .lz-faq-aside { position: static; } }

/* Testimonials: quotes are not headings (semantic fix).
   Readability over styling: upright (not italic), normal tracking, open
   line-height, and full-opacity text that actually contrasts with BOTH card
   backgrounds. The dark .style-2 cards only recolour h3 in main.css, so the
   quote needs its own light colour or it renders near-black on navy. */
.testimonial-box-style-1 .lz-tq {
    font-size: 18px;
    font-weight: 500;
    color: #2b3648;
    opacity: 1;
    line-height: 1.65;
    letter-spacing: normal;
    font-style: normal;
    margin: 0 0 22px;
}
@media (max-width: 1600px) { .testimonial-box-style-1 .lz-tq { font-size: 17px; } }
@media (max-width: 575px)  { .testimonial-box-style-1 .lz-tq { font-size: 16px; line-height: 1.7; } }

/* Colours need the ID prefix: the theme paints body text via
   `body.wt-light #smooth-content :is(p, span, li, ...)`, which outranks
   class-only rules (see the footer note above for the same problem). */
body.wt-light #smooth-content .testimonial-box-style-1 .lz-tq,
#smooth-content .testimonial-box-style-1 .lz-tq { color: #2b3648; }
body.wt-light #smooth-content .testimonial-box-style-1.style-2 .lz-tq,
#smooth-content .testimonial-box-style-1.style-2 .lz-tq { color: rgba(255,255,255,.9); }

/* Attribution: give the name and role breathing room and clear separation */
.testimonial-box-style-1 .client-info-item .client-info h4 { line-height: 1.3; margin-bottom: 4px; }
.testimonial-box-style-1 .client-info-item .client-info span { font-size: 15px; line-height: 1.5; }
body.wt-light #smooth-content .testimonial-box-style-1 .client-info-item .client-info span,
#smooth-content .testimonial-box-style-1 .client-info-item .client-info span { color: #5a6675; }
body.wt-light #smooth-content .testimonial-box-style-1.style-2 .client-info-item .client-info span,
#smooth-content .testimonial-box-style-1.style-2 .client-info-item .client-info span { color: rgba(255,255,255,.72); }

/* ================= Testimonials: one clean row =================
   main.css already makes this repeat(4,1fr), but with a stray margin-right:60px
   (no matching left) that pushes the row off-centre under a centred heading,
   and it drops to 3 columns at <=1399 which strands a 4th card on its own row.
   Hold four across down to 1200, then a clean 2x2, then single column. */
.client-testimonial__warpper { margin-right: 0; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .client-testimonial__warpper { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .client-testimonial__warpper { grid-template-columns: repeat(2, 1fr); }
}
/* Four narrow cards need less chrome: shrink the oversized quote badge and let
   the name/stars row wrap instead of overflowing the ~210px text column. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .testimonial-box-style-1 { padding: 24px; }
    .testimonial-box-style-1 .quote-icon {
        width: 48px; height: 48px; line-height: 48px; margin-bottom: 22px;
    }
    .testimonial-box-style-1 .quote-icon img { max-width: 22px; }
    .testimonial-box-style-1 .client-info-item { flex-wrap: wrap; gap: 12px; }
}

/* ================= Free tools hub =================
   Colour strategy: restrained. White surfaces, tinted neutrals, ONE navy
   result panel, gold as the single accent. Type scale matches the header
   (pills sit at the 1.2rem nav size). Motion: ease-out, short, specific
   properties only, with press feedback. */
.lz-tools-section { background: #fafbfc; }

/* --- Tabs ------------------------------------------------------------- */
.lz-tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 44px;
    padding: 0 0 30px;
    border-bottom: 1px solid #e4e8ee;
}
.lz-tool-tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1px solid #dde2ea;
    background: #fff;
    color: var(--lz-navy);
    font-family: inherit;
    font-size: 1.2rem;          /* matches the header nav */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(.23,1,.32,1),
                border-color 180ms cubic-bezier(.23,1,.32,1),
                color 180ms cubic-bezier(.23,1,.32,1),
                transform 160ms cubic-bezier(.23,1,.32,1);
}
.lz-tool-tab i {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--lz-gold);
    transition: color 180ms cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) {
    .lz-tool-tab:hover { border-color: var(--lz-gold); background: #fffdf9; }
}
.lz-tool-tab:active { transform: scale(.97); }
.lz-tool-tab.is-active {
    background: var(--lz-navy);
    border-color: var(--lz-navy);
    color: #fff;
}
.lz-tool-tab.is-active i { color: var(--lz-gold); }
.lz-tool-tab:focus-visible { outline: 2px solid var(--lz-gold); outline-offset: 3px; }

/* --- Panel header ------------------------------------------------------ */
.lz-tool-panel { display: none; }
.lz-tool-panel.is-active { display: block; }
.lz-tool-head { max-width: 64ch; margin-bottom: 32px; }
.lz-tool-head h2 { font-size: 34px; line-height: 1.2; color: var(--lz-navy); margin: 0 0 14px; }
.lz-tool-head p { font-size: 17px; line-height: 1.7; color: #4a5666; margin: 0 0 14px; }
.lz-tool-permalink {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 600; color: var(--lz-navy);
}
.lz-tool-permalink i { font-size: 13px; color: var(--lz-gold); transition: transform 180ms cubic-bezier(.23,1,.32,1); }
.lz-tool-permalink:hover i { transform: translateX(3px); }

/* --- Tool shell: fields | result --------------------------------------- */
.lz-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 38px;
    border: 1px solid #e4e8ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18,40,75,.04);
}
@media (max-width: 991.98px) { .lz-tool { grid-template-columns: 1fr; gap: 28px; padding: 26px; } }

.lz-tool-fields { display: grid; gap: 22px; }
.lz-tf { display: flex; flex-direction: column; gap: 10px; }
.lz-tf > span { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--lz-navy); }
.lz-tf input, .lz-tf select {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 16.5px;
    line-height: 1.3;
    color: var(--lz-navy);
    transition: border-color 180ms cubic-bezier(.23,1,.32,1), box-shadow 180ms cubic-bezier(.23,1,.32,1);
}
.lz-tf input::placeholder { color: #97a1ae; }
.lz-tf input:hover, .lz-tf select:hover { border-color: #c6cedb; }
.lz-tf input:focus, .lz-tf select:focus {
    outline: none;
    border-color: var(--lz-gold);
    box-shadow: 0 0 0 3px rgba(189,158,112,.20);
}
/* One form-control vocabulary across the five tools. Native selects render a
   different arrow on every platform, which is the main thing that made these
   look unfinished next to the custom inputs. Chevron is an inline SVG so it
   costs no request and inherits the navy. */
.lz-tf select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2312284B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    cursor: pointer;
}
/* Native date/number pickers pick up the brand accent. */
.lz-tf input, .lz-tf select { accent-color: var(--lz-gold); }
.lz-tf input[type="date"] { min-height: 53px; }   /* match text inputs on Safari */

@media (prefers-reduced-motion: reduce) {
    .lz-modal-backdrop, .lz-modal-dialog { animation: none; }
    .lz-tf input, .lz-tf select { transition: none; }
}

/* --- Result panel (the one saturated surface) -------------------------- */
.lz-tool-out {
    padding: 32px 30px;
    border-radius: 16px;
    background: var(--lz-navy);
    color: #fff;
}
.lz-tool-figure { padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.16); }
.lz-tool-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-tool-figure strong {
    display: block;
    margin-top: 10px;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
}
.lz-tool-lines { list-style: none; margin: 22px 0 0; padding: 0; }
.lz-tool-lines li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    font-size: 15px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.lz-tool-lines li:last-child { border-bottom: 0; }
.lz-tool-lines li span:first-child { color: rgba(255,255,255,.78); }
.lz-tool-lines li span:last-child { text-align: right; font-weight: 600; color: #fff; }
/* Long values (the Golden Visa route explainers) used to squeeze the label into
   three ragged lines. Let the value drop to its own line instead and stay
   right-aligned, so the label always reads on one. */
.lz-tool-lines li { flex-wrap: wrap; row-gap: 4px; }
.lz-tool-lines li span:first-child { flex: 0 1 auto; }
.lz-tool-lines li span:last-child { margin-left: auto; }
.lz-tool-why { margin: 18px 0 24px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.88); }
.lz-tool-note { margin: 20px 0 24px; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.68); }
.lz-tool-hint { margin-top: 16px; font-size: 15px; color: #6b7686; }

/* --- Extras + related -------------------------------------------------- */
.lz-tools-extra, .lz-tools-faq { margin-top: 64px; }
.lz-tools-extra h2, .lz-tools-faq h2 { font-size: 28px; line-height: 1.25; color: var(--lz-navy); margin: 0 0 14px; }
.lz-tools-extra p { font-size: 17px; line-height: 1.7; color: #4a5666; max-width: 60ch; margin-bottom: 24px; }
.lz-tool-morelinks { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.lz-tool-morelink {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid #e4e8ee;
    background: #fff;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--lz-navy);
    transition: border-color 180ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1);
}
.lz-tool-morelink i { color: var(--lz-gold); }
.lz-tool-morelink:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
    .lz-tool-morelink:hover { border-color: var(--lz-gold); transform: translateY(-2px); }
}
/* Result CTA sits on navy here, so keep the gold pill full width */
.lz-tool-out .lz-aside-cta { margin-top: 4px; }

/* The theme sets a dark grey on #smooth-content spans/paragraphs, which bled
   into the navy result panel (grey-on-navy, ~1.4:1). Restate at ID strength. */
#smooth-content .lz-tool-out,
#smooth-content .lz-tool-figure strong,
#smooth-content .lz-tool-lines li span:last-child { color: #fff !important; }
#smooth-content .lz-tool-label { color: var(--lz-gold) !important; }
#smooth-content .lz-tool-lines li span:first-child { color: rgba(255,255,255,.78) !important; }
#smooth-content .lz-tool-why { color: rgba(255,255,255,.88) !important; }
#smooth-content .lz-tool-note { color: rgba(255,255,255,.68) !important; }
#smooth-content .lz-tool-hint { color: #5a6675 !important; }
#smooth-content .lz-tool-head p { color: #4a5666; }
#smooth-content .lz-tf > span { color: var(--lz-navy); }
#smooth-content .lz-tool-tab { color: var(--lz-navy); }
#smooth-content .lz-tool-tab.is-active,
#smooth-content .lz-tool-tab.is-active span { color: #fff; }
#smooth-content .lz-tool-tab i,
#smooth-content .lz-tool-tab.is-active i { color: var(--lz-gold); }

/* Pills: the theme forces #101010 on #smooth-content anchors, which made the
   solid navy pill's label invisible (1.3:1). Restate at ID strength. */
#smooth-content .lz-pill-solid,
#smooth-content .lz-pill-solid span { color: #fff !important; }
#smooth-content .lz-pill-ghost,
#smooth-content .lz-pill-ghost span { color: var(--lz-navy) !important; }
#smooth-content .lz-pill-solid:hover,
#smooth-content .lz-pill-solid:hover span { color: var(--lz-navy) !important; }
#smooth-content .lz-pill-ghost:hover,
#smooth-content .lz-pill-ghost:hover span { color: var(--lz-gold) !important; }
/* Empty-state row: single full-width message, no dangling value column */
.lz-tool-lines li span:first-child:last-child { flex: 1 1 auto; color: rgba(255,255,255,.72); }

/* ================= Advisor popup ================= */
.lz-help-dialog { max-width: 620px; }
.lz-help-context {
    display: inline-block;
    margin: 0 0 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(189,158,112,.14);
    font-size: 13px;
    font-weight: 600;
    color: var(--lz-navy);
}
#smooth-content .lz-help-context { color: var(--lz-navy); }
.lz-help-lead { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: #4a5666; }
.lz-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lz-help-full { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .lz-help-grid { grid-template-columns: 1fr; } }
.lz-help-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lz-navy);
    resize: vertical;
    transition: border-color 180ms cubic-bezier(.23,1,.32,1), box-shadow 180ms cubic-bezier(.23,1,.32,1);
}
.lz-help-form textarea:focus {
    outline: none;
    border-color: var(--lz-gold);
    box-shadow: 0 0 0 3px rgba(189,158,112,.20);
}
.lz-help-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lz-help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}
.lz-help-submit { width: auto; border: 0; cursor: pointer; font-family: inherit; }
.lz-help-submit:disabled { opacity: .6; cursor: default; }
.lz-help-direct { display: flex; flex-wrap: wrap; gap: 18px; }
.lz-help-direct a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--lz-navy); }
#smooth-content .lz-help-direct a { color: var(--lz-navy); }
.lz-help-direct i { color: var(--lz-gold); }
.lz-help-status { margin: 16px 0 0; font-size: 14.5px; font-weight: 600; color: var(--lz-navy); }
#smooth-content .lz-help-status { color: var(--lz-navy); }

/* Secondary "Ask an advisor" button inside a navy result panel */
.lz-tool-help {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(.23,1,.32,1), border-color 180ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1);
}
#smooth-content .lz-tool-help { color: #fff !important; }
#smooth-content .lz-tool-help i { color: var(--lz-gold) !important; }
.lz-tool-help:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
    .lz-tool-help:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }
}
/* Advisor pill in the nav dropdowns */
.lz-drop-actions .lz-pill i { margin-right: 7px; color: var(--lz-gold); }

/* ================= Dropdown: free-tool chips ================= */
/* Quiet secondary tier above the primary actions: label + light chips, so the
   tools are reachable without competing with the main CTAs. */
.lz-drop-tools {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #eef0f4;
}
.lz-drop-tools-label {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lz-gold);
}
.lz-drop-toolchips { display: flex; flex-wrap: wrap; gap: 10px; }
.lz-toolchip {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1px solid #dde3ec;
    background: #f6f8fb;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color 180ms cubic-bezier(.23,1,.32,1),
                border-color 180ms cubic-bezier(.23,1,.32,1),
                transform 160ms cubic-bezier(.23,1,.32,1);
}
/* Dropdown lives in the header (outside #smooth-content), so scope to header. */
.lz-toolchip,
.lz-toolchip span,
.header-main .lz-toolchip,
.header-main .lz-toolchip span { color: var(--lz-navy); }
.lz-toolchip i,
.header-main .lz-toolchip i { font-size: 16px; color: var(--lz-gold); }
.lz-toolchip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
    .lz-toolchip:hover { background: #fff; border-color: var(--lz-gold); transform: translateY(-1px); }
}
@media (max-width: 1199.98px) {
    .lz-drop-tools { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Tool inside the popup: single column, the panel sits under the fields */
/* ================= Calculator modal =================
   The dialog used to cap at 760px and force the tool to a single column, so
   every calculator stacked into a long ladder: inputs, then a result panel
   pushed below the fold. The page version at /free-tools was already two
   columns. This restores that side-by-side reading on desktop, keeps the one
   saturated navy panel as the only colour weight, and stacks on small screens.
   Inputs left, answer right, both visible while you type. */
.lz-tools-dialog { max-width: 1060px; }
.lz-tools-pane-intro {
    margin: 0 0 26px;
    max-width: 68ch;
    font-size: 15.5px;
    line-height: 1.65;
    color: #4a5666;
}
#smooth-content .lz-tools-pane-intro { color: #4a5666; }
.lz-tools-dialog .lz-tool {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
@media (min-width: 992px) {
    .lz-tools-dialog .lz-tool {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 40px;
        align-items: start;
    }
    /* Denser than the full page: the user is mid-task in a dialog. */
    .lz-tools-dialog .lz-tool-fields { gap: 18px; }
    /* Dates always arrive in pairs (start/end, expiry/exit). Pairing them stops
       the field column growing taller than the answer beside it. */
    .lz-tools-dialog .lz-tool-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lz-tools-dialog .lz-tf { grid-column: 1 / -1; }
    .lz-tools-dialog .lz-tf:has(input[type="date"]) { grid-column: span 1; }
    /* The 5-question chooser runs long; keep the verdict in view while answering. */
    .lz-tools-dialog .lz-tool-out { position: sticky; top: 4px; }
    .lz-tools-dialog .lz-tool-figure strong { font-size: 40px; }
}

/* ================= Homepage service carousel =================
   Replaces the old .about-conter-items counter row inside
   choose-us-section-2. The theme's .counter-box rules were scoped under
   .about-conter-items, so removing that wrapper drops them cleanly and
   everything below is new rather than an override. Visual cues (white
   surface, 8px radius, 30px padding) are kept from the counter boxes so the
   section still reads as native. */
.lz-svc-slider-wrap { margin-top: 50px; }
@media (max-width: 1399px) { .lz-svc-slider-wrap { margin-top: 30px; } }

/* Swiper clips to this box; the card needs a stretchable slide to equalise
   heights, which Swiper does not do by default. */
.lz-svc-slider { width: 100%; }
.lz-svc-slider .swiper-slide { height: auto; display: flex; }

.lz-svc-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e7eaf0;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}
.lz-svc-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(18,40,75,.13);
    border-color: var(--lz-gold);
}
.lz-svc-slide-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: #f2f4f8;
    font-size: 22px;
    transition: background .4s, color .4s;
}
.lz-svc-slide:hover .lz-svc-slide-ico { background: var(--lz-navy); }
.lz-svc-slide-name {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}
.lz-svc-slide p {
    margin: 10px 0 22px;
    font-size: 15.5px;
    line-height: 1.6;
    /* blurb runs long and these cards are narrow; clamp instead of editing
       data that /service and the nav dropdown also render. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lz-svc-slide-more {
    margin-top: auto;          /* pins the CTA to the bottom of every card */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
}
.lz-svc-slide-more i { transition: transform .3s ease; }
.lz-svc-slide:hover .lz-svc-slide-more i { transform: translate(3px, -3px); }

/* Colours need the ID prefix: body.wt-light #smooth-content :is(p, span, ...)
   carries an ID and outranks class-only rules (see the note near line 1381). */
body.wt-light #smooth-content .lz-svc-slide-name,
#smooth-content .lz-svc-slide-name { color: var(--lz-navy); }
body.wt-light #smooth-content .lz-svc-slide p,
#smooth-content .lz-svc-slide p { color: #5a6675; }
body.wt-light #smooth-content .lz-svc-slide-more,
#smooth-content .lz-svc-slide-more { color: var(--lz-navy); }
body.wt-light #smooth-content .lz-svc-slide-ico i,
#smooth-content .lz-svc-slide-ico i { color: var(--lz-navy); }
body.wt-light #smooth-content .lz-svc-slide:hover .lz-svc-slide-ico i,
#smooth-content .lz-svc-slide:hover .lz-svc-slide-ico i { color: var(--lz-gold); }
.lz-svc-slide-more i { color: var(--lz-gold); }

/* Slider chrome. The theme's .array-button styling is scoped to
   .service-section-3, so none of it applies here. */
.lz-svc-slider-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* controls sit at the right of the slider */
    gap: 16px;
    margin-top: 24px;
}
.lz-svc-slider-prev,
.lz-svc-slider-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    border: 1px solid #d7dbe2;
    background: #fff;
    color: var(--lz-navy);
    font-size: 13px;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s;
}
.lz-svc-slider-prev:hover,
.lz-svc-slider-next:hover {
    background: var(--lz-navy);
    border-color: var(--lz-navy);
    color: #fff;
}
.lz-svc-slider-prev:focus-visible,
.lz-svc-slider-next:focus-visible { outline: 2px solid var(--lz-gold); outline-offset: 2px; }
/* Swiper's own .swiper-pagination-horizontal sets width:100%, which stretched
   this container across the row and stranded the next arrow at the far right
   edge. Shrink it to its content so the row reads [prev] [dots] [next] as one
   grouped control, spaced by .lz-svc-slider-nav's gap. */
.lz-svc-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    flex: 0 0 auto;
    position: static;
    gap: 8px;
}
.lz-svc-slider-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 999px;
    background: #c3cad6;
    opacity: 1;
    transition: width .3s, background .3s;
}
.lz-svc-slider-dots .swiper-pagination-bullet-active {
    width: 22px;
    background: var(--lz-gold);
}

/* ================= Logo colour: stop the theme flattening it =================
   Three theme rules force the logo to a single colour, from when the art was a
   one-tone raster:
     main.css:14043  .pre-logo .pre-logo-img            -> brightness(0) invert(1)  (solid white)
     main.css:13897  .footer-widget-wrapper-5 .footer-logo img -> brightness(0) invert(1)
     main.css:14688  .offcanvas-menu .logo img          -> brightness(0)            (solid black)
   The new lockups carry their own colour: layerz-group-vertical-white.png already
   has white lettering with the gold mark intact for the two navy surfaces, and the
   offcanvas panel is white so the full-colour wide lockup is correct there. Keep the
   filters off so the gold survives in all three. */
#preloader .pre-logo .pre-logo-img { filter: none; }
.footer-widget-wrapper-5 .footer-logo img { filter: none; }
.offcanvas-menu .header-top .logo img,
.offcanvas-menu .logo img { filter: none; }

/* ================= UAE map panel (choose-us-section-2) =================
   Replaces the old decorative PNG that main.css spun with
   `animation: cir36 10s linear infinite`. A rotating map makes no sense, and
   the theme's width/height:100% squashed the artwork's aspect ratio.
   NOTE: @keyframes cir36 itself stays put, 11 other rules still use it. */
.choose-us-wrapper-2 .choose-us-image,
.why-choose-us-wrapper-5 .choose-us-image {
    padding: 48px;              /* was 90px 30px, lopsided for a near-square map */
}
.choose-us-wrapper-2 .choose-us-image img,
.why-choose-us-wrapper-5 .choose-us-image img {
    animation: none;
    width: 100%;
    height: auto;               /* honour the 1080x925 ratio */
    max-width: 460px;
}

/* ================= Hero copy: align to the logo, lift three lines ==========
   The header is full-bleed with its gutter on .header-1 (150px at >=1900,
   60px below that) and the logo sits a further 34px in (the navbar's 40px
   padding, scaled by .header-main's zoom:0.85). The hero used Bootstrap's
   centred .container, so its text sat 35px right of the logo at 1440 and a
   full 223px right at 1920. Mirroring the header's gutter makes the headline
   land on the logo's left edge at every width.
   The upward shift is a margin on the content only: the hero's own padding and
   height must not change, because its background is bottom-anchored via
   calc(100% - 145px) and any height change would move the skyline. */
@media (min-width: 1200px) {
    .hero-section-1.hero-1 > .container {
        max-width: none;
        width: 100%;
        /* The section already carries the theme gutter (60px here, 150px at
           >=1900), so this only adds the remainder that lands the text on the
           logo's left edge. Measured against the rendered logo, not derived. */
        padding-left: 49px;
        padding-right: 49px;
    }
    .hero-section-1.hero-1 .hero-content {
        margin-top: 16px;      /* lowered 2 lines from the earlier -134px lift */
    }
}
@media (min-width: 1900px) {
    .hero-section-1.hero-1 > .container {
        padding-left: 66px;
        padding-right: 66px;
    }
}

/* ================= Inner-page heading aligned to the logo =================
   Every inner page puts its H1 in a centred Bootstrap .container, so the heading
   drifts right of the logo as the viewport widens (67px off at 1440, more at
   1920). Inner pages use .header-3, whose padding is a flat 30px + the navbar's
   34px = a constant 64px logo gutter at every width >=1200 (no responsive
   steps, unlike the homepage .header-1). So one flat 64px override lands the
   heading on the logo's left edge on all 17 breadcrumb pages. Below 1200 the
   heading is centred by main.css, so this is scoped to desktop only.
   Only the breadcrumb's own .container is touched, never the shared one. */
@media (min-width: 1200px) {
    .breadcrumb-wrapper > .container {
        max-width: none;
        width: 100%;
        /* This section sits inside .wt-scale (zoom:0.85), so the declared padding
           renders at 0.85x. The logo anchor's left edge is 64px, but the logo
           PNG carries ~13px of transparent inset, so the visible LAYERZ mark
           starts at ~77px. Align the heading to the mark, not the anchor box:
           90 * 0.85 = ~77px. */
        padding-left: 90px;
        padding-right: 75px;
    }
}


/* =========================================================================
   MOBILE, FOLDABLE AND ORIENTATION LAYER
   =========================================================================
   The responsive pass lives here, at the end of the file, on purpose: these
   rules must win over both the template (main.css) and the brand overrides
   above, and keeping them in one block makes the responsive behaviour readable
   in one place instead of scattered through 2,900 lines.

   Four viewport shapes drive the layer. Written as ratio bands, not device
   names, because the device list turns over every year and the shapes do not:

     A. Narrow floor      <=359.98px   Galaxy Z Fold 6 cover is 323px wide, the
                                       narrowest device shipping. Nothing above
                                       covered it.
     B. Near-square band  600-1199px, portrait-ish square ratio. Foldable inner
                                       screens: Z Fold 6 619x720, Pixel 10 Pro
                                       Fold 692x717, Z Fold 7 984x1092, rumoured
                                       iPhone Fold ~768x1024. Without this they
                                       get a phone layout stretched to 984px,
                                       because every rule above stops at 991.98.
     C. Short landscape   <=520px tall. No orientation query existed anywhere in
                                       the site or template CSS before this.
     D. Flip cover        <=430px wide AND <=460px tall. Z Flip 7 cover is a
                                       ~373x402 square.

   The near-square band caps at 5/4 so real tablets and laptops in landscape
   (wider than 4:3) keep the desktop treatment. */


/* ---- Scroll lock ---------------------------------------------------------
   main.js toggles body.no-scroll when the mobile drawer opens and body.locked
   when the search overlay opens. Neither class was defined in any stylesheet,
   so the page scrolled behind both. body.lz-modal-open above already did this
   correctly; these two just never got the matching rule. */
body.no-scroll,
body.locked { overflow: hidden; }


/* ---- Dynamic viewport height ---------------------------------------------
   Mobile browsers shrink the viewport when the address bar collapses, so 100vh
   overshoots the visible area. dvh tracks it. The plain vh line stays first as
   the fallback for engines without dvh. */
.lz-modal-dialog { max-height: 90vh; max-height: 90dvh; }
.wt-cam-wrap { height: 100vh; height: 100dvh; }


/* ---- Safe-area insets ----------------------------------------------------
   head.php now sends viewport-fit=cover, so env(safe-area-inset-*) resolves to
   real values on notched devices instead of 0. The bottom inset was already
   read by .lz-mobilebar and the floating buttons; it just needed the meta.
   Landscape also needs left/right: the notch moves to a side and swallows the
   edge of any fixed element. */
@media (orientation: landscape) {
    .lz-mobilebar {
        left: calc(14px + env(safe-area-inset-left, 0px));
        right: calc(14px + env(safe-area-inset-right, 0px));
    }
    .wt-float.wt-whatsapp,
    .wt-float.wt-scrolltop { right: calc(20px + env(safe-area-inset-right, 0px)); }
    .mobile-menu-area .mobile-menu-main.active {
        left: calc(15px + env(safe-area-inset-left, 0px)) !important;
    }
}


/* =========================================================================
   A. NARROW FLOOR  (<= 359.98px)  -- Galaxy Z Fold 6 cover is 323px
   ========================================================================= */

/* The logo stepped 265 -> 220 (767) -> 190 (420) in fixed jumps, so at 323px a
   220px logo sat beside the hamburger with almost nothing between. One clamp
   replaces the ladder: 46vw keeps the logo proportional to the bar at every
   cover width, floored at 150px so it stays readable, ceilinged at the old
   220px so a normal phone is unchanged. */
.mobile-topbar .logo img { width: clamp(150px, 46vw, 220px) !important; }

/* The logo anchor collapsed to a 190x19 text baseline while the image
   overflowed it; make it wrap the image so the whole logo is the tap target. */
.mobile-topbar .logo a,
.header-main .navbar-brand { display: inline-flex; align-items: center; }

/* Drawer is 390px wide (300px under 470px) and slides to left:15px. At 323px
   that left 8px of overlay. Cap it against the viewport instead. */
.mobile-menu-area .mobile-menu-main { width: min(390px, calc(100vw - 46px)); }

@media (max-width: 359.98px) {
    .lz-mobilebar { left: 8px; right: 8px; padding: 0 6px; }
    .lz-mobilebar .lz-mb-item span { font-size: 10px; }
}


/* ---- Fluid type ----------------------------------------------------------
   These five were declared at one fixed size with no step-down, so they held
   full size at 323px. Each clamp keeps the original value as its ceiling, so
   nothing changes from the tablet breakpoint upward. */
.wt-svc-badge i        { font-size: clamp(40px, 9vw,   68px); }
.lz-svc-tile i         { font-size: clamp(34px, 7vw,   52px); }
.lz-tool-figure strong { font-size: clamp(30px, 8vw,   46px); }
.lz-tool-head h2       { font-size: clamp(24px, 5.4vw, 34px); }
.lz-calc-range         { font-size: clamp(20px, 5vw,   26px); }


/* ---- Tool tabs: scroll strip on phones -----------------------------------
   Five pills at 14px/26px padding and 1.2rem wrapped to three or four rows on
   a phone, pushing the tool below the fold. A single scrolling row keeps the
   tab bar one line tall at any width. */
@media (max-width: 599.98px) {
    .lz-tool-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        margin-bottom: 30px;
        padding-bottom: 20px;
    }
    .lz-tool-tabs::-webkit-scrollbar { display: none; }
    .lz-tool-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 12px 18px;
        font-size: 1.05rem;
    }
}


/* ---- Comparison table: make the horizontal scroll visible ----------------
   .lz-compare carries min-width:560px inside an overflow-x:auto wrapper, so it
   always scrolls on a phone and nothing said so. Pure-CSS scroll shadows: the
   white cover layers scroll with the content (local) and uncover the fixed
   shadow layers (scroll) only when there is more table that way. */
.lz-table-wrap {
    background:
        linear-gradient(90deg,  #fff 32%, rgba(255,255,255,0)) left  / 28px 100% no-repeat local,
        linear-gradient(270deg, #fff 32%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
        radial-gradient(farthest-side at 0    50%, rgba(9,20,38,.16), rgba(9,20,38,0)) left  / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(9,20,38,.16), rgba(9,20,38,0)) right / 14px 100% no-repeat scroll;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================================
   B. NEAR-SQUARE FOLDABLE BAND  (600-1199px, 3/4 to 5/4)
   Z Fold 6 inner 619x720 | Pixel 10 Pro Fold 692x717 | Z Fold 7 984x1092
   ========================================================================= */
@media (min-width: 600px) and (max-width: 1199.98px)
   and (min-aspect-ratio: 3 / 4) and (max-aspect-ratio: 5 / 4) {

    /* Room for two columns here; the 991.98px collapse above was written for
       phones and turns a 984px screen into one long ladder. */
    .lz-tool {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 28px;
        padding: 30px;
    }
    .lz-calc-choices { grid-template-columns: 1fr 1fr; }

    /* The float went static only at 575.98px, so on every foldable inner screen
       it still sat on top of the map. */
    .lz-contact-float { position: static; max-width: none; margin-top: 16px; }

    /* max-height:339px is sized for the desktop brand column. Once the footer
       stacks full-width the mark renders at full height. */
    .lz-footer-mark img { max-height: 190px !important; }

    /* The hero's tall desktop padding is min-width:1200px only, so at 984px it
       fell back to padding-top:24px with the desktop 122% crop. Reframe for a
       square viewport: wider crop, less top padding, skyline still on the
       bottom edge. */
    .hero-section-1.hero-1 {
        background-size: 165% auto;
        background-position: 22% calc(100% - 30px);
        padding-top: 96px;
        padding-bottom: 130px;
    }

    /* Keep the section rhythm from collapsing to phone spacing on an 8" screen. */
    .lz-svc-slider-wrap { margin-top: 40px; }
}


/* =========================================================================
   C. SHORT LANDSCAPE  (<= 520px tall)
   Phones on their side, and a folded-open device rotated.
   ========================================================================= */
@media (orientation: landscape) and (max-height: 520px) {

    /* 66px of a ~400px viewport is a sixth of the screen. */
    .lz-mobilebar { height: 50px; }
    .lz-mobilebar .lz-mb-callring { width: 44px; height: 44px; }
    .footer-section-3 { padding-bottom: 78px; }

    /* A 90dvh dialog on a 402px-tall screen is 362px, and the sticky output
       panel inside left almost no scroll travel. */
    .lz-modal { padding: 8px; }
    .lz-modal-dialog { max-height: 96dvh; }
    .lz-tools-dialog .lz-tool-out { position: static; }

    /* min-height:940px is a desktop number; in landscape it is two screens of
       empty hero before any content. */
    .hero-section-1.hero-1 {
        min-height: 0;
        padding-top: 40px;
        padding-bottom: 70px;
        background-size: auto 190%;
        background-position: 50% 100%;
    }
}


/* =========================================================================
   D. FLIP COVER  (<= 430px wide AND <= 460px tall)
   Z Flip 7 cover is ~373x402. Almost square, and tiny.
   ========================================================================= */
@media (max-width: 430px) and (max-height: 460px) {
    .lz-mobilebar { display: none; }
    .footer-section-3 { padding-bottom: 40px; }
    .wt-float.wt-whatsapp,
    .wt-float.wt-scrolltop { transform: scale(.82); }
    .hero-section-1.hero-1 { padding-top: 20px; padding-bottom: 50px; }
}


/* =========================================================================
   Sticky positions that assumed a desktop header
   ========================================================================= */
/* top:110px is the unzoomed desktop header height. On a phone the header is not
   there, so the panel stuck 110px down the viewport and left a gap. */
@media (max-width: 991.98px) {
    .lz-calc-result { position: static; }
}


/* =========================================================================
   Hero fog: percentage stops instead of a fixed pixel ramp
   ========================================================================= */
/* The veil held its opening tone flat for a hardcoded 215px then ramped from
   calc(45% + 215px). 215px was measured against the 940px desktop hero (~23%
   of height). On a short or square hero the flat section was most of the
   gradient. As a percentage the ramp keeps its desktop proportions and scales
   with the box. */
.hero-section-1.hero-1::before {
    background:
        linear-gradient(90deg,
            rgba(255,255,255, calc(.9 * var(--lz-fog-left))) 0,
            rgba(255,255,255, calc(.9 * var(--lz-fog-left))) 3%,
            rgba(255,255,255,0) calc(var(--lz-fog-left-span) * 1%)),
        linear-gradient(180deg,
            rgba(255,255,255, calc(.72 * var(--lz-fog))) 0,
            rgba(255,255,255, calc(.72 * var(--lz-fog))) 23%,
            rgba(255,255,255, calc(.55 * var(--lz-fog))) 68%,
            rgba(255,255,255, calc(var(--lz-fog-bottom, .86) * var(--lz-fog))) 100%);
}


/* =========================================================================
   Touch targets: 44x44 minimum on anything tappable
   ========================================================================= */

/* The only way to dismiss the calculator and tools modals was a 38px circle. */
.lz-modal-close { width: 44px; height: 44px; }

/* Pagination shrank from 46px to 40px below 576px, exactly where it stops
   being clicked and starts being tapped. */
@media (max-width: 575.98px) {
    .lz-page-num,
    .lz-page-arrow { min-width: 44px; height: 44px; }
}

/* A 17px checkbox in a 15px-text label came to about 24px of hit area. */
.lz-calc-addon { min-height: 44px; }
.lz-calc-addon input { width: 20px; height: 20px; }

/* Calculator selects rendered at 41px. */
.lz-calc-field select { min-height: 44px; }

/* Mobile bar items were 34px inside a 66px bar, so most of the bar was dead. */
.lz-mobilebar .lz-mb-item { min-height: 46px; }

/* Standalone text CTAs that act as buttons. Padding, not height, so the text
   baseline does not move. */
.lz-faq2-more,
.news-btn { display: inline-flex; align-items: center; min-height: 44px; }

/* The lz-pill CTAs rendered at 34-38px tall. */
.lz-pill { min-height: 44px; }

/* The header search toggle was a 16x28 icon. */
.main-header__search.search-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}


/* ---- Zoom compensation for the calculator form ---------------------------
   .lz-calc-field controls sit inside .wt-scale (zoom:0.85), so a declared 44px
   target renders at ~37px. The form is the densest tap surface on the site, so
   it is worth compensating: 52 * 0.85 = 44 physical. Scoped to the calculator
   only, since the zoom is a section-wide decision left intact elsewhere. */
.wt-scale .lz-calc-field select { min-height: 52px; }
.wt-scale .lz-calc-addon { min-height: 52px; }

/* Every logo anchor (header, mobile topbar, drawer, footer) collapsed to its
   text baseline (~19px) while the image overflowed, so the tap target was a
   thin strip. Make the anchor wrap the image. */
.logo a,
.navbar-brand,
.mobile-menu-main .logo a { display: inline-flex; align-items: center; }


/* =========================================================================
   REVEAL-ON-SCROLL INITIAL STATE
   =========================================================================
   Pairs with the ScrollTrigger batch in main.js that replaced WOW.js. The
   hidden start state is keyed to .lz-anim-ready, a class main.js adds only once
   it has booted, so if the script fails the .wow elements stay fully visible
   instead of blank. GSAP writes opacity/transform inline as each element enters,
   overriding these. Under reduced-motion main.js clears props and never adds the
   class, but this guard covers the class being present from a prior state. */
.lz-anim-ready .wow {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
    .lz-anim-ready .wow { opacity: 1; transform: none; }
}


/* =========================================================================
   TYPOGRAPHY: LIGHTER WEIGHTS, MORE OPEN LEADING
   =========================================================================
   Brief: shift bold to regular and regular to light site-wide, and open up
   line spacing because text read "crumpled together".

   Context that shapes this block:
   - Headings are ALREADY light. A hand-appended !important block in main.css
     (~:13794) forces h1-h6, .split-title and every [class*="-title"] to 300, and
     b/strong/.btn/button to 400. So headings are left at 300 and are not touched
     here; the weight work is on body copy and the .lz-* / .wt-* label layer.
   - The real "heavy" source is body { font-weight: 500 } in main.css, inherited
     by every <p> (p sets no weight of its own). Dropping body to 300 fixes all
     paragraph copy in one line.
   - The real "crumped" source is body { line-height: 28px } — a fixed pixel
     leading. Switching it to a unitless 1.7 makes every element that inherits
     leading recompute correctly at its own size, so only headlines that set
     their OWN tight line-height need explicit relaxing below.

   layerz.css loads after main.css, so equal-specificity plain rules here win;
   glyph weights (Font Awesome faces) are deliberately excluded. */

/* ---- Base: the two highest-value changes ---- */
body {
    font-weight: 300;
    line-height: 1.7;
}
/* b/strong stay at 400 (already set !important upstream): now that body copy is
   300, 400 is exactly the emphasis contrast the tag exists to provide. */

/* ---- Bold -> regular (700 and 600 -> 400) ----
   The layerz-authored label/eyebrow/pill layer plus the few main.css paragraphs
   that hard-set a heavy weight. Interactive labels (pills, tabs, nav) land at
   400 here, which is the floor we want for tap targets. */
.lz-dropdown-head,
.lz-lic-subhead,
.lz-lic-aside-label,
.lz-lic-price strong,
.lz-step-num,
.lz-calc-field > label,
.lz-calc-result-label,
.lz-calc-range,
.lz-modal-eyebrow,
.lz-drop-eyebrow,
.lz-calcbanner-eyebrow,
.lz-svc-tilenum,
.gt-widget-title,
.lz-cf-label,
.lz-tl-year,
.lz-tool-label,
.lz-drop-tools-label,
.wt-svc-card-2 .wt-svc-more,
.project-section-3 .approach-box .content span,
.lz-mb-calllabel,
.contact-form-box label,
.lz-dropdown-btn,
.lz-aside-cta,
.lz-compare thead th,
.lz-compare tbody td:first-child,
.lz-calc-wa,
.lz-modal-foot a,
.lz-menu-meta,
.lz-pill,
.lz-imgph span,
.lz-svc-tilecard .content > ul li a,
.lz-press-section .text-items .news-btn,
.lz-press-more,
.lz-cf-phone,
.lz-faq-more,
.lz-tool-permalink,
.lz-tf > span,
.lz-tool-lines li span:last-child,
.lz-tool-morelink,
.lz-help-context,
.lz-help-direct a,
.lz-help-status,
.lz-tool-help,
.lz-toolchip,
.lz-svc-slide-name,
.lz-svc-slide-more {
    font-weight: 400;
}

/* main.css paragraphs that hard-set 600/700 — override back to regular. */
#smooth-content .service-box-items-2 .service-content p,
#smooth-content .testimonial-wrapper-4 .testi-box-2 p,
#smooth-content .hero-4 .hero-content p,
#smooth-content .footer-widget-items .footer-content p {
    font-weight: 400;
}

/* main.css body/lead paragraphs that hard-set 500 — take to light like the rest
   of the running copy (these are the prominent hero and about intros that still
   read heavy after body dropped to 300). */
#smooth-content .hero-1 .hero-content p,
#smooth-content .about-wrapper .about-content .text,
#smooth-content .footer-bottom-5 p {
    font-weight: 300;
}

/* ---- Regular -> light (500/400 -> 300) ----
   Non-interactive meta and secondary text only. Interactive controls
   (.lz-tool-tab, .lz-page-arrow, .lz-crumbs) are intentionally excluded so tap
   labels keep a 400-ish weight. */
.lz-menu-label,
.lz-press-meta li,
.lz-footer-cols .widget-head h3,
.news-standard-section .gt-date-list li,
.testimonial-box-style-1 .lz-tq,
.lz-milestones-lead {
    font-weight: 300;
}

/* ---- Leading: relax the display headlines that set their own tight value ----
   Everything else now inherits the unitless 1.7 from body and recomputes on its
   own, so only these hard-coded sub-1.1 headlines need touching. */
#smooth-content .hero-1 .hero-content h1,
#smooth-content .hero-1 .hero-content h1.split-title,
.breadcrumb-wrapper .page-heading h1.split-title,
#smooth-content .section-title h2,
#smooth-content .section-title-2 .title,
#smooth-content .project-section .section-title h2,
#smooth-content .service-section-4 .section-title .title,
#smooth-content .footer-section-2 .footer-lets-text h2,
#smooth-content .hero-4 .hero-content .title,
#smooth-content .lets-talk-section .title {
    line-height: 1.12;
}


/* =========================================================================
   MOBILE UI FIXES (header glass, hero framing vars, buttons, testimonials)
   ========================================================================= */

/* ---- #1 Sticky header glass covers the full mobile bar -------------------
   The glass was painted on #sticky-header, but the visible bar
   .mobile-menu-area is position:absolute (out of flow) so it adds no height to
   the fixed header: the glass box was only the 18+18px header padding tall and
   the bar overflowed below it. Paint the glass onto the bar instead (it is
   already width:100%; left:0; padding:18px 0, so full-bleed) and strip it off
   the short header box. Keeps the bar absolute, so the off-canvas drawer that
   relies on that positioning is untouched. */
@media (max-width: 1199.98px) {
    #sticky-header.sticky-menu .mobile-menu-area {
        background-color: rgba(247, 248, 250, 0.72) !important;
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
        box-shadow: 0 6px 28px rgba(24, 48, 87, 0.08);
    }
    #sticky-header.sticky-menu {
        background-color: transparent !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none !important;
    }
}

/* ---- #2 Mobile-only hero background framing --------------------------------
   Phones read the hero crop from three custom properties so the localhost
   hero-tuner can dial X/Y/zoom for mobile without touching desktop. The
   fallback values reproduce the current phone framing exactly (122% / 0% /
   -145px), so with the tuner absent (production) nothing changes. Phone-only
   ceiling (<=599.98) keeps it clear of the 600-1199 near-square foldable band. */
@media (max-width: 599.98px) {
    .hero-section-1.hero-1 {
        background-size: var(--lz-hero-zoom-m, 535%) auto;
        background-position: var(--lz-hero-x-m, 54%) calc(100% + var(--lz-hero-y-m, 150px));
        /* Backdrop: below 1200px the hero had NO background-color, so any part
           of the box the photo did not cover painted the white body straight
           through (the "solid white overlapping the image"). Give it the sky
           tone so the uncovered strip reads as sky, not a hard white block. */
        background-color: var(--lz-hero-bg-m, #f4f7fa);
        /* Remap the shared fog vars onto mobile-specific sources. */
        --lz-fog: var(--lz-fog-m, 0.77);
        --lz-fog-bottom: var(--lz-fog-bottom-m, 0.86);
        /* Fixed height owns where the About section starts, so it stays put no
           matter how the hero is moved. Hero top slides the headline down
           INSIDE this band (box-sizing:border-box contains the padding, so the
           band height does not grow); padding-bottom is 0. This is what
           decouples the hero from the content below. main.css:14471 forces
           padding-top/bottom !important, so these must stay !important to win. */
        min-height: var(--lz-hero-h-m, 1095px);
        padding-top: var(--lz-hero-top-m, 155px) !important;
        padding-bottom: var(--lz-hero-gap-m, 0px) !important;
    }
}

/* ---- #3 Testimonials Swiper track ----------------------------------------
   The cards had no fixed width (were grid cells); as slides they size via
   slidesPerView. Equalize slide height so mixed-length quotes align. */
.lz-testi-slider { overflow: hidden; }
.lz-testi-slider .swiper-slide { height: auto; }
.lz-testi-slider .client-testimonial__item { height: 100%; margin-top: 0; }
.lz-testi-dots { text-align: center; margin-top: 24px; }
.lz-testi-dots .swiper-pagination-bullet-active { background: var(--lz-gold, #BD9E70); }

/* ---- #5 Hero content left-aligned on mobile ------------------------------ */
@media (max-width: 1199.98px) {
    .hero-section-1.hero-1 .hero-content { text-align: left; }
    .hero-section-1.hero-1 .hero-content .hero-button {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ---- #6 Hero buttons stay on one row on mobile ---------------------------
   The two .theme-btn-main.style-2 pills wrapped to two lines at <=767 via
   flex-wrap:wrap. Force one row and shrink to fit; keep the arrow circle at
   34px (34 + 2x5 padding = 44px tap height). At the 323px Fold cover drop the
   arrow entirely to reclaim width. */
@media (max-width: 767px) {
    .hero-1 .hero-content .hero-button { flex-wrap: nowrap; gap: 10px; }
    .hero-1 .hero-content .hero-button .theme-btn-main.style-2 {
        flex: 0 1 auto;
        min-width: 0;
        padding: 5px 14px;
        padding-right: 5px;
    }
    .hero-1 .hero-content .hero-button .theme-btn-main.style-2 .theme-btn {
        margin-right: 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    .hero-1 .hero-content .hero-button .theme-btn-main.style-2 .theme-btn-arrow-right {
        width: 34px;
        height: 34px;
    }
}
@media (max-width: 360px) {
    .hero-1 .hero-content .hero-button .theme-btn-main.style-2 .theme-btn-arrow-right { display: none; }
    .hero-1 .hero-content .hero-button .theme-btn-main.style-2 .theme-btn { margin-right: 0; }
    .hero-1 .hero-content .hero-button .theme-btn-main.style-2 {
        padding: 10px 14px;
        min-height: 44px;
    }
}


/* =========================================================================
   BREADCRUMB HEADING: left-align on mobile (was centered by main.css)
   =========================================================================
   main.css centers .page-heading at <=1199 and <=767; the brand direction is
   left-aligned headings on every viewport. Desktop is already left (no
   text-align above 1199); this covers tablet and phone. */
@media (max-width: 1199.98px) {
    .breadcrumb-wrapper .page-heading { text-align: left; }
    .breadcrumb-wrapper .page-heading .lz-crumbs { justify-content: flex-start; }
}


/* Hero tuner: content-start offset. Pushes the first post-hero section down so
   the phone hero reads clean. Homepage-only (the sibling selector matches
   nowhere else) and prod-safe (var unset -> 0). Mobile-scoped to match the
   mobile-only hero zoom/position tuning. */
/* (Content start now extends the hero's own padding-bottom instead of adding a
   margin here, so the space it opens shows the hero image rather than the white
   page background. See the phone hero block above.) */


/* =========================================================================
   BUTTON SIZING, FLOAT CARD, GOLD-CHIP GLYPHS
   ========================================================================= */

/* ---- #3 Match the two outlier buttons to the standard theme button --------
   .thems-btn contact cards rendered ~62px (padding 18px, main.css); the
   .lz-calcbanner-btn pill rendered 44px. The site standard (.theme-btn-main
   .theme-btn) is ~48px. Normalize both. #smooth-content prefix beats main.css
   without !important. */
#smooth-content .contact-us-card-item .contact-content .thems-btn {
    padding: 13px 30px;
    font-size: 16px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lz-calcbanner-btn { padding: 15px 30px; font-size: 16px; min-height: 48px; }

/* ---- #4 Freeze the floating contact card ---------------------------------
   float-bob-y was removed from the markup (contact.php); its keyframes held a
   permanent translateY(-30px) baseline, so the resting bottom moves from 24px
   to 54px to keep the card where it visually sat. The FAQ badge keeps the
   class and keeps animating. */
.lz-contact-float { bottom: 54px; }

/* ---- #5 Glyphs on the gold chip are always white -------------------------
   Every .theme-btn-arrow chip on the site renders on the gold fill (verified
   across pages: the .style-2 `background:var(--white)` is overridden to gold,
   and plain/bg-black variants use var(--theme)=gold). The chips are <span>s, so
   the broad `:is(span, .text, i)` rule in main.css's appended tail catches them
   and forces #101010 on top of the gold. This lands a dark glyph on gold, most
   visibly on the hover-revealed left arrow. Force white on every arrow-chip
   glyph, unconditionally. */
#smooth-content .theme-btn-arrow-left,
#smooth-content .theme-btn-arrow-right,
#smooth-content .theme-btn-arrow-left i,
#smooth-content .theme-btn-arrow-right i { color: #fff !important; }


/* ---- #2 Footer: five-column layout (brand + 4 link columns) --------------
   Bootstrap has no native fifth column; the per-column col-xl-3 gives 25% each.
   Override to an even 5-up on desktop with a slightly wider brand column. Below
   1200 the col-lg-6 / col-md-6 classes keep the 2-up / 1-up stacking. */
@media (min-width: 1200px) {
    .lz-footer-cols > [class*="col-"] { flex: 0 0 auto; width: 19%; }
    .lz-footer-cols > .lz-footer-brandcol { width: 24%; }
}
/* Bottom-bar link row wraps cleanly now that it carries the Company links too. */
.footer-bottom-5 .footer-list { flex-wrap: wrap; }


/* =========================================================================
   Heading emphasis: italic gold, one size down
   =========================================================================
   Site-wide treatment for the two highlight spans in headings. `.style-font`
   is the lead-in emphasis, `.style-color` the trailing accent; both now read as
   italic, gold and slightly smaller than the words around them, the same
   redesign applied to the rest of the type.

   Two things make this fiddly:
   - GSAP SplitText rewrites the span's text into per-character `.char` spans, so
     the colour has to reach `.style-font .char` too, not just the span.
   - `main.css` colours these with ID-weighted rules: `#smooth-content
     .split-title *` (#101010) and `.section-title h2 .style-color` (#797979).
     Class-only rules lose to those, so colour carries `!important`; size and
     style inherit down to the chars on their own. */
.style-font,
.style-color,
.style-font .char,
.style-color .char,
.style-font .word,
.style-color .word {
    font-style: italic !important;
    color: var(--lz-gold) !important;
}
.style-font,
.style-color {
    font-size: 0.88em !important;
}

/* =========================================================================
   Sticky header: flush bottom, shorter
   =========================================================================
   Remove the drop shadow so the glass bar has no visible line at its bottom
   edge and sits flush against the content behind it. Trim ~15px of desktop
   height (the sticky bar was 25px top/bottom padding). */
.sticky-menu { box-shadow: none !important; }
@media (min-width: 1200px) {
    #sticky-header.sticky-menu { padding-top: 17px !important; padding-bottom: 17px !important; }
}
/* Drop the 1px bottom stroke the theme draws under the header. white.css:57
   adds `border-bottom: 1px solid rgba(0,0,0,.15)` on .header-1 and main.css:2188
   the light-on-dark version; both leave a hairline under the resting and sticky
   bar. Kill it in every state. */
#sticky-header,
#sticky-header.header-1,
#sticky-header.sticky-menu,
.header-section.header-1 { border-bottom: 0 !important; }
/* Mobile sticky bar: the glass bar carried a soft shadow (layerz.css:3389). */
@media (max-width: 1199.98px) {
    #sticky-header.sticky-menu,
    #sticky-header.sticky-menu .mobile-menu-area { box-shadow: none !important; }
}

/* =========================================================================
   Press list items: fill the card with a short excerpt
   =========================================================================
   The side news cards were stretched to the featured card's height but held
   only meta + title, so the content floated in the middle with dead space top
   and bottom. Giving them the same excerpt the featured card uses fills the
   card and matches its density. Clamp to two lines so the rhythm stays even. */
.lz-press-item-body p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #5a6675;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lz-press-item-body h4 { margin-bottom: 8px; }

/* Press side card: sizing pass. The meta line and title were too small for the
   card ratio (12.5 / 16.5px). Nudge them up so the card reads at the right
   density, enlarge the meta icons to match, and push the read-more link to the
   bottom-right on its own line. The body is already flex-column, so
   margin-top:auto + align-self:flex-end pins the link a line below the excerpt.
   Meta colour carries the #smooth-content prefix because main.css:13908 recolours
   spans/li with ID weight and would otherwise win. */
.lz-press-item-body .lz-press-meta { margin-bottom: 12px; }
#smooth-content .lz-press-item-body .lz-press-meta li,
.lz-press-item-body .lz-press-meta li { font-size: 13.5px; }
.lz-press-item-body .lz-press-meta i { font-size: 13px; }
.lz-press-item-body h4 { font-size: 18px; line-height: 1.38; margin-bottom: 10px; }
.lz-press-item-body p { font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
/* Read-more, bottom-right, a line below the excerpt. */
.lz-press-item-body { justify-content: flex-start; }
.lz-press-item .lz-press-more {
    margin-top: auto;
    align-self: flex-end;
    padding-top: 4px;
}


/* Homepage About section: a little breathing room below the hero (two lines).
   Scoped to the homepage via the hero sibling selector so the About page is
   untouched, and to desktop so the mobile hero min-height still owns its gap. */
@media (min-width: 1200px) {
    .hero-section-1.hero-1 ~ .about-section { margin-top: 48px; }
}


/* Inner-page breadcrumb heading: drop the whole block down ~2 lines. Shared
   partial (includes/page-heading.php) so this covers all 17 inner pages. */
.breadcrumb-wrapper .page-heading .section-title { margin-top: 56px; }


/* =========================================================================
   Trust strip (money pages) — real value props + gated metric chips
   ========================================================================= */
.lz-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    padding: 20px 26px;
    margin: 0 0 40px;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    background: linear-gradient(120deg, #fbfcfd 0%, #f6f8fb 100%);
}
.lz-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--lz-navy);
    line-height: 1.3;
}
.lz-trust-item > i { color: var(--lz-gold); font-size: 16px; flex: none; }
.lz-trust-metric { padding-right: 28px; border-right: 1px solid #e2e6ee; }
.lz-trust-metric > div { display: flex; flex-direction: column; }
.lz-trust-metric strong { font-size: 17px; font-weight: 600; color: var(--lz-navy); line-height: 1.1; }
.lz-trust-metric span { font-size: 12px; color: #5a6675; }
@media (max-width: 575.98px) {
    .lz-trust { gap: 12px 18px; padding: 16px 18px; }
    .lz-trust-metric { padding-right: 0; border-right: 0; }
    .lz-trust-item { font-size: 13px; }
}

/* =========================================================================
   Section headings: open the letters, guarantee the gap below
   =========================================================================
   The section-heading hooks (.wa_title_spilt_1, .rr_title_anim) carry no CSS of
   their own; they are only GSAP SplitText targets, so they inherited
   letter-spacing:normal and, worse, their gap below collapsed. The parent
   `.section-title` loses its 30px bottom margin two ways: a `.mb-0` in the
   markup on many instances, and main.css:3763 zeroing it under 767px.

   Fix both on the heading itself so it cannot be undone by the parent:
   - a small positive letter-spacing (the per-char inline-block split reads
     tight without it),
   - a real bottom margin that survives .mb-0 and the mobile reset. */
.section-title h2,
h2.wa_title_spilt_1,
h2.rr_title_anim {
    letter-spacing: 0.005em;
}
.section-title h2.wa_title_spilt_1,
.section-title h2.rr_title_anim,
.section-title.mb-0 h2 {
    margin-bottom: 22px;
}
@media (max-width: 767px) {
    .section-title h2.wa_title_spilt_1,
    .section-title h2.rr_title_anim,
    .section-title.mb-0 h2 {
        margin-bottom: 18px;
    }
}

/* =========================================================================
   Dark cards: restore readable text over navy
   =========================================================================
   .lz-lic-aside, .lz-faq-aside and .lz-calc-result are navy-gradient cards, but
   they sit inside #smooth-content on a wt-light body, where main.css:13908
   (`:is(p,span,li,label,td,…) { color:#3a3f4a }`) and :13919
   (`:is(b,strong) { color:#101010 }`) carry ID weight and repaint their text
   near-black on navy — unreadable. These rules re-assert the cards' intended
   palette at equal (ID) specificity. Values mirror each card's own class rules;
   gold stays for labels, white/rgba-white for body, so contrast clears AA. */
body.wt-light #smooth-content .lz-lic-aside :is(p, span, li, strong, b, a, div),
body.wt-light #smooth-content .lz-faq-aside :is(p, span, li, strong, b, a, div, h3),
body.wt-light #smooth-content .lz-calc-result :is(p, span, li, strong, b, a, div, em) {
    color: rgba(255, 255, 255, .82);
}
/* Strong figures and headings: full white. */
body.wt-light #smooth-content .lz-lic-price strong,
body.wt-light #smooth-content .lz-lic-aside-links a,
body.wt-light #smooth-content .lz-faq-aside h3,
body.wt-light #smooth-content .lz-calc-range,
body.wt-light #smooth-content .lz-calc-breakdown li strong,
body.wt-light #smooth-content .lz-calc-wa { color: #fff; }
/* Gold accents (labels, "from", icons) survive the repaint. */
body.wt-light #smooth-content .lz-lic-aside-label,
body.wt-light #smooth-content .lz-lic-aside-links i,
body.wt-light #smooth-content .lz-calc-result-label { color: var(--lz-gold); }
/* Quieter secondary lines, still well above AA on navy. */
body.wt-light #smooth-content .lz-lic-aside-note,
body.wt-light #smooth-content .lz-lic-from,
body.wt-light #smooth-content .lz-faq-aside p,
body.wt-light #smooth-content .lz-calc-note,
body.wt-light #smooth-content .lz-calc-range em { color: rgba(255, 255, 255, .72); }
body.wt-light #smooth-content .lz-calc-wa i { color: #25D366; }

/* Anchor links inside the dark cards need one more class to clear main.css:13909
   `a:not(.theme-btn-main):not(.email-btn)` (1,3,1). The card-ancestor class
   brings these to (1,3,1); layerz.css loads after main.css, so they win. */
body.wt-light #smooth-content .lz-lic-aside .lz-lic-aside-links a { color: rgba(255,255,255,.9); }
body.wt-light #smooth-content .lz-lic-aside .lz-lic-aside-links a:hover { color: var(--lz-gold); }
body.wt-light #smooth-content .lz-faq-aside a.lz-faq-more { color: #fff; }
body.wt-light #smooth-content .lz-calc-result a.lz-calc-wa { color: #fff; }

/* =========================================================================
   Batch fixes: buttons, crumbs, counter row, service card, letter-spacing
   ========================================================================= */

/* [11] SplitText headings: neutralise the theme's -2px tracking. Because
   SplitText wraps every letter in an inline-block span, negative tracking
   overlaps the glyphs. main.css sets -2px on .choose-us-wrapper-2 h2 (0,4,0)
   and two other spots; beat all of them, everywhere a split heading renders. */
#smooth-content .split-title,
#smooth-content .wa_title_spilt_1,
#smooth-content .rr_title_anim,
#smooth-content .choose-us-content .section-title h2,
#smooth-content .section-title h2.split-title,
#smooth-content .split-title .char,
#smooth-content .wa_title_spilt_1 .char,
#smooth-content .rr_title_anim .char {
    letter-spacing: 0 !important;
}

/* [5] Bare .style-2 buttons (no bg-white-style modifier) fell back to a
   transparent fill with an invisible white border on the white page, leaving
   a dark label floating by a gold arrow. Give them the same navy pill the
   modified buttons get. Covers about.php (x2), 404, service, faq. */
#smooth-content .theme-btn-main.style-2:not(.bg-white-style):not(.bg-black-style):not(.border-style) {
    background-color: var(--lz-navy) !important;
    border-color: var(--lz-navy) !important;
}
#smooth-content .theme-btn-main.style-2:not(.bg-white-style):not(.bg-black-style):not(.border-style) .theme-btn,
#smooth-content .theme-btn-main.style-2:not(.bg-white-style):not(.bg-black-style):not(.border-style) .theme-btn span {
    color: #fff !important;
}

/* [6] Breadcrumbs now sit BELOW the blurb (markup moved). Give the nav clear
   air above and below on every inner page. */
.breadcrumb-wrapper .page-heading .lz-crumbs {
    margin-top: 62px;
    margin-bottom: 4px;
}

/* [8] Service card head: round the image top corners to match the 16px card.
   The card inherits padding:20px from .news-box-items-2; remove it so the
   image sits flush to the card edges and the rounding actually clips it. */
.lz-svc-tilecard { padding: 0 !important; }
.lz-svc-tilehead { border-radius: 16px 16px 0 0; }
.lz-svc-tilecard .content { margin-top: 0 !important; }

/* [10] Counter row: 500+ figure, then caption, then the button on the right.
   The figure and caption share one line as a single unit. */
.lz-about-cta-row .about-counter-items {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}
.lz-about-cta-row .about-counter-items .lz-counter-fig {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 72px;
    font-weight: 200;
    margin: 0;
    flex: none;
    color: transparent;
    -webkit-text-stroke: 0.6px var(--lz-navy);
    text-stroke: 0.6px var(--lz-navy);
}
.lz-about-cta-row .about-counter-items .lz-counter-fig .plus {
    font-size: 40px;
    -webkit-text-stroke: 0.6px var(--lz-gold);
    text-stroke: 0.6px var(--lz-gold);
    color: transparent;
}
#smooth-content .lz-about-cta-row .about-counter-items .lz-counter-cap {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    color: #5a6675;
    max-width: 22ch;
}
.lz-about-cta-row .theme-btn-main { flex: none; margin-left: auto; }
@media (max-width: 575.98px) {
    .lz-about-cta-row .about-counter-items { flex-wrap: wrap; }
    .lz-about-cta-row .theme-btn-main { margin-left: 0; }
}

/* [2] news-grid card: right-align the Read More button so every card's button
   shares one right edge (the card is a grid, button is in normal flow). */
.news-standard-section .gt-news-content .theme-btn-main { margin-left: auto; }
.news-standard-section .gt-news-content { display: flex; flex-direction: column; align-items: flex-start; }
.news-standard-section .gt-news-content .theme-btn-main { align-self: flex-end; }

/* [1] Homepage press cards: adopt the news-grid content model (date/category/
   read-time meta, matching heading + excerpt) while staying compact for the
   half-width column. Read more is right-aligned text, already handled at
   .lz-press-item .lz-press-more (margin-top:auto; align-self:flex-end). */
.lz-press-meta li { font-size: 12.5px; }
.lz-press-item-thumb { width: 116px; }
#smooth-content .lz-press-item-body .lz-press-meta li { color: #8b95a3; }
.lz-press-item-body h4 { font-size: 17px; line-height: 1.35; }
.lz-press-feat-body .lz-press-meta,
.lz-press-item-body .lz-press-meta { gap: 6px 14px; }
/* featured read-more also right-aligned to match the side cards */
.lz-press-feat-body { display: flex; flex-direction: column; }
.lz-press-feature .lz-press-more { align-self: flex-end; margin-top: 4px; }
@media (max-width: 479.98px) {
    .lz-press-item-thumb { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Reusable lead form (includes/lead-form.php) — dropped into every money page.
   Reuses the site's .contact-form-box / .form-clt / .theme-btn-main styling;
   these rules add only the heading, label, message and thank-you states.
   --------------------------------------------------------------------------- */
.lz-lead-section { background: var(--lz-tint, #f6f8fb); }
.lz-lead-box { max-width: 820px; margin-inline: auto; }
.lz-lead-head { margin-bottom: 24px; }
.lz-lead-head h2 { margin-bottom: 8px; font-size: 30px; }
.lz-lead-head p { margin-bottom: 0; opacity: .85; }
.lz-lead-form .form-clt { margin-bottom: 0; }
.lz-lead-form .form-clt label {
    display: block; font-size: 14px; font-weight: 500;
    margin-bottom: 6px; color: var(--lz-navy, #12284b);
}
.lz-lead-form .theme-btn-main { margin-top: 8px; }
.lz-lead-msg { margin-top: 14px; font-size: 14px; min-height: 1em; }
.lz-lead-msg.error { color: #c0392b; }
.lz-lead-msg.success { color: #1f9d57; }
.lz-lead-thanks { text-align: center; padding: 24px 8px; }
.lz-lead-thanks h3 { margin-bottom: 10px; color: var(--lz-navy, #12284b); }
.lz-lead-thanks a { text-decoration: underline; }

/* ===========================================================================
   Service page: view switcher (grid / list / carousel)
   Scoped entirely to .lz-viewbar / .lz-list-view / .lz-svc-page-swiper so the
   card's own styling (.lz-svc-tilecard and children) is never touched. Grid mode
   is the untouched Bootstrap row, so it renders exactly as before.
   =========================================================================== */

/* The switcher bar — reuses the .lz-tool-tab pill language in Layerz tokens. */
.lz-viewbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 0 22px;
}
.lz-viewbar .lz-viewbtn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dde2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--lz-navy, #12284b);
    cursor: pointer;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lz-viewbar .lz-viewbtn svg { display: block; }
@media (hover: hover) and (pointer: fine) {
    .lz-viewbar .lz-viewbtn:hover { border-color: var(--lz-gold, #bd9e70); color: var(--lz-gold, #bd9e70); }
}
.lz-viewbar .lz-viewbtn.is-active {
    background: var(--lz-navy, #12284b);
    border-color: var(--lz-navy, #12284b);
    color: #fff;
}
.lz-viewbar .lz-viewbtn:focus-visible {
    outline: 2px solid var(--lz-gold, #bd9e70);
    outline-offset: 2px;
}

/* ---- LIST mode: one card per row, card turns horizontal (photo left, text right).
   Only the direction/proportions change; the card's radius, border, pill, title,
   checkmark list, Explore button and hover lift all inherit unchanged. ---- */
.lz-svc-page-grid.lz-list-view > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.lz-svc-page-grid.lz-list-view .lz-svc-tilecard {
    flex-direction: row;
    align-items: stretch;
}
.lz-svc-page-grid.lz-list-view .lz-svc-tilehead {
    flex: 0 0 38%;
    max-width: 300px;
    min-width: 150px;
    min-height: 0;
    border-radius: 16px 0 0 16px;
}
.lz-svc-page-grid.lz-list-view .lz-svc-tilecard .content {
    flex: 1;
}
@media (max-width: 575.98px) {
    /* On the narrowest phones the sideways split gets too tight; give the photo less. */
    .lz-svc-page-grid.lz-list-view .lz-svc-tilehead { flex-basis: 34%; min-width: 118px; }
    .lz-svc-page-grid.lz-list-view .lz-svc-tilecard .content { padding: 18px 18px 16px; }
}

/* ---- Item 3 guard: the service cards must never be left invisible by the
   reveal system when switching modes. The wow reveal batch (main.js) sets
   .lz-anim-ready .wow { opacity:0 } and only reveals on scroll; build/teardown
   strip and re-add the wow class, which can strand a card at opacity:0 with no
   trigger left to fire. Pinning the columns visible on this grid removes the
   whole failure mode — the switcher is interactive, a scroll reveal is not
   wanted on a grid the visitor is actively toggling. */
.lz-svc-page-grid > [class*="col-"] { opacity: 1 !important; transform: none !important; }

/* ---- CAROUSEL mode: 3D coverflow (per the supplied reference), working at
   EVERY width now that the desktop force-back-to-grid net is gone. Only the
   card PHOTO is greyscaled off-centre; the card chrome is never touched, so the
   card design is unchanged in every mode. ---- */
.lz-svc-page-swiper {
    padding: 10px 0 4px !important;
    overflow: hidden !important;
}
.lz-svc-page-swiper .swiper-wrapper {
    align-items: center !important;
    margin: 0 !important;
}
/* slidesPerView:'auto' needs an explicit slide width; the card fills it. The
   card keeps height:100% so equal-height still holds inside the coverflow. */
.lz-svc-page-swiper .swiper-slide {
    width: min(360px, 82vw);
    height: auto !important;
    display: flex;
    flex-shrink: 0 !important;
}
.lz-svc-page-swiper .swiper-slide > .lz-svc-tilecard { height: 100%; width: 100%; margin: 0; }
/* Reference look: off-centre cards fade to greyscale on the photo only. */
.lz-svc-page-swiper .swiper-slide .lz-svc-tilephoto {
    transition: filter .6s cubic-bezier(.25,.46,.45,.94);
    filter: grayscale(100%);
}
.lz-svc-page-swiper .swiper-slide-active .lz-svc-tilephoto { filter: none; }
@media (min-width: 992px) {
    /* Slightly larger centre card on desktop so the coverflow reads clearly. */
    .lz-svc-page-swiper .swiper-slide { width: min(380px, 34vw); }
}

/* Controls row below the cards — reuses the house .lz-svc-slider-nav chrome
   (layerz.css:2828+), so arrows and dots match the homepage slider exactly. */
.lz-svc-page-nav { margin-top: 26px; justify-content: center; }

/* Grid mode on phones: 1-up, full width. BAW clamps its grid to 2-up on phones,
   but BAW's card is a small icon + title + one line; ours carries a cover photo,
   a pill, a blurb and three sub-service rows, which is cramped at ~167px. Keeping
   the card's natural full-width mobile size honours "card stays exactly as it is"
   over BAW parity. The carousel remains the default compact multi-card mobile view. */

/* ---------------------------------------------------------------------------
   Service page stats row: 2-up on phones (was 1-up via main.css:5500).
   .counter-wrapper markup exists only on service.php, so this cannot leak to
   index/about (which use different counter components).
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .counter-wrapper { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .counter-wrapper .counter-box { padding: 20px 16px; }
    .counter-wrapper .counter-box h2 { font-size: 46px; margin-top: 18px; }
    .counter-wrapper .counter-box .text { font-size: 16px; }
    .counter-wrapper .counter-box p { font-size: 14px; margin-top: 10px; }
}
@media (max-width: 359.98px) {
    .counter-wrapper .counter-box h2 { font-size: 38px; }
}

/* ---------------------------------------------------------------------------
   Item 6: the WhatsApp float (mobile + desktop) and the mobile bottom nav bar
   appear only after the visitor scrolls, mirroring the .wt-scrolltop button.
   opacity/visibility (not display) so it rides the existing .wt-float transition
   and does not fight .wt-float.wt-whatsapp{display:flex} in the mobile query.
   --------------------------------------------------------------------------- */
.wt-float.wt-whatsapp { opacity: 0; visibility: hidden; }
.wt-float.wt-whatsapp.is-visible { opacity: 1; visibility: visible; }
.lz-mobilebar { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.lz-mobilebar.is-visible { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------------------
   Scroll-driven MacBook (includes/macbook-scroll.php) — replaces the hero
   thumb slider in the "Why Layerz" section. The lid opens and the laptop scales
   as the section scrolls through the viewport (GSAP ScrollTrigger scrub).
   --------------------------------------------------------------------------- */
.lz-macbook-stage {
    background: #fff;
    border-radius: 18px;
    padding: 30px 20px 24px;
    perspective: 1000px;
    text-align: center;
}
.lz-macbook-title {
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--lz-navy, #12284b);
    margin: 0 0 26px;
    opacity: var(--lz-mb-titlefade, 1);
    transform: translateY(var(--lz-mb-titley, 0px));
    will-change: opacity, transform;
}
.lz-macbook {
    position: relative;
    width: min(560px, 100%);
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: scale(var(--lz-mb-scale, 1));
    transform-origin: center bottom;
    will-change: transform;
}
/* The lid: hinged at the bottom, rotates from open (0deg) toward the viewer. */
.lz-mb-lid {
    position: relative;
    width: 78%;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    transform-origin: bottom center;
    transform: rotateX(var(--lz-mb-lid, 0deg));
    transform-style: preserve-3d;
}
.lz-mb-lidback,
.lz-mb-screen {
    position: absolute;
    inset: 0;
    border-radius: 14px 14px 2px 2px;
    backface-visibility: hidden;
    overflow: hidden;
}
.lz-mb-lidback {
    background: linear-gradient(160deg, #d7dbe2 0%, #b9bfc9 100%);
    transform: rotateX(180deg);
    border: 1px solid #c2c8d2;
}
.lz-mb-screen {
    background: #0b0f1a;
    border: 3px solid #1b2432;
    box-shadow: inset 0 0 0 2px #000;
}
.lz-mb-screen img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .96; }
.lz-mb-camera {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #2a3341; z-index: 2;
}
/* The base / deck with keyboard + trackpad. */
.lz-mb-base {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 5.2;
    margin-top: -1px;
    border-radius: 8px 8px 12px 12px;
    background: linear-gradient(180deg, #dfe3e9 0%, #c7cdd7 62%, #aeb5c1 100%);
    border: 1px solid #b7bdc8;
    box-shadow: 0 22px 40px rgba(18,40,75,.22);
    padding: 5% 6% 0;
    transform: translateZ(0);
}
.lz-mb-notch {
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    width: 14%; height: 5px; border-radius: 0 0 6px 6px; background: #b4bac5;
}
.lz-mb-keyboard { display: flex; flex-direction: column; gap: 3.2%; }
.lz-mb-krow { display: flex; gap: 1.1%; justify-content: center; }
.lz-mb-key {
    flex: 1 1 0;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(180deg, #2b3340 0%, #1a212c 100%);
    box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.lz-mb-key.lz-mb-space { flex: 5 1 0; }
.lz-mb-trackpad {
    width: 34%; height: 30%;
    margin: 3.5% auto 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #cfd5dd 0%, #bcc3ce 100%);
    border: 1px solid #b0b7c2;
}
@media (max-width: 991.98px) {
    .lz-mb-key { height: 8px; }
    .lz-macbook-title { margin-bottom: 20px; }
}


/* ---------------------------------------------------------------------------
   About page tweaks + shared choose-us image panel.
   --------------------------------------------------------------------------- */
/* B3: the border/radius/flex frame lives in main.css scoped to
   .choose-us-wrapper-2 only; mirror it onto the about wrapper so the same panel
   renders there (the sizing overrides above already cover both ancestors). */
.why-choose-us-wrapper-5 .choose-us-image {
    border-radius: 16px;
    border: 1px solid rgba(16, 16, 16, 0.2);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 634px;
}

/* B2: the "500+" info block is gone, so left-align the heading it used to share
   the flex row with. Scoped to about-page-style-3 so no other .section-title-area
   is affected. Cap .sec-content so the button + paragraph stay related now that
   the row is wider. */
.about-page-style-3 .section-title-area { justify-content: flex-start; }
.about-page-style-3 .section-title-area .section-title { max-width: 900px; }

/* free-tools: the tools FAQ is a single full-width column, so undo the canonical
   870px right-aligned accordion cap that suits the homepage's 4/8 split. */
.lz-tools-faq .faq-wrapper-2 .accordion-box { max-width: none; margin-left: 0; }