/*
 * Leftright unified header - one semantic header DOM across all breakpoints.
 *
 * Origin: staging playground /testheader-v2/ (page 14252), promoted on cutover.
 * Reproduces Theme Builder header 13886 in a single tree: 160 DOM nodes against
 * 446, no Elementor widgets. Desktop and tablet (>= 768px) share the horizontal
 * header and mega menus; mobile (< 768px) uses the drawer over the same DOM.
 *
 * Every value here was measured off header 13886 before it was retired. Do not
 * "tidy" the fractional numbers - they are readings, not preferences.
 */
.lr-hdr-unified{
    --lr-navy:#102A4C;
    --lr-navy-deep:#0B1F3A;
    --lr-navy-soft:#1B3A66;
    --lr-gold:#C9A36E;
    --lr-gold-soft:#D9B98A;
    --lr-gold-dark:#A98352;
    --lr-cream:#F4F1EC;
    --lr-border:#E4E4E8;
    --lr-ink:#1F2937;
    --lr-muted:#6B7280;
    position:relative;
    z-index:9999;
    width:100%;
    background:#fff;
    border-bottom:1px solid var(--lr-border);
    color:var(--lr-ink);
    font-family:Inter,Arial,sans-serif;
    transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.lr-hdr-unified *{box-sizing:border-box;}
.lr-hdr-unified a{text-decoration:none;}
.lr-hdr-unified button{font-family:inherit;}

.lr-u-bar{
    position:static;
    width:min(77.5rem,calc(100% - 3.5rem));
    min-height:4.625rem;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    transition:min-height .2s ease;
}

.lr-u-brand{
    display:block;
    flex:0 0 7.75rem;
    width:7.75rem;
    max-width:7.75rem;
    line-height:0;
    transition:width .2s ease,max-width .2s ease,flex-basis .2s ease;
}
.lr-u-brand img{display:block;width:100%;height:auto;max-width:100%;}

.lr-u-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.125rem;
    margin-left:auto;
}
.lr-u-group{position:static;}
.lr-u-nav-trigger,.lr-u-nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.375rem;
    min-height:2.375rem;
    padding:.75rem 1rem;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--lr-navy);
    font-size:.875rem;
    line-height:1;
    font-weight:600;
    letter-spacing:-.005em;
    cursor:pointer;
    white-space:nowrap;
    transition:color .18s ease;
}
.lr-u-nav-trigger::after,.lr-u-nav-link:not(.lr-u-contact)::after{
    content:"";
    position:absolute;
    left:1rem;
    right:1rem;
    bottom:.375rem;
    height:1.5px;
    background:var(--lr-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
}
.lr-u-nav-trigger{padding-right:1.45rem;}\n.lr-u-nav-trigger:hover,.lr-u-nav-trigger:focus-visible,.lr-u-nav-link:hover,.lr-u-nav-link:focus-visible{color:var(--lr-gold-dark);outline:none;}
.lr-u-nav-trigger:hover::after,.lr-u-nav-trigger:focus-visible::after,.lr-u-nav-link:hover::after,.lr-u-nav-link:focus-visible::after,.lr-u-group:hover>.lr-u-nav-trigger::after,.lr-u-group.is-open>.lr-u-nav-trigger::after{transform:scaleX(1);}

.lr-u-chevron{
    width:.42rem;
    height:.42rem;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-.12rem) rotate(45deg);
    opacity:.62;
    transition:transform .18s ease,opacity .18s ease;
}
.lr-u-group:hover>.lr-u-nav-trigger .lr-u-chevron,.lr-u-group:focus-within>.lr-u-nav-trigger .lr-u-chevron,.lr-u-group.is-open>.lr-u-nav-trigger .lr-u-chevron{transform:translateY(.1rem) rotate(225deg);opacity:1;}

.lr-u-contact{
    margin-left:1rem;
    padding:.75rem 1.625rem;
    border-radius:999px;
    background:var(--lr-gold);
    color:var(--lr-navy-deep);
    font-weight:500;
}
.lr-u-contact:hover,.lr-u-contact:focus-visible{background:var(--lr-gold-dark);color:#fff;}

.lr-u-mobile-toggle{display:none;}

.lr-u-mega{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:120;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    background:#fff;
    border-top:1px solid var(--lr-border);
    border-bottom:1px solid var(--lr-border);
    box-shadow:0 18px 34px rgba(11,31,58,.14);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.lr-u-group:hover>.lr-u-mega,.lr-u-group:focus-within>.lr-u-mega,.lr-u-group.is-open>.lr-u-mega{opacity:1;visibility:visible;pointer-events:auto;transform:none;}

.lr-u-mega-shell{
    width:min(77.5rem,calc(100% - 3.5rem));
    margin:0 auto;
    padding:1.35rem 1.75rem 1.5rem;
}
.lr-u-kicker{
    display:block;
    margin-bottom:.55rem;
    color:var(--lr-gold-dark);
    font-size:.68rem;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* About panel */
.lr-u-about-grid{
    display:grid;
    grid-template-columns:1.15fr .72fr .9fr 1.25fr;
    grid-template-rows:auto auto;
    gap:.8rem 1.25rem;
    align-items:stretch;
}
.lr-u-feature-card{grid-column:1;grid-row:1 / 3;}
.lr-u-link-column{grid-column:2;grid-row:1 / 3;}
.lr-u-careers-card{grid-column:3;grid-row:1;}
.lr-u-proof{grid-column:3;grid-row:2;}
.lr-u-articles{grid-column:4;grid-row:1 / 3;}
.lr-u-feature-card,.lr-u-careers-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.45rem;
    padding:1.15rem 1.2rem;
    border:1px solid var(--lr-border);
    border-radius:.875rem;
    background:var(--lr-cream);
    color:var(--lr-ink);
}
.lr-u-feature-card strong,.lr-u-careers-card strong{font-family:Lora,Georgia,serif;color:var(--lr-navy);font-size:1.15rem;line-height:1.2;}
.lr-u-feature-card>span:not(.lr-u-kicker),.lr-u-careers-card>span:not(.lr-u-kicker){font-size:.78rem;line-height:1.55;color:var(--lr-muted);}
.lr-u-feature-card b,.lr-u-careers-card b{margin-top:auto;color:var(--lr-gold-dark);font-size:.77rem;}
.lr-u-feature-card:hover,.lr-u-careers-card:hover{border-color:var(--lr-gold-soft);}

.lr-u-link-column{display:flex;flex-direction:column;align-items:stretch;}
.lr-u-link-column>a{
    display:flex;
    align-items:center;
    min-height:2.15rem;
    padding:.45rem .55rem;
    margin-left:-.55rem;
    border-radius:.5rem;
    color:var(--lr-ink);
    font-size:.78rem;
    font-weight:500;
    transition:background-color .14s ease,color .14s ease;
}
.lr-u-link-column>a:hover,.lr-u-link-column>a:focus-visible{background:var(--lr-cream);color:var(--lr-gold-dark);outline:none;}

.lr-u-proof{display:flex;flex-direction:column;gap:.55rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--lr-border);}
.lr-u-proof div{display:flex;flex-direction:column;gap:.1rem;}
.lr-u-proof strong{font-size:.72rem;color:var(--lr-navy);}
.lr-u-proof span{font-size:.68rem;color:var(--lr-muted);}

.lr-u-articles{display:flex;flex-direction:column;gap:.55rem;}
.lr-u-articles>a{display:flex;flex-direction:column;gap:.15rem;padding:.55rem .6rem;border-radius:.5rem;color:var(--lr-ink);}
.lr-u-articles>a:hover,.lr-u-articles>a:focus-visible{background:var(--lr-cream);outline:none;}
.lr-u-articles small{font-size:.62rem;line-height:1.25;color:var(--lr-gold-dark);font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.lr-u-articles strong{font-size:.74rem;line-height:1.35;font-weight:600;color:var(--lr-navy);}
.lr-u-panel-actions{display:flex;gap:1rem;margin-top:auto;padding-top:.55rem;border-top:1px solid var(--lr-border);}
.lr-u-panel-actions a{font-size:.7rem;font-weight:600;color:var(--lr-gold-dark);}

/* Services panel */
.lr-u-core-services{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.1rem;}
.lr-u-core-services>.lr-u-kicker{grid-column:1/-1;margin:0;}
.lr-u-core-services>a{display:flex;flex-direction:column;gap:.18rem;padding:.8rem .9rem;border:1px solid var(--lr-border);border-radius:.65rem;color:var(--lr-ink);}
.lr-u-core-services>a:hover,.lr-u-core-services>a:focus-visible{border-color:var(--lr-gold-soft);background:var(--lr-cream);outline:none;}
.lr-u-core-services strong{font-family:Lora,Georgia,serif;font-size:.92rem;color:var(--lr-navy);}
.lr-u-core-services span{font-size:.7rem;color:var(--lr-muted);line-height:1.35;}
.lr-u-service-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.lr-u-service-group h3{margin:0 0 .35rem;color:var(--lr-gold-dark);font-size:.67rem;line-height:1.35;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.lr-u-service-group>a{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-height:2rem;margin-left:-.55rem;padding:.4rem .55rem;border-radius:.5rem;color:var(--lr-ink);font-size:.75rem;line-height:1.3;font-weight:500;transition:background-color .14s ease,color .14s ease;}
.lr-u-service-group>a:hover,.lr-u-service-group>a:focus-visible{background:var(--lr-cream);color:var(--lr-gold-dark);outline:none;}
.lr-u-tag{flex:0 0 auto;padding:.12rem .3rem;border-radius:.25rem;background:#F4F1EC;color:#7E5F35;font-size:.55rem;font-weight:700;line-height:1.25;text-transform:uppercase;letter-spacing:.04em;}
.lr-u-services-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--lr-border);}
.lr-u-services-footer>a{color:var(--lr-gold-dark);font-size:.72rem;font-weight:600;}
.lr-u-services-footer>a:first-child{display:flex;gap:.45rem;color:var(--lr-ink);}
.lr-u-services-footer>a:first-child span{color:var(--lr-gold-dark);}

/* Compact navy scroll state for desktop + tablet. */
.lr-hdr-unified.is-scrolled{background:var(--lr-navy-deep);border-color:var(--lr-navy-soft);box-shadow:0 8px 24px rgba(11,31,58,.12);}
.lr-hdr-unified.is-scrolled .lr-u-bar{min-height:3.625rem;}
.lr-hdr-unified.is-scrolled .lr-u-brand{width:6.4rem;max-width:6.4rem;flex-basis:6.4rem;}
.lr-hdr-unified.is-scrolled .lr-u-nav-trigger,.lr-hdr-unified.is-scrolled .lr-u-nav-link:not(.lr-u-contact){color:#fff;}
.lr-hdr-unified.is-scrolled .lr-u-nav-trigger:hover,.lr-hdr-unified.is-scrolled .lr-u-nav-trigger:focus-visible,.lr-hdr-unified.is-scrolled .lr-u-nav-link:not(.lr-u-contact):hover,.lr-hdr-unified.is-scrolled .lr-u-nav-link:not(.lr-u-contact):focus-visible{color:var(--lr-gold-soft);}

@media (min-width:768px){
    .lr-hdr-unified{position:sticky;top:0;}
}

/* Logged-in admins: the sticky header has to stop below the WordPress admin
 * bar, not slide under it. The bar has three states, and the offset has to
 * follow all of them: fixed and 32px tall from 783px up, still fixed but 46px
 * tall from 601px to 782px, and position:absolute at 600px and below, where it
 * scrolls away with the page and no offset must be applied. */
@media (min-width:783px){
    body.admin-bar .lr-hdr-unified{top:32px;}
}
@media (min-width:768px) and (max-width:782px){
    body.admin-bar .lr-hdr-unified{top:46px;}
}


@media (max-width:767px){
    .lr-hdr-unified{position:relative;top:auto;}
    .lr-hdr-unified{z-index:9999;}
    .lr-u-bar{width:100%;min-height:3.875rem;padding:0 1.25rem;gap:.75rem;}
    .lr-u-brand{width:6.4rem;max-width:6.4rem;flex-basis:6.4rem;}
    .lr-u-mobile-toggle{
        display:flex;
        width:2.5rem;
        height:2.5rem;
        margin-left:auto;
        padding:.55rem;
        align-items:center;
        justify-content:center;
        border:0;
        background:transparent;
        color:var(--lr-navy);
        cursor:pointer;
    }
    .lr-u-burger{display:flex;flex-direction:column;gap:.24rem;width:1.2rem;}
    .lr-u-burger span{display:block;width:100%;height:1.5px;background:currentColor;transition:transform .18s ease,opacity .18s ease;}
    .lr-hdr-unified.is-mobile-open .lr-u-burger span:nth-child(1){transform:translateY(.35rem) rotate(45deg);}
    .lr-hdr-unified.is-mobile-open .lr-u-burger span:nth-child(2){opacity:0;}
    .lr-hdr-unified.is-mobile-open .lr-u-burger span:nth-child(3){transform:translateY(-.35rem) rotate(-45deg);}

    .lr-u-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:100%;
        z-index:1000;
        width:100%;
        max-height:calc(100dvh - 3.875rem);
        overflow-y:auto;
        margin:0;
        padding:.5rem 1.25rem 4rem;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:#fff;
        border-top:1px solid var(--lr-border);
        box-shadow:0 16px 32px rgba(11,31,58,.18);
    }
    .lr-hdr-unified.is-mobile-open .lr-u-nav{display:flex;}
    body.lr-u-mobile-open{overflow:hidden;}

    .lr-u-group{width:100%;}
    .lr-u-nav-trigger,.lr-u-nav-link{
        width:100%;
        min-height:3.35rem;
        justify-content:space-between;
        padding:1rem 0;
        border-bottom:1px solid var(--lr-border);
        color:var(--lr-navy);
        font-size:.9375rem;
        line-height:1.4;
        font-weight:600;
        text-align:left;
    }
    .lr-u-nav-trigger::after,.lr-u-nav-link::after{display:none!important;}
    .lr-u-contact{margin:1.25rem 0 0;justify-content:center;border-bottom:0;border-radius:999px;background:var(--lr-gold);color:var(--lr-navy-deep);}
    .lr-u-chevron{margin-right:.25rem;}

    .lr-u-mega{
        display:none;
        position:static;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        background:transparent;
        border:0;
        box-shadow:none;
        transition:none;
    }
    .lr-u-group.is-open>.lr-u-mega{display:block;}
    .lr-u-mega-shell{width:100%;padding:0 0 .75rem;margin:0;}
    .lr-desktop-extra,.lr-u-feature-card{display:none!important;}
    .lr-u-about-grid{display:block;}
    .lr-u-link-column>.lr-u-kicker{display:none;}
    .lr-u-link-column>a{min-height:2.8rem;margin:0;padding:.75rem 0 .75rem .75rem;border-radius:0;border-bottom:0;font-size:.9375rem;}
    .lr-u-service-groups{display:block;}
    .lr-u-service-group{padding:.25rem 0 .5rem;border-bottom:1px solid var(--lr-border);}
    .lr-u-service-group h3{margin:.65rem 0 .15rem;color:var(--lr-gold-dark);font-size:.6875rem;}
    .lr-u-service-group>a{min-height:2.65rem;margin:0;padding:.72rem 0 .72rem .75rem;border-radius:0;font-size:.9375rem;}
    .lr-u-tag{font-size:.56rem;}
    .lr-hdr-unified.is-scrolled{background:#fff;border-color:var(--lr-border);box-shadow:none;}
}

@media (prefers-reduced-motion:reduce){
    .lr-hdr-unified,.lr-u-bar,.lr-u-brand,.lr-u-mega,.lr-u-chevron,.lr-u-burger span{transition:none!important;}
}


/* Desktop/tablet parity pass: match the approved Elementor mega-panel geometry while keeping the semantic DOM. */
@media (min-width:768px){
    .lr-u-mega--about .lr-u-mega-shell{
        width:min(77.5rem,calc(100% - 3.5rem));
        height:439px;
        padding:26px 0 32px;
        display:grid;
        grid-template-columns:29% 29% 42%;
        grid-template-rows:auto 1fr;
        gap:0;
    }
    .lr-u-mega--about .lr-u-feature-card{
        grid-column:1;grid-row:1;
        width:calc(100% - 31px);
        min-height:163px;
        padding:10px;
        border:0;
        border-radius:0;
        background:transparent;
        gap:0;
    }
    .lr-u-mega--about .lr-u-feature-card .lr-u-kicker,
    .lr-u-mega--about .lr-u-careers-card .lr-u-kicker,
    .lr-u-mega--about .lr-u-articles>.lr-u-kicker{
        margin:0;
        font:700 11px/15.4px Inter,sans-serif;
        letter-spacing:1.54px;
        text-transform:uppercase;
        color:#7E5F35;
    }
    .lr-u-mega--about .lr-u-feature-card>strong,
    .lr-u-mega--about .lr-u-careers-card>strong{
        margin:0;
        font:600 19px/24.7px Lora,Georgia,serif;
        color:#102A4C;
    }
    .lr-u-mega--about .lr-u-feature-card>span:not(.lr-u-kicker),
    .lr-u-mega--about .lr-u-careers-card>span:not(.lr-u-kicker){
        margin:0;
        font:400 12px/18px Inter,sans-serif;
        color:#6B7280;
    }
    .lr-u-mega--about .lr-u-feature-card>b,
    .lr-u-mega--about .lr-u-careers-card>b{
        margin:0;
        font:600 14px/21px Inter,sans-serif;
        color:#7E5F35;
    }
    .lr-u-mega--about .lr-u-link-column{
        grid-column:1;grid-row:2;
        width:calc(100% - 31px);
        padding-top:14px;
        justify-content:flex-start;
    }
    .lr-u-mega--about .lr-u-link-column>.lr-u-kicker{display:none;}
    .lr-u-mega--about .lr-u-link-column>a{
        min-height:37px;
        margin-left:-10px;
        padding:8px 10px;
        border-radius:8px;
        color:#7E5F35;
        font:500 14px/21px Inter,sans-serif;
    }
    .lr-u-mega--about .lr-u-careers-card{
        grid-column:2;grid-row:1;
        width:calc(100% - 60px);
        min-height:145px;
        margin-left:30px;
        padding:10px;
        border:0;
        border-radius:0;
        background:transparent;
        gap:0;
    }
    .lr-u-mega--about .lr-u-proof{
        grid-column:2;grid-row:2;
        width:calc(100% - 60px);
        height:139px;
        margin:14px 30px 0;
        padding:14px 0 0;
        border-top:1px solid #E4E4E8;
        gap:10px;
    }
    .lr-u-mega--about .lr-u-proof div{gap:0;min-height:35px;}
    .lr-u-mega--about .lr-u-proof strong{font:600 12px/17.4px Inter,sans-serif;color:#102A4C;}
    .lr-u-mega--about .lr-u-proof span{font:400 12px/17.4px Inter,sans-serif;color:#6B7280;}
    .lr-u-mega--about .lr-u-articles{
        grid-column:3;grid-row:1 / 3;
        padding-left:30px;
        gap:0;
    }
    .lr-u-mega--about .lr-u-articles>a{
        height:98px;
        padding:13px 0;
        display:grid;
        grid-template-columns:126px 1fr;
        gap:14px;
        align-items:center;
        border-radius:0;
    }
    .lr-u-mega--about .lr-u-articles>a:hover,
    .lr-u-mega--about .lr-u-articles>a:focus-visible{background:transparent;}
    .lr-u-mega--about .lr-u-articles img{
        width:126px;height:71px;object-fit:cover;display:block;
    }
    .lr-u-mega--about .lr-u-articles>a>span{display:flex;flex-direction:column;gap:4px;min-width:0;}
    .lr-u-mega--about .lr-u-articles small{
        font:700 10px/14px Inter,sans-serif;
        letter-spacing:.7px;
        text-transform:uppercase;
        color:#7E5F35;
    }
    .lr-u-mega--about .lr-u-articles strong{
        font:600 17px/22.95px Lora,Georgia,serif;
        color:#102A4C;
    }
    .lr-u-mega--about>.lr-u-panel-actions{
        height:46px;
        margin:0;
        padding:0 max(28px,calc((100vw - 1224px)/2));
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        border-top:1px solid #E4E4E8;
        background:#F2F2F4;
    }
    .lr-u-mega--about>.lr-u-panel-actions a{
        font:600 12px/18px Inter,sans-serif;
        color:#7E5F35;
    }
    .lr-u-mega--about>.lr-u-panel-actions a strong{color:#1F2937;}

    .lr-u-mega--services .lr-u-mega-shell{
        width:100%;
        max-width:none;
        padding:0;
    }
    .lr-u-core-services{
        min-height:145px;
        margin:0;
        padding:18px max(28px,calc((100vw - 1224px)/2)) 28px;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:25px 74px;
        column-gap:14px;
        row-gap:0;
        background:#102A4C;
    }
    .lr-u-core-services>.lr-u-kicker{
        grid-column:1 / -1;
        margin:0;
        font:700 11px/15.4px Inter,sans-serif;
        letter-spacing:1.54px;
        text-transform:uppercase;
        color:#D9B98A;
    }
    .lr-u-core-services>a{
        height:74px;
        padding:16px 18px;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:12px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:14px;
        background:rgba(255,255,255,.06);
        color:#fff;
    }
    .lr-u-core-services>a:hover,.lr-u-core-services>a:focus-visible{
        background:rgba(255,255,255,.1);
        border-color:rgba(217,185,138,.5);
        outline:none;
    }
    .lr-u-core-services svg{flex:0 0 18px;width:18px;height:18px;fill:#D9B98A;}
    .lr-u-core-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .lr-u-core-services strong{font:600 17px/20.4px Lora,Georgia,serif;color:#fff;}
    .lr-u-core-services .lr-u-core-copy>span{font:400 12px/17.4px Inter,sans-serif;color:#9FA9B8;}

    .lr-u-mega--services .lr-u-service-groups{
        min-height:321px;
        padding:24px max(28px,calc((100vw - 1224px)/2)) 35px;
        display:grid;
        grid-template-columns:1fr 1.04fr 1fr;
        grid-template-rows:auto 1fr;
        gap:0;
        background:#fff;
    }
    .lr-u-mega--services .lr-u-service-group{padding:0;min-width:0;}
    .lr-u-mega--services .lr-u-service-group:nth-child(1){grid-column:1;grid-row:1;padding-right:25px;}
    .lr-u-mega--services .lr-u-service-group:nth-child(2){grid-column:1;grid-row:2;padding:12px 25px 0 0;}
    .lr-u-mega--services .lr-u-service-group:nth-child(3){grid-column:2;grid-row:1 / 3;padding:0 24px;border-left:1px solid #E4E4E8;border-right:1px solid #E4E4E8;}
    .lr-u-mega--services .lr-u-service-group:nth-child(4){grid-column:3;grid-row:1 / 3;padding-left:24px;}
    .lr-u-mega--services .lr-u-service-group h3{
        height:25px;
        margin:0;
        padding:4px 0 0;
        font:700 11px/15.4px Inter,sans-serif;
        letter-spacing:1.54px;
        text-transform:uppercase;
        color:#7E5F35;
    }
    .lr-u-mega--services .lr-u-service-group:nth-child(2) h3{
        height:23px;
        padding:0;
        font:italic 14px/19.6px Lora,Georgia,serif;
        letter-spacing:normal;
        text-transform:none;
        color:#6B7280;
    }
    .lr-u-mega--services .lr-u-service-group>a{
        min-height:37px;
        margin-left:-10px;
        padding:8px 10px;
        border-radius:8px;
        color:#7E5F35;
        font:500 14px/21px Inter,sans-serif;
    }
    .lr-u-mega--services .lr-u-services-footer{
        height:46px;
        margin:0;
        padding:0 max(28px,calc((100vw - 1224px)/2));
        border-top:1px solid #E4E4E8;
        background:#F2F2F4;
    }
    .lr-u-mega--services .lr-u-services-footer>a{
        font:600 12px/18px Inter,sans-serif;
        color:#7E5F35;
    }
    .lr-u-mega--services .lr-u-services-footer>a:first-child{display:flex;gap:5px;color:#7E5F35;}
    .lr-u-mega--services .lr-u-services-footer>a:first-child strong{color:#1F2937;}
}



/* Final geometry nudge against the original 13882/13883 desktop templates. */
@media (min-width:768px){
    .lr-u-mega--about .lr-u-mega-shell{
        margin-top:1px;
        padding-top:30px;
        padding-bottom:28px;
    }
    .lr-u-mega--about .lr-u-feature-card{grid-column:1;grid-row:1;align-self:start;}
    .lr-u-mega--about .lr-u-link-column{
        grid-column:1;grid-row:1;
        align-self:start;
        margin-top:177px;
        padding-top:14px;
        height:200px;
    }
    .lr-u-mega--about .lr-u-link-column>a:first-of-type,
    .lr-u-mega--about .lr-u-link-column>a:last-of-type{display:none;}
    .lr-u-mega--about .lr-u-careers-card{
        grid-column:2;grid-row:1;
        align-self:start;
        height:145px;
        min-height:145px;
    }
    .lr-u-mega--about .lr-u-proof{
        grid-column:2;grid-row:1;
        align-self:start;
        margin-top:159px;
    }
    .lr-u-mega--about .lr-u-articles{grid-column:3;grid-row:1;align-self:start;height:381px;}
    .lr-u-mega--about .lr-u-articles>.lr-u-kicker{height:25px;padding-top:4px;}
    .lr-u-core-services{margin-top:1px;}
}

@media (min-width:768px){
    .lr-u-mega--about .lr-u-mega-shell{margin-top:0;padding-top:31px;padding-bottom:27px;}
    .lr-u-mega--about>.lr-u-panel-actions{transform:translateY(1px);}
}

@media (max-width:767px){
    .lr-u-group--services{order:1;}
    .lr-u-group--about{order:2;}
    .lr-u-nav>.lr-u-nav-link[href*="/pricing/"]{order:3;}
    .lr-u-nav>.lr-u-nav-link[href*="/guides/"]{order:4;}
    .lr-u-nav>.lr-u-contact{order:5;}
}

/* QA parity overrides: measured against the current production-style Elementor header. */
@media (min-width:768px){
    /* Mobile-only proof must never consume desktop/tablet nav width. */
    .lr-u-mobile-creds{display:none!important;}

    /* Astra's generic button hover otherwise paints semantic <button> triggers blue. */
    .lr-u-nav-trigger:hover,
    .lr-u-nav-trigger:focus-visible,
    .lr-u-group:hover>.lr-u-nav-trigger,
    .lr-u-group:focus-within>.lr-u-nav-trigger,
    .lr-u-group.is-open>.lr-u-nav-trigger{
        background:transparent!important;
        color:#725937!important;
        box-shadow:none!important;
    }

    /* About panel: copy the live Elementor column rhythm, not an approximation. */
    .lr-u-mega--about .lr-u-link-column{
        margin-top:192px;
        height:185px;
    }
    .lr-u-mega--about .lr-u-articles>a{
        height:99px;
        grid-template-columns:128px 1fr;
    }
    .lr-u-mega--about .lr-u-articles img{
        width:128px;
        height:72px;
    }

    /* The live header uses a 1240px desktop mega-menu shell at this breakpoint. */
    .lr-u-core-services,
    .lr-u-mega--services .lr-u-service-groups,
    .lr-u-mega--services .lr-u-services-footer,
    .lr-u-mega--about>.lr-u-panel-actions{
        padding-left:max(28px,calc((100vw - 1240px)/2));
        padding-right:max(28px,calc((100vw - 1240px)/2));
    }
}

@media (max-width:767px){
    /* Match the existing drawer's proof block exactly, but keep it in the shared DOM. */
    .lr-u-mobile-creds{
        order:6;
        display:flex;
        flex-direction:column;
        gap:.625rem;
        width:100%;
        margin:1.5rem 0 0;
        padding:1.125rem 0 0;
        border-top:1px solid var(--lr-border);
        color:var(--lr-muted);
        font-size:.75rem;
        line-height:1.45;
    }
    .lr-u-mobile-creds>div{display:flex;flex-direction:column;gap:0;}
    .lr-u-mobile-creds strong{
        display:block;
        margin:0;
        color:var(--lr-navy);
        font-size:inherit;
        line-height:inherit;
        font-weight:600;
    }
    .lr-u-mobile-creds span{
        display:block;
        margin:0;
        color:var(--lr-muted);
        font-size:inherit;
        line-height:inherit;
        font-weight:400;
    }

    /* Match the existing mobile header's measured control geometry. */
    .lr-u-mobile-toggle{
        width:1.875rem;
        height:3rem;
        padding:.25rem;
    }
    .lr-u-nav>.lr-u-nav-link[href*="/pricing/"],
    .lr-u-nav>.lr-u-nav-link[href*="/guides/"]{
        min-height:50px;
        height:50px;
    }
    .lr-u-nav>.lr-u-contact{
        min-height:45px;
        height:45px;
        margin-top:19px;
    }
    .lr-u-mobile-creds{
        margin-top:21px;
        padding-top:17px;
    }
}

/* Measured internal rhythm for the About mega menu. */
@media (min-width:768px){
    .lr-u-mega--about .lr-u-feature-card>strong,
    .lr-u-mega--about .lr-u-careers-card>strong{margin:10px 0 0;}
    .lr-u-mega--about .lr-u-feature-card>span:not(.lr-u-kicker),
    .lr-u-mega--about .lr-u-careers-card>span:not(.lr-u-kicker){margin:4px 0 0;}
    .lr-u-mega--about .lr-u-feature-card>b,
    .lr-u-mega--about .lr-u-careers-card>b{margin:14px 0 0;}
    .lr-u-mega--about .lr-u-link-column{padding-top:0;}
    .lr-u-mega--about .lr-u-articles>.lr-u-kicker{padding-top:0;}
    .lr-u-mega--about .lr-u-articles>a{align-items:start;}
    .lr-u-mega--about .lr-u-articles img,
    .lr-u-mega--about .lr-u-articles>a>span{margin-top:0;}
}

/* Services panel parity: measured from the live 13882 template at a 1240px shell. */
@media (min-width:768px){
    .lr-u-core-services>a{gap:13px;}
    .lr-u-core-services svg{
        flex:0 0 38px;
        width:38px;
        height:38px;
        padding:10px;
        border-radius:9px;
        background:rgba(201,163,110,.18);
        fill:#D9B98A;
    }
    .lr-u-mega--services .lr-u-service-groups{
        grid-template-columns:408fr 425fr 407fr;
    }
    .lr-u-mega--services .lr-u-service-group:nth-child(2){
        transform:translateY(11px);
    }
    .lr-u-mega--services .lr-u-service-group:nth-child(3){
        padding-left:23px;
    }
    .lr-u-core-copy{flex:1 1 auto;}
    .lr-u-mega--services .lr-u-service-group:not(:nth-child(2)) h3{
        height:30px;
    }

    .lr-u-core-services>a{
        transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
    }
    .lr-u-core-services>a:hover,
    .lr-u-core-services>a:focus-visible{
        transform:translateY(-2px);
        background:rgba(255,255,255,.12);
        border-color:#C9A36E;
    }
    .lr-u-link-column>a:hover,
    .lr-u-link-column>a:focus-visible,
    .lr-u-service-group>a:hover,
    .lr-u-service-group>a:focus-visible{
        background:#F4F1EC;
        color:#102A4C;
    }
}


/* Colour parity pass from the approved reference screenshots. */
@media (min-width:768px){
    /* The open mega panel starts with the canonical 2px gold rule. */
    .lr-u-mega{
        border-top:2px solid #C9A36E;
        border-bottom:0;
    }

    /* Canonical menu-link resting colour is ink/navy, not gold-brown. */
    .lr-u-mega--about .lr-u-link-column>a,
    .lr-u-mega--services .lr-u-service-group>a{
        color:#1F2937;
    }

    /* Keep the established cream + navy hover treatment from the prior QA pass. */
    .lr-u-mega--about .lr-u-link-column>a:hover,
    .lr-u-mega--about .lr-u-link-column>a:focus-visible,
    .lr-u-mega--services .lr-u-service-group>a:hover,
    .lr-u-mega--services .lr-u-service-group>a:focus-visible{
        color:#102A4C;
        background:#F4F1EC;
    }

    /* Footer/action strips: left CTA is fully gold-brown, right CTA fully navy. */
    .lr-u-mega--about>.lr-u-panel-actions>a:first-child,
    .lr-u-mega--about>.lr-u-panel-actions>a:first-child strong,
    .lr-u-mega--services .lr-u-services-footer>a:first-child,
    .lr-u-mega--services .lr-u-services-footer>a:first-child strong,
    .lr-u-mega--services .lr-u-services-footer>a:first-child span{
        color:#7E5F35;
    }
    .lr-u-mega--about>.lr-u-panel-actions>a:first-child strong,
    .lr-u-mega--services .lr-u-services-footer>a:first-child strong{
        font-weight:inherit;
    }
    .lr-u-mega--about>.lr-u-panel-actions>a:last-child,
    .lr-u-mega--services .lr-u-services-footer>a:last-child{
        color:#102A4C;
    }
}

/* Mobile parity pass: mirror the canonical Elementor drawer at <768px. */
@media (max-width:767px){
    /* One scroll container owns the drawer. Keep the document behind it locked. */
    .lr-u-nav{
        height:calc(100dvh - 3.875rem);
        max-height:none;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        overflow-anchor:none;
        padding:.5rem 1.25rem 4rem;
    }

    /* The canonical open control remains the same navy hamburger; it does not
     * turn into a blue square / X when the drawer is open. */
    .lr-u-mobile-toggle,
    .lr-u-mobile-toggle:hover,
    .lr-u-mobile-toggle:active,
    .lr-u-mobile-toggle:focus{
        width:auto;
        min-width:0;
        height:auto;
        min-height:0;
        margin-left:auto;
        padding:.9375rem 0 .9375rem .75rem;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        color:#102A4C!important;
        box-shadow:none!important;
    }
    .lr-u-mobile-toggle:focus-visible{outline:2px solid #C9A36E;outline-offset:2px;}
    .lr-u-burger{width:1.125rem;gap:.22rem;}
    .lr-u-burger span{height:1.5px;background:currentColor;transform:none!important;opacity:1!important;}

    /* Top-level accordion rows match Elementor Nested Accordion settings. */
    .lr-u-nav-trigger,
    .lr-u-nav>.lr-u-nav-link[href*="/pricing/"],
    .lr-u-nav>.lr-u-nav-link[href*="/guides/"]{
        min-height:0;
        height:auto;
        padding:1rem 0;
        border-bottom:1px solid #E4E4E8;
        border-radius:0;
        background:transparent!important;
        color:#102A4C;
        font:600 .9375rem/1.4 Inter,Arial,sans-serif;
    }
    .lr-u-nav-trigger:hover,
    .lr-u-nav-trigger:focus-visible,
    .lr-u-group.is-open>.lr-u-nav-trigger,
    .lr-u-nav>.lr-u-nav-link[href*="/pricing/"]:hover,
    .lr-u-nav>.lr-u-nav-link[href*="/guides/"]:hover{
        color:#7E5F35!important;
        background:transparent!important;
        box-shadow:none!important;
    }

    /* Canonical plus/minus indicator: gold at rest and while active. */
    .lr-u-chevron{
        position:relative;
        flex:0 0 .75rem;
        width:.75rem;
        height:.75rem;
        margin-right:0;
        border:0;
        opacity:1;
        transform:none!important;
        color:#7E5F35;
    }
    .lr-u-chevron::before,
    .lr-u-chevron::after{
        content:"";
        position:absolute;
        left:50%;
        top:50%;
        width:.65rem;
        height:1.5px;
        background:currentColor;
        transform:translate(-50%,-50%);
    }
    .lr-u-chevron::after{transform:translate(-50%,-50%) rotate(90deg);}
    .lr-u-group.is-open>.lr-u-nav-trigger .lr-u-chevron::after{opacity:0;}

    /* Expanded menu content mirrors the canonical mobile panel typography and spacing. */
    .lr-u-mega-shell{padding:0 0 .75rem;}
    .lr-u-service-groups{display:block;}
    .lr-u-service-group{
        padding:0;
        border:0;
    }
    .lr-u-service-group h3{
        margin:.875rem 0 .25rem;
        padding:0;
        height:auto;
        color:#7E5F35;
        font:700 .6875rem/1.4 Inter,Arial,sans-serif;
        letter-spacing:.14em;
        text-transform:uppercase;
    }
    .lr-u-service-group>a,
    .lr-u-link-column>a{
        min-height:0;
        height:auto;
        margin:0;
        padding:.875rem 0 .875rem .75rem;
        border:0;
        border-radius:0;
        color:#1F2937;
        background:transparent;
        font:500 .9375rem/1.45 Inter,Arial,sans-serif;
    }
    .lr-u-service-group>a:hover,
    .lr-u-service-group>a:focus-visible,
    .lr-u-link-column>a:hover,
    .lr-u-link-column>a:focus-visible{
        color:#7E5F35;
        background:#F4F1EC;
        outline:none;
    }
    .lr-u-group--services .lr-u-mega-shell,
    .lr-u-group--about .lr-u-mega-shell{
        border-bottom:1px solid #E4E4E8;
    }

    /* Match the canonical CTA exactly: white text, gold pill, 'Contact us'. */
    .lr-u-nav>.lr-u-contact,
    .lr-u-nav>.lr-u-contact:hover,
    .lr-u-nav>.lr-u-contact:focus{
        min-height:0;
        height:auto;
        margin:1.25rem 0 0;
        padding:1.0625rem 1.75rem;
        justify-content:center;
        border:0;
        border-radius:999px;
        background:#C9A36E!important;
        color:#FFFFFF!important;
        font:500 .9375rem/1 Inter,Arial,sans-serif;
    }
    .lr-u-nav>.lr-u-contact:hover,
    .lr-u-nav>.lr-u-contact:focus-visible{background:#A98352!important;}

    /* Credentials retain the canonical spacing and typography. */
    .lr-u-mobile-creds{
        margin:1.5rem 0 0;
        padding:1.125rem 0 0;
        gap:.625rem;
        border-top:1px solid #E4E4E8;
        font:400 .75rem/1.45 Inter,Arial,sans-serif;
    }
    .lr-u-mobile-creds strong{color:#102A4C;font-weight:600;}
    .lr-u-mobile-creds span{color:#6B7280;}

    /* Source drawer scrolls without displaying a desktop-style scrollbar. */
    .lr-u-nav{scrollbar-width:none;}
    .lr-u-nav::-webkit-scrollbar{width:0;height:0;}

    /* Match Elementor's mobile Popular tag token rather than the compact desktop approximation. */
    .lr-u-tag{
        flex:0 0 auto;
        align-self:center;
        margin-inline-start:.5rem;
        padding:.125rem .25rem .125rem .375rem;
        border-radius:.25rem;
        background:#E7AA5B38;
        color:#7E5F35;
        font:600 .6875rem/1.4 Inter,Arial,sans-serif;
        letter-spacing:.14em;
        text-transform:uppercase;
    }
}

/* =====================================================================
 * Canonical parity pass — measured against the live header (13886) on
 * https://staging.leftrightcorp.com/ at 1440 / 1024 / 834 / 768 / 390.
 * Every value below is a reading taken off the canonical header, not a
 * design choice. Do not "tidy" these numbers.
 * ===================================================================== */

/* The canonical panel shadow. The playground shipped a lighter, tighter one
 * (rgba(11,31,58,.14) 0 18px 34px 0); the source is a deeper, offset drop.
 * Desktop/tablet only: below 768px the panel is an in-flow accordion section
 * inside the drawer, and the source draws no shadow there — leaving this
 * unscoped tinted the drawer's white to 253-254. */
@media (min-width:768px){
    .lr-u-mega{box-shadow:0 28px 60px -18px rgba(16,42,76,.24);}
}
@media (max-width:767px){
    .lr-u-mega{box-shadow:none;}
}

@media (min-width:768px){
    /* Desktop AND tablet share one horizontal header, so everything below
     * applies across the whole >=768px band. The former 768-1024 scale-down
     * block has been removed: the canonical renders full desktop metrics at
     * every width down to 768px (measured: nav right edge 742px at 768px,
     * 996px at 1024px — it never overflows, so there is nothing to shrink). */

    /* Canonical desktop CTA reads "Contact", the drawer reads "Contact us".
     * One DOM, one suffix span, hidden here. */
    .lr-u-contact-more{display:none;}

    /* Active/hovered nav label is #7E5F35 in the source, not #725937. */
    .lr-u-nav-trigger:hover,
    .lr-u-nav-trigger:focus-visible,
    .lr-u-group:hover>.lr-u-nav-trigger,
    .lr-u-group:focus-within>.lr-u-nav-trigger,
    .lr-u-group.is-open>.lr-u-nav-trigger,
    .lr-u-nav-link:not(.lr-u-contact):hover,
    .lr-u-nav-link:not(.lr-u-contact):focus-visible{color:#7E5F35!important;}

    /* Canonical CTA label is white on gold, not navy on gold. */
    .lr-u-nav>.lr-u-contact,
    .lr-u-nav>.lr-u-contact:hover,
    .lr-u-nav>.lr-u-contact:focus-visible{color:#fff;}

    /* The canonical directory rows carry no Popular tag above mobile — the
     * three navy core cards already do that job on this panel. */
    .lr-u-mega .lr-u-tag{display:none;}

    /* Canonical hairline above the "For foreigners" sub-group: 1px #E4E4E8
     * spanning the column's content width only (measured 100 -> 482.5 at
     * 1440, i.e. stopping 25px short of the column divider), so the right
     * inset moves from padding to margin and the border sits on the content. */
    .lr-u-mega--services .lr-u-service-group:nth-child(2){
        margin-right:25px;
        padding-right:0;
        border-top:1px solid #E4E4E8;
        /* Source spacing: 12px above the rule, 10px below it. The playground
         * faked this with transform:translateY(11px), which moves the paint
         * but not the box — so the grid row stayed 11px short, the directory
         * block under-measured, and the footer rail sat 11px high while the
         * column visibly overflowed it. Real margin instead of a transform. */
        margin-top:12px;
        padding-top:10px;
        transform:none;
    }
    /* The "For foreigners" label box is 19.6px with a 4px gap under it in the
     * source; flattened to a 23px box it sat every row beneath it 0.6px high. */
    .lr-u-mega--services .lr-u-service-group:nth-child(2) h3{height:23.6px;}
}

@media (max-width:767px){
    /* ---------------------------------------------------------------
     * THE DRAWER SCROLL TRAP.
     * The base rule gives .lr-u-nav justify-content:flex-end so the desktop
     * nav sits right. The mobile block re-points the axis to column but never
     * resets that, so an expanded accordion packs its overflow out of the
     * BLOCK-START edge — the one direction where browsers create no
     * scrollable overflow. scrollHeight then equals clientHeight, scrollTop
     * stays pinned at 0, and the top of the Services panel becomes
     * permanently unreachable (measured at y = -195.9px).
     * --------------------------------------------------------------- */
    .lr-u-nav{justify-content:flex-start;align-content:flex-start;}

    /* The canonical drawer is a content-height dropdown capped at the
     * viewport, not a forced full-height panel: measured height 440.1px
     * with max-height 787.46px = 100dvh - the 3.875rem bar. */
    .lr-u-nav{height:auto;max-height:calc(100dvh - 3.875rem);}

    /* The source's hamburger is Font Awesome's solid "bars" at 1.125rem, not
     * three CSS rules: its strokes render ~2.3px with rounded ends against the
     * playground's flat 1.5px, which reads noticeably lighter side by side.
     * It is navy at rest and turns #7E5F35 once the trigger is hovered or
     * focused — which is why it is gold in every screenshot of the open
     * drawer: tapping it leaves the focus there. */
    .lr-u-mobile-toggle,
    .lr-u-mobile-toggle:active{color:#102A4C!important;}
    .lr-u-mobile-toggle:hover,
    .lr-u-mobile-toggle:focus,
    .lr-hdr-unified.is-mobile-open .lr-u-mobile-toggle{color:#7E5F35!important;}

    .lr-u-burger{
        display:block;
        width:1.125rem;
        height:1.125rem;
        gap:0;
        background-color:currentColor;
        -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M16%20132h416c8.837%200%2016-7.163%2016-16V76c0-8.837-7.163-16-16-16H16C7.163%2060%200%2067.163%200%2076v40c0%208.837%207.163%2016%2016%2016zm0%20160h416c8.837%200%2016-7.163%2016-16v-40c0-8.837-7.163-16-16-16H16c-8.837%200-16%207.163-16%2016v40c0%208.837%207.163%2016%2016%2016zm0%20160h416c8.837%200%2016-7.163%2016-16v-40c0-8.837-7.163-16-16-16H16c-8.837%200-16%207.163-16%2016v40c0%208.837%207.163%2016%2016%2016z'/%3E%3C/svg%3E");
        mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M16%20132h416c8.837%200%2016-7.163%2016-16V76c0-8.837-7.163-16-16-16H16C7.163%2060%200%2067.163%200%2076v40c0%208.837%207.163%2016%2016%2016zm0%20160h416c8.837%200%2016-7.163%2016-16v-40c0-8.837-7.163-16-16-16H16c-8.837%200-16%207.163-16%2016v40c0%208.837%207.163%2016%2016%2016zm0%20160h416c8.837%200%2016-7.163%2016-16v-40c0-8.837-7.163-16-16-16H16c-8.837%200-16%207.163-16%2016v40c0%208.837%207.163%2016%2016%2016z'/%3E%3C/svg%3E");
        -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
        -webkit-mask-position:center;mask-position:center;
        -webkit-mask-size:contain;mask-size:contain;
    }
    .lr-u-burger span{display:none!important;}

    /* Canonical Popular tag is 0.75rem, not 0.6875rem, and it sits immediately
     * after the row label. The playground's space-between pushed it to the far
     * right of the drawer; the source keeps label and tag together and leaves
     * the rest of the row empty. */
    .lr-u-tag{font-size:.75rem;}
    .lr-u-service-group>a,
    .lr-u-link-column>a{justify-content:flex-start;}

    /* The open accordion row picked up a stray rgb(58,115,146) bottom border;
     * the source keeps #E4E4E8 in every state. */
    .lr-u-nav-trigger,
    .lr-u-nav-trigger:hover,
    .lr-u-nav-trigger:focus,
    .lr-u-group.is-open>.lr-u-nav-trigger{border-bottom-color:#E4E4E8;}

    /* Second flex fault in the same container: the drawer's children keep the
     * default flex-shrink:1, so as soon as an accordion expands past the
     * viewport the browser compresses everything else to make room. Measured:
     * the Our Pricing / Guides rows collapsed 49.3px -> 30.2px and the CTA
     * block lost 19px the moment Services was opened. The canonical rows hold
     * at 50px whatever is open, so nothing in this drawer may shrink. */
    .lr-u-nav>*{flex-shrink:0;}

    /* Canonical drawer rows are not tracked-in. */
    .lr-u-nav-trigger,
    .lr-u-nav>.lr-u-nav-link{letter-spacing:normal;}

    /* The canonical drawer is not uniform: the two accordion summaries run at
     * line-height 1.4 (row 49.3px) but the Pricing/Guides rows are icon-list
     * items at 1.45 (row 50px). Flattening both to 1.4 lost 1.4px, which then
     * pushed the CTA and the whole credentials block up by the same amount. */
    .lr-u-nav>.lr-u-nav-link[href*="/pricing/"],
    .lr-u-nav>.lr-u-nav-link[href*="/guides/"]{line-height:1.45;}
}

/* The canonical core cards are content-height: 73.8px at 1440 where the title
 * fits on one line, and 111.6px at 834 where "Company Incorporation" and
 * "Accounting & Compliance" wrap to two. The playground pinned them at 74px,
 * so at tablet the card text spilled out below the rounded border. Freeing the
 * height reproduces the source exactly: 73.8px at 1440, 111.6px at 834. */
@media (min-width:768px){
    /* The 74px lives on the grid track, not just the card, so both have to go.
     * The navy band also carried a 1px top margin, which left a white hairline
     * between the gold rule and the band (source: gold at y74-75, navy from
     * y76; the playground started the navy at y77). Removing it and trimming
     * the kicker track to 25.41px puts the card row on the source's 119.41,
     * which is what stops every glyph inside from landing half a pixel out. */
    .lr-u-core-services{grid-template-rows:25.41px auto;margin-top:0;}
    /* The source groups each card's icon and copy in one row and centres that
     * row in the card, with the icon pinned to the row's own top. Both halves
     * matter: at 1024 the three cards are 1, 2 and 3 lines tall inside an
     * equal-height row, and the source drops the short cards' whole block by
     * half the difference (title y 136.4 / 146.6 / 155.3) while never letting
     * the icon float away from its first line. Centring the card without the
     * row groups them wrong; top-aligning without it drops the copy 19px. */
    .lr-u-core-services>a{height:auto;align-items:center;}
    .lr-u-core-row{
        display:flex;
        align-items:flex-start;
        gap:13px;
        width:100%;
        min-width:0;
    }
}

/* Each core card's title is a flex row that reserves room for a gold arrow
 * (content "→", 17px, #D9B98A, gap 7px) sitting at opacity 0 until hover, when
 * it fades in and slides from -4px to 0. The playground had no arrow at all,
 * so its titles had 24px more room and stopped wrapping where the source does:
 * "Accounting & Compliance" stayed on one line at 1024 and "Company Secretary"
 * at 834. Restoring the arrow restores both the hover and the wrap. */
@media (min-width:768px){
    .lr-u-core-services>a strong{
        display:flex;
        align-items:center;
        gap:7px;
    }
    .lr-u-core-services>a strong::after{
        content:"→";
        flex:0 1 auto;
        font-size:17px;
        line-height:20.4px;
        color:#D9B98A;
        opacity:0;
        transform:translateX(-4px);
        transition:opacity .18s ease,transform .18s ease;
    }
    .lr-u-core-services>a:hover strong::after,
    .lr-u-core-services>a:focus-visible strong::after{
        opacity:1;
        transform:none;
    }
}

/* The source's nav chevron is Font Awesome's solid chevron-down rendered as a
 * 14x14 filled SVG at full opacity. The playground drew a 9.5x9.5 CSS caret
 * from two 1.5px borders at .62 opacity — visibly smaller and lighter side by
 * side. Same path, masked so it still inherits currentColor through the hover,
 * open and navy-scrolled states. Mobile keeps its own +/- indicator. */
@media (min-width:768px){
    .lr-u-chevron{
        width:14px;
        height:14px;
        border:0;
        opacity:1;
        transform:none;
        background-color:currentColor;
        -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z'/%3E%3C/svg%3E");
        mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z'/%3E%3C/svg%3E");
        -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
        -webkit-mask-position:center;mask-position:center;
        -webkit-mask-size:contain;mask-size:contain;
        transition:transform .18s ease;
    }
    .lr-u-group:hover>.lr-u-nav-trigger .lr-u-chevron,
    .lr-u-group:focus-within>.lr-u-nav-trigger .lr-u-chevron,
    .lr-u-group.is-open>.lr-u-nav-trigger .lr-u-chevron{
        transform:rotate(180deg);
        opacity:1;
    }
    /* The wider glyph would push the trigger out by 4.5px, so the right inset
     * returns to the source's 16px and the gap absorbs the rest. */
    .lr-u-nav-trigger{padding-right:16px;gap:6px;}
}

/* The About panel's three columns are real column elements now, matching the
 * source's .lr-mega-col: a flex column per grid track, each flowing on its own.
 * The playground previously stacked five items into two shared grid rows and
 * separated them with pixel offsets tuned at 1440 (margin-top:192px and
 * friends). Those offsets are what broke at tablet, and what made the
 * credentials sit 77px low once the rows were unpinned: a grid row is as tall
 * as its tallest column, so column 2 could never start until column 1's much
 * taller feature card had finished. Column paddings, the 14px gap, the 14px
 * padding and the rule above each lower block are all source values. */
@media (min-width:768px){
    .lr-u-mega--about .lr-u-about-grid{grid-template-rows:auto;}
    .lr-u-about-col{display:flex;flex-direction:column;min-width:0;padding-top:4px;}
    .lr-u-about-col--1{grid-column:1;grid-row:1;padding-right:30px;}
    .lr-u-about-col--2{grid-column:2;grid-row:1;padding-left:30px;padding-right:30px;}
    .lr-u-mega--about .lr-u-articles{grid-column:3;grid-row:1;height:auto;padding-top:4px;}

    .lr-u-mega--about .lr-u-feature-card{
        grid-column:auto;grid-row:auto;
        width:100%;margin:0;min-height:0;height:auto;
    }
    .lr-u-mega--about .lr-u-link-column{
        grid-column:auto;grid-row:auto;
        width:100%;
        margin:14px 0 0;
        padding-top:14px;
        height:200px;
        border-top:1px solid #E4E4E8;
    }
    .lr-u-mega--about .lr-u-careers-card{
        grid-column:auto;grid-row:auto;
        width:100%;margin:0;height:auto;min-height:0;
    }
    .lr-u-mega--about .lr-u-proof{
        grid-column:auto;grid-row:auto;
        width:100%;
        margin:14px 0 0;
        padding-top:14px;
        height:auto;
    }

    /* Featured-article thumbnails track the column instead of sitting at a
     * fixed 128px: the source renders 127.6 / 97.9 / 77.1px at 1440 / 1024 /
     * 834, which is a constant 26% of the row at 16:9. At 834 the fixed width
     * squeezed the title into 154.8px and ran each row 36px tall. */
    .lr-u-mega--about .lr-u-articles>a{
        grid-template-columns:26% 1fr;
        height:auto;
        min-height:0;
    }
    .lr-u-mega--about .lr-u-articles img{
        width:100%;
        height:auto;
        aspect-ratio:16/9;
    }
    /* Source kicker metrics. The column head is 25.4px, not 25 — the missing
     * 0.4px put all three thumbnails half a pixel high, and a photo offset by
     * half a pixel differs in every one of its pixels. */
    .lr-u-mega--about .lr-u-articles small{line-height:15.4px;letter-spacing:1.54px;}
    .lr-u-mega--about .lr-u-articles>.lr-u-kicker{height:25.4px;}
    /* Source gap between an article's category kicker and its title is 3px. */
    .lr-u-mega--about .lr-u-articles>a>span{gap:3px;}
}

/* ---------------------------------------------------------------------
 * About panel. The source draws five rules the playground was missing
 * entirely (verified by enumerating every computed border in both panels,
 * then confirming against the rendered pixels): two column dividers, a
 * hairline over the anchor list, separators between the featured articles,
 * a frame on each thumbnail, and a bottom rule on the footer rail.
 * ------------------------------------------------------------------- */
@media (min-width:768px){
    /* Column dividers are a real border-right on the first two columns, exactly
     * as the source draws them on .lr-mega-col. That matters beyond the line
     * itself: with border-box sizing the border takes a pixel out of the
     * column, so the source's content boxes are 328.6 and 298.6 rather than
     * 329.6 and 299.6. Drawing the dividers as overlays instead left both
     * columns a pixel wide and re-wrapped their text against the source. */
    .lr-u-about-col--1,
    .lr-u-about-col--2{border-right:1px solid #E4E4E8;}

    /* The hairline over the anchor list now comes from the column block above,
     * where the anchor list simply follows the feature card in flow. */

    /* Separators between featured articles, and the thumbnail frame. */
    .lr-u-mega--about .lr-u-articles>a:not(:last-child){border-bottom:1px solid #E4E4E8;}
    .lr-u-mega--about .lr-u-articles img{border:1px solid #E4E4E8;border-radius:8px;}

    /* The source's footer rail is ruled top AND bottom. */
    .lr-u-mega--about>.lr-u-panel-actions{border-bottom:1px solid #E4E4E8;}

    /* Article category kicker is 11px/600 in the source, not 10px/700. */
    .lr-u-mega--about .lr-u-articles small{font-size:11px;font-weight:600;}

    /* Services directory: the group label's box ran 1.4px tall, which pushed
     * every row under it 1.4px low (first row text 284 against the source's
     * 282.6). Trimming the label box lands all four columns exactly. */
    .lr-u-mega--services .lr-u-service-group:not(:nth-child(2)) h3{height:29.4px;}

    /* The source's directory tracks are not a fixed ratio — measured across
     * widths they are equal thirds with a constant offset: the middle column
     * always takes ~11.3px more than a third and the outer two give up 5.4 and
     * 5.9. A plain fr ratio matched 1440 and drifted at tablet (column 2 came
     * out 5.6px narrow at 834, pushing column 3 two pixels off). */
    .lr-u-mega--services .lr-u-service-groups{
        grid-template-columns:calc(33.3333% - 5.4px) calc(33.3333% + 11.3px) calc(33.3333% - 5.9px);
    }
}

/* At tablet the About panel keeps the desktop three-column layout but must
 * flow: the desktop rules pin the anchor list, the credentials and the article
 * list to fixed pixel offsets tuned at 1440, and in a narrower column the
 * feature card grows past them — at 834 it ran 49.8px into the anchor list and
 * the article titles collided with the next article's kicker. The source has
 * no fixed heights here; it simply gets taller (487.1px at 1440, 565.8px at
 * 834), so the offsets become ordinary grid rows. */
@media (min-width:768px){
    /* The shell is content-driven in the source at every width — 439px at 1440
     * is simply 31 + the tallest column (381.1) + 27. Pinning it made the panel
     * clip once the columns grew. */
    /* Shell insets from the source: columns start 26px below the shell box and
     * the footer rail begins 32px below them (515.1 - 483.1 at 1440). */
    .lr-u-mega--about .lr-u-mega-shell{height:auto;padding-top:26px;padding-bottom:31px;}
}

/* The canonical CTA label is not tracked-in like the nav links are; the
 * playground's -.005em made the pill 106.52px against the source's 107px
 * and pushed every nav item 0.5px left. */
.lr-u-contact{letter-spacing:normal;}

/* Canonical inherited text colour on the header element is #161617 (Astra's
 * body colour), not #1F2937. No text relies on it today — every label sets its
 * own colour — but matching it keeps anything added later inheriting the same. */
.lr-hdr-unified{color:#161617;}

/* ---------------------------------------------------------------------
 * Hover bridge across the gap under a mega-menu trigger.
 *
 * The panel is absolutely positioned against the header, not the trigger, so
 * there is bare header between the two: 12px at rest and 4px once the bar goes
 * compact. The open/close listeners sit on .lr-u-group, and pointerleave fires
 * as soon as the cursor leaves the group AND all its descendants - which that
 * bare strip is not part of. So moving down from the trigger towards the menu
 * closed it, and because a closed panel is pointer-events:none it could never
 * be re-entered. Clicking appeared to work only because the focused trigger
 * suppresses the close.
 *
 * A transparent pseudo-element on the trigger spans the strip. It belongs to
 * the trigger, so it is inside the group's subtree and the cursor never leaves.
 * It exists only while the menu is open, spans just the trigger's width, and
 * the panel's z-index:120 keeps it painted above the bridge where they overlap.
 * ------------------------------------------------------------------- */
@media (min-width:768px){
    .lr-u-group:hover>.lr-u-nav-trigger::before,
    .lr-u-group:focus-within>.lr-u-nav-trigger::before,
    .lr-u-group.is-open>.lr-u-nav-trigger::before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:100%;
        height:20px;
    }
}