.elementor-2746 .elementor-element.elementor-element-c47d1c6{--display:flex;}.elementor-2746 .elementor-element.elementor-element-5d7ce58{--display:flex;}.elementor-2746 .elementor-element.elementor-element-07e24d0{--display:flex;}.elementor-2746 .elementor-element.elementor-element-e7f289d{--display:flex;}.elementor-2746 .elementor-element.elementor-element-6bffe5a{--display:flex;}.elementor-2746 .elementor-element.elementor-element-8e540db{--display:flex;}.elementor-2746 .elementor-element.elementor-element-fd0e3b7{--display:flex;}.elementor-2746 .elementor-element.elementor-element-456e6be{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2746 .elementor-element.elementor-element-6ef162d{--display:flex;}.elementor-2746 .elementor-element.elementor-element-e72282d{--display:flex;}.elementor-2746 .elementor-element.elementor-element-49bf4f0{--display:flex;}.elementor-2746 .elementor-element.elementor-element-1e58ac2{--display:flex;}.elementor-2746 .elementor-element.elementor-element-53dcd32{--display:flex;}.elementor-2746 .elementor-element.elementor-element-d0f8d16{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* ==================================================================
   FGMA HEADER V1 - CENTRALIZED COMPONENT STYLESHEET
   Gate 2: static closed-state shell and responsive base only.
   Single source of truth: this document-level Custom CSS field on
   Header template post 2746. No other CSS location is used.

   SPECIFICITY NOTE: Elementor's own container layout rules use two-class
   .elementor-2746s (0,2,0). Component rules are therefore scoped as
   .fgma-header-v1 .fgma-header-* so they reach the same weight and win
   on source order. Only owned classes appear in every .elementor-2746.
   ================================================================== */

/* ---- 1. COMPONENT VARIABLES (component root only, never :root) ---- */
.fgma-header-v1 {
    /* Geometry - values taken from the original stylesheet */
    --fgma-header-height: 70px;
    --fgma-header-page-padding: clamp(1.8125rem, 0.5381rem + 4.7418vw, 8.125rem);
    --fgma-header-max-width: 2560px;
    --fgma-header-nav-gap: clamp(0.25rem, 0.1518rem + 0.4911vw, 0.9375rem);
    --fgma-header-nav-item-padding: 10px;
    --fgma-header-mobile-action-gap: clamp(1.625rem, 1.3393rem + 1.4286vw, 3.625rem);
    --fgma-header-logo-width: 80px;
    --fgma-header-logo-height: 34.4px;
    --fgma-header-icon-size: 32px;
    --fgma-header-burger-box: 32px;
    --fgma-header-burger-line-width: 30px;
    --fgma-header-burger-line-height: 2px;
    --fgma-header-burger-line-gap: 8px;

    /* Accessibility target sizing */
    --fgma-header-target-min: 44px;
    --fgma-header-target-inset: calc((var(--fgma-header-target-min) - var(--fgma-header-icon-size)) / 2);

    /* Typography scale - original fluid steps */
    --fgma-header-nav-font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.25rem);
    --fgma-header-body-font-size: clamp(1.125rem, 1.0625rem + 0.3125vw, 1.5625rem);
    --fgma-header-mobile-title-font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.25rem);

    /* Motion */
    --fgma-header-transition-duration: 0.7s;

    /* Layers - original z-index values */
    --fgma-header-z-overlay: 100;
    --fgma-header-z-bar: 101;
    --fgma-header-z-panel: 104;
}

@media (min-width: 600px) {
    .fgma-header-v1 { --fgma-header-height: 80px; }
}

@media (min-width: 900px) {
    .fgma-header-v1 { --fgma-header-height: 85px; }
}
/* ---- 2. CLOSED STATE --------------------------------------------- */
/* Authorized documented exception: Elementor's own container display
   rule overrides the browser's native [hidden] behaviour, so the closed
   state has to be asserted. This is the single overridden declaration
   in the component; no other rule uses that keyword. */
.fgma-header-v1 [hidden] {
    display: none !important;
}

/* ---- 3. ROOT SHELL ------------------------------------------------ */
.fgma-header-v1.fgma-header-v1 {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    gap: 0;
    z-index: var(--fgma-header-z-bar);
}

/* ---- 4. HEADER BAR ------------------------------------------------ */
.fgma-header-v1 .fgma-header-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: var(--fgma-header-height);
    margin: 0;
    padding: 0;
    gap: 0;
    background-color: var(--fgma-white);
}

@media (min-width: 600px) {
    .fgma-header-v1 .fgma-header-bar { background-color: transparent; }
}

/* ---- 5. HEADER INNER ---------------------------------------------- */
/* Mirrors the original .base-container declaration exactly:
   margin: 0 auto; max-width: 2560px; padding: 0 var(--space-pp-lg-sm); width: 100%; */
.fgma-header-v1 .fgma-header-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: var(--fgma-header-max-width);
    height: 100%;
    margin-block: 0;
    margin-inline: auto;
    padding-block: 0;
    padding-inline: var(--fgma-header-page-padding);
    gap: 0;
}

/* Elementor wraps every widget in a generic block element. The reset
   below neutralises those wrappers using the owned parent class and a
   structural child .elementor-2746; the owned layout regions are excluded so
   their own rules stay authoritative. No Elementor class is named. */
.fgma-header-v1 .fgma-header-inner > *:not(.fgma-header-desktop-nav):not(.fgma-header-mobile-actions),
.fgma-header-v1 .fgma-header-desktop-nav > *,
.fgma-header-v1 .fgma-header-mobile-actions > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
/* ---- 6. LOGO ------------------------------------------------------ */
.fgma-header-v1 .fgma-header-logo {
    display: inline-flex;
    align-items: center;
    min-width: var(--fgma-header-target-min);
    min-height: var(--fgma-header-target-min);
    color: var(--fgma-brand-red);
    text-decoration: none;
}

.fgma-header-v1 .fgma-header-logo svg {
    display: block;
    width: var(--fgma-header-logo-width);
    height: var(--fgma-header-logo-height);
}

/* ---- 7. LOCAL 960px RESPONSIVE SWITCH ----------------------------- */
.fgma-header-v1 .fgma-header-desktop-nav {
    display: none;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0;
}

.fgma-header-v1 .fgma-header-mobile-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
    margin-block: 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
    padding: 0;
    /* Exact original spacing: the search icon carries mr-lg in the
       original, i.e. var(--space-lg) between the two 32px icon boxes. */
    gap: var(--fgma-header-mobile-action-gap);
}

@media (min-width: 960px) {
    .fgma-header-v1 .fgma-header-desktop-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        width: auto;
        flex: 0 0 auto;
        margin-inline-start: auto;
        gap: var(--fgma-header-nav-gap);
    }

    .fgma-header-v1 .fgma-header-mobile-actions {
        display: none;
    }
}
/* ---- 8. DESKTOP TOP-LEVEL NAVIGATION ITEMS ------------------------ */
.fgma-header-v1 .fgma-header-desktop-nav .fgma-header-trigger:not(.fgma-header-search-trigger),
.fgma-header-v1 .fgma-header-desktop-nav .fgma-header-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--fgma-header-target-min);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--fgma-header-nav-item-padding);
    border: 0;
    background-color: transparent;
    color: var(--fgma-black);
    font-family: var(--e-global-typography-af54cc2-font-family), sans-serif;
    font-weight: var(--e-global-typography-af54cc2-font-weight);
    font-size: var(--fgma-header-nav-font-size);
    line-height: 1;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* ---- 9. ICON BUTTONS ---------------------------------------------- */
/* The layout box reproduces the original 32 x 32 icon box exactly, so
   Header geometry is not displaced. The interactive target is enlarged
   to 44 x 44 by a transparent overlay on the button itself, which is
   how the 32px visual size and the 44px minimum target are satisfied
   at the same time. The overlay is decorative and carries no label. */
.fgma-header-v1 .fgma-header-search-trigger,
.fgma-header-v1 .fgma-header-menu-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fgma-header-icon-size);
    height: var(--fgma-header-icon-size);
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--fgma-black);
    cursor: pointer;
}

.fgma-header-v1 .fgma-header-search-trigger::before,
.fgma-header-v1 .fgma-header-menu-trigger::before {
    content: "";
    position: absolute;
    /* 32px box + 6px on every side = a 44 x 44 pointer target. */
    inset: calc(-1 * var(--fgma-header-target-inset));
}

.fgma-header-v1 .fgma-header-search-trigger svg {
    display: block;
    width: var(--fgma-header-icon-size);
    height: var(--fgma-header-icon-size);
}

/* ---- 10. BURGER NORMAL STATE -------------------------------------- */
/* Reproduces the original .burger geometry declaration for declaration. */
.fgma-header-v1 .fgma-header-burger-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--fgma-header-burger-line-width);
    height: var(--fgma-header-burger-box);
    margin: 0 auto;
}

.fgma-header-v1 .fgma-header-burger-line {
    position: absolute;
    display: block;
    width: 100%;
    height: var(--fgma-header-burger-line-height);
    background-color: currentColor;
}

.fgma-header-v1 .fgma-header-burger-line:first-of-type {
    top: calc(50% + var(--fgma-header-burger-line-gap) / 2);
}

.fgma-header-v1 .fgma-header-burger-line:last-of-type {
    top: calc(50% - var(--fgma-header-burger-line-gap) / 2);
}

/* ---- 11. SKIP LINK ------------------------------------------------- */
/* Screen-reader-only positioning only, so the link cannot disturb the
   closed Header layout. No visual or focus design in this gate; the
   visible focus presentation is owned by the accessibility gate. */
.fgma-header-v1 .fgma-header-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}


/* ==========================================================================
   GATE 3B - STATIC DESKTOP FIRM AND EXPERTISE PANELS
   Exact original declarations reproduced (read from the live stylesheet):
     .base-container      max-width: 2560px; padding: 0 var(--space-pp-lg-sm)
     .top-header-height   top: var(--header-height)
     .z-nav-panel-open    z-index: 104
     .gap-xl              gap: var(--space-xl)
     .nav-p-xl  @960      padding: var(--space-xl)
     nav-grid-cols        grid-template-columns: auto .5fr 1fr 1fr   @960
     .aspect-3-4          aspect-ratio: 3/4
     .object-cover        object-fit: cover
     .paragraph           font-family: original book utility
     .paragraph-bold      font-family: original medium utility
     .paragraph(-bold)    font-size: var(--step-1); line-height: 1.35
     .gap-sm / .mt-sm     var(--space-sm)
     overlay @960         black at 40 percent
   ========================================================================== */

.fgma-header-v1 {
  --fgma-header-panel-gutter: clamp(2.125rem, 1.6518rem + 2.3661vw, 5.4375rem);
  --fgma-header-panel-link-gap: clamp(0.8125rem, 0.6696rem + 0.7143vw, 1.8125rem);
  --fgma-header-panel-line-height: 1.35;
  --fgma-header-panel-overview-gap: 13px;
  --fgma-header-panel-media-width: 25vw;
}

/* Panel scroll region */
.fgma-header-v1 .fgma-header-panel {
  position: fixed;
  top: var(--fgma-header-height);
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--fgma-header-page-padding);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
  z-index: var(--fgma-header-z-panel);
}

/* Full-viewport dimmer, still semantically closed */
.fgma-header-v1 .fgma-header-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: color-mix(in srgb, var(--fgma-black) 40%, transparent);
  z-index: var(--fgma-header-z-overlay);
}

/* Card: mirrors .base-container centring, white surface added at 960 */
.fgma-header-v1 .fgma-header-panel-card {
  display: block;
  width: 100%;
  max-width: calc(var(--fgma-header-max-width) - (2 * var(--fgma-header-page-padding)));
  height: auto;
  margin-block: 0;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

.fgma-header-v1 .fgma-header-panel-content {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Typography: unconditional, exactly as the original .paragraph rules */
.fgma-header-v1 .fgma-header-panel-group-title {
  margin: 0;
  padding: 0;
  font-family: var(--e-global-typography-af54cc2-font-family), sans-serif;
  font-weight: var(--e-global-typography-af54cc2-font-weight);
  font-size: var(--fgma-header-body-font-size);
  line-height: var(--fgma-header-panel-line-height);
  letter-spacing: normal;
  color: var(--fgma-black);
}

.fgma-header-v1 .fgma-header-panel-link {
  font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
  font-weight: var(--e-global-typography-8c6eee8-font-weight);
  font-size: var(--fgma-header-body-font-size);
  line-height: var(--fgma-header-panel-line-height);
  letter-spacing: normal;
  color: var(--fgma-black);
  text-decoration: none;
}

.fgma-header-v1 .fgma-header-panel-group ul {
  display: grid;
  gap: var(--fgma-header-panel-link-gap);
  margin: var(--fgma-header-panel-link-gap) 0 0;
  padding: 0;
  list-style: none;
}

.fgma-header-v1 .fgma-header-panel-group li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Expertise Overview row */
.fgma-header-v1 .fgma-header-panel-overview {
  display: flex;
  align-items: center;
  gap: var(--fgma-header-panel-overview-gap);
  margin-block-end: var(--fgma-header-panel-gutter);
  text-transform: capitalize;
}

.fgma-header-v1 .fgma-header-panel-overview svg {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 21px;
  color: var(--fgma-brand-red);
}

/* Panel media is absent below the 960 desktop switch, as in the original */
.fgma-header-v1 .fgma-header-panel-media {
  display: none;
}

.fgma-header-v1 .fgma-header-panel-grid {
  display: grid;
  gap: var(--fgma-header-panel-gutter);
  align-items: start;
  margin: 0;
  padding: 0;
}

/* ---- 14. SEARCH PANEL (static structure, layout, typography) ----- */
/* Source of truth: the live FGMA Search panel. Original declarations
   and the local carrier for each one:
     panel top        top: var(--header-height), then 0 from nav (960)
     panel surface    white, then transparent from nav (960)
     panel layer      z-index: 104  (.z-nav-panel-open)
     outer offset     margin-block: var(--space-2xl)  (.my-2xl)
     page gutter      padding-inline: var(--space-pp-lg-sm)
     card surface     background-color: white from nav (960)
     card padding     padding: var(--space-xl) from nav (960)
     content offset   padding-top: var(--space-2xl), 0 from lg (900)
     title            original Medium face, var(--step-5), 1.1
     back control     original Book face, var(--step-1), 1.5,
                      grey, margin-bottom: var(--space-sm),
                      display: none below md (600)
     input row        display: flex, align-items: center,
                      margin-top: var(--space-15p), then var(--space-xl)
                      and width: 50% from lg (900)
     input            width: 100%, 1px light grey lower border,
                      padding-bottom: var(--space-2xs),
                      margin-right: 10px
     arrow            26 x 21 SVG, stroke currentColor, black
   The original renders no label and no submit button; Header V1 keeps
   the real label and the real button and hides the label visually, so
   the rendered result stays identical. */

.fgma-header-v1 {
  --fgma-header-search-outer-gap: clamp(3.1875rem, 2.6071rem + 2.9018vw, 7.25rem);
  --fgma-header-search-title-font-size: clamp(1.802rem, 1.5145rem + 1.4376vw, 3.8147rem);
  --fgma-header-search-title-line-height: 1.1;
  --fgma-header-search-line-height: 1.5;
  --fgma-header-search-field-padding: clamp(0.25rem, 0.1518rem + 0.4911vw, 0.9375rem);
  --fgma-header-search-control-gap: 10px;
  --fgma-header-search-row-offset: clamp(3.5625rem, -0.6391rem + 15.6338vw, 24.375rem);
  --fgma-header-search-arrow-width: 26px;
  --fgma-header-search-arrow-height: 21px;
}

/* Panel surface. Fixed position, edge insets, scroll axes and layer
   already come from the shared .fgma-header-panel rule with exactly
   these values, so only the Search-specific declarations appear. */
.fgma-header-v1 .fgma-header-search-panel {
  width: 100%;
  padding-block: var(--fgma-header-search-outer-gap);
  background-color: var(--fgma-white);
  color: var(--fgma-black);
}

/* The single Search content widget carries the original card box. */
.fgma-header-v1 .fgma-header-search-card {
  width: 100%;
  max-width: calc(var(--fgma-header-max-width) - (2 * var(--fgma-header-page-padding)));
  margin-block: 0;
  margin-inline: auto;
  padding-block-start: var(--fgma-header-search-outer-gap);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

/* Scoped to Search: the mobile Firm and Expertise panels use the same
   two class names and are not part of this gate. */
.fgma-header-v1 .fgma-header-search-panel .fgma-header-panel-title {
  margin: 0;
  padding: 0;
  font-family: var(--e-global-typography-af54cc2-font-family), sans-serif;
  font-weight: var(--e-global-typography-af54cc2-font-weight);
  font-size: var(--fgma-header-search-title-font-size);
  line-height: var(--fgma-header-search-title-line-height);
  letter-spacing: normal;
  color: var(--fgma-black);
}

.fgma-header-v1 .fgma-header-search-form {
  display: flex;
  align-items: center;
  width: 100%;
  margin-block-start: var(--fgma-header-search-row-offset);
  padding: 0;
}

/* Real label, kept associated with the input and taken out of the
   visual flow because the panel title already shows the same word. */
.fgma-header-v1 .fgma-header-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.fgma-header-v1 .fgma-header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin-block: 0;
  margin-inline: 0 var(--fgma-header-search-control-gap);
  padding-block: 0 var(--fgma-header-search-field-padding);
  padding-inline: 0;
  border: 0;
  border-block-end: 1px solid var(--fgma-light-gray);
  border-radius: 0;
  background-color: transparent;
  font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
  font-weight: var(--e-global-typography-8c6eee8-font-weight);
  font-size: var(--fgma-header-body-font-size);
  line-height: var(--fgma-header-search-line-height);
  letter-spacing: normal;
  color: var(--fgma-black);
  caret-color: var(--fgma-black);
  appearance: none;
  -webkit-appearance: none;
}

/* type=search is the correct semantic type; the platform decorations
   it brings are removed so the field matches the original field box. */
.fgma-header-v1 .fgma-header-search-input::-webkit-search-decoration,
.fgma-header-v1 .fgma-header-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

/* Gate 8B.1 Search focus. The original swaps the UA ring for a transparent
   outline and promotes the underline to 2px brand red. Keeping the outline
   transparent rather than none preserves an indicator under forced-colors,
   and this .elementor-2746 outranks the Hello Elementor reset focus border-color. */
.fgma-header-v1 .fgma-header-search-input:focus,
.fgma-header-v1 .fgma-header-search-input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-block-end: 2px solid var(--fgma-brand-red);
}

.fgma-header-v1 .fgma-header-search-submit {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--fgma-header-search-arrow-width);
  height: var(--fgma-header-search-arrow-height);
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--fgma-black);
  cursor: pointer;
}

/* 26 x 21 box plus a symmetrical bleed = a 44 x 44 pointer target,
   the technique the closed-state triggers already use. */
.fgma-header-v1 .fgma-header-search-submit::before {
  content: "";
  position: absolute;
  inset-block: calc((var(--fgma-header-target-min) - var(--fgma-header-search-arrow-height)) / -2);
  inset-inline: calc((var(--fgma-header-target-min) - var(--fgma-header-search-arrow-width)) / -2);
}

.fgma-header-v1 .fgma-header-search-submit svg {
  display: block;
  flex: 0 0 auto;
  width: var(--fgma-header-search-arrow-width);
  height: var(--fgma-header-search-arrow-height);
  color: inherit;
}

/* Dismiss control. The original hides this below 600 and keeps it on
   desktop. Header V1 inverts that so mobile Search can always be
   dismissed and the desktop Search trigger keeps that duty. */
.fgma-header-v1 .fgma-header-search-panel .fgma-header-back {
  position: relative;
  display: inline-block;
  margin-block: 0 var(--fgma-header-panel-link-gap);
  margin-inline: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
  font-weight: var(--e-global-typography-8c6eee8-font-weight);
  font-size: var(--fgma-header-body-font-size);
  line-height: var(--fgma-header-search-line-height);
  letter-spacing: normal;
  color: var(--fgma-gray);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Gate 8B.1: Back now leads the card, so its spacing sits after it in normal
   flow. The visible line box matches the original grey dismiss text while a
   transparent overlay centred on it holds the pointer target at 44 x 44, the
   same technique the mobile Back controls use. */
.fgma-header-v1 .fgma-header-search-panel .fgma-header-back::before {
  content: "";
  position: absolute;
  inset-block-start: calc((100% - var(--fgma-header-target-min)) / 2);
  inset-inline-start: 0;
  width: 100%;
  min-width: var(--fgma-header-target-min);
  height: var(--fgma-header-target-min);
}


@media (min-width: 900px) {
  /* Original lg step: content padding cleared, input row offset moves
     to var(--space-xl) and the row takes half the content width. */
  .fgma-header-v1 .fgma-header-search-card {
    padding-block-start: 0;
  }

  .fgma-header-v1 .fgma-header-search-form {
    width: 50%;
    margin-block-start: var(--fgma-header-panel-gutter);
  }
}

@media (min-width: 960px) {

  .fgma-header-v1 .fgma-header-panel-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--fgma-header-panel-gutter);
    padding: var(--fgma-header-panel-gutter);
    background-color: var(--fgma-white);
  }

  /* 25vw reproduces the original rendered image column at every desktop width
     without importing the original inaccurate srcset descriptors */
  .fgma-header-v1 .fgma-header-panel-media {
    display: block;
    width: var(--fgma-header-panel-media-width);
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .fgma-header-v1 .fgma-header-panel-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 0;
    vertical-align: top;
  }

  .fgma-header-v1 .fgma-header-panel-grid {
    grid-template-columns: 0.5fr 1fr 1fr;
  }

  /* The original leaves the 0.5fr track empty and starts the first group in
     the third combined column */
  .fgma-header-v1 .fgma-header-panel-grid > .fgma-header-panel-group:first-of-type {
    grid-column-start: 2;
  }
  /* ---- 13. EXPERTISE DESKTOP PANEL (Gate 3C correction) ----------- */
  /* The original live Expertise panel uses one four-track card grid,
     auto 0.5fr 1fr 1fr, with the Overview link on a second row that
     spans every track below the image and both groups. The two flexible
     tracks stay plain fr with no zero floor, so the browser's native
     min-content behaviour reproduces the original at narrow desktop
     widths. Elementor zeroes min-width on every widget placed inside a
     container, so the two group widgets restore the initial value and
     therefore size exactly like the original's plain group divs. Every
     .elementor-2746 below is Expertise-scoped; the Firm card keeps its own
     two-track layout and inner grid untouched. */
  .fgma-header-v1 .fgma-header-expertise-panel .fgma-header-panel-card {
    display: grid;
    grid-template-columns: auto 0.5fr 1fr 1fr;
    column-gap: var(--fgma-header-panel-gutter);
    row-gap: var(--fgma-header-panel-gutter);
    align-items: start;
  }

  .fgma-header-v1 .fgma-header-expertise-panel .fgma-header-panel-media {
    grid-column: 1;
    grid-row: 1;
  }

  .fgma-header-v1 .fgma-header-expertise-practice {
    grid-column: 3;
    grid-row: 1;
    min-width: auto;
  }

  .fgma-header-v1 .fgma-header-expertise-specialty {
    grid-column: 4;
    grid-row: 1;
    min-width: auto;
  }

  .fgma-header-v1 .fgma-header-expertise-overview {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
  }

  /* The shared overview rule carries a bottom gutter for the mobile
     submenu, where the link still sits above its groups. On desktop the
     grid row gap already supplies that separation, so the Expertise
     instance clears it and the card height stays content-driven and
     identical to the original. */
  .fgma-header-v1 .fgma-header-expertise-overview .fgma-header-panel-overview {
    width: 100%;
    margin-block-end: 0;
  }

  /* ---- 15. SEARCH PANEL AT 960 AND ABOVE ------------------------- */
  /* Original nav step: the panel starts at the viewport top, drops its
     own surface, and the card becomes the white padded box. */
  .fgma-header-v1 .fgma-header-search-panel {
    top: 0;
    height: auto;
    background-color: transparent;
  }

  .fgma-header-v1 .fgma-header-search-card {
    padding: var(--fgma-header-panel-gutter);
    background-color: var(--fgma-white);
  }
}


/* ---- 16. MOBILE MAIN PANEL + TOP-LEVEL NAVIGATION (Gate 4B.1A) ---- */
/* Static layout only. No interaction, no burger/open-state work.      */
/* Applies only below the 960px desktop switch. At 960+ the desktop    */
/* navigation is shown and this panel stays closed via [hidden].       */
@media (max-width: 959.98px) {

  /* Mobile overlay surface: the original dims to a white full-viewport
     sheet below the desktop switch (original .z-nav-panel-bg is
     bg-white here, black/40 only at 960+). */
  .fgma-header-v1 .fgma-header-overlay {
    background-color: var(--fgma-white);
  }

  /* Mobile Main Panel: full-viewport white sheet that sits BEHIND the
     Header bar, exactly as the original (panel z 100 < bar z 101), so
     the logo and icons stay visible above it. Content is offset from
     the top by the original --space-25p rhythm. */
  .fgma-header-v1 .fgma-header-mobile-main {
    position: fixed;
    inset: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding-block: clamp(5.9375rem, -1.0651rem + 26.0563vw, 40.625rem) var(--fgma-header-page-padding);
    padding-inline: var(--fgma-header-page-padding);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--fgma-white);
    z-index: var(--fgma-header-z-overlay);
  }

  /* Top-level navigation rhythm: vertical stack, original --space-lg gap. */
  .fgma-header-v1 .fgma-header-mobile-main > * + * {
    margin-block-start: var(--fgma-header-mobile-action-gap);
  }

  /* Each top-level control fills the row: label left, arrow right,
     matching the original justify-between rows. The min-height gives an
     effective 44px target without inflating the type. */
  .fgma-header-v1 .fgma-header-mobile-main .fgma-header-trigger,
  .fgma-header-v1 .fgma-header-mobile-main .fgma-header-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fgma-header-mobile-action-gap);
    width: 100%;
    min-height: var(--fgma-header-target-min);
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--fgma-black);
    text-align: left;
    text-decoration: none;
    font-family: var(--e-global-typography-af54cc2-font-family), sans-serif;
    font-weight: var(--e-global-typography-af54cc2-font-weight);
    font-size: var(--fgma-header-search-title-font-size);
    line-height: var(--fgma-header-search-title-line-height);
    letter-spacing: normal;
    cursor: pointer;
  }

  /* Firm / Expertise arrow: exact original 26x21, right-aligned, never
     shrinking, inheriting the row colour (red comes from the SVG). */
  .fgma-header-v1 .fgma-header-mobile-main .fgma-header-trigger svg {
    flex: 0 0 auto;
    width: var(--fgma-header-search-arrow-width);
    height: var(--fgma-header-search-arrow-height);
    color: var(--fgma-brand-red);
  }
}
/* ---- 17. MOBILE OPEN-STATE CONTRACT (Gate 4B.1B, static only) ------ */
/* Static CSS contract for the future mobile-menu open state. */
/* No JavaScript, no open class saved; the future JS toggles */
/* aria-expanded on the burger and .fgma-header-is-open on the root. */
/* Original reference (below 960px): burger lines collapse to the */
/* vertical midpoint and rotate to a +/-45deg X; the Header bar */
/* background, brand-red logo and black controls are unchanged on open. */
@media (max-width: 959.98px) {
  .fgma-header-v1 .fgma-header-burger-line {
    transition: top 0.3s 0.2s, transform 0.3s;
  }
  .fgma-header-v1 .fgma-header-menu-trigger[aria-expanded="true"] .fgma-header-burger-line {
    top: 50%;
    transition: top 0.3s, transform 0.3s 0.2s;
  }
  .fgma-header-v1 .fgma-header-menu-trigger[aria-expanded="true"] .fgma-header-burger-line:first-of-type {
    transform: rotate(45deg);
  }
  .fgma-header-v1 .fgma-header-menu-trigger[aria-expanded="true"] .fgma-header-burger-line:last-of-type {
    transform: rotate(-45deg);
  }
  .fgma-header-v1.fgma-header-is-open .fgma-header-bar {
    color: var(--fgma-black);
  }
}
/* ---- 18. MOBILE FIRM SUBMENU (Gate 4B.2A, static only) ------------ */
/* Static layout only. No interaction and no JavaScript; the panel     */
/* stays closed via [hidden] in the saved document. Applies only below */
/* the 960px desktop switch, where the desktop Firm panel owns this    */
/* content instead. Mobile Expertise is a later gate and is untouched. */
/* Original reference, read from the live mobile Firm submenu at 390,  */
/* 599, 600, 768, 900 and 959 CSS pixels:                             */
/*   panel      fixed inset-0 with top: var(--header-height),          */
/*              overflow: auto, white surface, z-index: 104            */
/*              (.z-nav-panel-open, mobile bg-white, mobile           */
/*              top-header-height)                                     */
/*   content    .base-container my-2xl: max-width 2560px, centred,     */
/*              padding-inline var(--space-pp-lg-sm),                  */
/*              margin-block var(--space-2xl)                          */
/*   Back       original Book face, var(--step-1), 1.5, grey,          */
/*              no margin, no padding, no border                       */
/*   title      original Medium face, var(--step-5), 1.1,              */
/*              margin-top var(--space-sm), capitalize                 */
/*   groups     grid with gap var(--space-xl); from md (600) two       */
/*              equal tracks plus margin-top var(--space-10p)          */
/*   headings   original Medium face, and the lists with gap and       */
/*   and links  margin-top var(--space-sm), already come from the      */
/*              shared panel rules, so they are not restated           */
/* The original also draws a light-grey rule between the title and the */
/* groups below 600 (a hidden-from-600 hr with my-10p margins). No     */
/* such element exists in this template markup and this gate is        */
/* CSS-only, so that rule and its two var(--space-10p) margins are     */
/* reported rather than reproduced.                                    */

/* HOOK NOTE: the panel carries the owned CSS id                      */
/* fgma-header-mobile-firm-panel and the shared owned class            */
/* fgma-header-mobile-submenu. The id is the carrier here so that no   */
/* rule can reach the mobile Expertise panel, which shares that class  */
/* and is out of scope for this gate. No generated name is used.       */

.fgma-header-v1 {
  /* original --space-10p, the md group offset */
  --fgma-header-submenu-group-offset: clamp(2.375rem, -0.4261rem + 10.4225vw, 16.25rem);
}

@media (max-width: 959.98px) {

  /* Panel surface. Fixed position, edge insets, scroll axes and layer
     repeat the shared panel values so the mobile submenu reads as one
     self-contained box; only the white surface differs. */
  .fgma-header-v1 #fgma-header-mobile-firm-panel {
    position: fixed;
    top: var(--fgma-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--fgma-header-page-padding);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--fgma-white);
    color: var(--fgma-black);
    z-index: var(--fgma-header-z-panel);
  }

  /* The single content widget carries the original .base-container
     my-2xl box. Structural child of an owned class; no Elementor class
     is named. */
  .fgma-header-v1 #fgma-header-mobile-firm-panel > * {
    width: 100%;
    max-width: calc(var(--fgma-header-max-width) - (2 * var(--fgma-header-page-padding)));
    min-width: 0;
    margin-block: var(--fgma-header-search-outer-gap);
    margin-inline: auto;
    padding: 0;
  }

  /* Back control: the original grey dismiss text. */
  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-back {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
    font-weight: var(--e-global-typography-8c6eee8-font-weight);
    font-size: var(--fgma-header-body-font-size);
    line-height: var(--fgma-header-search-line-height);
    letter-spacing: normal;
    color: var(--fgma-dark-gray);
    text-align: left;
    cursor: pointer;
  }

  /* The visual text box stays exactly the original size; a transparent
     overlay centred on it raises the pointer target to 44 x 44, the
     technique the closed-state triggers and the Search submit use. */
  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-back::before {
    content: "";
    position: absolute;
    inset-block-start: calc((100% - var(--fgma-header-target-min)) / 2);
    inset-inline-start: 0;
    width: 100%;
    min-width: var(--fgma-header-target-min);
    height: var(--fgma-header-target-min);
  }

  /* Panel title. Scoped to mobile Firm; the Search title keeps its own
     rule and Expertise gets its own in a later gate. */
  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-panel-title {
    margin-block: var(--fgma-header-panel-link-gap) 0;
    margin-inline: 0;
    padding: 0;
    font-family: var(--e-global-typography-af54cc2-font-family), sans-serif;
    font-weight: var(--e-global-typography-af54cc2-font-weight);
    font-size: var(--fgma-header-search-title-font-size);
    line-height: var(--fgma-header-search-title-line-height);
    letter-spacing: normal;
    color: var(--fgma-black);
    text-transform: capitalize;
  }
}

/* Original md step: the two groups become equal tracks and the block
   takes the var(--space-10p) offset the mobile rule leaves at zero. */
@media (min-width: 600px) and (max-width: 959.98px) {

  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--fgma-header-submenu-group-offset);
  }
}

/* ---- 19. MOBILE FIRM SUB-600 DIVIDER (Gate 4B.2A.1, static) ------ */
/* Restores the original rule that separates the Firm title from the  */
/* About / Connect groups below the md step. The original hides it at  */
/* 600 and above, where the Gate 4B.2A two-column grid offset takes   */
/* over instead, so the two rules never both contribute spacing.      */

@media (max-width: 599.98px) {

  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-mobile-divider {
    display: block;
    width: 100%;
    height: 0;
    margin-block: var(--fgma-header-submenu-group-offset);
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-block-start: 1px solid var(--fgma-light-gray);
    background-color: transparent;
  }
}

/* From the md step up the rule leaves the flow entirely so the Gate  */
/* 4B.2A group offset remains the only title to groups distance.      */
@media (min-width: 600px) {

  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-mobile-divider {
    display: none;
  }
}

/* ---- 20. MOBILE EXPERTISE SUBMENU (Gate 4B.2B.1, static only) ---- */
/* The carrier is the panel CSS id #fgma-header-mobile-expertise-panel */
/* so no rule can reach the mobile Firm panel, which shares both the   */
/* .fgma-header-panel and .fgma-header-mobile-submenu classes. The     */
/* original keeps the Overview link inside the same grid as the two    */
/* groups and reorders it from the md step upward, which the markup    */
/* now mirrors. No Elementor generated name is used anywhere.          */

@media (max-width: 959.98px) {

  /* Panel surface. The same verified original values as the mobile
     Firm submenu; only the carrier id differs. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel {
    position: fixed;
    top: var(--fgma-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--fgma-header-page-padding);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--fgma-white);
    color: var(--fgma-black);
    z-index: var(--fgma-header-z-panel);
  }

  /* The single content widget carries the original .base-container
     my-2xl box. Structural child of the owned id. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel > * {
    width: 100%;
    max-width: calc(var(--fgma-header-max-width) - (2 * var(--fgma-header-page-padding)));
    min-width: 0;
    margin-block: var(--fgma-header-search-outer-gap);
    margin-inline: auto;
    padding: 0;
  }

  /* Back control: the original grey dismiss text. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-back {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
    font-weight: var(--e-global-typography-8c6eee8-font-weight);
    font-size: var(--fgma-header-body-font-size);
    line-height: var(--fgma-header-search-line-height);
    letter-spacing: normal;
    color: var(--fgma-dark-gray);
    text-align: left;
    cursor: pointer;
  }

  /* The visual text box stays exactly the original size; a transparent
     overlay centred on it raises the pointer target to 44 x 44, the
     technique already validated on the mobile Firm Back control. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-back::before {
    content: "";
    position: absolute;
    inset-block-start: calc((100% - var(--fgma-header-target-min)) / 2);
    inset-inline-start: 0;
    width: 100%;
    min-width: var(--fgma-header-target-min);
    height: var(--fgma-header-target-min);
  }

  /* Panel title. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-panel-title {
    margin-block: var(--fgma-header-panel-link-gap) 0;
    margin-inline: 0;
    padding: 0;
    font-family: var(--e-global-typography-af54cc2-font-family), sans-serif;
    font-weight: var(--e-global-typography-af54cc2-font-weight);
    font-size: var(--fgma-header-search-title-font-size);
    line-height: var(--fgma-header-search-title-line-height);
    letter-spacing: normal;
    color: var(--fgma-black);
    text-transform: capitalize;
  }

  /* The Overview link is now a grid item, so the original row gap is
     the only separation. The shared trailing margin the desktop panel
     needs is removed here so the gap is not applied twice. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-panel-overview {
    width: 100%;
    margin-block: 0;
    margin-inline: 0;
  }

  /* The original carries the paragraph utility on the list itself, so
     the li strut matches the link line box exactly. Setting it only on
     the anchor leaves the li inheriting the body default and makes
     every row about 1px taller. Same tokens as the shared link rule. */
  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-panel-group ul {
    font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
    font-weight: var(--e-global-typography-8c6eee8-font-weight);
    font-size: var(--fgma-header-body-font-size);
    line-height: var(--fgma-header-panel-line-height);
  }
}
/* Divider below the md step: the original 1px light-grey rule with    */
/* --space-10p on both sides, identical to the Firm treatment proved   */
/* in Gate 4B.2A.1 and re-verified on the original Expertise submenu.  */
@media (max-width: 599.98px) {

  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-mobile-divider {
    display: block;
    width: 100%;
    height: 0;
    margin-block: var(--fgma-header-submenu-group-offset);
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-block-start: 1px solid var(--fgma-light-gray);
    background-color: transparent;
  }
}

/* From the md step the original hides the rule and the grid offset    */
/* becomes the only title to grid distance.                            */
@media (min-width: 600px) {

  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-mobile-divider {
    display: none;
  }
}

/* Original md step: the two groups become equal tracks, the block
   takes the var(--space-10p) offset, and the Overview link is pushed
   past both groups by the original order value so it starts a new
   row in the first column. */
@media (min-width: 600px) and (max-width: 959.98px) {

  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--fgma-header-submenu-group-offset);
    /* The original grid leaves alignment at its initial value, so the
       shorter Specialty track stretches to the row height. The shared
       panel rule starts items instead, which changes only that box
       height, so it is restored here for the two-column rows. */
    align-items: normal;
  }

  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-panel-overview {
    order: 3;
  }
}

/* Original lg step: the Overview keeps its order but spans the whole  */
/* grid instead of a single track.                                     */
@media (min-width: 900px) and (max-width: 959.98px) {

  .fgma-header-v1 #fgma-header-mobile-expertise-panel .fgma-header-panel-overview {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------
   GATE 4B.2A.2 - MOBILE FIRM LIST TYPOGRAPHY FIDELITY
   The original carries its paragraph typography on the ul itself, so the
   li strut matches the link line box exactly. Firm previously carried it
   on the anchor only, leaving every li on the body default strut and each
   row about 1px taller. Declarations reused verbatim from the Gate 4B.2B.1
   Mobile Expertise list rule; Firm-scoped so Expertise stays isolated.
   ------------------------------------------------------------------ */
@media (max-width: 959.98px) {

  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-panel-group ul {
    font-family: var(--e-global-typography-8c6eee8-font-family), sans-serif;
    font-weight: var(--e-global-typography-8c6eee8-font-weight);
    font-size: var(--fgma-header-body-font-size);
    line-height: var(--fgma-header-panel-line-height);
  }
}

/* ------------------------------------------------------------------
   GATE 4B.2A.3 - MOBILE FIRM GRID ALIGNMENT FIDELITY
   The original Firm grid leaves alignment at its initial value, so the
   shorter Connect track stretches to the row height at two-column
   widths. The shared panel-grid rule starts items instead, which changes
   only that child box height. Restored here for the two-column band,
   Firm-scoped so the Expertise rule stays untouched.
   ------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 959.98px) {

  .fgma-header-v1 #fgma-header-mobile-firm-panel .fgma-header-panel-grid {
    align-items: normal;
  }
}

/* ------------------------------------------------------------------
   GATE 4B.3A - STACKING AND RESPONSIVE VISIBILITY CONTRACT
   The root already carries the bar layer token, but the root is itself
   a fixed positioned stacking context, so inside it the bar was an
   unpositioned-in-z terms child (z-index auto) while the overlay and
   Mobile Main carried a positive z-index. Positive z-index descendants
   always paint above z-index auto siblings, so the overlay covered the
   bar and intercepted its controls. The original keeps its bar at the
   bar token in the same context as the dimmer, so the token is applied
   to the bar itself here. Order becomes overlay < bar < panel.
   ------------------------------------------------------------------ */
.fgma-header-v1 .fgma-header-bar {
    position: relative;
    z-index: var(--fgma-header-z-bar);
}

/* The original mobile menu container carries the nav-breakpoint hidden
   utility, so every mobile-only region stops rendering at 960 and above
   regardless of its open state. Header V1 keeps those regions as root
   siblings, so the same guard is expressed once for the three of them.
   Below 960 nothing changes and the closed-state attribute rule is
   untouched. */
@media (min-width: 960px) {

  .fgma-header-v1 #fgma-header-mobile-main,
  .fgma-header-v1 #fgma-header-mobile-firm-panel,
  .fgma-header-v1 #fgma-header-mobile-expertise-panel {
    display: none;
  }
}


/* ==================================================================
   R3.3B1 - GLOBAL SHELL CONTRACT: HEADER HEIGHT TOKEN + STANDARD CLEARANCE

   ROLLBACK: delete everything from this marker to the R3.3B1 END
   marker. Nothing above this block was altered (baseline 46364 bytes).

   Breakpoints are reused verbatim from this stylesheet; none added:
     <= 599.98px  ->  70px  (mobile, base)
     >= 600px     ->  80px  (intermediate / tablet)
     >= 960px     ->  85px  (desktop)

   STANDARD is the default: the Elementor Single content-location
   wrapper reserves exactly the fixed Header height.

   OVERLAY is an explicit opt-out: a document whose INTENDED TOP-LEVEL
   layout container carries .fgma-shell-overlay starts at viewport top
   under the Header. The direct-child combinator guarantees a nested
   component can never trigger the opt-out.

   Scope for R3.3B1 is deliberately .elementor-location-single only.
   Archives, Pages, search results and the theme .site-main fallback
   are added later, during Global Header activation, after shell QA.
   ================================================================== */

:root {
  --fgma-header-height: 70px;
}

@media (min-width: 600px) {
  :root {
    --fgma-header-height: 80px;
  }
}

@media (min-width: 960px) {
  :root {
    --fgma-header-height: 85px;
  }
}

/* STANDARD - default clearance */
.elementor-location-single {
  padding-top: var(--fgma-header-height);
}

/* OVERLAY - explicit opt-out, top-level layout container only */
.elementor-location-single:has(> .fgma-shell-overlay) {
  padding-top: 0;
}

/* ========================= R3.3B1 END ========================= */

/* ==================================================================
   R3.3B2 - HEADER SCROLL STATE
   Presentation layer for the deployed R3.3B2 scroll-state JS in
   fgma-core/assets/js/fgma-header.js. That JS owns state only and
   toggles exactly two classes on the component root .fgma-header-v1:
     fgma-header-is-scrolled   scroll position past its top threshold
     fgma-header-is-hidden     last scroll delta was downward
   This block adds presentation for those two states and nothing else.
   Heights, breakpoints, z-index layers, navigation structure, the
   closed state and the R3.3B1 offset contract are all untouched.
   ================================================================== */

/* ---- B2.1 SCROLLED SURFACE ---------------------------------------
   Top-of-page presentation is deliberately unchanged: the bar is white
   below 600 and transparent from 600 up (section 4 above). The scrolled
   state restores the solid white surface, which is the Production
   behaviour. The two owned classes give this rule (0,3,0) so it
   outweighs the (0,2,0) transparent rule from 600 up. Below 600 the bar
   is already white, so the rule is a no-op there. */
.fgma-header-v1.fgma-header-is-scrolled .fgma-header-bar {
  background-color: var(--fgma-white);
}

/* ---- B2.2 HIDDEN SHELL -------------------------------------------
   The root is the fixed layer and its height is exactly the bar height,
   so one translateY(-100%) clears the entire Header and leaves behind no
   invisible fixed strip that could intercept pointer events at the top
   of the viewport.
   :not(.fgma-header-is-open) is a CSS-level guarantee that the hide can
   never be applied while a panel or Search is open, independently of JS
   ordering. The JS already drops the hidden class on open; this keeps the
   presentation correct on its own as well. */
.fgma-header-v1.fgma-header-is-hidden:not(.fgma-header-is-open) {
  transform: translateY(-100%);
}

/* ---- B2.3 STATE TRANSITIONS --------------------------------------
   The component owns its timing rather than inheriting the Elementor
   container defaults it currently falls back to. Durations match the
   values already computing on the Header, so the motion is unchanged,
   and only the two properties that actually animate are declared.
   Reduced motion needs no handling here: it is already neutralised
   globally by an !important transition-duration reset. */
.fgma-header-v1.fgma-header-v1 {
  transition: transform 0.4s ease;
}

.fgma-header-v1 .fgma-header-bar {
  transition: background-color 0.3s ease;
}

/* ===== R3.3C2B — SHELL CONTRACT (start) ===== */
/* A. Align --fgma-header-height token to actual Header height breakpoints: 70 / 80 / 85 at 600 / 900 */
@media (min-width: 900px) {
  :root { --fgma-header-height: 85px; }
}

/* B. STANDARD clearance — theme-shell contexts (Pages, CPT archives, search, 404) */
main.site-main { padding-top: var(--fgma-header-height); }

/* C. OVERLAY opt-out — top-level Elementor container only */
main.site-main:has(> .page-content > .elementor > .fgma-shell-overlay) { padding-top: 0px; }
body.home main.site-main { padding-top: 0px; }

/* D. SELF-OFFSET opt-out — clearance only, no overlay/contrast implications */
.elementor-location-single:has(> .fgma-shell-self-offset) { padding-top: 0px; }
main.site-main:has(> .page-content > .elementor > .fgma-shell-self-offset) { padding-top: 0px; }
/* ===== R3.3C2B — SHELL CONTRACT (end) ===== */


/* ===== R3.3Q FIX 1A — DESKTOP LOGO OPEN-STATE + MEGA-MENU LINK HOVER (start) =====
   Scope: GS-HDR-002 (logo turns white while the desktop Firm/Expertise panel is
   open) and GS-HDR-003 (mega-menu link hover-to-red). Both rules are purely
   additive overrides layered after section 6 (LOGO) and the Gate 3B static
   panel-link rule above — no existing declaration is edited or removed, and
   both new .elementor-2746s are strictly higher specificity than the static rules
   they override, so the override holds independent of source order too.

   GS-HDR-002 keys off `data-fgma-header-state`, an attribute fgma-header.js
   now sets to the exact current state name in the same place it already
   toggles `.fgma-header-is-open` (see applyState()). Selecting the two exact
   desktop values keeps this scoped to desktop Firm/Expertise only: Search,
   mobile-main, mobile-firm and mobile-expertise all set `.fgma-header-is-open`
   too but never this attribute to "desktop-firm"/"desktop-expertise", so they
   are structurally unreachable by this rule and keep their existing,
   already-validated behaviour — including the Gate 4B.1B mobile contract's
   explicit red-logo-unchanged-on-open. The (min-width: 960px) guard mirrors
   the JS's own BREAKPOINT_QUERY, so a narrow viewport can never match this
   even if the attribute were somehow present.

   GS-HDR-003 adds the one missing interaction layer Gate 3B's own comment
   documented as static/layout-only: hover and keyboard-focus colour for
   `.fgma-header-panel-link`. Desktop-only (mobile's identically-classed
   submenu links are already hidden below 960px by section 7's responsive
   switch, so no separate .elementor-2746 is needed to protect mobile).
   :focus-visible is included alongside :hover so keyboard users get the same
   visual state pointer users do; this changes colour only, not layout, focus
   order, or any existing outline/focus-ring rule.
   ===== */
@media (min-width: 960px) {
  .fgma-header-v1[data-fgma-header-state="desktop-firm"] .fgma-header-logo,
  .fgma-header-v1[data-fgma-header-state="desktop-expertise"] .fgma-header-logo {
    color: var(--fgma-white);
  }

  .fgma-header-v1 .fgma-header-panel-link:hover,
  .fgma-header-v1 .fgma-header-panel-link:focus-visible {
    color: var(--fgma-brand-red);
  }
}
/* ===== R3.3Q FIX 1A — DESKTOP LOGO OPEN-STATE + MEGA-MENU LINK HOVER (end) ===== */

/* ===== R3.3Q FINAL PRE-HANDOFF HOTFIX — SCROLLED MEGA-MENU CONTRAST (start) =====
   Root cause: B2.1 SCROLLED SURFACE (above) unconditionally forces
   `.fgma-header-bar` to an opaque white background whenever `.fgma-header-is-scrolled`
   is present, with no exception for the open desktop panel state. GS-HDR-002 (above)
   independently turns the logo white whenever `data-fgma-header-state` is
   "desktop-firm"/"desktop-expertise", regardless of scroll. When both are true at
   once, the white logo sits on B2.1's own opaque white bar and disappears.

   At top-of-page + open, this already looks correct today because the bar's default
   background is transparent (section 2/4) and `.fgma-header-overlay` — a true
   `position:fixed; inset:0` 40%-black scrim (z-index 100) — sits directly beneath the
   bar (z-index 101) and shows through it. Production's own equivalent full-viewport
   dimmer (`z-nav-panel-bg`, `nav:bg-black/40`) is likewise scroll-independent,
   confirming this dark backdrop was never meant to change with scroll position.

   The fix is exactly that: when scrolled AND a desktop panel is open, hold the bar
   transparent instead of letting B2.1 win, so the existing overlay shows through and
   the existing white-logo rule regains the contrast it already has at the top of the
   page. No new colour, no new overlay, no JS change -- both classes/attributes this
   .elementor-2746 keys off already exist and are already toggled correctly by
   fgma-header.js's own applyState()/scroll handler. Specificity (0,4,0) intentionally
   exceeds B2.1's (0,3,0) so this holds independent of source order too; placed after
   B2.1 in the cascade for readability regardless. Scoped to the two desktop
   attribute values only, mirroring GS-HDR-002's own scoping, so Search/mobile-main/
   mobile-firm/mobile-expertise (which also set .fgma-header-is-open but never this
   attribute) are structurally unreachable and keep their existing, unrelated,
   already-validated behaviour. */
@media (min-width: 960px) {
  .fgma-header-v1.fgma-header-is-scrolled[data-fgma-header-state="desktop-firm"] .fgma-header-bar,
  .fgma-header-v1.fgma-header-is-scrolled[data-fgma-header-state="desktop-expertise"] .fgma-header-bar {
    background-color: transparent;
  }
}
/* ===== R3.3Q FINAL PRE-HANDOFF HOTFIX — SCROLLED MEGA-MENU CONTRAST (end) ===== */

/* ===================================================================
   R3.7Q-001 — EXPERTISE SINGLE TOP INVERSE STATE (start)
   Scope: body.single-expertise only, desktop (min-width: 960px) only,
   matching the same breakpoint already used by GS-HDR-002/GS-HDR-003
   above and by fgma-header.js's own BREAKPOINT_QUERY.

   At the literal top/closed state (no .fgma-header-is-scrolled, no
   .fgma-header-is-open on the component root), this restores
   Production's contract: the header bar stays transparent (its
   existing default, untouched here) and the logo + desktop nav
   items (Firm, Expertise, Projects, Contact, Search) render white
   instead of the static red/black set in sections 6 and 8 above.

   Once .fgma-header-is-scrolled is added, these .elementor-2746s stop
   matching and the section 6/8 red/black rules regain control
   automatically. Once .fgma-header-is-open is added (desktop
   Firm/Expertise panel), these .elementor-2746s also stop matching, so the
   existing GS-HDR-002 white-logo-on-open rule and the mega-menu
   panel-link styling are unaffected. Mobile/tablet (<960px) is
   structurally unreachable, since the whole block sits inside the
   same (min-width: 960px) guard.

   No !important: specificity (0,5,1) for the logo rule and (0,6,1)
   for the nav rule already exceed the (0,2,0)/(0,3,0)/(0,4,0)
   static rules being overridden.
   =================================================================== */
@media (min-width: 960px) {
  body.single-expertise .fgma-header-v1:not(.fgma-header-is-scrolled):not(.fgma-header-is-open) .fgma-header-logo {
    color: var(--fgma-white);
  }

  body.single-expertise .fgma-header-v1:not(.fgma-header-is-scrolled):not(.fgma-header-is-open) .fgma-header-desktop-nav .fgma-header-trigger,
  body.single-expertise .fgma-header-v1:not(.fgma-header-is-scrolled):not(.fgma-header-is-open) .fgma-header-desktop-nav .fgma-header-nav-link {
    color: var(--fgma-white);
  }
}
/* R3.7Q-001 — EXPERTISE SINGLE TOP INVERSE STATE (end) */


/* ___________________________________________________________________
   R3.7Q-002 -- GLOBAL HEADER ACTIVE NAV STATE (start)
   Supersedes the earlier Expertise-only R3.7Q-002 block (removed).
   Driven entirely by the fgma-header.js resolver classes --
   .fgma-header-nav-is-current and .fgma-header-section-is-current --
   instead of WordPress body-route mappings, so one rule now covers
   Firm, Expertise, Projects, Contact and their eligible inner panel
   links (Community, Contact Us, Our Team, Insights under Firm;
   Architecture + Interior Design, Planning + Programming, etc. under
   Expertise). Never sets color, only text-decoration, so this stays
   additive and non-conflicting with the frozen R3.7Q-001 top-inverse
   rule and with .fgma-header-is-scrolled / .fgma-header-is-open.
   Selectors include the .fgma-header-desktop-nav ancestor for the
   top-level trigger/link items so specificity matches or exceeds the
   existing text-decoration:none base rules above (ties are broken by
   this block's later source position; no !important required).
   Desktop breakpoint reused from the existing .fgma-header-desktop-nav
   960px switch; no mobile active-state design is introduced here.
   ___________________________________________________________________ */
@media (min-width: 960px) {
  .fgma-header-v1 .fgma-header-desktop-nav .fgma-header-nav-link.fgma-header-nav-is-current,
  .fgma-header-v1 .fgma-header-desktop-nav .fgma-header-trigger.fgma-header-section-is-current,
  .fgma-header-v1 .fgma-header-panel-link.fgma-header-nav-is-current {
    text-decoration-line: underline;
    text-decoration-color: var(--fgma-brand-red);
    text-underline-offset: 8px;
  }
}
/* R3.7Q-002 -- GLOBAL HEADER ACTIVE NAV STATE (end) */


/* ===================================================================
   R3.7Q-053 — DESKTOP FIRM/EXPERTISE OPEN-STATE NAV COLOR (start)
   Root cause (confirmed live): opening the desktop Firm/Expertise mega-menu
   adds `.fgma-header-is-open` plus `data-fgma-header-state="desktop-firm"` /
   `"desktop-expertise"` to the header root (fgma-header.js's own
   applyState()) -- the same attribute GS-HDR-002 above already keys off for
   the logo -- but no equivalent open-state rule exists for the desktop nav
   trigger/link row, so it keeps section 8's static black. On
   `body.single-expertise`, R3.7Q-001's own `:not(.fgma-header-is-open)`
   guard (above) stops applying the moment the panel opens, which is what
   exposes the defect as a visible white -> black flip there, but the root
   cause -- the missing open-state rule -- is shared by every page type,
   confirmed live on the Home template too (no `single-expertise` class,
   same black-on-open behavior).

   Scoped to the two exact desktop attribute values only, mirroring
   GS-HDR-002's and the R3.3Q FINAL scrolled-contrast hotfix's own scoping
   above -- confirmed live that opening Search ALSO sets `.fgma-header-is-
   open` on the root (but `data-fgma-header-state="search"`, never
   "desktop-firm"/"desktop-expertise"), so a .elementor-2746 keyed on the class
   alone (as a plain `.fgma-header-is-open` would be) would incorrectly
   leak this white treatment into Search -- exactly what this ticket
   forbids. Keying on both the class AND the attribute together (like the
   existing scrolled-contrast hotfix already does) makes Search
   structurally unreachable here, the same way it already is for GS-HDR-002.

   `.fgma-header-trigger` (not `:not(.fgma-header-search-trigger)`, unlike
   section 8's own trigger rule) is used deliberately: the desktop Search
   trigger carries this same base class (confirmed live in its own markup)
   and sits inside `.fgma-header-desktop-nav`, so it is meant to -- and
   does -- turn white here too, matching Production's contract that Search
   is part of the same desktop nav row. The mobile menu trigger carries the
   same `.fgma-header-trigger` class but lives inside the sibling
   `.fgma-header-mobile-actions` container, never `.fgma-header-desktop-
   nav`, so it is structurally unreachable by this .elementor-2746 and the mobile
   white-panel system is untouched.

   The reduced-opacity treatment for the currently-open trigger is scoped
   to the SAME two attribute values for the identical reason: `[aria-
   expanded="true"]` alone is not enough, since the Search trigger also
   carries `aria-expanded="true"` while its own panel is open -- confirmed
   live -- and a bare `.fgma-header-is-open .fgma-header-trigger[aria-
   expanded="true"]` would incorrectly dim the Search icon during Search.
   `0.6` is not a new token: no `--fgma-opacity-*` custom property exists
   anywhere in this codebase (checked), and Production's own real, live
   equivalent (`hover:opacity-[0.6]` on its Firm/Expertise trigger) is
   0.6 -- reused as the literal value per this ticket's own "existing
   Production-equivalent value" instruction, not invented.

   No `!important`: `.fgma-header-v1.fgma-header-is-open[data-fgma-header-
   state="desktop-firm"] .fgma-header-desktop-nav .fgma-header-trigger` is
   (0,5,0) / (0,5,0) for the nav-link pair, exceeding section 8's own
   (0,4,0)/(0,3,0) outright (not merely tying it), independent of source
   order -- the same "exceed, don't just tie" posture already used by
   R3.7Q-001 and the R3.3Q FINAL scrolled-contrast hotfix above. R3.7Q-002's
   current-underline rule (above) sets only `text-decoration-*`, never
   `color`, so it is untouched and keeps rendering on top of this. GS-HDR-
   002's own logo rule, the panel-link hover-to-red rule, R3.7Q-001's
   top-inverse rule, the scrolled-contrast hotfix, and every mobile/Search
   rule elsewhere in this file are unedited -- this block is purely
   additive, appended after every existing rule.
   =================================================================== */
@media (min-width: 960px) {
  .fgma-header-v1.fgma-header-is-open[data-fgma-header-state="desktop-firm"] .fgma-header-desktop-nav .fgma-header-trigger,
  .fgma-header-v1.fgma-header-is-open[data-fgma-header-state="desktop-expertise"] .fgma-header-desktop-nav .fgma-header-trigger,
  .fgma-header-v1.fgma-header-is-open[data-fgma-header-state="desktop-firm"] .fgma-header-desktop-nav .fgma-header-nav-link,
  .fgma-header-v1.fgma-header-is-open[data-fgma-header-state="desktop-expertise"] .fgma-header-desktop-nav .fgma-header-nav-link {
    color: var(--fgma-white);
  }

  .fgma-header-v1.fgma-header-is-open[data-fgma-header-state="desktop-firm"] .fgma-header-trigger[aria-expanded="true"],
  .fgma-header-v1.fgma-header-is-open[data-fgma-header-state="desktop-expertise"] .fgma-header-trigger[aria-expanded="true"] {
    opacity: 0.6;
  }
}
/* R3.7Q-053 — DESKTOP FIRM/EXPERTISE OPEN-STATE NAV COLOR (end) *//* End custom CSS */