/* =========================================================
   Fox Mandal — Corporate Legal Services
   Custom stylesheet (loads after bootstrap.min.css)
   ========================================================= */

/* =========================
   Variables
========================= */
:root {
    --navy: #002369;
    --navy-deep: #011759;
    --blue: #0073d2;
    --blue-light: #1e96d9;
    --text-color: #656565;
    --text-muted: #8b8b8b;
    --text-faint: #a3a3a3;
    --heading-color: #002369;
    --ink: #1a1a1a;
    --border-color: #dcdcdc;
    --border-btn: #9a9a9a;
    --border-faq: #e2e2e2;
    --grey-band: #cccccc;
    --white: #ffffff;

    --container-width: 1200px;
    --shell-width: 1440px;

    --header-height: 83px;

    --font-base: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* =========================
   Reset / Base
========================= */
* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-color);
    background: var(--white);
    overflow-x: hidden;
}

body.menu-open { overflow: hidden; }
body.sidebar-open { overflow: hidden; }

img { max-width: 100%; height: auto; }

a { color: var(--navy); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--blue); }

button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Shared shells ------------------------------------------------ */
.shell {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.shell-wide {
    width: 100%;
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 0 48px;
}

/* =========================
   Typography
========================= */
.section-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--heading-color);
    margin: 0 0 18px;
}

.section-title--blue { color: var(--blue); letter-spacing: .11em; }
.section-title--center { text-align: center; }

.band-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--white);
    text-align: center;
    margin: 0;
}

.body-copy p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-color);
    margin: 0 0 14px;
}

.tick-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tick-list li {
    position: relative;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
}

.tick-list li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 11px;
    width: 3px;
    height: 3px;
    background: var(--text-color);
    border-radius: 50%;
}

/* Ghost / outline buttons -------------------------------------- */
.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 9px 22px;
    border: 1px solid var(--border-btn);
    background: var(--white);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn-line:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn-line--lg { min-width: 142px; padding: 14px 26px; }

.btn-solid-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 11px 26px;
    transition: background .18s ease, color .18s ease;
}

.btn-solid-white:hover { background: var(--navy); color: var(--white); }

/* =========================
   Header
========================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--white);
}

.header-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    height: var(--header-height);
    padding: 0 58px 0 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo { display: inline-block; line-height: 0; }
.site-logo img { width: 136px; height: auto; }

.header-right {
    display: flex;
    align-items: center;
    gap: 78px;
}

/* =========================
   Desktop Navigation
========================= */
.desktop-navigation > ul {
    display: flex;
    align-items: center;
    gap: 56px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-navigation a,
.desktop-navigation .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
    transition: color .18s ease;
}

.desktop-navigation a:hover,
.desktop-navigation .nav-trigger:hover,
.desktop-navigation .nav-trigger[aria-expanded="true"] { color: var(--blue); }

.desktop-navigation .nav-trigger .fa-caret-down { font-size: 12px; }

.desktop-navigation .is-active { color: var(--blue); }

/* Hamburger ---------------------------------------------------- */
.menu-toggle {
    width: 28px;
    height: 20px;
    border: 0;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--navy);
    transition: background .18s ease;
}

.menu-toggle:hover span { background: var(--blue); }

/* =========================
   Mega Menu
========================= */
.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .09);
    border-top: 1px solid #eeeeee;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 34px 92px 46px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
}

.mega-heading {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 20px;
}

.mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    grid-auto-columns: 1fr;
    column-gap: 32px;
}

.mega-list a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
}

.mega-list a i {
    font-size: 13px;
    color: #b7b7b7;
    width: 10px;
    flex: 0 0 10px;
    transition: color .18s ease;
}

.mega-list a:hover { color: var(--blue); }
.mega-list a:hover i { color: var(--blue); }

/* -------------------------
   Mega menu — the fourth level

   The menu is built four deep, Expertise > Practice Areas > Corporate >
   Antitrust & Competition Law, and the design already shows the affordance:
   Sectors entries carry a chevron-right because they lead straight to a page,
   Practice Areas entries carry a chevron-DOWN because they open further. The
   markup drew that icon and had nothing behind it.

   .mega-list is a seven-row grid that flows into columns, so an item growing
   taller would stretch its whole row and leave holes beside it. The sublist is
   laid OVER the panel instead: the approved columns hold their exact positions
   whether anything is open or not.
------------------------- */
.mega-item--has-sub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* NO flex-wrap here.

   It was wrapping, which read as harmless because the dropdown is absolutely
   positioned and never needed a line of its own. What it actually did was let
   a long label fall BELOW its chevron: "Government, Regulatory and Compliance"
   broke onto a second line, 109px tall against everything else is 49px.

   And because .mega-list flows seven rows down each column, item 13 shares a
   grid row with item 6 — so Dispute Resolution grew to 109px as well and the
   left column gained a hole opposite a fault in the right one. */

/* The chevron is the control, not the link. A practice area is a page in its
   own right, so the label has to stay clickable — the same split the mobile
   panel already uses for these items. */
.mega-sub-toggle {
    flex: 0 0 auto;
    padding: 12px 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: inherit;
    font-family: inherit;
}

.mega-sub-toggle i {
    font-size: 13px;
    color: #b7b7b7;
    width: 10px;
    flex: 0 0 10px;
    transition: transform .18s ease, color .18s ease;
}

.mega-sub-toggle:hover i,
.mega-sub-toggle[aria-expanded="true"] i { color: var(--blue); }

.mega-sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.mega-item--has-sub > a {
    flex: 1 1 auto;
    gap: 0;
    min-width: 0;
}

.mega-sublist {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    min-width: 260px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.mega-sublist:not(.is-open) { display: none; }

.mega-sublist a {
    display: block;
    padding: 9px 20px;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
}

.mega-sublist a:hover { color: var(--blue); }

/* Against the right-hand edge the panel would run off the screen, so the last
   column opens its dropdown to the left of the item instead. */
.mega-col:last-child .mega-sublist { left: auto; right: 0; }

/* =========================
   Hero
========================= */
.page-hero {
    position: relative;
    min-height: 370px;
    display: flex;
    align-items: flex-start;
    background: #000 url("../images/banners/hero-boardroom.png") right center / cover no-repeat;
    border-bottom: 4px solid var(--blue);
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #000000 0%,
        #000000 33%,
        rgba(0, 0, 0, .88) 44%,
        rgba(0, 0, 0, .45) 60%,
        rgba(0, 0, 0, .05) 76%,
        rgba(0, 0, 0, 0) 88%);
}

.page-hero .shell { position: relative; z-index: 2; padding-top: 45px; padding-bottom: 62px; }

.breadcrumb-line {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin: 0 0 30px;
}

.breadcrumb-line a { color: var(--blue-light); }
.breadcrumb-line a:hover { color: var(--white); }

.hero-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--white);
    margin: 0 0 24px;
    max-width: 780px;
    text-wrap: pretty;
}

.hero-sub {
    font-size: 17px;
    line-height: 1.5;
    color: #dcdcdc;
    margin: 0 0 30px;
    max-width: 920px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 215px;
    padding: 18px 28px;
    background: var(--white);
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease;
}

.hero-cta:hover { background: var(--blue); color: var(--white); }

/* =========================
   Overview / editorial section
========================= */
.section-overview { padding: 78px 0 56px; }
.section-overview .section-title { margin-top: 46px; }
.section-overview .section-title:first-child { margin-top: 0; }
.section-overview .lead-note { font-size: 16px; color: var(--text-color); margin: 0 0 4px; }

/* =========================
   Related capabilities
========================= */
.section-capabilities {
    background: var(--navy);
    padding: 40px 0 39px;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 37px;
}

.capability-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 81px;
    padding: 14px 20px 14px 22px;
    background: var(--white);
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.35;
    transition: background .18s ease, color .18s ease;
}

.capability-card i { font-size: 17px; color: var(--blue); transition: color .18s ease; }
.capability-card:hover { background: var(--blue); color: var(--white); }
.capability-card:hover i { color: var(--white); }

/* =========================
   Section head (title + view all)
========================= */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.section-head .section-title { margin: 0; }

/* =========================
   Latest blog
========================= */
.section-blog { padding: 56px 0 0; }

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
}

.blog-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 301px;
    padding: 28px 30px;
    background-color: var(--navy);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 35, 105, .78);
    transition: background .22s ease;
}

.blog-card:hover::before { background: rgba(0, 35, 105, .88); }

.blog-card h3 {
    position: relative;
    z-index: 2;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.42;
    color: var(--white);
    margin: 0;
    text-wrap: pretty;
}

.blog-card--a { background-image: url("../images/content/blog-a.png"); }
.blog-card--b { background-image: url("../images/content/blog-b.png"); }

/* =========================
   Latest news (edge-bleed scroller)
========================= */
.section-news { padding: 78px 0 0; }

.bleed-right {
    max-width: none;
    padding-left: calc((100% - var(--container-width)) / 2 + 20px);
    padding-right: 0;
}

.news-scroller {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.news-card {
    flex: 0 0 324px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    padding: 12px;
    background: var(--white);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.news-card:hover { border-color: var(--blue); }

/* The whole card is the click target.

   .news-card__link::after is stretched over the card, so a click anywhere in
   it follows that one anchor. The alternative - wrapping the card in an <a> -
   would nest a link inside a link, and would announce the image, heading and
   excerpt as a single link. This keeps one link per card and leaves the
   heading a heading.

   The trade-off is that the excerpt can no longer be selected with the mouse,
   which is the accepted cost of a clickable card. */
.news-card { position: relative; }

.news-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The link has to look active when the pointer is anywhere on the card, not
   only on the words - otherwise the card highlights while its only link
   appears inert. */
.news-card:hover .news-card__link { color: var(--blue); }

/* Keyboard parity: the link still takes focus, but the ring would be drawn
   around two words in the corner rather than the thing being activated. */
.news-card:focus-within { border-color: var(--blue); }
.news-card:focus-within .news-card__link { color: var(--blue); }

.news-card__media { height: 213px; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }

.news-card__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.38;
    color: var(--ink);
    margin: 20px 0 0;
    min-height: 42px;
}

.news-card__excerpt {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 22px 0 14px;
}

.news-card__link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--navy);
    text-decoration: underline;
    margin-top: auto;
}

.news-card__link:hover { color: var(--blue); }

/* =========================
   Insights
========================= */
.section-insights { padding: 74px 0 0; }

.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 33px;
}

.insight-card {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 191px;
    padding: 20px 22px;
    background: var(--navy-deep) url("../images/content/insight-pattern.png") left center / cover no-repeat;
    transition: filter .2s ease;
}

.insight-card:hover { filter: brightness(1.18); }

.insight-card h3 {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
    text-align: right;
    margin: 0;
}

/* =========================
   Key contacts
========================= */
.section-contacts {
    background: var(--grey-band);
    padding: 49px 0 40px;
    margin-top: 76px;
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 370px);
    justify-content: center;
    gap: 10px;
    margin: 41px 0 32px;
}

.contact-card { background: var(--navy); text-align: center; }

.contact-card__media { height: 389px; overflow: hidden; }
.contact-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact-card__body { padding: 20px 16px 24px; }

.contact-card__name {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 6px;
}

.contact-card__role {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #c9d2e4;
    margin: 0;
}

/* =========================
   SEO copy block
========================= */
.section-seo { padding: 49px 0 42px; text-align: center; }

.section-seo__inner { text-align: left; }

.section-seo h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 22px;
}

.section-seo p {
    font-size: 13px;
    line-height: 1.72;
    color: var(--text-faint);
    text-align: justify;
    margin: 0 0 18px;
}

.section-seo .btn-line { margin-top: 24px; }

/* =========================
   Connect band
========================= */
.section-connect {
    background: var(--blue);
    padding: 46px 0 44px;
    text-align: center;
}

.section-connect p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--white);
    margin: 22px 0 30px;
}

/* =========================
   FAQs
========================= */
.section-faq { padding: 88px 0 80px; text-align: center; }

.faq-shell {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.faq-list { margin: 34px 0 0; }

.faq-item {
    border: 1px solid var(--border-faq);
    background: var(--white);
    margin-bottom: 19px;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 0;
    background: none;
    padding: 22px 40px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
}

.faq-question:hover { color: var(--blue); }

.faq-question i { font-size: 14px; color: var(--blue); }

.faq-answer {
    display: none;
    padding: 0 40px 24px;
}

.faq-item.is-open .faq-answer { display: block; }

.faq-answer p {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-muted);
    margin: 0;
}

.faq-actions { text-align: center; }

.section-faq > .btn-line,
.section-faq .faq-more { margin-top: 46px; }

/* =========================
   Footer
========================= */
.site-footer { background: var(--navy); color: var(--white); }

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 0 34px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 34px;
    row-gap: 14px;
    max-width: 780px;
}

.footer-links a {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--white);
}

.footer-links a:hover { color: #9ecbf3; }

.footer-social { display: flex; align-items: center; gap: 14px; }

.footer-social span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-right: 4px;
}

.footer-social a { color: var(--white); font-size: 15px; }
.footer-social a:hover { color: #9ecbf3; }

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, .32);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0 24px;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.footer-bottom p { margin: 0; }

.footer-bottom a { color: rgba(255, 255, 255, .82); }
.footer-bottom a:hover { color: var(--white); }

.footer-legal { display: flex; gap: 34px; }

/* =========================
   Mobile menu (off-canvas, full screen)
========================= */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--white);
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    visibility: hidden;
}

.mobile-menu.is-open { transform: translateX(0); visibility: visible; }

/* =========================
   Desktop sidebar

   The old header's offcanvas: navy, slid in from the right, the secondary
   links centred in white capitals. Elementor had it on Slide at 0.5s, so that
   is the duration here. The phone panel keeps its own .3s, which is the right
   speed for something that takes the whole screen.

   Hidden below 992px in one place — the panel element itself — so there is no
   width at which both this and the mobile panel can be open.
========================= */
.fm-sidebar,
.fm-sidebar-backdrop { display: none; }

@media (min-width: 992px) {

    .fm-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        width: min(450px, 92vw);
        padding: 14px 24px 48px;
        background: var(--navy);
        transform: translateX(100%);
        transition: transform .5s ease, visibility .5s ease;
        visibility: hidden;
        overflow-y: auto;
        box-shadow: -18px 0 48px rgba(0, 0, 0, .18);
    }

    .fm-sidebar.is-open { transform: translateX(0); visibility: visible; }

    .fm-sidebar__close {
        align-self: flex-end;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: #ffffff;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
        transition: opacity .18s ease;
    }

    .fm-sidebar__close:hover { opacity: .7; }

    /* Under the close button, NOT centred in the panel's height. The
       reference leaves the lower half of the panel empty, and centring a short
       list in 900px of navy is a different design from the one approved. */
    .fm-sidebar__nav {
        flex: 0 0 auto;
        padding-top: 40px;
    }

    .fm-sidebar__nav ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    .fm-sidebar__nav li + li { margin-top: 39px; }

    .fm-sidebar__nav a {
        display: block;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .01em;
        text-transform: uppercase;
        text-decoration: none;
        transition: color .18s ease;
    }

    .fm-sidebar__nav a:hover { color: var(--blue); }

    .fm-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1099;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease, visibility .5s ease;
    }

    body.sidebar-open .fm-sidebar-backdrop { opacity: 1; visibility: visible; }
}

.mobile-menu__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
}

.mobile-menu__head img { width: 86px; }

.mobile-close {
    width: 42px;
    height: 36px;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.mobile-close:hover { background: var(--navy); color: var(--white); }

.mobile-menu__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 42px 20px 60px;
}

.m-nav-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 22px;
}

.m-nav-title--link { display: block; color: #111111; margin: 34px 0 22px; }

.m-group { margin-bottom: 6px; }

.m-group__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    background: none;
    padding: 0;
    margin-bottom: 12px;
    cursor: pointer;
}

.m-group__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #111111;
}

/* .m-group__label--lg and .m-group--resources were the "Resources" heading
   and the space above its group. The resources are top-level items now, in
   the same style as People and About FMA, so neither rule has any markup
   left to style. */

.m-pill {
    flex: 0 0 40px;
    width: 40px;
    height: 26px;
    border: 1px solid #bcbcbc;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #111111;
    transition: transform .2s ease;
}

.m-group__head[aria-expanded="false"] .m-pill { transform: rotate(180deg); }

.m-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0 0 0 20px;
    display: none;
}

.m-group.is-open > .m-list { display: block; }

.m-list > li > a,
.m-sub-head > a {
    display: block;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
}

.m-list > li > a:hover { color: var(--blue); }

.m-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.m-sub-toggle {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 6px 8px;
    font-size: 13px;
    color: #111111;
    cursor: pointer;
    transition: transform .2s ease;
}

.m-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.m-sublist {
    list-style: none;
    margin: 2px 0 8px;
    padding: 0 0 0 20px;
    display: none;
}

.m-sublist.is-open { display: block; }

.m-sublist a {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
}

.m-sublist a:hover { color: var(--blue); }

/* =========================
   Responsive
========================= */
@media (max-width: 1439px) {
    .mega-inner { padding: 34px 48px 46px; }
}

@media (max-width: 1279px) {
    .header-inner { padding: 0 40px; }
    .header-right { gap: 44px; }
    .desktop-navigation > ul { gap: 38px; }
}

@media (max-width: 1199px) {
    .contact-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-card__media { height: 340px; }
    .shell-wide { padding: 0 32px; }
}

@media (max-width: 991px) {
    :root { --header-height: 72px; }
    .header-inner { padding: 0 24px; }
    .desktop-navigation { display: none; }
    .header-right { gap: 0; }
    .site-logo img { width: 110px; }

    .page-hero { min-height: 320px; }
    .page-hero::before {
        background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 48%, rgba(0, 0, 0, .55) 74%, rgba(0, 0, 0, .25) 100%);
    }
    .hero-title { font-size: 36px; }

    .capability-grid { grid-template-columns: 1fr 1fr; }
    .insight-grid { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr 1fr; }
    .contact-grid .contact-card:last-child { grid-column: 1 / -1; max-width: 370px; margin: 0 auto; }
    .section-contacts { margin-top: 56px; }
    .faq-question { padding: 20px 24px; }
    .faq-answer { padding: 0 24px 22px; }
}

@media (max-width: 767px) {
    .section-overview { padding: 48px 0 40px; }
    .hero-title { font-size: 30px; }
    .hero-sub { font-size: 15px; }
    .hero-cta { min-width: 190px; padding: 15px 22px; font-size: 14px; }

    .band-title { font-size: 22px; }
    .section-title { font-size: 18px; }

    .capability-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
    .blog-card { min-height: 220px; padding: 22px; }
    .blog-card h3 { font-size: 18px; }

    .section-blog,
    .section-news,
    .section-insights { padding-top: 48px; }

    .section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }

    .insight-grid { grid-template-columns: 1fr; gap: 16px; }
    .insight-card { justify-content: flex-start; }
    .insight-card h3 { text-align: left; }

    .contact-grid { grid-template-columns: 1fr; gap: 16px; }
    .contact-grid .contact-card:last-child { grid-column: auto; }
    .contact-card__media { height: 360px; }

    .section-seo p { text-align: left; }
    .section-faq { padding: 56px 0 56px; }
    .faq-question { font-size: 13.5px; padding: 18px 18px; }
    .faq-answer { padding: 0 18px 18px; }

    .footer-top { flex-direction: column; gap: 26px; }
    .footer-links { column-gap: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer-legal { gap: 24px; }
}

@media (max-width: 575px) {
    .shell { padding: 0 18px; }
    .shell-wide { padding: 0 18px; }
    .bleed-right { padding-left: 18px; }
    .news-card { flex: 0 0 280px; }
    .hero-title { font-size: 26px; }
    .page-hero .shell { padding-top: 34px; padding-bottom: 44px; }
    .breadcrumb-line { margin-bottom: 22px; }
}

/* Print ------------------------------------------------------- */
@media print {
    .site-header, .mobile-menu, .mega-menu { display: none !important; }
}

/* =========================
   Mobile menu corrections
   -------------------------
   MEASURED on an iPhone-width viewport (390x844), not estimated.
========================= */
@media (max-width: 991px) {

    /* THE SIDE-SCROLL.
       .desktop-navigation is hidden below 992px, but .mega-menu is its
       SIBLING, not its child, so it was never hidden with it. It stays in the
       layout, absolutely positioned, with a .mega-inner laid out for a wide
       screen: measured 618px of content inside a 390px viewport, which set
       the document's scrollWidth to 618 and let every page drag sideways.
       opacity:0 and visibility:hidden do not take an element out of the
       layout - only display does. The mobile panel replaces this menu on
       small screens, so there is nothing to lose by removing it outright. */
    .mega-menu { display: none; }

    /* TAP TARGETS.
       Everything below was under the 44x44 minimum: the hamburger itself was
       28x20, the close button 42x36, the accordion headings 26px tall and the
       sub-toggle 24x32. On a phone that is a menu you have to aim at.

       The hamburger and the close button are enlarged with a pseudo-element
       rather than with padding, so the hit area grows while the bars and the
       icon stay exactly where the design puts them - a wider button would
       move the logo. */
    .menu-toggle,
    .mobile-close { position: relative; }

    .menu-toggle::before,
    .mobile-close::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* The rows have room to grow, so they grow: a taller row is easier to hit
       AND easier to read. min-height rather than padding alone, so a label
       that wraps to two lines is not pushed out of its own row. */
    .m-group__head,
    .m-nav-title--link {
        min-height: 44px;
        align-items: center;
    }

    .m-list > li > a,
    .m-sub-head > a {
        min-height: 44px;
        padding: 11px 0;
        display: flex;
        align-items: center;
    }

    /* .m-sub-head is a flex row - label on the left, expand toggle on the
       right - so the label shrinks to its text unless told otherwise. Measured
       21px wide for "Tax": tall enough to hit and far too narrow to aim at.
       Filling the row makes the whole line tappable and leaves the toggle at
       its own size. */
    .m-sub-head > a { flex: 1 1 auto; }

    .m-sublist a {
        min-height: 44px;
        padding: 10px 0;
        display: flex;
        align-items: center;
    }

    .m-sub-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}