/*
 * 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. Do not
 * convert rem to px or back either: the root font size is 16px from 768px up
 * but ~14.6px on phones, so the two units are only interchangeable above the
 * desktop breakpoint, and several rules deliberately mix them.
 *
 * ---------------------------------------------------------------------------
 * HOW THIS FILE IS ORGANISED
 *
 *   1. Tokens
 *   2. Foundation           - what is true of the header at every width
 *   3. @media (min-width:768px)   - desktop + tablet: the horizontal header,
 *                                   the compact scrolled state, both mega menus
 *   4. @media (max-width:767px)   - mobile: the drawer over the same DOM
 *   5. @media (prefers-reduced-motion:reduce)
 *
 * The two band blocks are near-disjoint: above 768px the panels are absolutely
 * positioned overlays, below it they are in-flow accordion sections. Only the
 * handful of declarations that hold in BOTH bands live in the foundation, so a
 * value seen there is genuinely shared and a value seen in a band block is
 * genuinely band-specific. There is exactly one block per band; resist adding
 * a second "parity pass" block, because that is how this file previously grew
 * to thirteen of them stacked on top of each other.
 *
 * CASCADE NOTE. Astra styles bare `button` and `a` elements (astra-theme-
 * dynamic-css sets button colour/background/padding, and `a:hover`, `button:
 * hover`, `a:focus-visible` all carry (0,1,1)). The header's own <button>
 * triggers and <a> links have to outrank those. This file does that with
 * specificity - the state rules carry a `.lr-u-nav` / `.lr-hdr-unified`
 * ancestor - rather than with !important, so the winner does not depend on
 * stylesheet order. The one remaining !important is the reduced-motion guard,
 * which is meant to beat everything.
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
 * 1. TOKENS
 * ===================================================================== */
.lr-hdr-unified{
    --lr-navy:var(--e-global-color-765907eb,#102A4C);
    --lr-navy-deep:var(--e-global-color-23fc8f35,#0B1F3A);
    --lr-navy-soft:var(--e-global-color-2cef92d2,#1B3A66);
    --lr-gold:var(--e-global-color-8e1626a2,#C9A36E);
    --lr-gold-soft:var(--e-global-color-e065422a,#D9B98A);
    --lr-gold-dark:var(--e-global-color-96e991bd,#A98352);
    /* The canonical accent: kickers, panel-link hover, hovered nav labels. */
    --lr-brown:var(--e-global-color-22f096a5,#7E5F35);
    --lr-cream:var(--e-global-color-a8ba2971,#F4F1EC);
    --lr-border:var(--e-global-color-ccdadec9,#E4E4E8);
    /* Footer/action rail fill under both mega panels. */
    --lr-rail:var(--e-global-color-9ca65744,#F2F2F4);
    --lr-ink:var(--e-global-color-449f117b,#1F2937);
    --lr-muted:var(--e-global-color-b0badb29,#6B7280);
    /* Core-card description on the navy band. */
    --lr-core-desc:var(--e-global-color-80791b07,#9FA9B8);
    --lr-tag-bg:var(--e-global-color-8a1c8d3d,#E7AA5B38);

    /* The centred content column, shared by the bar and the About panel. */
    --lr-shell:min(77.5rem,calc(100% - 3.5rem));
    /* Full-bleed strips (navy core band, directory, both rails) sit on their
     * own 1240px measure rather than the shell, so they are inset from the
     * viewport instead of from a centred box. */
    --lr-bleed:max(28px,calc((100vw - 1240px)/2));
    /* Bar height and logo width are the only two things the compact scrolled
     * state and the mobile bar both change; driving them from one variable
     * each keeps the transition in a single place. */
    --lr-bar-h:4.625rem;
    --lr-logo-w:7.75rem;
}

/* =========================================================================
 * 2. FOUNDATION - true at every width
 * ===================================================================== */
.lr-hdr-unified{
    position:relative;
    z-index:9999;
    width:100%;
    background:var(--e-global-color-9bb5b798,#fff);
    border-bottom:1px solid var(--lr-border);
    /* Astra's body colour, so anything added later inherits what the rest of
     * the page inherits. Every label below sets its own colour. */
    color:#161617;
    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{
    /* Deliberately not a containing block: the mega panels are positioned
     * against .lr-hdr-unified so they can span the full viewport width. */
    position:static;
    min-height:var(--lr-bar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:min-height .2s ease;
}

.lr-u-brand{
    display:block;
    flex:0 0 var(--lr-logo-w);
    width:var(--lr-logo-w);
    max-width:var(--lr-logo-w);
    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;}
/* Same reason as .lr-u-bar - the panel must not be positioned against the group. */
.lr-u-group{position:static;}

.lr-u-nav-trigger,.lr-u-nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.375rem;
    border:0;
    border-radius:0;
    background:transparent;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:color .18s ease;
}

.lr-u-contact{
    justify-content:center;
    border-radius:999px;
    background:var(--lr-gold);
    color:var(--e-global-color-9bb5b798,#fff);
    font-weight:500;
    /* Not tracked in like the nav links are: -.005em made the pill 106.52px
     * against the source's 107px and pushed every nav item .5px left. */
    letter-spacing:normal;
}
.lr-hdr-unified .lr-u-contact:hover,
.lr-hdr-unified .lr-u-contact:focus-visible{background:var(--lr-gold-dark);color:var(--e-global-color-9bb5b798,#fff);}
/* Astra paints a dotted outline on every focus-visible <a>; the header draws
 * its own affordances instead (the gold underline, the open panel). */
.lr-hdr-unified .lr-u-nav-trigger:focus-visible,
.lr-hdr-unified .lr-u-nav-link:focus-visible{outline:none;}

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

/* Panel content that behaves the same in both bands. Everything else about
 * the panels is band-specific and lives in the two blocks below. */
.lr-u-kicker{
    display:block;
    margin:0;
    font:700 11px/15.4px Inter,sans-serif;
    letter-spacing:1.54px;
    text-transform:uppercase;
    color:var(--lr-brown);
}
.lr-u-link-column{display:flex;flex-direction:column;align-items:stretch;}
.lr-u-link-column>.lr-u-kicker{display:none;}
.lr-u-link-column>a,
.lr-u-service-group>a{
    display:flex;
    align-items:center;
    color:var(--lr-ink);
    transition:background-color .14s ease,color .14s ease;
}
/* The gap holds in both bands; only the alignment changes (the drawer keeps
 * the Popular tag beside its label instead of at the far edge of the row). */
.lr-u-service-group>a{justify-content:space-between;gap:.4rem;}
.lr-u-link-column>a:focus-visible,
.lr-u-service-group>a:focus-visible{outline:none;}

/* =========================================================================
 * 3. DESKTOP + TABLET (>= 768px)
 * ===================================================================== */
@media (min-width:768px){

    /* ---- Bar ------------------------------------------------------- */
    .lr-hdr-unified{position:sticky;top:0;}

    .lr-u-bar{
        width:var(--lr-shell);
        margin:0 auto;
        gap:1rem;
    }

    .lr-u-nav{
        align-items:center;
        justify-content:flex-end;
        gap:.125rem;
        margin-left:auto;
    }

    .lr-u-nav-trigger,.lr-u-nav-link{
        justify-content:center;
        min-height:2.375rem;
        padding:.75rem 1rem;
        font-size:.875rem;
        line-height:1;
    }
    /* The CTA is excluded from both: it is white on gold, and untracked. */
    .lr-u-nav-trigger,
    .lr-u-nav-link:not(.lr-u-contact){color:var(--lr-navy);letter-spacing:-.005em;}
    /* The masked chevron is wider than the CSS caret it replaced, 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;}

    .lr-u-contact{margin-left:1rem;padding:.75rem 1.625rem;}
    /* One DOM, one suffix span: the bar reads "Contact", the drawer "Contact us". */
    .lr-u-contact-more{display:none;}

    /* Gold underline that wipes in under a hovered/open nav item. */
    .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:hover::after,
    .lr-u-nav-trigger:focus-visible::after,
    .lr-u-nav-link:not(.lr-u-contact):hover::after,
    .lr-u-nav-link:not(.lr-u-contact):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);}

    /* Hovered/open label colour, on the white bar AND the compact navy one.
     * Two things have to lose to this rule: Astra's button:hover / a:hover
     * (0,1,1), and .lr-hdr-unified.is-scrolled .lr-u-nav-trigger (0,3,0)
     * below, which paints the resting label white. Hence the two-ancestor
     * prefix rather than the !important this used to carry. */
    .lr-hdr-unified .lr-u-nav .lr-u-nav-trigger:hover,
    .lr-hdr-unified .lr-u-nav .lr-u-nav-trigger:focus-visible,
    .lr-hdr-unified .lr-u-nav .lr-u-group:hover>.lr-u-nav-trigger,
    .lr-hdr-unified .lr-u-nav .lr-u-group:focus-within>.lr-u-nav-trigger,
    .lr-hdr-unified .lr-u-nav .lr-u-group.is-open>.lr-u-nav-trigger,
    .lr-hdr-unified .lr-u-nav .lr-u-nav-link:not(.lr-u-contact):hover,
    .lr-hdr-unified .lr-u-nav .lr-u-nav-link:not(.lr-u-contact):focus-visible{
        background:transparent;
        color:var(--lr-brown);
        box-shadow:none;
        outline:none;
    }

    /* Chevron: Font Awesome's solid chevron-down as a 14x14 mask, so it still
     * inherits currentColor through the hover, open and navy-scrolled states. */
    .lr-u-chevron{
        width:14px;
        height:14px;
        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.is-open>.lr-u-nav-trigger .lr-u-chevron{transform:rotate(180deg);}

    /* Mobile-only credentials must never consume nav width up here. */
    .lr-u-mobile-creds{display:none;}

    /* ---- Compact navy scroll state --------------------------------- */
    /* Scoped to this band because .is-scrolled is only ever set above 768px
     * (see paintScrollState in header-v2-unified.js). */
    .lr-hdr-unified.is-scrolled{
        --lr-bar-h:3.625rem;
        --lr-logo-w:6.4rem;
        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-nav-trigger,
    .lr-hdr-unified.is-scrolled .lr-u-nav-link:not(.lr-u-contact){color:var(--e-global-color-9bb5b798,#fff);}
    /* The compact bar carried a second rule here painting the HOVERED label
     * --lr-gold-soft. It never applied: the hover rule above shipped with
     * !important and always won, so a hovered label on the navy bar has always
     * rendered --lr-brown. Removed rather than revived - reviving it would be
     * a visible change, and which of the two is wanted is a design call. */

    /* ---- Mega panel shell ------------------------------------------ */
    .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:var(--e-global-color-9bb5b798,#fff);
        border-top:2px solid var(--lr-gold);
        box-shadow:0 28px 60px -18px rgba(16,42,76,.24);
        transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
    }
    .lr-u-group.is-open>.lr-u-mega{opacity:1;visibility:visible;pointer-events:auto;transform:none;}

    /* Hover bridge across the gap under a trigger.
     *
     * The panel is positioned against the header, not the trigger, so there is
     * bare header between the two: 12px at rest, 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 strip
     * is not part of. A closed panel is pointer-events:none, so it could never
     * be re-entered; clicking only appeared to work because a focused trigger
     * suppresses the close. This transparent pseudo-element belongs to the
     * trigger, so the cursor stays inside the group's subtree. It spans only the
     * trigger's width, and the panel's z-index:120 paints above it. */
    .lr-u-group.is-open>.lr-u-nav-trigger::before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:100%;
        height:20px;
    }

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

    /* Panel links: ink at rest, cream + navy on hover, in both panels. */
    .lr-u-link-column>a,
    .lr-u-service-group>a{
        min-height:37px;
        margin-left:-10px;
        padding:8px 10px;
        border-radius:8px;
        font:500 14px/21px Inter,sans-serif;
    }
    .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:var(--lr-cream);color:var(--lr-navy);}

    /* Both panels close on a full-bleed rail: 46px, ruled, grey, with a
     * gold-brown CTA at the left and a navy link at the right. */
    .lr-u-mega--about>.lr-u-panel-actions,
    .lr-u-mega--services .lr-u-services-footer{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        height:46px;
        margin:0;
        padding:0 var(--lr-bleed);
        border-top:1px solid var(--lr-border);
        background:var(--lr-rail);
    }
    .lr-u-mega--about>.lr-u-panel-actions>a,
    .lr-u-mega--services .lr-u-services-footer>a{font:600 12px/18px Inter,sans-serif;color:var(--lr-brown);}
    .lr-u-mega--about>.lr-u-panel-actions>a:first-child strong,
    .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:var(--lr-brown);}
    .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:var(--lr-navy);}
    .lr-u-mega--services .lr-u-services-footer>a:first-child{display:flex;gap:5px;}
    /* The About rail is ruled top AND bottom in the source. The 1px nudge
     * seats it against the shell's bottom padding. */
    .lr-u-mega--about>.lr-u-panel-actions{
        border-bottom:1px solid var(--lr-border);
        transform:translateY(1px);
    }

    /* ---- About panel ----------------------------------------------- */
    /* Three real column elements, matching the source's .lr-mega-col: a flex
     * column per grid track, each flowing on its own. This replaced five items
     * stacked into two shared grid rows and separated by 1440-tuned pixel
     * offsets - 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, and
     * at 834 the feature card ran 49.8px into the anchor list.
     *
     * The shell is content-driven at every width (487.1px at 1440, 565.8px at
     * 834); pinning it to 439px clipped the panel once the columns grew. */
    .lr-u-mega--about .lr-u-mega-shell{
        width:var(--lr-shell);
        margin:0 auto;
        /* Columns start 26px below the shell box; the rail begins 32px below them. */
        padding:26px 0 31px;
        display:grid;
        grid-template-columns:29% 29% 42%;
        grid-template-rows:auto;
        gap:0;
    }
    .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;}
    /* Real border-right, exactly as the source draws it. That matters beyond
     * the line: with border-box sizing the border takes a pixel out of the
     * column, which is why the source's content boxes are 328.6 and 298.6
     * rather than 329.6 and 299.6. Drawing them as overlays re-wrapped the text. */
    .lr-u-about-col--1,
    .lr-u-about-col--2{border-right:1px solid var(--lr-border);}

    .lr-u-feature-card,
    .lr-u-careers-card{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        width:100%;
        margin:0;
        padding:10px;
        color:var(--lr-ink);
    }
    .lr-u-feature-card>strong,
    .lr-u-careers-card>strong{margin:10px 0 0;font:600 19px/24.7px Lora,Georgia,serif;color:var(--lr-navy);}
    .lr-u-feature-card>span:not(.lr-u-kicker),
    .lr-u-careers-card>span:not(.lr-u-kicker){margin:4px 0 0;font:400 12px/18px Inter,sans-serif;color:var(--lr-muted);}
    .lr-u-feature-card>b,
    .lr-u-careers-card>b{margin:14px 0 0;font:600 14px/21px Inter,sans-serif;color:var(--lr-brown);}

    .lr-u-mega--about .lr-u-link-column{
        width:100%;
        height:200px;
        margin:14px 0 0;
        padding-top:14px;
        border-top:1px solid var(--lr-border);
    }
    /* "Read the full story" and "Careers" already have cards of their own in
     * this panel; the anchor list only carries the five section links. The
     * drawer, which has no cards, shows all seven. */
    .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-proof{
        display:flex;
        flex-direction:column;
        gap:10px;
        width:100%;
        margin:14px 0 0;
        padding-top:14px;
        border-top:1px solid var(--lr-border);
    }
    .lr-u-proof div{display:flex;flex-direction:column;gap:0;min-height:35px;}
    .lr-u-proof strong{font:600 12px/17.4px Inter,sans-serif;color:var(--lr-navy);}
    .lr-u-proof span{font:400 12px/17.4px Inter,sans-serif;color:var(--lr-muted);}

    .lr-u-articles{
        display:flex;
        flex-direction:column;
        gap:0;
        grid-column:3;
        grid-row:1;
        align-self:start;
        padding:4px 0 0 30px;
    }
    /* The column head is 25.4px, not 25 - the missing .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-articles>.lr-u-kicker{height:25.4px;}
    .lr-u-articles>a{
        display:grid;
        /* Thumbnails track the column instead of a fixed 128px: the source
         * renders 127.6 / 97.9 / 77.1px at 1440 / 1024 / 834, a constant 26%
         * of the row at 16:9. Fixed, they squeezed the 834 title to 154.8px. */
        grid-template-columns:26% 1fr;
        gap:14px;
        align-items:start;
        padding:13px 0;
        color:var(--lr-ink);
    }
    .lr-u-articles>a:not(:last-child){border-bottom:1px solid var(--lr-border);}
    .lr-u-articles>a:focus-visible{outline:none;}
    .lr-u-articles img{
        display:block;
        width:100%;
        height:auto;
        aspect-ratio:16/9;
        object-fit:cover;
        border:1px solid var(--lr-border);
        border-radius:8px;
    }
    .lr-u-articles>a>span{display:flex;flex-direction:column;gap:3px;min-width:0;}
    .lr-u-articles small{
        font:600 11px/15.4px Inter,sans-serif;
        letter-spacing:1.54px;
        text-transform:uppercase;
        color:var(--lr-brown);
    }
    .lr-u-articles strong{font:600 17px/22.95px Lora,Georgia,serif;color:var(--lr-navy);}

    /* ---- Services panel -------------------------------------------- */
    /* This panel is full-bleed: the shell carries no measure of its own and
     * each band insets itself with --lr-bleed. */
    .lr-u-mega--services .lr-u-mega-shell{width:100%;padding:0;}

    .lr-u-core-services{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        /* The 25.41px kicker track puts the card row on the source's 119.41.
         * The navy band carries no top margin: 1px left a white hairline
         * between the gold rule and the band. */
        grid-template-rows:25.41px auto;
        column-gap:14px;
        row-gap:0;
        min-height:145px;
        margin:0;
        padding:18px var(--lr-bleed) 28px;
        background:var(--lr-navy);
    }
    .lr-u-core-services>.lr-u-kicker{grid-column:1 / -1;color:var(--lr-gold-soft);}
    /* Content-height, not pinned: 73.8px at 1440 where the title fits on one
     * line, 111.6px at 834 where two of them wrap. Pinned at 74px the card
     * text spilled below the rounded border at tablet. */
    .lr-u-core-services>a{
        display:flex;
        align-items:center;
        height:auto;
        padding:16px 18px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:14px;
        background:rgba(255,255,255,.06);
        color:var(--e-global-color-9bb5b798,#fff);
        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:var(--lr-gold);
        outline:none;
    }
    /* 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 while never letting the icon float away from its
     * first line. */
    .lr-u-core-row{display:flex;align-items:flex-start;gap:13px;width:100%;min-width:0;}
    .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:var(--lr-gold-soft);
    }
    .lr-u-core-copy{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;}
    /* The title reserves room for a gold arrow that fades in on hover. Without
     * it the titles had 24px more room and stopped wrapping where the source
     * does - "Accounting & Compliance" stayed on one line at 1024. */
    .lr-u-core-services strong{
        display:flex;
        align-items:center;
        gap:7px;
        font:600 17px/20.4px Lora,Georgia,serif;
        color:var(--e-global-color-9bb5b798,#fff);
    }
    .lr-u-core-services strong::after{
        content:"→";
        flex:0 1 auto;
        font-size:17px;
        line-height:20.4px;
        color:var(--lr-gold-soft);
        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;}
    .lr-u-core-services .lr-u-core-copy>span{font:400 12px/17.4px Inter,sans-serif;color:var(--lr-core-desc);}

    /* 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. */
    .lr-u-mega--services .lr-u-service-groups{
        display:grid;
        grid-template-columns:calc(33.3333% - 5.4px) calc(33.3333% + 11.3px) calc(33.3333% - 5.9px);
        grid-template-rows:auto 1fr;
        gap:0;
        min-height:321px;
        padding:24px var(--lr-bleed) 35px;
        background:var(--e-global-color-9bb5b798,#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;}
    /* "For foreigners" is a sub-group of column 1, under a hairline that spans
     * the column's content width only (measured 100 -> 482.5 at 1440, stopping
     * 25px short of the divider), so the right inset is margin, not padding,
     * and the border sits on the content. Source spacing: 12px above the rule,
     * 10px below. A transform:translateY here moved the paint but not the box,
     * leaving the grid row 11px short and the rail sitting high. */
    .lr-u-mega--services .lr-u-service-group:nth-child(2){
        grid-column:1;
        grid-row:2;
        margin-top:12px;
        margin-right:25px;
        padding-top:10px;
        border-top:1px solid var(--lr-border);
    }
    .lr-u-mega--services .lr-u-service-group:nth-child(3){
        grid-column:2;
        grid-row:1 / 3;
        padding:0 24px 0 23px;
        border-left:1px solid var(--lr-border);
        border-right:1px solid var(--lr-border);
    }
    .lr-u-mega--services .lr-u-service-group:nth-child(4){grid-column:3;grid-row:1 / 3;padding-left:24px;}
    /* 29.4px, not 30: a 1.4px-tall label box pushed every row under it 1.4px
     * low (first row text 284 against the source's 282.6). */
    .lr-u-mega--services .lr-u-service-group:not(:nth-child(2)) h3{
        height:29.4px;
        margin:0;
        padding:4px 0 0;
        font:700 11px/15.4px Inter,sans-serif;
        letter-spacing:1.54px;
        text-transform:uppercase;
        color:var(--lr-brown);
    }
    /* The "For foreigners" label box is 19.6px with a 4px gap under it in the
     * source; flattened to 23px it sat every row beneath it .6px high. */
    .lr-u-mega--services .lr-u-service-group:nth-child(2) h3{
        height:23.6px;
        margin:0;
        padding:0;
        font:italic 14px/19.6px Lora,Georgia,serif;
        color:var(--lr-muted);
    }
}

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

/* =========================================================================
 * 4. MOBILE (< 768px) - the drawer, over the same DOM
 * ===================================================================== */
@media (max-width:767px){

    /* ---- Bar ------------------------------------------------------- */
    .lr-hdr-unified{--lr-bar-h:3.875rem;--lr-logo-w:6.4rem;}
    .lr-u-bar{padding:0 1.25rem;gap:.75rem;}

    /* The source's control is Font Awesome's solid "bars" at 1.125rem, not
     * three CSS rules: its strokes render ~2.3px with rounded ends against a
     * flat 1.5px, which reads noticeably lighter side by side. The three
     * <span>s stay in the DOM and are hidden. Navy at rest; var(--e-global-color-22f096a5,#7E5F35) once
     * hovered or focused, which is why it is gold in every screenshot of an
     * open drawer - tapping it leaves the focus there. */
    .lr-u-mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:auto;
        padding:.9375rem 0 .9375rem .75rem;
        border:0;
        border-radius:0;
        background:transparent;
        color:var(--lr-navy);
        cursor:pointer;
    }
    .lr-hdr-unified .lr-u-mobile-toggle:hover,
    .lr-hdr-unified .lr-u-mobile-toggle:focus,
    .lr-hdr-unified .lr-u-mobile-toggle:active{background:transparent;border:0;box-shadow:none;}
    .lr-hdr-unified .lr-u-mobile-toggle:hover,
    .lr-hdr-unified .lr-u-mobile-toggle:focus,
    .lr-hdr-unified.is-mobile-open .lr-u-mobile-toggle{color:var(--lr-brown);}
    .lr-hdr-unified .lr-u-mobile-toggle:focus-visible{outline:2px solid var(--lr-gold);outline-offset:2px;}
    .lr-u-burger{
        display:block;
        width:1.125rem;
        height:1.125rem;
        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;}

    /* ---- Drawer ---------------------------------------------------- */
    /* A content-height dropdown capped at the viewport, not a forced full-
     * height panel: measured 440.1px against max-height 787.46px at 390.
     *
     * justify-content and align-content are NOT decoration here. The desktop
     * nav is right-aligned; inherited into a column scroller, flex-end packs
     * overflow out of the BLOCK-START edge - the one direction where browsers
     * create no scrollable overflow. scrollHeight then equalled clientHeight,
     * scrollTop stayed pinned at 0, and the top of the Services panel sat at
     * y = -195.9px, permanently unreachable. */
    .lr-u-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:100%;
        z-index:1000;
        width:100%;
        max-height:calc(100dvh - var(--lr-bar-h));
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        overflow-anchor:none;
        scrollbar-width:none;
        margin:0;
        padding:.5rem 1.25rem 4rem;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        align-content:flex-start;
        gap:0;
        background:var(--e-global-color-9bb5b798,#fff);
        border-top:1px solid var(--lr-border);
        box-shadow:0 16px 32px rgba(11,31,58,.18);
    }
    .lr-u-nav::-webkit-scrollbar{width:0;height:0;}
    .lr-hdr-unified.is-mobile-open .lr-u-nav{display:flex;}
    body.lr-u-mobile-open{overflow:hidden;}
    /* Second flex fault in the same container: with the default flex-shrink:1,
     * expanding an accordion past the viewport compressed everything else -
     * the Pricing/Guides rows collapsed 49.3px -> 30.2px. The source rows hold
     * at 50px whatever is open. */
    .lr-u-nav>*{flex-shrink:0;}

    /* The drawer's order is its own; the DOM order is the desktop bar's. */
    .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;}
    .lr-u-mobile-creds{order:6;}

    .lr-u-group{width:100%;}
    .lr-desktop-extra,
    .lr-u-feature-card{display:none;}

    /* ---- Top-level rows -------------------------------------------- */
    .lr-u-nav-trigger,
    .lr-u-nav>.lr-u-nav-link:not(.lr-u-contact){
        width:100%;
        justify-content:space-between;
        padding:1rem 0;
        border-bottom:1px solid var(--lr-border);
        color:var(--lr-navy);
        font:600 .9375rem/1.4 Inter,Arial,sans-serif;
        letter-spacing:normal;
        text-align:left;
    }
    /* The 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
     * 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;}
    /* .lr-u-nav outranks Astra's button:hover, which otherwise repaints the
     * row and left it a stray rgb(58,115,146) bottom border while open. */
    .lr-u-nav .lr-u-nav-trigger:hover,
    .lr-u-nav .lr-u-nav-trigger:focus,
    .lr-u-nav .lr-u-nav-trigger:focus-visible,
    .lr-u-nav .lr-u-group.is-open>.lr-u-nav-trigger,
    .lr-u-nav .lr-u-nav-link:not(.lr-u-contact):hover{
        background:transparent;
        color:var(--lr-brown);
        border-bottom-color:var(--lr-border);
        box-shadow:none;
    }

    /* The accordion indicator is a plus/minus, gold at rest and while open. */
    .lr-u-chevron{
        position:relative;
        flex:0 0 .75rem;
        width:.75rem;
        height:.75rem;
        color:var(--lr-brown);
    }
    .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 section ------------------------------------------ */
    .lr-u-mega{display:none;}
    .lr-u-group.is-open>.lr-u-mega{display:block;}
    .lr-u-mega-shell{padding:0 0 .75rem;border-bottom:1px solid var(--lr-border);}
    .lr-u-service-group{padding:0;border:0;}
    .lr-u-service-group h3{
        height:auto;
        margin:.875rem 0 .25rem;
        padding:0;
        font:700 .6875rem/1.4 Inter,Arial,sans-serif;
        letter-spacing:.14em;
        text-transform:uppercase;
        color:var(--lr-brown);
    }
    .lr-u-link-column>a,
    .lr-u-service-group>a{
        justify-content:flex-start;
        margin:0;
        padding:.875rem 0 .875rem .75rem;
        border:0;
        border-radius:0;
        background:transparent;
        font:500 .9375rem/1.45 Inter,Arial,sans-serif;
    }
    .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:var(--lr-cream);color:var(--lr-brown);}
    /* The tag sits immediately after the row label and leaves the rest of the
     * row empty; space-between pushed it to the far right of the drawer. */
    .lr-u-tag{
        flex:0 0 auto;
        align-self:center;
        margin-inline-start:.5rem;
        padding:.125rem .25rem .125rem .375rem;
        border-radius:.25rem;
        background:var(--lr-tag-bg);
        color:var(--lr-brown);
        font:600 .75rem/1.4 Inter,Arial,sans-serif;
        letter-spacing:.14em;
        text-transform:uppercase;
    }

    /* ---- CTA and credentials --------------------------------------- */
    .lr-u-nav>.lr-u-contact{
        margin:1.25rem 0 0;
        padding:1.0625rem 1.75rem;
        border:0;
        font:500 .9375rem/1 Inter,Arial,sans-serif;
    }
    .lr-u-mobile-creds{
        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);
        font:400 .75rem/1.45 Inter,Arial,sans-serif;
        color:var(--lr-muted);
    }
    .lr-u-mobile-creds>div{display:flex;flex-direction:column;gap:0;}
    .lr-u-mobile-creds strong{display:block;margin:0;font-size:inherit;line-height:inherit;font-weight:600;color:var(--lr-navy);}
    .lr-u-mobile-creds span{display:block;margin:0;font-size:inherit;line-height:inherit;font-weight:400;color:var(--lr-muted);}
}

/* =========================================================================
 * 5. REDUCED MOTION
 * ===================================================================== */
/* The one !important in this file, and it is meant to beat everything. */
@media (prefers-reduced-motion:reduce){
    .lr-hdr-unified,
    .lr-u-bar,
    .lr-u-brand,
    .lr-u-mega,
    .lr-u-chevron{transition:none!important;}
}